@topconsultnpm/sdkui-react-beta 6.11.112 → 6.11.115

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

@@ -1,12 +1,3 @@
-export interface TMWGsDraftThumbViewItemProps {
-    item: FileItem;
-    isSelected: boolean;
-    showId: boolean;
-    onClick: (id: number) => void;
-    onDoubleClick?: (file: FileItem) => void;
-    handleSelectedFiles?: (fileItems: Array<FileItem>) => void;
-    handleFocusedFile?: (fileItem: FileItem | undefined) => void;
-}
 export interface TMFileManagerContextMenuItem {
     text: string;
     icon: string;
@@ -51,6 +42,8 @@ export declare enum TMFileManagerPageSize {
     Large = 100
 }
 export interface TMFileManagerProps {
+    /** Session User ID */
+    userID: number;
     /** Determines the view mode of the file manager (Can be either 'thumbnails' or 'details') */
     viewMode?: 'thumbnails' | 'details';
     /** Represents the file system tree structure */
@@ -76,8 +69,6 @@ export interface TMFileManagerProps {
     onDoubleClickHandler?: (fileItem: FileItem | undefined) => void;
     /** Callback for handling drop file */
     handleDropFileCallback?: (files: Array<File>) => void;
-    /** JSX element representing the thumbnail view item for a file or folder */
-    thumbnailsViewItemComponent?: (props: TMWGsDraftThumbViewItemProps) => JSX.Element;
     /** Number of total founded */
     dcmtsFound?: number;
 }

package/lib/components/base/TMFileManager.js

@@ -11,6 +11,7 @@ import TMDataGrid from './TMDataGrid';
 import { TMSplitterLayout } from './TMLayout';
 import { DeviceType, useDeviceType } from './TMDeviceProvider';
 import TMToolbarCard from './TMToolbarCard';
+import { TMFileManagerThumbnailItems } from './TMFileManagerThumbnailItems';
 export var TMFileManagerPageSize;
 (function (TMFileManagerPageSize) {
     TMFileManagerPageSize[TMFileManagerPageSize["Small"] = 30] = "Small";
@@ -19,7 +20,7 @@ export var TMFileManagerPageSize;
 })(TMFileManagerPageSize || (TMFileManagerPageSize = {}));
 const TMFileManager = (props) => {
     // Destructure the treeFs prop to get the root file system
-    const { treeFs, selectedFolder, selectedFiles, focusedFile, handleSelectedFiles, handleFocusedFile, handleSelectedFolder, viewMode: initialViewMode, contextMenuItems, onDoubleClickHandler, thumbnailsViewItemComponent, handleDropFileCallback, dcmtsFound } = props;
+    const { treeFs, selectedFolder, selectedFiles, focusedFile, userID, handleSelectedFiles, handleFocusedFile, handleSelectedFolder, viewMode: initialViewMode, contextMenuItems, onDoubleClickHandler, handleDropFileCallback, dcmtsFound } = props;
     // State to manage the current view mode ('thumbnails' or 'details')
     const [viewMode, setViewMode] = useState(initialViewMode ?? 'thumbnails');
     // State to store the search text entered by the user
@@ -204,11 +205,20 @@ const TMFileManager = (props) => {
                             display: "flex",
                             flexGrow: 1,
                             height: "calc(100% - 40px)"
-                        }, children: _jsxs(TMSplitterLayout, { direction: 'horizontal', showSeparator: true, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: [isLeftPanelCollapsed ? '0%' : "50%", isLeftPanelCollapsed ? '100%' : "50%"], children: [_jsxs("div", { style: { height: "100%", width: "100%" }, onContextMenu: onTreeViewContextMenu, children: [_jsx(TreeView, { style: { marginTop: "10px" }, dataSource: treeViewData, displayExpr: "text", itemRender: renderTreeViewItem, onItemClick: handleTreeViewItemClick }), treeViewAnchor && _jsx(ContextMenu, { id: 'treeViewContextMenuDesktop', dataSource: menuItems.folder, target: treeViewAnchor, onHiding: closeTreeViewContextMenu })] }), _jsxs("div", { style: { backgroundColor: "#fff", width: "100%", height: "100%" }, children: [_jsxs(Toolbar, { style: { backgroundColor: '#f4f4f4', height: "40px", paddingLeft: "5px", paddingRight: '5px' }, children: [_jsx(ToolbarItem, { location: "before", children: _jsx(TMButton, { caption: viewMode === 'details' ? SDKUI_Localizator.PreviewView : SDKUI_Localizator.DetailsView, btnStyle: 'toolbar', color: 'primaryOutline', icon: viewMode === 'details' ? _jsx(IconDashboard, {}) : _jsx(IconList, {}), onClick: toggleViewMode }) }), _jsx(ToolbarItem, { location: "before", children: _jsx(TMSearchBar, { marginLeft: '0px', maxWidth: '160px', searchValue: searchText, onSearchValueChanged: (e) => handleSearchChange(e) }) })] }), _jsxs("div", { onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onContextMenu: onViewContextMenu, style: { width: "100%", height: "calc(100% - 40px)", border: isDragging ? '2px solid red' : '2px solid transparent' }, children: [viewMode === 'thumbnails' && _jsx(ThumbnailsView, { items: filteredFileItems, selectedFiles: selectedFiles, contextMenuItems: menuItems.file, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler, thumbnailsViewItemComponent: thumbnailsViewItemComponent }), viewMode === 'details' && _jsx(DetailsView, { items: filteredFileItems, contextMenuItems: menuItems.file, selectedFiles: selectedFiles, focusedFile: focusedFile, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler }), viewAnchor && _jsx(ContextMenu, { id: 'fileContextMenuDesktop', dataSource: menuItems.file, target: viewAnchor, onHiding: closeViewContextMenu })] })] })] }, "TMWGs-panels-treeView") })] }), isMobile && _jsx("div", { style: { height: "100%", width: "100%" }, children: _jsxs(TMToolbarCard, { onBack: openDraftList ? onBackCallback : undefined, title: SDKUI_Localizator.Drafts, totalItems: dcmtsFound ?? 0, children: [_jsxs("div", { style: { display: openDraftList ? 'none' : 'block', transition: 'opacity 0.3s ease-in-out' }, children: [_jsx(TreeView, { style: { marginTop: "10px", }, dataSource: treeViewData, displayExpr: "text", itemRender: renderTreeViewItem, onItemClick: handleTreeViewItemClick }), treeViewAnchor && _jsx(ContextMenu, { id: 'treeViewContextMenuMobile', dataSource: menuItems.folder, target: treeViewAnchor, onHiding: closeTreeViewContextMenu })] }), _jsxs("div", { style: { backgroundColor: "#fff", width: "100%", height: "100%", display: openDraftList ? 'block' : 'none', transition: 'opacity 0.3s ease-in-out' }, children: [_jsxs(Toolbar, { style: { backgroundColor: '#f4f4f4', height: "40px", paddingLeft: "5px", paddingRight: '5px' }, children: [_jsx(ToolbarItem, { location: "before", children: _jsx(TMButton, { caption: viewMode === 'details' ? SDKUI_Localizator.PreviewView : SDKUI_Localizator.DetailsView, btnStyle: 'toolbar', color: 'primaryOutline', icon: viewMode === 'details' ? _jsx(IconDashboard, {}) : _jsx(IconList, {}), onClick: toggleViewMode }) }), _jsx(ToolbarItem, { location: "before", children: _jsx(TMSearchBar, { marginLeft: '0px', maxWidth: '160px', searchValue: searchText, onSearchValueChanged: (e) => handleSearchChange(e) }) })] }), _jsxs("div", { onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onContextMenu: onViewContextMenu, style: { width: "100%", height: "calc(100% - 40px)", border: isDragging ? '2px solid red' : '2px solid transparent' }, children: [viewMode === 'thumbnails' && _jsx(ThumbnailsView, { items: filteredFileItems, selectedFiles: selectedFiles, contextMenuItems: contextMenuItems?.file, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler, thumbnailsViewItemComponent: thumbnailsViewItemComponent }), viewMode === 'details' && _jsx(DetailsView, { items: filteredFileItems, contextMenuItems: contextMenuItems?.file, selectedFiles: selectedFiles, focusedFile: focusedFile, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler }), viewAnchor && _jsx(ContextMenu, { id: 'fileViewContextMenuMobile', dataSource: menuItems.file, target: viewAnchor, onHiding: closeViewContextMenu })] })] })] }) })] });
+                        }, children: _jsxs(TMSplitterLayout, { direction: 'horizontal', showSeparator: true, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: [isLeftPanelCollapsed ? '0%' : "50%", isLeftPanelCollapsed ? '100%' : "50%"], children: [_jsxs("div", { style: { height: "100%", width: "100%" }, onContextMenu: onTreeViewContextMenu, children: [_jsx(TreeView, { style: { marginTop: "10px" }, dataSource: treeViewData, displayExpr: "text", itemRender: renderTreeViewItem, onItemClick: handleTreeViewItemClick }), treeViewAnchor && _jsx(ContextMenu, { id: 'treeViewContextMenuDesktop', dataSource: menuItems.folder, target: treeViewAnchor, onHiding: closeTreeViewContextMenu })] }), _jsxs("div", { style: { backgroundColor: "#fff", width: "100%", height: "100%" }, children: [_jsxs(Toolbar, { style: { backgroundColor: '#f4f4f4', height: "40px", paddingLeft: "5px", paddingRight: '5px' }, children: [_jsx(ToolbarItem, { location: "before", children: _jsx(TMButton, { caption: viewMode === 'details' ? SDKUI_Localizator.PreviewView : SDKUI_Localizator.DetailsView, btnStyle: 'toolbar', color: 'primaryOutline', icon: viewMode === 'details' ? _jsx(IconDashboard, {}) : _jsx(IconList, {}), onClick: toggleViewMode }) }), _jsx(ToolbarItem, { location: "before", children: _jsx(TMSearchBar, { marginLeft: '0px', maxWidth: '160px', searchValue: searchText, onSearchValueChanged: (e) => handleSearchChange(e) }) })] }), _jsxs("div", { onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onContextMenu: onViewContextMenu, style: { width: "100%", height: "calc(100% - 40px)", border: isDragging ? '2px solid red' : '2px solid transparent' }, children: [viewMode === 'thumbnails' && _jsx(ThumbnailsView, { userID: userID, items: filteredFileItems, selectedFiles: selectedFiles, searchText: searchText, contextMenuItems: menuItems.file, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler }), viewMode === 'details' && _jsx(DetailsView, { items: filteredFileItems, contextMenuItems: menuItems.file, selectedFiles: selectedFiles, searchText: searchText, focusedFile: focusedFile, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler }), viewAnchor && _jsx(ContextMenu, { id: 'fileContextMenuDesktop', dataSource: menuItems.file, target: viewAnchor, onHiding: closeViewContextMenu })] })] })] }, "TMWGs-panels-treeView") })] }), isMobile && _jsx("div", { style: { height: "100%", width: "100%" }, children: _jsxs(TMToolbarCard, { onBack: openDraftList ? onBackCallback : undefined, title: SDKUI_Localizator.Drafts, totalItems: dcmtsFound ?? 0, children: [_jsxs("div", { style: { display: openDraftList ? 'none' : 'block', transition: 'opacity 0.3s ease-in-out' }, children: [_jsx(TreeView, { style: { marginTop: "10px", }, dataSource: treeViewData, displayExpr: "text", itemRender: renderTreeViewItem, onItemClick: handleTreeViewItemClick }), treeViewAnchor && _jsx(ContextMenu, { id: 'treeViewContextMenuMobile', dataSource: menuItems.folder, target: treeViewAnchor, onHiding: closeTreeViewContextMenu })] }), _jsxs("div", { style: { backgroundColor: "#fff", width: "100%", height: "100%", display: openDraftList ? 'block' : 'none', transition: 'opacity 0.3s ease-in-out' }, children: [_jsxs(Toolbar, { style: { backgroundColor: '#f4f4f4', height: "40px", paddingLeft: "5px", paddingRight: '5px' }, children: [_jsx(ToolbarItem, { location: "before", children: _jsx(TMButton, { caption: viewMode === 'details' ? SDKUI_Localizator.PreviewView : SDKUI_Localizator.DetailsView, btnStyle: 'toolbar', color: 'primaryOutline', icon: viewMode === 'details' ? _jsx(IconDashboard, {}) : _jsx(IconList, {}), onClick: toggleViewMode }) }), _jsx(ToolbarItem, { location: "before", children: _jsx(TMSearchBar, { marginLeft: '0px', maxWidth: '160px', searchValue: searchText, onSearchValueChanged: (e) => handleSearchChange(e) }) })] }), _jsxs("div", { onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onContextMenu: onViewContextMenu, style: { width: "100%", height: "calc(100% - 40px)", border: isDragging ? '2px solid red' : '2px solid transparent' }, children: [viewMode === 'thumbnails' && _jsx(ThumbnailsView, { userID: userID, items: filteredFileItems, selectedFiles: selectedFiles, searchText: searchText, contextMenuItems: contextMenuItems?.file, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler }), viewMode === 'details' && _jsx(DetailsView, { items: filteredFileItems, contextMenuItems: contextMenuItems?.file, selectedFiles: selectedFiles, searchText: searchText, focusedFile: focusedFile, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler }), viewAnchor && _jsx(ContextMenu, { id: 'fileViewContextMenuMobile', dataSource: menuItems.file, target: viewAnchor, onHiding: closeViewContextMenu })] })] })] }) })] });
 };
 export default TMFileManager;
