@topconsultnpm/sdkui-react 6.21.0-dev2.2 → 6.21.0-dev2.20

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

@@ -23,6 +23,7 @@ export interface TMAccordionProps {
     localStorageKey?: string;
     selectedItem?: any;
     onSelectedItemChange?: (item: any) => void;
+    itemMarginBottom?: number;
 }
 declare const TMAccordion: React.FC<TMAccordionProps>;
 export default TMAccordion;

package/lib/components/base/TMAccordionNew.js

@@ -41,7 +41,7 @@ const Container = styled.div `
     }
 `;
 const AccordionItem = styled.div `
-    margin-bottom: 16px;
+    margin-bottom: ${props => props.$marginBottom}px;
     border-radius: 5px;
     background: white;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
@@ -152,7 +152,7 @@ const LoadingContainer = styled.div `
     min-height: 200px;
 `;
 const DEFAULT_COLORS = ['#339af0', '#fa5252', '#40c057', '#f59f00', '#e64980', '#7950f2'];
-const TMAccordion = ({ groups, localStorageKey, selectedItem, onSelectedItemChange }) => {
+const TMAccordion = ({ groups, localStorageKey, selectedItem, onSelectedItemChange, itemMarginBottom = 16 }) => {
     const [openAccordions, setOpenAccordions] = useState({});
     const [isInitialized, setIsInitialized] = useState(false);
     const [focusedItem, setFocusedItem] = useState(undefined);
@@ -252,6 +252,7 @@ const TMAccordion = ({ groups, localStorageKey, selectedItem, onSelectedItemChan
             disabled: mi.disabled,
             onClick: mi.onClick,
             submenu: mi.items || mi.submenu,
+            beginGroup: mi.beginGroup ?? false
         }));
         setItemContextMenuPosition({ x: event.clientX, y: event.clientY });
         setItemContextMenuItems(convertedItems);
@@ -308,16 +309,16 @@ const TMAccordion = ({ groups, localStorageKey, selectedItem, onSelectedItemChan
         const color = getGroupColor(group, index);
         const isOpen = openAccordions[group.id] ?? true;
         if (group.customComponent) {
-            return (_jsxs(AccordionItem, { children: [_jsxs(AccordionHeader, { id: `accordion-header-${group.id}`, "$color": color, "$isOpen": isOpen, onClick: (e) => handleHeaderClick(e, group.id), onContextMenu: (e) => handleHeaderContextMenu(e, group.id), children: [_jsxs(AccordionTitle, { children: [group.icon, _jsx(TitleText, { children: group.title })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [renderBadges(group, color), _jsx(ToggleIcon, { "$isOpen": isOpen, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M4 6L8 10L12 6", stroke: "#495057", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), isOpen && (_jsx(CustomComponentContainer, { children: group.customComponent }))] }, group.id));
+            return (_jsxs(AccordionItem, { "$marginBottom": itemMarginBottom, children: [_jsxs(AccordionHeader, { id: `accordion-header-${group.id}`, "$color": color, "$isOpen": isOpen, onClick: (e) => handleHeaderClick(e, group.id), onContextMenu: (e) => handleHeaderContextMenu(e, group.id), children: [_jsxs(AccordionTitle, { children: [group.icon, _jsx(TitleText, { children: group.title })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [renderBadges(group, color), _jsx(ToggleIcon, { "$isOpen": isOpen, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M4 6L8 10L12 6", stroke: "#495057", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), isOpen && (_jsx(CustomComponentContainer, { children: group.customComponent }))] }, group.id));
         }
         if (!group.dataSource || group.dataSource.length === 0)
             return null;
         if (!group.renderItem) {
-            return (_jsxs(AccordionItem, { children: [_jsxs(AccordionHeader, { id: `accordion-header-${group.id}`, "$color": color, "$isOpen": isOpen, onClick: (e) => handleHeaderClick(e, group.id), onContextMenu: (e) => handleHeaderContextMenu(e, group.id), children: [_jsxs(AccordionTitle, { children: [group.icon, _jsx(TitleText, { children: group.title })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [renderBadges(group, color), _jsx(ToggleIcon, { "$isOpen": isOpen, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M4 6L8 10L12 6", stroke: "#495057", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), _jsx(AccordionContent, { "$isOpen": isOpen, "$maxHeight": 100, children: _jsxs(ErrorMessage, { children: ["\u26A0\uFE0F renderItem function is required for \"", group.title, "\" group"] }) })] }, group.id));
+            return (_jsxs(AccordionItem, { "$marginBottom": itemMarginBottom, children: [_jsxs(AccordionHeader, { id: `accordion-header-${group.id}`, "$color": color, "$isOpen": isOpen, onClick: (e) => handleHeaderClick(e, group.id), onContextMenu: (e) => handleHeaderContextMenu(e, group.id), children: [_jsxs(AccordionTitle, { children: [group.icon, _jsx(TitleText, { children: group.title })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [renderBadges(group, color), _jsx(ToggleIcon, { "$isOpen": isOpen, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M4 6L8 10L12 6", stroke: "#495057", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), _jsx(AccordionContent, { "$isOpen": isOpen, "$maxHeight": 100, children: _jsxs(ErrorMessage, { children: ["\u26A0\uFE0F renderItem function is required for \"", group.title, "\" group"] }) })] }, group.id));
         }
         const itemHeight = group.itemHeight || 80;
         const maxHeight = group.dataSource.length * itemHeight + 20;
-        return (_jsxs(AccordionItem, { children: [_jsxs(AccordionHeader, { id: `accordion-header-${group.id}`, "$color": color, "$isOpen": isOpen, onClick: (e) => handleHeaderClick(e, group.id), onContextMenu: (e) => handleHeaderContextMenu(e, group.id), children: [_jsxs(AccordionTitle, { children: [group.icon, _jsx(TitleText, { children: group.title })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [renderBadges(group, color), _jsx(ToggleIcon, { "$isOpen": isOpen, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M4 6L8 10L12 6", stroke: "#495057", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), _jsx(AccordionContent, { "$isOpen": isOpen, "$maxHeight": maxHeight, children: _jsx(ItemsList, { children: group.dataSource.map((item, itemIndex) => {
+        return (_jsxs(AccordionItem, { "$marginBottom": itemMarginBottom, children: [_jsxs(AccordionHeader, { id: `accordion-header-${group.id}`, "$color": color, "$isOpen": isOpen, onClick: (e) => handleHeaderClick(e, group.id), onContextMenu: (e) => handleHeaderContextMenu(e, group.id), children: [_jsxs(AccordionTitle, { children: [group.icon, _jsx(TitleText, { children: group.title })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [renderBadges(group, color), _jsx(ToggleIcon, { "$isOpen": isOpen, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M4 6L8 10L12 6", stroke: "#495057", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), _jsx(AccordionContent, { "$isOpen": isOpen, "$maxHeight": maxHeight, children: _jsx(ItemsList, { children: group.dataSource.map((item, itemIndex) => {
                             const isSelected = selectedItem === item;
                             const isFocused = focusedItem === item;
                             return (_jsx(ListItem, { id: `accordion-item-${group.id}-${itemIndex}`, className: "tm-accordion-list-item", "$isSelected": isSelected, "$color": color, onClick: () => handleItemClick(item, group), onDoubleClick: () => handleItemDoubleClick(item, group), onMouseEnter: () => setFocusedItem(item), onMouseLeave: () => setFocusedItem(undefined), onContextMenu: (e) => handleContextMenu(e, item, group), children: group.renderItem(item, isSelected, isFocused, color) }, itemIndex * 2));

package/lib/components/base/TMAreaManager.js

@@ -5,7 +5,7 @@ import { FileDescriptor, FileFormats, FileTransferModes, SDK_Localizator, SDK_Gl
 import CustomFileSystemProvider from 'devextreme/file_management/custom_provider';
 import FileSystemError from "devextreme/file_management/error";
 import Button from "devextreme/ui/button";
-import { alert, confirm } from "devextreme/ui/dialog";
+import { alert, custom } from "devextreme/ui/dialog";
 import { loadMessages } from 'devextreme/localization';
 import { getFileManagerFolderColor, Globalization, IconAll, IconCloud, IconFolder, IconFolderForCSS, IconSelected, SDKUI_Localizator, svgToString } from '../../helper';
 import { TMExceptionBoxManager } from './TMPopUp';
@@ -253,8 +253,24 @@ const TMAreaManager = (props = { selectionMode: 'multiple', isPathChooser: false
                     else {
                         msg = SDKUI_Localizator.FileManager_QuestionAlreadyExistsFiles.replaceParams(resolvesForExistingFiles.length.toString());
                     }
-                    const result = confirm(msg, SDKUI_Localizator.Attention);
-                    result.then((dialogResult) => {
+                    const confirmDialog = custom({
+                        title: SDKUI_Localizator.Attention,
+                        messageHtml: `<div style="padding: 15px; font-size: 1rem; max-width: 500px; word-wrap: break-word; overflow-wrap: break-word;">${msg}</div>`,
+                        buttons: [
+                            {
+                                text: SDKUI_Localizator.Yes ?? "Yes",
+                                onClick: () => true,
+                                type: "default",
+                                stylingMode: "contained"
+                            },
+                            {
+                                text: SDKUI_Localizator.No ?? "No",
+                                onClick: () => false,
+                                stylingMode: "outlined"
+                            }
+                        ]
+                    });
+                    confirmDialog.show().then((dialogResult) => {
                         resolvesForNonExistingFiles.forEach((res) => {
                             res({
                                 cancel: false,

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

@@ -1,7 +1,3 @@
-/** Gestione TMPanel "attivo / non attivo" secondo una pattern ibrido (Controlled/Uncontrolled Component):
-1) Modalità Non Controllata (Uncontrolled): Se non gli viene passata la prop "isActive", il pannello gestisce lo stato "attivo" internamente. Per l'uso singolo ("plug-and-play").
-2) Modalità Controllata (Controlled): Se il genitore passa la prop "isActive", il pannello cede il controllo e si affida completamente al genitore. Ideale per layout con più pannelli che necessitano di coordinamento.
-*/
 import React from 'react';
 export interface ITMPanelRef {
     focusPanel: () => void;
@@ -28,5 +24,12 @@ export interface ITMPanelProps {
     onHeaderDoubleClick?: () => void;
     onMaximize?: (isMaximized: boolean) => void;
 }
+/**
+ * TMPanel - Pannello con supporto Controlled/Uncontrolled
+ *
+ * @prop isActive (opzionale)
+ *   - Se NON passata → Uncontrolled: gestione interna dello stato attivo (plug-and-play)
+ *   - Se passata → Controlled: il parent gestisce lo stato tramite onActivate
+ */
 declare const TMPanel: React.ForwardRefExoticComponent<ITMPanelProps & React.RefAttributes<ITMPanelRef>>;
 export default TMPanel;

package/lib/components/base/TMPanel.js

@@ -1,13 +1,33 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/** Gestione TMPanel "attivo / non attivo" secondo una pattern ibrido (Controlled/Uncontrolled Component):
-1) Modalità Non Controllata (Uncontrolled): Se non gli viene passata la prop "isActive", il pannello gestisce lo stato "attivo" internamente. Per l'uso singolo ("plug-and-play").
-2) Modalità Controllata (Controlled): Se il genitore passa la prop "isActive", il pannello cede il controllo e si affida completamente al genitore. Ideale per layout con più pannelli che necessitano di coordinamento.
-*/
 import { useCallback, useRef, useState, forwardRef, useImperativeHandle } from 'react';
 import styled from 'styled-components';
 import { getAppModuleGradient, IconArrowLeft, IconClearButton, IconWindowMaximize, IconWindowMinimize, isPositiveNumber, SDKUI_Localizator } from '../../helper';
 import TMButton from './TMButton';
 import { Gutters } from '../../utils/theme';
+const StyledBackButton = styled.button `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    padding: 4px 10px;
+    border: 1px solid ${({ $isActive }) => $isActive ? 'rgba(255, 255, 255, 0.4)' : 'rgba(37, 89, 165, 0.3)'};
+    border-radius: 6px;
+    cursor: pointer;
+    font-weight: 500;
+    font-size: 0.85rem;
+    flex-shrink: 0;
+    transition: all 0.15s ease;
+    background-color: #2559A5;
+    box-shadow: none;
+    
+    &&, && * {
+        color: #FFFFFF !important;
+    }
+    
+    svg {
+        font-size: 14px;
+    }
+`;
 import { AppModules, SDK_Globals } from '@topconsultnpm/sdk-ts';
 const StyledPanelContainer = styled.div `
     width: 100%;
