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

package/lib/components/base/Styled.js

@@ -2,336 +2,336 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 import styled, { keyframes } from 'styled-components';
 import { ResultTypes } from '@topconsultnpm/sdk-ts';
 import { FontSize, Gutters, TMColors } from '../../utils/theme';
-export const StyledDivHorizontal = styled.div `
-    display: flex; 
-    flex-direction: row; 
-    align-items: center; 
-    justify-content: flex-start;
+export const StyledDivHorizontal = styled.div `
+    display: flex; 
+    flex-direction: row; 
+    align-items: center; 
+    justify-content: flex-start;
 `;
-export const StyledMultiViewPanel = styled.div `
-    display: flex; 
-    width: 100%;
-    height: 100%;
-    position: ${(props) => props.$isVisible ? 'relative' : 'absolute'};
-    left: ${(props) => props.$isVisible ? '0px' : '-9999px'};
-    top: ${(props) => props.$isVisible ? '0px' : '-9999px'};
-    visibility: ${(props) => props.$isVisible ? 'visible' : 'hidden'};
+export const StyledMultiViewPanel = styled.div `
+    display: flex; 
+    width: 100%;
+    height: 100%;
+    position: ${(props) => props.$isVisible ? 'relative' : 'absolute'};
+    left: ${(props) => props.$isVisible ? '0px' : '-9999px'};
+    top: ${(props) => props.$isVisible ? '0px' : '-9999px'};
+    visibility: ${(props) => props.$isVisible ? 'visible' : 'hidden'};
 `;
-export const StyledParagraph = styled.p `
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    padding: 0 10px;
-    font-size: 1rem;
+export const StyledParagraph = styled.p `
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 0 10px;
+    font-size: 1rem;
 `;
-export const StyledToolbarForm = styled.div `
-    display: flex; 
-    flex-direction: row; 
-    align-items: center; 
-    justify-content: flex-start;
-    height: 35px;
-    width: 100%;
-    padding-left: 10px;
-    gap: 2px;
-    background-color: ${TMColors.toolbar_background};
+export const StyledToolbarForm = styled.div `
+    display: flex; 
+    flex-direction: row; 
+    align-items: center; 
+    justify-content: flex-start;
+    height: 35px;
+    width: 100%;
+    padding-left: 10px;
+    gap: 2px;
+    background-color: ${TMColors.toolbar_background};
 `;
