@topconsultnpm/sdkui-react-beta 6.13.26 → 6.13.28

package/lib/components/base/TMButton.js

@@ -116,8 +116,10 @@ const StyledAdvancedButton = styled.div `
     cursor: ${props => !props.$isDisabled ? 'pointer' : 'default'};
     border-radius: 10px;
     overflow: hidden;
-    color: white;
+    color: ${({ $isPrimaryOutline }) => $isPrimaryOutline ? TMColors.primaryColor : 'white'};
     user-select: none;
+    border: ${({ $isPrimaryOutline }) => $isPrimaryOutline ? `1px solid ${TMColors.primaryColor}` : 'none'};
+    background: ${({ $isPrimaryOutline }) => $isPrimaryOutline ? 'white' : 'unset'};
 `;
 const StyledAdvancedButtonIcon = styled.div `
     display: flex;
@@ -140,6 +142,7 @@ const StyledAdvancedButtonText = styled.div `
     background-color: ${props => props.$isDisabled ? '#d1d1d1' : props.$color ? props.$color : props.$type === 'success' ? `${TMColors.success}` : props.$type === 'error' ? `${TMColors.error}` : props.$type === 'tertiary' ? `${TMColors.tertiary}` : `${TMColors.primary}`};
     border-top-right-radius: 10px;
     border-bottom-right-radius: 10px;