@@ -75,6 +95,13 @@ const StyledPanelContent = styled.div `
         outline: none;
     }
 `;
+/**
+ * TMPanel - Pannello con supporto Controlled/Uncontrolled
+ *
+ * @prop isActive (opzionale)
+ *   - Se NON passata → Uncontrolled: gestione interna dello stato attivo (plug-and-play)
+ *   - Se passata → Controlled: il parent gestisce lo stato tramite onActivate
+ */
 const TMPanel = forwardRef(({ allowMaximize = true, color, backgroundColor, backgroundColorContainer, children, showHeader = true, title, totalItems, displayedItemsCount, toolbar, padding = '5px', isVisible = true, panelID = 'tmpanel', isActive, // Questa prop determinerà la modalità
 onActivate, onBack, onClose, onHeaderDoubleClick, onMaximize, onActiveChanged }, ref) => {
     const [isMaximized, setIsMaximized] = useState(false);
@@ -149,36 +176,37 @@ onActivate, onBack, onClose, onHeaderDoubleClick, onMaximize, onActiveChanged },
                             flexDirection: 'row',
                             alignItems: 'center',
                             width: '100%',
-                            minWidth: 0
-                        }, children: [_jsxs("div", { style: {
+                            minWidth: 0,
+                            flexWrap: 'nowrap',
+                            overflow: 'hidden'
+                        }, children: [onBack && _jsx("div", { style: {
                                     display: 'flex',
                                     flexDirection: 'row',
                                     alignItems: 'center',
-                                    gap: '8px',
+                                    flexShrink: 0
+                                }, children: _jsxs(StyledBackButton, { "$isActive": currentIsActive, onClick: () => onBack ? onBack() : null, title: SDKUI_Localizator.Back, children: [_jsx(IconArrowLeft, {}), _jsx("span", { children: SDKUI_Localizator.Back })] }) }), _jsx("div", { style: {
                                     flex: 1,
-                                    minWidth: 0
-                                }, children: [onBack &&
-                                        _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconArrowLeft, {}), caption: SDKUI_Localizator.Back, onClick: onBack }), _jsx("div", { style: {
-                                            display: 'flex',
-                                            flexDirection: 'row',
-                                            alignItems: 'center',
-                                            overflow: 'hidden',
-                                        }, children: _jsxs("div", { style: {
-                                                whiteSpace: 'nowrap',
-                                                overflow: 'hidden',
-                                                textOverflow: 'ellipsis',
-                                                margin: 0
-                                            }, children: [title, isPositiveNumber(displayedItemsCount) && isPositiveNumber(totalItems)
-                                                    ? ` (${displayedItemsCount} / ${totalItems})`
-                                                    : isPositiveNumber(totalItems)
-                                                        ? ` (${totalItems})`
-                                                        : ''] }) })] }), _jsxs("div", { style: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'flex-start',
+                                    minWidth: 0,
+                                    overflow: 'hidden',
+                                    padding: '0 8px'
+                                }, children: _jsxs("div", { style: {
+                                        whiteSpace: 'nowrap',
+                                        overflow: 'hidden',
+                                        textOverflow: 'ellipsis',
+                                        margin: 0
+                                    }, children: [title, isPositiveNumber(displayedItemsCount) && isPositiveNumber(totalItems)
+                                            ? ` (${displayedItemsCount} / ${totalItems})`
+                                            : isPositiveNumber(totalItems)
+                                                ? ` (${totalItems})`
+                                                : ''] }) }), _jsxs("div", { style: {
                                     display: 'flex',
                                     flexDirection: 'row',
                                     alignItems: 'center',
                                     gap: '5px',
-                                    flexShrink: 0,
-                                    marginLeft: 10
+                                    flexShrink: 0
                                 }, children: [toolbar, allowMaximize && _jsx(TMButton, { color: 'primaryOutline', caption: isMaximized ? SDKUI_Localizator.Minimize : SDKUI_Localizator.Maximize, icon: isMaximized
                                             ? _jsx(IconWindowMinimize, { fontSize: 16 })
                                             : _jsx(IconWindowMaximize, { fontSize: 16 }), btnStyle: 'icon', onClick: handleMaximize }), onClose && _jsx(TMButton, { color: 'primaryOutline', caption: SDKUI_Localizator.Close, icon: _jsx(IconClearButton, {}), btnStyle: 'icon', onClick: () => { setIsMaximized(false); onClose?.(); } })] })] }) }), _jsx(StyledPanelContent, { "$height": showHeader ? "calc(100% - 40px)" : "100%", "$padding": padding, "$backgroundColor": backgroundColorContainer ?? `#FFFFFF`, children: children })] }));

