@topconsultnpm/sdkui-react-beta 6.13.12 → 6.13.14

package/lib/components/base/TMPanelManagerMatrix.js

@@ -0,0 +1,237 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useMemo, useState } from 'react';
+import { SDKUI_Globals, SDKUI_Localizator, IconWindowMinimize, IconWindowMaximize, IconInfo } from '../../helper';
+import TMButton from './TMButton';
+import { useDeviceType, DeviceType } from './TMDeviceProvider';
+import TMPanel from './TMPanel';
+import { calculatePanelSizes, DesktopToolbar, getDynamicColumnWidth, getInitialMobilePanelID, MobileToolbar } from './TMPanelManagerMatrixUtils';
+const TMPanelManagerMatrix = (props) => {
+    // Destructure props 
+    const { panelMatrixMap, toolbar, initialMobilePanelID, gutters = SDKUI_Globals.userSettings.themeSettings.gutters } = props;
+    // Get the current device type (e.g., mobile, tablet, desktop) using a custom hook.
+    const deviceType = useDeviceType();
+    // This avoids unnecessary re-renders by only recalculating when deviceType changes.
+    let isMobile = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
+    // State for toolbar items
+    const [toolbarState, setToolbarState] = useState(toolbar);
+    // State to track which panel IDs are currently hidden
+    const [hiddenPanelIds, setHiddenPanelIds] = useState(new Set());
+    // State to store the current widths of all column, represented as a Map
+    const [columnWidths, setColumnWidths] = useState(new Map());
+    // State to store the current heights of all panels, represented as a Map
+    const [panelHeights, setPanelHeights] = useState(new Map());
+    // State to track maximized panel
+    const [maximizedPanelId, setMaximizedPanelId] = useState(null);
+    // Memoized computation of visible columns and the total number of visible panels
+    const { visibleColumns, totalVisiblePanels } = useMemo(() => {
+        let totalVisiblePanels = 0;
+        const visibleColumns = [];
+        for (const [columnKey, column] of panelMatrixMap.entries()) {
+            // Filter visible rows in the current column
+            const visibleRows = column.rows.filter(row => !hiddenPanelIds.has(row.id));
+            // If any visible rows exist, include the column and count them
+            if (visibleRows.length > 0) {
+                visibleColumns.push(columnKey);
+                totalVisiblePanels += visibleRows.length;
+            }
+        }
+        return { visibleColumns, totalVisiblePanels };
+    }, [panelMatrixMap, hiddenPanelIds]);
+    // Effect hook to update column widths
+    useEffect(() => {
+        const newColumnWidths = new Map();
+        Array.from(panelMatrixMap.entries()).forEach(([columnKey, col]) => {
+            if (!maximizedPanelId) {
+                const width = getDynamicColumnWidth(col, hiddenPanelIds, Array.from(panelMatrixMap.values()));
+                newColumnWidths.set(columnKey, { width });
+            }
+        });
+        setColumnWidths(newColumnWidths);
+    }, [panelMatrixMap, hiddenPanelIds, maximizedPanelId]);
+    // Effect hook to set initial hidden panels and their heights
+    useEffect(() => {
+        const initialHidden = new Set();
+        if (isMobile) {
+            // On mobile, only show the first selected mobile panel; hide the rest
+            let firstMobilePanelID = initialMobilePanelID ?? getInitialMobilePanelID(panelMatrixMap);
+            panelMatrixMap.forEach(col => {
+                col.rows.forEach(row => {
+                    if (row.id !== firstMobilePanelID)
+                        initialHidden.add(row.id);
+                });
+            });
+        }
+        else {
+            // On non-mobile devices, hide panels that are marked as `hidden`
+            panelMatrixMap.forEach(col => {
+                col.rows.forEach(row => {
+                    if (row.hidden)
+                        initialHidden.add(row.id);
+                });
+            });
+        }
+        // Update state with the calculated hidden panels and panel sizes
+        setHiddenPanelIds(initialHidden);
+        setPanelHeights(calculatePanelSizes(panelMatrixMap, initialHidden));
+    }, [panelMatrixMap, isMobile]);
+    // Function to toggle the disabled of a toolbar given its item
+    const toggleToolbarItemDisabled = (toolbarItem) => {
+        if (!toolbarItem)
+            return;
+        setToolbarState(prevToolbar => {
+            if (!prevToolbar)
+                return prevToolbar;
+            return {
+                ...prevToolbar,
+                items: prevToolbar.items.map(item => item.id === toolbarItem.id ? { ...item, disabled: !item.disabled } : item)
+            };
+        });
+    };
+    // Function to toggle the visibility of a toolbar given its item
+    const toggleToolbarItemVisibility = (toolbarItem) => {
+        if (!toolbarItem)
+            return;
+        setToolbarState(prevToolbar => {
+            if (!prevToolbar)
+                return prevToolbar;
+            return {
+                ...prevToolbar,
+                items: prevToolbar.items.map(item => item.id === toolbarItem.id ? { ...item, visible: !(item.visible ?? true) } : item)
+            };
+        });
+    };
+    // Function to toggle the visibility of a panel given its item
+    const togglePanelVisibility = (toolbarItem) => {
+        if (!toolbarItem)
+            return;
+        setHiddenPanelIds(prevHidden => {
+            let newHidden;
+            if (isMobile) {
+                // On mobile, make only the selected panel visible; hide all others
+                newHidden = new Set();
+                panelMatrixMap.forEach(col => {
+                    col.rows.forEach(row => {
+                        if (row.id !== toolbarItem.panelManagerMatrixRowId) {
+                            newHidden.add(row.id);
+                        }
+                    });
+                });
+            }
+            else {
+                // On non-mobile devices, toggle visibility normally
+                newHidden = new Set(prevHidden);
+                // Hide alternative panels if any
+                if (toolbarItem.alternativePanelManagerMatrixRowId?.length) {
+                    toolbarItem.alternativePanelManagerMatrixRowId.forEach(altId => newHidden.add(altId));
+                }
+                // Toggle clicked panel visibility
+                if (newHidden.has(toolbarItem.panelManagerMatrixRowId)) {
+                    newHidden.delete(toolbarItem.panelManagerMatrixRowId);
+                }
+                else {
+                    // If the panel is maximized, call maximizeMinimizePanelCallback to minimize it
+                    if (maximizedPanelId === toolbarItem.panelManagerMatrixRowId) {
+                        maximizeMinimizePanelCallback(true, toolbarItem.panelManagerMatrixRowId);
+                    }
+                    newHidden.add(toolbarItem.panelManagerMatrixRowId);
+                }
+            }
+            setPanelHeights(calculatePanelSizes(panelMatrixMap, newHidden));
+            return newHidden;
+        });
+    };
+    const maximizeMinimizePanelCallback = (isMaximized, id) => {
+        const maximized = isMaximized ? null : id;
+        setMaximizedPanelId(maximized);
+    };
+    return (_jsx("div", { style: { width: '100%', height: '100%' }, children: _jsxs("div", { style: {
+                display: isMobile ? 'block' : 'flex',
+                flexDirection: 'row',
+                width: "100%",
+                height: '100%'
+            }, children: [_jsx("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        width: (toolbarState && toolbarState.items.length > 0) ? `calc(100% - ${isMobile ? "0px" : "40px"})` : '100%',
+                        height: `calc(100% - ${isMobile ? "60px" : "0px"})`,
+                        columnGap: maximizedPanelId ? '0px' : `${gutters}px`,
+                    }, children: visibleColumns.length > 0 ? visibleColumns.map((column, colIndex) => {
+                        // Retrieve the column data from the panelMatrixMap using the current column key
+                        const col = panelMatrixMap.get(column);
+                        // Check if the current column contains the maximized panel
+                        const hasMaximized = !!col?.rows?.some(row => row.id === maximizedPanelId);
+                        const isLastColumn = colIndex === visibleColumns.length - 1;
+                        // Define the base style for all columns with flex layout, full height, smooth width transition, and no minimum width
+                        const columnBaseStyle = { display: 'flex', flexDirection: 'column', height: '100%', transition: isMobile ? 'none' : 'width 0.3s', };
+                        // Declare a variable to hold the final computed style for the column
+                        let columnStyle;
+                        if (maximizedPanelId) {
+                            // If a panel is maximized, if it does, give the column full width
+                            columnStyle = hasMaximized ? { ...columnBaseStyle, width: '100%' } : { ...columnBaseStyle, width: '0px', overflow: 'hidden' };
+                        }
+                        else {
+                            // Otherwise, hide this column by setting width to 0 and hiding overflow
+                            const savedWidth = columnWidths.get(column)?.width ?? getDynamicColumnWidth(col, hiddenPanelIds, Array.from(panelMatrixMap.values()));
+                            columnStyle = { ...columnBaseStyle, width: savedWidth };
+                        }
+                        return (_jsx(React.Fragment, { children: _jsx("div", { style: columnStyle, children: col?.rows?.map((row) => {
+                                    const isHiddenPanel = hiddenPanelIds.has(row.id);
+                                    const visibleRows = col.rows?.filter(r => !hiddenPanelIds.has(r.id));
+                                    const isLastVisible = visibleRows.length > 0 && visibleRows[visibleRows.length - 1].id === row.id;
+                                    const isMaximized = maximizedPanelId === row.id;
+                                    const baseStyle = {
+                                        backgroundColor: '#f5f5f5',
+                                        borderRadius: '8px',
+                                        display: 'block',
+                                        transition: isMobile ? 'none' : 'all 0.3s ease',
+                                        boxShadow: '0 0 8px #D3D3D3BF',
+                                    };
+                                    const hiddenStyle = {
+                                        minWidth: '0px',
+                                        width: '0px',
+                                        height: '0px',
+                                        visibility: 'hidden',
+                                        opacity: 0,
+                                        marginBottom: '0px',
+                                    };
+                                    const maximizedStyle = {
+                                        minWidth: '50px',
+                                        width: '100%',
+                                        height: '100%',
+                                        visibility: 'visible',
+                                        opacity: 1,
+                                        marginBottom: '0px',
+                                    };
+                                    const defaultStyle = {
+                                        minWidth: isHiddenPanel ? '0px' : '50px',
+                                        width: '100%',
+                                        height: isHiddenPanel ? '0px' : panelHeights.get(row.id)?.height ?? '100%',
+                                        visibility: isHiddenPanel ? 'hidden' : 'visible',
+                                        opacity: isHiddenPanel ? 0 : 1,
+                                        marginBottom: (isHiddenPanel || isLastVisible) ? '0px' : `${gutters}px`,
+                                    };
+                                    const panelStyle = maximizedPanelId ? (isMaximized ? { ...baseStyle, ...maximizedStyle } : hiddenStyle) : { ...baseStyle, ...defaultStyle };
+                                    return _jsx("div", { style: panelStyle, children: row.panel ? _jsx(TMPanel, { title: row.panel.title, totalItems: row.panel.totalItems ?? undefined, displayedItemsCount: row.panel.displayedItemsCount ?? undefined, onHeaderDoubleClick: () => maximizeMinimizePanelCallback(isMaximized, row.id), onClose: (!isMobile && toolbarState) ? () => togglePanelVisibility(toolbarState.items.find(item => item.panelManagerMatrixRowId === row.id)) : undefined, allowMaximize: false, toolbar: _jsx("div", { style: { width: 'max-content', display: 'flex', alignItems: 'center', gap: '10px' }, children: ((row.panel?.showCustomMaximizeMinimizeButton ?? true) && !isMobile && totalVisiblePanels > 1) && _jsx(TMButton, { caption: isMaximized ? SDKUI_Localizator.Minimize : SDKUI_Localizator.Maximize, icon: isMaximized ? _jsx(IconWindowMinimize, {}) : _jsx(IconWindowMaximize, {}), btnStyle: 'icon', onClick: () => maximizeMinimizePanelCallback(isMaximized, row.id) }) }), children: typeof row.content === "function" ? row.content(togglePanelVisibility, toggleToolbarItemDisabled, toggleToolbarItemVisibility) : row.content })
+                                            : typeof row.content === "function" ? row.content(togglePanelVisibility, toggleToolbarItemDisabled, toggleToolbarItemVisibility) : row.content }, "TMPanelManagerMatrix-r-" + row.id);
+                                }) }) }, "TMPanelManagerMatrix-c-" + column));
+                    }) : _jsxs("div", { style: {
+                            width: '100%',
+                            height: '100%',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            backgroundColor: '#fff',
+                            border: '1px solid #ddd',
+                            borderRadius: '12px',
+                            boxShadow: '0 4px 10px rgba(0, 0, 0, 0.05)',
+                            padding: '40px',
+                            textAlign: 'center',
+                            color: '#555',
+                            fontSize: '18px',
+                            gap: '16px'
+                        }, children: [_jsx(IconInfo, { style: { fontSize: 50 } }), _jsx("div", { children: SDKUI_Localizator.NoPanelSelected })] }) }), toolbarState && toolbarState.items.length > 0 && (!isMobile
+                    ? DesktopToolbar(toolbarState, hiddenPanelIds, togglePanelVisibility)
+                    : MobileToolbar(toolbarState, hiddenPanelIds, togglePanelVisibility))] }) }));
+};
+export default TMPanelManagerMatrix;

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

