@topconsultnpm/sdkui-react 6.19.0-dev2.2 → 6.19.0-test.1

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) => {

package/lib/components/base/TMPopUp.js

@@ -20,65 +20,65 @@ export var ButtonNames;
     ButtonNames["OK"] = "OK";
     ButtonNames["CANCEL"] = "Cancel";
 })(ButtonNames || (ButtonNames = {}));
-const StyledExeptionToolbar = styled.div `
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    gap: 5px;
-    padding: 5px;
-    user-select: none;
-    border-top: 1px solid #f3f3f3;
-    /* background-color: ${TMColors.primary_container}; */
-    background-color: white;
+const StyledExeptionToolbar = styled.div `
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 5px;
+    padding: 5px;
+    user-select: none;
+    border-top: 1px solid #f3f3f3;
+    /* background-color: ${TMColors.primary_container}; */
+    background-color: white;
 `;
-const StyledMessageToolbar = styled.div `
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: center;
-    gap: clamp(2px, 1vw, 5px);
-    padding: clamp(3px, 1vw, 5px);
-    user-select: none;
-    border-top: 1px solid #f3f3f3;
-    background-color: #ffffff;
-    z-index: 100;
-    flex-wrap: wrap;
-    
-    @media (max-width: 200px) {
-        flex-direction: column;
-        gap: 2px;
-        padding: 3px;
-        justify-content: center;
-    }
-    
-    @media (max-width: 150px) {
-        padding: 2px;
-        gap: 1px;
-    }
+const StyledMessageToolbar = styled.div `
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    gap: clamp(2px, 1vw, 5px);
+    padding: clamp(3px, 1vw, 5px);
+    user-select: none;
+    border-top: 1px solid #f3f3f3;
+    background-color: #ffffff;
+    z-index: 100;
+    flex-wrap: wrap;
+    
+    @media (max-width: 200px) {
+        flex-direction: column;
+        gap: 2px;
+        padding: 3px;
+        justify-content: center;
+    }
+    
+    @media (max-width: 150px) {
+        padding: 2px;
+        gap: 1px;
+    }
 `;
-const TabContextContainer = styled.div `
-    padding: 10px;
-    height: 100%;
-    width: 100%;
-    border-radius: 5px;
-    overflow: auto;
-    user-select: none;
-    position: relative;
+const TabContextContainer = styled.div `
+    padding: 10px;
+    height: 100%;
+    width: 100%;
+    border-radius: 5px;
+    overflow: auto;
+    user-select: none;
+    position: relative;
 `;
-const StyledAppVersionText = styled.p `
-    width: '200px'; 
-    display: 'flex';
-    flex-direction: row; 
-    justify-content: space-between; 
-    align-items: center; 
-    color: ${props => props.$color};
+const StyledAppVersionText = styled.p `
+    width: '200px'; 
+    display: 'flex';
+    flex-direction: row; 
+    justify-content: space-between; 
+    align-items: center; 
+    color: ${props => props.$color};
 `;
-const StyledCopyInclipBoardButtonContainer = styled.div `
-    position: absolute;
-    bottom: 10px;
-    right: 10px;
+const StyledCopyInclipBoardButtonContainer = styled.div `
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
 `;
 const Message = ({ msg }) => {
     let wrapper = document.createElement('div');
@@ -89,68 +89,68 @@ const Message = ({ msg }) => {
     }, []);
     return (_jsx("div", { ref: containerRef }));
 };
-const ResponsiveMessageContainer = styled.div `
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    width: 100%;
-    background-color: #ffffff;
+const ResponsiveMessageContainer = styled.div `
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    background-color: #ffffff;
 `;
-const ResponsiveMessageContent = styled.div `
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: clamp(8px, 2vw, 20px);
-    padding: clamp(8px, 3vw, 25px) clamp(5px, 2vw, 30px);
-    min-height: clamp(80px, 15vh, 120px);
-    
-    @media (min-width: 300px) {
-        flex-direction: ${props => props.$isMobile ? 'column' : 'row'};
-    }
-    
-    @media (max-width: 200px) {
-        padding: 5px;
-        gap: 5px;
-        min-height: 60px;
-    }
+const ResponsiveMessageContent = styled.div `
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: clamp(8px, 2vw, 20px);
+    padding: clamp(8px, 3vw, 25px) clamp(5px, 2vw, 30px);
+    min-height: clamp(80px, 15vh, 120px);
+    
+    @media (min-width: 300px) {
+        flex-direction: ${props => props.$isMobile ? 'column' : 'row'};
+    }
+    
+    @media (max-width: 200px) {
+        padding: 5px;
+        gap: 5px;
+        min-height: 60px;
+    }
 `;
-const ResponsiveToppyImage = styled.img `
-    width: clamp(25px, 8vw, 60px);
-    height: clamp(31px, 10vw, 75px);
-    flex-shrink: 0;
-    transform: ${props => props.$isMobile ? 'none' : 'translateY(8px)'};
-    
-    @media (max-width: 200px) {
-        width: 20px;
-        height: 25px;
-        transform: none;
-    }
-    
-    @media (min-width: 300px) {
-        transform: ${props => props.$isMobile ? 'none' : 'translateY(8px)'};
-    }
+const ResponsiveToppyImage = styled.img `
+    width: clamp(25px, 8vw, 60px);
+    height: clamp(31px, 10vw, 75px);
+    flex-shrink: 0;
+    transform: ${props => props.$isMobile ? 'none' : 'translateY(8px)'};
+    
+    @media (max-width: 200px) {
+        width: 20px;
+        height: 25px;
+        transform: none;
+    }
+    
+    @media (min-width: 300px) {
+        transform: ${props => props.$isMobile ? 'none' : 'translateY(8px)'};
+    }
 `;
