@topconsultnpm/sdkui-react-beta 6.13.29 → 6.13.31

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

@@ -12,6 +12,7 @@ export interface ITMPanelProps {
     toolbar?: any;
     padding?: string;
     keepActiveState?: boolean;
+    isVisible?: boolean;
     onBack?: () => void;
     onClose?: () => void;
     onHeaderDoubleClick?: () => void;

package/lib/components/base/TMPanel.js

@@ -11,6 +11,8 @@ const StyledPanelContainer = styled.div `
     border-radius: 10px;
     opacity: 1;
     background: #FFFFFF;
+    min-height: 0; 
+    overflow: hidden;
     position: ${({ $isMaximized }) => $isMaximized ? 'fixed' : 'relative'};
     top: ${({ $isMaximized }) => $isMaximized ? '50px' : 'auto'};
     left: ${({ $isMaximized }) => $isMaximized ? '50px' : 'auto'};
@@ -49,6 +51,7 @@ const StyledPanelHeader = styled.div `
 const StyledPanelContent = styled.div `
     width: 100%;
     height: ${props => props.$height};
+    min-height: 0; 
     overflow: hidden;
     border-bottom-right-radius: 10px;
     border-bottom-left-radius: 10px;
@@ -62,7 +65,7 @@ const StyledPanelContent = styled.div `
         outline: none;
     }
 `;
-const TMPanel = ({ allowMaximize = true, color, backgroundColor, backgroundColorContainer, children, showHeader = true, title, totalItems, displayedItemsCount, toolbar, padding = '5px', keepActiveState = false, onBack, onClose, onHeaderDoubleClick, onMaximize }) => {
+const TMPanel = ({ allowMaximize = true, color, backgroundColor, backgroundColorContainer, children, showHeader = true, title, totalItems, displayedItemsCount, toolbar, padding = '5px', keepActiveState = false, isVisible = true, onBack, onClose, onHeaderDoubleClick, onMaximize }) => {
     const [isActive, setIsActive] = useState(false);
     const [isMaximized, setIsMaximized] = useState(false);
     const [minWidth, setMinWidth] = useState(undefined);
@@ -95,7 +98,10 @@ const TMPanel = ({ allowMaximize = true, color, backgroundColor, backgroundColor
             return newValue;
         });
     };
-    return (_jsxs(StyledPanelContainer, { "$isMaximized": onMaximize ? false : isMaximized, style: minWidth ? { minWidth } : undefined, children: [showHeader &&
+    return (_jsxs(StyledPanelContainer, { "$isMaximized": onMaximize ? false : isMaximized, style: {
+            ...(minWidth ? { minWidth } : {}),
+            visibility: isVisible ? 'visible' : 'hidden',
+        }, children: [showHeader &&
                 _jsx(StyledPanelHeader, { "$backgroundColor": backgroundColor, "$color": color, "$isActive": isActive, onDoubleClick: () => { if (onHeaderDoubleClick)
                         onHeaderDoubleClick(); }, tabIndex: -1, onFocus: handleFocus, onBlur: handleBlur, onClick: handleFocus, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', width: '100%' }, children: [_jsxs("div", { ref: titleRowRef, style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '8px' }, children: [onBack &&
                                         _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconArrowLeft, {}), caption: SDKUI_Localizator.Back, onClick: onBack }), _jsx("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center' }, children: _jsxs("p", { style: {

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

@@ -27,7 +27,9 @@ interface ITMDcmtFormProps {
     onClose?: () => void;
     onSavedAsyncCallback?: (tid: number | undefined, did: number | undefined) => Promise<void>;
     onSaveRecents?: (TIDs: number[]) => void;
-    onClosePreview?: () => void;
+    onClosePreviewPanel?: () => void;
+    onCloseBlogPanel?: () => void;
+    onCloseSysMetadataPanel?: () => void;
     isModal?: boolean;
     titleModal?: string;
     widthModal?: string;

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

@@ -33,7 +33,7 @@ import TMPanel from '../../base/TMPanel';
 import TMCommandsPanel from '../../sidebar/TMCommandsPanel';
 let abortControllerLocal = new AbortController();
 //#endregion
-const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes.Update, onClose, onSavedAsyncCallback, TID, DID, formMode = FormModes.Update, canNext, canPrev, count, itemIndex, onNext, onPrev, customRightSidebarItems = [], allowNavigation = true, allowRelations = true, isClosable = false, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, showDcmtForm = true, showDcmtFormSidebar = true, showPreview = false, showBoard = false, showSysMetadata = false, onClosePreview, titleModal, isModal = false, widthModal = "100%", heightModal = "100%" }) => {
+const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes.Update, onClose, onSavedAsyncCallback, TID, DID, formMode = FormModes.Update, canNext, canPrev, count, itemIndex, onNext, onPrev, customRightSidebarItems = [], allowNavigation = true, allowRelations = true, isClosable = false, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, showDcmtForm = true, showDcmtFormSidebar = true, showPreview = false, showBoard = false, showSysMetadata = false, onClosePreviewPanel, onCloseBlogPanel, onCloseSysMetadataPanel, titleModal, isModal = false, widthModal = "100%", heightModal = "100%" }) => {
     const mruTIDs = SDKUI_Globals.userSettings.archivingSettings.mruTIDs;
     const [id, setID] = useState('');
     const [showWaitPanelLocal, setShowWaitPanelLocal] = useState(false);
@@ -144,10 +144,13 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
         return _jsx(IconShow, {});
     }, [layoutMode, fileIsNotValid]);
     const closeMiddlePanel = () => {
+        if (isOpenSysMetadata)
+            onCloseSysMetadataPanel?.();
+        if (isOpenBoard)
+            onCloseBlogPanel?.();
         setIsOpenBoard(false);
         setIsOpenSysMetadata(false);
         setIsOpenTags(false);
-        // setIsOpenDistinctValues(false);
         setIsOpenFormulaEditor(false);
     };
     const titleText = () => {
@@ -157,7 +160,6 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
             return 'Metadati di sistema';
         if (isOpenBoard)
             return 'Bacheca';
-        // if (isOpenDistinctValues) return `${SDKUI_Localizator.DistinctValues} (${focusedMetadataValue?.md?.nameLoc})`;
         if (isOpenFormulaEditor)
             return `${SDKUI_Localizator.FormulaEditorTitle} (${focusedMetadataValue?.md?.nameLoc})`;
         return '';
@@ -468,21 +470,21 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
                                                         } }), _jsxs(StyledFormButtonsContainer, { children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 10 }, children: [fromDTD?.templateTID === TemplateTIDs.WF_WIApprView && _jsx(WorkFlowOperationButtons, { onApprove: () => setShowApprovePopup(true), onReject: () => setShowRejectPopup(true), onReAssign: () => setShowReAssignPopup(true), isInDcmtForm: true }), _jsx("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '8px' }, children: layoutMode === LayoutModes.Update ? _jsxs(_Fragment, { children: [_jsx(TMSaveFormButtonSave, { showTooltip: false, btnStyle: 'advanced', advancedColor: '#f09c0a', isModified: isModified, formMode: formMode, errorsCount: validationItems.filter(o => o.ResultType == ResultTypes.ERROR).length, onSaveAsync: confirmActionPopup }), _jsx(TMSaveFormButtonUndo, { btnStyle: 'toolbar', showTooltip: true, color: 'primary', isModified: isModified, formMode: formMode, onUndo: onUndoHandler })] }) :
                                                                             _jsxs(_Fragment, { children: [_jsx(TMButton, { disabled: archiveBtnDisabled, btnStyle: 'advanced', icon: _jsx(IconBoxArchiveIn, {}), showTooltip: false, caption: 'Archivia', advancedColor: TMColors.success, onClick: confirmActionPopup }), _jsx(TMButton, { disabled: !clearFormBtnDisabled, btnStyle: 'advanced', icon: _jsx(IconClear, {}), showTooltip: false, caption: 'Pulisci', advancedColor: TMColors.tertiary, onClick: clearFormHandler }), DID && _jsx(TMButton, { disabled: undoBtnDisabled, btnStyle: 'advanced', icon: _jsx(IconUndo, {}), width: '150px', showTooltip: false, caption: 'Annulla modifiche', advancedColor: TMColors.tertiary, onClick: onUndoHandler })] }) })] }), totalItems > listMaxItems && _jsx(TMShowAllOrMaxItemsButton, { showAll: showAll, dataSourceLength: totalItems, onClick: () => { setShowAll(!showAll); } })] }), showApprovePopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, TID: TID, DID: DID, op: 0, onClose: () => setShowApprovePopup(false) }), showRejectPopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, TID: TID, DID: DID, op: 1, onClose: () => setShowRejectPopup(false) }), showReAssignPopup && _jsx(WorkFlowReAssignPopUp, { deviceType: deviceType, TID: TID, DID: DID, onClose: () => setShowReAssignPopup(false) }), _jsx(ConfirmAttachmentsDialog, {})] }) }) }), isOpenPreview || isOpenMiddlePanel() ?
                                         _jsx(TMLayoutItem, { children: _jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, showSeparator: deviceType !== DeviceType.MOBILE && (isOpenPreview && isOpenMiddlePanel()), start: getSecondarySplitterStartLayout(), min: ['0', '0'], separatorColor: 'transparent', children: [isOpenMiddlePanel()
-                                                        ? _jsx(TMLayoutItem, { children: _jsx(TMPanel, { showHeader: !(isOpenDetails && layoutMode === LayoutModes.Update), color: TMColors.primaryColor, backgroundColor: `${TMColors.primaryColor}25`, title: titleText(), toolbar: middlePanelToolbar, onClose: () => { closeMiddlePanel(); }, children: _jsx(StyledToolbarCardContainer, { children: _jsx(StyledSectionContainer, { children: _jsxs(StyledSidebarItemsContentContainer, { children: [isOpenBoard && layoutMode === LayoutModes.Update &&
-                                                                                    _jsx(TMDcmtBlog, { tid: TID, did: DID }), isOpenSysMetadata && layoutMode === LayoutModes.Update &&
-                                                                                    _jsx(TMMetadataValues, { layoutMode: layoutMode, openChooserBySingleClick: !isOpenDistinctValues, TID: TID, isReadOnly: true, deviceType: deviceType, metadataValues: formData.filter(o => (o.mid != undefined && o.mid <= 100)), metadataValuesOrig: formData.filter(o => (o.mid != undefined && o.mid <= 100)), validationItems: [] }), isOpenFormulaEditor &&
-                                                                                    _jsx(TMFormulaEditor, { isModal: false, formMode: FormModes.Update, inputData: getFormula(), showBack: false, onClose: () => setIsOpenFormulaEditor(false), onApplied: (newFormula) => {
-                                                                                            setFormData((prevItems) => prevItems.map((item) => item.tid == newFormula.tid && item.mid === newFormula.mid ? { ...item, value: FormulaHelper.addFormulaTag(newFormula.expression), isSelected: true, isEditable: true } : item));
-                                                                                            setFocusedMetadataValue(prevState => ({
-                                                                                                ...prevState,
-                                                                                                isSelected: true,
-                                                                                                isEditable: true,
-                                                                                                value: FormulaHelper.addFormulaTag(newFormula.expression)
-                                                                                            }));
-                                                                                        } })] }) }) }) }) })
+                                                        ? _jsx(TMLayoutItem, { children: _jsxs(TMPanel, { showHeader: !(isOpenDetails && layoutMode === LayoutModes.Update), title: titleText(), toolbar: middlePanelToolbar, onClose: () => { closeMiddlePanel(); }, children: [isOpenBoard && layoutMode === LayoutModes.Update &&
+                                                                        _jsx(TMDcmtBlog, { tid: TID, did: DID }), isOpenSysMetadata && layoutMode === LayoutModes.Update &&
+                                                                        _jsx(TMMetadataValues, { layoutMode: layoutMode, openChooserBySingleClick: !isOpenDistinctValues, TID: TID, isReadOnly: true, deviceType: deviceType, metadataValues: formData.filter(o => (o.mid != undefined && o.mid <= 100)), metadataValuesOrig: formData.filter(o => (o.mid != undefined && o.mid <= 100)), validationItems: [] }), isOpenFormulaEditor &&
+                                                                        _jsx(TMFormulaEditor, { isModal: false, formMode: FormModes.Update, inputData: getFormula(), showBack: false, onClose: () => setIsOpenFormulaEditor(false), onApplied: (newFormula) => {
+                                                                                setFormData((prevItems) => prevItems.map((item) => item.tid == newFormula.tid && item.mid === newFormula.mid ? { ...item, value: FormulaHelper.addFormulaTag(newFormula.expression), isSelected: true, isEditable: true } : item));
+                                                                                setFocusedMetadataValue(prevState => ({
+                                                                                    ...prevState,
+                                                                                    isSelected: true,
+                                                                                    isEditable: true,
+                                                                                    value: FormulaHelper.addFormulaTag(newFormula.expression)
+                                                                                }));
+                                                                            } })] }) })
                                                         : _jsx(_Fragment, {}), isOpenPreview
                                                         ? _jsxs(TMLayoutItem, { children: [layoutMode === LayoutModes.Update ?
-                                                                    _jsx(TMDcmtPreview, { onClose: () => { setIsOpenPreview(false); onClosePreview?.(); }, dcmtData: currentDcmt, canNext: canNext, canPrev: canPrev, onNext: onNext, onPrev: onPrev }) :
+                                                                    _jsx(TMDcmtPreview, { onClose: () => { setIsOpenPreview(false); onClosePreviewPanel?.(); }, dcmtData: currentDcmt, canNext: canNext, canPrev: canPrev, onNext: onNext, onPrev: onPrev }) :
                                                                     _jsx(TMFileUploader, { onFileUpload: (file) => setDcmtFile(file), onClose: () => setIsOpenPreview(false), isRequired: fromDTD?.archiveConstraint === ArchiveConstraints.ContentCompulsory && dcmtFile === null, defaultBlob: dcmtFile, deviceType: deviceType }), " "] })
                                                         : _jsx(_Fragment, {})] }) }) : _jsx(_Fragment, {})] }), isOpenDistinctValues &&
                                 _jsx(TMDistinctValues, { tid: TID, mid: focusedMetadataValue?.mid, isModal: true, showHeader: false, layoutMode: layoutMode, onSelectionChanged: (e) => {
@@ -506,9 +508,9 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
                                     setIsOpenSysMetadata(!isOpenSysMetadata);
                                 } } },
                         ] : []),
-                        ...(currentTIDHasMasterRelations ? [{ icon: _jsx(IconDetailDcmts, {}), selected: isOpenMaster, disabled: isMasterDisabled, onClick: () => { if (!isMasterDisabled)
+                        ...(allowRelations && currentTIDHasMasterRelations ? [{ icon: _jsx(IconDetailDcmts, {}), selected: isOpenMaster, disabled: isMasterDisabled, onClick: () => { if (!isMasterDisabled)
                                     setIsOpenMaster(!isOpenMaster); } }] : []),
-                        ...(currentTIDHasDetailRelations ? [{ icon: _jsx(IconDetailDcmts, { transform: 'scale(-1, 1)' }), selected: isOpenDetails, disabled: isDetailsDisabled, onClick: () => { if (!isDetailsDisabled)
+                        ...(allowRelations && 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

@@ -393,8 +393,8 @@ const TMMasterDetailDcmts = ({ deviceType, inputDcmts, isForMaster, showCurrentD
                                             _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); }, 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: [
+                                    _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); } },

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

@@ -9,3 +9,4 @@ interface ITMSearchProps {
 }
 declare const TMSearch: React.FunctionComponent<ITMSearchProps>;
 export default TMSearch;
+export declare function IconSearchResults(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

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

@@ -5,7 +5,7 @@ import TMSavedQuerySelector from './TMSavedQuerySelector';
 import TMTreeSelector from './TMTreeSelector';
 import { TabPanel, Item } from 'devextreme-react/tab-panel';
 import TMSearchQueryPanel, { refreshLastSearch } from './TMSearchQueryPanel';
-import { getSysAllDcmtsSQD, IconProgressReady, IconSavedQuery, IconSearch, IconTree, SDKUI_Globals, SDKUI_Localizator } from '../../../helper';
+import { getSysAllDcmtsSQD, IconProgressReady, IconSavedQuery, IconTree, SDKUI_Globals, SDKUI_Localizator } from '../../../helper';
 import { TMLayoutItem, TMSplitterLayout } from '../../base/TMLayout';
 import TMPanel from '../../base/TMPanel';
 import TMSearchResult from './TMSearchResult';
@@ -29,9 +29,9 @@ const TMSearch = ({ inputTID, inputSqdID, isExpertMode = SDKUI_Globals.userSetti
     const [searchResult, setSearchResult] = useState([]);
     const [mruTIDs, setMruTIDs] = useState([]);
     const [currentSearchView, setCurrentSearchView] = useState(TMSearchViews.None);
-    const [showDistinctValuesPanel, setShowDistinctValuesPanel] = useState(false);
     const [showTreesPanel, setShowTreesPanel] = useState(true);
     const [showRecentsPanel, setShowRecentsPanel] = useState(true);
+    const [showSearchPanel, setShowSearchPanel] = useState(true);
     const [showSavedQueryPanel, setShowSavedQueryPanel] = useState(true);
     const [currentSQDMode, setCurrentSQDMode] = useState(1);
     const [lastQdSearched, setLastQdSearched] = useState();
@@ -54,6 +54,7 @@ const TMSearch = ({ inputTID, inputSqdID, isExpertMode = SDKUI_Globals.userSetti
     }, [inputSqdID]);
     useEffect(() => {
         if (!currentTID || currentTID <= 0) {
+            setShowSearchPanel(false);
             setSearchResult([]);
             return;
         }
@@ -63,6 +64,7 @@ const TMSearch = ({ inputTID, inputSqdID, isExpertMode = SDKUI_Globals.userSetti
             setFilteredByTIDSQDs(sqds);
             setCurrentSQDMode(0);
             await setDefaultSQDAsync(sqds);
+            setShowSearchPanel(true);
         });
     }, [currentTID]);
     useEffect(() => {
@@ -131,74 +133,78 @@ const TMSearch = ({ inputTID, inputSqdID, isExpertMode = SDKUI_Globals.userSetti
                     gap: SDKUI_Globals.userSettings.themeSettings.gutters,
                     width: '100%',
                     height: '100%',
-                }, children: [_jsx("div", { style: { flex: 1, minWidth: 0, height: '100%' }, children: _jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, separatorActiveColor: 'transparent', separatorColor: 'transparent', showSeparator: deviceType !== DeviceType.MOBILE && showTreesPanel, min: ['0', '0'], start: (deviceType === DeviceType.MOBILE) ? ['100%', '0%'] : showTreesPanel ? ['20%', '80%'] : ['0%', '100%'], children: [deviceType !== DeviceType.MOBILE &&
+                }, children: [_jsx("div", { style: { flex: 1, minWidth: 0, height: '100%' }, children: _jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, separatorActiveColor: 'transparent', separatorColor: 'transparent', showSeparator: deviceType !== DeviceType.MOBILE && showTreesPanel, min: ['0', '0'], start: isMobile ? ['100%', '0%'] : showTreesPanel ? ['20%', '80%'] : ['0%', '100%'], children: [!isMobile &&
                                     _jsx(TMTreeSelector, { onClose: () => setShowTreesPanel(false), onSelectedTIDChanged: (tid) => {
                                             setCurrentTID(tid);
                                             if (tid && mruTIDs.includes(tid))
                                                 setCurrentMruTID(tid);
                                             else
                                                 setCurrentMruTID(0);
-                                        } }), _jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', showSeparator: deviceType !== DeviceType.MOBILE && showSavedQueryPanel && !showDistinctValuesPanel, separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: (deviceType === DeviceType.MOBILE || showDistinctValuesPanel) ? ['100%', '0%'] : ((showSavedQueryPanel) ? ['70%', '30%'] : ['100%', '0%']), children: [_jsx(TMLayoutItem, { children: _jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', showSeparator: deviceType !== DeviceType.MOBILE && showRecentsPanel, separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: deviceType === DeviceType.DESKTOP ? (showRecentsPanel ? ['30%', '70%'] : ['0%', '100%']) : (currentTID ? ['0%', '100%'] : ['100%', '0%']), children: [_jsx(TMPanel, { title: "Scorciatoie", totalItems: mruTIDs.length, onClose: () => setShowRecentsPanel(false), children: _jsx(TMRecentsManager, { mruTIDs: mruTIDs, currentMruTID: currentMruTID, deviceType: deviceType, onSelectedTID: (tid) => { setCurrentMruTID(tid); setCurrentTID(tid); }, onDeletedTID: (tid) => {
+                                        } }), _jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', showSeparator: deviceType !== DeviceType.MOBILE && showSavedQueryPanel, separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: isMobile ? ['100%', '0%'] : ((showSavedQueryPanel) ? ['70%', '30%'] : ['100%', '0%']), children: [_jsx(TMLayoutItem, { children: _jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', showSeparator: deviceType !== DeviceType.MOBILE && showRecentsPanel, separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: deviceType === DeviceType.DESKTOP ? (showRecentsPanel ? ['30%', '70%'] : ['0%', '100%']) : (currentTID ? ['0%', '100%'] : ['100%', '0%']), children: [_jsx(TMPanel, { title: "Scorciatoie", totalItems: mruTIDs.length, allowMaximize: !isMobile, onClose: isMobile ? undefined : () => setShowRecentsPanel(false), children: _jsx(TMRecentsManager, { mruTIDs: mruTIDs, currentMruTID: currentMruTID, deviceType: deviceType, onSelectedTID: (tid) => { setCurrentMruTID(tid); setCurrentTID(tid); }, onDeletedTID: (tid) => {
                                                                 let newMruTIDS = mruTIDs.slice();
                                                                 let index = newMruTIDS.findIndex(o => o == tid);
                                                                 if (index >= 0)
                                                                     newMruTIDS.splice(index, 1);
                                                                 SDKUI_Globals.userSettings.searchSettings.mruTIDs = newMruTIDS.filter(tid => tid != undefined && tid != null);
                                                                 setMruTIDs(newMruTIDS);
-                                                            } }) }), _jsx(TMSearchQueryPanel, { isExpertMode: isExpertMode, fromDTD: fromDTD, SQD: currentSQD, onBack: deviceType !== DeviceType.DESKTOP ? () => { setCurrentTID(0); } : undefined, onSearchCompleted: (searchResult, qd) => {
-                                                            setSearchResult(searchResult);
-                                                            if (searchResult.length <= 0)
-                                                                return;
-                                                            setLastQdSearched(qd);
-                                                            setCurrentSearchView(TMSearchViews.Result);
-                                                            // Salvataggio ultimi 10 TIDs 
-                                                            let fromTID = searchResult?.[0].fromTID;
-                                                            let newMruTIDS = mruTIDs.slice();
-                                                            let index = newMruTIDS.findIndex(o => o == fromTID);
-                                                            if (index >= 0)
-                                                                newMruTIDS.splice(index, 1);
-                                                            if (newMruTIDS.length >= 10)
-                                                                newMruTIDS.splice(0, 1);
-                                                            newMruTIDS.push(fromTID);
-                                                            setMruTIDs(newMruTIDS);
-                                                            setCurrentMruTID(fromTID);
-                                                            SDKUI_Globals.userSettings.searchSettings.mruTIDs = newMruTIDS.filter(tid => tid != undefined && tid != null);
-                                                        }, onSqdSaved: async (newSqd) => {
-                                                            await loadDataSQDsAsync(true, newSqd.masterTID);
-                                                            await setSQDAsync(newSqd);
-                                                        } })] }) }), _jsx(StyledMultiViewPanel, { "$isVisible": showSavedQueryPanel, children: _jsx(TMPanel, { title: SDK_Localizator.SavedQueries, onClose: () => setShowSavedQueryPanel(false), children: _jsxs(TabPanel, { width: "100%", height: "100%", showNavButtons: true, repaintChangesOnly: true, selectedIndex: currentSQDMode, onSelectedIndexChange: (index) => setCurrentSQDMode(index), children: [(currentTID || currentSQD) ? _jsx(Item, { title: fromDTD?.nameLoc, children: _jsx(TMSavedQuerySelector, { allowShowSearch: false, items: filteredByTIDSQDs, selectedId: currentSQD?.id, onRefreshData: () => { loadDataSQDsAsync(true); }, onItemClick: (sqd) => onSQDItemClick(sqd, setSQDAsync), onDeleted: (sqd) => onSQDDeleted(sqd, sqd.id == currentSQD?.id ? filteredByTIDSQDs.find(o => o.id == 1) : currentSQD, setSQDAsync) }) }) : _jsx(_Fragment, {}), _jsx(Item, { title: SDKUI_Localizator.Alls2, children: _jsx(TMSavedQuerySelector, { allowShowSearch: true, items: allSQDs, manageDefault: false, 
+                                                            } }) }), _jsx(StyledMultiViewPanel, { "$isVisible": showSearchPanel || !isMobile, children: _jsx(TMSearchQueryPanel, { isExpertMode: isExpertMode, fromDTD: fromDTD, SQD: currentSQD, onBack: deviceType !== DeviceType.DESKTOP ? () => { setCurrentTID(0); } : undefined, onSearchCompleted: (searchResult, qd) => {
+                                                                setSearchResult(searchResult);
+                                                                if (searchResult.length <= 0)
+                                                                    return;
+                                                                setLastQdSearched(qd);
+                                                                setCurrentSearchView(TMSearchViews.Result);
+                                                                // Salvataggio ultimi 10 TIDs 
+                                                                let fromTID = searchResult?.[0].fromTID;
+                                                                let newMruTIDS = mruTIDs.slice();
+                                                                let index = newMruTIDS.findIndex(o => o == fromTID);
+                                                                if (index >= 0)
+                                                                    newMruTIDS.splice(index, 1);
+                                                                if (newMruTIDS.length >= 10)
+                                                                    newMruTIDS.splice(0, 1);
+                                                                newMruTIDS.push(fromTID);
+                                                                setMruTIDs(newMruTIDS);
+                                                                setCurrentMruTID(fromTID);
+                                                                SDKUI_Globals.userSettings.searchSettings.mruTIDs = newMruTIDS.filter(tid => tid != undefined && tid != null);
+                                                            }, onSqdSaved: async (newSqd) => {
+                                                                await loadDataSQDsAsync(true, newSqd.masterTID);
+                                                                await setSQDAsync(newSqd);
+                                                            } }) })] }) }), _jsx(StyledMultiViewPanel, { "$isVisible": showSavedQueryPanel && !isMobile, children: _jsx(TMPanel, { title: SDK_Localizator.SavedQueries, allowMaximize: !isMobile, onClose: isMobile ? undefined : () => setShowSavedQueryPanel(false), children: _jsxs(TabPanel, { width: "100%", height: "100%", showNavButtons: true, repaintChangesOnly: true, selectedIndex: currentSQDMode, onSelectedIndexChange: (index) => setCurrentSQDMode(index), children: [(currentTID || currentSQD) ? _jsx(Item, { title: fromDTD?.nameLoc, children: _jsx(TMSavedQuerySelector, { allowShowSearch: false, items: filteredByTIDSQDs, selectedId: currentSQD?.id, onRefreshData: () => { loadDataSQDsAsync(true); }, onItemClick: (sqd) => onSQDItemClick(sqd, setSQDAsync), onDeleted: (sqd) => onSQDDeleted(sqd, sqd.id == currentSQD?.id ? filteredByTIDSQDs.find(o => o.id == 1) : currentSQD, setSQDAsync) }) }) : _jsx(_Fragment, {}), _jsx(Item, { title: SDKUI_Localizator.Alls2, children: _jsx(TMSavedQuerySelector, { allowShowSearch: true, items: allSQDs, manageDefault: false, 
                                                                 // 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, {}),
-                                selected: showTreesPanel,
-                                onClick: () => setShowTreesPanel(!showTreesPanel),
-                            },
-                            {
-                                icon: _jsx(IconProgressReady, {}),
-                                selected: showRecentsPanel,
-                                onClick: () => setShowRecentsPanel(!showRecentsPanel),
-                            },
-                            {
-                                icon: _jsx(IconSavedQuery, {}),
-                                selected: showSavedQueryPanel,
-                                onClick: () => setShowSavedQueryPanel(!showSavedQueryPanel),
-                            },
-                            ...(searchResult.length > 0 ? [{
-                                    icon: _jsx(IconSearch, {}),
-                                    disabled: searchResult.length <= 0,
-                                    onClick: () => {
-                                        if (searchResult.length > 0) {
-                                            setCurrentSearchView(currentSearchView === TMSearchViews.None
-                                                ? TMSearchViews.Result
-                                                : TMSearchViews.None);
-                                        }
-                                    },
-                                }] : []),
-                        ] })] }), searchResult.length > 0 &&
+                                                                onItemClick: (sqd) => onSQDItemClick(sqd, setSQDAsync), onDeleted: (sqd) => onSQDDeleted(sqd, sqd.id == currentSQD?.id ? undefined : currentSQD, setSQDAsync) }) })] }) }) })] })] }) }), !isMobile &&
+                        _jsx(TMCommandsPanel, { isMobile: isMobile, items: [
+                                {
+                                    icon: _jsx(IconTree, {}),
+                                    selected: showTreesPanel,
+                                    onClick: () => setShowTreesPanel(!showTreesPanel),
+                                },
+                                {
+                                    icon: _jsx(IconProgressReady, {}),
+                                    selected: showRecentsPanel,
+                                    onClick: () => setShowRecentsPanel(!showRecentsPanel),
+                                },
+                                {
+                                    icon: _jsx(IconSavedQuery, {}),
+                                    selected: showSavedQueryPanel,
+                                    onClick: () => setShowSavedQueryPanel(!showSavedQueryPanel),
+                                },
+                                ...(searchResult.length > 0 ? [{
+                                        icon: _jsx(IconSearchResults, {}),
+                                        disabled: searchResult.length <= 0,
+                                        onClick: () => {
+                                            if (searchResult.length > 0) {
+                                                setCurrentSearchView(currentSearchView === TMSearchViews.None
+                                                    ? TMSearchViews.Result
+                                                    : TMSearchViews.None);
+                                            }
+                                        },
+                                    }] : []),
+                            ] })] }), searchResult.length > 0 &&
                 _jsx(TMSearchResult, { isVisible: currentSearchView === TMSearchViews.Result, context: SearchResultContext.METADATA_SEARCH, searchResults: searchResult, onRefreshAfterAddDcmtToFavs: onRefreshAfterAddDcmtToFavs, onRefreshSearchAsync: async () => {
                         // setSearchResult([]);
                         setSearchResult(await refreshLastSearch(lastQdSearched) ?? []);
                     }, onTaskCreateRequest: onTaskCreateRequest, onClose: () => { setCurrentSearchView(TMSearchViews.None); } })] }));
 };
 export default TMSearch;
+export function IconSearchResults(props) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "1em", height: "1em", ...props, children: _jsx("path", { fill: "currentColor", d: "M5.75 3h8.5A2.75 2.75 0 0 1 17 5.75v8.5A2.75 2.75 0 0 1 14.25 17h-4.129l-1-1h5.129A1.75 1.75 0 0 0 16 14.25v-8.5A1.75 1.75 0 0 0 14.25 4h-8.5A1.75 1.75 0 0 0 4 5.75v3.277a4.5 4.5 0 0 0-1 .23V5.75A2.75 2.75 0 0 1 5.75 3M9.5 14a.5.5 0 0 1 0-1h4a.5.5 0 0 1 0 1zm-2-6.75a.75.75 0 1 1-1.5 0a.75.75 0 0 1 1.5 0m2-.25a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1zm0 3a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1zm-5 7c.786 0 1.512-.26 2.096-.697l2.55 2.55a.5.5 0 1 0 .708-.707l-2.55-2.55A3.5 3.5 0 1 0 4.5 17m0-1a2.5 2.5 0 1 1 0-5a2.5 2.5 0 0 1 0 5" }) }));
+}

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

@@ -102,7 +102,7 @@ const TMSearchQueryPanel = ({ fromDTD, isExpertMode = SDKUI_Globals.userSettings
             }
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsxs(TMPanel, { title: fromDTD?.nameLoc ?? SDKUI_Localizator.Search_Metadata, onBack: onBack, keepActiveState: keepStatePanelIsActive, toolbar: _jsx(_Fragment, { children: (SQD && !showSqdForm) ?
+    return (_jsxs(_Fragment, { children: [_jsxs(TMPanel, { title: fromDTD?.nameLoc ?? SDKUI_Localizator.Search_Metadata, allowMaximize: deviceType !== DeviceType.MOBILE, onBack: onBack, keepActiveState: keepStatePanelIsActive, toolbar: _jsx(_Fragment, { children: (SQD && !showSqdForm) ?
                         _jsx(TMDropDownMenu, { backgroundColor: 'white', borderRadius: '3px', content: _jsx(TMButton, { btnStyle: 'icon', caption: 'Altro', icon: _jsx(IconMenuVertical, { color: 'white' }), showTooltip: false }), items: [
                                 { icon: _jsx(IconAddCircleOutline, {}), text: SDKUI_Localizator.SavedQueryNew, onClick: () => { openSqdForm(FormModes.Create); } },
                                 { icon: _jsx(IconEdit, {}), text: SDKUI_Localizator.SavedQueryUpdate, disabled: (SQD && SQD.id == 1), onClick: () => { openSqdForm(FormModes.Update); } },

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

@@ -20,7 +20,7 @@ interface ITMSearchResultProps {
     onSelectedTIDChanged?: (TID: number) => void;
     onRefreshSearchAsync?: () => Promise<void>;
     onRefreshAfterAddDcmtToFavs?: () => void;
-    onClosePreview?: () => void;
+    onClosePreviewPanel?: () => void;
     onTaskCreateRequest?: (taskContext: TaskContext) => void;
 }
 declare const TMSearchResult: React.FC<ITMSearchResultProps>;

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

@@ -54,7 +54,7 @@ const orderByName = (array) => {
     } return 0; });
 };
 //#endregion Helper Methods
-const TMSearchResult = ({ context = SearchResultContext.METADATA_SEARCH, isVisible = true, searchResults = [], showSearchResultSidebar = true, showSelector = false, onClosePreview, showDcmtForm = false, showBoard = false, showPreview = false, title, showSysMetadata = false, isClosable = false, allowFloatingBar = true, showToolbarHeader = true, onRefreshAfterAddDcmtToFavs, onRefreshSearchAsync, onSelectedTIDChanged, onUpdate, onClose, onTaskCreateRequest }) => {
+const TMSearchResult = ({ context = SearchResultContext.METADATA_SEARCH, isVisible = true, searchResults = [], showSearchResultSidebar = true, showSelector = false, onClosePreviewPanel, showDcmtForm = false, showBoard = false, showPreview = false, title, showSysMetadata = false, isClosable = false, allowFloatingBar = true, showToolbarHeader = true, onRefreshAfterAddDcmtToFavs, onRefreshSearchAsync, onSelectedTIDChanged, onUpdate, onClose, onTaskCreateRequest }) => {
     const [id, setID] = useState('');
     const [showApprovePopup, setShowApprovePopup] = useState(false);
     const [showRejectPopup, setShowRejectPopup] = useState(false);
@@ -465,7 +465,7 @@ const TMSearchResult = ({ context = SearchResultContext.METADATA_SEARCH, isVisib
                                                                             _jsxs(StyledContainer, { children: [isOpenBoard && _jsx(TMDcmtBlog, { tid: focusedItem?.TID, did: focusedItem?.DID }), isOpenSysMetadata &&
                                                                                         _jsx(TMMetadataValues, { layoutMode: LayoutModes.Update, openChooserBySingleClick: !isOpenDistinctValues, 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: [] })] }) }) })
                                                             : _jsx(_Fragment, {}), isOpenPreview
-                                                            ? _jsx(TMLayoutItem, { children: _jsx(TMDcmtPreview, { onClose: () => { setIsOpenPreview(false); onClosePreview?.(); }, dcmtData: currentDcmt, canNext: canNavigateHandler('next'), canPrev: canNavigateHandler('prev'), onNext: () => onNavigateHandler('next'), onPrev: () => onNavigateHandler('prev') }) })
+                                                            ? _jsx(TMLayoutItem, { children: _jsx(TMDcmtPreview, { onClose: () => { setIsOpenPreview(false); onClosePreviewPanel?.(); }, 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, {}), selected: isOpenPreview, disabled: isPreviewDisabled, onClick: () => { if (!isPreviewDisabled)

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { LayoutModes } from '@topconsultnpm/sdk-ts-beta';
 interface ITMTreeSelectorProps {
     layoutMode?: LayoutModes;
+    isVisible?: boolean;
     onSelectedTIDChanged?: (tid: number | undefined, treeId?: number | undefined) => void;
     onClose?: () => void;
 }

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

@@ -11,7 +11,10 @@ import TMLayoutContainer, { TMLayoutItem } from '../../base/TMLayout';
 import TMPanel from '../../base/TMPanel';
 import TMTidViewer from '../../viewers/TMTidViewer';
 import { TMColors } from '../../../utils/theme';
-const TMTreeSelector = ({ layoutMode = LayoutModes.Update, onSelectedTIDChanged, onClose }) => {
+import { useDeviceType, DeviceType } from '../../base/TMDeviceProvider';
+const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelectedTIDChanged, onClose }) => {
+    const deviceType = useDeviceType();
+    const isMobile = deviceType === DeviceType.MOBILE;
     const [trees, setTrees] = useState([]);
     const [treeItems, setTreeItems] = useState([]);
     const [selectedTreeId, setSelectedTreeId] = useState(0);
@@ -92,7 +95,7 @@ const TMTreeSelector = ({ layoutMode = LayoutModes.Update, onSelectedTIDChanged,
         }
         ;
     }, []);
-    return (_jsx(TMPanel, { title: SDK_Localizator.Trees, totalItems: trees.length, onClose: onClose, toolbar: _jsx(TMButton, { btnStyle: 'icon', caption: defaultTreeId == selectedTreeId ? SDKUI_Localizator.TreeRemoveDefault : SDKUI_Localizator.SetAsDefault, icon: defaultTreeId == selectedTreeId ? _jsx(IconStarRemove, { color: 'rgb(243, 114, 92)' }) : _jsx(IconStar, { color: 'rgb(248, 215, 117)' }), onClick: () => {
+    return (_jsx(TMPanel, { title: SDK_Localizator.Trees, isVisible: isVisible, totalItems: trees.length, onClose: isMobile ? undefined : onClose, allowMaximize: !isMobile, toolbar: _jsx(TMButton, { btnStyle: 'icon', caption: defaultTreeId == selectedTreeId ? SDKUI_Localizator.TreeRemoveDefault : SDKUI_Localizator.SetAsDefault, icon: defaultTreeId == selectedTreeId ? _jsx(IconStarRemove, { color: 'rgb(243, 114, 92)' }) : _jsx(IconStar, { color: 'rgb(248, 215, 117)' }), onClick: () => {
                 if (defaultTreeId == selectedTreeId) {
                     SDKUI_Globals.userSettings.searchSettings.defaultTree = -1;
                     setDefaultTreeId(-1);

package/lib/components/sidebar/TMCommandsPanel.js

@@ -7,7 +7,7 @@ export const StyledCommandsPanel = styled.div `
     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')};
