@topconsultnpm/sdkui-react-beta 6.5.51

package/lib/components/query/TMQueryResult.d.ts

@@ -0,0 +1,8 @@
+import { SearchResultDescriptor } from '@topconsultnpm/sdk-ts-beta';
+declare const TMQueryResult: ({ result, elapsedTime, showSysMetadata, searchText }: {
+    result: SearchResultDescriptor | undefined;
+    elapsedTime?: number;
+    showSysMetadata?: boolean;
+    searchText?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default TMQueryResult;

package/lib/components/query/TMQueryResult.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { DataGrid } from 'devextreme-react';
+import { DataColumnTypes } from '@topconsultnpm/sdk-ts-beta';
+import { Column, HeaderFilter, LoadPanel, Pager, Paging, Scrolling, SearchPanel, Selection } from 'devextreme-react/cjs/data-grid';
+import TMLayoutContainer, { TMLayoutItem } from '../base/TMLayout';
+import { StyledDivHorizontal, StyledParagraph, cellRenderObjectIcon } from '../base/Styled';
+import { Globalization, IconAll, IconApply, IconFileDots, IconProgressReady, IconSelected, IconVisible, SDKUI_Globals, getDataColumnName, searchResultDescriptorToSimpleArray } from '../../helper';
+import { TMColors } from '../../utils/theme';
+const TMQueryResult = ({ result, elapsedTime, showSysMetadata = false, searchText }) => {
+    const [dataSource, setDataSource] = useState();
+    const [selectedItems, setSelectedItems] = useState([]);
+    const [visibleItems, setVisibleItems] = useState([]);
+    let gridInstance;
+    useEffect(() => { gridInstance?.instance().searchByText(searchText ?? ''); }, [searchText]);
+    useEffect(() => { setDataSource(searchResultDescriptorToSimpleArray(result)); }, [result]);
+    function millisecondsToTime(milli) {
+        //console.log(milli)
+        let milliseconds = milli % 1000;
+        let seconds = Math.floor((milli / 1000) % 60);
+        let minutes = Math.floor((milli / (60 * 1000)) % 60);
+        return minutes + "m " + seconds + "s " + milliseconds.toFixed(2) + "ms";
+    }
+    return (_jsxs(TMLayoutContainer, { gap: 0, children: [_jsx(TMLayoutItem, { height: 'calc(100% - 30px)', children: _jsxs(DataGrid, { ref: (grid) => (gridInstance = grid), keyExpr: "rowIndex", width: '100%', height: '100%', dataSource: dataSource, allowColumnResizing: true, columnResizingMode: "widget", columnAutoWidth: true, allowColumnReordering: true, showBorders: true, showColumnLines: SDKUI_Globals.dataGridShowColumnLines, showRowLines: SDKUI_Globals.dataGridShowRowLines, onContentReady: (e) => { setVisibleItems(e.component.getVisibleRows().map((row) => { return row.data; })); }, onSelectionChanged: (e) => { setSelectedItems(e.selectedRowsData); }, 
+                    // onRowPrepared={(e: RowPreparedEvent<string[], any>) => { e.rowElement.style.height = '21px' }}
+                    onToolbarPreparing: (e) => {
+                        e.toolbarOptions.items.forEach((item) => {
+                            if (item.name === "searchPanel") {
+                                item.location = "before";
+                            }
+                        });
+                    }, children: [_jsx(Selection, { mode: "multiple", showCheckBoxesMode: "onClick", selectAllMode: 'allPages' }), _jsx(SearchPanel, { visible: false }), _jsx(Scrolling, { mode: 'virtual', useNative: SDKUI_Globals.dataGridUseNativeScrollbar }), _jsx(HeaderFilter, { visible: true }), _jsx(Paging, { pageSize: 25 }), _jsx(Pager, { visible: true, showInfo: true, showNavigationButtons: true }), _jsx(LoadPanel, { enabled: true }), _jsx(Column, { dataType: "object", width: 40, visible: true, cellRender: () => cellRenderObjectIcon(_jsx(IconFileDots, { color: '#767676' })) }), result?.dtdResult?.columns?.map((col, index) => {
+                            let mid = col.extendedProperties?.["MID"];
+                            let keyField = getDataColumnName(result?.fromTID, col);
+                            const isSystemField = Number(mid) < 50;
+                            const dataType = () => {
+                                switch (col.dataType) {
+                                    case DataColumnTypes.DateTime: return "datetime";
+                                    case DataColumnTypes.Bool: return "boolean";
+                                    case DataColumnTypes.Number: return "number";
+                                    default: return "string";
+                                }
+                            };
+                            return (_jsx(Column, { dataField: keyField, caption: col.caption, visible: !isSystemField ? true : showSysMetadata, dataType: dataType(), format: col.dataType === DataColumnTypes.DateTime ? Globalization.getDateDisplayFormat() : "" }, col.caption + index.toString()));
+                        })] }) }), _jsx(TMLayoutItem, { height: 'max-content', children: _jsxs(StyledDivHorizontal, { style: { backgroundColor: TMColors.toolbar_background, height: '30px' }, children: [_jsxs(StyledParagraph, { children: [_jsxs("span", { style: { marginRight: '5px', fontWeight: 'bold' }, children: [" ", _jsx(IconAll, { fontSize: 12 })] }), Globalization.getNumberDisplayValue(dataSource?.length ?? 0, true)] }), _jsxs(StyledParagraph, { children: [_jsxs("span", { style: { marginRight: '5px', fontWeight: 'bold' }, children: [" ", _jsx(IconVisible, { fontSize: 12 })] }), Globalization.getNumberDisplayValue(visibleItems.length ?? 0, true)] }), _jsxs(StyledParagraph, { children: [_jsxs("span", { style: { marginRight: '5px', fontWeight: 'bold' }, children: [" ", _jsx(IconSelected, { fontSize: 12 })] }), Globalization.getNumberDisplayValue(selectedItems.length ?? 0, true)] }), _jsxs(StyledParagraph, { children: [_jsxs("span", { style: { marginRight: '5px', fontWeight: 'bold' }, children: [" ", _jsx(IconApply, { fontSize: 12 })] }), `${Globalization.getNumberDisplayValue(result?.dcmtsReturned ?? 0, true)}/${Globalization.getNumberDisplayValue(result?.dcmtsFound ?? 0, true)}`] }), _jsxs(StyledParagraph, { children: [_jsxs("span", { style: { marginRight: '5px', fontWeight: 'bold' }, children: [" ", _jsx(IconProgressReady, { fontSize: 12 })] }), millisecondsToTime(elapsedTime)] })] }) })] }));
+};
+export default TMQueryResult;

package/lib/components/settings/SettingsAppearance.d.ts

@@ -0,0 +1,2 @@
+declare const SettingsAppearance: () => import("react/jsx-runtime").JSX.Element;
+export default SettingsAppearance;

package/lib/components/settings/SettingsAppearance.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { FontSize } from '../../utils/theme';
+import TMLayoutContainer from '../base/TMLayout';
+import TMDropDown from '../editors/TMDropDown';
+import TMCheckBox from '../editors/TMCheckBox';
+import TMButton from '../base/TMButton';
+import { SDKUI_Globals, SDKUI_Localizator } from '../../helper';
+const SettingsAppearance = () => {
+    const [currentFontSize, setCurrentFontSize] = useState(localStorage.getItem("fontSize") ?? FontSize.defaultFontSizeInPixel);
+    const [dataGridShowRowLines, setDataGridShowRowLines] = useState(Number(localStorage.getItem("dataGridShowRowLines") ?? 0));
+    const [dataGridShowColumnLines, setDataGridShowColumnLines] = useState(Number(localStorage.getItem("dataGridShowColumnLines") ?? 0));
+    const [dataGridUseNativeScrollbar, setDataGridUseNativeScrollbar] = useState(Number(localStorage.getItem("dataGridUseNativeScrollbar") ?? 1));
+    const fontSizes = [
+        { value: "10px", display: "10px" },
+        { value: "11px", display: "11px" },
+        { value: "12px", display: "12px" },
+        { value: "13px", display: "13px" },
+        { value: "14px", display: "14px" },
+        { value: "15px", display: "15px" },
+        { value: "16px", display: "16px" },
+        { value: "17px", display: "17px" },
+        { value: "18px", display: "18px" },
+        { value: "19px", display: "19px" },
+        { value: "20px", display: "20px" }
+    ];
+    return (_jsxs(TMLayoutContainer, { children: [_jsx("p", { style: { fontSize: '1.h1rem', fontWeight: 'bold' }, children: 'Font' }), _jsx(TMDropDown, { label: SDKUI_Localizator.Size, dataSource: fontSizes, width: '150px', value: currentFontSize, onValueChanged: (e) => {
+                    let newpx = e.target.value;
+                    document.documentElement.style.setProperty('--base-font-size', newpx);
+                    localStorage.setItem('fontSize', newpx);
+                    setCurrentFontSize(newpx);
+                } }), _jsx("p", { style: { fontSize: '1rem', fontWeight: 'bold', marginTop: '10px', marginBottom: '5px' }, children: 'Griglie' }), _jsx(TMCheckBox, { value: dataGridShowRowLines, onValueChanged: (newValue) => { SDKUI_Globals.dataGridShowRowLines = (newValue == 1); setDataGridShowRowLines(newValue); localStorage.setItem("dataGridShowRowLines", newValue); }, label: 'Mostra le linee che separano le righe' }), _jsx(TMCheckBox, { value: dataGridShowColumnLines, onValueChanged: (newValue) => { SDKUI_Globals.dataGridShowColumnLines = (newValue == 1); setDataGridShowColumnLines(newValue); localStorage.setItem("dataGridShowColumnLines", newValue); }, label: 'Mostra le linee che separano le colonne' }), _jsx(TMCheckBox, { value: dataGridUseNativeScrollbar, onValueChanged: (newValue) => { SDKUI_Globals.dataGridUseNativeScrollbar = (newValue == 1); setDataGridUseNativeScrollbar(newValue); localStorage.setItem("dataGridUseNativeScrollbar", newValue); }, label: 'Usa la scrollbar nativa' }), _jsx(TMButton, { elementStyle: { marginTop: '10px' }, caption: SDKUI_Localizator.Restore, showTooltip: false, onClick: () => {
+                    localStorage.removeItem("fontSize");
+                    localStorage.removeItem("dataGridShowRowLines");
+                    localStorage.removeItem("dataGridShowColumnLines");
+                    localStorage.removeItem("dataGridUseNativeScrollbar");
+                    document.documentElement.style.setProperty('--base-font-size', FontSize.defaultFontSizeInPixel);
+                    setCurrentFontSize(FontSize.defaultFontSizeInPixel);
+                    setDataGridShowColumnLines(0);
+                    setDataGridShowRowLines(0);
+                    setDataGridUseNativeScrollbar(1);
+                } })] }));
+};
+export default SettingsAppearance;

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

@@ -0,0 +1,31 @@
+import React from 'react';
+export declare enum TMSearchContext {
+    JOBS = "jobs",
+    PROCESSES = "processes",
+    PROCESS_MONITOR = "ProcessMonitor",
+    JOBS_LIST = "JobsList",
+    PLATFORM = "OrchestrationPlatform",
+    QE = "QueryEditor"
+}
+interface ITMHeader {
+    showSearchBar?: boolean;
+    clearSearchJobValue?: boolean;
+    clearSearchQEValue?: boolean;
+    searchContext?: TMSearchContext;
+    onChangePassword?: VoidFunction;
+    onLogout?: VoidFunction;
+    settingsMenuContext?: React.ReactNode;
+    onSeacrhJobslistValueChange?: (e: string) => void;
+    onSeacrhJobsValueChange?: (e: string) => void;
+    onSeacrhProcessValueChange?: (e: string) => void;
+    onSeacrhProcessMonitorValueChange?: (e: string) => void;
+    onSeacrhPlatformValueChange?: (e: string) => void;
+    onSeacrhQEValueChange?: (e: string) => void;
+    onSettingsClick?: () => void;
+}
+export declare const TMSearchBar: ({ searchValue, onSearchValueChanged }: {
+    searchValue: string;
+    onSearchValueChanged: (value: string) => void;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const TMHeader: React.FC<ITMHeader>;
+export default TMHeader;

package/lib/components/sidebar/TMHeader.js

@@ -0,0 +1,228 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import six from '../../assets/loading.png';
+import { IconBxInfo, IconCloseOutline, IconLogout, IconPassword, IconSearch, IconSettings, IconUserProfile, MOBILE_WIDTH, SDKUI_Localizator, useWindowWidth } from '../../helper';
+import styled from 'styled-components';
+import { SDK_Globals, AuthenticationModes } from '@topconsultnpm/sdk-ts-beta';
+import { FontSize, TMColors } from '../../utils/theme';
+import { ButtonNames, TMMessageBoxManager } from '../base/TMPopUp';
+export var TMSearchContext;
+(function (TMSearchContext) {
+    TMSearchContext["JOBS"] = "jobs";
+    TMSearchContext["PROCESSES"] = "processes";
+    TMSearchContext["PROCESS_MONITOR"] = "ProcessMonitor";
+    TMSearchContext["JOBS_LIST"] = "JobsList";
+    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: ${props => props.$appName === 'ORCHESTRATOR' ? 'linear-gradient(90deg, #f0f4fa, #135596)' : props.$appName === 'SURFER' ? 'linear-gradient(90deg, #f0f4fa, #0e7418)' : 'linear-gradient(90deg, #f0f4fa, #b51678)'};
+    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;
+    }
+`;
+const StyledSettingsMenuContainer = styled.div `
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    font-size: ${FontSize.defaultFontSize};
+`;
+const StyledSettingsMenuItem = styled.div `
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+`;
+const StyledSettingsMenuItemTitle = styled.div `
+    margin-right: 5px;
+`;
+const StyledSettingsMenuItemCircle = styled.span `
+    margin-right: 5px;
+    font-size: 1.1rem;
+`;
+const StyledSettingsMenuItemVersion = styled.div `
+    font-weight: bold;
+`;
+const StyledSearchBarContainer = styled.div `
+    position: relative;
+    height:30px;
+    width: 100%;
+    max-width: ${props => props.$isMobile ? 'unset' : '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};
+    }
+`;
+export const TMSearchBar = ({ searchValue, onSearchValueChanged }) => {
+    const size = useWindowWidth();
+    return (_jsxs(StyledSearchBarContainer, { "$isMobile": size <= 640, 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 [menuStatus, setMenuStatus] = useState(false);
+    const [searchJobListValue, setSearchJobListValue] = useState('');
+    const [searchJobsValue, setSearchJobsValue] = useState('');
+    const [searchProcessesValue, setSearchProcessesValue] = useState('');
+    const [searchProcessMonitorValue, setSearchProcessMonitorValue] = useState('');
+    const [searchPlatformValue, setSearchPlatformValue] = useState('');
+    const [searchQEValue, setSearchQEValue] = useState('');
+    const menuRef = useRef(null);
+    const userIcon = useRef(null);
+    let width = useWindowWidth();
+    let isMobile = width <= MOBILE_WIDTH;
+    useEffect(() => { clearSearchJobValue && setSearchJobsValue(''); }, [clearSearchJobValue]);
+    useEffect(() => { clearSearchQEValue && setSearchQEValue(''); }, [clearSearchQEValue]);
+    useEffect(() => {
+        switch (searchContext) {
+            case TMSearchContext.JOBS_LIST:
+                onSeacrhJobslistValueChange && onSeacrhJobslistValueChange(searchJobListValue);
+                break;
+            case TMSearchContext.JOBS:
+                onSeacrhJobsValueChange && onSeacrhJobsValueChange(searchJobsValue);
+                break;
+            case TMSearchContext.PROCESSES:
+                onSeacrhProcessValueChange && onSeacrhProcessValueChange(searchProcessesValue);
+                break;
+            case TMSearchContext.PROCESS_MONITOR:
+                onSeacrhProcessMonitorValueChange && onSeacrhProcessMonitorValueChange(searchProcessMonitorValue);
+                break;
+            case TMSearchContext.PLATFORM:
+                onSeacrhPlatformValueChange && onSeacrhPlatformValueChange(searchPlatformValue);
+                break;
+            case TMSearchContext.QE:
+                onSeacrhQEValueChange && onSeacrhQEValueChange(searchQEValue);
+                break;
+        }
+    }, [searchContext, searchJobListValue, searchJobsValue, searchProcessMonitorValue, searchProcessesValue, searchPlatformValue, searchQEValue]);
+    useEffect(() => {
+        function handleClickOutside(event) {
+            if (menuRef.current && !menuRef.current.contains(event.target) && !userIcon.current?.contains(event.target)) {
+                if (menuStatus) {
+                    setMenuStatus(false);
+                }
+            }
+        }
+        document.addEventListener('click', handleClickOutside);
+        return () => document.removeEventListener('click', handleClickOutside);
+    }, [menuRef, userIcon, menuStatus]);
+    let moduleTypes;
+    (function (moduleTypes) {
+        moduleTypes["SDK"] = "SDK";
+        moduleTypes["SDKUI"] = "SDKUI";
+        moduleTypes["WEBSDK"] = "WEBSDK";
+        moduleTypes["APP"] = "APP";
+    })(moduleTypes || (moduleTypes = {}));
+    let buildTypes;
+    (function (buildTypes) {
+        buildTypes["DEV"] = "DEV";
+        buildTypes["TEST"] = "TEST";
+        buildTypes["RTM"] = "RTM";
+        buildTypes["PATCH"] = "PATCH";
+    })(buildTypes || (buildTypes = {}));
+    function moduleVersion(module) {
+        switch (module) {
+            case moduleTypes.SDK: return SDK_Globals.sdkVersion ?? '0.0.0';
+            case moduleTypes.SDKUI: return SDK_Globals.sdkuiVersion ?? '0.0.0';
+            case moduleTypes.WEBSDK: return SDK_Globals.websdkVersion ?? '0.0.0';
+            default: return SDK_Globals.appVersion ?? '0.0.0';
+        }
+    }
+    function buildtype(module) {
+        let versionApp = moduleVersion(moduleTypes.APP);
+        let version = moduleVersion(module);
+        let nameSDK = SDK_Globals.sdkName ?? "";
+        let buildType;
+        if (nameSDK.endsWith('-beta') && version.endsWith('.0'))
+            buildType = buildTypes.TEST;
+        else if (nameSDK.endsWith('-beta') && versionApp.endsWith('.0'))
+            buildType = buildTypes.TEST;
+        else if (nameSDK.endsWith('-beta'))
+            buildType = buildTypes.DEV;
+        else if (version.endsWith('.0'))
+            buildType = buildTypes.RTM;
+        else
+            buildType = buildTypes.PATCH;
+        return buildType;
+    }
+    function versionAndBuildtypeInfo(module) {
+        let buildType = buildtype(module);
+        let version = moduleVersion(module);
+        switch (buildType) {
+            case buildTypes.DEV:
+            case buildTypes.TEST:
+            case buildTypes.RTM: return `${version} ${buildType}`;
+            default:
+                let vs = version.split('.');
+                return `${vs[0]}.${vs[1]} PATCH ${vs[2]}`;
+        }
+    }
+    const AboutApp = () => {
+        return (_jsxs(StyledSettingsMenuContainer, { children: [_jsxs(StyledSettingsMenuItem, { children: [_jsxs(StyledSettingsMenuItemTitle, { children: [_jsx(StyledSettingsMenuItemCircle, { style: { color: TMColors.info }, children: "\u25CF" }), " ", SDK_Globals.appModule] }), _jsx(StyledSettingsMenuItemVersion, { style: { color: TMColors.info }, children: versionAndBuildtypeInfo(moduleTypes.APP) })] }), _jsxs(StyledSettingsMenuItem, { children: [_jsxs(StyledSettingsMenuItemTitle, { children: [_jsx(StyledSettingsMenuItemCircle, { style: { color: TMColors.error }, children: "\u25CF" }), " SDKUI-REACT"] }), _jsx(StyledSettingsMenuItemVersion, { style: { color: TMColors.error }, children: versionAndBuildtypeInfo(moduleTypes.SDKUI) })] }), _jsxs(StyledSettingsMenuItem, { children: [_jsxs(StyledSettingsMenuItemTitle, { children: [_jsx(StyledSettingsMenuItemCircle, { style: { color: TMColors.success }, children: "\u25CF" }), " SDK-TS"] }), _jsx(StyledSettingsMenuItemVersion, { style: { color: TMColors.success }, children: versionAndBuildtypeInfo(moduleTypes.SDK) })] }), _jsxs(StyledSettingsMenuItem, { children: [_jsxs(StyledSettingsMenuItemTitle, { children: [_jsx(StyledSettingsMenuItemCircle, { style: { color: TMColors.info }, children: "\u25CF" }), " WEBSDK"] }), _jsx(StyledSettingsMenuItemVersion, { style: { color: TMColors.info }, children: versionAndBuildtypeInfo(moduleTypes.WEBSDK) })] })] }));
+    };
+    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(AboutApp, {}) }); }, style: { fontSize: FontSize.defaultFontSize }, children: [" ", _jsx("span", { children: _jsx(IconBxInfo, {}) }), " ", _jsx("span", { children: "About" }), " "] })] })] }));
+};
+export default TMHeader;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+export type AppRouteType = 'route' | 'panel' | 'panelRight' | 'app';
+export interface AppRoute {
+    name: string;
+    path: string;
+    icon: any;
+    element?: JSX.Element;
+    category?: string;
+    type?: AppRouteType;
+}
+interface ITMSidebar {
+    /** Lista di TMSidebarItem che compongono il menù */
+    items: JSX.Element[];
+    height?: string;
+}
+declare const TMSidebar: React.FC<ITMSidebar>;
+export default TMSidebar;

package/lib/components/sidebar/TMSidebar.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { SDK_Globals } from '@topconsultnpm/sdk-ts-beta';
+const StyledTMSidebarContainer = styled.div `
+    top: 50px;
+    left: 0px;
+    width: 50px;
+    height: ${props => props.$height ?? ''} ;
+    background: ${props => props.$appName === 'ORCHESTRATOR' ? '#135596 0% 0% no-repeat padding-box' : props.$appName === 'SURFER' ? '#0e7418 0% 0% no-repeat padding-box' : '#b51678 0% 0% no-repeat padding-box'};
+    box-shadow: 0px 3px 6px #00000029;
+    border-radius: 0px 0px;
+    opacity: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    padding: 10px 0px 0px 0px;
+    position: absolute;
+    /* z-index: 20000001; */
+`;
+const TMSidebar = ({ items, height }) => {
+    return (_jsx(_Fragment, { children: _jsxs(StyledTMSidebarContainer, { "$appName": SDK_Globals.appModule, "$height": height, children: [items.filter(item => item.props.type !== 'app'), _jsx("div", { style: { position: 'absolute', bottom: '10px', display: 'flex', flexDirection: 'column' }, children: items.filter(item => item.props.type === 'app') })] }) }));
+};
+export default TMSidebar;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { AppRouteType } from './TMSidebar';
+export interface ITMSidebarItem {
+    name: string;
+    path: string;
+    type?: AppRouteType;
+    isSelected: boolean;
+    icon: any;
+    onClick?: (e: ITMSidebarItem) => void;
+}
+declare const TMSidebarItem: React.FunctionComponent<ITMSidebarItem>;
+export default TMSidebarItem;

package/lib/components/sidebar/TMSidebarItem.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { TMColors } from '../../utils/theme';
+import TMTooltip from '../base/TMTooltip';
+const StyledTMSidebarItemContainer = styled.div `
+    margin-bottom: 10px;
+    background-color: transparent;
+    padding: 5px 0 0 5px;
+    transition: all 200ms ease;
+    user-select: none;
+    cursor: pointer;
+    color:  ${(props) => props.$isSelected ? TMColors.secondary : '#fff'};
+    width: 32px;
+    height: 32px;
+
+    p {
+        display: none;
+    }
+
+    &:hover {
+        color: ${TMColors.secondary};
+    }
+`;
+const TMSidebarItem = (props) => {
+    return (_jsx(TMTooltip, { hideAfterDelay: true, content: props.name, children: _jsx(StyledTMSidebarItemContainer, { "$isSelected": props.isSelected, children: _jsxs("div", { onClick: () => props.onClick?.(props), children: [_jsx("i", { children: props.icon }), _jsx("p", { children: props.name })] }) }) }));
+};
+export default TMSidebarItem;

package/lib/components/splitter/TMSplitterLayout.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+interface ITMSplitterLayoutProps {
+    vertical?: boolean;
+    percentage?: boolean;
+    primaryIndex?: number;
+    primaryMinSize?: number;
+    secondaryInitialSize?: number;
+    secondaryMinSize?: number;
+    height?: string;
+    width?: string;
+    onDragStart?: () => void;
+    onDragEnd?: () => void;
+    onSecondaryPaneSizeChange?: (size: number) => void;
+    children?: React.ReactNode[];
+}
+declare const TMSplitterLayout: React.FC<ITMSplitterLayoutProps>;
+export default TMSplitterLayout;