@topconsultnpm/sdkui-react 6.22.0-dev3.3 → 6.22.0-dev3.30

package/lib/components/base/TMCustomButton.js

@@ -1,10 +1,11 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState, useMemo } from 'react';
 import TMModal from './TMModal';
 import styled from 'styled-components';
-import { SDKUI_Localizator, TMLayoutWaitingContainer } from '../..';
+import { SDKUI_Localizator } from '../..';
 import { getButtonAttributes, getSelectedItem } from '../../helper/dcmtsHelper';
 import { DeviceType, useDeviceType } from './TMDeviceProvider';
+import TMWaitPanelManager from './waitPanel/TMWaitPanelManager';
 const IframeContainer = styled.div `
   display: flex;
   height: 100%;
@@ -53,12 +54,6 @@ const TMCustomButton = (props) => {
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(false);
     const itemsToProcess = useMemo(() => selectedItems && selectedItems.length > 0 ? selectedItems : [attributes], [selectedItems, attributes]);
-    // Stati per il wait panel
-    const [showWaitPanel, setShowWaitPanel] = useState(itemsToProcess.length > 0 && !RunOnce);
-    const [waitPanelText, setWaitPanelText] = useState(SDKUI_Localizator.CustomButtonActions.replaceParams(1, itemsToProcess.length));
-    const [waitPanelValue, setWaitPanelValue] = useState(0);
-    const [waitPanelMaxValue, setWaitPanelMaxValue] = useState(itemsToProcess.length);
-    const [abortController, setAbortController] = useState(undefined);
     // Aggiungi timestamp all'URL per evitare cache
     const iframeUrl = useMemo(() => {
         if (!scriptUrl)
@@ -83,41 +78,45 @@ const TMCustomButton = (props) => {
         setLoading(false);
         setError(true);
     };
-    const executeSequentially = async (controller) => {
+    const executeSequentially = async () => {
         if (!itemsToProcess)
             return;
-        for (const [index, item] of itemsToProcess.entries()) {
-            if (controller.signal.aborted)
-                break;
-            setWaitPanelText(SDKUI_Localizator.CustomButtonActions.replaceParams(index + 1, itemsToProcess.length));
-            setWaitPanelValue(index);
-            // Attendi che l'iframe sia pronto e invia il messaggio
-            await new Promise((resolve) => {
-                const checkIframe = setInterval(() => {
-                    if (iframeRef.current?.contentWindow) {
-                        clearInterval(checkIframe);
-                        if (selectedItems && selectedItems.length > 0) {
-                            //devo convertire item in formData
-                            const processedItem = getSelectedItem(args, formData, item);
-                            postMessageIframe(processedItem);
-                        }
-                        else {
-                            postMessageIframe(item);
+        const waitPanel = TMWaitPanelManager.show({
+            title: SDKUI_Localizator.CustomButtonAction,
+            max: itemsToProcess.length,
+            cancelable: true,
+            showCounters: false,
+        });
+        try {
+            for (const [index, item] of itemsToProcess.entries()) {
+                if (waitPanel.aborted)
+                    break;
+                waitPanel.setSubtitle(SDKUI_Localizator.CustomButtonActions.replaceParams(index + 1, itemsToProcess.length));
+                // Attendi che l'iframe sia pronto e invia il messaggio
+                await new Promise((resolve) => {
+                    const checkIframe = setInterval(() => {
+                        if (iframeRef.current?.contentWindow) {
+                            clearInterval(checkIframe);
+                            if (selectedItems && selectedItems.length > 0) {
+                                //devo convertire item in formData
+                                const processedItem = getSelectedItem(args, formData, item);
+                                postMessageIframe(processedItem);
+                            }
+                            else {
+                                postMessageIframe(item);
+                            }
+                            // Attendi prima di passare al prossimo
+                            setTimeout(resolve, 500);
                         }
-                        //imposta 100% se sono all'ultimo item
-                        if (index === itemsToProcess.length - 1)
-                            setWaitPanelValue(index + 1);
-                        // Attendi prima di passare al prossimo
-                        setTimeout(() => {
-                            setWaitPanelValue(index + 1);
-                            resolve();
-                        }, 500);
-                    }
-                }, 100);
-            });
+                    }, 100);
+                });
+                await waitPanel.step();
+            }
+        }
+        finally {
+            waitPanel.close();
+            onClose?.();
         }
-        setShowWaitPanel(false);
-        onClose?.();
     };
     const postMessageIframe = (data) => {
         console.log("TMCustomButton - postMessageIframe - data:", data);
@@ -130,14 +129,7 @@ const TMCustomButton = (props) => {
             return;
         if (!RunOnce && itemsToProcess.length > 0) {
             // esegui per ogni item selezionato
-            const controller = new AbortController();
-            controller.signal.addEventListener('abort', () => {
-                setShowWaitPanel(false);
-                onClose?.();
-            });
-            setAbortController(controller);
-            setWaitPanelMaxValue(itemsToProcess.length);
-            executeSequentially(controller);
+            executeSequentially();
         }
         else {
             // Modalità RunOnce: invia dati all'iframe quando è caricato
@@ -157,6 +149,6 @@ const TMCustomButton = (props) => {
         }
     }, []);
     const iframeContent = (_jsxs(IframeContainer, { style: !RunOnce ? { visibility: 'hidden' } : {}, children: [loading && _jsx(LoadingOverlay, {}), error && _jsx("div", { children: "Si \u00E8 verificato un errore nel caricamento del contenuto." }), !error && _jsx(StyledIframe, { ref: iframeRef, loading: 'lazy', onLoad: handleLoad, onError: handleError, src: iframeUrl })] }));
-    return isModal && RunOnce ? (_jsx(TMModal, { title: button.title, width: isMobile ? '95%' : '60%', height: isMobile ? '95%' : '70%', resizable: isMobile ? false : true, expandable: isMobile ? false : true, onClose: onClose, children: iframeContent })) : !RunOnce && (_jsxs(_Fragment, { children: [_jsx(TMLayoutWaitingContainer, { showWaitPanel: showWaitPanel, waitPanelTitle: SDKUI_Localizator.CustomButtonAction, showWaitPanelPrimary: true, waitPanelTextPrimary: waitPanelText, waitPanelValuePrimary: waitPanelValue, waitPanelMaxValuePrimary: waitPanelMaxValue, showWaitPanelSecondary: false, isCancelable: true, abortController: abortController, children: undefined }), iframeContent] }));
+    return isModal && RunOnce ? (_jsx(TMModal, { title: button.title, width: isMobile ? '95%' : '60%', height: isMobile ? '95%' : '70%', resizable: isMobile ? false : true, expandable: isMobile ? false : true, onClose: onClose, children: iframeContent })) : !RunOnce && iframeContent;
 };
 export default TMCustomButton;

package/lib/components/base/TMDataGrid.js

@@ -23,7 +23,7 @@ const TMDataGrid = React.forwardRef((props, ref) => {
     // events and callbacks
     onSelectionChanged, onFocusedRowChanged, onRowDblClick, onRowClick, onCellClick, onCellDblClick, onOptionChanged, onContentReady, onContextMenuPreparing, onInitialized, onEditorPreparing, onCellPrepared, onRowPrepared, onRowUpdating, onRowExpanded, onRowCollapsed, onRowUpdated, onSaved, onEditCanceled, onEditingStart, onEditingChange, customizeColumns, onKeyDown, scrolling = { mode: 'standard', useNative: SDKUI_Globals.userSettings?.themeSettings.gridSettings.useNativeScrollbar === 1 }, paging = { enabled: true, pageSize: pageSize }, pager = { visible: true, showInfo: true, showNavigationButtons: true }, selection = { mode: 'multiple', showCheckBoxesMode: "always", selectAllMode: "allPages" }, sorting, summary, stateStoring, grouping, groupPanel, filterRow, headerFilter, editing, rowDragging, masterDetail, 
     // other properties
-    disabled = false, autoNavigateToFocusedRow = true, columnResizingMode = 'widget', columnHidingEnabled = true, columnAutoWidth = true, allowColumnResizing = true, allowColumnReordering = true, showBorders = true, showRowLines = SDKUI_Globals.userSettings?.themeSettings.gridSettings.showRowLines === 1, showColumnLines = SDKUI_Globals.userSettings?.themeSettings.gridSettings.showColumnLines === 1, showColumnHeaders = true, rowAlternationEnabled = false, wordWrapEnabled = false, noDataText, columnMinWidth, 
+    disabled = false, autoNavigateToFocusedRow = true, columnResizingMode = 'widget', columnHidingEnabled = true, columnAutoWidth = true, allowColumnResizing = true, allowColumnReordering = true, showBorders = true, showRowLines = SDKUI_Globals.userSettings?.themeSettings.gridSettings.showRowLines === 1, showColumnLines = SDKUI_Globals.userSettings?.themeSettings.gridSettings.showColumnLines === 1, showColumnHeaders = true, rowAlternationEnabled = false, repaintChangesOnly = false, wordWrapEnabled = false, noDataText, columnMinWidth, 
     // styles
     id, width = '100%', height = '100%', } = props;
     const internalRef = React.useRef(null);
@@ -416,7 +416,7 @@ const TMDataGrid = React.forwardRef((props, ref) => {
                     // events and callbacks
                     onSelectionChanged: onSelectionChangedCallback, onRowDblClick: onRowDblClickCallback, onRowPrepared: onRowPrepared, onContextMenuPreparing: onContextMenuPreparingCallback, onToolbarPreparing: onToolbarPreparingCallback, onFocusedRowChanged: onFocusedRowChanged, onRowClick: onRowClick, onCellClick: onCellClick, onCellDblClick: onCellDblClick, onOptionChanged: onOptionChangedCallback, onContentReady: onContentReadyCallback, onInitialized: onInitialized, customizeColumns: customizeColumns, onEditorPreparing: onEditorPreparing, onCellPrepared: onCellPrepared, onRowUpdating: onRowUpdating, onRowExpanded: onRowExpanded, onRowCollapsed: onRowCollapsed, onRowUpdated: onRowUpdated, onSaved: onSaved, onEditCanceled: onEditCanceled, onEditingStart: onEditingStart, onEditingChange: onEditingChange, onKeyDown: onKeyDown, 
                     // other properties
-                    disabled: disabled, autoNavigateToFocusedRow: autoNavigateToFocusedRow, focusedRowKey: focusedRowKey, columnHidingEnabled: columnHidingEnabled, columnResizingMode: columnResizingMode, columnAutoWidth: columnAutoWidth, allowColumnResizing: allowColumnResizing, allowColumnReordering: allowColumnReordering, showBorders: showBorders, showRowLines: showRowLines, showColumnLines: showColumnLines, showColumnHeaders: showColumnHeaders, rowAlternationEnabled: rowAlternationEnabled, wordWrapEnabled: wordWrapEnabled, columnMinWidth: columnMinWidth, noDataText: noDataText, 
+                    disabled: disabled, autoNavigateToFocusedRow: autoNavigateToFocusedRow, focusedRowKey: focusedRowKey, columnHidingEnabled: columnHidingEnabled, columnResizingMode: columnResizingMode, columnAutoWidth: columnAutoWidth, allowColumnResizing: allowColumnResizing, allowColumnReordering: allowColumnReordering, showBorders: showBorders, showRowLines: showRowLines, showColumnLines: showColumnLines, showColumnHeaders: showColumnHeaders, rowAlternationEnabled: rowAlternationEnabled, repaintChangesOnly: repaintChangesOnly, wordWrapEnabled: wordWrapEnabled, columnMinWidth: columnMinWidth, noDataText: noDataText, 
                     // styles
                     width: width, height: height, style: {
                         userSelect: 'none',

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { IColumnProps } from 'devextreme-react/data-grid';
 import { SearchResultDescriptor } from '@topconsultnpm/sdk-ts';
 export type FormatOption = {
@@ -11,5 +12,5 @@ interface TMDataGridExportFormProps {
     selectedRowKeys: Array<number>;
     onCloseExportForm: () => void;
 }
-declare const TMDataGridExportForm: (props: TMDataGridExportFormProps) => import("react/jsx-runtime").JSX.Element;
+declare const TMDataGridExportForm: (props: TMDataGridExportFormProps) => React.JSX.Element;
 export default TMDataGridExportForm;

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

@@ -1,3 +1,4 @@
+import React from "react";
 import { FileItem } from "./TMFileManagerUtils";
 import { TMContextMenuItemProps } from '../NewComponents/ContextMenu/types';
 interface TMFileManagerProps {
@@ -42,5 +43,5 @@ interface TMFileManagerProps {
     /** Optional: Callback to handle back button */
     onMaximizePanel?: () => void;
 }
-declare const TMFileManager: (props: TMFileManagerProps) => import("react/jsx-runtime").JSX.Element;
+declare const TMFileManager: (props: TMFileManagerProps) => React.JSX.Element;
 export default TMFileManager;

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

@@ -1,3 +1,4 @@
+import React from "react";
 import { FileItem } from "./TMFileManagerUtils";
 import { UserDescriptor } from "@topconsultnpm/sdk-ts";
 import { TMContextMenuItemProps } from "../NewComponents/ContextMenu/types";
@@ -13,5 +14,5 @@ interface TMFileManagerDataGridViewProps {
     userID?: number;
     onDoubleClickHandler?: (fileItem: FileItem | undefined) => void;
 }
-declare const TMFileManagerDataGridView: (props: TMFileManagerDataGridViewProps) => import("react/jsx-runtime").JSX.Element;
+declare const TMFileManagerDataGridView: (props: TMFileManagerDataGridViewProps) => React.JSX.Element;
 export default TMFileManagerDataGridView;

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

@@ -20,5 +20,5 @@ export interface TMFileManagerThumbnailItemsProps {
     onDoubleClick?: (file: FileItem) => void;
     userID?: number;
 }
-declare const TMFileManagerThumbnailItems: (props: TMFileManagerThumbnailItemsProps) => import("react/jsx-runtime").JSX.Element;
+declare const TMFileManagerThumbnailItems: (props: TMFileManagerThumbnailItemsProps) => React.JSX.Element;
 export default TMFileManagerThumbnailItems;

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

@@ -28,5 +28,5 @@ interface TMFileManagerThumbnailsViewProps {
         };
     }>>;
 }
-declare const TMFileManagerThumbnailsView: (props: TMFileManagerThumbnailsViewProps) => import("react/jsx-runtime").JSX.Element;
+declare const TMFileManagerThumbnailsView: (props: TMFileManagerThumbnailsViewProps) => React.JSX.Element;
 export default TMFileManagerThumbnailsView;

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

@@ -48,15 +48,13 @@ export declare const colors: {
     LIGHT_YELLOW: string;
     MEDIUM_GREEN: string;
 };
-export declare const TMFileItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$backgroundColor" | "$bgHoverColor" | "$textColor"> & {
+export declare const TMFileItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
     $backgroundColor?: string;
     $textColor?: string;
     $bgHoverColor?: string;
-}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$backgroundColor" | "$bgHoverColor" | "$textColor"> & {
-    $backgroundColor?: string;
-    $textColor?: string;
-    $bgHoverColor?: string;
-}, never>>> & string;
+}>> & string;
 export declare const getFileItemLinkUrl: (fileItem: FileItem | undefined) => string | undefined;
 export declare const findFileItems: (items: Array<FileItem>, id: number) => FileItem | undefined;
 export declare const setFolderTreeViewItems: (items: Array<FileItem>) => Array<TMFileManagerTreeViewDirectory>;

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

@@ -17,7 +17,7 @@ declare const TMCard: ({ borderRadius, onClick, scrollX, scrollY, width, height,
     scroll?: boolean;
     backgroundColor?: string;
     color?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 declare const TMSplitterLayout: ({ animation, showSeparator, separatorColor, overflow, separatorActiveColor, separatorSize, direction, children, start, min, }: {
     animation?: boolean;
     separatorColor?: string;
@@ -29,7 +29,7 @@ declare const TMSplitterLayout: ({ animation, showSeparator, separatorColor, ove
     children?: React.ReactNode;
     start?: string[];
     min?: string[];
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 declare const TMLayoutItem: ({ onClick, children, width, minWidth, maxWidth, maxHeight, height, minHeight }: {
     onClick?: () => void;
     children: React.ReactNode;
@@ -40,7 +40,7 @@ declare const TMLayoutItem: ({ onClick, children, width, minWidth, maxWidth, max
     fixed?: boolean;
     height?: string;
     minHeight?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export interface ITMLayoutContainerProps {
     children: React.ReactNode;
     gap?: number;
@@ -50,6 +50,6 @@ export interface ITMLayoutContainerProps {
     onClick?: () => void;
     onContextMenu?: (e: React.MouseEvent) => void;
 }
-declare const TMLayoutContainer: ({ gap, onClick, justifyContent, alignItems, children, direction, onContextMenu }: ITMLayoutContainerProps) => import("react/jsx-runtime").JSX.Element;
+declare const TMLayoutContainer: ({ gap, onClick, justifyContent, alignItems, children, direction, onContextMenu }: ITMLayoutContainerProps) => React.JSX.Element;
 export { TMCard, TMLayoutItem, TMSplitterLayout };
 export default TMLayoutContainer;

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

@@ -1,3 +1,4 @@
+import React from 'react';
 interface ITMListItem {
     icon: any;
     text?: string;
@@ -5,5 +6,5 @@ interface ITMListItem {
 }
 declare const TMList: ({ items }: {
     items: ITMListItem[];
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export default TMList;

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

@@ -37,6 +37,6 @@ interface ListProps<T> {
     onItemDblClick?: (item: T) => void;
     itemTemplate?: (item: T) => JSX.Element;
 }
-declare const TMListView: <T>({ customGroupingHeaders, headerBackGroundColor, header, showId, setShowId, showSearch, setShowSearch, grouping, orderBy, id, onScrollChange, scroll, searchKeys, searchable, itemTemplate, customColor, dataSource, exprKey, onSelectionChanged, onItemClick, onItemDblClick, selectedItem, autoScrollToSelectedItem }: ListProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const TMListView: <T>({ customGroupingHeaders, headerBackGroundColor, header, showId, setShowId, showSearch, setShowSearch, grouping, orderBy, id, onScrollChange, scroll, searchKeys, searchable, itemTemplate, customColor, dataSource, exprKey, onSelectionChanged, onItemClick, onItemDblClick, selectedItem, autoScrollToSelectedItem }: ListProps<T>) => React.JSX.Element;
 export default TMListView;
 export declare const CustomListViewHeader: React.FC<ITMListViewHeader>;

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