@topconsultnpm/sdkui-react-beta 6.11.77 → 6.11.79

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { LayoutModes } from '@topconsultnpm/sdk-ts-beta';
+interface ITMDistinctValues {
+    tid: number | undefined;
+    mid: number | undefined;
+    layoutMode?: LayoutModes;
+    separator?: string;
+    onSelectionChanged?: (e: DistinctValuesEventArgs) => void;
+}
+type DistinctValuesEventArgs = {
+    tid: number | undefined;
+    mid: number | undefined;
+    newValue: string | undefined;
+    isQueued: boolean;
+};
+declare const TMDistinctValues: React.FC<ITMDistinctValues>;
+export default TMDistinctValues;

package/lib/components/choosers/TMDistinctValues.js

@@ -0,0 +1,145 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { LayoutModes, MetadataDataDomains, AccessLevels, MetadataDataTypes, SDK_Globals, DcmtTypeListCacheService, DataColumnTypes } from '@topconsultnpm/sdk-ts-beta';
+import styled from 'styled-components';
+import { IconDataList, SDKUI_Localizator } from '../../helper';
+import TMButton from '../base/TMButton';
+import TMDataGrid from '../base/TMDataGrid';
+import { TMExceptionBoxManager } from '../base/TMPopUp';
+import TMSpinner from '../base/TMSpinner';
+import TMCheckBox from '../editors/TMCheckBox';
+const StyledDistinctValues = styled.div `display: flex; flex-direction: column; height: 100%; overflow: hidden; gap: 10px;`;
+const StyledPanelContainer = styled.div ` width: 100%; height: 100%; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; `;
+const TMDistinctValues = ({ tid, mid, layoutMode = LayoutModes.None, separator = " ", onSelectionChanged }) => {
+    const [focusedItem, setFocusedItem] = useState();
+    const [dataSource, setDataSource] = useState([]);
+    const [isQueued, setIsQueued] = useState(false);
+    const [md, setMd] = useState();
+    const [hasLoadedBefore, setHasLoadedBefore] = useState(false);
+    const [showPrompt, setShowPrompt] = useState(false);
+    const [currentValue, setCurrentValue] = useState('');
+    useEffect(() => {
+        setIsQueued(false);
+        setFocusedItem(undefined);
+        setCurrentValue('');
+    }, [md]);
+    useEffect(() => {
+        if (!focusedItem)
+            return;
+        if (!md)
+            return;
+        if ((layoutMode === LayoutModes.Ark || layoutMode === LayoutModes.Update) && md.dataDomain === MetadataDataDomains.Computed)
+            return;
+        const permissionCheck = {
+            [LayoutModes.Ark]: md.perm?.canArchive,
+            [LayoutModes.Update]: md.perm?.canUpdate,
+            [LayoutModes.None]: md.perm?.canSearch,
+        };
+        if (layoutMode in permissionCheck && permissionCheck[layoutMode] !== AccessLevels.Yes)
+            return;
+        if (!focusedItem.value) {
+            setCurrentValue('');
+            onSelectionChanged?.({ tid: tid, mid: mid, newValue: undefined, isQueued: isQueued });
+            return;
+        }
+        let value = md.dataType === MetadataDataTypes.Number ? parseFloat(focusedItem.value.replace(',', '.')).toString() : focusedItem.value;
+        let newValue = isQueued ? currentValue + separator + value : value;
+        setCurrentValue(newValue);
+        onSelectionChanged?.({ tid: tid, mid: mid, newValue: newValue, isQueued: isQueued });
+    }, [focusedItem]);
+    useEffect(() => {
+        if (!hasLoadedBefore) {
+            getDistictValuesAsync();
+            setHasLoadedBefore(true);
+        }
+        else {
+            getDcmtTypeAsync();
+            setShowPrompt(true);
+        }
+    }, [mid, hasLoadedBefore]);
+    const getDistictValuesAsync = async () => {
+        if (!tid)
+            return;
+        try {
+            TMSpinner.show({ description: 'Caricamento dei valori distinti...' });
+            let dtd = await DcmtTypeListCacheService.GetAsync(tid, true);
+            setMd(dtd?.metadata?.find(o => o.id === mid));
+            let result = await SDK_Globals.tmSession?.NewSearchEngine().GetDistinctValuesAsync(tid, mid, 10000);
+            setDataSource(convertDataTableToObject(result?.dtdResult));
+            setShowPrompt(false);
+        }
+        catch (e) {
+            let err = e;
+            TMExceptionBoxManager.show({ exception: err });
+        }
+        finally {
+            TMSpinner.hide();
+        }
+    };
+    const getDcmtTypeAsync = async () => {
+        if (!tid)
+            return;
+        try {
+            TMSpinner.show({ description: 'Caricamento dei valori distinti...' });
+            let dtd = await DcmtTypeListCacheService.GetAsync(tid, true);
+            setMd(dtd?.metadata?.find(o => o.id === mid));
+        }
+        catch (e) {
+            let err = e;
+            TMExceptionBoxManager.show({ exception: err });
+        }
+        finally {
+            TMSpinner.hide();
+        }
+    };
+    const handleLoadData = () => {
+        getDistictValuesAsync();
+    };
+    const onFocusedRowChanged = useCallback((e) => {
+        setFocusedItem(e.row?.data);
+    }, []);
+    const customColumns = useMemo(() => {
+        return ([
+            { dataField: 'value', dataType: md?.dataType === MetadataDataTypes.DateTime ? 'date' : 'string', caption: md?.nameLoc, width: 'min-content' },
+            { dataField: 'Count', dataType: 'number', caption: 'N°' }
+        ]);
+    }, [md]);
+    const customSummary = useMemo(() => {
+        return ({
+            totalItems: [
+                { column: 'value', summaryType: 'count' },
+                { column: 'Count', summaryType: 'sum' }
+            ]
+        });
+    }, []);
+    const convertDataTableToObject = (dtdResult) => {
+        if (!dtdResult?.columns?.length || !dtdResult?.rows?.length)
+            return [];
+        return dtdResult.rows.map((row, index) => {
+            let rowObject = { rowIndex: index };
+            dtdResult.columns && dtdResult.columns.forEach((col, colIndex) => {
+                if (col?.caption) {
+                    rowObject[colIndex === 0 ? "value" : col.caption] = col.dataType === DataColumnTypes.Number
+                        ? row?.[colIndex]?.replace('.', ',')
+                        : row?.[colIndex] ?? null;
+                }
+            });
+            return rowObject;
+        });
+    };
+    const queueDisabled = () => {
+        if (layoutMode !== LayoutModes.Ark && layoutMode !== LayoutModes.Update)
+            return false;
+        if (!md)
+            return false;
+        const { dataType, dataDomain } = md;
+        return (dataType === MetadataDataTypes.DateTime ||
+            dataType === MetadataDataTypes.Number ||
+            (dataDomain !== undefined && dataDomain !== MetadataDataDomains.None));
+    };
+    if (showPrompt) {
+        return (_jsxs(StyledPanelContainer, { children: [_jsx(IconDataList, { fontSize: 96 }), _jsxs("p", { children: ["Caricare i valori distinti di ", _jsx("strong", { children: `"${md?.nameLoc}" ` }), "? "] }), _jsx(TMButton, { caption: SDKUI_Localizator.Yes, onClick: handleLoadData, showTooltip: false })] }));
+    }
+    return (_jsxs(StyledDistinctValues, { children: [!queueDisabled() && _jsx(TMCheckBox, { elementStyle: { position: 'absolute', right: '15px', top: '15px', zIndex: 10000 }, label: 'Accoda', value: isQueued, onValueChanged: () => { setIsQueued(!isQueued); } }), _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 })] }));
+};
+export default TMDistinctValues;

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

