@topconsultnpm/sdkui-react 6.17.0-test10 → 6.17.0-test11

package/lib/components/editors/TMTextBox.js

@@ -3,7 +3,7 @@ import { useState, useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import { StyledEditor, StyledEditorContainer, StyledEditorIcon, StyledEditorLabel, editorColorManager } from './TMEditorStyled';
 import { FontSize, TMColors } from '../../utils/theme';
-import { genUniqueId, IconClearButton, IconHide, IconShow, SDKUI_Localizator } from '../../helper';
+import { genUniqueId, IconClearButton, IconDataList, IconHide, IconShow, SDKUI_Localizator } from '../../helper';
 import ShowAlert from '../base/TMAlert';
 import { TMExceptionBoxManager } from '../base/TMPopUp';
 import TMLayoutContainer, { TMLayoutItem } from '../base/TMLayout';
@@ -11,6 +11,8 @@ import TMVilViewer from '../base/TMVilViewer';
 import TMTooltip from '../base/TMTooltip';
 import { ContextMenu } from 'devextreme-react';
 import { DeviceType, useDeviceType } from '../base/TMDeviceProvider';
+import TMChooserForm from '../forms/TMChooserForm';
+import { FormulaItemHelper } from './TMTextExpression';
 const StyledShowPasswordIcon = styled.div `
     color: ${props => !props.$disabled ? (props.$vil.length === 0) ? !props.$isModified ? TMColors.text_normal : TMColors.isModified : editorColorManager(props.$vil) : TMColors.disabled};
     position: absolute;
@@ -37,6 +39,7 @@ const TMTextBox = ({ autoFocus, maxLength, labelColor, precision, fromModal = fa
     const [currentType, setCurrentType] = useState(type);
     const [currentValue, setCurrentValue] = useState(value);
     const [formulaMenuItems, setFormulaMenuItems] = useState([]);
+    const [showFormulaItemsChooser, setShowFormulaItemsChooser] = useState(false);
     const [isFocused, setIsFocused] = useState(false);
     const inputRef = useRef(null);
     const deviceType = useDeviceType();
@@ -219,6 +222,30 @@ const TMTextBox = ({ autoFocus, maxLength, labelColor, precision, fromModal = fa
         setCurrentValue(inputValue);
         onValueChanged?.({ target: { value: inputValue } }); // Passa il valore filtrato
     };
+    function getFormulaDataSorce() {
+        let fiarray = [];
+        if (!formulaItems)
+            return [];
+        let i = 0;
+        for (const f of formulaItems) {
+            let fi = new FormulaItemHelper();
+            fi.id = i;
+            fi.paramName = f;
+            fiarray.push(fi);
+            i++;
+        }
+        return fiarray;
+    }
+    const openFormulaItemsChooser = () => {
+        return (showFormulaItemsChooser ?
+            _jsx(TMChooserForm, { title: SDKUI_Localizator.Parameters, height: '350', width: '300', hasShowId: false, showDefaultColumns: false, allowMultipleSelection: true, columns: [
+                    { dataField: 'paramName', caption: SDKUI_Localizator.Name, dataType: 'string', sortOrder: 'asc', alignment: 'left' }
+                ], dataSource: getFormulaDataSorce(), onClose: () => { setShowFormulaItemsChooser(false); }, onChoose: (IDs) => {
+                    let expr = value?.toString() ?? '';
+                    IDs.map(i => expr += formulaItems[i]);
+                    onValueChanged?.({ target: { value: expr } });
+                } }) : _jsx(_Fragment, {}));
+    };
     const renderInputField = () => {
         const bulletEntity = '\u2022'; // •
         const displayedValue = initialType === 'secureText'
@@ -233,13 +260,16 @@ const TMTextBox = ({ autoFocus, maxLength, labelColor, precision, fromModal = fa
                                 e.preventDefault();
                         }
                     }, "$isMobile": deviceType === DeviceType.MOBILE, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, "$fontSize": fontSize, "$maxValue": maxValue, "$width": width, "$type": currentType, "$borderRadius": borderRadius }), (initialType === 'password' || initialType === 'secureText') && _jsx(StyledShowPasswordIcon, { onClick: toggleShowPassword, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: showPasswordIcon() }), initialType !== 'password' &&
-                    _jsxs("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', position: 'absolute', right: type === 'number' ? '25px' : '6px', top: label.length > 0 ? '20px' : '7px', pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? 0.4 : 1 }, children: [showClearButton && currentValue &&
+                    _jsxs("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', position: 'absolute', right: type === 'number' ? '25px' : '6px', top: label.length > 0 ? '20px' : '7px', pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? 0.4 : 1 }, children: [formulaItems.length > 0 &&
+                                _jsx(StyledTextBoxEditorButton, { onClick: () => {
+                                        setShowFormulaItemsChooser(true);
+                                    }, children: _jsx(IconDataList, {}) }), showClearButton && currentValue &&
                                 _jsx(StyledTextBoxEditorButton, { onClick: () => {
                                         onValueChanged?.({ target: { value: undefined } });
                                         onBlur?.(undefined);
                                     }, children: _jsx(IconClearButton, {}) }), buttons.map((buttonItem, index) => {
                                 return (_jsx(StyledTextBoxEditorButton, { onClick: buttonItem.onClick, children: _jsx(TMTooltip, { content: buttonItem.text, children: buttonItem.icon }) }, buttonItem.text));
-                            })] }), formulaItems.length > 0 && (_jsx(ContextMenu, { dataSource: formulaMenuItems, target: `#text-${id}`, onItemClick: (e) => { insertText(e.itemData?.text ?? ''); } })), _jsx(TMVilViewer, { vil: validationItems })] }));
+                            })] }), openFormulaItemsChooser(), formulaItems.length > 0 && (_jsx(ContextMenu, { dataSource: formulaMenuItems, target: `#text-${id}`, onItemClick: (e) => { insertText(e.itemData?.text ?? ''); } })), _jsx(TMVilViewer, { vil: validationItems })] }));
     };
     const renderedLeftLabelTextBox = () => {
         return (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: _jsx(StyledEditorIcon, { "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { "$width": width, children: [label && _jsx(StyledEditorLabel, { "$color": labelColor, "$isFocused": isFocused, "$labelPosition": labelPosition, "$disabled": disabled, children: label }), renderInputField()] }) })] }));

package/lib/components/editors/TMTextExpression.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from 'react';
 import { DcmtTypeListCacheService } from '@topconsultnpm/sdk-ts';
-import { IconClear, IconColumns, IconDataList, SDKUI_Localizator, stringIsNullOrEmpty } from '../../helper';
+import { IconClear, IconColumns, SDKUI_Localizator, stringIsNullOrEmpty } from '../../helper';
 import { TMExceptionBoxManager } from '../base/TMPopUp';
 import { TMMetadataChooserForm } from '../choosers/TMMetadataChooser';
-import TMChooserForm from '../forms/TMChooserForm';
 import TMTextBox from './TMTextBox';
 import TMTextArea from './TMTextArea';
 const TMTextExpression = (props) => {
@@ -96,8 +95,7 @@ const TMTextExpression = (props) => {
         let buttons = [];
         if (props.qd || props.tid)
             buttons.push({ icon: _jsx(IconColumns, {}), text: SDKUI_Localizator.MetadataReferenceInsert, onClick: () => { setShowMetadataChooser(true); } });
-        if (props.formulaItems && props.formulaItems.length > 0)
-            buttons.push({ icon: _jsx(IconDataList, {}), text: SDKUI_Localizator.Parameters, onClick: () => setShowFormulaChooser(true) });
+        // if (props.formulaItems && props.formulaItems.length > 0) buttons.push({ icon: <IconDataList />, text: SDKUI_Localizator.Parameters, onClick: () => setShowFormulaChooser(true) })
         buttons.push({ icon: _jsx(IconClear, {}), text: SDKUI_Localizator.Clear, onClick: () => props.onValueChanged?.('') });
         return buttons;
     };
@@ -120,20 +118,18 @@ const TMTextExpression = (props) => {
         }
         return output;
     }
-    function getFormulaDataSorce() {
-        let fiarray = [];
-        if (!props.formulaItems)
-            return [];
-        let i = 0;
-        for (const f of props.formulaItems) {
-            let fi = new FormulaItemHelper();
-            fi.id = i;
-            fi.paramName = f;
-            fiarray.push(fi);
-            i++;
-        }
-        return fiarray;
-    }
+    // function getFormulaDataSorce() {
+    //     let fiarray: FormulaItemHelper[] = []
+    //     if (!props.formulaItems) return []
+    //     let i: number = 0;
+    //     for (const f of props.formulaItems!) {
+    //         let fi = new FormulaItemHelper();
+    //         fi.id = i; fi.paramName = f;
+    //         fiarray.push(fi);
+    //         i++;
+    //     }
+    //     return fiarray;
+    // }
     const openMetadataChooseForm = () => {
         return (showMetadataChooser ?
             _jsx(TMMetadataChooserForm, { allowMultipleSelection: true, qd: props.qd, tids: props.tid ? [props.tid] : undefined, qdShowOnlySelectItems: true, allowSysMetadata: true, onClose: () => setShowMetadataChooser(false), onChoose: (tid_mid) => {
@@ -146,18 +142,30 @@ const TMTextExpression = (props) => {
             { dataField: 'paramName', caption: props.captionColumnChooser ?? SDKUI_Localizator.Name, dataType: 'string', sortOrder: 'asc', alignment: 'left' }
         ];
     }, []);
-    const openFormulaChooseForm = () => {
-        return (showFormulaChooser ?
-            _jsx(TMChooserForm, { title: props.titleChooser ?? SDKUI_Localizator.Parameters, height: props.higthChooser ?? '350', width: props.widthChooser ?? '300', hasShowId: false, showDefaultColumns: false, allowMultipleSelection: props.disableMultipleSelection !== true, columns: dataColumns, dataSource: getFormulaDataSorce(), onClose: () => { setShowFormulaChooser(false); }, onChoose: (IDs) => {
-                    let expr = props.value ?? '';
-                    IDs.map(i => expr += props.formulaItems[i]);
-                    props.onValueChanged?.(expr);
-                } }) : _jsx(_Fragment, {}));
-    };
+    // const openFormulaChooseForm = () => {
+    //     return (showFormulaChooser ?
+    //         <TMChooserForm
+    //             title={props.titleChooser ?? SDKUI_Localizator.Parameters}
+    //             height={props.higthChooser ?? '350'}
+    //             width={props.widthChooser ?? '300'}
+    //             hasShowId={false}
+    //             showDefaultColumns={false}
+    //             allowMultipleSelection={props.disableMultipleSelection !== true}
+    //             columns={dataColumns}
+    //             dataSource={getFormulaDataSorce()}
+    //             onClose={() => { setShowFormulaChooser(false); }}
+    //             onChoose={(IDs: number[]) => {
+    //                 let expr: string = props.value ?? '';
+    //                 IDs.map(i => expr += props.formulaItems![i]);
+    //                 props.onValueChanged?.(expr)
+    //             }}
+    //         /> : <></>
+    //     )
+    // }
     return (_jsxs(_Fragment, { children: [props.rows === undefined ?
-                _jsx(TMTextBox, { buttons: renderButtons(), isModifiedWhen: props.value != props.valueOrig, label: props.label, value: Expression_IDs2Names(props.value) ?? '', validationItems: props.validationItems, onValueChanged: (e) => { props.onValueChanged?.(Expression_Names2IDs(e.target.value)); } })
+                _jsx(TMTextBox, { buttons: renderButtons(), formulaItems: props.formulaItems, isModifiedWhen: props.value != props.valueOrig, label: props.label, value: Expression_IDs2Names(props.value) ?? '', validationItems: props.validationItems, onValueChanged: (e) => { props.onValueChanged?.(Expression_Names2IDs(e.target.value)); } })
                 :
-                    _jsx(TMTextArea, { buttons: renderButtons(), isModifiedWhen: props.value != props.valueOrig, label: props.label, rows: props.rows, resize: false, placeHolder: props.placeHolder, value: Expression_IDs2Names(props.value) ?? '', validationItems: props.validationItems, onValueChanged: (e) => { props.onValueChanged?.(Expression_Names2IDs(e.target.value)); } }), openMetadataChooseForm(), " ", openFormulaChooseForm()] }));
+                    _jsx(TMTextArea, { buttons: renderButtons(), formulaItems: props.formulaItems, isModifiedWhen: props.value != props.valueOrig, label: props.label, rows: props.rows, resize: false, placeHolder: props.placeHolder, value: Expression_IDs2Names(props.value) ?? '', validationItems: props.validationItems, onValueChanged: (e) => { props.onValueChanged?.(Expression_Names2IDs(e.target.value)); } }), openMetadataChooseForm(), " "] }));
 };
 class MetatadaHelper {
     constructor(mid, metadataName) {

package/lib/components/features/assistant/ToppyDraggableHelpCenter.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { DeviceType } from '../../base/TMDeviceProvider';
+/**
+ * Proprietà del componente ToppyDraggableHelpCenter
+ */
+interface ToppyDraggableHelpCenterProps {
+    /** Contenuto da visualizzare nella speech bubble */
+    content?: React.ReactNode;
+    /** Tipo di dispositivo per adattare il comportamento */
+    deviceType?: DeviceType;
+    /** Allineamento iniziale del componente (destra o sinistra) */
+    align?: 'right' | 'left';
+    /** Stato iniziale collassato/espanso */
+    initialIsCollapsed?: boolean;
+    /** Callback chiamato quando si clicca sull'immagine di Toppy */
+    onToppyImageClick?: () => void;
+    /** Visibilità del componente */
+    isVisible?: boolean;
+    /** Se true, renderizza Toppy nel document.body tramite Portal invece che nel parent */
+    usePortal?: boolean;
+}
+/**
+ * Componente ToppyDraggableHelpCenter
+ *
+ * Renderizza un assistente virtuale (Toppy) draggable che può mostrare contenuti
+ * in una speech bubble. Il componente può essere trascinato all'interno del suo
+ * contenitore e può essere collassato/espanso con un doppio click.
+ */
+declare const ToppyDraggableHelpCenter: React.FC<ToppyDraggableHelpCenterProps>;
+export default ToppyDraggableHelpCenter;

package/lib/components/features/assistant/ToppyDraggableHelpCenter.js

@@ -0,0 +1,459 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from 'react';
+import ReactDOM from 'react-dom';
+import styled from 'styled-components';
+import Toppy from '../../../assets/Toppy-generico.png';
+import { DeviceType } from '../../base/TMDeviceProvider';
+import ToppySpeechBubble from './ToppySpeechBubble';
+import { SDKUI_Localizator } from '../../../helper';
+import { IconWindowMaximize } from '../../../helper/TMIcons';
+/**
+ * Styled component per il contenitore di Toppy
+ * Gestisce il posizionamento, le dimensioni e le animazioni
+ */
+const ToppyButton = styled.div.attrs((props) => ({
+    style: {
+        // Applica left/top come stili inline per evitare la generazione di troppe classi CSS
+        ...(props.$x !== undefined && props.$y !== undefined
+            ? {
+                left: `${props.$x}px`,
+                top: `${props.$y}px`,
+                bottom: 'auto',
+                right: 'auto',
+            }
+            : {}),
+        // Cursore applicato come stile inline
+        cursor: props.$isDragging ? 'grabbing' : 'grab',
+    },
+})) `
+  /* Visibilità controllata dalla prop */
+  display: ${(props) => (props.$isVisible ? 'flex' : 'none')};
+  position: ${(props) => props.$usePortal ? 'fixed' : 'absolute'};
+
+  /* Posizionamento di default quando non è draggato (x e y non sono definiti) */
+  ${(props) => props.$x === undefined || props.$y === undefined
+    ? `
+        bottom: ${props.$isMobile ? '0px' : '-20px'};
+        ${props.$align === 'left' ? 'left: 10px;' : 'right: 10px;'};
+      `
+    : ''}
+
+  /* Z-index alto per assicurare che sia sempre in primo piano */
+  z-index: 2147483647;
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  outline: none;
+
+  /* Dimensioni dinamiche in base allo stato collassato e al tipo di dispositivo
+     Usa min() per adattarsi su schermi piccoli */
+  width: ${(props) => {
+    if (props.$isMobile) {
+        return props.$isCollapsed ? 'min(40px, 100%)' : '80px';
+    }
+    return props.$isCollapsed ? 'min(60px, 100%)' : '120px';
+}};
+  height: ${(props) => {
+    if (props.$isMobile) {
+        return props.$isCollapsed ? 'min(45px, 100%)' : '95px';
+    }
+    return props.$isCollapsed ? 'min(70px, 100%)' : '140px';
+}};
+  max-width: 100%;
+  max-height: 100%;
+
+  user-select: none;
+
+  img {
+    /* Dimensioni dell'immagine in base allo stato collassato e al tipo di dispositivo */
+    width: ${(props) => {
+    if (props.$isMobile) {
+        return props.$isCollapsed ? '40px' : '80px';
+    }
+    return props.$isCollapsed ? '60px' : '120px';
+}};
+    height: ${(props) => {
+    if (props.$isMobile) {
+        return props.$isCollapsed ? '40px' : '95px';
+    }
+    return props.$isCollapsed ? '60px' : '140px';
+}};
+    pointer-events: ${(props) => (props.$isMobile ? 'auto' : 'none')};
+    border-radius: 50%; /* Rende l'immagine circolare */
+    /* Rotazione leggera in base all'allineamento */
+    transform: ${(props) => props.$isCollapsed
+    ? 'rotate(0deg)'
+    : props.$align === 'left' ? 'rotate(20deg)' : 'rotate(-20deg)'};
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+
+    /* Animazione di pulsazione quando è collassato per attirare l'attenzione */
+    ${(props) => props.$isCollapsed && `animation: toppyPulse 1.5s infinite;`}
+  }
+
+  /* Keyframes per l'animazione di pulsazione */
+  @keyframes toppyPulse {
+    0% {
+      /* Dimensione normale all'inizio */
+      transform: scale(1) rotate(0deg);
+      box-shadow: 0 0 0 rgba(0, 113, 188, 0.5);
+    }
+    50% {
+      /* Ingrandimento e glow al 50% dell'animazione */
+      transform: scale(1.1) rotate(0deg);
+      box-shadow: 0 0 15px 5px rgba(0, 113, 188, 0.6);
+    }
+    100% {
+      /* Ritorno alla dimensione normale */
+      transform: scale(1) rotate(0deg);
+      box-shadow: 0 0 0 rgba(0, 113, 188, 0.5);
+    }
+  }
+`;
+/**
+ * Pulsante di espansione quando Toppy è minimizzato
+ */
+const ExpandButton = styled.button `
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: 2px solid rgba(255, 255, 255, 0.9);
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4), 0 0 20px rgba(118, 75, 162, 0.2);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  z-index: 10001;
+  color: white;
+  font-size: 14px;
+  
+  &:hover {
+    background: linear-gradient(135deg, #764ba2 0%, #f093fb 100%);
+    box-shadow: 0 6px 20px rgba(118, 75, 162, 0.6), 0 0 30px rgba(240, 147, 251, 0.4);
+    border-color: rgba(255, 255, 255, 1);
+    transform: scale(1.1);
+  }
+  
+  &:active {
+    transform: scale(0.95);
+    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
+  }
+  
+  &:focus {
+    outline: none;
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4), 0 0 0 3px rgba(102, 126, 234, 0.2);
+  }
+`;
+/**
+ * Overlay trasparente per bloccare le interazioni durante il drag
+ * Previene problemi di performance con iframe e altri elementi interattivi
+ */
+const DragOverlay = styled.div `
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2147483646;
+  cursor: grabbing;
+`;
+/**
+ * Componente ToppyDraggableHelpCenter
+ *
+ * Renderizza un assistente virtuale (Toppy) draggable che può mostrare contenuti
+ * in una speech bubble. Il componente può essere trascinato all'interno del suo
+ * contenitore e può essere collassato/espanso con un doppio click.
+ */
+const ToppyDraggableHelpCenter = ({ content, deviceType, align = 'right', onToppyImageClick, initialIsCollapsed, isVisible = true, usePortal = false, }) => {
+    // Ref per il contenitore principale
+    const buttonRef = useRef(null);
+    // Stato per controllare se il componente è collassato o espanso
+    const [isCollapsed, setIsCollapsed] = useState(initialIsCollapsed ?? false);
+    // Stato per tracciare se il componente è in fase di trascinamento
+    const [isDragging, setIsDragging] = useState(false);
+    // Posizione corrente del componente (null = posizione di default)
+    const [position, setPosition] = useState(null);
+    // Offset del mouse rispetto all'angolo superiore sinistro del componente durante il drag
+    const dragOffset = useRef({ x: 0, y: 0 });
+    // Ref e stato per tracciare le dimensioni della speech bubble
+    const bubbleRef = useRef(null);
+    const [bubbleSize, setBubbleSize] = useState({ width: 0, height: 0 });
+    // Ref per tracciare il dragging dell'ExpandButton
+    const isExpandButtonDraggingRef = useRef(false);
+    const expandButtonMouseDownPosRef = useRef(null);
+    const isMobile = deviceType === DeviceType.MOBILE;
+    /**
+     * Effect per aggiornare le dimensioni della bubble quando cambia il contenuto
+     * o lo stato di collassamento. Necessario per calcolare correttamente i limiti
+     * di trascinamento.
+     */
+    useEffect(() => {
+        if (bubbleRef.current) {
+            const rect = bubbleRef.current.getBoundingClientRect();
+            setBubbleSize({ width: rect.width, height: rect.height });
+        }
+    }, [content, isCollapsed]);
+    /**
+     * Effect per verificare e aggiustare la posizione quando cambia lo stato di collassamento
+     */
+    useEffect(() => {
+        if (!buttonRef.current || !position)
+            return;
+        const rect = buttonRef.current.getBoundingClientRect();
+        // Spazio extra occupato dalla bubble quando non è collassato
+        const extraHeight = !isCollapsed ? bubbleSize.height : 0;
+        const extraWidth = !isCollapsed ? bubbleSize.width : 0;
+        let minX = 0;
+        let maxX;
+        let maxY;
+        const bubbleBuffer = 5;
+        if (usePortal) {
+            // Calcola i limiti usando le dimensioni del viewport
+            maxX = window.innerWidth - rect.width;
+            maxY = window.innerHeight - rect.height + 20;
+        }
+        else {
+            // Calcola i limiti usando le dimensioni del parent
+            const parent = buttonRef.current.offsetParent;
+            if (!parent)
+                return;
+            const parentRect = parent.getBoundingClientRect();
+            maxX = parentRect.width - rect.width;
+            maxY = parentRect.height - rect.height + 20;
+        }
+        if (!isCollapsed) {
+            if (align === 'right') {
+                minX = Math.max(0, extraWidth - rect.width);
+            }
+            else {
+                maxX = Math.min(maxX, (usePortal ? window.innerWidth : buttonRef.current.offsetParent?.getBoundingClientRect().width || 0) - extraWidth);
+            }
+        }
+        // Verifica se la posizione corrente è fuori dai limiti
+        const isOutOfBounds = position.x < minX ||
+            position.x > maxX ||
+            position.y < extraHeight + bubbleBuffer ||
+            position.y > maxY;
+        // Se è fuori dai limiti, aggiusta la posizione
+        if (isOutOfBounds) {
+            const adjustedX = Math.max(minX, Math.min(position.x, maxX));
+            const adjustedY = Math.max(extraHeight + bubbleBuffer, Math.min(position.y, maxY));
+            setPosition({ x: adjustedX, y: adjustedY });
+        }
+    }, [isCollapsed, bubbleSize, usePortal, align]);
+    /**
+     * Effect per resettare la posizione quando il parent o la finestra vengono ridimensionati
+     */
+    useEffect(() => {
+        if (!buttonRef.current || !position)
+            return;
+        const handleResize = () => {
+            if (!buttonRef.current || !position)
+                return;
+            const rect = buttonRef.current.getBoundingClientRect();
+            const extraHeight = !isCollapsed ? bubbleSize.height : 0;
+            const extraWidth = !isCollapsed ? bubbleSize.width : 0;
+            let minX = 0;
+            let maxX;
+            let maxY;
+            const bubbleBuffer = 5;
+            if (usePortal) {
+                maxX = window.innerWidth - rect.width;
+                maxY = window.innerHeight - rect.height + 20;
+            }
+            else {
+                const parent = buttonRef.current.offsetParent;
+                if (!parent)
+                    return;
+                const parentRect = parent.getBoundingClientRect();
+                maxX = parentRect.width - rect.width;
+                maxY = parentRect.height - rect.height + 20;
+            }
+            if (!isCollapsed) {
+                if (align === 'right') {
+                    minX = Math.max(0, extraWidth - rect.width);
+                }
+                else {
+                    maxX = Math.min(maxX, (usePortal ? window.innerWidth : buttonRef.current.offsetParent?.getBoundingClientRect().width || 0) - extraWidth);
+                }
+            }
+            const isOutOfBounds = position.x < minX ||
+                position.x > maxX ||
+                position.y < extraHeight + bubbleBuffer ||
+                position.y > maxY;
+            if (isOutOfBounds) {
+                setPosition(null);
+            }
+        };
+        // Observer per il parent se non usa Portal
+        let resizeObserver;
+        if (!usePortal) {
+            const parent = buttonRef.current.offsetParent;
+            if (parent) {
+                resizeObserver = new ResizeObserver(handleResize);
+                resizeObserver.observe(parent);
+            }
+        }
+        window.addEventListener('resize', handleResize);
+        return () => {
+            resizeObserver?.disconnect();
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [position, isCollapsed, bubbleSize, align, usePortal]);
+    /**
+     * Effect per impostare automaticamente lo stato collassato su dispositivi mobile
+     * se non è stato specificato un valore iniziale.
+     */
+    useEffect(() => {
+        if (initialIsCollapsed === undefined && deviceType === DeviceType.MOBILE) {
+            setIsCollapsed(true);
+        }
+    }, [deviceType, initialIsCollapsed]);
+    /**
+     * Gestisce il toggle dello stato collassato/espanso
+     * Chiamato dal doppio click sul componente
+     */
+    const toggleCollapse = (e) => {
+        e?.stopPropagation();
+        setIsCollapsed(!isCollapsed);
+        onToppyImageClick?.();
+    };
+    /**
+     * Gestisce l'inizio del trascinamento
+     * Salva la posizione relativa del mouse rispetto al componente (offset)
+     * per mantenere il punto di presa durante il trascinamento
+     */
+    const handleMouseDown = (e) => {
+        if (!buttonRef.current)
+            return;
+        const rect = buttonRef.current.getBoundingClientRect();
+        // Calcola l'offset tra il punto di click e l'angolo superiore sinistro del componente
+        dragOffset.current = {
+            x: e.clientX - rect.left,
+            y: e.clientY - rect.top,
+        };
+        setIsDragging(true);
+        e.preventDefault();
+    };
+    /**
+     * Gestisce il movimento durante il trascinamento
+     * Calcola la nuova posizione rispettando i limiti del parent o viewport
+     * e tenendo conto delle dimensioni della speech bubble quando espansa
+     */
+    const handleMouseMove = (e) => {
+        if (!isDragging || !buttonRef.current)
+            return;
+        const rect = buttonRef.current.getBoundingClientRect();
+        // Spazio extra occupato dalla bubble quando non è collassato
+        const extraHeight = !isCollapsed ? bubbleSize.height : 0;
+        const extraWidth = !isCollapsed ? bubbleSize.width : 0;
+        let minX = 0;
+        let maxX;
+        let maxY;
+        let newX;
+        let newY;
+        const bubbleBuffer = 5;
+        if (usePortal) {
+            // Calcola i limiti usando il viewport
+            maxX = window.innerWidth - rect.width;
+            maxY = window.innerHeight - rect.height + 20;
+            if (!isCollapsed) {
+                if (align === 'right') {
+                    minX = Math.max(0, extraWidth - rect.width);
+                }
+                else {
+                    maxX = Math.min(maxX, window.innerWidth - extraWidth);
+                }
+            }
+            newX = Math.max(minX, Math.min(e.clientX - dragOffset.current.x, maxX));
+            newY = Math.max(extraHeight + bubbleBuffer, Math.min(e.clientY - dragOffset.current.y, maxY));
+        }
+        else {
+            // Calcola i limiti usando il parent
+            const parent = buttonRef.current.offsetParent;
+            if (!parent)
+                return;
+            const parentRect = parent.getBoundingClientRect();
+            maxX = parentRect.width - rect.width;
+            maxY = parentRect.height - rect.height + 20;
+            if (!isCollapsed) {
+                if (align === 'right') {
+                    minX = Math.max(0, extraWidth - rect.width);
+                }
+                else {
+                    maxX = Math.min(maxX, parentRect.width - extraWidth);
+                }
+            }
+            newX = Math.max(minX, Math.min(e.clientX - parentRect.left - dragOffset.current.x, maxX));
+            newY = Math.max(extraHeight + bubbleBuffer, Math.min(e.clientY - parentRect.top - dragOffset.current.y, maxY));
+        }
+        setPosition({ x: newX, y: newY });
+    };
+    /**
+     * Gestisce il rilascio del mouse alla fine del trascinamento
+     * Se il movimento è stato minimo (< 5px), viene interpretato come un click
+     * e viene chiamato il callback onToppyImageClick
+     */
+    const handleMouseUp = (e) => {
+        if (isDragging) {
+            setIsDragging(false);
+            const rect = buttonRef.current?.getBoundingClientRect();
+            if (rect) {
+                // Calcola la distanza totale del movimento usando il teorema di Pitagora
+                const moveDistance = Math.hypot(e.clientX - (rect.left + dragOffset.current.x), e.clientY - (rect.top + dragOffset.current.y));
+                // Se il movimento è stato minimo, trattalo come un click
+                if (moveDistance < 5 && onToppyImageClick) {
+                    onToppyImageClick();
+                }
+            }
+        }
+    };
+    /**
+     * Effect per gestire gli event listener durante il trascinamento
+     * Gli eventi sono registrati sul document per catturare il movimento
+     * anche quando il mouse esce dal componente
+     */
+    useEffect(() => {
+        if (isDragging) {
+            document.addEventListener('mousemove', handleMouseMove);
+            document.addEventListener('mouseup', handleMouseUp);
+            return () => {
+                document.removeEventListener('mousemove', handleMouseMove);
+                document.removeEventListener('mouseup', handleMouseUp);
+            };
+        }
+        return undefined;
+    }, [isDragging]);
+    // Renderizza l'overlay solo durante il drag
+    const renderDragOverlay = isDragging && _jsx(DragOverlay, {});
+    const toppyContent = (_jsxs(_Fragment, { children: [renderDragOverlay, _jsxs(ToppyButton, { ref: buttonRef, "$align": align, "$isDragging": isDragging, "$x": position?.x, "$y": position?.y, "$isVisible": isVisible, "$isCollapsed": isCollapsed, "$isMobile": isMobile, "$usePortal": usePortal, onMouseDown: !isMobile ? handleMouseDown : undefined, onContextMenu: (e) => e.preventDefault(), onDoubleClick: !isMobile ? toggleCollapse : undefined, children: [(content && !isCollapsed) && (_jsx(ToppySpeechBubble, { ref: bubbleRef, align: align, onClose: toggleCollapse, children: content })), (content && isCollapsed) && (_jsx(ExpandButton, { onMouseDown: (e) => {
+                            isExpandButtonDraggingRef.current = false;
+                            expandButtonMouseDownPosRef.current = { x: e.clientX, y: e.clientY };
+                        }, onMouseMove: (e) => {
+                            if (!expandButtonMouseDownPosRef.current)
+                                return;
+                            const deltaX = Math.abs(e.clientX - expandButtonMouseDownPosRef.current.x);
+                            const deltaY = Math.abs(e.clientY - expandButtonMouseDownPosRef.current.y);
+                            // Considera drag solo se il movimento supera 3px
+                            if (deltaX > 3 || deltaY > 3) {
+                                isExpandButtonDraggingRef.current = true;
+                            }
+                        }, onMouseUp: () => {
+                            expandButtonMouseDownPosRef.current = null;
+                        }, onClick: (e) => {
+                            if (isExpandButtonDraggingRef.current) {
+                                e.stopPropagation();
+                                e.preventDefault();
+                                return;
+                            }
+                            e.stopPropagation();
+                            toggleCollapse(e);
+                        }, onContextMenu: (e) => e.preventDefault(), "aria-label": SDKUI_Localizator.Maximize, title: SDKUI_Localizator.Maximize, type: "button", children: _jsx(IconWindowMaximize, {}) })), _jsx("img", { src: Toppy, alt: "Toppy Help", draggable: false, onClick: isMobile ? toggleCollapse : undefined })] })] }));
+    // Renderizza nel document.body usando un Portal se usePortal è true, altrimenti renderizza normalmente
+    return usePortal ? ReactDOM.createPortal(toppyContent, document.body) : toppyContent;
+};
+export default ToppyDraggableHelpCenter;