@topconsultnpm/sdkui-react 6.22.0-dev2.7 → 6.22.0-t1

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

@@ -3,17 +3,6 @@ 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;
@@ -28,8 +17,6 @@ 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,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, forwardRef, useRef, useEffect } from 'react';
-import { createPortal } from 'react-dom';
+import { useState, forwardRef } from 'react';
 import styled from 'styled-components';
-import { getColor, IconChevronDown } from '../../helper';
+import { getColor } from '../../helper';
 import { FontSize, TMColors } from '../../utils/theme';
 import TMTooltip from './TMTooltip';
 const StyledNormalButton = styled.button.withConfig({ shouldForwardProp: prop => !['text'].includes(prop) }) `
@@ -150,132 +149,10 @@ 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 = () => { }, secondaryActions } = 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 = () => { } } = 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 }));
@@ -287,7 +164,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, "$reserveArrow": hasSecondaryActions, 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, 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 }));
@@ -298,15 +175,6 @@ 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 })] }));
     };
-    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 }));
+    return (_jsx("div", { style: elementStyle, children: showTooltip ? _jsx(TMTooltip, { hideAfterDelay: true, content: renderTooltip(), children: renderedButton() }) : renderedButton() }));
 });
 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, findDataColumnByField, formatValueForExport, getExceptionMessage, SDKUI_Localizator } from '../../helper';
+import { buildValueToLabelMapFromDataColumns, getExceptionMessage, SDKUI_Localizator } from '../../helper';
 import TMCheckBox from '../editors/TMCheckBox';
 import TMButton from './TMButton';
 import TMModal from './TMModal';
@@ -96,52 +96,43 @@ 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();
+                    }
                 }
-                // Find column and format value
-                const dataCol = findDataColumnByField(columns, col.dataField, col.caption);
-                return formatValueForExport(result, dataCol, col.dataType);
+                // Return the cleaned string value, stripping double quotes to avoid CSV formatting issues
+                return (result ?? '').toString().replace(/"/g, '');
             };
             switch (formatSelected) {
                 case 'csv': {
-                    // 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
+                    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(';'));
                     rowsToExport.forEach((item, idx) => {
-                        // Recupera l'indice originale della riga per verificare la selezione
                         const originalIndex = exportSelectedOnly ? selectedRowKeys[idx] : dataSource.indexOf(item);
-                        // 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 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(';'));
                     });
-                    // 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
+                    const blob = new Blob([csvRows.join('\r\n')], { type: 'text/csv;charset=utf-8;' });
                     downloadFile(blob, formatSelected);
-                    // 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
+                    result.push({ rowIndex: 1, id1: 1, id2: 0, description: SDKUI_Localizator.OperationSuccess, resultType: ResultTypes.SUCCESS });
                     break;
                 }
                 case 'xlsx': {

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

@@ -1,32 +1,17 @@
 import React from 'react';
-import { MetadataFormats, ValidationItem } from '@topconsultnpm/sdk-ts';
+import { 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,103 +1,35 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useId, useMemo, useRef } from 'react';
+import { useEffect, useId, useRef } from 'react';
 import { DateBox } from 'devextreme-react';
-import { MetadataFormats } from '@topconsultnpm/sdk-ts';
-import { DateDisplayTypes, Globalization, SDKUI_Localizator } from '../../helper';
+import { DateDisplayTypes, Globalization } from '../../helper';
 import { TMColors } from '../../utils/theme';
 import TMVilViewer from '../base/TMVilViewer';
-import { formatDateTimeByMetadataFormat } from '../../helper/TMUtils';
 const TMDateBox = (props) => {
-    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 resetTimeToZero = props.resetTimeToZeroOnKeyPress ?? true;
     const autoId = useId();
-    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]);
+    const effectiveInputAttr = { id: autoId, ...props.inputAttr };
     useEffect(() => {
         let htmlElement = dateBoxRef?.current?.instance().element();
         if (!htmlElement)
             return;
-        let borderColor = isModifiedWhen ? TMColors.tertiary : TMColors.border_normal;
-        let textColor = isModifiedWhen ? TMColors.isModified : TMColors.text_normal;
+        let borderColor = props.isModifiedWhen ? TMColors.tertiary : TMColors.border_normal;
+        let textColor = props.isModifiedWhen ? TMColors.isModified : TMColors.text_normal;
         let inputContainer = htmlElement.getElementsByClassName("dx-texteditor-input-container")[0];
         if (inputContainer) {
-            inputContainer.style.background = readOnly ? 'linear-gradient(white 20%, #d6d6d6 80%)' : '';
-            inputContainer.style.color = readOnly ? '#525252' : textColor;
+            inputContainer.style.background = props.readOnly ? 'linear-gradient(white 20%, #d6d6d6 80%)' : '';
+            inputContainer.style.color = props.readOnly ? '#525252' : textColor;
         }
         let input = htmlElement.querySelector(".dx-texteditor-input");
         if (input) {
-            if (!readOnly) {
+            if (!props.readOnly) {
                 input.style.color = textColor;
             }
             input.style.fontSize = 'var(--base-font-size)';
             input.style.fontFamily = 'var(--base-font-family)';
         }
-        let labelEl = htmlElement.getElementsByClassName("dx-label")[0];
-        if (labelEl) {
-            labelEl.style.borderBottomColor = borderColor;
+        let label = htmlElement.getElementsByClassName("dx-label")[0];
+        if (label) {
+            label.style.borderBottomColor = borderColor;
         }
         let labelBefore = htmlElement.getElementsByClassName("dx-label-before")[0];
         if (labelBefore) {
@@ -111,13 +43,13 @@ const TMDateBox = (props) => {
             labelAfter.style.borderTopColor = borderColor;
             labelAfter.style.borderInlineEndColor = borderColor;
         }
-    }, [isModifiedWhen, readOnly]);
+    }, [props.isModifiedWhen, props.readOnly]);
     const dateBoxRef = useRef(null);
     // soluzione tratta da https://supportcenter.devexpress.com/ticket/details/t1025617/setting-default-time-in-datebox
     const dropDownOptions = {
-        container: containerElement,
+        container: props.containerElement,
         onShown: (e) => {
-            if (value != undefined)
+            if (props.value != undefined)
                 return;
             let dateBoxInstance = dateBoxRef.current?.instance();
             const currentDate = new Date();
@@ -127,13 +59,13 @@ const TMDateBox = (props) => {
         }
     };
     const getType = () => {
-        if (type != undefined)
-            return type;
-        if (!dateDisplayType || dateDisplayType == DateDisplayTypes.DateTime)
+        if (props.type != undefined)
+            return props.type;
+        if (!props.dateDisplayType || props.dateDisplayType == DateDisplayTypes.DateTime)
             return "datetime";
-        return dateDisplayType == DateDisplayTypes.Date ? "date" : "time";
+        return props.dateDisplayType == DateDisplayTypes.Date ? "date" : "time";
     };
-    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) => {
+    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);
@@ -141,7 +73,7 @@ const TMDateBox = (props) => {
                             }
                         }, onValueChanged: (e) => {
                             if (resetTimeToZero) {
-                                if (value != undefined)
+                                if (props.value != undefined)
                                     return;
                                 if (!e.value)
                                     return;
@@ -149,6 +81,6 @@ const TMDateBox = (props) => {
                                 currentDate.setHours(0, 0, 0, 0);
                                 e.component.option("value", currentDate.toISOString());
                             }
-                        } }), _jsx(TMVilViewer, { vil: validationItems })] })] }));
+                        } }), _jsx(TMVilViewer, { vil: props.validationItems })] })] }));
 };
 export default TMDateBox;

package/lib/components/editors/TMMetadataEditor.js

@@ -10,10 +10,21 @@ import TMTextBox from './TMTextBox';
 import { TMMetadataIcon } from '../viewers/TMMidViewer';
 import TMTextArea from './TMTextArea';
 import { DateDisplayTypes } from '../../helper/Globalization';
-import { getCurrencySymbol, getDevExtremeDateDisplayFormat } from '../../helper/TMUtils';
 const renderMetadataIcon = (tid, md, layoutMode, isMetadataSelected, showLabel) => {
     return (_jsx(TMMetadataIcon, { isMetadataSelected: isMetadataSelected, layoutMode: layoutMode, md: md, tid: tid, elementStyle: showLabel ? { position: 'relative', top: '4px' } : undefined }));
 };
+const getDateDisplayFormat = (format) => {
+    format = format ?? MetadataFormats.None;
+    switch (format) {
+        case MetadataFormats.LongTime: return "longTime";
+        case MetadataFormats.ShortTime: return "shortTime";
+        case MetadataFormats.ShortDateLongTime:
+        case MetadataFormats.ShortDateShortTime:
+        case MetadataFormats.LongDateLongTime:
+        case MetadataFormats.LongDateShortTime: return "shortDateShortTime";
+        default: return "shortDate";
+    }
+};
 const getDateDisplayType = (format) => {
     format = format ?? MetadataFormats.None;
     switch (format) {
@@ -26,13 +37,6 @@ const getDateDisplayType = (format) => {
         default: return DateDisplayTypes.Date;
     }
 };
-const getTextTransform = (format) => {
-    switch (format) {
-        case MetadataFormats.LowerCase: return 'lowercase';
-        case MetadataFormats.UpperCase: return 'uppercase';
-        default: return undefined;
-    }
-};
 const TMMetadataEditor = ({ isSelected = false, customLabel, isReadOnly, isLexProt, layoutMode, queryOperator, isEditable, isModifiedWhen = false, tid, mid, value, queryParamsDynDataList, containerElement, autoFocus, validationItems = [], disabled = false, openChooserBySingleClick = true, onValueChanged, onValueChange, onCascadeRefreshDynDataLists, onCascadeUpdateMIDs, updateIsModalOpen }) => {
     const [md, setMd] = useState();
     useEffect(() => {
@@ -100,26 +104,23 @@ const TMMetadataEditor = ({ isSelected = false, customLabel, isReadOnly, isLexPr
                 else
                     onValueChanged?.(IDs.join(","));
             }, updateIsModalOpen: updateIsModalOpen });
-    if (showAsText) {
-        return _jsx(TMTextBox, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', isModifiedWhen: isModifiedWhenInternal(), readOnly: isReadOnlyResult, label: (modulesWithLabelTop || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, icon: showLabelTop ? icon : undefined, validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, type: 'text', showClearButton: !isReadOnlyResult, maxLength: maxLength, autoFocus: autoFocus, value: value ?? '', textTransform: getTextTransform(md?.format?.format), onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) });
-    }
-    if (showAsNumber) {
-        return _jsx(TMTextBox, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', isModifiedWhen: isModifiedWhenInternal(), readOnly: isReadOnlyResult, label: (modulesWithLabelTop || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, icon: showLabelTop ? icon : undefined, validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, type: 'number', showClearButton: !isReadOnlyResult, precision: md?.length, scale: md?.scale, autoFocus: autoFocus, value: value ?? '', currencySymbol: getCurrencySymbol(md?.format?.format), onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) });
-    }
+    if (showAsText)
+        return _jsx(TMTextBox, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', isModifiedWhen: isModifiedWhenInternal(), readOnly: isReadOnlyResult, label: (modulesWithLabelTop || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, icon: showLabelTop ? icon : undefined, validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, type: 'text', showClearButton: !isReadOnlyResult, maxLength: maxLength, autoFocus: autoFocus, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) });
+    if (showAsNumber)
+        return _jsx(TMTextBox, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', isModifiedWhen: isModifiedWhenInternal(), readOnly: isReadOnlyResult, label: (modulesWithLabelTop || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, icon: showLabelTop ? icon : undefined, validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, type: 'number', showClearButton: !isReadOnlyResult, precision: md?.length, scale: md?.scale, autoFocus: autoFocus, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) });
     switch (md?.dataType) {
         case MetadataDataTypes.DateTime:
-            return _jsx(TMDateBox, { placeholder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', dateDisplayType: getDateDisplayType(md.format?.format), displayFormat: getDevExtremeDateDisplayFormat(md.format?.format, md.format?.formatCulture), formatCulture: md.format?.formatCulture, metadataFormat: md.format?.format, isModifiedWhen: isModifiedWhenInternal(), readOnly: isReadOnlyResult, icon: showLabelTop ? icon : undefined, label: (modulesWithLabelTop || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, validationItems: validationItems, disabled: disabled, width: '100%', value: value, showClearButton: !isReadOnlyResult, useDateSerializationFormat: true, containerElement: containerElement, onValueChange: (newValue) => {
+            return _jsx(TMDateBox, { placeholder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', dateDisplayType: getDateDisplayType(md.format?.format), displayFormat: getDateDisplayFormat(md.format?.format), isModifiedWhen: isModifiedWhenInternal(), readOnly: isReadOnlyResult, icon: showLabelTop ? icon : undefined, label: (modulesWithLabelTop || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, validationItems: validationItems, disabled: disabled, width: '100%', value: value, showClearButton: !isReadOnlyResult, useDateSerializationFormat: true, containerElement: containerElement, onValueChange: (newValue) => {
                     onValueChange?.(newValue ? newValue.toString() : undefined);
                     onValueChanged?.(newValue ? newValue.toString() : undefined);
                 } });
-        case MetadataDataTypes.Number:
-            return _jsx(TMTextBox, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', isModifiedWhen: isModifiedWhenInternal(), readOnly: isReadOnlyResult, label: (modulesWithLabelTop || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, icon: showLabelTop ? icon : undefined, validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, type: 'number', showClearButton: !isReadOnlyResult, precision: md?.length, scale: md?.scale, autoFocus: autoFocus, value: value ?? '', currencySymbol: getCurrencySymbol(md?.format?.format), onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) });
+        case MetadataDataTypes.Number: return _jsx(TMTextBox, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', isModifiedWhen: isModifiedWhenInternal(), readOnly: isReadOnlyResult, label: (modulesWithLabelTop || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, icon: showLabelTop ? icon : undefined, validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, type: 'number', showClearButton: !isReadOnlyResult, precision: md?.length, scale: md?.scale, autoFocus: autoFocus, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) });
         default:
             if (showByTextarea) {
-                return _jsx(TMTextArea, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', rows: 1, readOnly: isReadOnlyResult, label: (modulesWithLabelTop || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, icon: showLabelTop ? icon : undefined, isModifiedWhen: isModifiedWhenInternal(), validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, showClearButton: !isReadOnlyResult, autoFocus: autoFocus, maxLength: maxLength, value: value ?? '', textTransform: getTextTransform(md?.format?.format), onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => { onValueChanged?.(newValue); }, resize: false });
+                return _jsx(TMTextArea, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', rows: 1, readOnly: isReadOnlyResult, label: (modulesWithLabelTop || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, icon: showLabelTop ? icon : undefined, isModifiedWhen: isModifiedWhenInternal(), validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, showClearButton: !isReadOnlyResult, autoFocus: autoFocus, maxLength: maxLength, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => { onValueChanged?.(newValue); }, resize: false });
             }
             else {
-                return _jsx(TMTextBox, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', isModifiedWhen: isModifiedWhenInternal(), readOnly: isReadOnlyResult, label: (modulesWithLabelTop || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, icon: showLabelTop ? icon : undefined, disabled: disabled, validationItems: validationItems, type: 'text', elementStyle: { width: '100%' }, showClearButton: !isReadOnlyResult, autoFocus: autoFocus, maxLength: maxLength, value: value ?? '', textTransform: getTextTransform(md?.format?.format), onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => { onValueChanged?.(newValue); } });
+                return _jsx(TMTextBox, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', isModifiedWhen: isModifiedWhenInternal(), readOnly: isReadOnlyResult, label: (modulesWithLabelTop || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, icon: showLabelTop ? icon : undefined, disabled: disabled, validationItems: validationItems, type: 'text', elementStyle: { width: '100%' }, showClearButton: !isReadOnlyResult, autoFocus: autoFocus, maxLength: maxLength, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => { onValueChanged?.(newValue); } });
             }
     }
 };

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

@@ -16,7 +16,6 @@ interface ITMTextArea extends ITMEditorBase {
     fillHeight?: boolean;
     name?: string;
     id?: string;
-    textTransform?: 'lowercase' | 'uppercase';
 }
 declare const TMTextArea: React.FunctionComponent<ITMTextArea>;
 export default TMTextArea;