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

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

@@ -7,17 +7,21 @@ export declare const FloatingContainer: import("styled-components/dist/types").I
     $x: number;
     $y: number;
     $orientation: "horizontal" | "vertical";
+    $verticalDirection: "down" | "up";
     $isDragging: boolean;
     $isConfigMode: boolean;
     $isConstrained?: boolean;
+    $isHidden?: boolean;
     $bgColor?: string;
 }>, {
     $x: number;
     $y: number;
     $orientation: "horizontal" | "vertical";
+    $verticalDirection: "down" | "up";
     $isDragging: boolean;
     $isConfigMode: boolean;
     $isConstrained?: boolean;
+    $isHidden?: boolean;
     $bgColor?: string;
 }>> & string;
 export declare const GripHandle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {

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

@@ -39,7 +39,9 @@ export const FloatingContainer = styled.div.attrs(props => ({
   position: ${props => props.$isConstrained ? 'absolute' : 'fixed'};
   z-index: ${props => props.$isConfigMode ? 9999 : 1500};
   display: flex;
-  flex-direction: ${props => props.$orientation === 'horizontal' ? 'row' : 'column'};
+  opacity: ${props => props.$isHidden ? 0 : 1};
+  pointer-events: ${props => props.$isHidden ? 'none' : 'auto'};
+  flex-direction: ${props => props.$orientation === 'horizontal' ? 'row' : (props.$verticalDirection === 'up' ? 'column-reverse' : 'column')};
   align-items: center;
   background: ${props => props.$bgColor || 'linear-gradient(135deg, #0071BC 0%, #1B1464 100%)'};
   border: 1px solid #667eea;
@@ -50,6 +52,8 @@ export const FloatingContainer = styled.div.attrs(props => ({
               0 6px 16px rgba(0, 0, 0, 0.2);
   cursor: ${props => props.$isDragging ? 'grabbing' : 'default'};
   user-select: none;
+  -webkit-touch-callout: none;
+    -webkit-user-select: none;
   animation: ${props => props.$isConfigMode && css `${shake} 0.3s ease-in-out`};
   transition: none;
 
@@ -136,7 +140,7 @@ export const ItemSeparator = styled.div `
   ` : `
     /* Normal mode: simple line with tight spacing */
     background: rgba(255, 255, 255, 0.25);
-    width: ${props.$orientation === 'horizontal' ? '1px' : '100%'};
+    width: ${props.$orientation === 'horizontal' ? '1px' : '20px'};
     height: ${props.$orientation === 'horizontal' ? '20px' : '1px'};
     margin: ${props.$orientation === 'horizontal' ? '0 2px' : '2px 0'};
   `}

package/lib/components/NewComponents/FloatingMenuBar/types.d.ts

@@ -16,11 +16,14 @@ export interface TMFloatingMenuBarProps {
     isConstrained?: boolean;
     defaultPosition?: Position;
     maxItems?: number;
-    contextMenuDefaultPinnedIds?: string[];
+    defaultPinnedItems?: string[];
     defaultOrientation?: 'horizontal' | 'vertical';
-    defaultItems?: TMFloatingMenuItem[];
-    disbaleConfigMode?: boolean;
+    fixedItems?: TMFloatingMenuItem[];
+    enableConfigMode?: boolean;
     bgColor?: string;
+    hasContextMenu?: boolean;
+    pinnedItemIds?: string[];
+    onPinChange?: (pinnedIds: string[]) => void;
 }
 export interface Position {
     x: number;
@@ -29,8 +32,8 @@ export interface Position {
 export interface TMFloatingMenuBarState {
     position: Position;
     isDragging: boolean;
-    isConfigMode: boolean;
     orientation: 'horizontal' | 'vertical';
+    verticalDirection: 'down' | 'up';
     items: TMFloatingMenuItem[];
     draggedItemIndex: number | null;
 }

package/lib/components/base/TMButton.js

@@ -61,6 +61,8 @@ const StyledIconButton = styled.button.withConfig({ shouldForwardProp: prop => !
   background-color: transparent;
   color: ${props => !props.disabled ? getColor(props.color) : 'rgb(180, 180, 180)'};
   user-select: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
 `;
 const StyledTextButton = styled.button.withConfig({ shouldForwardProp: prop => !['text'].includes(prop) }) `
   font-size: ${props => props.fontSize};
@@ -79,6 +81,8 @@ const StyledTextButton = styled.button.withConfig({ shouldForwardProp: prop => !
   background-color: transparent;
   color: ${props => !props.disabled ? getColor(props.color) : 'rgb(231, 231, 231)'};
   user-select: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
   transition: ease 200ms;
   &:hover {
     background-color: rgb(241, 241, 241);
@@ -118,6 +122,8 @@ const StyledAdvancedButton = styled.button `
     overflow: hidden;
     color: ${({ $isPrimaryOutline }) => $isPrimaryOutline ? TMColors.primaryColor : 'white'};
     user-select: none;
+    -webkit-touch-callout: none;
+  -webkit-user-select: none;
     border: ${({ $isPrimaryOutline }) => $isPrimaryOutline ? `1px solid ${TMColors.primaryColor}` : 'none'};
     background: ${({ $isPrimaryOutline }) => $isPrimaryOutline ? 'white' : 'unset'};
 `;

package/lib/components/base/TMClosableList.js

@@ -49,6 +49,8 @@ const StyledClosabelIcon = styled.div `
     justify-content: flex-start;
     padding: 2px;
     user-select: none;
+    -webkit-touch-callout: none;
+  -webkit-user-select: none;
 `;
 const StyledClosableItemsCount = styled.div `
     /* color: ${Colors.primary}; */
@@ -56,6 +58,8 @@ const StyledClosableItemsCount = styled.div `
     cursor: pointer;
     margin-right: 5px;
     user-select: none;
+    -webkit-touch-callout: none;
+  -webkit-user-select: none;
 `;
 const TMClosableList = ({ dataSource, visibility = false, label, inline = false, hasPadding = true }) => {
     const [status, setStatus] = useState(visibility);

package/lib/components/base/TMDropDownMenu.js

@@ -12,6 +12,8 @@ const StyledContent = styled.div `
     opacity: ${props => props.$disabled ? 0.4 : 1};
     pointer-events: ${props => props.$disabled ? 'none' : ''};
     user-select: none;
+    -webkit-touch-callout: none;
+  -webkit-user-select: none;
     display: flex;
     align-items: center;
 

package/lib/components/base/TMListView.js

@@ -246,7 +246,7 @@ const TMListView = ({ customGroupingHeaders, headerBackGroundColor, header, show
                     onClick: () => { setOrderedBy(key); setShowOrderOptions(false); setOrderMenuVisible(false); },
                     icon: _jsx(IconColumns, { fontSize: 16 }),
                     name: key,
-                    rightIcon: key === orderedBy ? _jsx(IconApply, { fontSize: 14, color: 'gray' }) : undefined
+                    rightIconProps: key === orderedBy ? { icon: _jsx(IconApply, { fontSize: 14, color: 'gray' }) } : undefined
                 });
             }
         }

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

@@ -13,7 +13,7 @@ export interface ITMPanelProps {
     backgroundColorContainer?: string;
     children?: React.ReactNode;
     showHeader?: boolean;
-    title?: string;
+    title?: React.ReactNode;
     displayedItemsCount?: number;
     totalItems?: number;
     toolbar?: any;

package/lib/components/base/TMPanel.js

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

package/lib/components/base/TMPopUp.js

@@ -31,6 +31,8 @@ const StyledExeptionToolbar = styled.div `
     gap: 5px;
     padding: 5px;
     user-select: none;
+    -webkit-touch-callout: none;
+  -webkit-user-select: none;
     border-top: 1px solid #f3f3f3;
     /* background-color: ${TMColors.primary_container}; */
     background-color: white;
@@ -45,6 +47,8 @@ const StyledMessageToolbar = styled.div `
     gap: clamp(2px, 1vw, 5px);
     padding: clamp(3px, 1vw, 5px);
     user-select: none;
+    -webkit-touch-callout: none;
+  -webkit-user-select: none;
     border-top: 1px solid #f3f3f3;
     background-color: #ffffff;
     z-index: 1;
@@ -69,6 +73,8 @@ const TabContextContainer = styled.div `
     border-radius: 5px;
     overflow: auto;
     user-select: none;
+    -webkit-touch-callout: none;
+  -webkit-user-select: none;
     position: relative;
 `;
 const StyledAppVersionText = styled.p `

package/lib/components/base/TMToolbarCard.js

@@ -42,6 +42,8 @@ const StyledSearchCardContent = styled.div `
     
     position: relative;
     user-select: none;
+    -webkit-touch-callout: none;
+  -webkit-user-select: none;
 `;
 const TMToolbarCard = ({ items = [], onItemClick, selectedItem, showPanel, color = TMColors.colorHeader, backgroundColor = TMColors.backgroundColorHeader, backgroundColorContainer, children, showHeader = true, title, totalItems, displayedItemsCount, toolbar, padding = '3px', onBack, onClose, onHeaderDoubleClick }) => {
     return (_jsxs(StyledSearchCard, { children: [showHeader && _jsx(StyledSearchCardHeader, { "$backgroundColor": backgroundColor, "$color": color, onDoubleClick: () => { if (onHeaderDoubleClick)

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

@@ -22,10 +22,11 @@ interface ITMTreeViewProps<T extends ITMTreeItem> {
     onNodeUpdate?: (updatedNode: T) => void;
     onDataChanged?: (items: T[]) => void;
     shouldDelayFocusOnEvent?: (node: T, event: React.MouseEvent) => boolean;
+    autoSelectChildren?: boolean;
     itemsPerPage?: number;
     showLoadMoreButton?: boolean;
 }
-declare const TMTreeView: <T extends ITMTreeItem>({ dataSource, focusedItem, selectedItems, allowMultipleSelection, onDataChanged, calculateItemsForNode, itemRender, onNodeUpdate, onFocusedItemChanged, onSelectionChanged, shouldDelayFocusOnEvent, itemsPerPage, showLoadMoreButton }: ITMTreeViewProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const TMTreeView: <T extends ITMTreeItem>({ dataSource, focusedItem, selectedItems, allowMultipleSelection, onDataChanged, calculateItemsForNode, itemRender, onNodeUpdate, onFocusedItemChanged, onSelectionChanged, shouldDelayFocusOnEvent, autoSelectChildren, itemsPerPage, showLoadMoreButton }: ITMTreeViewProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default TMTreeView;
 export declare const StyledTreeNode: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $isSelected?: boolean;

package/lib/components/base/TMTreeView.js

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import { IconChevronDown, IconChevronRight } from '../../helper';
 import TMButton from './TMButton';
-const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMultipleSelection, onDataChanged, calculateItemsForNode, itemRender, onNodeUpdate, onFocusedItemChanged, onSelectionChanged, shouldDelayFocusOnEvent, itemsPerPage = 100, showLoadMoreButton = true }) => {
+const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMultipleSelection, onDataChanged, calculateItemsForNode, itemRender, onNodeUpdate, onFocusedItemChanged, onSelectionChanged, shouldDelayFocusOnEvent, autoSelectChildren = true, itemsPerPage = 100, showLoadMoreButton = true }) => {
     useEffect(() => {
         const handleKeyDown = (event) => {
             if (!focusedItem)
@@ -187,47 +187,51 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
         };
         let newSelectedItems;
         if (checked) {
-            if (node.isContainer) {
-                // Quando selezioni un container, aggiungi il container stesso + tutti i figli
+            if (node.isContainer && autoSelectChildren) {
+                // Quando selezioni un container, aggiungi il container stesso + tutti i figli (se autoSelectChildren è true)
                 const allChildren = flattenTree(node.items || []);
                 newSelectedItems = [...selectedItems, node, ...allChildren];
             }
             else if (!selectedItems.some(item => item.key === node.key)) {
-                // Quando selezioni un figlio, aggiungi il figlio
+                // Quando selezioni un figlio o un container con autoSelectChildren=false, aggiungi solo il nodo
                 newSelectedItems = [...selectedItems, node];
-                // Verifica se selezionando questo figlio sono ora selezionati tutti i figli del parent
-                const parentsToAdd = findAndCheckParents(dataSource, node, newSelectedItems);
-                newSelectedItems = [...newSelectedItems, ...parentsToAdd];
+                // Verifica se selezionando questo figlio sono ora selezionati tutti i figli del parent (solo se autoSelectChildren è true)
+                if (autoSelectChildren) {
+                    const parentsToAdd = findAndCheckParents(dataSource, node, newSelectedItems);
+                    newSelectedItems = [...newSelectedItems, ...parentsToAdd];
+                }
             }
             else {
                 newSelectedItems = selectedItems;
             }
         }
-        else if (node.isContainer) {
-            // Quando deselezioni un container, rimuovi il container stesso + tutti i figli
+        else if (node.isContainer && autoSelectChildren) {
+            // Quando deselezioni un container, rimuovi il container stesso + tutti i figli (solo se autoSelectChildren è true)
             const childKeys = flattenTree(node.items || []).map(item => item.key);
             newSelectedItems = selectedItems.filter(item => item.key !== node.key && !childKeys.includes(item.key));
         }
         else {
-            // Quando deselezioni un figlio, rimuovi il figlio
+            // Quando deselezioni un figlio o un container con autoSelectChildren=false, rimuovi solo il nodo
             newSelectedItems = selectedItems.filter(item => item.key !== node.key);
-            // Se il figlio apparteneva a un parent che era selezionato, rimuovi anche il parent
-            const removeParentContainers = (items) => {
-                const parentsToRemove = [];
-                items.forEach(item => {
-                    if (item.isContainer && item.items) {
-                        const childKeys = flattenTree(item.items).map(child => child.key);
-                        if (childKeys.includes(node.key)) {
-                            parentsToRemove.push(item.key);
+            // Se il figlio apparteneva a un parent che era selezionato, rimuovi anche il parent (solo se autoSelectChildren è true)
+            if (autoSelectChildren && !node.isContainer) {
+                const removeParentContainers = (items) => {
+                    const parentsToRemove = [];
+                    items.forEach(item => {
+                        if (item.isContainer && item.items) {
+                            const childKeys = flattenTree(item.items).map(child => child.key);
+                            if (childKeys.includes(node.key)) {
+                                parentsToRemove.push(item.key);
+                            }
+                            // Ricorsione per parent annidati
+                            parentsToRemove.push(...removeParentContainers(item.items));
                         }
-                        // Ricorsione per parent annidati
-                        parentsToRemove.push(...removeParentContainers(item.items));
-                    }
-                });
-                return parentsToRemove;
-            };
-            const parentsToRemove = removeParentContainers(dataSource);
-            newSelectedItems = newSelectedItems.filter(item => !parentsToRemove.includes(item.key));
+                    });
+                    return parentsToRemove;
+                };
+                const parentsToRemove = removeParentContainers(dataSource);
+                newSelectedItems = newSelectedItems.filter(item => !parentsToRemove.includes(item.key));
+            }
         }
         onSelectionChanged?.(newSelectedItems);
     };
@@ -252,6 +256,9 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
     // 	setTreeData(prevData => collapseAll(prevData));
     // };
     const isIndeterminate = (node) => {
+        // Lo stato indeterminate ha senso solo quando autoSelectChildren è true
+        if (!autoSelectChildren)
+            return false;
         if (!node.isContainer || !node.items)
             return false;
         const childKeys = flattenTree(node.items).map(item => item.key);

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

@@ -8,6 +8,8 @@ interface ITMDataListItemChooserProps extends ITMChooserProps {
     values?: string[];
     /** Visualizza il bordo  */
     showBorder?: boolean;
+    /** Funzione per aggiornare lo stato di apertura della modale */
+    updateIsModalOpen?: (isOpen: boolean) => void;
 }
 declare const TMDataListItemChooser: React.FunctionComponent<ITMDataListItemChooserProps>;
 export default TMDataListItemChooser;

package/lib/components/choosers/TMDataListItemChooser.js

@@ -7,17 +7,23 @@ import TMSpinner from '../base/TMSpinner';
 import TMSummary from '../editors/TMSummary';
 import TMChooserForm from '../forms/TMChooserForm';
 import TMDataListItemViewer from '../viewers/TMDataListItemViewer';
-const TMDataListItemChooser = ({ labelColor, width = '100%', dataListId, icon, backgroundColor, showBorder = true, readOnly, openChooserBySingleClick, buttons = [], elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, titleForm, showClearButton = false, validationItems = [], onValueChanged }) => {
+const TMDataListItemChooser = ({ labelColor, width = '100%', dataListId, icon, backgroundColor, showBorder = true, readOnly, openChooserBySingleClick, buttons = [], elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, titleForm, showClearButton = false, validationItems = [], onValueChanged, updateIsModalOpen }) => {
     const [showChooser, setShowChooser] = useState(false);
     const renderTemplate = () => {
         const isPlaceholder = values?.[0] === placeHolder;
         return (_jsxs(StyledDivHorizontal, { style: { width: '100%', color: isPlaceholder ? '#a9a9a9' : 'inherit' }, children: [values && values.length > 0 && _jsx(TMDataListItemViewer, { dataListId: dataListId, value: values?.[0] }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }));
     };
     const summaryInputRef = useRef(null);
-    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { ref: summaryInputRef, placeHolder: placeHolder, labelColor: labelColor, width: width, icon: icon, buttons: buttons, readOnly: readOnly, backgroundColor: backgroundColor, showBorder: showBorder, hasValue: values && values.length > 0, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => !readOnly && setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, label: label, openEditorOnSummaryClick: openChooserBySingleClick, template: renderTemplate(), onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
+    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { ref: summaryInputRef, placeHolder: placeHolder, labelColor: labelColor, width: width, icon: icon, buttons: buttons, readOnly: readOnly, backgroundColor: backgroundColor, 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, label: label, openEditorOnSummaryClick: openChooserBySingleClick, template: renderTemplate(), onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
                 _jsx(TMDataListItemChooserForm, { allowMultipleSelection: allowMultipleSelection, title: titleForm, dataListId: dataListId, selectedIDs: values, onClose: () => {
                         setShowChooser(false);
                         summaryInputRef.current?.focus();
+                        updateIsModalOpen?.(false);
                     }, onChoose: (IDs) => { onValueChanged?.(IDs); } })] }));
 };
 export default TMDataListItemChooser;

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

@@ -11,6 +11,7 @@ interface ITMDcmtTypeChooser extends ITMChooserProps {
     openEditorOnSummaryClick?: boolean;
     accessFilter?: AccessFilter;
     filter?: (value: DcmtTypeDescriptor, index: number, array: DcmtTypeDescriptor[]) => unknown;
+    updateIsModalOpen?: (isOpen: boolean) => void;
 }
 declare const TMDcmtTypeChooser: React.FunctionComponent<ITMDcmtTypeChooser>;
 export default TMDcmtTypeChooser;

package/lib/components/choosers/TMDcmtTypeChooser.js

@@ -7,7 +7,7 @@ import { StyledDivHorizontal } from '../base/Styled';
 import TMTidViewer, { TMDcmtTypeIcon } from '../viewers/TMTidViewer';
 import TMSummary from '../editors/TMSummary';
 import TMChooserForm from '../forms/TMChooserForm';
-const TMDcmtTypeChooser = ({ tmSession, dataSource, disabled, backgroundColor, filter, accessFilter = 'all', showEditButton = true, borderRadius = '4px', buttons = [], placeHolder = `<${SDKUI_Localizator.NoneSelection}>`, openEditorOnSummaryClick, showBorder = true, showId = false, elementStyle, allowMultipleSelection, ShowOnlyDcmtTypes, ShowOnlySAP, filterTemplateTID, values, isModifiedWhen, label, width, height, showClearButton = false, validationItems = [], onValueChanged }) => {
+const TMDcmtTypeChooser = ({ tmSession, dataSource, disabled, backgroundColor, filter, accessFilter = 'all', showEditButton = true, borderRadius = '4px', buttons = [], placeHolder = `<${SDKUI_Localizator.NoneSelection}>`, openEditorOnSummaryClick, showBorder = true, showId = false, elementStyle, allowMultipleSelection, ShowOnlyDcmtTypes, ShowOnlySAP, filterTemplateTID, values, isModifiedWhen, label, width, height, showClearButton = false, validationItems = [], onValueChanged, updateIsModalOpen }) => {
     const [showChooser, setShowChooser] = useState(false);
     useEffect(() => {
         TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.ListDcmtTypeOrView} ...` });
@@ -17,8 +17,16 @@ const TMDcmtTypeChooser = ({ tmSession, dataSource, disabled, backgroundColor, f
     const renderTemplate = () => {
         return (_jsxs(StyledDivHorizontal, { style: { width: 'max-content', height: '100%' }, children: [values && _jsx(TMTidViewer, { tmSession: tmSession, tid: values[0], showIcon: true, showId: showId, noneSelectionText: placeHolder }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }));
     };
-    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { backgroundColor: backgroundColor, buttons: buttons, showBorder: showBorder, borderRadius: borderRadius, hasValue: values && values.length > 0, showClearButton: showClearButton, showEditButton: showEditButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => !disabled && setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, label: label, width: width, height: height, template: renderTemplate(), openEditorOnSummaryClick: openEditorOnSummaryClick, onClearClick: showClearButton ? () => { !disabled && onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
-                _jsx(TMDcmtTypeChooserForm, { tmSession: tmSession, allowMultipleSelection: allowMultipleSelection, dataSource: dataSource, selectedIDs: values, ShowOnlyDcmtTypes: ShowOnlyDcmtTypes, ShowOnlySAP: ShowOnlySAP, accessFilter: accessFilter, filterTemplateTID: filterTemplateTID, filter: filter, onClose: () => setShowChooser(false), onChoose: (IDs) => { onValueChanged?.(IDs); } })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { backgroundColor: backgroundColor, buttons: buttons, showBorder: showBorder, borderRadius: borderRadius, hasValue: values && values.length > 0, showClearButton: showClearButton, showEditButton: showEditButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => {
+                    if (!disabled) {
+                        setShowChooser(true);
+                        updateIsModalOpen?.(true);
+                    }
+                }, elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, label: label, width: width, height: height, template: renderTemplate(), openEditorOnSummaryClick: openEditorOnSummaryClick, onClearClick: showClearButton ? () => { !disabled && onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
+                _jsx(TMDcmtTypeChooserForm, { tmSession: tmSession, allowMultipleSelection: allowMultipleSelection, dataSource: dataSource, selectedIDs: values, ShowOnlyDcmtTypes: ShowOnlyDcmtTypes, ShowOnlySAP: ShowOnlySAP, accessFilter: accessFilter, filterTemplateTID: filterTemplateTID, filter: filter, onClose: () => {
+                        setShowChooser(false);
+                        updateIsModalOpen?.(false);
+                    }, onChoose: (IDs) => { onValueChanged?.(IDs); } })] }));
 };
 export default TMDcmtTypeChooser;
 const cellRenderIcon = (data) => _jsx(TMDcmtTypeIcon, { dtd: data.data });

package/lib/components/choosers/TMDistinctValues.js

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { LayoutModes, MetadataDataDomains, AccessLevels, MetadataDataTypes, SDK_Globals, DcmtTypeListCacheService, DataColumnTypes } from '@topconsultnpm/sdk-ts';
 import styled from 'styled-components';
 import { SDKUI_Localizator, stringIsNullOrEmpty } from '../../helper';
-import TMDataGrid from '../base/TMDataGrid';
+import TMDataGrid, { TMDataGridPageSize } from '../base/TMDataGrid';
 import { TMExceptionBoxManager } from '../base/TMPopUp';
 import TMSpinner from '../base/TMSpinner';
 import TMCheckBox from '../editors/TMCheckBox';
@@ -131,7 +131,7 @@ const TMDistinctValues = ({ tid, mid, layoutMode = LayoutModes.None, allowAppend
         return md.dataDomain === undefined || md.dataDomain === MetadataDataDomains.None;
     };
     const renderContent = () => {
-        return (_jsxs(StyledDistinctValues, { children: [isVisibleAppend() && _jsx(TMCheckBox, { elementStyle: { position: 'absolute', right: '15px', top: '15px', zIndex: 10000 }, label: 'Accoda', value: isAppendMode, onValueChanged: () => { setIsAppendMode(!isAppendMode); } }), _jsx(TMDataGrid, { focusedRowKey: focusedItem ? focusedItem.rowIndex : undefined, selection: { showCheckBoxesMode: 'none' }, searchPanel: { highlightCaseSensitive: true, visible: true }, dataColumns: customColumns, dataSource: dataSource, keyExpr: 'rowIndex', height: 'calc(100%)', onFocusedRowChanged: onFocusedRowChanged, paging: { pageSize: 30 }, summary: customSummary, onRowDblClick: () => !isAppendMode && onClosePanelCallback?.() })] }));
+        return (_jsxs(StyledDistinctValues, { children: [isVisibleAppend() && _jsx(TMCheckBox, { elementStyle: { position: 'absolute', right: '15px', top: '15px', zIndex: 10000 }, label: 'Accoda', value: isAppendMode, onValueChanged: () => { setIsAppendMode(!isAppendMode); } }), _jsx(TMDataGrid, { focusedRowKey: focusedItem ? focusedItem.rowIndex : undefined, selection: { showCheckBoxesMode: 'none' }, searchPanel: { highlightCaseSensitive: true, visible: true }, dataColumns: customColumns, dataSource: dataSource, keyExpr: 'rowIndex', height: 'calc(100%)', onFocusedRowChanged: onFocusedRowChanged, paging: { pageSize: 30 }, summary: customSummary, onRowDblClick: () => !isAppendMode && onClosePanelCallback?.(), pageSize: TMDataGridPageSize.Medium })] }));
     };
     return (_jsx(_Fragment, { children: isModal
             ? _jsx(TMModal, { title: SDKUI_Localizator.DistinctValues + (md?.nameLoc ? ` (${md?.nameLoc})` : ''), height: '600px', width: '500px', resizable: true, onClose: onClosePanelCallback, children: renderContent() })

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

@@ -18,6 +18,8 @@ interface ITMDynDataListItemChooserProps extends ITMChooserProps {
     onCascadeRefreshDynDataLists?: (dynDataListsToBeRefreshed: DynDataListsToBeRefreshed[]) => void;
     /** Indica quali metadati aggiornare in cascata (valore)  */
     onCascadeUpdateMIDs?: (midsToBeUpdated: MIDsToBeUpdated[]) => void;
+    /** Funzione per aggiornare lo stato di apertura della modale */
+    updateIsModalOpen?: (isOpen: boolean) => void;
 }
 export type DynDataListsToBeRefreshed = {
     mid: number | undefined;

package/lib/components/choosers/TMDynDataListItemChooser.js

@@ -9,7 +9,7 @@ import TMChooserForm from '../forms/TMChooserForm';
 import { TMColors } from '../../utils/theme';
 import TMTooltip from '../base/TMTooltip';
 import { FormulaHelper } from '../editors/TMFormulaEditor';
-const TMDynDataListItemChooser = ({ tid, md, width = '100%', titleForm, openChooserBySingleClick, readOnly, layoutMode = LayoutModes.None, queryParamsDynDataList, buttons = [], backgroundColor, showBorder = true, elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, validationItems = [], icon, labelColor, showClearButton, onValueChanged, onCascadeRefreshDynDataLists, onCascadeUpdateMIDs }) => {
+const TMDynDataListItemChooser = ({ tid, md, width = '100%', titleForm, openChooserBySingleClick, readOnly, layoutMode = LayoutModes.None, queryParamsDynDataList, buttons = [], backgroundColor, showBorder = true, elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, validationItems = [], icon, labelColor, showClearButton, onValueChanged, onCascadeRefreshDynDataLists, onCascadeUpdateMIDs, updateIsModalOpen }) => {
     const [showChooser, setShowChooser] = useState(false);
     const [dynDl, setDynDl] = useState();
     const [dataSource, setDataSource] = useState();
@@ -80,9 +80,15 @@ const TMDynDataListItemChooser = ({ tid, md, width = '100%', titleForm, openChoo
         const isPlaceholder = values?.[0] === placeHolder;
         return (_jsxs(StyledDivHorizontal, { style: { width: '100%', color: isPlaceholder ? '#a9a9a9' : 'inherit' }, children: [dataSource && _jsxs(StyledDivHorizontal, { children: [getIcon(), _jsx("p", { style: { marginLeft: '5px' }, children: getDescription() })] }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }));
     };
-    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { placeHolder: placeHolder, width: width, icon: icon, labelColor: labelColor, backgroundColor: backgroundColor, buttons: buttons, showBorder: showBorder, readOnly: readOnly, 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, { placeHolder: placeHolder, width: width, icon: icon, labelColor: labelColor, backgroundColor: backgroundColor, buttons: buttons, showBorder: showBorder, readOnly: readOnly, 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(TMDynDataListItemChooserForm, { TID: tid, MID: md?.id, dynDL: dynDl, title: titleForm, allowMultipleSelection: allowMultipleSelection, searchResult: dataSource, selectedIDs: values, onClose: () => {
                         setShowChooser(false);
+                        updateIsModalOpen?.(false);
                         summaryInputRef.current?.focus();
                     }, onChoose: (IDs) => {
                         onValueChanged?.(IDs);

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

@@ -32,6 +32,8 @@ interface ITMMetadataChooserProps extends ITMChooserProps {
     getColorIndex?: (tid: TID_Alias) => string;
     /** Allows you to view system metadata directly */
     showSysMetadataDirectly?: boolean;
+    /** Funzione per aggiornare lo stato di apertura della modale */
+    updateIsModalOpen?: (isOpen: boolean) => void;
 }
 declare const TMMetadataChooser: React.FunctionComponent<ITMMetadataChooserProps>;
 export default TMMetadataChooser;

package/lib/components/choosers/TMMetadataChooser.js

@@ -11,7 +11,7 @@ import TMButton from '../base/TMButton';
 import TMSummary from '../editors/TMSummary';
 import TMChooserForm from '../forms/TMChooserForm';
 import TMSpinner from '../base/TMSpinner';
-const TMMetadataChooser = ({ tmSession, dataSource, showEditButton = true, buttons = [], disabled, validationItems, getColorIndex, showCompleteMetadataName, qdShowOnlySelectItems, borderRadius = '4px', fontSize = FontSize.defaultFontSize, backgroundColor, openEditorOnSummaryClick, showBorder = true, showId = false, elementStyle, allowMultipleSelection, allowSysMetadata, showSysMetadataDirectly, value, values, isModifiedWhen, tids, label, width, height, showClearButton, qd, placeHolder, filterMetadata, onValueChanged }) => {
+const TMMetadataChooser = ({ tmSession, dataSource, showEditButton = true, buttons = [], disabled, validationItems, getColorIndex, showCompleteMetadataName, qdShowOnlySelectItems, borderRadius = '4px', fontSize = FontSize.defaultFontSize, backgroundColor, openEditorOnSummaryClick, showBorder = true, showId = false, elementStyle, allowMultipleSelection, allowSysMetadata, showSysMetadataDirectly, value, values, isModifiedWhen, tids, label, width, height, showClearButton, qd, placeHolder, filterMetadata, onValueChanged, updateIsModalOpen }) => {
     const [showChooser, setShowChooser] = useState(false);
     const getinputMd = () => {
         if (values && values.length > 0 && values[0].mid && values[0].mid < 0) {
@@ -23,8 +23,16 @@ const TMMetadataChooser = ({ tmSession, dataSource, showEditButton = true, butto
     const renderTemplate = useMemo(() => {
         return (_jsxs(StyledDivHorizontal, { style: { width: 'max-content', height: '100%' }, children: [values && values.length > 0 && values[0].mid && values[0].mid > 0 && _jsx(TMMidViewer, { tmSession: tmSession, tid_mid: values[0], showIcon: true, showId: showId, showCompleteName: showCompleteMetadataName }), values && values.length > 0 && values[0].mid && values[0].mid < 0 && _jsx(TMMidViewer, { tmSession: tmSession, tid_mid: values[0], inputMd: getinputMd(), showIcon: true, showId: showId, showCompleteName: showCompleteMetadataName }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` }), (values == undefined || values.length == 0) && _jsx("p", { children: placeHolder })] }));
     }, [values, tmSession, showId, showCompleteMetadataName, placeHolder]);
-    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { label: label, width: width, height: height, disabled: disabled, validationItems: validationItems, backgroundColor: backgroundColor, buttons: buttons, placeHolder: placeHolder, fontSize: fontSize, showBorder: showBorder, borderRadius: borderRadius, hasValue: values && values.length > 0, showClearButton: showClearButton, showEditButton: showEditButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), openEditorOnSummaryClick: openEditorOnSummaryClick, onEditorClick: () => !disabled && setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, template: renderTemplate, onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined }), showChooser &&
-                _jsx(TMMetadataChooserForm, { tmSession: tmSession, allowMultipleSelection: allowMultipleSelection, height: '500px', width: '600px', allowSysMetadata: allowSysMetadata, showSysMetadataDirectly: showSysMetadataDirectly, getColorIndex: getColorIndex, dataSource: dataSource, tids: tids, qd: qd, qdShowOnlySelectItems: qdShowOnlySelectItems, filterMetadata: filterMetadata, selectedIDs: values, onClose: () => setShowChooser(false), onChoose: (tid_mids) => { onValueChanged?.(tid_mids); } })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { label: label, width: width, height: height, disabled: disabled, validationItems: validationItems, backgroundColor: backgroundColor, buttons: buttons, placeHolder: placeHolder, fontSize: fontSize, showBorder: showBorder, borderRadius: borderRadius, hasValue: values && values.length > 0, showClearButton: showClearButton, showEditButton: showEditButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), openEditorOnSummaryClick: openEditorOnSummaryClick, onEditorClick: () => {
+                    if (!disabled) {
+                        setShowChooser(true);
+                        updateIsModalOpen?.(true);
+                    }
+                }, elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, template: renderTemplate, onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined }), showChooser &&
+                _jsx(TMMetadataChooserForm, { tmSession: tmSession, allowMultipleSelection: allowMultipleSelection, height: '500px', width: '600px', allowSysMetadata: allowSysMetadata, showSysMetadataDirectly: showSysMetadataDirectly, getColorIndex: getColorIndex, dataSource: dataSource, tids: tids, qd: qd, qdShowOnlySelectItems: qdShowOnlySelectItems, filterMetadata: filterMetadata, selectedIDs: values, onClose: () => {
+                        setShowChooser(false);
+                        updateIsModalOpen?.(false);
+                    }, onChoose: (tid_mids) => { onValueChanged?.(tid_mids); } })] }));
 };
 export default TMMetadataChooser;
 export const TMMetadataChooserForm = ({ tmSession, tids, qd, filterMetadata, qdShowOnlySelectItems, selectedIDs, dataSource, allowMultipleSelection, allowSysMetadata = true, showSysMetadataDirectly, width, height, getColorIndex, onClose, onChoose }) => {

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

@@ -16,6 +16,8 @@ interface ITMUserChooserProps extends ITMChooserProps {
     initialShowChooser?: boolean;
     /** Allow showing all users with toggle button */
     allowShowAllUsers?: boolean;
+    /** Funzione per aggiornare lo stato di apertura della modale */
+    updateIsModalOpen?: (isOpen: boolean) => void;
 }
 declare const TMUserChooser: React.FunctionComponent<ITMUserChooserProps>;
 export default TMUserChooser;

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);