@topconsultnpm/sdkui-react-beta 6.13.40 → 6.13.41

package/lib/components/base/TMPanelManager.d.ts

@@ -5,6 +5,7 @@ type TMPanelManagerProps = {
     showToolbar?: boolean;
     toolbarMode?: number;
     gutters?: number;
+    minPanelPercent?: number;
 };
 declare const TMPanelManager: (props: TMPanelManagerProps) => import("react/jsx-runtime").JSX.Element;
 export default TMPanelManager;

package/lib/components/base/TMPanelManager.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { flattenPanels, isAtLeastOnePanelVisible, isPanelArray } from './TMPanelManagerUtils';
 import { SDKUI_Globals, IconInfo, SDKUI_Localizator } from '../../helper';
 import { useDeviceType, DeviceType } from './TMDeviceProvider';
 import TMPanel from './TMPanel';
 import TMPanelManagerToolbar from './TMPanelManagerToolbar';
 const TMPanelManager = (props) => {
-    const { panels, initialMobilePanelId, showToolbar = true, toolbarMode = 0, gutters = SDKUI_Globals.userSettings.themeSettings.gutters } = props;
+    const { panels, initialMobilePanelId, showToolbar = true, toolbarMode = 0, gutters = SDKUI_Globals.userSettings.themeSettings.gutters, minPanelPercent = 5 } = props;
     const deviceType = useDeviceType();
     let isMobile = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
     const allPanels = useMemo(() => flattenPanels(panels), [panels]);
@@ -15,9 +15,8 @@ const TMPanelManager = (props) => {
         allPanels.forEach(p => map.set(p.fullId, p));
         return map;
     }, [allPanels]);
-    const panelRefs = useRef({});
     // Active buttons state & panel map
-    const [activeButtons, setActiveButtons] = useState(() => Object.fromEntries(allPanels.map(p => [p.fullId, p.config.toolbarOptions?.isActive ?? false])));
+    const [activeButtons, setActiveButtons] = useState({});
     const [originalSizes, setOriginalSizes] = useState(new Map());
     const [panelsState, setPanelsState] = useState(new Map());
     const [maximizedPanelPath, setMaximizedPanelPath] = useState([]);
@@ -61,6 +60,12 @@ const TMPanelManager = (props) => {
         setOriginalSizes(newOriginalSizes);
         setPanelsState(newState);
     }, [panels]);