@@ -32,15 +32,18 @@ export declare const renderFormulaIcon: (iconType: FormulaIconTypes, tid?: numbe
 declare const TMFormulaEditor: React.FunctionComponent<ITMApplyFormProps<FormulaDescriptor>>;
 export default TMFormulaEditor;
 export declare class FormulaHelper {
+    static isFormula(value: string | undefined): boolean;
+    static removeFormulaTag(value: string | undefined): string | undefined;
+    static addFormulaTag(value: string | undefined): string | undefined;
     static TreeViewList(tid: number, systemMDs: MetadataDescriptor[] | undefined, userMDs: MetadataDescriptor[] | undefined, formulaTarget: FormulaTargets, dbBrand: DBBrands): any;
-    static jsonItems_LoadVariables(tid: number, formulaTarget: FormulaTargets, systemMDs: MetadataDescriptor[] | undefined, userMDs: MetadataDescriptor[] | undefined): any;
-    static jsonItems_SystemMDs(tid: number, systemMDs: MetadataDescriptor[] | undefined): any;
-    static jsonItems_UserMDs(tid: number, userMDs: MetadataDescriptor[] | undefined): any;
-    static jsonItems_SystemVariables(formulaTarget: FormulaTargets): any;
-    static jsonItems_LoadInstructions(dbBrand: DBBrands): any;
-    static jsonItems_LoadFunctions(dbBrand: DBBrands, formulaTarget: FormulaTargets): any;
-    static jsonItems_LoadFunctions_Convert(dbBrand: DBBrands): any;
-    static jsonItems_LoadFunctions_String(dbBrand: DBBrands): any;
-    static jsonItems_LoadFunctions_Date(dbBrand: DBBrands, formulaTarget: FormulaTargets): any;
-    static jsonItems_LoadFunctions_Link(): any;
+    private static jsonItems_LoadVariables;
+    private static jsonItems_SystemMDs;
+    private static jsonItems_UserMDs;
+    private static jsonItems_SystemVariables;
+    private static jsonItems_LoadInstructions;
+    private static jsonItems_LoadFunctions;
+    private static jsonItems_LoadFunctions_Convert;
+    private static jsonItems_LoadFunctions_String;
+    private static jsonItems_LoadFunctions_Date;
+    private static jsonItems_LoadFunctions_Link;
 }

package/lib/components/editors/TMFormulaEditor.js

@@ -122,7 +122,7 @@ const TMFormulaEditor = (props) => {
     const renderTreeViewItem = useCallback((item) => {
         return (_jsxs(StyledDivHorizontal, { style: { display: 'flex', gap: '5px' }, children: [renderFormulaIcon(item.icon, item.tid, item.md), _jsx("span", { style: { verticalAlign: 'middle' }, children: item.text }), !item.hasItems && _jsx("span", { style: { verticalAlign: 'middle', color: TMColors.primary }, children: _jsx(IconPencil, { onClick: () => { insertText(item.text); } }) })] }));
     }, []);
-    return (_jsx(TMApplyForm, { isModal: props.isModal, formMode: props.formMode, isModified: formData.expression !== formDataOrig.expression, exception: exception, validationItems: validationItems, title: SDKUI_Localizator.Formula, hasNavigation: false, height: '600px', width: '800px', onApply: () => applyData(), onClose: props.onClose, onUndo: () => {
+    return (_jsx(TMApplyForm, { isModal: props.isModal, formMode: props.formMode, isModified: formData.expression !== formDataOrig.expression, exception: exception, validationItems: validationItems, title: SDKUI_Localizator.Formula, hasNavigation: false, showBack: props.showBack, height: '600px', width: '800px', onApply: () => applyData(), onClose: props.onClose, onUndo: () => {
             setFormData(formDataOrig);
             setValidationItems([]);
         }, customToolbarElements: _jsx(TMButton, { caption: SDKUI_Localizator.EvaluateResult, onClick: () => { formulaValidator_BackEnd(); }, btnStyle: 'toolbar', icon: _jsx(IconNotification, {}) }), children: _jsxs(TMSplitterLayout, { direction: 'vertical', showSeparator: true, separatorSize: 2, start: ['50%', '50%'], min: ['0px', '0px'], children: [_jsx(TMLayoutItem, { children: _jsx(TMCard, { children: _jsx(TreeView, { id: "treeview", items: props.inputData?.items, width: '100%', scrollDirection: 'vertical', itemRender: renderTreeViewItem }) }) }), _jsx(TMLayoutItem, { children: _jsxs(TMLayoutContainer, { direction: 'vertical', children: [_jsx(TMLayoutItem, { children: _jsx(TMCard, { scrollX: true, children: _jsx("textarea", { ref: textAreaRef, spellCheck: false, value: formData?.expression ?? '', onChange: (e) => {
@@ -135,6 +135,30 @@ const TMFormulaEditor = (props) => {
 };
 export default TMFormulaEditor;
 export class FormulaHelper {
+    static isFormula(value) {
+        if (!value)
+            return false;
+        if (value === "=")
+            return false;
+        if (value.startsWith("=="))
+            return false;
+        // Per intercettare alcuni Oggetti delle e-mail del tipo "=?ISO-8859-1?Q?Everything_for_=A35_-_Box_Sets,_Games_?=
+        if (value.startsWith("=?ISO-8859-1"))
+            return false;
+        return value.startsWith("=");
+    }
+    static removeFormulaTag(value) {
+        if (!this.isFormula(value))
+            return value;
+        return value?.substring(1);
+    }
+    static addFormulaTag(value) {
+        if (!value)
+            return value;
+        if (this.isFormula(value))
+            return value;
+        return `=${value}`;
+    }
     static TreeViewList(tid, systemMDs, userMDs, formulaTarget, dbBrand) {
         let list = [{
                 id: '1',

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

@@ -6,7 +6,7 @@ interface ITMMetadataEditorProps {
     mid?: number;
     value: string | undefined;
     queryParamsDynDataList?: string[];
-    autoFocus: boolean;
+    autoFocus?: boolean;
     containerElement: Element | undefined;
     disabled?: boolean;
     validationItems?: ValidationItem[];
@@ -15,12 +15,11 @@ interface ITMMetadataEditorProps {
     layoutMode?: LayoutModes;
     queryOperator?: QueryOperators;
     isModifiedWhen?: boolean;
-    isEditableList?: boolean;
+    isEditable?: boolean;
     openChooserBySingleClick?: boolean;
     iconContextMenu?: React.ReactNode;
     customLabel?: string;
-    isMetadataSelected?: boolean;
-    onEditorClick?: () => void;
+    isSelected?: boolean;
     onValueChanged?: (value: any) => void;
     onValueChange?: (value: any) => void;
     onCascadeRefreshDynDataLists?: (dynDataListsToBeRefreshed: DynDataListsToBeRefreshed[]) => void;
@@ -28,3 +27,8 @@ interface ITMMetadataEditorProps {
 }
 declare const TMMetadataEditor: React.FC<ITMMetadataEditorProps>;
 export default TMMetadataEditor;
+export declare const MetadataEditorContextMenu: React.MemoExoticComponent<({ target, menuItems }: {
+    target: string;
+    menuItems: any[];
+}) => import("react/jsx-runtime").JSX.Element>;
+export declare const useMetadataEditableList: () => [(mid: number | undefined) => boolean, (mid: number | undefined) => void];

package/lib/components/editors/TMMetadataEditor.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { MetadataDataDomains, MetadataDataTypes, DcmtTypeListCacheService, LayoutModes, AccessLevels, PlatformObjectValidator, QueryOperators, SDK_Globals, AppModules, MetadataFormats } from '@topconsultnpm/sdk-ts-beta';
 import { TMColors } from '../../utils/theme';
 import TMDataListItemChooser from '../choosers/TMDataListItemChooser';
@@ -10,6 +10,7 @@ import TMTextBox from './TMTextBox';
 import { TMMetadataIcon } from '../viewers/TMMidViewer';
 import TMTextArea from './TMTextArea';
 import { DateDisplayTypes } from '../../helper/Globalization';
+import ContextMenu from "devextreme-react/cjs/context-menu";
 const renderMetadataIcon = (tid, md, layoutMode, isMetadataSelected, iconContextMenu) => {
     return (_jsxs("div", { id: `md-${md?.id}`, style: { height: '100%', width: '100%' }, children: [_jsx(TMMetadataIcon, { isMetadataSelected: isMetadataSelected, layoutMode: layoutMode, md: md, tid: tid }), iconContextMenu] }));
 };
@@ -37,13 +38,13 @@ const getDateDisplayType = (format) => {
         default: return DateDisplayTypes.Date;
     }
 };
-const TMMetadataEditor = ({ isMetadataSelected = false, onEditorClick, customLabel, isReadOnly, isLexProt, layoutMode, queryOperator, isEditableList, isModifiedWhen = false, tid, mid, value, queryParamsDynDataList, containerElement, autoFocus, validationItems = [], disabled = false, openChooserBySingleClick = true, iconContextMenu, 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, iconContextMenu, onValueChanged, onValueChange, onCascadeRefreshDynDataLists, onCascadeUpdateMIDs }) => {
     const [md, setMd] = useState();
     useEffect(() => {
         DcmtTypeListCacheService.GetAsync(tid).then((dtd) => {
             setMd(dtd?.metadata?.find(o => o.id == mid));
         });
-    }, [mid]);
+    }, [tid, mid]);
     const isReadOnlyInternal = () => {
         if (!md)
             return false;
@@ -65,48 +66,69 @@ const TMMetadataEditor = ({ isMetadataSelected = false, onEditorClick, customLab
     if (layoutMode === LayoutModes.None && showAsText)
         maxLength = 1000;
     let isReadOnlyResult = isReadOnly ?? isReadOnlyInternal();
-    let icon = renderMetadataIcon(tid, md, layoutMode, isMetadataSelected, iconContextMenu);
-    if (value?.startsWith("{@QueryParam") || value == "{@UserName}" || value == "{@UserID}" || queryOperator == QueryOperators.Custom)
-        return _jsxs("div", { onFocus: onEditorClick, style: { width: '100%', height: 'fit-content' }, children: ["  ", _jsx(TMTextBox, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', isModifiedWhen: isModifiedWhenInternal(), readOnly: isReadOnlyResult, label: (SDK_Globals.appModule !== AppModules.SURFER || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, icon: showLabelTop ? icon : undefined, validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, type: 'text', maxLength: maxLength, autoFocus: autoFocus, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) }), " "] });
-    if (md?.dataDomain == MetadataDataDomains.DynamicDataList && !isEditableList)
-        return _jsxs("div", { onFocus: onEditorClick, style: { width: '100%', height: 'fit-content' }, children: [_jsx(TMDynDataListItemChooser, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', titleForm: md.nameLoc, readOnly: isReadOnlyResult, layoutMode: layoutMode, isModifiedWhen: isModifiedWhenInternal(), label: (SDK_Globals.appModule !== AppModules.SURFER || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, icon: showLabelTop ? icon : undefined, validationItems: validationItems, disabled: disabled, md: md, tid: tid, openChooserBySingleClick: openChooserBySingleClick, queryParamsDynDataList: queryParamsDynDataList, onCascadeRefreshDynDataLists: onCascadeRefreshDynDataLists, onCascadeUpdateMIDs: onCascadeUpdateMIDs, elementStyle: { width: '100%' }, backgroundColor: TMColors.default_background, allowMultipleSelection: multipleSelectionIsenabled, values: value ? [value] : [], showClearButton: !isReadOnlyResult, onValueChanged: (IDs) => {
-                        if (!IDs || IDs.length <= 0)
-                            onValueChanged?.(undefined);
-                        else
-                            onValueChanged?.(IDs[0]);
-                    } }), " "] });
-    if (md?.dataDomain == MetadataDataDomains.DataList && !isEditableList)
-        return _jsxs("div", { onFocus: onEditorClick, style: { width: '100%', height: 'fit-content' }, children: [_jsx(TMDataListItemChooser, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', titleForm: md.nameLoc, readOnly: isReadOnlyResult, isModifiedWhen: isModifiedWhenInternal(), label: (SDK_Globals.appModule !== AppModules.SURFER || 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(","));
-                    } }), " "] });
-    if (md?.dataDomain == MetadataDataDomains.UserID && !isEditableList)
-        return _jsxs("div", { onFocus: onEditorClick, style: { width: '100%', height: 'fit-content' }, children: [_jsx(TMUserChooser, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', titleForm: md.nameLoc, readOnly: isReadOnlyResult, isModifiedWhen: isModifiedWhenInternal(), label: (SDK_Globals.appModule !== AppModules.SURFER || 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(","));
-                    } }), " "] });
+    let icon = renderMetadataIcon(tid, md, layoutMode, isSelected, iconContextMenu);
+    if (value?.startsWith("{@QueryParam") || value == "{@UserName}" || value == "{@UserID}" || queryOperator == QueryOperators.Custom || isEditable)
+        return _jsx(TMTextBox, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', isModifiedWhen: isModifiedWhenInternal(), readOnly: isReadOnlyResult, label: (SDK_Globals.appModule !== AppModules.SURFER || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, icon: showLabelTop ? icon : undefined, validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, type: 'text', maxLength: isEditable ? undefined : maxLength, autoFocus: autoFocus, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) });
+    if (md?.dataDomain == MetadataDataDomains.DynamicDataList)
+        return _jsx(TMDynDataListItemChooser, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', titleForm: md.nameLoc, readOnly: isReadOnlyResult, layoutMode: layoutMode, isModifiedWhen: isModifiedWhenInternal(), label: (SDK_Globals.appModule !== AppModules.SURFER || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, icon: showLabelTop ? icon : undefined, validationItems: validationItems, disabled: disabled, md: md, tid: tid, openChooserBySingleClick: openChooserBySingleClick, queryParamsDynDataList: queryParamsDynDataList, onCascadeRefreshDynDataLists: onCascadeRefreshDynDataLists, onCascadeUpdateMIDs: onCascadeUpdateMIDs, elementStyle: { width: '100%' }, backgroundColor: TMColors.default_background, allowMultipleSelection: multipleSelectionIsenabled, values: value ? [value] : [], showClearButton: !isReadOnlyResult, onValueChanged: (IDs) => {
+                if (!IDs || IDs.length <= 0)
+                    onValueChanged?.(undefined);
+                else
+                    onValueChanged?.(IDs[0]);
+            } });
+    if (md?.dataDomain == MetadataDataDomains.DataList)
+        return _jsx(TMDataListItemChooser, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', titleForm: md.nameLoc, readOnly: isReadOnlyResult, isModifiedWhen: isModifiedWhenInternal(), label: (SDK_Globals.appModule !== AppModules.SURFER || 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(","));
+            } });
+    if (md?.dataDomain == MetadataDataDomains.UserID)
+        return _jsx(TMUserChooser, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', titleForm: md.nameLoc, readOnly: isReadOnlyResult, isModifiedWhen: isModifiedWhenInternal(), label: (SDK_Globals.appModule !== AppModules.SURFER || 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(","));
+            } });
     if (showAsText)
-        return _jsxs("div", { onFocus: onEditorClick, style: { width: '100%', height: 'fit-content' }, children: [" ", _jsx(TMTextBox, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', isModifiedWhen: isModifiedWhenInternal(), readOnly: isReadOnlyResult, label: (SDK_Globals.appModule !== AppModules.SURFER || 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) }), " "] });
+        return _jsx(TMTextBox, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', isModifiedWhen: isModifiedWhenInternal(), readOnly: isReadOnlyResult, label: (SDK_Globals.appModule !== AppModules.SURFER || 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)
-        return _jsxs("div", { onFocus: onEditorClick, style: { width: '100%', height: 'fit-content' }, children: [" ", _jsx(TMTextBox, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', isModifiedWhen: isModifiedWhenInternal(), readOnly: isReadOnlyResult, label: (SDK_Globals.appModule !== AppModules.SURFER || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, icon: showLabelTop ? icon : undefined, validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, type: 'number', showClearButton: !isReadOnlyResult, precision: md?.length, scale: md?.scale, autoFocus: autoFocus, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) }), " "] });
+        return _jsx(TMTextBox, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', isModifiedWhen: isModifiedWhenInternal(), readOnly: isReadOnlyResult, label: (SDK_Globals.appModule !== AppModules.SURFER || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, icon: showLabelTop ? icon : undefined, validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, type: 'number', showClearButton: !isReadOnlyResult, precision: md?.length, scale: md?.scale, autoFocus: autoFocus, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) });
     switch (md?.dataType) {
         case MetadataDataTypes.DateTime:
-            return _jsx("div", { onFocus: onEditorClick, style: { width: '100%', height: 'fit-content' }, children: _jsx(TMDateBox, { placeholder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', dateDisplayType: getDateDisplayType(md.format?.format), displayFormat: getDateDisplayFormat(md.format?.format), isModifiedWhen: isModifiedWhenInternal(), readOnly: isReadOnlyResult, icon: showLabelTop ? icon : undefined, label: (SDK_Globals.appModule !== AppModules.SURFER || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, validationItems: validationItems, disabled: disabled, width: '100%', value: value, showClearButton: !isReadOnlyResult, useDateSerializationFormat: true, containerElement: containerElement, onValueChange: (newValue) => {
-                        onValueChange?.(newValue ? newValue.toString() : undefined);
-                        onValueChanged?.(newValue ? newValue.toString() : undefined);
-                    } }) });
-        case MetadataDataTypes.Number: return _jsxs("div", { onFocus: onEditorClick, style: { width: '100%', height: 'fit-content' }, children: [" ", _jsx(TMTextBox, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', isModifiedWhen: isModifiedWhenInternal(), readOnly: isReadOnlyResult, label: (SDK_Globals.appModule !== AppModules.SURFER || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, icon: showLabelTop ? icon : undefined, validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, type: 'number', showClearButton: !isReadOnlyResult, precision: md?.length, scale: md?.scale, autoFocus: autoFocus, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) }), " "] });
+            return _jsx(TMDateBox, { placeholder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', dateDisplayType: getDateDisplayType(md.format?.format), displayFormat: getDateDisplayFormat(md.format?.format), isModifiedWhen: isModifiedWhenInternal(), readOnly: isReadOnlyResult, icon: showLabelTop ? icon : undefined, label: (SDK_Globals.appModule !== AppModules.SURFER || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, validationItems: validationItems, disabled: disabled, width: '100%', value: value, showClearButton: !isReadOnlyResult, useDateSerializationFormat: true, containerElement: containerElement, onValueChange: (newValue) => {
+                    onValueChange?.(newValue ? newValue.toString() : undefined);
+                    onValueChanged?.(newValue ? newValue.toString() : undefined);
+                } });
+        case MetadataDataTypes.Number: return _jsx(TMTextBox, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', isModifiedWhen: isModifiedWhenInternal(), readOnly: isReadOnlyResult, label: (SDK_Globals.appModule !== AppModules.SURFER || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, icon: showLabelTop ? icon : undefined, validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, type: 'number', showClearButton: !isReadOnlyResult, precision: md?.length, scale: md?.scale, autoFocus: autoFocus, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) });
         default:
             if (showByTextarea) {
-                return _jsxs("div", { onFocus: onEditorClick, style: { width: '100%', height: 'fit-content' }, children: [" ", _jsx(TMTextArea, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', rows: 1, readOnly: isReadOnlyResult, label: (SDK_Globals.appModule !== AppModules.SURFER || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, icon: showLabelTop ? icon : undefined, isModifiedWhen: isModifiedWhenInternal(), validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, showClearButton: !isReadOnlyResult, autoFocus: autoFocus, maxLength: maxLength, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => { onValueChanged?.(newValue); }, resize: false }), " "] });
+                return _jsx(TMTextArea, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', rows: 1, readOnly: isReadOnlyResult, label: (SDK_Globals.appModule !== AppModules.SURFER || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, icon: showLabelTop ? icon : undefined, isModifiedWhen: isModifiedWhenInternal(), validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, showClearButton: !isReadOnlyResult, autoFocus: autoFocus, maxLength: maxLength, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => { onValueChanged?.(newValue); }, resize: false });
             }
             else {
-                return _jsxs("div", { onFocus: onEditorClick, style: { width: '100%', height: 'fit-content' }, children: [" ", _jsx(TMTextBox, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', isModifiedWhen: isModifiedWhenInternal(), readOnly: isReadOnlyResult, label: (SDK_Globals.appModule !== AppModules.SURFER || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, icon: showLabelTop ? icon : undefined, disabled: disabled, validationItems: validationItems, type: 'text', elementStyle: { width: '100%' }, showClearButton: !isReadOnlyResult, autoFocus: autoFocus, maxLength: maxLength, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => { onValueChanged?.(newValue); } }), " "] });
+                return _jsx(TMTextBox, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', isModifiedWhen: isModifiedWhenInternal(), readOnly: isReadOnlyResult, label: (SDK_Globals.appModule !== AppModules.SURFER || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, icon: showLabelTop ? icon : undefined, disabled: disabled, validationItems: validationItems, type: 'text', elementStyle: { width: '100%' }, showClearButton: !isReadOnlyResult, autoFocus: autoFocus, maxLength: maxLength, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => { onValueChanged?.(newValue); } });
             }
     }
 };
 export default TMMetadataEditor;
+export const MetadataEditorContextMenu = React.memo(({ target, menuItems }) => {
+    return (_jsx(ContextMenu, { dataSource: menuItems, target: `${target}` }));
+});
+export const useMetadataEditableList = () => {
+    const [editableList, setEditableList] = useState([]);
+    const addOrRemoveEditableList = (mid) => {
+        if (!mid)
+            return;
+        let newEditableList = editableList.slice();
+        if (newEditableList.includes(mid)) {
+            let index = newEditableList.indexOf(mid);
+            newEditableList.splice(index, 1);
+        }
+        else {
+            newEditableList.push(mid);
+        }
+        setEditableList(newEditableList);
+    };
+    const isEditableList = (mid) => mid ? editableList.includes(mid) : false;
+    return [isEditableList, addOrRemoveEditableList];
+};

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

@@ -0,0 +1,42 @@
+import React from "react";
+import { LayoutModes, MetadataDescriptor, MetadataValueDescriptor, ValidationItem } from '@topconsultnpm/sdk-ts-beta';
+import { DeviceContextProps } from "../base/TMDeviceProvider";
+export declare class MetadataValueDescriptorEx extends MetadataValueDescriptor {
+    tid?: number;
+    md?: MetadataDescriptor;
+    isRequired?: string;
+    isEditable?: boolean;
+    isLexProt?: number;
+    isSelected?: boolean;
+    isNull?: boolean;
+}
+export declare enum MenuModes {
+    None = 0,
+    ContextMenu = 1,
+    DropDownButton = 2
+}
+export declare enum MakeEditableMenuModes {
+    None = 0,
+    Always = 1,
+    OnlyForList = 2
+}
+interface ITMMetadataValuesProps extends DeviceContextProps {
+    id?: string;
+    TID: number | undefined;
+    customMenuItems?: any[];
+    menuMode?: MenuModes;
+    makeEditableMenuMode?: MakeEditableMenuModes;
+    showCheckBoxes?: boolean;
+    showNullValueCheckBoxes?: boolean;
+    validationItems: ValidationItem[];
+    metadataValues: MetadataValueDescriptorEx[];
+    metadataValuesOrig?: MetadataValueDescriptorEx[];
+    layoutMode?: LayoutModes;
+    selectedMID?: number;
+    openChooserBySingleClick?: boolean;
+    isOpenDistinctValues?: boolean;
+    onValueChanged?: (mid: MetadataValueDescriptorEx[]) => void;
+    onFocusedItemChanged?: (mid: MetadataValueDescriptorEx | undefined) => void;
+}
+declare const TMMetadataValues: React.FC<ITMMetadataValuesProps>;
+export default TMMetadataValues;

package/lib/components/editors/TMMetadataValues.js

@@ -0,0 +1,241 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import ReactDOMServer from "react-dom/server";
+import styled from "styled-components";
+import { DcmtTypeListCacheService, LayoutModes, MetadataDataDomains, MetadataDataTypes, MetadataValueDescriptor, SDK_Globals } from '@topconsultnpm/sdk-ts-beta';
+import { IconUndo, IconPencil, IconFunction, IconClear, IconMenuVertical } from "../../helper";
+import { TMColors } from "../../utils/theme";
+import TMButton from "../base/TMButton";
+import TMDropDownMenu from "../base/TMDropDownMenu";
+import TMTooltip from "../base/TMTooltip";
+import TMCheckBox from "./TMCheckBox";
+import TMMetadataEditor, { useMetadataEditableList, MetadataEditorContextMenu } from "./TMMetadataEditor";
+import { FormulaHelper } from "./TMFormulaEditor";
+export class MetadataValueDescriptorEx extends MetadataValueDescriptor {
+}
+export var MenuModes;
+(function (MenuModes) {
+    MenuModes[MenuModes["None"] = 0] = "None";
+    MenuModes[MenuModes["ContextMenu"] = 1] = "ContextMenu";
+    MenuModes[MenuModes["DropDownButton"] = 2] = "DropDownButton";
+})(MenuModes || (MenuModes = {}));
+export var MakeEditableMenuModes;
+(function (MakeEditableMenuModes) {
+    MakeEditableMenuModes[MakeEditableMenuModes["None"] = 0] = "None";
+    MakeEditableMenuModes[MakeEditableMenuModes["Always"] = 1] = "Always";
+    MakeEditableMenuModes[MakeEditableMenuModes["OnlyForList"] = 2] = "OnlyForList";
+})(MakeEditableMenuModes || (MakeEditableMenuModes = {}));
+const TMMetadataValues = ({ showCheckBoxes, menuMode = MenuModes.ContextMenu, makeEditableMenuMode = MakeEditableMenuModes.OnlyForList, customMenuItems = [], showNullValueCheckBoxes, isOpenDistinctValues = false, openChooserBySingleClick, selectedMID, onFocusedItemChanged, layoutMode = LayoutModes.Update, metadataValues = [], metadataValuesOrig = [], TID, id, onValueChanged, validationItems }) => {
+    const [dynDataListsToBeRefreshed, setDynDataListsToBeRefreshed] = useState([]);
+    const [calcDynDataListsToBeRefreshed, setCalcDynDataListsToBeRefreshed] = useState();
+    const [currentDTD, setCurrentDTD] = useState();
+    const [isEditableList, addOrRemoveEditableList] = useMetadataEditableList();
+    const [selectedItem, setSelectedItem] = useState(undefined);
+    const onChangeHandler = (newValue, mid) => {
+        let newValues = structuredClone(metadataValues);
+        const item = newValues.find(value => value.mid === mid);
+        if (item) {
+            item.value = newValue;
+            if (showCheckBoxes)
+                item.isSelected = true;
+        }
+        if (!newValue) {
+            let dynDLToBeRefreshed = dynDataListsToBeRefreshed.find(o => o.midStarter === mid);
+            while (dynDLToBeRefreshed != undefined) {
+                const item = newValues.find(value => value.mid === dynDLToBeRefreshed?.mid);
+                if (item)
+                    item.value = newValue;
+                dynDLToBeRefreshed = dynDataListsToBeRefreshed.find(o => o.midStarter === item?.mid);
+            }
+        }
+        let md = currentDTD?.metadata?.find(o => o.id == mid);
+        setCalcDynDataListsToBeRefreshed(md?.dataDomain === MetadataDataDomains.DynamicDataList);
+        onValueChanged?.(newValues);
+    };
+    const editorValidationHandler = (mid) => {
+        const md = metadataValues?.find(m => m.mid === mid);
+        const validationItem = validationItems.find(vil => vil.PropertyName === md?.md?.nameLoc);
+        return validationItem ? [validationItem] : [];
+    };
+    const isEditable = (mid) => {
+        let md = currentDTD?.metadata?.find(o => o.id == mid);
+        if (!md)
+            return false;
+        let isList = md.dataDomain == MetadataDataDomains.DataList || md.dataDomain == MetadataDataDomains.DynamicDataList || md.dataDomain == MetadataDataDomains.UserID;
+        return isList && isEditableList(mid);
+    };
+    const handleMetadataValueSelection = (item) => {
+        if (selectedItem?.mid !== item.mid) {
+            setSelectedItem(item);
+            onFocusedItemChanged?.(item);
+        }
+    };
+    useEffect(() => {
+        DcmtTypeListCacheService.GetAsync(TID, true).then((resultDTD) => {
+            setCurrentDTD(resultDTD);
+            setCalcDynDataListsToBeRefreshed(true);
+        });
+    }, [TID]);
+    useEffect(() => {
+        if (metadataValues.length <= 0)
+            return;
+        if (calcDynDataListsToBeRefreshed && currentDTD?.id == TID) {
+            loadDynDataListToBeRefreshedCascadeAsync(TID, metadataValues).then((result) => {
+                setDynDataListsToBeRefreshed(result);
+                setCalcDynDataListsToBeRefreshed(false);
+            });
+        }
+    }, [JSON.stringify(metadataValues)]);
+    const loadDynDataListToBeRefreshedCascadeAsync = async (tid, mds) => {
+        if (!tid)
+            return [];
+        if (mds.length <= 0)
+            return [];
+        let dynDLToBeRefreshed = [];
+        for (const m of mds) {
+            if (!m.value)
+                continue;
+            let data = await getDataDynDataListsToBeRefreshedAsync(tid, m.mid, [m.value ?? ""], dynDLToBeRefreshed.find(o => o.mid == m.mid)?.queryParams ?? []);
+            if (!data)
+                continue;
+            for (const item of data)
+                dynDLToBeRefreshed.push(item);
+        }
+        return dynDLToBeRefreshed;
+    };
+    const getDataDynDataListsToBeRefreshedAsync = async (tid, mid, values, qParams) => {
+        if (!tid)
+            return;
+        if (!mid)
+            return;
+        let md = currentDTD?.metadata?.find(o => o.id == mid);
+        if (md?.dataDomain !== MetadataDataDomains.DynamicDataList)
+            return;
+        let d = md?.dynDL_Cfgs?.[0];
+        if (md?.dynDL_IsMultiCfg == 1) {
+            switch (layoutMode) {
+                case LayoutModes.None:
+                case LayoutModes.Update:
+                    d = md?.dynDL_Cfgs?.[1];
+                    break;
+                default:
+                    d = md?.dynDL_Cfgs?.[0];
+                    break;
+            }
+        }
+        if (!d)
+            return;
+        let toBeRefreshed = [];
+        let dynDlDataSource = await SDK_Globals.tmSession?.NewSearchEngine().GetDynDataListValuesAsync(tid, mid, layoutMode, qParams);
+        if (values && values.length > 0) {
+            if (!d.onValueChanged_DynDataListsToBeRefreshed)
+                return;
+            let row = dynDlDataSource?.dtdResult?.rows?.filter(o => o[d.selectItemForValue ?? 0] == values?.[0]);
+            if (!row || row.length <= 0)
+                return;
+            for (const t of d.onValueChanged_DynDataListsToBeRefreshed) {
+                let mid = t.item1;
+                let queryParams = [];
+                if ((t.item2 ?? 0) >= 0)
+                    queryParams.push(row[0][t.item2 ?? 0]);
+                if ((t.item3 ?? 0) >= 0)
+                    queryParams.push(row[0][t.item3 ?? 0]);
+                if ((t.item4 ?? 0) >= 0)
+                    queryParams.push(row[0][t.item4 ?? 0]);
+                if ((t.item5 ?? 0) >= 0)
+                    queryParams.push(row[0][t.item5 ?? 0]);
+                toBeRefreshed.push({ mid: mid, queryParams: queryParams, midStarter: md?.id });
+            }
+        }
+        return toBeRefreshed;
+    };
+    const getMetadataEditorMenuItems = (tid, mid) => {
+        let md = currentDTD?.metadata?.find(o => o.id == mid);
+        if (!md)
+            return [];
+        let isList = md.dataDomain == MetadataDataDomains.DataList || md.dataDomain == MetadataDataDomains.DynamicDataList || md.dataDomain == MetadataDataDomains.UserID;
+        let isEditable = isEditableList(mid);
+        let menu = [];
+        if (makeEditableMenuMode === MakeEditableMenuModes.Always || (isList && makeEditableMenuMode === MakeEditableMenuModes.OnlyForList))
+            menu.push({
+                text: isEditable ? "Ripristina" : "Rendi editabile",
+                icon: isEditable
+                    ? menuMode === MenuModes.ContextMenu ? ReactDOMServer.renderToString(_jsx(IconUndo, {})) : _jsx(IconUndo, {})
+                    : menuMode === MenuModes.ContextMenu ? ReactDOMServer.renderToString(_jsx(IconPencil, {})) : _jsx(IconPencil, {}),
+                onClick: () => {
+                    addOrRemoveEditableList(mid);
+                    onValueChanged?.(metadataValues.map((item) => item.tid == tid && item.mid === mid ? { ...item, isEditable: !item.isEditable } : item));
+                }
+            });
+        if (customMenuItems.length > 0)
+            menu.push(...customMenuItems);
+        return menu;
+    };
+    return (_jsx(StyledMetadataValuesContainer, { id: id, children: metadataValues.map((item) => (_jsxs(StyledRow, { style: { marginTop: item.md?.dataType === MetadataDataTypes.DateTime ? '6px' : '0' }, onClick: () => { handleMetadataValueSelection(item); }, onFocus: () => { handleMetadataValueSelection(item); }, children: [showCheckBoxes && _jsx(TMCheckBox, { elementStyle: { marginTop: item.md?.dataType === MetadataDataTypes.DateTime ? '14px' : '20px' }, value: item.isSelected, onValueChanged: (newValue) => {
+                        let newValues = structuredClone(metadataValues);
+                        const mvd = newValues.find(value => value.mid === item.mid);
+                        if (mvd)
+                            mvd.isSelected = newValue;
+                        onValueChanged?.(newValues);
+                    } }), _jsxs("div", { style: { position: 'relative', height: '100%', width: '100%', opacity: showNullValueCheckBoxes && item.isNull ? 0.4 : 1 }, children: [_jsx(TMMetadataEditor, { tid: TID, mid: item.mid, layoutMode: layoutMode, isLexProt: item.isLexProt, isSelected: isOpenDistinctValues && item.mid === selectedMID, isModifiedWhen: metadataValues.find(m => m.mid === item.mid)?.value !== metadataValuesOrig.find(m => m.mid === item.mid)?.value, isReadOnly: showNullValueCheckBoxes ? item.isNull : undefined, isEditable: isEditable(item.mid) || item.isEditable, validationItems: editorValidationHandler(item.mid ?? 0), value: metadataValues.find(m => m.mid === item.mid)?.value, openChooserBySingleClick: openChooserBySingleClick, onValueChanged: (newValue) => onChangeHandler(newValue, item.mid ?? 0), onValueChange: (newValue) => onChangeHandler(newValue, item.mid ?? 0), containerElement: undefined, queryParamsDynDataList: dynDataListsToBeRefreshed.find(o => o.mid == item.mid)?.queryParams ?? [], iconContextMenu: menuMode === MenuModes.ContextMenu && _jsx(MetadataEditorContextMenu, { target: `#md-${item.mid}`, menuItems: getMetadataEditorMenuItems(TID, item.mid) }), onCascadeRefreshDynDataLists: (ddlToBeRefreshed) => {
+                                let newDynDataListsToBeRefreshed = [];
+                                for (const item of dynDataListsToBeRefreshed) {
+                                    let index = ddlToBeRefreshed.findIndex(o => o.mid == item.mid || (o.mid == -1 && o.midStarter == item.midStarter));
+                                    if (index >= 0)
+                                        continue;
+                                    newDynDataListsToBeRefreshed.push(item);
+                                }
+                                for (const item of ddlToBeRefreshed) {
+                                    if (item.queryParams.length <= 0)
+                                        continue;
+                                    if (!item.mid)
+                                        continue;
+                                    if (item.mid <= 0)
+                                        continue;
+                                    newDynDataListsToBeRefreshed.push(item);
+                                }
+                                setDynDataListsToBeRefreshed(newDynDataListsToBeRefreshed);
+                            }, onCascadeUpdateMIDs: (midsToBeUpdated) => {
+                                //Attenzione. Il primo elemento di midsToBeUpdated è il currentMID con il new value.
+                                //nonostante passi prima da onValueChanged, la collection metadata non risulta aggiornata!
+                                let newMetadata = structuredClone(metadataValues);
+                                for (const item of midsToBeUpdated) {
+                                    const mdItem = newMetadata.find(value => value.mid === item.mid);
+                                    if (mdItem)
+                                        mdItem.value = item.value;
+                                }
+                                onValueChanged?.(newMetadata);
+                            } }), FormulaHelper.isFormula(item.value)
+                            ? _jsx(IconFunction, { color: "#1a89d3", fontSize: 14, style: { position: "absolute", top: '4px', left: '14px' } })
+                            : (isEditable(item.mid) || item.isEditable)
+                                ? _jsx(IconPencil, { color: "#138603", fontSize: 14, style: { position: "absolute", top: item.md?.dataType === MetadataDataTypes.DateTime ? '1px' : '7px', left: '16px' } })
+                                : _jsx(_Fragment, {})] }), showNullValueCheckBoxes &&
+                    _jsx(TMTooltip, { content: "Imposta <Null>", children: _jsx(IconClear, { style: { marginTop: item.md?.dataType === MetadataDataTypes.DateTime ? '12px' : '18px', opacity: item.md?.isRequired === 1 ? 0.4 : 1 }, cursor: item.md?.isRequired === 1 ? 'default' : 'pointer', color: item.isNull ? TMColors.success : TMColors.button_icon, onClick: () => {
+                                if (item.md?.isRequired === 1)
+                                    return;
+                                let newValues = structuredClone(metadataValues);
+                                const mvd = newValues.find(value => value.mid === item.mid);
+                                if (mvd) {
+                                    mvd.isNull = !mvd.isNull;
+                                    if (mvd.isNull)
+                                        mvd.isSelected = true;
+                                }
+                                onValueChanged?.(newValues);
+                            } }) }), menuMode === MenuModes.DropDownButton && _jsx("div", { style: { marginTop: item.md?.dataType === MetadataDataTypes.DateTime ? '12px' : '18px' }, onClick: () => { handleMetadataValueSelection(item); }, children: _jsx(TMDropDownMenu, { backgroundColor: 'white', color: TMColors.button_icon, borderRadius: '3px', content: _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconMenuVertical, {}), showTooltip: false }), items: getMetadataEditorMenuItems(TID, item.mid) }) })] }, item.mid))) }));
+};
+export default TMMetadataValues;
+//#region  Styled Components
+const StyledMetadataValuesContainer = styled.div ` 
+    display: flex; 
+    flex-direction: column; 
+    width: 100%; 
+    height: calc(100%); 
+    overflow: auto;
+    padding: 0 10px 10px 10px;
+`;
+const StyledRow = styled.div ` 
+    display: flex; 
+    flex-direction: row; 
+    /* align-items: center;  */
+    gap: 5px; 
+`;

package/lib/components/index.d.ts

@@ -30,8 +30,10 @@ export { default as TMRadioButton } from './editors/TMRadioButton';
 export { default as TMDateBox } from './editors/TMDateBox';
 export { default as TMMetadataEditor } from './editors/TMMetadataEditor';
 export * from './editors/TMFormulaEditor';
+export * from './editors/TMMetadataValues';
 export { editorColorManager } from './editors/TMEditorStyled';
 export * from './choosers/TMDataListItemChooser';
+export * from './choosers/TMDistinctValues';
 export * from './choosers/TMDiskChooser';
 export * from './choosers/TMDynDataListItemChooser';
 export * from './choosers/TMDcmtTypeChooser';

package/lib/components/index.js

@@ -32,9 +32,11 @@ export { default as TMRadioButton } from './editors/TMRadioButton';
 export { default as TMDateBox } from './editors/TMDateBox';
 export { default as TMMetadataEditor } from './editors/TMMetadataEditor';
 export * from './editors/TMFormulaEditor';
+export * from './editors/TMMetadataValues';
 export { editorColorManager } from './editors/TMEditorStyled';
 // choosers
 export * from './choosers/TMDataListItemChooser';
+export * from './choosers/TMDistinctValues';
 export * from './choosers/TMDiskChooser';
 export * from './choosers/TMDynDataListItemChooser';
 export * from './choosers/TMDcmtTypeChooser';

package/lib/components/query/TMQueryEditor.js

@@ -916,7 +916,7 @@ const TMQdWhereItemValue = ({ whereItem, index, queryParamsDynDataList, onlyEdit
     };
     const mdValueEmptyDescr = `<${SDKUI_Localizator.Search_EnterValue}...>`;
     return (_jsxs("div", { ref: ref, id: containerId, style: { width: isEditing && whereItem.operator == QueryOperators.Custom && !onlyEditing ? "100%" : undefined }, children: [(isEditing || onlyEditing) &&
-                _jsxs(StyledRowItem, { children: [showValue1 && _jsx(TMMetadataEditor, { tid: whereItem.tid, mid: whereItem.mid, layoutMode: LayoutModes.None, isEditableList: isEditableList, value: whereItem.value1, queryOperator: whereItem.operator, autoFocus: !onlyEditing, containerElement: containerElement, onValueChange: (value) => setCurrentValue1(value), onValueChanged: (value) => { normalizeValue(value, true); } }), showValue2 && _jsx(TMMetadataEditor, { tid: whereItem.tid, mid: whereItem.mid, layoutMode: LayoutModes.None, isEditableList: isEditableList, value: whereItem.value1, queryOperator: whereItem.operator, autoFocus: !onlyEditing, containerElement: containerElement, onValueChange: (value) => setCurrentValue2(value), onValueChanged: (value) => { normalizeValue(value, false); } })] }), !isEditing && !onlyEditing && (showValue1 || showValue2) &&
+                _jsxs(StyledRowItem, { children: [showValue1 && _jsx(TMMetadataEditor, { tid: whereItem.tid, mid: whereItem.mid, layoutMode: LayoutModes.None, isEditable: isEditableList, value: whereItem.value1, queryOperator: whereItem.operator, autoFocus: !onlyEditing, containerElement: containerElement, onValueChange: (value) => setCurrentValue1(value), onValueChanged: (value) => { normalizeValue(value, true); } }), showValue2 && _jsx(TMMetadataEditor, { tid: whereItem.tid, mid: whereItem.mid, layoutMode: LayoutModes.None, isEditable: isEditableList, value: whereItem.value1, queryOperator: whereItem.operator, autoFocus: !onlyEditing, containerElement: containerElement, onValueChange: (value) => setCurrentValue2(value), onValueChanged: (value) => { normalizeValue(value, false); } })] }), !isEditing && !onlyEditing && (showValue1 || showValue2) &&
                 _jsxs(StyledDivHorizontal, { children: [(editingMode == EditingModes.Chooser) &&
                             _jsxs(_Fragment, { children: [showDataListChooseForm && !isEditableList &&
                                         _jsx(TMDataListItemChooserForm, { height: '500px', width: '450px', allowMultipleSelection: whereItem.operator == QueryOperators.In || whereItem.operator == QueryOperators.NotIn, dataListId: md?.dataListID, selectedIDs: whereItem.value1?.split(',').map((item) => !item.startsWith("'") ? item : item.slice(1, -1)) ?? [], onClose: () => setShowDataListChooseForm(false), onChoose: (IDs) => { IDs && normalizeValue(IDs.length == 1 ? IDs[0] : IDs.map((item) => `${item}`).join(","), true); } }), showDynDataListChooseForm && !isEditableList &&

package/lib/helper/helpers.d.ts

@@ -1,6 +1,6 @@
 import { Colors as ColorsType } from "../components/base/TMEditorBase";
 import { DeviceType } from "../components";
-import { AppModules, DataColumnDescriptor, ITopMediaSession, QueryDescriptor, SearchResultDescriptor } from "@topconsultnpm/sdk-ts-beta";
+import { AppModules, DataColumnDescriptor, ITopMediaSession, MetadataDescriptor, QueryDescriptor, SearchResultDescriptor } from "@topconsultnpm/sdk-ts-beta";
 import { FormModes, moduleTypes } from "../ts";
 declare const TABLET_WIDTH = 1024;
 declare const MOBILE_WIDTH = 640;
@@ -18,6 +18,8 @@ export declare const searchResultDescriptorToSimpleArray: (searchResult: SearchR
 export declare const getCompleteMetadataName: (dcmtTypeName: string | undefined, metadataName: string | undefined) => string;
 export declare const getQueryCountAsync: (qd: QueryDescriptor, showSpinner: boolean) => Promise<void>;
 export declare function getTIDByMID(mid: number | undefined, defaultTid?: number): number;
+export declare const getSystemMetadata: (withPerm?: boolean) => MetadataDescriptor[];
+export declare function deepCompare(obj1: any, obj2: any): boolean;
 export declare const canNext: (visibleItems: any[], selectedItems: any[]) => boolean;
 export declare const getNext: (visibleItems: any[], selectedItems: any[]) => any;
 export declare const canPrev: (visibleItems: any[], selectedItems: any[]) => boolean;

package/lib/helper/helpers.js

@@ -1,6 +1,6 @@
 import { Colors } from "../utils/theme";
 import { ButtonNames, DeviceType, TMExceptionBoxManager, TMMessageBoxManager, TMSpinner } from "../components";
-import { SDK_Globals, SystemMIDsAsNumber, TopMediaServer } from "@topconsultnpm/sdk-ts-beta";
+import { AccessLevels, MetadataDataDomains, MetadataDataTypes, MetadataDescriptor, MetadataFormatDescriptor, MetadataFormats, MetadataPermission, SDK_Globals, SystemMIDs, SystemMIDsAsNumber, TopMediaServer } from "@topconsultnpm/sdk-ts-beta";
 import { Buffer } from 'buffer';
 import { buildTypes, FormModes, moduleTypes } from "../ts";
 import { SDKUI_Localizator } from "./SDKUI_Localizator";
@@ -197,6 +197,208 @@ export function getTIDByMID(mid, defaultTid = 0) {
         return defaultTid;
     return tid;
 }
+export const getSystemMetadata = (withPerm) => {
+    let sysMDs = [];
+    let md = new MetadataDescriptor();
+    md.dataType = MetadataDataTypes.Number;
+    md.length = 10;
+    md.isRequired = 1;
+    md.isSystem = 1;
+    md.id = SystemMIDsAsNumber.TID;
+    md.name = SystemMIDs.TID;
+    md.nameLoc = SystemMIDs.TID;
+    sysMDs.push(md);
+    md = new MetadataDescriptor();
+    md.dataType = MetadataDataTypes.Number;
+    md.length = 10;
+    md.isRequired = 1;
+    md.isSystem = 1;
+    md.id = SystemMIDsAsNumber.DID;
+    md.name = SystemMIDs.DID;
+    md.nameLoc = SystemMIDs.DID;
+    sysMDs.push(md);
+    md = new MetadataDescriptor();
+    md.dataType = MetadataDataTypes.Number;
+    md.length = 10;
+    md.isRequired = 1;
+    md.isSystem = 1;
+    md.dataDomain = MetadataDataDomains.UserID;
+    md.id = SystemMIDsAsNumber.OwnerID;
+    md.name = SystemMIDs.OwnerID;
+    md.nameLoc = SystemMIDs.OwnerID;
+    sysMDs.push(md);
+    md = new MetadataDescriptor();
+    md.dataType = MetadataDataTypes.Number;
+    md.length = 10;
+    md.isRequired = 1;
+    md.isSystem = 1;
+    md.dataDomain = MetadataDataDomains.UserID;
+    md.id = SystemMIDsAsNumber.UpdaterID;
+    md.name = SystemMIDs.UpdaterID;
+    md.nameLoc = SystemMIDs.UpdaterID;
+    sysMDs.push(md);
+    md = new MetadataDescriptor();
+    md.dataType = MetadataDataTypes.Number;
+    md.length = 10;
+    md.isRequired = 1;
+    md.isSystem = 1;
+    md.id = SystemMIDsAsNumber.FileCount;
+    md.name = SystemMIDs.FileCount;
+    md.nameLoc = SystemMIDs.FileCount;
+    sysMDs.push(md);
+    md = new MetadataDescriptor();
+    md.dataType = MetadataDataTypes.Varchar;
+    md.length = 10;
+    md.isSystem = 1;
+    md.id = SystemMIDsAsNumber.FileExt;
+    md.name = SystemMIDs.FileExt;
+    md.nameLoc = SystemMIDs.FileExt;
+    sysMDs.push(md);
+    md = new MetadataDescriptor();
+    md.dataType = MetadataDataTypes.Number;
+    md.length = 10;
+    md.isRequired = 1;
+    md.isSystem = 1;
+    md.format = new MetadataFormatDescriptor();
+    md.format.format = MetadataFormats.NumberWithThousandsSeparator;
+    md.id = SystemMIDsAsNumber.FileSize;
+    md.name = SystemMIDs.FileSize;
+    md.nameLoc = SystemMIDs.FileSize;
+    sysMDs.push(md);
+    md = new MetadataDescriptor();
+    md.dataType = MetadataDataTypes.Number;
+    md.length = 10;
+    md.isRequired = 1;
+    md.isSystem = 1;
+    md.id = SystemMIDsAsNumber.PageCount;
+    md.name = SystemMIDs.PageCount;
+    md.nameLoc = SystemMIDs.PageCount;
+    sysMDs.push(md);
+    md = new MetadataDescriptor();
+    md.dataType = MetadataDataTypes.Number;
+    md.length = 10;
+    md.isRequired = 1;
+    md.isSystem = 1;
+    md.id = SystemMIDsAsNumber.IsSigned;
+    md.name = SystemMIDs.IsSigned;
+    md.nameLoc = SystemMIDs.IsSigned;
+    sysMDs.push(md);
+    md = new MetadataDescriptor();
+    md.dataType = MetadataDataTypes.Number;
+    md.length = 10;
+    md.isRequired = 1;
+    md.isSystem = 1;
+    md.id = SystemMIDsAsNumber.IsShared;
+    md.name = SystemMIDs.IsShared;
+    md.nameLoc = SystemMIDs.IsShared;
+    sysMDs.push(md);
+    md = new MetadataDescriptor();
+    md.dataType = MetadataDataTypes.Number;
+    md.length = 10;
+    md.isRequired = 1;
+    md.isSystem = 1;
+    md.id = SystemMIDsAsNumber.IsMail;
+    md.name = SystemMIDs.IsMail;
+    md.nameLoc = SystemMIDs.IsMail;
+    sysMDs.push(md);
+    md = new MetadataDescriptor();
+    md.dataType = MetadataDataTypes.Number;
+    md.length = 10;
+    md.isRequired = 1;
+    md.isSystem = 1;
+    md.id = SystemMIDsAsNumber.IsLogDel;
+    md.name = SystemMIDs.IsLogDel;
+    md.nameLoc = SystemMIDs.IsLogDel;
+    sysMDs.push(md);
+    md = new MetadataDescriptor();
+    md.dataType = MetadataDataTypes.DateTime;
+    md.isRequired = 1;
+    md.isSystem = 1;
+    md.format = new MetadataFormatDescriptor();
+    md.format.format = MetadataFormats.ShortDateLongTime;
+    md.id = SystemMIDsAsNumber.IsLex;
+    md.name = SystemMIDs.IsLex;
+    md.nameLoc = SystemMIDs.IsLex;
+    sysMDs.push(md);
+    md = new MetadataDescriptor();
+    md.dataType = MetadataDataTypes.DateTime;
+    md.isRequired = 1;
+    md.isSystem = 1;
+    md.format = new MetadataFormatDescriptor();
+    md.format.format = MetadataFormats.ShortDateLongTime;
+    md.id = SystemMIDsAsNumber.IsLex;
+    md.name = SystemMIDs.IsLex;
+    md.nameLoc = SystemMIDs.IsLex;
+    sysMDs.push(md);
+    md = new MetadataDescriptor();
+    md.dataType = MetadataDataTypes.DateTime;
+    md.isRequired = 1;
+    md.isSystem = 1;
+    md.format = new MetadataFormatDescriptor();
+    md.format.format = MetadataFormats.ShortDateLongTime;
+    md.id = SystemMIDsAsNumber.CreationTime;
+    md.name = SystemMIDs.CreationTime;
+    md.nameLoc = SystemMIDs.CreationTime;
+    sysMDs.push(md);
+    md = new MetadataDescriptor();
+    md.dataType = MetadataDataTypes.DateTime;
+    md.isRequired = 1;
+    md.isSystem = 1;
+    md.format = new MetadataFormatDescriptor();
+    md.format.format = MetadataFormats.ShortDateLongTime;
+    md.id = SystemMIDsAsNumber.LastUpdateTime;
+    md.name = SystemMIDs.LastUpdateTime;
+    md.nameLoc = SystemMIDs.LastUpdateTime;
+    sysMDs.push(md);
+    if (withPerm) {
+        sysMDs.forEach((md) => {
+            md.perm = new MetadataPermission();
+            md.perm.canArchive = AccessLevels.No;
+            md.perm.canView = AccessLevels.Yes;
+            md.perm.canSearch = AccessLevels.Yes;
+            md.perm.canUpdate = AccessLevels.No;
+        });
+    }
+    return sysMDs;
+};
+export function deepCompare(obj1, obj2) {
+    // If objects are not the same type, return false
+    if (typeof obj1 !== typeof obj2) {
+        return false;
+    }
+    // If objects are both null or undefined, return true
+    if (!obj1 && !obj2) {
+        return true;
+    }
+    // If objects are both primitive types, compare them directly
+    if (typeof obj1 !== 'object') {
+        return obj1 === obj2;
+    }
+    // If objects are arrays, compare their elements recursively
+    if (Array.isArray(obj1) && Array.isArray(obj2)) {
+        if (obj1.length !== obj2.length) {
+            return false;
+        }
+        for (let i = 0; i < obj1.length; i++) {
+            if (!deepCompare(obj1[i], obj2[i])) {
+                return false;
+            }
+        }
+        return true;
+    }
+    // If objects are both objects, compare their properties recursively
+    const keys1 = Object.keys(obj1);
+    const keys2 = Object.keys(obj2);
+    if (keys1.length !== keys2.length) {
+        return false;
+    }
+    for (let key of keys1) {
+        if (!obj2.hasOwnProperty(key) || !deepCompare(obj1[key], obj2[key])) {
+            return false;
+        }
+    }
+    return true;
+}
 //#region Form, Page Helpers
 export const canNext = (visibleItems, selectedItems) => {
     if (!visibleItems)

package/lib/helper/queryHelper.d.ts

@@ -1,10 +1,10 @@
-import { DcmtTypeDescriptor, MetadataDescriptor, SystemMIDsAsNumber, QueryDescriptor, SelectItem } from '@topconsultnpm/sdk-ts-beta';
+import { MetadataDescriptor, SystemMIDsAsNumber, QueryDescriptor, SelectItem } from '@topconsultnpm/sdk-ts-beta';
 export type TID_Alias = {
     tid: number;
     alias: string | undefined;
 };
 export declare const getTIDsByQd: (qd: QueryDescriptor | undefined) => TID_Alias[];
-export declare const getDcmtTypesByQdAsync: (qd: QueryDescriptor) => Promise<DcmtTypeDescriptor[]>;
+export declare const getDcmtTypesByQdAsync: (qd: QueryDescriptor) => Promise<import("@topconsultnpm/sdk-ts-beta").DcmtTypeDescriptor[]>;
 export declare const displayMetadataValue: (md: MetadataDescriptor | undefined, value: string | undefined, valueEmptyDescription?: string) => string;
 export declare const IsParametricQuery: (qd: QueryDescriptor | undefined) => boolean;
 export declare const addHiddenSelectItem: (select: SelectItem[], tid: number | undefined, mid: SystemMIDsAsNumber) => void;

package/package.json

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