@topconsultnpm/sdkui-react 6.22.0-dev1.8 → 6.22.0-dev2.10

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

@@ -3,6 +3,17 @@ import { ITMEditorBase } from './TMEditorBase';
 export type ButtonColors = 'error' | 'warning' | 'success' | 'info' | 'primary' | 'secondary' | 'tertiary' | 'standard' | 'primaryOutline' | 'secondaryOutline' | 'tertiaryOutline' | 'errorOutline' | 'warningOutline' | 'successOutline' | 'infoOutline';
 export type ButtonStyle = 'normal' | 'toolbar' | 'icon' | 'text' | 'advanced';
 export type AdvancedButtonType = 'success' | 'error' | 'tertiary' | 'primary';
+/** Azione secondaria mostrata nel dropdown "split button" (freccia a destra) */
+export interface ITMButtonSecondaryAction {
+    /** Etichetta mostrata nella voce di menu */
+    name: string;
+    /** Icona opzionale a sinistra della voce */
+    icon?: React.ReactNode;
+    /** Callback al click della voce */
+    onClick?: () => void;
+    /** Disabilita la singola voce */
+    disabled?: boolean;
+}
 export interface ITMButton extends ITMEditorBase {
     color?: ButtonColors;
     btnStyle?: ButtonStyle;
@@ -17,6 +28,8 @@ export interface ITMButton extends ITMEditorBase {
     showTooltip?: boolean;
     onClick?: VoidFunction;
     onMouseDown?: (e: any) => any;
+    /** Azioni secondarie: se valorizzate, il bottone mostra una freccia a destra che apre un dropdown con queste azioni */
+    secondaryActions?: ITMButtonSecondaryAction[];
 }
 declare const TMButton: React.ForwardRefExoticComponent<ITMButton & React.RefAttributes<HTMLButtonElement>>;
 export default TMButton;

package/lib/components/base/TMButton.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, forwardRef } from 'react';
+import { useState, forwardRef, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
 import styled from 'styled-components';
-import { getColor } from '../../helper';
+import { getColor, IconChevronDown } from '../../helper';
 import { FontSize, TMColors } from '../../utils/theme';
 import TMTooltip from './TMTooltip';
 const StyledNormalButton = styled.button.withConfig({ shouldForwardProp: prop => !['text'].includes(prop) }) `
@@ -149,10 +150,132 @@ const StyledAdvancedButtonText = styled.div `
     border-top-right-radius: 10px;
     border-bottom-right-radius: 10px;
     padding: 5px;
+    padding-right: ${props => props.$reserveArrow ? '26px' : '5px'};
+`;
+const StyledSplitContainer = styled.div `
+  display: inline-flex;
+  align-items: stretch;
+  position: relative;
+`;
+const StyledSplitArrow = styled.button `
+  position: absolute;
+  right: 4px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  border-radius: 6px;
+  cursor: ${props => props.$isDisabled ? 'default' : 'pointer'};
+  color: white;
+  background-color: rgba(255, 255, 255, 0.22);
+  transition: background-color ease 150ms;
+  &:hover { background-color: ${props => props.$isDisabled ? 'rgba(255, 255, 255, 0.22)' : 'rgba(255, 255, 255, 0.38)'}; }
+  & svg {
+    transition: transform ease 150ms;
+    transform: rotate(${props => props.$isOpen ? '180deg' : '0deg'});
+  }
+`;
+const StyledDropdown = styled.div `
+  position: fixed;
+  left: ${props => props.$left}px;
+  top: ${props => props.$top}px;
+  transform: translateY(-100%);
+  transform-origin: bottom left;
+  min-width: ${props => props.$minWidth}px;
+  background: #ffffff;
+  border-radius: 14px;
+  box-shadow: 0 10px 30px rgba(20, 40, 80, 0.20);
+  border: 1px solid rgba(74, 150, 210, 0.18);
+  padding: 5px;
+  z-index: 100000;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  animation: tmSplitDropdownIn cubic-bezier(0.2, 0.8, 0.2, 1) 150ms;
+  @keyframes tmSplitDropdownIn {
+    from { opacity: 0; transform: translateY(calc(-100% + 8px)); }
+    to   { opacity: 1; transform: translateY(-100%); }
+  }
+`;
+const StyledDropdownItem = styled.button `
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  width: 100%;
+  padding: 5px 9px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  text-align: left;
+  font-size: ${FontSize.defaultFontSize};
+  font-weight: 500;
+  color: ${props => props.$disabled ? '#b4b4b4' : '#2c3e50'};
+  cursor: ${props => props.$disabled ? 'default' : 'pointer'};
+  transition: background ease 150ms, color ease 150ms;
+  &:hover {
+    background: ${props => props.$disabled ? 'transparent' : 'linear-gradient(135deg, rgba(74, 150, 210, 0.16) 0%, rgba(37, 89, 165, 0.16) 100%)'};
+    color: ${props => props.$disabled ? '#b4b4b4' : '#2559A5'};
+  }
+  & > .tm-split-item-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    flex-shrink: 0;
+    border-radius: 6px;
+    background: rgba(74, 150, 210, 0.14);
+    color: #4A96D2;
+    transition: background ease 150ms, color ease 150ms;
+  }
+  &:hover > .tm-split-item-icon {
+    background: ${props => props.$disabled ? 'rgba(74, 150, 210, 0.14)' : '#4A96D2'};
+    color: ${props => props.$disabled ? '#4A96D2' : '#ffffff'};
+  }
 `;
 const TMButton = forwardRef((props, ref) => {
-    const { width, height, keyGesture, btnStyle = 'normal', advancedColor, advancedType = 'primary', color = 'primary', fontSize = FontSize.defaultFontSize, disabled = false, showTooltip = true, caption, icon, description, padding, elementStyle, onClick = () => { }, onMouseDown = () => { } } = props;
+    const { width, height, keyGesture, btnStyle = 'normal', advancedColor, advancedType = 'primary', color = 'primary', fontSize = FontSize.defaultFontSize, disabled = false, showTooltip = true, caption, icon, description, padding, elementStyle, onClick = () => { }, onMouseDown = () => { }, secondaryActions } = props;
     const [isHovered, setIsHovered] = useState(false);
+    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+    const [dropdownPos, setDropdownPos] = useState({ left: 0, top: 0, minWidth: 200 });
+    const splitContainerRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const hasSecondaryActions = !!secondaryActions && secondaryActions.length > 0;
+    useEffect(() => {
+        if (!isDropdownOpen)
+            return;
+        const handlePointerDown = (e) => {
+            const target = e.target;
+            if (splitContainerRef.current?.contains(target) || dropdownRef.current?.contains(target))
+                return;
+            setIsDropdownOpen(false);
+        };
+        const handleKeyDown = (e) => { if (e.key === 'Escape')
+            setIsDropdownOpen(false); };
+        document.addEventListener('mousedown', handlePointerDown);
+        document.addEventListener('touchstart', handlePointerDown);
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('mousedown', handlePointerDown);
+            document.removeEventListener('touchstart', handlePointerDown);
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [isDropdownOpen]);
+    const toggleDropdown = () => {
+        if (disabled)
+            return;
+        if (!isDropdownOpen && splitContainerRef.current) {
+            const rect = splitContainerRef.current.getBoundingClientRect();
+            setDropdownPos({ left: rect.left, top: rect.top - 6, minWidth: Math.max(rect.width, 200) });
+        }
+        setIsDropdownOpen(prev => !prev);
+    };
     const renderedButton = () => {
         if (btnStyle === 'normal') {
             return (_jsx(StyledNormalButton, { ref: ref, width: width, height: height, color: color, caption: caption, disabled: disabled, fontSize: fontSize, onClick: onClick, onMouseDown: (e) => !disabled && onMouseDown?.(e), children: caption }));
@@ -164,7 +287,7 @@ const TMButton = forwardRef((props, ref) => {
             return (_jsx(StyledIconButton, { ref: ref, color: color, caption: caption, disabled: disabled, fontSize: fontSize, padding: padding, onClick: onClick, onMouseDown: (e) => !disabled && onMouseDown?.(e), children: icon }));
         }
         else if (btnStyle === 'advanced') {
-            return (_jsxs(StyledAdvancedButton, { ref: ref, "$width": width ?? '90px', "$height": height ?? '30px', onMouseOver: () => !disabled && setIsHovered(true), onMouseOut: () => setIsHovered(false), "$isDisabled": disabled, "$isPrimaryOutline": advancedType === 'primary' && (advancedColor === 'primaryOutline' || color === 'primaryOutline'), onClick: () => !disabled && onClick?.(), onMouseDown: (e) => !disabled && onMouseDown?.(e), children: [_jsx(StyledAdvancedButtonIcon, { "$color": advancedColor, "$isVisible": isHovered, "$isDisabled": disabled, "$type": advancedType, children: icon }), _jsx(StyledAdvancedButtonText, { "$color": advancedColor, "$isDisabled": disabled, "$type": advancedType, children: caption })] }));
+            return (_jsxs(StyledAdvancedButton, { ref: ref, "$width": width ?? '90px', "$height": height ?? '30px', onMouseOver: () => !disabled && setIsHovered(true), onMouseOut: () => setIsHovered(false), "$isDisabled": disabled, "$isPrimaryOutline": advancedType === 'primary' && (advancedColor === 'primaryOutline' || color === 'primaryOutline'), onClick: () => !disabled && onClick?.(), onMouseDown: (e) => !disabled && onMouseDown?.(e), children: [_jsx(StyledAdvancedButtonIcon, { "$color": advancedColor, "$isVisible": isHovered, "$isDisabled": disabled, "$type": advancedType, children: icon }), _jsx(StyledAdvancedButtonText, { "$color": advancedColor, "$isDisabled": disabled, "$type": advancedType, "$reserveArrow": hasSecondaryActions, children: caption })] }));
         }
         else {
             return (_jsx(StyledTextButton, { ref: ref, color: color, caption: caption, disabled: disabled, fontSize: fontSize, onClick: onClick, onMouseDown: (e) => !disabled && onMouseDown?.(e), children: caption }));
@@ -175,6 +298,15 @@ const TMButton = forwardRef((props, ref) => {
             _jsxs(_Fragment, { children: [caption &&
                         _jsx(StyledButtonTooltipHeader, { "$description": description, children: _jsx(StyledButtonTooltipItem, { "$color": color, children: caption }) }), description && _jsx(StyledButtonTooltipItem, { children: description })] }));
     };
-    return (_jsx("div", { style: elementStyle, children: showTooltip ? _jsx(TMTooltip, { hideAfterDelay: true, content: renderTooltip(), children: renderedButton() }) : renderedButton() }));
+    const buttonWithTooltip = showTooltip
+        ? _jsx(TMTooltip, { hideAfterDelay: true, content: renderTooltip(), children: renderedButton() })
+        : renderedButton();
+    const renderSplitButton = () => (_jsxs(StyledSplitContainer, { ref: splitContainerRef, children: [buttonWithTooltip, _jsx(StyledSplitArrow, { type: 'button', "$isDisabled": disabled, "$isOpen": isDropdownOpen, "aria-haspopup": 'menu', "aria-expanded": isDropdownOpen, onClick: (e) => { e.stopPropagation(); toggleDropdown(); }, onMouseDown: (e) => e.stopPropagation(), children: _jsx(IconChevronDown, { fontSize: 14 }) }), isDropdownOpen && createPortal(_jsx(StyledDropdown, { ref: dropdownRef, role: 'menu', "$left": dropdownPos.left, "$top": dropdownPos.top, "$minWidth": dropdownPos.minWidth, children: secondaryActions.map((action, idx) => (_jsxs(StyledDropdownItem, { type: 'button', role: 'menuitem', "$disabled": action.disabled, disabled: action.disabled, onClick: () => {
+                        if (action.disabled)
+                            return;
+                        setIsDropdownOpen(false);
+                        action.onClick?.();
+                    }, children: [action.icon && _jsx("span", { className: 'tm-split-item-icon', children: action.icon }), _jsx("span", { children: action.name })] }, `${action.name}-${idx}`))) }), document.body)] }));
+    return (_jsx("div", { style: elementStyle, children: hasSecondaryActions ? renderSplitButton() : buttonWithTooltip }));
 });
 export default TMButton;

package/lib/components/base/TMDataGridExportForm.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Workbook } from 'devextreme-exceljs-fork';
-import { buildValueToLabelMapFromDataColumns, getExceptionMessage, SDKUI_Localizator } from '../../helper';
+import { buildValueToLabelMapFromDataColumns, findDataColumnByField, formatValueForExport, getExceptionMessage, SDKUI_Localizator } from '../../helper';
 import TMCheckBox from '../editors/TMCheckBox';
 import TMButton from './TMButton';
 import TMModal from './TMModal';
@@ -96,43 +96,52 @@ const TMDataGridExportForm = (props) => {
                     if (mapForField) {
                         result = mapForField.get(value) ?? value;
                     }
-                    else {
-                        result = value;
-                    }
-                }
-                // If the column is a datetime type, attempt to format it as a locale date string
-                if (col.dataType === 'datetime' && result) {
-                    const parsedDate = new Date(result);
-                    if (!isNaN(parsedDate.getTime())) {
-                        result = parsedDate.toLocaleDateString();
-                    }
                 }
-                // Return the cleaned string value, stripping double quotes to avoid CSV formatting issues
-                return (result ?? '').toString().replace(/"/g, '');
+                // Find column and format value
+                const dataCol = findDataColumnByField(columns, col.dataField, col.caption);
+                return formatValueForExport(result, dataCol, col.dataType);
             };
             switch (formatSelected) {
                 case 'csv': {
-                    const getHeaderName = (col) => col.caption ?? col.dataField;
-                    const headers = !exportSelectedFormatColumns ? visibleColumns.map(getHeaderName) : [SDKUI_Localizator.SelectedSingular, ...visibleColumns.map(getHeaderName)];
-                    const csvRows = [];
-                    csvRows.push(headers.join(';'));
+                    // Escape dei valori CSV per gestire separatori, virgolette e ritorni a capo
+                    const escapeCsv = (v) => { const s = String(v ?? ''); return /[;"\r\n]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s; };
+                    // Recupera il nome della colonna e lo prepara per il formato CSV
+                    const getHeader = (c) => escapeCsv(c.caption ?? c.dataField);
+                    // Crea la prima riga del CSV con le intestazioni delle colonne
+                    const rows = [
+                        (exportSelectedFormatColumns
+                            ? [SDKUI_Localizator.SelectedSingular, ...visibleColumns.map(getHeader)]
+                            : visibleColumns.map(getHeader)).join(';')
+                    ];
+                    // Scorre tutte le righe da esportare
                     rowsToExport.forEach((item, idx) => {
+                        // Recupera l'indice originale della riga per verificare la selezione
                         const originalIndex = exportSelectedOnly ? selectedRowKeys[idx] : dataSource.indexOf(item);
-                        const rowValues = [];
-                        if (exportSelectedFormatColumns) {
-                            const status = selectedSet.has(originalIndex) ? SDKUI_Localizator.SelectedSingular : SDKUI_Localizator.Deselected;
-                            rowValues.push(status || '');
-                        }
-                        visibleColumns.forEach(col => {
-                            if (col.dataField) {
-                                rowValues.push(getValue(col, item[col.dataField]));
-                            }
-                        });
-                        csvRows.push(rowValues.join(';'));
+                        // Costruisce i valori della riga corrente
+                        const values = [
+                            // Aggiunge lo stato selezionato/deselezionato se richiesto
+                            ...(exportSelectedFormatColumns
+                                ? [selectedSet.has(originalIndex) ? SDKUI_Localizator.SelectedSingular : SDKUI_Localizator.Deselected]
+                                : []),
+                            // Aggiunge i valori delle colonne applicando l'escape CSV
+                            ...visibleColumns.map(col => escapeCsv(col.dataField ? getValue(col, item[col.dataField]) : ''))
+                        ];
+                        // Aggiunge la riga completa al contenuto CSV
+                        rows.push(values.join(';'));
                     });
-                    const blob = new Blob([csvRows.join('\r\n')], { type: 'text/csv;charset=utf-8;' });
+                    // Crea il file CSV aggiungendo il BOM UTF-8 per la corretta lettura degli accenti in Excel
+                    const blob = new Blob(['\uFEFF', rows.join('\r\n')], { type: 'text/csv;charset=utf-8;' });
+                    // Avvia il download del file generato
                     downloadFile(blob, formatSelected);
-                    result.push({ rowIndex: 1, id1: 1, id2: 0, description: SDKUI_Localizator.OperationSuccess, resultType: ResultTypes.SUCCESS });
+                    // Registra il risultato positivo dell'operazione di esportazione
+                    result.push({
+                        rowIndex: 1,
+                        id1: 1,
+                        id2: 0,
+                        description: SDKUI_Localizator.OperationSuccess,
+                        resultType: ResultTypes.SUCCESS
+                    });
+                    // Termina il caso CSV nello switch
                     break;
                 }
                 case 'xlsx': {

package/lib/components/base/TMModal.js

@@ -101,7 +101,7 @@ const TMModal = ({ resizable = true, expandable = false, isModal = true, title =
             setShowPopup(false);
         onClose && onClose();
     };
-    return (_jsx(_Fragment, { children: isModal ? (_jsx(Popup, { ref: popupRef, showCloseButton: showHeader ? showCloseButton : false, showTitle: showHeader, animation: undefined, minWidth: minWidth, minHeight: minHeight, maxHeight: '95%', maxWidth: '95%', dragEnabled: !isResizing, resizeEnabled: resizable, width: expandable && isFullScreen ? '95%' : initialWidth, height: expandable && isFullScreen ? '95%' : initialHeight, title: title, visible: showPopup, onShown: handleShown, onResizeStart: handleResizeStart, onResizeEnd: handleResizeEnd, onHiding: onHiding, toolbarItems: showHeader && expandable ? [
+    return (_jsx(_Fragment, { children: isModal ? (_jsx(Popup, { ref: popupRef, showCloseButton: showHeader ? showCloseButton : false, showTitle: showHeader, animation: undefined, minWidth: minWidth, minHeight: minHeight, maxHeight: '95%', maxWidth: '95%', dragEnabled: !isResizing && !isFullScreen, resizeEnabled: resizable && !isFullScreen, position: expandable && isFullScreen ? { my: 'center', at: 'center', of: window } : undefined, width: expandable && isFullScreen ? '95%' : initialWidth, height: expandable && isFullScreen ? '95%' : initialHeight, title: title, visible: showPopup, onShown: handleShown, onResizeStart: handleResizeStart, onResizeEnd: handleResizeEnd, onHiding: onHiding, toolbarItems: showHeader && expandable ? [
                 {
                     widget: 'dxButton',
                     location: 'after',

package/lib/components/choosers/TMDynDataListItemChooser.d.ts

@@ -38,5 +38,7 @@ interface ITMDynDataListItemChooserFormProps extends ITMChooserFormProps<DataLis
     layoutMode?: LayoutModes;
     dynDL?: DynamicDataListDescriptor;
     searchResult?: SearchResultDescriptor;
+    /** Se presente, sono i parametri da passare alla query per recuperare il dataSource  */
+    queryParamsDynDataList?: string[];
 }
 export declare const TMDynDataListItemChooserForm: (props: ITMDynDataListItemChooserFormProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/choosers/TMDynDataListItemChooser.js

@@ -122,7 +122,7 @@ const TMDynDataListItemChooser = ({ tid, md, width = '100%', titleForm, openChoo
                         updateIsModalOpen?.(true);
                     }
                 }, elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, openEditorOnSummaryClick: openChooserBySingleClick, label: label, template: renderTemplate(), onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
-                _jsx(TMDynDataListItemChooserForm, { TID: tid, MID: md?.id, dynDL: dynDl, title: titleForm, allowMultipleSelection: allowMultipleSelection, searchResult: dataSource, selectedIDs: values, onClose: () => {
+                _jsx(TMDynDataListItemChooserForm, { TID: tid, MID: md?.id, dynDL: dynDl, title: titleForm, allowMultipleSelection: allowMultipleSelection, searchResult: dataSource, selectedIDs: values, queryParamsDynDataList: queryParamsDynDataList, onClose: () => {
                         setShowChooser(false);
                         updateIsModalOpen?.(false);
                         summaryInputRef.current?.focus();
@@ -167,7 +167,7 @@ const TMDynDataListItemChooser = ({ tid, md, width = '100%', titleForm, openChoo
 export default TMDynDataListItemChooser;
 const cellRenderIcon = () => _jsx(IconDetails, {});
 export const TMDynDataListItemChooserForm = (props) => {
-    const { TID, MID, layoutMode, dynDL, searchResult, selectedIDs, title, width, height, onChoose } = props;
+    const { TID, MID, layoutMode, dynDL, searchResult, selectedIDs, title, width, height, onChoose, queryParamsDynDataList } = props;
     // Generate unique keys for all columns
     const uniqueKeys = generateUniqueColumnKeys(searchResult?.dtdResult?.columns, searchResult?.fromTID);
     const dataColumns = searchResult?.dtdResult?.columns?.map((col, index) => {
@@ -184,12 +184,10 @@ export const TMDynDataListItemChooserForm = (props) => {
     });
     const keyValue = uniqueKeys[dynDL?.selectItemForValue ?? 0] ?? '';
     const getItems = async (refreshCache) => {
-        if (!searchResult)
-            return [];
         if (refreshCache)
             DataListCacheService.RemoveAll();
         TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.DataList} ...` });
