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

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

@@ -14,308 +14,308 @@ import { StyledLoadingContainer, StyledSpinner } from '../../../base/Styled';
 import DiagramItemForm from './DiagramItemForm';
 import ReactDOM from 'react-dom';
 import ConnectionForm from './ConnectionForm';
-const ZoomLevelText = styled.span `
-    font-size: 0.9em;
-    color: #555; 
-    white-space: nowrap; 
-    background-color: white;
-    padding: 2px 4px; /* Aggiunto un leggero padding per chiarezza */
-    border-radius: 4px;
-
-    /* A. Modalità Compressa (non Floating & Collapsed) */
+const ZoomLevelText = styled.span `
+    font-size: 0.9em;
+    color: #555; 
+    white-space: nowrap; 
+    background-color: white;
+    padding: 2px 4px; /* Aggiunto un leggero padding per chiarezza */
+    border-radius: 4px;
+
+    /* A. Modalità Compressa (non Floating & Collapsed) */
     ${props => !props.$isFloating && props.$isCollapsed
-    ? `
-            padding: 0 2px;
-            margin: 0; 
-            display: inline-block; 
-            line-height: 20px;
+    ? `
+            padding: 0 2px;
+            margin: 0; 
+            display: inline-block; 
+            line-height: 20px;
         `
     // B. Modalità Flottante (Verticale)
     : props.$isFloating
-        ? `
-            display: block; 
-            text-align: center; 
-            margin: 4px 0; 
-            padding: 2px 4px;
+        ? `
+            display: block; 
+            text-align: center; 
+            margin: 4px 0; 
+            padding: 2px 4px;
         `
         // C. Modalità Standard (Orizzontale & non Collapsed)
-        : `
-            display: flex; 
-            align-items: center; 
-            margin: 0 8px; 
-            padding: 2px 4px;
-        `}
+        : `
+            display: flex; 
+            align-items: center; 
+            margin: 0 8px; 
+            padding: 2px 4px;
+        `}
 `;
-const DiagramWrapper = styled.div `
-  height: 100%;
-  width: 100%;
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  overflow: hidden;
-  background-color: white;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  display: flex;
-  flex-direction: column;
-  position: relative; 
-  transition: all 0.3s ease-in-out;
+const DiagramWrapper = styled.div `
+  height: 100%;
+  width: 100%;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  overflow: hidden;
+  background-color: white;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  position: relative; 
+  transition: all 0.3s ease-in-out;
 `;
-const FullScreenContainer = styled.div `
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  z-index: 1500; 
-  background-color: white;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
+const FullScreenContainer = styled.div `
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 1500; 
+  background-color: white;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 `;
-const CanvasContainer = styled.div `
-  position: relative;
-  width: 100%;
-  height: 100%;
-  border: 1px solid #ccc;
-  background-color: #f9f9f9;
-  display: flex;
-  overflow: hidden; /* Ensure content doesn't overflow when panels are collapsed */
+const CanvasContainer = styled.div `
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border: 1px solid #ccc;
+  background-color: #f9f9f9;
+  display: flex;
+  overflow: hidden; /* Ensure content doesn't overflow when panels are collapsed */
 `;
