@topconsultnpm/sdkui-react 6.21.0-dev3.31 → 6.21.0-dev3.33

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

@@ -4,10 +4,12 @@ interface ITMSpinner {
     description?: string;
     width?: string;
     flat?: boolean;
+    onCancel?: () => void;
+    cancelText?: string;
 }
-declare const Spinner: ({ backgroundColor, description, fontSize, width, flat }: ITMSpinner) => import("react/jsx-runtime").JSX.Element;
+declare const Spinner: ({ backgroundColor, description, fontSize, width, flat, onCancel, cancelText }: ITMSpinner) => import("react/jsx-runtime").JSX.Element;
 declare class TMSpinner {
-    static show({ description, backgroundColor, fontSize, flat }?: ITMSpinner): void;
+    static show({ description, backgroundColor, fontSize, flat, onCancel, cancelText }?: ITMSpinner): void;
     static hide(): void;
 }
 export { Spinner };

package/lib/components/base/TMSpinner.js

@@ -32,7 +32,7 @@ const StyledSpinnerWrapper = styled.div `
     width: ${props => props.$width || 'fit-content'};
     height: fit-content;
     max-width: 250px;
-    max-height: 200px;
+    max-height: ${props => props.$hasCancel ? '280px' : '200px'};
     padding: 10px;
     border-radius: 5px;
     background-color: ${props => props.$flat ? 'transparent' : '#fcfcfc'};
@@ -134,22 +134,49 @@ const StyledSpinnerAnimation = styled.div `
 const StyledSpinnerDescription = styled.div `
     font-size: ${props => props.$fontSize || FontSize.defaultFontSize};
     text-align: center;
+    white-space: pre-line;
 `;