-        let result = await SDK_Globals.tmSession?.NewSearchEngine().GetDynDataListValuesAsync(TID, MID, layoutMode, [])
+        let result = await SDK_Globals.tmSession?.NewSearchEngine().GetDynDataListValuesAsync(TID, MID, layoutMode, queryParamsDynDataList ?? [])
             .catch((err) => { TMSpinner.hide(); TMExceptionBoxManager.show({ exception: err }); });
         TMSpinner.hide();
         return result ? searchResultDescriptorToSimpleArray(result) ?? [] : [];
@@ -200,5 +198,5 @@ export const TMDynDataListItemChooserForm = (props) => {
             titleDataList += `: ${title}`;
         return titleDataList;
     };
-    return (_jsx(TMChooserForm, { title: getTitle(), allowMultipleSelection: props.allowMultipleSelection, width: width, height: height, keyName: keyValue ?? '', showDefaultColumns: false, hasShowId: false, columns: dataColumns, selectedIDs: selectedIDs, cellRenderIcon: cellRenderIcon, dataSource: searchResultDescriptorToSimpleArray(searchResult) ?? [], getItems: getItems, onClose: props.onClose, onChoose: (IDs) => onChoose?.(IDs) }));
+    return (_jsx(TMChooserForm, { title: getTitle(), allowMultipleSelection: props.allowMultipleSelection, width: width, height: height, keyName: keyValue ?? '', showDefaultColumns: false, hasShowId: false, columns: dataColumns, selectedIDs: selectedIDs, cellRenderIcon: cellRenderIcon, getItems: getItems, onClose: props.onClose, onChoose: (IDs) => onChoose?.(IDs) }));
 };

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

