@topconsultnpm/sdkui-react 6.19.0-dev1.10

package/lib/components/choosers/TMDynDataListItemChooser.js

@@ -0,0 +1,159 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { DataColumnTypes, SDK_Localizator, DataListCacheService, SDK_Globals, LayoutModes } from '@topconsultnpm/sdk-ts';
+import { IconDetails, IconSearch, getDataColumnName, Globalization, SDKUI_Localizator, searchResultDescriptorToSimpleArray, IsParametricQuery, IconWarning } from '../../helper';
+import { StyledDivHorizontal } from '../base/Styled';
+import TMSpinner from '../base/TMSpinner';
+import TMSummary from '../editors/TMSummary';
+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 [showChooser, setShowChooser] = useState(false);
+    const [dynDl, setDynDl] = useState();
+    const [dataSource, setDataSource] = useState();
+    const summaryInputRef = useRef(null);
+    useEffect(() => {
+        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;
+            }
+        }
+        setDynDl(d);
+        if (!IsParametricQuery(d?.qd) && !dataSource) {
+            setDataSource(undefined);
+            loadData().then((result) => { setDataSource(result); });
+        }
+    }, [md]);
+    useEffect(() => {
+        if (!tid)
+            return;
+        if (!IsParametricQuery(dynDl?.qd))
+            return;
+        if ((queryParamsDynDataList?.length ?? 0) <= 0) {
+            setDataSource(undefined);
+            return;
+        }
+        loadData().then((result) => {
+            setDataSource(result);
+        });
+    }, [queryParamsDynDataList, dynDl]);
+    const loadData = async () => {
+        return await SDK_Globals.tmSession?.NewSearchEngine().GetDynDataListValuesAsync(tid, md?.id, layoutMode, queryParamsDynDataList ?? []);
+    };
+    const getDescription = () => {
+        if (!Array.isArray(values))
+            return "";
+        if (!values || values.length <= 0)
+            return "";
+        if (!values[0])
+            return "";
+        if (!dynDl)
+            return values?.[0];
+        let description = dataSource?.dtdResult?.rows?.filter(o => o[dynDl.selectItemForValue ?? 0] == values?.[0])?.[0]?.[dynDl.selectItemForDescription ?? 0];
+        return description ?? values?.[0];
+    };
+    const getIcon = () => {
+        if (!Array.isArray(values))
+            return null;
+        if (!values || values.length <= 0)
+            return null;
+        if (!values?.[0])
+            return null;
+        if (FormulaHelper.isFormula(values?.[0]))
+            return null;
+        if (!dynDl)
+            return _jsx(IconDetails, {});
+        let description = dataSource?.dtdResult?.rows?.filter(o => o[dynDl.selectItemForValue ?? 0] == values?.[0])?.[0]?.[dynDl.selectItemForDescription ?? 0];
+        return description ? _jsx(IconDetails, {}) :
+            _jsx(TMTooltip, { content: SDKUI_Localizator.ValueNotPresent, children: _jsx(IconWarning, { color: TMColors.warning }) });
+    };
+    const renderTemplate = () => {
+        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 &&
+                _jsx(TMDynDataListItemChooserForm, { TID: tid, MID: md?.id, dynDL: dynDl, title: titleForm, allowMultipleSelection: allowMultipleSelection, searchResult: dataSource, selectedIDs: values, onClose: () => {
+                        setShowChooser(false);
+                        summaryInputRef.current?.focus();
+                    }, onChoose: (IDs) => {
+                        onValueChanged?.(IDs);
+                        if (!dynDl)
+                            return;
+                        let row = dataSource?.dtdResult?.rows?.filter(o => o[dynDl.selectItemForValue ?? 0] == IDs?.[0]);
+                        if (!row || row.length <= 0)
+                            return;
+                        if (dynDl.onValueChanged_DynDataListsToBeRefreshed && dynDl.onValueChanged_DynDataListsToBeRefreshed.length > 0) {
+                            let toBeRefreshed = [];
+                            for (const t of dynDl.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 });
+                            }
+                            onCascadeRefreshDynDataLists?.(toBeRefreshed);
+                        }
+                        if (dynDl.onValueChanged_MIDsToBeUpdated && dynDl.onValueChanged_MIDsToBeUpdated.length > 0) {
+                            let toBeUpdated = [];
+                            toBeUpdated.push({ mid: md?.id ?? 0, value: IDs?.[0] });
+                            for (const t of dynDl.onValueChanged_MIDsToBeUpdated) {
+                                let mid = t.item1 ?? 0;
+                                let value = '';
+                                if ((t.item2 ?? 0) >= 0)
+                                    value = row[0][t.item2 ?? 0];
+                                toBeUpdated.push({ mid: mid, value: value });
+                            }
+                            onCascadeUpdateMIDs?.(toBeUpdated);
+                        }
+                    } })] }));
+};
+export default TMDynDataListItemChooser;
+const cellRenderIcon = () => _jsx(IconDetails, {});
+export const TMDynDataListItemChooserForm = (props) => {
+    const dataColumns = props.searchResult?.dtdResult?.columns?.map((col, index) => {
+        let keyField = getDataColumnName(props.searchResult?.fromTID, col);
+        const isVisible = col.extendedProperties?.["Visibility"] != "Hidden";
+        const dataType = () => {
+            switch (col.dataType) {
+                case DataColumnTypes.DateTime: return "datetime";
+                case DataColumnTypes.Bool: return "boolean";
+                case DataColumnTypes.Number: return "number";
+                default: return "string";
+            }
+        };
+        return { dataField: keyField, caption: col.caption, visible: isVisible, dataType: dataType(), format: col.dataType === DataColumnTypes.DateTime ? Globalization.getDateDisplayFormat() : "" };
+    });
+    const keyValue = props.searchResult ? getDataColumnName(props.searchResult?.fromTID, props.searchResult?.dtdResult?.columns?.[props.dynDL?.selectItemForValue ?? 0]) : '';
+    const getItems = async (refreshCache) => {
+        if (!props.searchResult)
+            return [];
+        if (refreshCache)
+            DataListCacheService.RemoveAll();
+        TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.DataList} ...` });
+        let result = await SDK_Globals.tmSession?.NewSearchEngine().GetDynDataListValuesAsync(props.TID, props.MID, props.layoutMode, []);
+        TMSpinner.hide();
+        return result ? searchResultDescriptorToSimpleArray(result) ?? [] : [];
+    };
+    const getTitle = () => {
+        let title = SDK_Localizator.DataList;
+        if (props.title)
+            title += `: ${props.title}`;
+        return title;
+    };
+    return (_jsx(TMChooserForm, { title: getTitle(), allowMultipleSelection: props.allowMultipleSelection, width: props.width, height: props.height, keyName: keyValue ?? '', showDefaultColumns: false, hasShowId: false, columns: dataColumns, selectedIDs: props.selectedIDs, cellRenderIcon: cellRenderIcon, dataSource: searchResultDescriptorToSimpleArray(props.searchResult) ?? [], getItems: getItems, onClose: props.onClose, onChoose: (IDs) => props.onChoose?.(IDs) }));
+};

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

@@ -0,0 +1,7 @@
+import { GroupDescriptor } from "@topconsultnpm/sdk-ts";
+import { ITMChooserFormProps } from "../../ts";
+export declare const TMGroupChooserForm: React.FunctionComponent<ITMChooserFormProps<GroupDescriptor>>;
+export declare const TMGroupIdViewer: React.FunctionComponent<{
+    groupID: number | undefined;
+    showIcon?: boolean;
+}>;

package/lib/components/choosers/TMGroupChooser.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SDK_Localizator, SDK_Globals } from "@topconsultnpm/sdk-ts";
+import { SDKUI_Localizator, IconUserGroup } from "../../helper";
+import TMSpinner from "../base/TMSpinner";
+import TMChooserForm from "../forms/TMChooserForm";
+import { useEffect, useState } from "react";
+export const TMGroupChooserForm = (props) => {
+    const getItems = async () => {
+        TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.Groups} ...` });
+        let items = await SDK_Globals.tmSession?.NewGroupEngine().RetrieveAllAdminAsync();
+        TMSpinner.hide();
+        return items ?? [];
+    };
+    return (_jsx(TMChooserForm, { title: SDK_Localizator.Groups, allowMultipleSelection: props.allowMultipleSelection, width: props.width, height: props.height, manageUseLocalizedName: true, hasShowOnlySelectedItems: true, selectedIDs: props.selectedIDs, startWithShowOnlySelectedItems: false, cellRenderIcon: () => _jsx(IconUserGroup, { color: '#767676' }), dataSource: props.dataSource, getItems: getItems, onClose: props.onClose, onChoose: (IDs) => { props.onChoose?.(IDs); } }));
+};
+export const TMGroupIdViewer = (props) => {
+    const [group, setGroup] = useState(null);
+    const [isLoading, setIsLoading] = useState(false);
+    useEffect(() => {
+        const fetchGroup = async () => {
+            if (props.groupID && props.groupID > 0) {
+                setIsLoading(true);
+                let fetchedGroup = await SDK_Globals.tmSession?.NewGroupEngine().RetrieveAdminAsync(props.groupID);
+                setGroup(fetchedGroup ?? null);
+                setIsLoading(false);
+            }
+        };
+        fetchGroup();
+    }, [props.groupID]);
+    if (isLoading) {
+        return _jsxs("span", { children: [SDKUI_Localizator.Loading, "..."] });
+    }
+    if (!group) {
+        return _jsx("span", { children: SDKUI_Localizator.NoDataToDisplay });
+    }
+    return (_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '4px' }, children: [props.showIcon && _jsx(IconUserGroup, { color: '#767676' }), _jsx("span", { children: group.name })] }));
+};

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

