@topconsultnpm/sdkui-react-beta 6.5.51

package/lib/components/editors/TMCheckBox.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { FontSize, TMColors } from '../../utils/theme';
+import styled from 'styled-components';
+const StyledCheckBoxContainer = styled.div `
+    display: flex;
+    flex-direction: ${props => props.$labelPosition === 'right' ? 'row-reverse' : 'row'} ;
+    justify-content: flex-start;
+    align-items: center;
+    width: fit-content;
+    cursor: ${props => !props.$disabled && 'pointer'};
+`;
+const StyledCheckBoxLabel = styled.div `
+    margin-right:  ${props => props.$labelPosition === 'left' ? '5px' : '0'};
+    margin-left:  ${props => props.$labelPosition === 'right' ? '5px' : '0'};
+    color: ${props => !props.$disabled ? props.$isModifiedWhen ? TMColors.isModified : TMColors.text_normal : TMColors.disabled};
+    font-size: ${props => props.$fontSize};
+    user-select: none;
+    &:focus{
+        outline: none;
+        background-image: linear-gradient(white, #E4E9F7);
+        border-bottom: 2px solid;
+        border-bottom-color: ${props => !props.$isModifiedWhen ? TMColors.primary : TMColors.isModified};
+    }
+`;
+const StyledCheckbox = styled.input `
+    accent-color: ${props => !props.$disabled ? props.$isModifiedWhen ? TMColors.isModified : TMColors.primary : TMColors.disabled};
+    width: 14px;
+    height: 14px;
+    cursor: ${props => !props.$disabled && 'pointer'};
+`;
+const TMCheckBox = ({ isModifiedWhen, elementStyle, disabled = false, label, value, labelPosition = 'right', fontSize = FontSize.defaultFontSize, onValueChanged }) => {
+    const [initialValue, setInitialValue] = useState(value);
+    const [currentValue, setCurrentValue] = useState(value);
+    useEffect(() => { setInitialValue(value); }, []);
+    useEffect(() => { setCurrentValue(value); }, [value]);
+    useEffect(() => { toggleChecked(); }, [value]);
+    const toggleChecked = () => {
+        switch (typeof initialValue) {
+            case 'boolean':
+                setCurrentValue(!currentValue);
+                break;
+            case 'number':
+                if (initialValue === 0) {
+                    if (currentValue === 0) {
+                        setCurrentValue(1);
+                    }
+                    if (currentValue > 0) {
+                        setCurrentValue(0);
+                    }
+                }
+                if (initialValue > 0) {
+                    if (currentValue === 0) {
+                        setCurrentValue(1);
+                    }
+                    if (currentValue > 0) {
+                        setCurrentValue(0);
+                    }
+                }
+                break;
+            case 'undefined':
+                if (currentValue > 0) {
+                    setCurrentValue(undefined);
+                }
+                if (currentValue === undefined) {
+                    setCurrentValue(1);
+                }
+                break;
+        }
+    };
+    const isChecked = () => {
+        let myBool = true;
+        switch (currentValue) {
+            case false:
+            case 0:
+            case undefined:
+                myBool = false;
+                break;
+            default:
+                myBool = true;
+                break;
+        }
+        return myBool;
+    };
+    const renderedCheckbox = () => {
+        return (_jsxs(StyledCheckBoxContainer, { "$disabled": disabled, "$labelPosition": labelPosition, onKeyDown: (e) => e.code === 'Space' && !disabled && onValueChanged && onValueChanged(currentValue), onClick: () => { !disabled && onValueChanged && onValueChanged(currentValue); }, children: [label && _jsx(StyledCheckBoxLabel, { tabIndex: 0, "$isModifiedWhen": isModifiedWhen, "$disabled": disabled, "$labelPosition": labelPosition, "$fontSize": fontSize, children: label }), _jsx(StyledCheckbox, { tabIndex: -1, "$isModifiedWhen": isModifiedWhen, "$disabled": disabled, type: 'checkbox', checked: !isChecked(), onChange: () => { } })] }));
+    };
+    return (_jsx("div", { style: elementStyle, children: renderedCheckbox() }));
+};
+export default TMCheckBox;

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

