@topconsultnpm/sdkui-react 6.19.0-dev1.10

package/lib/components/choosers/TMDataListItemChooser.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from 'react';
+import { SDK_Localizator, DataListCacheService } from '@topconsultnpm/sdk-ts';
+import { StyledDivHorizontal } from '../base/Styled';
+import { IconSearch, SDKUI_Localizator, TMImageLibrary } from '../../helper';
+import TMSpinner from '../base/TMSpinner';
+import TMSummary from '../editors/TMSummary';
+import TMChooserForm from '../forms/TMChooserForm';
+import TMDataListItemViewer from '../viewers/TMDataListItemViewer';
+const TMDataListItemChooser = ({ labelColor, width = '100%', dataListId, icon, backgroundColor, showBorder = true, readOnly, openChooserBySingleClick, buttons = [], elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, titleForm, showClearButton = false, validationItems = [], onValueChanged }) => {
+    const [showChooser, setShowChooser] = useState(false);
+    const renderTemplate = () => {
+        const isPlaceholder = values?.[0] === placeHolder;
+        return (_jsxs(StyledDivHorizontal, { style: { width: '100%', color: isPlaceholder ? '#a9a9a9' : 'inherit' }, children: [values && values.length > 0 && _jsx(TMDataListItemViewer, { dataListId: dataListId, value: values?.[0] }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }));
+    };
+    const summaryInputRef = useRef(null);
+    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { ref: summaryInputRef, placeHolder: placeHolder, labelColor: labelColor, width: width, icon: icon, buttons: buttons, readOnly: readOnly, backgroundColor: backgroundColor, showBorder: showBorder, hasValue: values && values.length > 0, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => !readOnly && setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, label: label, openEditorOnSummaryClick: openChooserBySingleClick, template: renderTemplate(), onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
+                _jsx(TMDataListItemChooserForm, { allowMultipleSelection: allowMultipleSelection, title: titleForm, dataListId: dataListId, selectedIDs: values, onClose: () => {
+                        setShowChooser(false);
+                        summaryInputRef.current?.focus();
+                    }, onChoose: (IDs) => { onValueChanged?.(IDs); } })] }));
+};
+export default TMDataListItemChooser;
+const cellRenderIcon = (data) => _jsx(TMImageLibrary, { imageID: data.data?.imageID });
+export const TMDataListItemChooserForm = (props) => {
+    const dataColumns = useMemo(() => {
+        return [
+            { dataField: 'value', caption: SDKUI_Localizator.Value },
+            { dataField: 'name', caption: SDKUI_Localizator.Description }
+        ];
+    }, []);
+    const getItems = async (refreshCache) => {
+        if (!props.dataListId)
+            return [];
+        if (refreshCache)
+            DataListCacheService.RemoveAll();
+        TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.DataList} ...` });
+        let dataList = await DataListCacheService.GetAsync(props.dataListId);
+        TMSpinner.hide();
+        return dataList ? dataList.items ?? [] : [];
+    };
+    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: 'value', showDefaultColumns: false, hasShowId: false, columns: dataColumns, selectedIDs: props.selectedIDs, cellRenderIcon: cellRenderIcon, dataSource: props.dataSource, getItems: getItems, onClose: props.onClose, onChoose: (IDs) => props.onChoose?.(IDs) }));
+};

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { DataListItemDescriptor } from '@topconsultnpm/sdk-ts';
+interface TMDataListItemPickerProps {
+    dataListID: number | undefined;
+    selectedValue: string | undefined;
+    onItemSelect: (item: DataListItemDescriptor) => void;
+}
+declare const TMDataListItemPicker: React.FC<TMDataListItemPickerProps>;
+export default TMDataListItemPicker;

package/lib/components/choosers/TMDataListItemPicker.js

@@ -0,0 +1,96 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import styled, { keyframes } from 'styled-components';
+import { DataListCacheService, SDK_Localizator } from '@topconsultnpm/sdk-ts';
+import { SDKUI_Localizator, TMImageLibrary } from '../../helper';
+const PickerContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 5px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+`;
+const ItemsContainer = styled.div `
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: 3px;
+  align-items: center;
+  overflow-x: auto;
+  padding: 10px;
+`;
+const slideIn = keyframes `
+  from {
+    opacity: 0;
+    transform: translateX(-50px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+`;
+const StatusItem = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  text-align: center;
+  font-size: 0.8em;
+  padding: 5px 10px;
+  border-radius: 8px;
+  border: 2px solid transparent;
+  transition: all 0.2s ease-in-out;
+  flex-shrink: 0;
+  
+  // Aggiungi l'animazione con un ritardo basato sull'indice
+  animation: ${slideIn} 0.5s ease-out forwards;
+  animation-delay: ${props => props.$index * 0.1}s;
+  opacity: 0; // Inizialmente l'elemento è invisibile
+
+  &:hover {
+    background-color: #f0f0f0;
+  }
+
+  ${props => props.$isSelected && `
+    border-color: #007bff;
+    background-color: #e6f2ff;
+  `}
+`;
+const Label = styled.div `
+  font-weight: bold;
+  margin-bottom: 5px;
+`;
+const TMDataListItemPicker = ({ dataListID, selectedValue, onItemSelect }) => {
+    const [dataList, setDataList] = useState(undefined);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(undefined);
+    useEffect(() => {
+        if (dataListID) {
+            setLoading(true);
+            setError(undefined);
+            DataListCacheService.GetAsync(dataListID)
+                .then(dl => {
+                setDataList(dl);
+                setLoading(false);
+            })
+                .catch(err => {
+                console.error("Failed to fetch data list:", err);
+                setError("Failed to load statuses.");
+                setLoading(false);
+            });
+        }
+    }, [dataListID]);
+    if (loading) {
+        return _jsxs("p", { children: [SDKUI_Localizator.Loading, "..."] });
+    }
+    if (error) {
+        return _jsx("p", { children: error });
+    }
+    if (!dataList || !dataList.items || dataList.items.length === 0) {
+        return _jsx("p", { children: SDKUI_Localizator.NoDataToDisplay });
+    }
+    return (_jsxs(PickerContainer, { children: [_jsx(Label, { children: `${SDK_Localizator.DataList}: ${dataList.name}` }), _jsx(ItemsContainer, { children: dataList.items.map((item, index) => (_jsxs(StatusItem, { "$isSelected": item.value === selectedValue, "$index": index, onClick: () => onItemSelect(item), children: [item.imageID && _jsx(TMImageLibrary, { imageID: item.imageID }), _jsx("span", { children: item.name })] }, item.value))) })] }));
+};
+export default TMDataListItemPicker;

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { AccessFilter, DcmtTypeDescriptor, ITopMediaSession, TemplateTIDs } from '@topconsultnpm/sdk-ts';
+import { ITMChooserFormProps, ITMChooserProps } from '../../ts';
+interface ITMDcmtTypeChooser extends ITMChooserProps {
+    ShowOnlyDcmtTypes?: boolean;
+    ShowOnlySAP?: boolean;
+    filterTemplateTID?: TemplateTIDs[];
+    values?: number[];
+    showBorder?: boolean;
+    borderRadius?: string;
+    openEditorOnSummaryClick?: boolean;
+    accessFilter?: AccessFilter;
+    filter?: (value: DcmtTypeDescriptor, index: number, array: DcmtTypeDescriptor[]) => unknown;
+}
+declare const TMDcmtTypeChooser: React.FunctionComponent<ITMDcmtTypeChooser>;
+export default TMDcmtTypeChooser;
+interface ITMDcmtTypeChooserFormProps extends ITMChooserFormProps<DcmtTypeDescriptor> {
+    ShowOnlyDcmtTypes?: boolean;
+    ShowOnlySAP?: boolean;
+    filterTemplateTID?: TemplateTIDs[];
+    tmSession?: ITopMediaSession;
+    accessFilter?: AccessFilter;
+    filter?: (value: DcmtTypeDescriptor, index: number, array: DcmtTypeDescriptor[]) => unknown;
+}
+export declare const TMDcmtTypeChooserForm: React.FunctionComponent<ITMDcmtTypeChooserFormProps>;

package/lib/components/choosers/TMDcmtTypeChooser.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { AccessLevelsEx, DcmtTypeListCacheService, SDK_Globals, SDK_Localizator } from '@topconsultnpm/sdk-ts';
+import TMSpinner from '../base/TMSpinner';
+import { IconSearch, SDKUI_Localizator } from '../../helper';
+import { StyledDivHorizontal } from '../base/Styled';
+import TMTidViewer, { TMDcmtTypeIcon } from '../viewers/TMTidViewer';
+import TMSummary from '../editors/TMSummary';
+import TMChooserForm from '../forms/TMChooserForm';
+const TMDcmtTypeChooser = ({ tmSession, dataSource, disabled, backgroundColor, filter, accessFilter = 'all', showEditButton = true, borderRadius = '4px', buttons = [], placeHolder = `<${SDKUI_Localizator.NoneSelection}>`, openEditorOnSummaryClick, showBorder = true, showId = false, elementStyle, allowMultipleSelection, ShowOnlyDcmtTypes, ShowOnlySAP, filterTemplateTID, values, isModifiedWhen, label, width, height, showClearButton = false, validationItems = [], onValueChanged }) => {
+    const [showChooser, setShowChooser] = useState(false);
+    useEffect(() => {
+        TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.ListDcmtTypeOrView} ...` });
+        let tms = tmSession ?? SDK_Globals.tmSession;
+        DcmtTypeListCacheService.GetFromTIDsAsync(values, false, tms).then(() => { TMSpinner.hide(); });
+    }, [values]);
+    const renderTemplate = () => {
+        return (_jsxs(StyledDivHorizontal, { style: { width: 'max-content', height: '100%' }, children: [values && _jsx(TMTidViewer, { tmSession: tmSession, tid: values[0], showIcon: true, showId: showId, noneSelectionText: placeHolder }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }));
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { backgroundColor: backgroundColor, buttons: buttons, showBorder: showBorder, borderRadius: borderRadius, hasValue: values && values.length > 0, showClearButton: showClearButton, showEditButton: showEditButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => !disabled && setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, label: label, width: width, height: height, template: renderTemplate(), openEditorOnSummaryClick: openEditorOnSummaryClick, onClearClick: showClearButton ? () => { !disabled && onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
+                _jsx(TMDcmtTypeChooserForm, { tmSession: tmSession, allowMultipleSelection: allowMultipleSelection, dataSource: dataSource, selectedIDs: values, ShowOnlyDcmtTypes: ShowOnlyDcmtTypes, ShowOnlySAP: ShowOnlySAP, accessFilter: accessFilter, filterTemplateTID: filterTemplateTID, filter: filter, onClose: () => setShowChooser(false), onChoose: (IDs) => { onValueChanged?.(IDs); } })] }));
+};
+export default TMDcmtTypeChooser;
+const cellRenderIcon = (data) => _jsx(TMDcmtTypeIcon, { dtd: data.data });
+const cellRenderNameAndDesc = (data) => _jsx("p", { style: { textAlign: 'left', color: data.data.isView ? 'red' : '' }, children: data.value });
+export const TMDcmtTypeChooserForm = ({ tmSession, allowMultipleSelection, width, height, selectedIDs, dataSource, ShowOnlyDcmtTypes, ShowOnlySAP, filterTemplateTID, accessFilter = 'all', filter, onClose, onChoose }) => {
+    const isPermitted = (accessLevel) => accessLevel === AccessLevelsEx.Yes || accessLevel === AccessLevelsEx.Mixed;
+    const getItems = async (refreshCache) => {
+        let tms = tmSession ?? SDK_Globals.tmSession;
+        if (refreshCache)
+            DcmtTypeListCacheService.RemoveAllWithoutMetadata(tms);
+        let count = DcmtTypeListCacheService.CacheCount(true, accessFilter, tms);
+        if (count <= 0)
+            TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.ListDcmtTypeOrView} ...` });
+        let dtdList = await DcmtTypeListCacheService.GetAllWithoutMetadataAsync(tms);
+        if (count <= 0)
+            TMSpinner.hide();
+        if (ShowOnlyDcmtTypes)
+            return dtdList?.filter(d => d.isView === false);
+        else if (ShowOnlySAP)
+            return dtdList?.filter(d => isSAPDcmtTypeName(d.name));
+        if (filterTemplateTID)
+            return dtdList?.filter(d => d.templateTID && filterTemplateTID?.includes(d.templateTID));
+        if (accessFilter === 'canArchive')
+            return dtdList?.filter(d => isPermitted(d.perm?.canArchive));
+        else if (accessFilter === 'canSearch')
+            return dtdList?.filter(d => isPermitted(d.perm?.canSearch));
+        let dcmtTypes = filter ? dtdList?.filter(filter) : dtdList;
+        return dcmtTypes;
+    };
+    const isSAPDcmtTypeName = (dcmtTypeName) => {
+        if (!dcmtTypeName || dcmtTypeName.trim().length === 0)
+            return false;
+        if (dcmtTypeName.length !== 5)
+            return false;
+        if (!dcmtTypeName.startsWith("SAP"))
+            return false;
+        return true;
+    };
+    return (_jsx(TMChooserForm, { title: SDK_Localizator.ListDcmtTypeOrView, allowMultipleSelection: allowMultipleSelection, hasShowOnlySelectedItems: true, width: width, height: height, selectedIDs: selectedIDs, cellRenderIcon: cellRenderIcon, cellRenderNameAndDesc: cellRenderNameAndDesc, dataSource: dataSource, getItems: getItems, onClose: onClose, onChoose: (IDs) => onChoose?.(IDs) }));
+};

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { DiskDescriptor } from '@topconsultnpm/sdk-ts';
+import { ITMChooserProps, ITMChooserFormProps } from '../../ts';
+interface ITMDiskChooserProps extends ITMChooserProps {
+    /** Contiene i values selezionati -> attualmente sempre e solo 1 elemento */
+    values?: number[];
+}
+declare const TMDiskChooser: React.FunctionComponent<ITMDiskChooserProps>;
+export default TMDiskChooser;
+export declare const TMDiskChooserForm: React.FunctionComponent<ITMChooserFormProps<DiskDescriptor>>;

package/lib/components/choosers/TMDiskChooser.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { SDK_Localizator, SDK_Globals } from '@topconsultnpm/sdk-ts';
+import { StyledDivHorizontal } from '../base/Styled';
+import TMSummary from '../editors/TMSummary';
+import { IconDisk, IconSearch, SDKUI_Localizator } from '../../helper';
+import TMSpinner from '../base/TMSpinner';
+import TMChooserForm from '../forms/TMChooserForm';
+const TMDiskChooser = ({ backgroundColor, elementStyle, values, dataSource, isModifiedWhen, label, placeHolder, validationItems = [], onValueChanged }) => {
+    const [showChooser, setShowChooser] = useState(false);
+    const [disk, setDisk] = useState();
+    useEffect(() => {
+        if (dataSource && values && values.length > 0) {
+            let d = dataSource.find(d => d.id == values[0]);
+            setDisk(d);
+        }
+        else
+            setDisk(undefined);
+    }, [values]);
+    const renderTemplate = () => {
+        return (_jsxs(StyledDivHorizontal, { children: [disk ? _jsx(IconDisk, { fontSize: 20 }) : _jsx(_Fragment, {}), _jsx("p", { style: { textAlign: 'left', marginLeft: disk ? '5px' : '' }, children: disk ? disk.name : placeHolder })] }));
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { backgroundColor: backgroundColor, iconEditButton: _jsx(IconSearch, {}), onEditorClick: () => setShowChooser(true), onClearClick: () => { onValueChanged?.([]); }, elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, label: label, template: renderTemplate(), showClearButton: true, hasValue: values && values.length > 0, validationItems: validationItems }), showChooser &&
+                _jsx(TMDiskChooserForm, { selectedIDs: values, dataSource: dataSource, onClose: () => setShowChooser(false), onChoose: (IDs) => { onValueChanged?.(IDs); } })] }));
+};
+export default TMDiskChooser;
+const cellRenderIcon = () => _jsx(IconDisk, { color: '#767676' });
+export const TMDiskChooserForm = (props) => {
+    const getItems = async (refreshCache) => {
+        TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.Disks} ...` });
+        let items = await SDK_Globals.tmSession?.NewDiskEngine().RetrieveAllAdminAsync(true);
+        TMSpinner.hide();
+        return items ?? [];
+    };
+    const dataColumns = useMemo(() => {
+        return [
+            { dataField: 'uncPath', caption: 'Percorso UNC' }
+        ];
+    }, []);
+    return (_jsx(TMChooserForm, { title: SDK_Localizator.Disks, allowMultipleSelection: false, hasShowId: true, showDefaultColumns: true, cellRenderIcon: cellRenderIcon, columns: dataColumns, manageUseLocalizedName: false, getItems: getItems, onClose: props.onClose, onChoose: (IDs) => { props.onChoose?.(IDs); } }));
+};

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

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