@@ -0,0 +1,4 @@
+import { InvoiceRetrieveFormats } from '@topconsultnpm/sdk-ts';
+import { ITMEnumDataBinding } from '../../ts';
+declare const TMInvoiceRetrieveFormats: ({ value, valueOrig, onValueChanged, valuesToExclude, label, width }: ITMEnumDataBinding<InvoiceRetrieveFormats>) => import("react/jsx-runtime").JSX.Element;
+export default TMInvoiceRetrieveFormats;

package/lib/components/choosers/TMInvoiceRetrieveFormats.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { InvoiceRetrieveFormats } from '@topconsultnpm/sdk-ts';
+import { LocalizeInvoiceRetrieveFormats, SDKUI_Localizator } from '../../helper';
+import { TMMargin } from '../../utils/theme';
+import TMDropDown from '../editors/TMDropDown';
+const TMInvoiceRetrieveFormats = ({ value, valueOrig, onValueChanged, valuesToExclude, label = SDKUI_Localizator.InvoiceRetrieveFormat, width = "100%" }) => {
+    const getDataSource = () => {
+        let dataSource = [];
+        for (let item of Object.values(InvoiceRetrieveFormats)) {
+            if (item == InvoiceRetrieveFormats.Original)
+                continue;
+            if (item == InvoiceRetrieveFormats.OriginalUnsigned)
+                continue;
+            if (valuesToExclude?.includes(item))
+                continue;
+            dataSource.push({ value: item, display: LocalizeInvoiceRetrieveFormats(item) });
+        }
+        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 }));
+};
+export default TMInvoiceRetrieveFormats;

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import { MetadataDescriptor, QueryDescriptor, ValidationItem } from '@topconsultnpm/sdk-ts';
+import { ITMChooserFormProps, ITMChooserProps, TID_MID } from '../../ts';
+import { TID_Alias } from '../../helper/queryHelper';
+interface ITMMetadataChooserProps extends ITMChooserProps {
+    /** Allows you to view system metadata  */
+    allowSysMetadata?: boolean;
+    /** TIDs of document types to retrieve metadata from */
+    tids?: number[];
+    /** Qd to retrieve metadata from */
+    qd?: QueryDescriptor;
+    /** List of selected TIDs / MIDs  */
+    values?: TID_MID[];
+    /** Displays the document type name  */
+    showCompleteMetadataName?: boolean;
+    /** Valid only if input is "qd". Displays only metadata present in the Select clause */
+    qdShowOnlySelectItems?: boolean;
+    /** show component border edge */
+    showBorder?: boolean;
+    /** rounds the corners of border edge */
+    borderRadius?: string;
+    /** if true, opens the form with a single click */
+    openEditorOnSummaryClick?: boolean;
+    /** list of validation items */
+    validationItems?: ValidationItem[];
+    /** predicate function to filter metadata. Meaningful for only one tid (tids)  */
+    filterMetadata?: (value: MetadataDescriptor, index: number, array: MetadataDescriptor[]) => unknown;
+    /** Gets the color related to the document type */
+    getColorIndex?: (tid: TID_Alias) => string;
+    /** Allows you to view system metadata directly */
+    showSysMetadataDirectly?: boolean;
+}
+declare const TMMetadataChooser: React.FunctionComponent<ITMMetadataChooserProps>;
+export default TMMetadataChooser;
+interface ITMMetadataChooserFormProps extends ITMChooserFormProps<MetadataDescriptor> {
+    /** Allows you to view system metadata  */
+    allowSysMetadata?: boolean;
+    /** TIDs of document types to retrieve metadata from */
+    tids?: number[];
+    /** Query to retrieve metadata from */
+    qd?: QueryDescriptor;
+    /** Valid only if input is "qd". Displays only metadata present in the Select clause  */
+    qdShowOnlySelectItems?: boolean;
+    /** predicate function to filter metadata. Meaningful for only one tid (tids)  */
+    filterMetadata?: (value: MetadataDescriptor, index: number, array: MetadataDescriptor[]) => unknown;
+    /** Gets the color related to the document type */
+    getColorIndex?: (tid: TID_Alias) => string;
+    /** Allows you to view system metadata directly */
+    showSysMetadataDirectly?: boolean;
+}
+export declare const TMMetadataChooserForm: React.FunctionComponent<ITMMetadataChooserFormProps>;