+    useEffect(() => {
+        if (allPanels.length > 0) {
+            const initialButtons = Object.fromEntries(allPanels.map(p => [p.fullId, p.config.toolbarOptions?.isActive ?? false]));
+            setActiveButtons(initialButtons);
+        }
+    }, [allPanels]);
     useEffect(() => {
         // If there are no original sizes available, exit early
         if (!originalSizes.size)
@@ -143,12 +148,12 @@ const TMPanelManager = (props) => {
                 let newCurrent = Math.min(currentSize + deltaPercent, 100);
                 let newNext = Math.min(nextSize - deltaPercent, 100);
                 // Enforce minimum panel size
-                if (newCurrent < 5) {
-                    newCurrent = 5;
+                if (newCurrent < minPanelPercent) {
+                    newCurrent = minPanelPercent;
                     newNext = total - newCurrent;
                 }
-                else if (newNext < 5) {
-                    newNext = 5;
+                else if (newNext < minPanelPercent) {
+                    newNext = minPanelPercent;
                     newCurrent = total - newNext;
                 }
                 // Safely get current and next panel data
@@ -219,7 +224,7 @@ const TMPanelManager = (props) => {
                 return newActive;
             });
         }
-    }, [isMobile]);
+    }, [isMobile, panelMap]);
     // Handler for starting to drag a column divider (for resizing panels horizontally)
     const onColumnMouseDown = (panelKey) => {
         setIsColumnDragging(panelKey); // Set the state to indicate which column is being dragged
@@ -404,11 +409,9 @@ const TMPanelManager = (props) => {
                 flexGrow: 1,
                 overflow: 'auto',
             };
-            return (_jsxs("div", { ref: el => {
-                    panelRefs.current[fullId] = el;
-                }, style: panelStyle, children: [_jsx("div", { style: contentStyle, children: hasChildren
+            return (_jsxs("div", { style: panelStyle, children: [_jsx("div", { style: contentStyle, children: hasChildren
                             ? renderPanels(panel.contentOptions.content, fullId, 'vertical')
-                            : panel.contentOptions?.panelContainer ? _jsx(TMPanel, { title: panel.contentOptions.panelContainer.title, totalItems: panel.contentOptions.panelContainer.totalItems, displayedItemsCount: panel.contentOptions.panelContainer.displayedItemsCount, onBack: panel.contentOptions.panelContainer.onBack, onClose: () => handleTogglePanel(fullId), onMaximize: () => handleToggleMaximize(fullId), onHeaderDoubleClick: () => handleToggleMaximize(fullId), allowMaximize: !isMobile, children: typeof panel.contentOptions.content === "function" ? panel.contentOptions.content(handleTogglePanel, handleToggleMaximize, handleVisibilityButton, handleDisableButton) : panel.contentOptions.content })
+                            : panel.contentOptions?.panelContainer ? _jsx(TMPanel, { title: panel.contentOptions.panelContainer.title, totalItems: panel.contentOptions.panelContainer.totalItems, displayedItemsCount: panel.contentOptions.panelContainer.displayedItemsCount, onBack: panel.contentOptions.panelContainer.onBack, onClose: () => handleTogglePanel(fullId), onMaximize: () => handleToggleMaximize(fullId), onHeaderDoubleClick: () => handleToggleMaximize(fullId), allowMaximize: !isMobile, toolbar: panel.contentOptions.panelContainer.toolbar, children: typeof panel.contentOptions.content === "function" ? panel.contentOptions.content(handleTogglePanel, handleToggleMaximize, handleVisibilityButton, handleDisableButton) : panel.contentOptions.content })
                                 :
                                     typeof panel.contentOptions.content === "function" ? panel.contentOptions.content(handleTogglePanel, handleToggleMaximize, handleVisibilityButton, handleDisableButton) : panel.contentOptions.content }), !isLastVisible && isActive && maximizedPanelPath.length === 0 && (_jsx("div", { style: {
                             cursor: direction === 'horizontal' ? 'col-resize' : 'row-resize',
@@ -431,7 +434,7 @@ const TMPanelManager = (props) => {
                         } }))] }, fullId));
         });
     };
-    return (_jsxs("div", { style: { display: 'flex', flexDirection: isMobile ? 'column' : 'row', height: '100%', width: '100%', gap: gutters }, children: [_jsx("div", { style: {
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: isMobile ? 'column' : 'row', height: '100%', width: '100%', gap: !isMobile ? gutters : 0 }, children: [_jsx("div", { style: {
                     display: 'flex',
                     flexGrow: 1,
                     width: isAtLeastOnePanelVisible(activeButtons) ? `calc(100% - ${showToolbar ? (isMobile ? 0 : 70) : 0}px)` : '0%',

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, useState } from 'react';
+import { useCallback, useEffect, useMemo, 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, IconPreview, IconBoard, IconDcmtTypeSys, IconCheckFile, IconDetailDcmts, SDKUI_Localizator, svgToString, IconMail, IconDcmtTypeOnlyMetadata, IconCopy, IconMultipleSelection, IconMenuVertical, SDKUI_Globals } from '../../../helper';
+import { genUniqueId, getExceptionMessage, IconFolder, IconShow, IconBoard, IconDcmtTypeSys, IconCheckFile, IconDetailDcmts, SDKUI_Localizator, svgToString, IconMail, IconDcmtTypeOnlyMetadata, IconCopy, IconMultipleSelection, IconMenuVertical, IconSearchCheck, IconDataList } from '../../../helper';
 import { hasDetailRelations } from '../../../helper/dcmtsHelper';
 import { FormModes, SearchResultContext } from '../../../ts';
 import { TMColors } from '../../../utils/theme';
@@ -13,7 +13,6 @@ import { StyledDivHorizontal, StyledBadge } from '../../base/Styled';
 import ShowAlert from '../../base/TMAlert';
 import TMButton from '../../base/TMButton';
 import { DeviceType } from '../../base/TMDeviceProvider';
-import { TMSplitterLayout, TMLayoutItem } from '../../base/TMLayout';
 import { TMExceptionBoxManager } from '../../base/TMPopUp';
 import TMSpinner from '../../base/TMSpinner';
 import { TMLayoutWaitingContainer } from '../../base/TMWaitPanel';
@@ -24,8 +23,7 @@ import TMDataListItemViewer from '../../viewers/TMDataListItemViewer';
 import { TMDcmtTypeTooltip } from '../../viewers/TMTidViewer';
 import TMTreeView from '../../base/TMTreeView';
 import TMDcmtIcon from './TMDcmtIcon';
-import TMPanel from '../../base/TMPanel';
-import TMCommandsPanel from '../../sidebar/TMCommandsPanel';
+import TMPanelManager from '../../base/TMPanelManager';
 let abortController = new AbortController();
 const TMMasterDetailDcmts = ({ deviceType, inputDcmts, isForMaster, showCurrentDcmtIndicator = true, allowNavigation, canNext, canPrev, onNext, onPrev, onBack, appendMasterDcmts, onTaskCreateRequest }) => {
     const [id, setID] = useState('');
@@ -380,28 +378,137 @@ 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;
-    return (_jsxs("div", { style: {
-            display: 'flex',
-            flexDirection: isMobile ? 'column' : 'row',
-            justifyContent: 'space-between',
-            gap: SDKUI_Globals.userSettings.themeSettings.gutters,
-            width: '100%',
-            height: '100%',
-        }, children: [_jsx("div", { style: { flex: 1, minWidth: 0, height: '100%' }, children: _jsx(TMLayoutWaitingContainer, { direction: 'vertical', 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: focusedItem != undefined, separatorActiveColor: 'transparent', min: ['0', '0'], start: focusedItem && (showDcmtForm || showPreview || showBoard || showSysMetadata) ? deviceType != DeviceType.MOBILE ? ["40%", "60%"] : ["0%", "100%"] : ["100%", "0%"], children: [_jsx(TMPanel, { title: getTitle(), toolbar: toolbar, onBack: onBack, 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 }) })
-                                        :
-                                            _jsx(TMTreeView, { dataSource: data, allowMultipleSelection: allowMultipleSelection, calculateItemsForNode: calculateItemsForNode, itemRender: renderItem, focusedItem: focusedItem, selectedItems: selectedItems, onFocusedItemChanged: handleFocusedItemChanged, onSelectionChanged: handleSelectedItemsChanged, onDataChanged: (items) => setData(updateHiddenProperty(items)) }) }), _jsx(TMLayoutItem, { 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, searchResults: focusedItem?.searchResult ?? [], showSearchResultSidebar: false, onClose: () => { setShowDcmtForm(false); }, onClosePreviewPanel: () => { setShowPreview(false); }, onTaskCreateRequest: onTaskCreateRequest }) })] }, "TMDetails-panel") }) }), _jsx(TMCommandsPanel, { isMobile: isMobile, items: [
-                    { icon: _jsx(IconShow, {}), selected: showPreview, onClick: () => { setShowPreview(!showPreview); } },
-                    { icon: _jsx(IconPreview, {}), selected: showDcmtForm, onClick: () => { setShowDcmtForm(!showDcmtForm); } },
-                    { icon: _jsx(IconBoard, {}), selected: showBoard, onClick: () => { setShowSysMetadata(false); setShowBoard(!showBoard); } },
-                    { icon: _jsx(IconDcmtTypeSys, {}), selected: showSysMetadata, onClick: () => { setShowBoard(false); setShowSysMetadata(!showSysMetadata); } },
-                    { icon: _jsx(IconCheckFile, {}), selected: showZeroDcmts, onClick: () => { setShowZeroDcmts(!showZeroDcmts); } },
-                    { icon: _jsx(IconDetailDcmts, { transform: 'scale(-1, 1)' }), disabled: !focusedItem?.isDcmt, onClick: () => { appendMasterDcmts?.(focusedItem?.tid, focusedItem?.did); } }
-                ] })] }));
+    const renderTMTreeView = (handleTogglePanel) => _jsx(_Fragment, { 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 }) })
+                :
+                    _jsx(TMTreeView, { dataSource: data, allowMultipleSelection: allowMultipleSelection, calculateItemsForNode: calculateItemsForNode, itemRender: renderItem, focusedItem: focusedItem, selectedItems: selectedItems, onFocusedItemChanged: handleFocusedItemChanged, onSelectionChanged: handleSelectedItemsChanged, onDataChanged: (items) => setData(updateHiddenProperty(items)) }) });
+    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, showSearchResultSidebar: false, onClose: () => { setShowDcmtForm(false); }, onClosePreviewPanel: () => {
+                        setShowPreview(false);
+                        handleTogglePanel("commandPreview");
+                    }, onTaskCreateRequest: onTaskCreateRequest }) }));
+    }, [focusedItem, showPreview, showBoard, showSysMetadata, showDcmtForm, deviceType]);
+    const panelsConfig = [
+        {
+            id: 'TMTreeView',
+            name: getTitle(),
+            toolbarOptions: { icon: _jsx(IconDataList, { fontSize: 24 }), visible: true, isActive: true, orderNumber: 1 },
+            type: 'content',
+            contentOptions: {
+                visible: true,
+                height: '100%',
+                width: '20%',
+                content: renderTMTreeView,
+                panelContainer: {
+                    title: getTitle(),
+                    allowMaximize: !isMobile,
+                    onBack: onBack,
+                    toolbar: toolbar
+                },
+            },
+        },
+        {
+            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',
+            contentOptions: {
+                visible: true,
+                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,
+                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,
+            },
+            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);
+                },
+            },
+        },
+    ];
+    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 }) }));
 };
 export default TMMasterDetailDcmts;
 function getMetadataKeys(obj) {

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

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { SharingModes, SDK_Globals, SDK_Localizator } from '@topconsultnpm/sdk-ts-beta';
 import { LocalizeSharingModes } from '../../../helper/Enum_Localizator';
 import ContextMenu from 'devextreme-react/cjs/context-menu';
-import { SDKUI_Localizator, Globalization, svgToString, IconStar, IconDelete, IconDashboard, IconSavedQuery, IconApply, IconInfo } from '../../../helper';
+import { SDKUI_Localizator, Globalization, svgToString, IconStar, IconDelete, IconDashboard, IconSavedQuery, IconApply, IconInfo, IconCloseOutline } from '../../../helper';
 import { TMColors } from '../../../utils/theme';
 import ShowAlert from '../../base/TMAlert';
 import TMButton from '../../base/TMButton';
@@ -13,6 +13,8 @@ import TMSpinner from '../../base/TMSpinner';
 import TMTooltip from '../../base/TMTooltip';
 import { TMSearchBar } from '../../sidebar/TMHeader';
 import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
+import { StyledDivHorizontal, StyledOffCanvasPanel } from '../../base/Styled';
+import { useOutsideClick } from '../../../hooks/useOutsideClick';
 const StyledSqdItem = styled.div `
     display: flex;
     flex-direction: column;
@@ -33,9 +35,13 @@ const StyledSqdItem = styled.div `
         left: -2px;
         top: 50%;
         transform: translateY(-50%);
-        opacity: ${({ $isMobile }) => ($isMobile ? 1 : 0)};
+        opacity: 0;
         transition: opacity 0.2s;
-        pointer-events: ${({ $isMobile }) => ($isMobile ? 'auto' : 'none')};
+        pointer-events: none;
+        // On mobile, never show
+        ${({ $isMobile }) => $isMobile && `
+            display: none !important;
+        `}
     }
 
     &:hover .info-icon {
@@ -62,13 +68,31 @@ export const getTooltipBySqd = (sqd) => {
     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)] })] }));
 };
 const initialSQDsMaxItems = 12;
