@topconsultnpm/sdkui-react 6.20.0-dev1.37 → 6.20.0-dev1.39

package/lib/components/NewComponents/FloatingMenuBar/TMFloatingMenuBar.js

@@ -4,7 +4,7 @@ import { ContextMenu } from '../ContextMenu';
 import ShowAlert from '../../base/TMAlert';
 import TMTooltip from '../../base/TMTooltip';
 import * as S from './styles';
-import { IconApply, IconMenuKebab, IconMenuVertical, IconPencil, IconPin, IconUndo, SDKUI_Globals, SDKUI_Localizator } from '../../../helper';
+import { IconAdd, IconApply, IconMenuVertical, IconPencil, IconPin, IconUndo, SDKUI_Globals, SDKUI_Localizator } from '../../../helper';
 const IconDraggableDots = (props) => (_jsx("svg", { fontSize: 18, viewBox: "0 0 24 24", fill: "currentColor", height: "1em", width: "1em", ...props, children: _jsx("path", { d: "M9 3a2 2 0 11-4 0 2 2 0 014 0zm0 9a2 2 0 11-4 0 2 2 0 014 0zm0 9a2 2 0 11-4 0 2 2 0 014 0zm10-18a2 2 0 11-4 0 2 2 0 014 0zm0 9a2 2 0 11-4 0 2 2 0 014 0zm0 9a2 2 0 11-4 0 2 2 0 014 0z" }) }));
 const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained = false, defaultPosition = { x: 100, y: 100 }, maxItems = 8, }) => {
     const getDefaultConfig = () => ({
@@ -248,6 +248,9 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
         }
         setState(s => ({ ...s, isDragging: true }));
     };
+    const handleGripDoubleClick = () => {
+        toggleOrientation();
+    };
     const handleMouseMove = useCallback((e) => {
         if (!state.isDragging || !containerRef.current || !floatingRef.current)
             return;
@@ -438,7 +441,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
         setState(s => ({ ...s, draggedItemIndex: null }));
         setDragOverIndex(null);
     };
-    return (_jsxs(_Fragment, { children: [_jsx(S.Overlay, { "$visible": state.isConfigMode }), _jsxs(S.FloatingContainer, { ref: floatingRef, "$x": state.position.x, "$y": state.position.y, "$orientation": state.orientation, "$isDragging": state.isDragging, "$isConfigMode": state.isConfigMode, "$isConstrained": isConstrained, children: [_jsx(S.GripHandle, { "$orientation": state.orientation, onMouseDown: handleMouseDown, children: _jsx(IconDraggableDots, {}) }), _jsx(S.Separator, { "$orientation": state.orientation }), state.items.map((item, index) => {
+    return (_jsxs(_Fragment, { children: [_jsx(S.Overlay, { "$visible": state.isConfigMode }), _jsxs(S.FloatingContainer, { ref: floatingRef, "$x": state.position.x, "$y": state.position.y, "$orientation": state.orientation, "$isDragging": state.isDragging, "$isConfigMode": state.isConfigMode, "$isConstrained": isConstrained, children: [_jsx(S.GripHandle, { "$orientation": state.orientation, onMouseDown: handleMouseDown, onDoubleClick: handleGripDoubleClick, children: _jsx(IconDraggableDots, {}) }), _jsx(S.Separator, { "$orientation": state.orientation }), state.items.map((item, index) => {
                         // Get current state (disabled and onClick) from contextMenuItems
                         const currentState = getCurrentItemState(item.id);
                         const isDisabled = currentState.disabled || false;
@@ -456,9 +459,6 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
                                                 currentOnClick();
                                             }
                                         }, disabled: isDisabled, children: item.icon }) })), state.isConfigMode && (_jsx(S.RemoveButton, { onClick: () => removeItem(item.id), children: "\u00D7" }))] }, item.id));
-                    }), !state.isConfigMode && contextMenuItems.length > 0 && (_jsx(ContextMenu, { items: contextMenuItems, trigger: "left", children: _jsx(S.ContextMenuButton, { children: _jsx(IconMenuVertical, {}) }) })), state.isConfigMode && state.items.length < maxItems && contextMenuItems.length > 0 && (_jsx(ContextMenu, { items: getPinContextMenuItems(), trigger: "left", children: _jsx(TMTooltip, { content: SDKUI_Localizator.Add, children: _jsx(S.AddButton, { children: " + " }) }) })), _jsx(S.Separator, { "$orientation": state.orientation }), _jsxs(S.ButtonGroup, { "$orientation": state.orientation, children: [state.isConfigMode ? (_jsx(TMTooltip, { content: SDKUI_Localizator.Undo, position: state.orientation === 'horizontal' ? 'right' : 'top', children: _jsx(S.OrientationToggle, { "$orientation": state.orientation, onClick: handleUndo, disabled: !hasChanges(), children: _jsx(IconUndo, {}) }) })) : (_jsx(TMTooltip, { content: state.orientation === 'horizontal' ? 'Verticale' : 'Orizzontale', position: state.orientation === 'horizontal' ? 'right' : 'top', children: _jsx(S.OrientationToggle, { "$orientation": state.orientation, onClick: toggleOrientation, children: _jsx(IconMenuKebab, {}) }) })), _jsx(S.ConfigButton, { onClick: toggleConfigMode, "$isActive": state.isConfigMode, children: state.isConfigMode ?
-                                    _jsx(TMTooltip, { content: SDKUI_Localizator.ApplyAndClose, position: state.orientation === 'horizontal' ? 'right' : 'top', children: _jsx(IconApply, { fontSize: 18 }) })
-                                    :
-                                        _jsx(TMTooltip, { content: SDKUI_Localizator.Configure, position: state.orientation === 'horizontal' ? 'right' : 'top', children: _jsx(IconPencil, { fontSize: 18 }) }) })] })] })] }));
+                    }), !state.isConfigMode && contextMenuItems.length > 0 && (_jsx(ContextMenu, { items: contextMenuItems, trigger: "left", children: _jsx(S.ContextMenuButton, { children: _jsx(IconMenuVertical, {}) }) })), state.isConfigMode && state.items.length < maxItems && contextMenuItems.length > 0 && (_jsx(ContextMenu, { items: getPinContextMenuItems(), trigger: "left", children: _jsx(TMTooltip, { content: SDKUI_Localizator.Add, children: _jsx(S.AddButton, { children: _jsx(IconAdd, {}) }) }) })), _jsx(S.Separator, { "$orientation": state.orientation }), _jsxs(S.ButtonGroup, { "$orientation": state.orientation, children: [state.isConfigMode && (_jsx(TMTooltip, { content: SDKUI_Localizator.Undo, position: state.orientation === 'horizontal' ? 'right' : 'top', children: _jsx(S.UndoButton, { onClick: handleUndo, disabled: !hasChanges(), children: _jsx(IconUndo, { fontSize: 18 }) }) })), state.isConfigMode ? (_jsx(TMTooltip, { content: state.items.length === 0 ? 'Devi aggiungere almeno un item' : SDKUI_Localizator.ApplyAndClose, position: state.orientation === 'horizontal' ? 'right' : 'top', children: _jsx(S.ApplyButton, { onClick: toggleConfigMode, disabled: state.items.length === 0, children: _jsx(IconApply, { fontSize: 20 }) }) })) : (_jsx(TMTooltip, { content: SDKUI_Localizator.Configure, position: state.orientation === 'horizontal' ? 'right' : 'top', children: _jsx(S.ConfigButton, { onClick: toggleConfigMode, children: _jsx(IconPencil, {}) }) }))] })] })] }));
 };
 export default TMFloatingMenuBar;

