@topconsultnpm/sdkui-react 6.22.0-dev3.22 → 6.22.0-dev3.24

package/lib/components/base/TMPanel.js

@@ -6,97 +6,97 @@ import TMButton from './TMButton';
 import { LoadIndicator } from 'devextreme-react/load-indicator';
 import { TMExceptionBoxManager } from './TMPopUp';
 import { Gutters, TMColors } from '../../utils/theme';
-const StyledBackButton = styled.button `
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 4px;
-    padding: 4px 10px;
-    border: 1px solid ${({ $isActive }) => $isActive ? 'rgba(37, 89, 165, 0.3)' : 'rgba(255, 255, 255, 0.4)'};
-    border-radius: 6px;
-    cursor: pointer;
-    font-weight: 500;
-    font-size: 0.85rem;
-    flex-shrink: 0;
-    transition: all 0.15s ease;
-    background-color: ${({ $isActive }) => $isActive ? '#FFFFFF' : '#2559A5'};
-    box-shadow: none;
-    
-    &&, && * {
-        color: ${({ $isActive }) => $isActive ? '#2559A5' : '#FFFFFF'} !important;
-    }
-    
-    svg {
-        font-size: 14px;
-    }
+const StyledBackButton = styled.button `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    padding: 4px 10px;
+    border: 1px solid ${({ $isActive }) => $isActive ? 'rgba(37, 89, 165, 0.3)' : 'rgba(255, 255, 255, 0.4)'};
+    border-radius: 6px;
+    cursor: pointer;
+    font-weight: 500;
+    font-size: 0.85rem;
+    flex-shrink: 0;
+    transition: all 0.15s ease;
+    background-color: ${({ $isActive }) => $isActive ? '#FFFFFF' : '#2559A5'};
+    box-shadow: none;
+    
+    &&, && * {
+        color: ${({ $isActive }) => $isActive ? '#2559A5' : '#FFFFFF'} !important;
+    }
+    
+    svg {
+        font-size: 14px;
+    }
 `;
 import { AppModules, SDK_Globals } from '@topconsultnpm/sdk-ts';
 import { DeviceType, useDeviceType } from './TMDeviceProvider';
-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'};
-    outline: none;
-    /* 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'};
+    outline: none;
+    /* 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, $activeGradient }) => $isActive
     ? ($activeGradient ??
         '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;
-    -webkit-touch-callout: none;
-  -webkit-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;
+    -webkit-touch-callout: none;
+  -webkit-user-select: none;
+    outline: none;
+    &:focus {
+        outline: none;
+    }
 `;
 // Allineata al TABLET_BREAKPOINT (768) di TMDeviceProvider
 const MOBILE_MEDIA_QUERY = '(max-width: 767.98px)';
@@ -105,102 +105,102 @@ const MOBILE_MEDIA_QUERY = '(max-width: 767.98px)';
 // la track (larga quanto il viewport) va a +100% della PROPRIA larghezza, il testo a -100%
 // della SUA. Le due animazioni hanno stessa durata ed easing, quindi lo scostamento netto
 // in ogni istante è esattamente e(t) * (viewport - testo).
-const panelTitleTrackMarquee = keyframes `
-    0%, 15% { transform: translateX(0); }
-    45%, 55% { transform: translateX(100%); }
-    85%, 100% { transform: translateX(0); }
+const panelTitleTrackMarquee = keyframes `
+    0%, 15% { transform: translateX(0); }
+    45%, 55% { transform: translateX(100%); }
+    85%, 100% { transform: translateX(0); }
 `;
-const panelTitleTextMarquee = keyframes `
-    0%, 15% { transform: translateX(0); }
-    45%, 55% { transform: translateX(-100%); }
-    85%, 100% { transform: translateX(0); }
+const panelTitleTextMarquee = keyframes `
+    0%, 15% { transform: translateX(0); }
+    45%, 55% { transform: translateX(-100%); }
+    85%, 100% { transform: translateX(0); }
 `;
 // Ritaglia il testo in eccesso: è l'unico box con overflow hidden, la track ci scorre dentro
-const StyledPanelTitleViewport = styled.div `
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    min-width: 0;
-    overflow: hidden;
-    padding: 0 8px;
+const StyledPanelTitleViewport = styled.div `
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    min-width: 0;
+    overflow: hidden;
+    padding: 0 8px;
 `;
 // Larga quanto il viewport: è il metro con cui il -100% del testo viene compensato.
-const StyledPanelTitleTrack = styled.div `
-    flex: 1;
-    min-width: 0;
-    display: flex;
-    align-items: center;
-
-    ${({ $marquee }) => $marquee && css `
-        @media ${MOBILE_MEDIA_QUERY} {
-            animation: ${panelTitleTrackMarquee} 10s ease-in-out infinite;
-
-            @media (prefers-reduced-motion: reduce) {
-                animation: none;
-            }
-        }
-    `}
+const StyledPanelTitleTrack = styled.div `
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+
+    ${({ $marquee }) => $marquee && css `
+        @media ${MOBILE_MEDIA_QUERY} {
+            animation: ${panelTitleTrackMarquee} 10s ease-in-out infinite;
+
+            @media (prefers-reduced-motion: reduce) {
+                animation: none;
+            }
+        }
+    `}
 `;
 // Senza $marquee resta il troncamento con i puntini di sempre
