@topconsultnpm/sdkui-react 6.19.0-dev2.1 → 6.19.0-test.1

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

@@ -3,39 +3,39 @@ import React, { useCallback } from 'react';
 import { ArrowSymbol } from './interfaces';
 import styled, { css } from 'styled-components';
 import { getConnectionColor } from './workflowHelpers';
-const StyledPath = styled.path ` // Aggiungi $isTemporary
-  fill: none;
-  stroke: ${props => getConnectionColor(props.$outputStatus)};
-  stroke-width: ${props => props.$isSelected ? 3 : 1};
-  cursor: pointer;
-  transition: stroke-width 0.1s ease-in-out;
-  pointer-events: stroke;
-
-  ${props => props.$isTemporary && css `
-    stroke: #888; 
-    stroke-dasharray: 5 5; 
-    opacity: 0.5;
-  `}
+const StyledPath = styled.path ` // Aggiungi $isTemporary
+  fill: none;
+  stroke: ${props => getConnectionColor(props.$outputStatus)};
+  stroke-width: ${props => props.$isSelected ? 3 : 1};
+  cursor: pointer;
+  transition: stroke-width 0.1s ease-in-out;
+  pointer-events: stroke;
+
+  ${props => props.$isTemporary && css `
+    stroke: #888; 
+    stroke-dasharray: 5 5; 
+    opacity: 0.5;
+  `}
 `;
 // Path invisibile e più spesso per migliorare l'area di click
-const StyledPathHitArea = styled.path `
-  fill: none;
-  stroke: transparent;
-  stroke-width: 10;
-  cursor: pointer;
-  pointer-events: stroke;
+const StyledPathHitArea = styled.path `
+  fill: none;
+  stroke: transparent;
+  stroke-width: 10;
+  cursor: pointer;
+  pointer-events: stroke;
 `;
-const StyledArrow = styled.path `
-  fill: ${props => props.$color};
-  stroke: ${props => props.$color};
-  stroke-width: 1;
-  pointer-events: none;
+const StyledArrow = styled.path `
+  fill: ${props => props.$color};
+  stroke: ${props => props.$color};
+  stroke-width: 1;
+  pointer-events: none;
 `;
-const StyledSquareConnector = styled.rect `
-  fill: #007bff;
-  stroke: #007bff;
-  stroke-width: 1;
-  pointer-events: all;
+const StyledSquareConnector = styled.rect `
+  fill: #007bff;
+  stroke: #007bff;
+  stroke-width: 1;
+  pointer-events: all;
 `;
 const ConnectionComponent = ({ connection, isSelected, sourcePoint, sinkPoint, isTemporary, onClick, onDoubleClick, onConnectionEndpointMouseDown }) => {
     const connectionColor = getConnectionColor(connection.OutputStatus);

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

@@ -7,17 +7,17 @@ import TMModal from '../../../base/TMModal';
 import { TMColors } from '../../../../utils/theme';
 import { CultureIDs, WorkItemStatus } from '@topconsultnpm/sdk-ts';
 import TMLocalizedTextBox from '../../../editors/TMLocalizedTextBox';
-const FormContainer = styled.div `
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
-    padding: 10px;
+const FormContainer = styled.div `
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    padding: 10px;
 `;
-const ModalFooter = styled.div `
-    display: flex;
-    justify-content: flex-end;
-    gap: 10px;
-    margin-top: 20px;
+const ModalFooter = styled.div `
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    margin-top: 20px;
 `;
 const WORKITEMSTATUS_DATASOURCE = [
     { value: WorkItemStatus.New, display: SDKUI_Localizator.WorkItemStatus_New },

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

@@ -5,82 +5,82 @@ import styled, { keyframes, css } from 'styled-components';
 import DiagramItemSvgContent from './DiagramItemSvgContent';
 import { calculateDiagramItemFullDimensions, FONT_SIZE, MAX_ITEM_WIDTH, MAX_LINES, PADDING_HORIZONTAL, PADDING_TOP, SPACING_SVG_TEXT, SVG_ICON_SIZE, wrapText } from './workflowHelpers';
 import { DataListCacheService } from '@topconsultnpm/sdk-ts';
-const blink = keyframes `
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.4; }
+const blink = keyframes `
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
 `;
-const pulseAnimation = keyframes `
-0% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.1);
-  }
-  100% {
-    transform: scale(1);
-  }
+const pulseAnimation = keyframes `
+0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
 `;
