@topconsultnpm/sdkui-react 6.21.0-dev1.9 → 6.21.0-dev2.10

package/lib/components/base/TMAreaManager.js

@@ -1,19 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from 'react';
 import FileManager, { Column, Details, ItemView, Permissions, Notifications, ContextMenu, Toolbar, Item } from 'devextreme-react/file-manager';
-import { FileDescriptor, FileFormats, FileTransferModes, SDK_Localizator, SDK_Globals } from '@topconsultnpm/sdk-ts';
+import { FileDescriptor, FileFormats, FileTransferModes, SDK_Localizator, SDK_Globals, AppModules } from '@topconsultnpm/sdk-ts';
 import CustomFileSystemProvider from 'devextreme/file_management/custom_provider';
 import FileSystemError from "devextreme/file_management/error";
 import Button from "devextreme/ui/button";
-import { alert, confirm } from "devextreme/ui/dialog";
+import { alert, custom } from "devextreme/ui/dialog";
 import { loadMessages } from 'devextreme/localization';
-import { Globalization, IconAll, IconCloud, IconFolder, IconFolderForCSS, IconSelected, SDKUI_Localizator, svgToString } from '../../helper';
+import { getFileManagerFolderColor, Globalization, IconAll, IconCloud, IconFolder, IconFolderForCSS, IconSelected, SDKUI_Localizator, svgToString } from '../../helper';
 import { TMExceptionBoxManager } from './TMPopUp';
 import ShowAlert from './TMAlert';
 import { TMLayoutWaitingContainer } from './TMWaitPanel';
 import TMCounterContainer, { CounterItemKey } from './TMCounterContainer';
 import { IconPdf, IconTxt, IconXls, IconDocx, IconImage, IconZip, IconXml, IconMp4, IconEmail, IconPpt, IconSigned, IconExe, IconHtml, IconDwg, IconDicom, IconSlddrw } from '../../assets/thumbnails';
-import { TMColors } from '../../utils/theme';
 import styled from 'styled-components';
 import { renderToStaticMarkup } from 'react-dom/server';
 export class TMFileSystemItem {
@@ -25,8 +24,10 @@ export class TMFileSystemItem {
     }
 }
 let abortController = new AbortController();
-const svgString = encodeURIComponent(renderToStaticMarkup(_jsx(IconFolderForCSS, { fill: "#9fc6e7" })));
-const svgDataUrl = `data:image/svg+xml,${svgString}`;
+const generateSvgDataUrl = (color) => {
+    const svgString = encodeURIComponent(renderToStaticMarkup(_jsx(IconFolderForCSS, { fill: color })));
+    return `data:image/svg+xml,${svgString}`;
+};
 const StyledFileManagerWrapper = styled.div `
   .dx-filemanager .dx-treeview-item .dx-icon-folder {
     display: none !important;
@@ -44,7 +45,7 @@ const StyledFileManagerWrapper = styled.div `
     width: 20px;
     height: 20px;
     transform: translateY(-50%);
-    background-image: url("${svgDataUrl}");
+    background-image: url("${props => generateSvgDataUrl(props.$folderColor)}");
     background-size: contain;
     background-repeat: no-repeat;
     display: inline-block;
