@topconsultnpm/sdkui-react 6.22.0-dev1.9 → 6.22.0-dev2.3

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.js

@@ -10,21 +10,10 @@ 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) {
@@ -37,6 +26,13 @@ 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(() => {
@@ -104,23 +100,26 @@ 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 ?? '', 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) });
+    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) });
+    }
     switch (md?.dataType) {
         case MetadataDataTypes.DateTime:
-            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) => {
+            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) => {
                     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 ?? '', 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 ?? '', currencySymbol: getCurrencySymbol(md?.format?.format), 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 ?? '', 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 ?? '', textTransform: getTextTransform(md?.format?.format), 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 ?? '', 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 ?? '', textTransform: getTextTransform(md?.format?.format), onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => { onValueChanged?.(newValue); } });
             }
     }
 };

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

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

package/lib/components/editors/TMTextArea.js

@@ -28,7 +28,7 @@ const StyledTextAreaEditorButton = styled.div `
 // Define the TMTextArea component
 const TMTextArea = (props) => {
     // Extract properties from the props object
-    const { label = '', value = '', width = '100%', height = 'auto', autoFocus = false, showClearButton, validationItems = [], disabled = false, isModifiedWhen = false, fontSize = FontSize.defaultFontSize, elementStyle = {}, icon = null, labelPosition = 'left', readOnly = false, onValueChanged, onBlur, placeHolder, formulaItems = [], buttons = [], maxHeight = 'auto', rows, maxLength, resize = true, autoCalculateRows = true, fillHeight = false, name, id } = props;
+    const { label = '', value = '', width = '100%', height = 'auto', autoFocus = false, showClearButton, validationItems = [], disabled = false, isModifiedWhen = false, fontSize = FontSize.defaultFontSize, elementStyle = {}, icon = null, labelPosition = 'left', readOnly = false, onValueChanged, onBlur, placeHolder, formulaItems = [], buttons = [], maxHeight = 'auto', rows, maxLength, resize = true, autoCalculateRows = true, fillHeight = false, name, id, textTransform } = props;
     // Generate a unique id if not provided
     const autoId = useId();
     const effectiveId = id ?? autoId;
@@ -151,20 +151,28 @@ const TMTextArea = (props) => {
     };
     // Renders the textarea
     const renderTextArea = () => {
-        const textareaElement = _jsxs(_Fragment, { children: [_jsx(StyledTextareaEditor, { ref: inputRef, id: effectiveId, ...(name && { name }), autoFocus: autoFocus, readOnly: readOnly, disabled: disabled, value: currentValue, placeholder: placeHolder, rows: fillHeight ? undefined : calculatedRows, maxLength: maxLength, spellCheck: false, onFocus: () => setIsFocused(true), onBlur: (e) => { setIsFocused(false); if (currentValue != value)
-                        onBlur?.(currentValue); }, onChange: (e) => { setCurrentValue(e.target.value); onValueChanged?.(e); }, "$isMobile": deviceType === DeviceType.MOBILE, "$maxHeight": maxHeight, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, "$fontSize": fontSize, "$width": width, "$resize": resize, style: fillHeight ? { flex: 1, height: 0 } : undefined }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', position: 'absolute', right: '6px', top: calculatedRows === 1 ? (label.length > 0 ? '20px' : '7px') : (label.length > 0 ? '22px' : '7px'), pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? 0.4 : 1 }, children: [formulaItems.length > 0 &&
-                            _jsx(StyledTextAreaEditorButton, { onClick: () => {
-                                    setShowFormulaItemsChooser(true);
-                                }, children: _jsx(IconDataList, {}) }), showClearButton && currentValue &&
-                            _jsx(StyledTextAreaEditorButton, { onClick: () => {
-                                    onValueChanged?.({ target: { value: undefined } });
-                                    setCurrentValue('');
-                                    if (autoCalculateRows)
-                                        setCalculatedRows(1);
-                                    onBlur?.(undefined);
-                                }, children: _jsx(IconClearButton, {}) }), buttons.map((buttonItem, index) => {
-                            return (_jsx(StyledTextAreaEditorButton, { onClick: buttonItem.onClick, children: _jsx(TMTooltip, { content: buttonItem.text, children: buttonItem.icon }) }, buttonItem.text));
-                        })] }), openFormulaItemsChooser(), _jsx(TMVilViewer, { vil: validationItems })] });
+        const textareaElement = _jsxs(_Fragment, { children: [_jsxs("div", { style: { position: 'relative', ...(fillHeight ? { flex: 1, display: 'flex', flexDirection: 'column' } : {}) }, children: [_jsx(StyledTextareaEditor, { ref: inputRef, id: effectiveId, ...(name && { name }), autoFocus: autoFocus, readOnly: readOnly, disabled: disabled, value: currentValue, placeholder: placeHolder, rows: fillHeight ? undefined : calculatedRows, maxLength: maxLength, spellCheck: false, onFocus: () => setIsFocused(true), onBlur: (e) => { setIsFocused(false); if (currentValue != value)
+                                onBlur?.(currentValue); }, onChange: (e) => {
+                                let newValue = e.target.value;
+                                if (textTransform === 'lowercase')
+                                    newValue = newValue.toLowerCase();
+                                else if (textTransform === 'uppercase')
+                                    newValue = newValue.toUpperCase();
+                                setCurrentValue(newValue);
+                                onValueChanged?.({ ...e, target: { ...e.target, value: newValue } });
+                            }, "$isMobile": deviceType === DeviceType.MOBILE, "$maxHeight": maxHeight, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, "$fontSize": fontSize, "$width": width, "$resize": resize, style: fillHeight ? { flex: 1, height: 0 } : undefined }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', position: 'absolute', right: '6px', top: '50%', transform: 'translateY(-50%)', pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? 0.4 : 1 }, children: [formulaItems.length > 0 &&
+                                    _jsx(StyledTextAreaEditorButton, { onClick: () => {
+                                            setShowFormulaItemsChooser(true);
+                                        }, children: _jsx(IconDataList, {}) }), showClearButton && currentValue &&
+                                    _jsx(StyledTextAreaEditorButton, { onClick: () => {
+                                            onValueChanged?.({ target: { value: undefined } });
+                                            setCurrentValue('');
+                                            if (autoCalculateRows)
+                                                setCalculatedRows(1);
+                                            onBlur?.(undefined);
+                                        }, children: _jsx(IconClearButton, {}) }), buttons.map((buttonItem, index) => {
+                                    return (_jsx(StyledTextAreaEditorButton, { onClick: buttonItem.onClick, children: _jsx(TMTooltip, { content: buttonItem.text, children: buttonItem.icon }) }, buttonItem.text));
+                                })] })] }), openFormulaItemsChooser(), _jsx(TMVilViewer, { vil: validationItems })] });
         // Wrap with context menu if formula items exist
         if (formulaItems.length > 0) {
             return (_jsx(TMContextMenu, { items: getFormulaMenuItems(), trigger: "right", children: textareaElement }));

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

@@ -14,6 +14,8 @@ export interface ITMTextBox extends ITMEditorBase {
     value?: string | number;
     fromModal?: boolean;
     allowedPattern?: RegExp;
+    textTransform?: 'lowercase' | 'uppercase';
+    currencySymbol?: string;
     onClick?: () => void;
     onValueChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     onBlur?: (value: string | undefined) => void;