package/lib/components/choosers/TMMetadataChooser.js

@@ -0,0 +1,134 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from 'react';
+import { DcmtTypeDescriptor, DcmtTypeListCacheService, SDK_Globals, SDK_Localizator } from '@topconsultnpm/sdk-ts';
+import { TMMetadataIcon, TMMidViewer, getDisplayAlias } from '../viewers/TMMidViewer';
+import { getTIDsByQd } from '../../helper/queryHelper';
+import { TMDcmtTypeIcon } from '../viewers/TMTidViewer';
+import { IconSearch, SDKUI_Localizator, IconSettings } from '../../helper';
+import { FontSize, TMColors } from '../../utils/theme';
+import { StyledBadge, StyledDivHorizontal, StyledDxGridGroupHeader } from '../base/Styled';
+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 [showChooser, setShowChooser] = useState(false);
+    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 })] }));
+    }, [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); } })] }));
+};
+export default TMMetadataChooser;
+export const TMMetadataChooserForm = ({ tmSession, tids, qd, filterMetadata, qdShowOnlySelectItems, selectedIDs, dataSource, allowMultipleSelection, allowSysMetadata = true, showSysMetadataDirectly, width, height, getColorIndex, onClose, onChoose }) => {
+    const getInitialShowSysMetadata = () => {
+        if (showSysMetadataDirectly)
+            return true;
+        if (!allowSysMetadata || !selectedIDs)
+            return false;
+        return selectedIDs.some(o => o.mid < 150);
+    };
+    const [showSysMetadata, setShowSysMetadata] = useState(getInitialShowSysMetadata());
+    const [hasSysMetadata, setHasSysMetadata] = useState(false);
+    const [dcmtTypes, setDcmtTypes] = useState([]);
+    const getItems = useCallback(async (refreshCache) => {
+        let dtdList = [];
+        let metadata = [];
+        let checkProps = qd != undefined ? dataSource != undefined || tids != undefined : dataSource != undefined && tids != undefined;
+        if (checkProps)
+            throw Error('Le props qd | tids | dataSource devono essere in alternativa');
+        try {
+            if (qd) {
+                let tids = getTIDsByQd(qd);
+                let inputTIDs = tids.map((item) => item.tid);
+                TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.DcmtType} ...` });
+                let dtds = await DcmtTypeListCacheService.GetFromTIDsAsync(inputTIDs, true, tmSession, false, refreshCache);
+                for (let i = 0; i < dtds.length; i++) {
+                    const dtd = new DcmtTypeDescriptor();
+                    dtd.init({ ...dtds[i] });
+                    const alias = tids?.[i].alias ?? '';
+                    dtd.customData2 = alias;
+                    if (!qdShowOnlySelectItems) {
+                        dtd.metadata?.forEach((md) => {
+                            md.customData1 = dtd.id;
+                            md.customData2 = alias;
+                        });
+                    }
+                    else {
+                        let newMetadata = dtd.metadata?.filter(o => qd.select?.some(s => s.tid == dtd.id && s.mid == o.id && ((s.alias ?? '') == alias)));
+                        newMetadata?.forEach((md) => {
+                            md.customData1 = dtd.id;
+                            md.customData2 = alias;
+                        });
+                    }
+                    let mds = filterMetadata ? dtd.metadata?.filter(filterMetadata) : dtd.metadata;
+                    dtdList.push({ ...dtd, metadata: mds });
+                }
+            }
+            else if (tids) {
+                if (tids.length <= 0)
+                    return [];
+                if (refreshCache)
+                    TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.DcmtType} ...` });
+                // Chiamate parallele mantenendo l'ordine
+                const promises = tids.map(tid => tid ? DcmtTypeListCacheService.GetAsync(tid, true, tmSession, true, refreshCache) : Promise.resolve(null));
+                const dtds = await Promise.all(promises);
+                for (let i = 0; i < dtds.length; i++) {
+                    const dtd = dtds[i];
+                    if (!dtd) {
+                        if (tids[i])
+                            throw new Error(`TID sconosciuto (${tids[i]})`);
+                        continue;
+                    }
+                    let mds = filterMetadata ? dtd.metadata?.filter(filterMetadata) : dtd.metadata;
+                    mds?.forEach((md) => { md.customData1 = dtd?.id; });
+                    dtdList.push({ ...dtd, metadata: mds });
+                }
+            }
+            for (const dtd of dtdList) {
+                if (!dtd.metadata)
+                    continue;
+                for (const md of dtd.metadata)
+                    metadata.push(md);
+            }
+            setDcmtTypes(dtdList);
+            setHasSysMetadata(allowSysMetadata && metadata.findIndex(md => md.isSystem == 1) >= 0);
+            return showSysMetadata ? metadata : metadata.filter(o => o.isSystem != 1);
+        }
+        finally {
+            TMSpinner.hide();
+        }
+    }, [showSysMetadata, qd, tids, dataSource, filterMetadata, qdShowOnlySelectItems, allowSysMetadata, tmSession]);
+    const cellRenderIcon = useCallback((data) => {
+        let md = data.data;
+        return (_jsx(TMMetadataIcon, { tid: md.customData1 ?? 0, md: md }));
+    }, []);
+    const groupCellRender = useCallback((data) => {
+        let tid_alias = JSON.parse(data.value);
+        let dtd = dcmtTypes?.find(o => o.id == tid_alias.tid);
+        return _jsxs(StyledDxGridGroupHeader, { "$backgroundColor": getColorIndex?.(tid_alias), children: [_jsx(TMDcmtTypeIcon, { dtd: dtd }), _jsx("p", { children: getDisplayAlias(SDK_Globals.useLocalizedName ? dtd?.nameLoc : dtd?.name, tid_alias.alias) }), data.summaryItems && data.summaryItems.length > 0 && _jsx(StyledBadge, { "$backgroundColor": TMColors.info, children: data.summaryItems[0].value })] });
+    }, [dcmtTypes, getColorIndex]);
+    const dataColumns = useMemo(() => {
+        return [
+            { dataField: 'isSystem', visible: false },
+            {
+                dataField: 'customData2', visible: false, groupIndex: dcmtTypes.length > 1 ? 0 : undefined, groupCellRender: groupCellRender,
+                calculateCellValue: (rowData) => {
+                    let tid_alias = { tid: rowData.customData1, alias: rowData.customData2 };
+                    return JSON.stringify(tid_alias);
+                }
+            }
+        ];
+    }, [dcmtTypes, groupCellRender]);
+    const renderSummaryItems = useMemo(() => ({
+        groupItems: [{ column: 'id', summaryType: 'count' }]
+    }), []);
+    const renderCustomButtons = useCallback(() => {
+        return (_jsx(StyledDivHorizontal, { children: hasSysMetadata && _jsx(TMButton, { caption: SDKUI_Localizator.ShowHideMetadataSystemDesc, icon: _jsx(IconSettings, {}), btnStyle: 'toolbar', fontSize: '1.3rem', onClick: () => setShowSysMetadata(!showSysMetadata) }) }));
+    }, [hasSysMetadata, showSysMetadata]);
+    const convertID = useCallback((md) => { return { tid: md.customData1, mid: md.id, aliasTID: md.customData2 }; }, []);
+    const cellRenderNameAndDesc = useCallback((data) => {
+        return _jsx("p", { style: { textAlign: 'left', color: data.data.isRequired == 1 ? 'red' : '' }, children: data.value });
+    }, []);
+    return (_jsx(TMChooserForm, { title: SDK_Localizator.Metadatas, allowMultipleSelection: allowMultipleSelection, allowSorting: false, allowGrouping: dcmtTypes.length > 1, width: width, height: height, selectedIDs: selectedIDs?.map((item) => item.mid), convertID: convertID, cellRenderIcon: cellRenderIcon, cellRenderNameAndDesc: cellRenderNameAndDesc, dataSource: dataSource, getItems: getItems, customButtons: renderCustomButtons(), columns: dataColumns, summaryItems: renderSummaryItems, onClose: onClose, onChoose: (IDs) => { onChoose?.(IDs); } }));
+};

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