package/lib/components/choosers/TMDistinctValues.js

@@ -0,0 +1,140 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { LayoutModes, MetadataDataDomains, AccessLevels, MetadataDataTypes, SDK_Globals, DcmtTypeListCacheService, DataColumnTypes } from '@topconsultnpm/sdk-ts';
+import styled from 'styled-components';
+import { SDKUI_Localizator, stringIsNullOrEmpty } from '../../helper';
+import TMDataGrid from '../base/TMDataGrid';
+import { TMExceptionBoxManager } from '../base/TMPopUp';
+import TMSpinner from '../base/TMSpinner';
+import TMCheckBox from '../editors/TMCheckBox';
+import TMPanel from '../base/TMPanel';
+import TMModal from '../base/TMModal';
+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, allowAppendMode = true, showHeader = true, isModal, separator = " ", onSelectionChanged, onClosePanelCallback }) => {
+    const [focusedItem, setFocusedItem] = useState();
+    const [dataSource, setDataSource] = useState([]);
+    const [isAppendMode, setIsAppendMode] = useState(false);
+    const [md, setMd] = useState();
+    const [currentValue, setCurrentValue] = useState('');
+    useEffect(() => {
+        getDistictValuesAsync();
+    }, [mid]);
+    useEffect(() => {
+        setIsAppendMode(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, isAppendMode: isAppendMode });
+            return;
+        }
+        let value = md.dataType === MetadataDataTypes.Number ? parseFloat(focusedItem.value.replace(',', '.')).toString() : focusedItem.value;
+        let newValue = stringIsNullOrEmpty(currentValue)
+            ? value
+            : isAppendMode ? currentValue + separator + value : value;
+        setCurrentValue(newValue);
+        onSelectionChanged?.({ tid: tid, mid: mid, newValue: newValue, isAppendMode: isAppendMode });
+    }, [focusedItem]);
+    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));
+        }
+        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 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 isVisibleAppend = () => {
+        if (!allowAppendMode)
+            return false;
+        if (layoutMode !== LayoutModes.Ark && layoutMode !== LayoutModes.Update)
+            return true;
+        if (!md)
+            return true;
+        if (md.dataType === MetadataDataTypes.DateTime)
+            return false;
+        if (md.dataType === MetadataDataTypes.Number)
+            return false;
+        return md.dataDomain === undefined || md.dataDomain === MetadataDataDomains.None;
+    };
+    const renderContent = () => {
+        return (_jsxs(StyledDistinctValues, { children: [isVisibleAppend() && _jsx(TMCheckBox, { elementStyle: { position: 'absolute', right: '15px', top: '15px', zIndex: 10000 }, label: 'Accoda', value: isAppendMode, onValueChanged: () => { setIsAppendMode(!isAppendMode); } }), _jsx(TMDataGrid, { focusedRowKey: focusedItem ? focusedItem.rowIndex : undefined, selection: { showCheckBoxesMode: 'none' }, searchPanel: { highlightCaseSensitive: true, visible: true }, dataColumns: customColumns, dataSource: dataSource, keyExpr: 'rowIndex', height: 'calc(100%)', onFocusedRowChanged: onFocusedRowChanged, paging: { pageSize: 30 }, summary: customSummary })] }));
+    };
+    return (_jsx(_Fragment, { children: isModal
+            ? _jsx(TMModal, { title: SDKUI_Localizator.DistinctValues + (md?.nameLoc ? ` (${md?.nameLoc})` : ''), height: '600px', width: '500px', resizable: true, onClose: onClosePanelCallback, children: renderContent() })
+            : _jsx(TMPanel, { title: SDKUI_Localizator.DistinctValues + (md?.nameLoc ? ` (${md?.nameLoc})` : ''), showHeader: showHeader, onClose: onClosePanelCallback, children: renderContent() }) }));
+};
+export default TMDistinctValues;

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { DataListItemDescriptor, DynamicDataListDescriptor, SearchResultDescriptor, MetadataDescriptor, LayoutModes } from '@topconsultnpm/sdk-ts';
+import { ITMChooserProps, ITMChooserFormProps } from '../../ts';
+interface ITMDynDataListItemChooserProps extends ITMChooserProps {
+    /** TID della lista dati da gestire  */
+    tid: number | undefined;
+    /** metadato della lista dati dinamica da gestire  */
+    md: MetadataDescriptor | undefined;
+    /** Contesto di utilizzo  */
+    layoutMode?: LayoutModes;
+    /** Contiene i values selezionati  */
+    values?: string[];
+    /** Visualizza il bordo  */
+    showBorder?: boolean;
+    /** Se presente, sono i parametri da passare alla query per recuperare il dataSource  */
+    queryParamsDynDataList?: string[];
+    /** Indica quali liste dati dinamiche aggiornare in cascata (dataSource)  */
+    onCascadeRefreshDynDataLists?: (dynDataListsToBeRefreshed: DynDataListsToBeRefreshed[]) => void;
+    /** Indica quali metadati aggiornare in cascata (valore)  */
+    onCascadeUpdateMIDs?: (midsToBeUpdated: MIDsToBeUpdated[]) => void;
+}
+export type DynDataListsToBeRefreshed = {
+    mid: number | undefined;
+    queryParams: string[];
+    midStarter: number | undefined;
+};
+export type MIDsToBeUpdated = {
+    mid: number;
+    value: string | undefined;
+};
+declare const TMDynDataListItemChooser: React.FunctionComponent<ITMDynDataListItemChooserProps>;
+export default TMDynDataListItemChooser;
+interface ITMDynDataListItemChooserFormProps extends ITMChooserFormProps<DataListItemDescriptor> {
+    TID: number | undefined;
+    MID: number | undefined;
+    layoutMode?: LayoutModes;
+    dynDL?: DynamicDataListDescriptor;
+    searchResult?: SearchResultDescriptor;
+}
+export declare const TMDynDataListItemChooserForm: React.FunctionComponent<ITMDynDataListItemChooserFormProps>;