@topconsultnpm/sdkui-react 6.20.0-dev1.13 → 6.20.0-dev1.130

package/lib/components/choosers/TMDataListItemChooser.js

@@ -7,17 +7,23 @@ import TMSpinner from '../base/TMSpinner';
 import TMSummary from '../editors/TMSummary';
 import TMChooserForm from '../forms/TMChooserForm';
 import TMDataListItemViewer from '../viewers/TMDataListItemViewer';
-const TMDataListItemChooser = ({ labelColor, width = '100%', dataListId, icon, backgroundColor, showBorder = true, readOnly, openChooserBySingleClick, buttons = [], elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, titleForm, showClearButton = false, validationItems = [], onValueChanged }) => {
+const TMDataListItemChooser = ({ labelColor, width = '100%', dataListId, icon, backgroundColor, showBorder = true, readOnly, openChooserBySingleClick, buttons = [], elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, titleForm, showClearButton = false, validationItems = [], onValueChanged, updateIsModalOpen }) => {
     const [showChooser, setShowChooser] = useState(false);
     const renderTemplate = () => {
         const isPlaceholder = values?.[0] === placeHolder;
         return (_jsxs(StyledDivHorizontal, { style: { width: '100%', color: isPlaceholder ? '#a9a9a9' : 'inherit' }, children: [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'})` })] }));
     };
     const summaryInputRef = useRef(null);
-    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { ref: summaryInputRef, placeHolder: placeHolder, labelColor: labelColor, width: width, icon: icon, buttons: buttons, readOnly: readOnly, backgroundColor: backgroundColor, showBorder: showBorder, hasValue: values && values.length > 0, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => !readOnly && setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, label: label, openEditorOnSummaryClick: openChooserBySingleClick, template: renderTemplate(), onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
+    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { ref: summaryInputRef, placeHolder: placeHolder, labelColor: labelColor, width: width, icon: icon, buttons: buttons, readOnly: readOnly, backgroundColor: backgroundColor, showBorder: showBorder, hasValue: values && values.length > 0, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => {
+                    if (!readOnly) {
+                        setShowChooser(true);
+                        updateIsModalOpen?.(true);
+                    }
+                }, elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, label: label, openEditorOnSummaryClick: openChooserBySingleClick, template: renderTemplate(), onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
                 _jsx(TMDataListItemChooserForm, { allowMultipleSelection: allowMultipleSelection, title: titleForm, dataListId: dataListId, selectedIDs: values, onClose: () => {
                         setShowChooser(false);
                         summaryInputRef.current?.focus();
+                        updateIsModalOpen?.(false);
                     }, onChoose: (IDs) => { onValueChanged?.(IDs); } })] }));
 };
 export default TMDataListItemChooser;

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

@@ -11,6 +11,7 @@ interface ITMDcmtTypeChooser extends ITMChooserProps {
     openEditorOnSummaryClick?: boolean;
     accessFilter?: AccessFilter;
     filter?: (value: DcmtTypeDescriptor, index: number, array: DcmtTypeDescriptor[]) => unknown;
+    updateIsModalOpen?: (isOpen: boolean) => void;
 }
 declare const TMDcmtTypeChooser: React.FunctionComponent<ITMDcmtTypeChooser>;
 export default TMDcmtTypeChooser;

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, filter, accessFilter = 'all', showEditButton = true, 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 TMDcmtTypeChooser = ({ tmSession, dataSource, disabled, backgroundColor, filter, accessFilter = 'all', showEditButton = true, 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, updateIsModalOpen }) => {
     const [showChooser, setShowChooser] = useState(false);
     useEffect(() => {
         TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.ListDcmtTypeOrView} ...` });
@@ -17,8 +17,16 @@ const TMDcmtTypeChooser = ({ tmSession, dataSource, disabled, backgroundColor, f
     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, buttons: buttons, showBorder: showBorder, borderRadius: borderRadius, hasValue: values && values.length > 0, showClearButton: showClearButton, showEditButton: showEditButton, 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(TMDcmtTypeChooserForm, { tmSession: tmSession, allowMultipleSelection: allowMultipleSelection, dataSource: dataSource, selectedIDs: values, ShowOnlyDcmtTypes: ShowOnlyDcmtTypes, ShowOnlySAP: ShowOnlySAP, accessFilter: accessFilter, filterTemplateTID: filterTemplateTID, filter: filter, onClose: () => setShowChooser(false), onChoose: (IDs) => { onValueChanged?.(IDs); } })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { backgroundColor: backgroundColor, buttons: buttons, showBorder: showBorder, borderRadius: borderRadius, hasValue: values && values.length > 0, showClearButton: showClearButton, showEditButton: showEditButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => {
+                    if (!disabled) {
+                        setShowChooser(true);
+                        updateIsModalOpen?.(true);
+                    }
+                }, elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, label: label, width: width, height: height, 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, accessFilter: accessFilter, filterTemplateTID: filterTemplateTID, filter: filter, onClose: () => {
+                        setShowChooser(false);
+                        updateIsModalOpen?.(false);
+                    }, onChoose: (IDs) => { onValueChanged?.(IDs); } })] }));
 };
 export default TMDcmtTypeChooser;
 const cellRenderIcon = (data) => _jsx(TMDcmtTypeIcon, { dtd: data.data });

package/lib/components/choosers/TMDistinctValues.js

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { LayoutModes, MetadataDataDomains, AccessLevels, MetadataDataTypes, SDK_Globals, DcmtTypeListCacheService, DataColumnTypes } from '@topconsultnpm/sdk-ts';
 import styled from 'styled-components';
 import { SDKUI_Localizator, stringIsNullOrEmpty } from '../../helper';
-import TMDataGrid from '../base/TMDataGrid';
+import TMDataGrid, { TMDataGridPageSize } from '../base/TMDataGrid';
 import { TMExceptionBoxManager } from '../base/TMPopUp';
 import TMSpinner from '../base/TMSpinner';
 import TMCheckBox from '../editors/TMCheckBox';
@@ -131,7 +131,7 @@ const TMDistinctValues = ({ tid, mid, layoutMode = LayoutModes.None, allowAppend
         return md.dataDomain === undefined || md.dataDomain === MetadataDataDomains.None;
     };
     const renderContent = () => {
-        return (_jsxs(StyledDistinctValues, { children: [isVisibleAppend() && _jsx(TMCheckBox, { elementStyle: { position: 'absolute', right: '15px', top: '15px', zIndex: 10000 }, label: 'Accoda', value: isAppendMode, onValueChanged: () => { setIsAppendMode(!isAppendMode); } }), _jsx(TMDataGrid, { focusedRowKey: focusedItem ? focusedItem.rowIndex : undefined, selection: { showCheckBoxesMode: 'none' }, searchPanel: { highlightCaseSensitive: true, visible: true }, dataColumns: customColumns, dataSource: dataSource, keyExpr: 'rowIndex', height: 'calc(100%)', onFocusedRowChanged: onFocusedRowChanged, paging: { pageSize: 30 }, summary: customSummary })] }));
+        return (_jsxs(StyledDistinctValues, { children: [isVisibleAppend() && _jsx(TMCheckBox, { elementStyle: { position: 'absolute', right: '15px', top: '15px', zIndex: 10000 }, label: 'Accoda', value: isAppendMode, onValueChanged: () => { setIsAppendMode(!isAppendMode); } }), _jsx(TMDataGrid, { focusedRowKey: focusedItem ? focusedItem.rowIndex : undefined, selection: { showCheckBoxesMode: 'none' }, searchPanel: { highlightCaseSensitive: true, visible: true }, dataColumns: customColumns, dataSource: dataSource, keyExpr: 'rowIndex', height: 'calc(100%)', onFocusedRowChanged: onFocusedRowChanged, paging: { pageSize: 30 }, summary: customSummary, onRowDblClick: () => !isAppendMode && onClosePanelCallback?.(), pageSize: TMDataGridPageSize.Medium })] }));
     };
     return (_jsx(_Fragment, { children: isModal
             ? _jsx(TMModal, { title: SDKUI_Localizator.DistinctValues + (md?.nameLoc ? ` (${md?.nameLoc})` : ''), height: '600px', width: '500px', resizable: true, onClose: onClosePanelCallback, children: renderContent() })

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

@@ -18,6 +18,8 @@ interface ITMDynDataListItemChooserProps extends ITMChooserProps {
     onCascadeRefreshDynDataLists?: (dynDataListsToBeRefreshed: DynDataListsToBeRefreshed[]) => void;
     /** Indica quali metadati aggiornare in cascata (valore)  */
     onCascadeUpdateMIDs?: (midsToBeUpdated: MIDsToBeUpdated[]) => void;
+    /** Funzione per aggiornare lo stato di apertura della modale */
+    updateIsModalOpen?: (isOpen: boolean) => void;
 }
 export type DynDataListsToBeRefreshed = {
     mid: number | undefined;

package/lib/components/choosers/TMDynDataListItemChooser.js

@@ -9,7 +9,7 @@ import TMChooserForm from '../forms/TMChooserForm';
 import { TMColors } from '../../utils/theme';
 import TMTooltip from '../base/TMTooltip';
 import { FormulaHelper } from '../editors/TMFormulaEditor';
-const TMDynDataListItemChooser = ({ tid, md, width = '100%', titleForm, openChooserBySingleClick, readOnly, layoutMode = LayoutModes.None, queryParamsDynDataList, buttons = [], backgroundColor, showBorder = true, elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, validationItems = [], icon, labelColor, showClearButton, onValueChanged, onCascadeRefreshDynDataLists, onCascadeUpdateMIDs }) => {
+const TMDynDataListItemChooser = ({ tid, md, width = '100%', titleForm, openChooserBySingleClick, readOnly, layoutMode = LayoutModes.None, queryParamsDynDataList, buttons = [], backgroundColor, showBorder = true, elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, validationItems = [], icon, labelColor, showClearButton, onValueChanged, onCascadeRefreshDynDataLists, onCascadeUpdateMIDs, updateIsModalOpen }) => {
     const [showChooser, setShowChooser] = useState(false);
     const [dynDl, setDynDl] = useState();
     const [dataSource, setDataSource] = useState();
@@ -80,9 +80,15 @@ const TMDynDataListItemChooser = ({ tid, md, width = '100%', titleForm, openChoo
         const isPlaceholder = values?.[0] === placeHolder;
         return (_jsxs(StyledDivHorizontal, { style: { width: '100%', color: isPlaceholder ? '#a9a9a9' : 'inherit' }, children: [dataSource && _jsxs(StyledDivHorizontal, { children: [getIcon(), _jsx("p", { style: { marginLeft: '5px' }, children: getDescription() })] }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }));
     };
-    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { placeHolder: placeHolder, width: width, icon: icon, labelColor: labelColor, backgroundColor: backgroundColor, buttons: buttons, showBorder: showBorder, readOnly: readOnly, 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 &&
+    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { placeHolder: placeHolder, width: width, icon: icon, labelColor: labelColor, backgroundColor: backgroundColor, buttons: buttons, showBorder: showBorder, readOnly: readOnly, hasValue: values && values.length > 0, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => {
+                    if (!readOnly) {
+                        setShowChooser(true);
+                        updateIsModalOpen?.(true);
+                    }
+                }, elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, openEditorOnSummaryClick: openChooserBySingleClick, label: label, template: renderTemplate(), onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
                 _jsx(TMDynDataListItemChooserForm, { TID: tid, MID: md?.id, dynDL: dynDl, title: titleForm, allowMultipleSelection: allowMultipleSelection, searchResult: dataSource, selectedIDs: values, onClose: () => {
                         setShowChooser(false);
+                        updateIsModalOpen?.(false);
                         summaryInputRef.current?.focus();
                     }, onChoose: (IDs) => {
                         onValueChanged?.(IDs);

package/lib/components/choosers/TMInvoiceRetrieveFormats.js

@@ -17,6 +17,6 @@ const TMInvoiceRetrieveFormats = ({ value, valueOrig, onValueChanged, valuesToEx
         }
         return dataSource;
     };
-    return (_jsx(TMDropDown, { label: label, elementStyle: { marginBottom: TMMargin.defultMargin, width: width }, dataSource: getDataSource(), value: value, onValueChanged: (e) => { onValueChanged?.(e.target.value); }, isModifiedWhen: value != valueOrig, width: width }));
+    return (_jsx(TMDropDown, { label: label, elementStyle: { marginBottom: TMMargin.defaultMargin, width: width }, dataSource: getDataSource(), value: value, onValueChanged: (e) => { onValueChanged?.(e.target.value); }, isModifiedWhen: value != valueOrig, width: width }));
 };
 export default TMInvoiceRetrieveFormats;

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

@@ -32,6 +32,8 @@ interface ITMMetadataChooserProps extends ITMChooserProps {
     getColorIndex?: (tid: TID_Alias) => string;
     /** Allows you to view system metadata directly */
     showSysMetadataDirectly?: boolean;
+    /** Funzione per aggiornare lo stato di apertura della modale */
+    updateIsModalOpen?: (isOpen: boolean) => void;
 }
 declare const TMMetadataChooser: React.FunctionComponent<ITMMetadataChooserProps>;
 export default TMMetadataChooser;

package/lib/components/choosers/TMMetadataChooser.js

@@ -11,13 +11,28 @@ import TMButton from '../base/TMButton';
 import TMSummary from '../editors/TMSummary';
 import TMChooserForm from '../forms/TMChooserForm';
 import TMSpinner from '../base/TMSpinner';
-const TMMetadataChooser = ({ tmSession, dataSource, showEditButton = true, buttons = [], disabled, validationItems, getColorIndex, showCompleteMetadataName, qdShowOnlySelectItems, borderRadius = '4px', fontSize = FontSize.defaultFontSize, backgroundColor, openEditorOnSummaryClick, showBorder = true, showId = false, elementStyle, allowMultipleSelection, allowSysMetadata, showSysMetadataDirectly, value, values, isModifiedWhen, tids, label, width, height, showClearButton, qd, placeHolder, filterMetadata, onValueChanged }) => {
+const TMMetadataChooser = ({ tmSession, dataSource, showEditButton = true, buttons = [], disabled, validationItems, getColorIndex, showCompleteMetadataName, qdShowOnlySelectItems, borderRadius = '4px', fontSize = FontSize.defaultFontSize, backgroundColor, openEditorOnSummaryClick, showBorder = true, showId = false, elementStyle, allowMultipleSelection, allowSysMetadata, showSysMetadataDirectly, value, values, isModifiedWhen, tids, label, width, height, showClearButton, qd, placeHolder, filterMetadata, onValueChanged, updateIsModalOpen }) => {
     const [showChooser, setShowChooser] = useState(false);
+    const getinputMd = () => {
+        if (values && values.length > 0 && values[0].mid && values[0].mid < 0) {
+            let md = dataSource?.find((md) => md.id === values[0].mid);
+            return md;
+        }
+        return undefined;
+    };
     const renderTemplate = useMemo(() => {
-        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(StyledDivHorizontal, { style: { width: 'max-content', height: '100%' }, children: [values && values.length > 0 && values[0].mid && values[0].mid > 0 && _jsx(TMMidViewer, { tmSession: tmSession, tid_mid: values[0], showIcon: true, showId: showId, showCompleteName: showCompleteMetadataName }), values && values.length > 0 && values[0].mid && values[0].mid < 0 && _jsx(TMMidViewer, { tmSession: tmSession, tid_mid: values[0], inputMd: getinputMd(), 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 })] }));
     }, [values, tmSession, showId, showCompleteMetadataName, placeHolder]);
-    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { label: label, width: width, height: height, disabled: disabled, validationItems: validationItems, backgroundColor: backgroundColor, buttons: buttons, placeHolder: placeHolder, fontSize: fontSize, showBorder: showBorder, borderRadius: borderRadius, hasValue: values && values.length > 0, showClearButton: showClearButton, showEditButton: showEditButton, 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, showSysMetadataDirectly: showSysMetadataDirectly, getColorIndex: getColorIndex, dataSource: dataSource, tids: tids, qd: qd, qdShowOnlySelectItems: qdShowOnlySelectItems, filterMetadata: filterMetadata, selectedIDs: values, onClose: () => setShowChooser(false), onChoose: (tid_mids) => { onValueChanged?.(tid_mids); } })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { label: label, width: width, height: height, disabled: disabled, validationItems: validationItems, backgroundColor: backgroundColor, buttons: buttons, placeHolder: placeHolder, fontSize: fontSize, showBorder: showBorder, borderRadius: borderRadius, hasValue: values && values.length > 0, showClearButton: showClearButton, showEditButton: showEditButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), openEditorOnSummaryClick: openEditorOnSummaryClick, onEditorClick: () => {
+                    if (!disabled) {
+                        setShowChooser(true);
+                        updateIsModalOpen?.(true);
+                    }
+                }, elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, template: renderTemplate, onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined }), showChooser &&
+                _jsx(TMMetadataChooserForm, { tmSession: tmSession, allowMultipleSelection: allowMultipleSelection, height: '500px', width: '600px', allowSysMetadata: allowSysMetadata, showSysMetadataDirectly: showSysMetadataDirectly, getColorIndex: getColorIndex, dataSource: dataSource, tids: tids, qd: qd, qdShowOnlySelectItems: qdShowOnlySelectItems, filterMetadata: filterMetadata, selectedIDs: values, onClose: () => {
+                        setShowChooser(false);
+                        updateIsModalOpen?.(false);
+                    }, onChoose: (tid_mids) => { onValueChanged?.(tid_mids); } })] }));
 };
 export default TMMetadataChooser;
 export const TMMetadataChooserForm = ({ tmSession, tids, qd, filterMetadata, qdShowOnlySelectItems, selectedIDs, dataSource, allowMultipleSelection, allowSysMetadata = true, showSysMetadataDirectly, width, height, getColorIndex, onClose, onChoose }) => {

package/lib/components/choosers/TMOrderRetrieveFormats.js

@@ -17,6 +17,6 @@ const TMOrderRetrieveFormats = ({ value, valueOrig, onValueChanged, valuesToExcl
         }
         return dataSource;
     };
-    return (_jsx(TMDropDown, { label: label, elementStyle: { marginBottom: TMMargin.defultMargin, width: width }, dataSource: getDataSource(), value: value, isModifiedWhen: value != valueOrig, onValueChanged: (e) => { onValueChanged?.(e.target.value); }, width: width }));
+    return (_jsx(TMDropDown, { label: label, elementStyle: { marginBottom: TMMargin.defaultMargin, width: width }, dataSource: getDataSource(), value: value, isModifiedWhen: value != valueOrig, onValueChanged: (e) => { onValueChanged?.(e.target.value); }, width: width }));
 };
 export default TMOrderRetrieveFormats;

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

@@ -16,6 +16,8 @@ interface ITMUserChooserProps extends ITMChooserProps {
     initialShowChooser?: boolean;
     /** Allow showing all users with toggle button */
     allowShowAllUsers?: boolean;
+    /** Funzione per aggiornare lo stato di apertura della modale */
+    updateIsModalOpen?: (isOpen: boolean) => void;
 }
 declare const TMUserChooser: React.FunctionComponent<ITMUserChooserProps>;
 export default TMUserChooser;
@@ -30,11 +32,6 @@ interface ITMUserChooserFormProps extends ITMChooserFormProps<UserDescriptor> {
     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;

package/lib/components/choosers/TMUserChooser.js

@@ -1,16 +1,14 @@
 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 { SDKUI_Localizator, IconSearch, IconUserLevelMember, IconUserLevelAdministrator, IconUserLevelSystemAdministrator, IconUserLevelAutonomousAdministrator, LocalizeOwnershipLevels, LocalizeUserLevels, IconShowAllUsersOff, IconShowAllUsers } from '../../helper';
+import { StyledDivHorizontal } 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 }) => {
+import TMDataUserIdItemViewer from '../viewers/TMDataUserIdItemViewer';
+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, updateIsModalOpen }) => {
     const [showChooser, setShowChooser] = useState(initialShowChooser);
     useEffect(() => {
         setShowChooser(initialShowChooser);
@@ -18,12 +16,18 @@ const TMUserChooser = ({ labelColor, titleForm, filter, readOnly = false, icon,
     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(StyledDivHorizontal, { style: { minWidth: '125px', color: isPlaceholder ? '#a9a9a9' : 'inherit' }, children: [values && values.length > 0 && _jsx(TMDataUserIdItemViewer, { 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, { 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 &&
+    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: () => {
+                    if (!readOnly) {
+                        setShowChooser(true);
+                        updateIsModalOpen?.(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();
+                        updateIsModalOpen?.(false);
                     }, onChoose: (IDs) => { onValueChanged?.(IDs); } })] }));
 };
 export default TMUserChooser;
@@ -67,40 +71,6 @@ export const TMUserChooserForm = ({ allowMultipleSelection, columns, hideRefresh
     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;
@@ -109,12 +79,28 @@ export const TMUserIcon = ({ ud }) => {
     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()] })] }));
+    const buildTitle = (ud) => {
+        if (!ud)
+            return '';
+        const isExpired = User_IsExpired(ud);
+        return [
+            `ID: ${ud.id ?? ''}`,
+            `${SDKUI_Localizator.Name}: ${getCompleteUserName(ud.domain, ud.name) ?? ''}`,
+            ud.description && `${SDKUI_Localizator.Description}: ${ud.description}`,
+            ud.type && `${SDKUI_Localizator.Type}: ${ud.type}`,
+            ud.level && `${SDKUI_Localizator.UserLevel}: ${LocalizeUserLevels(ud.level) ?? ''}`,
+            `${SDKUI_Localizator.Valid}: ${isExpired ? SDKUI_Localizator.No : SDKUI_Localizator.Yes}`,
+            `${SDKUI_Localizator.Disabled}: ${ud.disabled ? SDKUI_Localizator.Yes : SDKUI_Localizator.No}`,
+            `---`,
+            `${SDKUI_Localizator.OwnerName}: ${ud.ownerName ?? ''} (${ud.ownerID ?? ''})`,
+            `${SDKUI_Localizator.OwnershipLevel}: ${LocalizeOwnershipLevels(ud.ownershipLevel) ?? ''}`,
+            `${SDKUI_Localizator.CreationTime}: ${ud.creationTime?.toDateString() ?? ''}`,
+            `${SDKUI_Localizator.LastUpdateTime}: ${ud.lastUpdateTime?.toDateString() ?? ''}`
+        ]
+            .filter(Boolean)
+            .join('\n');
     };
-    return (_jsx(TMTooltip, { content: renderTooltipContent(ud), children: children }));
+    return (_jsx("div", { title: buildTitle(ud), children: children }));
 };
 const getCompleteUserName = (domain, name) => {
     if (!name)

package/lib/components/editors/TMCheckBox.js

@@ -16,6 +16,8 @@ const StyledCheckBoxLabel = styled.div `
     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;
+    -webkit-touch-callout: none;
+  -webkit-user-select: none;
     &:focus{
         outline: none;
         background-image: linear-gradient(white, #E4E9F7);

package/lib/components/editors/TMDateBox.js

@@ -10,27 +10,36 @@ const TMDateBox = (props) => {
         let htmlElement = dateBoxRef?.current?.instance().element();
         if (!htmlElement)
             return;
-        let color = props.isModifiedWhen ? TMColors.tertiary : TMColors.border_normal;
+        let borderColor = props.isModifiedWhen ? TMColors.tertiary : TMColors.border_normal;
+        let textColor = props.isModifiedWhen ? TMColors.isModified : TMColors.text_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';
+            inputContainer.style.color = props.readOnly ? '#525252' : textColor;
+        }
+        let input = htmlElement.querySelector(".dx-texteditor-input");
+        if (input) {
+            if (!props.readOnly) {
+                input.style.color = textColor;
+            }
+            input.style.fontSize = 'var(--base-font-size)';
+            input.style.fontFamily = 'var(--base-font-family)';
         }
         let label = htmlElement.getElementsByClassName("dx-label")[0];
         if (label) {
-            label.style.borderBottomColor = color;
+            label.style.borderBottomColor = borderColor;
         }
         let labelBefore = htmlElement.getElementsByClassName("dx-label-before")[0];
         if (labelBefore) {
-            labelBefore.style.borderBottomColor = color;
-            labelBefore.style.borderTopColor = color;
-            labelBefore.style.borderInlineStartColor = color;
+            labelBefore.style.borderBottomColor = borderColor;
+            labelBefore.style.borderTopColor = borderColor;
+            labelBefore.style.borderInlineStartColor = borderColor;
         }
         let labelAfter = htmlElement.getElementsByClassName("dx-label-after")[0];
         if (labelAfter) {
-            labelAfter.style.borderBottomColor = color;
-            labelAfter.style.borderTopColor = color;
-            labelAfter.style.borderInlineEndColor = color;
+            labelAfter.style.borderBottomColor = borderColor;
+            labelAfter.style.borderTopColor = borderColor;
+            labelAfter.style.borderInlineEndColor = borderColor;
         }
     }, [props.isModifiedWhen, props.readOnly]);
     const dateBoxRef = useRef(null);

package/lib/components/editors/TMEditorStyled.js

@@ -27,6 +27,9 @@ color: ${props => props.readOnly ? '#525252' : !props.$disabled ? (props.$vil.le
 border-radius: ${props => props.$borderRadius ?? TMEditorsDefaultBorderRadius};
 min-width: ${props => props.$isMobile && '70px'};
 background: ${props => props.readOnly ? 'linear-gradient(white 20%, #d6d6d6 80%)' : 'white'};
+overflow: hidden;
+text-overflow: ellipsis;
+white-space: nowrap;
 &:focus{
     outline: none;
     background-image: linear-gradient(white, #E4E9F7);
@@ -48,6 +51,8 @@ export const StyledEditorIcon = styled.div `
     margin-right: 2px;
     font-size: 18px;
     user-select: none;
+    -webkit-touch-callout: none;
+  -webkit-user-select: none;
     transform: translateY(18px);
 `;
 export const StyledEditorLabel = styled.div `
@@ -55,6 +60,8 @@ export const StyledEditorLabel = styled.div `
     color:${props => !props.$disabled ? props.$isFocused ? TMColors.primary : props.$color ? props.$color : TMColors.label_normal : TMColors.disabled};
     padding: 0 3px;
     user-select: none;
+    -webkit-touch-callout: none;
+  -webkit-user-select: none;
     transform: ${props => props.$labelPosition === 'left' && 'translateY(5px)'};
     width: max-content;
     transform: translate(10px, 6px);

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CultureIDs } from '@topconsultnpm/sdk-ts';
+import { CultureIDs, QueryDescriptor } from '@topconsultnpm/sdk-ts';
 import { ValidationItem } from '@topconsultnpm/sdk-ts';
 export declare const getCultureIDImg: (cultureID: CultureIDs) => any;
 interface TMLocalizedTextBoxProps {
@@ -13,6 +13,8 @@ interface TMLocalizedTextBoxProps {
     value_ES?: string;
     value_DE?: string;
     validationItems?: ValidationItem[];
+    qd?: QueryDescriptor;
+    tid?: number;
     onValueChanged: (lang: CultureIDs, value: string) => void;
 }
 declare const TMLocalizedTextBox: React.FC<TMLocalizedTextBoxProps>;

package/lib/components/editors/TMLocalizedTextBox.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import TMTextBox from './TMTextBox';
+import TMMetadataTextBox from './TMMetadataTextBox';
 import { IconLanguage, SDKUI_Localizator } from '../../helper';
 import { CultureIDs } from '@topconsultnpm/sdk-ts';
 import it from '../../assets/italy.svg';
@@ -13,11 +14,9 @@ import pt from '../../assets/portugal.svg';
 import { createPortal } from 'react-dom';
 const Portal = ({ children, popoverRef }) => {
     const mount = document.body;
-    // Usa un ref per l'elemento del portale per evitare di ricrearlo ad ogni render
     const elRef = useRef(document.createElement('div'));
     useEffect(() => {
         const el = elRef.current;
-        // Assegna il ref al div del portale
         el.ref = popoverRef;
         mount.appendChild(el);
         return () => {
@@ -33,7 +32,7 @@ const LocalizedContainer = styled.div `
 const Popover = styled.div `
   display: ${props => props.$isVisible ? 'flex' : 'none'};
   flex-direction: column;
-  position: fixed; /* Usa 'fixed' o 'absolute' a seconda del comportamento desiderato */
+  position: fixed;
   top: ${props => props.$top}px;
   left: ${props => props.$left}px;
   width: ${props => props.$width}px;
@@ -41,7 +40,7 @@ const Popover = styled.div `
   border-radius: 4px;
   background-color: #fff;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  z-index: 2000;
+  z-index: 1502;
   padding: 8px;
 `;
 const Badge = styled.span `
@@ -72,10 +71,10 @@ export const getCultureIDImg = (cultureID) => {
         default: return it;
     }
 };
-const TMLocalizedTextBox = ({ label, value, value_IT, value_EN, value_FR, value_PT, value_ES, value_DE, isModifiedWhen, validationItems, onValueChanged, }) => {
+const TMLocalizedTextBox = ({ label, value, value_IT, value_EN, value_FR, value_PT, value_ES, value_DE, isModifiedWhen, validationItems, qd, tid, onValueChanged, }) => {
     const [isPopoverVisible, setIsPopoverVisible] = useState(false);
-    const containerRef = useRef(null); // Riferimento al contenitore principale
-    const popoverRef = useRef(null); // Riferimento per il Popover
+    const containerRef = useRef(null);
+    const popoverRef = useRef(null);
     const [popoverPosition, setPopoverPosition] = useState({ top: 0, left: 0, width: 0 });
     const languages = [
         { code: CultureIDs.It_IT, label: 'Italiano', value: value_IT },
@@ -85,13 +84,12 @@ const TMLocalizedTextBox = ({ label, value, value_IT, value_EN, value_FR, value_
         { code: CultureIDs.Es_ES, label: 'Español', value: value_ES },
         { code: CultureIDs.De_DE, label: 'Deutsch', value: value_DE },
     ];
-    // Calcola il numero di lingue con valori non nulli o vuoti
     const localizedCount = languages.filter(lang => lang.value && lang.value.trim() !== '').length;
     const handleTogglePopover = () => {
         if (containerRef.current) {
             const rect = containerRef.current.getBoundingClientRect();
             setPopoverPosition({
-                top: rect.bottom, // Posiziona sotto l'input
+                top: rect.bottom,
                 left: rect.left,
                 width: rect.width
             });
@@ -99,19 +97,23 @@ const TMLocalizedTextBox = ({ label, value, value_IT, value_EN, value_FR, value_
         setIsPopoverVisible(prev => !prev);
     };
     const handleClosePopover = () => setIsPopoverVisible(false);
-    // Close popover when clicking outside
     useEffect(() => {
+        if (!isPopoverVisible)
+            return;
         const handleClickOutside = (event) => {
-            if (isPopoverVisible &&
-                containerRef.current &&
+            if (containerRef.current &&
                 !containerRef.current.contains(event.target) &&
                 popoverRef.current &&
                 !popoverRef.current.contains(event.target)) {
                 handleClosePopover();
             }
         };
-        document.addEventListener("mousedown", handleClickOutside);
+        // Ritarda l'aggiunta del listener per evitare che catturi il click di apertura
+        const timeoutId = setTimeout(() => {
+            document.addEventListener("mousedown", handleClickOutside);
+        }, 0);
         return () => {
+            clearTimeout(timeoutId);
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [isPopoverVisible]);
@@ -120,6 +122,6 @@ const TMLocalizedTextBox = ({ label, value, value_IT, value_EN, value_FR, value_
         icon: (_jsxs(IconContainer, { children: [_jsx(IconLanguage, {}), localizedCount > 0 && _jsx(Badge, { children: localizedCount })] })),
         onClick: handleTogglePopover,
     };
-    return (_jsxs(LocalizedContainer, { ref: containerRef, children: [_jsx(TMTextBox, { type: "text", label: label, value: value, isModifiedWhen: isModifiedWhen, buttons: [localizationButton], validationItems: validationItems, onValueChanged: (e) => onValueChanged(CultureIDs.None, e.target.value) }), isPopoverVisible && (_jsx(Portal, { popoverRef: popoverRef, children: _jsx(Popover, { ref: popoverRef, "$isVisible": isPopoverVisible, "$top": popoverPosition.top, "$left": popoverPosition.left, "$width": popoverPosition.width, onMouseDown: (e) => e.stopPropagation(), children: languages.map((lang) => (_jsx(TMTextBox, { label: `${lang.label}`, showClearButton: true, icon: _jsx("img", { src: getCultureIDImg(lang.code), alt: "Lang", width: 18, height: 18 }), value: lang.value || '', onValueChanged: (e) => onValueChanged(lang.code, e.target.value) }, lang.code))) }) }))] }));
+    return (_jsxs(LocalizedContainer, { ref: containerRef, children: [(qd || tid) ? (_jsx(TMMetadataTextBox, { type: "text", label: label, value: value, isModifiedWhen: isModifiedWhen, buttons: [localizationButton], validationItems: validationItems, qd: qd, tid: tid, onValueChanged: (e) => onValueChanged(CultureIDs.None, e.target.value) })) : (_jsx(TMTextBox, { type: "text", label: label, value: value, isModifiedWhen: isModifiedWhen, buttons: [localizationButton], validationItems: validationItems, onValueChanged: (e) => onValueChanged(CultureIDs.None, e.target.value) })), isPopoverVisible && (_jsx(Portal, { popoverRef: popoverRef, children: _jsx(Popover, { ref: popoverRef, "$isVisible": isPopoverVisible, "$top": popoverPosition.top, "$left": popoverPosition.left, "$width": popoverPosition.width, onMouseDown: (e) => e.stopPropagation(), children: languages.map((lang) => ((qd || tid) ? (_jsx(TMMetadataTextBox, { label: `${lang.label}`, showClearButton: true, icon: _jsx("img", { src: getCultureIDImg(lang.code), alt: "Lang", width: 18, height: 18 }), value: lang.value || '', qd: qd, tid: tid, onValueChanged: (e) => onValueChanged(lang.code, e.target.value) }, lang.code)) : (_jsx(TMTextBox, { label: `${lang.label}`, showClearButton: true, icon: _jsx("img", { src: getCultureIDImg(lang.code), alt: "Lang", width: 18, height: 18 }), value: lang.value || '', onValueChanged: (e) => onValueChanged(lang.code, e.target.value) }, lang.code)))) }) }))] }));
 };
 export default TMLocalizedTextBox;

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

@@ -23,6 +23,7 @@ interface ITMMetadataEditorProps {
     onValueChange?: (value: any) => void;
     onCascadeRefreshDynDataLists?: (dynDataListsToBeRefreshed: DynDataListsToBeRefreshed[]) => void;
     onCascadeUpdateMIDs?: (midsToBeUpdated: MIDsToBeUpdated[]) => void;
+    updateIsModalOpen?: (isOpen: boolean) => void;
 }
 declare const TMMetadataEditor: React.FC<ITMMetadataEditorProps>;
 export default TMMetadataEditor;

package/lib/components/editors/TMMetadataEditor.js

@@ -37,7 +37,7 @@ const getDateDisplayType = (format) => {
         default: return DateDisplayTypes.Date;
     }
 };
-const TMMetadataEditor = ({ isSelected = false, customLabel, isReadOnly, isLexProt, layoutMode, queryOperator, isEditable, isModifiedWhen = false, tid, mid, value, queryParamsDynDataList, containerElement, autoFocus, validationItems = [], disabled = false, openChooserBySingleClick = true, onValueChanged, onValueChange, onCascadeRefreshDynDataLists, onCascadeUpdateMIDs }) => {
+const TMMetadataEditor = ({ isSelected = false, customLabel, isReadOnly, isLexProt, layoutMode, queryOperator, isEditable, isModifiedWhen = false, tid, mid, value, queryParamsDynDataList, containerElement, autoFocus, validationItems = [], disabled = false, openChooserBySingleClick = true, onValueChanged, onValueChange, onCascadeRefreshDynDataLists, onCascadeUpdateMIDs, updateIsModalOpen }) => {
     const [md, setMd] = useState();
     useEffect(() => {
         // Passiamo did = undefined, perché è già in cache
@@ -84,21 +84,21 @@ const TMMetadataEditor = ({ isSelected = false, customLabel, isReadOnly, isLexPr
                     onValueChanged?.(undefined);
                 else
                     onValueChanged?.(IDs[0]);
-            } });
+            }, updateIsModalOpen: updateIsModalOpen });
     if (md?.dataDomain == MetadataDataDomains.DataList)
         return _jsx(TMDataListItemChooser, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', titleForm: md.nameLoc, readOnly: isReadOnlyResult, isModifiedWhen: isModifiedWhenInternal(), label: (modulesWithLabelTop || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, icon: showLabelTop ? icon : undefined, validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, backgroundColor: TMColors.default_background, dataListId: md.dataListID, openChooserBySingleClick: openChooserBySingleClick, allowMultipleSelection: multipleSelectionIsenabled, values: value?.split(',').map((item) => !item.startsWith("'") ? item : item.slice(1, -1)) ?? [], showClearButton: !isReadOnlyResult, onValueChanged: (IDs) => {
                 if (!IDs || IDs.length <= 0)
                     onValueChanged?.(undefined);
                 else
                     onValueChanged?.(IDs.join(","));
-            } });
+            }, updateIsModalOpen: updateIsModalOpen });
     if (md?.dataDomain == MetadataDataDomains.UserID)
         return _jsx(TMUserChooser, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', titleForm: md.nameLoc, readOnly: isReadOnlyResult, isModifiedWhen: isModifiedWhenInternal(), label: (modulesWithLabelTop || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, icon: showLabelTop ? icon : undefined, validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, openChooserBySingleClick: openChooserBySingleClick, backgroundColor: TMColors.default_background, showClearButton: !isReadOnlyResult, allowMultipleSelection: multipleSelectionIsenabled, values: value?.split(',').map((item) => !item.startsWith("'") ? Number(item) : Number(item.slice(1, -1))) ?? [], onValueChanged: (IDs) => {
                 if (!IDs || IDs.length <= 0)
                     onValueChanged?.(undefined);
                 else
                     onValueChanged?.(IDs.join(","));
-            } });
+            }, updateIsModalOpen: updateIsModalOpen });
     if (showAsText)
         return _jsx(TMTextBox, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', isModifiedWhen: isModifiedWhenInternal(), readOnly: isReadOnlyResult, label: (modulesWithLabelTop || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, icon: showLabelTop ? icon : undefined, validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, type: 'text', showClearButton: !isReadOnlyResult, maxLength: maxLength, autoFocus: autoFocus, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) });
     if (showAsNumber)

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { QueryDescriptor } from '@topconsultnpm/sdk-ts';
+import type { ITMTextBox } from './TMTextBox';
+interface ITMMetadataTextBox extends ITMTextBox {
+    qd?: QueryDescriptor;
+    tid?: number;
+}
+declare const TMMetadataTextBox: React.FC<ITMMetadataTextBox>;
+export default TMMetadataTextBox;