@@ -0,0 +1,4 @@
+import { OrderRetrieveFormats } from '@topconsultnpm/sdk-ts';
+import { ITMEnumDataBinding } from '../../ts';
+declare const TMOrderRetrieveFormats: ({ value, valueOrig, onValueChanged, valuesToExclude, label, width }: ITMEnumDataBinding<OrderRetrieveFormats>) => import("react/jsx-runtime").JSX.Element;
+export default TMOrderRetrieveFormats;

package/lib/components/choosers/TMOrderRetrieveFormats.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { OrderRetrieveFormats } from '@topconsultnpm/sdk-ts';
+import { LocalizeOrderRetrieveFormats, SDKUI_Localizator } from '../../helper';
+import { TMMargin } from '../../utils/theme';
+import TMDropDown from '../editors/TMDropDown';
+const TMOrderRetrieveFormats = ({ value, valueOrig, onValueChanged, valuesToExclude, label = SDKUI_Localizator.OrderRetrieveFormat, width = "100%" }) => {
+    const getDataSource = () => {
+        let dataSource = [];
+        for (let item of Object.values(OrderRetrieveFormats)) {
+            if (item == OrderRetrieveFormats.Original)
+                continue;
+            if (item == OrderRetrieveFormats.OriginalUnsigned)
+                continue;
+            if (valuesToExclude?.includes(item))
+                continue;
+            dataSource.push({ value: item, display: LocalizeOrderRetrieveFormats(item) });
+        }
+        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 }));
+};
+export default TMOrderRetrieveFormats;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ITopMediaSession } from '@topconsultnpm/sdk-ts';
+import { ITMEditorBase } from '../base/TMEditorBase';
+interface ITMPathChooser extends ITMEditorBase {
+    onValueChanged?: (e: string) => void;
+    allowBrowseFile_Area?: boolean;
+    allowBrowseFolder_Area?: boolean;
+    allowParametricPath?: boolean;
+    tmSession?: ITopMediaSession;
+}
+declare const TMPathChooser: React.FunctionComponent<ITMPathChooser>;
+export default TMPathChooser;

