@topconsultnpm/sdkui-react 6.22.0-dev2.8 → 6.22.0-dev3.2

package/lib/components/features/workflow/TMWorkflowPopup.d.ts

@@ -1,9 +1,18 @@
-import React from "react";
 import { DcmtTypeDescriptor, HomeBlogPost, TaskDescriptor, WFDescriptor } from '@topconsultnpm/sdk-ts';
 import { DeviceType } from "../../base/TMDeviceProvider";
 import { WorkItemDetail } from "../../../ts";
 interface IWorkflowOperationButtonsProps {
     dtd: DcmtTypeDescriptor | undefined;
+    /**
+     * Forza la forma dei pulsanti: `true` = flusso di FIRMA (Firma e approva),
+     * `false` = flusso di APPROVAZIONE. Se omesso si deduce dal tipo documento
+     * (widget Sign4Top), che è il comportamento del workflow.
+     *
+     * Serve a chi conosce la natura dell'attività meglio del tipo documento: un
+     * work item di sola approvazione su un tipo ABILITATO alla firma non deve
+     * mostrare "Firma e approva".
+     */
+    signFlow?: boolean;
     approveDisable?: boolean;
     signApproveDisable?: boolean;
     rejectDisable?: boolean;
@@ -23,7 +32,7 @@ interface IWorkflowOperationButtonsProps {
     handleNavigateToWGs?: (value: HomeBlogPost | number) => Promise<void>;
     handleNavigateToDossiers?: (value: HomeBlogPost | number) => Promise<void>;
 }
-export declare const WorkFlowOperationButtons: (props: IWorkflowOperationButtonsProps) => React.JSX.Element;
+export declare const WorkFlowOperationButtons: (props: IWorkflowOperationButtonsProps) => import("react/jsx-runtime").JSX.Element;
 export declare const WorkFlowApproveRejectPopUp: ({ TID, DID, deviceType, isReject, selectedItems, onClose, onCompleted }: {
     TID?: number;
     DID?: number;
@@ -32,7 +41,7 @@ export declare const WorkFlowApproveRejectPopUp: ({ TID, DID, deviceType, isReje
     isReject: number;
     onClose?: () => void;
     onCompleted?: () => Promise<void>;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const WorkFlowReAssignPopUp: ({ DID, TID, deviceType, onClose, selectedItems, onCompleted, wf, workItemDetail }: {
     TID?: number;
     DID?: number;
@@ -42,7 +51,7 @@ export declare const WorkFlowReAssignPopUp: ({ DID, TID, deviceType, onClose, se
     onCompleted?: () => Promise<void>;
     wf?: WFDescriptor;
     workItemDetail?: WorkItemDetail;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 /**
  * Modal per forzare l'approvazione di un work item
  */
@@ -50,7 +59,7 @@ export declare const WorkflowForceApproveModal: ({ detail, onClose, onCompleted
     detail: WorkItemDetail;
     onClose?: () => void;
     onCompleted?: () => Promise<void>;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 /**
  * Modal per forzare il rifiuto di un work item
  */
@@ -58,7 +67,7 @@ export declare const WorkflowForceRejectModal: ({ detail, onClose, onCompleted }
     detail: WorkItemDetail;
     onClose?: () => void;
     onCompleted?: () => Promise<void>;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 /**
  * Modal per terminare le istanze workflow selezionate
  */
@@ -70,7 +79,7 @@ export declare const WorkflowEndInstanceModal: ({ selectedInstances, onClose, on
     }>;
     onClose?: () => void;
     onCompleted?: () => Promise<void>;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 interface IWorkFlowMoreInfoPopUpProps {
     fromDTD?: DcmtTypeDescriptor;
     TID?: number;
@@ -87,5 +96,5 @@ interface IWorkFlowMoreInfoPopUpProps {
     handleNavigateToDossiers?: (value: HomeBlogPost | number) => Promise<void>;
     triggerBlogRefresh?: () => Promise<void>;
 }
-export declare const WorkFlowMoreInfoPopUp: (props: IWorkFlowMoreInfoPopUpProps) => React.JSX.Element | undefined;
+export declare const WorkFlowMoreInfoPopUp: (props: IWorkFlowMoreInfoPopUpProps) => import("react/jsx-runtime").JSX.Element | undefined;
 export {};

package/lib/components/features/workflow/TMWorkflowPopup.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
 import { ResultTypes, SDK_Globals, UserListCacheService, ValidationItem, WFEvents, WorkflowCacheService } from '@topconsultnpm/sdk-ts';
 import styled from "styled-components";
@@ -53,16 +53,20 @@ const StyledHorizontalContainer = styled.div `
     /* align-items: flex-end; */
 `;
 export const WorkFlowOperationButtons = (props) => {
-    const { dtd = undefined, deviceType = DeviceType.DESKTOP, approveDisable = false, signApproveDisable = false, rejectDisable = false, reassignDisable = false, infoDisable = false, onApprove, onSignApprove, onReject, onReAssign, onMoreInfo, } = props;
+    const { dtd = undefined, signFlow = undefined, deviceType = DeviceType.DESKTOP, approveDisable = false, signApproveDisable = false, rejectDisable = false, reassignDisable = false, infoDisable = false, onApprove, onSignApprove, onReject, onReAssign, onMoreInfo, } = props;
     const isMobile = deviceType === DeviceType.MOBILE;
-    // Calcola direttamente se è un workflow di firma per evitare flickering durante il render
+    // Calcola direttamente se è un workflow di firma per evitare flickering durante il render.
+    // `signFlow`, se fornito, ha la precedenza: chi lo passa conosce la natura
+    // dell'attività (es. categoria del work item) meglio del tipo documento.
     const isSignWorkflow = useMemo(() => {
+        if (signFlow !== undefined)
+            return signFlow;
         if (dtd && dtd.widgets && dtd.widgets.length > 0) {
             return isSign4TopEnabled(dtd.widgets);
         }
         return false;
-    }, [dtd]);
-    return (_jsx(StyledWorkFlowOperationButtonsContainer, { "$isMobile": isMobile, children: isSignWorkflow ? (_jsxs(_Fragment, { children: [_jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconSignaturePencil, {}), caption: SDKUI_Localizator.SignatureAndApprove, width: "160px", disabled: signApproveDisable, onClick: () => !signApproveDisable && onSignApprove?.(), onMouseDown: e => e.stopPropagation(), advancedColor: "#1a9a49", color: "success" }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconCloseOutline, {}), caption: SDKUI_Localizator.Reject, disabled: rejectDisable, onClick: () => !rejectDisable && onReject?.(), onMouseDown: e => e.stopPropagation(), advancedColor: TMColors.error, color: "error" }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconInfo, { fontSize: 16 }), caption: SDKUI_Localizator.MoreInformation, width: "180px", disabled: infoDisable, onClick: () => !infoDisable && onMoreInfo?.(), onMouseDown: e => e.stopPropagation(), advancedColor: TMColors.info, color: "info" })] })) : (_jsxs(_Fragment, { children: [_jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconApply, {}), caption: SDKUI_Localizator.Approve, disabled: approveDisable, onClick: () => !approveDisable && onApprove?.(), advancedColor: "#1a9a49", color: "success" }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconCloseOutline, {}), caption: SDKUI_Localizator.Reject, disabled: rejectDisable, onClick: () => !rejectDisable && onReject?.(), advancedColor: TMColors.error, color: "error" }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconUser, { fontSize: 16 }), caption: SDKUI_Localizator.Reassign, disabled: reassignDisable, onClick: () => !reassignDisable && onReAssign?.(), advancedColor: TMColors.tertiary, color: "tertiary" }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconInfo, { fontSize: 16 }), caption: SDKUI_Localizator.MoreInformation, width: "180px", disabled: infoDisable, onClick: () => !infoDisable && onMoreInfo?.(), advancedColor: TMColors.info, color: "info" })] })) }));
+    }, [dtd, signFlow]);
+    return (_jsx(StyledWorkFlowOperationButtonsContainer, { $isMobile: isMobile, children: isSignWorkflow ? (_jsxs(_Fragment, { children: [_jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconSignaturePencil, {}), caption: SDKUI_Localizator.SignatureAndApprove, width: "160px", disabled: signApproveDisable, onClick: () => !signApproveDisable && onSignApprove?.(), onMouseDown: e => e.stopPropagation(), advancedColor: "#1a9a49", color: "success" }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconCloseOutline, {}), caption: SDKUI_Localizator.Reject, disabled: rejectDisable, onClick: () => !rejectDisable && onReject?.(), onMouseDown: e => e.stopPropagation(), advancedColor: TMColors.error, color: "error" }), onMoreInfo && (_jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconInfo, { fontSize: 16 }), caption: SDKUI_Localizator.MoreInformation, width: "180px", disabled: infoDisable, onClick: () => !infoDisable && onMoreInfo?.(), onMouseDown: e => e.stopPropagation(), advancedColor: TMColors.info, color: "info" }))] })) : (_jsxs(_Fragment, { children: [_jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconApply, {}), caption: SDKUI_Localizator.Approve, disabled: approveDisable, onClick: () => !approveDisable && onApprove?.(), advancedColor: "#1a9a49", color: "success" }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconCloseOutline, {}), caption: SDKUI_Localizator.Reject, disabled: rejectDisable, onClick: () => !rejectDisable && onReject?.(), advancedColor: TMColors.error, color: "error" }), onReAssign && (_jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconUser, { fontSize: 16 }), caption: SDKUI_Localizator.Reassign, disabled: reassignDisable, onClick: () => !reassignDisable && onReAssign?.(), advancedColor: TMColors.tertiary, color: "tertiary" })), onMoreInfo && (_jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx(IconInfo, { fontSize: 16 }), caption: SDKUI_Localizator.MoreInformation, width: "180px", disabled: infoDisable, onClick: () => !infoDisable && onMoreInfo?.(), advancedColor: TMColors.info, color: "info" }))] })) }));
 };
 export const WorkFlowApproveRejectPopUp = ({ TID = 0, DID = 0, deviceType = DeviceType.DESKTOP, isReject, selectedItems = [], onClose, onCompleted }) => {
     const { refreshWorkflowApprove } = useWorkflowApprove();

package/lib/components/features/workflow/diagram/ConnectionComponent.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback } from 'react';
 import { ArrowSymbol } from './interfaces';
 import styled, { css } from 'styled-components';