-const SavedQueryContexMenu = ({ sqd, manageDefault, deleteAsync, favManageAsync, setDefaultAsync }) => _jsx(ContextMenu, { items: manageDefault ? [
-        { text: SDKUI_Localizator.SetAsDefault2, icon: svgToString(_jsx(IconStar, { color: 'rgb(248, 215, 117)' })) },
-        { text: SDKUI_Localizator.Delete, disabled: (sqd.id == 1), icon: svgToString(_jsx(IconDelete, {})) },
-        { text: SDKUI_Localizator.AddToHomePage, disabled: (sqd.id == 1), icon: svgToString(_jsx(IconDashboard, {})) }
-    ] : [
-        { text: SDKUI_Localizator.Delete, disabled: (sqd.id == 1), icon: svgToString(_jsx(IconDelete, {})) },
-        { text: SDKUI_Localizator.AddToHomePage, disabled: (sqd.id == 1), icon: svgToString(_jsx(IconDashboard, {})) }
+const SavedQueryContexMenu = ({ sqd, manageDefault, isMobile, deleteAsync, favManageAsync, setDefaultAsync, setInfoSQD }) => _jsx(ContextMenu, { items: [
+        ...(manageDefault ? [{
+                text: SDKUI_Localizator.SetAsDefault2,
+                icon: svgToString(_jsx(IconStar, { color: 'rgb(248, 215, 117)' })),
+                onClick: () => setDefaultAsync(sqd)
+            }] : []),
+        {
+            text: SDKUI_Localizator.Delete,
+            disabled: (sqd.id == 1),
+            icon: svgToString(_jsx(IconDelete, {})),
+            onClick: () => deleteAsync(sqd)
+        },
+        {
+            text: SDKUI_Localizator.AddToHomePage,
+            disabled: (sqd.id == 1),
+            icon: svgToString(_jsx(IconDashboard, {})),
+            onClick: () => favManageAsync?.(sqd)
+        },
+        ...(isMobile ? [
+            {
+                text: SDKUI_Localizator.About,
+                icon: svgToString(_jsx(IconInfo, { color: TMColors.info })),
+                onClick: () => { setInfoSQD?.(sqd); }
+            }
+        ] : [])
     ], target: `#sqd-item-${sqd.id}`, onItemClick: (e) => {
         if (e.itemIndex == 0)
             setDefaultAsync?.(sqd);
@@ -82,8 +106,12 @@ const TMSavedQuerySelector = React.memo(({ items, selectedId, allowShowSearch =
     const [selectedItem, setSelectedItem] = useState();
     const [searchText, setSearchText] = useState('');
     const [showAllRoot, setShowAllRoot] = useState(false);
+    const [infoSQD, setInfoSQD] = useState();
     const deviceType = useDeviceType();
     const isMobile = deviceType === DeviceType.MOBILE;
+    const panelRef = useOutsideClick(() => {
+        setInfoSQD(undefined);
+    });
     useEffect(() => { loadDataAsync(false); }, [items]);
     useEffect(() => { setSelectedItem(dataSource.find(o => o.id == selectedId)); }, [selectedId, dataSource]);
     const loadDataAsync = async (refreshCache) => {
@@ -176,9 +204,9 @@ const TMSavedQuerySelector = React.memo(({ items, selectedId, allowShowSearch =
                                     justifyContent: 'center',
                                     fontSize: '1rem',
                                     fontWeight: 'bold'
-                                }, children: _jsx(IconApply, { fontSize: 24, color: 'green' }) }), _jsx(SavedQueryContexMenu, { sqd: sqd, manageDefault: manageDefault, setDefaultAsync: () => setDefaultSQDAsync(sqd), deleteAsync: () => deleteSQDAsync(sqd), favManageAsync: () => favManageSQDAsync(sqd) })] }, sqd.id))) }), dataSource.length > initialSQDsMaxItems && searchText.length <= 0 &&
+                                }, children: _jsx(IconApply, { fontSize: 24, color: 'green' }) }), _jsx(SavedQueryContexMenu, { sqd: sqd, manageDefault: manageDefault, isMobile: isMobile, setInfoSQD: setInfoSQD, setDefaultAsync: () => setDefaultSQDAsync(sqd), deleteAsync: () => deleteSQDAsync(sqd), favManageAsync: () => favManageSQDAsync(sqd) })] }, sqd.id))) }), dataSource.length > initialSQDsMaxItems && searchText.length <= 0 &&
                 _jsx(TMButton, { elementStyle: { display: 'flex', justifyContent: 'flex-end', padding: '10px' }, btnStyle: 'icon', caption: showAllRoot ? "Mostra meno" : `Mostra tutte le ricerche (+${dataSource.length - initialSQDsMaxItems})`, icon: showAllRoot ?
                         _jsx("div", { style: { backgroundColor: TMColors.primaryColor, minWidth: '30px', minHeight: '30px', borderRadius: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx("p", { style: { color: 'white' }, children: `-${dataSource.length - initialSQDsMaxItems}` }) }) :
-                        _jsx("div", { style: { backgroundColor: TMColors.primaryColor, minWidth: '30px', minHeight: '30px', borderRadius: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx("p", { style: { color: 'white' }, children: `+${dataSource.length - initialSQDsMaxItems}` }) }), onClick: () => setShowAllRoot(!showAllRoot) })] }));
+                        _jsx("div", { style: { backgroundColor: TMColors.primaryColor, minWidth: '30px', minHeight: '30px', borderRadius: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx("p", { style: { color: 'white' }, children: `+${dataSource.length - initialSQDsMaxItems}` }) }), onClick: () => setShowAllRoot(!showAllRoot) }), _jsxs(StyledOffCanvasPanel, { ref: panelRef, "$isOpen": isMobile && infoSQD !== undefined, children: [_jsxs(StyledDivHorizontal, { style: { gap: 10, padding: '10px 8px', width: '100%', alignItems: 'center' }, children: [_jsx("p", { style: { fontSize: '1.1rem', fontWeight: 'bold' }, children: `${SDK_Localizator.SavedQuery} - ${SDKUI_Localizator.About}` }), _jsx(IconCloseOutline, { style: { marginLeft: 'auto', cursor: 'pointer' }, onClick: () => setInfoSQD(undefined) })] }), getTooltipBySqd(infoSQD)] })] }));
 });
 export default TMSavedQuerySelector;

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useMemo, 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';
@@ -325,6 +325,8 @@ const TMSearchResult = ({ context = SearchResultContext.METADATA_SEARCH, isVisib
                 break;
         }
     };
+    const searchResutlToolbar = _jsxs(_Fragment, { children: [context !== SearchResultContext.METADATA_SEARCH && fromDTD?.templateTID === TemplateTIDs.WF_WIApprView && _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 }), (dcmtsReturned != dcmtsFound) && _jsx("p", { style: { backgroundColor: `white`, color: TMColors.primaryColor, textAlign: 'center', padding: '1px 4px', borderRadius: '3px', display: 'flex' }, children: `${dcmtsReturned}/${dcmtsFound} restituiti` }), context === SearchResultContext.FAVORITES_AND_RECENTS &&
+                _jsx("div", { style: { display: 'flex', alignItems: 'center', gap: '5px' }, children: _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconDelete, { color: 'white' }), caption: "Rimuovi da " + (selectedSearchResult?.category === "Favorites" ? '"Preferiti"' : '"Recenti"'), disabled: getSelectedDcmtsOrFocused(selectedItems, focusedItem).length <= 0, onClick: removeDcmtFromFavsOrRecents }) }), _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconRefresh, { color: 'white' }), caption: SDKUI_Localizator.Refresh, onClick: onRefreshSearchAsync }), _jsx(IconMenuVertical, { id: `commands-header-${id}`, color: 'white', cursor: 'pointer' }), _jsx(CommandsContextMenu, { target: `#commands-header-${id}`, menuItems: getCommandsMenuItems(fromDTD, selectedItems, focusedItem, context, showFloatingBar, setShowFloatingBar, openFormHandler, downloadDcmtsAsync, runOperationAsync, onRefreshSearchAsync, refreshSelectionDataRowsAsync, onRefreshAfterAddDcmtToFavs, confirmFormat, openConfirmAttachmentsDialog, openTaskFormHandler, openDetailDcmtsFormHandler, openMasterDcmtsFormHandler, openBatchUpdateFormHandler) })] });
     const middlePanelToolbar = _jsxs("div", { style: { width: 'max-content', display: 'flex', alignItems: 'center', gap: '10px' }, children: [_jsx(TMSaveFormButtonPrevious, { btnStyle: 'icon', isModified: false, iconColor: TMColors.default_background, formMode: FormModes.ReadOnly, canPrev: canNavigateHandler('prev'), onPrev: () => onNavigateHandler('prev') }), _jsx(TMSaveFormButtonNext, { btnStyle: 'icon', isModified: false, iconColor: TMColors.default_background, formMode: FormModes.ReadOnly, canNext: canNavigateHandler('next'), onNext: () => onNavigateHandler('next') })] });
     const handleAddItem = (tid, did) => {
         let newItem = { TID: tid ?? 0, DID: did ?? 0 };
@@ -347,7 +349,10 @@ const TMSearchResult = ({ context = SearchResultContext.METADATA_SEARCH, isVisib
                                         _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) })] }), _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 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);
