@topconsultnpm/sdkui-react 6.19.0-test.1 → 6.19.0-test2

package/lib/components/base/TMFloatingToolbar.js

@@ -2,42 +2,42 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import { IconDraggabledots } from '../../helper/TMIcons';
-const StyledFloatingToolbarContainer = styled.div `
-    position: absolute;
-    width: max-content;
-    height: max-content;
-    display: flex;
-    flex-direction: row;
-    background-color: ${props => `${props.$backgroundColor}a6`};
-    left: calc(50% - 90px);
-    top: calc(100% - 40px);
-    border-radius: 8px;
-    z-index: 10;
-    &:hover {
-        background: ${props => props.$backgroundColor};
-    }
+const StyledFloatingToolbarContainer = styled.div `
+    position: absolute;
+    width: max-content;
+    height: max-content;
+    display: flex;
+    flex-direction: row;
+    background-color: ${props => `${props.$backgroundColor}a6`};
+    left: calc(50% - 90px);
+    top: calc(100% - 40px);
+    border-radius: 8px;
+    z-index: 10;
+    &:hover {
+        background: ${props => props.$backgroundColor};
+    }
 `;
-const StyledFloatingToolbarDraggable = styled.div `
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 25px;
-    height: 100%;
-    background-color: ${props => `${props.$backgroundColor}FF`};
-    border-top-left-radius: 8px;
-    border-bottom-left-radius: 8px;
-    padding: 10px 0px 10px 0px;
-    &:hover {
-        cursor: grab;
-    }
+const StyledFloatingToolbarDraggable = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 25px;
+    height: 100%;
+    background-color: ${props => `${props.$backgroundColor}FF`};
+    border-top-left-radius: 8px;
+    border-bottom-left-radius: 8px;
+    padding: 10px 0px 10px 0px;
+    &:hover {
+        cursor: grab;
+    }
 `;
-const StyledFloatingToolbar = styled.div `
-    width: max-content;
-    display: flex;
-    flex-direction: row;
-    padding: 10px 10px 10px 20px; 
-    gap: 8px; 
-    border-radius: 8px;
+const StyledFloatingToolbar = styled.div `
+    width: max-content;
+    display: flex;
+    flex-direction: row;
+    padding: 10px 10px 10px 20px; 
+    gap: 8px; 
+    border-radius: 8px;
 `;
 const TMFloatingToolbar = ({ children, backgroundColor, initialLeft, initialTop }) => {
     const boxRef = useRef(null);

package/lib/components/base/TMLayout.js

@@ -2,53 +2,53 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { FontSize, TMColors } from '../../utils/theme';
-const StyledLayoutContainer = styled.div `
-    width: 100%;
-    position: relative;
-    height: 100%;
-    /* min-height: max-content; */
-    /* min-width: max-content; */
-    display: flex;
-    flex-direction: ${props => props.$direction === 'horizontal' ? 'row' : 'column'};
-    justify-content: ${props => props.$justifyContent};
-    align-items: ${props => props.$alignItems};
-    /* overflow: ${props => props.$direction === 'horizontal' ? 'auto' : 'hidden'}; */
-    /* gap: 3px; */
+const StyledLayoutContainer = styled.div `
+    width: 100%;
+    position: relative;
+    height: 100%;
+    /* min-height: max-content; */
+    /* min-width: max-content; */
+    display: flex;
+    flex-direction: ${props => props.$direction === 'horizontal' ? 'row' : 'column'};
+    justify-content: ${props => props.$justifyContent};
+    align-items: ${props => props.$alignItems};
+    /* overflow: ${props => props.$direction === 'horizontal' ? 'auto' : 'hidden'}; */
+    /* gap: 3px; */
 `;
-const StyledLayoutItem = styled.div `
-    width: ${props => props.$width};
-    min-width: ${props => props.$minWidth};
-    max-width: ${props => props.$maxWidth};
-    max-height: ${props => props.$maxHeight};
-    min-height: ${props => props.$minHeight};
-    height: ${props => props.$height};
-    position: relative;
+const StyledLayoutItem = styled.div `
+    width: ${props => props.$width};
+    min-width: ${props => props.$minWidth};
+    max-width: ${props => props.$maxWidth};
+    max-height: ${props => props.$maxHeight};
+    min-height: ${props => props.$minHeight};
+    height: ${props => props.$height};
+    position: relative;
 `;
-const StyledCardHeader = styled.div `
-    width:100% ;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    padding: 4px 5px;
-    background-color: ${props => props.$backgroundColor ?? TMColors.backgroundColorHeader};
-    color: ${props => props.$color ?? TMColors.colorHeader};
-    border-top-right-radius: ${props => props.$borderRadius && '3px'};
-    border-top-left-radius: ${props => props.$borderRadius && '3px'};
-    overflow: hidden;
-    position: sticky;
-    top: 0;
-    font-weight: ${props => props.$fontWeight ?? 'normal'};
+const StyledCardHeader = styled.div `
+    width:100% ;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 4px 5px;
+    background-color: ${props => props.$backgroundColor ?? TMColors.backgroundColorHeader};
+    color: ${props => props.$color ?? TMColors.colorHeader};
+    border-top-right-radius: ${props => props.$borderRadius && '3px'};
+    border-top-left-radius: ${props => props.$borderRadius && '3px'};
+    overflow: hidden;
+    position: sticky;
+    top: 0;
+    font-weight: ${props => props.$fontWeight ?? 'normal'};
 `;
-const StyledCardContext = styled.div `
-    width: 100%;
-    height: ${props => props.$showHeader ? 'calc(100% - 25px);' : '100%'} ;
-    overflow: ${props => props.$scroll && 'auto'};
-    overflow-y:  ${props => props.$scrollY && 'auto'};
-    overflow-x:  ${props => props.$scrollX && 'auto'};
-    background-color: white;
-    top: 0;
-    padding: ${props => props.$padding ? '5px' : '0'};
+const StyledCardContext = styled.div `
+    width: 100%;
+    height: ${props => props.$showHeader ? 'calc(100% - 25px);' : '100%'} ;
+    overflow: ${props => props.$scroll && 'auto'};
+    overflow-y:  ${props => props.$scrollY && 'auto'};
+    overflow-x:  ${props => props.$scrollX && 'auto'};
+    background-color: white;
+    top: 0;
+    padding: ${props => props.$padding ? '5px' : '0'};
 `;
 const TMCard = ({ borderRadius = true, onClick, scrollX = false, scrollY = false, width = '100%', height = '100%', children, title = '', fontSize = FontSize.defaultFontSize, fontWeight, showBorder = true, padding = true, scroll = false, backgroundColor, color }) => {
     return (_jsxs("div", { onClick: onClick, style: { width: width, height: height, fontSize: fontSize, overflow: 'hidden' }, children: [title.length > 0 && _jsx(StyledCardHeader, { "$borderRadius": borderRadius, "$fontWeight": fontWeight, "$backgroundColor": backgroundColor, "$color": color, children: title }), _jsxs(StyledCardContext, { "$scrollX": scrollX, "$scrollY": scrollY, "$scroll": scroll, "$padding": padding, "$showHeader": title.length > 0, style: { border: showBorder ? '2px solid #CAD9EB' : 'none', borderBottomLeftRadius: showBorder ? '3px' : '0', borderBottomRightRadius: showBorder ? '3px' : '0' }, children: [" ", children, " "] })] }));

package/lib/components/base/TMList.js

@@ -2,42 +2,42 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import styled from 'styled-components';
 import { TMColors } from '../../utils/theme';
-const StyledListItem = styled.li `
-  display: flex; 
-  flex-direction: row; 
-  align-items: center; 
-  justify-content: flex-start;
-  gap: 10px;
-  position: relative;
-  color: ${TMColors.text_normal};
-  padding: 4px 5px;
-  height: 40px;
-  width: 100%;
-  font-size: 1rem;
-  letter-spacing: 0px;
-  background-color: ${({ $isSelected }) => ($isSelected ? '#d0e5fb' : 'transparent')};
-
-  &:hover {
-        background-color: ${TMColors.border_normal};
-        cursor: pointer;
-    }
+const StyledListItem = styled.li `
+  display: flex; 
+  flex-direction: row; 
+  align-items: center; 
+  justify-content: flex-start;
+  gap: 10px;
+  position: relative;
+  color: ${TMColors.text_normal};
+  padding: 4px 5px;
+  height: 40px;
+  width: 100%;
+  font-size: 1rem;
+  letter-spacing: 0px;
+  background-color: ${({ $isSelected }) => ($isSelected ? '#d0e5fb' : 'transparent')};
+
+  &:hover {
+        background-color: ${TMColors.border_normal};
+        cursor: pointer;
+    }
 `;
-const StyledListContainer = styled.div `
-  height: 100%;
-  width: 100%;
-  background-color: ${TMColors.default_background};
-  padding: 3px;
-  border-radius: 2px;
-  box-shadow: 1px 1px 7px rgba(0,0,0,0.15);
+const StyledListContainer = styled.div `
+  height: 100%;
+  width: 100%;
+  background-color: ${TMColors.default_background};
+  padding: 3px;
+  border-radius: 2px;
+  box-shadow: 1px 1px 7px rgba(0,0,0,0.15);
 `;
-const StyledIconWrapper = styled.span `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  min-width: 24px;
-  min-height: 24px;
+const StyledIconWrapper = styled.span `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  min-width: 24px;
+  min-height: 24px;
 `;
 ;
 const TMList = ({ items }) => {

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

@@ -8,9 +8,11 @@ interface ITMModal {
     fontSize?: string;
     isModal?: boolean;
     resizable?: boolean;
+    expandable?: boolean;
     onClose?: () => void;
     hidePopup?: boolean;
     askClosingConfirm?: boolean;
+    showCloseButton?: boolean;
 }
 declare const TMModal: React.FC<ITMModal>;
 export default TMModal;

package/lib/components/base/TMModal.js

@@ -1,48 +1,84 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { Popup } from 'devextreme-react';
 import styled from 'styled-components';
 import TMLayoutContainer, { TMCard, TMLayoutItem } from './TMLayout';
 import { FontSize, TMColors } from '../../utils/theme';
-const StyledModal = styled.div `
-    width: ${props => props.$width};
-    height: ${props => props.$height};
-    position: ${props => (props.$isModal ? 'relative' : 'fixed')};
-    background-color: white;
-    box-shadow: 2px 2px 10px #939393;
-    border-radius: 5px;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-start;
-    font-size: ${props => props.$fontSize};
-    overflow: hidden;
-    min-height: 33px;
-    min-width: 250px;
-    max-width: 95%;
-    max-height: 95%;
-    z-index: 2000000000;
+import { IconWindowMaximize, IconWindowMinimize, svgToString } from '../../helper';
+const StyledModal = styled.div `
+    width: ${props => props.$width};
+    height: ${props => props.$height};
+    position: ${props => (props.$isModal ? 'relative' : 'fixed')};
+    background-color: white;
+    box-shadow: 2px 2px 10px #939393;
+    border-radius: 5px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    font-size: ${props => props.$fontSize};
+    overflow: hidden;
+    min-height: 33px;
+    min-width: 250px;
+    max-width: 95%;
+    max-height: 95%;
+    z-index: 2000000000;
 `;
-const StyledModalToolbar = styled.div `
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    padding: 5px;
-    flex-direction: row;
-    background-color: ${TMColors.toolbar_background};
-    border-bottom: 1px solid gray;
+const StyledModalToolbar = styled.div `
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 5px;
+    flex-direction: row;
+    background-color: ${TMColors.toolbar_background};
+    border-bottom: 1px solid gray;
 `;
-const StyledModalContext = styled.div `
-    width: 100%;
-    overflow: auto;
-    height: 100%;
+const StyledModalContext = styled.div `
+    width: 100%;
+    overflow: auto;
+    height: 100%;
 `;
-const TMModal = ({ resizable = true, isModal = true, title = '', toolbar, onClose, children, width = '100%', height = '100%', fontSize = FontSize.defaultFontSize, hidePopup = true, askClosingConfirm = false }) => {
+const TMModal = ({ resizable = true, expandable = false, isModal = true, title = '', toolbar, onClose, children, width = '100%', height = '100%', fontSize = FontSize.defaultFontSize, hidePopup = true, askClosingConfirm = false, showCloseButton = true }) => {
+    const popupRef = useRef(null);
     const [initialWidth, setInitialWidth] = useState(width);
     const [initialHeight, setInitialHeight] = useState(height);
     const [showPopup, setShowPopup] = useState(false);
     const [isResizing, setIsResizing] = useState(false);
+    const [isFullScreen, setIsFullScreen] = useState(false);
+    // Dimensioni minime di default per il popup
+    const DEFAULT_MIN_WIDTH = 500;
+    const DEFAULT_MIN_HEIGHT = 400;
+    const [minWidth, setMinWidth] = useState(0);
+    const [minHeight, setMinHeight] = useState(0);
+    /**
+     * Gestore chiamato quando il popup viene mostrato.
+     * Calcola e imposta le dimensioni minime del popup in base allo spazio disponibile.
+     * Le dimensioni minime sono il valore più piccolo tra le dimensioni effettive del parent e le dimensioni minime di default
+     */
+    const handleShown = () => {
+        // Usa requestAnimationFrame per attendere il completamento del rendering
+        requestAnimationFrame(() => {
+            if (popupRef.current && popupRef.current.instance) {
+                const instance = popupRef.current.instance();
+                if (instance) {
+                    // Ottiene l'elemento content del popup
+                    const element = instance.content();
+                    if (element) {
+                        const parentElement = element.parentElement;
+                        if (parentElement) {
+                            // Legge le dimensioni effettive del contenitore parent
+                            const widthPx = parentElement.offsetWidth;
+                            const heightPx = parentElement.offsetHeight;
+                            // Imposta le dimensioni minime usando il valore più piccolo tra le dimensioni disponibili e quelle di default
+                            setMinWidth(widthPx < DEFAULT_MIN_WIDTH ? widthPx : DEFAULT_MIN_WIDTH);
+                            setMinHeight(heightPx < DEFAULT_MIN_HEIGHT ? heightPx : DEFAULT_MIN_HEIGHT);
+                        }
+                    }
+                }
+            }
+        });
+    };
     useEffect(() => {
         setShowPopup(isModal);
     }, [isModal]);
@@ -65,6 +101,15 @@ const TMModal = ({ resizable = true, isModal = true, title = '', toolbar, onClos
             setShowPopup(false);
         onClose && onClose();
     };
-    return (_jsx(_Fragment, { children: isModal ? (_jsx(Popup, { showCloseButton: true, animation: undefined, maxHeight: '95%', maxWidth: '95%', dragEnabled: !isResizing, resizeEnabled: resizable, width: initialWidth, height: initialHeight, title: title, visible: showPopup, onResizeStart: handleResizeStart, onResizeEnd: handleResizeEnd, onHiding: onHiding, children: _jsxs(TMLayoutContainer, { children: [toolbar && (_jsx(TMLayoutItem, { height: "40px", children: _jsx(StyledModalToolbar, { children: toolbar }) })), _jsx(TMLayoutItem, { height: toolbar ? 'calc(100% - 50px)' : 'calc(100% - 10px)', children: _jsx(TMCard, { showBorder: false, padding: false, scrollY: true, children: children }) })] }) })) : (_jsxs(StyledModal, { "$isModal": isModal, className: "temp-modal", "$fontSize": fontSize, "$width": initialWidth, "$height": initialHeight, children: [toolbar ? _jsx(StyledModalToolbar, { children: toolbar }) : _jsx(_Fragment, {}), _jsx(StyledModalContext, { children: children })] })) }));
+    return (_jsx(_Fragment, { children: isModal ? (_jsx(Popup, { ref: popupRef, showCloseButton: showCloseButton, animation: undefined, minWidth: minWidth, minHeight: minHeight, maxHeight: '95%', maxWidth: '95%', dragEnabled: !isResizing, resizeEnabled: resizable, width: expandable && isFullScreen ? '95%' : initialWidth, height: expandable && isFullScreen ? '95%' : initialHeight, title: title, visible: showPopup, onShown: handleShown, onResizeStart: handleResizeStart, onResizeEnd: handleResizeEnd, onHiding: onHiding, toolbarItems: expandable ? [
+                {
+                    widget: 'dxButton',
+                    location: 'after',
+                    options: {
+                        icon: isFullScreen ? svgToString(_jsx(IconWindowMinimize, {})) : svgToString(_jsx(IconWindowMaximize, {})),
+                        onClick: () => setIsFullScreen(!isFullScreen)
+                    }
+                }
+            ] : undefined, children: _jsxs(TMLayoutContainer, { children: [toolbar && (_jsx(TMLayoutItem, { height: "40px", children: _jsx(StyledModalToolbar, { children: toolbar }) })), _jsx(TMLayoutItem, { height: toolbar ? 'calc(100% - 40px)' : '100%', children: _jsx(TMCard, { showBorder: false, padding: false, scrollY: true, children: children }) })] }) })) : (_jsxs(StyledModal, { "$isModal": isModal, className: "temp-modal", "$fontSize": fontSize, "$width": initialWidth, "$height": initialHeight, children: [toolbar ? _jsx(StyledModalToolbar, { children: toolbar }) : _jsx(_Fragment, {}), _jsx(StyledModalContext, { children: children })] })) }));
 };
 export default TMModal;

package/lib/components/base/TMPanel.js

@@ -8,67 +8,67 @@ import styled from 'styled-components';
 import { IconArrowLeft, IconClearButton, IconWindowMaximize, IconWindowMinimize, isPositiveNumber, SDKUI_Localizator } from '../../helper';
 import TMButton from './TMButton';
 import { Gutters } from '../../utils/theme';
-const StyledPanelContainer = styled.div `
-    width: 100%;
-    height: 100%;
-    font-size: 1rem;
-    box-shadow: 3px 3px 5px #D3D3D3BF;
-    border-radius: 10px;
-    opacity: 1;
-    background: #FFFFFF;
-    min-height: 0; 
-    overflow: hidden;
-    position: ${({ $isMaximized }) => $isMaximized ? 'fixed' : 'relative'};
-    top: ${({ $isMaximized }) => $isMaximized ? '50px' : 'auto'};
-    left: ${({ $isMaximized }) => $isMaximized ? '50px' : 'auto'};
-    width: ${({ $isMaximized }) => $isMaximized ? `calc(100vw - 50px - (${Gutters.getGutters()}px * 2))` : '100%'};
-    height: ${({ $isMaximized }) => $isMaximized ? `calc(100vh - 50px - (${Gutters.getGutters()}px * 2))` : '100%'};
-    z-index: ${({ $isMaximized }) => $isMaximized ? 2000 : 'auto'};
-    margin: ${({ $isMaximized }) => $isMaximized ? `${Gutters.getGutters()}px` : '0'};
-    /* transition: all 0.2s; */
+const StyledPanelContainer = styled.div `
+    width: 100%;
+    height: 100%;
+    font-size: 1rem;
+    box-shadow: 3px 3px 5px #D3D3D3BF;
+    border-radius: 10px;
+    opacity: 1;
+    background: #FFFFFF;
+    min-height: 0; 
+    overflow: hidden;
+    position: ${({ $isMaximized }) => $isMaximized ? 'fixed' : 'relative'};
+    top: ${({ $isMaximized }) => $isMaximized ? '50px' : 'auto'};
+    left: ${({ $isMaximized }) => $isMaximized ? '50px' : 'auto'};
+    width: ${({ $isMaximized }) => $isMaximized ? `calc(100vw - 50px - (${Gutters.getGutters()}px * 2))` : '100%'};
+    height: ${({ $isMaximized }) => $isMaximized ? `calc(100vh - 50px - (${Gutters.getGutters()}px * 2))` : '100%'};
+    z-index: ${({ $isMaximized }) => $isMaximized ? 2000 : 'auto'};
+    margin: ${({ $isMaximized }) => $isMaximized ? `${Gutters.getGutters()}px` : '0'};
+    /* transition: all 0.2s; */
 `;
-const StyledPanelHeader = styled.div `
-    width:100% ;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    padding: 4px 10px;
+const StyledPanelHeader = styled.div `
+    width:100% ;
+    display: flex;
+    flex-direction: row;
+    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%)'
-    : ($backgroundColor ?? '#F4F4F4')};
-    box-shadow: 3px 3px 5px #D3D3D3BF;
-    color: ${({ $isActive, $color }) => $isActive ? '#FFFFFF' : ($color ?? '#2559A5')};
-    border-top-right-radius: 10px;
-    border-top-left-radius: 10px;
-    height: 40px;
-    font-weight: 600;
-    outline: none;
-    &:focus {
-        outline: none;
-    }
-    // Ensure all children inherit the header color
-    &,
-    * {
-        color: ${({ $isActive, $color }) => $isActive ? '#FFFFFF' : ($color ?? '#2559A5')} !important;
-    }
+    : ($backgroundColor ?? '#F4F4F4')};
+    box-shadow: 3px 3px 5px #D3D3D3BF;
+    color: ${({ $isActive, $color }) => $isActive ? '#FFFFFF' : ($color ?? '#2559A5')};
+    border-top-right-radius: 10px;
+    border-top-left-radius: 10px;
+    height: 40px;
+    font-weight: 600;
+    outline: none;
+    &:focus {
+        outline: none;
+    }
+    // Ensure all children inherit the header color
+    &,
+    * {
+        color: ${({ $isActive, $color }) => $isActive ? '#FFFFFF' : ($color ?? '#2559A5')} !important;
+    }
 `;
-const StyledPanelContent = styled.div `
-    width: 100%;
-    height: ${props => props.$height};
-    min-height: 0; 
-    overflow: hidden;
-    border-bottom-right-radius: 10px;
-    border-bottom-left-radius: 10px;
-    padding: ${props => props.$padding};
-    display: flex;
-    justify-content: space-between;
-    position: relative;
-    user-select: none;
-    outline: none;
-    &:focus {
-        outline: none;
-    }
+const StyledPanelContent = styled.div `
+    width: 100%;
+    height: ${props => props.$height};
+    min-height: 0; 
+    overflow: hidden;
+    border-bottom-right-radius: 10px;
+    border-bottom-left-radius: 10px;
+    padding: ${props => props.$padding};
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    user-select: none;
+    outline: none;
+    &:focus {
+        outline: none;
+    }
 `;
 const TMPanel = forwardRef(({ allowMaximize = true, color, backgroundColor, backgroundColorContainer, children, showHeader = true, title, totalItems, displayedItemsCount, toolbar, padding = '5px', isVisible = true, panelID = 'tmpanel', isActive, // Questa prop determinerà la modalità
 onActivate, onBack, onClose, onHeaderDoubleClick, onMaximize, onActiveChanged }, ref) => {