@topconsultnpm/sdkui-react 6.20.0-dev2.4 → 6.20.0-dev2.41

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

@@ -7,6 +7,7 @@ export declare const StyledMultiViewPanel: import("styled-components/dist/types"
 }>> & string;
 export declare const StyledParagraph: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
 export declare const StyledToolbarForm: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ReferencesContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledReferenceButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
 export declare const StyledPanelPage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $isOpen?: boolean;

package/lib/components/base/Styled.js

@@ -36,17 +36,25 @@ export const StyledToolbarForm = styled.div `
     gap: 2px;
     background-color: ${TMColors.toolbar_background};
 `;
+export const ReferencesContainer = styled.div `
+    display: flex;
+    justify-content: center;
+    gap: 12px;
+    flex-wrap: wrap;
+    width: 100%;
+    height: 100%;
+`;
 export const StyledReferenceButton = styled.button `
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    padding: 10px 16px;
+    padding: 10px 25px;
     border-radius: 20px;
     border: none;
     background-color: ${TMColors.button_floating_background};
     color: white;
-    font-size: 0.9rem;
+    font-size: 0.95rem;
     font-weight: 500;
     cursor: pointer;
     transition: all 0.2s ease;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { DataListItemDescriptor } from '@topconsultnpm/sdk-ts';
+interface TMDataListItemEditorProps {
+    isOpen: boolean;
+    item?: DataListItemDescriptor;
+    isCreating: boolean;
+    onClose: () => void;
+    onSave: (item: DataListItemDescriptor) => void;
+}
+declare const TMDataListItemEditor: React.FC<TMDataListItemEditorProps>;
+export default TMDataListItemEditor;

package/lib/components/choosers/TMDataListItemEditor.js

@@ -0,0 +1,130 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import styled from 'styled-components';
+import { DataListItemDescriptor, NamesLoc3, PlatformObjectValidator } from '@topconsultnpm/sdk-ts';
+import { IconCloseOutline, IconSave, IconUndo, SDKUI_Localizator } from '../../helper';
+import TMButton from '../base/TMButton';
+import TMModal from '../base/TMModal';
+import TMDataListItemFields from './TMDataListItemFields';
+import { TMColors } from '../../utils/theme';
+const FormContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  padding: 20px;
+`;
+const ButtonsContainer = styled.div `
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 10px;
+`;
+const TMDataListItemEditor = ({ isOpen, item, isCreating, onClose, onSave }) => {
+    const [editedItem, setEditedItem] = useState(null);
+    const [editedItemOrig, setEditedItemOrig] = useState(null);
+    const [validationItems, setValidationItems] = useState([]);
+    useEffect(() => {
+        if (!editedItem)
+            return;
+        let vil = [];
+        PlatformObjectValidator.DataListItemValidator(editedItem, vil);
+        setValidationItems(vil);
+    }, [editedItem]);
+    // Funzione helper per clonare un DataListItemDescriptor
+    const cloneItem = (source) => {
+        const clone = new DataListItemDescriptor();
+        Object.assign(clone, source);
+        if (source.namesLoc) {
+            const namesLocClone = new NamesLoc3();
+            namesLocClone.init(source.namesLoc);
+            clone.namesLoc = namesLocClone;
+        }
+        return clone;
+    };
+    useEffect(() => {
+        if (isOpen) {
+            if (item) {
+                // Crea una copia dell'item per editarlo
+                const clone = cloneItem(item);
+                setEditedItem(clone);
+                // Salva anche l'originale per il confronto e l'undo
+                const original = cloneItem(item);
+                setEditedItemOrig(original);
+            }
+            else {
+                // Nuovo item vuoto
+                const newItem = new DataListItemDescriptor();
+                newItem.value = '';
+                newItem.name = '';
+                setEditedItem(newItem);
+                setEditedItemOrig(cloneItem(newItem));
+            }
+        }
+    }, [isOpen, item]);
+    // Funzione per verificare se ci sono modifiche rispetto all'originale
+    const hasChanges = () => {
+        if (!editedItem || !editedItemOrig)
+            return false;
+        // Confronta i campi principali
+        if (editedItem.value !== editedItemOrig.value)
+            return true;
+        if (editedItem.name !== editedItemOrig.name)
+            return true;
+        if (editedItem.imageID !== editedItemOrig.imageID)
+            return true;
+        // Confronta namesLoc
+        const namesLoc1 = editedItem.namesLoc;
+        const namesLoc2 = editedItemOrig.namesLoc;
+        if (!namesLoc1 && !namesLoc2)
+            return false;
+        if (!namesLoc1 || !namesLoc2)
+            return true;
+        if (namesLoc1.it_IT !== namesLoc2.it_IT)
+            return true;
+        if (namesLoc1.en_US !== namesLoc2.en_US)
+            return true;
+        if (namesLoc1.fr_FR !== namesLoc2.fr_FR)
+            return true;
+        if (namesLoc1.pt_PT !== namesLoc2.pt_PT)
+            return true;
+        if (namesLoc1.es_ES !== namesLoc2.es_ES)
+            return true;
+        if (namesLoc1.de_DE !== namesLoc2.de_DE)
+            return true;
+        return false;
+    };
+    const handleUndo = () => {
+        if (!editedItemOrig)
+            return;
+        // Ripristina l'item originale clonandolo
+        const restored = cloneItem(editedItemOrig);
+        setEditedItem(restored);
+    };
+    const handleSave = () => {
+        if (!editedItem)
+            return;
+        // Pulisci namesLoc rimuovendo valori undefined o vuoti, mantenendo l'istanza della classe
+        if (editedItem.namesLoc) {
+            const cleanedData = {};
+            Object.entries(editedItem.namesLoc).forEach(([key, value]) => {
+                if (value !== undefined && value !== '') {
+                    cleanedData[key] = value;
+                }
+            });
+            // Crea una nuova istanza di NamesLoc3 con i dati puliti
+            if (Object.keys(cleanedData).length > 0) {
+                const cleanedNamesLoc = new NamesLoc3();
+                cleanedNamesLoc.init(cleanedData);
+                editedItem.namesLoc = cleanedNamesLoc;
+            }
+            else {
+                editedItem.namesLoc = undefined;
+            }
+        }
+        onSave(editedItem);
+    };
+    if (!isOpen || !editedItem)
+        return null;
+    return (_jsx(TMModal, { title: isCreating ? SDKUI_Localizator.NewMale : SDKUI_Localizator.Update, width: "400px", height: "auto", isModal: true, onClose: onClose, children: _jsxs(FormContainer, { children: [_jsx(TMDataListItemFields, { item: editedItem, originalItem: editedItemOrig || undefined, onItemChanged: setEditedItem, validationItems: validationItems }), _jsxs(ButtonsContainer, { children: [_jsx(TMButton, { caption: SDKUI_Localizator.Save, btnStyle: 'advanced', advancedColor: TMColors.primary, icon: _jsx(IconSave, {}), showTooltip: false, onClick: handleSave }), _jsx(TMButton, { caption: SDKUI_Localizator.Undo, btnStyle: 'toolbar', color: 'primary', icon: _jsx(IconUndo, {}), showTooltip: false, disabled: !hasChanges(), onClick: handleUndo }), _jsx(TMButton, { caption: SDKUI_Localizator.Cancel, btnStyle: 'advanced', advancedColor: TMColors.primary, icon: _jsx(IconCloseOutline, {}), showTooltip: false, onClick: onClose })] })] }) }));
+};
+export default TMDataListItemEditor;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { DataListItemDescriptor, ValidationItem } from '@topconsultnpm/sdk-ts';
+interface TMDataListItemFieldsProps {
+    item: DataListItemDescriptor;
+    originalItem?: DataListItemDescriptor;
+    onItemChanged: (item: DataListItemDescriptor) => void;
+    validationItems?: ValidationItem[];
+    readOnly?: boolean;
+}
+declare const TMDataListItemFields: React.FC<TMDataListItemFieldsProps>;
+export default TMDataListItemFields;

