@topconsultnpm/sdkui-react 6.20.0-dev1.12 → 6.20.0-dev1.120

package/lib/components/sidebar/TMHeader.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useRef, useMemo } from 'react';
 import six from '../../assets/six.png';
-import { getAvatarColor, IconCloseOutline, IconCopy, IconSearch, openApps, SDKUI_Localizator } from '../../helper';
+import { getAvatarColor, IconCloseOutline, IconCopy, openApps, SDKUI_Localizator } from '../../helper';
 import styled, { keyframes } from 'styled-components';
 import { SDK_Globals, AuthenticationModes, AppModules, UserLevels, CultureIDs } from '@topconsultnpm/sdk-ts';
 import { TMColors } from '../../utils/theme';
@@ -87,7 +87,7 @@ export const copyUserInfoToClipboard = (userName, cultureId, archiveId, archiveD
 };
 export const TMSearchBar = ({ searchValue, onSearchValueChanged, maxWidth, marginLeft }) => {
     const deviceType = useDeviceType();
-    return (_jsxs(StyledSearchBarContainer, { style: { maxWidth: maxWidth ? maxWidth : deviceType === DeviceType.MOBILE ? '65%' : '650px', marginLeft: marginLeft ? marginLeft : deviceType === DeviceType.MOBILE ? '10px' : '20px' }, "$isMobile": deviceType === DeviceType.MOBILE, children: [" ", _jsx(IconSearch, { fontSize: 12, color: '#00000060', style: { position: 'absolute', width: '20px', height: '20px', left: '5px', top: '5px', zIndex: 1 } }), _jsx(StyledSearchBar, { placeholder: SDKUI_Localizator.Search + '...', type: "text", value: searchValue, onChange: (e) => onSearchValueChanged(e.target.value) }), searchValue.length > 0 && _jsx(IconCloseOutline, { onClick: () => onSearchValueChanged(''), color: '#00000060', style: { cursor: 'pointer', position: 'absolute', width: '20px', height: '20px', right: '5px', top: '5px', zIndex: 1 } })] }));
+    return (_jsxs(StyledSearchBarContainer, { style: { maxWidth: maxWidth ? maxWidth : deviceType === DeviceType.MOBILE ? '65%' : '650px', marginLeft: marginLeft ? marginLeft : deviceType === DeviceType.MOBILE ? '10px' : '20px' }, "$isMobile": deviceType === DeviceType.MOBILE, children: [" ", _jsx(StyledSearchBar, { placeholder: SDKUI_Localizator.Search + '...', type: "text", value: searchValue, onChange: (e) => onSearchValueChanged(e.target.value) }), searchValue.length > 0 && _jsx(IconCloseOutline, { onClick: () => onSearchValueChanged(''), color: '#00000060', style: { cursor: 'pointer', position: 'absolute', width: '20px', height: '20px', right: '5px', top: '5px', zIndex: 1 } })] }));
 };
 const TMHeader = ({ customButtons = _jsx(_Fragment, {}), onMenusOpen, showSettingsMenu = true, showSearchBar = true, clearSearchJobValue, clearSearchQEValue, searchContext = TMSearchContext.JOBS, onChangePassword, onLogout, settingsMenuContext, onSeacrhJobsValueChange, onSeacrhJobslistValueChange, onSeacrhProcessMonitorValueChange, onSeacrhProcessValueChange, onSeacrhPlatformValueChange, onSeacrhQEValueChange, onSettingsClick }) => {
     const [appRoutes, setAppRoutes] = useState();
@@ -302,9 +302,9 @@ const StyledLogo = styled.img `
 `;
 const StyledHeaderContainer = styled.div ` 
     position:fixed; 
-    width: 100%; 
-    height: 60px; 
-    background-color:transparent; 
+    height:60px; 
+    background: transparent;
+    background-size: 200%;
     opacity: 1; 
     display: flex; 
     flex-direction: row; 
@@ -381,8 +381,8 @@ const StyledHeaderIcon = styled.div `
         filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
     }
 `;
-const StyledSearchBarContainer = styled.div ` position: relative; height:30px; width: 100%; max-width: ${props => props.$isMobile ? '65%' : '650px'}; margin-left: ${props => props.$isMobile ? '10px' : '50px'}; `;
-const StyledSearchBar = styled.input ` background: #FFFFFF 0% 0% no-repeat padding-box; border: 1px solid #dbdbdb; border-radius: 5px; padding: 5px 30px; width:100%; transition: 100ms linear; &:focus{ outline: none; border-bottom: 2px solid ${TMColors.primary}; } `;
+const StyledSearchBarContainer = styled.div ` position: relative; height:35px; width: 100%; max-width: ${props => props.$isMobile ? '65%' : '650px'}; margin-left: ${props => props.$isMobile ? '10px' : '50px'}; `;
+const StyledSearchBar = styled.input ` background: #FFFFFF 0% 0% no-repeat padding-box; border: 1px solid #dbdbdb; border-radius: 5px; padding: 8px 30px 8px 20px; width:100%; transition: 100ms linear; &:focus{ outline: none; border-bottom: 2px solid ${TMColors.primary}; } `;
 const StyledHeaderAppText = styled.h2 ` text-align: left; letter-spacing: 0px; color: ${TMColors.primary}; opacity: 1; `;
 const AppMenuButton = styled.div `
   width: 90px;
@@ -400,6 +400,8 @@ const AppMenuButton = styled.div `
   cursor: pointer;
   box-shadow: 0 2px 8px #2459a41a;
   user-select: none;