-const ResponsiveMessageText = styled.div `
-    flex: 1;
-    text-align: center;
-    font-size: clamp(12px, 2.5vw, 14px);
-    line-height: clamp(1.2, 1.4, 1.4);
-    color: #333;
-    word-wrap: break-word;
-    overflow-wrap: break-word;
-    hyphens: auto;
-    min-width: 0;
-    
-    @media (min-width: 300px) {
-        text-align: ${props => props.$isMobile ? 'center' : 'left'};
-    }
-    
-    @media (max-width: 150px) {
-        font-size: 8px;
-        line-height: 1.1;
-    }
+const ResponsiveMessageText = styled.div `
+    flex: 1;
+    text-align: center;
+    font-size: clamp(12px, 2.5vw, 14px);
+    line-height: clamp(1.2, 1.4, 1.4);
+    color: #333;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    hyphens: auto;
+    min-width: 0;
+    
+    @media (min-width: 300px) {
+        text-align: ${props => props.$isMobile ? 'center' : 'left'};
+    }
+    
+    @media (max-width: 150px) {
+        font-size: 8px;
+        line-height: 1.1;
+    }
 `;
 // ResponsiveButton wrapper component to avoid circular dependency
 const ResponsiveButton = (props) => {

package/lib/components/base/TMProgressBar.js

@@ -2,28 +2,28 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import styled from 'styled-components';
 import { getColor } from '../../helper';
 import { Colors } from '../../utils/theme';
-const StyledWrapper = styled.div `
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: center;
-    width: fit-content;
+const StyledWrapper = styled.div `
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    width: fit-content;
 `;
