@topconsultnpm/sdkui-react 6.20.0-dev1.13 → 6.20.0-dev1.130

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import styled from "styled-components";
-import { AccessLevels, DcmtTypeListCacheService, LayoutGroupBorderStyles, LayoutGroupOrientations, LayoutItemTypes, LayoutModes, MetadataDataDomains, MetadataDataTypes, SDK_Globals, SystemMIDsAsNumber, SystemTIDs, TemplateTIDs, WorkItemMetadataNames } from '@topconsultnpm/sdk-ts';
-import { IconUndo, IconPencil, IconFunction, IconMenuVertical, IconDataList, SDKUI_Localizator, IconNull, stringIsNullOrEmpty, deepCompare, SDKUI_Globals, IconDcmtTypeSys } from "../../helper";
+import { AccessLevels, DcmtTypeListCacheService, LayoutGroupBorderStyles, LayoutGroupOrientations, LayoutItemTypes, LayoutModes, MetadataDataDomains, MetadataDataTypes, SDK_Globals, SystemMIDsAsNumber, SystemTIDs, WorkItemMetadataNames } from '@topconsultnpm/sdk-ts';
+import { IconUndo, IconPencil, IconFunction, IconMenuVertical, IconDataList, SDKUI_Localizator, IconNull, stringIsNullOrEmpty, deepCompare, SDKUI_Globals, IconDcmtTypeSys, isApprovalWorkflowView } from "../../helper";
 import { TMColors } from "../../utils/theme";
 import TMButton from "../base/TMButton";
 import TMDropDownMenu from "../base/TMDropDownMenu";