@@ -0,0 +1,69 @@
+import { ITMPanelProps } from './TMPanel';
+export declare const defaultTMPanelManagerToolbarStyles: {
+    container: {
+        backgroundColor: string;
+        padding: string;
+    };
+    items: {
+        width: string;
+        height: string;
+        inactiveBackgroundColor: string;
+        activeBackgroundColor: string;
+        borderRadius: string;
+        marginBottom: string;
+        iconFontSize: string;
+        iconColor: string;
+    };
+};
+export interface TMPanelManagerMatrixColumn {
+    rows: Array<TMPanelManagerMatrixRow>;
+    width?: string;
+}
+export interface ExtendedTMPanelProps extends ITMPanelProps {
+    showCustomMaximizeMinimizeButton?: boolean;
+}
+export interface TMPanelManagerMatrixRow {
+    id: string;
+    hidden: boolean;
+    content: JSX.Element | ((togglePanelVisibility: (toolbarItem: TMPanelManagerToolbarItem | undefined) => void, toggleToolbarItemDisabled: (toolbarItem: TMPanelManagerToolbarItem | undefined) => void, toggleToolbarItemVisibility: (toolbarItem: TMPanelManagerToolbarItem | undefined) => void) => JSX.Element);
+    height?: string;
+    width?: string;
+    panel?: ExtendedTMPanelProps;
+}
+export interface TMPanelManagerToolbarStyles {
+    container?: {
+        backgroundColor?: string;
+        padding?: string;
+    };
+    items?: {
+        width?: string;
+        height?: string;
+        inactiveBackgroundColor?: string;
+        activeBackgroundColor?: string;
+        borderRadius?: string;
+        marginBottom?: string;
+        iconFontSize?: string;
+        iconColor?: string;
+    };
+}
+export interface TMPanelManagerToolbarItem {
+    id: string;
+    icon: string | JSX.Element;
+    tooltipName: string;
+    panelManagerMatrixRowId: string;
+    alternativePanelManagerMatrixRowId?: Array<string>;
+    beginGroup?: boolean;
+    disabled?: boolean;
+    visible?: boolean;
+}
+export interface TMPanelManagerToolbar {
+    items: Array<TMPanelManagerToolbarItem>;
+    styles?: TMPanelManagerToolbarStyles;
+}
+export declare const calculatePanelSizes: (panelMatrixMap: Map<string, TMPanelManagerMatrixColumn>, hiddenIds: Set<string>) => Map<string, {
+    height: string;
+}>;
+export declare const getInitialMobilePanelID: (panelMatrixMap: Map<string, TMPanelManagerMatrixColumn>) => string | undefined;
+export declare const DesktopToolbar: (toolbar: TMPanelManagerToolbar, hiddenPanelIds: Set<string>, togglePanelVisibility: (panel: TMPanelManagerToolbarItem) => void) => import("react/jsx-runtime").JSX.Element;
+export declare const MobileToolbar: (toolbar: TMPanelManagerToolbar, hiddenPanelIds: Set<string>, togglePanelVisibility: (panel: TMPanelManagerToolbarItem) => void) => import("react/jsx-runtime").JSX.Element;
+export declare const getDynamicColumnWidth: (col: TMPanelManagerMatrixColumn | undefined, hiddenPanelIds: Set<string>, allColumns: Array<TMPanelManagerMatrixColumn>) => string;

