@topconsultnpm/sdkui-react-beta 6.6.15 → 6.6.17

package/lib/components/base/TMEditorBase.d.ts

@@ -4,8 +4,14 @@ export type Colors = 'error' | 'warning' | 'success' | 'info' | 'primary' | 'sec
 type IconModes = 'outside' | 'inside' | 'none';
 type LabelModes = 'left' | 'top' | 'none';
 export type Sizes = 'small' | 'medium' | 'large';
+export type TMEditorButtonData = {
+    icon: any;
+    text?: string;
+    onClick?: () => void;
+};
 export interface ITMEditorBase {
     backgroundColor?: string;
+    buttons?: TMEditorButtonData[];
     customActionIcon?: any;
     disabled?: boolean;
     elementStyle?: React.CSSProperties;
@@ -24,9 +30,9 @@ export interface ITMEditorBase {
     placeHolder?: string;
     readOnly?: boolean;
     showId?: boolean;
+    showClearButton?: boolean;
     value?: any;
     validationItems?: ValidationItem[];
     width?: string;
-    onCustomActionClick?: VoidFunction;
 }
 export {};

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

@@ -8,8 +8,6 @@ interface ITMDataListItemChooserProps extends ITMChooserProps {
     values?: string[];
     /** Visualizza il bordo  */
     showBorder?: boolean;
-    /** Se presente, visualizza il bottone Pulisci ed esegue  */
-    hasClear?: boolean;
 }
 declare const TMDataListItemChooser: React.FunctionComponent<ITMDataListItemChooserProps>;
 export default TMDataListItemChooser;

package/lib/components/choosers/TMDataListItemChooser.js

@@ -8,12 +8,12 @@ import TMSpinner from '../base/TMSpinner';
 import TMSummary from '../editors/TMSummary';
 import TMChooserForm from '../forms/TMChooserForm';
 import TMDataListItemViewer from '../viewers/TMDataListItemViewer';
-const TMDataListItemChooser = ({ dataListId, backgroundColor, showBorder = true, elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, validationItems = [], onValueChanged, hasClear }) => {
+const TMDataListItemChooser = ({ dataListId, backgroundColor, showBorder = true, buttons = [], elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, showClearButton = false, validationItems = [], onValueChanged }) => {
     const [showChooser, setShowChooser] = useState(false);
     const renderTemplate = () => {
         return (_jsxs(StyledDivHorizontal, { style: { minWidth: '125px' }, children: [placeHolder && (!values || values.length <= 0) && _jsx("p", { children: placeHolder }), values && values.length > 0 && _jsx(TMDataListItemViewer, { dataListId: dataListId, value: values?.[0] }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }));
     };
-    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { backgroundColor: backgroundColor, showBorder: showBorder, iconEditButton: _jsx(IconSearch, {}), onEditorClick: () => setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, label: label, template: renderTemplate(), onClearClick: hasClear ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
+    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { buttons: buttons, backgroundColor: backgroundColor, showBorder: showBorder, hasValue: values && values.length > 0, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, label: label, template: renderTemplate(), onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
                 _jsx(TMDataListItemChooserForm, { allowMultipleSelection: allowMultipleSelection, dataListId: dataListId, selectedIDs: values, onClose: () => setShowChooser(false), onChoose: (IDs) => { onValueChanged?.(IDs); } })] }));
 };
 export default TMDataListItemChooser;

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

@@ -10,8 +10,6 @@ interface ITMDcmtTypeChooser extends ITMChooserProps {
     /** Visualizza il bordo  */
     showBorder?: boolean;
     borderRadius?: string;
-    /** Se presente, visualizza il bottone ed esegue  */
-    hasClear?: boolean;
     openEditorOnSummaryClick?: boolean;
 }
 declare const TMDcmtTypeChooser: React.FunctionComponent<ITMDcmtTypeChooser>;

package/lib/components/choosers/TMDcmtTypeChooser.js

@@ -7,7 +7,7 @@ import { StyledDivHorizontal } from '../base/Styled';
 import TMTidViewer, { TMDcmtTypeIcon } from '../viewers/TMTidViewer';
 import TMSummary from '../editors/TMSummary';
 import TMChooserForm from '../forms/TMChooserForm';
-const TMDcmtTypeChooser = ({ tmSession, dataSource, disabled, backgroundColor, borderRadius = '4px', placeHolder = `<${SDKUI_Localizator.NoneSelection}>`, openEditorOnSummaryClick, showBorder = true, showId = false, elementStyle, allowMultipleSelection, ShowOnlyDcmtTypes, ShowOnlySAP, filterTemplateTID, values, isModifiedWhen, label, width, height, validationItems = [], onValueChanged, hasClear }) => {
+const TMDcmtTypeChooser = ({ tmSession, dataSource, disabled, backgroundColor, borderRadius = '4px', buttons = [], placeHolder = `<${SDKUI_Localizator.NoneSelection}>`, openEditorOnSummaryClick, showBorder = true, showId = false, elementStyle, allowMultipleSelection, ShowOnlyDcmtTypes, ShowOnlySAP, filterTemplateTID, values, isModifiedWhen, label, width, height, showClearButton = false, validationItems = [], onValueChanged }) => {
     const [showChooser, setShowChooser] = useState(false);
     useEffect(() => {
         TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.ListDcmtTypeOrView} ...` });
@@ -17,7 +17,7 @@ const TMDcmtTypeChooser = ({ tmSession, dataSource, disabled, backgroundColor, b
     const renderTemplate = () => {
         return (_jsxs(StyledDivHorizontal, { style: { width: 'max-content', height: '100%' }, children: [values && _jsx(TMTidViewer, { tmSession: tmSession, tid: values[0], showIcon: true, showId: showId, noneSelectionText: placeHolder }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }));
     };
-    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { backgroundColor: backgroundColor, showBorder: showBorder, borderRadius: borderRadius, iconEditButton: _jsx(IconSearch, {}), onEditorClick: () => !disabled && setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, label: label, width: width, height: showBorder ? height : '24px', template: renderTemplate(), openEditorOnSummaryClick: openEditorOnSummaryClick, onClearClick: hasClear ? () => { !disabled && onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
+    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { 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: showBorder ? height : '24px', template: renderTemplate(), openEditorOnSummaryClick: openEditorOnSummaryClick, onClearClick: showClearButton ? () => { !disabled && onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
                 _jsx(TMDcmtTypeChooserForm, { tmSession: tmSession, allowMultipleSelection: allowMultipleSelection, dataSource: dataSource, selectedIDs: values, ShowOnlyDcmtTypes: ShowOnlyDcmtTypes, ShowOnlySAP: ShowOnlySAP, filterTemplateTID: filterTemplateTID, onClose: () => setShowChooser(false), onChoose: (IDs) => { onValueChanged?.(IDs); } })] }));
 };
 export default TMDcmtTypeChooser;

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

@@ -12,8 +12,6 @@ interface ITMDynDataListItemChooserProps extends ITMChooserProps {
     values?: string[];
     /** Visualizza il bordo  */
     showBorder?: boolean;
-    /** Se presente, visualizza il bottone Pulisci ed esegue  */
-    hasClear?: boolean;
     /** Se presente, sono i parametri da passare alla query per recuperare il dataSource  */
     queryParamsDynDataList?: string[];
     /** Indica quali liste dati dinamiche aggiornare in cascata  */

package/lib/components/choosers/TMDynDataListItemChooser.js

@@ -23,7 +23,7 @@ export const IsParametricQuery = (qd) => {
     }
     return false;
 };
-const TMDynDataListItemChooser = ({ tid, md, layoutMode = LayoutModes.None, queryParamsDynDataList, backgroundColor, showBorder = true, elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, validationItems = [], onValueChanged, onCascadeRefreshDynDataLists, hasClear }) => {
+const TMDynDataListItemChooser = ({ tid, md, layoutMode = LayoutModes.None, queryParamsDynDataList, buttons = [], backgroundColor, showBorder = true, elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, validationItems = [], onValueChanged, onCascadeRefreshDynDataLists, showClearButton }) => {
     const [showChooser, setShowChooser] = useState(false);
     const [dynDl, setDynDl] = useState();
     const [dataSource, setDataSource] = useState();
@@ -67,7 +67,7 @@ const TMDynDataListItemChooser = ({ tid, md, layoutMode = LayoutModes.None, quer
     const renderTemplate = () => {
         return (_jsxs(StyledDivHorizontal, { style: { minWidth: '125px' }, children: [placeHolder && (!values || values.length <= 0) && _jsx("p", { children: placeHolder }), values && values.length > 0 && dynDl && dataSource && _jsxs(StyledDivHorizontal, { children: [_jsx(IconDetails, {}), _jsx("p", { style: { marginLeft: '5px' }, children: dataSource.dtdResult?.rows?.filter(o => o[dynDl.selectItemForValue ?? 0] == values?.[0])?.[0]?.[dynDl.selectItemForDescription ?? 0] })] }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }));
     };
-    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { backgroundColor: backgroundColor, showBorder: showBorder, iconEditButton: _jsx(IconSearch, {}), onEditorClick: () => setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, label: label, template: renderTemplate(), onClearClick: hasClear ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
+    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { backgroundColor: backgroundColor, buttons: buttons, showBorder: showBorder, hasValue: values && values.length > 0, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, label: label, template: renderTemplate(), onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
                 _jsx(TMDynDataListItemChooserForm, { TID: tid, MID: md?.id, dynDL: dynDl, allowMultipleSelection: allowMultipleSelection, searchResult: dataSource, selectedIDs: values, onClose: () => setShowChooser(false), onChoose: (IDs) => {
                         onValueChanged?.(IDs);
                         if (!dynDl)

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

@@ -20,7 +20,6 @@ interface ITMMetadataChooserProps extends ITMChooserProps {
     getColorIndex?: (tid: TID_Alias) => string;
     showBorder?: boolean;
     borderRadius?: string;
-    hasClear?: boolean;
     openEditorOnSummaryClick?: boolean;
     validationItems?: ValidationItem[];
 }

package/lib/components/choosers/TMMetadataChooser.js

@@ -12,12 +12,12 @@ import TMButton from '../base/TMButton';
 import TMSummary from '../editors/TMSummary';
 import TMChooserForm from '../forms/TMChooserForm';
 import TMSpinner from '../base/TMSpinner';
-const TMMetadataChooser = ({ tmSession, dataSource, inputDcmtTypesList, disabled, validationItems, getColorIndex, showCompleteMetadataName, qdShowOnlySelectItems, borderRadius = '4px', fontSize = FontSize.defaultFontSize, backgroundColor, openEditorOnSummaryClick, showBorder = true, showId = false, elementStyle, allowMultipleSelection, allowSysMetadata, value, values, isModifiedWhen, tids, label, width, height, onValueChanged, hasClear, qd, placeHolder }) => {
+const TMMetadataChooser = ({ tmSession, dataSource, buttons = [], inputDcmtTypesList, disabled, validationItems, getColorIndex, showCompleteMetadataName, qdShowOnlySelectItems, borderRadius = '4px', fontSize = FontSize.defaultFontSize, backgroundColor, openEditorOnSummaryClick, showBorder = true, showId = false, elementStyle, allowMultipleSelection, allowSysMetadata, value, values, isModifiedWhen, tids, label, width, height, onValueChanged, showClearButton, qd, placeHolder }) => {
     const [showChooser, setShowChooser] = useState(false);
     const renderTemplate = () => {
         return (_jsxs(StyledDivHorizontal, { style: { width: 'max-content', height: '100%' }, children: [values && _jsx(TMMidViewer, { tmSession: tmSession, tid_mid: values[0], showIcon: true, showId: showId, showCompleteName: showCompleteMetadataName }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` }), (values == undefined || values.length == 0) && _jsx("p", { children: placeHolder })] }));
     };
