@topconsultnpm/sdkui-react-beta 6.12.6 → 6.12.8

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

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

package/lib/components/editors/TMHtmlContentDisplay.js

@@ -7,8 +7,20 @@ const Wrapper = styled.div `
     ol li {
         list-style-position: inside;
     }
+    .highlight {
+        background-color: ${(props) => props.$backgroundColor || 'yellow'};
+    }
 `;
-const TMHtmlContentDisplay = ({ markup }) => {
-    return (_jsx(Wrapper, { children: _jsx("div", { dangerouslySetInnerHTML: { __html: markup } }) }));
+const highlightSearchText = (markup, searchText) => {
+    if (!searchText.trim())
+        return markup;
+    // Escape regex special characters in searchText
+    const escapedText = searchText.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
+    const regex = new RegExp(`(${escapedText})`, 'gi');
+    return markup.replace(regex, '<span class="highlight">$1</span>');
+};
+const TMHtmlContentDisplay = ({ markup, searchText, highlightColor }) => {
+    const highlightedMarkup = searchText ? highlightSearchText(markup, searchText) : markup;
+    return (_jsx(Wrapper, { "$backgroundColor": highlightColor, children: _jsx("div", { dangerouslySetInnerHTML: { __html: highlightedMarkup } }) }));
 };
 export default TMHtmlContentDisplay;

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

@@ -24,6 +24,8 @@ export interface ITMHtmlEditor {
     }>;
     /** List of validation rules or checks to apply to the editor content */
     validationItems?: Array<ValidationItem>;
+    /** If true, enables rich text editing mode */
+    isEditorEnabled?: boolean;
 }
 declare const TMHtmlEditor: (props: ITMHtmlEditor) => import("react/jsx-runtime").JSX.Element;
 export default TMHtmlEditor;

package/lib/components/editors/TMHtmlEditor.js

@@ -2,12 +2,11 @@ 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 { width = "100%", height = "100%", readOnly = false, value = "", mentionsConfig, onValueChanged, validationItems = [], isEditorEnabled: isEditorEnabledProp = false } = props;
     const editorRef = useRef(null); // Create a ref for the HtmlEditor
     const [isEditorEnabled, setIsEditorEnabled] = useState(false);
+    const [markup, setMarkup] = useState(value);
     const handlePaste = (e) => {
         const clipboardData = e.clipboardData || window.clipboardData;
         const pastedText = clipboardData.getData('text/plain'); // Get the plain text
@@ -28,7 +27,10 @@ const TMHtmlEditor = (props) => {
             }
         };
     }, []);