package/lib/components/base/TMPanelManagerMatrixUtils.js

@@ -0,0 +1,155 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ScrollView } from "devextreme-react";
+import { SDKUI_Globals } from '../../helper';
+import TMTooltip from './TMTooltip';
+export const defaultTMPanelManagerToolbarStyles = {
+    container: {
+        backgroundColor: '#f0f0f0',
+        padding: '6px'
+    },
+    items: {
+        width: '35px',
+        height: '35px',
+        inactiveBackgroundColor: '#e57373',
+        activeBackgroundColor: '#81c784',
+        borderRadius: '50%',
+        marginBottom: '6px',
+        iconFontSize: "25px",
+        iconColor: '#ffffff'
+    }
+};
+;
+// Helper to calculate sizes based on hidden panel IDs
+export const calculatePanelSizes = (panelMatrixMap, hiddenIds) => {
+    const sizes = new Map();
+    panelMatrixMap.forEach((column) => {
+        const visiblePanels = column.rows.filter(p => !hiddenIds.has(p.id));
+        const hiddenPanels = column.rows.filter(p => hiddenIds.has(p.id));
+        if (visiblePanels.length > 0) {
+            const totalVisibleHeight = visiblePanels.reduce((sum, panel) => {
+                return sum + parseFloat(panel.height || '0');
+            }, 0);
+            visiblePanels.forEach(panel => {
+                const originalHeight = parseFloat(panel.height || '0');
+                const newHeightPercent = (originalHeight / totalVisibleHeight) * 100;
+                sizes.set(panel.id, { height: `${newHeightPercent}%` });
+            });
+        }
+        hiddenPanels.forEach(panel => {
+            sizes.set(panel.id, { height: '0%' });
+        });
+    });
+    return sizes;
+};
+export const getInitialMobilePanelID = (panelMatrixMap) => {
+    const firstEntry = panelMatrixMap.values().next().value?.rows;
+    if (!firstEntry)
+        return undefined;
+    const visiblePanel = firstEntry.find((row) => !row.hidden);
+    return visiblePanel?.id;
+};
+export const DesktopToolbar = (toolbar, hiddenPanelIds, togglePanelVisibility) => {
+    return _jsx("div", { style: {
+            width: '40px',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'flex-start',
+            borderRadius: '8px',
+            alignItems: 'center',
+            marginLeft: SDKUI_Globals.userSettings.themeSettings.gutters,
+            // customizable properties
+            backgroundColor: toolbar.styles?.container?.backgroundColor ?? defaultTMPanelManagerToolbarStyles.container.backgroundColor,
+            padding: toolbar.styles?.container?.padding ?? defaultTMPanelManagerToolbarStyles.container.padding,
+        }, children: toolbar.items.filter(item => item.visible !== false).map((item, index) => {
+            return _jsxs("div", { children: [item.beginGroup && index !== 0 && (_jsx("hr", { style: { margin: '10px 0', borderTop: '1px solid #c6c6c6', width: '100%' } })), _jsx("button", { disabled: item.disabled ?? false, style: {
+                            display: 'flex',
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                            border: 'none',
+                            cursor: 'pointer',
+                            transition: 'background-color 0.3s, transform 0.2s',
+                            // customizable properties
+                            width: toolbar.styles?.items?.width ?? defaultTMPanelManagerToolbarStyles.items.width,
+                            height: toolbar.styles?.items?.height ?? defaultTMPanelManagerToolbarStyles.items.height,
+                            backgroundColor: item.disabled ? '#cccccc'
+                                : hiddenPanelIds.has(item.panelManagerMatrixRowId)
+                                    ? toolbar.styles?.items?.inactiveBackgroundColor ?? defaultTMPanelManagerToolbarStyles.items.inactiveBackgroundColor
+                                    : toolbar.styles?.items?.activeBackgroundColor ?? defaultTMPanelManagerToolbarStyles.items.activeBackgroundColor,
+                            borderRadius: toolbar.styles?.items?.borderRadius ?? defaultTMPanelManagerToolbarStyles.items.borderRadius,
+                            marginBottom: toolbar.styles?.items?.marginBottom ?? defaultTMPanelManagerToolbarStyles.items.marginBottom,
+                        }, onMouseEnter: (e) => {
+                            e.currentTarget.style.transform = 'scale(1.1)';
+                        }, onMouseLeave: (e) => {
+                            e.currentTarget.style.transform = 'scale(1)';
+                        }, onClick: () => togglePanelVisibility(item), children: _jsx(TMTooltip, { content: item.tooltipName, children: typeof item.icon === 'string' ? _jsx("i", { className: `dx-icon dx-icon-${item.icon}`, style: { fontSize: toolbar.styles?.items?.iconFontSize ?? defaultTMPanelManagerToolbarStyles.items.iconFontSize, color: toolbar.styles?.items?.iconColor ?? defaultTMPanelManagerToolbarStyles.items.iconColor } }) : item.icon }) })] }, "TMPanelManagerMatrix-Desktop-Toolbar-Item-" + item.id);
+        }) }, "TMPanelManagerMatrix-Desktop-Toolbar");
+};
+export const MobileToolbar = (toolbar, hiddenPanelIds, togglePanelVisibility) => {
+    return _jsx("div", { style: {
+            width: '100%',
+            height: '60px',
+            background: 'linear-gradient(135deg, #e0eafc, #cfdef3)',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            borderRadius: '12px',
+            boxShadow: '0 6px 10px rgba(0, 0, 0, 0.15)',
+            alignItems: 'center',
+            padding: '5px',
+        }, children: _jsx("div", { style: {
+                display: "flex",
+                overflow: "hidden",
+                borderRadius: "12px",
+                backgroundColor: "#ffffff",
+                boxShadow: "0 6px 12px rgba(0,0,0,0.1)",
+                width: "100%",
+                height: '100%',
+            }, children: _jsx(ScrollView, { direction: "horizontal", showScrollbar: "always", useNative: Number(SDKUI_Globals.userSettings?.themeSettings.gridSettings.useNativeScrollbar) === 1, style: { whiteSpace: "nowrap", width: "100%" }, children: _jsx("div", { style: { display: "flex", gap: "8px", justifyContent: "center", padding: "5px" }, children: toolbar.items.filter(item => item.visible !== false).map((item, index) => {
+                        return _jsxs("div", { style: { display: "flex", flexDirection: "row", alignItems: "center" }, children: [item.beginGroup && index !== 0 && (_jsx("div", { style: { height: '35px', width: '1px', backgroundColor: '#c6c6c6', margin: '0 8px' } })), _jsx("button", { disabled: item.disabled ?? false, style: {
+                                        display: 'flex',
+                                        justifyContent: 'center',
+                                        alignItems: 'center',
+                                        border: 'none',
+                                        cursor: 'pointer',
+                                        transition: 'background-color 0.3s, transform 0.2s',
+                                        // customizable properties
+                                        width: toolbar.styles?.items?.width ?? defaultTMPanelManagerToolbarStyles.items.width,
+                                        height: toolbar.styles?.items?.height ?? defaultTMPanelManagerToolbarStyles.items.height,
+                                        backgroundColor: item.disabled ? '#cccccc'
+                                            : hiddenPanelIds.has(item.panelManagerMatrixRowId)
+                                                ? toolbar.styles?.items?.inactiveBackgroundColor ?? defaultTMPanelManagerToolbarStyles.items.inactiveBackgroundColor
+                                                : toolbar.styles?.items?.activeBackgroundColor ?? defaultTMPanelManagerToolbarStyles.items.activeBackgroundColor,
+                                        borderRadius: toolbar.styles?.items?.borderRadius ?? defaultTMPanelManagerToolbarStyles.items.borderRadius,
+                                        marginBottom: toolbar.styles?.items?.marginBottom ?? defaultTMPanelManagerToolbarStyles.items.marginBottom,
+                                    }, onMouseEnter: (e) => {
+                                        e.currentTarget.style.transform = 'scale(1.1)';
+                                    }, onMouseLeave: (e) => {
+                                        e.currentTarget.style.transform = 'scale(1)';
+                                    }, onClick: () => togglePanelVisibility(item), children: _jsx(TMTooltip, { content: item.tooltipName, children: typeof item.icon === 'string' ? _jsx("i", { className: `dx-icon dx-icon-${item.icon}`, style: { fontSize: toolbar.styles?.items?.iconFontSize ?? defaultTMPanelManagerToolbarStyles.items.iconFontSize, color: toolbar.styles?.items?.iconColor ?? defaultTMPanelManagerToolbarStyles.items.iconColor } }) : item.icon }) })] }, "TMPanelManagerMatrix-Mobile-Toolbar-Item-" + item.id);
+                    }) }) }) }) }, "TMPanelManagerMatrix-Mobile-Toolbar");
+};
+export const getDynamicColumnWidth = (col, hiddenPanelIds, allColumns) => {
+    if (!col)
+        return '0%';
+    // If all rows in the column are hidden, return width 0%
+    const allRowsHidden = col.rows.every(row => hiddenPanelIds.has(row.id));
+    if (allRowsHidden)
+        return '0%';
+    // Calculate which columns are visible (at least one row not hidden)
+    const visibleColumns = allColumns.filter(c => c.rows.some(r => !hiddenPanelIds.has(r.id)));
+    const visibleCount = visibleColumns.length;
+    // If all columns are visible, use the original widths
+    if (visibleCount === allColumns.length) {
+        return col.width ?? `${100 / visibleCount}%`;
+    }
+    // If some columns are hidden, redistribute the 100% width among visible columns
+    // proportionally to their original widths
+    // First, sum the original widths (in percent) of the visible columns
+    const totalPercent = visibleColumns.reduce((sum, c) => {
+        const w = c.width ? parseFloat(c.width) : (100 / visibleCount);
+        return sum + w;
+    }, 0);
+    // Calculate the width percentage for this column based on its original width proportion
+    const thisPercent = col.width ? parseFloat(col.width) : (100 / visibleCount);
+    return `${(thisPercent / totalPercent) * 100}%`;
+};

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

