@topconsultnpm/sdkui-react 6.20.0-dev1.15 → 6.20.0-dev1.17

package/lib/components/editors/TMRadioButton.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FontSize, TMColors } from '../../utils/theme';
+import styled from 'styled-components';
+import { makeID } from '../../helper/helpers';
+const StyledWrapper = styled.label `
+    color: ${props => !props.$disabled ? props.$isModifiedWhen ? TMColors.isModified : TMColors.text_normal : TMColors.disabled};
+    display: flex;
+    flex-direction: ${props => props.$direction};
+    align-items: ${props => props.$direction === 'row' ? 'center' : 'flex-start'};
+    font-size: ${props => props.$fontSize};
+    gap: ${props => props.$direction === 'row' ? '20px' : "10px"};
+`;
+const StyledRadioGroupLabel = styled.div `
+    flex: ${props => props.$flexBase};
+`;
+const StyledRadioGroupContainer = styled.div `
+    flex: ${props => 10 - props.$flexBase};
+`;
+const StyledRadioButtonWrapper = styled.div `
+    display: flex;
+    flex-direction: ${props => props.$direction};
+    align-items: ${props => props.$direction === 'row' ? 'center' : 'flex-start'};
+    justify-content: flex-start;
+    gap: ${props => props.$direction === 'row' ? '10px' : '5px'};
+`;
+const StyledRadioButtoncontainer = styled.div `
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 5px;
+    height: 18px;
+`;
+const StyledRadioButton = styled.input `
+   accent-color: ${props => !props.$disabled ? props.$isModifiedWhen ? TMColors.isModified : TMColors.primary : TMColors.disabled}; 
+   cursor: ${props => !props.$disabled && 'pointer'};
+`;
+const StyledradioButtonLabel = styled.label `
+    font-size: ${props => props.$fontSize};
+    color: ${props => !props.$disabled ? props.$isModifiedWhen ? TMColors.isModified : TMColors.text_normal : TMColors.disabled};
+    user-select: none;
+    width: 100%;
+    cursor: ${props => !props.$disabled && 'pointer'};
+    &:focus{
+        outline: none;
+        background-image: linear-gradient(white, #E4E9F7);
+        border-bottom: 2px solid ;
+        border-bottom-color: ${props => !props.$isModifiedWhen ? TMColors.primary : TMColors.isModified};
+    }
+`;
+const TMRadioButton = ({ isModifiedWhen, flexBase = 1, elementStyle, label, value, fontSize = FontSize.defaultFontSize, dataSource = [], direction = 'row', onValueChanged, disabled = false }) => {
+    const renderedRadioButtons = () => {
+        return (_jsx(StyledRadioButtonWrapper, { "$direction": direction, children: dataSource.map((data, index) => (_jsxs(StyledRadioButtoncontainer, { children: [_jsx(StyledRadioButton, { "$disabled": disabled, tabIndex: -1, name: makeID(8), checked: value === data.value ? true : false, onChange: () => onValueChanged(data.value), disabled: disabled, type: 'radio' }), _jsxs(StyledradioButtonLabel, { tabIndex: 0, onKeyDown: (e) => e.code === 'Space' && onValueChanged(data.value), onClick: () => onValueChanged(data.value), "$isModifiedWhen": isModifiedWhen, "$fontSize": fontSize, "$disabled": disabled, children: [" ", data.display, " "] })] }, index))) }));
+    };
+    return (_jsx("div", { style: elementStyle, children: _jsxs(StyledWrapper, { "$isModifiedWhen": isModifiedWhen, "$direction": direction, "$disabled": disabled, "$fontSize": fontSize, style: { display: 'flex', flexDirection: direction, alignItems: direction === 'row' ? 'center' : 'flex-start', fontSize: fontSize, gap: direction === 'row' ? '20px' : "10px" }, children: [label && _jsx(StyledRadioGroupLabel, { "$flexBase": flexBase, children: label }), _jsx(StyledRadioGroupContainer, { "$flexBase": flexBase, children: renderedRadioButtons() })] }) }));
+};
+export default TMRadioButton;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ITMEditorBase } from '../base/TMEditorBase';
+export interface ITMSummaryRef {
+    focus: () => void;
+}
+interface ITMSummaryProps extends ITMEditorBase {
+    showBorder?: boolean;
+    borderRadius?: string;
+    showEditButton?: boolean;
+    iconEditButton?: React.ReactNode;
+    iconeEditTooltip?: string;
+    template?: React.ReactNode;
+    openEditorOnSummaryClick?: boolean;
+    hasValue?: boolean;
+    onEditorClick?: () => void;
+    onClearClick?: () => void;
+    onValueChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+declare const TMSummary: React.ForwardRefExoticComponent<ITMSummaryProps & React.RefAttributes<ITMSummaryRef>>;
+export default TMSummary;

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,18 @@
+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;
+    autoCalculateRows?: boolean;
+}
+declare const TMTextArea: React.FunctionComponent<ITMTextArea>;
+export default TMTextArea;

package/lib/components/editors/TMTextArea.js

@@ -0,0 +1,189 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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, IconDataList, SDKUI_Localizator } from '../../helper';
+import styled from 'styled-components';
+import { FormulaItemHelper } from './TMTextExpression';
+import TMChooserForm from '../forms/TMChooserForm';
+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, autoCalculateRows = 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);
+    //Show chooserForm formulaItems
+    const [showFormulaItemsChooser, setShowFormulaItemsChooser] = useState(false);
+    // 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(() => {
+        if (!autoCalculateRows)
+            return;
+        const observer = new ResizeObserver(() => { if (currentValue) {
+            updateRows();
+        } });
+        if (inputRef.current) {
+            observer.observe(inputRef.current);
+        }
+        return () => { if (inputRef.current) {
+            observer.unobserve(inputRef.current);
+        } };
+    }, [currentValue, autoCalculateRows]);
+    // 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 (autoCalculateRows && currentValue) {
+            const newRowCount = calculateRows(currentValue);
+            setCalculatedRows(newRowCount);
+        }
+    }, [currentValue, autoCalculateRows]);
+    // 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]);
+    function getFormulaDataSorce() {
+        let fiarray = [];
+        if (!formulaItems)
+            return [];
+        let i = 0;
+        for (const f of formulaItems) {
+            let fi = new FormulaItemHelper();
+            fi.id = i;
+            fi.paramName = f;
+            fiarray.push(fi);
+            i++;
+        }
+        return fiarray;
+    }
+    const openFormulaItemsChooser = () => {
+        return (showFormulaItemsChooser ?
+            _jsx(TMChooserForm, { title: SDKUI_Localizator.Parameters, height: '350', width: '300', hasShowId: false, showDefaultColumns: false, allowMultipleSelection: true, columns: [
+                    { dataField: 'paramName', caption: SDKUI_Localizator.Name, dataType: 'string', sortOrder: 'asc', alignment: 'left' }
+                ], dataSource: getFormulaDataSorce(), onClose: () => { setShowFormulaItemsChooser(false); }, onChoose: (IDs) => {
+                    let expr = value?.toString() ?? '';
+                    IDs.map(i => expr += formulaItems[i]);
+                    onValueChanged?.({ target: { value: expr } });
+                } }) : _jsx(_Fragment, {}));
+    };
+    // 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, spellCheck: false, 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: 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(), 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;