@@ -370,15 +375,20 @@ const TMSearchResult = ({ context = SearchResultContext.METADATA_SEARCH, isVisib
                     allowMaximize: !isMobile,
                     onBack: !isClosable ? onBack : undefined,
                     onClose: isClosable ? onBack : undefined,
-                    toolbar: _jsxs(_Fragment, { children: [context !== SearchResultContext.METADATA_SEARCH && fromDTD?.templateTID === TemplateTIDs.WF_WIApprView && _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 }), (dcmtsReturned != dcmtsFound) && _jsx("p", { style: { backgroundColor: `white`, color: TMColors.primaryColor, textAlign: 'center', padding: '1px 4px', borderRadius: '3px', display: 'flex' }, children: `${dcmtsReturned}/${dcmtsFound} restituiti` }), context === SearchResultContext.FAVORITES_AND_RECENTS &&
-                                _jsx("div", { style: { display: 'flex', alignItems: 'center', gap: '5px' }, children: _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconDelete, { color: 'white' }), caption: "Rimuovi da " + (selectedSearchResult?.category === "Favorites" ? '"Preferiti"' : '"Recenti"'), disabled: getSelectedDcmtsOrFocused(selectedItems, focusedItem).length <= 0, onClick: removeDcmtFromFavsOrRecents }) }), _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconRefresh, { color: 'white' }), caption: SDKUI_Localizator.Refresh, onClick: onRefreshSearchAsync }), _jsx(IconMenuVertical, { id: `commands-header-${id}`, color: 'white', cursor: 'pointer' }), _jsx(CommandsContextMenu, { target: `#commands-header-${id}`, menuItems: getCommandsMenuItems(fromDTD, selectedItems, focusedItem, context, showFloatingBar, setShowFloatingBar, openFormHandler, downloadDcmtsAsync, runOperationAsync, onRefreshSearchAsync, refreshSelectionDataRowsAsync, onRefreshAfterAddDcmtToFavs, confirmFormat, openConfirmAttachmentsDialog, openTaskFormHandler, openDetailDcmtsFormHandler, openMasterDcmtsFormHandler, openBatchUpdateFormHandler) })] })
+                    toolbar: searchResutlToolbar
                 },
             },
         },
         {
             id: 'TMBlog',
             name: SDKUI_Localizator.BlogCase,
-            toolbarOptions: { icon: _jsx(IconBoard, { fontSize: 24 }), disabled: !focusedItem?.DID, visible: true, isActive: false, orderNumber: 2 },
+            toolbarOptions: {
+                icon: _jsx(IconBoard, { fontSize: 24 }),
+                disabled: !focusedItem?.DID,
+                visible: true,
+                isActive: showBoard,
+                orderNumber: 2
+            },
             type: 'content',
             contentOptions: {
                 visible: true,
@@ -395,7 +405,13 @@ const TMSearchResult = ({ context = SearchResultContext.METADATA_SEARCH, isVisib
         {
             id: 'TMSysMetadata',
             name: SDKUI_Localizator.MetadataSystem,
-            toolbarOptions: { icon: _jsx(IconDcmtTypeSys, { fontSize: 24 }), visible: true, disabled: !focusedItem?.DID, isActive: false, orderNumber: 3 },
+            toolbarOptions: {
+                icon: _jsx(IconDcmtTypeSys, { fontSize: 24 }),
+                visible: true,
+                disabled: !focusedItem?.DID,
+                isActive: showSysMetadata,
+                orderNumber: 3
+            },
             type: 'content',
             contentOptions: {
                 visible: true,
@@ -412,7 +428,13 @@ const TMSearchResult = ({ context = SearchResultContext.METADATA_SEARCH, isVisib
         {
             id: 'TMDcmtPreview',
             name: SDKUI_Localizator.PreviewDocument,
-            toolbarOptions: { icon: _jsx(IconShow, { fontSize: 24 }), disabled: !focusedItem?.DID && fromDTD?.archiveConstraint === ArchiveConstraints.OnlyMetadata, visible: true, isActive: true, orderNumber: 4 },
+            toolbarOptions: {
+                icon: _jsx(IconShow, { fontSize: 24 }),
+                disabled: !focusedItem?.DID && fromDTD?.archiveConstraint === ArchiveConstraints.OnlyMetadata,
+                visible: true,
+                isActive: showPreview,
+                orderNumber: 4
+            },
             type: 'content',
             contentOptions: {
                 visible: true,
@@ -465,6 +487,15 @@ const TMSearchResult = ({ context = SearchResultContext.METADATA_SEARCH, isVisib
             },
         },
     ];
+    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',
@@ -472,7 +503,7 @@ 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: 'TMSearchResult', 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(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) => {
                         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); } }) })] }));
 };

package/lib/components/grids/TMRecentsManager.js

@@ -4,11 +4,13 @@ import { useEffect, useState } from 'react';
 import ReactDOMServer from 'react-dom/server';
 import { DcmtTypeListCacheService } from '@topconsultnpm/sdk-ts-beta';
 import ContextMenu from 'devextreme-react/cjs/context-menu';
-import { IconDelete, SDKUI_Localizator, IconApply, IconInfo } from '../../helper';
+import { IconDelete, SDKUI_Localizator, IconApply, IconInfo, IconCloseOutline } from '../../helper';
 import { TMColors } from '../../utils/theme';
 import { DeviceType } from '../base/TMDeviceProvider';
 import { TMDcmtTypeChooserForm } from '../choosers/TMDcmtTypeChooser';
-import TMTidViewer, { TMDcmtTypeTooltip } from '../viewers/TMTidViewer';
+import TMTidViewer, { renderDTDTooltipContent, TMDcmtTypeTooltip } from '../viewers/TMTidViewer';
+import { StyledDivHorizontal, StyledOffCanvasPanel } from '../base/Styled';
+import { useOutsideClick } from '../../hooks/useOutsideClick';
 const StyledRecentTidItem = styled.div `
     display: flex;
     flex-direction: column;
@@ -27,9 +29,13 @@ const StyledRecentTidItem = styled.div `
         left: -7px;
         top: 50%;
         transform: translateY(-50%);
-        opacity: ${({ $isMobile }) => ($isMobile ? 1 : 0)};
+        opacity: 0;
         transition: opacity 0.2s;