@@ -56,7 +56,7 @@ const ConnectionComponent = ({ connection, isSelected, sourcePoint, sinkPoint, i
             default:
                 return null;
         }
-        return _jsx(StyledArrow, { d: pathData, "$color": connectionColor });
+        return _jsx(StyledArrow, { d: pathData, $color: connectionColor });
     }, [connectionColor]);
     // Calcola la trasformazione per posizionare e ruotare la freccia
     const calculateArrowTransform = useCallback((isSink) => {
@@ -86,7 +86,7 @@ const ConnectionComponent = ({ connection, isSelected, sourcePoint, sinkPoint, i
         event.stopPropagation();
         onContextMenu?.(connection.ID, event);
     }, [onContextMenu, connection.ID]);
-    return (_jsxs("g", { children: [_jsx(StyledPathHitArea, { d: connection.PathGeometry, onClick: (e) => onClick(connection.ID, e), onDoubleClick: handleDoubleClick, onContextMenu: handleContextMenu }), _jsx(StyledPath, { d: connection.PathGeometry, "$isSelected": isSelected, "$isTemporary": isTemporary, "$outputStatus": connection.OutputStatus, onClick: (e) => onClick(connection.ID, e), onDoubleClick: handleDoubleClick, onContextMenu: handleContextMenu }), connection.SinkArrowSymbol !== ArrowSymbol.None && (_jsxs("g", { transform: calculateArrowTransform(true), children: [renderArrow(connection.SinkArrowSymbol, 0), " "] })), connection.SourceArrowSymbol !== ArrowSymbol.None && (_jsx("g", { transform: calculateArrowTransform(false) + ' rotate(180)', children: renderArrow(connection.SourceArrowSymbol, 0) })), isSelected && (_jsxs(_Fragment, { children: [_jsx(StyledSquareConnector, { "$color": connectionColor, x: sourcePoint.x - 5, y: sourcePoint.y - 5, width: 10, height: 10 }), _jsx(StyledSquareConnector, { "$color": connectionColor, x: sinkPoint.x - 5, y: sinkPoint.y - 5, width: 10, height: 10, cursor: 'move', onMouseDown: (e) => {
+    return (_jsxs("g", { children: [_jsx(StyledPathHitArea, { d: connection.PathGeometry, onClick: (e) => onClick(connection.ID, e), onDoubleClick: handleDoubleClick, onContextMenu: handleContextMenu }), _jsx(StyledPath, { d: connection.PathGeometry, $isSelected: isSelected, $isTemporary: isTemporary, $outputStatus: connection.OutputStatus, onClick: (e) => onClick(connection.ID, e), onDoubleClick: handleDoubleClick, onContextMenu: handleContextMenu }), connection.SinkArrowSymbol !== ArrowSymbol.None && (_jsxs("g", { transform: calculateArrowTransform(true), children: [renderArrow(connection.SinkArrowSymbol, 0), " "] })), connection.SourceArrowSymbol !== ArrowSymbol.None && (_jsx("g", { transform: calculateArrowTransform(false) + ' rotate(180)', children: renderArrow(connection.SourceArrowSymbol, 0) })), isSelected && (_jsxs(_Fragment, { children: [_jsx(StyledSquareConnector, { $color: connectionColor, x: sourcePoint.x - 5, y: sourcePoint.y - 5, width: 10, height: 10 }), _jsx(StyledSquareConnector, { $color: connectionColor, x: sinkPoint.x - 5, y: sinkPoint.y - 5, width: 10, height: 10, cursor: 'move', onMouseDown: (e) => {
                             e.stopPropagation(); // Impedisce la propagazione dell'evento a elementi sottostanti
                             onConnectionEndpointMouseDown?.(connection.ID, 'sink', e);
                         } })] }))] }));

package/lib/components/features/workflow/diagram/DiagramItemComponent.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState, useCallback, useRef, useEffect, useMemo } from 'react';
 import { DiagramItemTypes } from './interfaces';
 import styled, { keyframes, css } from 'styled-components';
@@ -230,7 +230,7 @@ const DiagramItemComponent = ({ wf, item, isSelected, isCurrent, readOnly, allow
         onDoubleClick?.(item.ID);
     }, [onDoubleClick, item.ID]);
     const renderContent = () => {
-        const renderConnectorWithHitArea = (cx, cy, connectorName) => (_jsxs(_Fragment, { children: [_jsx(Connector, { cx: cx, cy: cy, r: 4, "$isVisible": isHovered && !readOnly, "$isReadOnly": readOnly }), _jsx(ConnectorHitArea, { cx: cx, cy: cy, r: 15, "$isVisible": isHovered && !readOnly, "$isReadOnly": readOnly, "data-is-connector": "true", onMouseDown: (e) => {
+        const renderConnectorWithHitArea = (cx, cy, connectorName) => (_jsxs(_Fragment, { children: [_jsx(Connector, { cx: cx, cy: cy, r: 4, $isVisible: isHovered && !readOnly, $isReadOnly: readOnly }), _jsx(ConnectorHitArea, { cx: cx, cy: cy, r: 15, $isVisible: isHovered && !readOnly, $isReadOnly: readOnly, "data-is-connector": "true", onMouseDown: (e) => {
                         if (readOnly)
                             return;
                         e.stopPropagation();
@@ -266,6 +266,6 @@ const DiagramItemComponent = ({ wf, item, isSelected, isCurrent, readOnly, allow
         }
         return (_jsxs(_Fragment, { children: [isTruncated && _jsx("title", { children: item.ItemName }), backgroundColor && (_jsx("rect", { x: "-5", y: "-5", width: calculatedWidth + 10, height: calculatedHeight + 10, rx: "12", ry: "12", fill: backgroundColor, opacity: "0.4", style: { filter: 'blur(3px)' } })), _jsx("rect", { x: "0", y: "0", width: calculatedWidth, height: calculatedHeight, className: "item-main-shape", fill: "transparent" }), _jsx("g", { transform: `translate(${svgX}, ${svgY})`, children: _jsx(DiagramItemSvgContent, { itemType: item.Type, width: iconRenderWidth, height: iconRenderHeight, statusData: statusData }) }), textLines.length > 0 && (_jsx("text", { ref: textRef, x: calculatedWidth / 2, dominantBaseline: "central", className: "item-text", children: textLines.map((line, index) => (_jsx("tspan", { x: calculatedWidth / 2, dy: index === 0 ? PADDING_TOP + SVG_ICON_SIZE + SPACING_SVG_TEXT : FONT_SIZE + 1, children: line }, index))) })), connectors] }));
     };
-    return (_jsx(StyledDiagramItem, { ref: diagramItemRef, transform: `translate(${currentPosition.x}, ${currentPosition.y})`, "$isSelected": isSelected, "$itemType": item.Type, "$isDragging": isDragging, "$isHovered": isHovered, "$isReadOnly": readOnly, "$allowItemClick": allowItemClick, onMouseDown: handleMouseDown, onClick: handleItemClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onDoubleClick: handleDoubleClick, children: _jsx(AnimatingGroup, { "$isCurrent": isCurrent, children: renderContent() }) }));
+    return (_jsx(StyledDiagramItem, { ref: diagramItemRef, transform: `translate(${currentPosition.x}, ${currentPosition.y})`, $isSelected: isSelected, $itemType: item.Type, $isDragging: isDragging, $isHovered: isHovered, $isReadOnly: readOnly, $allowItemClick: allowItemClick, onMouseDown: handleMouseDown, onClick: handleItemClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onDoubleClick: handleDoubleClick, children: _jsx(AnimatingGroup, { $isCurrent: isCurrent, children: renderContent() }) }));
 };
 export default React.memo(DiagramItemComponent);

package/lib/components/features/workflow/diagram/DiagramItemForm.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useState } from 'react'; // Importa useState
 import TMModal from '../../../base/TMModal';
 import { DiagramItemTypes } from './interfaces';

package/lib/components/features/workflow/diagram/DiagramItemSvgContent.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DiagramItemTypes } from './interfaces'; // Assicurati che il percorso sia corretto
 import styled from 'styled-components';
 import { TMImageLibrary } from '../../../../helper';

package/lib/components/features/workflow/diagram/RecipientList.js

@@ -199,7 +199,7 @@ const RecipientList = ({ recipients, title, tid, qd, maxRecipients, validationIt
             document.removeEventListener('keydown', handleKeyPress);
         };
     }, [handleKeyPress]);
-    return (_jsxs(RecipientsColumn, { children: [_jsxs(HeaderContainer, { children: [_jsx("p", { style: { fontWeight: 600 }, children: title }), _jsx(TMButton, { btnStyle: 'icon', caption: SDKUI_Localizator.AddRecipient, icon: _jsx(IconAdd, {}), onClick: handleAddClick, disabled: isMaxReached }), uiState.isMenuOpen && !isMaxReached && renderFloatingMenu()] }), _jsx(TMVilViewer, { vil: validationItems }), _jsx("div", { style: { height: '150px', overflowY: 'auto', gap: '5px', display: 'flex', flexDirection: 'column' }, children: recipients.map((recipient, index) => (_jsxs(RecipientItem, { "$isSelected": uiState.selectedRecipientIndex === index, onClick: () => handleRecipientClick(index), tabIndex: 0, children: [_jsx("span", { style: { display: 'flex', alignItems: 'center', flexShrink: 0 }, children: _jsx(IconDelete, { color: '#c00', cursor: 'pointer', onClick: (e) => {
+    return (_jsxs(RecipientsColumn, { children: [_jsxs(HeaderContainer, { children: [_jsx("p", { style: { fontWeight: 600 }, children: title }), _jsx(TMButton, { btnStyle: 'icon', caption: SDKUI_Localizator.AddRecipient, icon: _jsx(IconAdd, {}), onClick: handleAddClick, disabled: isMaxReached }), uiState.isMenuOpen && !isMaxReached && renderFloatingMenu()] }), _jsx(TMVilViewer, { vil: validationItems }), _jsx("div", { style: { height: '150px', overflowY: 'auto', gap: '5px', display: 'flex', flexDirection: 'column' }, children: recipients.map((recipient, index) => (_jsxs(RecipientItem, { $isSelected: uiState.selectedRecipientIndex === index, onClick: () => handleRecipientClick(index), tabIndex: 0, children: [_jsx("span", { style: { display: 'flex', alignItems: 'center', flexShrink: 0 }, children: _jsx(IconDelete, { color: '#c00', cursor: 'pointer', onClick: (e) => {
                                     e.stopPropagation();
                                     onRemove(recipient);
                                     setUiState(prevState => ({ ...prevState, selectedRecipientIndex: null }));

package/lib/components/features/workflow/diagram/WFDiagram.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useCallback, useRef, useMemo, useLayoutEffect } from 'react';
 import { DiagramItemTypes, ArrowSymbol } from './interfaces';
 import { parseWfDiagramXml, serializeWfDiagramToXml } from './xmlParser';
@@ -1925,13 +1925,13 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, allowEdit = true, onDiagram
                         { icon: _jsx(IconZoomIn, {}), name: SDKUI_Localizator.ZoomIn, disabled: isAutoZoomEnabled, onClick: () => { handleZoomIn(); }, id: 'zoom-in', isPinned: true },
                         { icon: _jsx(IconZoomOut, {}), name: SDKUI_Localizator.ZoomOut, disabled: isAutoZoomEnabled, onClick: () => { handleZoomOut(); }, id: 'zoom-out', isPinned: true },
                         { icon: _jsx(IconZoomAuto, {}), name: 'AutoZoom', onClick: () => { handleToggleAutoZoom(); }, id: 'zoom-auto', isPinned: true, isToggle: isAutoZoomEnabled },
-                        { icon: _jsx(_Fragment, {}), name: 'Zoom Level', onClick: () => { }, id: 'zoom-level', isPinned: true, staticItem: _jsx(ZoomLevelText, { "$isFloating": isToolbarFloating, "$isCollapsed": isToolbarCollapsed, children: formattedZoomLevel }) }
+                        { icon: _jsx(_Fragment, {}), name: 'Zoom Level', onClick: () => { }, id: 'zoom-level', isPinned: true, staticItem: _jsx(ZoomLevelText, { $isFloating: isToolbarFloating, $isCollapsed: isToolbarCollapsed, children: formattedZoomLevel }) }
                     ], isConstrained: true }) :
-                _jsxs(ToolbarContainer, { "$isCollapsed": isToolbarCollapsed, "$isFloating": isToolbarFloating, "$isToolboxVisible": isToolboxVisible, "$isReadOnly": isReadOnly, children: [allowEdit && _jsx(ButtonGroup, { "$isFloating": isToolbarFloating, children: _jsxs("button", { onClick: toggleReadOnlyMode, title: isReadOnly ? SDKUI_Localizator.Design : SDKUI_Localizator.ReadOnly, children: [isReadOnly ? _jsx(IconPencil, {}) : _jsx(IconLock, {}), !isToolbarCollapsed && _jsx("span", { children: isReadOnly ? SDKUI_Localizator.Design : SDKUI_Localizator.ReadOnly })] }) }), allowEdit && _jsxs(ButtonGroup, { "$isFloating": isToolbarFloating, children: [!isReadOnly && _jsxs("button", { onClick: handleToggleToolboxVisibility, title: SDKUI_Localizator.ShowToolbox, children: [_jsx(IconFlowChart, {}), !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.ShowToolboxToggle })] }), _jsxs("button", { onClick: toggleFullScreenMode, title: SDKUI_Localizator.ShowFullScreen, children: [isFullScreen ? _jsx(IconWindowMinimize, {}) : _jsx(IconWindowMaximize, {}), !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.ShowFullScreen })] })] }), _jsxs(ButtonGroup, { "$isFloating": isToolbarFloating, children: [_jsxs("button", { onClick: handleZoomIn, title: SDKUI_Localizator.ZoomIn, disabled: isAutoZoomEnabled, children: [_jsx(IconZoomIn, {}), !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.ZoomIn })] }), _jsxs("button", { onClick: handleZoomOut, title: SDKUI_Localizator.ZoomOut, disabled: isAutoZoomEnabled, children: [_jsx(IconZoomOut, {}), !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.ZoomOut })] }), _jsxs("button", { onClick: handleToggleAutoZoom, title: "AutoZoom", style: { backgroundColor: isAutoZoomEnabled ? '#66b3ff' : undefined }, children: [_jsx(IconZoomAuto, {}), !isToolbarCollapsed && _jsx("span", { children: "AutoZoom" })] }), _jsx(ZoomLevelText, { "$isFloating": isToolbarFloating, "$isCollapsed": isToolbarCollapsed, children: formattedZoomLevel })] }), !isReadOnly && _jsxs(ButtonGroup, { "$isFloating": isToolbarFloating, children: [_jsxs("button", { onClick: handleUndo, disabled: historyIndex === 0, title: SDKUI_Localizator.Undo, children: [_jsx(IconUndo, {}), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.Undo })] }), _jsxs("button", { onClick: handleRedo, disabled: historyIndex === wfDiagramHistory.length - 1, title: SDKUI_Localizator.Redo, children: [_jsx(IconUndo, { style: { transform: 'scaleX(-1)' } }), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.Redo })] }), _jsxs("button", { onClick: handleRestore, title: SDKUI_Localizator.Restore, children: [_jsx(IconRestore, {}), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.Restore })] }), _jsxs("button", { onClick: handleNew, title: SDKUI_Localizator.DiagramNew, disabled: isReadOnly, children: [_jsx(IconNew, {}), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.DiagramNew })] }), _jsxs("button", { onClick: handleExportDiagram, disabled: isReadOnly || !wfDiagram, title: SDKUI_Localizator.Export, children: [_jsx(IconExport, {}), _jsx("span", { children: SDKUI_Localizator.Export })] }), _jsxs("button", { onClick: handleImportDiagramClick, disabled: isReadOnly, title: SDKUI_Localizator.Import, children: [_jsx(IconImport, {}), _jsx("span", { children: SDKUI_Localizator.Import })] })] }), !isReadOnly && _jsx(ButtonGroup, { "$isFloating": isToolbarFloating, children: _jsxs("button", { onClick: handleAutoAdjust, title: SDKUI_Localizator.AutoAdjust, children: [_jsx(IconAdjust, {}), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.AutoAdjust })] }) }), !isReadOnly && _jsxs(ButtonGroup, { "$isFloating": isToolbarFloating, children: [_jsxs("button", { onClick: handleCopy, disabled: selectedItems.size === 0, title: SDKUI_Localizator.Copy, children: [_jsx(IconCopy, {}), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.Copy })] }), _jsxs("button", { onClick: handleCut, disabled: selectedItems.size === 0, title: SDKUI_Localizator.Cut, children: [_jsx(IconCut, {}), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.Cut })] }), _jsxs("button", { onClick: handlePaste, disabled: copiedItems.length === 0 && copiedConnections.length === 0, title: SDKUI_Localizator.Paste, children: [_jsx(IconPaste, {}), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.Paste })] })] }), allowEdit && _jsxs("button", { onClick: handleToggleToolbarMode, title: isToolbarFloating ? SDKUI_Localizator.ToolbarDock : SDKUI_Localizator.ToolbarFloat, children: [isToolbarFloating ? _jsx(IconPin, {}) : _jsx(IconUnpin, {}), !isToolbarCollapsed && !isToolbarFloating && _jsx("span", { children: SDKUI_Localizator.ToggleMode })] }), !isToolbarFloating && _jsx(ToolbarToggle, { onClick: () => setIsToolbarCollapsed(!isToolbarCollapsed), title: isToolbarCollapsed ? SDKUI_Localizator.ToolbarExpand : SDKUI_Localizator.ToolbarCollapse, children: isToolbarCollapsed ? _jsx(IconChevronRight, {}) : _jsx(IconCloseOutline, {}) })] }), !isReadOnly && (_jsx(ToolboxContainer, { "$isVisible": isToolboxVisible, children: isToolboxVisible && availableItemTypes.map(type => (_jsxs(ToolboxItem, { draggable: true, onDragStart: (e) => handleToolboxDragStart(e, type), onDragEnd: handleToolboxDragEnd, children: [_jsx(ToolboxIconWrapper, { children: _jsx(DiagramItemSvgContent, { itemType: type, width: 38, height: 38, isToolboxPreview: true }) }), _jsx("span", { children: LocalizeDiagramItemType(type) })] }, type))) })), _jsx(SvgScrollContainer, { ref: containerRef, children: isLoading ?
+                _jsxs(ToolbarContainer, { $isCollapsed: isToolbarCollapsed, $isFloating: isToolbarFloating, $isToolboxVisible: isToolboxVisible, $isReadOnly: isReadOnly, children: [allowEdit && _jsx(ButtonGroup, { $isFloating: isToolbarFloating, children: _jsxs("button", { onClick: toggleReadOnlyMode, title: isReadOnly ? SDKUI_Localizator.Design : SDKUI_Localizator.ReadOnly, children: [isReadOnly ? _jsx(IconPencil, {}) : _jsx(IconLock, {}), !isToolbarCollapsed && _jsx("span", { children: isReadOnly ? SDKUI_Localizator.Design : SDKUI_Localizator.ReadOnly })] }) }), allowEdit && _jsxs(ButtonGroup, { $isFloating: isToolbarFloating, children: [!isReadOnly && _jsxs("button", { onClick: handleToggleToolboxVisibility, title: SDKUI_Localizator.ShowToolbox, children: [_jsx(IconFlowChart, {}), !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.ShowToolboxToggle })] }), _jsxs("button", { onClick: toggleFullScreenMode, title: SDKUI_Localizator.ShowFullScreen, children: [isFullScreen ? _jsx(IconWindowMinimize, {}) : _jsx(IconWindowMaximize, {}), !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.ShowFullScreen })] })] }), _jsxs(ButtonGroup, { $isFloating: isToolbarFloating, children: [_jsxs("button", { onClick: handleZoomIn, title: SDKUI_Localizator.ZoomIn, disabled: isAutoZoomEnabled, children: [_jsx(IconZoomIn, {}), !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.ZoomIn })] }), _jsxs("button", { onClick: handleZoomOut, title: SDKUI_Localizator.ZoomOut, disabled: isAutoZoomEnabled, children: [_jsx(IconZoomOut, {}), !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.ZoomOut })] }), _jsxs("button", { onClick: handleToggleAutoZoom, title: "AutoZoom", style: { backgroundColor: isAutoZoomEnabled ? '#66b3ff' : undefined }, children: [_jsx(IconZoomAuto, {}), !isToolbarCollapsed && _jsx("span", { children: "AutoZoom" })] }), _jsx(ZoomLevelText, { $isFloating: isToolbarFloating, $isCollapsed: isToolbarCollapsed, children: formattedZoomLevel })] }), !isReadOnly && _jsxs(ButtonGroup, { $isFloating: isToolbarFloating, children: [_jsxs("button", { onClick: handleUndo, disabled: historyIndex === 0, title: SDKUI_Localizator.Undo, children: [_jsx(IconUndo, {}), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.Undo })] }), _jsxs("button", { onClick: handleRedo, disabled: historyIndex === wfDiagramHistory.length - 1, title: SDKUI_Localizator.Redo, children: [_jsx(IconUndo, { style: { transform: 'scaleX(-1)' } }), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.Redo })] }), _jsxs("button", { onClick: handleRestore, title: SDKUI_Localizator.Restore, children: [_jsx(IconRestore, {}), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.Restore })] }), _jsxs("button", { onClick: handleNew, title: SDKUI_Localizator.DiagramNew, disabled: isReadOnly, children: [_jsx(IconNew, {}), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.DiagramNew })] }), _jsxs("button", { onClick: handleExportDiagram, disabled: isReadOnly || !wfDiagram, title: SDKUI_Localizator.Export, children: [_jsx(IconExport, {}), _jsx("span", { children: SDKUI_Localizator.Export })] }), _jsxs("button", { onClick: handleImportDiagramClick, disabled: isReadOnly, title: SDKUI_Localizator.Import, children: [_jsx(IconImport, {}), _jsx("span", { children: SDKUI_Localizator.Import })] })] }), !isReadOnly && _jsx(ButtonGroup, { $isFloating: isToolbarFloating, children: _jsxs("button", { onClick: handleAutoAdjust, title: SDKUI_Localizator.AutoAdjust, children: [_jsx(IconAdjust, {}), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.AutoAdjust })] }) }), !isReadOnly && _jsxs(ButtonGroup, { $isFloating: isToolbarFloating, children: [_jsxs("button", { onClick: handleCopy, disabled: selectedItems.size === 0, title: SDKUI_Localizator.Copy, children: [_jsx(IconCopy, {}), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.Copy })] }), _jsxs("button", { onClick: handleCut, disabled: selectedItems.size === 0, title: SDKUI_Localizator.Cut, children: [_jsx(IconCut, {}), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.Cut })] }), _jsxs("button", { onClick: handlePaste, disabled: copiedItems.length === 0 && copiedConnections.length === 0, title: SDKUI_Localizator.Paste, children: [_jsx(IconPaste, {}), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.Paste })] })] }), allowEdit && _jsxs("button", { onClick: handleToggleToolbarMode, title: isToolbarFloating ? SDKUI_Localizator.ToolbarDock : SDKUI_Localizator.ToolbarFloat, children: [isToolbarFloating ? _jsx(IconPin, {}) : _jsx(IconUnpin, {}), !isToolbarCollapsed && !isToolbarFloating && _jsx("span", { children: SDKUI_Localizator.ToggleMode })] }), !isToolbarFloating && _jsx(ToolbarToggle, { onClick: () => setIsToolbarCollapsed(!isToolbarCollapsed), title: isToolbarCollapsed ? SDKUI_Localizator.ToolbarExpand : SDKUI_Localizator.ToolbarCollapse, children: isToolbarCollapsed ? _jsx(IconChevronRight, {}) : _jsx(IconCloseOutline, {}) })] }), !isReadOnly && (_jsx(ToolboxContainer, { $isVisible: isToolboxVisible, children: isToolboxVisible && availableItemTypes.map(type => (_jsxs(ToolboxItem, { draggable: true, onDragStart: (e) => handleToolboxDragStart(e, type), onDragEnd: handleToolboxDragEnd, children: [_jsx(ToolboxIconWrapper, { children: _jsx(DiagramItemSvgContent, { itemType: type, width: 38, height: 38, isToolboxPreview: true }) }), _jsx("span", { children: LocalizeDiagramItemType(type) })] }, type))) })), _jsx(SvgScrollContainer, { ref: containerRef, children: isLoading ?
                     (_jsxs(StyledLoadingContainer, { children: [_jsx(StyledSpinner, {}), _jsx("span", { children: `${'Caricamento diagramma'}...` })] })) : wfDiagram ? (_jsx(StyledSvg, { ref: svgRef, tabIndex: 0, onKeyDownCapture: handleKeyDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseDown: handleMouseDown, onDrop: handleDropOnCanvas, onDragOver: handleDragOver, width: svgWidth, height: svgHeight, style: {
                         opacity: (defaultAutoZoom && !isInitialZoomCalculated) ? 0 : 1,
                         transition: 'opacity 0.15s ease-in'
-                    }, children: _jsxs(ScalableGroup, { "$scale": zoomLevel, "$translateX": translateX, "$translateY": translateY, children: [wfDiagram?.DiagramItems.map(item => (_jsx(DiagramItemComponent, { wf: wfDiagram?.Info, readOnly: isReadOnly, allowItemClick: !allowEdit && workitems && workitems.length > 0 && !!onDiagramItemClick, item: item, isSelected: selectedItems.has(item.ID), isCurrent: item.ID === currentSetID, onClick: handleDiagramItemClick, onDrag: handleDrag, onDragEnd: handleDragEnd, onConnectorMouseDown: handleConnectorMouseDown, onConnectorMouseUp: handleConnectorMouseUp, onDimensionsChange: handleItemDimensionsChange, onDoubleClick: handleDoubleClickItem, backgroundColor: getWorkItemBackgroundColor(item.ID) }, item.ID))), calculatedConnections.map(connection => {
+                    }, children: _jsxs(ScalableGroup, { $scale: zoomLevel, $translateX: translateX, $translateY: translateY, children: [wfDiagram?.DiagramItems.map(item => (_jsx(DiagramItemComponent, { wf: wfDiagram?.Info, readOnly: isReadOnly, allowItemClick: !allowEdit && workitems && workitems.length > 0 && !!onDiagramItemClick, item: item, isSelected: selectedItems.has(item.ID), isCurrent: item.ID === currentSetID, onClick: handleDiagramItemClick, onDrag: handleDrag, onDragEnd: handleDragEnd, onConnectorMouseDown: handleConnectorMouseDown, onConnectorMouseUp: handleConnectorMouseUp, onDimensionsChange: handleItemDimensionsChange, onDoubleClick: handleDoubleClickItem, backgroundColor: getWorkItemBackgroundColor(item.ID) }, item.ID))), calculatedConnections.map(connection => {
                                 const sourceItem = wfDiagram?.DiagramItems.find(item => item.ID === connection.Source.ParentDiagramItem.ID);
                                 const sinkItem = wfDiagram?.DiagramItems.find(item => item.ID === connection.Sink.ParentDiagramItem.ID);
                                 if (!sourceItem || !sinkItem)

package/lib/components/features/workflow/diagram/WorkitemRecipientsEditor.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { QueryDescriptor } from '@topconsultnpm/sdk-ts';
 import { WorkItemActor } from './RecipientList';
-export declare const RecipientsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const RecipientsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const tosToActors: (tosString: string) => {
     andRecipients: WorkItemActor[];
     orRecipients: WorkItemActor[];

package/lib/components/forms/Login/ChangePasswordInputs.d.ts

@@ -11,4 +11,4 @@ interface ChangePasswordInputsProps {
 }
 declare const ChangePasswordInputs: React.FC<ChangePasswordInputsProps>;
 export default ChangePasswordInputs;
-export declare const Divider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const Divider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/lib/components/forms/Login/Chooser.d.ts

@@ -23,6 +23,6 @@ interface ChooserProps<T> {
     onClose?: () => void;
     isDropDown?: boolean;
 }
-declare const Chooser: <T>({ dataSource, columns, value, additionalIcons, validationItems, title, label, icon, placeHolder, disabled, selectedRow, onChooserClick, onSelectionChanged, onClose, isDropDown }: ChooserProps<T>) => React.JSX.Element;
+declare const Chooser: <T>({ dataSource, columns, value, additionalIcons, validationItems, title, label, icon, placeHolder, disabled, selectedRow, onChooserClick, onSelectionChanged, onClose, isDropDown }: ChooserProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default Chooser;
-export declare function IconDropDown(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+export declare function IconDropDown(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/lib/components/forms/Login/Menu.js

@@ -43,6 +43,6 @@ const Menu = ({ visible = false, children, x, y, onClose }) => {
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [visible, onClose]);
-    return visible ? (_jsx(MenuContainer, { ref: menuRef, "$x": x, "$y": y, "$visible": visible, children: children })) : null;
+    return visible ? (_jsx(MenuContainer, { ref: menuRef, $x: x, $y: y, $visible: visible, children: children })) : null;
 };
 export default Menu;

package/lib/components/forms/Login/OTPReader.js

@@ -79,7 +79,7 @@ const OTPReader = ({ digits, onChange, onFullChange, onResendOTP, resendCooldown
         }, 1000);
     };
     const safeDigits = digits.length === 6 ? digits : Array(6).fill('');
-    return (_jsxs(Container, { children: [_jsx(LargeTitle, { children: header ?? LOGINLocalizator.EnterOtpCode }), _jsx(Title, { children: text ?? LOGINLocalizator.EnterOtpEmailOnly }), _jsx(InputsWrapper, { children: safeDigits.map((digit, i) => (_jsx(DigitBox, { "$isMobile": isMobile, "$filled": !!digit, maxLength: 1, value: digit, onChange: (e) => handleChange(e.target.value, i), onKeyDown: (e) => handleKeyDown(e, i), onPaste: handlePaste, ref: (el) => (inputRefs.current[i] = el), inputMode: "numeric" }, i * 2))) }), _jsxs(ControlsRow, { "$isMobile": isMobile, children: [_jsx(TMButton, { btnStyle: 'text', disabled: clearBtnDisabled, caption: SDKUI_Localizator.ClearOTP, showTooltip: false, onClick: handleClearOTP, color: 'tertiary' }), onResendOTP && (_jsx(TMButton, { btnStyle: 'text', disabled: resendTimer > 0, caption: resendTimer > 0 ? `${LOGINLocalizator.ResendIn + ' ' + resendTimer}s` : LOGINLocalizator.ResendOtp, showTooltip: false, onClick: handleResendOTP, color: 'success' })), additionalButtons.map((btn, index) => (_jsx("div", { children: btn }, index * 2)))] })] }));
+    return (_jsxs(Container, { children: [_jsx(LargeTitle, { children: header ?? LOGINLocalizator.EnterOtpCode }), _jsx(Title, { children: text ?? LOGINLocalizator.EnterOtpEmailOnly }), _jsx(InputsWrapper, { children: safeDigits.map((digit, i) => (_jsx(DigitBox, { $isMobile: isMobile, $filled: !!digit, maxLength: 1, value: digit, onChange: (e) => handleChange(e.target.value, i), onKeyDown: (e) => handleKeyDown(e, i), onPaste: handlePaste, ref: (el) => (inputRefs.current[i] = el), inputMode: "numeric" }, i * 2))) }), _jsxs(ControlsRow, { $isMobile: isMobile, children: [_jsx(TMButton, { btnStyle: 'text', disabled: clearBtnDisabled, caption: SDKUI_Localizator.ClearOTP, showTooltip: false, onClick: handleClearOTP, color: 'tertiary' }), onResendOTP && (_jsx(TMButton, { btnStyle: 'text', disabled: resendTimer > 0, caption: resendTimer > 0 ? `${LOGINLocalizator.ResendIn + ' ' + resendTimer}s` : LOGINLocalizator.ResendOtp, showTooltip: false, onClick: handleResendOTP, color: 'success' })), additionalButtons.map((btn, index) => (_jsx("div", { children: btn }, index * 2)))] })] }));
 };
 export default OTPReader;
 const Container = styled.div ` display: flex; flex-direction: column; align-items: center; gap: 2px; `;

package/lib/components/forms/Login/PasswordStrengthChecker.js

@@ -36,7 +36,7 @@ const PasswordStrengthChecker = ({ password, onValidationChange }) => {
         const unmetRules = rules.filter((_, i) => !res[i]).map(r => r.label);
         onValidationChange?.(isValid, unmetRules);
     }, [password]);
-    return (_jsxs(Wrapper, { children: [_jsxs(Title, { children: [_jsxs(CircleContainer, { children: [" ", _jsx(IconInfo, { color: '#f9c1a8' }), " "] }), SDKUI_Localizator.PasswordRule_Requirement] }), rules.map((rule, i) => (_jsxs(Rule, { "$passed": results[i], children: [" ", rule.label, " "] }, i * 2)))] }));
+    return (_jsxs(Wrapper, { children: [_jsxs(Title, { children: [_jsxs(CircleContainer, { children: [" ", _jsx(IconInfo, { color: '#f9c1a8' }), " "] }), SDKUI_Localizator.PasswordRule_Requirement] }), rules.map((rule, i) => (_jsxs(Rule, { $passed: results[i], children: [" ", rule.label, " "] }, i * 2)))] }));
 };
 export default PasswordStrengthChecker;
 const Wrapper = styled.div ` padding: 10px; border-radius: 12px; background: linear-gradient(135deg, #f9c1a8 0%, white 40%, white 100%); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); max-width: 400px; `;

package/lib/components/forms/Login/RapidAccessLogin.js

@@ -273,8 +273,8 @@ const RapidAccessItem = ({ rapidAccess, isMobile = false, onRemove, onSelect, on
         handleClose();
     };
     const expandedAriaHandler = () => setIsExpanded(!isExpanded);
-    return (_jsxs(Container, { children: [_jsxs(ItemWrapper, { children: [_jsxs(ItemProfileWrapper, { style: { zIndex: 100 - index }, onDoubleClick: () => onSelect(rapidAccess.id), children: [_jsx(PreferredIconContainer, { onClick: () => onDefault(rapidAccess.id), children: _jsx(TMTooltip, { content: SDKUI_Localizator.Default, children: rapidAccess.preferred ? _jsx(IconStarSolid, { color: TMColors.tertiary, fontSize: 20 }) : _jsx(IconStarOutline, { fontSize: 20 }) }) }), _jsx(ProfileCircle, { "$color": rapidAccess.color ?? TMColors.primary, onClick: () => setIsMenuOpen(true), children: iconMap[rapidAccess.icon] ?? _jsx(IconUser, { fontSize: 20 }) }), _jsxs(RapidAccessName, { onClick: expandedAriaHandler, children: [" ", truncateText(rapidAccess.name, 50)] })] }), _jsxs(ItemOperationsWrapper, { children: [_jsx(ExpandButton, { onClick: expandedAriaHandler, children: isExpanded ? _jsx(IconCollapse, { fontSize: 16 }) : _jsx(IconExpand, { fontSize: 16 }) }), _jsx(TMButton, { color: 'primary', caption: SDKUI_Localizator.Select, showTooltip: false, onClick: () => onSelect(rapidAccess.id) }), _jsx(TMButton, { color: 'tertiary', caption: SDKUI_Localizator.Remove, showTooltip: false, onClick: onRemovePopup })] }), _jsx(Menu, { x: isMobile ? 0 : 80, y: isMobile ? -40 : 0, onClose: () => handleClose(), visible: isMenuOpen, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: [_jsxs(StyledMenuItemContainer, { style: { flexWrap: 'wrap' }, children: [colors.map((color, index) => (_jsx(ColorWrapper, { onClick: () => onColorPick(color), children: _jsx(ColorPicker, { "$color": color }) }, index * 2))), _jsx(ColorWrapper, { onClick: () => setShowIconMenu(!showIconMenu), children: icons.find(icon => icon[0] === rapidAccess.icon)?.[1] ?? _jsx(IconUser, {}) })] }), showIconMenu && _jsx(StyledMenuItemContainer, { style: { flexWrap: 'wrap' }, children: icons.map(([key, icon]) => (_jsx(ColorWrapper, { onClick: () => onIconPick(key), children: _jsx(ColorPicker, { "$color": "white", children: icon }) }, key))) })] }) })] }), isExpanded &&
-                _jsxs(ExpandedAria, { children: [_jsxs(InputContainer, { "$isMobile": isMobile, children: [_jsx(TextBox, { value: name, onValueChanged: (value) => setName(value), type: 'text', label: SDKUI_Localizator.NameForAccess, additionalIcons: additionalSaveBtn }), _jsx(TextBox, { value: rapidAccess.endpoint?.Description, type: 'text', label: SDKUI_Localizator.Endpoint, disabled: true })] }), _jsxs(InputContainer, { "$isMobile": isMobile, children: [_jsx(TextBox, { value: rapidAccess.archive?.description, type: 'text', label: SDKUI_Localizator.ArchiveID, disabled: true }), _jsx(TextBox, { value: rapidAccess.authenticationMode, type: 'text', label: SDKUI_Localizator.AuthMode, disabled: true })] }), _jsxs(InputContainer, { "$isMobile": isMobile, children: [_jsx(TextBox, { value: rapidAccess.username, type: 'text', label: SDKUI_Localizator.UserName, disabled: true }), _jsx(TextBox, { value: cultureIDsDataSource.find(cid => cid.value === rapidAccess.language)?.display, type: 'text', label: SDKUI_Localizator.CultureID, disabled: true })] }), hasAuthDomain && _jsxs(InputContainer, { "$isMobile": isMobile, children: [_jsx(TextBox, { value: domainValue, type: 'text', label: SDKUI_Localizator.Domain, disabled: true }), rapidAccess.authenticationMode === AuthenticationModes.TopMediaOnBehalfOf &&
+    return (_jsxs(Container, { children: [_jsxs(ItemWrapper, { children: [_jsxs(ItemProfileWrapper, { style: { zIndex: 100 - index }, onDoubleClick: () => onSelect(rapidAccess.id), children: [_jsx(PreferredIconContainer, { onClick: () => onDefault(rapidAccess.id), children: _jsx(TMTooltip, { content: SDKUI_Localizator.Default, children: rapidAccess.preferred ? _jsx(IconStarSolid, { color: TMColors.tertiary, fontSize: 20 }) : _jsx(IconStarOutline, { fontSize: 20 }) }) }), _jsx(ProfileCircle, { $color: rapidAccess.color ?? TMColors.primary, onClick: () => setIsMenuOpen(true), children: iconMap[rapidAccess.icon] ?? _jsx(IconUser, { fontSize: 20 }) }), _jsxs(RapidAccessName, { onClick: expandedAriaHandler, children: [" ", truncateText(rapidAccess.name, 50)] })] }), _jsxs(ItemOperationsWrapper, { children: [_jsx(ExpandButton, { onClick: expandedAriaHandler, children: isExpanded ? _jsx(IconCollapse, { fontSize: 16 }) : _jsx(IconExpand, { fontSize: 16 }) }), _jsx(TMButton, { color: 'primary', caption: SDKUI_Localizator.Select, showTooltip: false, onClick: () => onSelect(rapidAccess.id) }), _jsx(TMButton, { color: 'tertiary', caption: SDKUI_Localizator.Remove, showTooltip: false, onClick: onRemovePopup })] }), _jsx(Menu, { x: isMobile ? 0 : 80, y: isMobile ? -40 : 0, onClose: () => handleClose(), visible: isMenuOpen, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: [_jsxs(StyledMenuItemContainer, { style: { flexWrap: 'wrap' }, children: [colors.map((color, index) => (_jsx(ColorWrapper, { onClick: () => onColorPick(color), children: _jsx(ColorPicker, { $color: color }) }, index * 2))), _jsx(ColorWrapper, { onClick: () => setShowIconMenu(!showIconMenu), children: icons.find(icon => icon[0] === rapidAccess.icon)?.[1] ?? _jsx(IconUser, {}) })] }), showIconMenu && _jsx(StyledMenuItemContainer, { style: { flexWrap: 'wrap' }, children: icons.map(([key, icon]) => (_jsx(ColorWrapper, { onClick: () => onIconPick(key), children: _jsx(ColorPicker, { $color: "white", children: icon }) }, key))) })] }) })] }), isExpanded &&
+                _jsxs(ExpandedAria, { children: [_jsxs(InputContainer, { $isMobile: isMobile, children: [_jsx(TextBox, { value: name, onValueChanged: (value) => setName(value), type: 'text', label: SDKUI_Localizator.NameForAccess, additionalIcons: additionalSaveBtn }), _jsx(TextBox, { value: rapidAccess.endpoint?.Description, type: 'text', label: SDKUI_Localizator.Endpoint, disabled: true })] }), _jsxs(InputContainer, { $isMobile: isMobile, children: [_jsx(TextBox, { value: rapidAccess.archive?.description, type: 'text', label: SDKUI_Localizator.ArchiveID, disabled: true }), _jsx(TextBox, { value: rapidAccess.authenticationMode, type: 'text', label: SDKUI_Localizator.AuthMode, disabled: true })] }), _jsxs(InputContainer, { $isMobile: isMobile, children: [_jsx(TextBox, { value: rapidAccess.username, type: 'text', label: SDKUI_Localizator.UserName, disabled: true }), _jsx(TextBox, { value: cultureIDsDataSource.find(cid => cid.value === rapidAccess.language)?.display, type: 'text', label: SDKUI_Localizator.CultureID, disabled: true })] }), hasAuthDomain && _jsxs(InputContainer, { $isMobile: isMobile, children: [_jsx(TextBox, { value: domainValue, type: 'text', label: SDKUI_Localizator.Domain, disabled: true }), rapidAccess.authenticationMode === AuthenticationModes.TopMediaOnBehalfOf &&
                                     _jsx(TextBox, { value: rapidAccess.onBehalfUsername, type: 'text', label: SDKUI_Localizator.UserName + ' ' + `(${SDKUI_Localizator.OnBehalfOf})`, disabled: true })] })] })] }));
 };
 const ColorWrapper = styled.div ` cursor: pointer; width: 30px; height: 30px; background-color: white; border-radius: 30px; display: flex; align-items: center; justify-content: center; `;

package/lib/components/forms/Login/RecoverPasswordFlow.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
 import OTPReader from './OTPReader';
@@ -101,7 +101,7 @@ const RecoverPasswordFlow = ({ onClose, tmSession, windowHeight = 800, isMobile
             window.removeEventListener('keydown', handleKeyDown);
         };
     }, [step, email, otpCode, getOTPAsync, verifyOTPAsync]);
-    return (_jsxs(Wrapper, { "$windowHeight": windowHeight, children: [_jsx(Title, { children: SDKUI_Localizator.ForgetPassword + ` (${tmSession.SessionDescr?.userName})` }), _jsx(Divider, {}), (!isMobile || windowHeight === WindowHeight.LARGE) && _jsxs(StepIndicatorContainer, { "$windowHeight": windowHeight, children: [" ", _jsx(StepIndicator, { steps: steps, currentStep: step }), " "] }), step === 1 && (_jsxs(Card, { children: [_jsx(Title, { children: SDKUI_Localizator.InsertYourEmail }), _jsx(TextBox, { ref: emailRef, type: "email", showSuccess: true, value: email, onValueChanged: (e) => setEmail(e), placeHolder: 'Email...', validationItems: fieldValidations('email') }), _jsx(TMButton, { fontSize: "1.1rem", caption: LOGINLocalizator.SendOtp, showTooltip: false, disabled: !email, onClick: async () => await getOTPAsync() })] })), step === 2 && (_jsxs(_Fragment, { children: [_jsx(OTPReader, { digits: otpCode, onChange: handleDigitChange, onFullChange: handleFullChange }), _jsx(TMButton, { fontSize: "1.2rem", caption: LOGINLocalizator.Continue, disabled: otpCode.join('').length !== 6, showTooltip: false, onClick: async () => await verifyOTPAsync() })] })), step === 3 && (_jsx(ChangePasswordInputs, { tmSession: tmSession, cpd: cpd, otp: otpCode.join(''), onClose: onClose })), _jsx(BackButtonWrapper, { children: _jsx(TMButton, { onClick: onClose, btnStyle: "icon", icon: _jsx(IconArrowLeft, { fontSize: 20 }), caption: SDKUI_Localizator.Back }) })] }));
+    return (_jsxs(Wrapper, { $windowHeight: windowHeight, children: [_jsx(Title, { children: SDKUI_Localizator.ForgetPassword + ` (${tmSession.SessionDescr?.userName})` }), _jsx(Divider, {}), (!isMobile || windowHeight === WindowHeight.LARGE) && _jsxs(StepIndicatorContainer, { $windowHeight: windowHeight, children: [" ", _jsx(StepIndicator, { steps: steps, currentStep: step }), " "] }), step === 1 && (_jsxs(Card, { children: [_jsx(Title, { children: SDKUI_Localizator.InsertYourEmail }), _jsx(TextBox, { ref: emailRef, type: "email", showSuccess: true, value: email, onValueChanged: (e) => setEmail(e), placeHolder: 'Email...', validationItems: fieldValidations('email') }), _jsx(TMButton, { fontSize: "1.1rem", caption: LOGINLocalizator.SendOtp, showTooltip: false, disabled: !email, onClick: async () => await getOTPAsync() })] })), step === 2 && (_jsxs(_Fragment, { children: [_jsx(OTPReader, { digits: otpCode, onChange: handleDigitChange, onFullChange: handleFullChange }), _jsx(TMButton, { fontSize: "1.2rem", caption: LOGINLocalizator.Continue, disabled: otpCode.join('').length !== 6, showTooltip: false, onClick: async () => await verifyOTPAsync() })] })), step === 3 && (_jsx(ChangePasswordInputs, { tmSession: tmSession, cpd: cpd, otp: otpCode.join(''), onClose: onClose })), _jsx(BackButtonWrapper, { children: _jsx(TMButton, { onClick: onClose, btnStyle: "icon", icon: _jsx(IconArrowLeft, { fontSize: 20 }), caption: SDKUI_Localizator.Back }) })] }));
 };
 export default RecoverPasswordFlow;
 const Wrapper = styled.div ` width: 100%; background-color: white; position: absolute; top: 0; left: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: ${props => props.$windowHeight === WindowHeight.LARGE ? '20px' : '10px'}; padding: 20px 65px; `;

package/lib/components/forms/Login/SelectBox.js

@@ -91,6 +91,6 @@ const SelectBox = ({ cursor = 'pointer', onClick, value, onValueChanged, label,
         }
         return color;
     }, [mainValidation]);
-    return (_jsxs(Container, { children: [label && _jsx(Label, { "$color": borderColor, children: label }), _jsxs(SelectContainer, { "$borderColor": borderColor, "$borderThickness": borderThickness, "$focused": isFocused, "$disabled": disabled, children: [icon && _jsx(IconWrapper, { "$color": validationItems.length > 0 ? borderColor : TMColors.primary, children: icon }), _jsxs(Select, { onClick: onClick, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), value: value, onChange: (e) => onValueChanged?.(e.target.value), "$readOnly": readOnly, disabled: disabled, "$color": fontColor, "$cursor": !disabled ? cursor : 'default', children: [placeHolder && _jsx("option", { value: "", disabled: true, children: placeHolder }), options.map((option, index) => (_jsx("option", { value: option.value, children: option.display }, index * 2)))] })] }), _jsx(ValidationMessageContainer, { children: validationMessages.map((val, index) => (_jsx(ValidationMessage, { "$color": val.color, children: val.message }, index * 2))) })] }));
+    return (_jsxs(Container, { children: [label && _jsx(Label, { $color: borderColor, children: label }), _jsxs(SelectContainer, { $borderColor: borderColor, $borderThickness: borderThickness, $focused: isFocused, $disabled: disabled, children: [icon && _jsx(IconWrapper, { $color: validationItems.length > 0 ? borderColor : TMColors.primary, children: icon }), _jsxs(Select, { onClick: onClick, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), value: value, onChange: (e) => onValueChanged?.(e.target.value), $readOnly: readOnly, disabled: disabled, $color: fontColor, $cursor: !disabled ? cursor : 'default', children: [placeHolder && _jsx("option", { value: "", disabled: true, children: placeHolder }), options.map((option, index) => (_jsx("option", { value: option.value, children: option.display }, index * 2)))] })] }), _jsx(ValidationMessageContainer, { children: validationMessages.map((val, index) => (_jsx(ValidationMessage, { $color: val.color, children: val.message }, index * 2))) })] }));
 };
 export default SelectBox;

package/lib/components/forms/Login/StepIndicator.js

@@ -5,7 +5,7 @@ const StepIndicator = ({ steps, currentStep }) => {
     return (_jsx(StepIndicatorWrapper, { children: steps.map((label, index) => {
             const stepIndex = index + 1;
             const isLast = index === steps.length - 1;
-            return (_jsxs(StepItemWrapper, { children: [_jsxs(StepItem, { "$active": currentStep === stepIndex, "$completed": currentStep > stepIndex, children: [_jsx(Circle, { "$active": currentStep === stepIndex, "$completed": currentStep > stepIndex, children: currentStep > stepIndex ? '✓' : stepIndex }), _jsx(StepLabel, { children: label })] }), !isLast && (_jsxs(StepConnectorWrapper, { children: [_jsx(StepConnector, {}), _jsx(StepFiller, { "$filled": currentStep > stepIndex })] }))] }, label));
+            return (_jsxs(StepItemWrapper, { children: [_jsxs(StepItem, { $active: currentStep === stepIndex, $completed: currentStep > stepIndex, children: [_jsx(Circle, { $active: currentStep === stepIndex, $completed: currentStep > stepIndex, children: currentStep > stepIndex ? '✓' : stepIndex }), _jsx(StepLabel, { children: label })] }), !isLast && (_jsxs(StepConnectorWrapper, { children: [_jsx(StepConnector, {}), _jsx(StepFiller, { $filled: currentStep > stepIndex })] }))] }, label));
         }) }));
 };
 export default StepIndicator;

package/lib/components/forms/Login/TMLoginForm.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { AppModules, AuthenticationModes, CultureIDs, LocalStorageService, SDK_Globals, SDK_Localizator, SessionDescriptor, TopMediaServer, TopMediaSession } from "@topconsultnpm/sdk-ts";
 import deMessages from "devextreme/localization/messages/de.json";
@@ -716,8 +716,8 @@ const TMLoginForm = (props) => {
             default: return SDK_Globals.appModule;
         }
     }, [SDK_Globals.appModule]);
-    return (_jsxs(StyledWrapper, { children: [!isMobile && _jsxs(StyledVersionContainer, { children: [_jsxs(StyledVersion, { children: [_jsxs(StyledVersionName, { children: [_jsx("span", { style: { color: TMColors.primary }, children: "\u25CF" }), SDK_Globals.appModule] }), _jsxs("p", { children: ["v.", SDK_Globals.appVersion] })] }), _jsxs(StyledVersion, { children: [_jsxs(StyledVersionName, { children: [_jsx("span", { style: { color: TMColors.tertiary }, children: "\u25CF" }), "SDKUI"] }), _jsxs("p", { children: ["v.", SDK_Globals.sdkuiVersion] })] }), _jsxs(StyledVersion, { children: [_jsxs(StyledVersionName, { children: [_jsx("span", { style: { color: TMColors.error }, children: "\u25CF" }), "SDK"] }), _jsxs("p", { children: ["v.", SDK_Globals.sdkVersion] })] })] }), _jsxs(StyledLoginContainer, { "$isMobile": isMobile, children: [_jsxs(StyledLeftSection, { "$isMobile": isMobile, "$isConnector": props.isConnector ?? false, children: [isMobile && _jsxs(StyledTopBar, { children: [_jsx(StyledTitle, { children: SDKUI_Localizator.WelcomeTo.replaceParams('') + ' ' + welcomeAppNameHeader + ' ' + 'v.' + SDK_Globals.appVersion }), _jsx(StyledMobileVersionIcon, { onClick: showVersionPopup, children: _jsx(IconInfo, { fontSize: 20, color: TMColors.primary }) })] }), _jsx(StyledOverlay, { "$isMobile": isMobile, children: _jsx(StyledCustomLogo, { style: { backgroundImage: `url(${showDefaultLogo ? 'logo-default.svg' : 'logo-custom.svg'})` } }) }), (windowHeight === WindowHeight.LARGE || !isMobile) && _jsxs(StyledPoweredByContainer, { "$isMobile": isMobile, children: [" ", showDefaultLogo ? 'Powered by TopConsult' : _jsx("img", { src: "/logo-default.svg", alt: "Logo", width: isMobile ? 50 : 100 }), " "] })] }), _jsxs(StyledRightSection, { "$isMobile": isMobile, children: [((((getDeviceType() === 'desktop' || isDesktop || isTablet) && windowHeight !== WindowHeight.SMALL)) && !isMobile) && _jsxs(StyledLogoContainer, { "$isMobile": isMobile, children: [_jsx(StyledWelcomeText, { children: SDKUI_Localizator.WelcomeTo.replaceParams('') }), _jsx(StyledLogo, { children: _jsx("img", { src: six, alt: "six", height: 50 }) }), _jsx(StyledWelcomeText, { children: welcomeAppName })] }), _jsxs(StyledToolbarContainer, { children: [_jsx(StyledLanguageChooser, { onClick: () => setShowCultureIDs(true), children: _jsx(TMTooltip, { content: SDKUI_Localizator.CultureID, children: _jsx("img", { src: getCultureIDImg(), alt: "Lang", width: 25, height: 25 }) }) }), loginStep !== 3 && _jsx(TMButton, { btnStyle: "icon", onClick: () => setShowRapidAccess(true), icon: _jsx(IconFastAccess, { fontSize: 20 }), caption: LOGINLocalizator.QuickAccess }), showPasswordOperations && _jsx(TMButton, { disabled: disablePasswordOperations, btnStyle: "icon", onClick: () => setShowChangePassword(true), icon: _jsx(IconPasswordOutline, { fontSize: 19 }), caption: SDKUI_Localizator.ChangePassword })] }), _jsxs(StyledFormContainer, { "$isMobile": isMobile, "$windowHeight": windowHeight, children: [loginStep === 1 &&
-                                        _jsxs(StyledStepContainer, { "$deviceType": deviceType, children: [_jsx(Chooser, { isDropDown: isDesktop, dataSource: props.endpoints, value: 'Description', columns: accessPointChooserColumns, additionalIcons: accessPointAdditionalIcons, icon: _jsx(IconAccessPoint, {}), label: SDKUI_Localizator.Endpoint, onSelectionChanged: (ep) => { setEndpoint(ep); setDcmtArchive(undefined); }, validationItems: fieldValidations('endpoint'), selectedRow: endpoint ?? undefined }), dcmtArchives.length > 0 ? (_jsx(Chooser, { isDropDown: isDesktop, dataSource: dcmtArchives, value: 'description', columns: dcmtArchiveChooserColumns, icon: _jsx(IconArchiveDoc, {}), label: SDKUI_Localizator.ArchiveID, onSelectionChanged: (arch) => setDcmtArchive(arch), validationItems: fieldValidations('dcmtArchive'), disabled: !endpoint, selectedRow: dcmtArchive ?? undefined })) : (_jsx(TextBox, { type: "text", icon: _jsx(IconArchiveDoc, {}), label: SDKUI_Localizator.ArchiveID, value: manualArchiveID, onValueChanged: (value) => setManualArchiveID(value), validationItems: fieldValidations('manualArchiveID'), disabled: !endpoint, placeHolder: 'Inserisci archivio' }))] }), loginStep === 2 &&
+    return (_jsxs(StyledWrapper, { children: [!isMobile && _jsxs(StyledVersionContainer, { children: [_jsxs(StyledVersion, { children: [_jsxs(StyledVersionName, { children: [_jsx("span", { style: { color: TMColors.primary }, children: "\u25CF" }), SDK_Globals.appModule] }), _jsxs("p", { children: ["v.", SDK_Globals.appVersion] })] }), _jsxs(StyledVersion, { children: [_jsxs(StyledVersionName, { children: [_jsx("span", { style: { color: TMColors.tertiary }, children: "\u25CF" }), "SDKUI"] }), _jsxs("p", { children: ["v.", SDK_Globals.sdkuiVersion] })] }), _jsxs(StyledVersion, { children: [_jsxs(StyledVersionName, { children: [_jsx("span", { style: { color: TMColors.error }, children: "\u25CF" }), "SDK"] }), _jsxs("p", { children: ["v.", SDK_Globals.sdkVersion] })] })] }), _jsxs(StyledLoginContainer, { $isMobile: isMobile, children: [_jsxs(StyledLeftSection, { $isMobile: isMobile, $isConnector: props.isConnector ?? false, children: [isMobile && _jsxs(StyledTopBar, { children: [_jsx(StyledTitle, { children: SDKUI_Localizator.WelcomeTo.replaceParams('') + ' ' + welcomeAppNameHeader + ' ' + 'v.' + SDK_Globals.appVersion }), _jsx(StyledMobileVersionIcon, { onClick: showVersionPopup, children: _jsx(IconInfo, { fontSize: 20, color: TMColors.primary }) })] }), _jsx(StyledOverlay, { $isMobile: isMobile, children: _jsx(StyledCustomLogo, { style: { backgroundImage: `url(${showDefaultLogo ? 'logo-default.svg' : 'logo-custom.svg'})` } }) }), (windowHeight === WindowHeight.LARGE || !isMobile) && _jsxs(StyledPoweredByContainer, { $isMobile: isMobile, children: [" ", showDefaultLogo ? 'Powered by TopConsult' : _jsx("img", { src: "/logo-default.svg", alt: "Logo", width: isMobile ? 50 : 100 }), " "] })] }), _jsxs(StyledRightSection, { $isMobile: isMobile, children: [((((getDeviceType() === 'desktop' || isDesktop || isTablet) && windowHeight !== WindowHeight.SMALL)) && !isMobile) && _jsxs(StyledLogoContainer, { $isMobile: isMobile, children: [_jsx(StyledWelcomeText, { children: SDKUI_Localizator.WelcomeTo.replaceParams('') }), _jsx(StyledLogo, { children: _jsx("img", { src: six, alt: "six", height: 50 }) }), _jsx(StyledWelcomeText, { children: welcomeAppName })] }), _jsxs(StyledToolbarContainer, { children: [_jsx(StyledLanguageChooser, { onClick: () => setShowCultureIDs(true), children: _jsx(TMTooltip, { content: SDKUI_Localizator.CultureID, children: _jsx("img", { src: getCultureIDImg(), alt: "Lang", width: 25, height: 25 }) }) }), loginStep !== 3 && _jsx(TMButton, { btnStyle: "icon", onClick: () => setShowRapidAccess(true), icon: _jsx(IconFastAccess, { fontSize: 20 }), caption: LOGINLocalizator.QuickAccess }), showPasswordOperations && _jsx(TMButton, { disabled: disablePasswordOperations, btnStyle: "icon", onClick: () => setShowChangePassword(true), icon: _jsx(IconPasswordOutline, { fontSize: 19 }), caption: SDKUI_Localizator.ChangePassword })] }), _jsxs(StyledFormContainer, { $isMobile: isMobile, $windowHeight: windowHeight, children: [loginStep === 1 &&
+                                        _jsxs(StyledStepContainer, { $deviceType: deviceType, children: [_jsx(Chooser, { isDropDown: isDesktop, dataSource: props.endpoints, value: 'Description', columns: accessPointChooserColumns, additionalIcons: accessPointAdditionalIcons, icon: _jsx(IconAccessPoint, {}), label: SDKUI_Localizator.Endpoint, onSelectionChanged: (ep) => { setEndpoint(ep); setDcmtArchive(undefined); }, validationItems: fieldValidations('endpoint'), selectedRow: endpoint ?? undefined }), dcmtArchives.length > 0 ? (_jsx(Chooser, { isDropDown: isDesktop, dataSource: dcmtArchives, value: 'description', columns: dcmtArchiveChooserColumns, icon: _jsx(IconArchiveDoc, {}), label: SDKUI_Localizator.ArchiveID, onSelectionChanged: (arch) => setDcmtArchive(arch), validationItems: fieldValidations('dcmtArchive'), disabled: !endpoint, selectedRow: dcmtArchive ?? undefined })) : (_jsx(TextBox, { type: "text", icon: _jsx(IconArchiveDoc, {}), label: SDKUI_Localizator.ArchiveID, value: manualArchiveID, onValueChanged: (value) => setManualArchiveID(value), validationItems: fieldValidations('manualArchiveID'), disabled: !endpoint, placeHolder: 'Inserisci archivio' }))] }), loginStep === 2 &&
                                         _jsxs(_Fragment, { children: [_jsxs(StyledSummaryContainer, { style: {
                                                         display: 'flex',
                                                         justifyContent: 'center',
@@ -727,14 +727,14 @@ const TMLoginForm = (props) => {
                                                         marginBottom: windowHeight === WindowHeight.SMALL ? '30px' : '25px',
                                                         width: '100%',
                                                         minHeight: '15px'
-                                                    }, children: [_jsxs(StyledDescription, { children: [_jsx(TMTooltip, { content: SDKUI_Localizator.Endpoint, children: _jsx(IconAccessPoint, { color: TMColors.primary, fontSize: 16 }) }), _jsx(TMTooltip, { content: endpoint?.Description ?? '', children: _jsx("p", { children: endpoint?.Description && endpoint.Description.length > 20 ? endpoint.Description.substring(0, 20) + '...' : endpoint?.Description }) })] }), _jsxs(StyledDescription, { children: [_jsx(TMTooltip, { content: SDKUI_Localizator.ArchiveID, children: _jsx(IconArchiveDoc, { color: TMColors.primary, fontSize: 16 }) }), _jsx(TMTooltip, { content: dcmtArchive ? (dcmtArchive.description ?? '') : manualArchiveID, children: _jsx(StyledArchiveText, { children: dcmtArchive ? (dcmtArchive.description ?? '') : manualArchiveID }) })] })] }), _jsxs(StyledStepContainer, { "$windowHeight": windowHeight, "$deviceType": deviceType, children: [_jsx(SelectBox, { value: authMode, options: authModeOptions, onValueChanged: (value) => setAuthMode(value), validationItems: fieldValidations('authenticationMode'), icon: _jsx(IconLogin, {}), label: SDKUI_Localizator.AuthMode }), _jsxs(StyledCredentialWrapper, { children: [authMode === AuthenticationModes.WindowsThroughTopMedia && _jsx(TextBox, { ref: authDomainRef, value: authDomain, onValueChanged: (e) => setAuthDomain(e), validationItems: fieldValidations('authDomain'), type: "text", icon: _jsx(IconWeb, {}), label: SDKUI_Localizator.Domain, autoComplete: "off" }), authMode !== AuthenticationModes.MSAzure &&
+                                                    }, children: [_jsxs(StyledDescription, { children: [_jsx(TMTooltip, { content: SDKUI_Localizator.Endpoint, children: _jsx(IconAccessPoint, { color: TMColors.primary, fontSize: 16 }) }), _jsx(TMTooltip, { content: endpoint?.Description ?? '', children: _jsx("p", { children: endpoint?.Description && endpoint.Description.length > 20 ? endpoint.Description.substring(0, 20) + '...' : endpoint?.Description }) })] }), _jsxs(StyledDescription, { children: [_jsx(TMTooltip, { content: SDKUI_Localizator.ArchiveID, children: _jsx(IconArchiveDoc, { color: TMColors.primary, fontSize: 16 }) }), _jsx(TMTooltip, { content: dcmtArchive ? (dcmtArchive.description ?? '') : manualArchiveID, children: _jsx(StyledArchiveText, { children: dcmtArchive ? (dcmtArchive.description ?? '') : manualArchiveID }) })] })] }), _jsxs(StyledStepContainer, { $windowHeight: windowHeight, $deviceType: deviceType, children: [_jsx(SelectBox, { value: authMode, options: authModeOptions, onValueChanged: (value) => setAuthMode(value), validationItems: fieldValidations('authenticationMode'), icon: _jsx(IconLogin, {}), label: SDKUI_Localizator.AuthMode }), _jsxs(StyledCredentialWrapper, { children: [authMode === AuthenticationModes.WindowsThroughTopMedia && _jsx(TextBox, { ref: authDomainRef, value: authDomain, onValueChanged: (e) => setAuthDomain(e), validationItems: fieldValidations('authDomain'), type: "text", icon: _jsx(IconWeb, {}), label: SDKUI_Localizator.Domain, autoComplete: "off" }), authMode !== AuthenticationModes.MSAzure &&
                                                                     _jsxs("form", { onSubmit: (e) => e.preventDefault(), style: { width: '100%' }, children: [_jsx("input", { name: "login_key", autoComplete: "username", readOnly: true, tabIndex: -1, value: loginKey, style: { position: 'absolute', width: 1, height: 1, opacity: 0, overflow: 'hidden', border: 0, padding: 0 } }, loginKey), _jsx(CeredentialContainer, { isMobile: isMobile, ref: usernameRef, secondaryRef: passwordRef, usernameValidator: fieldValidations('username'), passwordValidator: fieldValidations('password'), authMode: authMode, username: username, password: password, onUsernameChanged: (un) => setUsername(un), onPasswordChanged: (ps) => setPassword(ps), usernameAutoComplete: "off", passwordAutoComplete: "current-password" })] }), authMode === AuthenticationModes.TopMediaOnBehalfOf &&
                                                                     _jsxs(StyledCredentialWrapper, { children: [_jsx(TextBox, { value: authDomain, ref: authDomainRef, onValueChanged: (e) => setAuthDomain(e), validationItems: fieldValidations('authDomain'), type: "text", icon: _jsx(IconWeb, {}), label: SDKUI_Localizator.Domain }), _jsx(CeredentialContainer, { isMobile: isMobile, ref: usernameOnBehalfOfRef, secondaryRef: passwordOnBehalfOfRRef, usernameValidator: fieldValidations('usernameOnBehalfOf'), passwordValidator: fieldValidations('passwordOnBehalfOf'), authMode: AuthenticationModes.TopMediaOnBehalfOf, username: usernameOnBehalf, password: passwordOnBehalf, onUsernameChanged: (un) => setUsernameOnBehalf(un), onPasswordChanged: (ps) => setPasswordOnBehalf(ps) })] })] }), authMode !== AuthenticationModes.TopMediaWithMFA &&
                                                             _jsx(RapidAccessContainer, { isSaveEnable: saveLoginEnable, name: saveLoginName, nameValidationItems: fieldValidations('rapidAccessName'), onEnableSaveChange: () => setSaveLoginEnable(!saveLoginEnable), onNameChange: (name) => setSaveLoginName(name) })] })] }), loginStep === 3 &&
-                                        _jsxs(StyledStepThreeContainer, { "$isMobile": isMobile, children: [_jsx(OTPReader, { isMobile: isMobile, digits: otpCode, onChange: handleDigitChange, onFullChange: handleFullChange, text: _jsxs("div", { children: [" ", LOGINLocalizator.EnterOtpInstructions, " "] }), header: '', additionalButtons: [
+                                        _jsxs(StyledStepThreeContainer, { $isMobile: isMobile, children: [_jsx(OTPReader, { isMobile: isMobile, digits: otpCode, onChange: handleDigitChange, onFullChange: handleFullChange, text: _jsxs("div", { children: [" ", LOGINLocalizator.EnterOtpInstructions, " "] }), header: '', additionalButtons: [
                                                         _jsx(TMButton, { btnStyle: 'text', caption: LOGINLocalizator.SetupAuthenticator, showTooltip: false, onClick: async () => await loginForMFAAsync(2), color: 'success' }, 0),
                                                         _jsx(TMButton, { btnStyle: 'text', disabled: isOTPSent, caption: LOGINLocalizator.SendOtpByEmail, showTooltip: false, onClick: async () => await loginForMFAAsync(1), color: 'primary' }, 1),
-                                                    ] }), _jsx(StyledRapidAccessWrapper, { "$isMobile": isMobile, children: _jsx(RapidAccessContainer, { isSaveEnable: saveLoginEnable, name: saveLoginName, nameValidationItems: fieldValidations('rapidAccessName'), onEnableSaveChange: () => setSaveLoginEnable(!saveLoginEnable), onNameChange: (name) => setSaveLoginName(name) }) })] }), _jsxs(StyledButtonContainer, { "$windowHeight": windowHeight, children: [showContinueBtn && _jsx(TMButton, { fontSize: "1.2rem", onClick: nextStepHandler, showTooltip: false, caption: LOGINLocalizator.Continue, disabled: disableContinueBtn }), showLoginBtn && _jsx(TMButton, { fontSize: "1.2rem", showTooltip: false, onClick: loginHandler, caption: saveLoginEnable ? SDKUI_Localizator.SaveAndLogin : SDKUI_Localizator.Login, disabled: disableLoginBtn })] })] }), showPasswordOperations && _jsx(StyledForgetPassword, { "$isMobile": isMobile, children: _jsx(TMButton, { disabled: disablePasswordOperations, btnStyle: "text", caption: SDKUI_Localizator.ForgetPassword, showTooltip: false, onClick: () => setShowForgetPassword(true) }) }), showBackBtn && _jsx(StyledBackButton, { children: _jsx(TMButton, { onClick: previousStepHandler, btnStyle: "icon", icon: _jsx(IconArrowLeft, { fontSize: 20 }), caption: SDKUI_Localizator.Back }) }), showCultureIDs && _jsx(Menu, { onClose: () => setShowCultureIDs(false), x: 'calc(100% - 250px)', y: 50, visible: showCultureIDs, children: _jsxs(StyledMenuItemContainer, { children: [_jsx(StyledLangChooser, { onClick: () => cultureIDHandler(CultureIDs.It_IT), title: cultureIDsDataSource[0].display, src: it, alt: "it", width: BANNER_DIMENSION, height: BANNER_DIMENSION }), _jsx(StyledLangChooser, { onClick: () => cultureIDHandler(CultureIDs.En_US), title: cultureIDsDataSource[3].display, src: en, alt: "en", width: BANNER_DIMENSION, height: BANNER_DIMENSION }), _jsx(StyledLangChooser, { onClick: () => cultureIDHandler(CultureIDs.Fr_FR), title: cultureIDsDataSource[1].display, src: fr, alt: "fr", width: BANNER_DIMENSION, height: BANNER_DIMENSION }), _jsx(StyledLangChooser, { onClick: () => cultureIDHandler(CultureIDs.Es_ES), title: cultureIDsDataSource[4].display, src: es, alt: "es", width: BANNER_DIMENSION, height: BANNER_DIMENSION }), _jsx(StyledLangChooser, { onClick: () => cultureIDHandler(CultureIDs.Pt_PT), title: cultureIDsDataSource[2].display, src: pt, alt: "pt", width: BANNER_DIMENSION, height: BANNER_DIMENSION }), _jsx(StyledLangChooser, { onClick: () => cultureIDHandler(CultureIDs.De_DE), title: cultureIDsDataSource[5].display, src: de, alt: "de", width: BANNER_DIMENSION, height: BANNER_DIMENSION })] }) }), showChangePassword && _jsx(ChangePassword, { tmSession: changePswTmSession, onClose: () => setShowChangePassword(false) }), showForgetPassword && _jsx(RecoverPasswordFlow, { isMobile: isMobile, tmSession: changePswTmSession, onClose: () => setShowForgetPassword(false), windowHeight: windowHeight }), showRapidAccess && _jsx(RapidAccessLogin, { isMobile: isMobile, onClose: () => setShowRapidAccess(false), onSelect: handleRapidAccessSelection })] })] })] }));
+                                                    ] }), _jsx(StyledRapidAccessWrapper, { $isMobile: isMobile, children: _jsx(RapidAccessContainer, { isSaveEnable: saveLoginEnable, name: saveLoginName, nameValidationItems: fieldValidations('rapidAccessName'), onEnableSaveChange: () => setSaveLoginEnable(!saveLoginEnable), onNameChange: (name) => setSaveLoginName(name) }) })] }), _jsxs(StyledButtonContainer, { $windowHeight: windowHeight, children: [showContinueBtn && _jsx(TMButton, { fontSize: "1.2rem", onClick: nextStepHandler, showTooltip: false, caption: LOGINLocalizator.Continue, disabled: disableContinueBtn }), showLoginBtn && _jsx(TMButton, { fontSize: "1.2rem", showTooltip: false, onClick: loginHandler, caption: saveLoginEnable ? SDKUI_Localizator.SaveAndLogin : SDKUI_Localizator.Login, disabled: disableLoginBtn })] })] }), showPasswordOperations && _jsx(StyledForgetPassword, { $isMobile: isMobile, children: _jsx(TMButton, { disabled: disablePasswordOperations, btnStyle: "text", caption: SDKUI_Localizator.ForgetPassword, showTooltip: false, onClick: () => setShowForgetPassword(true) }) }), showBackBtn && _jsx(StyledBackButton, { children: _jsx(TMButton, { onClick: previousStepHandler, btnStyle: "icon", icon: _jsx(IconArrowLeft, { fontSize: 20 }), caption: SDKUI_Localizator.Back }) }), showCultureIDs && _jsx(Menu, { onClose: () => setShowCultureIDs(false), x: 'calc(100% - 250px)', y: 50, visible: showCultureIDs, children: _jsxs(StyledMenuItemContainer, { children: [_jsx(StyledLangChooser, { onClick: () => cultureIDHandler(CultureIDs.It_IT), title: cultureIDsDataSource[0].display, src: it, alt: "it", width: BANNER_DIMENSION, height: BANNER_DIMENSION }), _jsx(StyledLangChooser, { onClick: () => cultureIDHandler(CultureIDs.En_US), title: cultureIDsDataSource[3].display, src: en, alt: "en", width: BANNER_DIMENSION, height: BANNER_DIMENSION }), _jsx(StyledLangChooser, { onClick: () => cultureIDHandler(CultureIDs.Fr_FR), title: cultureIDsDataSource[1].display, src: fr, alt: "fr", width: BANNER_DIMENSION, height: BANNER_DIMENSION }), _jsx(StyledLangChooser, { onClick: () => cultureIDHandler(CultureIDs.Es_ES), title: cultureIDsDataSource[4].display, src: es, alt: "es", width: BANNER_DIMENSION, height: BANNER_DIMENSION }), _jsx(StyledLangChooser, { onClick: () => cultureIDHandler(CultureIDs.Pt_PT), title: cultureIDsDataSource[2].display, src: pt, alt: "pt", width: BANNER_DIMENSION, height: BANNER_DIMENSION }), _jsx(StyledLangChooser, { onClick: () => cultureIDHandler(CultureIDs.De_DE), title: cultureIDsDataSource[5].display, src: de, alt: "de", width: BANNER_DIMENSION, height: BANNER_DIMENSION })] }) }), showChangePassword && _jsx(ChangePassword, { tmSession: changePswTmSession, onClose: () => setShowChangePassword(false) }), showForgetPassword && _jsx(RecoverPasswordFlow, { isMobile: isMobile, tmSession: changePswTmSession, onClose: () => setShowForgetPassword(false), windowHeight: windowHeight }), showRapidAccess && _jsx(RapidAccessLogin, { isMobile: isMobile, onClose: () => setShowRapidAccess(false), onSelect: handleRapidAccessSelection })] })] })] }));
 };
 export default TMLoginForm;
 const CeredentialContainer = forwardRef(({ isMobile = false, authMode = AuthenticationModes.TopMedia, password = '', username = '', onPasswordChanged, onUsernameChanged, passwordValidator = [], usernameValidator = [], secondaryRef, usernameAutoComplete = 'off', passwordAutoComplete = 'off' }, ref) => {
@@ -763,7 +763,7 @@ const CeredentialContainer = forwardRef(({ isMobile = false, authMode = Authenti
             secondaryRef.current = passwordRef.current;
         }
     }, [secondaryRef]);
-    return (_jsxs(StyledCredentialContainer, { "$isMobile": isMobile, "$authMode": authMode, children: [_jsx(TextBox, { ref: usernameRef, value: username, onValueChanged: (e) => onUsernameChanged(e), validationItems: usernameValidator, type: "text", icon: _jsx(IconUser, {}), label: SDKUI_Localizator.UserName, autoComplete: usernameAutoComplete }), _jsx(TextBox, { ref: passwordRef, value: password, onValueChanged: (e) => onPasswordChanged(e), validationItems: passwordValidator, type: "password", icon: authMode !== AuthenticationModes.TopMediaOnBehalfOf ? _jsx(IconPassword, {}) : undefined, label: SDKUI_Localizator.Password, autoComplete: passwordAutoComplete })] }));
+    return (_jsxs(StyledCredentialContainer, { $isMobile: isMobile, $authMode: authMode, children: [_jsx(TextBox, { ref: usernameRef, value: username, onValueChanged: (e) => onUsernameChanged(e), validationItems: usernameValidator, type: "text", icon: _jsx(IconUser, {}), label: SDKUI_Localizator.UserName, autoComplete: usernameAutoComplete }), _jsx(TextBox, { ref: passwordRef, value: password, onValueChanged: (e) => onPasswordChanged(e), validationItems: passwordValidator, type: "password", icon: authMode !== AuthenticationModes.TopMediaOnBehalfOf ? _jsx(IconPassword, {}) : undefined, label: SDKUI_Localizator.Password, autoComplete: passwordAutoComplete })] }));
 });
 const RapidAccessContainer = ({ isSaveEnable, name, nameValidationItems, onEnableSaveChange, onNameChange }) => {
     return (_jsxs(StyledRapidLoginSave, { children: [_jsx(TMCheckBox, { label: LOGINLocalizator.CreateNewQuickAccess, onValueChanged: () => onEnableSaveChange(), value: isSaveEnable, labelColor: "#313131" }), isSaveEnable && _jsx(TextBox, { validationItems: nameValidationItems, disabled: !isSaveEnable, type: "text", value: name, onValueChanged: (value) => onNameChange(value), placeHolder: "Es: Admin risorse umane" })] }));

package/lib/components/forms/Login/TextBox.js

@@ -106,6 +106,6 @@ const TextBox = forwardRef(({ label, type, additionalIcons = [], cursor = 'text'
         }
         return color;
     }, [mainValidation]);
-    return (_jsxs(Container, { children: [label && _jsx(Label, { "$color": borderColor, children: label }), _jsxs(InputContainer, { "$borderColor": borderColor, "$borderThickness": borderThickness, "$focused": isFocused, "$disabled": disabled, children: [icon && _jsx(IconWrapper, { "$color": validationItems.length > 0 ? borderColor : TMColors.primary, children: icon }), _jsx(Input, { ref: ref, name: name, id: id, autoComplete: autoComplete, onKeyDown: onKeyDown, onClick: onClick, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), type: type === "password" && showPassword ? "text" : type, value: value, onChange: (e) => onValueChanged?.(e.target.value), placeholder: placeHolder, "$readOnly": readOnly, disabled: disabled, "$color": fontColor, "$cursor": !disabled ? cursor : 'default' }), _jsxs(IconsRow, { children: [additionalIcons.map((iconItem, index) => (iconItem.visible !== false && _jsx(TMTooltip, { content: iconItem.tooltip, children: _jsxs(IconButton, { "$disabled": disabled, "$color": iconItem.color ?? '#313131', onClick: iconItem.onClick, children: [" ", iconItem.icon, " "] }) }, index * 2))), type === "password" && (_jsx(IconButton, { "$disabled": disabled, "$color": '#313131', onClick: () => setShowPassword(!showPassword), children: showPassword ? _jsx(IconShow, {}) : _jsx(IconHide, {}) }))] })] }), _jsx(ValidationMessageContainer, { children: validationMessages.map((val, index) => (_jsx(ValidationMessage, { "$color": val.color, children: val.message }, index * 2))) })] }));
+    return (_jsxs(Container, { children: [label && _jsx(Label, { $color: borderColor, children: label }), _jsxs(InputContainer, { $borderColor: borderColor, $borderThickness: borderThickness, $focused: isFocused, $disabled: disabled, children: [icon && _jsx(IconWrapper, { $color: validationItems.length > 0 ? borderColor : TMColors.primary, children: icon }), _jsx(Input, { ref: ref, name: name, id: id, autoComplete: autoComplete, onKeyDown: onKeyDown, onClick: onClick, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), type: type === "password" && showPassword ? "text" : type, value: value, onChange: (e) => onValueChanged?.(e.target.value), placeholder: placeHolder, $readOnly: readOnly, disabled: disabled, $color: fontColor, $cursor: !disabled ? cursor : 'default' }), _jsxs(IconsRow, { children: [additionalIcons.map((iconItem, index) => (iconItem.visible !== false && _jsx(TMTooltip, { content: iconItem.tooltip, children: _jsxs(IconButton, { $disabled: disabled, $color: iconItem.color ?? '#313131', onClick: iconItem.onClick, children: [" ", iconItem.icon, " "] }) }, index * 2))), type === "password" && (_jsx(IconButton, { $disabled: disabled, $color: '#313131', onClick: () => setShowPassword(!showPassword), children: showPassword ? _jsx(IconShow, {}) : _jsx(IconHide, {}) }))] })] }), _jsx(ValidationMessageContainer, { children: validationMessages.map((val, index) => (_jsx(ValidationMessage, { $color: val.color, children: val.message }, index * 2))) })] }));
 });
 export default TextBox;

package/lib/components/forms/TMApplyForm.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { ResultTypes } from '@topconsultnpm/sdk-ts';
 import { FormModes } from '../../ts/types';
@@ -91,8 +91,8 @@ const TMApplyForm = ({ children, width, height, showToolbar = true, formMode, is
     const errorsCount = validationItems.filter(o => o.ResultType == ResultTypes.ERROR).length;
     const renderApplyForm = () => {
         return (_jsxs(TMLayoutContainer, { direction: 'vertical', gap: 0, children: [showToolbar && _jsx(TMLayoutItem, { height: '35px', children: _jsxs(StyledToolbarForm, { children: [!isModal && showBack && _jsx(TMButton, { btnStyle: 'toolbar', color: 'tertiary', caption: SDKUI_Localizator.Back, icon: _jsx(IconArrowLeft, {}), fontSize: '1.3rem', elementStyle: { marginRight: '10px' }, onClick: () => { doClose(); } }), showApply && _jsx(TMButton, { disabled: isModified && errorsCount <= 0 ? false : true, btnStyle: 'toolbar', caption: SDKUI_Localizator.Apply, icon: _jsx(IconApply, {}), color: 'success', fontSize: '1.3rem', onClick: doApply }), showApply && _jsx(TMButton, { disabled: isModified && errorsCount <= 0 ? false : true, btnStyle: 'toolbar', caption: SDKUI_Localizator.ApplyAndClose, icon: _jsx(IconApplyAndClose, {}), color: 'success', fontSize: '1.3rem', onClick: async () => { await doApply(); onClose?.(); } }), showUndo && _jsx(TMButton, { disabled: !isModified, btnStyle: 'toolbar', caption: SDKUI_Localizator.Undo, icon: _jsx(IconUndo, {}), color: 'warning', fontSize: '1.3rem', onClick: onUndo }), hasNavigation && _jsx(TMButton, { btnStyle: 'toolbar', caption: SDKUI_Localizator.Next, icon: _jsx(IconArrowDown, {}), fontSize: '1.3rem', onClick: doNext, disabled: !canNext || isModified || formMode == FormModes.Create || formMode == FormModes.Duplicate }), hasNavigation && _jsx(TMButton, { btnStyle: 'toolbar', caption: SDKUI_Localizator.Previous, icon: _jsx(IconArrowUp, {}), fontSize: '1.3rem', onClick: doPrev, disabled: !canPrev || isModified || formMode == FormModes.Create || formMode == FormModes.Duplicate }), customToolbarElements, hasShowId ? _jsx(TMButton, { btnStyle: 'toolbar', caption: showId ? SDKUI_Localizator.ID_Hide : SDKUI_Localizator.ID_Show, icon: _jsx(IconShow, {}), fontSize: '1.3rem', onClick: () => console.log('ID') }) : _jsx(_Fragment, {}), warningsCount > 0 &&
-                                _jsx(TMLayoutItem, { width: 'fit-content', height: '90%', children: _jsxs(StyledResultTypeContainer, { style: { marginLeft: '10px' }, onClick: () => setShowErrorGrid(!showErrorGrid), "$resultType": ResultTypes.WARNING, children: [" ", _jsx(IconWarning, { fontSize: 16 }), " ", _jsx("span", { children: warningsCount })] }) }), errorsCount > 0 &&
-                                _jsx(TMLayoutItem, { width: 'fit-content', height: '90%', children: _jsxs(StyledResultTypeContainer, { style: { marginLeft: warningsCount <= 0 ? '10px' : '0' }, onClick: () => setShowErrorGrid(!showErrorGrid), "$resultType": ResultTypes.ERROR, children: [" ", _jsx(IconCloseCircle, { fontSize: 16 }), " ", _jsx("span", { children: errorsCount })] }) })] }) }), _jsx(TMLayoutItem, { height: showToolbar ? 'calc(100% - 35px)' : '100%', children: _jsxs(TMSplitterLayout, { separatorSize: 4, direction: 'vertical', start: showErrorGrid && validationItems.length > 0 ? ['80%', '20%'] : ['100%', '0'], min: ['0', '0'], children: [_jsx(TMCard, { showBorder: false, scrollY: true, padding: hasContentPadding, children: exception
+                                _jsx(TMLayoutItem, { width: 'fit-content', height: '90%', children: _jsxs(StyledResultTypeContainer, { style: { marginLeft: '10px' }, onClick: () => setShowErrorGrid(!showErrorGrid), $resultType: ResultTypes.WARNING, children: [" ", _jsx(IconWarning, { fontSize: 16 }), " ", _jsx("span", { children: warningsCount })] }) }), errorsCount > 0 &&
+                                _jsx(TMLayoutItem, { width: 'fit-content', height: '90%', children: _jsxs(StyledResultTypeContainer, { style: { marginLeft: warningsCount <= 0 ? '10px' : '0' }, onClick: () => setShowErrorGrid(!showErrorGrid), $resultType: ResultTypes.ERROR, children: [" ", _jsx(IconCloseCircle, { fontSize: 16 }), " ", _jsx("span", { children: errorsCount })] }) })] }) }), _jsx(TMLayoutItem, { height: showToolbar ? 'calc(100% - 35px)' : '100%', children: _jsxs(TMSplitterLayout, { separatorSize: 4, direction: 'vertical', start: showErrorGrid && validationItems.length > 0 ? ['80%', '20%'] : ['100%', '0'], min: ['0', '0'], children: [_jsx(TMCard, { showBorder: false, scrollY: true, padding: hasContentPadding, children: exception
                                     ?
                                         _jsx("div", { style: { width: '100%', height: '100%', marginTop: '50px', display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', color: TMColors.error }, children: 'Si è verificato un errore' })
                                     : _jsx(_Fragment, { children: children }) }), showErrorGrid && validationItems.length > 0 ? _jsx(TMCard, { scrollY: true, padding: false, showBorder: false, children: _jsx(TMValidationItemsList, { validationItems: validationItems }) }) : _jsx(_Fragment, {})] }) })] }));

package/lib/components/forms/TMChooserForm.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ITMChooserFormProps } from '../../ts';
-declare const TMChooserForm: <T>({ children, title, allowMultipleSelection, allowApplyWithZeroSelection, startWithShowOnlySelectedItems, hasShowOnlySelectedItems, allowGrouping, allowSorting, width, height, dataSource, selectedIDs, manageUseLocalizedName, hasShowId, hideRefresh, keyName, customButtons, showFilterPanel, showDefaultColumns, columns, summaryItems, convertID, customFilter, getItems, cellRenderIcon, cellRenderNameAndDesc, onChoose, onClose, onShowIdChanged }: ITMChooserFormProps<T>) => React.JSX.Element;
+declare const TMChooserForm: <T>({ children, title, allowMultipleSelection, allowApplyWithZeroSelection, startWithShowOnlySelectedItems, hasShowOnlySelectedItems, allowGrouping, allowSorting, width, height, dataSource, selectedIDs, manageUseLocalizedName, hasShowId, hideRefresh, keyName, customButtons, showFilterPanel, showDefaultColumns, columns, summaryItems, convertID, customFilter, getItems, cellRenderIcon, cellRenderNameAndDesc, onChoose, onClose, onShowIdChanged }: ITMChooserFormProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default TMChooserForm;

package/lib/components/forms/TMChooserForm.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { SDK_Globals } from '@topconsultnpm/sdk-ts';
 import { IconApply, IconHide, IconRefresh, IconShow, SDKUI_Localizator } from '../../helper';

package/lib/components/forms/TMSaveForm.d.ts

@@ -13,19 +13,19 @@ interface ITMSaveFormButtonPreviousProps extends ITMSaveFormButtonBase {
     onPrev?: () => void;
     onSaveAsync?: () => Promise<void>;
 }
-export declare const TMSaveFormButtonPrevious: ({ btnStyle, formMode, isModified, onPrev, canPrev, iconColor, onSaveAsync }: ITMSaveFormButtonPreviousProps) => React.JSX.Element;
+export declare const TMSaveFormButtonPrevious: ({ btnStyle, formMode, isModified, onPrev, canPrev, iconColor, onSaveAsync }: ITMSaveFormButtonPreviousProps) => import("react/jsx-runtime").JSX.Element;
 interface ITMSaveFormButtonNextProps extends ITMSaveFormButtonBase {
     canNext?: boolean;
     onNext?: () => void;
     onSaveAsync?: () => Promise<void>;
 }
-export declare const TMSaveFormButtonNext: ({ btnStyle, formMode, isModified, onNext, canNext, iconColor, onSaveAsync }: ITMSaveFormButtonNextProps) => React.JSX.Element;
+export declare const TMSaveFormButtonNext: ({ btnStyle, formMode, isModified, onNext, canNext, iconColor, onSaveAsync }: ITMSaveFormButtonNextProps) => import("react/jsx-runtime").JSX.Element;
 interface ITMSaveFormButtonSaveProps extends ITMSaveFormButtonBase {
     errorsCount: number;
     onSaveAsync?: () => Promise<void>;
 }
-export declare const TMSaveFormButtonSave: ({ btnStyle, errorsCount, isModified, iconColor, width, advancedColor, advancedType, onSaveAsync }: ITMSaveFormButtonSaveProps) => React.JSX.Element;
+export declare const TMSaveFormButtonSave: ({ btnStyle, errorsCount, isModified, iconColor, width, advancedColor, advancedType, onSaveAsync }: ITMSaveFormButtonSaveProps) => import("react/jsx-runtime").JSX.Element;
 interface ITMSaveFormButtonUndoProps extends ITMSaveFormButtonBase {
     onUndo?: () => void;
 }
-export declare const TMSaveFormButtonUndo: ({ btnStyle, isModified, iconColor, width, advancedColor, advancedType, onUndo, color, showTooltip }: ITMSaveFormButtonUndoProps) => React.JSX.Element;
+export declare const TMSaveFormButtonUndo: ({ btnStyle, isModified, iconColor, width, advancedColor, advancedType, onUndo, color, showTooltip }: ITMSaveFormButtonUndoProps) => import("react/jsx-runtime").JSX.Element;