package/lib/components/NewComponents/FloatingMenuBar/styles.d.ts

@@ -27,9 +27,8 @@ export declare const Separator: import("styled-components/dist/types").IStyledCo
 export declare const MenuButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
     $isActive?: boolean;
 }>> & string;
-export declare const ConfigButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
-    $isActive?: boolean;
-}>> & string;
+export declare const ConfigButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const ApplyButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
 export declare const ContextMenuButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$isActive"> & {
     $isActive?: boolean;
 }, "ref"> & {
@@ -37,9 +36,7 @@ export declare const ContextMenuButton: import("styled-components/dist/types").I
 }, never>> & string;
 export declare const AddButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
 export declare const RemoveButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
-export declare const OrientationToggle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
-    $orientation: "horizontal" | "vertical";
-}>> & string;
+export declare const UndoButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
 export declare const DraggableItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $isDragging: boolean;
     $isDragOver: boolean;

package/lib/components/NewComponents/FloatingMenuBar/styles.js

@@ -140,29 +140,68 @@ export const ConfigButton = styled.button `
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 20px;
-  height: 20px;
+  width: 21px;
+  height: 21px;
   background: transparent;
   border: none;
   border-radius: 4px;
-  color: ${props => props.$isActive ? 'rgba(255, 255, 255, 0.8)' : 'rgba(255, 255, 255, 0.5)'};
+  color: rgba(255, 255, 255, 0.5);
   font-size: 10px;
   cursor: pointer;
   transition: all 0.2s ease;
-  padding: 0px;
+  padding: 4px;
 
-  &:hover {
+  &:hover:not(:disabled) {
     background: rgba(255, 255, 255, 0.1);
     color: rgba(255, 255, 255, 0.8);
   }
 
-  &:active {
+  &:active:not(:disabled) {
     transform: scale(0.9);
   }
 
+  &:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+
   svg {
-    width: 14px;
-    height: 14px;
+    width: 16px;
+    height: 16px;
+  }
+`;
+export const ApplyButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  color: rgba(34, 197, 94, 1);
+  font-size: 10px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  padding: 3px;
+
+  &:hover:not(:disabled) {
+    background: rgba(255, 255, 255, 0.1);
+    color: rgba(34, 197, 94, 1);
+  }
+
+  &:active:not(:disabled) {
+    transform: scale(0.9);
+  }
+
+  &:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+
+  svg {
+    width: 20px;
+    height: 20px;
   }
 `;
 export const ContextMenuButton = styled(MenuButton) `