-        pointer-events: ${({ $isMobile }) => ($isMobile ? 'auto' : 'none')};
+        pointer-events: none;
+        // On mobile, never show
+        ${({ $isMobile }) => $isMobile && `
+            display: none !important;
+        `}
     }
 
     &:hover .info-icon {
@@ -46,13 +52,18 @@ const iconDelete = () => ReactDOMServer.renderToString(_jsx(IconDelete, {}));
 const TMRecentsManager = ({ deviceType, mruTIDs, currentMruTID, onSelectedTID, onDeletedTID }) => {
     const [showDcmtTypeChooser, setShowDcmtTypeChooser] = useState(false);
     const [recentDcmtTypes, setRecentDcmtTypes] = useState([]);
+    const [infoDTD, setInfoDTD] = useState();
     useEffect(() => {
         DcmtTypeListCacheService.GetAllWithoutMetadataAsync().then((allTypes) => {
             const filtered = allTypes.filter(dt => mruTIDs.includes(dt.id));
             setRecentDcmtTypes(filtered);
         });
     }, [mruTIDs]);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: { overflowY: deviceType === DeviceType.MOBILE ? 'auto' : undefined, display: 'flex', flexDirection: 'column', padding: '5px', width: '100%' }, children: [_jsx(StyledRecentTidItem, { id: `tid-${0}`, "$isMobile": deviceType === DeviceType.MOBILE, onClick: () => { setShowDcmtTypeChooser(true); }, children: _jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%' }, children: _jsx("p", { style: {
+    const panelRef = useOutsideClick(() => {
+        setInfoDTD(undefined);
+    });
+    const isMobile = deviceType === DeviceType.MOBILE;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: { overflowY: isMobile ? 'auto' : undefined, display: 'flex', flexDirection: 'column', padding: '5px', width: '100%' }, children: [_jsx(StyledRecentTidItem, { id: `tid-${0}`, "$isMobile": isMobile, onClick: () => { setShowDcmtTypeChooser(true); }, children: _jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%' }, children: _jsx("p", { style: {
                                     color: TMColors.primaryColor,
                                     fontSize: '1rem',
                                     fontWeight: 600,
@@ -60,7 +71,20 @@ const TMRecentsManager = ({ deviceType, mruTIDs, currentMruTID, onSelectedTID, o
                                     overflow: 'hidden',
                                     textOverflow: 'ellipsis'
                                 }, children: `${SDKUI_Localizator.AllDcmtTypes} (${DcmtTypeListCacheService.CacheCount(true)})` }) }) }, 0), recentDcmtTypes.map((dtd) => {
-                        return (_jsxs(StyledRecentTidItem, { id: `tid-${dtd.id}`, onClick: () => { onSelectedTID?.(dtd.id ?? 0); }, children: [_jsx("span", { className: "info-icon", children: _jsx(TMDcmtTypeTooltip, { dtd: dtd, children: _jsx(IconInfo, { color: TMColors.primaryColor }) }) }), _jsx("div", { style: { display: 'flex', justifyContent: 'center', width: '100%' }, children: _jsx(TMTidViewer, { tid: dtd.id, color: TMColors.primaryColor, showIcon: false }) }), _jsx(ContextMenu, { dataSource: [{ text: SDKUI_Localizator.Remove, icon: iconDelete(), }], target: `#tid-${dtd.id}`, onItemClick: () => { onDeletedTID?.(dtd.id ?? 0); } }), currentMruTID == dtd.id &&
+                        return (_jsxs(StyledRecentTidItem, { id: `tid-${dtd.id}`, "$isMobile": isMobile, onClick: () => { onSelectedTID?.(dtd.id ?? 0); }, children: [_jsx("span", { className: "info-icon", children: _jsx(TMDcmtTypeTooltip, { dtd: dtd, children: _jsx(IconInfo, { color: TMColors.info }) }) }), _jsx("div", { style: { display: 'flex', justifyContent: 'center', width: '100%' }, children: _jsx(TMTidViewer, { tid: dtd.id, color: TMColors.primaryColor, showIcon: false }) }), _jsx(ContextMenu, { dataSource: [
+                                        {
+                                            text: SDKUI_Localizator.Remove,
+                                            icon: iconDelete(),
+                                            onClick: () => { onDeletedTID?.(dtd.id ?? 0); }
+                                        },
+                                        ...(isMobile ? [
+                                            {
+                                                text: SDKUI_Localizator.About,
+                                                icon: ReactDOMServer.renderToString(_jsx(IconInfo, { color: TMColors.info })),
+                                                onClick: () => { setInfoDTD(dtd); }
+                                            }
+                                        ] : [])
+                                    ], target: `#tid-${dtd.id}` }), currentMruTID == dtd.id &&
                                     _jsx("div", { style: {
                                             width: '24px',
                                             height: '24px',
@@ -74,6 +98,6 @@ const TMRecentsManager = ({ deviceType, mruTIDs, currentMruTID, onSelectedTID, o
                                             fontSize: '1rem',
                                             fontWeight: 'bold'
                                         }, children: _jsx(IconApply, { fontSize: 24, color: 'green' }) })] }, dtd.id));
-                    })] }), showDcmtTypeChooser && _jsx(TMDcmtTypeChooserForm, { onClose: () => setShowDcmtTypeChooser(false), onChoose: (tids) => { onSelectedTID?.(tids?.[0] ?? 0); } })] }));
+                    })] }), showDcmtTypeChooser && _jsx(TMDcmtTypeChooserForm, { onClose: () => setShowDcmtTypeChooser(false), onChoose: (tids) => { onSelectedTID?.(tids?.[0] ?? 0); } }), _jsxs(StyledOffCanvasPanel, { ref: panelRef, "$isOpen": isMobile && infoDTD !== undefined, children: [_jsxs(StyledDivHorizontal, { style: { gap: 10, padding: '10px 8px', width: '100%', alignItems: 'center' }, children: [_jsx("p", { style: { fontSize: '1.1rem', fontWeight: 'bold' }, children: `${SDKUI_Localizator.DcmtType} - ${SDKUI_Localizator.About}` }), _jsx(IconCloseOutline, { style: { marginLeft: 'auto', cursor: 'pointer' }, onClick: () => setInfoDTD(undefined) })] }), renderDTDTooltipContent(infoDTD)] })] }));
 };
 export default TMRecentsManager;

package/lib/components/layout/TMPanelLayout.d.ts

@@ -0,0 +1,39 @@
+import React, { ReactNode } from 'react';
+type TMPanelManagerNewProps = {
+    children: ReactNode;
+    showToolbar?: boolean;
+    emptyContent?: ReactNode;
+};
+type TMPanelGroupProps = {
+    orientation?: 'horizontal' | 'vertical';
+    allowItemResize?: boolean;
+    gutters?: number;
+    panelVisibility?: boolean[];
+    onTogglePanel?: (idx: number) => void;
+    panelLabels?: string[];
+    children: ReactNode;
+    parentVisibility?: boolean;
+    parentPanelCount?: number;
+    parentPanelVisibility?: boolean[];
+    parentOnTogglePanel?: (idx: number, path: number[]) => void;
+    path?: number[];
+};
+type TMPanelItemProps = {
+    width?: string;
+    height?: string;
+    minWidth?: string;
+    minHeight?: string;
+    children: ReactNode;
+    style?: React.CSSProperties;
+    label?: string;
+};
+export declare const TMPanelItem: React.FC<TMPanelItemProps>;
+export declare const TMPanelGroup: React.FC<TMPanelGroupProps>;
+declare const TMPanelLayout: React.FC<TMPanelManagerNewProps>;
+export default TMPanelLayout;
+type TMPanelLayoutToolbarProps = {
+    panelLabels: string[];
+    panelVisibility: boolean[];
+    onTogglePanel: (idx: number) => void;
+};
+export declare const TMPanelLayoutToolbar: React.FC<TMPanelLayoutToolbarProps>;

package/lib/components/layout/TMPanelLayout.js

