@topconsultnpm/sdkui-react 6.17.0-test9

package/lib/components/choosers/TMRelationChooser.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { RelationDescriptor, RelationTypes } from '@topconsultnpm/sdk-ts';
+import { ITMChooserFormProps, ITMChooserProps } from '../../ts';
+interface ITMRelationChooser extends ITMChooserProps {
+    relationType: RelationTypes;
+    values?: number[];
+    showBorder?: boolean;
+    borderRadius?: string;
+    openEditorOnSummaryClick?: boolean;
+}
+declare const TMRelationChooser: React.FunctionComponent<ITMRelationChooser>;
+export default TMRelationChooser;
+interface ITMRelationChooserFormProps extends ITMChooserFormProps<RelationDescriptor> {
+    relationType: RelationTypes;
+}
+export declare const TMRelationChooserForm: React.FunctionComponent<ITMRelationChooserFormProps>;
+export declare const TMRelationIdViewer: ({ relationType, relationId, showIcon, noneSelectionText }: {
+    relationType: RelationTypes;
+    relationId?: number;
+    showIcon?: boolean;
+    noneSelectionText?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const TMRelationIcon: ({ rd, relationType }: {
+    rd: RelationDescriptor | undefined;
+    relationType?: RelationTypes;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const TMRelationTooltip: ({ rd, relationType, children }: {
+    rd?: RelationDescriptor;
+    relationType: RelationTypes | undefined;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/components/choosers/TMRelationChooser.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { SDK_Globals, RelationTypes, RelationCacheService, DcmtTypeListCacheService, SDK_Localizator } from '@topconsultnpm/sdk-ts';
+import { IconSearch, IconRelationManyToMany, IconRelationOneToMany, SDKUI_Localizator } from '../../helper';
+import TMChooserForm from '../forms/TMChooserForm';
+import { StyledDivHorizontal, StyledTooltipContainer, StyledTooltipItem, StyledTooltipSeparatorItem } from '../base/Styled';
+import TMSpinner from '../base/TMSpinner';
+import TMSummary from '../editors/TMSummary';
+import TMTooltip from '../base/TMTooltip';
+const TMRelationChooser = ({ tmSession, icon, dataSource, disabled, backgroundColor, borderRadius = '4px', buttons = [], placeHolder = `<${SDKUI_Localizator.NoneSelection}>`, openEditorOnSummaryClick, showBorder = true, showId = false, elementStyle, allowMultipleSelection, values, isModifiedWhen, label, width, height, showClearButton = false, validationItems = [], relationType, onValueChanged }) => {
+    const [showChooser, setShowChooser] = useState(false);
+    useEffect(() => {
+        TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDKUI_Localizator.Relations} ...` });
+        RelationCacheService.GetAllAsync().then(() => { TMSpinner.hide(); });
+    }, [values]);
+    const renderTemplate = () => {
+        return (_jsx(StyledDivHorizontal, { style: { minWidth: '125px' }, children: placeHolder && (!values || values.length <= 0)
+                ? _jsx("p", { children: placeHolder })
+                : _jsxs(_Fragment, { children: [_jsx(TMRelationIdViewer, { relationType: relationType, relationId: values?.[0], showIcon: true }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }) }));
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { icon: icon, backgroundColor: backgroundColor, buttons: buttons, showBorder: showBorder, borderRadius: borderRadius, hasValue: values && values.length > 0, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => !disabled && setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, label: label, width: width, height: height, template: renderTemplate(), openEditorOnSummaryClick: openEditorOnSummaryClick, onClearClick: showClearButton ? () => { !disabled && onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
+                _jsx(TMRelationChooserForm, { relationType: relationType, tmSession: tmSession, allowMultipleSelection: allowMultipleSelection, dataSource: dataSource, selectedIDs: values, onClose: () => setShowChooser(false), onChoose: (IDs) => { onValueChanged?.(IDs); } })] }));
+};
+export default TMRelationChooser;
+export const TMRelationChooserForm = (props) => {
+    // const [showId, setShowId] = useState<boolean>(false);
+    const dataColumns = useMemo(() => {
+        return [
+            { dataField: 'name', width: 'max' }
+        ];
+    }, []);
+    const getItems = async (refreshCache) => {
+        let tms = SDK_Globals.tmSession;
+        if (refreshCache)
+            RelationCacheService.RemoveAll(tms);
+        let count = RelationCacheService.CacheAllCount(tms);
+        if (count <= 0)
+            TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDKUI_Localizator.Relations} ...` });
+        let rels = await RelationCacheService.GetAllAsync(tms, false, refreshCache);
+        if (count <= 0)
+            TMSpinner.hide();
+        rels = rels.filter((r) => r.relationType == props.relationType).slice();
+        return rels;
+    };
+    // const handleShowIdChanged = () => { setShowId(!showId); };
+    return (_jsx(TMChooserForm, { title: SDKUI_Localizator.Relations, allowMultipleSelection: props.allowMultipleSelection, hasShowOnlySelectedItems: true, width: props.width, height: props.height, selectedIDs: props.selectedIDs, cellRenderIcon: (data) => { return _jsx(TMRelationIcon, { rd: data.data, relationType: props.relationType }); }, showDefaultColumns: false, hasShowId: true, columns: dataColumns, dataSource: props.dataSource, getItems: getItems, onClose: props.onClose, onChoose: (IDs) => props.onChoose?.(IDs) }));
+};
+export const TMRelationIdViewer = ({ relationType, relationId, showIcon = false, noneSelectionText = `<${SDKUI_Localizator.NoneSelection}>` }) => {
+    const [rel, setRel] = useState();
+    let relTemp;
+    useEffect(() => {
+        if (!relationId || relationId == 0) {
+            setRel(undefined);
+            return;
+        }
+        TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDKUI_Localizator.Relations} ...` });
+        RelationCacheService.GetAllAsync().then((rels) => {
+            let selectedRels = rels.filter((r) => r.id == relationId);
+            if (selectedRels) {
+                relTemp = selectedRels[0];
+                setRel(relTemp);
+            }
+            TMSpinner.hide();
+        });
+    }, [relationId]);
+    return (_jsxs(StyledDivHorizontal, { children: [showIcon && _jsx(TMRelationIcon, { rd: rel, relationType: relationType }), _jsx("p", { style: { textAlign: 'left', marginLeft: showIcon ? '5px' : '' }, children: rel ? rel.name : noneSelectionText })] }));
+};
+export const TMRelationIcon = ({ rd, relationType }) => {
+    let icon = relationType == RelationTypes.ManyToMany ? _jsx(IconRelationManyToMany, { height: '17px', width: '17px' }) : _jsx(IconRelationOneToMany, { height: '17px', width: '17px' });
+    return (_jsx(TMRelationTooltip, { rd: rd, relationType: relationType, children: icon }));
+};
+async function DcmtType_ID2NameAsync(tid) {
+    if (tid == undefined)
+        return '';
+    let dtd = await DcmtTypeListCacheService.GetAsync(tid);
+    if (dtd == undefined)
+        return '';
+    return dtd.name ?? '';
+}
+export const TMRelationTooltip = ({ rd, relationType, children }) => {
+    const [masterName, setMasterName] = useState('');
+    const [detailName, setDetailName] = useState('');
+    useEffect(() => {
+        if (rd) {
+            DcmtType_ID2NameAsync(rd.masterTID).then((name) => setMasterName(name ?? ''));
+            DcmtType_ID2NameAsync(rd.detailTID).then((name) => setDetailName(name ?? ''));
+        }
+    }, [rd]);
+    const renderTooltipContent = (rd) => {
+        return (!rd ? null
+            : _jsxs(StyledTooltipContainer, { children: [_jsx(StyledTooltipItem, { children: `${rd.name})} (RelationId: ${rd.id})` }), _jsx(StyledTooltipSeparatorItem, {}), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.RelationType}: ${SDKUI_Localizator.RelationManyToMany}` }), _jsx(StyledTooltipItem, { children: `${SDK_Localizator.DcmtType} 'master': ${masterName} - TID: ${rd.masterTID}` }), _jsx(StyledTooltipItem, { children: `${SDK_Localizator.DcmtType} 'detail': ${detailName} - TID: ${rd.detailTID}` })] }));
+    };
+    return (_jsx(TMTooltip, { content: renderTooltipContent(rd), children: children }));
+};