@@ -1,38 +1,36 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } 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, IconSavedQuery, IconAdvanced, IconLightningFill, IconApply } from '../../../helper';
+import { SDKUI_Localizator, Globalization, svgToString, IconStar, IconDelete, IconDashboard, IconApply } 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';
-const StyledSavedQueryListItem = styled.div `
+const StyledSqdItem = styled.div `
     display: flex;
-    flex-direction: row;
-    align-items: center;
-    background: ${(props) => props.$backgroundColor ?? undefined};
-    border-radius: 8px;
-    border: 1px solid;
-    border-color: lightgray;
-    box-shadow: 1px 1px 7px rgba(0,0,0,0.15);
-    width: 100%;
-    height: max-content;
-    min-height: 45px;
-    padding: 5px;
+    flex-direction: column;
+    align-items: stretch;
+    min-width: 0;
+    padding: 10px;
+    position: relative;
     white-space: nowrap;
     text-overflow: ellipsis;
 
     &:hover {
-        background: ${(props) => props.$hoverColor ?? undefined};
         cursor: pointer;
     }
 `;
+const StyledPipe = styled.div `
+    width: 90%;
+    height: 1px;
+    background: #00A99D;
+    margin: 4px auto;
+`;
 const getSharingModeColor = (sharingMode) => {
     switch (sharingMode) {
         case SharingModes.Private: return 'rgb(185, 72, 57)';
@@ -119,23 +117,49 @@ const TMSavedQuerySelector = React.memo(({ items, selectedId, allowShowSearch =
         }
     };
     return (_jsxs("div", { style: { height: height ?? '100%', width: '100%', display: 'flex', flexDirection: 'column', gap: '5px', paddingTop: allowShowSearch ? '5px' : undefined }, children: [allowShowSearch &&
-                _jsx("div", { style: { width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px', paddingBottom: '10px', paddingTop: '10px' }, children: _jsx(TMSearchBar, { marginLeft: '0px', maxWidth: '300px', searchValue: searchText, onSearchValueChanged: (e) => setSearchText(e) }) }), _jsx("div", { style: { width: '100%', overflow: 'auto', display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', padding: '5px', gap: '3px' }, 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(StyledSavedQueryListItem, { id: `sqd-item-${sqd.id}`, style: { position: 'relative', gap: '5px', paddingLeft: '5px' }, "$backgroundColor": 'white', "$hoverColor": 'rgba(243, 152, 119, .2)', "$selectedColor": 'rgb(237, 115, 72)', onClick: () => {
+                _jsx("div", { style: { width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px', paddingBottom: '10px', paddingTop: '10px' }, children: _jsx(TMSearchBar, { marginLeft: '0px', maxWidth: '300px', searchValue: searchText, onSearchValueChanged: (e) => setSearchText(e) }) }), _jsx("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    width: '100%',
+                    padding: '5px',
+                    gap: '3px',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis'
+                }, 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: () => {
                         setSelectedItem(sqd);
                         onItemClick?.(sqd);
-                    }, children: [_jsx(TMTooltip, { content: getTooltipBySqd(sqd), children: _jsx("div", { style: { backgroundColor: 'white', minWidth: '24px', minHeight: '24px', borderRadius: '24px', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx(IconSavedQuery, { fontSize: 22, color: getSharingModeColor(sqd.sharingMode) }) }) }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', whiteSpace: 'nowrap',
+                    }, children: [_jsxs("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'row',
+                                justifyContent: 'center',
+                                width: '100%',
+                                whiteSpace: 'nowrap',
                                 overflow: 'hidden',
-                                textOverflow: 'ellipsis' }, children: [_jsxs("div", { style: {
-                                        display: 'flex', justifyContent: 'flex-start', width: '100%', whiteSpace: 'nowrap',
+                                textOverflow: 'ellipsis',
+                                gap: '5px'
+                            }, children: [_jsx("p", { style: {
+                                        fontSize: '1rem',
+                                        fontWeight: sqd.id === 1 ? 600 : 'normal',
+                                        whiteSpace: 'nowrap',
                                         overflow: 'hidden',
-                                        textOverflow: 'ellipsis'
-                                    }, children: [_jsx("p", { style: {
-                                                fontSize: '1rem', fontWeight: 600, whiteSpace: 'nowrap',
-                                                overflow: 'hidden',
-                                                textOverflow: 'ellipsis', alignItems: 'flex-end', display: 'flex'
-                                            }, children: sqd.name }), manageDefault && sqd.isDefault == 1 && _jsx(IconStar, { fontSize: 16, color: 'rgb(248, 215, 117)' })] }), _jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'flex-start', width: '100%' }, children: _jsx("p", { style: { fontSize: '0.9rem', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }, children: sqd.description }) })] }), _jsxs("div", { style: { height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'flex-start' }, children: [_jsx("div", { style: { height: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: sqd.isEasyWhere != 1 ? _jsx(IconAdvanced, { fontSize: 20 }) : _jsx(_Fragment, {}) }), _jsx("div", { style: { height: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: sqd.runSearchWhenSelected ?
-                                        _jsx("div", { style: { width: '16px', height: '16px', borderRadius: '16px', backgroundColor: TMColors.info, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '1rem', fontWeight: 'bold' }, children: _jsx(IconLightningFill, { fontSize: 12, color: 'rgb(224, 194, 43)' }) })
-                                        : _jsx(_Fragment, {}) })] }), selectedItem?.id == sqd.id &&
-                            _jsx("div", { style: { width: '24px', height: '24px', borderRadius: '24px', backgroundColor: 'rgba(243, 152, 119, .8)', boxShadow: '1px 2px 2px #00000050', position: 'absolute', top: '-2px', right: '-5px', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '1rem', fontWeight: 'bold' }, children: _jsx(IconApply, { fontSize: 24, color: 'green' }) }), _jsx(SavedQueryContexMenu, { sqd: sqd, manageDefault: manageDefault, setDefaultAsync: () => setDefaultSQDAsync(sqd), deleteAsync: () => deleteSQDAsync(sqd), favManageAsync: () => favManageSQDAsync(sqd) })] }, sqd.id))) }), dataSource.length > initialSQDsMaxItems && searchText.length <= 0 &&
+                                        textOverflow: 'ellipsis',
+                                        color: TMColors.primaryColor,
+                                        paddingRight: '18px'
+                                    }, children: sqd.name }), manageDefault && sqd.isDefault == 1 && _jsx(IconStar, { fontSize: 16, color: 'rgb(248, 215, 117)' })] }), selectedItem?.id == sqd.id &&
+                            _jsx("div", { style: {
+                                    width: '24px',
+                                    height: '24px',
+                                    borderRadius: '24px',
+                                    position: 'absolute',
+                                    top: '-1px',
+                                    right: '0px',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    fontSize: '1rem',
+                                    fontWeight: 'bold'
+                                }, children: _jsx(IconApply, { fontSize: 24, color: 'green' }) }), _jsx(StyledPipe, {}), _jsx(SavedQueryContexMenu, { sqd: sqd, manageDefault: manageDefault, setDefaultAsync: () => setDefaultSQDAsync(sqd), deleteAsync: () => deleteSQDAsync(sqd), favManageAsync: () => favManageSQDAsync(sqd) })] }, sqd.id))) }), dataSource.length > initialSQDsMaxItems && searchText.length <= 0 &&
                 _jsx(TMButton, { elementStyle: { display: 'flex', justifyContent: 'flex-end', padding: '10px' }, btnStyle: 'icon', caption: showAllRoot ? "Mostra meno" : `Mostra tutte le ricerche (+${dataSource.length - initialSQDsMaxItems})`, icon: showAllRoot ?
                         _jsx("div", { style: { backgroundColor: TMColors.primaryColor, minWidth: '30px', minHeight: '30px', borderRadius: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx("p", { style: { color: 'white' }, children: `-${dataSource.length - initialSQDsMaxItems}` }) }) :
                         _jsx("div", { style: { backgroundColor: TMColors.primaryColor, minWidth: '30px', minHeight: '30px', borderRadius: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx("p", { style: { color: 'white' }, children: `+${dataSource.length - initialSQDsMaxItems}` }) }), onClick: () => setShowAllRoot(!showAllRoot) })] }));

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

@@ -10,6 +10,7 @@ import TMDataGrid from '../../base/TMDataGrid';
 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 }) => {
     const [trees, setTrees] = useState([]);
     const [treeItems, setTreeItems] = useState([]);
@@ -60,7 +61,7 @@ const TMTreeSelector = ({ layoutMode = LayoutModes.Update, onSelectedTIDChanged,
     const renderCell = (data) => {
         let treeItem = data.data;
         if (treeItem.type == TreeItemTypes.DcmtType)
-            return (_jsx(TMTidViewer, { tid: treeItem.tid, showIcon: true }));
+            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 })] }));
     };

package/lib/components/grids/TMRecentsManager.js

@@ -16,6 +16,7 @@ const StyledRecentTidItem = styled.div `
     min-width: 0;
     padding: 10px;
     position: relative;