+  -webkit-touch-callout: none;
+    -webkit-user-select: none;
   gap: 5px;
   transition:
     transform 0.18s cubic-bezier(.4,0,.2,1),
@@ -445,6 +447,8 @@ const UserAvatar = styled.div `
     font-weight: 600;
     letter-spacing: 0.5px;
     user-select: none;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 `;
 const UserAvatarLarge = styled(UserAvatar) `

package/lib/components/sidebar/TMSidebar.d.ts

@@ -9,7 +9,6 @@ export interface AppRoute {
     type?: AppRouteType;
 }
 interface ITMSidebar {
-    /** List of TMSidebarItem components that make up the menu */
     items: JSX.Element[];
     height?: string;
     width?: string;

package/lib/components/sidebar/TMSidebar.js

@@ -1,61 +1,33 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import styled from 'styled-components';
-import { AccessLevelsEx, DcmtTypeListCacheService, SDK_Globals } from '@topconsultnpm/sdk-ts';
+import { AppModules, SDK_Globals } from '@topconsultnpm/sdk-ts';
 import { ScrollView } from 'devextreme-react';
 import { TMColors } from '../../utils/theme';
-import TMSpinner from '../base/TMSpinner';
-import { TMExceptionBoxManager } from '../base/TMPopUp';
 const StyledTMSidebarContainer = styled.div `
-    top: ${props => props.$top || '53px'};
+    top: ${props => props.$top || '70px'};
     left: ${props => props.$left || '0px'};
     width: ${props => props.$width || '50px'};
-    height: ${props => props.$height || 'calc(100% - 88px)'};
-    background: ${() => TMColors.primaryColor} 0% 0% no-repeat padding-box;
-    box-shadow: 0px 3px 6px #00000029;
-    border-radius: 0;
+    height: ${props => props.$height || 'calc(100% - 90px)'};
+    background: linear-gradient(180deg, ${() => TMColors.primaryColor} 0%, ${props => props.$appName === AppModules.DESIGNER ? '#351525' : props.$appName === AppModules.ORCHESTRATOR ? '#0a3d23' : '#0a3d23'} 100%);
+    box-shadow: 2px 0 8px rgba(0,0,0,0.08);
+    border-radius: 0px 10px 10px 0px;
     opacity: 1;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     align-items: center;
-    padding: 10px 0px;
+    padding: 20px 0px;
     position: absolute;
-    border-top-right-radius: 10px;
-    border-bottom-right-radius: 10px;
     overflow: hidden;