+    padding: 5px;
 `;
 const TMButton = ({ width, height, keyGesture, btnStyle = 'normal', advancedColor, advancedType = 'primary', color = 'primary', fontSize = FontSize.defaultFontSize, disabled = false, showTooltip = true, caption, icon, description, padding, elementStyle, onClick = () => { } }) => {
     const [isHovered, setIsHovered] = useState(false);
@@ -189,7 +192,7 @@ const TMButton = ({ width, height, keyGesture, btnStyle = 'normal', advancedColo
             return (_jsx(StyledIconButton, { color: color, caption: caption, disabled: disabled, fontSize: fontSize, padding: padding, onClick: onClick, children: icon }));
         }
         else if (btnStyle === 'advanced') {
-            return (_jsxs(StyledAdvancedButton, { "$width": width ?? '90px', "$height": height ?? '30px', onMouseOver: () => !disabled && setIsHovered(true), onMouseOut: () => setIsHovered(false), "$isDisabled": disabled, onClick: () => !disabled && onClick?.(), children: [_jsx(StyledAdvancedButtonIcon, { "$color": advancedColor, "$isVisible": isHovered, "$isDisabled": disabled, "$type": advancedType, children: icon }), _jsxs(StyledAdvancedButtonText, { "$color": advancedColor, "$isDisabled": disabled, "$type": advancedType, children: [" ", caption, " "] })] }));
+            return (_jsxs(StyledAdvancedButton, { "$width": width ?? '90px', "$height": height ?? '30px', onMouseOver: () => !disabled && setIsHovered(true), onMouseOut: () => setIsHovered(false), "$isDisabled": disabled, "$isPrimaryOutline": advancedType === 'primary' && (advancedColor === 'primaryOutline' || color === 'primaryOutline'), onClick: () => !disabled && onClick?.(), children: [_jsx(StyledAdvancedButtonIcon, { "$color": advancedColor, "$isVisible": isHovered, "$isDisabled": disabled, "$type": advancedType, children: icon }), _jsx(StyledAdvancedButtonText, { "$color": advancedColor, "$isDisabled": disabled, "$type": advancedType, children: caption })] }));
         }
         else {
             return (_jsx(StyledTextButton, { color: color, caption: caption, disabled: disabled, fontSize: fontSize, onClick: onClick, children: caption }));

package/lib/components/base/TMShowAllOrMaxItemsButton.js

@@ -1,14 +1,19 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { getListMaxItems } from '../../helper';
-import { TMColors } from '../../utils/theme';
 import TMButton from './TMButton';
 import { useDeviceType, DeviceType } from './TMDeviceProvider';
 const TMShowAllOrMaxItemsButton = ({ showAll, dataSourceLength, onClick }) => {
     const deviceType = useDeviceType();
     let maxItems = getListMaxItems(deviceType ?? DeviceType.DESKTOP);
-    const captionText = showAll ? "Mostra meno" : `Mostra tutti (+${dataSourceLength - maxItems})`;
-    return (_jsx(TMButton, { elementStyle: { position: 'absolute', right: '10px' }, btnStyle: 'icon', caption: captionText, icon: showAll ?
-            _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: `-${dataSourceLength - maxItems}` }) }) :
-            _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: `+${dataSourceLength - maxItems}` }) }), onClick: () => onClick?.() }));
+    const captionText = showAll ? "Mostra meno" : `Mostra tutti`;
+    const isMobile = deviceType === DeviceType.MOBILE;
+    return (_jsx(_Fragment, { children: isMobile ?
+            _jsx(TMButton, { elementStyle: { position: 'absolute', right: '10px' }, btnStyle: 'icon', caption: captionText, icon: showAll ?
+                    _jsx("div", { style: { backgroundColor: '#4A96D2', minWidth: '30px', minHeight: '30px', borderRadius: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx("p", { style: { color: 'white' }, children: `-${dataSourceLength - maxItems}` }) }) :
+                    _jsx("div", { style: { backgroundColor: '#4A96D2', minWidth: '30px', minHeight: '30px', borderRadius: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx("p", { style: { color: 'white' }, children: `+${dataSourceLength - maxItems}` }) }), onClick: () => onClick?.() })
+            :
+                _jsx(TMButton, { elementStyle: { position: 'absolute', right: '10px' }, width: 'auto', btnStyle: 'advanced', advancedColor: '#4A96D2', caption: captionText, showTooltip: false, icon: showAll
+                        ? _jsx("p", { style: { color: 'white' }, children: `-${dataSourceLength - maxItems}` })
+                        : _jsx("p", { style: { color: 'white' }, children: `+${dataSourceLength - maxItems}` }), onClick: () => onClick?.() }) }));
 };
 export default TMShowAllOrMaxItemsButton;

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

@@ -491,24 +491,24 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
                                         setFormData((prevItems) => prevItems.map((item) => item.tid == e.tid && item.mid === e.mid ? { ...item, value: e.newValue } : item));
                                     } }), (isModal && onClose) && _jsx("div", { id: "TMDcmtFormShowConfirmForClose-" + id })] }) }), showDcmtFormSidebar && _jsx(TMCommandsPanel, { isMobile: deviceType === DeviceType.MOBILE, items: [
                         ...(layoutMode === LayoutModes.Ark ? [
-                            { icon: _jsx(IconRoundFileUpload, { fontSize: 20 }), selected: isOpenPreview, disabled: isPreviewDisabled, onClick: () => { if (!isPreviewDisabled)
+                            { icon: _jsx(IconRoundFileUpload, {}), selected: isOpenPreview, disabled: isPreviewDisabled, onClick: () => { if (!isPreviewDisabled)
                                     setIsOpenPreview(!isOpenPreview); } }
                         ] : []),
                         ...(layoutMode !== LayoutModes.Ark ? [
-                            { icon: _jsx(IconShow, { fontSize: 20 }), selected: isOpenPreview, disabled: isPreviewDisabled, onClick: () => { if (!isPreviewDisabled)
+                            { icon: _jsx(IconShow, {}), selected: isOpenPreview, disabled: isPreviewDisabled, onClick: () => { if (!isPreviewDisabled)
                                     setIsOpenPreview(!isOpenPreview); } },
-                            { icon: _jsx(IconBoard, { fontSize: 20 }), selected: isOpenBoard, disabled: isBoardDisabled, onClick: () => { if (!isBoardDisabled) {
+                            { icon: _jsx(IconBoard, {}), selected: isOpenBoard, disabled: isBoardDisabled, onClick: () => { if (!isBoardDisabled) {
                                     closeMiddlePanel();
                                     setIsOpenBoard(!isOpenBoard);
                                 } } },
-                            { icon: _jsx(IconDcmtTypeSys, { fontSize: 20 }), selected: isOpenSysMetadata, disabled: isSysMetadataDisabled, onClick: () => { if (!isSysMetadataDisabled) {
+                            { icon: _jsx(IconDcmtTypeSys, {}), selected: isOpenSysMetadata, disabled: isSysMetadataDisabled, onClick: () => { if (!isSysMetadataDisabled) {
                                     closeMiddlePanel();
                                     setIsOpenSysMetadata(!isOpenSysMetadata);
                                 } } },
                         ] : []),
-                        ...(currentTIDHasMasterRelations ? [{ icon: _jsx(IconDetailDcmts, { fontSize: 20 }), selected: isOpenMaster, disabled: isMasterDisabled, onClick: () => { if (!isMasterDisabled)
+                        ...(currentTIDHasMasterRelations ? [{ icon: _jsx(IconDetailDcmts, {}), selected: isOpenMaster, disabled: isMasterDisabled, onClick: () => { if (!isMasterDisabled)
                                     setIsOpenMaster(!isOpenMaster); } }] : []),
-                        ...(currentTIDHasDetailRelations ? [{ icon: _jsx(IconDetailDcmts, { fontSize: 20, transform: 'scale(-1, 1)' }), selected: isOpenDetails, disabled: isDetailsDisabled, onClick: () => { if (!isDetailsDisabled)
+                        ...(currentTIDHasDetailRelations ? [{ icon: _jsx(IconDetailDcmts, { transform: 'scale(-1, 1)' }), selected: isOpenDetails, disabled: isDetailsDisabled, onClick: () => { if (!isDetailsDisabled)
                                     setIsOpenDetails(!isOpenDetails); } }] : []),
                         ...customRightSidebarItems
                     ] }), isOpenDetails &&

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

@@ -395,12 +395,12 @@ const TMMasterDetailDcmts = ({ deviceType, inputDcmts, isForMaster, showCurrentD
                                             _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); }, onClosePreview: () => { setShowPreview(false); } }) :
                                     _jsx(TMSearchResult, { context: SearchResultContext.METADATA_SEARCH, searchResults: focusedItem?.searchResult ?? [], showSearchResultSidebar: false, onClose: () => { setShowDcmtForm(false); }, onClosePreview: () => { setShowPreview(false); }, onTaskCreateRequest: onTaskCreateRequest }) })] }, "TMDetails-panel") }) }), _jsx(TMCommandsPanel, { isMobile: isMobile, items: [
-                    { icon: _jsx(IconShow, { fontSize: 20 }), selected: showPreview, onClick: () => { setShowPreview(!showPreview); } },
-                    { icon: _jsx(IconPreview, { fontSize: 20 }), selected: showDcmtForm, onClick: () => { setShowDcmtForm(!showDcmtForm); } },
-                    { icon: _jsx(IconBoard, { fontSize: 20 }), selected: showBoard, onClick: () => { setShowSysMetadata(false); setShowBoard(!showBoard); } },
-                    { icon: _jsx(IconDcmtTypeSys, { fontSize: 20 }), selected: showSysMetadata, onClick: () => { setShowBoard(false); setShowSysMetadata(!showSysMetadata); } },
-                    { icon: _jsx(IconCheckFile, { fontSize: 20 }), selected: showZeroDcmts, onClick: () => { setShowZeroDcmts(!showZeroDcmts); } },
-                    { icon: _jsx(IconDetailDcmts, { fontSize: 20, transform: 'scale(-1, 1)' }), disabled: !focusedItem?.isDcmt, onClick: () => { appendMasterDcmts?.(focusedItem?.tid, focusedItem?.did); } }
+                    { 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); } }
                 ] })] }));
 };
 export default TMMasterDetailDcmts;

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

@@ -1,16 +1,18 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useState } from 'react';
 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, IconApply } from '../../../helper';
+import { SDKUI_Localizator, Globalization, svgToString, IconStar, IconDelete, IconDashboard, IconSavedQuery, IconApply, IconInfo } from '../../../helper';
 import { TMColors } from '../../../utils/theme';
 import ShowAlert from '../../base/TMAlert';
 import TMButton from '../../base/TMButton';
 import { TMMessageBoxManager, ButtonNames, TMExceptionBoxManager } from '../../base/TMPopUp';
 import TMSpinner from '../../base/TMSpinner';
+import TMTooltip from '../../base/TMTooltip';
 import { TMSearchBar } from '../../sidebar/TMHeader';
+import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
 const StyledSqdItem = styled.div `
     display: flex;
     flex-direction: column;