+const highlightText = (text, searchText, isSelected) => {
+    if (!searchText)
+        return text;
+    const regex = new RegExp(`(${searchText})`, 'gi');
+    return text.split(regex).map((part, index) => regex.test(part) ? (_jsx("span", { style: { backgroundColor: isSelected ? '#6c9023' : 'yellow' }, children: part }, index)) : (part));
+};
 const DetailsView = (props) => {
-    const { items, contextMenuItems, focusedFile, selectedFiles, handleFocusedFile, handleSelectedFiles, onDoubleClickHandler } = props;
+    const { items, contextMenuItems, focusedFile, selectedFiles, searchText = '', handleFocusedFile, handleSelectedFiles, onDoubleClickHandler } = props;
+    const cellDefaultRender = useCallback((cellData) => {
+        return _jsx("div", { children: highlightText(cellData.value, searchText, false) });
+    }, [searchText]);
     const cellExtRender = (cellData) => {
         const data = cellData.data;
         return _jsx("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center' }, children: getFileIcon(data.ext, data.version) });
@@ -222,14 +232,14 @@ const DetailsView = (props) => {
         return [
             { dataField: "id", caption: "ID", dataType: 'string', visible: false },
             { dataField: "ext", caption: SDKUI_Localizator.Extension, cellRender: cellExtRender },
-            { dataField: "name", caption: SDKUI_Localizator.Name },
+            { dataField: "name", caption: SDKUI_Localizator.Name, cellRender: cellDefaultRender },
             { dataField: "version", caption: SDKUI_Localizator.Version },
             { dataField: "size", caption: SDKUI_Localizator.Size, cellRender: (cellData) => formatBytes(cellData.data.size ?? 0) },
             { dataField: "updaterName", caption: SDKUI_Localizator.Author },
             { dataField: "lastUpdateTime", caption: SDKUI_Localizator.LastUpdateTime, dataType: 'datetime', format: 'dd/MM/yyyy HH:mm', cellRender: cellDatetimeRender },
             { dataField: "creationTime", caption: SDKUI_Localizator.CreationTime, dataType: 'datetime', format: 'dd/MM/yyyy HH:mm', cellRender: cellDatetimeRender },
         ];
-    }, []);
+    }, [searchText]);
     // Handles selection change in the data grid
     const onSelectionChanged = useCallback((e) => {
         if (handleSelectedFiles) {
@@ -255,10 +265,10 @@ const DetailsView = (props) => {
             e.items = contextMenuItems ? [...contextMenuItems] : [];
         }
     };
-    return (items && items.length > 0) ? (_jsx(TMDataGrid, { dataSource: items, dataColumns: dataColumns, focusedRowKey: focusedFile?.id, selectedRowKeys: selectedFiles?.map(file => file.id), onFocusedRowChanged: onFocusedRowChanged, onSelectionChanged: onSelectionChanged, onRowDblClick: onRowDblClick, onContextMenuPreparing: onContextMenuPreparing, showSearchPanel: false, showRowLines: SDKUI_Globals.dataGridShowRowLines, showColumnLines: SDKUI_Globals.dataGridShowColumnLines })) : _jsx("div", { style: { width: "100%", height: "100%", display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: '10px' }, children: SDKUI_Localizator.FolderIsEmpty });
+    return (items && items.length > 0) ? (_jsx(TMDataGrid, { dataSource: items ?? [], dataColumns: dataColumns, focusedRowKey: focusedFile?.id, selectedRowKeys: selectedFiles?.map(file => file.id), onFocusedRowChanged: onFocusedRowChanged, onSelectionChanged: onSelectionChanged, onRowDblClick: onRowDblClick, onContextMenuPreparing: onContextMenuPreparing, showSearchPanel: false, showRowLines: SDKUI_Globals.dataGridShowRowLines, showColumnLines: SDKUI_Globals.dataGridShowColumnLines })) : _jsx("div", { style: { width: "100%", height: "100%", display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: '10px' }, children: SDKUI_Localizator.FolderIsEmpty });
 };
 const ThumbnailsView = (props) => {
-    const { items, selectedFiles, handleSelectedFiles, handleFocusedFile, onDoubleClickHandler, thumbnailsViewItemComponent } = props;
+    const { items, selectedFiles, searchText = '', userID, handleSelectedFiles, handleFocusedFile, onDoubleClickHandler } = props;
     const PAGE_SIZES = [TMFileManagerPageSize.Small, TMFileManagerPageSize.Medium, TMFileManagerPageSize.Large];
     const initPageSize = TMFileManagerPageSize.Small;
     const showPagination = (items?.length ?? 0) > initPageSize;
@@ -286,12 +296,5 @@ const ThumbnailsView = (props) => {
         if (onDoubleClickHandler)
             onDoubleClickHandler(item);
     };
-    // Fallback to a default div component if no thumbnailsViewItemComponent is provided
-    const defaultThumbnailViewItem = (props) => {
-        const { item, isSelected } = props;
-        return _jsx("div", { style: { padding: '10px', border: isSelected ? '2px solid blue' : '1px solid gray', marginBottom: '5px', cursor: 'pointer', }, children: _jsx("span", { children: item.name }) });
-    };
-    return items && items.length > 0 ? (_jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsx(ScrollView, { width: "100%", height: showPagination ? "calc(100% - 50px)" : "100%", useNative: true, direction: 'both', children: _jsx("div", { style: { width: "100%", height: "100%" }, children: paginatedItems?.map(item => (_jsx("div", { children: thumbnailsViewItemComponent ?
-                            thumbnailsViewItemComponent({ item, handleSelectedFiles, handleFocusedFile, isSelected: selectedFiles?.map(file => file.id).includes(item.id) ?? false, showId: false, onClick: () => handleItemClick(item), onDoubleClick: () => handleItemDoubleClick(item) }) :
-                            defaultThumbnailViewItem({ item, handleSelectedFiles, handleFocusedFile, isSelected: selectedFiles?.map(file => file.id).includes(item.id) ?? false, showId: false, onClick: () => handleItemClick(item), onDoubleClick: () => handleItemDoubleClick(item) }) }, item.id))) }) }), showPagination && _jsx(Pagination, { height: "50px", showInfo: true, showNavigationButtons: true, allowedPageSizes: PAGE_SIZES, displayMode: 'compact', itemCount: items.length, pageIndex: pageIndex, pageSize: pageSize, onPageIndexChange: setPageIndex, onPageSizeChange: setPageSize })] })) : _jsx("div", { style: { width: "100%", height: "100%", display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: '10px' }, children: SDKUI_Localizator.FolderIsEmpty });
+    return items && items.length > 0 ? (_jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsx(ScrollView, { width: "100%", height: showPagination ? "calc(100% - 50px)" : "100%", useNative: true, direction: 'both', children: _jsx(TMFileManagerThumbnailItems, { items: items, paginatedItems: paginatedItems, selectedFiles: selectedFiles, showId: false, userID: userID, searchText: searchText, handleFocusedFile: handleFocusedFile, handleSelectedFiles: handleSelectedFiles, onClick: handleItemClick, onDoubleClick: handleItemDoubleClick }) }), showPagination && _jsx(Pagination, { height: "50px", showInfo: true, showNavigationButtons: true, allowedPageSizes: PAGE_SIZES, displayMode: 'compact', itemCount: items.length, pageIndex: pageIndex, pageSize: pageSize, onPageIndexChange: setPageIndex, onPageSizeChange: setPageSize })] })) : _jsx("div", { style: { width: "100%", height: "100%", display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: '10px' }, children: SDKUI_Localizator.FolderIsEmpty });
 };

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