-export const StyledReferenceButton = styled.button `
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 10px 16px;
-    border-radius: 20px;
-    border: none;
-    background-color: ${TMColors.button_floating_background};
-    color: white;
-    font-size: 0.9rem;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    text-align: center;
-    max-width: 200px;
-    gap: 2px;
-    
-    &:hover {
-        opacity: 0.9;
-        transform: translateY(-1px);
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-    }
-    
-    &:active {
-        transform: translateY(0);
-    }
-    
-    &:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-    }
-    
-    span {
-        width: 100%;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
+export const StyledReferenceButton = styled.button `
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 10px 16px;
+    border-radius: 20px;
+    border: none;
+    background-color: ${TMColors.button_floating_background};
+    color: white;
+    font-size: 0.9rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    text-align: center;
+    max-width: 200px;
+    gap: 2px;
+    
+    &:hover {
+        opacity: 0.9;
+        transform: translateY(-1px);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    }
+    
+    &:active {
+        transform: translateY(0);
+    }
+    
+    &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+    
+    span {
+        width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
 `;
-export const StyledPanelPage = styled.div ` 
-  position: absolute; 
-  width: calc(100% - 50px); 
-  top: ${(props) => props.$isOpen ? '50px' : '-9999px'}; 
-  left: ${(props) => props.$isOpen ? '50px' : '-9999px'}; 
-  visibility: ${(props) => props.$isOpen ? 'visible' : 'hidden'}; 
-  bottom: 0; 
-  border-radius: 0px; 
-  background: ${(props) => props.$background ?? 'transparent'}; 
-  z-index: 1500; 
-  overflow: hidden;
-
-  @media (min-width: 768px) {
-    padding: ${(props) => props.$padding ?? `${Gutters.defaultDesktop}px`};
-    padding-right: ${(props) => props.$withMenu ? '0' : 'auto'};
-  }
-
-  @media (max-width: 767px) {
-    padding: ${(props) => props.$padding ?? `${Gutters.defaultMobile}px`};
-  }
+export const StyledPanelPage = styled.div ` 
+  position: absolute; 
+  width: calc(100% - 50px); 
+  top: ${(props) => props.$isOpen ? '50px' : '-9999px'}; 
+  left: ${(props) => props.$isOpen ? '50px' : '-9999px'}; 
+  visibility: ${(props) => props.$isOpen ? 'visible' : 'hidden'}; 
+  bottom: 0; 
+  border-radius: 0px; 
+  background: ${(props) => props.$background ?? 'transparent'}; 
+  z-index: 1500; 
+  overflow: hidden;
+
+  @media (min-width: 768px) {
+    padding: ${(props) => props.$padding ?? `${Gutters.defaultDesktop}px`};
+    padding-right: ${(props) => props.$withMenu ? '0' : 'auto'};
+  }
+
+  @media (max-width: 767px) {
+    padding: ${(props) => props.$padding ?? `${Gutters.defaultMobile}px`};
+  }
 `;
-export const StyledClickableIconWrapper = styled.div ` 
-    width: 100%;
-    flex-grow: 1; 
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 30px;
-    cursor: ${props => props.$disabled ? 'not-allowed' : 'pointer'}; 
-    opacity: ${props => props.$disabled ? 0.5 : 1}; 
-    &:hover {
-        background-color: ${props => props.$disabled ? 'transparent' : 'rgba(255, 255, 255, 0.1)'};
-    }
+export const StyledClickableIconWrapper = styled.div ` 
+    width: 100%;
+    flex-grow: 1; 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 30px;
+    cursor: ${props => props.$disabled ? 'not-allowed' : 'pointer'}; 
+    opacity: ${props => props.$disabled ? 0.5 : 1}; 
+    &:hover {
+        background-color: ${props => props.$disabled ? 'transparent' : 'rgba(255, 255, 255, 0.1)'};
+    }
 `;
-export const StyledOffCanvasPanel = styled.div `
-  position: fixed;
-  background-color: ${TMColors.default_background};
-  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
-  transition: transform 0.3s ease, visibility 0.3s ease;
-  z-index: 1502;
-  display: flex;
-  flex-direction: column;
-  border-top-left-radius: 10px;
-  border-bottom-left-radius: 10px;
-
-  /* Default: Open from the right */
-  top: 0;
-  right: 0;
-  width: ${({ $width }) => $width ?? '550px'}; /* Use $width or default to 550px */
-  max-width: 100%;
-  height: 100%;
-  transform: ${({ $isOpen }) => ($isOpen ? 'translateX(0)' : 'translateX(100%)')};
-  visibility: ${({ $isOpen }) => ($isOpen ? 'visible' : 'hidden')};
-
-  /* Mobile: Open from the bottom */
-  @media (max-width: 768px) {
-    top: auto;
-    bottom: 0;
-    right: 0;
-    width: 100%;
-    height: ${({ $mobileHeight }) => $mobileHeight ?? '90%'}; /* Use $mobileHeight or default to 90% */
-    transform: ${({ $isOpen }) => ($isOpen ? 'translateY(0)' : 'translateY(100%)')};
-    visibility: ${({ $isOpen }) => ($isOpen ? 'visible' : 'hidden')};
-    border-top-left-radius: 10px;
-    border-top-right-radius: 10px;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
+export const StyledOffCanvasPanel = styled.div `
+  position: fixed;
+  background-color: ${TMColors.default_background};
+  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
+  transition: transform 0.3s ease, visibility 0.3s ease;
+  z-index: 1502;
+  display: flex;
+  flex-direction: column;
+  border-top-left-radius: 10px;
+  border-bottom-left-radius: 10px;
+
+  /* Default: Open from the right */
+  top: 0;
+  right: 0;
+  width: ${({ $width }) => $width ?? '550px'}; /* Use $width or default to 550px */
+  max-width: 100%;
+  height: 100%;
+  transform: ${({ $isOpen }) => ($isOpen ? 'translateX(0)' : 'translateX(100%)')};
+  visibility: ${({ $isOpen }) => ($isOpen ? 'visible' : 'hidden')};
+
+  /* Mobile: Open from the bottom */
+  @media (max-width: 768px) {
+    top: auto;
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    height: ${({ $mobileHeight }) => $mobileHeight ?? '90%'}; /* Use $mobileHeight or default to 90% */
+    transform: ${({ $isOpen }) => ($isOpen ? 'translateY(0)' : 'translateY(100%)')};
+    visibility: ${({ $isOpen }) => ($isOpen ? 'visible' : 'hidden')};
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
 `;
-export const StyledOverlay = styled.div `
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.4);
-  opacity: ${({ $isOpen }) => ($isOpen ? 1 : 0)};
-  visibility: ${({ $isOpen }) => ($isOpen ? 'visible' : 'hidden')};
-  transition: opacity 0.3s ease, visibility 0.3s ease;
-  z-index: 1501;
+export const StyledOverlay = styled.div `
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.4);
+  opacity: ${({ $isOpen }) => ($isOpen ? 1 : 0)};
+  visibility: ${({ $isOpen }) => ($isOpen ? 'visible' : 'hidden')};
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+  z-index: 1501;
 `;
-export const StyledModalContainer = styled.div `
-    position: absolute;
-    width: 100%;
-    height: calc(100%);//TODO: Centralizzare STATUSBAR_HEIGHT
-    top: 0;
-    left: 0;
-    background-color: transparent;
-    z-index: 100;//TODO: Devexpress checkbox DataGrid z-index: 2
+export const StyledModalContainer = styled.div `
+    position: absolute;
+    width: 100%;
+    height: calc(100%);//TODO: Centralizzare STATUSBAR_HEIGHT
+    top: 0;
+    left: 0;
+    background-color: transparent;
+    z-index: 100;//TODO: Devexpress checkbox DataGrid z-index: 2
 `;
-export const StyledResultTypeContainer = styled.div `
-    display: flex; 
-    align-items: center; 
-    justify-content: center; 
-    width: fit-content; 
-    gap: 5px; 
-    padding: 6px 3px; 
-    height: 100%; 
-    border-radius: 3px; 
-    color: white; 
-    font-weight: bold; 
-    cursor: pointer;
-    background-color: ${props => props.$resultType === ResultTypes.ERROR ? TMColors.error : props.$resultType === ResultTypes.WARNING ? TMColors.warning : TMColors.success}; 
+export const StyledResultTypeContainer = styled.div `
+    display: flex; 
+    align-items: center; 
+    justify-content: center; 
+    width: fit-content; 
+    gap: 5px; 
+    padding: 6px 3px; 
+    height: 100%; 
+    border-radius: 3px; 
+    color: white; 
+    font-weight: bold; 
+    cursor: pointer;
+    background-color: ${props => props.$resultType === ResultTypes.ERROR ? TMColors.error : props.$resultType === ResultTypes.WARNING ? TMColors.warning : TMColors.success}; 
 `;
-export const StyledTooltipSeparatorItem = styled.hr `
-  width: 75%;
-  margin-bottom: 3px;
+export const StyledTooltipSeparatorItem = styled.hr `
+  width: 75%;
+  margin-bottom: 3px;
 `;
-export const StyledTooltipItem = styled.div `
-  margin-right: 5px;
-  margin-bottom: 3px;
-  margin-top: ${props => props.$marginTop ?? '0px'};
-  color: ${TMColors.text_normal};
-  font-size: ${props => props.$fontSize ?? FontSize.defaultFontSize};
+export const StyledTooltipItem = styled.div `
+  margin-right: 5px;
+  margin-bottom: 3px;
+  margin-top: ${props => props.$marginTop ?? '0px'};
+  color: ${TMColors.text_normal};
+  font-size: ${props => props.$fontSize ?? FontSize.defaultFontSize};
 `;
-export const StyledTooltipContainer = styled.div `
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    z-index: 100; //TODO: Devexpress checkbox DataGrid z-index: 2
+export const StyledTooltipContainer = styled.div `
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    z-index: 100; //TODO: Devexpress checkbox DataGrid z-index: 2
 `;
-export const StyledDraggableDiv = styled.div `
-    display: flex;
-    cursor: move;
+export const StyledDraggableDiv = styled.div `
+    display: flex;
+    cursor: move;
 `;
-export const StyledBadge = styled.div `
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    background-color: ${(props) => props.$backgroundColor};
-    color: #fff;
-    font-size: 10px;
-    padding: 0 6px;
-    border-radius: 999em;
-    line-height: 16px;
-    margin-left: 5px;
+export const StyledBadge = styled.div `
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background-color: ${(props) => props.$backgroundColor};
+    color: #fff;
+    font-size: 10px;
+    padding: 0 6px;
+    border-radius: 999em;
+    line-height: 16px;
+    margin-left: 5px;
 `;
-export const StyledDxGridGroupHeader = styled.div `
-    display: flex; 
-    flex-direction: row; 
-    align-items: center; 
-    justify-content: flex-start;
-    gap: 5px;
-    height: 30px;
-    font-weight: bold;
-    /* background-image: linear-gradient(white, #E4E9F7); */
-    background: ${(props) => props.$backgroundColor ? `linear-gradient(90deg, #f0f4fa, ${props.$backgroundColor}) ` : 'linear-gradient(90deg, #f0f4fa, #135596)'} ;
+export const StyledDxGridGroupHeader = styled.div `
+    display: flex; 
+    flex-direction: row; 
+    align-items: center; 
+    justify-content: flex-start;
+    gap: 5px;
+    height: 30px;
+    font-weight: bold;
+    /* background-image: linear-gradient(white, #E4E9F7); */
+    background: ${(props) => props.$backgroundColor ? `linear-gradient(90deg, #f0f4fa, ${props.$backgroundColor}) ` : 'linear-gradient(90deg, #f0f4fa, #135596)'} ;
 `;
-const StyledCellRenderObjectIcon = styled.div `
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    overflow: visible;
+const StyledCellRenderObjectIcon = styled.div `
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    overflow: visible;
 `;
 export const cellRenderObjectIcon = (icon) => (_jsxs(StyledCellRenderObjectIcon, { children: [" ", icon, " "] }));
-export const StyledChartOverlay = styled.div `
-    top: 0; 
-    left: 0;
-    right: 0; 
-    bottom: 0;
-    opacity: .6;
-    z-index: 999;
-    display: flex;
-    position: absolute;
-    align-items: center;
-    justify-content: center;
-    background-color: ${(props) => props.$backgroundColor ?? 'black'};
+export const StyledChartOverlay = styled.div `
+    top: 0; 
+    left: 0;
+    right: 0; 
+    bottom: 0;
+    opacity: .6;
+    z-index: 999;
+    display: flex;
+    position: absolute;
+    align-items: center;
+    justify-content: center;
+    background-color: ${(props) => props.$backgroundColor ?? 'black'};
 `;
-export const StyledBtnLoadChart = styled.button `
-	display: flex;
-	font-size: 18px;
-	color: #383b3a;
-	padding: 8px 15px;
-	border-radius: 5px;
-	align-items: center;
-    background: #eeeeee;
-	transition: all 300ms;
-	border: 2px solid black;
-	justify-content: center;
-	box-shadow: 3px 5px #bbbbbb;
-	&:hover {
-      color: black;
-	  cursor: pointer;
-	  transform: translateY(1px);
-	  box-shadow: 1px 1px #bbbbbb;
-	  background-color: ${(props) => props.$backgroundColor ?? 'orange'};
-	  .iconrefresh {
-		transition:.5s;
-		transform: rotate(180deg);
-		color: black;
-	  }
-	}
-	&:active {
-	  transform: translateY(3px);
-	  box-shadow: 0 0 1px #bbbbbb;
-	}
+export const StyledBtnLoadChart = styled.button `
+	display: flex;
+	font-size: 18px;
+	color: #383b3a;
+	padding: 8px 15px;
+	border-radius: 5px;
+	align-items: center;
+    background: #eeeeee;
+	transition: all 300ms;
+	border: 2px solid black;
+	justify-content: center;
+	box-shadow: 3px 5px #bbbbbb;
+	&:hover {
+      color: black;
+	  cursor: pointer;
+	  transform: translateY(1px);
+	  box-shadow: 1px 1px #bbbbbb;
+	  background-color: ${(props) => props.$backgroundColor ?? 'orange'};
+	  .iconrefresh {
+		transition:.5s;
+		transform: rotate(180deg);
+		color: black;
+	  }
+	}
+	&:active {
+	  transform: translateY(3px);
+	  box-shadow: 0 0 1px #bbbbbb;
+	}
 `;
-export const StyledFormButtonsContainer = styled.div ` 
-    display: flex; 
-    justify-content: center;
-    align-items: center;
-    padding: 10px;
-    position: relative;
-    width: 100%; 
-    min-width: max-content;
-    gap: 80px; 
+export const StyledFormButtonsContainer = styled.div ` 
+    display: flex; 
+    justify-content: center;
+    align-items: center;
+    padding: 10px;
+    position: relative;
+    width: 100%; 
+    min-width: max-content;
+    gap: 80px; 
 `;
-export const StyledToolbarCardContainer = styled.div ` 
-    background-color: #ffffff; 
-    width: 100%; 
-    height: 100%; 
-    display: flex; 
-    flex-direction: column; 
-    gap: 10px; 
+export const StyledToolbarCardContainer = styled.div ` 
+    background-color: #ffffff; 
+    width: 100%; 
+    height: 100%; 
+    display: flex; 
+    flex-direction: column; 
+    gap: 10px; 
 `;
-const spinAnimation = keyframes `
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
+const spinAnimation = keyframes `
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
 `;
-export const StyledSpinner = styled.div `
-  border: 4px solid #f3f3f3; /* Light grey */
-  border-top: 4px solid #C2388B; /* Colore primario della toolbar */
-  border-radius: 50%;
-  width: 40px;
-  height: 40px;
-  animation: ${spinAnimation} 1s linear infinite;
+export const StyledSpinner = styled.div `
+  border: 4px solid #f3f3f3; /* Light grey */
+  border-top: 4px solid #C2388B; /* Colore primario della toolbar */
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  animation: ${spinAnimation} 1s linear infinite;
 `;
-export const StyledLoadingContainer = styled.div `
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 15px;
-  font-size: 1rem;
-  color: #555;
+export const StyledLoadingContainer = styled.div `
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 15px;
+  font-size: 1rem;
+  color: #555;
 `;
 //#region  Animations
-const scaleAndColorChange = (scaleValue) => keyframes `
-  0% { transform: scale(1); color: white; }
-  50% { transform: scale(${scaleValue}); color: orange; }
-  100% { transform: scale(1); color: white; }
+const scaleAndColorChange = (scaleValue) => keyframes `
+  0% { transform: scale(1); color: white; }
+  50% { transform: scale(${scaleValue}); color: orange; }
+  100% { transform: scale(1); color: white; }
 `;
-const opacityChange = keyframes `
-  from { opacity: 0; }
-  to { opacity: 1; }
+const opacityChange = keyframes `
+  from { opacity: 0; }
+  to { opacity: 1; }
 `;
-export const StyledAnimatedComponentScaleColor = styled.div `
-  animation: ${props => scaleAndColorChange(props.$scale ?? 1.5)} 400ms ease-in-out ;
-  animation-delay: ${props => props.$delay ?? '0'};
+export const StyledAnimatedComponentScaleColor = styled.div `
+  animation: ${props => scaleAndColorChange(props.$scale ?? 1.5)} 400ms ease-in-out ;
+  animation-delay: ${props => props.$delay ?? '0'};
 `;
-export const StyledAnimatedComponentOpacity = styled.div `
-  opacity: 0;
-  animation: ${opacityChange} 400ms ease forwards normal  ;
-  animation-delay: ${props => props.$delay ?? '0'};
+export const StyledAnimatedComponentOpacity = styled.div `
+  opacity: 0;
+  animation: ${opacityChange} 400ms ease forwards normal  ;
+  animation-delay: ${props => props.$delay ?? '0'};
 `;