@topconsultnpm/sdkui-react 6.20.0-dev1.99 → 6.20.0-dev2.10

package/lib/components/choosers/TMUserChooser.js

@@ -8,7 +8,7 @@ import TMSummary from '../editors/TMSummary';
 import TMChooserForm from '../forms/TMChooserForm';
 import TMButton from '../base/TMButton';
 import TMDataUserIdItemViewer from '../viewers/TMDataUserIdItemViewer';
-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 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, updateIsModalOpen }) => {
     const [showChooser, setShowChooser] = useState(initialShowChooser);
     useEffect(() => {
         setShowChooser(initialShowChooser);
@@ -18,10 +18,16 @@ const TMUserChooser = ({ labelColor, titleForm, filter, readOnly = false, icon,
         const isPlaceholder = values?.[0] === placeHolder;
         return (_jsxs(StyledDivHorizontal, { style: { minWidth: '125px', color: isPlaceholder ? '#a9a9a9' : 'inherit' }, children: [values && values.length > 0 && _jsx(TMDataUserIdItemViewer, { userId: values?.[0], showIcon: true }), 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 &&
+    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: () => {
+                    if (!readOnly) {
+                        setShowChooser(true);
+                        updateIsModalOpen?.(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, allowShowAllUsers: allowShowAllUsers, onClose: () => {
                         setShowChooser(false);
                         summaryInputRef.current?.focus();
+                        updateIsModalOpen?.(false);
                     }, onChoose: (IDs) => { onValueChanged?.(IDs); } })] }));
 };
 export default TMUserChooser;

package/lib/components/editors/TMCheckBox.js

@@ -16,6 +16,8 @@ const StyledCheckBoxLabel = styled.div `
     color: ${props => !props.$disabled ? props.$isModifiedWhen ? TMColors.isModified : props.$labelColor ? props.$labelColor : TMColors.text_normal : TMColors.disabled};
     font-size: ${props => props.$fontSize};
     user-select: none;
+    -webkit-touch-callout: none;
+  -webkit-user-select: none;
     &:focus{
         outline: none;
         background-image: linear-gradient(white, #E4E9F7);

package/lib/components/editors/TMDateBox.js

@@ -10,27 +10,36 @@ const TMDateBox = (props) => {
         let htmlElement = dateBoxRef?.current?.instance().element();
         if (!htmlElement)
             return;
-        let color = props.isModifiedWhen ? TMColors.tertiary : TMColors.border_normal;
+        let borderColor = props.isModifiedWhen ? TMColors.tertiary : TMColors.border_normal;
+        let textColor = props.isModifiedWhen ? TMColors.isModified : TMColors.text_normal;
         let inputContainer = htmlElement.getElementsByClassName("dx-texteditor-input-container")[0];
         if (inputContainer) {
             inputContainer.style.background = props.readOnly ? 'linear-gradient(white 20%, #d6d6d6 80%)' : '';
-            inputContainer.style.color = props.readOnly ? '#525252' : 'transparent';
+            inputContainer.style.color = props.readOnly ? '#525252' : textColor;
+        }
+        let input = htmlElement.querySelector(".dx-texteditor-input");
+        if (input) {
+            if (!props.readOnly) {
+                input.style.color = textColor;
+            }
+            input.style.fontSize = 'var(--base-font-size)';
+            input.style.fontFamily = 'var(--base-font-family)';
         }
         let label = htmlElement.getElementsByClassName("dx-label")[0];
         if (label) {
-            label.style.borderBottomColor = color;
+            label.style.borderBottomColor = borderColor;
         }
         let labelBefore = htmlElement.getElementsByClassName("dx-label-before")[0];
         if (labelBefore) {
-            labelBefore.style.borderBottomColor = color;
-            labelBefore.style.borderTopColor = color;
-            labelBefore.style.borderInlineStartColor = color;
+            labelBefore.style.borderBottomColor = borderColor;
+            labelBefore.style.borderTopColor = borderColor;
+            labelBefore.style.borderInlineStartColor = borderColor;
         }
         let labelAfter = htmlElement.getElementsByClassName("dx-label-after")[0];
         if (labelAfter) {
-            labelAfter.style.borderBottomColor = color;
-            labelAfter.style.borderTopColor = color;
-            labelAfter.style.borderInlineEndColor = color;
+            labelAfter.style.borderBottomColor = borderColor;
+            labelAfter.style.borderTopColor = borderColor;
+            labelAfter.style.borderInlineEndColor = borderColor;
         }
     }, [props.isModifiedWhen, props.readOnly]);
     const dateBoxRef = useRef(null);

package/lib/components/editors/TMEditorStyled.js

@@ -27,6 +27,9 @@ color: ${props => props.readOnly ? '#525252' : !props.$disabled ? (props.$vil.le
 border-radius: ${props => props.$borderRadius ?? TMEditorsDefaultBorderRadius};
 min-width: ${props => props.$isMobile && '70px'};
 background: ${props => props.readOnly ? 'linear-gradient(white 20%, #d6d6d6 80%)' : 'white'};
+overflow: hidden;
+text-overflow: ellipsis;
+white-space: nowrap;
 &:focus{
     outline: none;
     background-image: linear-gradient(white, #E4E9F7);
@@ -48,6 +51,8 @@ export const StyledEditorIcon = styled.div `
     margin-right: 2px;
     font-size: 18px;
     user-select: none;
+    -webkit-touch-callout: none;
+  -webkit-user-select: none;
     transform: translateY(18px);
 `;
 export const StyledEditorLabel = styled.div `
@@ -55,6 +60,8 @@ export const StyledEditorLabel = styled.div `
     color:${props => !props.$disabled ? props.$isFocused ? TMColors.primary : props.$color ? props.$color : TMColors.label_normal : TMColors.disabled};
     padding: 0 3px;
     user-select: none;
+    -webkit-touch-callout: none;
+  -webkit-user-select: none;
     transform: ${props => props.$labelPosition === 'left' && 'translateY(5px)'};
     width: max-content;
     transform: translate(10px, 6px);

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CultureIDs } from '@topconsultnpm/sdk-ts';
+import { CultureIDs, QueryDescriptor } from '@topconsultnpm/sdk-ts';
 import { ValidationItem } from '@topconsultnpm/sdk-ts';
 export declare const getCultureIDImg: (cultureID: CultureIDs) => any;
 interface TMLocalizedTextBoxProps {
@@ -13,6 +13,8 @@ interface TMLocalizedTextBoxProps {
     value_ES?: string;
     value_DE?: string;
     validationItems?: ValidationItem[];
+    qd?: QueryDescriptor;
+    tid?: number;
     onValueChanged: (lang: CultureIDs, value: string) => void;
 }
 declare const TMLocalizedTextBox: React.FC<TMLocalizedTextBoxProps>;

package/lib/components/editors/TMLocalizedTextBox.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import TMTextBox from './TMTextBox';
+import TMMetadataTextBox from './TMMetadataTextBox';
 import { IconLanguage, SDKUI_Localizator } from '../../helper';
 import { CultureIDs } from '@topconsultnpm/sdk-ts';
 import it from '../../assets/italy.svg';
@@ -13,11 +14,9 @@ import pt from '../../assets/portugal.svg';
 import { createPortal } from 'react-dom';
 const Portal = ({ children, popoverRef }) => {
     const mount = document.body;
-    // Usa un ref per l'elemento del portale per evitare di ricrearlo ad ogni render
     const elRef = useRef(document.createElement('div'));
     useEffect(() => {
         const el = elRef.current;
-        // Assegna il ref al div del portale
         el.ref = popoverRef;
         mount.appendChild(el);
         return () => {
@@ -33,7 +32,7 @@ const LocalizedContainer = styled.div `
 const Popover = styled.div `
   display: ${props => props.$isVisible ? 'flex' : 'none'};
   flex-direction: column;
-  position: fixed; /* Usa 'fixed' o 'absolute' a seconda del comportamento desiderato */
+  position: fixed;
   top: ${props => props.$top}px;
   left: ${props => props.$left}px;
   width: ${props => props.$width}px;
@@ -41,7 +40,7 @@ const Popover = styled.div `
   border-radius: 4px;
   background-color: #fff;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  z-index: 2000;
+  z-index: 1502;
   padding: 8px;
 `;
 const Badge = styled.span `
@@ -72,10 +71,10 @@ export const getCultureIDImg = (cultureID) => {
         default: return it;
     }
 };
-const TMLocalizedTextBox = ({ label, value, value_IT, value_EN, value_FR, value_PT, value_ES, value_DE, isModifiedWhen, validationItems, onValueChanged, }) => {
+const TMLocalizedTextBox = ({ label, value, value_IT, value_EN, value_FR, value_PT, value_ES, value_DE, isModifiedWhen, validationItems, qd, tid, onValueChanged, }) => {
     const [isPopoverVisible, setIsPopoverVisible] = useState(false);
-    const containerRef = useRef(null); // Riferimento al contenitore principale
-    const popoverRef = useRef(null); // Riferimento per il Popover
+    const containerRef = useRef(null);
+    const popoverRef = useRef(null);
     const [popoverPosition, setPopoverPosition] = useState({ top: 0, left: 0, width: 0 });
     const languages = [
         { code: CultureIDs.It_IT, label: 'Italiano', value: value_IT },
@@ -85,13 +84,12 @@ const TMLocalizedTextBox = ({ label, value, value_IT, value_EN, value_FR, value_
         { code: CultureIDs.Es_ES, label: 'Español', value: value_ES },
         { code: CultureIDs.De_DE, label: 'Deutsch', value: value_DE },
     ];
-    // Calcola il numero di lingue con valori non nulli o vuoti
     const localizedCount = languages.filter(lang => lang.value && lang.value.trim() !== '').length;
     const handleTogglePopover = () => {
         if (containerRef.current) {
             const rect = containerRef.current.getBoundingClientRect();
             setPopoverPosition({
-                top: rect.bottom, // Posiziona sotto l'input
+                top: rect.bottom,
                 left: rect.left,
                 width: rect.width
             });
@@ -99,19 +97,23 @@ const TMLocalizedTextBox = ({ label, value, value_IT, value_EN, value_FR, value_
         setIsPopoverVisible(prev => !prev);
     };
     const handleClosePopover = () => setIsPopoverVisible(false);
-    // Close popover when clicking outside
     useEffect(() => {
+        if (!isPopoverVisible)
+            return;
         const handleClickOutside = (event) => {
-            if (isPopoverVisible &&
-                containerRef.current &&
+            if (containerRef.current &&
                 !containerRef.current.contains(event.target) &&
                 popoverRef.current &&
                 !popoverRef.current.contains(event.target)) {
                 handleClosePopover();
             }
         };
-        document.addEventListener("mousedown", handleClickOutside);
+        // Ritarda l'aggiunta del listener per evitare che catturi il click di apertura
+        const timeoutId = setTimeout(() => {
+            document.addEventListener("mousedown", handleClickOutside);
+        }, 0);
         return () => {
+            clearTimeout(timeoutId);
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [isPopoverVisible]);
@@ -120,6 +122,6 @@ const TMLocalizedTextBox = ({ label, value, value_IT, value_EN, value_FR, value_
         icon: (_jsxs(IconContainer, { children: [_jsx(IconLanguage, {}), localizedCount > 0 && _jsx(Badge, { children: localizedCount })] })),
         onClick: handleTogglePopover,
     };
-    return (_jsxs(LocalizedContainer, { ref: containerRef, children: [_jsx(TMTextBox, { type: "text", label: label, value: value, isModifiedWhen: isModifiedWhen, buttons: [localizationButton], validationItems: validationItems, onValueChanged: (e) => onValueChanged(CultureIDs.None, e.target.value) }), isPopoverVisible && (_jsx(Portal, { popoverRef: popoverRef, children: _jsx(Popover, { ref: popoverRef, "$isVisible": isPopoverVisible, "$top": popoverPosition.top, "$left": popoverPosition.left, "$width": popoverPosition.width, onMouseDown: (e) => e.stopPropagation(), children: languages.map((lang) => (_jsx(TMTextBox, { label: `${lang.label}`, showClearButton: true, icon: _jsx("img", { src: getCultureIDImg(lang.code), alt: "Lang", width: 18, height: 18 }), value: lang.value || '', onValueChanged: (e) => onValueChanged(lang.code, e.target.value) }, lang.code))) }) }))] }));
+    return (_jsxs(LocalizedContainer, { ref: containerRef, children: [(qd || tid) ? (_jsx(TMMetadataTextBox, { type: "text", label: label, value: value, isModifiedWhen: isModifiedWhen, buttons: [localizationButton], validationItems: validationItems, qd: qd, tid: tid, onValueChanged: (e) => onValueChanged(CultureIDs.None, e.target.value) })) : (_jsx(TMTextBox, { type: "text", label: label, value: value, isModifiedWhen: isModifiedWhen, buttons: [localizationButton], validationItems: validationItems, onValueChanged: (e) => onValueChanged(CultureIDs.None, e.target.value) })), isPopoverVisible && (_jsx(Portal, { popoverRef: popoverRef, children: _jsx(Popover, { ref: popoverRef, "$isVisible": isPopoverVisible, "$top": popoverPosition.top, "$left": popoverPosition.left, "$width": popoverPosition.width, onMouseDown: (e) => e.stopPropagation(), children: languages.map((lang) => ((qd || tid) ? (_jsx(TMMetadataTextBox, { label: `${lang.label}`, showClearButton: true, icon: _jsx("img", { src: getCultureIDImg(lang.code), alt: "Lang", width: 18, height: 18 }), value: lang.value || '', qd: qd, tid: tid, onValueChanged: (e) => onValueChanged(lang.code, e.target.value) }, lang.code)) : (_jsx(TMTextBox, { label: `${lang.label}`, showClearButton: true, icon: _jsx("img", { src: getCultureIDImg(lang.code), alt: "Lang", width: 18, height: 18 }), value: lang.value || '', onValueChanged: (e) => onValueChanged(lang.code, e.target.value) }, lang.code)))) }) }))] }));
 };
 export default TMLocalizedTextBox;

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

@@ -23,6 +23,7 @@ interface ITMMetadataEditorProps {
     onValueChange?: (value: any) => void;
     onCascadeRefreshDynDataLists?: (dynDataListsToBeRefreshed: DynDataListsToBeRefreshed[]) => void;
     onCascadeUpdateMIDs?: (midsToBeUpdated: MIDsToBeUpdated[]) => void;
+    updateIsModalOpen?: (isOpen: boolean) => void;
 }
 declare const TMMetadataEditor: React.FC<ITMMetadataEditorProps>;
 export default TMMetadataEditor;

package/lib/components/editors/TMMetadataEditor.js

@@ -37,7 +37,7 @@ const getDateDisplayType = (format) => {
         default: return DateDisplayTypes.Date;
     }
 };
-const TMMetadataEditor = ({ isSelected = false, customLabel, isReadOnly, isLexProt, layoutMode, queryOperator, isEditable, isModifiedWhen = false, tid, mid, value, queryParamsDynDataList, containerElement, autoFocus, validationItems = [], disabled = false, openChooserBySingleClick = true, onValueChanged, onValueChange, onCascadeRefreshDynDataLists, onCascadeUpdateMIDs }) => {
+const TMMetadataEditor = ({ isSelected = false, customLabel, isReadOnly, isLexProt, layoutMode, queryOperator, isEditable, isModifiedWhen = false, tid, mid, value, queryParamsDynDataList, containerElement, autoFocus, validationItems = [], disabled = false, openChooserBySingleClick = true, onValueChanged, onValueChange, onCascadeRefreshDynDataLists, onCascadeUpdateMIDs, updateIsModalOpen }) => {
     const [md, setMd] = useState();
     useEffect(() => {
         // Passiamo did = undefined, perché è già in cache
@@ -84,21 +84,21 @@ const TMMetadataEditor = ({ isSelected = false, customLabel, isReadOnly, isLexPr
                     onValueChanged?.(undefined);
                 else
                     onValueChanged?.(IDs[0]);
-            } });
+            }, updateIsModalOpen: updateIsModalOpen });
     if (md?.dataDomain == MetadataDataDomains.DataList)
         return _jsx(TMDataListItemChooser, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', titleForm: md.nameLoc, readOnly: isReadOnlyResult, isModifiedWhen: isModifiedWhenInternal(), label: (modulesWithLabelTop || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, icon: showLabelTop ? icon : undefined, validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, backgroundColor: TMColors.default_background, dataListId: md.dataListID, openChooserBySingleClick: openChooserBySingleClick, allowMultipleSelection: multipleSelectionIsenabled, values: value?.split(',').map((item) => !item.startsWith("'") ? item : item.slice(1, -1)) ?? [], showClearButton: !isReadOnlyResult, onValueChanged: (IDs) => {
                 if (!IDs || IDs.length <= 0)
                     onValueChanged?.(undefined);
                 else
                     onValueChanged?.(IDs.join(","));
-            } });
+            }, updateIsModalOpen: updateIsModalOpen });
     if (md?.dataDomain == MetadataDataDomains.UserID)
         return _jsx(TMUserChooser, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', titleForm: md.nameLoc, readOnly: isReadOnlyResult, isModifiedWhen: isModifiedWhenInternal(), label: (modulesWithLabelTop || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, icon: showLabelTop ? icon : undefined, validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, openChooserBySingleClick: openChooserBySingleClick, backgroundColor: TMColors.default_background, showClearButton: !isReadOnlyResult, allowMultipleSelection: multipleSelectionIsenabled, values: value?.split(',').map((item) => !item.startsWith("'") ? Number(item) : Number(item.slice(1, -1))) ?? [], onValueChanged: (IDs) => {
                 if (!IDs || IDs.length <= 0)
                     onValueChanged?.(undefined);
                 else
                     onValueChanged?.(IDs.join(","));
-            } });
+            }, updateIsModalOpen: updateIsModalOpen });
     if (showAsText)
         return _jsx(TMTextBox, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', isModifiedWhen: isModifiedWhenInternal(), readOnly: isReadOnlyResult, label: (modulesWithLabelTop || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, icon: showLabelTop ? icon : undefined, validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, type: 'text', showClearButton: !isReadOnlyResult, maxLength: maxLength, autoFocus: autoFocus, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) });
     if (showAsNumber)

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { QueryDescriptor } from '@topconsultnpm/sdk-ts';
+import type { ITMTextBox } from './TMTextBox';
+interface ITMMetadataTextBox extends ITMTextBox {
+    qd?: QueryDescriptor;
+    tid?: number;
+}
+declare const TMMetadataTextBox: React.FC<ITMMetadataTextBox>;
+export default TMMetadataTextBox;

package/lib/components/editors/TMMetadataTextBox.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import TMTextBox from './TMTextBox';
+import TMContextMenu from '../NewComponents/ContextMenu/TMContextMenu';
+import { useMetadataExpression } from '../../hooks/useMetadataExpression';
+const TMMetadataTextBox = (props) => {
+    const { metadatas_Info_Source, Expression_IDs2Names, Expression_Names2IDs } = useMetadataExpression({
+        qd: props.qd,
+        tid: props.tid
+    });
+    const insertAtCursor = (textToInsert) => {
+        const currentValue = Expression_IDs2Names(props.value) || '';
+        let newValue = currentValue;
+        let cursorPosition = currentValue.length;
+        const activeElement = document.activeElement;
+        if (activeElement && activeElement.tagName === 'INPUT' && activeElement.selectionStart !== null) {
+            const start = activeElement.selectionStart || 0;
+            const end = activeElement.selectionEnd || 0;
+            newValue =
+                currentValue.substring(0, start) +
+                    textToInsert +
+                    currentValue.substring(end);
+            cursorPosition = start + textToInsert.length;
+        }
+        else {
+            newValue = currentValue + textToInsert;
+            cursorPosition = newValue.length;
+        }
+        const syntheticEvent = {
+            target: { value: Expression_Names2IDs(newValue) }
+        };
+        props.onValueChanged?.(syntheticEvent);
+        setTimeout(() => {
+            const activeElement = document.activeElement;
+            if (activeElement && activeElement.tagName === 'INPUT') {
+                activeElement.setSelectionRange(cursorPosition, cursorPosition);
+                activeElement.focus();
+            }
+        }, 0);
+    };
+    // Crea i menu items per il context menu
+    const contextMenuItems = useMemo(() => {
+        // Separa metadati di sistema (Mid < 100) da quelli normali
+        const systemMetadata = metadatas_Info_Source.filter(mh => mh.Mid < 100);
+        const normalMetadata = metadatas_Info_Source.filter(mh => mh.Mid >= 100);
+        const items = [];
+        // Aggiungi metadati normali
+        normalMetadata.forEach(mh => {
+            items.push({
+                name: mh.MetadataName,
+                onClick: () => insertAtCursor(`{@${mh.MetadataName}}`)
+            });
+        });
+        // Aggiungi sottomenu per metadati di sistema se presenti
+        if (systemMetadata.length > 0) {
+            items.push({
+                name: 'Metadati di sistema',
+                beginGroup: normalMetadata.length > 0, // Separatore se ci sono anche metadati normali
+                submenu: systemMetadata.map(mh => ({
+                    name: mh.MetadataName,
+                    onClick: () => insertAtCursor(`{@${mh.MetadataName}}`)
+                }))
+            });
+        }
+        return items;
+    }, [metadatas_Info_Source, props.value]);
+    const renderButtons = () => {
+        const customButtons = [];
+        // Aggiungi eventuali bottoni custom passati via props
+        if (props.buttons) {
+            customButtons.push(...props.buttons);
+        }
+        return customButtons;
+    };
+    const handleValueChanged = (e) => {
+        const syntheticEvent = {
+            ...e,
+            target: {
+                ...e.target,
+                value: Expression_Names2IDs(e.target.value) || ''
+            }
+        };
+        props.onValueChanged?.(syntheticEvent);
+    };
+    // Se non ci sono metadati (qd o tid non specificati), usa TMTextBox normale
+    if (!props.qd && !props.tid) {
+        return (_jsx(TMTextBox, { ...props, buttons: renderButtons(), value: Expression_IDs2Names(props.value) ?? '', onValueChanged: handleValueChanged }));
+    }
+    // Altrimenti, wrappa TMTextBox con TMContextMenu
+    return (_jsx(TMContextMenu, { items: contextMenuItems, trigger: "right", children: _jsx(TMTextBox, { ...props, buttons: renderButtons(), value: Expression_IDs2Names(props.value) ?? '', onValueChanged: handleValueChanged }) }));
+};
+export default TMMetadataTextBox;

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

@@ -41,6 +41,8 @@ interface ITMMetadataValuesProps extends DeviceContextProps {
     onAdvancedMenuClick?: (e: AdvancedMenuClickEventArgs) => void;
     onValueChanged?: (mid: MetadataValueDescriptorEx[]) => void;
     onFocusedItemChanged?: (mid: MetadataValueDescriptorEx | undefined) => void;
+    updateIsModalOpen?: (isOpen: boolean) => void;
+    isReadOnlyOrigin?: boolean;
 }
 declare const TMMetadataValues: React.FC<ITMMetadataValuesProps>;
 export default TMMetadataValues;

package/lib/components/editors/TMMetadataValues.js

@@ -14,6 +14,7 @@ import { ChronologyMIDs, DraftsMIDs, DSAttachsMIDs } from "../../ts";
 import { TMNothingToShow } from "../features/documents/TMDcmtPreview";
 import TMAccordion from "../base/TMAccordion";
 import TabPanel, { Item } from 'devextreme-react/tab-panel';
+import { TMExceptionBoxManager } from "../base/TMPopUp";
 export var ShowCheckBoxesMode;
 (function (ShowCheckBoxesMode) {
     ShowCheckBoxesMode[ShowCheckBoxesMode["Never"] = 0] = "Never";
@@ -27,7 +28,7 @@ export var AdvancedMenuButtons;
     AdvancedMenuButtons[AdvancedMenuButtons["FormulaEditor"] = 2] = "FormulaEditor";
     AdvancedMenuButtons[AdvancedMenuButtons["DistinctValues"] = 3] = "DistinctValues";
 })(AdvancedMenuButtons || (AdvancedMenuButtons = {}));
-const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerms = true, isReadOnly = false, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, customMenuItems = [], showNullValueCheckBoxes, isOpenDistinctValues = false, openChooserBySingleClick, selectedMID, onFocusedItemChanged, layoutMode = LayoutModes.Update, metadataValues = [], metadataValuesOrig = [], TID, onValueChanged, onAdvancedMenuClick, validationItems, inputMids = [], layout }) => {
+const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerms = true, isReadOnly = false, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, customMenuItems = [], showNullValueCheckBoxes, isOpenDistinctValues = false, openChooserBySingleClick, selectedMID, onFocusedItemChanged, layoutMode = LayoutModes.Update, metadataValues = [], metadataValuesOrig = [], TID, onValueChanged, onAdvancedMenuClick, validationItems, inputMids = [], layout, updateIsModalOpen, isReadOnlyOrigin = false }) => {
     const [dynDataListsToBeRefreshed, setDynDataListsToBeRefreshed] = useState([]);
     const [currentDTD, setCurrentDTD] = useState();
     const [isEditableList, addOrRemoveEditableList] = useMetadataEditableList();
@@ -165,7 +166,8 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
         if (!d)
             return;
         let toBeRefreshed = [];
-        let dynDlDataSource = await SDK_Globals.tmSession?.NewSearchEngine().GetDynDataListValuesAsync(tid, mid, layoutMode, qParams);
+        let dynDlDataSource = await SDK_Globals.tmSession?.NewSearchEngine().GetDynDataListValuesAsync(tid, mid, layoutMode, qParams)
+            .catch((err) => { TMExceptionBoxManager.show({ exception: err }); });
         if (!d.onValueChanged_DynDataListsToBeRefreshed)
             return;
         let row = dynDlDataSource?.dtdResult?.rows?.filter(o => o[d.selectItemForValue ?? 0] == value);
@@ -280,7 +282,7 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
                                     mdItem.value = item.value;
                             }
                             onValueChanged?.(newMetadata);
-                        } }), FormulaHelper.isFormula(item.value)
+                        }, updateIsModalOpen: updateIsModalOpen }), FormulaHelper.isFormula(item.value)
                         ? _jsx(IconFunction, { color: "#1a89d3", fontSize: 14, style: { position: "absolute", top: item.md?.dataType === MetadataDataTypes.DateTime ? '3px' : '5px', left: '14px' } })
                         : (isEditable(item.mid) || item.isEditable)
                             ? _jsx(IconPencil, { color: "#138603", fontSize: 14, style: { position: "absolute", top: item.md?.dataType === MetadataDataTypes.DateTime ? '3px' : '5px', left: '16px' } })