-const pulse = keyframes `
-    0% {
-        transform: scale(1.0);
-        /* 💡 NUOVO: Ombra bianca/chiara per massimo contrasto contro il blu */
-        box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.9); 
-    }
-    50% {
-        transform: scale(1.3); /* Aumentato a 1.3 per maggiore impatto visivo */
-        box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); /* Aumentato lo spread a 12px */
-    }
-    100% {
-        transform: scale(1.0);
-        box-shadow: 0 0 0 0px rgba(255, 255, 255, 0);
-    }
+const pulse = keyframes `
+    0% {
+        transform: scale(1.0);
+        /* 💡 NUOVO: Ombra bianca/chiara per massimo contrasto contro il blu */
+        box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.9); 
+    }
+    50% {
+        transform: scale(1.3); /* Aumentato a 1.3 per maggiore impatto visivo */
+        box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); /* Aumentato lo spread a 12px */
+    }
+    100% {
+        transform: scale(1.0);
+        box-shadow: 0 0 0 0px rgba(255, 255, 255, 0);
+    }
 `;
-const ToolbarContainer = styled.div `
-  display: flex;
-  gap: 5px;
+const ToolbarContainer = styled.div `
+  display: flex;
+  gap: 5px;
   background: ${props => props.$isReadOnly
     ? 'transparent linear-gradient(180deg, #007bff 0%, #1E90FF 45%, #0056b3 100%) 0% 0% no-repeat padding-box'
-    : 'transparent linear-gradient(180deg, #E03A8B 9%, #C2388B 34%, #A63B8D 60%, #943C8D 83%, #8F3C8D 100%) 0% 0% no-repeat padding-box'};
-  padding: 8px;
-  border-radius: 4px;
-  z-index: 10;
-  flex-shrink: 0;
-  transition: all 0.3s ease-in-out; 
-
-  ${props => props.$isFloating ? `
-    position: absolute;
-    bottom: 20px;
-    left: ${props.$isReadOnly ? '20px' : props.$isToolboxVisible ? '160px' : '20px'};
-    flex-direction: row;
-    width: auto;
-    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
-    padding: 5px 8px;
-  ` : `
-    position: relative;
-    flex-direction: column;
-    width: ${props.$isCollapsed ? '40px' : 'auto'};
-  `}
-  overflow-y: auto;
-
-  button {
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 5px;
-    display: flex;
-    align-items: center;
-    justify-content: ${props => props.$isCollapsed || props.$isFloating ? 'center' : 'flex-start'}; // Centra icone in entrambe le modalità
-    white-space: nowrap;
-
-    position: relative; 
-    overflow: visible; 
-    transition: background-color 0.3s; /* Aggiunto transform per l'animazione */
-    &[title="Progettazione"] {
-            ${props => props.$isReadOnly && css `
-                svg {
-                    /* Applicazione animazione */
-                    animation: ${pulse} 2s infinite; 
-                    
-                    /* Assicura che l'animazione sia sopra */
-                    z-index: 2; 
-                    
-                    /* FIX: box-shadow e transform necessitano di spazio visibile */
-                    overflow: visible; /* Assicurati che l'SVG non tagli l'ombra */
-                    position: relative; /* Necessario per z-index in alcuni contesti */
-                    
-                    /* Assicura una transizione base per trasformazione */
-                    transition: transform 0.2s; 
-                }
-            `}
-        }
-
-    svg {
-      color: white;
-      font-size: ${props => props.$isFloating ? '20px' : '30px'}; // Icone più piccole in modalità floating
-      min-width: ${props => props.$isFloating ? '20px' : '30px'};
-    }
-
-    span {
-        display: ${props => (props.$isCollapsed || props.$isFloating) ? 'none' : 'block'}; // Nascondi testo in modalità collapsed e floating
-        color: white;
-        margin-left: 8px;
-    }
-
-    &:hover {
-      background-color: rgba(255, 255, 255, 0.2);
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-      opacity: 0.5;
-      background-color: transparent;
-      &:hover {
-        background-color: transparent;
-      }
-      svg {
-        color: #cccccc;
-      }
-    }
-  }
+    : 'transparent linear-gradient(180deg, #E03A8B 9%, #C2388B 34%, #A63B8D 60%, #943C8D 83%, #8F3C8D 100%) 0% 0% no-repeat padding-box'};
+  padding: 8px;
+  border-radius: 4px;
+  z-index: 10;
+  flex-shrink: 0;
+  transition: all 0.3s ease-in-out; 
+
+  ${props => props.$isFloating ? `
+    position: absolute;
+    bottom: 20px;
+    left: ${props.$isReadOnly ? '20px' : props.$isToolboxVisible ? '160px' : '20px'};
+    flex-direction: row;
+    width: auto;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+    padding: 5px 8px;
+  ` : `
+    position: relative;
+    flex-direction: column;
+    width: ${props.$isCollapsed ? '40px' : 'auto'};
+  `}
+  overflow-y: auto;
+
+  button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: ${props => props.$isCollapsed || props.$isFloating ? 'center' : 'flex-start'}; // Centra icone in entrambe le modalità
+    white-space: nowrap;
+
+    position: relative; 
+    overflow: visible; 
+    transition: background-color 0.3s; /* Aggiunto transform per l'animazione */
+    &[title="Progettazione"] {
+            ${props => props.$isReadOnly && css `
+                svg {
+                    /* Applicazione animazione */
+                    animation: ${pulse} 2s infinite; 
+                    
+                    /* Assicura che l'animazione sia sopra */
+                    z-index: 2; 
+                    
+                    /* FIX: box-shadow e transform necessitano di spazio visibile */
+                    overflow: visible; /* Assicurati che l'SVG non tagli l'ombra */
+                    position: relative; /* Necessario per z-index in alcuni contesti */
+                    
+                    /* Assicura una transizione base per trasformazione */
+                    transition: transform 0.2s; 
+                }
+            `}
+        }
+
+    svg {
+      color: white;
+      font-size: ${props => props.$isFloating ? '20px' : '30px'}; // Icone più piccole in modalità floating
+      min-width: ${props => props.$isFloating ? '20px' : '30px'};
+    }
+
+    span {
+        display: ${props => (props.$isCollapsed || props.$isFloating) ? 'none' : 'block'}; // Nascondi testo in modalità collapsed e floating
+        color: white;
+        margin-left: 8px;
+    }
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.2);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+      background-color: transparent;
+      &:hover {
+        background-color: transparent;
+      }
+      svg {
+        color: #cccccc;
+      }
+    }
+  }
 `;
