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

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

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

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

@@ -1,44 +0,0 @@
-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;
-    /** Allow showing all users with toggle button */
-    allowShowAllUsers?: 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;
-    /** Allow showing all users with toggle button */
-    allowShowAllUsers?: 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

@@ -1,157 +0,0 @@
-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, IconShowAllUsersOff, IconShowAllUsers } 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';
-import TMButton from '../base/TMButton';
-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, allowShowAllUsers = 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, allowShowAllUsers: allowShowAllUsers, 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, allowShowAllUsers = false }) => {
-    const [currentDataSource, setCurrentDataSource] = useState(dataSource);
-    const [showingAllUsers, setShowingAllUsers] = useState(false);
-    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 handleToggleAllUsers = () => {
-        if (showingAllUsers) {
-            // Torna indietro: ripristina il dataSource originale
-            setCurrentDataSource(dataSource);
-            setShowingAllUsers(false);
-        }
-        else {
-            // Mostra tutti: rimuove il dataSource per usare getItems
-            setCurrentDataSource(undefined);
-            setShowingAllUsers(true);
-        }
-    };
-    const getTitle = () => {
-        let title = SDK_Localizator.Users;
-        if (title)
-            title += `: ${title}`;
-        return title;
-    };
-    const cellRenderIcon = (data) => _jsx(TMUserIcon, { ud: data.data });
-    const customButton = (allowShowAllUsers && dataSource) ? (_jsx(TMButton, { btnStyle: 'toolbar', caption: showingAllUsers ? SDKUI_Localizator.HideAll : SDKUI_Localizator.ShowAll, onClick: handleToggleAllUsers, icon: showingAllUsers ? _jsx(IconShowAllUsersOff, {}) : _jsx(IconShowAllUsers, {}) })) : undefined;
-    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: currentDataSource, getItems: getItems, hasShowId: !hideShowId, hideRefresh: hideRefresh, customButtons: customButton, 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

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

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

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

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

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

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

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