@topconsultnpm/sdkui-react 6.20.0-test1 → 6.21.0-dev1.10

package/lib/components/NewComponents/ContextMenu/styles.d.ts

@@ -14,7 +14,9 @@ export declare const MenuItem: import("styled-components/dist/types").IStyledCom
     $beginGroup?: boolean;
 }>> & string;
 export declare const MenuItemContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const IconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const IconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}>, never>, never>> & string;
 export declare const MenuItemName: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
 export declare const RightIconButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;

package/lib/components/NewComponents/ContextMenu/styles.js

@@ -69,7 +69,7 @@ export const MenuContainer = styled.div `
   `}
 
   /* Reset color inheritance from parent with !important to override panel header styles */
-  & *:not(svg):not(.right-icon-btn):not(.right-icon-btn *) {
+  & *:not(svg):not(.right-icon-btn):not(.right-icon-btn *):not(.icon-wrapper):not(.icon-wrapper *) {
     color: #1a1a1a !important;
   }
 
@@ -80,7 +80,7 @@ export const MenuContainer = styled.div `
                 0 2px 8px rgba(0, 0, 0, 0.3);
   }
 
-  [data-theme='dark'] & *:not(svg):not(.right-icon-btn):not(.right-icon-btn *) {
+  [data-theme='dark'] & *:not(svg):not(.right-icon-btn):not(.right-icon-btn *):not(.icon-wrapper):not(.icon-wrapper *) {
     color: #e0e0e0 !important;
   }
 
@@ -174,7 +174,9 @@ export const MenuItemContent = styled.div `
   gap: 10px;
   flex: 1;
 `;
-export const IconWrapper = styled.span `
+export const IconWrapper = styled.span.attrs({
+    className: 'icon-wrapper'
+}) `
   display: flex;
   align-items: center;
   justify-content: center;
@@ -289,7 +291,7 @@ export const Submenu = styled.div `
   }
 
   /* Reset color inheritance from parent with !important to override panel header styles */
