@topconsultnpm/sdkui-react-beta 6.15.126 → 6.15.128

package/lib/components/choosers/TMDataListItemChooser.js

@@ -7,14 +7,14 @@ import TMSpinner from '../base/TMSpinner';
 import TMSummary from '../editors/TMSummary';
 import TMChooserForm from '../forms/TMChooserForm';
 import TMDataListItemViewer from '../viewers/TMDataListItemViewer';
-const TMDataListItemChooser = ({ labelColor, 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 }) => {
     const [showChooser, setShowChooser] = useState(false);
     const renderTemplate = () => {
         const isPlaceholder = values?.[0] === placeHolder;
-        return (_jsxs(StyledDivHorizontal, { style: { minWidth: '125px', 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'})` })] }));
+        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, 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: () => !readOnly && setShowChooser(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();

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, 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 }) => {
     const [showChooser, setShowChooser] = useState(false);
     const [dynDl, setDynDl] = useState();
     const [dataSource, setDataSource] = useState();
@@ -78,9 +78,9 @@ const TMDynDataListItemChooser = ({ tid, md, titleForm, openChooserBySingleClick
     };
     const renderTemplate = () => {
         const isPlaceholder = values?.[0] === placeHolder;
-        return (_jsxs(StyledDivHorizontal, { style: { minWidth: '125px', 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(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, 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: () => !readOnly && setShowChooser(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);
                         summaryInputRef.current?.focus();

package/lib/components/editors/TMMetadataValues.js

@@ -416,6 +416,6 @@ const StyledMetadataValuesContainer = styled.div `
 const StyledRow = styled.div ` 
     display: flex; 
     flex-direction: row; 
-    /* align-items: center;  */
+    width: 100%; 
     gap: 5px; 
 `;

package/lib/components/editors/TMSummary.js

@@ -20,7 +20,8 @@ const StyledSummaryTemplateInput = styled.div `
     border-radius: ${props => !props.$showBorder ? props.$borderRadius : TMEditorsDefaultBorderRadius};
     display: flex;
     align-items: center;
-    /* min-width: 70px; */
+    overflow: hidden;
+
     &:focus{
         outline: none;
         background-image: ${props => !props.$showBorder ? '' : 'linear-gradient(white, #E4E9F7)'};
@@ -62,7 +63,21 @@ const TMSummary = forwardRef(({ placeHolder, readOnly, labelColor, hasValue, bor
     const renderTemplateField = () => {
         return (_jsxs(StyledSummaryTemplateInput, { ref: summaryElementRef, "$readOnly": readOnly, tabIndex: 0, "$backgroundColor": backgroundColor, "$borderRadius": borderRadius, "$isModified": isModifiedWhen, "$vil": validationItems, "$disabled": disabled, "$showBorder": showBorder, "$fontSize": fontSize, "$width": width, "$height": height, onChange: onValueChanged, children: [_jsx("div", { onClick: () => { if (openEditorOnSummaryClick && !disabled)
                         onEditorClick?.(); }, onDoubleClick: () => { if (!openEditorOnSummaryClick && !disabled)
-                        onEditorClick?.(); }, style: { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', userSelect: 'text', alignItems: 'center', width: '100%', minHeight: '16px', cursor: (openEditorOnSummaryClick && !readOnly) ? 'pointer' : 'default' }, children: template }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: '3px', justifyContent: 'flex-start', alignItems: 'center', pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? 0.4 : 1 }, children: [showClearButton && hasValue && _jsx(StyledEditorButtonIcon2, { tabIndex: disabled ? -1 : 0, onKeyDown: (e) => e.code === 'Space' && onClearClick?.(), onClick: handleClearClick, children: _jsx(TMTooltip, { content: SDKUI_Localizator.Clear, children: _jsx(IconClearButton, {}) }) }), showEditButton && _jsx(StyledEditorButtonIcon2, { tabIndex: disabled ? -1 : 0, onKeyDown: (e) => e.code === 'Space' && onEditorClick?.(), onClick: onEditorClick, children: _jsx(TMTooltip, { content: iconeEditTooltip ?? SDKUI_Localizator.Update, children: iconEditButton ?? _jsx(IconPencil, {}) }) }), buttons.map((buttonItem) => {
+                        onEditorClick?.(); }, style: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        justifyContent: 'space-between',
+                        userSelect: 'text',
+                        alignItems: 'center',
+                        width: '5px',
+                        minHeight: '16px',
+                        cursor: (openEditorOnSummaryClick && !readOnly) ? 'pointer' : 'default',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                        flexGrow: 1,
+                        marginRight: '5px' // Spazio per i bottoni
+                    }, children: template }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: '3px', justifyContent: 'flex-start', alignItems: 'center', pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? 0.4 : 1 }, children: [showClearButton && hasValue && _jsx(StyledEditorButtonIcon2, { tabIndex: disabled ? -1 : 0, onKeyDown: (e) => e.code === 'Space' && onClearClick?.(), onClick: handleClearClick, children: _jsx(TMTooltip, { content: SDKUI_Localizator.Clear, children: _jsx(IconClearButton, {}) }) }), showEditButton && _jsx(StyledEditorButtonIcon2, { tabIndex: disabled ? -1 : 0, onKeyDown: (e) => e.code === 'Space' && onEditorClick?.(), onClick: onEditorClick, children: _jsx(TMTooltip, { content: iconeEditTooltip ?? SDKUI_Localizator.Update, children: iconEditButton ?? _jsx(IconPencil, {}) }) }), buttons.map((buttonItem) => {
                             return (_jsx(StyledEditorButtonIcon2, { onClick: buttonItem.onClick, children: _jsx(TMTooltip, { content: buttonItem.text, children: buttonItem.icon }) }, buttonItem.text));
                         })] })] }));
     };

package/lib/components/viewers/TMDataListItemViewer.js

@@ -63,7 +63,7 @@ const TMDataListItemViewer = ({ dataListId, value, viewMode = DataListViewModes.
         }
         return dataListItem ? dataListItem.name : displayValue;
     };
-    return (_jsx(TMTooltip, { content: dataListItem ? dataListItem.value : SDKUI_Localizator.ValueNotPresent, childStyle: { width: '100%' }, children: _jsxs(StyledDivHorizontal, { style: { width: '100%' }, children: [getIcon(), _jsx("p", { style: {
+    return (_jsx(TMTooltip, { content: dataListItem ? dataListItem.value : SDKUI_Localizator.ValueNotPresent, parentStyle: { width: '100%' }, childStyle: { width: '100%' }, children: _jsxs(StyledDivHorizontal, { style: { width: '100%' }, children: [getIcon(), _jsx("p", { style: {
                         textAlign: 'left',
                         marginLeft: showIcon ? '5px' : '',
                         opacity: dataListItem ? 1 : 0.5,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@topconsultnpm/sdkui-react-beta",
-  "version": "6.15.126",
+  "version": "6.15.128",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -38,7 +38,7 @@
     "lib"
   ],
   "dependencies": {
-    "@topconsultnpm/sdk-ts-beta": "6.15.9",
+    "@topconsultnpm/sdk-ts-beta": "6.15.10",
     "buffer": "^6.0.3",
     "devextreme": "25.1.4",
     "devextreme-react": "25.1.4",