package/lib/components/choosers/TMUserChooser.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import { UserDescriptor } from '@topconsultnpm/sdk-ts';
+import { ITMChooserFormProps, ITMChooserProps } from '../../ts';
+interface ITMUserChooserProps extends ITMChooserProps {
+    /** Contains the selected values */
+    values?: number[];
+    /** Predicate function to filter users */
+    filter?: (value: UserDescriptor, index: number, array: UserDescriptor[]) => unknown;
+    /** Displays the border */
+    showBorder?: boolean;
+    /** Hide refresh data button */
+    hideRefresh?: boolean;
+    /** Hide show ID button */
+    hideShowId?: boolean;
+    /** Initial value for showChooser */
+    initialShowChooser?: boolean;
+}
+declare const TMUserChooser: React.FunctionComponent<ITMUserChooserProps>;
+export default TMUserChooser;
+interface ITMUserChooserFormProps extends ITMChooserFormProps<UserDescriptor> {
+    /** predicate function per filtrare i metadati. Significativo per un solo tid (tids)  */
+    filter?: (value: UserDescriptor, index: number, array: UserDescriptor[]) => unknown;
+    /** Nascondi pulsante aggiorna dati */
+    hideRefresh?: boolean;
+    /** Nascondi pulsante mostra ID */
+    hideShowId?: boolean;
+}
+export declare const TMUserChooserForm: React.FunctionComponent<ITMUserChooserFormProps>;
+export declare const TMUserIdViewer: ({ userId, showIcon, noneSelectionText }: {
+    userId?: number;
+    showIcon?: boolean;
+    noneSelectionText?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const TMUserIcon: ({ ud }: {
+    ud?: UserDescriptor;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export declare const TMUserTooltip: ({ ud, children }: {
+    ud?: UserDescriptor;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/components/choosers/TMUserChooser.js

@@ -0,0 +1,141 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { OwnershipLevels, SDK_Localizator, UserLevels, UserListCacheService } from '@topconsultnpm/sdk-ts';
+import { SDKUI_Localizator, IconSearch, IconUserLevelMember, IconUserLevelAdministrator, IconUserLevelSystemAdministrator, IconUserLevelAutonomousAdministrator, IconWarning, LocalizeOwnershipLevels, LocalizeUserLevels } from '../../helper';
+import { StyledDivHorizontal, StyledTooltipContainer, StyledTooltipSeparatorItem } from '../base/Styled';
+import TMSpinner from '../base/TMSpinner';
+import TMTooltip from '../base/TMTooltip';
+import TMSummary from '../editors/TMSummary';
+import TMChooserForm from '../forms/TMChooserForm';
+import { TMColors } from '../../utils/theme';
+import { TMExceptionBoxManager } from '../base/TMPopUp';
+const TMUserChooser = ({ labelColor, titleForm, filter, readOnly = false, icon, width, dataSource, backgroundColor, openChooserBySingleClick, buttons = [], disabled = false, showBorder = true, hideRefresh = false, hideShowId = false, elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, validationItems = [], onValueChanged, showClearButton, initialShowChooser = false }) => {
+    const [showChooser, setShowChooser] = useState(initialShowChooser);
+    useEffect(() => {
+        setShowChooser(initialShowChooser);
+    }, [initialShowChooser]);
+    const summaryInputRef = useRef(null);
+    const renderTemplate = () => {
+        const isPlaceholder = values?.[0] === placeHolder;
+        return (_jsxs(StyledDivHorizontal, { style: { minWidth: '125px', color: isPlaceholder ? '#a9a9a9' : 'inherit' }, children: [values && values.length > 0 && _jsx(TMUserIdViewer, { userId: values?.[0], showIcon: true, noneSelectionText: '' }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }));
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { ref: summaryInputRef, width: width, disabled: disabled, placeHolder: placeHolder, readOnly: readOnly, labelColor: labelColor, icon: icon, backgroundColor: backgroundColor, buttons: buttons, showBorder: showBorder, hasValue: values && values.length > 0, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => !readOnly && setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, openEditorOnSummaryClick: openChooserBySingleClick, label: label, template: renderTemplate(), onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
+                _jsx(TMUserChooserForm, { title: titleForm, allowMultipleSelection: allowMultipleSelection, hasShowOnlySelectedItems: true, dataSource: dataSource, filter: filter, selectedIDs: values, hideRefresh: hideRefresh, hideShowId: hideShowId, onClose: () => {
+                        setShowChooser(false);
+                        summaryInputRef.current?.focus();
+                    }, onChoose: (IDs) => { onValueChanged?.(IDs); } })] }));
+};
+export default TMUserChooser;
+export const TMUserChooserForm = ({ allowMultipleSelection, columns, hideRefresh = false, hideShowId = false, startWithShowOnlySelectedItems = true, filter, title, hasShowOnlySelectedItems, width, height, selectedIDs, dataSource, onClose, onChoose }) => {
+    const dataColumns = useMemo(() => {
+        return [
+            { dataField: 'domain', caption: SDKUI_Localizator.Domain, dataType: 'string' },
+            { dataField: 'name', caption: SDKUI_Localizator.UserName, dataType: 'string' }
+        ];
+    }, []);
+    const getItems = async (refreshCache) => {
+        TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.Users} ...` });
+        if (refreshCache)
+            UserListCacheService.RemoveAll();
+        let allUsers = await UserListCacheService.GetAllAsync();
+        let users = filter ? allUsers?.filter(filter) : allUsers;
+        TMSpinner.hide();
+        return users;
+    };
+    const getTitle = () => {
+        let title = SDK_Localizator.Users;
+        if (title)
+            title += `: ${title}`;
+        return title;
+    };
+    const cellRenderIcon = (data) => _jsx(TMUserIcon, { ud: data.data });
+    return (_jsx(TMChooserForm, { title: getTitle(), allowMultipleSelection: allowMultipleSelection, startWithShowOnlySelectedItems: startWithShowOnlySelectedItems, hasShowOnlySelectedItems: hasShowOnlySelectedItems, width: width, height: height, manageUseLocalizedName: false, columns: columns ?? dataColumns, showDefaultColumns: false, selectedIDs: selectedIDs, cellRenderIcon: cellRenderIcon, dataSource: dataSource, getItems: getItems, hasShowId: !hideShowId, hideRefresh: hideRefresh, onClose: onClose, onChoose: (IDs) => onChoose?.(IDs) }));
+};
+export const TMUserIdViewer = ({ userId, showIcon = false, noneSelectionText = `<${SDKUI_Localizator.NoneSelection}>` }) => {
+    const [ud, setUd] = useState();
+    useEffect(() => {
+        if (!userId || userId <= 0) {
+            setUd(undefined);
+            return;
+        }
+        TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.Users} ...` });
+        UserListCacheService.GetAsync(userId).then((ud) => { setUd(ud); TMSpinner.hide(); }).catch((err) => { TMExceptionBoxManager.show({ exception: err }); });
+    }, [userId]);
+    const getIcon = () => {
+        if (!showIcon)
+            return null;
+        if (!userId)
+            return null;
+        return ud ?
+            _jsx(TMUserIcon, { ud: ud })
+            :
+                _jsx(TMTooltip, { content: SDKUI_Localizator.ValueNotPresent, children: _jsx(IconWarning, { color: TMColors.warning }) });
+    };
+    const getDescription = () => {
+        if (!userId)
+            return undefined;
+        return ud ? getCompleteUserName(ud.domain, ud.name) : userId.toString() ?? noneSelectionText;
+    };
+    return (_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '4px' }, children: [getIcon(), _jsx("span", { children: getDescription() })] })
+    // <StyledDivHorizontal>
+    //     {getIcon()}
+    //     <p style={{ textAlign: 'left', marginLeft: showIcon ? '5px' : '', opacity: ud ? 1 : 0.5 }}>
+    //         {getDescription()}
+    //     </p>
+    // </StyledDivHorizontal>
+    );
+};
+export const TMUserIcon = ({ ud }) => {
+    if (!ud)
+        return null;
+    let isExpired = User_IsExpired(ud);
+    let icon = getUserIcon(ud.level, ud.ownershipLevel, isExpired);
+    return (_jsx(TMUserTooltip, { ud: ud, children: icon }));
+};
+export const TMUserTooltip = ({ ud, children }) => {
+    const renderTooltipContent = (ud) => {
+        let isExpired = User_IsExpired(ud);
+        return (!ud ? null
+            : _jsxs(StyledTooltipContainer, { children: [_jsx("div", { children: `ID: ${ud.id}` }), _jsx("div", { children: `${SDKUI_Localizator.Name}: ${getCompleteUserName(ud.domain, ud.name)}` }), ud.description && _jsx("div", { children: `${SDKUI_Localizator.Description}: ${ud.description}` }), ud.type && _jsxs("div", { children: [SDKUI_Localizator.Type, ": ", ud.type] }), ud.level && _jsxs("div", { children: [SDKUI_Localizator.UserLevel, ": ", LocalizeUserLevels(ud.level)] }), _jsxs("div", { children: [SDKUI_Localizator.Valid, ": ", isExpired ? SDKUI_Localizator.No : SDKUI_Localizator.Yes, " - ", SDKUI_Localizator.Disabled, ": ", ud.disabled ? SDKUI_Localizator.Yes : SDKUI_Localizator.No] }), _jsx(StyledTooltipSeparatorItem, {}), _jsxs("div", { children: [SDKUI_Localizator.OwnerName, ": ", ud.ownerName, " (", ud.ownerID, ")"] }), _jsxs("div", { children: [SDKUI_Localizator.OwnershipLevel, ": ", LocalizeOwnershipLevels(ud.ownershipLevel)] }), _jsxs("div", { children: [SDKUI_Localizator.CreationTime, ": ", ud.creationTime?.toDateString()] }), _jsxs("div", { children: [SDKUI_Localizator.LastUpdateTime, ": ", ud.lastUpdateTime?.toDateString()] })] }));
+    };
+    return (_jsx(TMTooltip, { content: renderTooltipContent(ud), children: children }));
+};
+const getCompleteUserName = (domain, name) => {
+    if (!name)
+        return undefined;
+    if (!domain)
+        return name;
+    return domain + "\\" + name;
+};
+function User_IsExpired(d) {
+    if (d == undefined)
+        return false;
+    let ud = d;
+    const today = new Date();
+    return (ud.validFrom && today < ud.validFrom) || (ud.validTo && today > ud.validTo) || ud.disabled;
+}
+const getUserIcon = (userLevel, level, isExpired) => {
+    let ownershipColor = "";
+    if (isExpired)
+        ownershipColor = "grey";
+    else if (level) {
+        switch (level) {
+            case OwnershipLevels.DirectOwner:
+                ownershipColor = "green";
+                break;
+            case OwnershipLevels.IndirectOwner:
+                ownershipColor = "gold";
+                break;
+            case OwnershipLevels.NotOwner:
+                ownershipColor = "red";
+                break;
+        }
+    }
+    switch (userLevel) {
+        case UserLevels.Member: return _jsx(IconUserLevelMember, { fontSize: 16, color: ownershipColor });
+        case UserLevels.Administrator: return _jsx(IconUserLevelAdministrator, { fontSize: 16, color: ownershipColor });
+        case UserLevels.SystemAdministrator: return _jsx(IconUserLevelSystemAdministrator, { fontSize: 16, color: ownershipColor });
+        case UserLevels.AutonomousAdministrator: return _jsx(IconUserLevelAutonomousAdministrator, { fontSize: 16, color: ownershipColor });
+        default: return _jsx(IconUserLevelMember, { fontSize: 16, color: ownershipColor });
+    }
+};

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ITMEditorBase } from '../base/TMEditorBase';
+export interface ITMCheckBox extends ITMEditorBase {
+    label?: string;
+    value?: boolean | number | undefined;
+    onValueChanged?: (e: any) => void;
+}
+declare const TMCheckBox: React.FunctionComponent<ITMCheckBox>;
+export default TMCheckBox;

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 : props.$labelColor ? props.$labelColor : 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 = ({ labelColor, 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, { "$labelColor": labelColor, 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,17 @@
+import React from 'react';
+import { ValidationItem } from '@topconsultnpm/sdk-ts';
+import { IDateBoxOptions } from 'devextreme-react/date-box';
+import { DateDisplayTypes } from '../../helper';
+interface ITMDateBoxProps extends IDateBoxOptions {
+    dateDisplayType?: DateDisplayTypes;
+    validationItems?: ValidationItem[];
+    isModifiedWhen?: boolean;
+    useDateSerializationFormat?: boolean;
+    containerElement?: Element;
+    buttons?: any;
+    resetTimeToZeroOnKeyPress?: boolean;
+    icon?: any;
+    padding?: string;
+}
+declare const TMDateBox: React.FC<ITMDateBoxProps>;
+export default TMDateBox;

package/lib/components/editors/TMDateBox.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, 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) => {
+    const resetTimeToZero = props.resetTimeToZeroOnKeyPress ?? true;
+    useEffect(() => {
+        let htmlElement = dateBoxRef?.current?.instance().element();
+        if (!htmlElement)
+            return;
+        let color = props.isModifiedWhen ? TMColors.tertiary : TMColors.border_normal;
+        let inputContainer = htmlElement.getElementsByClassName("dx-texteditor-input-container")[0];
+        if (inputContainer) {
+            inputContainer.style.background = props.readOnly ? 'linear-gradient(white 20%, #d6d6d6 80%)' : '';
+            inputContainer.style.color = props.readOnly ? '#525252' : 'transparent';
+        }
+        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, props.readOnly]);
+    const dateBoxRef = useRef(null);
+    // soluzione tratta da https://supportcenter.devexpress.com/ticket/details/t1025617/setting-default-time-in-datebox
+    const dropDownOptions = {
+        container: props.containerElement,
+        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("div", { style: { display: 'flex', alignItems: 'center', width: '100%', padding: props.padding }, children: [props.icon && (_jsx("span", { style: { marginRight: '8px', marginTop: '8px', display: 'flex', alignItems: 'center' }, children: props.icon })), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '5px', width: '100%' }, children: [_jsx(DateBox, { readOnly: props.readOnly, ref: dateBoxRef, showClearButton: props.showClearButton, dateSerializationFormat: props.useDateSerializationFormat ? 'yyyy-MM-ddTHH:mm:ss' : undefined, disabled: props.disabled, displayFormat: props.displayFormat ?? Globalization.getDateDisplayFormat(props.dateDisplayType), dropDownOptions: dropDownOptions, label: props.label, labelMode: 'static', type: getType(), useMaskBehavior: true, height: '28px', value: props.value, width: props.width, valueChangeEvent: 'keyup input change', onValueChange: (e) => { props.onValueChange?.(e); }, onInitialized: (e) => { props.onInitialized?.(e); }, onContentReady: (e) => { props.onContentReady?.(e); }, placeholder: props.placeholder, 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) => {
+                            if (resetTimeToZero) {
+                                if (props.value != undefined)
+                                    return;
+                                if (!e.value)
+                                    return;
+                                const currentDate = new Date(e.value);
+                                currentDate.setHours(0, 0, 0, 0);
+                                e.component.option("value", currentDate.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,62 @@
+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, TMEditorsDefaultBorderRadius, editorColorManager } from "./TMEditorStyled";
+import TMLayoutContainer, { TMLayoutItem } from "../base/TMLayout";
+import TMVilViewer from "../base/TMVilViewer";
+import TMTooltip from "../base/TMTooltip";
+const StyledDropDownWrapper = styled.div `
+  position: relative;
+  width: ${props => props.$width};
+  display: flex;
+  align-items: center;
+`;
+const StyledDropDown = styled.select `
+    width: 100%;
+    padding: 5px 35px 3px 9px; /* padding-right leaves space for buttons + custom arrow */
+    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: ${props => props.$borderRadius ?? TMEditorsDefaultBorderRadius};
+    font-size: ${props => props.$fontSize};
+    appearance: none; /* remove native arrow */
+    background-color: white;
+
+    &: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)};
+    }
+`;
+const ButtonsContainer = styled.div `
+    position: absolute;
+    right: 20px; /* adjust depending on arrow size */
+    display: flex;
+    align-items: center;
+    gap: 5px; /* spacing between buttons */
+`;
+const CustomArrow = styled.div `
+    position: absolute;
+    right: 5px;
+    pointer-events: none;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-top: 5px solid ${TMColors.text_normal};
+`;
+const StyledDropDownEditorButton = styled.div `
+    color: ${TMColors.button_icon};
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+`;
+const TMDropDown = ({ validationItems = [], disabled = false, elementStyle, isModifiedWhen, labelPosition = 'left', label, icon, width = '100%', fontSize = FontSize.defaultFontSize, dataSource, value, onValueChanged, buttons = [], }) => {
+    const [isFocused, setIsFocused] = useState(false);
+    const renderedLeftLabelTextBox = () => (_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 }), _jsxs(StyledDropDownWrapper, { "$width": width, children: [_jsx(StyledDropDown, { value: value, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), "$disabled": disabled, disabled: disabled, "$fontSize": fontSize, "$isModified": isModifiedWhen, "$vil": validationItems, onChange: onValueChanged, children: dataSource?.map((data, index) => (_jsx("option", { value: data.value, children: data.display }, index))) }), buttons.length > 0 && (_jsx(ButtonsContainer, { children: buttons.map((buttonItem) => (_jsx(StyledDropDownEditorButton, { onClick: buttonItem.onClick, children: _jsx(TMTooltip, { content: buttonItem.text, children: buttonItem.icon }) }, buttonItem.text))) })), _jsx(CustomArrow, {})] }), _jsx(TMVilViewer, { vil: validationItems })] }) })] }));
+    return _jsx("div", { style: elementStyle, children: renderedLeftLabelTextBox() });
+};
+export default TMDropDown;

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

@@ -0,0 +1,41 @@
+import { ValidationItem } from '@topconsultnpm/sdk-ts';
+export declare const TMEditorsDefaultBorderRadius = "5px";
+export declare const TMEditorsDefaultLabelFontSize = "0.9rem";
+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;
+    $borderRadius?: string;
+}>> & 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;
+    $color?: string;
+}>> & string;
+export declare const StyledTextareaEditor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, {
+    $vil: ValidationItem[];
+    $width: string;
+    $isModified: boolean;
+    $fontSize: string;
+    $disabled: boolean;
+    $isMobile?: boolean;
+    $maxHeight?: string;
+    $borderRadius?: string;
+    $resize?: boolean;
+}>> & string;