-    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { label: label, width: width, height: showBorder ? height : '24px', validationItems: validationItems, backgroundColor: backgroundColor, placeHolder: placeHolder, fontSize: fontSize, showBorder: showBorder, borderRadius: borderRadius, iconEditButton: _jsx(IconSearch, {}), openEditorOnSummaryClick: openEditorOnSummaryClick, onEditorClick: () => !disabled && setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, template: renderTemplate(), onClearClick: hasClear ? () => { onValueChanged?.([]); } : undefined }), showChooser &&
+    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { label: label, width: width, height: showBorder ? height : '24px', validationItems: validationItems, backgroundColor: backgroundColor, buttons: buttons, placeHolder: placeHolder, fontSize: fontSize, showBorder: showBorder, borderRadius: borderRadius, hasValue: values && values.length > 0, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), openEditorOnSummaryClick: openEditorOnSummaryClick, onEditorClick: () => !disabled && setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, template: renderTemplate(), onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined }), showChooser &&
                 _jsx(TMMetadataChooserForm, { tmSession: tmSession, allowMultipleSelection: allowMultipleSelection, height: '500px', width: '600px', allowSysMetadata: allowSysMetadata, getColorIndex: getColorIndex, dataSource: dataSource, inputDcmtTypesList: inputDcmtTypesList, tids: tids, qd: qd, qdShowOnlySelectItems: qdShowOnlySelectItems, selectedIDs: values, onClose: () => setShowChooser(false), onChoose: (tid_mids) => { onValueChanged?.(tid_mids); } })] }));
 };
 export default TMMetadataChooser;

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

@@ -6,8 +6,6 @@ interface ITMUserChooserProps extends ITMChooserProps {
     values?: number[];
     /** Visualizza il bordo  */
     showBorder?: boolean;
-    /** Se presente, visualizza il bottone Pulisci ed esegue  */
-    hasClear?: boolean;
 }
 declare const TMUserChooser: React.FunctionComponent<ITMUserChooserProps>;
 export default TMUserChooser;

package/lib/components/choosers/TMUserChooser.js

@@ -8,7 +8,7 @@ import TMSpinner from '../base/TMSpinner';
 import TMTooltip from '../base/TMTooltip';
 import TMSummary from '../editors/TMSummary';
 import TMChooserForm from '../forms/TMChooserForm';