package/lib/components/choosers/TMPathChooser.js

@@ -0,0 +1,147 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { SDK_Globals, FileFormats } from '@topconsultnpm/sdk-ts';
+import { IconFileDots, SDKUI_Localizator, IconSearch, IconDownload, Globalization, AreaHelper } from '../../helper';
+import { TMColors } from '../../utils/theme';
+import ShowAlert from '../base/TMAlert';
+import TMAreaManager from '../base/TMAreaManager';
+import TMButton from '../base/TMButton';
+import { TMLayoutItem } from '../base/TMLayout';
+import TMModal from '../base/TMModal';
+import { TMExceptionBoxManager } from '../base/TMPopUp';
+import { TMLayoutWaitingContainer } from '../base/TMWaitPanel';
+import TMTextBox from '../editors/TMTextBox';
+let abortController = new AbortController();
+const TMPathChooser = (props) => {
+    //const [path, setPath] = useState<string>(props.value)
+    const [elementStyle, setElementStyle] = useState(props.elementStyle);
+    const [showAreaFile, setShowAreaFile] = useState(false);
+    const [showAreaFolder, setShowAreaFolder] = useState(false);
+    const [areaFolderPath, setAreaFolderPath] = useState();
+    const [areaFilePath, setAreaFilePath] = useState();
+    const [showAreaManager, setShowAreaManager] = useState(false);
+    const [downloadLink, setDownloadLink] = useState(null);
+    const [file, setFile] = useState(null);
+    const [showWaitPanel, setShowWaitPanel] = useState(false);
+    const [waitPanelTitle, setWaitPanelTitle] = useState('');
+    const [showSecondary, setShowSecondary] = useState(false);
+    const [waitPanelTextSecondary, setWaitPanelTextSecondary] = useState('');
+    const [waitPanelValueSecondary, setWaitPanelValueSecondary] = useState(0);
+    const [waitPanelMaxValueSecondary, setWaitPanelMaxValueSecondary] = useState(0);
+    const formulaItems = ['{@JobName}', '{@JobStartDate}', '{@JobStartDate_DDMMYYYY}', '{@JobStartDateTime}', '{@ProcessRunID}', '{@ProcessName}', '{@ProcessStartDate}', '{@ProcessStartDateTime}'];
+    //useEffect(() => { setPath(props.value) }, [props.value])
+    useEffect(() => {
+        if (props.elementStyle) {
+            let style = { width: "100%", ...props.elementStyle };
+            setElementStyle(style);
+        }
+    }, [props.elementStyle]);
+    useEffect(() => {
+        if (file && file !== null) {
+            const fileURL = window.URL?.createObjectURL(file);
+            downloadLink.href = fileURL;
+            downloadLink.download = file?.name;
+            downloadLink.click();
+        }
+    }, [file]);
+    /*useEffect(() => {
+      return () => { setFile(null); }
+    }, [path])*/
+    const browseFile_Area = () => {
+        setShowAreaFile(true);
+        setShowAreaManager(true);
+    };
+    const browseFolder_Area = () => {
+        setShowAreaFolder(true);
+        setShowAreaManager(true);
+    };
+    const getParentDir = (str) => {
+        const newStr = str.slice(0, -1);
+        const index = newStr.lastIndexOf('\\');
+        const parent = str.substring(0, index);
+        return parent + '\\';
+    };
+    const areaChoose = () => {
+        setShowAreaManager(false);
+        if (showAreaFolder) {
+            if (areaFilePath)
+                props.onValueChanged?.(getParentDir(areaFilePath) || '');
+            else
+                props.onValueChanged?.(areaFolderPath ?? '');
+            setShowAreaFolder(false);
+        }
+        else if (showAreaFile) {
+            props.onValueChanged?.(areaFilePath ?? '');
+            setShowAreaFile(false);
+        }
+    };
+    const renderButtons = () => {
+        let buttons = [];
+        if (props.allowBrowseFile_Area)
+            buttons.push({
+                icon: _jsx(IconFileDots, {}), text: SDKUI_Localizator.BrowseAreaFile, onClick: () => { browseFile_Area(); }
+            });
+        if (props.allowBrowseFolder_Area)
+            buttons.push({ icon: _jsx(IconSearch, {}), text: SDKUI_Localizator.BrowseAreaFolder, onClick: () => browseFolder_Area() });
+        if (props.value !== '' && !props.allowBrowseFolder_Area) {
+            let dlLink = document.createElement('a');
+            dlLink.target = "_blank";
+            dlLink.rel = "noreferrer";
+            buttons.push({
+                icon: _jsx(IconDownload, { color: TMColors.success }), text: 'Download', onClick: () => {
+                    onFileDownloadHandler();
+                    setDownloadLink(dlLink);
+                }
+            });
+        }
+        ;
+        return buttons;
+    };
+    const onFileDownloadHandler = async () => {
+        try {
+            let av = AreaHelper.ExtractAreaInfo_2(props.value, true);
+            let doc;
+            let tms = props.tmSession ?? SDK_Globals.tmSession;
+            setShowWaitPanel(true);
+            setShowSecondary(true);
+            setWaitPanelTitle("Download");
+            abortController = new AbortController();
+            let firstBlock = true;
+            let maxFileSize = 0;
+            doc = await tms?.NewAreaEngine().RetrieveFileAsync(av.aid, av.subFolder, av.fileName, FileFormats.None, abortController.signal, (pd) => {
+                if (firstBlock) {
+                    maxFileSize = pd.ProgressBarMaximum ?? 0;
+                    setWaitPanelMaxValueSecondary(maxFileSize);
+                    firstBlock = false;
+                }
+                setWaitPanelValueSecondary(pd.ProgressBarValue);
+                setWaitPanelTextSecondary(`Downloading... ${Globalization.getNumberDisplayValue(pd.ProgressBarValue, true)} / ${Globalization.getNumberDisplayValue(maxFileSize, true)}`);
+                if (pd.ProgressBarValue === pd.ProgressBarMaximum) {
+                    setWaitPanelMaxValueSecondary(0);
+                    setWaitPanelValueSecondary(0);
+                    setWaitPanelTextSecondary('');
+                    firstBlock = true;
+                }
+            });
+            setFile(doc);
+        }
+        catch (ex) {
+            const err = ex;
+            if (err.name === 'CanceledError') {
+                ShowAlert({ message: err.message, mode: 'warning', duration: 3000, title: 'Abort' });
+            }
+            else
+                TMExceptionBoxManager.show({ exception: ex });
+            setFile(null);
+        }
+        finally {
+            setWaitPanelTextSecondary('');
+            setWaitPanelMaxValueSecondary(0);
+            setWaitPanelValueSecondary(0);
+            setShowWaitPanel(false);
+        }
+    };
+    return (_jsxs(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelSecondary: showSecondary, waitPanelTitle: waitPanelTitle, waitPanelTextSecondary: waitPanelTextSecondary, waitPanelValueSecondary: waitPanelValueSecondary, waitPanelMaxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, children: [_jsx(TMLayoutItem, { children: _jsx(TMTextBox, { buttons: renderButtons(), elementStyle: elementStyle, formulaItems: props.allowParametricPath ? formulaItems : [], isModifiedWhen: props.isModifiedWhen, label: props.label, value: props.value || '', onValueChanged: (e) => { /*setPath(e.target.value);*/ props.onValueChanged?.(e.target.value); }, validationItems: props.validationItems }) }), showAreaManager &&
+                _jsxs(TMModal, { resizable: true, width: '80%', onClose: () => setShowAreaManager(false), children: [_jsx(TMAreaManager, { showOnlyFolders: props.allowBrowseFolder_Area && !props.allowBrowseFile_Area, initialPath: props.value, onFolderChanged: (folder) => setAreaFolderPath(folder), onFileChanged: (file) => setAreaFilePath(file), isPathChooser: true, areaChoose: areaChoose, width: '98%', height: props.allowBrowseFile_Area ? '70vh' : '90%', tmSession: props.tmSession, selectionMode: 'single' }), _jsx("div", { style: { position: 'absolute', right: '22px', bottom: '8px' }, children: _jsx(TMButton, { caption: 'OK', onClick: () => areaChoose() }) })] })] }));
+};
+export default TMPathChooser;

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

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