-`;
-const FixedBottomContainer = styled.div `
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    position: relative;
-    bottom: 10px;
+    z-index: 100;
 `;
 const TMSidebar = ({ items, height, borderRightRadius, left, top, width }) => {
-    const [canArchive, setCanArhive] = useState(false);
-    const [canSearch, setCanSearch] = useState(false);
-    useEffect(() => {
-        getAllDcmtTypesAsync();
-    }, []);
-    const getAllDcmtTypesAsync = async () => {
-        try {
-            TMSpinner.show();
-            const res = await DcmtTypeListCacheService.GetAllWithoutMetadataAsync();
-            if (!res)
-                return;
-            if (res.some(r => r.perm?.canArchive === AccessLevelsEx.Yes))
-                setCanArhive(true);
-            if (res.some(r => r.perm?.canSearch === AccessLevelsEx.Yes))
-                setCanSearch(true);
-        }
-        catch (e) {
-            TMExceptionBoxManager.show({ exception: e });
-        }
-        finally {
-            TMSpinner.hide();
-        }
-    };
-    return (_jsxs(StyledTMSidebarContainer, { "$borderRightRadius": borderRightRadius, "$left": left, "$top": top, "$width": width, "$appName": SDK_Globals.appModule, "$height": height, children: [_jsx(ScrollView, { height: "100%", width: "100%", style: { padding: "5px 0 0 5px" }, useNative: true, children: items.filter(item => item.props.type !== 'app') }), _jsx(FixedBottomContainer, { children: items.filter(item => item.props.type === 'app') })] }));
+    return (_jsx(StyledTMSidebarContainer, { "$borderRightRadius": borderRightRadius, "$left": left, "$top": top, "$width": width, "$appName": SDK_Globals.appModule, "$height": height, children: _jsx(ScrollView, { height: "calc(100%)", width: "100%", useNative: true, children: _jsx("div", { style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    gap: "3px",
+                    width: "100%"
+                }, children: items.filter(item => item.props.type !== 'app') }) }) }));
 };
 export default TMSidebar;

package/lib/components/sidebar/TMSidebarItem.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import TMTooltip from '../base/TMTooltip';
 import { SDK_Globals } from '@topconsultnpm/sdk-ts';
-import { TMColors } from '../../utils/theme';
 var ApplicationThemeColor;
 (function (ApplicationThemeColor) {
     ApplicationThemeColor["SURFER"] = "#1d6f42";
@@ -11,29 +10,49 @@ var ApplicationThemeColor;
     ApplicationThemeColor["DESIGNER"] = "#482234";
 })(ApplicationThemeColor || (ApplicationThemeColor = {}));
 const StyledTMSidebarItemContainer = styled.div `
-    margin-bottom: 10px;
-    background-color: transparent;
-    padding: 5px 0 0 5px;
-    transition: all 200ms ease;
-    user-select: none;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px;
     cursor: pointer;
-    color:  ${(props) => props.$isSelected ? TMColors.primaryColor : '#fff'};
-    background-color: ${props => props.$isSelected ? 'white' : 'transparent'} ;
-    border-radius: 3px;
-    width: 32px;
-    height: 32px;
+    color: #fff;
+    position: relative;
+    transition: background-color 200ms ease;
+    user-select: none;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    background-color: ${props => props.$isSelected ? 'rgba(255,255,255,0.35)' : 'transparent'};
 
     p {
         display: none;
     }
 