@@ -0,0 +1,12 @@
+import { ValidationItem } from '@topconsultnpm/sdk-ts-beta';
+import { IDateBoxOptions } from 'devextreme-react/cjs/date-box';
+import { DateDisplayTypes } from '../../helper';
+interface ITMDateBoxProps extends IDateBoxOptions {
+    dateDisplayType?: DateDisplayTypes;
+    validationItems?: ValidationItem[];
+    isModifiedWhen?: boolean;
+    useDateSerializationFormat?: boolean;
+    containerElement?: Element;
+}
+declare const TMDateBox: (props: ITMDateBoxProps) => import("react/jsx-runtime").JSX.Element;
+export default TMDateBox;

package/lib/components/editors/TMDateBox.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { DateBox } from 'devextreme-react';
+import { DateDisplayTypes, Globalization } from '../../helper';
+import { TMColors } from '../../utils/theme';
+import TMVilViewer from '../base/TMVilViewer';
+const TMDateBox = (props) => {
+    useEffect(() => {
+        let htmlElement = dateBoxRef?.current?.instance().element();
+        if (!htmlElement)
+            return;
+        let color = props.isModifiedWhen ? TMColors.tertiary : TMColors.border_normal;
+        let label = htmlElement.getElementsByClassName("dx-label")[0];
+        if (label) {
+            label.style.borderBottomColor = color;
+        }
+        let labelBefore = htmlElement.getElementsByClassName("dx-label-before")[0];
+        if (labelBefore) {
+            labelBefore.style.borderBottomColor = color;
+            labelBefore.style.borderTopColor = color;
+            labelBefore.style.borderInlineStartColor = color;
+        }
+        let labelAfter = htmlElement.getElementsByClassName("dx-label-after")[0];
+        if (labelAfter) {
+            labelAfter.style.borderBottomColor = color;
+            labelAfter.style.borderTopColor = color;
+            labelAfter.style.borderInlineEndColor = color;
+        }
+    }, [props.isModifiedWhen]);
+    const dateBoxRef = useRef(null);
+    // soluzione tratta da https://supportcenter.devexpress.com/ticket/details/t1025617/setting-default-time-in-datebox
+    const dropDownOptions = {
+        container: props.containerElement,
+        onShown: (e) => {
+            if (props.value != undefined)
+                return;
+            let dateBoxInstance = dateBoxRef.current?.instance();
+            const currentDate = new Date();
+            currentDate.setHours(0, 0, 0, 0);
+            dateBoxInstance._strategy._timeView.option("value", currentDate);
+            dateBoxInstance._strategy._widget.option("value", currentDate);
+        }
+    };
+    const getType = () => {
+        if (props.type != undefined)
+            return props.type;
+        if (!props.dateDisplayType || props.dateDisplayType == DateDisplayTypes.DateTime)
+            return "datetime";
+        return props.dateDisplayType == DateDisplayTypes.Date ? "date" : "time";
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(DateBox, { ref: dateBoxRef, 
+                // defaultValue={props.defaultValue}
+                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); }, onKeyUp: (e) => {
+                    if (e.event?.code == "Space") {
+                        const currentDate = new Date();
+                        currentDate.setHours(0, 0, 0, 0);
+                        e.component.option("value", currentDate.toISOString());
+                    }
+                }, onValueChanged: (e) => {
+                    // soluzione in https://supportcenter.devexpress.com/ticket/details/t1103734/datebox-how-to-initialize-time-to-00-00-when-key-is-pressed-instead-of-current-time
+                    if (props.value != undefined)
+                        return;
+                    if (!e.value)
+                        return;
+                    const currentType = getType();
+                    if (currentType !== 'datetime') {
+                        const currentDate = new Date(e.value);
+                        currentDate.setHours(0, 0, 0, 0);
+                        e.component.option("value", currentDate.toISOString());
+                    }
+                    else {
+                        // If type is 'datetime', get the hours from the input value
+                        const newValue = new Date(e.value);
+                        e.component.option("value", newValue.toISOString());
+                    }
+                } }), _jsx(TMVilViewer, { vil: props.validationItems })] }));
+};
+export default TMDateBox;

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

