@topconsultnpm/sdkui-react 6.19.0-dev1.10

package/lib/components/base/Styled.js

@@ -0,0 +1,297 @@
+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 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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,62 @@
+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: 90%;
+        margin: 0 auto;
+        border-bottom: 1px solid #00A99D;
+        margin-top: 8px;
+        position: absolute;
+        left: 5%;
+        bottom: 0;
+    }
+`;
+const StyledAccordionContent = styled.div `
+    padding: 10px;
+    background-color: #fff; /* White background for the content area */
+`;

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

@@ -0,0 +1,73 @@
+interface AlertVariant {
+    variant: string;
+    color: string;
+    borderColor: string;
+    icon: JSX.Element;
+    textColor: string;
+}
+interface AlertModes {
+    warning: AlertVariant;
+    error: AlertVariant;
+    success: AlertVariant;
+    info: AlertVariant;
+}
+declare const TMAlertPosition: {
+    readonly TOP_RIGHT: {
+        readonly top: "10px";
+        readonly right: "10px";
+        readonly position: "absolute";
+    };
+    readonly TOP_CENTER: {
+        readonly top: "10px";
+        readonly left: "50%";
+        readonly transform: "translateX(-50%)";
+        readonly position: "absolute";
+    };
+    readonly TOP_LEFT: {
+        readonly top: "10px";
+        readonly left: "10px";
+        readonly position: "absolute";
+    };
+    readonly BOTTOM_RIGHT: {
+        readonly bottom: "10px";
+        readonly right: "10px";
+        readonly position: "absolute";
+    };
+    readonly BOTTOM_LEFT: {
+        readonly bottom: "10px";
+        readonly left: "10px";
+        readonly position: "absolute";
+    };
+    readonly BOTTOM_CENTER: {
+        readonly bottom: "10px";
+        readonly left: "50%";
+        readonly transform: "translateX(-50%)";
+        readonly position: "absolute";
+    };
+    readonly CENTER_RIGHT: {
+        readonly top: "50%";
+        readonly right: "10px";
+        readonly transform: "translateY(-50%)";
+        readonly position: "absolute";
+    };
+    readonly CENTER_LEFT: {
+        readonly top: "50%";
+        readonly left: "10px";
+        readonly transform: "translateY(-50%)";
+        readonly position: "absolute";
+    };
+    readonly CENTER_CENTER: {
+        readonly top: "50%";
+        readonly left: "50%";
+        readonly transform: "translate(-50%, -50%)";
+        readonly position: "absolute";
+    };
+};
+declare const ShowAlert: ({ mode, message, duration, title, position }: {
+    mode: keyof AlertModes;
+    message: string;
+    duration?: number;
+    title?: string;
+    position?: keyof typeof TMAlertPosition;
+}) => void;
+export default ShowAlert;

package/lib/components/base/TMAlert.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect } from 'react';
+import ReactDOM from 'react-dom/client';
+import { IconCloseCircle, IconInfo, IconSuccess, IconWarning } from '../../helper';
+const TMAlertPosition = {
+    TOP_RIGHT: { top: '10px', right: '10px', position: 'absolute' },
+    TOP_CENTER: { top: '10px', left: '50%', transform: 'translateX(-50%)', position: 'absolute' },
+    TOP_LEFT: { top: '10px', left: '10px', position: 'absolute' },
+    BOTTOM_RIGHT: { bottom: '10px', right: '10px', position: 'absolute' },
+    BOTTOM_LEFT: { bottom: '10px', left: '10px', position: 'absolute' },
+    BOTTOM_CENTER: { bottom: '10px', left: '50%', transform: 'translateX(-50%)', position: 'absolute' },
+    CENTER_RIGHT: { top: '50%', right: '10px', transform: 'translateY(-50%)', position: 'absolute' },
+    CENTER_LEFT: { top: '50%', left: '10px', transform: 'translateY(-50%)', position: 'absolute' },
+    CENTER_CENTER: { top: '50%', left: '50%', transform: 'translate(-50%, -50%)', position: 'absolute' },
+};
+const Mode = {
+    warning: {
+        variant: 'warning',
+        color: 'transparent linear-gradient(272deg, #FFFFFF 0%, #EAD305 100%) 0% 0% no-repeat padding-box',
+        borderColor: '#ba873d',
+        textColor: '#6e5024',
+        icon: _jsx(IconWarning, { fontSize: 16, color: '#F0AD4E' }),
+    },
+    error: {
+        variant: 'error',
+        color: 'transparent linear-gradient(272deg, #FFFFFF 0%, #E87A8E 100%) 0% 0% no-repeat padding-box',
+        borderColor: '#a8413e',
+        textColor: '#4a1b1b',
+        icon: _jsx(IconCloseCircle, { fontSize: 16, color: '#D9534F' }),
+    },
+    success: {
+        variant: 'success',
+        color: 'transparent linear-gradient(272deg, #FFFFFF 0%, #6DB735 100%) 0% 0% no-repeat padding-box',
+        borderColor: '#4d994d',
+        textColor: '#203d20',
+        icon: _jsx(IconSuccess, { fontSize: 16, color: '#5CB85C' }),
+    },
+    info: {
+        variant: 'info',
+        color: 'transparent linear-gradient(272deg, #FFFFFF 0%, #679CE8 100%) 0% 0% no-repeat padding-box',
+        borderColor: '#285f8f',
+        textColor: '#16354f',
+        icon: _jsx(IconInfo, { fontSize: 16, color: '#337AB7' }),
+    },
+};
+// const TMAlert = ({ mode, duration = 5000, message, position = 'BOTTOM_CENTER' }: { mode: keyof AlertModes, duration?: number, message: string, position?: keyof typeof TMAlertPosition }) => {
+const TMAlert = ({ mode, duration = 1000, title, message, position = 'BOTTOM_RIGHT' }) => {
+    const [currentWidth, setCurrentWidth] = useState(window.innerWidth);
+    const [container] = useState(document.getElementsByClassName('tm-alert-temporary-container'));
+    useEffect(() => {
+        window.addEventListener('resize', () => {
+            setCurrentWidth(window.innerWidth);
+        });
+    }, [currentWidth]);
+    useEffect(() => {
+        const tiemout = setTimeout(() => {
+            let container = document.getElementsByClassName('tm-alert-temporary-container');
+            container[0]?.remove();
+        }, duration + 50);
+        return () => {
+            clearTimeout(tiemout);
+        };
+    }, [container]);
+    // Determine the style for the alert container based on the position prop
+    const alertContainerStyle = TMAlertPosition[position];
+    return (_jsx("div", { style: { width: '100%', paddingTop: '3px', ...alertContainerStyle }, children: _jsx("div", { className: 'tm-alert-animation-style', style: { animationDuration: `${duration}ms`, position: 'relative', float: 'right', zIndex: '20000999', width: '356px', height: '86px', borderRadius: '8px', overflow: 'hidden', border: '2px white solid', boxShadow: '0px 3px 6px #00000029' }, children: _jsx("div", { className: 'tm-alert-animation-style', style: { animationDuration: `${duration}ms` }, children: _jsxs("div", { className: 'tm-alert-container', style: { background: Mode[mode].color, animationDuration: `${duration}ms` }, children: [_jsxs("div", { className: "tm-alert-context", style: { position: 'relative' }, children: [_jsx("div", { className: 'tm-alert-icon', style: { position: 'absolute', top: '12px', left: '12px', paddingTop: '1px' }, children: Mode[mode].icon }), _jsx("div", { style: { color: Mode[mode].textColor, position: 'absolute', top: '15px', left: '45px', textAlign: 'left', fontSize: '1.1rem', fontWeight: 'bold', maxWidth: '280px' }, children: title }), _jsx("div", { style: { color: Mode[mode].textColor, position: 'absolute', top: '35px', left: '45px', textAlign: 'left', fontSize: '1rem', maxWidth: '280px' }, children: message })] }), _jsx("div", { className: 'tm-alert-loading', style: { backgroundImage: `linear-gradient(to right, ${Mode[mode].borderColor}, ${Mode[mode].textColor})`, animationDuration: `${duration}ms` } })] }) }) }) }));
+};
+const ShowAlert = ({ mode, message, duration, title, position = 'BOTTOM_RIGHT' }) => {
+    let container = document.createElement('div');
+    container.setAttribute("class", 'tm-alert-temporary-container');
+    document.body.appendChild(container);
+    // container.style.position = 'relative'
+    container.style.display = 'flex';
+    const root = ReactDOM.createRoot(container);
+    root.render(_jsx(React.StrictMode, { children: _jsx(TMAlert, { message: message, mode: mode, duration: duration, title: title, position: position }) }));
+};
+export default ShowAlert;

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { ITopMediaSession } from '@topconsultnpm/sdk-ts';
+export declare class TMFileSystemItem {
+    dataItem: any;
+    name: string;
+    thumbnail: string;
+    isDirectory: boolean;
+    size: number | undefined;
+    dateModified: Date | undefined;
+}
+interface ITMAreaManager {
+    width?: string;
+    height?: string;
+    areaChoose?: any;
+    initialPath?: string;
+    areaStatus?: boolean;
+    isPathChooser?: boolean;
+    showOnlyFolders?: boolean;
+    tmSession?: ITopMediaSession;
+    selectionMode?: 'single' | 'multiple';
+    onFileChanged?: (event: string) => void;
+    onFolderChanged?: (event: string) => void;
+}
+declare const TMAreaManager: React.FC<ITMAreaManager>;
+export default TMAreaManager;