+
     &:hover {
         cursor: pointer;
     }
@@ -29,8 +30,15 @@ const StyledPipe = styled.div `
 const iconDelete = () => ReactDOMServer.renderToString(_jsx(IconDelete, {}));
 const TMRecentsManager = ({ deviceType, mruTIDs, currentMruTID, onSelectedTID, onDeletedTID }) => {
     const [showDcmtTypeChooser, setShowDcmtTypeChooser] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: { overflowY: deviceType === DeviceType.MOBILE ? 'auto' : undefined, display: 'flex', flexDirection: 'column', padding: '5px' }, children: [_jsxs(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', fontWeight: 600, textOverflow: 'ellipsis' }, children: `${SDKUI_Localizator.AllDcmtTypes} (${DcmtTypeListCacheService.CacheCount(true)})` }) }), _jsx(StyledPipe, {})] }, 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 }) }), _jsx(StyledPipe, {}), _jsx(ContextMenu, { dataSource: [{ text: SDKUI_Localizator.Remove, icon: iconDelete(), }], target: `#tid-${tid}`, onItemClick: () => { onDeletedTID?.(tid); } }), currentMruTID == tid &&
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: { overflowY: deviceType === DeviceType.MOBILE ? 'auto' : undefined, display: 'flex', flexDirection: 'column', padding: '5px' }, children: [_jsxs(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',
+                                        fontWeight: 600,
+                                        whiteSpace: 'nowrap',
+                                        overflow: 'hidden',
+                                        textOverflow: 'ellipsis'
+                                    }, children: `${SDKUI_Localizator.AllDcmtTypes} (${DcmtTypeListCacheService.CacheCount(true)})` }) }), _jsx(StyledPipe, {})] }, 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(StyledPipe, {}), _jsx(ContextMenu, { dataSource: [{ text: SDKUI_Localizator.Remove, icon: iconDelete(), }], target: `#tid-${tid}`, onItemClick: () => { onDeletedTID?.(tid); } }), currentMruTID == tid &&
                                     _jsx("div", { style: {
                                             width: '24px',
                                             height: '24px',