@@ -1,17 +1,32 @@
 import React from 'react';
-import { ValidationItem } from '@topconsultnpm/sdk-ts';
+import { MetadataFormats, ValidationItem } from '@topconsultnpm/sdk-ts';
 import { IDateBoxOptions } from 'devextreme-react/date-box';
 import { DateDisplayTypes } from '../../helper';
 interface ITMDateBoxProps extends IDateBoxOptions {
+    /** Tipo di picker da mostrare: Date (solo calendario), Time (solo ora), DateTime (entrambi). Determina quali controlli appaiono nel dropdown. */
     dateDisplayType?: DateDisplayTypes;
+    /** Lista di errori/warning di validazione da mostrare sotto il campo */
     validationItems?: ValidationItem[];
+    /** Se true, evidenzia il campo come modificato (bordo e testo colorati) */
     isModifiedWhen?: boolean;
+    /** Se true, serializza la data nel formato ISO 'yyyy-MM-ddTHH:mm:ss' */
     useDateSerializationFormat?: boolean;
+    /** Elemento DOM contenitore per il dropdown del calendario */
     containerElement?: Element;
+    /** Pulsanti aggiuntivi da mostrare nel campo */
     buttons?: any;
+    /** Se true (default), resetta l'ora a 00:00:00 quando si preme un tasto */
     resetTimeToZeroOnKeyPress?: boolean;
+    /** Icona da mostrare a sinistra del campo */
     icon?: any;
+    /** Padding del contenitore esterno */
     padding?: string;
+    /** Cultura/locale per la formattazione (es. 'en-gb', 'it-it'). Usata per tradurre i nomi dei mesi/giorni nella lingua corretta. */
+    formatCulture?: string;
+    /** Formato di visualizzazione della data (es. ShortDate='17/07/2026', LongDate='17 July 2026'). Determina come la data viene rappresentata come stringa nel campo. */
+    metadataFormat?: MetadataFormats;
+    /** Messaggio personalizzato per data non valida. Se non specificato, genera automaticamente un messaggio con esempio del formato (es. 'Formato richiesto: 20/07/2026') */
+    invalidDateMessage?: string;
 }
 declare const TMDateBox: React.FC<ITMDateBoxProps>;
 export default TMDateBox;