@@ -298,7 +300,7 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
                                     mvd.isSelected = !stringIsNullOrEmpty(mvd.value);
                             }
                             onValueChanged?.(newValues);
-                        } }) }), !isReadOnly && _jsx("div", { style: { marginTop: item.md?.dataType === MetadataDataTypes.DateTime ? '12px' : '18px' }, onClick: () => { handleMetadataValueSelection(item); }, children: _jsx(TMDropDownMenu, { backgroundColor: 'white', color: TMColors.button_icon, borderRadius: '3px', content: _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconMenuVertical, {}), showTooltip: false }), disabled: item.isLexProt === 1, items: getAdvancedMenuItems(item) }) })] }, item.mid)), [TID, showCheckBoxes, showNullValueCheckBoxes, isReadOnly, layoutMode, selectedMID, isOpenDistinctValues, openChooserBySingleClick, dynDataListsToBeRefreshed, metadataValues, metadataValuesOrig, validationItems, onValueChanged, handleMetadataValueSelection, getAdvancedMenuItems, onChangeHandler, editorValidationHandler, isEditable]);
+                        } }) }), (!isReadOnly && !isReadOnlyOrigin) && _jsx("div", { style: { marginTop: item.md?.dataType === MetadataDataTypes.DateTime ? '12px' : '18px' }, onClick: () => { handleMetadataValueSelection(item); }, children: _jsx(TMDropDownMenu, { backgroundColor: 'white', color: TMColors.button_icon, borderRadius: '3px', content: _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconMenuVertical, {}), showTooltip: false }), disabled: item.isLexProt === 1, items: getAdvancedMenuItems(item) }) })] }, item.mid)), [TID, showCheckBoxes, showNullValueCheckBoxes, isReadOnly, isReadOnlyOrigin, layoutMode, selectedMID, isOpenDistinctValues, openChooserBySingleClick, dynDataListsToBeRefreshed, metadataValues, metadataValuesOrig, validationItems, onValueChanged, handleMetadataValueSelection, getAdvancedMenuItems, onChangeHandler, editorValidationHandler, isEditable]);
     const layoutWorkItem = useMemo(() => {
         const workItemData = [];
         const technicalWorkItemData = [];

package/lib/components/editors/TMRadioButton.js

@@ -39,6 +39,8 @@ const StyledradioButtonLabel = styled.label `
     font-size: ${props => props.$fontSize};
     color: ${props => !props.$disabled ? props.$isModifiedWhen ? TMColors.isModified : TMColors.text_normal : TMColors.disabled};
     user-select: none;
+    -webkit-touch-callout: none;
+  -webkit-user-select: none;
     width: 100%;
     cursor: ${props => !props.$disabled && 'pointer'};
     &:focus{

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ITMEditorBase } from '../base/TMEditorBase';
 export type TextBoxType = 'text' | 'email' | 'password' | 'number' | 'secureText';
-interface ITMTextBox extends ITMEditorBase {
+export interface ITMTextBox extends ITMEditorBase {
     autoFocus?: boolean;
     formulaItems?: string[];
     maxValue?: number;

package/lib/components/editors/TMTextBox.js

@@ -256,13 +256,35 @@ const TMTextBox = ({ autoFocus, maxLength, labelColor, precision, fromModal = fa
                 ? bulletEntity.repeat(currentValue?.length ?? 0)
                 : currentValue ?? '')
             : currentValue ?? '';
+        // Calcola il padding-right necessario per evitare sovrapposizione con i bottoni
+        const calculateRightPadding = () => {
+            if (initialType === 'password')
+                return 10; // Solo l'icona show/hide password
+            let buttonCount = 0;
+            if (formulaItems.length > 0)
+                buttonCount++; // IconDataList
+            if (showClearButton && currentValue)
+                buttonCount++; // IconClearButton
+            buttonCount += buttons.length; // Custom buttons
+            if (currentType === 'number') {
+                // Per i number, non aggiungiamo padding-right perché le freccette native
+                // occupano già spazio. Se ci sono bottoni custom a sinistra delle freccette,
+                // il loro posizionamento assoluto (right: 25px) li gestisce correttamente
+                return 4; // Padding minimo
+            }
+            else {
+                // Per gli altri tipi, calcolo normale
+                const buttonWidth = 28;
+                return 6 + (buttonCount * buttonWidth) + 8;
+            }
+        };
         return (_jsxs("div", { style: { width: '100%', height: 'fit-content' }, id: `text-${id}`, children: [_jsx(StyledEditor, { ref: inputRef, id: `text-${label}-${id}`, name: label, autoFocus: autoFocus, readOnly: readOnly, type: currentType, disabled: disabled, value: displayedValue, width: width || '100%', placeholder: placeHolder, maxLength: maxLength, autoComplete: 'off', spellCheck: false, onFocus: () => setIsFocused(true), onBlur: (e) => { setIsFocused(false); if (currentValue != value)
                         onBlur?.(currentValue); }, onChange: handleInputChange, onKeyDown: (e) => {
                         if (currentType === 'number') {
                             if (!scale && (e.key == "." || e.key == ","))
                                 e.preventDefault();
                         }
-                    }, "$isMobile": deviceType === DeviceType.MOBILE, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, "$fontSize": fontSize, "$maxValue": maxValue, "$width": width, "$type": currentType, "$borderRadius": borderRadius }), (initialType === 'password' || initialType === 'secureText') && _jsx(StyledShowPasswordIcon, { onClick: toggleShowPassword, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: showPasswordIcon() }), initialType !== 'password' &&
+                    }, "$isMobile": deviceType === DeviceType.MOBILE, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, "$fontSize": fontSize, "$maxValue": maxValue, "$width": width, "$type": currentType, "$borderRadius": borderRadius, style: { paddingRight: `${calculateRightPadding()}px` } }), (initialType === 'password' || initialType === 'secureText') && _jsx(StyledShowPasswordIcon, { onClick: toggleShowPassword, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: showPasswordIcon() }), initialType !== 'password' &&
                     _jsxs("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', position: 'absolute', right: type === 'number' ? '25px' : '6px', top: label.length > 0 ? '20px' : '3px', pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? 0.4 : 1 }, children: [formulaItems.length > 0 &&
                                 _jsx(StyledTextBoxEditorButton, { onClick: () => {
                                         setShowFormulaItemsChooser(true);

package/lib/components/editors/TMTextExpression.js

@@ -1,96 +1,17 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from 'react';
-import { DcmtTypeListCacheService } from '@topconsultnpm/sdk-ts';
+import { useMemo, useState } from 'react';
 import { IconClear, IconColumns, SDKUI_Localizator, stringIsNullOrEmpty } from '../../helper';
-import { TMExceptionBoxManager } from '../base/TMPopUp';
 import { TMMetadataChooserForm } from '../choosers/TMMetadataChooser';
 import TMTextBox from './TMTextBox';
 import TMTextArea from './TMTextArea';
+import { useMetadataExpression } from '../../hooks/useMetadataExpression';
 const TMTextExpression = (props) => {
-    const [metadatas_Info_Source, setMetadatas_Info_Source] = useState([]);
+    const { metadatas_Info_Source, Expression_IDs2Names, Expression_Names2IDs } = useMetadataExpression({
+        qd: props.qd,
+        tid: props.tid
+    });
     const [showMetadataChooser, setShowMetadataChooser] = useState(false);
     const [showFormulaChooser, setShowFormulaChooser] = useState(false);
-    useEffect(() => { MetadataInfos_Source_Get_Async(); }, [props.qd]);
-    useEffect(() => { MetadataInfos_Source_GetByTID_Async(); }, [props.tid]);
-    async function MetadataInfos_Source_Get_Async() {
-        if (!props.qd?.select)
-            return;
-        let mhs_source = [];
-        try {
-            let dtd_source;
-            let md_source;
-            let tid_source = -1;
-            let si;
-            let sis = props.qd?.select?.slice();
-            sis = sis.slice().sort((a, b) => a.tid - b.tid);
-            for (si of sis) {
-                if (si.tid == undefined || si.mid == undefined)
-                    continue;
-                if (tid_source != si.tid) {
-                    dtd_source = await DcmtTypeListCacheService.GetAsync(si.tid, true);
-                    if (dtd_source == undefined)
-                        continue;
-                    tid_source = si.tid;
-                }
-                if (dtd_source?.metadata == undefined)
-                    continue;
-                md_source = dtd_source.metadata.find(o => o.id == si.mid);
-                if (md_source?.name == undefined)
-                    continue;
-                if (tid_source == undefined)
-                    continue;
-                mhs_source.push(new MetatadaHelper(si.mid, md_source.name));
-            }
-        }
-        catch (e) {
-            TMExceptionBoxManager.show({ exception: e, title: 'MetadataInfos_Source_Get_Async' });
-        }
-        setMetadatas_Info_Source(mhs_source);
-    }
-    async function MetadataInfos_Source_GetByTID_Async() {
-        if (!props.tid)
-            return;
-        let mhs_source = [];
-        try {
-            let dtd_source = await DcmtTypeListCacheService.GetAsync(props.tid, true);
-            if (dtd_source == undefined)
-                return;
-            if (dtd_source?.metadata == undefined)
-                return;
-            for (let md_source of dtd_source?.metadata) {
-                if (md_source?.name == undefined)
-                    continue;
-                if (md_source?.id == undefined)
-                    continue;
-                mhs_source.push(new MetatadaHelper(md_source.id, md_source.name));
-            }
-        }
-        catch (e) {
-            TMExceptionBoxManager.show({ exception: e, title: 'MetadataInfos_Source_GetByTID_Async' });
-        }
-        setMetadatas_Info_Source(mhs_source);
-    }
-    function Expression_IDs2Names(expression) {
-        if (expression == undefined)
-            return expression;
-        let temp = expression.slice();
-        let mh;
-        for (mh of metadatas_Info_Source) {
-            temp = temp.replaceAll(`{@${mh.Mid}}`, `{@${mh.MetadataName}}`);
-        }
-        temp = temp.replaceAll("{@1}", "{@DID}");
-        return temp;
-    }
-    function Expression_Names2IDs(expression) {
-        if (expression == undefined)
-            return expression;
-        let temp = expression.slice();
-        let mh;
-        for (mh of metadatas_Info_Source)
-            temp = temp.replaceAll(`{@${mh.MetadataName}}`, `{@${mh.Mid}}`);
-        temp = temp.replaceAll("{@DID}", "{@1}");
-        return temp;
-    }
     const renderButtons = () => {
         let buttons = [];
         if (props.qd || props.tid)
@@ -167,12 +88,6 @@ const TMTextExpression = (props) => {
                 :
                     _jsx(TMTextArea, { buttons: renderButtons(), formulaItems: props.formulaItems, isModifiedWhen: props.value != props.valueOrig, label: props.label, rows: props.rows, resize: false, placeHolder: props.placeHolder, value: Expression_IDs2Names(props.value) ?? '', validationItems: props.validationItems, onValueChanged: (e) => { props.onValueChanged?.(Expression_Names2IDs(e.target.value)); } }), openMetadataChooseForm(), " "] }));
 };
-class MetatadaHelper {
-    constructor(mid, metadataName) {
-        this.Mid = mid;
-        this.MetadataName = metadataName;
-    }
-}
 export class FormulaItemHelper {
     constructor() {
         this.id = 0;

package/lib/components/features/assistant/TMToppyDraggableHelpCenter.js

@@ -67,6 +67,8 @@ const TMToppyButton = styled.div.attrs((props) => ({
     padding: 0;
     outline: none;
     user-select: none;
+    -webkit-touch-callout: none;
+  -webkit-user-select: none;
     transition: background-color 0.3s ease, border 0.3s ease, border-radius 0.3s ease, box-shadow 0.3s ease, width 0.3s ease, height 0.3s ease;
     
     img {