-    const [markup, setMarkup] = useState(value);
+    useEffect(() => {
+        // Initialize is editor enabled with the value prop
+        setIsEditorEnabled(isEditorEnabledProp);
+    }, [isEditorEnabledProp]);
     useEffect(() => {
         // Initialize markup with the value prop
         setMarkup(value);
@@ -49,18 +51,15 @@ const TMHtmlEditor = (props) => {
     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,
+    return (_jsxs("div", { style: { height: validationItems.length > 0 ? `calc(${width} - 30px)` : "100%", width: width }, children: [_jsx("div", { style: { borderWidth: '1px', borderStyle: 'solid', borderColor: hasValidationErrors ? "red" : "#e0e0e0 #e0e0e0 #616161", width: "100%", height: "100%" }, children: !isEditorEnabled ? (_jsx("textarea", { placeholder: "Digita un messaggio...", value: markup, onChange: (e) => onValueChangeCallback(e.target.value), maxLength: 1000, style: {
+                        width: "100%",
+                        height: "100%",
                         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 })] }));
+                    } })) : (_jsx(HtmlEditor, { ref: editorRef, width: "100%", height: "100%", 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("div", { style: { width: "100%", height: validationItems.length > 0 ? "30px" : '0px' }, children: _jsx(TMVilViewer, { vil: validationItems }) })] }));
 };
 export default TMHtmlEditor;

package/lib/components/forms/TMSaveForm.js

@@ -12,7 +12,7 @@ import TMValidationItemsList from '../grids/TMValidationItemsList';
 import TMModal from '../base/TMModal';
 import { DeviceType, useDeviceType } from '../base/TMDeviceProvider';
 import toppy from '../../assets/Toppy-generico.png';
-const TMSaveForm = ({ id, formMode = FormModes.Update, showToolbar = true, skipIsModifiedCheck = false, title, children, isModal, exception, customToolbarElements, hasNavigation, showBackButton, showWarningsCount = true, showErrorCount = true, onClose, onSaveAsync, onNext, onPrev, canNext, canPrev, isModified, onShowList, validationItems = [], onUndo, onCancel, width, height }) => {
+const TMSaveForm = ({ id, formMode = FormModes.Update, showToolbar = true, skipIsModifiedCheck = false, title, children, isModal, exception, customToolbarElements, hasNavigation, showBackButton, showWarningsCount = true, showErrorCount = true, showUndoButton = true, onClose, onSaveAsync, onNext, onPrev, canNext, canPrev, isModified, onShowList, validationItems = [], onUndo, onCancel, width, height }) => {
     const [showList, setShowList] = useState(true);
     const [showErrorGrid, setShowErrorGrid] = useState(false);
     const [showConfirmForClose, setShowConfirmForClose] = useState(false);
@@ -111,7 +111,7 @@ const TMSaveForm = ({ id, formMode = FormModes.Update, showToolbar = true, skipI
     const warningsCount = validationItems.filter(o => o.ResultType == ResultTypes.WARNING).length;
     const errorsCount = validationItems.filter(o => o.ResultType == ResultTypes.ERROR).length;
     const renderSaveForm = () => {
-        return (_jsxs(TMLayoutContainer, { direction: 'vertical', children: [showToolbar && _jsx(TMLayoutItem, { height: 'max-content', children: _jsxs(StyledToolbarForm, { children: [showBackButton && _jsx(TMButton, { btnStyle: 'toolbar', color: 'tertiary', caption: SDKUI_Localizator.Back, icon: _jsx(IconArrowLeft, {}), elementStyle: { marginRight: '10px' }, onClick: () => { doClose(); } }), _jsx(TMButton, { caption: SDKUI_Localizator.Save, icon: _jsx(IconSave, {}), keyGesture: "alt+s", backgroundColor: errorsCount > 0 ? TMColors.error : isModified ? TMColors.success : TMColors.disabled, onClick: doSaveAsync, color: "success", btnStyle: "toolbar", disabled: !(isModified && errorsCount <= 0) }), hasNavigation && _jsx(TMButton, { caption: SDKUI_Localizator.Previous, icon: _jsx(IconArrowUp, {}), btnStyle: "toolbar", disabled: !canPrev || isModified || formMode == FormModes.Create || formMode == FormModes.Duplicate, onClick: doPrev }), hasNavigation && _jsx(TMButton, { caption: SDKUI_Localizator.Next, icon: _jsx(IconArrowDown, {}), btnStyle: "toolbar", disabled: !canNext || isModified || formMode == FormModes.Create || formMode == FormModes.Duplicate, onClick: doNext }), _jsx(TMButton, { caption: SDKUI_Localizator.Undo, icon: _jsx(IconUndo, {}), keyGesture: "alt+z", color: "tertiary", btnStyle: "toolbar", disabled: isModified ? false : true, onClick: onUndo }), customToolbarElements, Boolean(showWarningsCount && warningsCount > 0) &&
+        return (_jsxs(TMLayoutContainer, { direction: 'vertical', children: [showToolbar && _jsx(TMLayoutItem, { height: 'max-content', children: _jsxs(StyledToolbarForm, { children: [showBackButton && _jsx(TMButton, { btnStyle: 'toolbar', color: 'tertiary', caption: SDKUI_Localizator.Back, icon: _jsx(IconArrowLeft, {}), elementStyle: { marginRight: '10px' }, onClick: () => { doClose(); } }), _jsx(TMButton, { caption: SDKUI_Localizator.Save, icon: _jsx(IconSave, {}), keyGesture: "alt+s", backgroundColor: errorsCount > 0 ? TMColors.error : isModified ? TMColors.success : TMColors.disabled, onClick: doSaveAsync, color: "success", btnStyle: "toolbar", disabled: !(isModified && errorsCount <= 0) }), hasNavigation && _jsx(TMButton, { caption: SDKUI_Localizator.Previous, icon: _jsx(IconArrowUp, {}), btnStyle: "toolbar", disabled: !canPrev || isModified || formMode == FormModes.Create || formMode == FormModes.Duplicate, onClick: doPrev }), hasNavigation && _jsx(TMButton, { caption: SDKUI_Localizator.Next, icon: _jsx(IconArrowDown, {}), btnStyle: "toolbar", disabled: !canNext || isModified || formMode == FormModes.Create || formMode == FormModes.Duplicate, onClick: doNext }), showUndoButton && _jsx(TMButton, { caption: SDKUI_Localizator.Undo, icon: _jsx(IconUndo, {}), keyGesture: "alt+z", color: "tertiary", btnStyle: "toolbar", disabled: isModified ? false : true, onClick: onUndo }), customToolbarElements, Boolean(showWarningsCount && warningsCount > 0) &&
                                 _jsx(TMLayoutItem, { width: 'fit-content', height: '90%', children: _jsxs(StyledResultTypeContainer, { style: { marginLeft: '10px' }, onClick: () => setShowErrorGrid(!showErrorGrid), "$resultType": ResultTypes.WARNING, children: [" ", _jsx(IconWarning, { fontSize: 16 }), " ", _jsx("span", { children: warningsCount })] }) }), Boolean(showErrorCount && errorsCount > 0) &&
                                 _jsx(TMLayoutItem, { width: 'fit-content', height: '90%', children: _jsxs(StyledResultTypeContainer, { style: { marginLeft: warningsCount <= 0 ? '10px' : '0' }, onClick: () => setShowErrorGrid(!showErrorGrid), "$resultType": ResultTypes.ERROR, children: [" ", _jsx(IconCloseCircle, { fontSize: 16 }), " ", _jsx("span", { children: errorsCount })] }) }), onShowList &&
                                 _jsx("div", { style: { right: '10px', position: 'absolute' }, children: deviceType !== DeviceType.MOBILE && _jsx(TMButton, { caption: showList ? SDKUI_Localizator.List_Hide : SDKUI_Localizator.List_Show, icon: showList ? _jsx(IconHide, {}) : _jsx(IconShow, {}), keyGesture: "alt+h", onClick: () => { setShowList(!showList); onShowList?.(!showList); }, btnStyle: 'toolbar' }) }), (formMode == FormModes.Create || formMode == FormModes.Duplicate) &&

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

@@ -8,6 +8,8 @@ export declare enum TMSearchContext {
     QE = "QueryEditor"
 }
 interface ITMHeader {
+    isConnector?: boolean;
+    showSettingsMenu?: boolean;
     showSearchBar?: boolean;
     clearSearchJobValue?: boolean;
     clearSearchQEValue?: boolean;

package/lib/components/sidebar/TMHeader.js

@@ -17,7 +17,7 @@ export var TMSearchContext;
     TMSearchContext["PLATFORM"] = "OrchestrationPlatform";
     TMSearchContext["QE"] = "QueryEditor";
 })(TMSearchContext || (TMSearchContext = {}));
-const StyledHeaderContainer = styled.div ` width: 100%; height: 50px; /* background: #E85C36 0% 0% no-repeat padding-box; */ background: linear-gradient(90deg, #f0f4fa, ${() => TMColors.primaryColor}) ; opacity: 1; display: flex; flex-direction: row; width: 100%; justify-content: space-between; align-items: center; `;
+const StyledHeaderContainer = styled.div ` width: 100%; height: 50px; background: ${props => props.$isConnector ? TMColors.primaryColor : `linear-gradient(90deg, #f0f4fa, ${() => TMColors.primaryColor})`} ; opacity: 1; display: flex; flex-direction: row; width: 100%; justify-content: space-between; align-items: center; `;
 const StyledMenu = styled.div ` position: absolute; top: 50px; right: 0px; width: fit-content; height: fit-content; padding: 10px 20px; border: 1px solid #2459A420; background: #E2E9EF 0% 0% no-repeat padding-box; z-index: 20000022; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 10px; border: 1px solid #c9c9c9; border-top: none; `;
 const StyledMenuItem = styled.p ` font-size: ${props => props.$fontSize}; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 2px; cursor: pointer; color: gray; &:hover{ color: ${TMColors.primary}; transition: color 100ms ease; } `;
 const StyledHeaderIcon = styled.div ` width: 50px; height: 50px; margin-left: 10px; display: flex; align-items: center; justify-content: center; color: ${props => props.$isSelected ? '#135596' : '#ffffff'}; transition: color ease 100ms; background-color: ${props => props.$isSelected && '#ffffff'}; cursor: pointer; &:hover { color: #ffffff; background-color: #0d3862; transition: color ease 100ms; } `;
@@ -27,7 +27,7 @@ export const TMSearchBar = ({ searchValue, onSearchValueChanged, maxWidth, margi
     const deviceType = useDeviceType();
     return (_jsxs(StyledSearchBarContainer, { style: { maxWidth: maxWidth ? maxWidth : deviceType === DeviceType.MOBILE ? '65%' : '650px', marginLeft: marginLeft ? marginLeft : deviceType === DeviceType.MOBILE ? '10px' : '50px' }, "$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 } })] }));
 };
-const TMHeader = ({ showSearchBar = true, clearSearchJobValue, clearSearchQEValue, searchContext = TMSearchContext.JOBS, onChangePassword, onLogout, settingsMenuContext, onSeacrhJobsValueChange, onSeacrhJobslistValueChange, onSeacrhProcessMonitorValueChange, onSeacrhProcessValueChange, onSeacrhPlatformValueChange, onSeacrhQEValueChange, onSettingsClick }) => {
+const TMHeader = ({ isConnector = false, showSettingsMenu = true, showSearchBar = true, clearSearchJobValue, clearSearchQEValue, searchContext = TMSearchContext.JOBS, onChangePassword, onLogout, settingsMenuContext, onSeacrhJobsValueChange, onSeacrhJobslistValueChange, onSeacrhProcessMonitorValueChange, onSeacrhProcessValueChange, onSeacrhPlatformValueChange, onSeacrhQEValueChange, onSettingsClick }) => {
     const [menuStatus, setMenuStatus] = useState(false);
     const [searchJobListValue, setSearchJobListValue] = useState('');
     const [searchJobsValue, setSearchJobsValue] = useState('');
@@ -74,6 +74,6 @@ const TMHeader = ({ showSearchBar = true, clearSearchJobValue, clearSearchQEValu
         document.addEventListener('click', handleClickOutside);
         return () => document.removeEventListener('click', handleClickOutside);
     }, [menuRef, userIcon, menuStatus]);
-    return (_jsxs(StyledHeaderContainer, { "$appName": SDK_Globals.appModule, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', width: '100%' }, children: [_jsx("div", { style: { width: '50px', height: '50px', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx("img", { src: six, height: 30, alt: "" }) }), !isMobile && _jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'flex-start', gap: '1px', fontSize: '14px' }, children: [_jsx("div", { style: { userSelect: 'none', color: '#135596' }, children: "TopMedia" }), _jsx("div", { style: { userSelect: 'none', color: '#135596' }, children: SDK_Globals.appModule })] }), showSearchBar && _jsxs(_Fragment, { children: [searchContext === TMSearchContext.JOBS_LIST && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchJobListValue(e), searchValue: searchJobListValue }), searchContext === TMSearchContext.JOBS && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchJobsValue(e), searchValue: searchJobsValue }), searchContext === TMSearchContext.PROCESSES && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchProcessesValue(e), searchValue: searchProcessesValue }), searchContext === TMSearchContext.PROCESS_MONITOR && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchProcessMonitorValue(e), searchValue: searchProcessMonitorValue }), searchContext === TMSearchContext.PLATFORM && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchPlatformValue(e), searchValue: searchPlatformValue }), searchContext === TMSearchContext.QE && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchQEValue(e), searchValue: searchQEValue })] })] }), _jsxs(StyledHeaderIcon, { onClick: () => onSettingsClick?.(), children: [" ", _jsx(IconSettings, { fontSize: 20 }), " "] }), _jsxs(StyledHeaderIcon, { "$isSelected": menuStatus, ref: userIcon, onClick: () => setMenuStatus(!menuStatus), children: [" ", _jsx(IconUserProfile, { fontSize: 20 }), " "] }), menuStatus && _jsxs(StyledMenu, { ref: menuRef, children: [SDK_Globals.tmSession?.SessionDescr?.authenticationMode === AuthenticationModes.TopMedia && _jsxs(StyledMenuItem, { "$fontSize": FontSize.defaultFontSize, onClick: () => { setMenuStatus(false); onChangePassword && onChangePassword(); }, style: { fontSize: FontSize.defaultFontSize }, children: [" ", _jsx("span", { children: _jsx(IconPassword, {}) }), " ", _jsx("span", { children: SDKUI_Localizator.ChangePassword }), " "] }), _jsxs(StyledMenuItem, { "$fontSize": FontSize.defaultFontSize, onClick: () => { setMenuStatus(false); onLogout && onLogout(); }, children: [_jsx("span", { children: _jsx(IconLogout, {}) }), " ", _jsx("span", { children: "Logout" }), " "] }), _jsx("div", { style: { width: '100%', height: '1px', backgroundColor: 'gray' } }), _jsxs(StyledMenuItem, { "$fontSize": FontSize.defaultFontSize, onClick: () => { setMenuStatus(false); TMMessageBoxManager.show({ buttons: [ButtonNames.OK], title: `About. ${SDK_Globals.appModule}`, message: _jsx(TMAboutApp, { app: true, skdui: true, sdk: true, websdk: true }) }); }, style: { fontSize: FontSize.defaultFontSize }, children: [" ", _jsx("span", { children: _jsx(IconBxInfo, {}) }), " ", _jsx("span", { children: "About" }), " "] })] })] }));
+    return (_jsxs(StyledHeaderContainer, { "$appName": SDK_Globals.appModule, "$isConnector": isConnector, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', width: '100%' }, children: [_jsx("div", { style: { width: '50px', height: '50px', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx("img", { src: six, height: 30, alt: "" }) }), !isMobile && _jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'flex-start', gap: '1px', fontSize: '14px' }, children: [_jsx("div", { style: { userSelect: 'none', color: '#135596' }, children: "TopMedia" }), _jsx("div", { style: { userSelect: 'none', color: '#135596' }, children: SDK_Globals.appModule })] }), showSearchBar && _jsxs(_Fragment, { children: [searchContext === TMSearchContext.JOBS_LIST && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchJobListValue(e), searchValue: searchJobListValue }), searchContext === TMSearchContext.JOBS && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchJobsValue(e), searchValue: searchJobsValue }), searchContext === TMSearchContext.PROCESSES && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchProcessesValue(e), searchValue: searchProcessesValue }), searchContext === TMSearchContext.PROCESS_MONITOR && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchProcessMonitorValue(e), searchValue: searchProcessMonitorValue }), searchContext === TMSearchContext.PLATFORM && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchPlatformValue(e), searchValue: searchPlatformValue }), searchContext === TMSearchContext.QE && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchQEValue(e), searchValue: searchQEValue })] })] }), showSettingsMenu && _jsxs(StyledHeaderIcon, { onClick: () => onSettingsClick?.(), children: [" ", _jsx(IconSettings, { fontSize: 20 }), " "] }), _jsxs(StyledHeaderIcon, { "$isSelected": menuStatus, ref: userIcon, onClick: () => setMenuStatus(!menuStatus), children: [" ", _jsx(IconUserProfile, { fontSize: 20 }), " "] }), menuStatus && _jsxs(StyledMenu, { ref: menuRef, children: [SDK_Globals.tmSession?.SessionDescr?.authenticationMode === AuthenticationModes.TopMedia && _jsxs(StyledMenuItem, { "$fontSize": FontSize.defaultFontSize, onClick: () => { setMenuStatus(false); onChangePassword && onChangePassword(); }, style: { fontSize: FontSize.defaultFontSize }, children: [" ", _jsx("span", { children: _jsx(IconPassword, {}) }), " ", _jsx("span", { children: SDKUI_Localizator.ChangePassword }), " "] }), _jsxs(StyledMenuItem, { "$fontSize": FontSize.defaultFontSize, onClick: () => { setMenuStatus(false); onLogout && onLogout(); }, children: [_jsx("span", { children: _jsx(IconLogout, {}) }), " ", _jsx("span", { children: "Logout" }), " "] }), _jsx("div", { style: { width: '100%', height: '1px', backgroundColor: 'gray' } }), _jsxs(StyledMenuItem, { "$fontSize": FontSize.defaultFontSize, onClick: () => { setMenuStatus(false); TMMessageBoxManager.show({ buttons: [ButtonNames.OK], title: `About. ${SDK_Globals.appModule}`, message: _jsx(TMAboutApp, { app: true, skdui: true, sdk: true, websdk: true }) }); }, style: { fontSize: FontSize.defaultFontSize }, children: [" ", _jsx("span", { children: _jsx(IconBxInfo, {}) }), " ", _jsx("span", { children: "About" }), " "] })] })] }));
 };
 export default TMHeader;

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

@@ -16,6 +16,7 @@ interface ITMSidebar {
     top?: string;
     left?: string;
     borderRightRadius?: string;
+    isConnector?: boolean;
 }
 declare const TMSidebar: React.FC<ITMSidebar>;
 export default TMSidebar;

package/lib/components/sidebar/TMSidebar.js

@@ -8,7 +8,7 @@ const StyledTMSidebarContainer = styled.div `
     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;
+    background: ${props => props.$isConnector ? TMColors.primaryColor : `${() => TMColors.primaryColor} 0% 0% no-repeat padding-box`};
     box-shadow: 0px 3px 6px #00000029;
     border-radius: 0;
     opacity: 1;
@@ -29,7 +29,7 @@ const FixedBottomContainer = styled.div `
     position: relative;
     bottom: 10px;
 `;
-const TMSidebar = ({ items, height, borderRightRadius, left, top, width }) => {
+const TMSidebar = ({ items, height, borderRightRadius, left, top, width, isConnector }) => {
     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') })] }));
 };
 export default TMSidebar;

package/lib/ts/types.d.ts

@@ -47,6 +47,7 @@ export interface ITMSaveFormBaseProps {
     height?: string;
     signal?: AbortSignal;
     showBackButton?: boolean;
+    showUndoButton?: boolean;
     showWarningsCount?: boolean;
     showErrorCount?: boolean;
     hasNavigation?: boolean;

package/package.json

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