@topconsultnpm/sdkui-react 6.17.0-test10 → 6.17.0-test11

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

@@ -16,6 +16,7 @@ export interface ITMButton extends ITMEditorBase {
     padding?: string;
     showTooltip?: boolean;
     onClick?: VoidFunction;
+    onMouseDown?: (e: any) => any;
 }
 declare const TMButton: React.ForwardRefExoticComponent<ITMButton & React.RefAttributes<HTMLButtonElement>>;
 export default TMButton;

package/lib/components/base/TMButton.js

@@ -145,23 +145,23 @@ const StyledAdvancedButtonText = styled.div `
     padding: 5px;
 `;
 const TMButton = forwardRef((props, ref) => {
-    const { width, height, keyGesture, btnStyle = 'normal', advancedColor, advancedType = 'primary', color = 'primary', fontSize = FontSize.defaultFontSize, disabled = false, showTooltip = true, caption, icon, description, padding, elementStyle, onClick = () => { } } = props;
+    const { width, height, keyGesture, btnStyle = 'normal', advancedColor, advancedType = 'primary', color = 'primary', fontSize = FontSize.defaultFontSize, disabled = false, showTooltip = true, caption, icon, description, padding, elementStyle, onClick = () => { }, onMouseDown = () => { } } = props;
     const [isHovered, setIsHovered] = useState(false);
     const renderedButton = () => {
         if (btnStyle === 'normal') {
-            return (_jsx(StyledNormalButton, { ref: ref, width: width, height: height, color: color, caption: caption, disabled: disabled, fontSize: fontSize, onClick: onClick, children: caption }));
+            return (_jsx(StyledNormalButton, { ref: ref, width: width, height: height, color: color, caption: caption, disabled: disabled, fontSize: fontSize, onClick: onClick, onMouseDown: (e) => !disabled && onMouseDown?.(e), children: caption }));
         }
         else if (btnStyle === 'toolbar') {
-            return (_jsx(StyledToolbarButton, { ref: ref, color: color, caption: caption, disabled: disabled, fontSize: fontSize, onClick: onClick, children: icon }));
+            return (_jsx(StyledToolbarButton, { ref: ref, color: color, caption: caption, disabled: disabled, fontSize: fontSize, onClick: onClick, onMouseDown: (e) => !disabled && onMouseDown?.(e), children: icon }));
         }
         else if (btnStyle === 'icon') {
-            return (_jsx(StyledIconButton, { ref: ref, color: color, caption: caption, disabled: disabled, fontSize: fontSize, padding: padding, onClick: onClick, children: icon }));
+            return (_jsx(StyledIconButton, { ref: ref, color: color, caption: caption, disabled: disabled, fontSize: fontSize, padding: padding, onClick: onClick, onMouseDown: (e) => !disabled && onMouseDown?.(e), children: icon }));
         }
         else if (btnStyle === 'advanced') {
-            return (_jsxs(StyledAdvancedButton, { ref: ref, "$width": width ?? '90px', "$height": height ?? '30px', onMouseOver: () => !disabled && setIsHovered(true), onMouseOut: () => setIsHovered(false), "$isDisabled": disabled, "$isPrimaryOutline": advancedType === 'primary' && (advancedColor === 'primaryOutline' || color === 'primaryOutline'), onClick: () => !disabled && onClick?.(), children: [_jsx(StyledAdvancedButtonIcon, { "$color": advancedColor, "$isVisible": isHovered, "$isDisabled": disabled, "$type": advancedType, children: icon }), _jsx(StyledAdvancedButtonText, { "$color": advancedColor, "$isDisabled": disabled, "$type": advancedType, children: caption })] }));
+            return (_jsxs(StyledAdvancedButton, { ref: ref, "$width": width ?? '90px', "$height": height ?? '30px', onMouseOver: () => !disabled && setIsHovered(true), onMouseOut: () => setIsHovered(false), "$isDisabled": disabled, "$isPrimaryOutline": advancedType === 'primary' && (advancedColor === 'primaryOutline' || color === 'primaryOutline'), onClick: () => !disabled && onClick?.(), onMouseDown: (e) => !disabled && onMouseDown?.(e), children: [_jsx(StyledAdvancedButtonIcon, { "$color": advancedColor, "$isVisible": isHovered, "$isDisabled": disabled, "$type": advancedType, children: icon }), _jsx(StyledAdvancedButtonText, { "$color": advancedColor, "$isDisabled": disabled, "$type": advancedType, children: caption })] }));
         }
         else {
-            return (_jsx(StyledTextButton, { ref: ref, color: color, caption: caption, disabled: disabled, fontSize: fontSize, onClick: onClick, children: caption }));
+            return (_jsx(StyledTextButton, { ref: ref, color: color, caption: caption, disabled: disabled, fontSize: fontSize, onClick: onClick, onMouseDown: (e) => !disabled && onMouseDown?.(e), children: caption }));
         }
     };
     const renderTooltip = () => {

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

@@ -7,5 +7,5 @@ type TMCustomButtonProps = {
     selectedItems?: Array<any>;
     onClose?: () => void;
 };
-declare const TMCustomButton: (props: TMCustomButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const TMCustomButton: (props: TMCustomButtonProps) => false | import("react/jsx-runtime").JSX.Element;
 export default TMCustomButton;

package/lib/components/base/TMCustomButton.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { SDK_Globals } from '@topconsultnpm/sdk-ts';
 import { useEffect, useRef, useState, useMemo } from 'react';
 import TMModal from './TMModal';
 import styled from 'styled-components';
-import { TMLayoutWaitingContainer } from '../..';
-import { processButtonAttributes, processSelectedItems } from '../../helper/dcmtsHelper';
+import { SDKUI_Localizator, TMLayoutWaitingContainer } from '../..';
+import { getButtonAttributes, getSelectedItem } from '../../helper/dcmtsHelper';
 const IframeContainer = styled.div `
   display: flex;
   height: 100%;
@@ -19,15 +18,14 @@ const TMCustomButton = (props) => {
     const { button, isModal = true, formData, selectedItems, onClose } = props;
     const { appName: scriptUrl, arguments: args } = button;
     const iframeRef = useRef(null);
-    const attributes = useMemo(() => processButtonAttributes(args, formData), [args, formData]);
-    const selectedItemsProcessed = useMemo(() => processSelectedItems(selectedItems), [selectedItems]);
+    const attributes = useMemo(() => getButtonAttributes(args, formData, selectedItems), [args, formData, selectedItems]);
     const RunOnce = button.mode === "RunOnce";
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(false);
-    const selectedItemsCount = selectedItems?.length || 1;
+    const selectedItemsCount = selectedItems?.length || 0;
     // Stati per il wait panel
-    const [showWaitPanel, setShowWaitPanel] = useState(true);
-    const [waitPanelText, setWaitPanelText] = useState("Esecuzione azione 1/" + selectedItemsCount.toString());
+    const [showWaitPanel, setShowWaitPanel] = useState(selectedItemsCount > 0 && !RunOnce);
+    const [waitPanelText, setWaitPanelText] = useState(SDKUI_Localizator.CustomButtonActions.replaceParams(1, selectedItemsCount));
     const [waitPanelValue, setWaitPanelValue] = useState(0);
     const [waitPanelMaxValue, setWaitPanelMaxValue] = useState(selectedItemsCount);
     const [abortController, setAbortController] = useState(undefined);
@@ -48,23 +46,21 @@ const TMCustomButton = (props) => {
         setError(true);
     };
     const executeSequentially = async (controller) => {
-        if (!selectedItemsProcessed)
+        if (!selectedItems)
             return;
-        const processedItems = selectedItemsProcessed.length === 0 ? [...selectedItemsProcessed, attributes] : selectedItemsProcessed;
-        for (const [index, item] of processedItems.entries()) {
+        for (const [index, item] of selectedItems.entries()) {
             if (controller.signal.aborted)
                 break;
-            setWaitPanelText("Esecuzione azione " + (index + 1).toString() + "/" + selectedItemsCount.toString());
+            setWaitPanelText(SDKUI_Localizator.CustomButtonActions.replaceParams(index + 1, selectedItemsCount));
             setWaitPanelValue(index);
             // Attendi che l'iframe sia pronto e invia il messaggio
             await new Promise((resolve) => {
                 const checkIframe = setInterval(() => {
                     if (iframeRef.current?.contentWindow) {
                         clearInterval(checkIframe);
-                        iframeRef.current.contentWindow.postMessage({
-                            "options": item,
-                            "session": SDK_Globals.tmSession
-                        }, targetOrigin);
+                        //devo convertire item in formData
+                        const processedItem = getSelectedItem(args, formData, item);
+                        postMessageIframe(processedItem);
                         // Attendi prima di passare al prossimo
                         setTimeout(() => {
                             setWaitPanelValue(index + 1);
@@ -77,12 +73,17 @@ const TMCustomButton = (props) => {
         setShowWaitPanel(false);
         onClose?.();
     };
+    const postMessageIframe = (data) => {
+        console.log("TMCustomButton - postMessageIframe - data:", data);
+        if (iframeRef.current?.contentWindow) {
+            iframeRef.current.contentWindow.postMessage({ "options": data }, targetOrigin);
+        }
+    };
     useEffect(() => {
         if (loading || error)
             return;
         //if(error) clearTimeout(timeoutIframe);
-        console.log("TMCustomButton - useEffect - loading:", loading, " error:", error, " RunOnce:", RunOnce);
-        if (!RunOnce) {
+        if (!RunOnce && selectedItemsCount > 0) {
             // esegui per ogni item selezionato
             const controller = new AbortController();
             controller.signal.addEventListener('abort', () => {
@@ -93,13 +94,15 @@ const TMCustomButton = (props) => {
             setWaitPanelMaxValue(selectedItemsCount);
             executeSequentially(controller);
         }
-        else if (iframeRef.current?.contentWindow) {
+        else {
             // Modalità RunOnce: invia dati all'iframe quando è caricato
-            const mergedAttributes = { ...attributes, selectedItems: selectedItemsProcessed };
-            iframeRef.current.contentWindow.postMessage({
-                "options": mergedAttributes,
-                "session": SDK_Globals.tmSession
-            }, targetOrigin);
+            postMessageIframe(attributes);
+            if (!RunOnce) {
+                //chiudo l'iframe dopo 2 secondi
+                setTimeout(() => {
+                    onClose?.();
+                }, 2000);
+            }
             //clearTimeout(timeoutIframe);
         }
     }, [loading, error, RunOnce]);
@@ -110,7 +113,6 @@ const TMCustomButton = (props) => {
         }
     }, []);
     const iframeContent = (_jsxs(IframeContainer, { style: !RunOnce ? { visibility: 'hidden' } : {}, children: [error && _jsx("div", { children: "Si \u00E8 verificato un errore nel caricamento del contenuto." }), !error && _jsx(StyledIframe, { ref: iframeRef, loading: 'lazy', onLoad: handleLoad, onError: handleError, src: scriptUrl })] }));
-    return isModal && RunOnce ? (_jsx(TMModal, { title: button.title, width: '60%', height: '70%', resizable: true, onClose: onClose, children: iframeContent })) : !RunOnce && showWaitPanel ? (_jsxs(_Fragment, { children: [_jsx(TMLayoutWaitingContainer, { showWaitPanel: true, waitPanelTitle: "Operazione in corso", showWaitPanelPrimary: true, waitPanelTextPrimary: waitPanelText, waitPanelValuePrimary: waitPanelValue, waitPanelMaxValuePrimary: waitPanelMaxValue, showWaitPanelSecondary: false, isCancelable: true, abortController: abortController, children: undefined }), iframeContent] }))
-        : null;
+    return isModal && RunOnce ? (_jsx(TMModal, { title: button.title, width: '60%', height: '70%', resizable: true, expandable: true, onClose: onClose, children: iframeContent })) : !RunOnce && (_jsxs(_Fragment, { children: [_jsx(TMLayoutWaitingContainer, { showWaitPanel: showWaitPanel, waitPanelTitle: SDKUI_Localizator.CustomButtonAction, showWaitPanelPrimary: true, waitPanelTextPrimary: waitPanelText, waitPanelValuePrimary: waitPanelValue, waitPanelMaxValuePrimary: waitPanelMaxValue, showWaitPanelSecondary: false, isCancelable: true, abortController: abortController, children: undefined }), iframeContent] }));
 };
 export default TMCustomButton;

package/lib/components/base/TMFileManagerDataGridView.js

@@ -96,6 +96,6 @@ const TMFileManagerDataGridView = (props) => {
             { dataField: "creationTime", caption: SDKUI_Localizator.CreationTime, dataType: 'datetime', format: 'dd/MM/yyyy HH:mm', cellRender: cellDatetimeRender },
         ];
     }, [searchText]);
-    return _jsx(TMDataGrid, { dataSource: items ?? [], dataColumns: dataColumns, focusedRowKey: focusedRowKey, selectedRowKeys: selectedRowKeys, onFocusedRowChanged: onFocusedRowChanged, onSelectionChanged: onSelectionChanged, onCellDblClick: onCellDblClick, onContextMenuPreparing: onContextMenuPreparing, showSearchPanel: false, noDataText: SDKUI_Localizator.FolderIsEmpty });
+    return _jsx(TMDataGrid, { dataSource: items ?? [], dataColumns: dataColumns, focusedRowKey: focusedRowKey, selectedRowKeys: selectedRowKeys, onFocusedRowChanged: onFocusedRowChanged, onSelectionChanged: onSelectionChanged, onCellDblClick: onCellDblClick, onContextMenuPreparing: onContextMenuPreparing, showSearchPanel: false, noDataText: SDKUI_Localizator.FolderIsEmpty }, items.length);
 };
 export default TMFileManagerDataGridView;

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

@@ -8,9 +8,11 @@ interface ITMModal {
     fontSize?: string;
     isModal?: boolean;
     resizable?: boolean;
+    expandable?: boolean;
     onClose?: () => void;
     hidePopup?: boolean;
     askClosingConfirm?: boolean;
+    showCloseButton?: boolean;
 }
 declare const TMModal: React.FC<ITMModal>;
 export default TMModal;

package/lib/components/base/TMModal.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { Popup } from 'devextreme-react';
 import styled from 'styled-components';
 import TMLayoutContainer, { TMCard, TMLayoutItem } from './TMLayout';
 import { FontSize, TMColors } from '../../utils/theme';
+import { IconWindowMaximize, IconWindowMinimize, svgToString } from '../../helper';
 const StyledModal = styled.div `
     width: ${props => props.$width};
     height: ${props => props.$height};
@@ -38,11 +39,46 @@ const StyledModalContext = styled.div `
     overflow: auto;
     height: 100%;
 `;
-const TMModal = ({ resizable = true, isModal = true, title = '', toolbar, onClose, children, width = '100%', height = '100%', fontSize = FontSize.defaultFontSize, hidePopup = true, askClosingConfirm = false }) => {
+const TMModal = ({ resizable = true, expandable = false, isModal = true, title = '', toolbar, onClose, children, width = '100%', height = '100%', fontSize = FontSize.defaultFontSize, hidePopup = true, askClosingConfirm = false, showCloseButton = true }) => {
+    const popupRef = useRef(null);
     const [initialWidth, setInitialWidth] = useState(width);
     const [initialHeight, setInitialHeight] = useState(height);
     const [showPopup, setShowPopup] = useState(false);
     const [isResizing, setIsResizing] = useState(false);
+    const [isFullScreen, setIsFullScreen] = useState(false);
+    // Dimensioni minime di default per il popup
+    const DEFAULT_MIN_WIDTH = 500;
+    const DEFAULT_MIN_HEIGHT = 400;
+    const [minWidth, setMinWidth] = useState(0);
+    const [minHeight, setMinHeight] = useState(0);
+    /**
+     * Gestore chiamato quando il popup viene mostrato.
+     * Calcola e imposta le dimensioni minime del popup in base allo spazio disponibile.
+     * Le dimensioni minime sono il valore più piccolo tra le dimensioni effettive del parent e le dimensioni minime di default
+     */
+    const handleShown = () => {
+        // Usa requestAnimationFrame per attendere il completamento del rendering
+        requestAnimationFrame(() => {
+            if (popupRef.current && popupRef.current.instance) {
+                const instance = popupRef.current.instance();
+                if (instance) {
+                    // Ottiene l'elemento content del popup
+                    const element = instance.content();
+                    if (element) {
+                        const parentElement = element.parentElement;
+                        if (parentElement) {
+                            // Legge le dimensioni effettive del contenitore parent
+                            const widthPx = parentElement.offsetWidth;
+                            const heightPx = parentElement.offsetHeight;
+                            // Imposta le dimensioni minime usando il valore più piccolo tra le dimensioni disponibili e quelle di default
+                            setMinWidth(widthPx < DEFAULT_MIN_WIDTH ? widthPx : DEFAULT_MIN_WIDTH);
+                            setMinHeight(heightPx < DEFAULT_MIN_HEIGHT ? heightPx : DEFAULT_MIN_HEIGHT);
+                        }
+                    }
+                }
+            }
+        });
+    };
     useEffect(() => {
         setShowPopup(isModal);
     }, [isModal]);
@@ -65,6 +101,15 @@ const TMModal = ({ resizable = true, isModal = true, title = '', toolbar, onClos
             setShowPopup(false);
         onClose && onClose();
     };
-    return (_jsx(_Fragment, { children: isModal ? (_jsx(Popup, { showCloseButton: true, animation: undefined, maxHeight: '95%', maxWidth: '95%', dragEnabled: !isResizing, resizeEnabled: resizable, width: initialWidth, height: initialHeight, title: title, visible: showPopup, onResizeStart: handleResizeStart, onResizeEnd: handleResizeEnd, onHiding: onHiding, children: _jsxs(TMLayoutContainer, { children: [toolbar && (_jsx(TMLayoutItem, { height: "40px", children: _jsx(StyledModalToolbar, { children: toolbar }) })), _jsx(TMLayoutItem, { height: toolbar ? 'calc(100% - 50px)' : 'calc(100% - 10px)', children: _jsx(TMCard, { showBorder: false, padding: false, scrollY: true, children: children }) })] }) })) : (_jsxs(StyledModal, { "$isModal": isModal, className: "temp-modal", "$fontSize": fontSize, "$width": initialWidth, "$height": initialHeight, children: [toolbar ? _jsx(StyledModalToolbar, { children: toolbar }) : _jsx(_Fragment, {}), _jsx(StyledModalContext, { children: children })] })) }));
+    return (_jsx(_Fragment, { children: isModal ? (_jsx(Popup, { ref: popupRef, showCloseButton: showCloseButton, animation: undefined, minWidth: minWidth, minHeight: minHeight, maxHeight: '95%', maxWidth: '95%', dragEnabled: !isResizing, resizeEnabled: resizable, width: expandable && isFullScreen ? '95%' : initialWidth, height: expandable && isFullScreen ? '95%' : initialHeight, title: title, visible: showPopup, onShown: handleShown, onResizeStart: handleResizeStart, onResizeEnd: handleResizeEnd, onHiding: onHiding, toolbarItems: expandable ? [
+                {
+                    widget: 'dxButton',
+                    location: 'after',
+                    options: {
+                        icon: isFullScreen ? svgToString(_jsx(IconWindowMinimize, {})) : svgToString(_jsx(IconWindowMaximize, {})),
+                        onClick: () => setIsFullScreen(!isFullScreen)
+                    }
+                }
+            ] : undefined, children: _jsxs(TMLayoutContainer, { children: [toolbar && (_jsx(TMLayoutItem, { height: "40px", children: _jsx(StyledModalToolbar, { children: toolbar }) })), _jsx(TMLayoutItem, { height: toolbar ? 'calc(100% - 40px)' : '100%', children: _jsx(TMCard, { showBorder: false, padding: false, scrollY: true, children: children }) })] }) })) : (_jsxs(StyledModal, { "$isModal": isModal, className: "temp-modal", "$fontSize": fontSize, "$width": initialWidth, "$height": initialHeight, children: [toolbar ? _jsx(StyledModalToolbar, { children: toolbar }) : _jsx(_Fragment, {}), _jsx(StyledModalContext, { children: children })] })) }));
 };
 export default TMModal;

package/lib/components/base/TMPopUp.js

@@ -33,7 +33,8 @@ const StyledExeptionToolbar = styled.div `
     background-color: white;
 `;
 const StyledMessageToolbar = styled.div `
-    position: relative;
+    position: sticky;
+    bottom: 0;
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
@@ -95,6 +96,7 @@ const ResponsiveMessageContainer = styled.div `
     height: 100%;
     width: 100%;
     background-color: #ffffff;
+    overflow: hidden;
 `;
 const ResponsiveMessageContent = styled.div `
     flex: 1;
@@ -105,6 +107,7 @@ const ResponsiveMessageContent = styled.div `
     gap: clamp(8px, 2vw, 20px);
     padding: clamp(8px, 3vw, 25px) clamp(5px, 2vw, 30px);
     min-height: clamp(80px, 15vh, 120px);
+    overflow: auto;
     
     @media (min-width: 300px) {
         flex-direction: ${props => props.$isMobile ? 'column' : 'row'};

package/lib/components/base/TMWaitPanel.js

@@ -33,8 +33,14 @@ 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) => {
-    let progressValue1 = 100 * (((props.valuePrimary ?? 0) / (props.maxValuePrimary ?? 0)) || 0);
-    let progressValue2 = 100 * (((props.valueSecondary ?? 0) / (props.maxValueSecondary ?? 0)) || 0);
+    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 })] }) }));

package/lib/components/choosers/TMDataListItemChooser.js

@@ -33,7 +33,7 @@ export const TMDataListItemChooserForm = (props) => {
         if (!props.dataListId)
             return [];
         if (refreshCache)
-            DataListCacheService.RemoveAll();
+            DataListCacheService.Remove();
         TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.DataList} ...` });
         let dataList = await DataListCacheService.GetAsync(props.dataListId);
         TMSpinner.hide();

package/lib/components/choosers/TMMetadataChooser.js

@@ -59,6 +59,7 @@ export const TMMetadataChooserForm = ({ tmSession, tids, qd, filterMetadata, qdS
                     dtd.init({ ...dtds[i] });
                     const alias = tids?.[i].alias ?? '';
                     dtd.customData2 = alias;
+                    let mds;
                     if (!qdShowOnlySelectItems) {
                         dtd.metadata?.forEach((md) => {
                             const mdWithKey = md;
@@ -66,6 +67,7 @@ export const TMMetadataChooserForm = ({ tmSession, tids, qd, filterMetadata, qdS
                             mdWithKey.customData2 = alias;
                             mdWithKey.uniqueKey = `${dtd.id}_${md.id}_${alias}`;
                         });
+                        mds = filterMetadata ? dtd.metadata?.filter(filterMetadata) : dtd.metadata;
                     }
                     else {
                         let newMetadata = dtd.metadata?.filter(o => qd.select?.some(s => s.tid == dtd.id && s.mid == o.id && ((s.alias ?? '') == alias)));
@@ -75,8 +77,8 @@ export const TMMetadataChooserForm = ({ tmSession, tids, qd, filterMetadata, qdS
                             mdWithKey.customData2 = alias;
                             mdWithKey.uniqueKey = `${dtd.id}_${md.id}_${alias}`;
                         });
+                        mds = filterMetadata ? newMetadata?.filter(filterMetadata) : newMetadata;
                     }
-                    let mds = filterMetadata ? dtd.metadata?.filter(filterMetadata) : dtd.metadata;
                     dtdList.push({ ...dtd, metadata: mds });
                 }
             }

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

@@ -14,6 +14,8 @@ interface ITMUserChooserProps extends ITMChooserProps {
     hideShowId?: boolean;
     /** Initial value for showChooser */
     initialShowChooser?: boolean;
+    /** Allow showing all users with toggle button */
+    allowShowAllUsers?: boolean;
 }
 declare const TMUserChooser: React.FunctionComponent<ITMUserChooserProps>;
 export default TMUserChooser;
@@ -24,6 +26,8 @@ interface ITMUserChooserFormProps extends ITMChooserFormProps<UserDescriptor> {
     hideRefresh?: boolean;
     /** Nascondi pulsante mostra ID */
     hideShowId?: boolean;
+    /** Allow showing all users with toggle button */
+    allowShowAllUsers?: boolean;
 }
 export declare const TMUserChooserForm: React.FunctionComponent<ITMUserChooserFormProps>;
 export declare const TMUserIdViewer: ({ userId, showIcon, noneSelectionText }: {

package/lib/components/choosers/TMUserChooser.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { OwnershipLevels, SDK_Localizator, UserLevels, UserListCacheService } from '@topconsultnpm/sdk-ts';
-import { SDKUI_Localizator, IconSearch, IconUserLevelMember, IconUserLevelAdministrator, IconUserLevelSystemAdministrator, IconUserLevelAutonomousAdministrator, IconWarning, LocalizeOwnershipLevels, LocalizeUserLevels } from '../../helper';
+import { SDKUI_Localizator, IconSearch, IconUserLevelMember, IconUserLevelAdministrator, IconUserLevelSystemAdministrator, IconUserLevelAutonomousAdministrator, IconWarning, LocalizeOwnershipLevels, LocalizeUserLevels, IconShowAllUsersOff, IconShowAllUsers } from '../../helper';
 import { StyledDivHorizontal, StyledTooltipContainer, StyledTooltipSeparatorItem } from '../base/Styled';
 import TMSpinner from '../base/TMSpinner';
 import TMTooltip from '../base/TMTooltip';
@@ -9,7 +9,8 @@ import TMSummary from '../editors/TMSummary';
 import TMChooserForm from '../forms/TMChooserForm';
 import { TMColors } from '../../utils/theme';
 import { TMExceptionBoxManager } from '../base/TMPopUp';
-const TMUserChooser = ({ labelColor, titleForm, filter, readOnly = false, icon, width, dataSource, backgroundColor, openChooserBySingleClick, buttons = [], disabled = false, showBorder = true, hideRefresh = false, hideShowId = false, elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, validationItems = [], onValueChanged, showClearButton, initialShowChooser = false }) => {
+import TMButton from '../base/TMButton';
+const TMUserChooser = ({ labelColor, titleForm, filter, readOnly = false, icon, width, dataSource, backgroundColor, openChooserBySingleClick, buttons = [], disabled = false, showBorder = true, hideRefresh = false, hideShowId = false, elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, validationItems = [], onValueChanged, showClearButton, initialShowChooser = false, allowShowAllUsers = false }) => {
     const [showChooser, setShowChooser] = useState(initialShowChooser);
     useEffect(() => {
         setShowChooser(initialShowChooser);
@@ -20,13 +21,15 @@ const TMUserChooser = ({ labelColor, titleForm, filter, readOnly = false, icon,
         return (_jsxs(StyledDivHorizontal, { style: { minWidth: '125px', color: isPlaceholder ? '#a9a9a9' : 'inherit' }, children: [values && values.length > 0 && _jsx(TMUserIdViewer, { userId: values?.[0], showIcon: true, noneSelectionText: '' }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }));
     };
     return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { ref: summaryInputRef, width: width, disabled: disabled, placeHolder: placeHolder, readOnly: readOnly, labelColor: labelColor, icon: icon, backgroundColor: backgroundColor, buttons: buttons, showBorder: showBorder, hasValue: values && values.length > 0, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => !readOnly && setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, openEditorOnSummaryClick: openChooserBySingleClick, label: label, template: renderTemplate(), onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
-                _jsx(TMUserChooserForm, { title: titleForm, allowMultipleSelection: allowMultipleSelection, hasShowOnlySelectedItems: true, dataSource: dataSource, filter: filter, selectedIDs: values, hideRefresh: hideRefresh, hideShowId: hideShowId, onClose: () => {
+                _jsx(TMUserChooserForm, { title: titleForm, allowMultipleSelection: allowMultipleSelection, hasShowOnlySelectedItems: true, dataSource: dataSource, filter: filter, selectedIDs: values, hideRefresh: hideRefresh, hideShowId: hideShowId, allowShowAllUsers: allowShowAllUsers, onClose: () => {
                         setShowChooser(false);
                         summaryInputRef.current?.focus();
                     }, onChoose: (IDs) => { onValueChanged?.(IDs); } })] }));
 };
 export default TMUserChooser;
-export const TMUserChooserForm = ({ allowMultipleSelection, columns, hideRefresh = false, hideShowId = false, startWithShowOnlySelectedItems = true, filter, title, hasShowOnlySelectedItems, width, height, selectedIDs, dataSource, onClose, onChoose }) => {
+export const TMUserChooserForm = ({ allowMultipleSelection, columns, hideRefresh = false, hideShowId = false, startWithShowOnlySelectedItems = true, filter, title, hasShowOnlySelectedItems, width, height, selectedIDs, dataSource, onClose, onChoose, allowShowAllUsers = false }) => {
+    const [currentDataSource, setCurrentDataSource] = useState(dataSource);
+    const [showingAllUsers, setShowingAllUsers] = useState(false);
     const dataColumns = useMemo(() => {
         return [
             { dataField: 'domain', caption: SDKUI_Localizator.Domain, dataType: 'string' },
@@ -42,6 +45,18 @@ export const TMUserChooserForm = ({ allowMultipleSelection, columns, hideRefresh
         TMSpinner.hide();
         return users;
     };
+    const handleToggleAllUsers = () => {
+        if (showingAllUsers) {
+            // Torna indietro: ripristina il dataSource originale
+            setCurrentDataSource(dataSource);
+            setShowingAllUsers(false);
+        }
+        else {
+            // Mostra tutti: rimuove il dataSource per usare getItems
+            setCurrentDataSource(undefined);
+            setShowingAllUsers(true);
+        }
+    };
     const getTitle = () => {
         let title = SDK_Localizator.Users;
         if (title)
@@ -49,7 +64,8 @@ export const TMUserChooserForm = ({ allowMultipleSelection, columns, hideRefresh
         return title;
     };
     const cellRenderIcon = (data) => _jsx(TMUserIcon, { ud: data.data });
-    return (_jsx(TMChooserForm, { title: getTitle(), allowMultipleSelection: allowMultipleSelection, startWithShowOnlySelectedItems: startWithShowOnlySelectedItems, hasShowOnlySelectedItems: hasShowOnlySelectedItems, width: width, height: height, manageUseLocalizedName: false, columns: columns ?? dataColumns, showDefaultColumns: false, selectedIDs: selectedIDs, cellRenderIcon: cellRenderIcon, dataSource: dataSource, getItems: getItems, hasShowId: !hideShowId, hideRefresh: hideRefresh, onClose: onClose, onChoose: (IDs) => onChoose?.(IDs) }));
+    const customButton = (allowShowAllUsers && dataSource) ? (_jsx(TMButton, { btnStyle: 'toolbar', caption: showingAllUsers ? SDKUI_Localizator.HideAll : SDKUI_Localizator.ShowAll, onClick: handleToggleAllUsers, icon: showingAllUsers ? _jsx(IconShowAllUsersOff, {}) : _jsx(IconShowAllUsers, {}) })) : undefined;
+    return (_jsx(TMChooserForm, { title: getTitle(), allowMultipleSelection: allowMultipleSelection, startWithShowOnlySelectedItems: startWithShowOnlySelectedItems, hasShowOnlySelectedItems: hasShowOnlySelectedItems, width: width, height: height, manageUseLocalizedName: false, columns: columns ?? dataColumns, showDefaultColumns: false, selectedIDs: selectedIDs, cellRenderIcon: cellRenderIcon, dataSource: currentDataSource, getItems: getItems, hasShowId: !hideShowId, hideRefresh: hideRefresh, customButtons: customButton, onClose: onClose, onChoose: (IDs) => onChoose?.(IDs) }));
 };
 export const TMUserIdViewer = ({ userId, showIcon = false, noneSelectionText = `<${SDKUI_Localizator.NoneSelection}>` }) => {
     const [ud, setUd] = useState();

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

@@ -12,6 +12,7 @@ interface ITMTextArea extends ITMEditorBase {
     rows?: number;
     maxLength?: number;
     resize?: boolean;
+    autoCalculateRows?: boolean;
 }
 declare const TMTextArea: React.FunctionComponent<ITMTextArea>;
 export default TMTextArea;

package/lib/components/editors/TMTextArea.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from 'react';
 import { StyledEditorContainer, StyledEditorIcon, StyledEditorLabel, StyledTextareaEditor } from './TMEditorStyled';
 import { FontSize, TMColors } from '../../utils/theme';
@@ -8,8 +8,10 @@ import TMLayoutContainer, { TMLayoutItem } from '../base/TMLayout';
 import TMVilViewer from '../base/TMVilViewer';
 import TMTooltip from '../base/TMTooltip';
 import { DeviceType, useDeviceType } from '../base/TMDeviceProvider';
-import { IconClearButton } from '../../helper';
+import { IconClearButton, IconDataList, SDKUI_Localizator } from '../../helper';
 import styled from 'styled-components';
+import { FormulaItemHelper } from './TMTextExpression';
+import TMChooserForm from '../forms/TMChooserForm';
 const StyledTextAreaEditorButton = styled.div `
     color: ${TMColors.button_icon};
     display: flex;
@@ -26,7 +28,7 @@ const StyledTextAreaEditorButton = styled.div `
 // Define the TMTextArea component
 const TMTextArea = (props) => {
     // Extract properties from the props object
-    const { label = '', value = '', width = '100%', height = 'auto', autoFocus = false, showClearButton, validationItems = [], disabled = false, isModifiedWhen = false, fontSize = FontSize.defaultFontSize, elementStyle = {}, icon = null, labelPosition = 'left', readOnly = false, onValueChanged, onBlur, placeHolder, formulaItems = [], buttons = [], maxHeight = 'auto', rows, maxLength, resize = true } = props;
+    const { label = '', value = '', width = '100%', height = 'auto', autoFocus = false, showClearButton, validationItems = [], disabled = false, isModifiedWhen = false, fontSize = FontSize.defaultFontSize, elementStyle = {}, icon = null, labelPosition = 'left', readOnly = false, onValueChanged, onBlur, placeHolder, formulaItems = [], buttons = [], maxHeight = 'auto', rows, maxLength, resize = true, autoCalculateRows = true } = props;
     // Reference to the textarea DOM element
     const inputRef = useRef(null);
     // Stores the textarea is focused
@@ -37,11 +39,15 @@ const TMTextArea = (props) => {
     const [formulaMenuItems, setFormulaMenuItems] = useState([]);
     // Stores the calculated number of rows for the textarea
     const [calculatedRows, setCalculatedRows] = useState(rows ?? 1);
+    //Show chooserForm formulaItems
+    const [showFormulaItemsChooser, setShowFormulaItemsChooser] = useState(false);
     // Manages the state for the custom context menu
     const { clicked, setClicked, points, setPoints } = useContextMenu();
     const deviceType = useDeviceType();
     // Attach a `ResizeObserver` to the textarea to monitor changes in width: dynamically updates rows based on textarea content and width
     useEffect(() => {
+        if (!autoCalculateRows)
+            return;
         const observer = new ResizeObserver(() => { if (currentValue) {
             updateRows();
         } });
@@ -51,18 +57,18 @@ const TMTextArea = (props) => {
         return () => { if (inputRef.current) {
             observer.unobserve(inputRef.current);
         } };
-    }, [currentValue]);
+    }, [currentValue, autoCalculateRows]);
     // Update current value whenever the `value` prop changes, synchronize the internal state with the `value` prop
     useEffect(() => {
         setCurrentValue(value);
     }, [value]);
     // Recalculate the number of rows whenever the `currentValue` changes
     useEffect(() => {
-        if (currentValue) {
+        if (autoCalculateRows && currentValue) {
             const newRowCount = calculateRows(currentValue);
             setCalculatedRows(newRowCount);
         }
-    }, [currentValue]);
+    }, [currentValue, autoCalculateRows]);
     // Populate the formula menu items whenever the `formulaItems` prop changes
     useEffect(() => {
         if (formulaItems && formulaItems.length > 0) {
@@ -73,6 +79,30 @@ const TMTextArea = (props) => {
             setFormulaMenuItems(menuItems);
         }
     }, [formulaItems]);
+    function getFormulaDataSorce() {
+        let fiarray = [];
+        if (!formulaItems)
+            return [];
+        let i = 0;
+        for (const f of formulaItems) {
+            let fi = new FormulaItemHelper();
+            fi.id = i;
+            fi.paramName = f;
+            fiarray.push(fi);
+            i++;
+        }
+        return fiarray;
+    }
+    const openFormulaItemsChooser = () => {
+        return (showFormulaItemsChooser ?
+            _jsx(TMChooserForm, { title: SDKUI_Localizator.Parameters, height: '350', width: '300', hasShowId: false, showDefaultColumns: false, allowMultipleSelection: true, columns: [
+                    { dataField: 'paramName', caption: SDKUI_Localizator.Name, dataType: 'string', sortOrder: 'asc', alignment: 'left' }
+                ], dataSource: getFormulaDataSorce(), onClose: () => { setShowFormulaItemsChooser(false); }, onChoose: (IDs) => {
+                    let expr = value?.toString() ?? '';
+                    IDs.map(i => expr += formulaItems[i]);
+                    onValueChanged?.({ target: { value: expr } });
+                } }) : _jsx(_Fragment, {}));
+    };
     // Adjust the rows dynamically
     const updateRows = () => {
         const newRowCount = calculateRows(currentValue);
@@ -136,15 +166,19 @@ const TMTextArea = (props) => {
                         const y = e.clientY - bounds.top;
                         // set the x and y coordinates of our users right click
                         setPoints({ x, y });
-                    }, "$isMobile": deviceType === DeviceType.MOBILE, "$maxHeight": maxHeight, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, "$fontSize": fontSize, "$width": width, "$resize": resize }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', position: 'absolute', right: '6px', top: label.length > 0 ? '22px' : '7px', pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? 0.4 : 1 }, children: [showClearButton && currentValue &&
+                    }, "$isMobile": deviceType === DeviceType.MOBILE, "$maxHeight": maxHeight, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, "$fontSize": fontSize, "$width": width, "$resize": resize }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', position: 'absolute', right: '6px', top: label.length > 0 ? '22px' : '7px', pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? 0.4 : 1 }, children: [formulaItems.length > 0 &&
+                            _jsx(StyledTextAreaEditorButton, { onClick: () => {
+                                    setShowFormulaItemsChooser(true);
+                                }, children: _jsx(IconDataList, {}) }), showClearButton && currentValue &&
                             _jsx(StyledTextAreaEditorButton, { onClick: () => {
                                     onValueChanged?.({ target: { value: undefined } });
                                     setCurrentValue('');
-                                    setCalculatedRows(1);
+                                    if (autoCalculateRows)
+                                        setCalculatedRows(1);
                                     onBlur?.(undefined);
                                 }, children: _jsx(IconClearButton, {}) }), buttons.map((buttonItem, index) => {
                             return (_jsx(StyledTextAreaEditorButton, { onClick: buttonItem.onClick, children: _jsx(TMTooltip, { content: buttonItem.text, children: buttonItem.icon }) }, buttonItem.text));
-                        })] }), formulaItems.length > 0 && clicked && (_jsx(TMContextMenu, { menuData: formulaMenuItems, top: points.y, left: points.x, onMenuItemClick: (formula) => insertText(formula) })), _jsx(TMVilViewer, { vil: validationItems })] });
+                        })] }), openFormulaItemsChooser(), formulaItems.length > 0 && clicked && (_jsx(TMContextMenu, { menuData: formulaMenuItems, top: points.y, left: points.x, onMenuItemClick: (formula) => insertText(formula) })), _jsx(TMVilViewer, { vil: validationItems })] });
     };
     // Layout for the textarea with a left-aligned label
     const renderedLeftLabelTextArea = () => {