@@ -252,8 +253,24 @@ const TMAreaManager = (props = { selectionMode: 'multiple', isPathChooser: false
                     else {
                         msg = SDKUI_Localizator.FileManager_QuestionAlreadyExistsFiles.replaceParams(resolvesForExistingFiles.length.toString());
                     }
-                    const result = confirm(msg, SDKUI_Localizator.Attention);
-                    result.then((dialogResult) => {
+                    const confirmDialog = custom({
+                        title: SDKUI_Localizator.Attention,
+                        messageHtml: `<div style="padding: 15px; font-size: 1rem; max-width: 500px; word-wrap: break-word; overflow-wrap: break-word;">${msg}</div>`,
+                        buttons: [
+                            {
+                                text: SDKUI_Localizator.Yes ?? "Yes",
+                                onClick: () => true,
+                                type: "default",
+                                stylingMode: "contained"
+                            },
+                            {
+                                text: SDKUI_Localizator.No ?? "No",
+                                onClick: () => false,
+                                stylingMode: "outlined"
+                            }
+                        ]
+                    });
+                    confirmDialog.show().then((dialogResult) => {
                         resolvesForNonExistingFiles.forEach((res) => {
                             res({
                                 cancel: false,
@@ -390,7 +407,9 @@ const TMAreaManager = (props = { selectionMode: 'multiple', isPathChooser: false
     const deleteItem = async (item) => {
         const ad = item.dataItem.dataItem;
         const aid = ad.id;
-        const subFolder = item.parentPath === ad.name ? '' : item.parentPath.replace(ad.name + '/', '');
+        const subFolderOld = item.parentPath === ad.name ? '' : item.parentPath.replace(ad.name + '/', '');
+        const subFolder = getSubFolder(item.parentPath, ad.name);
+        console.log("Delete item with subfolder: ", subFolder, " old subfolder: ", subFolderOld);
         const tms = props.tmSession ?? SDK_Globals.tmSession;
         if (item.isDirectory) {
             await tms?.NewAreaEngine().DeleteFoldersAsync(aid, subFolder, [item.name]).catch((err) => { throw new FileSystemError(5, item, err.message ?? SDKUI_Localizator.GetFolderDeletionErrorMessage); });
@@ -594,16 +613,29 @@ const TMAreaManager = (props = { selectionMode: 'multiple', isPathChooser: false
             throw new FileSystemError(5, undefined, error.message ?? SDKUI_Localizator.Error);
         }
     };
+    const getSubFolder = (dir, startStr) => {
+        //Se devo controllare che inizi per il nome dell'area, se non inizia ritorno la dir così com'è (caso di file aperto da percorso completo)
+        if (startStr && !dir.startsWith(startStr)) {
+            return dir;
+        }
+        //In tutti gli altri casi rimuovo la prima cartella del percorso (che corrisponde al nome dell'area) e la restituisco come subfolder
+        const parts = dir.split("/");
+        console.log(parts);
+        let subFolder = parts.slice(1).join("/");
+        console.log(subFolder);
+        return subFolder;
+    };
     const onCurrentDirectoryChanged = (e) => {
         setCurrentRoute(e.directory.path);
         setFocusedFileSystemItem(e.directory);
+        console.log("Current directory changed: ", e.directory);
         if (e.directory.path === '' && e.directory.name === '')
             return;
         let ad = e.directory.dataItem.dataItem;
         if (!ad)
             return;
         let aid = ad.id;
-        let subFolder = e.directory.path.replace(ad.name + '/', '').replace(ad.name, '');
+        let subFolder = getSubFolder(e.directory.path);
         setAreaFolder(getAreaPath(aid, subFolder));
         e.component.option("fileSystemProvider").getItems(e.directory).then((items) => {
             setParentDirectoryFileSystemItems(items);
@@ -632,7 +664,7 @@ const TMAreaManager = (props = { selectionMode: 'multiple', isPathChooser: false
     };
     const customizeIcon = useCallback((fileSystemItem) => {
         if (fileSystemItem.isDirectory) {
-            return svgToString(_jsx(IconFolder, { fontSize: 20, color: TMColors.iconLight }));
+            return svgToString(_jsx(IconFolder, { fontSize: 20, color: getFileManagerFolderColor(SDK_Globals.tmSession?.SessionDescr?.appModuleID ?? AppModules.SURFER) }));
         }
         else {
             const fileExtension = fileSystemItem.getFileExtension();
@@ -723,11 +755,12 @@ const TMAreaManager = (props = { selectionMode: 'multiple', isPathChooser: false
             alert(`"${e.name}" ${SDKUI_Localizator.FolderExist}`, SDKUI_Localizator.Attention);
         }
     };
-    return (_jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, showWaitPanelSecondary: showSecondary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, waitPanelTextSecondary: waitPanelTextSecondary, waitPanelValueSecondary: waitPanelValueSecondary, waitPanelMaxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, children: _jsxs(StyledFileManagerWrapper, { style: { width: "100%", height: "100%" }, children: [_jsxs(FileManager, { width: props.width, ref: fileManagerRef, height: `calc(${props.height} - 30px)`, onItemMoving: onItemCopying, onItemCopying: onItemCopying, onFileUploading: onFileUploading, fileSystemProvider: areaProvider, customizeThumbnail: customizeIcon, rootFolderName: SDK_Localizator.Areas, onSelectionChanged: onSelectionChanged, onDirectoryCreating: onDirectoryCreating, onFocusedItemChanged: onFocusedItemChanged, onSelectedFileOpened: onSelectedFileOpened, onContextMenuItemClick: onContextMenuItemClick, 
+    const folderColor = getFileManagerFolderColor(SDK_Globals.tmSession?.SessionDescr?.appModuleID ?? AppModules.SURFER);
+    return (_jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, showWaitPanelSecondary: showSecondary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, waitPanelTextSecondary: waitPanelTextSecondary, waitPanelValueSecondary: waitPanelValueSecondary, waitPanelMaxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, children: _jsxs(StyledFileManagerWrapper, { "$folderColor": folderColor, style: { width: "100%", height: "100%" }, children: [_jsxs(FileManager, { width: props.width, ref: fileManagerRef, height: `calc(${props.height} - 30px)`, onItemMoving: onItemCopying, onItemCopying: onItemCopying, onFileUploading: onFileUploading, fileSystemProvider: areaProvider, customizeThumbnail: customizeIcon, rootFolderName: SDK_Localizator.Areas, onSelectionChanged: onSelectionChanged, onDirectoryCreating: onDirectoryCreating, onFocusedItemChanged: onFocusedItemChanged, onSelectedFileOpened: onSelectedFileOpened, onContextMenuItemClick: onContextMenuItemClick, 
                     /* onItemMoved={() => setCounter(counter => counter + 1)}
                     onItemCopied={() => setCounter(counter => counter + 1)}
                     onItemDeleted={() => setCounter(counter => counter - 1)}
                     onFileUploaded={() => setCounter(counter => counter + 1)} */
-                    onCurrentDirectoryChanged: onCurrentDirectoryChanged, selectionMode: props.selectionMode === 'single' ? 'single' : selectionMode, children: [_jsxs(Toolbar, { children: [_jsx(Item, { name: "showNavPane", visible: true }), _jsx(Item, { name: "create", visible: true }), _jsx(Item, { name: "upload", visible: true }), _jsx(Item, { name: "separator", location: 'after' }), _jsx(Item, { name: "switchView", visible: true }), _jsx(Item, { name: "refresh", visible: true })] }), _jsx(ContextMenu, { items: ["create", "upload", "rename", "move", "copy", "delete", "refresh", "download"] }), _jsx(Permissions, { copy: focusedFileSystemItem && focusedFileSystemItem.name !== "" && !areasRoots.has(focusedFileSystemItem.name), move: focusedFileSystemItem && focusedFileSystemItem.name !== "" && !areasRoots.has(focusedFileSystemItem.name), create: focusedFileSystemItem && focusedFileSystemItem.name !== "", upload: focusedFileSystemItem && focusedFileSystemItem.name !== "", rename: focusedFileSystemItem && focusedFileSystemItem.name !== "" && !areasRoots.has(focusedFileSystemItem.name), delete: focusedFileSystemItem && focusedFileSystemItem.name !== "" && !areasRoots.has(focusedFileSystemItem.name), download: true }), _jsx(ItemView, { children: _jsxs(Details, { children: [_jsx(Column, { dataField: "thumbnail", cssClass: 'file-thumbnail' }, "thumbnail"), _jsx(Column, { dataField: "name", caption: SDKUI_Localizator.Name }, "name"), _jsx(Column, { dataField: 'size', width: '120px', alignment: 'center', dataType: 'number', caption: SDKUI_Localizator.File_Size }, "size"), _jsx(Column, { dataField: 'dateModified', width: '160px', alignment: 'center', dataType: 'datetime', caption: SDKUI_Localizator.Date_Modified }, "dateModified")] }) }), _jsx(Notifications, { showPopup: true, showPanel: true })] }), _jsx("div", { style: { width: "100%", height: "30px", overflowY: "hidden" }, children: _jsx(TMCounterContainer, { items: counterValues }) })] }) }));
+                    onCurrentDirectoryChanged: onCurrentDirectoryChanged, selectionMode: props.selectionMode === 'single' ? 'single' : selectionMode, children: [_jsxs(Toolbar, { children: [_jsx(Item, { name: "showNavPane", visible: true }), _jsx(Item, { name: "create", visible: true }), _jsx(Item, { name: "upload", visible: true }), _jsx(Item, { name: "separator", location: 'after' }), _jsx(Item, { name: "switchView", visible: true }), _jsx(Item, { name: "refresh", visible: true })] }), _jsx(ContextMenu, { items: ["create", "upload", "rename", "move", "copy", "delete", "refresh", "download"] }), _jsx(Permissions, { copy: focusedFileSystemItem && focusedFileSystemItem.name !== "" && getSubFolder(focusedFileSystemItem.path).length > 0, move: focusedFileSystemItem && focusedFileSystemItem.name !== "" && getSubFolder(focusedFileSystemItem.path).length > 0, create: focusedFileSystemItem && focusedFileSystemItem.name !== "", upload: focusedFileSystemItem && focusedFileSystemItem.name !== "", rename: focusedFileSystemItem && focusedFileSystemItem.name !== "" && getSubFolder(focusedFileSystemItem.path).length > 0, delete: focusedFileSystemItem && focusedFileSystemItem.name !== "" && getSubFolder(focusedFileSystemItem.path).length > 0, download: true }), _jsx(ItemView, { children: _jsxs(Details, { children: [_jsx(Column, { dataField: "thumbnail", cssClass: 'file-thumbnail' }, "thumbnail"), _jsx(Column, { dataField: "name", caption: SDKUI_Localizator.Name }, "name"), _jsx(Column, { dataField: 'size', width: '120px', alignment: 'center', dataType: 'number', caption: SDKUI_Localizator.File_Size }, "size"), _jsx(Column, { dataField: 'dateModified', width: '160px', alignment: 'center', dataType: 'datetime', caption: SDKUI_Localizator.Date_Modified }, "dateModified")] }) }), _jsx(Notifications, { showPopup: true, showPanel: true })] }), _jsx("div", { style: { width: "100%", height: "30px", overflowY: "hidden" }, children: _jsx(TMCounterContainer, { items: counterValues }) })] }) }));
 };
 export default TMAreaManager;

package/lib/components/base/TMFileManagerDataGridView.js

@@ -59,7 +59,7 @@ const TMFileManagerDataGridView = (props) => {
         const lockMode = checkoutDate && checkoutUsedId && userID && userID !== checkoutUsedId;
         const editLockTooltipText = _jsxs(_Fragment, { children: [_jsxs("div", { style: { textAlign: "center" }, children: [editMode && (_jsxs(_Fragment, { children: [_jsx("i", { style: { fontSize: "18px", color: "#28a745", fontWeight: "bold" }, className: "dx-icon-edit" }), SDKUI_Localizator.CurrentUserExtract] })), lockMode && (_jsxs(_Fragment, { children: [_jsx("i", { style: { fontSize: "18px", color: "#28a745", 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 }), ": ", findCheckOutUserName(checkOutUserName, checkOutUserID) ?? '-', " (ID: ", checkOutUserID, ")"] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.ExtractedOn }), ": ", Globalization.getDateTimeDisplayValue(checkoutDate?.toString())] })] }), _jsx("hr", {}), _jsx("ul", { children: _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.Version }), ": ", version ?? 1] }) }), _jsx("hr", {}), _jsxs("ul", { children: [_jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.Type }), ": ", ext] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.CreationTime }), ": ", Globalization.getDateTimeDisplayValue(creationTime?.toString())] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.LastUpdateTime }), ": ", Globalization.getDateTimeDisplayValue(lastUpdateTime?.toString())] })] })] })] });
         return _jsxs("div", { style: { display: "inline-flex", alignItems: "center", gap: "4px" }, children: [editMode && _jsx(TMTooltip, { content: editLockTooltipText, children: _jsx("i", { style: { fontSize: "18px", color: "#28a745", fontWeight: "bold" }, className: "dx-icon-edit" }) }), lockMode && _jsx(TMTooltip, { content: editLockTooltipText, children: _jsx("i", { style: { fontSize: "18px", color: "#28a745", fontWeight: "bold" }, className: "dx-icon-lock" }) }), renderHighlightedText(cellData.value, searchText, false)] });