@@ -182,16 +221,17 @@ export const AddButton = styled.button `
   color: white;
   font-size: 20px;
   font-weight: bold;
+  line-height: 0;
   cursor: pointer;
   transition: all 0.2s ease;
   position: relative;
   margin-right: 6px;
   margin-left: 8px;
+  padding: 0;
 
   &:hover {
     background: rgba(255, 255, 255, 0.25);
     border-color: rgba(255, 255, 255, 0.6);
-    transform: scale(1.05);
   }
 
   &:active {
@@ -210,7 +250,7 @@ export const RemoveButton = styled.button `
   color: white;
   font-size: 14px;
   font-weight: bold;
-  line-height: 1;
+  line-height: 0;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -227,29 +267,28 @@ export const RemoveButton = styled.button `
     background: #b91c1c;
   }
 `;
-export const OrientationToggle = styled.button `
+export const UndoButton = styled.button `
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 20px;
-  height: 20px;
+  width: 24px;
+  height: 24px;
   background: transparent;
   border: none;
   border-radius: 4px;
-  color: rgba(255, 255, 255, 0.5);
+  color: rgba(249, 115, 22, 1);
   font-size: 10px;
   cursor: pointer;
   transition: all 0.2s ease;
   padding: 2px;
-  transform: ${props => props.$orientation === 'horizontal' ? 'rotate(90deg)' : 'rotate(0deg)'};
 
   &:hover:not(:disabled) {
     background: rgba(255, 255, 255, 0.1);
-    color: rgba(255, 255, 255, 0.8);
+    color: rgba(249, 115, 22, 1);
   }
 
   &:active:not(:disabled) {
-    transform: ${props => props.$orientation === 'horizontal' ? 'rotate(90deg) scale(0.9)' : 'scale(0.9)'};
+    transform: scale(0.9);
   }
 
   &:disabled {
@@ -258,8 +297,8 @@ export const OrientationToggle = styled.button `
   }
 
   svg {
-    width: 14px;
-    height: 14px;
+    width: 16px;
+    height: 16px;
   }
 `;
 export const DraggableItem = styled.div `
@@ -301,7 +340,7 @@ export const ContextMenuWrapper = styled.div `
 `;
 export const ButtonGroup = styled.div `
   display: flex;
-  flex-direction: ${props => props.$orientation === 'horizontal' ? 'column' : 'row'};
+  flex-direction: row;
   align-items: center;
-  gap: ${props => props.$orientation === 'horizontal' ? '0px' : '4px'};
+  gap: 0;
 `;

package/lib/components/choosers/TMMetadataChooser.js

@@ -13,8 +13,15 @@ import TMChooserForm from '../forms/TMChooserForm';
 import TMSpinner from '../base/TMSpinner';
 const TMMetadataChooser = ({ tmSession, dataSource, showEditButton = true, buttons = [], disabled, validationItems, getColorIndex, showCompleteMetadataName, qdShowOnlySelectItems, borderRadius = '4px', fontSize = FontSize.defaultFontSize, backgroundColor, openEditorOnSummaryClick, showBorder = true, showId = false, elementStyle, allowMultipleSelection, allowSysMetadata, showSysMetadataDirectly, value, values, isModifiedWhen, tids, label, width, height, showClearButton, qd, placeHolder, filterMetadata, onValueChanged }) => {
     const [showChooser, setShowChooser] = useState(false);
+    const getinputMd = () => {
+        if (values && values.length > 0 && values[0].mid && values[0].mid < 0) {
+            let md = dataSource?.find((md) => md.id === values[0].mid);
+            return md;
+        }
+        return undefined;
+    };
     const renderTemplate = useMemo(() => {
-        return (_jsxs(StyledDivHorizontal, { style: { width: 'max-content', height: '100%' }, children: [values && _jsx(TMMidViewer, { tmSession: tmSession, tid_mid: values[0], showIcon: true, showId: showId, showCompleteName: showCompleteMetadataName }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` }), (values == undefined || values.length == 0) && _jsx("p", { children: placeHolder })] }));
+        return (_jsxs(StyledDivHorizontal, { style: { width: 'max-content', height: '100%' }, children: [values && values.length > 0 && values[0].mid && values[0].mid > 0 && _jsx(TMMidViewer, { tmSession: tmSession, tid_mid: values[0], showIcon: true, showId: showId, showCompleteName: showCompleteMetadataName }), values && values.length > 0 && values[0].mid && values[0].mid < 0 && _jsx(TMMidViewer, { tmSession: tmSession, tid_mid: values[0], inputMd: getinputMd(), showIcon: true, showId: showId, showCompleteName: showCompleteMetadataName }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` }), (values == undefined || values.length == 0) && _jsx("p", { children: placeHolder })] }));
     }, [values, tmSession, showId, showCompleteMetadataName, placeHolder]);
     return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { label: label, width: width, height: height, disabled: disabled, validationItems: validationItems, backgroundColor: backgroundColor, buttons: buttons, placeHolder: placeHolder, fontSize: fontSize, showBorder: showBorder, borderRadius: borderRadius, hasValue: values && values.length > 0, showClearButton: showClearButton, showEditButton: showEditButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), openEditorOnSummaryClick: openEditorOnSummaryClick, onEditorClick: () => !disabled && setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, template: renderTemplate, onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined }), showChooser &&
                 _jsx(TMMetadataChooserForm, { tmSession: tmSession, allowMultipleSelection: allowMultipleSelection, height: '500px', width: '600px', allowSysMetadata: allowSysMetadata, showSysMetadataDirectly: showSysMetadataDirectly, getColorIndex: getColorIndex, dataSource: dataSource, tids: tids, qd: qd, qdShowOnlySelectItems: qdShowOnlySelectItems, filterMetadata: filterMetadata, selectedIDs: values, onClose: () => setShowChooser(false), onChoose: (tid_mids) => { onValueChanged?.(tid_mids); } })] }));

package/lib/components/features/documents/TMDcmtForm.js

@@ -8,7 +8,7 @@ import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
 import { useDcmtOperations } from '../../../hooks/useDcmtOperations';
 import { useRelatedDocuments } from '../../../hooks/useRelatedDocuments';
 import { getWorkItemSetIDAsync, handleArchiveVisibility, searchResultToMetadataValues } from '../../../helper/queryHelper';
-import { genUniqueId, IconShow, SDKUI_Localizator, updateMruTids, IconBoard, IconDcmtTypeSys, IconDetailDcmts, IconDownload, calcIsModified, IconMenuVertical, Globalization, getListMaxItems, getSystemMetadata, IconBoxArchiveIn, IconClear, IconUndo, SDKUI_Globals, IconPreview, isTaskMoreInfo, IconWorkflow, IconSearch, deepCompare, IconCheck, IconActivity, TMImageLibrary, IconStar, IconRelation, IconInfo, IconArchiveDoc, IconDelete, IconPair, IconUnpair, IconArchiveMaster, IconArchiveDetail, getDcmtCicoStatus, IconFileDots } from '../../../helper';
+import { genUniqueId, IconShow, SDKUI_Localizator, updateMruTids, IconBoard, IconDcmtTypeSys, IconDetailDcmts, IconDownload, calcIsModified, IconMenuVertical, Globalization, getListMaxItems, getSystemMetadata, IconBoxArchiveIn, IconClear, IconUndo, SDKUI_Globals, IconPreview, isTaskMoreInfo, IconWorkflow, IconSearch, deepCompare, IconCheck, IconActivity, TMImageLibrary, IconStar, IconRelation, IconInfo, IconArchiveDoc, IconDelete, IconPair, IconUnpair, IconArchiveMaster, IconArchiveDetail, getDcmtCicoStatus, IconFileDots, IconCustom } from '../../../helper';
 import { hasDetailRelations, hasMasterRelations, isXMLFileExt } from '../../../helper/dcmtsHelper';
 import { Gutters, TMColors } from '../../../utils/theme';
 import { StyledFormButtonsContainer, StyledLoadingContainer, StyledModalContainer, StyledReferenceButton, StyledSpinner, StyledToolbarCardContainer } from '../../base/Styled';
@@ -733,7 +733,7 @@ const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTa
                 onClick: () => setCustomButton(customButton)
             }));
             customButtonsItems && customButtonsItems.length > 0 && items.push({
-                icon: _jsx(IconCheck, {}),
+                icon: _jsx(IconCustom, {}),
                 name: SDKUI_Localizator.CustomButtons,
                 submenu: customButtonsItems
             });

package/lib/components/features/search/TMSearchResult.js

@@ -3,7 +3,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { SDK_Globals, DataColumnTypes, MetadataDataDomains, DataListViewModes, MetadataFormats, LayoutModes, TemplateTIDs, DcmtTypeListCacheService, SystemMIDsAsNumber, RetrieveFileOptions, DcmtOpers, GeneralRetrieveFormats, AccessLevelsEx, LayoutCacheService, UserListCacheService } from '@topconsultnpm/sdk-ts';
 import styled from 'styled-components';
 import { getAllFieldSelectedDcmtsOrFocused, getCommandsMenuItems, getSelectedDcmtsOrFocused } from './TMSearchResultsMenuItems';
-import { genUniqueId, IconShow, IconBoard, IconDcmtTypeSys, SDKUI_Localizator, IconDelete, IconRefresh, IconMenuVertical, deepCompare, generateUniqueColumnKeys, searchResultDescriptorToSimpleArray, searchResultToMetadataValues, IconSearchCheck, IconCheck, TMImageLibrary, convertSearchResultDescriptorToFileItems } from '../../../helper';
+import { genUniqueId, IconShow, IconBoard, IconDcmtTypeSys, SDKUI_Localizator, IconDelete, IconRefresh, IconMenuVertical, deepCompare, generateUniqueColumnKeys, searchResultDescriptorToSimpleArray, searchResultToMetadataValues, IconSearchCheck, TMImageLibrary, convertSearchResultDescriptorToFileItems, IconCustom } from '../../../helper';
 import { useDcmtOperations } from '../../../hooks/useDcmtOperations';
 import { useInputAttachmentsDialog, useInputCvtFormatDialog } from '../../../hooks/useInputDialog';
 import { useRelatedDocuments } from '../../../hooks/useRelatedDocuments';
@@ -365,7 +365,7 @@ const TMSearchResult = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, a
             onClick: () => setCustomButton(customButton)
         }));
         return customButtonsItems && customButtonsItems.length > 0 ? {
-            icon: _jsx(IconCheck, {}),
+            icon: _jsx(IconCustom, {}),
             name: SDKUI_Localizator.CustomButtons,
             submenu: customButtonsItems
         } : {};

package/lib/components/features/search/TMSignSettingsForm.js

@@ -333,7 +333,7 @@ const TMSignSettingsForm = (props) => {
                         fontWeight: 'bold',
                         color: isModified ? MODIFIED_COLOR : '#777',
                         transition: 'opacity 0.2s ease'
-                    }, onMouseEnter: (e) => { e.currentTarget.style.opacity = '0.9'; }, onMouseLeave: (e) => { e.currentTarget.style.opacity = '0.5'; }, children: "\u00D7" })] }));
+                    }, onMouseEnter: (e) => { e.currentTarget.style.opacity = '0.9'; }, onMouseLeave: (e) => { e.currentTarget.style.opacity = '0.5'; }, children: _jsx("i", { className: "dx-icon-close" }) })] }));
     };
     const renderMultiSignerTag = (tagData) => {
         const handleRemoveTag = () => {

package/lib/helper/TMIcons.d.ts

@@ -275,4 +275,5 @@ export declare function IconUnpair(props: React.SVGProps<SVGSVGElement>): import
 export declare function IconCtrlWorkflow(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
 export declare function IconBackhandIndexPointingRight(props: Readonly<React.SVGProps<SVGSVGElement>>): import("react/jsx-runtime").JSX.Element;
 export declare function IconMoveToFolder(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
+export declare function IconCustom(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
 export { Icon123, IconABC, IconAccessPoint, IconAddressBook, IconSignCert, IconServerService, IconActivity, IconActivityLog, IconAdd, IconAddCircleOutline, IconAll, IconApply, IconApplyAndClose, IconArchive, IconArchiveDoc, IconArrowDown, IconArrowLeft, IconArrowRight, IconArrowUp, IconAtSign, IconAttachment, IconAutoConfig, IconBackward, IconBasket, IconBoard, IconBoxArchiveIn, IconBxInfo, IconBxLock, IconCalendar, IconCloseCircle, IconCloseOutline, IconCloud, IconCircleInfo, IconClear, IconColumns, IconCommand, IconCopy, IconCount, IconCrown, IconDashboard, IconDcmtType, IconDcmtTypeOnlyMetadata, IconDcmtTypeSys, IconDelete, IconDetails, IconDown, IconDownload, IconDotsVerticalCircleOutline, IconDuplicate, IconEdit, IconEqual, IconEqualNot, IconEraser, IconExpandRight, IconExport, IconFastBackward, IconFoldeAdd, IconFolderSearch, IconFolderZip, IconFastForward, IconFastSearch, IconFileDots, IconFilter, IconForceStop, IconForward, IconFreeze, IconFreeSearch, IconGreaterThan, IconGreaterThanOrEqual, IconHistory, IconImport, IconTag, IconInfo, IconInsertAbove, IconInsertBelow, IconHeart, IconHide, IconLanguage, IconLeft, IconLessThan, IconLessThanOrEqual, IconLock, IconLockClosed, IconLogin, IconLink, IconLogout, IconMail, IconMapping, IconMic, IconMenuHorizontal, IconMenuKebab, IconMenuVertical, IconMetadata, IconMetadata_Computed, IconMetadata_DataList, IconMetadata_Date, IconMetadata_DynamicDataList, IconMetadata_Numerator, IconMetadata_Numeric, IconMetadata_Special, IconMetadata_Text, IconMetadata_User, IconMonitor, IconOpenInNew, IconNotification, IconPassword, IconPencil, IconPlatform, IconPlay, IconPreview, IconPrinter, IconPrintOutline, IconProcess, IconProgressAbortRequested, IconProgressCompleted, IconProgressNotCompleted, IconProgressReady, IconProgressRunning, IconProgressStarted, IconRefresh, IconReset, IconRecentlyViewed, IconRight, IconSave, IconSearch, IconSelected, IconSettings, IconShow, IconSort, IconStop, IconStopwatch, IconSuccess, IconAlarmPlus, IconHourglass, IconNone, IconNotStarted, IconProgress, IconSuccessCirlce, IconSuitcase, IconSupport, IconUndo, IconUnFreeze, IconUp, IconUpdate, IconUpload, IconUser, IconUserProfile, IconVisible, IconWarning, IconWeb, IconWifi, IconWindowMaximize, IconWindowMinimize, IconWorkflow, IconWorkspace, IconUserGroup, IconUserGroupOutline, IconUserLevelMember, IconUserLevelAdministrator, IconUserLevelSystemAdministrator, IconUserLevelAutonomousAdministrator, IconDraggabledots, IconRelation, IconEasy, IconSum, IconDisk, IconDataList, IconPalette, IconFormatPageSplit, IconPaste, IconFileSearch, IconStar, IconStarRemove, IconSearchCheck, IconLightningFill, IconArrowUnsorted, IconArrowSortedUp, IconArrowSortedDown, IconConvertFilePdf, IconExportTo, IconSharedDcmt, IconShare, IconBatchUpdate, IconCheckFile, IconStatistics, IconSubstFile, IconAdvanced, IconSync, IconSavedQuery, IconSignature, IconSignaturePencil, IconRecursiveOps, IconCheckIn, IconTree, IconGrid, IconList, IconFolder, IconFolderOpen, IconFactory, IconTest, IconCheck, IconUncheck, IconSortAsc, IconSortDesc, IconRoundFileUpload, IconSortAscLetters, IconSortDescLetters, IconRotate, IconSortAscNumbers, IconSortDescNumbers, IconSortAscClock, IconSortDescClock, IconLayerGroup, IconBell, IconBellCheck, IconBellOutline, IconBellCheckOutline, IconEnvelopeOpenText, IconChangeUser, IconUserCheck, IconRelationManyToMany, IconRelationOneToMany, IconUserExpired, IconKey, IconZoomInLinear, IconZoomOutLinear, IconMenuCAWorkingGroups, IconCADossier, IconMenuCACaseflow, IconMenuDashboard, IconMenuCAAreas, IconMenuTask, IconMenuSearch, IconMenuFullTextSearch, IconMenuFavourite, IconSAPLogin, IconSAPLogin2, IconView, IconNewSignature };

package/lib/helper/TMIcons.js

@@ -687,4 +687,7 @@ export function IconBackhandIndexPointingRight(props) {
 export function IconMoveToFolder(props) {
     return (_jsx("svg", { fontSize: props.fontSize ?? FONTSIZE, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 28 28", width: "1em", height: "1em", ...props, children: _jsx("path", { d: "M21.5 15a5.5 5.5 0 1 1 0 11a5.5 5.5 0 0 1 0-11zM10.207 4c.46 0 .908.141 1.284.402l.156.12L14.022 6.5h9.728a2.25 2.25 0 0 1 2.229 1.938l.016.158l.005.154v7.06a6.518 6.518 0 0 0-1.499-1.077L24.5 8.75a.75.75 0 0 0-.648-.743L23.75 8h-9.729l-2.374 1.978a2.25 2.25 0 0 1-1.244.513l-.196.009l-6.707-.001V21.75c0 .38.282.693.648.743l.102.007h11.064a6.47 6.47 0 0 0 .709 1.501L4.25 24a2.25 2.25 0 0 1-2.245-2.096L2 21.75V6.25a2.25 2.25 0 0 1 2.096-2.245L4.25 4h5.957zm11.585 13.545l-.076.044l-.07.057l-.057.07a.5.5 0 0 0 0 .568l.057.07l1.646 1.645l-4.798.001l-.09.008a.5.5 0 0 0-.402.402l-.008.09l.008.09a.5.5 0 0 0 .402.402l.09.008l4.8-.001l-1.648 1.647l-.057.07a.5.5 0 0 0 .695.695l.07-.057l2.535-2.541l.031-.042l.042-.08l.026-.083l.01-.064l-.002-.11l-.008-.042l-.026-.083l-.042-.08l-.037-.05l-2.53-2.533l-.069-.057a.5.5 0 0 0-.492-.044zM10.207 5.5H4.25a.75.75 0 0 0-.743.648L3.5 6.25v2.749L10.207 9a.75.75 0 0 0 .395-.113l.085-.06l1.891-1.578l-1.89-1.575a.75.75 0 0 0-.377-.167l-.104-.007z", fill: "currentColor", fillRule: "nonzero" }) }));
 }
+export function IconCustom(props) {
+    return (_jsx("svg", { fontSize: props.fontSize ?? FONTSIZE, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "1em", height: "1em", ...props, children: _jsx("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeMiterlimit: "10", strokeWidth: "1.5", d: "M14 17h6m-3 3v-6M5.6 4h2.8A1.6 1.6 0 0 1 10 5.6v2.8A1.6 1.6 0 0 1 8.4 10H5.6A1.6 1.6 0 0 1 4 8.4V5.6A1.6 1.6 0 0 1 5.6 4m0 10h2.8a1.6 1.6 0 0 1 1.6 1.6v2.8A1.6 1.6 0 0 1 8.4 20H5.6A1.6 1.6 0 0 1 4 18.4v-2.8A1.6 1.6 0 0 1 5.6 14m10-10h2.8A1.6 1.6 0 0 1 20 5.6v2.8a1.6 1.6 0 0 1-1.6 1.6h-2.8A1.6 1.6 0 0 1 14 8.4V5.6A1.6 1.6 0 0 1 15.6 4" }) }));
+}
 export { Icon123, IconABC, IconAccessPoint, IconAddressBook, IconSignCert, IconServerService, IconActivity, IconActivityLog, IconAdd, IconAddCircleOutline, IconAll, IconApply, IconApplyAndClose, IconArchive, IconArchiveDoc, IconArrowDown, IconArrowLeft, IconArrowRight, IconArrowUp, IconAtSign, IconAttachment, IconAutoConfig, IconBackward, IconBasket, IconBoard, IconBoxArchiveIn, IconBxInfo, IconBxLock, IconCalendar, IconCloseCircle, IconCloseOutline, IconCloud, IconCircleInfo, IconClear, IconColumns, IconCommand, IconCopy, IconCount, IconCrown, IconDashboard, IconDcmtType, IconDcmtTypeOnlyMetadata, IconDcmtTypeSys, IconDelete, IconDetails, IconDown, IconDownload, IconDotsVerticalCircleOutline, IconDuplicate, IconEdit, IconEqual, IconEqualNot, IconEraser, IconExpandRight, IconExport, IconFastBackward, IconFoldeAdd, IconFolderSearch, IconFolderZip, IconFastForward, IconFastSearch, IconFileDots, IconFilter, IconForceStop, IconForward, IconFreeze, IconFreeSearch, IconGreaterThan, IconGreaterThanOrEqual, IconHistory, IconImport, IconTag, IconInfo, IconInsertAbove, IconInsertBelow, IconHeart, IconHide, IconLanguage, IconLeft, IconLessThan, IconLessThanOrEqual, IconLock, IconLockClosed, IconLogin, IconLink, IconLogout, IconMail, IconMapping, IconMic, IconMenuHorizontal, IconMenuKebab, IconMenuVertical, IconMetadata, IconMetadata_Computed, IconMetadata_DataList, IconMetadata_Date, IconMetadata_DynamicDataList, IconMetadata_Numerator, IconMetadata_Numeric, IconMetadata_Special, IconMetadata_Text, IconMetadata_User, IconMonitor, IconOpenInNew, IconNotification, IconPassword, IconPencil, IconPlatform, IconPlay, IconPreview, IconPrinter, IconPrintOutline, IconProcess, IconProgressAbortRequested, IconProgressCompleted, IconProgressNotCompleted, IconProgressReady, IconProgressRunning, IconProgressStarted, IconRefresh, IconReset, IconRecentlyViewed, IconRight, IconSave, IconSearch, IconSelected, IconSettings, IconShow, IconSort, IconStop, IconStopwatch, IconSuccess, IconAlarmPlus, IconHourglass, IconNone, IconNotStarted, IconProgress, IconSuccessCirlce, IconSuitcase, IconSupport, IconUndo, IconUnFreeze, IconUp, IconUpdate, IconUpload, IconUser, IconUserProfile, IconVisible, IconWarning, IconWeb, IconWifi, IconWindowMaximize, IconWindowMinimize, IconWorkflow, IconWorkspace, IconUserGroup, IconUserGroupOutline, IconUserLevelMember, IconUserLevelAdministrator, IconUserLevelSystemAdministrator, IconUserLevelAutonomousAdministrator, IconDraggabledots, IconRelation, IconEasy, IconSum, IconDisk, IconDataList, IconPalette, IconFormatPageSplit, IconPaste, IconFileSearch, IconStar, IconStarRemove, IconSearchCheck, IconLightningFill, IconArrowUnsorted, IconArrowSortedUp, IconArrowSortedDown, IconConvertFilePdf, IconExportTo, IconSharedDcmt, IconShare, IconBatchUpdate, IconCheckFile, IconStatistics, IconSubstFile, IconAdvanced, IconSync, IconSavedQuery, IconSignature, IconSignaturePencil, IconRecursiveOps, IconCheckIn, IconTree, IconGrid, IconList, IconFolder, IconFolderOpen, IconFactory, IconTest, IconCheck, IconUncheck, IconSortAsc, IconSortDesc, IconRoundFileUpload, IconSortAscLetters, IconSortDescLetters, IconRotate, IconSortAscNumbers, IconSortDescNumbers, IconSortAscClock, IconSortDescClock, IconLayerGroup, IconBell, IconBellCheck, IconBellOutline, IconBellCheckOutline, IconEnvelopeOpenText, IconChangeUser, IconUserCheck, IconRelationManyToMany, IconRelationOneToMany, IconUserExpired, IconKey, IconZoomInLinear, IconZoomOutLinear, IconMenuCAWorkingGroups, IconCADossier, IconMenuCACaseflow, IconMenuDashboard, IconMenuCAAreas, IconMenuTask, IconMenuSearch, IconMenuFullTextSearch, IconMenuFavourite, IconSAPLogin, IconSAPLogin2, IconView, IconNewSignature };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@topconsultnpm/sdkui-react",
-  "version": "6.20.0-dev1.37",
+  "version": "6.20.0-dev1.39",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",