@topconsultnpm/sdkui-react 6.20.0-dev1.14 → 6.20.0-dev1.15

package/lib/components/base/Styled.js

@@ -1,337 +0,0 @@
-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 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 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 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 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 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 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 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 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)'} ;
-`;
-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 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 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); }
-`;
-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;
-`;
-//#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 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 StyledAnimatedComponentOpacity = styled.div `
-  opacity: 0;
-  animation: ${opacityChange} 400ms ease forwards normal  ;
-  animation-delay: ${props => props.$delay ?? '0'};
-`;

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

@@ -1,12 +0,0 @@
-import React, { ReactNode } from "react";
-interface TMAccordionProps {
-    title: string;
-    titleSize?: "Small" | "Medium";
-    children: ReactNode;
-    defaultOpen?: boolean;
-    defaultCollapsed?: boolean;
-    firstCounter?: ReactNode;
-    secondCounter?: ReactNode;
-}
-declare const TMAccordion: React.FC<TMAccordionProps>;
-export default TMAccordion;

package/lib/components/base/TMAccordion.js

@@ -1,62 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import styled from "styled-components";
-import { IconChevronDown, IconChevronRight } from "../../helper";
-import { TMColors } from "../../utils/theme";
-const TMAccordion = ({ title, titleSize = 'Medium', children, defaultOpen = true, defaultCollapsed, firstCounter, secondCounter }) => {
-    // Se defaultCollapsed è definito, ha la precedenza su defaultOpen
-    const [isOpen, setIsOpen] = useState(defaultCollapsed !== undefined ? !defaultCollapsed : defaultOpen);
-    const toggleAccordion = () => {
-        setIsOpen(!isOpen);
-    };
-    const renderTitle = () => (_jsx("span", { className: `tm-accordion-title${titleSize === "Small" ? " small" : ""}`, children: title }));
-    return (_jsxs(StyledAccordionContainer, { children: [_jsxs(StyledGroupTemplate, { onClick: toggleAccordion, children: [isOpen ? _jsx(IconChevronDown, { fontSize: 20 }) : _jsx(IconChevronRight, { fontSize: 20 }), renderTitle(), firstCounter && _jsx("span", { style: { marginLeft: 8 }, children: firstCounter }), secondCounter && _jsx("span", { style: { marginLeft: 8 }, children: secondCounter })] }), isOpen && (_jsx(StyledAccordionContent, { children: children }))] }));
-};
-export default TMAccordion;
-//#region Styled Components
-const StyledAccordionContainer = styled.div `
-    margin-bottom: 10px;
-    overflow: hidden;
-`;
-const StyledGroupTemplate = styled.div `
-    cursor: pointer;
-    background: none !important;
-    border: none !important;
-    box-shadow: none !important;
-    padding: 10px;
-    display: flex;
-    flex-direction: row;
-    gap: 5px;
-    align-items: center;
-    font-size: 1rem;
-    font-weight: 600; 
-    color: ${() => TMColors.primaryColor};
-    position: relative;
-
-    .tm-accordion-title, .tm-accordion-title.small {
-        font-weight: 600;
-        margin: 0;
-    }
-    .tm-accordion-title.small {
-        font-size: 1rem;
-    }
-    .tm-accordion-title {
-        font-size: 1.25rem;
-    }
-
-    &::after {
-        content: '';
-        display: block;
-        width: calc(100% - 35px);
-        margin: 0 auto;
-        border-bottom: 1px solid #00A99D;
-        margin-top: 8px;
-        position: absolute;
-        left: 35px;
-        bottom: 0;
-    }
-`;
-const StyledAccordionContent = styled.div `
-    padding: 10px;
-    background-color: #fff; /* White background for the content area */
-`;

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

@@ -1,28 +0,0 @@
-import React from 'react';
-export interface TMAccordionBadge {
-    badge: number;
-    tooltip?: string;
-}
-export interface TMAccordionGroup {
-    id: string;
-    title: string;
-    dataSource?: Array<any>;
-    color?: string;
-    icon?: React.ReactNode;
-    isExpanded?: boolean;
-    contextMenuItems?: Array<any> | ((item: any) => Array<any>);
-    onItemClick?: (item: any) => void;
-    onItemDoubleClick?: (item: any) => void;
-    renderItem?: (item: any, isSelected: boolean, isFocused: boolean, color: string) => React.ReactNode;
-    itemHeight?: number;
-    badges?: TMAccordionBadge[];
-    customComponent?: React.ReactNode;
-}
-export interface TMAccordionProps {
-    groups?: Array<TMAccordionGroup>;
-    localStorageKey?: string;
-    selectedItem?: any;
-    onSelectedItemChange?: (item: any) => void;
-}
-declare const TMAccordion: React.FC<TMAccordionProps>;
-export default TMAccordion;