-const TMUserChooser = ({ dataSource, backgroundColor, disabled = false, showBorder = true, elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, validationItems = [], onValueChanged, hasClear }) => {
+const TMUserChooser = ({ dataSource, backgroundColor, buttons = [], disabled = false, showBorder = true, elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, validationItems = [], onValueChanged, showClearButton }) => {
     const [showChooser, setShowChooser] = useState(false);
     useEffect(() => {
         if (!values || values.length <= 0)
@@ -21,7 +21,7 @@ const TMUserChooser = ({ dataSource, backgroundColor, disabled = false, showBord
                 ? _jsx("p", { children: placeHolder })
                 : _jsxs(_Fragment, { children: [_jsx(TMUserIdViewer, { userId: 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, { disabled: disabled, backgroundColor: backgroundColor, showBorder: showBorder, iconEditButton: _jsx(IconSearch, {}), onEditorClick: () => setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, label: label, template: renderTemplate(), onClearClick: hasClear ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
+    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { disabled: disabled, backgroundColor: backgroundColor, buttons: buttons, showBorder: showBorder, hasValue: values && values.length > 0, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, label: label, template: renderTemplate(), onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
                 _jsx(TMUserChooserForm, { allowMultipleSelection: allowMultipleSelection, dataSource: dataSource, selectedIDs: values, onClose: () => setShowChooser(false), onChoose: (IDs) => { onValueChanged?.(IDs); } })] }));
 };
 export default TMUserChooser;

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

@@ -7,6 +7,7 @@ interface ITMDateBoxProps extends IDateBoxOptions {
     isModifiedWhen?: boolean;
     useDateSerializationFormat?: boolean;
     containerElement?: Element;
+    buttons?: any;
 }
 declare const TMDateBox: (props: ITMDateBoxProps) => import("react/jsx-runtime").JSX.Element;
 export default TMDateBox;

package/lib/components/editors/TMDateBox.js

@@ -1,9 +1,11 @@
 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 { Button } from 'devextreme-react/cjs/date-box';
+import { DateDisplayTypes, Globalization, IconLayerGroup } from '../../helper';
 import { TMColors } from '../../utils/theme';
 import TMVilViewer from '../base/TMVilViewer';
+import ReactDOMServer from 'react-dom/server';
 const TMDateBox = (props) => {
     useEffect(() => {
         let htmlElement = dateBoxRef?.current?.instance().element();
@@ -65,6 +67,12 @@ const TMDateBox = (props) => {
                     const currentDate = new Date(e.value);
                     currentDate.setHours(0, 0, 0, 0);
                     e.component.option("value", currentDate.toISOString());
-                } }), _jsx(TMVilViewer, { vil: props.validationItems })] }));
+                }, children: props.buttons?.map((btn) => {
+                    return (_jsx(Button, { name: btn.text, location: "after", options: {
+                            icon: ReactDOMServer.renderToString(_jsx(IconLayerGroup, {})),
+                            stylingMode: 'text',
+                            onClick: () => btn?.onClick?.()
+                        } }, btn.text));
+                }) }), _jsx(TMVilViewer, { vil: props.validationItems })] }));
 };
 export default TMDateBox;

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

