@topconsultnpm/sdkui-react-beta 6.16.29 → 6.16.31

package/lib/components/base/TMDataGridExportForm.js

@@ -4,12 +4,12 @@ import { Workbook } from 'exceljs';
 import { buildValueToLabelMapFromDataColumns, getExceptionMessage, SDKUI_Localizator } from '../../helper';
 import TMCheckBox from '../editors/TMCheckBox';
 import TMButton from './TMButton';
-import TMDropDown from './TMDropDown';
 import TMModal from './TMModal';
 import { TMExceptionBoxManager } from './TMPopUp';
 import { ResultTypes } from '@topconsultnpm/sdk-ts-beta';
 import TMSpinner from './TMSpinner';
 import { TMResultManager } from '../forms/TMResultDialog';
+import TMDropDown from '../editors/TMDropDown';
 const formatDataSource = [
     { value: 'csv', display: 'CSV' },
     { value: 'xlsx', display: 'XLSX' },

package/lib/components/choosers/TMCultureIDPicker.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { CultureIDs } from '@topconsultnpm/sdk-ts-beta';
+import { ITMChooserProps } from '../../ts';
+interface TMCultureIDPickerProps extends ITMChooserProps {
+    selectedValue: CultureIDs | undefined;
+    onSelectCultureID: (cultureID: CultureIDs) => void;
+}
+declare const TMCultureIDPicker: React.FC<TMCultureIDPickerProps>;
+export default TMCultureIDPicker;

package/lib/components/choosers/TMCultureIDPicker.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import styled from 'styled-components';
+import { IconSearch, SDKUI_Localizator } from '../../helper';
+import { CultureIDs } from '@topconsultnpm/sdk-ts-beta';
+import { getCultureIDImg } from '../editors/TMLocalizedTextBox';
+import TMModal from '../base/TMModal';
+import TMSummary from '../editors/TMSummary';
+import { StyledDivHorizontal } from '../..';
+const CULTUREIDs_DATASOURCE = [
+    { value: CultureIDs.It_IT, display: "Italiano", icon: _jsx("img", { src: getCultureIDImg(CultureIDs.It_IT), alt: "Lang", width: 16, height: 16 }) },
+    { value: CultureIDs.Fr_FR, display: "Française", icon: _jsx("img", { src: getCultureIDImg(CultureIDs.Fr_FR), alt: "Lang", width: 16, height: 16 }) },
+    { value: CultureIDs.Pt_PT, display: "Português", icon: _jsx("img", { src: getCultureIDImg(CultureIDs.Pt_PT), alt: "Lang", width: 16, height: 16 }) },
+    { value: CultureIDs.En_US, display: "English", icon: _jsx("img", { src: getCultureIDImg(CultureIDs.En_US), alt: "Lang", width: 16, height: 16 }) },
+    { value: CultureIDs.Es_ES, display: "Español", icon: _jsx("img", { src: getCultureIDImg(CultureIDs.Es_ES), alt: "Lang", width: 16, height: 16 }) },
+    { value: CultureIDs.De_DE, display: "Deutsch", icon: _jsx("img", { src: getCultureIDImg(CultureIDs.De_DE), alt: "Lang", width: 16, height: 16 }) },
+];
+const PickerContainer = styled.div `
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 20px;
+`;
+const ItemsContainer = styled.div `
+    display: flex;
+    flex-wrap: wrap;
+    gap: 15px;
+    justify-content: center;
+`;
+const CultureItem = styled.div `
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    text-align: center;
+    font-size: 0.9em;
+    padding: 10px 15px;
+    border-radius: 8px;
+    border: 2px solid transparent;
+    transition: all 0.2s ease-in-out;
+    width: 120px;
+
+    &:hover {
+        background-color: #f0f0f0;
+    }
+
+    ${props => props.$isSelected && `
+        border-color: #007bff;
+        background-color: #e6f2ff;
+    `}
+`;
+const FlagIcon = styled.div `
+    margin-bottom: 5px;
+    font-size: 2em;
+`;
+const TMCultureIDPicker = ({ selectedValue, onSelectCultureID, placeHolder, width = '100%', icon, backgroundColor, readOnly = false, openChooserBySingleClick = false, buttons = [], elementStyle, isModifiedWhen, label, showClearButton = false, validationItems = [], onValueChanged }) => {
+    const [showPicker, setShowPicker] = useState(false);
+    const getCultureIDName = (cultureID) => {
+        const item = CULTUREIDs_DATASOURCE.find(c => c.value === cultureID);
+        return item ? item.display : '';
+    };
+    const renderTemplate = () => {
+        const isPlaceholder = selectedValue === placeHolder;
+        return (_jsxs(StyledDivHorizontal, { style: { width: '100%', color: isPlaceholder ? '#a9a9a9' : 'inherit' }, children: [selectedValue && _jsx("img", { src: getCultureIDImg(selectedValue), alt: "Lang", width: 16, height: 16, style: { marginRight: '8px' } }), selectedValue && _jsx("p", { children: getCultureIDName(selectedValue) })] }));
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { width: width, icon: icon, buttons: buttons, readOnly: readOnly, backgroundColor: backgroundColor, showBorder: true, hasValue: selectedValue !== undefined, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => !readOnly && setShowPicker(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, label: label, openEditorOnSummaryClick: openChooserBySingleClick, template: renderTemplate(), onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showPicker && _jsx(TMModal, { title: label || SDKUI_Localizator.Select, onClose: () => setShowPicker(false), isModal: true, width: "450px", height: "255px", children: _jsx(PickerContainer, { children: _jsx(ItemsContainer, { children: CULTUREIDs_DATASOURCE.map(item => (_jsxs(CultureItem, { "$isSelected": item.value === selectedValue, onClick: () => {
+                                onSelectCultureID(item.value);
+                                setShowPicker(false);
+                            }, children: [_jsx(FlagIcon, { children: item.icon }), _jsx("span", { children: item.display })] }, item.value))) }) }) })] }));
+};
+export default TMCultureIDPicker;