-    }, [searchText]);
+    }, [searchText, findCheckOutUserName]);
     const cellExtRender = useCallback((cellData) => {
         const item = cellData.data;
         const tooltipContent = (_jsxs("div", { style: { textAlign: 'left' }, children: [_jsxs("div", { children: [_jsx("span", { style: { fontWeight: 'bold' }, children: "ID:" }), " ", item.id ?? '-'] }), _jsxs("div", { children: [_jsx("span", { style: { fontWeight: 'bold' }, children: "DID:" }), " ", item.did ?? '-'] }), _jsxs("div", { children: [_jsx("span", { style: { fontWeight: 'bold' }, children: "TID:" }), " ", item.tid ?? '-'] }), _jsx("hr", {}), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Name, ":"] }), " ", item.name ?? '-'] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Author, ":"] }), " ", item.updaterName ?? '-'] }), _jsx("hr", {}), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Version, ":"] }), " ", item.version] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Size, ":"] }), " ", formatBytes(item.size ?? 0)] }), _jsx("hr", {}), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.CreationTime, ":"] }), " ", Globalization.getDateTimeDisplayValue(item.creationTime)] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.LastUpdateTime, ":"] }), " ", Globalization.getDateTimeDisplayValue(item.lastUpdateTime)] })] }));
@@ -85,7 +85,7 @@ const TMFileManagerDataGridView = (props) => {
             { 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]);
+    }, [searchText, cellNameRender]);
     return _jsx(TMDataGrid, { dataSource: items ?? [], dataColumns: dataColumns, focusedRowKey: focusedRowKey, selectedRowKeys: selectedRowKeys, onFocusedRowChanged: onFocusedRowChanged, onSelectionChanged: onSelectionChanged, onCellDblClick: onCellDblClick, customContextMenuItems: fileContextMenuItems, showSearchPanel: false, noDataText: SDKUI_Localizator.FolderIsEmpty }, items.length);
 };
 export default TMFileManagerDataGridView;

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

@@ -40,11 +40,15 @@ export declare const colors: {
     LIGHT_YELLOW: string;
     MEDIUM_GREEN: string;
 };
-export declare const TMFileItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+export declare const TMFileItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$backgroundColor" | "$textColor" | "$bgHoverColor"> & {
     $backgroundColor?: string;
     $textColor?: string;
     $bgHoverColor?: string;