package/lib/components/editors/TMDateBox.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from 'react';
+import { useEffect, useId, useRef } from 'react';
 import { DateBox } from 'devextreme-react';
 import { DateDisplayTypes, Globalization } from '../../helper';
 import { TMColors } from '../../utils/theme';
 import TMVilViewer from '../base/TMVilViewer';
 const TMDateBox = (props) => {
     const resetTimeToZero = props.resetTimeToZeroOnKeyPress ?? true;
+    const autoId = useId();
+    const effectiveInputAttr = { id: autoId, ...props.inputAttr };
     useEffect(() => {
         let htmlElement = dateBoxRef?.current?.instance().element();
         if (!htmlElement)
@@ -63,7 +65,7 @@ const TMDateBox = (props) => {
             return "datetime";
         return props.dateDisplayType == DateDisplayTypes.Date ? "date" : "time";
     };
-    return (_jsxs("div", { style: { display: 'flex', alignItems: 'center', width: '100%', padding: props.padding }, children: [props.icon && (_jsx("span", { style: { marginRight: '8px', marginTop: '8px', display: 'flex', alignItems: 'center' }, children: props.icon })), _jsxs("div", { onContextMenu: (e) => e.stopPropagation(), style: { display: 'flex', flexDirection: 'column', gap: '5px', width: '100%' }, children: [_jsx(DateBox, { readOnly: props.readOnly, ref: dateBoxRef, showClearButton: props.showClearButton, dateSerializationFormat: props.useDateSerializationFormat ? 'yyyy-MM-ddTHH:mm:ss' : undefined, disabled: props.disabled, displayFormat: props.displayFormat ?? Globalization.getDateDisplayFormat(props.dateDisplayType), dropDownOptions: dropDownOptions, label: props.label, labelMode: 'static', type: getType(), useMaskBehavior: true, height: '28px', value: props.value, width: props.width, valueChangeEvent: 'keyup input change', onValueChange: (e) => { props.onValueChange?.(e); }, onInitialized: (e) => { props.onInitialized?.(e); }, onContentReady: (e) => { props.onContentReady?.(e); }, placeholder: props.placeholder, onKeyUp: (e) => {
+    return (_jsxs("div", { style: { display: 'flex', alignItems: 'center', width: '100%', padding: props.padding }, children: [props.icon && (_jsx("span", { style: { marginRight: '8px', marginTop: '8px', display: 'flex', alignItems: 'center' }, children: props.icon })), _jsxs("div", { onContextMenu: (e) => e.stopPropagation(), style: { display: 'flex', flexDirection: 'column', gap: '5px', width: '100%' }, children: [_jsx(DateBox, { readOnly: props.readOnly, ref: dateBoxRef, showClearButton: props.showClearButton, dateSerializationFormat: props.useDateSerializationFormat ? 'yyyy-MM-ddTHH:mm:ss' : undefined, disabled: props.disabled, displayFormat: props.displayFormat ?? Globalization.getDateDisplayFormat(props.dateDisplayType), dropDownOptions: dropDownOptions, label: props.label, labelMode: 'static', type: getType(), useMaskBehavior: true, height: '28px', value: props.value, width: props.width, valueChangeEvent: 'keyup input change', onValueChange: (e) => { props.onValueChange?.(e); }, onInitialized: (e) => { props.onInitialized?.(e); }, onContentReady: (e) => { props.onContentReady?.(e); }, placeholder: props.placeholder, ...(props.name && { name: props.name }), inputAttr: effectiveInputAttr, onKeyUp: (e) => {
                             if (e.event?.code == "Space") {
                                 const currentDate = new Date();
                                 currentDate.setHours(0, 0, 0, 0);

package/lib/components/editors/TMFormulaEditor.d.ts

@@ -27,11 +27,13 @@ export declare class FormulaDescriptor {
     mid?: number;
     metadataDataTypeDest?: MetadataDataTypes;
     tid?: number;
+    description?: string;
 }
 export declare const renderFormulaIcon: (iconType: FormulaIconTypes, tid?: number, md?: MetadataDescriptor) => import("react/jsx-runtime").JSX.Element;
 declare const TMFormulaEditor: React.FunctionComponent<ITMApplyFormProps<FormulaDescriptor>>;
 export default TMFormulaEditor;
 export declare class FormulaHelper {
+    static translateDescInFormula: (text: string, returnType?: string) => string;
     static isFormula(value: string | undefined): boolean;
     static removeFormulaTag(value: string | undefined): string | undefined;
     static addFormulaTag(value: string | undefined): string | undefined;