@@ -26,6 +28,21 @@ const StyledSqdItem = styled.div `
         cursor: pointer;
     }
 
+    .info-icon {
+        position: absolute;
+        left: -2px;
+        top: 50%;
+        transform: translateY(-50%);
+        opacity: ${({ $isMobile }) => ($isMobile ? 1 : 0)};
+        transition: opacity 0.2s;
+        pointer-events: ${({ $isMobile }) => ($isMobile ? 'auto' : 'none')};
+    }
+
+    &:hover .info-icon {
+        opacity: 1;
+        pointer-events: auto;
+    }
+
     &:last-child {
         border-bottom: none; // remove border for last item
         margin-bottom: 0;
@@ -42,7 +59,7 @@ const getSharingModeColor = (sharingMode) => {
 export const getTooltipBySqd = (sqd) => {
     if (!sqd)
         return null;
-    return (_jsxs("div", { style: { textAlign: "left" }, children: [_jsxs("div", { children: ["ID: ", sqd.id] }), _jsxs("div", { children: ["Master TID: ", sqd.masterTID] }), _jsx("div", { children: 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" }, 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 ? [
@@ -65,6 +82,8 @@ const TMSavedQuerySelector = React.memo(({ items, selectedId, allowShowSearch =
     const [selectedItem, setSelectedItem] = useState();
     const [searchText, setSearchText] = useState('');
     const [showAllRoot, setShowAllRoot] = useState(false);
+    const deviceType = useDeviceType();
+    const isMobile = deviceType === DeviceType.MOBILE;
     useEffect(() => { loadDataAsync(false); }, [items]);
     useEffect(() => { setSelectedItem(dataSource.find(o => o.id == selectedId)); }, [selectedId, dataSource]);
     const loadDataAsync = async (refreshCache) => {
@@ -121,13 +140,13 @@ const TMSavedQuerySelector = React.memo(({ items, selectedId, allowShowSearch =
                     display: 'flex',
                     flexDirection: 'column',
                     width: '100%',
-                    padding: '5px',
+                    padding: '5px 10px',
                     gap: '3px',
                     overflow: 'auto'
-                }, children: dataSource.slice(0, showAllRoot || searchText.length > 0 ? dataSource.length : initialSQDsMaxItems).filter(o => searchText.length <= 0 || (searchText.length > 0 && o.name?.toLocaleLowerCase().includes(searchText.toLocaleLowerCase())) || o.description?.toLocaleLowerCase().includes(searchText.toLocaleLowerCase())).map((sqd, index) => (_jsxs(StyledSqdItem, { id: `sqd-item-${sqd.id}`, onClick: () => {
+                }, children: dataSource.slice(0, showAllRoot || searchText.length > 0 ? dataSource.length : initialSQDsMaxItems).filter(o => searchText.length <= 0 || (searchText.length > 0 && o.name?.toLocaleLowerCase().includes(searchText.toLocaleLowerCase())) || o.description?.toLocaleLowerCase().includes(searchText.toLocaleLowerCase())).map((sqd, index) => (_jsxs(StyledSqdItem, { id: `sqd-item-${sqd.id}`, "$isMobile": isMobile, onClick: () => {
                         setSelectedItem(sqd);
                         onItemClick?.(sqd);
-                    }, children: [_jsxs("div", { style: {
+                    }, children: [_jsx("span", { className: "info-icon", children: _jsx(TMTooltip, { content: getTooltipBySqd(sqd), children: _jsx(IconInfo, { color: TMColors.primaryColor }) }) }), _jsxs("div", { style: {
                                 display: 'flex',
                                 flexDirection: 'row',
                                 justifyContent: 'center',

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

@@ -170,22 +170,22 @@ const TMSearch = ({ inputTID, inputSqdID, isExpertMode = SDKUI_Globals.userSetti
                                                                 // selectedId={currentSQD?.id}
                                                                 onItemClick: (sqd) => onSQDItemClick(sqd, setSQDAsync), onDeleted: (sqd) => onSQDDeleted(sqd, sqd.id == currentSQD?.id ? undefined : currentSQD, setSQDAsync) }) })] }) }) })] })] }) }), _jsx(TMCommandsPanel, { isMobile: isMobile, items: [
                             {
-                                icon: _jsx(IconTree, { fontSize: 20 }),
+                                icon: _jsx(IconTree, {}),
                                 selected: showTreesPanel,
                                 onClick: () => setShowTreesPanel(!showTreesPanel),
                             },
                             {
-                                icon: _jsx(IconProgressReady, { fontSize: 20 }),
+                                icon: _jsx(IconProgressReady, {}),
                                 selected: showRecentsPanel,
                                 onClick: () => setShowRecentsPanel(!showRecentsPanel),
                             },
                             {
-                                icon: _jsx(IconSavedQuery, { fontSize: 20 }),
+                                icon: _jsx(IconSavedQuery, {}),
                                 selected: showSavedQueryPanel,
                                 onClick: () => setShowSavedQueryPanel(!showSavedQueryPanel),
                             },
                             ...(searchResult.length > 0 ? [{
-                                    icon: _jsx(IconSearch, { fontSize: 20 }),
+                                    icon: _jsx(IconSearch, {}),
                                     disabled: searchResult.length <= 0,
                                     onClick: () => {
                                         if (searchResult.length > 0) {

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

@@ -22,6 +22,7 @@ import { TMMetadataChooserForm } from '../../choosers/TMMetadataChooser';
 import TMQueryEditor from '../../query/TMQueryEditor';
 import TMSavedQueryForm from './TMSavedQueryForm';
 import { AdvancedMenuButtons } from '../../editors/TMMetadataValues';
+import TMShowAllOrMaxItemsButton from '../../base/TMShowAllOrMaxItemsButton';
 const TMSearchQueryPanel = ({ fromDTD, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, SQD, onSearchCompleted, onFocusedMetadataChanged, onSqdSaved, onBack }) => {
     const [confirmQueryParams, ConfirmQueryParamsDialog] = useQueryParametersDialog();
     const [qd, setQd] = useState();
@@ -120,9 +121,8 @@ const TMSearchQueryPanel = ({ fromDTD, isExpertMode = SDKUI_Globals.userSettings
                                                 setShowDistinctValuesPanel(true);
                                             }
                                         }, onQdChanged: (newQd) => { if (!deepCompare(qd, newQd))
-                                            setQd(newQd); } }), _jsxs("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '80px', padding: '15px', position: 'relative' }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '8px' }, children: [_jsx(TMButton, { btnStyle: 'advanced', icon: _jsx(IconSearch, {}), showTooltip: false, caption: SDKUI_Localizator.Search, onClick: async () => await searchAsync(qd, showAdvancedSearch), advancedColor: '#f09c0a' }), _jsx(TMButton, { btnStyle: 'advanced', showTooltip: false, caption: SDKUI_Localizator.Clear, icon: _jsx(IconClear, {}), advancedColor: TMColors.primaryColor, onClick: clearFilters })] }), (!showAdvancedSearch && qd?.where && qd?.where?.length > initialMaxItems) && _jsx(TMButton, { elementStyle: { position: 'absolute', right: '10px' }, btnStyle: 'icon', caption: showAllMdWhere ? "Mostra meno" : `Mostra tutti i metadati (+${qd?.where?.length - initialMaxItems})`, icon: showAllMdWhere ?
-                                                _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: `-${qd?.where?.length - initialMaxItems}` }) }) :
-                                                _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: `+${qd?.where?.length - initialMaxItems}` }) }), onClick: () => setShowAllMdWhere(!showAllMdWhere) })] }), showFiltersConfig &&
+                                            setQd(newQd); } }), _jsxs("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '80px', padding: '15px', position: 'relative' }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '8px' }, children: [_jsx(TMButton, { btnStyle: 'advanced', icon: _jsx(IconSearch, {}), showTooltip: false, caption: SDKUI_Localizator.Search, advancedColor: '#4A96D2', onClick: async () => await searchAsync(qd, showAdvancedSearch) }), _jsx(TMButton, { btnStyle: 'advanced', advancedType: 'primary', showTooltip: false, caption: SDKUI_Localizator.Clear, icon: _jsx(IconClear, {}), advancedColor: 'white', color: 'primaryOutline', onClick: clearFilters })] }), (!showAdvancedSearch && qd?.where && qd?.where?.length > initialMaxItems) &&
+                                            _jsx(TMShowAllOrMaxItemsButton, { showAll: showAllMdWhere, dataSourceLength: qd?.where?.length, onClick: () => { setShowAllMdWhere(!showAllMdWhere); } })] }), showFiltersConfig &&
                                     _jsx(TMMetadataChooserForm, { allowMultipleSelection: true, height: '500px', width: '600px', allowSysMetadata: true, qd: qd, selectedIDs: qd?.where?.map((w) => ({ tid: w.tid, mid: w.mid })), onClose: () => setShowFiltersConfig(false), onChoose: (tid_mids) => {
                                             if (!fromDTD?.metadata)
                                                 return;

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

@@ -468,19 +468,19 @@ const TMSearchResult = ({ context = SearchResultContext.METADATA_SEARCH, isVisib
                                                             ? _jsx(TMLayoutItem, { children: _jsx(TMDcmtPreview, { onClose: () => { setIsOpenPreview(false); onClosePreview?.(); }, dcmtData: currentDcmt, canNext: canNavigateHandler('next'), canPrev: canNavigateHandler('prev'), onNext: () => onNavigateHandler('next'), onPrev: () => onNavigateHandler('prev') }) })
                                                             : _jsx(_Fragment, {})] }) })
                                             : _jsx(_Fragment, {})] }) }) }), showSearchResultSidebar && _jsx(TMCommandsPanel, { isMobile: deviceType === DeviceType.MOBILE, items: [
-                        { icon: _jsx(IconShow, { fontSize: 20 }), selected: isOpenPreview, disabled: isPreviewDisabled, onClick: () => { if (!isPreviewDisabled)
+                        { icon: _jsx(IconShow, {}), selected: isOpenPreview, disabled: isPreviewDisabled, onClick: () => { if (!isPreviewDisabled)
                                 setIsOpenPreview(!isOpenPreview); } },
-                        { icon: _jsx(IconBoard, { fontSize: 20 }), selected: isOpenBoard, disabled: isBoardDisabled, onClick: () => { if (!isBoardDisabled) {
+                        { icon: _jsx(IconBoard, {}), selected: isOpenBoard, disabled: isBoardDisabled, onClick: () => { if (!isBoardDisabled) {
                                 closeMiddlePanel();
                                 setIsOpenBoard(!isOpenBoard);
                             } } },
-                        { icon: _jsx(IconDcmtTypeSys, { fontSize: 20 }), selected: isOpenSysMetadata, disabled: isSysMetadataDisabled, onClick: () => { if (!isSysMetadataDisabled) {
+                        { icon: _jsx(IconDcmtTypeSys, {}), selected: isOpenSysMetadata, disabled: isSysMetadataDisabled, onClick: () => { if (!isSysMetadataDisabled) {
                                 closeMiddlePanel();
                                 setIsOpenSysMetadata(!isOpenSysMetadata);
                             } } },
-                        ...(currentTIDHasMasterRelations ? [{ icon: _jsx(IconDetailDcmts, { fontSize: 20 }), selected: isOpenMaster, disabled: isMasterDisabled, onClick: () => { if (!isMasterDisabled)
+                        ...(currentTIDHasMasterRelations ? [{ icon: _jsx(IconDetailDcmts, {}), selected: isOpenMaster, disabled: isMasterDisabled, onClick: () => { if (!isMasterDisabled)
                                     setIsOpenMaster(!isOpenMaster); } }] : []),
-                        ...(currentTIDHasDetailRelations ? [{ icon: _jsx(IconDetailDcmts, { fontSize: 20, transform: 'scale(-1, 1)' }), selected: isOpenDetails, disabled: isDetailsDisabled, onClick: () => { if (!isDetailsDisabled)
+                        ...(currentTIDHasDetailRelations ? [{ icon: _jsx(IconDetailDcmts, { transform: 'scale(-1, 1)' }), selected: isOpenDetails, disabled: isDetailsDisabled, onClick: () => { if (!isDetailsDisabled)
                                     setIsOpenDetails(!isOpenDetails); } }] : []),
                     ] }), isOpenDetails &&
                     _jsx(StyledModalContainer, { style: { backgroundColor: 'white' }, children: _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) }) }), isOpenMaster &&

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

@@ -63,7 +63,7 @@ const TMTreeSelector = ({ layoutMode = LayoutModes.Update, onSelectedTIDChanged,
         if (treeItem.type == TreeItemTypes.DcmtType)
             return (_jsx(TMTidViewer, { tid: treeItem.tid, color: TMColors.primaryColor, showIcon: false }));
         else
-            return (_jsxs(StyledDivHorizontal, { style: { gap: 5 }, children: [_jsx(IconFolder, { fontSize: 18 }), _jsx("p", { children: treeItem.nameLoc })] }));
+            return (_jsxs(StyledDivHorizontal, { style: { gap: 5 }, children: [_jsx(IconFolder, { fontSize: 18 }), _jsx("p", { style: { color: TMColors.primaryColor }, children: treeItem.nameLoc })] }));
     };
     // Handles selection change in the data grid
     const onSelectionChanged = useCallback((e) => {

package/lib/components/grids/TMRecentsManager.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import styled from 'styled-components';
-import { useState } from 'react';
+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 } from '../../helper';
+import { IconDelete, SDKUI_Localizator, IconApply, IconInfo } from '../../helper';
 import { TMColors } from '../../utils/theme';
 import { DeviceType } from '../base/TMDeviceProvider';
 import { TMDcmtTypeChooserForm } from '../choosers/TMDcmtTypeChooser';
-import TMTidViewer from '../viewers/TMTidViewer';
+import TMTidViewer, { TMDcmtTypeTooltip } from '../viewers/TMTidViewer';
 const StyledRecentTidItem = styled.div `
     display: flex;
     flex-direction: column;