-const ButtonGroup = styled.div `
-  display: flex;
-  gap: 5px; // Spazio tra i pulsanti all'interno di un gruppo
-  flex-shrink: 0; // Impedisce ai gruppi di restringersi
-
-  ${props => props.$isFloating ? `
-    flex-direction: row;
-    ${!props.$isLast && `
-      border-right: 1px solid rgba(255, 255, 255, 0.3);
-      padding-right: 5px;
-      margin-right: 5px;
-    `}
-  ` : `
-    flex-direction: column;
-    ${!props.$isLast && `
-      border-bottom: 1px solid rgba(255, 255, 255, 0.3);
-      padding-bottom: 5px;
-      margin-bottom: 5px;
-    `}
-  `}
+const ButtonGroup = styled.div `
+  display: flex;
+  gap: 5px; // Spazio tra i pulsanti all'interno di un gruppo
+  flex-shrink: 0; // Impedisce ai gruppi di restringersi
+
+  ${props => props.$isFloating ? `
+    flex-direction: row;
+    ${!props.$isLast && `
+      border-right: 1px solid rgba(255, 255, 255, 0.3);
+      padding-right: 5px;
+      margin-right: 5px;
+    `}
+  ` : `
+    flex-direction: column;
+    ${!props.$isLast && `
+      border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+      padding-bottom: 5px;
+      margin-bottom: 5px;
+    `}
+  `}
 `;
-const ToolbarToggle = styled.button `
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 5px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-top: auto; /* Push to the bottom */
-
-  svg {
-    /* color: white; */
-    font-size: 20px;
-  }
+const ToolbarToggle = styled.button `
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: auto; /* Push to the bottom */
+
+  svg {
+    /* color: white; */
+    font-size: 20px;
+  }
 `;
-const ToolboxContainer = styled.div `
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
-    background-color: #f0f0f0;
-    padding: 5px;
-    border-radius: 4px;
-    z-index: 10;
-    flex-shrink: 0;
-    border-right: 1px solid #ccc;
-    overflow-y: auto;
-    transition: width 0.3s ease-in-out, padding 0.3s ease-in-out, opacity 0.3s ease-in-out;
-    opacity: ${props => props.$isVisible ? '1' : '0'};
-    pointer-events: ${props => props.$isVisible ? 'auto' : 'none'};
+const ToolboxContainer = styled.div `
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    background-color: #f0f0f0;
+    padding: 5px;
+    border-radius: 4px;
+    z-index: 10;
+    flex-shrink: 0;
+    border-right: 1px solid #ccc;
+    overflow-y: auto;
+    transition: width 0.3s ease-in-out, padding 0.3s ease-in-out, opacity 0.3s ease-in-out;
+    opacity: ${props => props.$isVisible ? '1' : '0'};
+    pointer-events: ${props => props.$isVisible ? 'auto' : 'none'};
 `;
-const ToolboxIconWrapper = styled.div `
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
-    border: 1px solid #ddd;
-    background-color: #fff;
-    margin-bottom: 5px;
-    transition: all 0.2s ease-in-out;
+const ToolboxIconWrapper = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    border: 1px solid #ddd;
+    background-color: #fff;
+    margin-bottom: 5px;
+    transition: all 0.2s ease-in-out;
 `;
-const ToolboxItem = styled.div `
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 2px;
-    border-radius: 5px;
-    cursor: grab;
-    transition: background-color 0.2s ease-in-out;
-    min-width: 80px;
-    text-align: center;
-
-    &:hover {
-        background-color: #e9e9e9;
-        
-        ${ToolboxIconWrapper} {
-            background-color: #e0e0e0;
-            border-color: #a0a0a0;
-        }
-    }
-
-    span {
-        font-size: 0.8em;
-        color: #333;
-        word-break: break-word;
-        line-height: 1.1;
-        max-width: 70px;
-    }
+const ToolboxItem = styled.div `
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 2px;
+    border-radius: 5px;
+    cursor: grab;
+    transition: background-color 0.2s ease-in-out;
+    min-width: 80px;
+    text-align: center;
+
+    &:hover {
+        background-color: #e9e9e9;
+        
+        ${ToolboxIconWrapper} {
+            background-color: #e0e0e0;
+            border-color: #a0a0a0;
+        }
+    }
+
+    span {
+        font-size: 0.8em;
+        color: #333;
+        word-break: break-word;
+        line-height: 1.1;
+        max-width: 70px;
+    }
 `;
