@topconsultnpm/sdkui-react 6.19.0-dev1.10

package/lib/components/editors/TMSummary.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, useImperativeHandle } from 'react';
+import styled from 'styled-components';
+import { FontSize, TMColors } from '../../utils/theme';
+import { StyledEditorContainer, StyledEditorIcon, StyledEditorLabel, TMEditorsDefaultBorderRadius, editorColorManager } from './TMEditorStyled';
+import { IconClearButton, IconPencil, SDKUI_Localizator } from '../../helper';
+import TMLayoutContainer, { TMLayoutItem } from '../base/TMLayout';
+import TMVilViewer from '../base/TMVilViewer';
+import TMTooltip from '../base/TMTooltip';
+const StyledSummaryTemplateInput = styled.div `
+    width: ${props => props.$width};
+    height: ${props => props.$height};
+    padding: ${props => !props.$showBorder ? '4px 5px' : '5px 5px 5px 13px'};
+    border: ${props => !props.$showBorder ? '' : '1px solid'};
+    background: ${props => props.$readOnly ? 'linear-gradient(white 20%, #d6d6d6 80%)' : props.$backgroundColor};
+    border-color: ${props => props.$isModified ? TMColors.isModified : TMColors.border_normal};
+    border-bottom: ${props => !props.$showBorder ? '' : (props.$vil.length > 0) ? '3px solid' : '1px solid'} ;
+    border-bottom-color: ${props => (props.$vil.length === 0) ? !props.$isModified ? TMColors.border_normal : TMColors.isModified : editorColorManager(props.$vil)};
+    color: ${props => props.$readOnly ? '#525252' : !props.$disabled ? (props.$vil.length === 0) ? !props.$isModified ? 'black' : TMColors.isModified : editorColorManager(props.$vil) : TMColors.disabled};
+    border-radius: ${props => !props.$showBorder ? props.$borderRadius : TMEditorsDefaultBorderRadius};
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+
+    &:focus{
+        outline: none;
+        background-image: ${props => !props.$showBorder ? '' : 'linear-gradient(white, #E4E9F7)'};
+        border: ${props => !props.$showBorder ? '' : props.$isModified ? `1px solid ${TMColors.isModified}` : '1px solid rgb(180,180,180)'};
+        border-bottom:  ${props => !props.$showBorder ? '' : '2px solid'};
+        border-bottom-color: ${props => !props.$showBorder ? '' : (props.$vil.length === 0) ? !props.$isModified ? TMColors.primary : TMColors.isModified : editorColorManager(props.$vil)};
+    }
+    font-size: ${props => props.$fontSize};
+    &::placeholder {
+        /* color: ${props => (props.$vil.length === 0) ? 'gray' : editorColorManager(props.$vil)}; */
+        font-size: ${props => props.$fontSize};
+    }
+`;
+const StyledEditorButtonIcon2 = styled.div `
+    color: ${TMColors.button_icon};
+    display: flex;
+    align-items: center;
+    position: relative;
+    cursor: pointer;
+    &:focus{
+        outline: none;
+        background-image: linear-gradient(white, #E4E9F7);
+        border-bottom: 2px solid;
+        border-bottom-color: ${TMColors.primary};
+     }
+`;
+const TMSummary = forwardRef(({ placeHolder, readOnly, labelColor, hasValue, borderRadius = '4px', validationItems = [], buttons = [], label = '', onClearClick, openEditorOnSummaryClick = true, onEditorClick, backgroundColor = 'transparent', showBorder = true, isModifiedWhen, elementStyle, width = '100%', height = '100%', fontSize = FontSize.defaultFontSize, icon, showEditButton = true, showClearButton, iconEditButton, iconeEditTooltip, labelPosition = 'left', template, disabled = false, onValueChanged }, ref) => {
+    const summaryElementRef = useRef(null); // Ref all'elemento DOM div principale
+    // Espone il metodo focus() tramite useImperativeHandle
+    useImperativeHandle(ref, () => ({
+        focus: () => {
+            summaryElementRef.current?.focus();
+        },
+    }));
+    const handleClearClick = (e) => {
+        e.stopPropagation(); // Evita che il click sul bottone di clear propaghi all'onClick del div
+        onClearClick?.();
+    };
+    const renderTemplateField = () => {
+        return (_jsxs(StyledSummaryTemplateInput, { ref: summaryElementRef, "$readOnly": readOnly, tabIndex: 0, "$backgroundColor": backgroundColor, "$borderRadius": borderRadius, "$isModified": isModifiedWhen, "$vil": validationItems, "$disabled": disabled, "$showBorder": showBorder, "$fontSize": fontSize, "$width": width, "$height": height, onChange: onValueChanged, children: [_jsx("div", { onClick: () => { if (openEditorOnSummaryClick && !disabled)
+                        onEditorClick?.(); }, onDoubleClick: () => { if (!openEditorOnSummaryClick && !disabled)
+                        onEditorClick?.(); }, style: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        justifyContent: 'space-between',
+                        userSelect: 'text',
+                        alignItems: 'center',
+                        width: showBorder ? '5px' : '100%',
+                        minHeight: '16px',
+                        cursor: (openEditorOnSummaryClick && !readOnly) ? 'pointer' : 'default',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                        flexGrow: 1,
+                        marginRight: '5px' // Spazio per i bottoni
+                    }, children: template }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: '3px', justifyContent: 'flex-start', alignItems: 'center', pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? 0.4 : 1 }, children: [showClearButton && hasValue && _jsx(StyledEditorButtonIcon2, { tabIndex: disabled ? -1 : 0, onKeyDown: (e) => e.code === 'Space' && onClearClick?.(), onClick: handleClearClick, children: _jsx(TMTooltip, { content: SDKUI_Localizator.Clear, children: _jsx(IconClearButton, {}) }) }), showEditButton && _jsx(StyledEditorButtonIcon2, { tabIndex: disabled ? -1 : 0, onKeyDown: (e) => e.code === 'Space' && onEditorClick?.(), onClick: onEditorClick, children: _jsx(TMTooltip, { content: iconeEditTooltip ?? SDKUI_Localizator.Update, children: iconEditButton ?? _jsx(IconPencil, {}) }) }), buttons.map((buttonItem) => {
+                            return (_jsx(StyledEditorButtonIcon2, { onClick: buttonItem.onClick, children: _jsx(TMTooltip, { content: buttonItem.text, children: buttonItem.icon }) }, buttonItem.text));
+                        })] })] }));
+    };
+    const renderLabel = () => {
+        return (_jsx(StyledEditorLabel, { "$color": labelColor, "$isFocused": false, "$labelPosition": labelPosition, "$disabled": disabled, children: _jsx("div", { style: { flexDirection: "row", display: "flex", alignItems: "start", justifyContent: "start" }, children: label }) }));
+    };
+    const renderSummary = () => {
+        return (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: icon && _jsx(StyledEditorIcon, { "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { "$width": width, children: [label && renderLabel(), renderTemplateField(), _jsx(TMVilViewer, { vil: validationItems })] }) })] }));
+    };
+    return (_jsx("div", { style: elementStyle, children: renderSummary() }));
+});
+export default TMSummary;

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

@@ -0,0 +1,17 @@
+import React, { ChangeEvent } from 'react';
+import { ITMEditorBase, TMEditorButtonData } from '../base/TMEditorBase';
+interface ITMTextArea extends ITMEditorBase {
+    value: string;
+    onValueChanged: ((e: ChangeEvent<HTMLTextAreaElement>) => void) | undefined;
+    formulaItems?: Array<string>;
+    buttons?: Array<TMEditorButtonData>;
+    onBlur?: (value: string | undefined) => void;
+    autoFocus?: boolean;
+    maxValue?: number;
+    maxHeight?: string;
+    rows?: number;
+    maxLength?: number;
+    resize?: boolean;
+}
+declare const TMTextArea: React.FunctionComponent<ITMTextArea>;
+export default TMTextArea;

package/lib/components/editors/TMTextArea.js

@@ -0,0 +1,155 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import { StyledEditorContainer, StyledEditorIcon, StyledEditorLabel, StyledTextareaEditor } from './TMEditorStyled';
+import { FontSize, TMColors } from '../../utils/theme';
+import TMContextMenu, { useContextMenu } from '../base/TMContextMenuOLD';
+import { TMExceptionBoxManager } from '../base/TMPopUp';
+import TMLayoutContainer, { TMLayoutItem } from '../base/TMLayout';
+import TMVilViewer from '../base/TMVilViewer';
+import TMTooltip from '../base/TMTooltip';
+import { DeviceType, useDeviceType } from '../base/TMDeviceProvider';
+import { IconClearButton } from '../../helper';
+import styled from 'styled-components';
+const StyledTextAreaEditorButton = styled.div `
+    color: ${TMColors.button_icon};
+    display: flex;
+    align-items: center;
+    position: relative;
+    cursor: pointer;
+    &:focus{
+        outline: none;
+        background-image: linear-gradient(white, #E4E9F7);
+        border-bottom: 2px solid;
+        border-bottom-color: ${TMColors.primary};
+     }
+`;
+// 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 } = props;
+    // Reference to the textarea DOM element
+    const inputRef = useRef(null);
+    // Stores the textarea is focused
+    const [isFocused, setIsFocused] = useState(false);
+    // Stores the current value of the textarea
+    const [currentValue, setCurrentValue] = useState(value);
+    // Stores the items for the context menu
+    const [formulaMenuItems, setFormulaMenuItems] = useState([]);
+    // Stores the calculated number of rows for the textarea
+    const [calculatedRows, setCalculatedRows] = useState(rows ?? 1);
+    // Manages the state for the custom context menu
+    const { clicked, setClicked, points, setPoints } = useContextMenu();
+    const deviceType = useDeviceType();
+    // Attach a `ResizeObserver` to the textarea to monitor changes in width: dynamically updates rows based on textarea content and width
+    useEffect(() => {
+        const observer = new ResizeObserver(() => { if (currentValue) {
+            updateRows();
+        } });
+        if (inputRef.current) {
+            observer.observe(inputRef.current);
+        }
+        return () => { if (inputRef.current) {
+            observer.unobserve(inputRef.current);
+        } };
+    }, [currentValue]);
+    // Update current value whenever the `value` prop changes, synchronize the internal state with the `value` prop
+    useEffect(() => {
+        setCurrentValue(value);
+    }, [value]);
+    // Recalculate the number of rows whenever the `currentValue` changes
+    useEffect(() => {
+        if (currentValue) {
+            const newRowCount = calculateRows(currentValue);
+            setCalculatedRows(newRowCount);
+        }
+    }, [currentValue]);
+    // Populate the formula menu items whenever the `formulaItems` prop changes
+    useEffect(() => {
+        if (formulaItems && formulaItems.length > 0) {
+            let menuItems = [];
+            for (const formula of formulaItems) {
+                menuItems.push({ text: formula });
+            }
+            setFormulaMenuItems(menuItems);
+        }
+    }, [formulaItems]);
+    // Adjust the rows dynamically
+    const updateRows = () => {
+        const newRowCount = calculateRows(currentValue);
+        setCalculatedRows(newRowCount);
+    };
+    // Calculate the number of rows required to display the content
+    const calculateRows = (content) => {
+        if (content === undefined || content.length === 0)
+            return 1;
+        if (!inputRef.current)
+            return rows ?? 1;
+        const textareaWidth = inputRef.current.offsetWidth;
+        const charWidth = 8;
+        const maxCharsPerLine = Math.floor(textareaWidth / charWidth);
+        // Split content into lines by line breaks (`\n`)
+        const lines = content.split('\n');
+        // Calculate total rows by considering lines and their character lengths
+        let totalRows = 0;
+        lines.forEach(line => {
+            // Every line, regardless of length, contributes at least one row
+            totalRows += Math.ceil(line.length / maxCharsPerLine);
+        });
+        // If the last line is empty, it should still count as a row
+        // This handles cases where you press "Enter" at the end (i.e., the last line is empty)
+        if (content.endsWith('\n')) {
+            totalRows += 1;
+        }
+        // Return the number of rows, limiting to a maximum of 10
+        return Math.min(totalRows, 10);
+    };
+    // Inserts text at the cursor position
+    const insertText = (textToInsert) => {
+        if (inputRef?.current == null)
+            return;
+        try {
+            let cursorposition = inputRef.current?.selectionStart;
+            let textbeforecursorposition = inputRef.current?.value.substring(0, cursorposition);
+            let textaftercursorposition = inputRef.current?.value.substring(cursorposition, inputRef.current?.value.length);
+            let newValue = textbeforecursorposition + textToInsert + textaftercursorposition;
+            inputRef.current.value = newValue;
+            onValueChanged?.({ target: { value: newValue } });
+            inputRef.current.focus();
+            inputRef.current.selectionStart = inputRef.current.selectionEnd = cursorposition + textToInsert.length;
+        }
+        catch (e) {
+            TMExceptionBoxManager.show({ exception: e });
+        }
+    };
+    // Renders the textarea
+    const renderTextArea = () => {
+        return _jsxs(_Fragment, { children: [_jsx(StyledTextareaEditor, { ref: inputRef, autoFocus: autoFocus, readOnly: readOnly, disabled: disabled, value: currentValue, placeholder: placeHolder, rows: calculatedRows, maxLength: maxLength, onFocus: () => setIsFocused(true), onBlur: (e) => { setIsFocused(false); if (currentValue != value)
+                        onBlur?.(currentValue); }, onChange: (e) => { setCurrentValue(e.target.value); onValueChanged?.(e); }, onContextMenu: (e) => {
+                        if (formulaItems.length <= 0)
+                            return;
+                        // prevent default right click behavior
+                        e.preventDefault();
+                        // set our click state to true when a user right clicks
+                        setClicked(true);
+                        const bounds = e.currentTarget.getBoundingClientRect();
+                        const x = e.clientX - bounds.left;
+                        const y = e.clientY - bounds.top;
+                        // set the x and y coordinates of our users right click
+                        setPoints({ x, y });
+                    }, "$isMobile": deviceType === DeviceType.MOBILE, "$maxHeight": maxHeight, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, "$fontSize": fontSize, "$width": width, "$resize": resize }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', position: 'absolute', right: '6px', top: label.length > 0 ? '22px' : '7px', pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? 0.4 : 1 }, children: [showClearButton && currentValue &&
+                            _jsx(StyledTextAreaEditorButton, { onClick: () => {
+                                    onValueChanged?.({ target: { value: undefined } });
+                                    setCurrentValue('');
+                                    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));
+                        })] }), formulaItems.length > 0 && clicked && (_jsx(TMContextMenu, { menuData: formulaMenuItems, top: points.y, left: points.x, onMenuItemClick: (formula) => insertText(formula) })), _jsx(TMVilViewer, { vil: validationItems })] });
+    };
+    // Layout for the textarea with a left-aligned label
+    const renderedLeftLabelTextArea = () => {
+        return (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: _jsx(StyledEditorIcon, { "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { "$width": width, children: [label && _jsx(StyledEditorLabel, { "$isFocused": isFocused, "$labelPosition": labelPosition, "$disabled": disabled, children: label ?? '' }), renderTextArea()] }) })] }));
+    };
+    return (_jsx("div", { style: elementStyle, children: renderedLeftLabelTextArea() }));
+};
+export default TMTextArea;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ITMEditorBase } from '../base/TMEditorBase';
+export type TextBoxType = 'text' | 'email' | 'password' | 'number' | 'secureText';
+interface ITMTextBox extends ITMEditorBase {
+    autoFocus?: boolean;
+    formulaItems?: string[];
+    maxValue?: number;
+    minValue?: number;
+    maxLength?: number;
+    precision?: number;
+    scale?: number;
+    type?: TextBoxType;
+    value?: string | number;
+    fromModal?: boolean;
+    allowedPattern?: RegExp;
+    onValueChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onBlur?: (value: string | undefined) => void;
+}
+declare const TMTextBox: React.FunctionComponent<ITMTextBox>;
+export default TMTextBox;

package/lib/components/editors/TMTextBox.js

@@ -0,0 +1,249 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import styled from 'styled-components';
+import { StyledEditor, StyledEditorContainer, StyledEditorIcon, StyledEditorLabel, editorColorManager } from './TMEditorStyled';
+import { FontSize, TMColors } from '../../utils/theme';
+import { genUniqueId, IconClearButton, IconHide, IconShow, SDKUI_Localizator } from '../../helper';
+import ShowAlert from '../base/TMAlert';
+import { TMExceptionBoxManager } from '../base/TMPopUp';
+import TMLayoutContainer, { TMLayoutItem } from '../base/TMLayout';
+import TMVilViewer from '../base/TMVilViewer';
+import TMTooltip from '../base/TMTooltip';
+import { ContextMenu } from 'devextreme-react';
+import { DeviceType, useDeviceType } from '../base/TMDeviceProvider';
+const StyledShowPasswordIcon = styled.div `
+    color: ${props => !props.$disabled ? (props.$vil.length === 0) ? !props.$isModified ? TMColors.text_normal : TMColors.isModified : editorColorManager(props.$vil) : TMColors.disabled};
+    position: absolute;
+    right: 10px;
+    font-size: 18px;
+    transform: translateY(-25px);
+    cursor: pointer;
+`;
+const StyledTextBoxEditorButton = styled.div `
+    color: ${TMColors.button_icon};
+    display: flex;
+    align-items: center;
+    position: relative;
+    cursor: pointer;
+    &:focus{
+        outline: none;
+        background-image: linear-gradient(white, #E4E9F7);
+        border-bottom: 2px solid;
+        border-bottom-color: ${TMColors.primary};
+     }
+`;
+const TMTextBox = ({ autoFocus, maxLength, labelColor, precision, fromModal = false, scale, showClearButton, validationItems = [], label = '', readOnly = false, formulaItems = [], buttons = [], isModifiedWhen, placeHolder, elementStyle, width = '100%', maxValue, minValue, fontSize = FontSize.defaultFontSize, icon, labelPosition = 'left', value, disabled = false, type = 'text', onValueChanged, onBlur, borderRadius, allowedPattern }) => {
+    const [initialType, setInitialType] = useState(type);
+    const [currentType, setCurrentType] = useState(type);
+    const [currentValue, setCurrentValue] = useState(value);
+    const [formulaMenuItems, setFormulaMenuItems] = useState([]);
+    const [isFocused, setIsFocused] = useState(false);
+    const inputRef = useRef(null);
+    const deviceType = useDeviceType();
+    const [id, setID] = useState('');
+    useEffect(() => { setID(genUniqueId()); }, []);
+    useEffect(() => { setCurrentType(type); setInitialType(type); }, [type]);
+    useEffect(() => { setCurrentValue(value); }, [value]);
+    useEffect(() => {
+        if (initialType === 'password' && !value) {
+            setCurrentType('password');
+        }
+    }, [value]);
+    useEffect(() => {
+        if (currentType === 'number') {
+            if (currentValue) {
+                const numericValue = parseFloat(currentValue);
+                // Check maxValue
+                if (maxValue !== undefined && numericValue > maxValue) {
+                    setCurrentValue(maxValue.toString());
+                    ShowAlert({
+                        mode: 'warning',
+                        message: SDKUI_Localizator.Max_Value.replaceParams(maxValue.toString()),
+                        duration: 3000,
+                        title: SDKUI_Localizator.Warning,
+                    });
+                }
+                // Check minValue
+                if (minValue !== undefined && numericValue < minValue) {
+                    setCurrentValue(minValue.toString());
+                    ShowAlert({
+                        mode: 'warning',
+                        message: SDKUI_Localizator.Min_Value.replaceParams(minValue.toString()),
+                        duration: 3000,
+                        title: SDKUI_Localizator.Warning,
+                    });
+                }
+            }
+        }
+    }, [maxValue, minValue, currentValue, currentType]);
+    // Handle autofocus behavior on mount
+    useEffect(() => {
+        if (autoFocus && inputRef.current) {
+            if (fromModal) // utilizzato per i textBox derivanti da una Modal che non riescono a utilizzare l'autofocus
+                setTimeout(() => {
+                    inputRef.current && inputRef.current.focus(); // Focus the input field
+                }, 100);
+            else
+                inputRef.current.focus(); // Focus the input field
+        }
+    }, [autoFocus]); // This effect runs when the autoFocus prop changes
+    useEffect(() => {
+        if (formulaItems && formulaItems.length > 0) {
+            let menuItems = [];
+            for (const formula of formulaItems) {
+                menuItems.push({ text: formula });
+            }
+            setFormulaMenuItems(menuItems);
+        }
+    }, [formulaItems]);
+    const showPasswordIcon = () => {
+        if (initialType === 'secureText' && currentType === 'secureText')
+            return _jsx(IconShow, {});
+        if (initialType === 'secureText' && currentType === 'text')
+            return _jsx(IconHide, {});
+        if (initialType === 'password' && currentType === 'password') {
+            return _jsx(IconShow, {});
+        }
+        else if (initialType === 'password' && currentType === 'text') {
+            return _jsx(IconHide, {});
+        }
+        else {
+            return _jsx(_Fragment, {});
+        }
+    };
+    const toggleShowPassword = () => {
+        if (initialType === 'secureText') {
+            setCurrentType(currentType === 'secureText' ? 'text' : 'secureText');
+        }
+        else if (initialType === 'password') {
+            setCurrentType(currentType === 'password' ? 'text' : 'password');
+        }
+    };
+    const insertText = (textToInsert) => {
+        if (inputRef?.current == null)
+            return;
+        try {
+            let cursorposition = inputRef.current?.selectionStart;
+            let textbeforecursorposition = inputRef.current?.value.substring(0, cursorposition);
+            let textaftercursorposition = inputRef.current?.value.substring(cursorposition, inputRef.current?.value.length);
+            let newValue = textbeforecursorposition + textToInsert + textaftercursorposition;
+            inputRef.current.value = newValue;
+            onValueChanged?.({ target: { value: newValue } });
+            onBlur?.(newValue);
+            inputRef.current.focus();
+            inputRef.current.selectionStart = inputRef.current.selectionEnd = cursorposition + textToInsert.length;
+        }
+        catch (e) {
+            TMExceptionBoxManager.show({ exception: e });
+        }
+    };
+    const getMaxValue = (curValue) => {
+        if (maxValue)
+            return maxValue;
+        if (precision || scale)
+            return Number("9".repeat((precision ?? 0) - (scale ?? 0)) + '.' + "9".repeat(scale ?? 0));
+        return Number(curValue);
+    };
+    const handleInputChange = (e) => {
+        let inputValue = e.target.value;
+        // Validazione generica con RegEx
+        if (allowedPattern) {
+            // Soluzione 1: Confronto diretto (preferibile per un singolo carattere)
+            // const allowedChar = allowedPattern.source.replace(/\\(.)/g, '$1'); // Estrae il carattere dalla RegEx (es. '\(' -> '(')
+            // inputValue = inputValue.split('').filter(char => char === allowedChar).join('');
+            // Soluzione 2: Creare una nuova istanza di RegExp ad ogni iterazione (meno efficiente ma funziona per pattern più complessi)
+            inputValue = inputValue.split('').filter(char => new RegExp(allowedPattern).test(char)).join('');
+        }
+        // se è mascherato (secureText) → l’utente non può digitare "•"
+        if (currentType === 'secureText') {
+            // Mantieni currentValue reale senza bullet
+            if (inputRef.current) {
+                const realValueLength = currentValue.length;
+                const newLength = inputValue.length;
+                if (newLength < realValueLength) {
+                    // Delete o backspace
+                    inputValue = currentValue.slice(0, newLength);
+                }
+                else {
+                    // Nuovi caratteri
+                    const addedText = inputValue.slice(realValueLength);
+                    inputValue = currentValue + addedText;
+                }
+            }
+        }
+        if (currentType === 'number') {
+            let number = Number(inputValue);
+            let max = getMaxValue(inputValue);
+            // Check maxValue
+            if (number > max) {
+                ShowAlert({
+                    mode: 'warning',
+                    message: `Max value is ${max}`,
+                    duration: 3000,
+                    title: SDKUI_Localizator.Warning,
+                });
+                // Non aggiornare lo stato con il valore non valido
+                return;
+            }
+            // Check minValue
+            if (minValue && number < minValue) {
+                ShowAlert({
+                    mode: 'warning',
+                    message: `Min value is ${minValue}`,
+                    duration: 3000,
+                    title: SDKUI_Localizator.Warning,
+                });
+                // Non aggiornare lo stato con il valore non valido
+                return;
+            }
+            let decimalSeparatorIndex = number
+                .toString()
+                .indexOf('.');
+            if (!scale && decimalSeparatorIndex >= 0) {
+                // Se non ci sono decimali consentiti e l'utente ne inserisce uno, non aggiornare
+                return;
+            }
+            // Controllo lunghezza decimali
+            if (scale) {
+                if (decimalSeparatorIndex >= 0) {
+                    let result = Number(number
+                        .toString()
+                        .substring(decimalSeparatorIndex + 1));
+                    if (result > Number('9'.repeat(scale ?? 0))) {
+                        // Se i decimali superano la scala consentita, non aggiornare
+                        return;
+                    }
+                }
+            }
+        }
+        setCurrentValue(inputValue);
+        onValueChanged?.({ target: { value: inputValue } }); // Passa il valore filtrato
+    };
+    const renderInputField = () => {
+        const bulletEntity = '\u2022'; // &#8226;
+        const displayedValue = initialType === 'secureText'
+            ? (currentType === 'secureText'
+                ? bulletEntity.repeat(currentValue?.length ?? 0)
+                : currentValue ?? '')
+            : currentValue ?? '';
+        return (_jsxs("div", { style: { width: '100%', height: 'fit-content' }, id: `text-${id}`, children: [_jsx(StyledEditor, { ref: inputRef, id: `text-${label}-${id}`, name: label, autoFocus: autoFocus, readOnly: readOnly, type: currentType, disabled: disabled, value: displayedValue, width: width || '100%', placeholder: placeHolder, maxLength: maxLength, autoComplete: 'off', onFocus: () => setIsFocused(true), onBlur: (e) => { setIsFocused(false); if (currentValue != value)
+                        onBlur?.(currentValue); }, onChange: handleInputChange, onKeyDown: (e) => {
+                        if (currentType === 'number') {
+                            if (!scale && (e.key == "." || e.key == ","))
+                                e.preventDefault();
+                        }
+                    }, "$isMobile": deviceType === DeviceType.MOBILE, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, "$fontSize": fontSize, "$maxValue": maxValue, "$width": width, "$type": currentType, "$borderRadius": borderRadius }), (initialType === 'password' || initialType === 'secureText') && _jsx(StyledShowPasswordIcon, { onClick: toggleShowPassword, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: showPasswordIcon() }), initialType !== 'password' &&
+                    _jsxs("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', position: 'absolute', right: type === 'number' ? '25px' : '6px', top: label.length > 0 ? '20px' : '7px', pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? 0.4 : 1 }, children: [showClearButton && currentValue &&
+                                _jsx(StyledTextBoxEditorButton, { onClick: () => {
+                                        onValueChanged?.({ target: { value: undefined } });
+                                        onBlur?.(undefined);
+                                    }, children: _jsx(IconClearButton, {}) }), buttons.map((buttonItem, index) => {
+                                return (_jsx(StyledTextBoxEditorButton, { onClick: buttonItem.onClick, children: _jsx(TMTooltip, { content: buttonItem.text, children: buttonItem.icon }) }, buttonItem.text));
+                            })] }), formulaItems.length > 0 && (_jsx(ContextMenu, { dataSource: formulaMenuItems, target: `#text-${id}`, onItemClick: (e) => { insertText(e.itemData?.text ?? ''); } })), _jsx(TMVilViewer, { vil: validationItems })] }));
+    };
+    const renderedLeftLabelTextBox = () => {
+        return (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: _jsx(StyledEditorIcon, { "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { "$width": width, children: [label && _jsx(StyledEditorLabel, { "$color": labelColor, "$isFocused": isFocused, "$labelPosition": labelPosition, "$disabled": disabled, children: label }), renderInputField()] }) })] }));
+    };
+    return (_jsx("div", { style: elementStyle, children: renderedLeftLabelTextBox() }));
+};
+export default TMTextBox;

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { QueryDescriptor, ValidationItem } from '@topconsultnpm/sdk-ts';
+import { ITMEditorBase } from '../base/TMEditorBase';
+interface ITMTextExpression extends ITMEditorBase {
+    value: string | undefined;
+    valueOrig: string | undefined;
+    qd?: QueryDescriptor;
+    tid?: number;
+    formulaItems?: string[];
+    label?: string;
+    titleChooser?: string;
+    captionColumnChooser?: string;
+    higthChooser?: string;
+    widthChooser?: string;
+    disableMultipleSelection?: boolean;
+    validationItems?: ValidationItem[];
+    rows?: number;
+    onValueChanged?: (newText: string | undefined) => void;
+}
+declare const TMTextExpression: React.FunctionComponent<ITMTextExpression>;
+export declare class FormulaItemHelper {
+    id: number;
+    paramName: string;
+}
+export default TMTextExpression;