@@ -22,6 +22,21 @@ const StyledRecentTidItem = styled.div `
         cursor: pointer;
     }
 
+    .info-icon {
+        position: absolute;
+        left: -7px;
+        top: 50%;
+        transform: translateY(-50%);
+        opacity: 0;
+        transition: opacity 0.2s;
+        pointer-events: none;
+    }
+
+    &:hover .info-icon {
+        opacity: 1;
+        pointer-events: auto;
+    }
+
     &:last-child {
         border-bottom: none; // remove border for last item
         margin-bottom: 0;
@@ -30,6 +45,13 @@ const StyledRecentTidItem = styled.div `
 const iconDelete = () => ReactDOMServer.renderToString(_jsx(IconDelete, {}));
 const TMRecentsManager = ({ deviceType, mruTIDs, currentMruTID, onSelectedTID, onDeletedTID }) => {
     const [showDcmtTypeChooser, setShowDcmtTypeChooser] = useState(false);
+    const [recentDcmtTypes, setRecentDcmtTypes] = 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}`, onClick: () => { setShowDcmtTypeChooser(true); }, children: _jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%' }, children: _jsx("p", { style: {
                                     color: TMColors.primaryColor,
                                     fontSize: '1rem',
@@ -37,8 +59,8 @@ const TMRecentsManager = ({ deviceType, mruTIDs, currentMruTID, onSelectedTID, o
                                     whiteSpace: 'nowrap',
                                     overflow: 'hidden',
                                     textOverflow: 'ellipsis'
-                                }, children: `${SDKUI_Localizator.AllDcmtTypes} (${DcmtTypeListCacheService.CacheCount(true)})` }) }) }, 0), mruTIDs.map((tid) => {
-                        return (_jsxs(StyledRecentTidItem, { id: `tid-${tid}`, onClick: () => { onSelectedTID?.(tid); }, children: [_jsx("div", { style: { display: 'flex', justifyContent: 'center', width: '100%' }, children: _jsx(TMTidViewer, { tid: tid, color: TMColors.primaryColor, showIcon: false }) }), _jsx(ContextMenu, { dataSource: [{ text: SDKUI_Localizator.Remove, icon: iconDelete(), }], target: `#tid-${tid}`, onItemClick: () => { onDeletedTID?.(tid); } }), currentMruTID == tid &&
+                                }, 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 &&
                                     _jsx("div", { style: {
                                             width: '24px',
                                             height: '24px',
@@ -51,7 +73,7 @@ const TMRecentsManager = ({ deviceType, mruTIDs, currentMruTID, onSelectedTID, o
                                             justifyContent: 'center',
                                             fontSize: '1rem',
                                             fontWeight: 'bold'
-                                        }, children: _jsx(IconApply, { fontSize: 24, color: 'green' }) })] }, tid));
+                                        }, children: _jsx(IconApply, { fontSize: 24, color: 'green' }) })] }, dtd.id));
                     })] }), showDcmtTypeChooser && _jsx(TMDcmtTypeChooserForm, { onClose: () => setShowDcmtTypeChooser(false), onChoose: (tids) => { onSelectedTID?.(tids?.[0] ?? 0); } })] }));
 };
 export default TMRecentsManager;

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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ResizableGrid.tsx
+import React, { useRef, useState } from 'react';
+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 ? ' 6px' : ''}`)
+        .join(' ');
+    return (_jsx("div", { ref: containerRef, style: {
+            display: 'grid',
+            gridTemplateColumns,
+            width: '100%',
+            height: '100%',
+            position: 'relative',
+        }, children: panels.map((panel, idx) => (_jsxs(React.Fragment, { children: [_jsx("div", { style: { overflow: 'auto', height: '100%' }, children: panel }), idx < panelCount - 1 && (_jsx("div", { style: {
+                        cursor: 'col-resize',
+                        background: '#e0e0e0',
+                        width: 6,
+                        zIndex: 1,
+                        height: '100%',
+                    }, onMouseDown: e => handleMouseDown(idx, e) }))] }, idx))) }));
+};
+export default ResizableGrid;

package/lib/components/sidebar/TMCommandsPanel.js

@@ -3,9 +3,10 @@ import styled from 'styled-components';
 export const StyledCommandsPanel = styled.div `
     display: flex;
     flex-direction: ${({ $isMobile }) => ($isMobile ? 'row' : 'column')};