@@ -0,0 +1,10 @@
+import React from "react";
+import { ITMEditorBase } from '../base/TMEditorBase';
+interface ITMDropDown extends ITMEditorBase {
+    dataSource?: any[];
+    value?: string | number | undefined;
+    disabled?: boolean;
+    onValueChanged?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+}
+declare const TMDropDown: React.FC<ITMDropDown>;
+export default TMDropDown;

package/lib/components/editors/TMDropDown.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import styled from "styled-components";
+import { FontSize, TMColors } from '../../utils/theme';
+import { StyledEditorContainer, StyledEditorIcon, StyledEditorLabel, editorColorManager } from "./TMEditorStyled";
+import TMLayoutContainer, { TMLayoutItem } from "../base/TMLayout";
+import TMVilViewer from "../base/TMVilViewer";
+const StyledDropDown = styled.select `
+    width: ${props => props.$width};
+    padding: 5px 15px 3px 9px;
+    border: 1px solid;
+    border-color: ${props => props.$isModified ? TMColors.isModified : TMColors.border_normal};
+    border-bottom: ${props => (props.$vil.length > 0) ? '3px' : '1px'} solid ;
+    border-bottom-color: ${props => (props.$vil.length === 0) ? !props.$isModified ? TMColors.border_normal : TMColors.isModified : editorColorManager(props.$vil)};
+    color: ${props => !props.disabled ? (props.$vil.length === 0) ? !props.$isModified ? TMColors.text_normal : TMColors.isModified : editorColorManager(props.$vil) : TMColors.disabled};
+    border-radius: 2px;
+    min-width: 70px;
+    &:focus{
+        outline: none;
+        background-image: linear-gradient(white, #E4E9F7);
+        border: ${props => props.$isModified ? `1px solid ${TMColors.isModified}` : '1px solid rgb(180,180,180)'};
+        border-bottom: 2px solid ;
+        border-bottom-color: ${props => (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 TMDropDown = ({ validationItems = [], disabled = false, elementStyle, isModifiedWhen, labelPosition = 'left', label, icon, width = '100%', fontSize = FontSize.defaultFontSize, dataSource, value, onValueChanged }) => {
+    const [isFocused, setIsfocused] = useState(false);
+    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, { "$isFocused": isFocused, "$labelPosition": labelPosition, "$disabled": disabled, "$fontSize": fontSize, children: label }), _jsx(StyledDropDown, { value: value, onFocus: () => setIsfocused(true), onBlur: () => setIsfocused(false), "$disabled": disabled, disabled: disabled, "$fontSize": fontSize, "$width": width, "$isModified": isModifiedWhen, "$vil": validationItems, onChange: onValueChanged, children: dataSource?.map((data, index) => (_jsx("option", { value: data.value, children: data.display }, index))) }), _jsx(TMVilViewer, { vil: validationItems })] }) })] }));
+    };
+    return (_jsx("div", { style: elementStyle, children: renderedLeftLabelTextBox() }));
+};
+export default TMDropDown;

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

@@ -0,0 +1,30 @@
+import { ValidationItem } from '@topconsultnpm/sdk-ts-beta';
+export declare const editorColorManager: (validationItems: ValidationItem[]) => string;
+export declare const StyledEditorContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $width: string;
+}>> & string;
+export declare const StyledEditor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
+    $vil: ValidationItem[];
+    $width: string;
+    $type: string;
+    $isModified: boolean;
+    $maxValue: number;
+    $fontSize: string;
+    $disabled: boolean;
+    $isMobile?: boolean;
+}>> & string;
+export declare const StyledEditorIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $vil: ValidationItem[];
+    $disabled: boolean;
+    $isModified: boolean;
+}>> & string;
+export declare const StyledEditorLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $isFocused: boolean;
+    $labelPosition: "right" | "left" | "top";
+    $disabled: boolean;
+    $fontSize: string;
+}>> & string;
+export declare const StyledEditorButtonIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $index: number;
+    $transform: string;
+}>> & string;

package/lib/components/editors/TMEditorStyled.js

@@ -0,0 +1,75 @@
+import styled from 'styled-components';
+import { ResultTypes } from '@topconsultnpm/sdk-ts-beta';
+import { TMColors } from '../../utils/theme';
+export const editorColorManager = (validationItems) => {
+    if (validationItems.find(item => item.ResultType === ResultTypes.ERROR))
+        return TMColors.error;
+    if (validationItems.find(item => item.ResultType === ResultTypes.WARNING))
+        return TMColors.warning;
+    if (validationItems.find(item => item.ResultType === ResultTypes.INFO))
+        return TMColors.info;
+    return '';
+};
+export const StyledEditorContainer = styled.div `
+    width: ${props => props.$width};
+    position: relative;
+`;
+export const StyledEditor = styled.input `
+    width: ${props => props.$width};
+    padding: ${props => props.$type === 'password' ? '5px 10px 5px 13px' : '5px 13px'};
+    border: 1px solid;
+    border-color: ${props => props.$isModified ? TMColors.isModified : TMColors.border_normal};
+    border-bottom: ${props => (props.$vil.length > 0) ? '3px' : '1px'} solid ;
+    border-bottom-color: ${props => (props.$vil.length === 0) ? !props.$isModified ? TMColors.border_normal : TMColors.isModified : editorColorManager(props.$vil)};
+    color: ${props => !props.$disabled ? (props.$vil.length === 0) ? !props.$isModified ? 'black' : TMColors.isModified : editorColorManager(props.$vil) : TMColors.disabled};
+    border-radius: 2px;
+    min-width: ${props => props.$isMobile && '70px'};
+    &:focus{
+        outline: none;
+        background-image: linear-gradient(white, #E4E9F7);
+        border: ${props => props.$isModified ? `1px solid ${TMColors.isModified}` : '1px solid rgb(180,180,180)'};
+        border-bottom: 2px solid ;
+        border-bottom-color: ${props => (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};
+    }
+`;
+export const StyledEditorIcon = styled.div `
+    color: ${props => !props.$disabled ? (props.$vil.length === 0) ? !props.$isModified ? 'rgb(80,80,80)' : TMColors.tertiary : editorColorManager(props.$vil) : 'rgb(180,180,180)'};
+    width: 25px;
+    height: 25px;
+    margin-right: 2px;
+    font-size: 18px;
+    user-select: none;
+    transform: translateY(18px);
+`;
+export const StyledEditorLabel = styled.div `
+    font-size: ${props => props.$fontSize} ;
+    color:${props => !props.$disabled ? props.$isFocused ? TMColors.primary : TMColors.label_normal : TMColors.disabled};
+    padding: 0 3px;
+    user-select: none;
+    transform: ${props => props.$labelPosition === 'left' && 'translateY(5px)'};
+    width: max-content;
+    transform: translate(10px, 6px);
+    background-color: ${TMColors.default_background};
+    position: relative;
+    z-index: 1;
+`;
+export const StyledEditorButtonIcon = styled.div `
+    color: ${TMColors.button_icon};
+    position: absolute;
+    right: ${(props) => (props.$index + 1) * 10 + (10 * props.$index)}px;
+    font-size: 18px;
+    transform: ${props => `translateY(${props.$transform})`};
+    cursor: pointer;
+    &:focus{
+        outline: none;
+        background-image: linear-gradient(white, #E4E9F7);
+        border-bottom: 2px solid;
+        border-bottom-color: ${TMColors.primary};
+     }
+`;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ITMEditorBase } from '../base/TMEditorBase';
+interface ITMRadioButton extends ITMEditorBase {
+    dataSource?: any[];
+    alignment?: 'flex-start' | 'flex-end' | 'space-between' | 'center' | 'space-around';
+    direction?: 'row' | 'column';
+    onValueChanged?: (e: any) => void;
+}
+declare const TMRadioButton: React.FC<ITMRadioButton>;
+export default TMRadioButton;

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,18 @@
+import React from 'react';
+import { ITMEditorBase } from '../base/TMEditorBase';
+interface ITMSummary extends ITMEditorBase {
+    showBorder?: boolean;
+    borderRadius?: string;
+    showInfo?: boolean;
+    infoTemplate?: React.ReactNode;
+    iconEditButton?: React.ReactNode;
+    template?: React.ReactNode;
+    openEditorOnSummaryClick?: boolean;
+    customBtn?: any;
+    onEditorClick?: () => void;
+    onClearClick?: () => void;
+    onCustumBtnClick?: () => void;
+    onValueChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+declare const TMSummary: React.FunctionComponent<ITMSummary>;
+export default TMSummary;

package/lib/components/editors/TMSummary.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { FontSize, TMColors } from '../../utils/theme';
+import { StyledEditorContainer, StyledEditorIcon, StyledEditorLabel, editorColorManager } from './TMEditorStyled';
+import { IconCircleInfo, IconClear, 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 ? '0px 5px' : '4px 5px 4px 13px'};
+    border: ${props => !props.$showBorder ? '' : '1px solid'};
+    background-color: ${props => 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.$disabled ? (props.$vil.length === 0) ? !props.$isModified ? 'black' : TMColors.isModified : editorColorManager(props.$vil) : TMColors.disabled};
+    border-radius: ${props => !props.$showBorder ? props.$borderRadius : '2px'};
+    display: flex;
+    align-items: center;
+    /* min-width: 70px; */
+    &: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 = ({ customBtn, borderRadius = '4px', validationItems = [], label = '', showInfo, infoTemplate, onClearClick, onCustumBtnClick, openEditorOnSummaryClick, onEditorClick, backgroundColor = 'transparent', showBorder = true, isModifiedWhen, elementStyle, width = '100%', height = '100%', fontSize = FontSize.defaultFontSize, icon, iconEditButton, labelPosition = 'left', template, disabled = false, onValueChanged }) => {
+    const renderTemplateField = () => {
+        return (_jsx(StyledSummaryTemplateInput, { tabIndex: 0, "$backgroundColor": backgroundColor, "$borderRadius": borderRadius, "$isModified": isModifiedWhen, "$vil": validationItems, "$disabled": disabled, "$showBorder": showBorder, "$fontSize": fontSize, "$width": width, "$height": height, onChange: onValueChanged, children: _jsxs("div", { onClick: () => openEditorOnSummaryClick && onEditorClick?.(), onDoubleClick: () => !openEditorOnSummaryClick && onEditorClick?.(), style: { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', width: '100%', minHeight: '16px', cursor: openEditorOnSummaryClick ? 'pointer' : 'default' }, children: [template, _jsxs("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? 0.4 : 1 }, children: [!openEditorOnSummaryClick && _jsx(StyledEditorButtonIcon2, { tabIndex: disabled ? -1 : 0, onKeyDown: (e) => e.code === 'Space' && onEditorClick?.(), "$transform": '2px', onClick: onEditorClick, "$index": onCustumBtnClick && onClearClick ? 2 : onCustumBtnClick ? 1 : 0, children: _jsx(TMTooltip, { content: SDKUI_Localizator.Update, children: iconEditButton ?? _jsx(IconPencil, {}) }) }), onClearClick && _jsx(StyledEditorButtonIcon2, { tabIndex: disabled ? -1 : 0, onKeyDown: (e) => e.code === 'Space' && onClearClick?.(), "$transform": '2px', onClick: onClearClick, "$index": onCustumBtnClick ? 1 : 0, children: _jsx(TMTooltip, { content: SDKUI_Localizator.Clear, children: _jsx(IconClear, {}) }) }), onCustumBtnClick && _jsx(StyledEditorButtonIcon2, { tabIndex: disabled ? -1 : 0, onKeyDown: (e) => e.code === 'Space' && onCustumBtnClick?.(), "$transform": '2px', onClick: onCustumBtnClick, "$index": 0, children: customBtn })] })] }) }));
+    };
+    const renderLabel = () => {
+        return (_jsx(StyledEditorLabel, { "$isFocused": false, "$labelPosition": labelPosition, "$disabled": disabled, "$fontSize": fontSize, children: _jsxs("div", { style: { flexDirection: "row", display: "flex", alignItems: "start", justifyContent: "start" }, children: [label, showInfo &&
+                        _jsx(TMTooltip, { content: infoTemplate, children: _jsx(IconCircleInfo, { style: { marginLeft: '5px' }, color: TMColors.primary }) })] }) }));
+    };
+    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/TMTextBox.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ITMEditorBase } from '../base/TMEditorBase';
+export type TMTextBoxButtonData = {
+    icon: any;
+    text?: string;
+    onClick?: () => void;
+};
+export type TextBoxType = 'text' | 'email' | 'password' | 'number';
+interface ITMTextBox extends ITMEditorBase {
+    autoFocus?: boolean;
+    buttons?: TMTextBoxButtonData[];
+    formulaItems?: string[];
+    maxValue?: number;
+    type?: TextBoxType;
+    value?: string | number;
+    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,116 @@
+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, StyledEditorButtonIcon, StyledEditorContainer, StyledEditorIcon, StyledEditorLabel, editorColorManager } from './TMEditorStyled';
+import { FontSize, TMColors } from '../../utils/theme';
+import { IconHide, IconShow, useWindowWidth } from '../../helper';
+import TMContextMenu, { useContextMenu } from '../base/TMContextMenu';
+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';
+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 TMTextBox = ({ autoFocus, validationItems = [], label = '', readOnly = false, formulaItems = [], buttons = [], isModifiedWhen, placeHolder, elementStyle, width = '100%', maxValue, fontSize = FontSize.defaultFontSize, icon, labelPosition = 'left', value, disabled = false, type = 'text', onValueChanged, onBlur }) => {
+    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 { clicked, setClicked, points, setPoints } = useContextMenu();
+    const inputRef = useRef(null);
+    let screenWidth = useWindowWidth();
+    useEffect(() => { setCurrentType(type); setInitialType(type); }, [type]);
+    useEffect(() => {
+        setCurrentValue(value);
+    }, [value]);
+    useEffect(() => {
+        if (initialType === 'password' && !value) {
+            setCurrentType('password');
+        }
+    }, [value]);
+    useEffect(() => {
+        if (currentType === 'number' && maxValue) {
+            if (currentValue && parseInt(currentValue) > maxValue) {
+                setCurrentValue(maxValue.toString());
+                ShowAlert({ mode: 'warning', message: `Max value is ${maxValue}`, duration: 3000, title: 'Textbox Warning' });
+            }
+        }
+    }, [maxValue, currentValue, currentType]);
+    useEffect(() => {
+        if (formulaItems && formulaItems.length > 0) {
+            let menuItems = [];
+            for (const formula of formulaItems) {
+                menuItems.push({ text: formula });
+            }
+            setFormulaMenuItems(menuItems);
+        }
+    }, [formulaItems]);
+    const showPasswordIcon = () => {
+        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 === 'password' && currentType === 'password') {
+            setCurrentType('text');
+        }
+        else if (initialType === 'password' && currentType === 'text') {
+            setCurrentType('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 } });
+            inputRef.current.focus();
+            inputRef.current.selectionStart = inputRef.current.selectionEnd = cursorposition + textToInsert.length;
+        }
+        catch (e) {
+            TMExceptionBoxManager.show({ exception: e });
+        }
+    };
+    const renderInputField = () => {
+        return (_jsxs(_Fragment, { children: [_jsx(StyledEditor, { ref: inputRef, autoFocus: autoFocus, readOnly: readOnly, type: currentType, disabled: disabled, value: currentValue, width: width || '100%', placeholder: placeHolder, 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": screenWidth < 640, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, "$fontSize": fontSize, "$maxValue": maxValue, "$width": width, "$type": currentType }), initialType === 'password' && currentValue && _jsx(StyledShowPasswordIcon, { onClick: toggleShowPassword, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: showPasswordIcon() }), initialType !== 'password' &&
+                    buttons.map((buttonItem, index) => {
+                        return (_jsx(StyledEditorButtonIcon, { onClick: buttonItem.onClick, "$index": index, "$transform": '-26px', children: _jsx(TMTooltip, { content: buttonItem.text, children: buttonItem.icon }) }, index));
+                    }), formulaItems.length > 0 && clicked && (_jsx(TMContextMenu, { menuData: formulaMenuItems, top: points.y, left: points.x, onMenuItemClick: (formula) => insertText(formula) })), _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, { "$isFocused": isFocused, "$labelPosition": labelPosition, "$disabled": disabled, "$fontSize": fontSize, children: label }), renderInputField()] }) })] }));
+    };
+    return (_jsx("div", { style: elementStyle, children: renderedLeftLabelTextBox() }));
+};
+export default TMTextBox;

package/lib/components/filesystem/ProgressBar.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface ITMProgressBar {
+    bgcolor?: any;
+    completed?: any;
+}
+declare const ProgressBar: React.FC<ITMProgressBar>;
+export default ProgressBar;