@topconsultnpm/sdkui-react 6.19.0-test.1 → 6.19.0

package/lib/components/layout/panelManager/TMPanelManagerContainer.js

@@ -8,23 +8,23 @@ import { IconInfo, SDKUI_Localizator } from '../../../helper';
 import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
 import { Gutters } from '../../../utils/theme';
 // Styled Component per il contenitore principale di PanelContainer
-const StyledPanelContainerWrapper = styled.div `
-  display: ${props => (props.$hasVisiblePanels ? 'flex' : 'none')};
-  flex-direction: ${props => (props.$direction === 'vertical' ? 'column' : 'row')};
-  height: 100%;
-  width: 100%;
-  // overflow: hidden;
+const StyledPanelContainerWrapper = styled.div `
+  display: ${props => (props.$hasVisiblePanels ? 'flex' : 'none')};
+  flex-direction: ${props => (props.$direction === 'vertical' ? 'column' : 'row')};
+  height: 100%;
+  width: 100%;
+  // overflow: hidden;
 `;
 // Styled Component per il gutter (separatore)
-const StyledResizerGutter = styled.div `
-  cursor: ${props => (props.$direction === 'horizontal' ? 'col-resize' : 'row-resize')};
-  ${props => (props.$direction === 'horizontal' ? `width: ${Gutters.getGutters()}px;` : `height: ${Gutters.getGutters()}px;`)}
-  flex-shrink: 0;
-  background-color: "transparent";
-  z-index: 10;
+const StyledResizerGutter = styled.div `
+  cursor: ${props => (props.$direction === 'horizontal' ? 'col-resize' : 'row-resize')};
+  ${props => (props.$direction === 'horizontal' ? `width: ${Gutters.getGutters()}px;` : `height: ${Gutters.getGutters()}px;`)}
+  flex-shrink: 0;
+  background-color: "transparent";
+  z-index: 10;
 `;
 const TMPanelManagerContainer = (props) => {
-    const { panels, showToolbar, direction, parentId } = props;
+    const { panels, showToolbar, direction, parentId, minPanelSizePx = 150 } = props;
     const { panelVisibility, setPanelDimensionsById, hasVisiblePanels, maximizedPanels, updateIsResizingActive } = useTMPanelManagerContext();
     // Get the current device type (e.g., mobile, tablet, desktop) using a custom hook
     const deviceType = useDeviceType();
@@ -73,7 +73,7 @@ const TMPanelManagerContainer = (props) => {
         let newCurrent = initialCurrent + deltaPercent;
         let newNext = initialNext - deltaPercent;
         // Set a minimum size threshold (to prevent panels from collapsing)
-        const minPercent = (150 / containerSize) * 100;
+        const minPercent = (minPanelSizePx / containerSize) * 100;
         // Correct sizes if they go below the minimum
         if (newCurrent < minPercent) {
             newCurrent = minPercent;

package/lib/components/layout/panelManager/TMPanelManagerContext.js

@@ -118,7 +118,6 @@ export const TMPanelManagerProvider = (props) => {
     const maximizePanel = useCallback((id) => {
         // Get all parent panel IDs recursively for the given panel ID
         const parents = showParentRecursively(id, hierarchyMap).map(([pid]) => pid);
-        4;
         // Combine parents and the current panel ID into one array to maximize
         const toMaximize = [...parents, id];
         // Update state to track which panels are maximized

package/lib/components/layout/panelManager/TMPanelManagerToolbar.js

@@ -5,41 +5,41 @@ import { useTMPanelManagerContext } from './TMPanelManagerContext';
 import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
 import { flattenPanels } from './utils';
 import TMTooltip from '../../base/TMTooltip';
-export const StyledToolbarButton = styled.button `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 32px;
-  width: 32px;
-  border: none;
-  border-radius: 8px;
-  font-size: 18px;
-  padding: 0px;
-  color: #fff;
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
-  cursor: ${({ $isDisabled }) => ($isDisabled ? 'not-allowed' : 'pointer')};
-  opacity: ${({ $isDisabled }) => ($isDisabled ? 0.6 : 1)};
-  background: ${({ $isActive }) => $isActive ? 'rgba(255,255,255,0.35)' : 'transparent'};
-  position: relative;
-  &:hover {
-    background: ${({ $isDisabled }) => !$isDisabled ? 'rgba(255,255,255,0.35)' : undefined};
-  }
+export const StyledToolbarButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  width: 32px;
+  border: none;
+  border-radius: 8px;
+  font-size: 18px;
+  padding: 0px;
+  color: #fff;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  cursor: ${({ $isDisabled }) => ($isDisabled ? 'not-allowed' : 'pointer')};
+  opacity: ${({ $isDisabled }) => ($isDisabled ? 0.6 : 1)};
+  background: ${({ $isActive }) => $isActive ? 'rgba(255,255,255,0.35)' : 'transparent'};
+  position: relative;
+  &:hover {
+    background: ${({ $isDisabled }) => !$isDisabled ? 'rgba(255,255,255,0.35)' : undefined};
+  }
 `;
-const Badge = styled.span `
-  position: absolute;
-  top: 2px;
-  right: 2px;
-  background: ${(props) => props.$background || "#ff5252"};
-  color: white;
-  font-size: 10px;
-  min-width: 14px;
-  height: 14px;
-  padding: 0 4px;
-  border-radius: 999px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 1;
+const Badge = styled.span `
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  background: ${(props) => props.$background || "#ff5252"};
+  color: white;
+  font-size: 10px;
+  min-width: 14px;
+  height: 14px;
+  padding: 0 4px;
+  border-radius: 999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
 `;
 const TMPanelManagerToolbar = (props) => {
     const { panels } = props;
@@ -76,7 +76,8 @@ const TMPanelManagerToolbar = (props) => {
             const isActive = panelVisibility[visibleLeafPanel.id];
             const isDisabled = toolbarButtonsDisabled[visibleLeafPanel.id];
             const count = visibleLeafPanel.toolbarOptions?.count ?? 0;
-            return _jsx(TMTooltip, { content: visibleLeafPanel.name + (count > 0 ? ": " + count : ''), position: isMobile ? 'top' : 'left', children: _jsxs(StyledToolbarButton, { disabled: isDisabled, "$isDisabled": isDisabled, onClick: () => onClickCallback(visibleLeafPanel.id, isActive), "$isActive": isActive || visibleLeafPanel.toolbarOptions?.alwaysActiveColor, children: [typeof visibleLeafPanel.toolbarOptions?.icon === 'string' ? (_jsx("i", { className: `dx-icon dx-icon-${visibleLeafPanel.toolbarOptions?.icon}` })) : (visibleLeafPanel.toolbarOptions?.icon), (!isActive && count > 0) && _jsxs(Badge, { "$background": visibleLeafPanel.toolbarOptions?.countBackgroundColor, children: [" ", formatCount(count), " "] })] }, visibleLeafPanel.id) }, visibleLeafPanel.id);
+            const tooltip = visibleLeafPanel.toolbarOptions?.tooltip ?? '';
+            return _jsx(TMTooltip, { content: tooltip || (visibleLeafPanel.name + (count > 0 ? ": " + count : '')), position: isMobile ? 'top' : 'left', children: _jsxs(StyledToolbarButton, { disabled: isDisabled, "$isDisabled": isDisabled, onClick: () => onClickCallback(visibleLeafPanel.id, isActive), "$isActive": isActive || visibleLeafPanel.toolbarOptions?.alwaysActiveColor, children: [typeof visibleLeafPanel.toolbarOptions?.icon === 'string' ? (_jsx("i", { className: `dx-icon dx-icon-${visibleLeafPanel.toolbarOptions?.icon}` })) : (visibleLeafPanel.toolbarOptions?.icon), (!isActive && count > 0) && _jsxs(Badge, { "$background": visibleLeafPanel.toolbarOptions?.countBackgroundColor, children: [" ", formatCount(count), " "] })] }, visibleLeafPanel.id) }, visibleLeafPanel.id);
         }) }));
 };
 export default TMPanelManagerToolbar;

package/lib/components/layout/panelManager/types.d.ts

@@ -22,6 +22,7 @@ export interface TMPanelDefinition {
         beginGroup?: boolean;
         alwaysActiveColor?: boolean;
         count?: number;
+        tooltip?: ReactNode | string;
         countBackgroundColor?: string;
     };
 }

package/lib/components/pages/TMPage.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState, useEffect } from "react";
 import { SDK_Globals, ObjectClasses, ResultTypes } from "@topconsultnpm/sdk-ts";
-import DataGrid, { Column, GroupPanel, Grouping, HeaderFilter, LoadPanel, Pager, Paging, Scrolling, SearchPanel, Selection } from "devextreme-react/cjs/data-grid";
+import DataGrid, { Column, GroupPanel, Grouping, HeaderFilter, LoadPanel, Pager, Paging, Scrolling, SearchPanel, Selection } from "devextreme-react/data-grid";
 import { PlatformObjectService } from "../../services/platform_services";
 import { FormModes } from "../../ts";
 import { Globalization, IconAdd, IconColumns, IconCopy, IconDelete, IconDuplicate, IconHide, IconMail, IconMenuVertical, IconOpenInNew, IconRefresh, IconShow, SDKUI_Globals, SDKUI_Localizator, calcSaveFormTitle, canNext, canPrev, dialogConfirmOperation, getExceptionMessage, getNext, getPrev } from "../../helper";

package/lib/components/query/TMQueryEditor.js

@@ -976,23 +976,23 @@ const TMQdWhereItemValue = ({ whereItem, index, queryParamsDynDataList, onlyEdit
                                 ? _jsx(_Fragment, { children: whereItem.value1 ?? mdValueEmptyDescr })
                                 : _jsxs(_Fragment, { children: [displayMetadataValue(md, whereItem.value1, mdValueEmptyDescr), numberOfOperands == 2 && (whereItem.value2 && whereItem.value2 != '' ? ` - ${displayMetadataValue(md, whereItem.value2, mdValueEmptyDescr)}` : ' - ?')] }) })] })] }));
 };
-const StyledContent = styled.div `
-    cursor: pointer;
-    border-radius: ${props => props.$borderRadius};
-    color: ${props => props.$color};
-    /* background-color: ${props => props.$backgroundColor}; */
-    background-color: transparent;
-    opacity: ${props => props.$disabled ? 0.4 : 1};
-    pointer-events: ${props => props.$disabled ? 'none' : ''};
-    user-select: none;
-    display: flex;
-    align-items: center;
-
-    &:focus {
-        outline: none;
-        border-bottom: ${props => props.$disabled ? '' : '2px solid'};
-        border-bottom-color: ${TMColors.primary};
-    }
+const StyledContent = styled.div `
+    cursor: pointer;
+    border-radius: ${props => props.$borderRadius};
+    color: ${props => props.$color};
+    /* background-color: ${props => props.$backgroundColor}; */
+    background-color: transparent;
+    opacity: ${props => props.$disabled ? 0.4 : 1};
+    pointer-events: ${props => props.$disabled ? 'none' : ''};
+    user-select: none;
+    display: flex;
+    align-items: center;
+
+    &:focus {
+        outline: none;
+        border-bottom: ${props => props.$disabled ? '' : '2px solid'};
+        border-bottom-color: ${TMColors.primary};
+    }
 `;
 const TMQdDropDownMenu = ({ content, items, disabled = false, color = TMColors.text_normal, backgroundColor = TMColors.default_background, borderRadius }) => {
     const [id, setID] = useState('');

package/lib/components/query/TMQuerySummary.d.ts

@@ -7,6 +7,7 @@ interface ITMQuerySummary {
     raiseWarningForOnlyMetadataDcmtTypes?: boolean;
     validateSelect?: boolean;
     validateOrderBy?: boolean;
+    showDistinct?: boolean;
     onValueChanged?: (value: QueryDescriptor | undefined) => void;
     onEditClick?: () => void;
     onClose?: () => void;

package/lib/components/query/TMQuerySummary.js

@@ -10,26 +10,26 @@ import TMVilViewer from '../base/TMVilViewer';
 import { FormModes } from '../../ts';
 import TMModal from '../base/TMModal';
 // #region Style
-const StyledWrapper = styled.div `
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    justify-content: flex-start;
-    width: 100%;
-    font-size: ${FontSize.defaultFontSize};
+const StyledWrapper = styled.div `
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: flex-start;
+    width: 100%;
+    font-size: ${FontSize.defaultFontSize};
 `;
-const StyledQueryToolbar = styled.div `
-    display: flex;
-    flex-direction: column;
-    width: max-content;
-    gap: 8px;
+const StyledQueryToolbar = styled.div `
+    display: flex;
+    flex-direction: column;
+    width: max-content;
+    gap: 8px;
 `;
-const TMQuerySummary = ({ children, qd, validateSelect = true, validateOrderBy = true, raiseWarningForOnlyMetadataDcmtTypes = false, validationItems = [], onValueChanged, onEditClick, onClose }) => {
+const TMQuerySummary = ({ children, qd, validateSelect = true, validateOrderBy = true, raiseWarningForOnlyMetadataDcmtTypes = false, showDistinct = false, validationItems = [], onValueChanged, onEditClick, onClose }) => {
     const [showEditor, setShowEditor] = useState(false);
     const validationItemsQd = validationItems.filter(o => o.PropertyScopes.includes(TMScopeNames.qd) || o.PropertyName == TMScopeNames.qd);
     const useInternalEditor = onEditClick === undefined;
     return (_jsxs(StyledWrapper, { children: [_jsxs(StyledQueryToolbar, { children: [_jsx(TMButton, { caption: SDKUI_Localizator.QueryDefine, icon: _jsx(IconPencil, { fontSize: 16 }), btnStyle: 'toolbar', onClick: () => onEditClick ? onEditClick() : setShowEditor(true) }), _jsx(TMButton, { caption: SDKUI_Localizator.QueryCount, icon: _jsx(IconCount, { fontSize: 16 }), disabled: validationItemsQd.filter(o => o.ResultType == ResultTypes.ERROR).length > 0, btnStyle: 'toolbar', onClick: () => getQueryCountAsync(qd, true) }), _jsx(TMButton, { caption: SDKUI_Localizator.QueryClear, icon: _jsx(IconEraser, { fontSize: 16 }), btnStyle: 'toolbar', onClick: () => onValueChanged?.(new QueryDescriptor()) }), children] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', width: '100%', overflowX: 'auto' }, children: [qd && qd.from &&
-                        _jsx(TMQueryEditor, { formMode: FormModes.ReadOnly, inputData: qd, isModal: false, showToolbar: false, validateSelect: validateSelect, validateOrderBy: validateOrderBy, raiseWarningForOnlyMetadataDcmtTypes: raiseWarningForOnlyMetadataDcmtTypes }), _jsx("div", { style: { padding: '0px 5px' }, children: _jsx(TMVilViewer, { vil: validationItemsQd }) })] }), useInternalEditor && showEditor &&
-                _jsx(TMModal, { title: SDKUI_Localizator.QueryDefine, children: _jsx(TMQueryEditor, { formMode: FormModes.Update, inputData: qd, isModal: true, raiseWarningForOnlyMetadataDcmtTypes: raiseWarningForOnlyMetadataDcmtTypes, validateSelect: validateSelect, validateOrderBy: validateOrderBy, onApplied: (newValue) => onValueChanged?.(newValue), onClose: () => { setShowEditor(false); } }) })] }));
+                        _jsx(TMQueryEditor, { formMode: FormModes.ReadOnly, inputData: qd, showDistinct: showDistinct, isModal: false, showToolbar: false, validateSelect: validateSelect, validateOrderBy: validateOrderBy, raiseWarningForOnlyMetadataDcmtTypes: raiseWarningForOnlyMetadataDcmtTypes }), _jsx("div", { style: { padding: '0px 5px' }, children: _jsx(TMVilViewer, { vil: validationItemsQd }) })] }), useInternalEditor && showEditor &&
+                _jsx(TMModal, { title: SDKUI_Localizator.QueryDefine, children: _jsx(TMQueryEditor, { formMode: FormModes.Update, inputData: qd, isModal: true, showDistinct: showDistinct, raiseWarningForOnlyMetadataDcmtTypes: raiseWarningForOnlyMetadataDcmtTypes, validateSelect: validateSelect, validateOrderBy: validateOrderBy, onApplied: (newValue) => onValueChanged?.(newValue), onClose: () => { setShowEditor(false); } }) })] }));
 };
 export default TMQuerySummary;

package/lib/components/settings/SettingsAppearance.js

@@ -18,6 +18,10 @@ const fontSizes = [
     { value: "19px", display: "19px" },
     { value: "20px", display: "20px" }
 ];
+const fontFamilies = [
+    { value: "Inter", display: "Inter" },
+    { value: "Roboto", display: "Roboto" }
+];
 const SettingsAppearance = ({ landingPagesOptions, permissions = { canArchive: true, canSearch: true, dossiersLicense: true, wgGroupLicense: true, workFlowLicense: true } }) => {
     const [, setForceUpdate] = useState(0); // Dummy state to force re-renders
     const triggerUIUpdate = () => setForceUpdate((prev) => prev + 1); // Increment dummy state to re-render
@@ -43,7 +47,11 @@ const SettingsAppearance = ({ landingPagesOptions, permissions = { canArchive: t
     return (_jsxs(TMLayoutContainer, { children: [landingPagesOptions && _jsx("p", { style: { fontSize: '1.h1rem', fontWeight: 'bold', marginBottom: '5px' }, children: SDKUI_Localizator.LandingPage }), landingPagesOptions && _jsx(TMDropDown, { dataSource: filteredLandingPageOptopns, value: SDKUI_Globals.userSettings.landingPage, width: '230px', onValueChanged: (e) => {
                     SDKUI_Globals.userSettings.landingPage = e.target.value;
                     triggerUIUpdate();
-                } }), _jsx("p", { style: { fontSize: '1.h1rem', fontWeight: 'bold', marginTop: '10px' }, children: 'Font' }), _jsx(TMDropDown, { label: SDKUI_Localizator.Size, dataSource: fontSizes, width: '230px', value: SDKUI_Globals.userSettings.themeSettings.fontSize, onValueChanged: (e) => {
+                } }), _jsx("p", { style: { fontSize: '1.h1rem', fontWeight: 'bold', marginTop: '10px' }, children: 'Font' }), _jsx(TMDropDown, { label: SDKUI_Localizator.Name, dataSource: fontFamilies, width: '230px', value: SDKUI_Globals.userSettings.themeSettings.fontFamily, onValueChanged: (e) => {
+                    let newFamily = e.target.value;
+                    SDKUI_Globals.userSettings.themeSettings.fontFamily = newFamily;
+                    triggerUIUpdate();
+                } }), _jsx(TMDropDown, { label: SDKUI_Localizator.Size, dataSource: fontSizes, width: '230px', value: SDKUI_Globals.userSettings.themeSettings.fontSize, onValueChanged: (e) => {
                     let newpx = e.target.value;
                     SDKUI_Globals.userSettings.themeSettings.fontSize = newpx;
                     triggerUIUpdate();

package/lib/components/sidebar/TMCommandsPanel.js

@@ -1,15 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled from 'styled-components';
-export const StyledCommandsPanel = styled.div `
-    display: flex;
-    flex-direction: ${({ $isMobile }) => ($isMobile ? 'row' : 'column')};
-    align-items: center;
-    width: ${({ $isMobile }) => ($isMobile ? '100%' : '50px')};
-    height: ${({ $isMobile }) => ($isMobile ? '50px' : 'max-content')};
-    background: transparent linear-gradient(90deg, #CCE0F4 0%, #7EC1E7 14%, #39A6DB 28%, #1E9CD7 35%, #0075BE 78%, #005B97 99%) 0% 0% no-repeat padding-box;
-    border-radius: ${({ $isMobile }) => ($isMobile ? '10px' : '10px 0px 0px 10px')};
-    padding: 10px;
-    gap: 10px;
+export const StyledCommandsPanel = styled.div `
+    display: flex;
+    flex-direction: ${({ $isMobile }) => ($isMobile ? 'row' : 'column')};
+    align-items: center;
+    width: ${({ $isMobile }) => ($isMobile ? '100%' : '50px')};
+    height: ${({ $isMobile }) => ($isMobile ? '50px' : 'max-content')};
+    background: transparent linear-gradient(90deg, #CCE0F4 0%, #7EC1E7 14%, #39A6DB 28%, #1E9CD7 35%, #0075BE 78%, #005B97 99%) 0% 0% no-repeat padding-box;
+    border-radius: ${({ $isMobile }) => ($isMobile ? '10px' : '10px 0px 0px 10px')};
+    padding: 10px;
+    gap: 10px;
 `;
 const TMCommandsPanel = ({ isMobile, items }) => (_jsx(StyledCommandsPanel, { "$isMobile": isMobile, children: items.map((iconProps, idx) => (_jsx("span", { style: {
             background: iconProps.selected ? 'white' : 'transparent',