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

package/lib/components/editors/TMRadioButton.js

@@ -1,57 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,92 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,189 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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;