-const bounceAnimation = keyframes `
-  0%, 20%, 50%, 80%, 100% {
-    transform: translateY(0);
-  }
-  40% {
-    transform: translateY(-10px);
-  }
-  60% {
-    transform: translateY(-5px);
-  }
+const bounceAnimation = keyframes `
+  0%, 20%, 50%, 80%, 100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-10px);
+  }
+  60% {
+    transform: translateY(-5px);
+  }
 `;
-const AnimatingGroup = styled.g `
+const AnimatingGroup = styled.g `
   ${({ $isCurrent }) => $isCurrent &&
-    css `
-      animation: ${pulseAnimation} 1.5s infinite;
-    `}
+    css `
+      animation: ${pulseAnimation} 1.5s infinite;
+    `}
 `;
-const StyledDiagramItem = styled.g `
-  cursor: ${props => (props.$isReadOnly ? 'default' : (props.$isDragging ? 'grabbing' : 'grab'))};
-  filter: ${props => (props.$isSelected || props.$isDragging || props.$isHovered ? 'drop-shadow(2px 4px 6px rgba(0,0,0,0.4))' : 'none')};
-  
-  & .item-main-shape {
-    fill: transparent;
+const StyledDiagramItem = styled.g `
+  cursor: ${props => (props.$isReadOnly ? 'default' : (props.$isDragging ? 'grabbing' : 'grab'))};
+  filter: ${props => (props.$isSelected || props.$isDragging || props.$isHovered ? 'drop-shadow(2px 4px 6px rgba(0,0,0,0.4))' : 'none')};
+  
+  & .item-main-shape {
+    fill: transparent;
     stroke: ${props => {
     if (props.$isDragging)
         return '#ffc107';
     if (props.$isSelected)
         return '#007bff';
     return 'none';
-}};
+}};
     stroke-width: ${props => {
     if (props.$isDragging)
         return 2;
     if (props.$isSelected)
         return 2;
     return 1;
-}};
-    transition: stroke 0.2s ease-in-out, stroke-width 0.2s ease-in-out;
-  }
-
-  & .item-text {
-    font-size: 11px;
-    fill: #333;
-    text-anchor: middle;
-    user-select: none;
-    pointer-events: none;
-  }
+}};
+    transition: stroke 0.2s ease-in-out, stroke-width 0.2s ease-in-out;
+  }
+
+  & .item-text {
+    font-size: 11px;
+    fill: #333;
+    text-anchor: middle;
+    user-select: none;
+    pointer-events: none;
+  }
 `;
-const Connector = styled.circle `
-  fill: transparent;
-  stroke: blue;
-  stroke-width: 1;
-  cursor: ${props => (props.$isReadOnly ? 'default' : 'crosshair')};
-  opacity: ${props => (props.$isVisible ? 1 : 0)};
-  transition: opacity 0.2s ease-in-out;
+const Connector = styled.circle `
+  fill: transparent;
+  stroke: blue;
+  stroke-width: 1;
+  cursor: ${props => (props.$isReadOnly ? 'default' : 'crosshair')};
+  opacity: ${props => (props.$isVisible ? 1 : 0)};
+  transition: opacity 0.2s ease-in-out;
 `;
-const ConnectorHitArea = styled.circle `
-  fill: transparent;
-  cursor: ${props => (props.$isReadOnly ? 'default' : 'crosshair')};
-  opacity: 0;
-  pointer-events: all;
+const ConnectorHitArea = styled.circle `
+  fill: transparent;
+  cursor: ${props => (props.$isReadOnly ? 'default' : 'crosshair')};
+  opacity: 0;
+  pointer-events: all;
 `;
 const DiagramItemComponent = ({ wf, item, isSelected, isCurrent, readOnly, onClick, onDrag, onDragEnd, onConnectorMouseDown, onConnectorMouseUp, onDimensionsChange, onDoubleClick, }) => {
     const diagramItemRef = useRef(null);

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

@@ -27,39 +27,39 @@ import RecipientList, { WorkItemActorTypes } from './RecipientList';
 import TMRadioButton from '../../../editors/TMRadioButton';
 import TMVilViewer from '../../../base/TMVilViewer';
 import { DiagramItemProps, wfDiagramItemValidator } from './workflowHelpers';
-const FormContainer = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-  padding: 10px;
+const FormContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  padding: 10px;
 `;
-const FlexContainer = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 20px;
+const FlexContainer = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 20px;
 `;
-const BoxContainer = styled.div `
-  flex: 1;
-  border: 1px solid #ccc;
-  border-radius: 5px;
-  padding: 10px;
-  min-width: 300px;
-  position: relative;
+const BoxContainer = styled.div `
+  flex: 1;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  padding: 10px;
+  min-width: 300px;
+  position: relative;
 `;