-}>> & string;
+}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$backgroundColor" | "$textColor" | "$bgHoverColor"> & {
+    $backgroundColor?: string;
+    $textColor?: string;
+    $bgHoverColor?: string;
+}, never>>> & string;
 export declare const findFileItems: (items: Array<FileItem>, id: number) => FileItem | undefined;
 export declare const setFolderTreeViewItems: (items: Array<FileItem>) => Array<TMFileManagerTreeViewDirectory>;
 export declare const buildFolderHierarchy: (fileSystemTree: WGTreeDescriptor | undefined, draftsFile: SearchResultDescriptor | undefined, archivedDocuments: Array<SearchResultDescriptor> | undefined, participants: Array<UserDescriptor> | undefined) => {

package/lib/components/base/TMPanel.js

@@ -26,6 +26,7 @@ const StyledPanelContainer = styled.div `
     height: ${({ $isMaximized }) => $isMaximized ? `calc(100vh - 50px - (${Gutters.getGutters()}px * 2))` : '100%'};
     z-index: ${({ $isMaximized }) => $isMaximized ? 2000 : 'auto'};
     margin: ${({ $isMaximized }) => $isMaximized ? `${Gutters.getGutters()}px` : '0'};
+    outline: none;
     /* transition: all 0.2s; */
 `;
 const StyledPanelHeader = styled.div `

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

@@ -30,7 +30,9 @@ interface ITMTreeViewProps<T extends ITMTreeItem> {
 }
 declare const TMTreeView: <T extends ITMTreeItem>({ dataSource, focusedItem, selectedItems, allowMultipleSelection, onDataChanged, calculateItemsForNode, itemRender, onNodeUpdate, onFocusedItemChanged, onSelectionChanged, shouldDelayFocusOnEvent, onItemContextMenu, autoSelectChildren, itemsPerPage, showLoadMoreButton }: ITMTreeViewProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default TMTreeView;
-export declare const StyledTreeNode: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+export declare const StyledTreeNode: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isSelected"> & {
     $isSelected?: boolean;
-}>> & string;
-export declare const StyledStickyPaginator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isSelected"> & {
+    $isSelected?: boolean;
+}, never>>> & string;
+export declare const StyledStickyPaginator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;

package/lib/components/choosers/TMDataListItemChooser.js

@@ -1,17 +1,71 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { SDK_Localizator, DataListCacheService } from '@topconsultnpm/sdk-ts';
 import { StyledDivHorizontal } from '../base/Styled';
 import { IconSearch, SDKUI_Localizator, TMImageLibrary } from '../../helper';
+import { TMColors } from '../../utils/theme';
 import TMSpinner from '../base/TMSpinner';
+import TMTooltip from '../base/TMTooltip';
 import TMSummary from '../editors/TMSummary';
 import TMChooserForm from '../forms/TMChooserForm';
 import TMDataListItemViewer from '../viewers/TMDataListItemViewer';
+import { useDataListItem } from '../../hooks/useDataListItem';
 const TMDataListItemChooser = ({ labelColor, width = '100%', dataListId, icon, backgroundColor, showBorder = true, readOnly, openChooserBySingleClick, buttons = [], elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, titleForm, showClearButton = false, validationItems = [], onValueChanged, updateIsModalOpen }) => {
+    const { loadDataListsAsync, getDataListItem, convertToDataListValue } = useDataListItem();
+    const [dataListLoaded, setDataListLoaded] = useState(false);
+    useEffect(() => {
+        const loadData = async () => {
+            if (dataListId) {
+                try {
+                    setDataListLoaded(false);
+                    await loadDataListsAsync(new Set([dataListId]));
+                    setDataListLoaded(true);
+                }
+                catch (err) {
+                    console.error(`Error loading DataList with ID ${dataListId}:`, err);
+                    setDataListLoaded(false);
+                }
+            }
+            else {
+                setDataListLoaded(false);
+            }
+        };
+        loadData();
+    }, [dataListId, loadDataListsAsync]);
     const [showChooser, setShowChooser] = useState(false);
+    const getDisplayValue = (value) => {
+        if (!dataListId || !dataListLoaded)
+            return value;
+        const item = getDataListItem(dataListId, convertToDataListValue(value));
+        return item?.name ?? value;
+    };
     const renderTemplate = () => {
+        const MIN_COUNT_FOR_BADGE = 1;
+        const MAX_VISIBLE_ITEMS = 3;
+        const MAX_TOOLTIP_ITEMS = 50;
         const isPlaceholder = values?.[0] === placeHolder;
-        return (_jsxs(StyledDivHorizontal, { style: { width: '100%', color: isPlaceholder ? '#a9a9a9' : 'inherit' }, children: [values && values.length > 0 && _jsx(TMDataListItemViewer, { dataListId: dataListId, value: values?.[0] }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }));
+        const remainingCount = (values?.length ?? 0) - MAX_VISIBLE_ITEMS;
+        const totalCount = values?.length ?? 0;
+        const displayValues = values?.map(v => getDisplayValue(v)) ?? [];
+        const allValuesTooltip = displayValues.length > MAX_TOOLTIP_ITEMS
+            ? displayValues.slice(0, MAX_TOOLTIP_ITEMS).join(', ') + ` ... (+${values.length - MAX_TOOLTIP_ITEMS})`
+            : displayValues.join(', ');
+        return (_jsxs(StyledDivHorizontal, { style: { width: '100%', justifyContent: 'flex-start', color: isPlaceholder ? '#a9a9a9' : 'inherit', alignItems: 'center' }, children: [values && values.length > 0 && _jsxs(StyledDivHorizontal, { style: { alignItems: 'center', gap: '2px' }, children: [totalCount > MIN_COUNT_FOR_BADGE && _jsx(TMTooltip, { content: _jsx("div", { style: { maxWidth: '300px', wordWrap: 'break-word', whiteSpace: 'pre-wrap' }, children: allValuesTooltip }), children: _jsx(StyledDivHorizontal, { style: { alignItems: 'center', gap: '4px' }, children: _jsx("span", { style: {
+                                        backgroundColor: TMColors.primary + '15',
+                                        color: TMColors.primary,
+                                        borderRadius: '4px',
+                                        padding: '2px 6px',
+                                        fontSize: '11px',
+                                        fontWeight: 600,
+                                        letterSpacing: '0.3px'
+                                    }, children: totalCount }) }) }), values.slice(0, MAX_VISIBLE_ITEMS).map((v, index) => (_jsx(React.Fragment, { children: _jsxs("span", { style: { display: 'inline-flex', alignItems: 'center' }, children: [_jsx(TMDataListItemViewer, { dataListId: dataListId, value: v, width: 'auto', showTooltip: false }), index < Math.min(values.length, MAX_VISIBLE_ITEMS) - 1 && _jsx("span", { style: { marginLeft: 0 }, children: "," })] }) }, index)))] }), values && values.length > MAX_VISIBLE_ITEMS &&
+                    _jsx(TMTooltip, { content: _jsx("div", { style: { maxWidth: '300px', wordWrap: 'break-word', whiteSpace: 'pre-wrap' }, children: (() => {
+                                const remainingValues = values.slice(MAX_VISIBLE_ITEMS);
+                                const remainingDisplayValues = remainingValues.map(v => getDisplayValue(v));
+                                return remainingDisplayValues.length > MAX_TOOLTIP_ITEMS
+                                    ? remainingDisplayValues.slice(0, MAX_TOOLTIP_ITEMS).join(', ') + ` ... (+${remainingValues.length - MAX_TOOLTIP_ITEMS})`
+                                    : remainingDisplayValues.join(', ');
+                            })() }), children: _jsx("p", { style: { marginLeft: '10px' }, children: `(+${remainingCount} ${remainingCount === 1 ? 'altro' : 'altri'})` }) })] }));
     };
     const summaryInputRef = useRef(null);
     return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { ref: summaryInputRef, placeHolder: placeHolder, labelColor: labelColor, width: width, icon: icon, buttons: buttons, readOnly: readOnly, backgroundColor: backgroundColor, showBorder: showBorder, hasValue: values && values.length > 0, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => {

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

@@ -39,4 +39,4 @@ interface ITMDynDataListItemChooserFormProps extends ITMChooserFormProps<DataLis
     dynDL?: DynamicDataListDescriptor;
     searchResult?: SearchResultDescriptor;
 }
-export declare const TMDynDataListItemChooserForm: React.FunctionComponent<ITMDynDataListItemChooserFormProps>;
+export declare const TMDynDataListItemChooserForm: (props: ITMDynDataListItemChooserFormProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/choosers/TMDynDataListItemChooser.js

@@ -53,17 +53,20 @@ const TMDynDataListItemChooser = ({ tid, md, width = '100%', titleForm, openChoo
         return await SDK_Globals.tmSession?.NewSearchEngine().GetDynDataListValuesAsync(tid, md?.id, layoutMode, queryParamsDynDataList ?? [])
             .catch((err) => { throw err; });
     };
-    const getDescription = () => {
-        if (!Array.isArray(values))
-            return "";
-        if (!values || values.length <= 0)
-            return "";
-        if (!values[0])
+    const getValueDescription = (value) => {
+        if (!value)
             return "";
         if (!dynDl)
-            return values?.[0];
-        let description = dataSource?.dtdResult?.rows?.filter(o => o[dynDl.selectItemForValue ?? 0] == values?.[0])?.[0]?.[dynDl.selectItemForDescription ?? 0];
-        return description ?? values?.[0];
+            return value;
+        let description = dataSource?.dtdResult?.rows?.filter(o => o[dynDl.selectItemForValue ?? 0] == value)?.[0]?.[dynDl.selectItemForDescription ?? 0];
+        return description ?? value;
+    };
+    const getDescriptions = (maxItems = 3) => {
+        if (!Array.isArray(values))
+            return [];
+        if (!values || values.length <= 0)
+            return [];
+        return values.slice(0, maxItems).map(v => getValueDescription(v)).filter(d => d !== "");
     };
     const getIcon = () => {
         if (!Array.isArray(values))
@@ -75,14 +78,38 @@ const TMDynDataListItemChooser = ({ tid, md, width = '100%', titleForm, openChoo
         if (FormulaHelper.isFormula(values?.[0]))
             return null;
         if (!dynDl)
-            return _jsx(IconDetails, {});
-        let description = dataSource?.dtdResult?.rows?.filter(o => o[dynDl.selectItemForValue ?? 0] == values?.[0])?.[0]?.[dynDl.selectItemForDescription ?? 0];
-        return description ? _jsx(IconDetails, {}) :
+            return null;
+        let description = dataSource?.dtdResult?.rows?.filter(o => o[dynDl.selectItemForValue ?? 0]?.toString().toLowerCase() === values?.[0]?.toString().toLowerCase())?.[0]?.[dynDl.selectItemForDescription ?? 0];
+        return description ? null :
             _jsx(TMTooltip, { content: SDKUI_Localizator.ValueNotPresent, children: _jsx(IconWarning, { color: TMColors.warning }) });
     };
     const renderTemplate = () => {
+        const MIN_COUNT_FOR_BADGE = 1;
+        const MAX_VISIBLE_ITEMS = 3;
+        const MAX_TOOLTIP_ITEMS = 50;
         const isPlaceholder = values?.[0] === placeHolder;
-        return (_jsxs(StyledDivHorizontal, { style: { width: '100%', color: isPlaceholder ? '#a9a9a9' : 'inherit' }, 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'})` })] }));
+        const descriptions = getDescriptions(MAX_VISIBLE_ITEMS);
+        const remainingCount = (values?.length ?? 0) - MAX_VISIBLE_ITEMS;
+        const totalCount = values?.length ?? 0;
+        const allDescriptionsArray = values?.map(v => getValueDescription(v)).filter(d => d !== "") ?? [];
+        const allDescriptions = allDescriptionsArray.length > MAX_TOOLTIP_ITEMS
+            ? allDescriptionsArray.slice(0, MAX_TOOLTIP_ITEMS).join(', ') + ` ... (+${allDescriptionsArray.length - MAX_TOOLTIP_ITEMS})`
+            : allDescriptionsArray.join(', ');
+        return (_jsxs(StyledDivHorizontal, { style: { width: '100%', color: isPlaceholder ? '#a9a9a9' : 'inherit', alignItems: 'center' }, children: [dataSource && descriptions.length > 0 && _jsxs(StyledDivHorizontal, { style: { alignItems: 'center', gap: '8px' }, children: [totalCount > MIN_COUNT_FOR_BADGE && _jsx(TMTooltip, { content: _jsx("div", { style: { maxWidth: '300px', wordWrap: 'break-word', whiteSpace: 'pre-wrap' }, children: allDescriptions }), children: _jsx(StyledDivHorizontal, { style: { alignItems: 'center', gap: '4px' }, children: _jsx("span", { style: {
+                                        backgroundColor: TMColors.primary + '15',
+                                        color: TMColors.primary,
+                                        borderRadius: '4px',
+                                        padding: '2px 6px',
+                                        fontSize: '11px',
+                                        fontWeight: 600,
+                                        letterSpacing: '0.3px'
+                                    }, children: totalCount }) }) }), getIcon(), _jsx("p", { children: descriptions.join(', ') })] }), values && values.length > MAX_VISIBLE_ITEMS &&
+                    _jsx(TMTooltip, { content: _jsx("div", { style: { maxWidth: '300px', wordWrap: 'break-word', whiteSpace: 'pre-wrap' }, children: (() => {
+                                const remainingArray = values.slice(MAX_VISIBLE_ITEMS).map(v => getValueDescription(v));
+                                return remainingArray.length > MAX_TOOLTIP_ITEMS
+                                    ? remainingArray.slice(0, MAX_TOOLTIP_ITEMS).join(', ') + ` ... (+${remainingArray.length - MAX_TOOLTIP_ITEMS})`
+                                    : remainingArray.join(', ');
+                            })() }), children: _jsx("p", { style: { marginLeft: '10px' }, children: `(+${remainingCount} ${remainingCount === 1 ? 'altro' : 'altri'})` }) })] }));
     };
     return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { placeHolder: placeHolder, width: width, 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: () => {
                     if (!readOnly) {
@@ -135,9 +162,10 @@ const TMDynDataListItemChooser = ({ tid, md, width = '100%', titleForm, openChoo
 export default TMDynDataListItemChooser;
 const cellRenderIcon = () => _jsx(IconDetails, {});
 export const TMDynDataListItemChooserForm = (props) => {
+    const { TID, MID, layoutMode, dynDL, searchResult, selectedIDs, title, width, height, onChoose } = props;
     // Generate unique keys for all columns
-    const uniqueKeys = generateUniqueColumnKeys(props.searchResult?.dtdResult?.columns, props.searchResult?.fromTID);
-    const dataColumns = props.searchResult?.dtdResult?.columns?.map((col, index) => {
+    const uniqueKeys = generateUniqueColumnKeys(searchResult?.dtdResult?.columns, searchResult?.fromTID);
+    const dataColumns = searchResult?.dtdResult?.columns?.map((col, index) => {
         const isVisible = col.extendedProperties?.["Visibility"] != "Hidden";
         const dataType = () => {
             switch (col.dataType) {
@@ -149,23 +177,23 @@ export const TMDynDataListItemChooserForm = (props) => {
         };
         return { dataField: uniqueKeys[index], caption: col.caption, visible: isVisible, dataType: dataType(), format: col.dataType === DataColumnTypes.DateTime ? Globalization.getDateDisplayFormat() : "" };
     });
-    const keyValue = uniqueKeys[props.dynDL?.selectItemForValue ?? 0] ?? '';
+    const keyValue = uniqueKeys[dynDL?.selectItemForValue ?? 0] ?? '';
     const getItems = async (refreshCache) => {
-        if (!props.searchResult)
+        if (!searchResult)
             return [];
         if (refreshCache)
             DataListCacheService.RemoveAll();
         TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.DataList} ...` });
-        let result = await SDK_Globals.tmSession?.NewSearchEngine().GetDynDataListValuesAsync(props.TID, props.MID, props.layoutMode, [])
+        let result = await SDK_Globals.tmSession?.NewSearchEngine().GetDynDataListValuesAsync(TID, MID, layoutMode, [])
             .catch((err) => { TMSpinner.hide(); TMExceptionBoxManager.show({ exception: err }); });
         TMSpinner.hide();
         return result ? searchResultDescriptorToSimpleArray(result) ?? [] : [];
     };
     const getTitle = () => {
-        let title = SDK_Localizator.DataList;
-        if (props.title)
-            title += `: ${props.title}`;
-        return title;
+        let titleDataList = SDK_Localizator.DataList;
+        if (title)
+            titleDataList += `: ${title}`;
+        return titleDataList;
     };
-    return (_jsx(TMChooserForm, { title: getTitle(), allowMultipleSelection: props.allowMultipleSelection, width: props.width, height: props.height, keyName: keyValue ?? '', showDefaultColumns: false, hasShowId: false, columns: dataColumns, selectedIDs: props.selectedIDs, cellRenderIcon: cellRenderIcon, dataSource: searchResultDescriptorToSimpleArray(props.searchResult) ?? [], getItems: getItems, onClose: props.onClose, onChoose: (IDs) => props.onChoose?.(IDs) }));
+    return (_jsx(TMChooserForm, { title: getTitle(), allowMultipleSelection: props.allowMultipleSelection, width: width, height: height, keyName: keyValue ?? '', showDefaultColumns: false, hasShowId: false, columns: dataColumns, selectedIDs: selectedIDs, cellRenderIcon: cellRenderIcon, dataSource: searchResultDescriptorToSimpleArray(searchResult) ?? [], getItems: getItems, onClose: props.onClose, onChoose: (IDs) => onChoose?.(IDs) }));
 };

package/lib/components/editors/TMDateBox.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from 'react';
+import { useEffect, useId, useRef } from 'react';
 import { DateBox } from 'devextreme-react';
 import { DateDisplayTypes, Globalization } from '../../helper';
 import { TMColors } from '../../utils/theme';
 import TMVilViewer from '../base/TMVilViewer';
 const TMDateBox = (props) => {
     const resetTimeToZero = props.resetTimeToZeroOnKeyPress ?? true;
+    const autoId = useId();
+    const effectiveInputAttr = { id: autoId, ...props.inputAttr };
     useEffect(() => {
         let htmlElement = dateBoxRef?.current?.instance().element();
         if (!htmlElement)
@@ -63,7 +65,7 @@ const TMDateBox = (props) => {
             return "datetime";
         return props.dateDisplayType == DateDisplayTypes.Date ? "date" : "time";
     };
-    return (_jsxs("div", { style: { display: 'flex', alignItems: 'center', width: '100%', padding: props.padding }, children: [props.icon && (_jsx("span", { style: { marginRight: '8px', marginTop: '8px', display: 'flex', alignItems: 'center' }, children: props.icon })), _jsxs("div", { onContextMenu: (e) => e.stopPropagation(), style: { display: 'flex', flexDirection: 'column', gap: '5px', width: '100%' }, children: [_jsx(DateBox, { readOnly: props.readOnly, ref: dateBoxRef, showClearButton: props.showClearButton, dateSerializationFormat: props.useDateSerializationFormat ? 'yyyy-MM-ddTHH:mm:ss' : undefined, disabled: props.disabled, displayFormat: props.displayFormat ?? Globalization.getDateDisplayFormat(props.dateDisplayType), dropDownOptions: dropDownOptions, label: props.label, labelMode: 'static', type: getType(), useMaskBehavior: true, height: '28px', value: props.value, width: props.width, valueChangeEvent: 'keyup input change', onValueChange: (e) => { props.onValueChange?.(e); }, onInitialized: (e) => { props.onInitialized?.(e); }, onContentReady: (e) => { props.onContentReady?.(e); }, placeholder: props.placeholder, onKeyUp: (e) => {
+    return (_jsxs("div", { style: { display: 'flex', alignItems: 'center', width: '100%', padding: props.padding }, children: [props.icon && (_jsx("span", { style: { marginRight: '8px', marginTop: '8px', display: 'flex', alignItems: 'center' }, children: props.icon })), _jsxs("div", { onContextMenu: (e) => e.stopPropagation(), style: { display: 'flex', flexDirection: 'column', gap: '5px', width: '100%' }, children: [_jsx(DateBox, { readOnly: props.readOnly, ref: dateBoxRef, showClearButton: props.showClearButton, dateSerializationFormat: props.useDateSerializationFormat ? 'yyyy-MM-ddTHH:mm:ss' : undefined, disabled: props.disabled, displayFormat: props.displayFormat ?? Globalization.getDateDisplayFormat(props.dateDisplayType), dropDownOptions: dropDownOptions, label: props.label, labelMode: 'static', type: getType(), useMaskBehavior: true, height: '28px', value: props.value, width: props.width, valueChangeEvent: 'keyup input change', onValueChange: (e) => { props.onValueChange?.(e); }, onInitialized: (e) => { props.onInitialized?.(e); }, onContentReady: (e) => { props.onContentReady?.(e); }, placeholder: props.placeholder, ...(props.name && { name: props.name }), inputAttr: effectiveInputAttr, onKeyUp: (e) => {
                             if (e.event?.code == "Space") {
                                 const currentDate = new Date();
                                 currentDate.setHours(0, 0, 0, 0);

package/lib/components/editors/TMDropDown.js

@@ -54,9 +54,9 @@ const StyledDropDownEditorButton = styled.div `
     align-items: center;
     cursor: pointer;
 `;
-const TMDropDown = ({ validationItems = [], disabled = false, elementStyle, isModifiedWhen, labelPosition = 'left', label, icon, width = '100%', fontSize = FontSize.defaultFontSize, dataSource, value, onValueChanged, buttons = [], }) => {
+const TMDropDown = ({ validationItems = [], disabled = false, elementStyle, isModifiedWhen, labelPosition = 'left', label, icon, width = '100%', fontSize = FontSize.defaultFontSize, dataSource, value, onValueChanged, buttons = [], placeHolder, }) => {
     const [isFocused, setIsFocused] = useState(false);
-    const renderedLeftLabelTextBox = () => (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: _jsx(StyledEditorIcon, { "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { "$width": width, children: [label && _jsx(StyledEditorLabel, { "$isFocused": isFocused, "$labelPosition": labelPosition, "$disabled": disabled, children: label }), _jsxs(StyledDropDownWrapper, { "$width": width, children: [_jsx(StyledDropDown, { value: value, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), "$disabled": disabled, disabled: disabled, "$fontSize": fontSize, "$isModified": isModifiedWhen, "$vil": validationItems, onChange: onValueChanged, children: dataSource?.map((data, index) => (_jsx("option", { value: data.value, children: data.display }, index))) }), buttons.length > 0 && (_jsx(ButtonsContainer, { children: buttons.map((buttonItem) => (_jsx(StyledDropDownEditorButton, { onClick: buttonItem.onClick, children: _jsx(TMTooltip, { content: buttonItem.text, children: buttonItem.icon }) }, buttonItem.text))) })), _jsx(CustomArrow, {})] }), _jsx(TMVilViewer, { vil: validationItems })] }) })] }));
+    const renderedLeftLabelTextBox = () => (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: _jsx(StyledEditorIcon, { "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { "$width": width, children: [label && _jsx(StyledEditorLabel, { "$isFocused": isFocused, "$labelPosition": labelPosition, "$disabled": disabled, children: label }), _jsxs(StyledDropDownWrapper, { "$width": width, children: [_jsxs(StyledDropDown, { value: value, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), "$disabled": disabled, disabled: disabled, "$fontSize": fontSize, "$isModified": isModifiedWhen, "$vil": validationItems, onChange: onValueChanged, children: [placeHolder && _jsx("option", { value: "", disabled: true, hidden: true, children: placeHolder }), dataSource?.map((data, index) => (_jsx("option", { value: data.value, children: data.display }, index)))] }), buttons.length > 0 && (_jsx(ButtonsContainer, { children: buttons.map((buttonItem) => (_jsx(StyledDropDownEditorButton, { onClick: buttonItem.onClick, children: _jsx(TMTooltip, { content: buttonItem.text, children: buttonItem.icon }) }, buttonItem.text))) })), _jsx(CustomArrow, {})] }), _jsx(TMVilViewer, { vil: validationItems })] }) })] }));
     return _jsx("div", { style: elementStyle, children: renderedLeftLabelTextBox() });
 };
 export default TMDropDown;

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

@@ -2,10 +2,22 @@ import { ValidationItem } from '@topconsultnpm/sdk-ts';
 export declare const TMEditorsDefaultBorderRadius = "5px";
 export declare const TMEditorsDefaultLabelFontSize = "0.9rem";
 export declare const editorColorManager: (validationItems: ValidationItem[]) => string;
-export declare const StyledEditorContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+export declare const StyledEditorContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$width"> & {
     $width: string;
-}>> & string;
-export declare const StyledEditor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$width"> & {
+    $width: string;
+}, never>>> & string;
+export declare const StyledEditor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "$disabled" | "$isMobile" | "$width" | "$type" | "$borderRadius" | "$fontSize" | "$vil" | "$isModified" | "$maxValue"> & {
+    $vil: ValidationItem[];
+    $width: string;
+    $type: string;
+    $isModified: boolean;
+    $maxValue: number;
+    $fontSize: string;
+    $disabled: boolean;
+    $isMobile?: boolean;
+    $borderRadius?: string;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "$disabled" | "$isMobile" | "$width" | "$type" | "$borderRadius" | "$fontSize" | "$vil" | "$isModified" | "$maxValue"> & {
     $vil: ValidationItem[];
     $width: string;
     $type: string;
@@ -15,20 +27,40 @@ export declare const StyledEditor: import("styled-components/dist/types").IStyle
     $disabled: boolean;
     $isMobile?: boolean;
     $borderRadius?: string;
-}>> & string;
-export declare const StyledEditorIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+}, never>>> & string;
+export declare const StyledEditorIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$disabled" | "$vil" | "$isModified"> & {
     $vil: ValidationItem[];
     $disabled: boolean;
     $isModified: boolean;
-}>> & string;
-export declare const StyledEditorLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$disabled" | "$vil" | "$isModified"> & {
+    $vil: ValidationItem[];
+    $disabled: boolean;
+    $isModified: boolean;
+}, never>>> & string;
+export declare const StyledEditorLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$color" | "$disabled" | "$fontSize" | "$isFocused" | "$labelPosition"> & {
     $isFocused: boolean;
     $labelPosition: "right" | "left" | "top";
     $disabled: boolean;
     $fontSize?: string;
     $color?: string;
-}>> & string;
-export declare const StyledTextareaEditor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, {
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$color" | "$disabled" | "$fontSize" | "$isFocused" | "$labelPosition"> & {
+    $isFocused: boolean;
+    $labelPosition: "right" | "left" | "top";
+    $disabled: boolean;
+    $fontSize?: string;
+    $color?: string;
+}, never>>> & string;
+export declare const StyledTextareaEditor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "$maxHeight" | "$disabled" | "$isMobile" | "$width" | "$borderRadius" | "$fontSize" | "$vil" | "$isModified" | "$resize"> & {
+    $vil: ValidationItem[];
+    $width: string;
+    $isModified: boolean;
+    $fontSize: string;
+    $disabled: boolean;
+    $isMobile?: boolean;
+    $maxHeight?: string;
+    $borderRadius?: string;
+    $resize?: boolean;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "$maxHeight" | "$disabled" | "$isMobile" | "$width" | "$borderRadius" | "$fontSize" | "$vil" | "$isModified" | "$resize"> & {
     $vil: ValidationItem[];
     $width: string;
     $isModified: boolean;
@@ -38,4 +70,4 @@ export declare const StyledTextareaEditor: import("styled-components/dist/types"
     $maxHeight?: string;
     $borderRadius?: string;
     $resize?: boolean;
-}>> & string;
+}, never>>> & string;

package/lib/components/editors/TMFormulaEditor.js

@@ -132,12 +132,24 @@ const TMFormulaEditor = (props) => {
     const renderTreeViewItem = useCallback((item) => {
         return (_jsxs(StyledDivHorizontal, { style: { display: 'flex', gap: '5px', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }, children: [renderFormulaIcon(item.icon, item.tid, item.md), _jsx("p", { style: { verticalAlign: 'middle', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }, children: item.text })] }));
     }, []);
+    const translateDescInFormula = (text) => {
+        switch (text) {
+            case `TM_GetViewLink (${SDKUI_Localizator.FormulaEditor_Function_TM_GetViewLink_WithoutLogin})`:
+                return `[dbo].[TM_GetViewLink](NULL, NULL, NULL, 0, {@TID}, {@DID}, 1, NULL, 0)`;
+            case `TM_GetViewLink (${SDKUI_Localizator.FormulaEditor_Function_TM_GetViewLink_WithLogin})`:
+                return `[dbo].[TM_GetViewLink](NULL, 'ASKLOGIN', NULL, 0, {@TID}, {@DID}, 1, NULL, 0)`;
+            case `TM_GetViewLink (${SDKUI_Localizator.FormulaEditor_Function_TM_GetViewLink_WithDate})`:
+                return `[dbo].[TM_GetViewLink](NULL, NULL, NULL, 0, {@TID}, {@DID}, 1, CONVERT(VARCHAR, {@CreationTime}+30, 126), 0)`;
+                break;
+        }
+        return text;
+    };
     const handleTreeViewItemClick = (e) => {
         if (!e)
             return;
         if (e.itemData?.hasItems)
             return;
-        insertText(e.itemData?.text);
+        insertText(translateDescInFormula(e.itemData?.text));
     };
     return (_jsx(TMApplyForm, { isModal: props.isModal, formMode: props.formMode, isModified: formData.expression !== formDataOrig.expression, exception: exception, validationItems: validationItems, title: SDKUI_Localizator.Formula, hasNavigation: false, showBack: props.showBack, height: '600px', width: '800px', onApply: () => applyData(), onClose: props.onClose, onUndo: () => {
             setFormData(formDataOrig);
@@ -705,13 +717,13 @@ export class FormulaHelper {
     static jsonItems_LoadFunctions_Link() {
         let items = [{
                 id: '3_4_1',
-                text: `TM_GetViewLink (${SDKUI_Localizator.FormulaEditor_Function_TM_GetViewLink_WithLogin})`,
+                text: `TM_GetViewLink (${SDKUI_Localizator.FormulaEditor_Function_TM_GetViewLink_WithoutLogin})`,
                 icon: FormulaIconTypes.Function,
                 expanded: false,
                 hasItems: false,
             }, {
                 id: '3_4_2',
-                text: `TM_GetViewLink (${SDKUI_Localizator.FormulaEditor_Function_TM_GetViewLink_WithoutLogin})`,
+                text: `TM_GetViewLink (${SDKUI_Localizator.FormulaEditor_Function_TM_GetViewLink_WithLogin})`,
                 icon: FormulaIconTypes.Function,
                 expanded: false,
                 hasItems: false,