@@ -8,10 +8,9 @@ interface ITMSummary extends ITMEditorBase {
     iconeEditTooltip?: string;
     template?: React.ReactNode;
     openEditorOnSummaryClick?: boolean;
-    customBtn?: any;
+    hasValue?: boolean;
     onEditorClick?: () => void;
     onClearClick?: () => void;
-    onCustumBtnClick?: () => void;
     onValueChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 declare const TMSummary: React.FunctionComponent<ITMSummary>;

package/lib/components/editors/TMSummary.js

@@ -2,7 +2,7 @@ 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 { IconClear, IconPencil, SDKUI_Localizator } from '../../helper';
+import { IconClearButton, IconPencil, SDKUI_Localizator } from '../../helper';
 import TMLayoutContainer, { TMLayoutItem } from '../base/TMLayout';
 import TMVilViewer from '../base/TMVilViewer';
 import TMTooltip from '../base/TMTooltip';
@@ -46,11 +46,13 @@ const StyledEditorButtonIcon2 = styled.div `
         border-bottom-color: ${TMColors.primary};
      }
 `;
-const TMSummary = ({ customBtn, borderRadius = '4px', validationItems = [], label = '', onClearClick, onCustumBtnClick, openEditorOnSummaryClick, onEditorClick, backgroundColor = 'transparent', showBorder = true, isModifiedWhen, elementStyle, width = '100%', height = '100%', fontSize = FontSize.defaultFontSize, icon, showEditButton = true, iconEditButton, iconeEditTooltip, labelPosition = 'left', template, disabled = false, onValueChanged }) => {
+const TMSummary = ({ hasValue, borderRadius = '4px', validationItems = [], buttons = [], label = '', onClearClick, openEditorOnSummaryClick, onEditorClick, backgroundColor = 'transparent', showBorder = true, isModifiedWhen, elementStyle, width = '100%', height = '100%', fontSize = FontSize.defaultFontSize, icon, showEditButton = true, showClearButton, iconEditButton, iconeEditTooltip, labelPosition = 'left', template, disabled = false, onValueChanged }) => {
     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: () => { if (openEditorOnSummaryClick && !disabled)
                     onEditorClick?.(); }, onDoubleClick: () => { if (!openEditorOnSummaryClick && !disabled)
-                    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 && showEditButton && _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: iconeEditTooltip ?? 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 })] })] }) }));
+                    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: [showClearButton && hasValue && _jsx(StyledEditorButtonIcon2, { tabIndex: disabled ? -1 : 0, onKeyDown: (e) => e.code === 'Space' && onClearClick?.(), onClick: onClearClick, children: _jsx(TMTooltip, { content: SDKUI_Localizator.Clear, children: _jsx(IconClearButton, {}) }) }), !openEditorOnSummaryClick && showEditButton && _jsx(StyledEditorButtonIcon2, { tabIndex: disabled ? -1 : 0, onKeyDown: (e) => e.code === 'Space' && onEditorClick?.(), onClick: onEditorClick, children: _jsx(TMTooltip, { content: iconeEditTooltip ?? SDKUI_Localizator.Update, children: iconEditButton ?? _jsx(IconPencil, {}) }) }), buttons.map((buttonItem) => {
+                                return (_jsx(StyledEditorButtonIcon2, { onClick: buttonItem.onClick, children: _jsx(TMTooltip, { content: buttonItem.text, children: buttonItem.icon }) }, buttonItem.text));
+                            })] })] }) }));
     };
     const renderLabel = () => {
         return (_jsx(StyledEditorLabel, { "$isFocused": false, "$labelPosition": labelPosition, "$disabled": disabled, "$fontSize": fontSize, children: _jsx("div", { style: { flexDirection: "row", display: "flex", alignItems: "start", justifyContent: "start" }, children: label }) }));

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

@@ -1,15 +1,10 @@
 import React, { ChangeEvent } from 'react';
-import { ITMEditorBase } from '../base/TMEditorBase';
-export type TMTextAreaButtonData = {
-    icon: any;
-    text?: string;
-    onClick?: () => void;
-};
+import { ITMEditorBase, TMEditorButtonData } from '../base/TMEditorBase';
 interface ITMTextArea extends ITMEditorBase {
     value: string;
     onValueChanged: ((e: ChangeEvent<HTMLTextAreaElement>) => void) | undefined;
     formulaItems?: Array<string>;
-    buttons?: Array<TMTextAreaButtonData>;
+    buttons?: Array<TMEditorButtonData>;
     onBlur?: (value: string | undefined) => void;
     autoFocus?: boolean;
     maxValue?: number;

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

@@ -1,14 +1,8 @@
 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;
     maxLength?: number;

package/lib/components/editors/TMTextBox.js

@@ -3,13 +3,13 @@ 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/TMContextMenuOLD';
+import { genUniqueId, IconClearButton, IconHide, IconShow, useWindowWidth } from '../../helper';
 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';
+import { ContextMenu } from 'devextreme-react';
 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;
@@ -18,15 +18,16 @@ const StyledShowPasswordIcon = styled.div `
     transform: translateY(-25px);
     cursor: pointer;
 `;
-const TMTextBox = ({ autoFocus, maxLength, precision, scale, 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 TMTextBox = ({ autoFocus, maxLength, precision, scale, showClearButton, 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();
+    const [id, setID] = useState('');
+    useEffect(() => { setID(genUniqueId()); }, []);
     useEffect(() => { setCurrentType(type); setInitialType(type); }, [type]);
     useEffect(() => { setCurrentValue(value); }, [value]);
     useEffect(() => {
@@ -80,6 +81,7 @@ const TMTextBox = ({ autoFocus, maxLength, precision, scale, validationItems = [
             let newValue = textbeforecursorposition + textToInsert + textaftercursorposition;
             inputRef.current.value = newValue;
             onValueChanged?.({ target: { value: newValue } });
+            onBlur?.(newValue);
             inputRef.current.focus();
             inputRef.current.selectionStart = inputRef.current.selectionEnd = cursorposition + textToInsert.length;
         }
@@ -97,7 +99,7 @@ const TMTextBox = ({ autoFocus, maxLength, precision, scale, validationItems = [
         return Number(curValue);
     };
     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, maxLength: maxLength, onFocus: () => setIsFocused(true), onBlur: (e) => { setIsFocused(false); if (currentValue != value)
+        return (_jsxs(_Fragment, { children: [_jsx(StyledEditor, { ref: inputRef, id: `text-${id}`, autoFocus: autoFocus, readOnly: readOnly, type: currentType, disabled: disabled, value: currentValue, width: width || '100%', placeholder: placeHolder, maxLength: maxLength, onFocus: () => setIsFocused(true), onBlur: (e) => { setIsFocused(false); if (currentValue != value)
                         onBlur?.(currentValue); }, onChange: (e) => {
                         if (currentType === 'number') {
                             let number = Number(e.target.value);
@@ -120,18 +122,6 @@ const TMTextBox = ({ autoFocus, maxLength, precision, scale, validationItems = [
                         }
                         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 });
                     }, onKeyDown: (e) => {
                         if (currentType === 'number') {
                             if (!scale && (e.key == "." || e.key == ","))
@@ -140,7 +130,10 @@ const TMTextBox = ({ autoFocus, maxLength, precision, scale, validationItems = [
                     }, "$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 })] }));
+                    }), initialType !== 'password' && showClearButton && currentValue && _jsx(StyledEditorButtonIcon, { "$index": buttons.length, "$transform": '-26px', onClick: () => {
+                        onValueChanged?.({ target: { value: undefined } });
+                        onBlur?.(undefined);
+                    }, children: _jsx(IconClearButton, {}) }), formulaItems.length > 0 && (_jsx(ContextMenu, { dataSource: formulaMenuItems, target: `#text-${id}`, onItemClick: (e) => { insertText(e.itemData?.text ?? ''); } })), _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()] }) })] }));

package/lib/components/forms/TMLoginForm.js

@@ -772,7 +772,7 @@ const TMLoginForm = (props) => {
     return (_jsx(StyledLoginContainer, { "$responsiveHeight": calcResponsiveSizes(size, '75%', '96%', '98%'), "$responsiveWidth": calcResponsiveSizes(size, '55%', '95%', '95%'), children: _jsxs(TMLayoutContainer, { direction: calcResponsiveDirection(size, "horizontal", "vertical", "vertical"), children: [_jsx(TMLayoutItem, { width: calcResponsiveSizes(size, "40%", "100%", "100%"), height: calcResponsiveSizes(size, '100%', '20%', '20%'), children: _jsx("div", { style: { width: '100%', height: '100%', backgroundImage: `url(${backgroundLogin})`, backgroundRepeat: 'no-repeat', backgroundSize: 'cover', backgroundPosition: 'center', borderRadius: '10px' }, children: _jsx(StyledLogoContainer, { "$width": "100%", "$height": calcResponsiveSizes(size, '21%', '50%', '50%'), "$top": '20%', children: SDK_Globals.appModule === AppModules.ORCHESTRATOR ? _jsx("div", { style: { width: '60%', height: '50%', backgroundImage: `url(${logo})`, backgroundRepeat: 'no-repeat', backgroundSize: 'contain', position: 'absolute', backgroundPosition: 'center', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' } }) :
                                 _jsx("div", { style: { display: 'flex', height: '100%', alignItems: 'center', justifyContent: 'center', fontWeight: 'bolder', color: TMColors.secondary, fontStyle: 'italic' }, children: _jsxs("div", { style: { display: 'flex', alignItems: 'flex-end', gap: 10 }, children: [_jsx("img", { src: six, height: 40, alt: "" }), _jsx("div", { children: SDK_Globals.appModule })] }) }) }) }) }), _jsxs(TMLayoutItem, { width: calcResponsiveSizes(size, "60%", "100%", "100%"), height: calcResponsiveSizes(size, '100%', '80%', '80%'), children: [togglePages.recovery &&
                             _jsx(StyledContainer, { children: _jsxs(TMLayoutContainer, { alignItems: "center", children: [_jsx(TMLayoutItem, { width: "fit-content", height: "max-content", children: _jsx(StyledHeaderText, { children: SDKUI_Localizator.ForgetPassword }) }), _jsx(TMLayoutItem, { children: _jsx("div", { style: { padding: `0px ${calcResponsiveSizes(size, '40px', '40px', '10px')}` }, children: _jsx(TMCard, { showBorder: false, children: _jsxs(TMLayoutContainer, { children: [_jsx(TMLayoutItem, { height: "max-content", children: _jsxs("div", { style: { width: '100%', height: '5px', display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginTop: '20px' }, children: [_jsx("div", { style: { transform: 'translateX(-1px)', width: '15px', height: '15px', borderRadius: '20px', transition: '500ms ease', backgroundColor: TMColors.primary, zIndex: 300, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: "1" }), _jsx("div", { style: { width: '15px', height: '15px', borderRadius: '20px', transition: '500ms ease', backgroundColor: recoveryPasswordState.step > 1 ? TMColors.primary : 'rgb(180,180,180)', zIndex: 300, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: "2" }), _jsx("div", { style: { transform: 'translateX(1px)', width: '15px', height: '15px', borderRadius: '20px', transition: '500ms ease', backgroundColor: recoveryPasswordState.step > 2 ? TMColors.primary : 'rgb(180,180,180)', zIndex: 300, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: "3" }), _jsx("div", { style: { width: '100%', height: '5px', backgroundColor: 'rgb(180,180,180)', position: 'absolute' } }), _jsx("div", { style: { width: recoveryPasswordState.step === 1 ? '0%' : recoveryPasswordState.step === 2 ? '50%' : '100%', transition: '500ms ease', height: '5px', backgroundColor: TMColors.primary, position: 'absolute' } })] }) }), recoveryPasswordState.step === 1 && _jsx(TMLayoutItem, { children: _jsx(TMTextBox, { type: "email", elementStyle: { marginTop: '30px' }, label: SDKUI_Localizator.InsertYourEmail, icon: _jsx(IconMail, {}), onValueChanged: (e) => setRecoveryPasswordState({ ...recoveryPasswordState, email: e.target.value }), value: recoveryPasswordState.email, validationItems: recoveryPasswordState.email?.length === 0 ? recoveryPasswordValidationItems.filter(item => item.PropertyName === 'recoveryPass_email') : recoveryPasswordValidationItems.filter(item => item.PropertyName === 'recoveryPass_notEmail') }) }), recoveryPasswordState.step === 2 && _jsx(TMLayoutItem, { children: _jsxs(StyledOTPContainer, { children: [_jsxs(StyledOTPLabel, { children: [" ", SDKUI_Localizator.InsertOTP, " ", otpHasFilled.find(input => input === true) && _jsx("strong", { style: { cursor: 'pointer' }, onClick: () => setOtpValues(['', '', '', '', '', '']), children: SDKUI_Localizator.ClearOTP }), " "] }), _jsxs(StyledOTPInputContainer, { children: [_jsx(StyledOTPInput, { ref: otp1Ref, type: "number", max: 9, min: 0, value: otpValues[0], onChange: (e) => { let arr = [...otpValues]; arr[0] = e.target.value; setOtpValues(arr); } }), _jsx(StyledOTPInput, { ref: otp2Ref, type: "number", max: 9, min: 0, value: otpValues[1], onChange: (e) => { let arr = [...otpValues]; arr[1] = e.target.value; setOtpValues(arr); } }), _jsx(StyledOTPInput, { ref: otp3Ref, type: "number", max: 9, min: 0, value: otpValues[2], onChange: (e) => { let arr = [...otpValues]; arr[2] = e.target.value; setOtpValues(arr); } }), _jsx(StyledOTPInput, { ref: otp4Ref, type: "number", max: 9, min: 0, value: otpValues[3], onChange: (e) => { let arr = [...otpValues]; arr[3] = e.target.value; setOtpValues(arr); } }), _jsx(StyledOTPInput, { ref: otp5Ref, type: "number", max: 9, min: 0, value: otpValues[4], onChange: (e) => { let arr = [...otpValues]; arr[4] = e.target.value; setOtpValues(arr); } }), _jsx(StyledOTPInput, { ref: otp6Ref, type: "number", max: 9, min: 0, value: otpValues[5], onChange: (e) => { let arr = [...otpValues]; arr[5] = e.target.value; setOtpValues(arr); } })] }), _jsxs(StyledOTPWaitPanel, { children: [_jsxs("em", { children: [" ", SDKUI_Localizator.OTPSent, " ", _jsx("strong", { children: recoveryPasswordState.email }), ". ", SDKUI_Localizator.OTPNewRequest, " ", _jsx("strong", { children: wait }), " ", SDKUI_Localizator.Seconds] }), ".", wait === 0 && _jsx(TMButton, { caption: SDKUI_Localizator.NewOTP, showTooltip: false, onClick: () => setWait(60) })] })] }) }), recoveryPasswordState.step === 3 && _jsxs(_Fragment, { children: [_jsx(TMLayoutItem, { children: _jsx(TMTextBox, { type: "password", label: SDKUI_Localizator.NewPassword, icon: _jsx(IconPassword, {}), onValueChanged: (e) => setRecoveryPasswordState({ ...recoveryPasswordState, newPassword: e.target.value }), value: recoveryPasswordState.newPassword, validationItems: recoveryPasswordValidationItems.filter(item => item.PropertyName === 'recoveryPass_new' || item.PropertyName === 'recoveryPass_equalUsername' || item.PropertyName === 'recoveryPass_containUsername') }) }), _jsx(TMLayoutItem, { children: _jsx(TMTextBox, { type: "password", label: SDKUI_Localizator.ConfirmPassword, icon: _jsx(IconPassword, {}), onValueChanged: (e) => setRecoveryPasswordState({ ...recoveryPasswordState, confermPassword: e.target.value }), value: recoveryPasswordState.confermPassword, validationItems: recoveryPasswordValidationItems.filter(item => item.PropertyName === 'recoveryPass_confirm' || item.PropertyName === 'recoveryPass_notConfirmed') }) })] })] }) }) }) }), recoveryPasswordState.step === 3 && _jsx(TMPasswordManager, { operation: "recovery", validationItems: recoveryPasswordValidationItems }), _jsx(TMLayoutItem, { height: "fit-content", width: "fit-content", children: _jsx("p", { onClick: () => { recoveryPasswordBackClick(); }, tabIndex: isPasswordChangeEnable() ? 0 : undefined, onKeyDown: (e) => e.code === 'Space' && recoveryPasswordBackClick(), style: { userSelect: 'none', cursor: 'pointer', color: TMColors.primary, fontSize: '1rem' }, children: (recoveryPasswordState.step === 1 || recoveryPasswordState.step === 3) ? SDKUI_Localizator.Back : SDKUI_Localizator.Cancel }) }), _jsx(TMLayoutItem, { height: "fit-content", children: _jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '20px 0' }, children: _jsx(TMButton, { width: calcResponsiveSizes(size, '150px', '150px', '300px'), height: calcResponsiveSizes(size, '30px', '40px', '40px'), fontSize: "1rem", disabled: recoveryPasswordValidationItems.filter(vil => vil.ResultType === ResultTypes.ERROR).length > 0, caption: recoveryPasswordState.step < 3 ? SDKUI_Localizator.Next : SDKUI_Localizator.Save, onClick: () => recoveryPasswordOnClickManager(), showTooltip: false }) }) })] }) }), togglePages.change && _jsx(TMChangePassword, { tmSession: getChangePswTmSession(), username: username, enable: isPasswordChangeEnable(), onClose: () => backToLogin() }), togglePages.endpoint && _jsx(StyledContainer, { children: _jsxs(TMLayoutContainer, { alignItems: "center", children: [_jsx(TMLayoutItem, { width: "fit-content", height: "max-content", children: _jsx(StyledHeaderText, { children: SDKUI_Localizator.Endpoint }) }), _jsx(TMLayoutItem, { height: "fit-content", maxHeight: "70%", children: _jsx("div", { style: { height: '100%', padding: `0px ${calcResponsiveSizes(size, '40px', '40px', '10px')}` }, children: _jsx(TMCard, { showBorder: false, children: _jsxs(DataGrid, { height: '100%', elementAttr: { class: 'dx-custom-row' }, dataSource: endpoints, allowColumnResizing: true, columnResizingMode: "widget", columnAutoWidth: true, allowColumnReordering: true, keyExpr: "URL", showBorders: true, showColumnLines: SDKUI_Globals.dataGridShowColumnLines, showRowLines: SDKUI_Globals.dataGridShowRowLines, onSelectionChanged: (e) => setSelectedEndPoint(e.selectedRowsData[0]), onRowDblClick: () => { setEndpoint(selectedEndpoint); backToLogin(); setSelectedEndPoint(undefined); }, children: [_jsx(Selection, { mode: "single", showCheckBoxesMode: "onClick", selectAllMode: 'allPages' }), _jsx(ScrollBar, { width: 3 }), _jsx(Column, { dataField: "Description", caption: SDKUI_Localizator.Description, allowSorting: false }), _jsx(Column, { dataField: "URL", caption: 'URL', allowSorting: false }), _jsx(Column, { dataField: "isDefault", caption: 'Default', dataType: "boolean", allowSorting: false })] }) }) }) }), recoveryPasswordState.step === 3 && _jsx(TMPasswordManager, { operation: "recovery", validationItems: recoveryPasswordValidationItems }), _jsx(TMLayoutItem, { height: "fit-content", children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '10px 0', gap: 10 }, children: [_jsx(TMButton, { caption: SDKUI_Localizator.Back, btnStyle: "icon", height: calcResponsiveSizes(size, '30px', '40px', '40px'), fontSize: "0.8rem", onClick: backToLogin, icon: _jsx(IconArrowLeft, {}) }), _jsx(TMButton, { width: calcResponsiveSizes(size, '150px', '150px', '300px'), height: calcResponsiveSizes(size, '30px', '40px', '40px'), fontSize: "1rem", disabled: !selectedEndpoint, caption: SDKUI_Localizator.Select, onClick: () => { setEndpoint(selectedEndpoint); backToLogin(); setSelectedEndPoint(undefined); }, showTooltip: false }), _jsx(TMButton, { caption: 'Ping', btnStyle: "icon", height: calcResponsiveSizes(size, '30px', '40px', '40px'), fontSize: "0.8rem", disabled: !selectedEndpoint, onClick: () => pingAsync(selectedEndpoint), icon: _jsx(IconWifi, {}) })] }) })] }) }), togglePages.archive && _jsx(StyledContainer, { children: _jsxs(TMLayoutContainer, { alignItems: "center", children: [_jsx(TMLayoutItem, { width: "fit-content", height: "max-content", children: _jsx(StyledHeaderText, { children: SDKUI_Localizator.ArchiveID }) }), _jsx(TMLayoutItem, { height: "fit-content", maxHeight: "70%", children: _jsx("div", { style: { height: '100%', padding: `0px ${calcResponsiveSizes(size, '40px', '40px', '10px')}` }, children: _jsx(TMCard, { showBorder: false, children: _jsxs(DataGrid, { height: '100%', dataSource: archives, allowColumnResizing: true, columnResizingMode: "widget", columnAutoWidth: true, allowColumnReordering: true, keyExpr: "id", showBorders: true, showColumnLines: SDKUI_Globals.dataGridShowColumnLines, showRowLines: SDKUI_Globals.dataGridShowRowLines, onSelectionChanged: (e) => setSelectedArchive(e.selectedRowsData[0]), onRowDblClick: () => { setArchive(selectedArchive); backToLogin(); setSelectedArchive(undefined); }, children: [_jsx(Selection, { mode: "single", showCheckBoxesMode: "onClick", selectAllMode: 'allPages' }), _jsx(Column, { dataField: "id", caption: 'ID', allowSorting: false }), _jsx(Column, { dataField: "description", caption: SDKUI_Localizator.Description, allowSorting: false }), _jsx(Column, { dataField: "isDefault", caption: 'Default', dataType: "boolean", allowSorting: false })] }) }) }) }), recoveryPasswordState.step === 3 && _jsx(TMPasswordManager, { operation: "recovery", validationItems: recoveryPasswordValidationItems }), _jsx(TMLayoutItem, { height: "fit-content", children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '20px 0', gap: 10 }, children: [_jsx(TMButton, { caption: SDKUI_Localizator.Back, btnStyle: "icon", height: calcResponsiveSizes(size, '30px', '40px', '40px'), fontSize: "0.8rem", onClick: backToLogin, icon: _jsx(IconArrowLeft, {}) }), _jsx(TMButton, { width: calcResponsiveSizes(size, '150px', '150px', '300px'), height: calcResponsiveSizes(size, '30px', '40px', '40px'), fontSize: "1rem", disabled: !selectedArchive, caption: SDKUI_Localizator.Select, onClick: () => { setArchive(selectedArchive); backToLogin(); setSelectedArchive(undefined); }, showTooltip: false })] }) })] }) }), (isLoginPage()) &&
-                            _jsx(StyledContainer, { children: _jsxs(TMLayoutContainer, { alignItems: "center", children: [_jsx(TMLayoutItem, { width: "fit-content", height: "max-content", children: _jsx(StyledHeaderText, { children: "Login" }) }), _jsx(TMLayoutItem, { children: _jsx("div", { style: { padding: `0px ${calcResponsiveSizes(size, '40px', '40px', '10px')}` }, children: _jsx(TMCard, { showBorder: false, children: _jsxs(TMLayoutContainer, { children: [_jsxs(TMLayoutItem, { children: [_jsx(TMSummary, { label: SDKUI_Localizator.Endpoint, icon: _jsx(IconAccessPoint, {}), onClearClick: () => setEndpoint(undefined), iconEditButton: _jsx(IconSearch, {}), template: _jsx("div", { children: endpoint?.Description }), customBtn: _jsx(IconWifi, { color: "gray" }), onCustumBtnClick: () => pingAsync(endpoint), validationItems: loginValidationItems.filter(item => item.PropertyName === 'endpoint'), onEditorClick: showEndpoints }), archives && archives.length > 0 ?
+                            _jsx(StyledContainer, { children: _jsxs(TMLayoutContainer, { alignItems: "center", children: [_jsx(TMLayoutItem, { width: "fit-content", height: "max-content", children: _jsx(StyledHeaderText, { children: "Login" }) }), _jsx(TMLayoutItem, { children: _jsx("div", { style: { padding: `0px ${calcResponsiveSizes(size, '40px', '40px', '10px')}` }, children: _jsx(TMCard, { showBorder: false, children: _jsxs(TMLayoutContainer, { children: [_jsxs(TMLayoutItem, { children: [_jsx(TMSummary, { label: SDKUI_Localizator.Endpoint, icon: _jsx(IconAccessPoint, {}), onClearClick: () => setEndpoint(undefined), iconEditButton: _jsx(IconSearch, {}), template: _jsx("div", { children: endpoint?.Description }), buttons: [{ text: "Ping", icon: _jsx(IconWifi, { color: "gray" }), onClick: () => pingAsync(endpoint) }], validationItems: loginValidationItems.filter(item => item.PropertyName === 'endpoint'), onEditorClick: showEndpoints }), archives && archives.length > 0 ?
                                                                         _jsx(TMSummary, { label: SDKUI_Localizator.ArchiveID, onClearClick: () => setArchive(undefined), iconEditButton: _jsx(IconSearch, {}), icon: _jsx(IconArchive, {}), template: _jsx("div", { children: archive ? archive.description : null }), validationItems: loginValidationItems.filter(item => item.PropertyName === 'archive'), onEditorClick: showArchives }) :
                                                                         _jsx(TMTextBox, { label: SDKUI_Localizator.ArchiveID, icon: _jsx(IconArchive, {}), onValueChanged: (e) => setArchiveID(e.target.value), value: archiveID, validationItems: loginValidationItems.filter(item => item.PropertyName === 'archive') }), _jsx(TMDropDown, { dataSource: [{ display: 'TopMedia', value: AuthenticationModes.TopMedia }, { display: SDKUI_Localizator.AuthMode_OnBehalfOf, value: AuthenticationModes.TopMediaOnBehalfOf }, { display: 'MSAzure', value: AuthenticationModes.MSAzure }, { display: SDKUI_Localizator.AuthMode_WindowsViaTopMedia, value: AuthenticationModes.WindowsThroughTopMedia }], label: SDKUI_Localizator.AuthMode, value: authMode, icon: _jsx(IconLogin, {}), onValueChanged: (e) => { setAuthMode(e.target.value); }, validationItems: loginValidationItems.filter(item => item.PropertyName === 'authMode') })] }), (authMode === AuthenticationModes.TopMedia || authMode === AuthenticationModes.WindowsThroughTopMedia) && _jsx(TMLayoutItem, { children: authMode === AuthenticationModes.WindowsThroughTopMedia ?
                                                                     _jsxs(_Fragment, { children: [_jsx(TMTextBox, { label: SDKUI_Localizator.Domain, icon: _jsx(IconWeb, {}), value: domainAlternative, onValueChanged: (e) => setDomainArternative(e.target.value), validationItems: loginValidationItems.filter(item => item.PropertyName === 'domain_alt') }), _jsx(TMTextBox, { validationItems: loginValidationItems.filter(item => item.PropertyName === 'username'), label: SDKUI_Localizator.UserName, icon: _jsx(IconUser, {}), value: username, onValueChanged: (e) => setUsername(e.target.value) }), _jsx(TMTextBox, { validationItems: loginValidationItems.filter(item => item.PropertyName === 'password'), type: "password", label: SDKUI_Localizator.Password, icon: _jsx(IconPassword, {}), value: password, onValueChanged: (e) => setPassword(e.target.value) })] })

package/lib/components/query/TMQueryEditor.js

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import { SDK_Localizator, AccessLevels, OnJoinItem, JoinTypes, PlatformObjectValidator, MetadataDataDomains, DcmtTypeListCacheService, JoinItem, SystemMIDsAsNumber, MetadataDataTypes, OrderByItem, QueryDescriptor, QueryFunctions, QueryOperators, ResultTypes, SelectItem, SDK_Globals, UserListCacheService, WhereItem, SearchEngine, SelectItemVisibilities, DataListCacheService, QueryValidatorOptions, TMPropertyNames, AppModules, LayoutModes } from '@topconsultnpm/sdk-ts-beta';
 import styled from 'styled-components';
 import Accordion, { Item } from 'devextreme-react/accordion';
-import { SDKUI_Localizator, IconSearch, IconCount, getQueryCountAsync, calcIsModified, IconClear, IconAddCircleOutline, IconDotsVerticalCircleOutline, IconHide, IconShow, IconDraggabledots, genUniqueId, LocalizeQueryOperators, LocalizeQueryFunctions, LocalizeQueryJoinTypes, IconArchiveDoc, IconArrowRight } from '../../helper';
+import { SDKUI_Localizator, IconSearch, IconCount, getQueryCountAsync, calcIsModified, IconClear, IconAddCircleOutline, IconDotsVerticalCircleOutline, IconHide, IconShow, IconDraggabledots, genUniqueId, LocalizeQueryOperators, LocalizeQueryFunctions, LocalizeQueryJoinTypes, IconArchiveDoc, IconArrowRight, IconLayerGroup } from '../../helper';
 import { displayMetadataValue, getDcmtTypesByQdAsync, getTIDsByQd } from '../../helper/queryHelper';
 import { useOutsideClick } from '../../hooks/useOutsideClick';
 import { FormModes } from '../../ts';
@@ -1018,24 +1018,25 @@ const TMQdWhereItemValue = ({ whereItem, index, queryParamsDynDataList, onlyEdit
                                 : _jsxs(_Fragment, { children: [displayMetadataValue(md, whereItem.value1, mdValueEmptyDescr), numberOfOperands == 2 && (whereItem.value2 && whereItem.value2 != '' ? ` - ${displayMetadataValue(md, whereItem.value2, mdValueEmptyDescr)}` : ' - ?')] }) })] })] }));
 };
 export const TMQdWhereItemValueEditor = ({ tid, value, queryParamsDynDataList, containerElement, allowMultipleSelection, autoFocus, numberOfOperands, md, onValueChanged, onValueChange, onCascadeRefreshDynDataLists }) => {
+    let btnDistincValues = { text: 'Valori distinti', icon: _jsx(IconLayerGroup, { fontSize: 16 }), onClick: () => { ShowAlert({ message: "TODO Valori distinti", mode: 'info', title: `${"TODO"}`, duration: 3000 }); } };
     if (value?.startsWith("{@QueryParam") || value == "{@UserName}" || value == "{@UserID}")
         return _jsx(TMTextBox, { elementStyle: { width: '100%' }, type: 'text', maxLength: md?.length, autoFocus: autoFocus, value: value || '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) });
     if (md?.dataDomain == MetadataDataDomains.DynamicDataList)
-        return _jsx(TMDynDataListItemChooser, { md: md, tid: tid, queryParamsDynDataList: queryParamsDynDataList, onCascadeRefreshDynDataLists: onCascadeRefreshDynDataLists, elementStyle: { width: '100%' }, backgroundColor: TMColors.default_background, allowMultipleSelection: allowMultipleSelection, values: value ? [value] : [], hasClear: false, onValueChanged: (IDs) => {
+        return _jsx(TMDynDataListItemChooser, { md: md, tid: tid, buttons: [btnDistincValues], queryParamsDynDataList: queryParamsDynDataList, onCascadeRefreshDynDataLists: onCascadeRefreshDynDataLists, elementStyle: { width: '100%' }, backgroundColor: TMColors.default_background, allowMultipleSelection: allowMultipleSelection, values: value ? [value] : [], showClearButton: true, onValueChanged: (IDs) => {
                 if (!IDs || IDs.length <= 0)
                     onValueChanged?.(undefined);
                 else
                     onValueChanged?.(IDs[0]);
             } });
     if (md?.dataDomain == MetadataDataDomains.DataList)
-        return _jsx(TMDataListItemChooser, { elementStyle: { width: '100%' }, backgroundColor: TMColors.default_background, dataListId: md.dataListID, allowMultipleSelection: allowMultipleSelection, values: value?.split(',').map((item) => !item.startsWith("'") ? item : item.slice(1, -1)) ?? [], hasClear: false, onValueChanged: (IDs) => {
+        return _jsx(TMDataListItemChooser, { elementStyle: { width: '100%' }, backgroundColor: TMColors.default_background, dataListId: md.dataListID, allowMultipleSelection: allowMultipleSelection, values: value?.split(',').map((item) => !item.startsWith("'") ? item : item.slice(1, -1)) ?? [], showClearButton: true, buttons: [btnDistincValues], onValueChanged: (IDs) => {
                 if (!IDs || IDs.length <= 0)
                     onValueChanged?.(undefined);
                 else
                     onValueChanged?.(IDs.join(","));
             } });
     if (md?.dataDomain == MetadataDataDomains.UserID)
-        return _jsx(TMUserChooser, { elementStyle: { width: '100%' }, backgroundColor: TMColors.default_background, placeHolder: " ", hasClear: true, allowMultipleSelection: allowMultipleSelection, values: value?.split(',').map((item) => !item.startsWith("'") ? Number(item) : Number(item.slice(1, -1))) ?? [], onValueChanged: (IDs) => {
+        return _jsx(TMUserChooser, { elementStyle: { width: '100%' }, backgroundColor: TMColors.default_background, placeHolder: " ", showClearButton: true, allowMultipleSelection: allowMultipleSelection, values: value?.split(',').map((item) => !item.startsWith("'") ? Number(item) : Number(item.slice(1, -1))) ?? [], buttons: [btnDistincValues], onValueChanged: (IDs) => {
                 if (!IDs || IDs.length <= 0)
                     onValueChanged?.(undefined);
                 else
@@ -1043,13 +1044,13 @@ export const TMQdWhereItemValueEditor = ({ tid, value, queryParamsDynDataList, c
             } });
     switch (numberOfOperands) {
         case 11:
-        case 99: return _jsx(TMTextBox, { elementStyle: { width: '100%' }, type: 'text', maxLength: md?.length, autoFocus: autoFocus, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) });
-        case 12: return _jsx(TMTextBox, { elementStyle: { width: '100%' }, type: 'number', precision: md?.length, scale: md?.scale, autoFocus: autoFocus, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) });
+        case 99: return _jsx(TMTextBox, { elementStyle: { width: '100%' }, type: 'text', buttons: [btnDistincValues], showClearButton: true, maxLength: md?.length, autoFocus: autoFocus, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) });
+        case 12: return _jsx(TMTextBox, { elementStyle: { width: '100%' }, type: 'number', showClearButton: true, precision: md?.length, scale: md?.scale, autoFocus: autoFocus, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) });
         default:
             switch (md?.dataType) {
-                case MetadataDataTypes.DateTime: return _jsx(TMDateBox, { width: '100%', value: value, useDateSerializationFormat: true, containerElement: containerElement, onValueChange: (newValue) => { onValueChange?.(newValue ? newValue.toString() : undefined); onValueChanged?.(newValue ? newValue.toString() : undefined); } });
-                case MetadataDataTypes.Number: return _jsx(TMTextBox, { elementStyle: { width: '100%' }, type: 'number', precision: md?.length, scale: md?.scale, autoFocus: autoFocus, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) });
-                default: return _jsx(TMTextBox, { type: 'text', elementStyle: { width: '100%' }, autoFocus: autoFocus, maxLength: md?.length, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => { onValueChanged?.(newValue); } });
+                case MetadataDataTypes.DateTime: return _jsx(TMDateBox, { width: '100%', value: value, buttons: [btnDistincValues], showClearButton: true, useDateSerializationFormat: true, containerElement: containerElement, onValueChange: (newValue) => { onValueChange?.(newValue ? newValue.toString() : undefined); onValueChanged?.(newValue ? newValue.toString() : undefined); } });
+                case MetadataDataTypes.Number: return _jsx(TMTextBox, { elementStyle: { width: '100%' }, type: 'number', buttons: [btnDistincValues], showClearButton: true, precision: md?.length, scale: md?.scale, autoFocus: autoFocus, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) });
+                default: return _jsx(TMTextBox, { type: 'text', elementStyle: { width: '100%' }, showClearButton: true, buttons: [btnDistincValues], autoFocus: autoFocus, maxLength: md?.length, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => { onValueChanged?.(newValue); } });
             }
     }
 };

package/lib/helper/TMIcons.d.ts

@@ -116,6 +116,7 @@ declare function IconHistory(props: React.SVGProps<SVGSVGElement>): import("reac
 declare function IconForceStop(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
 declare function IconDraggabledots(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
 declare function IconClear(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
+export declare function IconClearButton(props: Readonly<React.SVGProps<SVGSVGElement>>): import("react/jsx-runtime").JSX.Element;
 declare function IconAddCircleOutline(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
 declare function IconDotsVerticalCircleOutline(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
 declare function IconMapping(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/lib/helper/TMIcons.js

@@ -351,6 +351,9 @@ function IconDraggabledots(props) {
 function IconClear(props) {
     return (_jsxs("svg", { fontSize: props.fontSize ? props.fontSize : FONTSIZE, viewBox: "0 0 1024 1024", fill: "currentColor", height: "1em", width: "1em", ...props, children: [" ", _jsxs("defs", { children: [" ", _jsx("style", {}), " "] }), " ", _jsx("path", { d: "M899.1 869.6l-53-305.6H864c14.4 0 26-11.6 26-26V346c0-14.4-11.6-26-26-26H618V138c0-14.4-11.6-26-26-26H432c-14.4 0-26 11.6-26 26v182H160c-14.4 0-26 11.6-26 26v192c0 14.4 11.6 26 26 26h17.9l-53 305.6c-.3 1.5-.4 3-.4 4.4 0 14.4 11.6 26 26 26h723c1.5 0 3-.1 4.4-.4 14.2-2.4 23.7-15.9 21.2-30zM204 390h272V182h72v208h272v104H204V390zm468 440V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H416V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H202.8l45.1-260H776l45.1 260H672z" }), " "] }));
 }
+export function IconClearButton(props) {
+    return (_jsx("svg", { fontSize: 16, fill: "currentColor", width: "1em", height: "1em", viewBox: "0 0 20 20", ...props, children: _jsx("path", { d: "M4.089 4.216l0.058-0.069c0.174-0.174 0.443-0.193 0.638-0.058l0.069 0.058 5.146 5.147 5.146-5.147c0.174-0.174 0.443-0.193 0.638-0.058l0.069 0.058c0.173 0.174 0.193 0.443 0.058 0.638l-0.058 0.069-5.147 5.146 5.147 5.146c0.173 0.174 0.193 0.443 0.058 0.638l-0.058 0.069c-0.174 0.173-0.443 0.193-0.638 0.058l-0.069-0.058-5.146-5.147-5.146 5.147c-0.174 0.173-0.443 0.193-0.638 0.058l-0.069-0.058c-0.174-0.174-0.193-0.443-0.058-0.638l0.058-0.069 5.147-5.146-5.147-5.146c-0.174-0.174-0.193-0.443-0.058-0.638v0z" }) }));
+}
 function IconAddCircleOutline(props) {
     return (_jsxs("svg", { fontSize: props.fontSize ? props.fontSize : FONTSIZE, viewBox: "0 0 512 512", fill: "currentColor", height: "1em", width: "1em", ...props, children: [" ", _jsx("path", { fill: "none", stroke: "currentColor", strokeMiterlimit: 10, strokeWidth: 32, d: "M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z" }), " ", _jsx("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 32, d: "M256 176v160M336 256H176" }), " "] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react-beta",
-    "version": "6.6.15",
+    "version": "6.6.17",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",