package/lib/components/choosers/TMDataListItemFields.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { DataListItemDescriptor, CultureIDs, NamesLoc3 } from '@topconsultnpm/sdk-ts';
+import { SDKUI_Localizator } from '../../helper';
+import TMTextBox from '../editors/TMTextBox';
+import TMLocalizedTextBox from '../editors/TMLocalizedTextBox';
+import TMImageIDChooser from './TMImageIDChooser';
+const FieldsContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+`;
+const TMDataListItemFields = ({ item, originalItem, onItemChanged, validationItems = [], readOnly = false }) => {
+    const handleLocalizedNameChange = (lang, newValue) => {
+        if (!item.namesLoc) {
+            item.namesLoc = new NamesLoc3();
+        }
+        const namesLoc = item.namesLoc; // Non-null assertion
+        switch (lang) {
+            case CultureIDs.It_IT:
+                namesLoc.it_IT = newValue;
+                break;
+            case CultureIDs.En_US:
+                namesLoc.en_US = newValue;
+                break;
+            case CultureIDs.Fr_FR:
+                namesLoc.fr_FR = newValue;
+                break;
+            case CultureIDs.Pt_PT:
+                namesLoc.pt_PT = newValue;
+                break;
+            case CultureIDs.Es_ES:
+                namesLoc.es_ES = newValue;
+                break;
+            case CultureIDs.De_DE:
+                namesLoc.de_DE = newValue;
+                break;
+            default:
+                item.name = newValue;
+                break;
+        }
+        // Forza il re-render clonando l'oggetto
+        const clone = new DataListItemDescriptor();
+        Object.assign(clone, item);
+        onItemChanged(clone);
+    };
+    const handleValueChange = (e) => {
+        item.value = e.target.value || '';
+        const clone = new DataListItemDescriptor();
+        Object.assign(clone, item);
+        onItemChanged(clone);
+    };
+    const handleImageIDChange = (imageID) => {
+        item.imageID = imageID;
+        const clone = new DataListItemDescriptor();
+        Object.assign(clone, item);
+        onItemChanged(clone);
+    };
+    return (_jsxs(FieldsContainer, { children: [_jsx(TMTextBox, { label: SDKUI_Localizator.Value, value: item.value, isModifiedWhen: (item.value || '') != (originalItem?.value || ''), validationItems: validationItems.filter(o => o.PropertyName === "value"), readOnly: readOnly, onValueChanged: handleValueChange }), _jsx(TMLocalizedTextBox, { label: SDKUI_Localizator.Description, value: item.name, isModifiedWhen: (item.name || '') != (originalItem?.name || ''), validationItems: validationItems.filter(o => o.PropertyName === "itemName"), readOnly: readOnly, value_IT: item.namesLoc?.it_IT, value_EN: item.namesLoc?.en_US, value_FR: item.namesLoc?.fr_FR, value_PT: item.namesLoc?.pt_PT, value_ES: item.namesLoc?.es_ES, value_DE: item.namesLoc?.de_DE, onValueChanged: handleLocalizedNameChange }), _jsx(TMImageIDChooser, { elementStyle: { marginBottom: '10px' }, label: "Immagine", value: item.imageID, isModifiedWhen: (item.imageID || '') != (originalItem?.imageID || ''), validationItems: validationItems.filter(o => o.PropertyName === "imageID"), readOnly: readOnly, onValueChanged: handleImageIDChange })] }));
+};
+export default TMDataListItemFields;

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

@@ -4,6 +4,7 @@ interface TMDataListItemPickerProps {
     dataListID: number | undefined;
     selectedValue: string | undefined;
     onItemSelect: (item: DataListItemDescriptor) => void;
+    allowEdit?: boolean;
 }
 declare const TMDataListItemPicker: React.FC<TMDataListItemPickerProps>;
 export default TMDataListItemPicker;

package/lib/components/choosers/TMDataListItemPicker.js

@@ -1,8 +1,12 @@
 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';
+import { DataListCacheService, SDK_Localizator, ObjectClasses, JobTypes } from '@topconsultnpm/sdk-ts';
+import { IconDelete, SDKUI_Localizator, TMImageLibrary } from '../../helper';
+import { PlatformObjectService } from '../../services/platform_services';
+import TMDataListItemEditor from './TMDataListItemEditor';
+import { ButtonNames, TMMessageBoxManager } from '../base/TMPopUp';
+import TMSpinner from '../base/TMSpinner';
 const PickerContainer = styled.div `
   display: flex;
   flex-direction: column;