@@ -27,7 +27,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();
@@ -280,7 +280,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 +298,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 = [];
@@ -389,17 +389,35 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
         return (_jsxs("div", { style: { width: '100%' }, children: [draftData.length > 0 && _jsx(TMAccordion, { title: SDKUI_Localizator.Draft, children: draftData.map(item => renderMetadataItem(item, isReadOnly)) }), checkOutData.length > 0 && _jsx(TMAccordion, { title: `${SDKUI_Localizator.CheckIn}/${SDKUI_Localizator.CheckOut}`, children: checkOutData.map(item => renderMetadataItem(item, true)) })] }));
     }, [metadataValues, showCheckBoxes, showNullValueCheckBoxes, isReadOnly, dynDataListsToBeRefreshed, validationItems, selectedMID, isOpenDistinctValues, openChooserBySingleClick, metadataValuesOrig]);
     const layoutChronology = useMemo(() => {
-        const chronologyData = [];
+        // Definiamo l'ordine desiderato: Version, Tipo, Dimensione, Autore, Data Ultima modifica
+        const desiredChronologyOrder = [
+            ChronologyMIDs.Ver,
+            SystemMIDsAsNumber.FileExt,
+            SystemMIDsAsNumber.FileSize,
+            ChronologyMIDs.AuthorID,
+            ChronologyMIDs.CheckInTime,
+        ];
+        const tempChronologyDataMap = {};
         metadataValues.forEach(item => {
             switch (item.md?.id) {
                 case ChronologyMIDs.Ver:
                 case ChronologyMIDs.AuthorID:
-                    chronologyData.push(item);
+                case ChronologyMIDs.CheckInTime:
+                case SystemMIDsAsNumber.FileExt:
+                case SystemMIDsAsNumber.FileSize:
+                    tempChronologyDataMap[item.md.id] = item;
                     break;
                 default:
                     break;
             }
         });
+        // Visualizziamo nell'ordine desiderato
+        const chronologyData = [];
+        desiredChronologyOrder.forEach(id => {
+            if (tempChronologyDataMap[id]) {
+                chronologyData.push(tempChronologyDataMap[id]);
+            }
+        });
         return (_jsx("div", { style: { width: '100%' }, children: chronologyData.length > 0 && chronologyData.map(item => renderMetadataItem(item, isReadOnly)) }));
     }, [metadataValues, showCheckBoxes, showNullValueCheckBoxes, isReadOnly, dynDataListsToBeRefreshed, validationItems, selectedMID, isOpenDistinctValues, openChooserBySingleClick, metadataValuesOrig]);
     const layoutDsAttachs = useMemo(() => {
@@ -550,7 +568,7 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
         if (allSystem) {
             return metadataValues.map((item) => renderMetadataItem(item, true));
         }
-        if (currentDTD?.templateTID === TemplateTIDs.WF_WIApprView && !isReadOnly) {
+        if (isApprovalWorkflowView(currentDTD) && !isReadOnly) {
             return layoutWorkItem;
         }
         switch (currentDTD?.id) {

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/TMTextArea.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useState, useEffect, useRef } from 'react';
 import { StyledEditorContainer, StyledEditorIcon, StyledEditorLabel, StyledTextareaEditor } from './TMEditorStyled';
 import { FontSize, TMColors } from '../../utils/theme';
-import TMContextMenu, { useContextMenu } from '../base/TMContextMenuOLD';
+import TMContextMenu from '../NewComponents/ContextMenu/TMContextMenu';
 import { TMExceptionBoxManager } from '../base/TMPopUp';
 import TMLayoutContainer, { TMLayoutItem } from '../base/TMLayout';
 import TMVilViewer from '../base/TMVilViewer';
@@ -35,14 +35,10 @@ const TMTextArea = (props) => {
     const [isFocused, setIsFocused] = useState(false);
     // Stores the current value of the textarea
     const [currentValue, setCurrentValue] = useState(value);
-    // Stores the items for the context menu
-    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(() => {
@@ -69,16 +65,15 @@ const TMTextArea = (props) => {
             setCalculatedRows(newRowCount);
         }
     }, [currentValue, autoCalculateRows]);
-    // Populate the formula menu items whenever the `formulaItems` prop changes
-    useEffect(() => {
-        if (formulaItems && formulaItems.length > 0) {
-            let menuItems = [];
-            for (const formula of formulaItems) {
-                menuItems.push({ text: formula });
-            }
-            setFormulaMenuItems(menuItems);
-        }
-    }, [formulaItems]);
+    // Build context menu items for formulas
+    const getFormulaMenuItems = () => {
+        if (!formulaItems || formulaItems.length === 0)
+            return [];
+        return formulaItems.map(formula => ({
+            name: formula,
+            onClick: () => insertText(formula)
+        }));
+    };
     function getFormulaDataSorce() {
         let fiarray = [];
         if (!formulaItems)
@@ -153,20 +148,8 @@ const TMTextArea = (props) => {
     };
     // Renders the textarea
     const renderTextArea = () => {
-        return _jsxs(_Fragment, { children: [_jsx(StyledTextareaEditor, { ref: inputRef, autoFocus: autoFocus, readOnly: readOnly, disabled: disabled, value: currentValue, placeholder: placeHolder, rows: calculatedRows, maxLength: maxLength, spellCheck: false, onFocus: () => setIsFocused(true), onBlur: (e) => { setIsFocused(false); if (currentValue != value)
-                        onBlur?.(currentValue); }, onChange: (e) => { setCurrentValue(e.target.value); onValueChanged?.(e); }, onContextMenu: (e) => {
-                        if (formulaItems.length <= 0)
-                            return;
-                        // prevent default right click behavior
-                        e.preventDefault();
-                        // set our click state to true when a user right clicks
-                        setClicked(true);
-                        const bounds = e.currentTarget.getBoundingClientRect();
-                        const x = e.clientX - bounds.left;
-                        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: calculatedRows === 1 ? (label.length > 0 ? '20px' : '7px') : (label.length > 0 ? '22px' : '7px'), pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? 0.4 : 1 }, children: [formulaItems.length > 0 &&
+        const textareaElement = _jsxs(_Fragment, { children: [_jsx(StyledTextareaEditor, { ref: inputRef, autoFocus: autoFocus, readOnly: readOnly, disabled: disabled, value: currentValue, placeholder: placeHolder, rows: calculatedRows, maxLength: maxLength, spellCheck: false, onFocus: () => setIsFocused(true), onBlur: (e) => { setIsFocused(false); if (currentValue != value)
+                        onBlur?.(currentValue); }, onChange: (e) => { setCurrentValue(e.target.value); onValueChanged?.(e); }, "$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: calculatedRows === 1 ? (label.length > 0 ? '20px' : '7px') : (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 &&
@@ -178,7 +161,12 @@ const TMTextArea = (props) => {
                                     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));
-                        })] }), openFormulaItemsChooser(), formulaItems.length > 0 && clicked && (_jsx(TMContextMenu, { menuData: formulaMenuItems, top: points.y, left: points.x, onMenuItemClick: (formula) => insertText(formula) })), _jsx(TMVilViewer, { vil: validationItems })] });
+                        })] }), openFormulaItemsChooser(), _jsx(TMVilViewer, { vil: validationItems })] });
+        // Wrap with context menu if formula items exist
+        if (formulaItems.length > 0) {
+            return (_jsx(TMContextMenu, { items: getFormulaMenuItems(), trigger: "right", children: textareaElement }));
+        }
+        return textareaElement;
     };
     // Layout for the textarea with a left-aligned label
     const renderedLeftLabelTextArea = () => {

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

@@ -9,7 +9,7 @@ import { TMExceptionBoxManager } from '../base/TMPopUp';
 import TMLayoutContainer, { TMLayoutItem } from '../base/TMLayout';
 import TMVilViewer from '../base/TMVilViewer';
 import TMTooltip from '../base/TMTooltip';
-import { ContextMenu } from 'devextreme-react';
+import TMContextMenu from '../NewComponents/ContextMenu/TMContextMenu';
 import { DeviceType, useDeviceType } from '../base/TMDeviceProvider';
 import TMChooserForm from '../forms/TMChooserForm';
 import { FormulaItemHelper } from './TMTextExpression';
@@ -94,7 +94,10 @@ const TMTextBox = ({ autoFocus, maxLength, labelColor, precision, fromModal = fa
         if (formulaItems && formulaItems.length > 0) {
             let menuItems = [];
             for (const formula of formulaItems) {
-                menuItems.push({ text: formula });
+                menuItems.push({
+                    name: formula,
+                    onClick: () => insertText(formula)
+                });
             }
             setFormulaMenuItems(menuItems);
         }
@@ -253,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);
@@ -269,7 +294,7 @@ const TMTextBox = ({ autoFocus, maxLength, labelColor, precision, fromModal = fa
                                         onBlur?.(undefined);
                                     }, children: _jsx(IconClearButton, {}) }), buttons.map((buttonItem, index) => {
                                 return (_jsx(StyledTextBoxEditorButton, { onClick: buttonItem.onClick, children: _jsx(TMTooltip, { content: buttonItem.text, children: buttonItem.icon }) }, buttonItem.text));
-                            })] }), openFormulaItemsChooser(), formulaItems.length > 0 && (_jsx(ContextMenu, { dataSource: formulaMenuItems, target: `#text-${id}`, onItemClick: (e) => { insertText(e.itemData?.text ?? ''); } })), _jsx(TMVilViewer, { vil: validationItems })] }));
+                            })] }), openFormulaItemsChooser(), formulaItems.length > 0 && (_jsx(TMContextMenu, { items: formulaMenuItems, target: `#text-${id}` })), _jsx(TMVilViewer, { vil: validationItems })] }));
     };
     const renderedLeftLabelTextBox = () => {
         return (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: _jsx(StyledEditorIcon, { "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { "$width": width, children: [label && _jsx(StyledEditorLabel, { "$color": labelColor, "$isFocused": isFocused, "$labelPosition": labelPosition, "$disabled": disabled, children: label }), renderInputField()] }) })] }));

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/archive/TMArchive.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useMemo, useState } from 'react';
 import Logo from '../../../assets/Toppy-generico.png';
 import { DcmtTypeListCacheService, LayoutModes, SDK_Localizator } from '@topconsultnpm/sdk-ts';
-import { IconTree, SDKUI_Globals, SDKUI_Localizator, IconRecentlyViewed, IconPreview, IconShow, IconBoard, IconDcmtTypeSys, removeMruTid } from '../../../helper';
+import { IconTree, SDKUI_Globals, SDKUI_Localizator, IconRecentlyViewed, IconPreview, IconShow, IconBoard, IconDcmtTypeSys, removeMruTid, getMoreInfoTasksForDocument } from '../../../helper';
 import { useDeviceType, DeviceType } from '../../base/TMDeviceProvider';
 import TMLayoutContainer from '../../base/TMLayout';
 import TMRecentsManager from '../../grids/TMRecentsManager';
@@ -77,7 +77,7 @@ const TMArchive = ({ onDcmtTypeSelect = undefined, inputTID, inputFile = null, c
                 if (onDcmtTypeSelect)
                     onDcmtTypeSelect(tidToUse);
                 passToSearch(tidToUse, outputMids);
-            } : undefined, isSharedDcmt: isSharedArchive, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }, currentTID)
+            } : undefined, isSharedDcmt: isSharedArchive, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, moreInfoTasks: getMoreInfoTasksForDocument(allTasks, currentTID, currentTID === inputTID ? inputDID : undefined) }, currentTID)
         :
             _jsx(TMPanel, { title: 'Archiviazione', allowMaximize: false, children: _jsxs(TMLayoutContainer, { gap: 30, alignItems: 'center', justifyContent: 'center', children: [_jsx(StyledToppyTextContainer, { children: _jsx(StyledToppyText, { children: SDKUI_Localizator.DcmtTypeSelect }) }), _jsx(StyledToppyImage, { src: Logo, alt: 'Toppy' })] }) }), [currentTID, deviceType, mruTIDs, inputFile, currentInputMids, enableDragDropOverlay, isSharedArchive, allTasks]);
     const allInitialPanelVisibility = {

package/lib/components/features/assistant/TMToppyDraggableHelpCenter.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface TMToppyDraggableHelpCenterProps {
+    /** Contenuto da visualizzare nella speech bubble */
+    content?: React.ReactNode;
+    /** Se true, renderizza Toppy nel document.body tramite Portal invece che nel parent */
+    usePortal?: boolean;
+    /** Allineamento iniziale del componente (destra o sinistra) */
+    align?: 'right' | 'left';
+    /** Visibilità del componente */
+    isVisible?: boolean;
+    /** Callback chiamato quando si clicca sull'immagine di Toppy */
+    onToppyImageClick?: () => void;
+}
+declare const TMToppyDraggableHelpCenter: (props: TMToppyDraggableHelpCenterProps) => import("react/jsx-runtime").JSX.Element;
+export default TMToppyDraggableHelpCenter;