-const StyledProgressBarContainer = styled.div `
-    width: 200px;
-    background-color: white;
-    height: 12px;
-    border-radius: 5px;
-    border: 1px solid ${props => getColor(props.color)};
-    overflow: hidden;
+const StyledProgressBarContainer = styled.div `
+    width: 200px;
+    background-color: white;
+    height: 12px;
+    border-radius: 5px;
+    border: 1px solid ${props => getColor(props.color)};
+    overflow: hidden;
 `;
-const StyledProgressBar = styled.div.withConfig({ shouldForwardProp: prop => !['currentValue'].includes(prop) }) `
-    width: ${props => `${200 * props.currentValue}px`};
-    background: rgb(2,0,36);
-    background: linear-gradient(270deg, ${Colors.primary} 0%, ${Colors.primary} 35%, ${Colors.secondary});
-    height: 12px;
-    border-radius: 5px;
-    /* border: 1px solid ${props => getColor(props.color)}; */
+const StyledProgressBar = styled.div.withConfig({ shouldForwardProp: prop => !['currentValue'].includes(prop) }) `
+    width: ${props => `${200 * props.currentValue}px`};
+    background: rgb(2,0,36);
+    background: linear-gradient(270deg, ${Colors.primary} 0%, ${Colors.primary} 35%, ${Colors.secondary});
+    height: 12px;
+    border-radius: 5px;
+    /* border: 1px solid ${props => getColor(props.color)}; */
 `;
 const TMProgressBar = ({ currentValue = 0, color = 'primary', elementStyle, onAbort }) => {
     // console.log(currentValue)

package/lib/components/base/TMResizableMenu.js

@@ -65,34 +65,34 @@ export const TMResizableMenu = forwardRef(({ isVisible, onClose, top, left, bott
     return createPortal(menuContent, portalRoot);
 });
 export default TMResizableMenu;
-const MenuContainer = styled.div `
-  position: absolute;
-  display: ${({ $display }) => $display};
-  background-color: white;
-  border: 1px solid #ccc;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-  overflow: auto;
-  max-width: ${({ $maxWidth }) => ($maxWidth ? `${$maxWidth}px` : 'none')};
-  max-height: ${({ $maxHeight }) => ($maxHeight ? `${$maxHeight}px` : 'none')};
-  border-radius: 6px;
-  padding: ${({ $padding }) => ($padding !== undefined ? `${$padding}px` : '16px')};
-  z-index: 1532;
-  min-width: ${({ $minWidth }) => `${$minWidth ?? 350}px`};
-  min-height: ${({ $minHeight }) => `${$minHeight ?? 500}px`};
+const MenuContainer = styled.div `
+  position: absolute;
+  display: ${({ $display }) => $display};
+  background-color: white;
+  border: 1px solid #ccc;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  overflow: auto;
+  max-width: ${({ $maxWidth }) => ($maxWidth ? `${$maxWidth}px` : 'none')};
+  max-height: ${({ $maxHeight }) => ($maxHeight ? `${$maxHeight}px` : 'none')};
+  border-radius: 6px;
+  padding: ${({ $padding }) => ($padding !== undefined ? `${$padding}px` : '16px')};
+  z-index: 1532;
+  min-width: ${({ $minWidth }) => `${$minWidth ?? 350}px`};
+  min-height: ${({ $minHeight }) => `${$minHeight ?? 500}px`};
 `;
-const ResizeHandle = styled.div `
-  position: absolute;
-  width: 16px;
-  height: 16px;
-  right: 0;
-  bottom: 0;
-  cursor: se-resize;
-  background: linear-gradient(135deg, transparent 40%, #ccc 40%, #ccc 60%, transparent 60%);
+const ResizeHandle = styled.div `
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  right: 0;
+  bottom: 0;
+  cursor: se-resize;
+  background: linear-gradient(135deg, transparent 40%, #ccc 40%, #ccc 60%, transparent 60%);
 `;
-const ResizeOverlay = styled.div `
-  position: fixed;
-  inset: 0;
-  z-index: 1531;
-  pointer-events: all; 
-  cursor: se-resize;
+const ResizeOverlay = styled.div `
+  position: fixed;
+  inset: 0;
+  z-index: 1531;
+  pointer-events: all; 
+  cursor: se-resize;
 `;

package/lib/components/base/TMRightSidebar.js

@@ -36,45 +36,45 @@ const TMRightSidebar = ({ items = [], onItemClick, selectedItem, showPanel = fal
 };
 export default TMRightSidebar;
 // Styled Components
-const SidebarContainer = styled.div `
-  width: 30px;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  background-color: #203e5a;
-  transition: width 0.3s ease;
-  border-bottom-right-radius: 10px;
+const SidebarContainer = styled.div `
+  width: 30px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: #203e5a;
+  transition: width 0.3s ease;
+  border-bottom-right-radius: 10px;
 `;
-const StyledMenuItem = styled.div `
-  width: 100%;
-  display: flex;
-  align-items: center;
-  padding: 8px 0;
-  color: ${props => !props.$disabled ? (props.$isSelected ? props.$selectedColor ?? (TMColors.tertiary) : '#fff') : '#929292'};
-  cursor: ${props => props.$disabled ? 'default' : 'pointer'};
-  position: relative;
-  justify-content: center;
-  background-color: ${props => !props.$disabled ? (props.$isSelected ? '#2e2e2e' : 'transparent') : 'transparent'};
-  transition: background-color 0.3s ease, color 0.3s ease;
-
-  &:hover {
-    background-color: ${props => !props.$disabled && (TMColors.primaryColor)};
-  }
-
-  span {
-    position: absolute;
-    right: 40px;
-    white-space: nowrap;
-    overflow: hidden;
-    font-size: 14px;
-    opacity: ${({ $isHovered }) => ($isHovered ? 1 : 0)};
-    padding: 4px 8px;
-    background-color: #222;
-    border-radius: 4px;
-    color: #fff;
-    pointer-events: none;
-    transition: opacity 0.1s ease, transform 0.1s ease;
-    transform: ${({ $isHovered }) => ($isHovered ? 'translateX(0)' : 'translateX(20px)')};
-  }
+const StyledMenuItem = styled.div `
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: 8px 0;
+  color: ${props => !props.$disabled ? (props.$isSelected ? props.$selectedColor ?? (TMColors.tertiary) : '#fff') : '#929292'};
+  cursor: ${props => props.$disabled ? 'default' : 'pointer'};
+  position: relative;
+  justify-content: center;
+  background-color: ${props => !props.$disabled ? (props.$isSelected ? '#2e2e2e' : 'transparent') : 'transparent'};
+  transition: background-color 0.3s ease, color 0.3s ease;
+
+  &:hover {
+    background-color: ${props => !props.$disabled && (TMColors.primaryColor)};
+  }
+
+  span {
+    position: absolute;
+    right: 40px;
+    white-space: nowrap;
+    overflow: hidden;
+    font-size: 14px;
+    opacity: ${({ $isHovered }) => ($isHovered ? 1 : 0)};
+    padding: 4px 8px;
+    background-color: #222;
+    border-radius: 4px;
+    color: #fff;
+    pointer-events: none;
+    transition: opacity 0.1s ease, transform 0.1s ease;
+    transform: ${({ $isHovered }) => ($isHovered ? 'translateX(0)' : 'translateX(20px)')};
+  }
 `;