@topconsultnpm/sdkui-react-beta 6.13.17 → 6.13.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -13,9 +13,7 @@ import Menu from "./Menu";
13
13
  import TextBox from "./TextBox";
14
14
  import Chooser from "./Chooser";
15
15
  import SelectBox from "./SelectBox";
16
- import six_SURFER from '../../../assets/Surfer-blu.svg';
17
- import six_DESIGNER from '../../../assets/Designer-blu.svg';
18
- import six_ORCHESTRATOR from '../../../assets/Orchestrator-blu.svg';
16
+ import six from '../../../assets/six.png';
19
17
  import it from '../../../assets/italy.svg';
20
18
  import en from '../../../assets/united-kingdom.svg';
21
19
  import es from '../../../assets/spain.svg';
@@ -569,14 +567,14 @@ const TMLoginForm = (props) => {
569
567
  window.removeEventListener('keydown', handleKeyDown);
570
568
  };
571
569
  }, [showContinueBtn, disableContinueBtn, showLoginBtn, disableLoginBtn, nextStepHandler, loginHandler]);
572
- const welcomeLogo = useMemo(() => {
570
+ const welcomeAppName = useMemo(() => {
573
571
  switch (SDK_Globals.appModule) {
574
- case AppModules.ORCHESTRATOR: return six_ORCHESTRATOR;
575
- case AppModules.DESIGNER: return six_DESIGNER;
576
- default: return six_SURFER;
572
+ case AppModules.ORCHESTRATOR: return AppModules.ORCHESTRATOR;
573
+ case AppModules.DESIGNER: return AppModules.DESIGNER;
574
+ default: return AppModules.SURFER;
577
575
  }
578
576
  }, [SDK_Globals.appModule]);
579
- return (_jsxs(StyledWrapper, { children: [!isMobile && _jsxs(StyledVersionContainer, { children: [_jsxs(StyledVersion, { children: [_jsxs(StyledVersionName, { children: [_jsx("span", { style: { color: TMColors.primary }, children: "\u25CF" }), SDK_Globals.appModule] }), _jsxs("p", { children: ["v.", SDK_Globals.appVersion] })] }), _jsxs(StyledVersion, { children: [_jsxs(StyledVersionName, { children: [_jsx("span", { style: { color: TMColors.tertiary }, children: "\u25CF" }), "SDKUI"] }), _jsxs("p", { children: ["v.", SDK_Globals.sdkuiVersion] })] }), _jsxs(StyledVersion, { children: [_jsxs(StyledVersionName, { children: [_jsx("span", { style: { color: TMColors.error }, children: "\u25CF" }), "SDK"] }), _jsxs("p", { children: ["v.", SDK_Globals.sdkVersion] })] })] }), _jsxs(StyledLoginContainer, { "$isMobile": isMobile, children: [_jsxs(StyledLeftSection, { "$isMobile": isMobile, "$isConnector": props.isConnector ?? false, children: [isMobile && _jsxs(StyledTopBar, { children: [_jsx(StyledTitle, { children: SDKUI_Localizator.WelcomeTo.replaceParams('') + ' ' + SDK_Globals.appModule }), _jsx(StyledMobileVersionIcon, { onClick: showVersionPopup, children: _jsx(IconInfo, { fontSize: 20, color: TMColors.primary }) })] }), _jsx(StyledOverlay, { "$isMobile": isMobile, children: _jsx(StyledCustomLogo, { style: { backgroundImage: `url(${showDefaultLogo ? 'logo-default.svg' : 'logo-custom.svg'})` } }) }), (windowHeight === WindowHeight.LARGE || !isMobile) && _jsxs(StyledPoweredByContainer, { "$isMobile": isMobile, children: [" ", showDefaultLogo ? 'Powered by TopConsult' : _jsx("img", { src: "/logo-default.svg", alt: "Logo", width: isMobile ? 50 : 100 }), " "] })] }), _jsxs(StyledRightSection, { "$isMobile": isMobile, children: [((((getDeviceType() === 'desktop' || isDesktop || isTablet) && windowHeight !== WindowHeight.SMALL)) && !isMobile) && _jsxs(StyledLogoContainer, { "$isMobile": isMobile, children: [_jsx(StyledWelcomeText, { children: SDKUI_Localizator.WelcomeTo.replaceParams('') }), _jsx(StyledLogo, { children: _jsx("img", { src: welcomeLogo, alt: "six", height: 40 }) })] }), _jsxs(StyledToolbarContainer, { children: [_jsx(StyledLanguageChooser, { onClick: () => setShowCultureIDs(true), children: _jsx(TMTooltip, { content: SDKUI_Localizator.CultureID, children: _jsx("img", { src: getCultureIDImg(), alt: "Lang", width: 25, height: 25 }) }) }), loginStep !== 3 && _jsx(TMButton, { btnStyle: "icon", onClick: () => setShowRapidAccess(true), icon: _jsx(IconFastAccess, { fontSize: 20 }), caption: LOGINLocalizator.QuickAccess }), showPasswordOperations && _jsx(TMButton, { disabled: disablePasswordOperations, btnStyle: "icon", onClick: () => setShowChangePassword(true), icon: _jsx(IconPasswordOutline, { fontSize: 19 }), caption: SDKUI_Localizator.ChangePassword })] }), _jsxs(StyledFormContainer, { "$isMobile": isMobile, "$windowHeight": windowHeight, children: [loginStep === 1 &&
577
+ return (_jsxs(StyledWrapper, { children: [!isMobile && _jsxs(StyledVersionContainer, { children: [_jsxs(StyledVersion, { children: [_jsxs(StyledVersionName, { children: [_jsx("span", { style: { color: TMColors.primary }, children: "\u25CF" }), SDK_Globals.appModule] }), _jsxs("p", { children: ["v.", SDK_Globals.appVersion] })] }), _jsxs(StyledVersion, { children: [_jsxs(StyledVersionName, { children: [_jsx("span", { style: { color: TMColors.tertiary }, children: "\u25CF" }), "SDKUI"] }), _jsxs("p", { children: ["v.", SDK_Globals.sdkuiVersion] })] }), _jsxs(StyledVersion, { children: [_jsxs(StyledVersionName, { children: [_jsx("span", { style: { color: TMColors.error }, children: "\u25CF" }), "SDK"] }), _jsxs("p", { children: ["v.", SDK_Globals.sdkVersion] })] })] }), _jsxs(StyledLoginContainer, { "$isMobile": isMobile, children: [_jsxs(StyledLeftSection, { "$isMobile": isMobile, "$isConnector": props.isConnector ?? false, children: [isMobile && _jsxs(StyledTopBar, { children: [_jsx(StyledTitle, { children: SDKUI_Localizator.WelcomeTo.replaceParams('') + ' ' + SDK_Globals.appModule }), _jsx(StyledMobileVersionIcon, { onClick: showVersionPopup, children: _jsx(IconInfo, { fontSize: 20, color: TMColors.primary }) })] }), _jsx(StyledOverlay, { "$isMobile": isMobile, children: _jsx(StyledCustomLogo, { style: { backgroundImage: `url(${showDefaultLogo ? 'logo-default.svg' : 'logo-custom.svg'})` } }) }), (windowHeight === WindowHeight.LARGE || !isMobile) && _jsxs(StyledPoweredByContainer, { "$isMobile": isMobile, children: [" ", showDefaultLogo ? 'Powered by TopConsult' : _jsx("img", { src: "/logo-default.svg", alt: "Logo", width: isMobile ? 50 : 100 }), " "] })] }), _jsxs(StyledRightSection, { "$isMobile": isMobile, children: [((((getDeviceType() === 'desktop' || isDesktop || isTablet) && windowHeight !== WindowHeight.SMALL)) && !isMobile) && _jsxs(StyledLogoContainer, { "$isMobile": isMobile, children: [_jsx(StyledWelcomeText, { children: SDKUI_Localizator.WelcomeTo.replaceParams('') }), _jsx(StyledLogo, { children: _jsx("img", { src: six, alt: "six", height: 50 }) }), _jsx(StyledWelcomeText, { children: welcomeAppName })] }), _jsxs(StyledToolbarContainer, { children: [_jsx(StyledLanguageChooser, { onClick: () => setShowCultureIDs(true), children: _jsx(TMTooltip, { content: SDKUI_Localizator.CultureID, children: _jsx("img", { src: getCultureIDImg(), alt: "Lang", width: 25, height: 25 }) }) }), loginStep !== 3 && _jsx(TMButton, { btnStyle: "icon", onClick: () => setShowRapidAccess(true), icon: _jsx(IconFastAccess, { fontSize: 20 }), caption: LOGINLocalizator.QuickAccess }), showPasswordOperations && _jsx(TMButton, { disabled: disablePasswordOperations, btnStyle: "icon", onClick: () => setShowChangePassword(true), icon: _jsx(IconPasswordOutline, { fontSize: 19 }), caption: SDKUI_Localizator.ChangePassword })] }), _jsxs(StyledFormContainer, { "$isMobile": isMobile, "$windowHeight": windowHeight, children: [loginStep === 1 &&
580
578
  _jsxs(StyledStepContainer, { children: [_jsx(Chooser, { isDropDown: isDesktop, dataSource: props.endpoints, value: 'Description', columns: accessPointChooserColumns, additionalIcons: accessPointAdditionalIcons, icon: _jsx(IconAccessPoint, {}), label: SDKUI_Localizator.Endpoint, onSelectionChanged: (ep) => { setEndpoint(ep); setDcmtArchive(undefined); }, validationItems: fieldValidations('endpoint'), selectedRow: endpoint ?? undefined }), _jsx(Chooser, { isDropDown: isDesktop, dataSource: dcmtArchives, value: 'description', columns: dcmtArchiveChooserColumns, icon: _jsx(IconArchiveDoc, {}), label: SDKUI_Localizator.ArchiveID, onSelectionChanged: (arch) => setDcmtArchive(arch), validationItems: fieldValidations('dcmtArchive'), disabled: !endpoint, selectedRow: dcmtArchive ?? undefined })] }), loginStep === 2 &&
581
579
  _jsxs(StyledStepContainer, { "$windowHeight": windowHeight, style: { marginTop: '20px' }, children: [_jsxs(StyledSummaryContainer, { style: { position: 'absolute', top: getTopOffset(windowHeight, isMobile, isTablet), left: '50%', transform: 'translateX(-50%)', width: 'max-content' }, children: [_jsxs(StyledDescription, { children: [_jsx(TMTooltip, { content: SDKUI_Localizator.Endpoint, children: _jsx(IconAccessPoint, { color: TMColors.primary, fontSize: 16 }) }), _jsx("p", { children: endpoint?.Description })] }), _jsxs(StyledDescription, { children: [_jsx(TMTooltip, { content: SDKUI_Localizator.ArchiveID, children: _jsx(IconArchiveDoc, { color: TMColors.primary, fontSize: 16 }) }), _jsx("p", { children: dcmtArchive?.description })] })] }), _jsx(SelectBox, { value: authMode, options: authModeOptions, onValueChanged: (value) => setAuthMode(value), validationItems: fieldValidations('authenticationMode'), icon: _jsx(IconLogin, {}), label: SDKUI_Localizator.AuthMode }), _jsxs(StyledCredentialWrapper, { children: [authMode === AuthenticationModes.WindowsThroughTopMedia && _jsx(TextBox, { ref: authDomainRef, value: authDomain, onValueChanged: (e) => setAuthDomain(e), validationItems: fieldValidations('authDomain'), type: "text", icon: _jsx(IconWeb, {}), label: SDKUI_Localizator.Domain }), authMode !== AuthenticationModes.MSAzure && _jsx(CeredentialContainer, { isMobile: isMobile, ref: usernameRef, secondaryRef: passwordRef, usernameValidator: fieldValidations('username'), passwordValidator: fieldValidations('password'), authMode: authMode, username: username, password: password, onUsernameChanged: (un) => setUsername(un), onPasswordChanged: (ps) => setPassword(ps) }), authMode === AuthenticationModes.TopMediaOnBehalfOf &&
582
580
  _jsxs(StyledCredentialWrapper, { children: [_jsx(TextBox, { value: authDomain, ref: authDomainRef, onValueChanged: (e) => setAuthDomain(e), validationItems: fieldValidations('authDomain'), type: "text", icon: _jsx(IconWeb, {}), label: SDKUI_Localizator.Domain }), _jsx(CeredentialContainer, { isMobile: isMobile, ref: usernameOnBehalfOfRef, secondaryRef: passwordOnBehalfOfRRef, usernameValidator: fieldValidations('usernameOnBehalfOf'), passwordValidator: fieldValidations('passwordOnBehalfOf'), authMode: AuthenticationModes.TopMediaOnBehalfOf, username: usernameOnBehalf, password: passwordOnBehalf, onUsernameChanged: (un) => setUsernameOnBehalf(un), onPasswordChanged: (ps) => setPasswordOnBehalf(ps) })] })] }), authMode !== AuthenticationModes.TopMediaWithMFA &&
@@ -661,8 +659,8 @@ const getPadding = (windowHeight, isMobile) => {
661
659
  return '20px';
662
660
  };
663
661
  const StyledMobileVersionIcon = styled.div ` display: flex; align-items: center; justify-content: center; border-radius: 30px; width: 25px; height: 25px; background-color: white; `;
664
- const StyledWrapper = styled.div ` display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh; overflow: hidden; background-color: #a9a9a9; `;
665
- const StyledVersionContainer = styled.div ` position: absolute; bottom: 35px; left: 50%; transform: translateX(-50%); color: white; font-size: 0.9rem; display:flex; align-items:center; gap:10px; `;
662
+ const StyledWrapper = styled.div ` display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh; overflow: hidden; background-color: transparent; `;
663
+ const StyledVersionContainer = styled.div ` position: absolute; bottom: 35px; left: 50%; transform: translateX(-50%); color: ${TMColors.primary}; font-size: 0.9rem; display:flex; align-items:center; gap:10px; `;
666
664
  const StyledVersion = styled.div ` display: flex; align-items: center; gap: 2px; `;
667
665
  const StyledVersionName = styled.p ` display: flex; align-items: center; gap: 3px; `;
668
666
  const StyledLoginContainer = styled.div ` min-width: ${props => props.$isMobile ? '100%' : '800px'}; width: ${props => props.$isMobile ? '100%' : '50%'}; height:${props => props.$isMobile ? '100%' : '80%'}; background: #FFFFFF 0% 0% no-repeat padding-box; box-shadow: ${props => !props.$isMobile ? '7px 7px 5px #AEAEAFBF' : 'none'}; border-radius: ${props => !props.$isMobile ? '10px' : 'none'};; opacity: 1; display: flex; flex-direction: ${props => props.$isMobile ? 'column' : 'row'}; overflow: hidden; `;
@@ -671,7 +669,7 @@ const StyledOverlay = styled.div ` position: ${props => props.$isMobile ? 'unset
671
669
  const StyledPoweredByContainer = styled.div ` position: absolute; width: 100%; height: 20px; bottom: ${props => props.$isMobile ? '10px' : '40px'}; left: 0; display: flex; align-items: center; justify-content: center; color: white; font-size: 0.8rem; `;
672
670
  const StyledRightSection = styled.div ` width: ${props => props.$isMobile ? '100%' : '67%'}; min-width: ${props => props.$isMobile ? '100%' : '500px'}; height: ${props => props.$isMobile ? '80%' : '100%'}; background: white; mix-blend-mode: multiply; opacity: 1; position: relative; display: flex; align-items: center; justify-content: center; `;
673
671
  const StyledLogoContainer = styled.div ` position: absolute; top: ${props => props.$isMobile ? '40px' : '20px'}; left: 0; width: 100%; height: fit-content; padding: ${props => props.$isMobile ? '40px' : '30px'} 10px; transform:${props => props.$isMobile ? 'scale(0.8)' : 'scale(0.9)'}; display: flex; align-items: center; justify-content: center; gap: 10px; `;
674
- const StyledWelcomeText = styled.h1 ` text-align: left; letter-spacing: 0px; color: ${TMColors.primary}; opacity: 1; transform: translateY(-2px); `;
672
+ const StyledWelcomeText = styled.h1 ` text-align: left; letter-spacing: 0px; color: ${TMColors.primary}; opacity: 1; `;
675
673
  const StyledLogo = styled.div ` display: flex; gap: 5px; align-items: center; `;
676
674
  const StyledFormContainer = styled.div ` display: flex; flex-direction: column; padding: ${props => getPadding(props.$windowHeight, props.$isMobile)} ; align-items: center; justify-content: center; gap: 10px; width: 100%; height: fit-content; max-height: calc(100% - 100px); margin-top : ${props => !props.$isMobile && props.$windowHeight === WindowHeight.MEDIUM ? '70px' : '0'} ; `;
677
675
  const StyledButtonContainer = styled.div ` display: flex; align-items: center; justify-content: center; padding: 10px; width: 100%; margin-top: 10px; `;
@@ -1,9 +1,6 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
2
  import { useState, useEffect, useRef, useMemo } from 'react';
3
- import six_SURFER from '../../assets/Surfer-blu.svg';
4
- import six_DESIGNER from '../../assets/Designer-blu.svg';
5
- import six_ORCHESTRATOR from '../../assets/Orchestrator-blu.svg';
6
- import six from '../../assets/six.svg';
3
+ import six from '../../assets/six.png';
7
4
  import { IconBxInfo, IconCloseOutline, IconLogout, IconPassword, IconSearch, IconSettings, IconUserProfile, SDKUI_Localizator } from '../../helper';
8
5
  import styled from 'styled-components';
9
6
  import { SDK_Globals, AuthenticationModes, AppModules } from '@topconsultnpm/sdk-ts-beta';
@@ -26,9 +23,10 @@ const StyledMenuItem = styled.p ` font-size: ${props => props.$fontSize}; displa
26
23
  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
24
  const StyledSearchBarContainer = styled.div ` position: relative; height:30px; width: 100%; max-width: ${props => props.$isMobile ? '65%' : '650px'}; margin-left: ${props => props.$isMobile ? '10px' : '50px'}; `;
28
25
  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}; } `;
26
+ const StyledHeaderAppText = styled.h2 ` text-align: left; letter-spacing: 0px; color: ${TMColors.primary}; opacity: 1; `;
29
27
  export const TMSearchBar = ({ searchValue, onSearchValueChanged, maxWidth, marginLeft }) => {
30
28
  const deviceType = useDeviceType();
31
- 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 } })] }));
29
+ 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 } })] }));
32
30
  };
33
31
  const TMHeader = ({ showSettingsMenu = true, showSearchBar = true, clearSearchJobValue, clearSearchQEValue, searchContext = TMSearchContext.JOBS, onChangePassword, onLogout, settingsMenuContext, onSeacrhJobsValueChange, onSeacrhJobslistValueChange, onSeacrhProcessMonitorValueChange, onSeacrhProcessValueChange, onSeacrhPlatformValueChange, onSeacrhQEValueChange, onSettingsClick }) => {
34
32
  const [menuStatus, setMenuStatus] = useState(false);
@@ -40,11 +38,11 @@ const TMHeader = ({ showSettingsMenu = true, showSearchBar = true, clearSearchJo
40
38
  const [searchQEValue, setSearchQEValue] = useState('');
41
39
  const menuRef = useRef(null);
42
40
  const userIcon = useRef(null);
43
- const headerLogo = useMemo(() => {
41
+ const headerAppName = useMemo(() => {
44
42
  switch (SDK_Globals.appModule) {
45
- case AppModules.ORCHESTRATOR: return six_ORCHESTRATOR;
46
- case AppModules.DESIGNER: return six_DESIGNER;
47
- default: return six_SURFER;
43
+ case AppModules.ORCHESTRATOR: return AppModules.ORCHESTRATOR;
44
+ case AppModules.DESIGNER: return AppModules.DESIGNER;
45
+ default: return AppModules.SURFER;
48
46
  }
49
47
  }, [SDK_Globals.appModule]);
50
48
  const deviceType = useDeviceType();
@@ -84,6 +82,6 @@ const TMHeader = ({ showSettingsMenu = true, showSearchBar = true, clearSearchJo
84
82
  document.addEventListener('click', handleClickOutside);
85
83
  return () => document.removeEventListener('click', handleClickOutside);
86
84
  }, [menuRef, userIcon, menuStatus]);
87
- 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: { height: '50px', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx("img", { src: isMobile ? six : headerLogo, height: isMobile ? 35 : 40, alt: "" }) }), 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" }), " "] })] })] }));
85
+ return (_jsxs(StyledHeaderContainer, { "$appName": SDK_Globals.appModule, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', width: '100%' }, children: [_jsxs("div", { style: { height: '50px', display: 'flex', alignItems: 'center', gap: 10, justifyContent: 'center' }, children: [_jsx("img", { src: six, height: isMobile ? 35 : 40, alt: "" }), !isMobile && _jsx(StyledHeaderAppText, { children: headerAppName })] }), 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" }), " "] })] })] }));
88
86
  };
89
87
  export default TMHeader;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@topconsultnpm/sdkui-react-beta",
3
- "version": "6.13.17",
3
+ "version": "6.13.18",
4
4
  "description": "",
5
5
  "scripts": {
6
6
  "test": "echo \"Error: no test specified\" && exit 1",