-const StyledPanelTitle = styled.div `
-    margin: 0;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    ${({ $marquee }) => $marquee && css `
-        @media ${MOBILE_MEDIA_QUERY} {
-            flex: 0 0 auto;
-            width: max-content;
-            min-width: 100%;
-            max-width: none;
-            overflow: visible;
-            text-overflow: clip;
-            animation: ${panelTitleTextMarquee} 10s ease-in-out infinite;
-
-            @media (prefers-reduced-motion: reduce) {
-                animation: none;
-                width: auto;
-                min-width: 0;
-                overflow: hidden;
-                text-overflow: ellipsis;
-            }
-        }
-    `}
+const StyledPanelTitle = styled.div `
+    margin: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    ${({ $marquee }) => $marquee && css `
+        @media ${MOBILE_MEDIA_QUERY} {
+            flex: 0 0 auto;
+            width: max-content;
+            min-width: 100%;
+            max-width: none;
+            overflow: visible;
+            text-overflow: clip;
+            animation: ${panelTitleTextMarquee} 10s ease-in-out infinite;
+
+            @media (prefers-reduced-motion: reduce) {
+                animation: none;
+                width: auto;
+                min-width: 0;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+    `}
 `;
-const refreshSpin = keyframes `
-    from { transform: rotate(0deg); }
-    to { transform: rotate(360deg); }
+const refreshSpin = keyframes `
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
 `;
 // Fa girare l'icona per tutta la durata del ricaricamento
-const StyledRefreshIcon = styled.span `
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    ${({ $isSpinning }) => $isSpinning && css `
-        animation: ${refreshSpin} 1s linear infinite;
-
-        @media (prefers-reduced-motion: reduce) {
-            animation: none;
-        }
-    `}
+const StyledRefreshIcon = styled.span `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    ${({ $isSpinning }) => $isSpinning && css `
+        animation: ${refreshSpin} 1s linear infinite;
+
+        @media (prefers-reduced-motion: reduce) {
+            animation: none;
+        }
+    `}
 `;
 // Copre il solo contenuto del pannello (StyledPanelContent è position: relative con overflow hidden)
-const StyledPanelLoaderOverlay = styled.div `
-    position: absolute;
-    inset: 0;
-    z-index: 10;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 10px;
-    background: rgba(255, 255, 255, 0.65);
-    border-bottom-right-radius: 10px;
-    border-bottom-left-radius: 10px;
-    color: ${TMColors.primaryColor};
+const StyledPanelLoaderOverlay = styled.div `
+    position: absolute;
+    inset: 0;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    background: rgba(255, 255, 255, 0.65);
+    border-bottom-right-radius: 10px;
+    border-bottom-left-radius: 10px;
+    color: ${TMColors.primaryColor};
 `;
 /**
  * TMPanel - Pannello con supporto Controlled/Uncontrolled

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

@@ -1,3 +1,4 @@
+import React from 'react';
 interface ITMSpinner {
     backgroundColor?: string;
     fontSize?: string;
@@ -7,7 +8,7 @@ interface ITMSpinner {
     onCancel?: () => void;
     cancelText?: string;
 }
-declare const Spinner: ({ backgroundColor, description, fontSize, width, flat, onCancel, cancelText }: ITMSpinner) => import("react/jsx-runtime").JSX.Element;
+declare const Spinner: ({ backgroundColor, description, fontSize, width, flat, onCancel, cancelText }: ITMSpinner) => React.JSX.Element;
 declare class TMSpinner {
     static show({ description, backgroundColor, fontSize, flat, onCancel, cancelText }?: ITMSpinner): void;
     static hide(): void;

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ValidationItem } from '@topconsultnpm/sdk-ts';
 export interface ITMTabProps {
     title: string;
@@ -7,14 +8,14 @@ export declare const TMTab: ({ label, propsToBeValidated, children }: {
     label?: string;
     propsToBeValidated?: string[] | undefined;
     children?: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export declare const TMTabItemBadge: ({ vil }: {
     vil: ValidationItem[];
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 declare const TMTabGroup: ({ children, fontSize, validationItems, onTabIndexChanged }: {
     onTabIndexChanged?: (e: number) => void;
     children: any;
     fontSize?: string;
     validationItems?: ValidationItem[];
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export default TMTabGroup;