-const Spinner = ({ backgroundColor = 'transparent', description = '', fontSize = FontSize.defaultFontSize, width = 'fit-content', flat = false }) => {
-    return (_jsx(StyledSpinnerContainer, { "$backgroundColor": backgroundColor, children: _jsxs(StyledSpinnerWrapper, { "$width": width, "$flat": flat, children: [_jsxs("div", { style: { position: 'relative', width: '80px', height: '80px' }, children: [_jsx("img", { style: {
+// Pulsante Annulla sotto lo spinner
+const StyledCancelButton = styled.button `
+    margin-top: 15px;
+    padding: 8px 20px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #fff;
+    background-color: #d12a1c;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.2s ease, transform 0.1s ease;
+
+    &:hover {
+        background-color: #b8241a;
+    }
+
+    &:active {
+        transform: scale(0.98);
+    }
+`;
+const Spinner = ({ backgroundColor = 'transparent', description = '', fontSize = FontSize.defaultFontSize, width = 'fit-content', flat = false, onCancel, cancelText = 'Annulla' }) => {
+    return (_jsx(StyledSpinnerContainer, { "$backgroundColor": backgroundColor, children: _jsxs(StyledSpinnerWrapper, { "$width": width, "$flat": flat, "$hasCancel": !!onCancel, children: [_jsxs("div", { style: { position: 'relative', width: '80px', height: '80px' }, children: [_jsx("img", { style: {
                                 position: 'absolute',
                                 top: '50%',
                                 left: '50%',
                                 transform: 'translate(-54%, -54%)'
-                            }, src: six, width: 35, alt: "" }), _jsxs(StyledSpinnerAnimation, { children: [_jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {})] })] }), _jsx(StyledSpinnerDescription, { "$fontSize": fontSize, children: description })] }) }));
+                            }, src: six, width: 35, alt: "" }), _jsxs(StyledSpinnerAnimation, { children: [_jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {})] })] }), _jsx(StyledSpinnerDescription, { "$fontSize": fontSize, children: description }), onCancel && (_jsx(StyledCancelButton, { onClick: onCancel, children: cancelText }))] }) }));
 };
 class TMSpinner {
-    static show({ description, backgroundColor, fontSize, flat } = { backgroundColor: 'transparent', description: '', fontSize: FontSize.defaultFontSize, flat: false }) {
+    static show({ description, backgroundColor, fontSize, flat, onCancel, cancelText } = {
+        backgroundColor: 'transparent',
+        description: '',
+        fontSize: FontSize.defaultFontSize,
+        flat: false
+    }) {
         let container = document.createElement('div');
         container.setAttribute("id", 'tm-spinner-temporary-container');
         document.body.appendChild(container);
         const root = ReactDOM.createRoot(container);
-        root.render(_jsx(React.StrictMode, { children: _jsx(Spinner, { backgroundColor: backgroundColor, fontSize: fontSize, description: description, flat: flat }) }));
+        root.render(_jsx(React.StrictMode, { children: _jsx(Spinner, { backgroundColor: backgroundColor, fontSize: fontSize, description: description, flat: flat, onCancel: onCancel, cancelText: cancelText }) }));
     }
     static hide() {
         let container = document.getElementById('tm-spinner-temporary-container');

package/lib/components/editors/TMMetadataValues.js

@@ -15,6 +15,8 @@ import { TMNothingToShow } from "../features/documents/TMDcmtPreview";
 import TMAccordion from "../base/TMAccordion";
 import TabPanel, { Item } from 'devextreme-react/tab-panel';
 import { TMExceptionBoxManager } from "../base/TMPopUp";
+// Costante per la minWidth degli elementi - garantisce coerenza tra layout orizzontale e verticale
+const ITEM_MIN_WIDTH = 200;
 export var ShowCheckBoxesMode;
 (function (ShowCheckBoxesMode) {
     ShowCheckBoxesMode[ShowCheckBoxesMode["Never"] = 0] = "Never";
@@ -616,7 +618,7 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
                 }
                 // Orizzontale con bordo, children e titolo
                 if (!groupIsNoBorder && isHorizontal && children.length > 0 && groupTitle.length > 0) {
-                    return (_jsxs("div", { style: borderedGroupStyle('row'), children: [groupTitleElement, renderChildren(layoutItem, nextDepth)] }, `group-horizontal-${layoutItem.layoutItemID}`));
+                    return (_jsxs("div", { style: { position: 'relative', border: '2px solid #CAD9EB', borderRadius: '3px', padding: '12px 6px 6px', margin: '10px' }, children: [groupTitleElement, _jsx("div", { style: { display: 'flex', flexDirection: 'row', flexWrap: 'nowrap', gap: '8px', overflowX: 'auto', overflowY: 'hidden', paddingBottom: '8px' }, children: children.map(child => (_jsx("div", { style: { flex: `1 1 ${ITEM_MIN_WIDTH}px`, minWidth: `${ITEM_MIN_WIDTH}px` }, children: renderLayoutItem(child, nextDepth, visited) }, child.layoutItemID))) })] }, `group-horizontal-${layoutItem.layoutItemID}`));
                 }
                 // Verticale senza bordo
                 if (groupIsNoBorder && isVertical) {
@@ -633,8 +635,14 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
                 }
                 // Orizzontale
                 if (isHorizontal) {
-                    const renderHorizontalChildren = () => children.map(child => (_jsx("div", { style: { flex: '1 1 0', minWidth: 0 }, children: renderLayoutItem(child, nextDepth, visited) }, child.layoutItemID)));
-                    return (_jsx("div", { style: { display: 'flex', flexDirection: 'row', flexWrap: 'wrap', gap: '3px' }, children: groupDescriptor.borderStyle === LayoutGroupBorderStyles.GroupBox || groupDescriptor.borderStyle === LayoutGroupBorderStyles.Tabbed ? (_jsx(TMAccordion, { title: groupTitle, titleSize: "Small", children: renderChildren(layoutItem, nextDepth) })) : groupDescriptor.borderStyle === LayoutGroupBorderStyles.Group ? (_jsxs("div", { style: borderedGroupStyle('column'), children: [groupTitleElement, renderHorizontalChildren()] })) : (renderHorizontalChildren()) }, `group-horizontal-${layoutItem.layoutItemID}`));
+                    const renderHorizontalChildren = () => (_jsx("div", { style: { display: 'flex', flexDirection: 'row', flexWrap: 'nowrap', gap: '8px', overflowX: 'auto', overflowY: 'hidden', paddingBottom: '8px' }, children: children.map(child => (_jsx("div", { style: { flex: `1 1 ${ITEM_MIN_WIDTH}px`, minWidth: `${ITEM_MIN_WIDTH}px` }, children: renderLayoutItem(child, nextDepth, visited) }, child.layoutItemID))) }));
+                    if (groupDescriptor.borderStyle === LayoutGroupBorderStyles.GroupBox || groupDescriptor.borderStyle === LayoutGroupBorderStyles.Tabbed) {
+                        return (_jsx(TMAccordion, { title: groupTitle, titleSize: "Small", children: renderHorizontalChildren() }, `group-horizontal-${layoutItem.layoutItemID}`));
+                    }
+                    if (groupDescriptor.borderStyle === LayoutGroupBorderStyles.Group) {
+                        return (_jsxs("div", { style: { position: 'relative', border: '2px solid #CAD9EB', borderRadius: '3px', padding: '12px 6px 6px', margin: '10px' }, children: [groupTitleElement, renderHorizontalChildren()] }, `group-horizontal-${layoutItem.layoutItemID}`));
+                    }
+                    return (_jsx("div", { children: renderHorizontalChildren() }, `group-horizontal-${layoutItem.layoutItemID}`));
                 }
                 // Fallback: gruppo con accordion e indentazione
                 const indentationPx = depth > 0 ? depth * 10 : 0;
@@ -717,6 +725,7 @@ const StyledRow = styled.div `
     display: flex; 
     flex-direction: row; 
     width: 100%; 
+    min-width: ${ITEM_MIN_WIDTH}px;
     gap: 5px; 
 `;
 const StyledSeparator = styled.hr `

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react",
-    "version": "6.21.0-dev3.31",
+    "version": "6.21.0-dev3.33",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",