@@ -0,0 +1,14 @@
+import { FileItem } from './TMFileManager';
+export interface TMFileManagerThumbnailItemsProps {
+    items: Array<FileItem>;
+    paginatedItems: Array<FileItem>;
+    selectedFiles: Array<FileItem> | undefined;
+    showId: boolean;
+    searchText: string;
+    userID: number;
+    onClick: (file: FileItem) => void;
+    onDoubleClick?: (file: FileItem) => void;
+    handleSelectedFiles?: (fileItems: Array<FileItem>) => void;
+    handleFocusedFile?: (fileItem: FileItem | undefined) => void;
+}
+export declare const TMFileManagerThumbnailItems: (props: TMFileManagerThumbnailItemsProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/base/TMFileManagerThumbnailItems.js

@@ -0,0 +1,165 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import styled from 'styled-components';
+import TMTooltip from './TMTooltip';
+import { formatBytes, getFileIcon, Globalization, SDKUI_Localizator } from '../../helper';
+const colors = {
+    BLACK: "#000000",
+    WHITE: "#fff",
+    LIGHT_GRAY: "#f9f9f9",
+    PRIMARY_BLUE: "#135596",
+    LIGHT_GREEN: "#c8e6c9",
+    LIGHT_YELLOW: "#fff9c4",
+    MEDIUM_GREEN: "#28a745",
+};
+const FileItemContainer = styled.div `
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 10px;
+        border: 1px solid #ddd;
+        border-radius: 8px;
+        margin: 10px 5px; 
+        background-color: ${({ $backgroundColor }) => $backgroundColor ?? colors.LIGHT_GRAY};
+        color: ${({ $textColor }) => $textColor ?? colors.BLACK}; 
+        position: relative;
+        min-width: 200px;
+        cursor: pointer;
+        &:hover {
+            background-color: ${({ $bgHoverColor }) => $bgHoverColor ?? '#e0e0e0'};
+            border-color: #999;
+        }
+        &:focus {
+            outline: none;
+        }
+    `;
+const IconWrapper = styled.div `
+        display: flex;
+        flex-direction: column; 
+        align-items: center;
+        margin-right: 10px;
+        font-size: 24px;
+
+        i {
+            font-size: 16px;
+            color: #555;
+            margin-top: 5px;
+        }
+    `;
+const FileDetails = styled.div `
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        font-size: 14px;
+    `;
+const FileName = styled.div `
+        font-size: 13px;
+        font-weight: bold;
+        word-break: break-word;
+    `;
+const FileMeta = styled.div `
+        font-size: 12px;
+    `;
+const Badge = styled.div `
+        width: 30px;
+        height: 30px;
+        border: 2px solid #28a745;
+        background-color: #28a745;
+        color: #fff;
+        font-size: 12px;
+        font-weight: bold;
+        padding: 5px 10px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: auto;
+    `;
+const highlightText = (text, searchText, isSelected) => {
+    if (!searchText)
+        return text;
+    const regex = new RegExp(`(${searchText})`, 'gi');
+    return text.split(regex).map((part, index) => regex.test(part) ? (_jsx("span", { style: { backgroundColor: isSelected ? '#6c9023' : 'yellow' }, children: part }, index)) : (part));
+};
+export const TMFileManagerThumbnailItems = (props) => {
+    const { items, paginatedItems, selectedFiles, searchText, showId, userID, onClick, onDoubleClick, handleSelectedFiles, handleFocusedFile } = props;
+    // Ref to the container
+    const containerRef = useRef(null);
+    // Scroll the focused blog post into view
+    useEffect(() => {
+        if (selectedFiles && selectedFiles.length === 1 && containerRef.current) {
+            const selectedElement = document.getElementById(selectedFiles[0].id.toString());
+            if (selectedElement) {
+                selectedElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        }
+    }, [selectedFiles]);
+    return _jsx("div", { style: { width: "100%", height: "100%" }, children: paginatedItems.map(item => {
+            let clickTimeout = null;
+            const isSelected = selectedFiles?.map(file => file.id).includes(item.id) ?? false;
+            const checkoutDate = item.checkoutDate;
+            const checkoutUsedId = item.checkOutUserID;
+            const editMode = checkoutDate && checkoutUsedId && userID && userID === checkoutUsedId;
+            const lockMode = checkoutDate && checkoutUsedId && userID && userID !== checkoutUsedId;
+            const textColor = isSelected ? colors.WHITE : colors.BLACK;
+            const backgroundColors = { editMode: colors.LIGHT_GREEN, lockMode: colors.LIGHT_YELLOW, };
+            let bgColor = isSelected ? colors.PRIMARY_BLUE : colors.LIGHT_GRAY;
+            let bgHoverColor = isSelected ? colors.PRIMARY_BLUE : "#e0e0e0";
+            if (editMode) {
+                bgColor = isSelected ? colors.PRIMARY_BLUE : backgroundColors.editMode;
+                bgHoverColor = isSelected ? colors.PRIMARY_BLUE : "#a5d6a7";
+            }
+            if (lockMode) {
+                bgColor = isSelected ? colors.PRIMARY_BLUE : backgroundColors.lockMode;
+                bgHoverColor = isSelected ? colors.PRIMARY_BLUE : "#fff59d";
+            }
+            const handleKeyDown = (event) => {
+                event.preventDefault();
+                if (event.key === 'ArrowDown' && selectedFiles && selectedFiles.length === 1) {
+                    const currentIndex = items.findIndex(element => element.id === selectedFiles[0].id);
+                    if (items[currentIndex + 1]) {
+                        if (handleSelectedFiles)
+                            handleSelectedFiles([items[currentIndex + 1]]);
+                    }
+                    ;
+                }
+            };
+            const handleKeyUp = (event) => {
+                event.preventDefault();
+                if (event.key === 'ArrowUp' && selectedFiles && selectedFiles.length === 1) {
+                    const currentIndex = items.findIndex(element => element.id === selectedFiles[0].id);
+                    if (items[currentIndex - 1]) {
+                        if (handleSelectedFiles)
+                            handleSelectedFiles([items[currentIndex - 1]]);
+                    }
+                    ;
+                }
+            };
+            const onDoubleClickHandler = () => {
+                if (clickTimeout) {
+                    clearTimeout(clickTimeout);
+                    clickTimeout = null;
+                }
+                if (onDoubleClick && item)
+                    onDoubleClick(item);
+            };
+            const onClickHandler = () => {
+                if (clickTimeout) {
+                    clearTimeout(clickTimeout);
+                    clickTimeout = null;
+                }
+                else {
+                    clickTimeout = setTimeout(() => {
+                        if (onClick && item)
+                            onClick(item);
+                    }, 200);
+                }
+            };
+            const onContextMenu = () => {
+                if (handleFocusedFile)
+                    handleFocusedFile(item);
+            };
+            const editLockTooltipText = _jsxs(_Fragment, { children: [_jsxs("div", { style: { textAlign: "center" }, children: [editMode && (_jsxs(_Fragment, { children: [_jsx("i", { style: { fontSize: "18px", color: colors.MEDIUM_GREEN, fontWeight: "bold" }, className: "dx-icon-edit" }), SDKUI_Localizator.CurrentUserExtract] })), lockMode && (_jsxs(_Fragment, { children: [_jsx("i", { style: { fontSize: "18px", color: colors.MEDIUM_GREEN, fontWeight: "bold" }, className: "dx-icon-lock" }), SDKUI_Localizator.ExtractedFromOtherUser] }))] }), _jsx("hr", {}), _jsxs("div", { style: { textAlign: "left" }, children: [_jsxs("ul", { children: [_jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.ExtractedBy }), ": ", item.checkOutUserName ?? '-', " (ID: ", item.checkOutUserID, ")"] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.ExtractedOn }), ": ", Globalization.getDateTimeDisplayValue(item.checkoutDate?.toString())] })] }), _jsx("hr", {}), _jsx("ul", { children: _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.Version }), ": ", item.version ?? 1] }) }), _jsx("hr", {}), _jsxs("ul", { children: [_jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.Type }), ": ", item.ext] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.CreationTime }), ": ", Globalization.getDateTimeDisplayValue(item.creationTime?.toString())] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.LastUpdateTime }), ": ", Globalization.getDateTimeDisplayValue(item.lastUpdateTime?.toString())] })] })] })] });
+            return _jsxs(FileItemContainer, { ref: containerRef, id: item.id.toString(), "$backgroundColor": bgColor, "$bgHoverColor": bgHoverColor, "$textColor": textColor, onDoubleClick: onDoubleClickHandler, onContextMenu: onContextMenu, onClick: onClickHandler, tabIndex: 0, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, children: [_jsxs(IconWrapper, { children: [getFileIcon(item.ext, item.version), editMode && _jsx(TMTooltip, { content: editLockTooltipText, children: _jsx("i", { style: { fontSize: "18px", color: colors.MEDIUM_GREEN, fontWeight: "bold" }, className: "dx-icon-edit" }) }), lockMode && _jsx(TMTooltip, { content: editLockTooltipText, children: _jsx("i", { style: { fontSize: "18px", color: colors.MEDIUM_GREEN, fontWeight: "bold" }, className: "dx-icon-lock" }) })] }), _jsxs(FileDetails, { children: [_jsx(FileName, { children: showId ? highlightText(`(${item.id}) ${item.name}`, searchText, isSelected) : highlightText(item.name, searchText, isSelected) }), _jsx(FileMeta, { children: formatBytes(item.size ?? 0) })] }), item.version && _jsx(Badge, { children: _jsx(TMTooltip, { content: SDKUI_Localizator.Version, children: item.version }) })] }, "item-file-manager-" + item.id);
+        }) });
+};