@@ -30,6 +34,11 @@ const slideIn = keyframes `
     transform: translateX(0);
   }
 `;
+const ItemWrapper = styled.div `
+  position: relative;
+  display: flex;
+  flex-shrink: 0;
+`;
 const StatusItem = styled.div `
   display: flex;
   flex-direction: column;
@@ -58,39 +67,190 @@ const StatusItem = styled.div `
     background-color: #e6f2ff;
   `}
 `;
+const DeleteButton = styled.button `
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: #dc3545;
+  color: white;
+  border: 2px solid white;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: bold;
+  opacity: 0;
+  transition: all 0.2s ease-in-out;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+  z-index: 10;
+
+  ${ItemWrapper}:hover & {
+    opacity: 1;
+  }
+
+  &:hover {
+    background-color: #c82333;
+    transform: scale(1.1);
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+`;
+const AddButton = 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 dashed #007bff;
+  background-color: #f8f9fa;
+  transition: all 0.2s ease-in-out;
+  flex-shrink: 0;
+  min-width: 80px;
+  color: #007bff;
+  font-weight: 500;
+
+  &:hover {
+    background-color: #e6f2ff;
+    border-color: #0056b3;
+  }
+`;
 const Label = styled.div `
   font-weight: bold;
   margin-bottom: 5px;
 `;
-const TMDataListItemPicker = ({ dataListID, selectedValue, onItemSelect }) => {
+const TMDataListItemPicker = ({ dataListID, selectedValue, onItemSelect, allowEdit = false }) => {
     const [dataList, setDataList] = useState(undefined);
+    const [items, setItems] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(undefined);
-    useEffect(() => {
-        if (dataListID) {
-            setLoading(true);
+    const [showEditDialog, setShowEditDialog] = useState(false);
+    const [editingItem, setEditingItem] = useState(undefined);
+    const [isCreating, setIsCreating] = useState(false);
+    const loadDataList = async (showLoading = true) => {
+        if (!dataListID)
+            return;
+        try {
+            if (showLoading)
+                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.");
+            const dl = await PlatformObjectService.retrieveAdminAsync(ObjectClasses.DataList, JobTypes.None, dataListID);
+            setDataList(dl);
+            setItems(dl?.items ?? []);
+        }
+        catch (err) {
+            console.error("Failed to fetch data list:", err);
+            setError("Failed to load data list.");
+        }
+        finally {
+            if (showLoading)
                 setLoading(false);
-            });
         }
+    };
+    useEffect(() => {
+        loadDataList(true);
     }, [dataListID]);
+    const handleCreateNew = () => {
+        setIsCreating(true);
+        setEditingItem(undefined);
+        setShowEditDialog(true);
+    };
+    const handleEdit = (item) => {
+        setIsCreating(false);
+        setEditingItem(item);
+        setShowEditDialog(true);
+    };
+    const handleSave = async (newItem) => {
+        if (!dataList || !dataListID)
+            return;
+        try {
+            let updatedItems;
+            TMSpinner.show({ description: 'Salvataggio in corso...' });
+            if (isCreating) {
+                // Aggiungi nuovo item
+                updatedItems = [...items, newItem];
+            }
+            else if (editingItem) {
+                // Modifica item esistente
+                updatedItems = items.map(item => item.value === editingItem.value ? newItem : item);
+            }
+            else {
+                return;
+            }
+            // Modifica direttamente la dataList invece di usare spread operator
+            dataList.items = updatedItems;
+            // Salva sul server usando l'API corretta
+            await PlatformObjectService.updateAsync(ObjectClasses.DataList, JobTypes.None, dataList);
+            // Invalida la cache per garantire la sincronizzazione
+            DataListCacheService.Remove();
+            // Ricarica i dati dalla cache (che richiamerà il server)
+            await loadDataList(false);
+            handleCloseDialog();
+        }
+        catch (error) {
+            console.error('Failed to save DataList item:', error);
+            setError('Failed to save changes.');
+        }
+        finally {
+            TMSpinner.hide();
+        }
+    };
+    const handleCloseDialog = () => {
+        setShowEditDialog(false);
+        setEditingItem(undefined);
+        setIsCreating(false);
+    };
+    const handleDelete = async (item, event) => {
+        event.stopPropagation(); // Previeni la selezione dell'item quando si clicca delete
+        const confirmMessage = SDKUI_Localizator.Delete_ConfirmFor1.replaceParams(item.name);
+        TMMessageBoxManager.show({
+            title: SDKUI_Localizator.Delete, message: confirmMessage, buttons: [ButtonNames.YES, ButtonNames.NO],
+            onButtonClick: async (e) => {
+                if (e !== ButtonNames.YES)
+                    return;
+                if (!dataList || !dataListID)
+                    return;
+                try {
+                    TMSpinner.show({ description: 'Eliminazione in corso...' });
+                    // Rimuovi l'item dalla lista
+                    const updatedItems = items.filter(i => i.value !== item.value);
+                    // Modifica direttamente la dataList
+                    dataList.items = updatedItems;
+                    // Salva sul server usando l'API corretta
+                    await PlatformObjectService.updateAsync(ObjectClasses.DataList, JobTypes.None, dataList);
+                    // Invalida la cache per garantire la sincronizzazione
+                    DataListCacheService.Remove();
+                    // Ricarica i dati dalla cache (che richiamerà il server)
+                    await loadDataList(false);
+                }
+                catch (error) {
+                    console.error('Failed to delete DataList item:', error);
+                    setError('Failed to delete item.');
+                }
+                finally {
+                    TMSpinner.hide();
+                }
+            }
+        });
+    };
     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 });
+    if (!dataList || !items || items.length === 0) {
+        return (_jsxs(PickerContainer, { children: [_jsx(Label, { children: dataList ? `${SDK_Localizator.DataList}: ${dataList.name}` : SDKUI_Localizator.NoDataToDisplay }), _jsx(ItemsContainer, { children: allowEdit && (_jsxs(AddButton, { onClick: handleCreateNew, children: ["+ ", SDKUI_Localizator.NewMale] })) }), !allowEdit && _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))) })] }));
+    return (_jsxs(PickerContainer, { children: [_jsx(Label, { children: `${SDK_Localizator.DataList}: ${dataList.name}` }), _jsxs(ItemsContainer, { children: [items.map((item, index) => (_jsxs(ItemWrapper, { children: [_jsxs(StatusItem, { "$isSelected": item.value === selectedValue, "$index": index, onClick: () => onItemSelect(item), onDoubleClick: () => allowEdit && handleEdit(item), children: [item.imageID && _jsx(TMImageLibrary, { imageID: item.imageID }), _jsx("span", { children: item.name })] }), allowEdit && (_jsx(DeleteButton, { onClick: (e) => handleDelete(item, e), title: SDKUI_Localizator.Delete || 'Delete', "aria-label": "Delete item", children: _jsx(IconDelete, { fontSize: 16 }) }))] }, item.value))), allowEdit && (_jsxs(AddButton, { onClick: handleCreateNew, children: ["+ ", SDKUI_Localizator.NewMale] }))] }), _jsx(TMDataListItemEditor, { isOpen: showEditDialog, item: editingItem, isCreating: isCreating, onClose: handleCloseDialog, onSave: handleSave })] }));
 };
 export default TMDataListItemPicker;

package/lib/components/choosers/TMDynDataListItemChooser.js

@@ -9,6 +9,7 @@ import TMChooserForm from '../forms/TMChooserForm';
 import { TMColors } from '../../utils/theme';
 import TMTooltip from '../base/TMTooltip';
 import { FormulaHelper } from '../editors/TMFormulaEditor';
+import { TMExceptionBoxManager } from '../base/TMPopUp';
 const TMDynDataListItemChooser = ({ tid, md, width = '100%', titleForm, openChooserBySingleClick, readOnly, layoutMode = LayoutModes.None, queryParamsDynDataList, buttons = [], backgroundColor, showBorder = true, elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, validationItems = [], icon, labelColor, showClearButton, onValueChanged, onCascadeRefreshDynDataLists, onCascadeUpdateMIDs, updateIsModalOpen }) => {
     const [showChooser, setShowChooser] = useState(false);
     const [dynDl, setDynDl] = useState();
@@ -30,7 +31,9 @@ const TMDynDataListItemChooser = ({ tid, md, width = '100%', titleForm, openChoo
         setDynDl(d);
         if (!IsParametricQuery(d?.qd) && !dataSource) {
             setDataSource(undefined);
-            loadData().then((result) => { setDataSource(result); });
+            loadData()
+                .then((result) => { setDataSource(result); })
+                .catch((err) => { TMExceptionBoxManager.show({ exception: err }); });
         }
     }, [md]);
     useEffect(() => {
@@ -42,12 +45,13 @@ const TMDynDataListItemChooser = ({ tid, md, width = '100%', titleForm, openChoo
             setDataSource(undefined);
             return;
         }
-        loadData().then((result) => {
-            setDataSource(result);
-        });
+        loadData()
+            .then((result) => { setDataSource(result); })
+            .catch((err) => { TMExceptionBoxManager.show({ exception: err }); });
     }, [queryParamsDynDataList, dynDl]);
     const loadData = async () => {
-        return await SDK_Globals.tmSession?.NewSearchEngine().GetDynDataListValuesAsync(tid, md?.id, layoutMode, queryParamsDynDataList ?? []);
+        return await SDK_Globals.tmSession?.NewSearchEngine().GetDynDataListValuesAsync(tid, md?.id, layoutMode, queryParamsDynDataList ?? [])
+            .catch((err) => { throw err; });
     };
     const getDescription = () => {
         if (!Array.isArray(values))
@@ -152,7 +156,8 @@ export const TMDynDataListItemChooserForm = (props) => {
         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, []);
+        let result = await SDK_Globals.tmSession?.NewSearchEngine().GetDynDataListValuesAsync(props.TID, props.MID, props.layoutMode, [])
+            .catch((err) => { TMSpinner.hide(); TMExceptionBoxManager.show({ exception: err }); });
         TMSpinner.hide();
         return result ? searchResultDescriptorToSimpleArray(result) ?? [] : [];
     };

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ITMChooserProps, ITMChooserFormProps } from '../../ts';
+interface ITMImageIDChooserProps extends ITMChooserProps {
+    /** Contiene i values selezionati -> attualmente sempre e solo 1 elemento */
+    value?: string;
+    readOnly?: boolean;
+}
+declare const TMImageIDChooser: React.FunctionComponent<ITMImageIDChooserProps>;
+export default TMImageIDChooser;
+interface ITMImageIDChooserFormProps extends ITMChooserFormProps<Image_Wrap> {
+}
+declare class Image_Wrap {
+    id: number;
+    imageID?: string;
+}
+export declare const TMImageIDChooserForm: React.FunctionComponent<ITMImageIDChooserFormProps>;

package/lib/components/choosers/TMImageIDChooser.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { TMImageLibrary, IconSearch } from '../../helper';
+import { StyledDivHorizontal } from '../base/Styled';
+import TMSummary from '../editors/TMSummary';
+import TMChooserForm from '../forms/TMChooserForm';
+import { ImageIDList } from '../viewers/TMTidViewer';
+const TMImageIDChooser = ({ backgroundColor, elementStyle, value, isModifiedWhen, placeHolder, validationItems = [], readOnly, onValueChanged }) => {
+    const [showChooser, setShowChooser] = useState(false);
+    const renderTemplate = () => {
+        return (_jsx(StyledDivHorizontal, { style: { minWidth: '125px' }, children: placeHolder && (!value || value == '')
+                ? _jsx("p", { children: placeHolder })
+                : _jsx(TMImageLibrary, { imageID: value }) }));
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { backgroundColor: backgroundColor, showClearButton: true, iconEditButton: _jsx(IconSearch, {}), onEditorClick: () => setShowChooser(true), onClearClick: () => onValueChanged?.(''), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, label: "Immagine", hasValue: value != undefined && value?.length > 0, template: renderTemplate(), validationItems: validationItems, 
+                // openEditorOnSummaryClick={!readOnly}
+                readOnly: readOnly, disabled: readOnly }), showChooser &&
+                _jsx(TMImageIDChooserForm, { selectedIDs: [value], onClose: () => setShowChooser(false), onChoose: (img) => { onValueChanged?.(img); } })] }));
+};
+export default TMImageIDChooser;
+class Image_Wrap {
+    constructor() {
+        this.id = 0;
+    }
+}
+export const TMImageIDChooserForm = (props) => {
+    const getItems = async () => {
+        let datasource = [];
+        let i = 0;
+        for (let img of Object.values(ImageIDList))
+            datasource.push({ id: i, imageID: img });
+        return datasource;
+    };
+    const cellRenderImageListItemIcon = (data) => {
+        let imageID = data.row.data;
+        return _jsx(TMImageLibrary, { imageID: imageID.imageID });
+    };
+    const cellRenderName = (data) => {
+        let imageID = data.row.data;
+        return _jsxs("p", { children: [imageID.imageID, " "] });
+    };
+    const dataColumns = useMemo(() => {
+        return [
+            { name: 'icon', dataField: 'imageID', caption: '', width: '40px', allowResizing: false, cellRender: cellRenderImageListItemIcon },
+            { name: 'name', dataField: 'imageID', caption: '', cellRender: cellRenderName }
+        ];
+    }, []);
+    return (_jsx(TMChooserForm, { title: "Immagini", hasShowId: false, allowMultipleSelection: false, height: props.height, width: '200px', showDefaultColumns: false, keyName: 'imageID', columns: dataColumns, selectedIDs: props.selectedIDs, dataSource: props.dataSource, getItems: getItems, onClose: props.onClose, onChoose: (IDs) => {
+            if (IDs && IDs.length > 0) {
+                props.onChoose?.(IDs[0]);
+            }
+        } }));
+};

package/lib/components/choosers/TMMetadataChooser.js

@@ -21,7 +21,7 @@ const TMMetadataChooser = ({ tmSession, dataSource, showEditButton = true, butto
         return undefined;
     };
     const renderTemplate = useMemo(() => {
-        return (_jsxs(StyledDivHorizontal, { style: { width: 'max-content', height: '100%' }, children: [values && values.length > 0 && values[0].mid && values[0].mid > 0 && _jsx(TMMidViewer, { tmSession: tmSession, tid_mid: values[0], showIcon: true, showId: showId, showCompleteName: showCompleteMetadataName }), values && values.length > 0 && values[0].mid && values[0].mid < 0 && _jsx(TMMidViewer, { tmSession: tmSession, tid_mid: values[0], inputMd: getinputMd(), showIcon: true, showId: showId, showCompleteName: showCompleteMetadataName }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` }), (values == undefined || values.length == 0) && _jsx("p", { children: placeHolder })] }));
+        return (_jsxs(StyledDivHorizontal, { style: { width: 'max-content', height: '100%' }, children: [values && values.length > 0 && values[0].mid && values[0].mid > 0 && _jsx(TMMidViewer, { tmSession: tmSession, tid_mid: values[0], showIcon: true, showId: showId, showCompleteName: showCompleteMetadataName }), values && values.length > 0 && values[0].mid && values[0].mid < 0 && _jsx(TMMidViewer, { tmSession: tmSession, tid_mid: values[0], inputMd: getinputMd(), showIcon: true, showId: showId, showCompleteName: showCompleteMetadataName }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` }), (values == undefined || values.length == 0) && _jsx("p", { children: placeHolder ?? SDKUI_Localizator.SelectMetadata })] }));
     }, [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: () => {
                     if (!disabled) {

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

@@ -15,6 +15,7 @@ interface TMLocalizedTextBoxProps {
     validationItems?: ValidationItem[];
     qd?: QueryDescriptor;
     tid?: number;
+    readOnly?: boolean;
     onValueChanged: (lang: CultureIDs, value: string) => void;
 }
 declare const TMLocalizedTextBox: React.FC<TMLocalizedTextBoxProps>;