-    width: ${({ $isMobile }) => ($isMobile ? '100%' : '40px')};
-    height: ${({ $isMobile }) => ($isMobile ? '40px' : 'max-content')};
-    background: transparent linear-gradient(90deg, #E03A8B 9%, #C2388B 34%, #A63B8D 60%, #943C8D 83%, #8F3C8D 100%) 0% 0% no-repeat padding-box;
+    align-items: center;
+    width: ${({ $isMobile }) => ($isMobile ? '100%' : '50px')};
+    height: ${({ $isMobile }) => ($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;
     border-radius: ${({ $isMobile }) => ($isMobile ? '10px 10px 0 0' : '10px 0px 0px 10px')};
     padding: 10px;
     gap: 10px;
@@ -13,13 +14,14 @@ export const StyledCommandsPanel = styled.div `
 const TMCommandsPanel = ({ isMobile, items }) => (_jsx(StyledCommandsPanel, { "$isMobile": isMobile, children: items.map((iconProps, idx) => (_jsx("span", { style: {
             background: iconProps.selected ? 'white' : 'transparent',
             borderRadius: '6px',
-            color: iconProps.selected ? '#E03A8B' : 'white',
+            color: iconProps.selected ? '#005B97' : 'white',
             opacity: iconProps.disabled ? 0.4 : 1,
             cursor: iconProps.disabled ? 'not-allowed' : 'pointer',
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
-            height: '24px',
-            width: '24px',
-        }, onClick: iconProps.disabled ? undefined : iconProps.onClick, children: iconProps.icon }, idx))) }));
+            height: '32px',
+            width: '32px',
+            margin: '0 auto',
+        }, onClick: iconProps.disabled ? undefined : iconProps.onClick, children: _jsx("span", { style: { fontSize: 24 }, children: iconProps.icon }) }, idx))) }));
 export default TMCommandsPanel;

package/package.json

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