-  & *:not(svg):not(.right-icon-btn):not(.right-icon-btn *) {
+  & *:not(svg):not(.right-icon-btn):not(.right-icon-btn *):not(.icon-wrapper):not(.icon-wrapper *) {
     color: #1a1a1a !important;
   }
 
@@ -300,7 +302,7 @@ export const Submenu = styled.div `
                 0 2px 8px rgba(0, 0, 0, 0.3);
   }
 
-  [data-theme='dark'] & *:not(svg):not(.right-icon-btn):not(.right-icon-btn *) {
+  [data-theme='dark'] & *:not(svg):not(.right-icon-btn):not(.right-icon-btn *):not(.icon-wrapper):not(.icon-wrapper *) {
     color: #e0e0e0 !important;
   }
   

package/lib/components/NewComponents/FloatingMenuBar/TMFloatingMenuBar.js

@@ -146,6 +146,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
     const isLocalChange = useRef(false);
     const dragStartPosition = useRef(null);
     const isItemsInitialized = useRef(false);
+    const hasReceivedNonEmptyExternalIds = useRef(false);
     useEffect(() => {
         floatingBarItemIds.current = new Set(state.items.map(i => i.id));
         floatingBarItemNames.current = new Set(state.items.map(i => i.name));
@@ -264,9 +265,14 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
         }
         if (externalPinnedItemIds === undefined || !enableConfigMode)
             return;
+        // Track if we've ever received non-empty external IDs
+        if (externalPinnedItemIds.length > 0) {
+            hasReceivedNonEmptyExternalIds.current = true;
+        }
         // Skip sync if external is empty but we have initialized items (first login case)
         // The parent hook starts with [] but we've initialized with defaults
-        if (externalPinnedItemIds.length === 0 && state.items.length > 0)
+        // However, once we've received non-empty pinnedItemIds, an empty array means user removed all items
+        if (externalPinnedItemIds.length === 0 && state.items.length > 0 && !hasReceivedNonEmptyExternalIds.current)
             return;
         const flatItems = flattenMenuItems(contextMenuItems);
         // Build items from external pinned IDs

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

@@ -7,7 +7,10 @@ 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 StyledReferenceButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, 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/dist/types").Substitute<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $bgColor?: string;
+}>> & 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;
     $padding?: string;

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};
+    background-color: ${({ $bgColor }) => $bgColor || 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/base/TMPanel.js

@@ -5,9 +5,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 */
 import { useCallback, useRef, useState, forwardRef, useImperativeHandle } from 'react';
 import styled from 'styled-components';
-import { IconArrowLeft, IconClearButton, IconWindowMaximize, IconWindowMinimize, isPositiveNumber, SDKUI_Localizator } from '../../helper';
+import { getAppModuleGradient, IconArrowLeft, IconClearButton, IconWindowMaximize, IconWindowMinimize, isPositiveNumber, SDKUI_Localizator } from '../../helper';
 import TMButton from './TMButton';
 import { Gutters } from '../../utils/theme';
+import { AppModules, SDK_Globals } from '@topconsultnpm/sdk-ts';
 const StyledPanelContainer = styled.div `
     width: 100%;
     height: 100%;
@@ -34,8 +35,9 @@ const StyledPanelHeader = styled.div `
     align-items: center;
     justify-content: flex-start;
     padding: 4px 10px;
-    background: ${({ $isActive, $backgroundColor }) => $isActive
-    ? 'linear-gradient(270deg, #46B5A2 16%, #3BAABC 34%, #3BAABC 34%, #3681AD 54%, #3368A5 72%, #2F549D 88%, #304F99 100%)'
+    background: ${({ $isActive, $backgroundColor, $activeGradient }) => $isActive
+    ? ($activeGradient ??
+        'linear-gradient(270deg, #46B5A2 16%, #3BAABC 34%, #3BAABC 34%, #3681AD 54%, #3368A5 72%, #2F549D 88%, #304F99 100%)')
     : ($backgroundColor ?? '#F4F4F4')};
     box-shadow: 3px 3px 5px #D3D3D3BF;
     color: ${({ $isActive, $color }) => $isActive ? '#FFFFFF' : ($color ?? '#2559A5')};
@@ -141,7 +143,7 @@ onActivate, onBack, onClose, onHeaderDoubleClick, onMaximize, onActiveChanged },
                             onHeaderDoubleClick();
                         else
                             allowMaximize && handleMaximize();
-                    }, children: _jsxs("div", { style: {
+                    }, "$activeGradient": getAppModuleGradient(SDK_Globals.tmSession?.SessionDescr?.appModuleID ?? AppModules.SURFER), children: _jsxs("div", { style: {
                             display: 'flex',
                             flexDirection: 'row',
                             alignItems: 'center',

package/lib/components/base/TMPopUp.js

@@ -258,6 +258,10 @@ const TMMessageBox = ({ resizable = false, onButtonClick, title = 'TopMedia', me
             const el = document.getElementById('tm-messagebox-wrapper');
             if (el)
                 el.style.zIndex = '20000';
+            // Blocca traduzione sul titolo
+            const titleEl = el?.querySelector('.dx-popup-title');
+            if (titleEl)
+                titleEl.setAttribute('translate', 'no');
         }, onResizeEnd: handleResizeEnd, wrapperAttr: { id: 'tm-messagebox-wrapper' }, children: _jsx(ResponsiveMessageBody, { message: message, isMobile: isMobile, MessageToolbar: MessageToolbar, showToppy: showToppy }) }));
 };
 const TMExceptionBox = ({ resizable = false, exception, title = `${SDK_Globals.appModule} v. ${SDK_Globals.appVersion}`, onClose }) => {

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

@@ -6,8 +6,9 @@ export interface ITMTreeItem {
     hidden?: boolean;
     isLoaded?: boolean;
     isContainer: boolean;
+    isExpandible?: boolean;
     items?: ITMTreeItem[];
-    visibleItemsCount?: number;
+    currentPage?: number;
     totalItemsCount?: number;
 }
 interface ITMTreeViewProps<T extends ITMTreeItem> {
@@ -22,12 +23,14 @@ interface ITMTreeViewProps<T extends ITMTreeItem> {
     onNodeUpdate?: (updatedNode: T) => void;
     onDataChanged?: (items: T[]) => void;
     shouldDelayFocusOnEvent?: (node: T, event: React.MouseEvent) => boolean;
+    onItemContextMenu?: (item: T, e: React.MouseEvent) => void;
     autoSelectChildren?: boolean;
     itemsPerPage?: number;
     showLoadMoreButton?: boolean;
 }
-declare const TMTreeView: <T extends ITMTreeItem>({ dataSource, focusedItem, selectedItems, allowMultipleSelection, onDataChanged, calculateItemsForNode, itemRender, onNodeUpdate, onFocusedItemChanged, onSelectionChanged, shouldDelayFocusOnEvent, autoSelectChildren, itemsPerPage, showLoadMoreButton }: ITMTreeViewProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const TMTreeView: <T extends ITMTreeItem>({ dataSource, focusedItem, selectedItems, allowMultipleSelection, onDataChanged, calculateItemsForNode, itemRender, onNodeUpdate, onFocusedItemChanged, onSelectionChanged, shouldDelayFocusOnEvent, onItemContextMenu, autoSelectChildren, itemsPerPage, showLoadMoreButton }: ITMTreeViewProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default TMTreeView;
 export declare const StyledTreeNode: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $isSelected?: boolean;
 }>> & string;
+export declare const StyledStickyPaginator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/lib/components/base/TMTreeView.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef } from 'react';
 import styled from 'styled-components';
-import { IconChevronDown, IconChevronRight } from '../../helper';
+import { IconArrowLeft, IconArrowRight, IconChevronDown, IconChevronRight, SDKUI_Localizator } from '../../helper';
 import TMButton from './TMButton';
-const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMultipleSelection, onDataChanged, calculateItemsForNode, itemRender, onNodeUpdate, onFocusedItemChanged, onSelectionChanged, shouldDelayFocusOnEvent, autoSelectChildren = true, itemsPerPage = 100, showLoadMoreButton = true }) => {
+const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMultipleSelection, onDataChanged, calculateItemsForNode, itemRender, onNodeUpdate, onFocusedItemChanged, onSelectionChanged, shouldDelayFocusOnEvent, onItemContextMenu, autoSelectChildren = true, itemsPerPage = 100, showLoadMoreButton = true }) => {
     useEffect(() => {
         const handleKeyDown = (event) => {
             if (!focusedItem)
@@ -85,7 +85,9 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
                         let newItems = node.items;
                         // Solo se calculateItemsForNode è definito E (ctrl è premuto O non è già caricato)
                         if (calculateItemsForNode && (ctrlKey || !node.isLoaded)) {
-                            newItems = await calculateItemsForNode(node);
+                            // Se ctrl è premuto, passa un nodo con isLoaded resettato per forzare il refresh
+                            const nodeForCalculation = ctrlKey ? { ...node, isLoaded: false } : node;
+                            newItems = await calculateItemsForNode(nodeForCalculation);
                             const updatedNode = { ...node, expanded: true, items: newItems, isLoaded: true };
                             onNodeUpdate?.(updatedNode);
                             return updatedNode;
@@ -274,53 +276,62 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
         return childKeys.every(key => selectedChildKeys.includes(key));
     };
     const hasVisibleItems = (node) => {
+        // If node has explicit isExpandible value, use that
+        if (node.isExpandible !== undefined) {
+            return node.isExpandible;
+        }
+        // Fallback: check if node has visible items
         if (!node.items)
             return false;
         if (node.items.length <= 0)
             return false;
         return node.items.filter(o => !o.hidden).length > 0;
     };
-    // Gestisce il caricamento di più items per un nodo
-    const handleLoadMoreItems = useCallback((nodeKey) => {
-        const updateNodeVisibleCount = (nodes) => {
+    // Gestisce il cambio di pagina per un nodo
+    const handlePageChange = useCallback((nodeKey, newPage) => {
+        const updateNodePage = (nodes) => {
             return nodes.map(node => {
                 if (node.key === nodeKey) {
-                    const currentVisible = node.visibleItemsCount ?? itemsPerPage;
-                    const newVisible = Math.min(currentVisible + itemsPerPage, node.totalItemsCount ?? node.items?.length ?? 0);
-                    const updatedNode = { ...node, visibleItemsCount: newVisible };
+                    const updatedNode = { ...node, currentPage: newPage };
                     onNodeUpdate?.(updatedNode);
                     return updatedNode;
                 }
                 if (node.items) {
-                    return { ...node, items: updateNodeVisibleCount(node.items) };
+                    return { ...node, items: updateNodePage(node.items) };
                 }
                 return node;
             });
         };
-        const updatedData = updateNodeVisibleCount(dataSource);
+        const updatedData = updateNodePage(dataSource);
         onDataChanged?.(updatedData);
-    }, [dataSource, itemsPerPage, onDataChanged, onNodeUpdate]);
+    }, [dataSource, onDataChanged, onNodeUpdate]);
     // Filtra gli items da mostrare in base alla paginazione
     const getVisibleItems = useCallback((node) => {
         if (!node.items)
             return [];
         const totalItems = node.items.length;
-        const visibleCount = node.visibleItemsCount ?? itemsPerPage;
         // Se non c'è paginazione attiva o gli items sono pochi, mostra tutti
         if (totalItems <= itemsPerPage || !showLoadMoreButton) {
             return node.items;
         }
-        // Altrimenti mostra solo i primi N items
-        return node.items.slice(0, visibleCount);
+        // Altrimenti mostra solo gli items della pagina corrente
+        const currentPage = node.currentPage ?? 0;
+        const startIndex = currentPage * itemsPerPage;
+        const endIndex = startIndex + itemsPerPage;
+        return node.items.slice(startIndex, endIndex);
     }, [itemsPerPage, showLoadMoreButton]);
-    // Verifica se c'è bisogno del bottone "Load More"
-    const needsLoadMoreButton = useCallback((node) => {
+    // Verifica se c'è bisogno del paginatore
+    const needsPagination = useCallback((node) => {
         if (!showLoadMoreButton || !node.items)
             return false;
-        const totalItems = node.items.length;
-        const visibleCount = node.visibleItemsCount ?? itemsPerPage;
-        return totalItems > itemsPerPage && visibleCount < totalItems;
+        return node.items.length > itemsPerPage;
     }, [itemsPerPage, showLoadMoreButton]);
+    // Calcola il numero totale di pagine per un nodo
+    const getTotalPages = useCallback((node) => {
+        if (!node.items)
+            return 0;
+        return Math.ceil(node.items.length / itemsPerPage);
+    }, [itemsPerPage]);
     const renderTree = useCallback((nodes) => {
         return nodes.map(node => !node.hidden && (_jsxs("div", { style: { width: '100%', margin: 0, padding: 0 }, children: [_jsxs(StyledTreeNode, { "$isSelected": node.key === focusedItem?.key, children: [_jsx("div", { style: {
                                 display: 'flex',
@@ -339,8 +350,13 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
                                 if (input) {
                                     input.indeterminate = isIndeterminate(node);
                                 }
-                            } })), _jsx("div", { style: { display: 'flex', alignItems: 'center', flex: 1, minWidth: 0 }, onClick: (e) => { handleNodeClick(node, e); }, children: itemRender(node) })] }), node.expanded && node.items && (_jsxs("div", { style: { paddingLeft: 20, width: '100%' }, children: [renderTree(getVisibleItems(node)), needsLoadMoreButton(node) && (_jsx("div", { style: { display: 'flex', justifyContent: 'center', margin: '5px 0' }, children: _jsx(TMButton, { onClick: () => handleLoadMoreItems(node.key), showTooltip: false, caption: `Carica altri ${itemsPerPage}... (${node.visibleItemsCount ?? itemsPerPage} / ${node.items?.length ?? 0})` }) }))] }))] }, node.key)));
-    }, [handleNodeClick, handleNodeToggle, handleCheckboxChange, focusedItem, selectedItems, allowMultipleSelection, getVisibleItems, needsLoadMoreButton, handleLoadMoreItems, itemsPerPage]);
+                            } })), _jsx("div", { style: { display: 'flex', alignItems: 'center', flex: 1, minWidth: 0 }, onClick: (e) => { handleNodeClick(node, e); }, onContextMenu: (e) => {
+                                if (onItemContextMenu) {
+                                    e.preventDefault();
+                                    onItemContextMenu(node, e);
+                                }
+                            }, children: itemRender(node) })] }), node.expanded && node.items && (_jsxs("div", { style: { paddingLeft: 20, width: '100%' }, children: [renderTree(getVisibleItems(node)), needsPagination(node) && (_jsxs(StyledStickyPaginator, { children: [_jsx(TMButton, { btnStyle: 'icon', onClick: () => handlePageChange(node.key, (node.currentPage ?? 0) - 1), showTooltip: false, caption: "\u25C4", icon: _jsx(IconArrowLeft, { color: 'white' }), disabled: (node.currentPage ?? 0) <= 0 }), _jsx("span", { style: { fontSize: '11px', whiteSpace: 'nowrap', fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', minWidth: 0, color: 'white' }, children: SDKUI_Localizator.PaginationInfo.replaceParams((node.currentPage ?? 0) + 1, getTotalPages(node), node.items?.length ?? 0) }), _jsx(TMButton, { btnStyle: 'icon', onClick: () => handlePageChange(node.key, (node.currentPage ?? 0) + 1), showTooltip: false, caption: "\u25BA", icon: _jsx(IconArrowRight, { color: 'white' }), disabled: (node.currentPage ?? 0) >= getTotalPages(node) - 1 })] }))] }))] }, node.key)));
+    }, [handleNodeClick, handleNodeToggle, handleCheckboxChange, focusedItem, selectedItems, allowMultipleSelection, getVisibleItems, needsPagination, handlePageChange, getTotalPages, onItemContextMenu]);
     return (_jsx("div", { style: { height: '100%', width: '100%', overflowY: 'auto', overflowX: 'hidden', padding: '0px 5px 2px 2px' }, children: renderTree(dataSource) }));
 };
 export default TMTreeView;
@@ -361,3 +377,39 @@ export const StyledTreeNode = styled.div `
         background: ${() => `oklch(from var(--dx-color-primary) l c h / .1)`};
     }
 `;
+export const StyledStickyPaginator = styled.div `
+	position: sticky;
+	bottom: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: fit-content;
+	margin: 3px auto;
+	gap: 15px;
+	padding: 4px 10px;
+	background: oklch(from var(--dx-color-primary) l c h / .85);
+	border: 1px solid oklch(from var(--dx-color-primary) l c h / .9);
+	border-radius: 3px;
+	box-shadow: 0 -1px 4px oklch(from var(--dx-color-primary) l c h / .15);
+	transition: all 0.2s ease;
+	min-width: 0;
+	z-index: 10;
+
+	& > button {
+		flex-shrink: 0;
+		min-width: 24px !important;
+		min-height: 20px !important;
+		padding: 2px 6px !important;
+	}
+
+	& > span {
+		flex: 1 1 auto;
+		min-width: 0;
+	}
+
+	&:hover {
+		background: oklch(from var(--dx-color-primary) l c h / .95);
+		border-color: oklch(from var(--dx-color-primary) l c h / 1);
+		box-shadow: 0 -1px 6px oklch(from var(--dx-color-primary) l c h / .2);
+	}
+`;

package/lib/components/base/TMWaitPanel.js

@@ -33,17 +33,18 @@ const StyledProgressText = styled.p ` font-weight: bold; color: #333; margin: 0;
 const StyledMessage = styled.p ` color: #666; font-size: 0.9em; margin-top: 10px; `;
 const StyledAbortButton = styled.button ` background: #ff4d4d; color: white; border: none; border-radius: 5px; padding: 10px 20px; font-size: 1em; cursor: pointer; margin-top: 20px; &:hover { background: #ff6666; } `;
 export const TMWaitPanel = (props) => {
+    const { title, showPrimary, textPrimary, valuePrimary, maxValuePrimary, showSecondary, textSecondary, valueSecondary, maxValueSecondary, isCancelable, abortController, onAbortClick } = props;
     const calculateProgress = (value = 0, maxValue = 0) => {
         if (maxValue === 0)
             return 0;
         const progress = (value / maxValue) * 100;
         return Number.isFinite(progress) ? progress : 0;
     };
-    let progressValue1 = calculateProgress(props.valuePrimary, props.maxValuePrimary);
-    let progressValue2 = calculateProgress(props.valueSecondary, props.maxValueSecondary);
-    return (_jsx(StyledWaitPanelOverlay, { children: _jsxs(StyledWaitPanel, { "$height": (props.showPrimary && props.showSecondary) ? '350px' : '250px', children: [_jsx(StyledTitle, { children: props.title }), props.showPrimary &&
-                    _jsxs("div", { style: { width: '100%', height: '100px' }, children: [_jsx(StyledProgressBarContainer, { children: _jsx(StyledProgressBar, { style: { width: `${progressValue1.toFixed(2)}%` } }) }), _jsxs(StyledProgressText, { children: [progressValue1.toFixed(2), "%"] }), _jsx(StyledMessage, { children: props.textPrimary })] }), props.showSecondary &&
-                    _jsxs("div", { style: { width: '100%', height: '100px' }, children: [_jsx(StyledProgressBarContainer, { children: _jsx(StyledProgressBar, { style: { width: `${progressValue2.toFixed(2)}%` } }) }), _jsxs(StyledProgressText, { children: [progressValue2.toFixed(2), "%"] }), _jsx(StyledMessage, { children: props.textSecondary })] }), props.isCancelable && _jsx(StyledAbortButton, { onClick: () => props.onAbortClick?.(props.abortController), children: SDKUI_Localizator.Abort })] }) }));
+    let progressValue1 = calculateProgress(valuePrimary, maxValuePrimary);
+    let progressValue2 = calculateProgress(valueSecondary, maxValueSecondary);
+    return (_jsx(StyledWaitPanelOverlay, { children: _jsxs(StyledWaitPanel, { "$height": (showPrimary && showSecondary) ? '350px' : '250px', children: [_jsx(StyledTitle, { children: title }), showPrimary &&
+                    _jsxs("div", { style: { width: '100%', height: '100px' }, children: [_jsx(StyledProgressBarContainer, { children: _jsx(StyledProgressBar, { style: { width: `${progressValue1.toFixed(2)}%` } }) }), _jsxs(StyledProgressText, { children: [progressValue1.toFixed(2), "%"] }), _jsx(StyledMessage, { children: textPrimary })] }), showSecondary &&
+                    _jsxs("div", { style: { width: '100%', height: '100px' }, children: [_jsx(StyledProgressBarContainer, { children: _jsx(StyledProgressBar, { style: { width: `${progressValue2.toFixed(2)}%` } }) }), _jsxs(StyledProgressText, { children: [progressValue2.toFixed(2), "%"] }), _jsx(StyledMessage, { children: textSecondary })] }), isCancelable && _jsx(StyledAbortButton, { onClick: () => onAbortClick?.(abortController), children: SDKUI_Localizator.Abort })] }) }));
 };
 export const TMLayoutWaitingContainer = ({ showWaitPanel, showWaitPanelPrimary, showWaitPanelSecondary, waitPanelTitle, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, isCancelable, abortController, gap = 3, onClick, justifyContent = 'flex-start', alignItems = 'flex-start', children, direction = 'vertical' }) => {
     return (_jsxs(TMLayoutContainer, { gap: gap, justifyContent: justifyContent, alignItems: alignItems, direction: direction, children: [children, showWaitPanel && (_jsx(TMWaitPanel, { title: waitPanelTitle, showPrimary: showWaitPanelPrimary, textPrimary: waitPanelTextPrimary, valuePrimary: waitPanelValuePrimary, maxValuePrimary: waitPanelMaxValuePrimary, showSecondary: showWaitPanelSecondary, textSecondary: waitPanelTextSecondary, valueSecondary: waitPanelValueSecondary, maxValueSecondary: waitPanelMaxValueSecondary, isCancelable: isCancelable, abortController: abortController, onAbortClick: (abortController) => { setTimeout(() => { abortController?.abort(); }, 1000); } }))] }));

package/lib/components/choosers/TMDataListItemChooser.js

@@ -31,7 +31,7 @@ const cellRenderIcon = (data) => _jsx(TMImageLibrary, { imageID: data.data?.imag
 export const TMDataListItemChooserForm = (props) => {
     const dataColumns = useMemo(() => {
         return [
-            { dataField: 'value', caption: SDKUI_Localizator.Value },
+            { dataField: 'value', caption: SDKUI_Localizator.Value, visible: false },
             { dataField: 'name', caption: SDKUI_Localizator.Description }
         ];
     }, []);

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, autoFocus: true, 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,8 @@ interface TMDataListItemPickerProps {
     dataListID: number | undefined;
     selectedValue: string | undefined;
     onItemSelect: (item: DataListItemDescriptor) => void;
+    onItemEdited?: (originalItem: DataListItemDescriptor, editedItem: DataListItemDescriptor) => void;
+    allowEdit?: boolean;
 }
 declare const TMDataListItemPicker: React.FC<TMDataListItemPickerProps>;
 export default TMDataListItemPicker;