-    &:hover {
-        background-color: ${props => !props.$isApp && 'white'};
-        color: ${props => !props.$isApp && TMColors.primaryColor};
-    }
+    ${props => !props.$isApp && css `
+        &:hover {
+            background-color: rgba(255,255,255,0.35);
+        }
+    `}
 `;
 const TMSidebarItem = (props) => {
     let app = SDK_Globals.appModule;
-    return (_jsx(TMTooltip, { hideAfterDelay: true, content: props.tooltipContent ?? props.name, children: _jsxs(StyledTMSidebarItemContainer, { "$app": app, "$isApp": props.isAppIcon, onClick: () => props.onClick?.(props), style: { position: 'relative' }, "$isSelected": props.isSelected, children: [_jsxs("div", { children: [_jsx("i", { children: props.icon }), _jsx("p", { children: props.name })] }), props.badgeNumber > 0 && _jsx("div", { style: { width: '22px', height: '22px', backgroundColor: '#f09c0a', position: 'absolute', borderRadius: '22px', top: -6, right: -6, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '1rem', fontWeight: 'bold' }, children: props.badgeNumber })] }) }));
+    return (_jsx(TMTooltip, { hideAfterDelay: true, content: props.tooltipContent ?? props.name, children: _jsxs(StyledTMSidebarItemContainer, { "$app": app, "$isApp": props.isAppIcon, onClick: () => props.onClick?.(props), "$isSelected": props.isSelected, children: [_jsxs("div", { children: [_jsx("i", { children: props.icon }), _jsx("p", { children: props.name })] }), props.badgeNumber > 0 && (_jsx("div", { style: {
+                        position: 'absolute',
+                        top: '4px',
+                        right: '4px',
+                        background: '#f09c0a',
+                        color: '#fff',
+                        fontSize: '10px',
+                        minWidth: '16px',
+                        height: '16px',
+                        borderRadius: '8px',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        padding: '0 4px',
+                        pointerEvents: 'none',
+                        fontWeight: 'bold'
+                    }, children: props.badgeNumber }))] }) }));
 };
 export default TMSidebarItem;

package/lib/components/viewers/TMDataListItemViewer.d.ts

@@ -4,7 +4,8 @@ interface ITMDataListItemViewerProps {
     dataListId?: number;
     value?: string | Date | number;
     viewMode?: DataListViewModes;
+    showTooltip?: boolean;
 }
-declare const TMDataListItemViewer: ({ dataListId, value, viewMode }: ITMDataListItemViewerProps) => import("react/jsx-runtime").JSX.Element;
+declare const TMDataListItemViewer: ({ dataListId, value, viewMode, showTooltip }: ITMDataListItemViewerProps) => import("react/jsx-runtime").JSX.Element | null;
 export default TMDataListItemViewer;
 export declare const cellRenderDataListItem: (data: DataGridTypes.ColumnCellTemplateData, dataListId?: number, viewMode?: DataListViewModes) => import("react/jsx-runtime").JSX.Element;

package/lib/components/viewers/TMDataListItemViewer.js

@@ -1,78 +1,42 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
-import { DataListCacheService, DataListViewModes } from '@topconsultnpm/sdk-ts';
-import { IconWarning, SDKUI_Localizator, TMImageLibrary } from '../../helper';
-import { StyledDivHorizontal } from '../base/Styled';
+import { DataListViewModes } from '@topconsultnpm/sdk-ts';
+import { SDKUI_Localizator } from '../../helper';
 import TMTooltip from '../base/TMTooltip';
-import { TMColors } from '../../utils/theme';
 import { TMExceptionBoxManager } from '../base/TMPopUp';
-import { FormulaHelper } from '../editors/TMFormulaEditor';
-const TMDataListItemViewer = ({ dataListId, value, viewMode = DataListViewModes.ImageAndDescription }) => {
-    const [dataListItem, setDataListItem] = useState();
+import { useDataListItem } from '../../hooks/useDataListItem';
+const TMDataListItemViewer = ({ dataListId, value, viewMode = DataListViewModes.ImageAndDescription, showTooltip = true }) => {
+    const { loadDataListsAsync, getDataListItem, renderDataListCell, convertToDataListValue } = useDataListItem();
+    const [dataListItem, setDataListItem] = useState(undefined);
     useEffect(() => {
-        if (!dataListId || value === undefined || value === null) {
-            setDataListItem(undefined);
-            return;
-        }
-        let stringValue;
-        if (value instanceof Date) {
-            stringValue = value.toISOString();
-        }
-        else if (typeof value === 'number') {
-            stringValue = value.toString();
-        }
-        else {
-            stringValue = value;
-        }
-        DataListCacheService.GetAsync(dataListId).then((dl) => { setDataListItem(dl?.items?.find(o => o.value == stringValue)); }).catch((err) => { TMExceptionBoxManager.show({ exception: err }); });
-    }, [dataListId, value]);
-    let showIcon = viewMode != DataListViewModes.Description;
-    const getIcon = () => {
-        if (!showIcon)
-            return null;
-        if (value === undefined || value === null)
-            return null;
-        let stringValue;
-        if (value instanceof Date) {
-            stringValue = value.toISOString();
-        }
-        else if (typeof value === 'number') {
-            stringValue = value.toString();
-        }
-        else {
-            stringValue = value;
-        }
-        if (FormulaHelper.isFormula(stringValue))
-            return null;
-        return dataListItem ? _jsx(TMImageLibrary, { imageID: dataListItem.imageID }) : _jsx(IconWarning, { color: TMColors.warning });
-    };
-    const getDescription = () => {
-        if (!dataListId)
-            return undefined;
-        if (value === undefined || value === null)
-            return undefined;
-        let displayValue;
-        if (value instanceof Date) {
-            displayValue = value.toLocaleDateString();
-        }
-        else if (typeof value === 'number') {
-            displayValue = value.toString();
-        }
-        else {
-            displayValue = value;
-        }
-        return dataListItem ? dataListItem.name : displayValue;
-    };
-    return (_jsx(TMTooltip, { content: dataListItem ? dataListItem.value : SDKUI_Localizator.ValueNotPresent, parentStyle: { width: '100%' }, childStyle: { width: '100%' }, children: _jsxs(StyledDivHorizontal, { style: { width: '100%' }, children: [getIcon(), _jsx("p", { style: {
-                        textAlign: 'left',
-                        marginLeft: showIcon ? '5px' : '',
-                        opacity: dataListItem ? 1 : 0.5,
-                        whiteSpace: 'nowrap',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        flexGrow: 1,
-                        minWidth: 0
-                    }, children: getDescription() })] }) }));
+        const loadData = async () => {
+            if (dataListId) {
+                try {
+                    await loadDataListsAsync(new Set([dataListId]));
+                    if (value !== undefined && value !== null) {
+                        const stringValue = convertToDataListValue(value);
+                        const item = getDataListItem(dataListId, stringValue);
+                        setDataListItem(item);
+                    }
+                    else {
+                        setDataListItem(undefined);
+                    }
+                }
+                catch (err) {
+                    TMExceptionBoxManager.show({ exception: err });
+                }
+            }
+            else {
+                setDataListItem(undefined);
+            }
+        };
+        loadData();
+    }, [dataListId, value, loadDataListsAsync, getDataListItem, convertToDataListValue]);
+    if (!dataListId || value === undefined || value === null) {
+        return null;
+    }
+    const content = renderDataListCell(value, dataListId, viewMode);
+    return showTooltip ? (_jsx(TMTooltip, { content: dataListItem ? dataListItem.value : SDKUI_Localizator.ValueNotPresent, parentStyle: { width: '100%' }, childStyle: { width: '100%' }, children: content })) : content;
 };
 export default TMDataListItemViewer;
 export const cellRenderDataListItem = (data, dataListId, viewMode) => {

package/lib/components/viewers/TMDataUserIdItemViewer.d.ts

@@ -0,0 +1,8 @@
+import { DataGridTypes } from 'devextreme-react/data-grid';
+interface ITMDataUserIdItemViewerProps {
+    userId?: number;
+    showIcon?: boolean;
+}
+declare const TMDataUserIdItemViewer: ({ userId, showIcon }: ITMDataUserIdItemViewerProps) => import("react/jsx-runtime").JSX.Element | null;
+export default TMDataUserIdItemViewer;
+export declare const cellRenderUserIdItem: (data: DataGridTypes.ColumnCellTemplateData, showIcon?: boolean) => import("react/jsx-runtime").JSX.Element;

package/lib/components/viewers/TMDataUserIdItemViewer.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { IconWarning, SDKUI_Localizator } from '../../helper';
+import TMTooltip from '../base/TMTooltip';
+import { TMExceptionBoxManager } from '../base/TMPopUp';
+import { useDataUserIdItem } from '../../hooks/useDataUserIdItem';
+import { TMColors } from '../../utils/theme';
+const TMDataUserIdItemViewer = ({ userId, showIcon = false }) => {
+    const { loadUsersAsync, getUserItem, renderUserIdViewer } = useDataUserIdItem();
+    const [userItem, setUserItem] = useState(undefined);
+    useEffect(() => {
+        const loadData = async () => {
+            if (userId && userId > 0) {
+                try {
+                    await loadUsersAsync(new Set([userId]));
+                    const item = getUserItem(userId);
+                    setUserItem(item);
+                }
+                catch (err) {
+                    TMExceptionBoxManager.show({ exception: err });
+                }
+            }
+            else {
+                setUserItem(undefined);
+            }
+        };
+        loadData();
+    }, [userId, loadUsersAsync, getUserItem]);
+    if (!userId || userId <= 0) {
+        return null;
+    }
+    const content = renderUserIdViewer(userId, showIcon);
+    return userItem ? content :
+        _jsx(TMTooltip, { content: SDKUI_Localizator.ValueNotPresent, children: _jsx(IconWarning, { color: TMColors.warning }) });
+};
+export default TMDataUserIdItemViewer;
+export const cellRenderUserIdItem = (data, showIcon) => {
+    return (_jsx(TMDataUserIdItemViewer, { userId: data.value, showIcon: showIcon }));
+};

package/lib/css/tm-sdkui.css

@@ -1 +1 @@
-@import"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap";@import"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap";*{margin:0;padding:0;box-sizing:border-box;font-family:"Open Sans",sans-serif}.tm-tooltip-container-base,.tm-tooltip-container-base-right,.tm-tooltip-container-base-bottom,.tm-tooltip-container-base-left,.tm-tooltip-container-base-top{position:absolute;width:max-content;height:max-content;border-radius:5px;user-select:none;z-index:20000070}.tm-tooltip-container-base-top{top:-0.8rem;left:0;transform:translateY(-100%)}.tm-tooltip-container-base-left{left:-0.8rem;top:0;transform:translateX(-100%)}.tm-tooltip-container-base-bottom{bottom:-0.8rem;left:0;transform:translateY(100%)}.tm-tooltip-container-base-right{right:-0.8rem;top:0;transform:translateX(100%)}.tm-tooltip-arrow,.tm-tooltip-arrow-right,.tm-tooltip-arrow-left,.tm-tooltip-arrow-top,.tm-tooltip-arrow-bottom{position:absolute;width:0;height:0;z-index:50000}.tm-tooltip-arrow-bottom{top:-8px;left:8px;border-bottom:9px solid #fff;border-left:9px solid rgba(0,0,0,0);border-right:9px solid rgba(0,0,0,0)}.tm-tooltip-arrow-top{bottom:-8px;left:8px;border-top:9px solid #fff;border-left:9px solid rgba(0,0,0,0);border-right:9px solid rgba(0,0,0,0)}.tm-tooltip-arrow-left{top:8px;right:-8px;border-left:9px solid #fff;border-top:9px solid rgba(0,0,0,0);border-bottom:9px solid rgba(0,0,0,0)}.tm-tooltip-arrow-right{top:8px;left:-8px;border-right:9px solid #fff;border-top:9px solid rgba(0,0,0,0);border-bottom:9px solid rgba(0,0,0,0)}#user-credentials-popup .dx-accordion-item-title::before{content:none !important}*{margin:0;padding:0;box-sizing:border-box;font-family:"Open Sans",sans-serif}.tm-tooltip-container-base,.tm-tooltip-container-base-top,.tm-tooltip-container-base-left,.tm-tooltip-container-base-bottom,.tm-tooltip-container-base-right{position:absolute;width:max-content;height:max-content;border-radius:5px;user-select:none;z-index:20000070}.tm-tooltip-container-base-top{top:-0.8rem;left:0;transform:translateY(-100%)}.tm-tooltip-container-base-left{left:-0.8rem;top:0;transform:translateX(-100%)}.tm-tooltip-container-base-bottom{bottom:-0.8rem;left:0;transform:translateY(100%)}.tm-tooltip-container-base-right{right:-0.8rem;top:0;transform:translateX(100%)}.tm-tooltip-arrow,.tm-tooltip-arrow-bottom,.tm-tooltip-arrow-top,.tm-tooltip-arrow-left,.tm-tooltip-arrow-right{position:absolute;width:0;height:0;z-index:50000}.tm-tooltip-arrow-bottom{top:-8px;left:8px;border-bottom:9px solid #fff;border-left:9px solid rgba(0,0,0,0);border-right:9px solid rgba(0,0,0,0)}.tm-tooltip-arrow-top{bottom:-8px;left:8px;border-top:9px solid #fff;border-left:9px solid rgba(0,0,0,0);border-right:9px solid rgba(0,0,0,0)}.tm-tooltip-arrow-left{top:8px;right:-8px;border-left:9px solid #fff;border-top:9px solid rgba(0,0,0,0);border-bottom:9px solid rgba(0,0,0,0)}.tm-tooltip-arrow-right{top:8px;left:-8px;border-right:9px solid #fff;border-top:9px solid rgba(0,0,0,0);border-bottom:9px solid rgba(0,0,0,0)}#user-credentials-popup .dx-accordion-item-title::before{content:none !important}@keyframes show-error{0%{display:none;opacity:0;z-index:20000999}5%{display:block;opacity:1;z-index:20000999}95%{display:block;opacity:1;z-index:20000999}100%{opacity:0;display:none;z-index:20000999}}.tm-alert-animation-style{animation:show-error both;animation-timing-function:linear;animation-iteration-count:none;z-index:20000999}.tm-alert-container{position:absolute;width:100%;height:100%;z-index:20000999}@keyframes loading{from{width:0}to{width:100%}}.tm-alert-loading{width:100%;height:5px;position:absolute;bottom:0;left:0;animation:loading;animation-duration:5000ms}.tm-alert-icon{position:absolute;width:22px;height:22px;background-color:#fff;top:"20px";left:"20px";border-radius:50%;display:flex;align-items:center;justify-content:center}.dx-context-menu.dx-overlay-content{height:auto !important;max-height:none !important}.dx-context-menu .dx-menu-items-container{max-height:none !important}.custom-mentions-wrapper span.dx-mention span[contenteditable=false]>span:first-child{font-size:0;width:0;display:inline-block;overflow:hidden}.custom-mentions-wrapper span.dx-mention{color:#2559a5;font-weight:bold;background-color:rgba(0,0,0,0)}
+@import"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap";@import"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap";*{margin:0;padding:0;box-sizing:border-box;font-family:"Open Sans",sans-serif}.tm-tooltip-container-base,.tm-tooltip-container-base-right,.tm-tooltip-container-base-bottom,.tm-tooltip-container-base-left,.tm-tooltip-container-base-top{position:absolute;width:max-content;height:max-content;border-radius:5px;user-select:none;z-index:20000070}.tm-tooltip-container-base-top{top:-0.8rem;left:0;transform:translateY(-100%)}.tm-tooltip-container-base-left{left:-0.8rem;top:0;transform:translateX(-100%)}.tm-tooltip-container-base-bottom{bottom:-0.8rem;left:0;transform:translateY(100%)}.tm-tooltip-container-base-right{right:-0.8rem;top:0;transform:translateX(100%)}.tm-tooltip-arrow,.tm-tooltip-arrow-right,.tm-tooltip-arrow-left,.tm-tooltip-arrow-top,.tm-tooltip-arrow-bottom{position:absolute;width:0;height:0;z-index:50000}.tm-tooltip-arrow-bottom{top:-8px;left:8px;border-bottom:9px solid #fff;border-left:9px solid rgba(0,0,0,0);border-right:9px solid rgba(0,0,0,0)}.tm-tooltip-arrow-top{bottom:-8px;left:8px;border-top:9px solid #fff;border-left:9px solid rgba(0,0,0,0);border-right:9px solid rgba(0,0,0,0)}.tm-tooltip-arrow-left{top:8px;right:-8px;border-left:9px solid #fff;border-top:9px solid rgba(0,0,0,0);border-bottom:9px solid rgba(0,0,0,0)}.tm-tooltip-arrow-right{top:8px;left:-8px;border-right:9px solid #fff;border-top:9px solid rgba(0,0,0,0);border-bottom:9px solid rgba(0,0,0,0)}#user-credentials-popup .dx-accordion-item-title::before{content:none !important}*{margin:0;padding:0;box-sizing:border-box;font-family:"Open Sans",sans-serif}.tm-tooltip-container-base,.tm-tooltip-container-base-top,.tm-tooltip-container-base-left,.tm-tooltip-container-base-bottom,.tm-tooltip-container-base-right{position:absolute;width:max-content;height:max-content;border-radius:5px;user-select:none;z-index:20000070}.tm-tooltip-container-base-top{top:-0.8rem;left:0;transform:translateY(-100%)}.tm-tooltip-container-base-left{left:-0.8rem;top:0;transform:translateX(-100%)}.tm-tooltip-container-base-bottom{bottom:-0.8rem;left:0;transform:translateY(100%)}.tm-tooltip-container-base-right{right:-0.8rem;top:0;transform:translateX(100%)}.tm-tooltip-arrow,.tm-tooltip-arrow-bottom,.tm-tooltip-arrow-top,.tm-tooltip-arrow-left,.tm-tooltip-arrow-right{position:absolute;width:0;height:0;z-index:50000}.tm-tooltip-arrow-bottom{top:-8px;left:8px;border-bottom:9px solid #fff;border-left:9px solid rgba(0,0,0,0);border-right:9px solid rgba(0,0,0,0)}.tm-tooltip-arrow-top{bottom:-8px;left:8px;border-top:9px solid #fff;border-left:9px solid rgba(0,0,0,0);border-right:9px solid rgba(0,0,0,0)}.tm-tooltip-arrow-left{top:8px;right:-8px;border-left:9px solid #fff;border-top:9px solid rgba(0,0,0,0);border-bottom:9px solid rgba(0,0,0,0)}.tm-tooltip-arrow-right{top:8px;left:-8px;border-right:9px solid #fff;border-top:9px solid rgba(0,0,0,0);border-bottom:9px solid rgba(0,0,0,0)}#user-credentials-popup .dx-accordion-item-title::before{content:none !important}@keyframes show-error{0%{display:none;opacity:0;z-index:20000999}5%{display:block;opacity:1;z-index:20000999}95%{display:block;opacity:1;z-index:20000999}100%{opacity:0;display:none;z-index:20000999}}.tm-alert-animation-style{animation:show-error both;animation-timing-function:linear;animation-iteration-count:none;z-index:20000999}.tm-alert-container{position:absolute;width:100%;height:100%;z-index:20000999}@keyframes loading{from{width:0}to{width:100%}}.tm-alert-loading{width:100%;height:5px;position:absolute;bottom:0;left:0;animation:loading;animation-duration:5000ms}.tm-alert-icon{position:absolute;width:22px;height:22px;background-color:#fff;top:"20px";left:"20px";border-radius:50%;display:flex;align-items:center;justify-content:center}.dx-context-menu.dx-overlay-content{height:auto !important;max-height:none !important}.dx-context-menu .dx-menu-items-container{max-height:none !important}.custom-mentions-wrapper span.dx-mention span[contenteditable=false]>span:first-child{font-size:0;width:0;display:inline-block;overflow:hidden}.custom-mentions-wrapper span.dx-mention{color:#2559a5;font-weight:bold;background-color:rgba(0,0,0,0)}.dx-treeview-node.dx-treeview-item-with-checkbox.dx-state-selected.dx-treeview-root-node.dx-treeview-node-is-leaf[aria-disabled=true]{display:none !important}

package/lib/helper/SDKUI_Globals.d.ts

@@ -47,6 +47,9 @@ export declare class ThemeSettings {
         gridSettings: DataGridSettings;
     };
 }
+export declare const DEFAULT_PREVIEW_THRESHOLD = 500;
+export declare const DEFAULT_PAGE_SIZE = 100;
+export declare const DEFAULT_MAX_DCMTS_TO_BE_RETURNED = 200;
 export declare class SearchSettings {
     autoFindReferences: ObjectClasses[];
     invoiceRetrieveFormat: InvoiceRetrieveFormats;
@@ -54,6 +57,25 @@ export declare class SearchSettings {
     mruTIDs: number[];
     defaultTree: number;
     previewThreshold: number;
+    pageSize: number;
+    maxDcmtsToBeReturned: number;
+    floatingMenuBar: FloatingMenuBarSettings;
+    panelLayout: {
+        [id: string]: {
+            visible: boolean;
+            width: string;
+            height: string;
+        };
+    };
+}
+export declare class FloatingMenuBarSettings {
+    orientation?: 'horizontal' | 'vertical';
+    itemIds?: string[];
+    position?: {
+        x: number;
+        y: number;
+    };
+    positionFormat?: 'pixels' | 'percentage';
 }
 export declare class ArchivingSettings {
     mruTIDs: number[];

package/lib/helper/SDKUI_Globals.js

@@ -90,6 +90,9 @@ export class ThemeSettings {
         };
     }
 }
+export const DEFAULT_PREVIEW_THRESHOLD = 500; // KB
+export const DEFAULT_PAGE_SIZE = 100;
+export const DEFAULT_MAX_DCMTS_TO_BE_RETURNED = 200;
 export class SearchSettings {
     constructor() {
         this.autoFindReferences = [];
@@ -97,9 +100,15 @@ export class SearchSettings {
         this.orderRetrieveFormat = OrderRetrieveFormats.NSO_HTML;
         this.mruTIDs = [];
         this.defaultTree = -1;
-        this.previewThreshold = 500; // KB
+        this.previewThreshold = DEFAULT_PREVIEW_THRESHOLD;
+        this.pageSize = DEFAULT_PAGE_SIZE;
+        this.maxDcmtsToBeReturned = DEFAULT_MAX_DCMTS_TO_BE_RETURNED;
+        this.floatingMenuBar = new FloatingMenuBarSettings();
+        this.panelLayout = {};
     }
 }
+export class FloatingMenuBarSettings {
+}
 export class ArchivingSettings {
     constructor() {
         this.mruTIDs = [];