@@ -0,0 +1,320 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useRef, useState, Children, cloneElement, isValidElement, useEffect, useMemo, } from 'react';
+import { SDKUI_Globals } from '../../helper';
+export const TMPanelItem = (props) => (_jsx("div", { style: {
+        flexBasis: props.width || props.height || 'auto',
+        minWidth: props.minWidth,
+        minHeight: props.minHeight,
+        flexGrow: 0,
+        flexShrink: 0,
+        height: '100%',
+        width: '100%',
+        overflow: 'auto',
+        position: 'relative',
+        boxSizing: 'border-box',
+        display: 'flex',
+        flexDirection: 'column',
+        ...props.style,
+    }, children: props.children }));
+// Utility: recursively determine if a child is a group
+function isGroup(child) {
+    return child?.type?.displayName === 'TMPanelGroup';
+}
+TMPanelItem.displayName = 'TMPanelItem';
+export const TMPanelGroup = ({ orientation = 'horizontal', allowItemResize = false, gutters = SDKUI_Globals.userSettings.themeSettings.gutters, panelVisibility, onTogglePanel, panelLabels, children, parentVisibility = true, parentPanelCount, parentPanelVisibility, parentOnTogglePanel, path = [], ...rest }) => {
+    const childArray = Children.toArray(children).filter(Boolean);
+    const panelCount = childArray.length;
+    // Initial sizes in percent
+    const [sizes, setSizes] = useState(childArray.map((child) => orientation === 'horizontal'
+        ? child.props.width
+            ? parseFloat(child.props.width)
+            : 100 / panelCount
+        : child.props.height
+            ? parseFloat(child.props.height)
+            : 100 / panelCount));
+    // Compute effective visibility for each child (recursively for groups)
+    const effectiveVisibility = childArray.map((child, idx) => {
+        if (isValidElement(child) && isGroup(child)) {
+            // For nested groups, pass down visibility
+            return !panelVisibility || panelVisibility[idx];
+        }
+        return !panelVisibility || panelVisibility[idx];
+    });
+    // Recursively render children, and collect which are visible
+    const renderedPanels = [];
+    const renderedSizes = [];
+    const renderedPaths = [];
+    let accHidden = 0;
+    for (let i = 0; i < panelCount; i++) {
+        const child = childArray[i];
+        const visible = effectiveVisibility[i];
+        let childIsVisible = visible;
+        let renderedChild = child;
+        let childPath = [...path, i];
+        if (isValidElement(child) && isGroup(child)) {
+            // Recursively render group
+            renderedChild = cloneElement(child, {
+                parentVisibility: visible,
+                parentPanelCount: panelCount,
+                parentPanelVisibility: panelVisibility,
+                parentOnTogglePanel: parentOnTogglePanel || onTogglePanel,
+                path: childPath,
+            });
+            // If the group renders nothing, treat as hidden
+            // We'll check after rendering below
+        }
+        // For groups, check if they actually rendered anything
+        let actuallyVisible = childIsVisible;
+        if (isValidElement(child) && isGroup(child)) {
+            // If the group is not visible (returns null), treat as hidden
+            // We'll check after rendering below
+            // For now, optimistically add, and filter after
+            renderedPanels.push(renderedChild);
+            renderedSizes.push(sizes[i] + accHidden);
+            renderedPaths.push(childPath);
+            accHidden = 0;
+        }
+        else if (childIsVisible) {
+            renderedPanels.push(renderedChild);
+            renderedSizes.push(sizes[i] + accHidden);
+            renderedPaths.push(childPath);
+            accHidden = 0;
+        }
+        else {
+            accHidden += sizes[i];
+        }
+    }
+    // Remove panels that are null (hidden nested groups)
+    let filteredPanels = [];
+    let filteredSizes = [];
+    let filteredPaths = [];
+    let filteredAccHidden = 0;
+    for (let i = 0; i < renderedPanels.length; i++) {
+        if (renderedPanels[i] !== null && renderedPanels[i] !== undefined) {
+            filteredPanels.push(renderedPanels[i]);
+            filteredSizes.push(renderedSizes[i] + filteredAccHidden);
+            filteredPaths.push(renderedPaths[i]);
+            filteredAccHidden = 0;
+        }
+        else {
+            filteredAccHidden += renderedSizes[i];
+        }
+    }
+    // --- CORRECTED MERGING LOGIC ---
+    // Merge hidden panel sizes into the nearest visible sibling (prefer previous, else next)
+    const mergedPanels = [];
+    const mergedSizes = [];
+    const mergedPaths = [];
+    for (let i = 0; i < filteredPanels.length; i++) {
+        if (filteredPanels[i] !== null && filteredPanels[i] !== undefined) {
+            mergedPanels.push(filteredPanels[i]);
+            mergedSizes.push(filteredSizes[i]);
+            mergedPaths.push(filteredPaths[i]);
+        }
+        else {
+            // Hidden panel: merge its size into previous visible, or next if first
+            if (mergedPanels.length > 0) {
+                mergedSizes[mergedSizes.length - 1] += filteredSizes[i];
+            }
+            else {
+                // No previous, merge into next visible
+                let j = i + 1;
+                while (j < filteredPanels.length &&
+                    (filteredPanels[j] === null || filteredPanels[j] === undefined)) {
+                    j++;
+                }
+                if (j < filteredPanels.length) {
+                    // Next visible found
+                    if (filteredSizes[j] !== undefined) {
+                        filteredSizes[j] += filteredSizes[i];
+                    }
+                }
+            }
+        }
+    }
+    // If nothing is visible, tell parent to treat this group as hidden
+    if (mergedPanels.length === 0 || parentVisibility === false) {
+        return null;
+    }
+    // Resizing logic (same as before, but for visible panels)
+    const containerRef = useRef(null);
+    const [dragIndex, setDragIndex] = useState(null);
+    const [startPos, setStartPos] = useState(0);
+    const [startSizes, setStartSizes] = useState([]);
+    const handleMouseDown = (idx) => (e) => {
+        setDragIndex(idx);
+        setStartSizes([...mergedSizes]);
+        setStartPos(orientation === 'horizontal' ? e.clientX : e.clientY);
+        document.body.style.userSelect = 'none';
+    };
+    useEffect(() => {
+        if (dragIndex === null)
+            return;
+        const handleMouseMove = (e) => {
+            if (!containerRef.current)
+                return;
+            const rect = containerRef.current.getBoundingClientRect();
+            const total = orientation === 'horizontal' ? rect.width : rect.height;
+            const currentPos = orientation === 'horizontal' ? e.clientX : e.clientY;
+            const deltaPx = currentPos - startPos;
+            const deltaPercent = (deltaPx / total) * 100;
+            let newSizes = [...startSizes];
+            let left = Math.max(5, startSizes[dragIndex] + deltaPercent);
+            let right = Math.max(5, startSizes[dragIndex + 1] - deltaPercent);
+            // Prevent overflow
+            const sum = startSizes[dragIndex] + startSizes[dragIndex + 1];
+            if (left + right > sum) {
+                if (left > sum - 5)
+                    left = sum - 5;
+                if (right > sum - 5)
+                    right = sum - 5;
+            }
+            newSizes[dragIndex] = left;
+            newSizes[dragIndex + 1] = right;
+            // Update the original sizes array for all panels
+            let newAllSizes = [...sizes];
+            let visIdx = 0;
+            for (let k = 0; k < panelCount; k++) {
+                if (effectiveVisibility[k]) {
+                    // Only update for visible panels
+                    newAllSizes[k] = newSizes[visIdx++];
+                }
+            }
+            setSizes(newAllSizes);
+        };
+        const handleMouseUp = () => {
+            setDragIndex(null);
+            document.body.style.userSelect = '';
+        };
+        window.addEventListener('mousemove', handleMouseMove);
+        window.addEventListener('mouseup', handleMouseUp);
+        return () => {
+            window.removeEventListener('mousemove', handleMouseMove);
+            window.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [dragIndex, orientation, startPos, startSizes, effectiveVisibility, sizes, panelCount]);
+    return (_jsx("div", { ref: containerRef, style: {
+            display: 'flex',
+            flexDirection: orientation === 'horizontal' ? 'row' : 'column',
+            width: '100%',
+            height: '100%',
+            position: 'relative',
+            overflow: 'hidden',
+            gap: allowItemResize ? 0 : gutters,
+        }, ...rest, children: mergedPanels.map((child, idx) => (_jsxs(React.Fragment, { children: [isValidElement(child) && !isGroup(child)
+                    ? cloneElement(child, {
+                        style: {
+                            ...(child.props.style || {}),
+                            flexBasis: `${mergedSizes[idx]}%`,
+                            height: orientation === 'vertical'
+                                ? `${mergedSizes[idx]}%`
+                                : '100%',
+                            width: orientation === 'horizontal'
+                                ? `${mergedSizes[idx]}%`
+                                : '100%',
+                        },
+                    })
+                    : child, allowItemResize && idx < mergedPanels.length - 1 && (_jsx("div", { style: {
+                        cursor: orientation === 'horizontal'
+                            ? 'col-resize'
+                            : 'row-resize',
+                        background: 'transparent',
+                        width: orientation === 'horizontal' ? gutters : '100%',
+                        height: orientation === 'vertical' ? gutters : '100%',
+                        zIndex: 10,
+                        userSelect: 'none',
+                        flexShrink: 0,
+                        flexGrow: 0,
+                        borderRadius: 3,
+                        minHeight: orientation === 'horizontal' ? '100%' : gutters,
+                        minWidth: orientation === 'vertical' ? '100%' : gutters,
+                    }, onMouseDown: handleMouseDown(idx) }))] }, mergedPaths[idx].join('-')))) }));
+};
+TMPanelGroup.displayName = 'TMPanelGroup';
+function getAllPanelPaths(children, path = []) {
+    const arr = Children.toArray(children).filter(Boolean);
+    let result = [];
+    arr.forEach((child, idx) => {
+        if (isValidElement(child) && isGroup(child)) {
+            result = result.concat(getAllPanelPaths(child.props.children, [...path, idx]));
+        }
+        else if (isValidElement(child)) {
+            result.push({ label: child.props?.label || `Panel ${path.concat(idx).join('-')}`, path: path.concat(idx) });
+        }
+    });
+    return result;
+}
+const TMPanelLayout = ({ children, showToolbar = true, emptyContent, }) => {
+    // Only support a single TMPanelGroup as direct child for simplicity
+    const group = Children.only(children);
+    const childArray = Children.toArray(group.props.children).filter(Boolean);
+    // Build a flat list of all panel paths and labels for the toolbar
+    const allPanels = useMemo(() => getAllPanelPaths(group.props.children), [group.props.children]);
+    const [panelVisibility, setPanelVisibility] = useState(childArray.map(() => true));
+    // Helper to check if all panels (recursively) are hidden
+    function isAllPanelsHidden() {
+        // For now, just check top-level
+        return panelVisibility.every(v => !v);
+    }
+    // Toggle panel visibility by path (only top-level supported for now)
+    const handleTogglePanel = (idx) => {
+        setPanelVisibility((prev) => {
+            if (prev.filter(Boolean).length === 1 && prev[idx])
+                return prev;
+            const newArr = [...prev];
+            newArr[idx] = !newArr[idx];
+            return newArr;
+        });
+    };
+    // For nested: you can extend this to track nested visibility state if needed
+    const allHidden = isAllPanelsHidden();
+    return (_jsx("div", { style: {
+            width: '100%',
+            height: '100%',
+            position: 'relative',
+            overflow: 'hidden',
+            display: 'flex',
+            flexDirection: 'column',
+        }, children: _jsxs("div", { style: { width: '100%', height: '100%', position: 'relative' }, children: [!allHidden &&
+                    cloneElement(group, {
+                        panelVisibility,
+                        onTogglePanel: handleTogglePanel,
+                        panelLabels: allPanels.map(p => p.label),
+                    }), showToolbar && (_jsx("div", { style: {
+                        position: 'absolute',
+                        top: 10,
+                        right: 10,
+                        zIndex: 1000,
+                        background: 'rgba(255,255,255,0.9)',
+                        borderRadius: 8,
+                        boxShadow: '0 2px 8px #0002',
+                        padding: 8,
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: 8,
+                    }, children: _jsx(TMPanelLayoutToolbar, { panelLabels: allPanels.map(p => p.label), panelVisibility: panelVisibility, onTogglePanel: handleTogglePanel }) })), allHidden && (_jsx("div", { style: {
+                        position: 'absolute',
+                        left: 0,
+                        top: 0,
+                        width: '100%',
+                        height: '100%',
+                        background: '#fafbfc',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        zIndex: 1,
+                    }, children: emptyContent || (_jsx("span", { style: { color: '#888', fontSize: 18 }, children: "No panels visible" })) }))] }) }));
+};
+export default TMPanelLayout;
+export const TMPanelLayoutToolbar = ({ panelLabels, panelVisibility, onTogglePanel, }) => {
+    return (_jsx("div", { children: panelLabels.map((label, idx) => (_jsxs("button", { style: {
+                margin: 2,
+                padding: '4px 10px',
+                borderRadius: 4,
+                border: panelVisibility[idx] ? '2px solid #1976d2' : '1px solid #bbb',
+                background: panelVisibility[idx] ? '#1976d2' : '#eee',
+                color: panelVisibility[idx] ? '#fff' : '#555',
+                cursor: 'pointer',
+                opacity: 1,
+            }, onClick: () => onTogglePanel(idx), children: [panelVisibility[idx] ? 'Hide' : 'Show', " ", label] }, idx))) }));
+};

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

@@ -251,3 +251,4 @@ declare const TMTidViewer: ({ tmSession, tid, showIcon, color, showId, noneSelec
 }) => import("react/jsx-runtime").JSX.Element;
 export default TMTidViewer;
 export declare const cellRenderTID: (data: DataGridTypes.ColumnCellTemplateData, noneSelectionText?: string) => import("react/jsx-runtime").JSX.Element;
+export declare const renderDTDTooltipContent: (dtd: DcmtTypeDescriptor | undefined) => import("react/jsx-runtime").JSX.Element | null;

package/lib/components/viewers/TMTidViewer.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, 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 { IconDcmtType, IconDcmtTypeOnlyMetadata, LocalizeArchiveConstraints, LocalizeParametricFilterTypes, SDKUI_Localizator, TMImageLibrary } from '../../helper';
 import { ArchiveConstraints, DcmtTypeListCacheService, OwnershipLevels, ParametricFilterTypes, SDK_Globals, SDK_Localizator, TemplateTIDs } from '@topconsultnpm/sdk-ts-beta';
@@ -256,15 +256,7 @@ export const TMDcmtTypeIcon = ({ dtd }) => {
     return (_jsx(TMDcmtTypeTooltip, { dtd: dtd, children: icon }));
 };
 export const TMDcmtTypeTooltip = ({ dtd, children }) => {
-    const renderTooltipContent = (dtd) => {
-        return (!dtd ? null
-            : _jsxs(StyledTooltipContainer, { children: [_jsx(StyledTooltipItem, { children: `${SDK_Globals.useLocalizedName ? dtd.nameLoc : dtd.name} (${dtd.isView ? 'VID' : 'TID'}: ${dtd.id}, RootTID: ${dtd.rootTID ?? 0})` }), dtd.description && _jsx(StyledTooltipItem, { children: dtd.description }), _jsx(StyledTooltipSeparatorItem, {}), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.ArchiveConstraint}: ${LocalizeArchiveConstraints(dtd.archiveConstraint)}` }), dtd.isView && dtd.parametricFilterType != ParametricFilterTypes.None && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.ParametricFilter}: ${LocalizeParametricFilterTypes(dtd.parametricFilterType)}` }), dtd.isView && dtd.withCheckOption && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.ViewWithCheckOption}: ${SDKUI_Localizator.Yes}` }), dtd.isLexProt && dtd.isLexProt > 0 && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.LexProt}: ${SDKUI_Localizator.Yes}` }), dtd.isFreeSearchable && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Search_Free}: ${SDKUI_Localizator.Yes}` }), dtd.templateTID && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Template}: ${dtd.templateTID}` }), dtd.traceTID && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Tracing}: ${SDKUI_Localizator.Yes} - ${dtd.templateTID == TemplateTIDs.Trace_DcmtType ? SDKUI_Localizator.Destination : SDKUI_Localizator.Source} ${dtd.traceTID < 0 ? SDKUI_Localizator.Disabled : ''}` }), dtd.wfAppr && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.WorkflowApproval}: ${SDKUI_Localizator.Yes}` }), dtd.hasBlog && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.BlogCase}: ${SDKUI_Localizator.Yes}` }), dtd.cico && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.CheckIn}: ${SDKUI_Localizator.Yes}` }), dtd.perm ?
-                        _jsxs(_Fragment, { children: [_jsx(StyledTooltipItem, { "$color": 'primary', "$marginTop": '5px', children: SDKUI_Localizator.Perms }), _jsx(StyledTooltipSeparatorItem, {}), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Archive}: ${dtd.perm.canArchive}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.View_Metadato}: ${dtd.perm.canView}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Search}: ${dtd.perm.canSearch}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Update}: ${dtd.perm.canUpdate}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.RetrieveFile}: ${dtd.perm.canRetrieveFile}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.AddOrSubstFile}: ${dtd.perm.canSubstFile}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.LogDelete}: ${dtd.perm.canLogicalDelete}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.PhysDelete}: ${dtd.perm.canPhysicalDelete}` }), dtd.hasBlog && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Blog_Read}: ${dtd.perm.canReadBlog}` }), dtd.hasBlog && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Blog_Write}: ${dtd.perm.canWriteBlog}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.CheckIn}: ${dtd.perm.canCICO}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.ChronologyDelete}: ${dtd.perm.canDelChron}` })] })
-                        : dtd.ownershipLevel == OwnershipLevels.DirectOwner || dtd.ownershipLevel == OwnershipLevels.IndirectOwner ?
-                            _jsxs(_Fragment, { children: [_jsx(StyledTooltipItem, { "$color": 'primary', "$marginTop": '5px', children: SDKUI_Localizator.Perms }), _jsx(StyledTooltipSeparatorItem, {}), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Archive}: ${SDKUI_Localizator.Yes}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.View_Metadato}: ${SDKUI_Localizator.Yes}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Search}: ${SDKUI_Localizator.Yes}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Update}: ${SDKUI_Localizator.Yes}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.RetrieveFile}: ${SDKUI_Localizator.Yes}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.AddOrSubstFile}: ${SDKUI_Localizator.Yes}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.LogDelete}: ${SDKUI_Localizator.Yes}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.PhysDelete}: ${SDKUI_Localizator.Yes}` }), dtd.hasBlog && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Blog_Read}: ${SDKUI_Localizator.Yes}` }), dtd.hasBlog && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Blog_Write}: ${SDKUI_Localizator.Yes}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.CheckIn}: ${SDKUI_Localizator.Yes}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.ChronologyDelete}: ${SDKUI_Localizator.Yes}` })] })
-                            : _jsx(_Fragment, {})] }));
-    };
-    return (_jsx("div", { style: { pointerEvents: 'all' }, children: _jsx(TMTooltip, { content: renderTooltipContent(dtd), children: children }) }));
+    return (_jsx("div", { style: { pointerEvents: 'all' }, children: _jsx(TMTooltip, { content: renderDTDTooltipContent(dtd), children: children }) }));
 };
 const TMTidViewer = ({ tmSession, tid, showIcon = false, color, showId = false, noneSelectionText = `<${SDKUI_Localizator.NoneSelection}>` }) => {
     const [dtd, setDtd] = useState();
@@ -305,3 +297,11 @@ export default TMTidViewer;
 export const cellRenderTID = (data, noneSelectionText) => {
     return (_jsx(TMTidViewer, { tid: data.value, noneSelectionText: noneSelectionText }));
 };
+export const renderDTDTooltipContent = (dtd) => {
+    return (!dtd ? null
+        : _jsxs(StyledTooltipContainer, { children: [_jsx(StyledTooltipItem, { children: `${SDK_Globals.useLocalizedName ? dtd.nameLoc : dtd.name} (${dtd.isView ? 'VID' : 'TID'}: ${dtd.id}, RootTID: ${dtd.rootTID ?? 0})` }), dtd.description && _jsx(StyledTooltipItem, { children: dtd.description }), _jsx(StyledTooltipSeparatorItem, {}), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.ArchiveConstraint}: ${LocalizeArchiveConstraints(dtd.archiveConstraint)}` }), dtd.isView && dtd.parametricFilterType != ParametricFilterTypes.None && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.ParametricFilter}: ${LocalizeParametricFilterTypes(dtd.parametricFilterType)}` }), dtd.isView && dtd.withCheckOption && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.ViewWithCheckOption}: ${SDKUI_Localizator.Yes}` }), dtd.isLexProt && dtd.isLexProt > 0 && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.LexProt}: ${SDKUI_Localizator.Yes}` }), dtd.isFreeSearchable && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Search_Free}: ${SDKUI_Localizator.Yes}` }), dtd.templateTID && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Template}: ${dtd.templateTID}` }), dtd.traceTID && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Tracing}: ${SDKUI_Localizator.Yes} - ${dtd.templateTID == TemplateTIDs.Trace_DcmtType ? SDKUI_Localizator.Destination : SDKUI_Localizator.Source} ${dtd.traceTID < 0 ? SDKUI_Localizator.Disabled : ''}` }), dtd.wfAppr && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.WorkflowApproval}: ${SDKUI_Localizator.Yes}` }), dtd.hasBlog && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.BlogCase}: ${SDKUI_Localizator.Yes}` }), dtd.cico && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.CheckIn}: ${SDKUI_Localizator.Yes}` }), dtd.perm ?
+                    _jsxs(_Fragment, { children: [_jsx(StyledTooltipItem, { "$color": 'primary', "$marginTop": '5px', children: SDKUI_Localizator.Perms }), _jsx(StyledTooltipSeparatorItem, {}), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Archive}: ${dtd.perm.canArchive}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.View_Metadato}: ${dtd.perm.canView}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Search}: ${dtd.perm.canSearch}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Update}: ${dtd.perm.canUpdate}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.RetrieveFile}: ${dtd.perm.canRetrieveFile}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.AddOrSubstFile}: ${dtd.perm.canSubstFile}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.LogDelete}: ${dtd.perm.canLogicalDelete}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.PhysDelete}: ${dtd.perm.canPhysicalDelete}` }), dtd.hasBlog && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Blog_Read}: ${dtd.perm.canReadBlog}` }), dtd.hasBlog && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Blog_Write}: ${dtd.perm.canWriteBlog}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.CheckIn}: ${dtd.perm.canCICO}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.ChronologyDelete}: ${dtd.perm.canDelChron}` })] })
+                    : dtd.ownershipLevel == OwnershipLevels.DirectOwner || dtd.ownershipLevel == OwnershipLevels.IndirectOwner ?
+                        _jsxs(_Fragment, { children: [_jsx(StyledTooltipItem, { "$color": 'primary', "$marginTop": '5px', children: SDKUI_Localizator.Perms }), _jsx(StyledTooltipSeparatorItem, {}), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Archive}: ${SDKUI_Localizator.Yes}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.View_Metadato}: ${SDKUI_Localizator.Yes}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Search}: ${SDKUI_Localizator.Yes}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Update}: ${SDKUI_Localizator.Yes}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.RetrieveFile}: ${SDKUI_Localizator.Yes}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.AddOrSubstFile}: ${SDKUI_Localizator.Yes}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.LogDelete}: ${SDKUI_Localizator.Yes}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.PhysDelete}: ${SDKUI_Localizator.Yes}` }), dtd.hasBlog && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Blog_Read}: ${SDKUI_Localizator.Yes}` }), dtd.hasBlog && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Blog_Write}: ${SDKUI_Localizator.Yes}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.CheckIn}: ${SDKUI_Localizator.Yes}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.ChronologyDelete}: ${SDKUI_Localizator.Yes}` })] })
+                        : _jsx(_Fragment, {})] }));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react-beta",
-    "version": "6.13.40",
+    "version": "6.13.41",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
@@ -42,7 +42,7 @@
         "lib"
     ],
     "dependencies": {
-        "@topconsultnpm/sdk-ts-beta": "6.13.5",
+        "@topconsultnpm/sdk-ts-beta": "6.13.6",
         "buffer": "^6.0.3",
         "devextreme": "24.2.6",
         "devextreme-react": "24.2.6",

package/lib/components/layout/ResizableGrid.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-interface ResizableGridProps {
-    panels: React.ReactNode[];
-    minPercents?: number[];
-    initialPercents?: number[];
-}
-declare const ResizableGrid: React.FC<ResizableGridProps>;
-export default ResizableGrid;

package/lib/components/layout/ResizableGrid.js

@@ -1,58 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// ResizableGrid.tsx
-import React, { useRef, useState } from 'react';
-import { SDKUI_Globals } from '../../helper';
-const ResizableGrid = ({ panels, minPercents, initialPercents, }) => {
-    const panelCount = panels.length;
-    const defaultMinPercents = minPercents ?? Array(panelCount).fill(0.1);
-    const [percents, setPercents] = useState(initialPercents ??
-        Array(panelCount).fill(1 / panelCount));
-    const containerRef = useRef(null);
-    const handleMouseDown = (idx, e) => {
-        e.preventDefault();
-        const startX = e.clientX;
-        const startPercents = [...percents];
-        const onMouseMove = (moveEvent) => {
-            if (!containerRef.current)
-                return;
-            const deltaPx = moveEvent.clientX - startX;
-            const containerWidth = containerRef.current.offsetWidth;
-            if (containerWidth === 0)
-                return;
-            const deltaPercent = deltaPx / containerWidth;
-            let newPercents = [...startPercents];
-            // Adjust the dragged panel and the next one
-            newPercents[idx] = Math.max(defaultMinPercents[idx], startPercents[idx] + deltaPercent);
-            newPercents[idx + 1] = Math.max(defaultMinPercents[idx + 1], startPercents[idx + 1] - deltaPercent);
-            // Normalize if overflows
-            const total = newPercents.reduce((a, b) => a + b, 0);
-            newPercents = newPercents.map(p => p / total);
-            setPercents(newPercents);
-        };
-        const onMouseUp = () => {
-            window.removeEventListener('mousemove', onMouseMove);
-            window.removeEventListener('mouseup', onMouseUp);
-        };
-        window.addEventListener('mousemove', onMouseMove);
-        window.addEventListener('mouseup', onMouseUp);
-    };
-    // Build gridTemplateColumns string
-    const gridTemplateColumns = percents
-        .map((p, i) => `${(p * 100).toFixed(2)}%${i < panelCount - 1 ? ` ${SDKUI_Globals.userSettings.themeSettings.gutters}px` : ''}`)
-        .join(' ');
-    return (_jsx("div", { ref: containerRef, style: {
-            display: 'grid',
-            gridTemplateColumns,
-            width: 'calc(100% - 20px)',
-            height: '100%',
-            position: 'relative',
-            overflow: 'hidden',
-        }, children: panels.map((panel, idx) => (_jsxs(React.Fragment, { children: [panel, idx < panelCount - 1 && (_jsx("div", { style: {
-                        cursor: 'col-resize',
-                        background: 'transparent',
-                        width: `${SDKUI_Globals.userSettings.themeSettings.gutters}px`,
-                        zIndex: 1,
-                        height: '100%',
-                    }, onMouseDown: e => handleMouseDown(idx, e) }))] }, idx))) }));
-};
-export default ResizableGrid;