package/lib/components/choosers/TMDynDataListItemChooser.js

@@ -27,8 +27,10 @@ const TMDynDataListItemChooser = ({ tid, md, titleForm, openChooserBySingleClick
             }
         }
         setDynDl(d);
-        if (!IsParametricQuery(d?.qd) && !dataSource)
+        if (!IsParametricQuery(d?.qd) && !dataSource) {
+            setDataSource(undefined);
             loadData().then((result) => { setDataSource(result); });
+        }
     }, [md]);
     useEffect(() => {
         if (!tid)
@@ -41,11 +43,6 @@ const TMDynDataListItemChooser = ({ tid, md, titleForm, openChooserBySingleClick
         }
         loadData().then((result) => {
             setDataSource(result);
-            if (values && values.length > 0) {
-                let description = result?.dtdResult?.rows?.filter(o => o[dynDl?.selectItemForValue ?? 0] == values?.[0])?.[0]?.[dynDl?.selectItemForDescription ?? 0];
-                if (!description)
-                    onValueChanged?.(undefined);
-            }
         });
     }, [queryParamsDynDataList, dynDl]);
     const loadData = async () => {
@@ -77,7 +74,7 @@ const TMDynDataListItemChooser = ({ tid, md, titleForm, openChooserBySingleClick
             _jsx(TMTooltip, { content: SDKUI_Localizator.ValueNotPresent, children: _jsx(IconWarning, { color: TMColors.warning }) });
     };
     const renderTemplate = () => {
-        return (_jsxs(StyledDivHorizontal, { style: { minWidth: '125px' }, children: [_jsxs(StyledDivHorizontal, { children: [getIcon(), _jsx("p", { style: { marginLeft: '5px' }, children: getDescription() })] }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }));
+        return (_jsxs(StyledDivHorizontal, { style: { minWidth: '125px' }, children: [dataSource && _jsxs(StyledDivHorizontal, { children: [getIcon(), _jsx("p", { style: { marginLeft: '5px' }, children: getDescription() })] }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }));
     };
     return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { placeHolder: placeHolder, icon: icon, labelColor: labelColor, backgroundColor: backgroundColor, buttons: buttons, showBorder: showBorder, readOnly: readOnly, hasValue: values && values.length > 0, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => !readOnly && setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, openEditorOnSummaryClick: openChooserBySingleClick, label: label, template: renderTemplate(), onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
                 _jsx(TMDynDataListItemChooserForm, { TID: tid, MID: md?.id, dynDL: dynDl, title: titleForm, allowMultipleSelection: allowMultipleSelection, searchResult: dataSource, selectedIDs: values, onClose: () => setShowChooser(false), onChoose: (IDs) => {

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

@@ -0,0 +1,6 @@
+import React from 'react';
+interface IHtmlContentDisplay {
+    markup: string;
+}
+declare const TMHtmlContentDisplay: React.FC<IHtmlContentDisplay>;
+export default TMHtmlContentDisplay;

package/lib/components/editors/TMHtmlContentDisplay.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from 'styled-components';
+const Wrapper = styled.div `
+    ul li {
+        list-style-position: inside;
+    }
+    ol li {
+        list-style-position: inside;
+    }
+`;
+const TMHtmlContentDisplay = ({ markup }) => {
+    return (_jsx(Wrapper, { children: _jsx("div", { dangerouslySetInnerHTML: { __html: markup } }) }));
+};
+export default TMHtmlContentDisplay;

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

@@ -0,0 +1,29 @@
+import { ValidationItem } from '@topconsultnpm/sdk-ts-beta';
+export interface ITMHtmlEditor {
+    /** Width of the editor (e.g., '100%', '500px') */
+    width?: string;
+    /** Height of the editor (e.g., '300px') */
+    height?: string;
+    /** Initial or current value of the editor content as an HTML string */
+    value?: string;
+    /** Callback function triggered when the content value changes */
+    onValueChanged?: (e: {
+        value: string;
+    }) => void;
+    /** If true, the editor is in read-only mode and content cannot be edited */
+    readOnly?: boolean;
+    /** Configuration for mention functionality (e.g., @mentions) */
+    mentionsConfig?: Array<{
+        dataSource: Array<{
+            text: string;
+            icon?: string;
+        }>;
+        searchExpr: string;
+        displayExpr: string;
+        valueExpr: string;
+    }>;
+    /** List of validation rules or checks to apply to the editor content */
+    validationItems?: Array<ValidationItem>;
+}
+declare const TMHtmlEditor: (props: ITMHtmlEditor) => import("react/jsx-runtime").JSX.Element;
+export default TMHtmlEditor;

package/lib/components/editors/TMHtmlEditor.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import HtmlEditor, { Toolbar, Item } from 'devextreme-react/html-editor';
+import TMVilViewer from '../base/TMVilViewer';
+import TMTooltip from '../base/TMTooltip';
+import TMButton from '../base/TMButton';
+const TMHtmlEditor = (props) => {
+    const { width = "100%", height = "100%", readOnly = false, value = "", mentionsConfig, onValueChanged, validationItems } = props;
+    const editorRef = useRef(null); // Create a ref for the HtmlEditor
+    const [isEditorEnabled, setIsEditorEnabled] = useState(false);
+    const handlePaste = (e) => {
+        const clipboardData = e.clipboardData || window.clipboardData;
+        const pastedText = clipboardData.getData('text/plain'); // Get the plain text
+        e.preventDefault(); // Prevent default paste behavior
+        setMarkup(pastedText); // Set the pasted text as plain text
+        onValueChangeCallback(pastedText); // Call the value change callback
+    };
+    useEffect(() => {
+        const editor = editorRef.current?.instance()?.element();
+        if (editor) {
+            // Attach paste event listener to the editor's root DOM element
+            editor.addEventListener('paste', handlePaste);
+        }
+        // Cleanup the event listener when component unmounts
+        return () => {
+            if (editor) {
+                editor.removeEventListener('paste', handlePaste);
+            }
+        };
+    }, []);
+    const [markup, setMarkup] = useState(value);
+    useEffect(() => {
+        // Initialize markup with the value prop
+        setMarkup(value);
+    }, [value]);
+    useEffect(() => {
+        if (!isEditorEnabled) {
+            // When switching to plain text mode, strip HTML tags
+            const doc = new DOMParser().parseFromString(markup, 'text/html');
+            setMarkup(doc.body.textContent || "");
+        }
+    }, [isEditorEnabled]);
+    const onValueChangeCallback = (text) => {
+        setMarkup(text);
+        if (onValueChanged) {
+            onValueChanged({ value: text });
+        }
+    };
+    const hasValidationErrors = useMemo(() => {
+        return validationItems && validationItems.length > 0;
+    }, [validationItems]);
+    const toggleEditorMode = () => {
+        setIsEditorEnabled((prev) => !prev);
+    };
+    return (_jsxs("div", { children: [_jsx("div", { style: { position: 'absolute', top: '10px', right: '10px', zIndex: 10 }, children: _jsx(TMTooltip, { content: isEditorEnabled ? "Nascondi opzioni di formattazione" : "Mostra opzioni di formattazione", children: _jsx(TMButton, { btnStyle: "toolbar", onClick: toggleEditorMode, icon: isEditorEnabled ? _jsx("i", { className: 'dx-icon-eyeclose' }) : _jsx("i", { className: 'dx-icon-eyeopen' }) }) }) }), _jsx("div", { style: { borderWidth: '1px', borderStyle: 'solid', borderColor: hasValidationErrors ? "red" : "#e0e0e0 #e0e0e0 #616161", }, children: !isEditorEnabled ? (_jsx("textarea", { placeholder: "Digita un messaggio...", value: markup, onChange: (e) => onValueChangeCallback(e.target.value), maxLength: 1000, style: {
+                        width,
+                        height,
+                        border: '1px solid #ddd',
+                        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+                        resize: 'none',
+                        padding: '10px',
+                        outline: 'none',
+                        paddingRight: "40px"
+                    } })) : (_jsx(HtmlEditor, { ref: editorRef, width: width, height: height, value: markup, onValueChange: onValueChangeCallback, readOnly: readOnly, mentions: mentionsConfig, style: { overflow: 'hidden', outline: "none" }, children: !readOnly && (_jsxs(Toolbar, { multiline: false, children: [_jsx(Item, { name: "undo" }), _jsx(Item, { name: "redo" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "bold" }), _jsx(Item, { name: "italic" }), _jsx(Item, { name: "underline" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "alignLeft" }), _jsx(Item, { name: "alignCenter" }), _jsx(Item, { name: "alignRight" }), _jsx(Item, { name: "alignJustify" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "orderedList" }), _jsx(Item, { name: "bulletList" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "color" }), _jsx(Item, { name: "background" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "link" })] })) })) }), _jsx(TMVilViewer, { vil: validationItems })] }));
+};
+export default TMHtmlEditor;

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

@@ -7,7 +7,7 @@ interface ITMMetadataEditorProps {
     value: string | undefined;
     queryParamsDynDataList?: string[];
     autoFocus?: boolean;
-    containerElement: Element | undefined;
+    containerElement?: Element;
     disabled?: boolean;
     validationItems?: ValidationItem[];
     isLexProt?: number;

package/lib/components/editors/TMMetadataValues.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useEffect, useState } from "react";
 import styled from "styled-components";
 import { AccessLevels, DcmtTypeListCacheService, LayoutModes, MetadataDataDomains, MetadataDataTypes, MetadataValueDescriptor, SDK_Globals } from '@topconsultnpm/sdk-ts-beta';
-import { IconUndo, IconPencil, IconFunction, IconMenuVertical, IconDataList, SDKUI_Localizator, IconNull, stringIsNullOrEmpty } from "../../helper";
+import { IconUndo, IconPencil, IconFunction, IconMenuVertical, IconDataList, SDKUI_Localizator, IconNull, stringIsNullOrEmpty, deepCompare } from "../../helper";
 import { TMColors } from "../../utils/theme";
 import TMButton from "../base/TMButton";
 import TMDropDownMenu from "../base/TMDropDownMenu";
@@ -27,10 +27,10 @@ export var AdvancedMenuButtons;
 })(AdvancedMenuButtons || (AdvancedMenuButtons = {}));
 const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerms = true, showAdvancedMenu = false, customMenuItems = [], showNullValueCheckBoxes, isOpenDistinctValues = false, openChooserBySingleClick, selectedMID, onFocusedItemChanged, layoutMode = LayoutModes.Update, metadataValues = [], metadataValuesOrig = [], TID, onValueChanged, onAdvancedMenuClick, validationItems }) => {
     const [dynDataListsToBeRefreshed, setDynDataListsToBeRefreshed] = useState([]);
-    const [calcDynDataListsToBeRefreshed, setCalcDynDataListsToBeRefreshed] = useState();
     const [currentDTD, setCurrentDTD] = useState();
     const [isEditableList, addOrRemoveEditableList] = useMetadataEditableList();
     const [selectedItem, setSelectedItem] = useState(undefined);
+    const [prevMetadataValues, setPrevMetadataValues] = useState([]);
     const onChangeHandler = (newValue, mid) => {
         let newValues = structuredClone(metadataValues);
         const item = newValues.find(value => value.mid === mid);
@@ -48,8 +48,6 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
                 dynDLToBeRefreshed = dynDataListsToBeRefreshed.find(o => o.midStarter === item?.mid);
             }
         }
-        let md = currentDTD?.metadata?.find(o => o.id == mid);
-        setCalcDynDataListsToBeRefreshed(md?.dataDomain === MetadataDataDomains.DynamicDataList);
         onValueChanged?.(newValues);
     };
     const editorValidationHandler = (mid) => {
@@ -73,29 +71,31 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
     useEffect(() => {
         DcmtTypeListCacheService.GetAsync(TID, true).then((resultDTD) => {
             setCurrentDTD(resultDTD);
-            setCalcDynDataListsToBeRefreshed(true);
         });
     }, [TID]);
     useEffect(() => {
         if (metadataValues.length <= 0)
             return;
-        if (calcDynDataListsToBeRefreshed && currentDTD?.id == TID) {
-            loadDynDataListToBeRefreshedCascadeAsync(TID, metadataValues).then((result) => {
-                setDynDataListsToBeRefreshed(result);
-                setCalcDynDataListsToBeRefreshed(false);
-            });
-        }
-    }, [JSON.stringify(metadataValues)]);
-    const loadDynDataListToBeRefreshedCascadeAsync = async (tid, mds) => {
+        if (!currentDTD)
+            return;
+        //if no dynamic data list has changed we do not call APIs
+        if (deepCompare(metadataValues.filter(o => o.md?.dataDomain === MetadataDataDomains.DynamicDataList), prevMetadataValues.filter(o => o.md?.dataDomain === MetadataDataDomains.DynamicDataList)))
+            return;
+        setPrevMetadataValues(metadataValues);
+        loadDynDataListToBeRefreshedCascadeAsync(TID, metadataValues).then((result) => {
+            setDynDataListsToBeRefreshed(result);
+        });
+    }, [metadataValues, currentDTD]);
+    const loadDynDataListToBeRefreshedCascadeAsync = async (tid, mvdList) => {
         if (!tid)
             return [];
-        if (mds.length <= 0)
+        if (mvdList.length <= 0)
             return [];
         let dynDLToBeRefreshed = [];
-        for (const m of mds) {
+        for (const m of mvdList) {
             if (!m.value)
                 continue;
-            let data = await getDataDynDataListsToBeRefreshedAsync(tid, m.mid, [m.value ?? ""], dynDLToBeRefreshed.find(o => o.mid == m.mid)?.queryParams ?? []);
+            let data = await getDataDynDataListsToBeRefreshedAsync(tid, m.mid, m.value, dynDLToBeRefreshed.find(o => o.mid == m.mid)?.queryParams ?? []);
             if (!data)
                 continue;
             for (const item of data)
@@ -103,11 +103,13 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
         }
         return dynDLToBeRefreshed;
     };
-    const getDataDynDataListsToBeRefreshedAsync = async (tid, mid, values, qParams) => {
+    const getDataDynDataListsToBeRefreshedAsync = async (tid, mid, value, qParams) => {
         if (!tid)
             return;
         if (!mid)
             return;
+        if (stringIsNullOrEmpty(value))
+            return;
         let md = currentDTD?.metadata?.find(o => o.id == mid);
         if (md?.dataDomain !== MetadataDataDomains.DynamicDataList)
             return;
@@ -127,25 +129,23 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
             return;
         let toBeRefreshed = [];
         let dynDlDataSource = await SDK_Globals.tmSession?.NewSearchEngine().GetDynDataListValuesAsync(tid, mid, layoutMode, qParams);
-        if (values && values.length > 0) {
-            if (!d.onValueChanged_DynDataListsToBeRefreshed)
-                return;
-            let row = dynDlDataSource?.dtdResult?.rows?.filter(o => o[d.selectItemForValue ?? 0] == values?.[0]);
-            if (!row || row.length <= 0)
-                return;
-            for (const t of d.onValueChanged_DynDataListsToBeRefreshed) {
-                let mid = t.item1;
-                let queryParams = [];
-                if ((t.item2 ?? 0) >= 0)
-                    queryParams.push(row[0][t.item2 ?? 0]);
-                if ((t.item3 ?? 0) >= 0)
-                    queryParams.push(row[0][t.item3 ?? 0]);
-                if ((t.item4 ?? 0) >= 0)
-                    queryParams.push(row[0][t.item4 ?? 0]);
-                if ((t.item5 ?? 0) >= 0)
-                    queryParams.push(row[0][t.item5 ?? 0]);
-                toBeRefreshed.push({ mid: mid, queryParams: queryParams, midStarter: md?.id });
-            }
+        if (!d.onValueChanged_DynDataListsToBeRefreshed)
+            return;
+        let row = dynDlDataSource?.dtdResult?.rows?.filter(o => o[d.selectItemForValue ?? 0] == value);
+        if (!row || row.length <= 0)
+            return;
+        for (const t of d.onValueChanged_DynDataListsToBeRefreshed) {
+            let mid = t.item1;
+            let queryParams = [];
+            if ((t.item2 ?? 0) >= 0)
+                queryParams.push(row[0][t.item2 ?? 0]);
+            if ((t.item3 ?? 0) >= 0)
+                queryParams.push(row[0][t.item3 ?? 0]);
+            if ((t.item4 ?? 0) >= 0)
+                queryParams.push(row[0][t.item4 ?? 0]);
+            if ((t.item5 ?? 0) >= 0)
+                queryParams.push(row[0][t.item5 ?? 0]);
+            toBeRefreshed.push({ mid: mid, queryParams: queryParams, midStarter: md?.id });
         }
         return toBeRefreshed;
     };
@@ -180,7 +180,7 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
                             if (mvd)
                                 mvd.isSelected = newValue;
                             onValueChanged?.(newValues);
-                        } }), _jsxs("div", { style: { position: 'relative', height: '100%', width: '100%', opacity: showNullValueCheckBoxes && item.isNull ? 0.4 : 1 }, children: [_jsx(TMMetadataEditor, { tid: TID, mid: item.mid, layoutMode: layoutMode, isLexProt: item.isLexProt, isSelected: isOpenDistinctValues && item.mid === selectedMID, isModifiedWhen: (item?.value ?? '') !== (metadataValuesOrig.find(m => m.mid === item.mid)?.value ?? ''), isReadOnly: showNullValueCheckBoxes ? item.isNull : undefined, isEditable: isEditable(item.mid) || item.isEditable, validationItems: editorValidationHandler(item.mid ?? 0), value: metadataValues.find(m => m.mid === item.mid)?.value, openChooserBySingleClick: openChooserBySingleClick, onValueChanged: (newValue) => onChangeHandler(newValue, item.mid ?? 0), onValueChange: (newValue) => onChangeHandler(newValue, item.mid ?? 0), containerElement: undefined, queryParamsDynDataList: dynDataListsToBeRefreshed.find(o => o.mid == item.mid)?.queryParams ?? [], onCascadeRefreshDynDataLists: (ddlToBeRefreshed) => {
+                        } }), _jsxs("div", { style: { position: 'relative', height: '100%', width: '100%', opacity: showNullValueCheckBoxes && item.isNull ? 0.4 : 1 }, children: [_jsx(TMMetadataEditor, { tid: TID, mid: item.mid, layoutMode: layoutMode, isLexProt: item.isLexProt, isSelected: isOpenDistinctValues && item.mid === selectedMID, isModifiedWhen: (item.value ?? '') !== (metadataValuesOrig.find(m => m.mid === item.mid)?.value ?? ''), isReadOnly: showNullValueCheckBoxes ? item.isNull : undefined, isEditable: isEditable(item.mid) || item.isEditable, validationItems: editorValidationHandler(item.mid ?? 0), value: item.value, openChooserBySingleClick: openChooserBySingleClick, onValueChanged: (newValue) => { onChangeHandler(newValue, item.mid ?? 0); }, onValueChange: (newValue) => { onChangeHandler(newValue, item.mid ?? 0); }, queryParamsDynDataList: dynDataListsToBeRefreshed.find(o => o.mid == item.mid)?.queryParams ?? [], onCascadeRefreshDynDataLists: (ddlToBeRefreshed) => {
                                 let newDynDataListsToBeRefreshed = [];
                                 for (const item of dynDataListsToBeRefreshed) {
                                     let index = ddlToBeRefreshed.findIndex(o => o.mid == item.mid || (o.mid == -1 && o.midStarter == item.midStarter));
@@ -234,7 +234,7 @@ const StyledMetadataValuesContainer = styled.div `
     display: flex; 
     flex-direction: column; 
     width: 100%; 
-    height: calc(100%); 
+    height: 100%; 
     overflow: auto;
     padding: 0 10px 10px 10px;
 `;

package/lib/helper/SDKUI_Localizator.d.ts

@@ -68,6 +68,7 @@ export declare class SDKUI_Localizator {
     static get Create(): "Erstellen" | "Create" | "Crear" | "Créer" | "Criar" | "Crea";
     static get CreationTime(): "Erstellungsdatum" | "Creation Time" | "Fecha creación" | "Date de création" | "Data de criação" | "Data creazione";
     static get CultureID(): "Sprache" | "Language" | "Idioma" | "Lingue" | "Língua" | "Lingua";
+    static get CurrentUserExtract(): string;
     static get Date(): "Datum" | "Date" | "fecha" | "Data";
     static get Date_Modified(): "Datum geändert" | "Date Modified" | "Fecha modificada" | "Date modifiée" | "Data modificada" | "Data modificata";
     static get DcmtCount(): "Anzahl der Dokumente" | "Number of documents" | "Número de documentos" | "Nombre de documents" | "Numero documenti";
@@ -106,6 +107,9 @@ export declare class SDKUI_Localizator {
     static get EnterValue(): "Geben Sie einen Wert ein" | "Enter a value" | "Introducir un valor" | "Entrez une valeur" | "Digite um valor" | "Inserire un valore";
     static get Error(): "Fehler" | "Error" | "Erreur" | "Erro" | "Errore";
     static get ErrorParsingFileContent(): "Fehler beim Parsen des Dateiinhalts. Stellen Sie sicher, dass die Datei im richtigen Format vorliegt." | "Error parsing the file content. Ensure the file is in the correct format." | "Error al analizar el contenido del archivo. Asegúrese de que el archivo esté en el formato correcto." | "Erreur lors de l'analyse du contenu du fichier. Assurez-vous que le fichier est dans le bon format." | "Erro ao analisar o conteúdo do arquivo. Certifique-se de que o arquivo está no formato correto." | "Errore durante l'analisi del contenuto del file. Assicurati che il file sia nel formato corretto.";
+    static get ExtractedBy(): "Ausgezogen von" | "Extracted by" | "Extraído por" | "Extrait par" | "Estratto da";
+    static get ExtractedFromOtherUser(): string;
+    static get ExtractedOn(): "Ausgezogen am" | "Extracted on" | "Extraído el" | "Extrait le" | "Extraído em" | "Estratto il";
     static get EvaluateResult(): "Bewerten Sie das Ergebnis" | "Evaluate result" | "Valorar el resultado" | "Évalue les résultats" | "Avalia os resultados" | "Valuta il risultato";
     static get ExpertMode(): "Expertenmodus" | "Expert mode" | "Modo experto" | "Mode expert" | "Modo especialista" | "Modalità esperto";
     static get Export(): "Exportieren" | "Export" | "Exportar" | "Exporter" | "Esporta";

package/lib/helper/SDKUI_Localizator.js

@@ -629,6 +629,16 @@ export class SDKUI_Localizator {
             default: return "Lingua";
         }
     }
+    static get CurrentUserExtract() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Auszug aus dem aktuellen Benutzer und änderbar";
+            case CultureIDs.En_US: return "Extracted from the current user and editable";
+            case CultureIDs.Es_ES: return "Extraído del usuario actual y editable";
+            case CultureIDs.Fr_FR: return "Extrait de l'utilisateur actuel et modifiable";
+            case CultureIDs.Pt_PT: return "Extraído do usuário atual e editável";
+            default: return "Estratto dall'utente corrente e modificabile";
+        }
+    }
     static get Date() {
         switch (this._cultureID) {
             case CultureIDs.De_DE: return "Datum";
@@ -1021,6 +1031,36 @@ export class SDKUI_Localizator {
             default: return "Errore durante l'analisi del contenuto del file. Assicurati che il file sia nel formato corretto.";
         }
     }
+    static get ExtractedBy() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Ausgezogen von";
+            case CultureIDs.En_US: return "Extracted by";
+            case CultureIDs.Es_ES: return "Extraído por";
+            case CultureIDs.Fr_FR: return "Extrait par";
+            case CultureIDs.Pt_PT: return "Extraído por";
+            default: return "Estratto da";
+        }
+    }
+    static get ExtractedFromOtherUser() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Auszug von einem anderen Benutzer und nicht bearbeitbar";
+            case CultureIDs.En_US: return "Extracted from another user and not editable";
+            case CultureIDs.Es_ES: return "Extraído de otro usuario y no editable";
+            case CultureIDs.Fr_FR: return "Extrait d'un autre utilisateur et non modifiable";
+            case CultureIDs.Pt_PT: return "Extraído de outro usuário e não editável";
+            default: return "Estratto da un altro utente e non modificabile";
+        }
+    }
+    static get ExtractedOn() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Ausgezogen am";
+            case CultureIDs.En_US: return "Extracted on";
+            case CultureIDs.Es_ES: return "Extraído el";
+            case CultureIDs.Fr_FR: return "Extrait le";
+            case CultureIDs.Pt_PT: return "Extraído em";
+            default: return "Estratto il";
+        }
+    }
     static get EvaluateResult() {
         switch (this._cultureID) {
             case CultureIDs.De_DE: return "Bewerten Sie das Ergebnis";

package/lib/stories/TMFileManager.stories.js

@@ -88,7 +88,7 @@ export const DefaultTMFileManager = (args) => {
             }
         ]
     };
-    return _jsx(TMFileManager, { ...args, treeFs: {
+    return _jsx(TMFileManager, { ...args, userID: 1, treeFs: {
             id: 0,
             name: 'Root Directory',
             isDirectory: true,

package/lib/stories/TMHtmlEditor.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta;
+export default _default;
+export declare const HtmlEditor: any;

package/lib/stories/TMHtmlEditor.stories.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { sortArgTypes } from './TMStoriesUtils';
+import TMHtmlEditor from '../components/editors/TMHtmlEditor';
+export default {
+    // The title will determine how the component appears in the sidebar of Storybook
+    title: 'Components/TMHtmlEditor',
+    // Specifies the component that is being documented in this story
+    component: TMHtmlEditor,
+    tags: ['autodocs'],
+    // Tags for categorizing the component within Storybook
+    argTypes: sortArgTypes({}),
+};
+/******* 1. Default Template and Default TMHtmlEditor *******/
+const Template = (args) => _jsx(TMHtmlEditor, { ...args });
+export const HtmlEditor = Template.bind({});
+HtmlEditor.args = {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@topconsultnpm/sdkui-react-beta",
-  "version": "6.11.112",
+  "version": "6.11.115",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",