package/lib/components/editors/TMTextExpression.d.ts

@@ -14,6 +14,7 @@ interface ITMTextExpression extends ITMEditorBase {
     widthChooser?: string;
     disableMultipleSelection?: boolean;
     validationItems?: ValidationItem[];
+    rows?: number;
     onValueChanged?: (newText: string | undefined) => void;
 }
 declare const TMTextExpression: React.FunctionComponent<ITMTextExpression>;

package/lib/components/editors/TMTextExpression.js

@@ -6,6 +6,7 @@ import { TMExceptionBoxManager } from '../base/TMPopUp';
 import { TMMetadataChooserForm } from '../choosers/TMMetadataChooser';
 import TMChooserForm from '../forms/TMChooserForm';
 import TMTextBox from './TMTextBox';
+import TMTextArea from './TMTextArea';
 const TMTextExpression = (props) => {
     const [metadatas_Info_Source, setMetadatas_Info_Source] = useState([]);
     const [showMetadataChooser, setShowMetadataChooser] = useState(false);
@@ -153,7 +154,10 @@ const TMTextExpression = (props) => {
                     props.onValueChanged?.(expr);
                 } }) : _jsx(_Fragment, {}));
     };
-    return (_jsxs(_Fragment, { children: [_jsx(TMTextBox, { buttons: renderButtons(), isModifiedWhen: props.value != props.valueOrig, label: props.label, value: Expression_IDs2Names(props.value) ?? '', validationItems: props.validationItems, onValueChanged: (e) => { props.onValueChanged?.(Expression_Names2IDs(e.target.value)); } }), openMetadataChooseForm(), " ", openFormulaChooseForm()] }));
+    return (_jsxs(_Fragment, { children: [props.rows === undefined ?
+                _jsx(TMTextBox, { buttons: renderButtons(), isModifiedWhen: props.value != props.valueOrig, label: props.label, value: Expression_IDs2Names(props.value) ?? '', validationItems: props.validationItems, onValueChanged: (e) => { props.onValueChanged?.(Expression_Names2IDs(e.target.value)); } })
+                :
+                    _jsx(TMTextArea, { buttons: renderButtons(), isModifiedWhen: props.value != props.valueOrig, label: props.label, rows: props.rows, resize: false, placeHolder: props.placeHolder, value: Expression_IDs2Names(props.value) ?? '', validationItems: props.validationItems, onValueChanged: (e) => { props.onValueChanged?.(Expression_Names2IDs(e.target.value)); } }), openMetadataChooseForm(), " ", openFormulaChooseForm()] }));
 };
 class MetatadaHelper {
     constructor(mid, metadataName) {

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

@@ -1,6 +1,7 @@
 import React from 'react';
-import { DiagramItem } from './interfaces';
+import { DiagramItem, WfInfo } from './interfaces';
 interface DiagramItemComponentProps {
+    wf?: WfInfo | null;
     item: DiagramItem;
     isSelected: boolean;
     isCurrent: boolean;

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

@@ -1,8 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment, 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';
 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-beta';
 const blink = keyframes `
   0%, 100% { opacity: 1; }
   50% { opacity: 0.4; }
@@ -80,7 +82,7 @@ const ConnectorHitArea = styled.circle `
   opacity: 0;
   pointer-events: all;
 `;
-const DiagramItemComponent = ({ item, isSelected, isCurrent, readOnly, onClick, onDrag, onDragEnd, onConnectorMouseDown, onConnectorMouseUp, onDimensionsChange, onDoubleClick, }) => {
+const DiagramItemComponent = ({ wf, item, isSelected, isCurrent, readOnly, onClick, onDrag, onDragEnd, onConnectorMouseDown, onConnectorMouseUp, onDimensionsChange, onDoubleClick, }) => {
     const diagramItemRef = useRef(null);
     const textRef = useRef(null);
     const [isDragging, setIsDragging] = useState(false);
@@ -88,6 +90,26 @@ const DiagramItemComponent = ({ item, isSelected, isCurrent, readOnly, onClick,
     const [startDragOffset, setStartDragOffset] = useState(null);
     const [currentPosition, setCurrentPosition] = useState({ x: item.Left, y: item.Top });
     const [textDimensions, setTextDimensions] = useState({ width: 0, height: 0 });
+    const [statusData, setStatusData] = useState(undefined);
+    useEffect(() => {
+        const fetchStatusData = async () => {
+            if (item.Type === DiagramItemTypes.Status && wf?.MStatusDLID) {
+                try {
+                    const fullDataList = await DataListCacheService.GetAsync(wf.MStatusDLID);
+                    const foundItem = fullDataList?.items?.find(o => o.value == item.StatusValue);
+                    setStatusData(foundItem);
+                }
+                catch (error) {
+                    console.error("Errore durante il recupero dei dati di stato:", error);
+                    setStatusData(undefined);
+                }
+            }
+            else {
+                setStatusData(undefined);
+            }
+        };
+        fetchStatusData();
+    }, [item.Type, item.StatusValue, wf?.MStatusDLID]);
     // Calcola le dimensioni totali dell'elemento usando la funzione di utilità
     const { calculatedWidth, calculatedHeight } = useMemo(() => {
         return calculateDiagramItemFullDimensions(item, textDimensions);
@@ -235,7 +257,7 @@ const DiagramItemComponent = ({ item, isSelected, isCurrent, readOnly, onClick,
                 isTruncated = textLines[textLines.length - 1].endsWith('...');
             }
         }
-        return (_jsxs(_Fragment, { children: [isTruncated && _jsx("title", { children: item.ItemName }), _jsx("rect", { x: "0", y: "0", width: calculatedWidth, height: calculatedHeight, className: "item-main-shape" }), _jsx("g", { transform: `translate(${svgX}, ${svgY})`, children: _jsx(DiagramItemSvgContent, { itemType: item.Type, width: iconRenderWidth, height: iconRenderHeight }) }), 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 (_jsxs(_Fragment, { children: [isTruncated && _jsx("title", { children: item.ItemName }), _jsx("rect", { x: "0", y: "0", width: calculatedWidth, height: calculatedHeight, className: "item-main-shape" }), _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, onMouseDown: handleMouseDown, onClick: handleItemClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onDoubleClick: handleDoubleClick, children: _jsx(AnimatingGroup, { "$isCurrent": isCurrent, children: renderContent() }) }));
 };

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

@@ -10,10 +10,10 @@ import TMTextBox from '../../../editors/TMTextBox';
 import TMButton from '../../../base/TMButton';
 import styled from 'styled-components';
 import TMQuerySummary from '../../../query/TMQuerySummary';
-import { CultureIDs, DcmtTypeListCacheService, FromItem, MetadataDataDomains, SDK_Globals, SearchEngine, WFAppTypes, WorkItemSetRules } from '@topconsultnpm/sdk-ts-beta';
-import TMLocalizedTextBox, { getCultureIDImg } from '../../../editors/TMLocalizedTextBox';
+import { CultureIDs, DcmtTypeListCacheService, FromItem, MetadataDataDomains, SDK_Globals, SearchEngine, Severities, WFAppTypes, WorkItemSetRules } from '@topconsultnpm/sdk-ts-beta';
+import TMLocalizedTextBox from '../../../editors/TMLocalizedTextBox';
 import TMDataListItemPicker from '../../../choosers/TMDataListItemPicker';
-import WorkitemRecipientsEditor from './WorkitemRecipientsEditor';
+import WorkitemRecipientsEditor, { actorsToTos, tosToActors } from './WorkitemRecipientsEditor';
 import TMDropDown from '../../../editors/TMDropDown';
 import TMMetadataValues, { AdvancedMenuButtons, ShowCheckBoxesMode } from '../../../editors/TMMetadataValues';
 import TMFormulaEditor, { FormulaDescriptor, FormulaHelper, FormulaTargets } from '../../../editors/TMFormulaEditor';
@@ -22,6 +22,8 @@ import TMTidViewer from '../../../viewers/TMTidViewer';
 import { TMColors } from '../../../../utils/theme';
 import TMPathChooser from '../../../choosers/TMPathChooser';
 import TMTextExpression from '../../../editors/TMTextExpression';
+import TMCultureIDPicker from '../../../choosers/TMCultureIDPicker';
+import RecipientList, { WorkItemActorTypes } from './RecipientList';
 const FormContainer = styled.div `
   display: flex;
   flex-direction: column;
@@ -60,13 +62,11 @@ const SET_RULE_DATASOURCE = [
     { value: WorkItemSetRules.Ands_AND_Ors, display: "Ands_AND_Ors" },
     { value: WorkItemSetRules.Ands_OR_Ors, display: "Ands_OR_Ors" }
 ];
-const CULTUREIDs_DATASOURCE = [
-    { value: CultureIDs.It_IT, display: "Italiano", icon: _jsx("img", { src: getCultureIDImg(CultureIDs.It_IT), alt: "Lang", width: 16, height: 16 }) },
-    { value: CultureIDs.Fr_FR, display: "Française", icon: _jsx("img", { src: getCultureIDImg(CultureIDs.Fr_FR), alt: "Lang", width: 16, height: 16 }) },
-    { value: CultureIDs.Pt_PT, display: "Português", icon: _jsx("img", { src: getCultureIDImg(CultureIDs.Pt_PT), alt: "Lang", width: 16, height: 16 }) },
-    { value: CultureIDs.En_US, display: "English", icon: _jsx("img", { src: getCultureIDImg(CultureIDs.En_US), alt: "Lang", width: 16, height: 16 }) },
-    { value: CultureIDs.Es_ES, display: "Español", icon: _jsx("img", { src: getCultureIDImg(CultureIDs.Es_ES), alt: "Lang", width: 16, height: 16 }) },
-    { value: CultureIDs.De_DE, display: "Deutsch", icon: _jsx("img", { src: getCultureIDImg(CultureIDs.De_DE), alt: "Lang", width: 16, height: 16 }) },
+const SEVERITY_DATASOURCE = [
+    { value: Severities.Critical, display: "Critical" },
+    { value: Severities.Error, display: "Error" },
+    { value: Severities.Warning, display: "Warning" },
+    { value: Severities.Information, display: "Information" },
 ];
 const APP_TYPES_DATASOURCE = [
     { value: WFAppTypes.EXE, display: "EXE" },
@@ -117,6 +117,10 @@ const DiagramItemForm = ({ itemToEdit, wf, onClose, onApply }) => {
                 width = '450px';
                 height = '420px';
                 break;
+            case DiagramItemTypes.Notification:
+                width = '700px';
+                height = '700px';
+                break;
             default:
                 width = '50%';
                 height = '50%';
@@ -331,7 +335,7 @@ const DiagramItemForm = ({ itemToEdit, wf, onClose, onApply }) => {
     const renderAppFields = () => {
         return (_jsxs(_Fragment, { children: [_jsx(TMDropDown, { label: SDKUI_Localizator.WorkflowAppType, dataSource: APP_TYPES_DATASOURCE, value: localItem.AppType, isModifiedWhen: localItem.AppType !== localItemOrig.AppType, onValueChanged: (e) => { handleAppTypeChange(e.target.value); } }), localItem.AppType === WFAppTypes.EXE
                     ? _jsx(TMPathChooser, { label: SDKUI_Localizator.WorkflowAppName, value: localItem.AppName || '', isModifiedWhen: (localItem.AppName ?? '') !== (localItemOrig.AppName ?? ''), onValueChanged: (newValue) => { handleAppNameChange(newValue); }, allowBrowseFile_Area: true, allowBrowseFolder_Area: false, allowParametricPath: false })
-                    : _jsx(TMTextBox, { label: SDKUI_Localizator.WorkflowAppName, value: localItem.AppName, isModifiedWhen: (localItem.AppName ?? '') !== (localItemOrig.AppName ?? ''), onValueChanged: (e) => { handleAppNameChange(e.target.value); } }), _jsx(TMTextExpression, { label: SDKUI_Localizator.Arguments, value: localItem.AppArgs, valueOrig: localItemOrig.AppArgs, tid: wf?.MTID, onValueChanged: (newValue) => { handleAppArgsChange(newValue); } }), _jsx(TMDropDown, { label: SDKUI_Localizator.Format, dataSource: CULTUREIDs_DATASOURCE, value: localItem.FormatCultureID, isModifiedWhen: localItem.FormatCultureID !== localItemOrig.FormatCultureID, onValueChanged: (e) => { handleFormatCultureIDChange(e.target.value); } })] }));
+                    : _jsx(TMTextBox, { label: SDKUI_Localizator.WorkflowAppName, value: localItem.AppName, isModifiedWhen: (localItem.AppName ?? '') !== (localItemOrig.AppName ?? ''), onValueChanged: (e) => { handleAppNameChange(e.target.value); } }), _jsx(TMTextExpression, { label: SDKUI_Localizator.Arguments, value: localItem.AppArgs, valueOrig: localItemOrig.AppArgs, tid: wf?.MTID, onValueChanged: (newValue) => { handleAppArgsChange(newValue); } }), _jsx(TMCultureIDPicker, { label: SDKUI_Localizator.Format, selectedValue: localItem.FormatCultureID, isModifiedWhen: localItem.FormatCultureID !== localItemOrig.FormatCultureID, openChooserBySingleClick: true, onSelectCultureID: handleFormatCultureIDChange })] }));
     };
     // Function to render Approval-specific fields
     const renderApprovalFields = () => {
@@ -419,6 +423,57 @@ const DiagramItemForm = ({ itemToEdit, wf, onClose, onApply }) => {
     const renderRunAppFields = () => {
         return (_jsxs(_Fragment, { children: [_jsx(TMLocalizedTextBox, { label: SDKUI_Localizator.Description, value: localItem.Description, value_IT: localItem.Description_IT, value_EN: localItem.Description_EN, value_FR: localItem.Description_FR, value_PT: localItem.Description_PT, value_ES: localItem.Description_ES, value_DE: localItem.Description_DE, isModifiedWhen: localItem.Description !== localItemOrig.Description, onValueChanged: handleLocalizedDescriptionChange }), renderAppFields()] }));
     };
+    const handleRegAsWfInstPartChange = useCallback((newValue) => {
+        setLocalItem(prevLocalItem => ({
+            ...prevLocalItem,
+            RegAsWfInstPart: newValue
+        }));
+    }, []);
+    const renderNotificationFields = () => {
+        const qdForRecipientsEditor = localItem.QD ?? SearchEngine.NewQueryDescriptor();
+        if (!qdForRecipientsEditor.from) {
+            qdForRecipientsEditor.from = new FromItem();
+        }
+        qdForRecipientsEditor.from.tid = wf?.MTID;
+        const { andRecipients } = useMemo(() => {
+            return tosToActors(localItem.Tos ?? '');
+        }, [localItem.Tos]);
+        const handleQDChosen = useCallback((newQd, orValue) => {
+            const allRecipients = [...andRecipients];
+            const updatedRecipients = allRecipients.filter(r => r.ActorType !== WorkItemActorTypes.QID);
+            const recipientToAdd = {
+                ActorType: WorkItemActorTypes.QID,
+                ActorID: newQd.id ? newQd.id.toString() : '-1',
+                Or: orValue,
+            };
+            updatedRecipients.push(recipientToAdd);
+            const newTos = actorsToTos(updatedRecipients);
+            handleTosChange(newTos);
+            handleSetRuleQDChange(newQd);
+        }, [andRecipients]);
+        const handleAddRecipients = useCallback((newRecipients, orValue) => {
+            const { andRecipients } = tosToActors(localItem.Tos ?? '');
+            let allRecipients = [...andRecipients];
+            // 1. Rimuovi qualsiasi QID esistente se il nuovo destinatario è una query
+            if (newRecipients.length > 0 && newRecipients[0].ActorType === WorkItemActorTypes.QID) {
+                allRecipients = allRecipients.filter(r => r.ActorType !== WorkItemActorTypes.QID);
+            }
+            const updatedRecipients = [...allRecipients, ...newRecipients.map(r => ({ ...r, Or: orValue }))];
+            const newTos = actorsToTos(updatedRecipients);
+            handleTosChange(newTos);
+        }, [localItem.Tos, handleTosChange]);
+        const handleRemoveRecipient = useCallback((recipientToRemove) => {
+            const { andRecipients } = tosToActors(localItem.Tos ?? '');
+            const allRecipients = [...andRecipients];
+            const updatedRecipients = allRecipients.filter(r => r.ActorType !== recipientToRemove.ActorType || r.ActorID !== recipientToRemove.ActorID || r.Or !== recipientToRemove.Or);
+            const newTos = actorsToTos(updatedRecipients);
+            handleTosChange(newTos);
+            if (recipientToRemove.ActorType === WorkItemActorTypes.QID) {
+                handleSetRuleQDChange(undefined);
+            }
+        }, [localItem]);
+        return (_jsxs(_Fragment, { children: [_jsx(TMTextExpression, { label: SDKUI_Localizator.Description, placeHolder: 'Inserire il testo della notifica...', rows: 3, value: localItem.Description, tid: wf?.MTID, isModifiedWhen: (localItem.Description ?? '') !== (localItemOrig.Description ?? ''), onValueChanged: (newValue) => handleLocalizedDescriptionChange(CultureIDs.None, newValue ?? ''), valueOrig: undefined }), _jsx(TMDropDown, { label: "Gravit\u00E0", dataSource: SEVERITY_DATASOURCE, value: localItem.Severity, isModifiedWhen: localItem.Severity !== localItemOrig.Severity, onValueChanged: (e) => setLocalItem(prevLocalItem => ({ ...prevLocalItem, Severity: e.target.value })) }), _jsx(TMCultureIDPicker, { label: SDKUI_Localizator.Format, selectedValue: localItem.FormatCultureID, isModifiedWhen: localItem.FormatCultureID !== localItemOrig.FormatCultureID, openChooserBySingleClick: true, onSelectCultureID: handleFormatCultureIDChange }), _jsx(TMCheckBox, { value: localItem.RegAsWfInstPart ?? 0, label: "Registra i destinatari della notifica come partecipanti dell'istanza di flusso", isModifiedWhen: localItem.RegAsWfInstPart !== localItemOrig.RegAsWfInstPart, onValueChanged: handleRegAsWfInstPartChange }), _jsx(RecipientList, { recipients: andRecipients, title: "Destinatari", tid: wf?.MTID, qd: qdForRecipientsEditor, onQDChange: (newQd) => newQd && handleQDChosen(newQd, 0), onAdd: (newRecipients) => handleAddRecipients(newRecipients, 0), onRemove: handleRemoveRecipient })] }));
+    };
     const renderForm = () => {
         let specificFields;
         switch (localItem.Type) {
@@ -448,6 +503,9 @@ const DiagramItemForm = ({ itemToEdit, wf, onClose, onApply }) => {
             case DiagramItemTypes.RunApp:
                 specificFields = renderRunAppFields();
                 break;
+            case DiagramItemTypes.Notification:
+                specificFields = renderNotificationFields();
+                break;
             default:
                 specificFields = null;
         }

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

@@ -1,10 +1,12 @@
 import React from 'react';
 import { DiagramItemTypes } from './interfaces';
+import { DataListItemDescriptor } from '@topconsultnpm/sdk-ts-beta';
 interface DiagramItemSvgContentProps {
     itemType: DiagramItemTypes;
     width: number;
     height: number;
     isToolboxPreview?: boolean;
+    statusData?: DataListItemDescriptor;
 }
 declare const DiagramItemSvgContent: React.FC<DiagramItemSvgContentProps>;
 export default DiagramItemSvgContent;

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, 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';
 // Stili per il contenitore SVG nella toolbox per centrare l'elemento
 const StyledToolboxSvgContainer = styled.div `
     width: 100%;
@@ -15,7 +16,7 @@ const StyledToolboxSvgContainer = styled.div `
         display: block; // Rimuove spazi extra sotto l'SVG
     }
 `;
-const DiagramItemSvgContent = ({ itemType, width, height, isToolboxPreview = false }) => {
+const DiagramItemSvgContent = ({ itemType, width, height, isToolboxPreview = false, statusData }) => {
     const PADDING = 10;
     // ICON_SIZE e SMALL_ICON_SIZE possono essere regolati a seconda se è una preview o l'elemento reale
     const ICON_SIZE = isToolboxPreview ? Math.min(width, height) * 0.6 : 40;
@@ -39,7 +40,19 @@ const DiagramItemSvgContent = ({ itemType, width, height, isToolboxPreview = fal
             svgContent = (_jsx("polygon", { points: `${svgCenterX},${PADDING} ${calculatedWidth - PADDING},${svgCenterY} ${svgCenterX},${calculatedHeight - PADDING} ${PADDING},${svgCenterY}`, fill: "#87d1df", stroke: "#62d3e2", strokeWidth: "2" }));
             break;
         case DiagramItemTypes.Status:
-            svgContent = (_jsx("svg", { x: svgCenterX - ICON_SIZE / 2, y: svgCenterY - ICON_SIZE / 2, width: ICON_SIZE, height: ICON_SIZE, viewBox: "0 0 24 24", fill: "orange", children: _jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" }) }));
+            // Se i dati non sono disponibili o è una preview, mostra l'icona di fallback
+            if (isToolboxPreview || !statusData?.imageID) {
+                svgContent = (_jsx("svg", { x: svgCenterX - ICON_SIZE / 2, y: svgCenterY - ICON_SIZE / 2, width: ICON_SIZE, height: ICON_SIZE, viewBox: "0 0 24 24", fill: "orange", children: _jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" }) }));
+            }
+            else { // Altrimenti, mostra l'immagine personalizzata
+                svgContent = (_jsx("foreignObject", { x: (width - ICON_SIZE) / 2, y: (height - ICON_SIZE) / 2, width: ICON_SIZE, height: ICON_SIZE, children: _jsx("div", { style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            width: '100%',
+                            height: '100%'
+                        }, children: statusData?.imageID && _jsx(TMImageLibrary, { imageID: statusData.imageID }) }) }));
+            }
             break;
         case DiagramItemTypes.DataEntry:
         case DiagramItemTypes.Approval:

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

@@ -339,12 +339,17 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
         if (!wfDiagram || (selectedItems.size === 0 && selectedConnections.size === 0)) {
             return;
         }
+        // 1. Filtra i nodi "Start" e "End" dal set di elementi selezionati
+        const nonDeletableItems = wfDiagram.DiagramItems.filter(item => item.Type === DiagramItemTypes.Start || item.Type === DiagramItemTypes.End);
+        const deletableSelectedItems = new Set([...selectedItems].filter(id => !nonDeletableItems.some(item => item.ID === id)));
         let newDiagramItems = wfDiagram.DiagramItems;
         let newConnections = wfDiagram.Connections;
-        if (selectedItems.size > 0) {
-            newDiagramItems = wfDiagram.DiagramItems.filter(item => !selectedItems.has(item.ID));
-            newConnections = newConnections.filter(conn => !selectedItems.has(conn.Source.ParentDiagramItem.ID) &&
-                !selectedItems.has(conn.Sink.ParentDiagramItem.ID));
+        if (deletableSelectedItems.size > 0) {
+            // 2. Filtra gli elementi del diagramma usando il set filtrato
+            newDiagramItems = wfDiagram.DiagramItems.filter(item => !deletableSelectedItems.has(item.ID));
+            // 3. Filtra le connessioni usando il set filtrato
+            newConnections = newConnections.filter(conn => !deletableSelectedItems.has(conn.Source.ParentDiagramItem.ID) &&
+                !deletableSelectedItems.has(conn.Sink.ParentDiagramItem.ID));
         }
         if (selectedConnections.size > 0) {
             newConnections = newConnections.filter(conn => !selectedConnections.has(conn.ID));
@@ -354,7 +359,8 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
             DiagramItems: newDiagramItems,
             Connections: newConnections,
         };
-        setSelectedItems(new Set());
+        // Assicura che i nodi non cancellabili restino selezionati per coerenza UI
+        setSelectedItems(new Set([...deletableSelectedItems, ...[...selectedItems].filter(id => nonDeletableItems.some(item => item.ID === id))]));
         setSelectedConnections(new Set());
         updateDiagram(newWfDiagram, false);
     }, [wfDiagram, selectedItems, selectedConnections, setWfDiagram, setSelectedItems, setSelectedConnections, updateDiagram, readOnly]);
@@ -593,7 +599,7 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
         const isNonLinearConnection = isConnectionNonLinear(sourceRect, sinkRect, sourceConnectorName, sinkConnectorName);
         let pathPoints = [];
         let sinkArrowAngle = 0;
-        const offset = 15;
+        const offsetStub = 15;
         const bypassBuffer = 50;
         const getDirection = (connectorName) => {
             if (connectorName === 'Left' || connectorName === 'Right')
@@ -605,16 +611,16 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
         let startStubPoint;
         switch (connection.Source.ConnectorName) {
             case 'Right':
-                startStubPoint = { x: sourcePoint.x + offset, y: sourcePoint.y };
+                startStubPoint = { x: sourcePoint.x + offsetStub, y: sourcePoint.y };
                 break;
             case 'Left':
-                startStubPoint = { x: sourcePoint.x - offset, y: sourcePoint.y };
+                startStubPoint = { x: sourcePoint.x - offsetStub, y: sourcePoint.y };
                 break;
             case 'Bottom':
-                startStubPoint = { x: sourcePoint.x, y: sourcePoint.y + offset };
+                startStubPoint = { x: sourcePoint.x, y: sourcePoint.y + offsetStub };
                 break;
             case 'Top':
-                startStubPoint = { x: sourcePoint.x, y: sourcePoint.y - offset };
+                startStubPoint = { x: sourcePoint.x, y: sourcePoint.y - offsetStub };
                 break;
             default: startStubPoint = sourcePoint;
         }
@@ -623,16 +629,16 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
         let endStubPoint;
         switch (connection.Sink.ConnectorName) {
             case 'Right':
-                endStubPoint = { x: sinkPoint.x + offset, y: sinkPoint.y };
+                endStubPoint = { x: sinkPoint.x + offsetStub, y: sinkPoint.y };
                 break;
             case 'Left':
-                endStubPoint = { x: sinkPoint.x - offset, y: sinkPoint.y };
+                endStubPoint = { x: sinkPoint.x - offsetStub, y: sinkPoint.y };
                 break;
             case 'Bottom':
-                endStubPoint = { x: sinkPoint.x, y: sinkPoint.y + offset };
+                endStubPoint = { x: sinkPoint.x, y: sinkPoint.y + offsetStub };
                 break;
             case 'Top':
-                endStubPoint = { x: sinkPoint.x, y: sinkPoint.y - offset };
+                endStubPoint = { x: sinkPoint.x, y: sinkPoint.y - offsetStub };
                 break;
             default: endStubPoint = sinkPoint;
         }
@@ -1380,7 +1386,7 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
         }
     }, [wfDiagram]);
     return (_jsxs(CanvasContainer, { children: [!readOnly && (_jsxs(ToolbarContainer, { "$isCollapsed": isToolbarCollapsed, "$isFloating": isToolbarFloating, "$isToolboxVisible": isToolboxVisible, children: [_jsx(ButtonGroup, { "$isFloating": isToolbarFloating, children: _jsxs("button", { onClick: handleToggleToolboxVisibility, title: "Show toolbox", children: [_jsx(IconFlowChart, {}), !isToolbarCollapsed && _jsx("span", { children: "Mostra/nascondi toolbox" })] }) }), _jsxs(ButtonGroup, { "$isFloating": isToolbarFloating, children: [_jsxs("button", { onClick: handleUndo, disabled: historyIndex === 0, title: "Undo", children: [_jsx(IconUndo, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "Undo" })] }), _jsxs("button", { onClick: handleRedo, disabled: historyIndex === wfDiagramHistory.length - 1, title: "Redo", children: [_jsx(IconUndo, { style: { transform: 'scaleX(-1)' } }), " ", !isToolbarCollapsed && _jsx("span", { children: "Redo" })] }), _jsxs("button", { onClick: handleRestore, title: "Restore", children: [_jsx(IconRestore, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "Restore" })] }), _jsxs("button", { onClick: handleNew, title: "New diagram", disabled: readOnly, children: [_jsx(IconNew, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "New" })] })] }), _jsx(ButtonGroup, { "$isFloating": isToolbarFloating, children: _jsxs("button", { onClick: handleAutoAdjust, title: "Auto adjust", children: [_jsx(IconAdjust, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "Auto Adjust" })] }) }), _jsxs(ButtonGroup, { "$isFloating": isToolbarFloating, children: [_jsxs("button", { onClick: handleCopy, disabled: selectedItems.size === 0, title: "Copy", children: [_jsx(IconCopy, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "Copy" })] }), _jsxs("button", { onClick: handleCut, disabled: selectedItems.size === 0, title: "Cut", children: [_jsx(IconCut, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "Cut" })] }), _jsxs("button", { onClick: handlePaste, disabled: copiedItems.length === 0 && copiedConnections.length === 0, title: "Paste", children: [_jsx(IconPaste, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "Paste" })] })] }), _jsxs("button", { onClick: handleToggleToolbarMode, title: isToolbarFloating ? "Dock Toolbar" : "Float Toolbar", children: [isToolbarFloating ? _jsx(IconPin, {}) : _jsx(IconUnpin, {}), !isToolbarCollapsed && !isToolbarFloating && _jsx("span", { children: "Toggle Mode" })] }), !isToolbarFloating && _jsx(ToolbarToggle, { onClick: () => setIsToolbarCollapsed(!isToolbarCollapsed), title: isToolbarCollapsed ? "Expand Toolbar" : "Collapse Toolbar", children: isToolbarCollapsed ? _jsx(IconChevronRight, {}) : _jsx(IconCloseOutline, {}) })] })), !readOnly && (_jsx(ToolboxContainer, { "$isVisible": isToolboxVisible, children: isToolboxVisible && availableItemTypes.map(type => (_jsxs(ToolboxItem, { draggable: true, onDragStart: (e) => handleToolboxDragStart(e, type), onDragEnd: handleToolboxDragEnd, children: [_jsx(DiagramItemSvgContent, { itemType: type, width: 40, height: 40, isToolboxPreview: true }), _jsx("span", { children: DiagramItemTypes[type] })] }, type))) })), _jsx(SvgScrollContainer, { 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, children: _jsxs(ScalableGroup, { "$scale": zoomLevel, "$translateX": translateX, "$translateY": translateY, children: [wfDiagram?.DiagramItems.map(item => (_jsx(DiagramItemComponent, { readOnly: readOnly, 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 }, item.ID))), calculatedConnections.map(connection => {
+                    (_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, children: _jsxs(ScalableGroup, { "$scale": zoomLevel, "$translateX": translateX, "$translateY": translateY, children: [wfDiagram?.DiagramItems.map(item => (_jsx(DiagramItemComponent, { wf: wfDiagram?.Info, readOnly: readOnly, 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 }, 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,5 +1,11 @@
 import React from 'react';
 import { QueryDescriptor } from '@topconsultnpm/sdk-ts-beta';
+import { WorkItemActor } from './RecipientList';
+export declare const tosToActors: (tosString: string) => {
+    andRecipients: WorkItemActor[];
+    orRecipients: WorkItemActor[];
+};
+export declare const actorsToTos: (actors: WorkItemActor[]) => string;
 interface WorkitemRecipientsEditorProps {
     tos: string;
     qd: QueryDescriptor | undefined;

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

@@ -7,7 +7,7 @@ const RecipientsContainer = styled.div `
   gap: 20px;
   flex-wrap: wrap;
 `;
-const tosToActors = (tosString) => {
+export const tosToActors = (tosString) => {
     const andRecipients = [];
     const orRecipients = [];
     if (!tosString)
@@ -40,7 +40,7 @@ const tosToActors = (tosString) => {
     }
     return { andRecipients, orRecipients };
 };
-const actorsToTos = (actors) => {
+export const actorsToTos = (actors) => {
     return actors.map(actor => `${WorkItemActorTypes[actor.ActorType]}|${actor.ActorID}|${actor.Or}`).join(';');
 };
 const WorkitemRecipientsEditor = ({ tos, qd, mTID, onTosChange, onQDChange }) => {

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

@@ -1,4 +1,4 @@
-import { CultureIDs, QueryDescriptor, WFAppTypes, WorkItemSetRules, WorkItemStatus } from "@topconsultnpm/sdk-ts-beta";
+import { CultureIDs, QueryDescriptor, Severities, WFAppTypes, WorkItemSetRules, WorkItemStatus } from "@topconsultnpm/sdk-ts-beta";
 import { MetadataValueDescriptorEx } from "../../../../ts";
 export declare enum DiagramItemTypes {
     None = 0,
@@ -66,7 +66,7 @@ export interface DiagramItem {
     QD?: QueryDescriptor;
     SOD?: string;
     MetadataValues?: MetadataValueDescriptorEx[];
-    Severity?: number;
+    Severity?: Severities;
     RegAsWfInstPart?: number;
     FormatCultureID?: CultureIDs | undefined;
     Tos2?: string;

package/package.json

@@ -1,12 +1,13 @@
 {
     "name": "@topconsultnpm/sdkui-react-beta",
-    "version": "6.16.29",
+    "version": "6.16.31",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "clean": "powershell Remove-Item lib/ -recurse",
         "copy-files": "copyfiles -u 1 src/assets/*.* src/assets/ImageLibrary/*.* src/assets/thumbnails/*.* src/assets/IconsS4t/*.* src/assets/Metadata/*.* src/css/tm-sdkui.css lib/",
         "tm-build": "npm run clean && tsc && npm run copy-files",
+        "tm-watch": "tsc -w",
         "tm-publish": "npm publish",
         "storybook": "storybook dev -p 6006",
         "build-storybook": "storybook build"

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

@@ -1,11 +0,0 @@
-import React from "react";
-import { Colors, ITMEditorBase } from './TMEditorBase';
-interface ITMDropDown extends ITMEditorBase {
-    dataSource?: any[];
-    color?: Colors;
-    value?: string | number;
-    disabled?: boolean;
-    onValueChanged?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
-}
-declare const TMDropDown: React.FC<ITMDropDown>;
-export default TMDropDown;

package/lib/components/base/TMDropDown.js

@@ -1,64 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import styled from 'styled-components';
-import { FontSize } from '../../utils/theme';
-import { getColor } from "../../helper/helpers";
-const StyledDropDownContainer = styled.div.withConfig({ shouldForwardProp: prop => !['labelPosition'].includes(prop) }) `
-    width: ${props => props.width};
-    display: flex;
-    flex-direction: ${props => props.labelPosition === 'left' ? 'row' : 'column'};
-    justify-content: flex-start;
-    align-items: ${props => props.labelPosition === 'left' ? 'center' : 'flex-start'};;
-    position: relative;
-`;
-const StyledDropDown = styled.select.withConfig({ shouldForwardProp: prop => !['flexBase'].includes(prop) }) `
-    width: ${props => props.width};
-    padding: 3px 15px 3px 5px;
-    border: 1px solid;
-    border-color: ${props => !props.disabled ? getColor(props.color) : 'rgb(180,180,180)'};;
-    color: ${props => getColor(props.color)};
-    border-radius: 5px;
-    min-width: 70px;
-    /* &:focus{
-        outline: none;
-    } */
-    font-size: ${props => props.fontSize};
-    flex: ${props => 10 - props.flexBase};
-    &::placeholder {
-        /* color: ${props => getColor(props.color)}; */
-        font-size: ${props => props.fontSize};
-    }
-`;
-const StyledDropDownIcon = styled.div.withConfig({ shouldForwardProp: prop => !['labelPosition'].includes(prop) }) `
-    color: ${props => !props.disabled ? getColor(props.color) : 'rgb(180,180,180)'};
-    width: 25px;
-    height: 25px;
-    margin-right: 2px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 18px;
-    user-select: none;
-`;
-const StyledDropDownLabel = styled.div.withConfig({ shouldForwardProp: prop => !['flexBase'].includes(prop) }) `
-    font-size: ${props => props.fontSize} ;
-    color: ${props => !props.disabled ? getColor(props.color) : 'rgb(180,180,180)'};
-    flex: ${props => props.flexBase};
-    transform: translateY(1px);
-    user-select: none;
-    padding-right: 10px;
-`;
-const TMDropDown = ({ disabled = false, elementStyle, isModifiedWhen, labelPosition = 'left', flexBase = 1, label, icon, width = '100%', fontSize = FontSize.defaultFontSize, dataSource, color = 'primary', value, onValueChanged }) => {
-    const [currentColor, setCurrentColor] = useState(color);
-    useEffect(() => {
-        setCurrentColor(isModifiedWhen ? 'tertiary' : color);
-    }, [isModifiedWhen, color]);
-    const renderedLeftLabelTextBox = () => {
-        return (_jsx("div", { style: { display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-start', width: '100%' }, children: _jsxs(StyledDropDownContainer, { labelPosition: labelPosition, width: width, children: [icon && _jsx(StyledDropDownIcon, { disabled: disabled, labelPosition: labelPosition, color: currentColor, children: icon }), label && _jsx(StyledDropDownLabel, { disabled: disabled, flexBase: flexBase, color: currentColor, fontSize: fontSize, children: label }), _jsx(StyledDropDown, { disabled: disabled, flexBase: flexBase, fontSize: fontSize, width: width, color: currentColor, value: value, onChange: onValueChanged, children: dataSource?.map((data, index) => (_jsx("option", { value: data.value, children: data.display }, index))) })] }) }));
-    };
-    const renderedTopLabelTextBox = () => {
-        return (_jsxs(StyledDropDownContainer, { labelPosition: labelPosition, width: width, children: [_jsx("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: '2px', marginTop: '3px', width: '100%' }, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }, children: [icon && _jsx(StyledDropDownIcon, { disabled: disabled, labelPosition: labelPosition, color: currentColor, children: icon }), label && _jsx(StyledDropDownLabel, { disabled: disabled, flexBase: flexBase, color: currentColor, fontSize: fontSize, children: label })] }) }), _jsx("div", { style: { width: '100%', display: 'flex', flexDirection: 'row', position: 'relative' }, children: _jsx(StyledDropDown, { disabled: disabled, flexBase: flexBase, fontSize: fontSize, width: width, color: currentColor, value: value, onChange: onValueChanged, children: dataSource?.map((data, index) => (_jsx("option", { value: data.value, children: data.display }, index))) }) })] }));
-    };
-    return (_jsx("div", { style: elementStyle, children: labelPosition === 'left' ? renderedLeftLabelTextBox() : renderedTopLabelTextBox() }));
-};
-export default TMDropDown;