package/lib/components/editors/TMDateBox.js

@@ -1,35 +1,103 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useId, useRef } from 'react';
+import { useEffect, useId, useMemo, useRef } from 'react';
 import { DateBox } from 'devextreme-react';
-import { DateDisplayTypes, Globalization } from '../../helper';
+import { MetadataFormats } from '@topconsultnpm/sdk-ts';
+import { DateDisplayTypes, Globalization, SDKUI_Localizator } from '../../helper';
 import { TMColors } from '../../utils/theme';
 import TMVilViewer from '../base/TMVilViewer';
+import { formatDateTimeByMetadataFormat } from '../../helper/TMUtils';
 const TMDateBox = (props) => {
-    const resetTimeToZero = props.resetTimeToZeroOnKeyPress ?? true;
+    const { dateDisplayType, validationItems, isModifiedWhen, useDateSerializationFormat, containerElement, resetTimeToZeroOnKeyPress, icon, padding, formatCulture, metadataFormat, invalidDateMessage, readOnly, showClearButton, disabled, displayFormat, label, type, value, width, onValueChange, onInitialized, onContentReady, placeholder, name, inputAttr } = props;
+    const resetTimeToZero = resetTimeToZeroOnKeyPress ?? true;
     const autoId = useId();
-    const effectiveInputAttr = { id: autoId, ...props.inputAttr };
+    const effectiveInputAttr = { id: autoId, ...inputAttr };
+    // Determina se il formato richiede nomi testuali (mesi/giorni) che dipendono dalla cultura
+    const requiresTextualFormat = useMemo(() => {
+        // Solo i formati con "Long" nella data hanno nomi di mesi/giorni che variano per cultura
+        return metadataFormat === MetadataFormats.LongDate ||
+            metadataFormat === MetadataFormats.LongDateShortTime ||
+            metadataFormat === MetadataFormats.LongDateLongTime;
+    }, [metadataFormat]);
+    // Funzione di formattazione personalizzata per rispettare formatCulture
+    // Usata SOLO per formati con nomi testuali (LongDate, LongDateShortTime, LongDateLongTime) e se formatCulture è specificato
+    const customDisplayFormat = useMemo(() => {
+        // Usa funzione custom solo se c'è formatCulture E il formato richiede nomi testuali
+        if (!formatCulture || !requiresTextualFormat)
+            return undefined;
+        // Restituisce una funzione che DevExtreme userà per formattare la data
+        return (date) => {
+            try {
+                if (!date)
+                    return '';
+                // Assicurati che sia un oggetto Date valido
+                const dateObj = date instanceof Date ? date : new Date(date);
+                if (isNaN(dateObj.getTime()))
+                    return '';
+                return formatDateTimeByMetadataFormat(dateObj, metadataFormat, formatCulture);
+            }
+            catch {
+                // Fallback: restituisce stringa ISO o vuota in caso di errore
+                try {
+                    return date instanceof Date ? date.toISOString() : String(date ?? '');
+                }
+                catch {
+                    return '';
+                }
+            }
+        };
+    }, [formatCulture, metadataFormat, requiresTextualFormat]);
+    // Genera il messaggio di errore con esempio del formato supportato
+    const computedInvalidDateMessage = useMemo(() => {
+        try {
+            if (invalidDateMessage)
+                return invalidDateMessage;
+            // Genera un esempio usando la data corrente
+            const exampleDate = new Date();
+            let exampleFormatted;
+            if (customDisplayFormat) {
+                // Usa la funzione custom se disponibile
+                exampleFormatted = customDisplayFormat(exampleDate);
+            }
+            else if (typeof displayFormat === 'string') {
+                // Usa formatDateTimeByMetadataFormat se abbiamo un formato stringa
+                exampleFormatted = formatDateTimeByMetadataFormat(exampleDate, metadataFormat, formatCulture) || displayFormat;
+            }
+            else {
+                // Fallback: usa il formato di Globalization o localizzazione standard
+                const globFormat = Globalization.getDateDisplayFormat(dateDisplayType);
+                exampleFormatted = typeof globFormat === 'string' ? globFormat : exampleDate.toLocaleDateString(formatCulture || 'it-IT');
+            }
+            if (!exampleFormatted)
+                return SDKUI_Localizator.ValueMustBeDateOrTime;
+            return `${SDKUI_Localizator.RequiredFormat}: ${exampleFormatted}`;
+        }
+        catch {
+            // In caso di errore, usa il messaggio generico tradotto
+            return SDKUI_Localizator.ValueMustBeDateOrTime;
+        }
+    }, [invalidDateMessage, customDisplayFormat, displayFormat, dateDisplayType, metadataFormat, formatCulture]);
     useEffect(() => {
         let htmlElement = dateBoxRef?.current?.instance().element();
         if (!htmlElement)
             return;
-        let borderColor = props.isModifiedWhen ? TMColors.tertiary : TMColors.border_normal;
-        let textColor = props.isModifiedWhen ? TMColors.isModified : TMColors.text_normal;
+        let borderColor = isModifiedWhen ? TMColors.tertiary : TMColors.border_normal;
+        let textColor = isModifiedWhen ? TMColors.isModified : TMColors.text_normal;
         let inputContainer = htmlElement.getElementsByClassName("dx-texteditor-input-container")[0];
         if (inputContainer) {
-            inputContainer.style.background = props.readOnly ? 'linear-gradient(white 20%, #d6d6d6 80%)' : '';
-            inputContainer.style.color = props.readOnly ? '#525252' : textColor;
+            inputContainer.style.background = readOnly ? 'linear-gradient(white 20%, #d6d6d6 80%)' : '';
+            inputContainer.style.color = readOnly ? '#525252' : textColor;
         }
         let input = htmlElement.querySelector(".dx-texteditor-input");
         if (input) {
-            if (!props.readOnly) {
+            if (!readOnly) {
                 input.style.color = textColor;
             }
             input.style.fontSize = 'var(--base-font-size)';
             input.style.fontFamily = 'var(--base-font-family)';
         }
-        let label = htmlElement.getElementsByClassName("dx-label")[0];
-        if (label) {
-            label.style.borderBottomColor = borderColor;
+        let labelEl = htmlElement.getElementsByClassName("dx-label")[0];
+        if (labelEl) {
+            labelEl.style.borderBottomColor = borderColor;
         }
         let labelBefore = htmlElement.getElementsByClassName("dx-label-before")[0];
         if (labelBefore) {
@@ -43,13 +111,13 @@ const TMDateBox = (props) => {
             labelAfter.style.borderTopColor = borderColor;
             labelAfter.style.borderInlineEndColor = borderColor;
         }
-    }, [props.isModifiedWhen, props.readOnly]);
+    }, [isModifiedWhen, readOnly]);
     const dateBoxRef = useRef(null);
     // soluzione tratta da https://supportcenter.devexpress.com/ticket/details/t1025617/setting-default-time-in-datebox
     const dropDownOptions = {
-        container: props.containerElement,
+        container: containerElement,
         onShown: (e) => {
-            if (props.value != undefined)
+            if (value != undefined)
                 return;
             let dateBoxInstance = dateBoxRef.current?.instance();
             const currentDate = new Date();
@@ -59,13 +127,13 @@ const TMDateBox = (props) => {
         }
     };
     const getType = () => {
-        if (props.type != undefined)
-            return props.type;
-        if (!props.dateDisplayType || props.dateDisplayType == DateDisplayTypes.DateTime)
+        if (type != undefined)
+            return type;
+        if (!dateDisplayType || dateDisplayType == DateDisplayTypes.DateTime)
             return "datetime";
-        return props.dateDisplayType == DateDisplayTypes.Date ? "date" : "time";
+        return 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, ...(props.name && { name: props.name }), inputAttr: effectiveInputAttr, onKeyUp: (e) => {
+    return (_jsxs("div", { style: { display: 'flex', alignItems: 'center', width: '100%', padding: padding }, children: [icon && (_jsx("span", { style: { marginRight: '8px', marginTop: '8px', display: 'flex', alignItems: 'center' }, children: icon })), _jsxs("div", { onContextMenu: (e) => e.stopPropagation(), style: { display: 'flex', flexDirection: 'column', gap: '5px', width: '100%' }, children: [_jsx(DateBox, { readOnly: readOnly, ref: dateBoxRef, showClearButton: showClearButton, dateSerializationFormat: useDateSerializationFormat ? 'yyyy-MM-ddTHH:mm:ss' : undefined, disabled: disabled, displayFormat: customDisplayFormat ?? displayFormat ?? Globalization.getDateDisplayFormat(dateDisplayType), dropDownOptions: dropDownOptions, invalidDateMessage: computedInvalidDateMessage, label: label, labelMode: 'static', type: getType(), useMaskBehavior: !customDisplayFormat, height: '28px', value: value, width: width, valueChangeEvent: 'keyup input change', onValueChange: (e) => { onValueChange?.(e); }, onInitialized: (e) => { onInitialized?.(e); }, onContentReady: (e) => { onContentReady?.(e); }, placeholder: placeholder, ...(name && { name: name }), inputAttr: effectiveInputAttr, onKeyUp: (e) => {
                             if (e.event?.code == "Space") {
                                 const currentDate = new Date();
                                 currentDate.setHours(0, 0, 0, 0);
@@ -73,7 +141,7 @@ const TMDateBox = (props) => {
                             }
                         }, onValueChanged: (e) => {
                             if (resetTimeToZero) {
-                                if (props.value != undefined)
+                                if (value != undefined)
                                     return;
                                 if (!e.value)
                                     return;
@@ -81,6 +149,6 @@ const TMDateBox = (props) => {
                                 currentDate.setHours(0, 0, 0, 0);
                                 e.component.option("value", currentDate.toISOString());
                             }
-                        } }), _jsx(TMVilViewer, { vil: props.validationItems })] })] }));
+                        } }), _jsx(TMVilViewer, { vil: validationItems })] })] }));
 };
 export default TMDateBox;

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

@@ -1,9 +1,13 @@
 import React from 'react';
-import { ValidationItem, LayoutModes, QueryOperators } from '@topconsultnpm/sdk-ts';
+import { MetadataDescriptor, ValidationItem, LayoutModes, QueryOperators } from '@topconsultnpm/sdk-ts';
 import { DynDataListsToBeRefreshed, MIDsToBeUpdated } from '../choosers/TMDynDataListItemChooser';
 interface ITMMetadataEditorProps {
     tid: number | undefined;
     mid?: number;
+    /** MetadataDescriptor esplicito. Se valorizzato, l'editor lo usa direttamente
+     *  e salta la risoluzione interna via tid/mid (utile per metadati non legati
+     *  a un tipo documento, es. copertina CaseFlow). */
+    md?: MetadataDescriptor;
     value: string | undefined;
     queryParamsDynDataList?: string[];
     autoFocus?: boolean;