-const HeaderContainer = styled.div `
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  position: relative;
-  margin-bottom: 10px;
-  font-weight: 600;
+const HeaderContainer = styled.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  margin-bottom: 10px;
+  font-weight: 600;
 `;
-const ButtonsContainer = styled.div `
-  display: flex;
-  justify-content: center;
-  gap: 10px; 
-  margin-top: auto; 
-  padding-top: 20px;
+const ButtonsContainer = styled.div `
+  display: flex;
+  justify-content: center;
+  gap: 10px; 
+  margin-top: auto; 
+  padding-top: 20px;
 `;
 const SET_RULE_DATASOURCE = [
     { value: WorkItemSetRules.Ands_AND_Ors, display: "Ands_AND_Ors" },

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

@@ -3,18 +3,18 @@ import { DiagramItemTypes } from './interfaces'; // Assicurati che il percorso s
 import styled from 'styled-components';
 import { TMImageLibrary } from '../../../../helper';
 // Stili per il contenitore SVG nella toolbox per centrare l'elemento
-const StyledToolboxSvgContainer = styled.div `
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden; // Previene lo scroll se l'SVG è leggermente più grande
-    svg {
-        max-width: 100%;
-        max-height: 100%;
-        display: block; // Rimuove spazi extra sotto l'SVG
-    }
+const StyledToolboxSvgContainer = styled.div `
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden; // Previene lo scroll se l'SVG è leggermente più grande
+    svg {
+        max-width: 100%;
+        max-height: 100%;
+        display: block; // Rimuove spazi extra sotto l'SVG
+    }
 `;
 const DiagramItemSvgContent = ({ itemType, width, height, isToolboxPreview = false, statusData }) => {
     const PADDING = 10;

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

@@ -23,47 +23,47 @@ export var WorkItemActorTypes;
     WorkItemActorTypes[WorkItemActorTypes["FXID"] = 5] = "FXID";
     WorkItemActorTypes[WorkItemActorTypes["STID"] = 6] = "STID";
 })(WorkItemActorTypes || (WorkItemActorTypes = {}));
-const RecipientsColumn = styled.div `
-  flex: 1;
-  border: 1px solid #ccc;
-  border-radius: 5px;
-  padding: 10px;
-  min-width: 300px;
-  position: relative;
+const RecipientsColumn = styled.div `
+  flex: 1;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  padding: 10px;
+  min-width: 300px;
+  position: relative;
 `;
-const HeaderContainer = styled.div `
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  position: relative;
-  margin-bottom: 10px;
+const HeaderContainer = styled.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  margin-bottom: 10px;
 `;
-const RecipientItem = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  padding: 2px 5px;
-  border-radius: 3px;
-
-  background-color: ${props => props.$isSelected ? '#e6f7ff' : 'transparent'}; 
-  border: ${props => props.$isSelected ? '1px solid #91d5ff' : '1px solid transparent'};
+const RecipientItem = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 5px;
+  border-radius: 3px;
+
+  background-color: ${props => props.$isSelected ? '#e6f7ff' : 'transparent'}; 
+  border: ${props => props.$isSelected ? '1px solid #91d5ff' : '1px solid transparent'};
 `;
-const FloatingMenu = styled.div `
-  position: absolute;
-  top: 100%; /* Si apre sotto il bottone */
-  right: 0; /* Allinea il bordo destro del menu con quello del genitore */
-  background-color: white;
-  border: 1px solid #ccc;
-  border-radius: 5px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  z-index: 10;
-  display: flex;
-  flex-direction: column; /* Disposizione verticale */
-  gap: 5px;
-  padding: 5px;
-  min-width: 150px;
-  transform: translateY(5px);
-  align-items: center; /* Centra i pulsanti orizzontalmente */
+const FloatingMenu = styled.div `
+  position: absolute;
+  top: 100%; /* Si apre sotto il bottone */
+  right: 0; /* Allinea il bordo destro del menu con quello del genitore */
+  background-color: white;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  z-index: 10;
+  display: flex;
+  flex-direction: column; /* Disposizione verticale */
+  gap: 5px;
+  padding: 5px;
+  min-width: 150px;
+  transform: translateY(5px);
+  align-items: center; /* Centra i pulsanti orizzontalmente */
 `;
 // FloatingMenuButton wrapper component to avoid circular dependency
 const FloatingMenuButton = (props) => {