-const SvgScrollContainer = styled.div `
-  flex-grow: 1;
-  overflow: auto;
-  position: relative;
+const SvgScrollContainer = styled.div `
+  flex-grow: 1;
+  overflow: auto;
+  position: relative;
 `;
-const StyledSvg = styled.svg `
-  min-width: calc(100% - 5px);
-  min-height: calc(100% - 5px);
-  background-color: transparent;
-
-  &:focus {
-    outline: none;
-  }
+const StyledSvg = styled.svg `
+  min-width: calc(100% - 5px);
+  min-height: calc(100% - 5px);
+  background-color: transparent;
+
+  &:focus {
+    outline: none;
+  }
 `;
-const ScalableGroup = styled.g `
-  transform: translate(${props => props.$translateX}px, ${props => props.$translateY}px) scale(${props => props.$scale});
-  transform-origin: 0 0;
+const ScalableGroup = styled.g `
+  transform: translate(${props => props.$translateX}px, ${props => props.$translateY}px) scale(${props => props.$scale});
+  transform-origin: 0 0;
 `;
-const SelectionRect = styled.rect `
-  fill: rgba(0, 123, 255, 0.1);
-  stroke: #007bff;
-  stroke-width: 1;
-  stroke-dasharray: 3 3;
-  pointer-events: none;
+const SelectionRect = styled.rect `
+  fill: rgba(0, 123, 255, 0.1);
+  stroke: #007bff;
+  stroke-width: 1;
+  stroke-dasharray: 3 3;
+  pointer-events: none;
 `;
-const TempConnectionPath = styled.path `
-    fill: none;
-    stroke: #888;
-    stroke-width: 2;
-    stroke-dasharray: 5 5;
-    pointer-events: none;
+const TempConnectionPath = styled.path `
+    fill: none;
+    stroke: #888;
+    stroke-width: 2;
+    stroke-dasharray: 5 5;
+    pointer-events: none;
 `;
-const DiagramMessage = styled.div `
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  font-size: 1.2em;
-  color: #555;
-  text-align: center;
+const DiagramMessage = styled.div `
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 1.2em;
+  color: #555;
+  text-align: center;
 `;
 const WFDiagram = ({ xmlDiagramString, currentSetID, allowEdit = true, onDiagramChange }) => {
     const [isReadOnly, setIsReadOnly] = useState(true);

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

@@ -3,10 +3,10 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import RecipientList, { WorkItemActorTypes } from './RecipientList';
 import { SDKUI_Localizator } from '../../../../helper';
-export const RecipientsContainer = styled.div `
-  display: flex;
-  gap: 20px;
-  flex-wrap: wrap;
+export const RecipientsContainer = styled.div `
+  display: flex;
+  gap: 20px;
+  flex-wrap: wrap;
 `;
 export const tosToActors = (tosString) => {
     const andRecipients = [];

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

@@ -6,44 +6,44 @@ import TextBox from "./TextBox";
 import { createPortal } from 'react-dom';
 import { IconSearch, SDKUI_Localizator, IconArrowLeft, IconApply } from "../../../helper";
 import TMButton from "../../base/TMButton";
-const PopupContainer = styled.div `
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.4);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 100;
+const PopupContainer = styled.div `
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.4);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 100;
 `;
-const PopupHeaderContainer = styled.div `
-    display: flex;
-    padding: 10px;
-    align-items: center;
-    justify-content: space-between;
+const PopupHeaderContainer = styled.div `
+    display: flex;
+    padding: 10px;
+    align-items: center;
+    justify-content: space-between;
 `;
-const DropdownContainer = styled.div `
-  position: fixed;
-  background: white;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
-  max-height: 35vh;
-  overflow-y: auto;
-  z-index: 9999;
-  width: fit-content;
-  resize: both;
+const DropdownContainer = styled.div `
+  position: fixed;
+  background: white;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+  max-height: 35vh;
+  overflow-y: auto;
+  z-index: 9999;
+  width: fit-content;
+  resize: both;
 `;
-const PopupContent = styled.div `
-  background: white;
-  padding: 20px;
-  border-radius: 8px;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
+const PopupContent = styled.div `
+  background: white;
+  padding: 20px;
+  border-radius: 8px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 `;
 const Chooser = ({ dataSource, columns, value, additionalIcons = [], validationItems = [], title, label = '', icon, placeHolder, disabled, selectedRow, onChooserClick, onSelectionChanged, onClose, isDropDown = false }) => {
     const [isDropdownOpen, setIsDropdownOpen] = useState(false);