+    border-radius: 10px;
     padding: 10px;
     gap: 10px;
 `;

package/lib/helper/SDKUI_Globals.js

@@ -1,5 +1,5 @@
 import { InvoiceRetrieveFormats, LocalStorageService, OrderRetrieveFormats } from "@topconsultnpm/sdk-ts-beta";
-import { FontSize } from "../utils/theme";
+import { FontSize, Gutters } from "../utils/theme";
 export const dcmtsFileCacheDownload = new Map();
 export const dcmtsFileCachePreview = new Map();
 export const CACHE_SIZE_LIMIT = 10;
@@ -63,7 +63,7 @@ export class ThemeSettings {
     constructor() {
         this.fontSize = FontSize.defaultFontSizeInPixel;
         this.gridSettings = new DataGridSettings();
-        this.gutters = 20;
+        this.gutters = Gutters.getGutters();
         // Automatically update the CSS variable for font size
         document.documentElement.style.setProperty('--base-font-size', this.fontSize);
     }

package/lib/utils/theme.d.ts

@@ -57,4 +57,9 @@ declare class TMMargin {
     static smallMargin: string;
     static largeMargin: string;
 }
-export { Colors, TMColors, FontSize, TMMargin };
+declare class Gutters {
+    static readonly defaultDesktop: number;
+    static readonly defaultMobile: number;
+    static getGutters(): number;
+}
+export { Colors, TMColors, FontSize, TMMargin, Gutters };

package/lib/utils/theme.js

@@ -56,4 +56,13 @@ class TMMargin {
 TMMargin.defultMargin = '5px';
 TMMargin.smallMargin = '3px';
 TMMargin.largeMargin = '10px';
-export { Colors, TMColors, FontSize, TMMargin };
+class Gutters {
+    static getGutters() {
+        // Detect mobile device (basic check)
+        const isMobile = /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
+        return isMobile ? this.defaultMobile : this.defaultDesktop;
+    }
+}
+Gutters.defaultDesktop = 20;
+Gutters.defaultMobile = 5;
+export { Colors, TMColors, FontSize, TMMargin, Gutters };

package/package.json

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