@topconsultnpm/sdkui-react-beta 6.7.47 → 6.7.49

package/lib/components/forms/TMLoginForm.js

@@ -10,7 +10,7 @@ import ptMessages from "devextreme/localization/messages/pt.json";
 import { locale as dxlocale, loadMessages } from "devextreme/localization";
 import backgroundLogin from '../../assets/login-bg.png';
 import six from '../../assets/loading.png';
-import { IconAccessPoint, IconArchive, IconLanguage, IconLogin, IconMail, IconPassword, IconSearch, IconUser, IconWeb, IconWifi, SDKUI_Localizator, calcResponsiveDirection, calcResponsiveSizes, IconArrowLeft, SDKUI_Globals, IconChangeUser } from "../../helper";
+import { IconAccessPoint, IconArchive, IconLanguage, IconLogin, IconMail, IconPassword, IconSearch, IconUser, IconWeb, IconWifi, SDKUI_Localizator, calcResponsiveDirection, calcResponsiveSizes, IconArrowLeft, SDKUI_Globals, IconChangeUser, IconInfo } from "../../helper";
 // import { TMColors } from "/utils/theme";
 // import TMLayoutContainer, { TMCard, TMLayoutItem } from "../Layout/TMLayout";
 import styled from "styled-components";
@@ -865,7 +865,7 @@ const TMLoginForm = (props) => {
                 setOtpValues(['', '', '', '', '', '']);
         }
     };
-    return (_jsxs(StyledLoginContainer, { "$responsiveHeight": calcResponsiveSizes(deviceType, '75%', '96%', '98%'), "$responsiveWidth": calcResponsiveSizes(deviceType, '55%', '95%', '95%'), children: [_jsxs(TMLayoutContainer, { direction: calcResponsiveDirection(deviceType, "horizontal", "vertical", "vertical"), children: [_jsx(TMLayoutItem, { width: calcResponsiveSizes(deviceType, "40%", "100%", "100%"), height: calcResponsiveSizes(deviceType, '100%', '20%', '20%'), children: _jsx("div", { style: { width: '100%', height: '100%', backgroundImage: `url(${backgroundLogin})`, backgroundRepeat: 'no-repeat', backgroundSize: 'cover', backgroundPosition: 'center', borderRadius: '10px' }, children: _jsx(StyledLogoContainer, { "$width": "100%", "$height": calcResponsiveSizes(deviceType, '21%', '50%', '50%'), "$top": '20%', children: _jsx("div", { style: { display: 'flex', height: '100%', alignItems: 'center', justifyContent: 'center', fontWeight: 'bolder', color: TMColors.secondary, fontStyle: 'italic' }, children: _jsxs("div", { style: { display: 'flex', alignItems: 'flex-end', gap: 10 }, children: [_jsx("img", { src: six, height: 40, alt: "" }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx("div", { style: { fontSize: '0.8rem', color: '#343434', fontWeight: 'lighter' }, children: "TopMedia" }), _jsxs("div", { children: [_jsx("span", { style: { fontSize: '2.5rem', lineHeight: 1 }, children: SDK_Globals.appModule }), "\u00A0", _jsx("i", { className: "dx-icon-info", style: { fontSize: "20px", cursor: "pointer" }, onClick: () => { TMMessageBoxManager.show({ buttons: [ButtonNames.OK], title: `About. ${SDK_Globals.appModule}`, message: _jsx(TMAboutApp, { app: true, skdui: true, sdk: true, websdk: false }) }); } })] })] })] }) }) }) }) }), _jsxs(TMLayoutItem, { width: calcResponsiveSizes(deviceType, "60%", "100%", "100%"), height: calcResponsiveSizes(deviceType, '100%', '80%', '80%'), children: [togglePages.recovery &&
+    return (_jsxs(StyledLoginContainer, { "$responsiveHeight": calcResponsiveSizes(deviceType, '75%', '96%', '98%'), "$responsiveWidth": calcResponsiveSizes(deviceType, '55%', '95%', '95%'), children: [_jsxs(TMLayoutContainer, { direction: calcResponsiveDirection(deviceType, "horizontal", "vertical", "vertical"), children: [_jsx(TMLayoutItem, { width: calcResponsiveSizes(deviceType, "40%", "100%", "100%"), height: calcResponsiveSizes(deviceType, '100%', '20%', '20%'), children: _jsx("div", { style: { width: '100%', height: '100%', backgroundImage: `url(${backgroundLogin})`, backgroundRepeat: 'no-repeat', backgroundSize: 'cover', backgroundPosition: 'center', borderRadius: '10px' }, children: _jsx(StyledLogoContainer, { "$width": "100%", "$height": calcResponsiveSizes(deviceType, '21%', '50%', '50%'), "$top": '20%', children: _jsx("div", { style: { display: 'flex', height: '100%', alignItems: 'center', justifyContent: 'center', fontWeight: 'bolder', color: TMColors.secondary, fontStyle: 'italic' }, children: _jsxs("div", { style: { display: 'flex', alignItems: 'flex-end', gap: 10 }, children: [_jsx("img", { src: six, height: 40, alt: "" }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx("div", { style: { fontSize: '0.8rem', color: '#343434', fontWeight: 'lighter' }, children: "TopMedia" }), _jsxs("div", { children: [_jsx("span", { style: { fontSize: '2.5rem', lineHeight: 1 }, children: SDK_Globals.appModule }), "\u00A0", _jsx(IconInfo, { fontSize: "22px", cursor: "pointer", onClick: () => { TMMessageBoxManager.show({ buttons: [ButtonNames.OK], title: `About. ${SDK_Globals.appModule}`, message: _jsx(TMAboutApp, { app: true, skdui: true, sdk: true, websdk: false }) }); } })] })] })] }) }) }) }) }), _jsxs(TMLayoutItem, { width: calcResponsiveSizes(deviceType, "60%", "100%", "100%"), height: calcResponsiveSizes(deviceType, '100%', '80%', '80%'), children: [togglePages.recovery &&
                                 _jsx(StyledContainer, { children: _jsxs(TMLayoutContainer, { alignItems: "center", children: [_jsx(TMLayoutItem, { width: "fit-content", height: "max-content", children: _jsx(StyledHeaderText, { children: SDKUI_Localizator.ForgetPassword }) }), _jsx(TMLayoutItem, { children: _jsx("div", { style: { padding: `0px ${calcResponsiveSizes(deviceType, '40px', '40px', '10px')}` }, children: _jsx(TMCard, { showBorder: false, children: _jsxs(TMLayoutContainer, { children: [_jsx(TMLayoutItem, { height: "max-content", children: _jsxs("div", { style: { width: '100%', height: '5px', display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginTop: '20px' }, children: [_jsx("div", { style: { transform: 'translateX(-1px)', width: '15px', height: '15px', borderRadius: '20px', transition: '500ms ease', backgroundColor: TMColors.primary, zIndex: 300, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: "1" }), _jsx("div", { style: { width: '15px', height: '15px', borderRadius: '20px', transition: '500ms ease', backgroundColor: recoveryPasswordState.step > 1 ? TMColors.primary : 'rgb(180,180,180)', zIndex: 300, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: "2" }), _jsx("div", { style: { transform: 'translateX(1px)', width: '15px', height: '15px', borderRadius: '20px', transition: '500ms ease', backgroundColor: recoveryPasswordState.step > 2 ? TMColors.primary : 'rgb(180,180,180)', zIndex: 300, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: "3" }), _jsx("div", { style: { width: '100%', height: '5px', backgroundColor: 'rgb(180,180,180)', position: 'absolute' } }), _jsx("div", { style: { width: recoveryPasswordState.step === 1 ? '0%' : recoveryPasswordState.step === 2 ? '50%' : '100%', transition: '500ms ease', height: '5px', backgroundColor: TMColors.primary, position: 'absolute' } })] }) }), recoveryPasswordState.step === 1 && _jsx(TMLayoutItem, { children: _jsx(TMTextBox, { type: "email", elementStyle: { marginTop: '30px' }, label: SDKUI_Localizator.InsertYourEmail, icon: _jsx(IconMail, {}), onValueChanged: (e) => setRecoveryPasswordState({ ...recoveryPasswordState, email: e.target.value }), value: recoveryPasswordState.email, validationItems: recoveryPasswordState.email?.length === 0 ? recoveryPasswordValidationItems.filter(item => item.PropertyName === 'recoveryPass_email') : recoveryPasswordValidationItems.filter(item => item.PropertyName === 'recoveryPass_notEmail') }) }), recoveryPasswordState.step === 2 && _jsx(TMLayoutItem, { children: _jsxs(StyledOTPContainer, { children: [_jsxs(StyledOTPLabel, { children: [" ", SDKUI_Localizator.InsertOTP, " ", otpHasFilled.find(input => input === true) && _jsx("strong", { style: { cursor: 'pointer' }, onClick: () => setOtpValues(['', '', '', '', '', '']), children: SDKUI_Localizator.ClearOTP }), " "] }), _jsxs(StyledOTPInputContainer, { children: [_jsx(StyledOTPInput, { ref: otp1Ref, type: "number", max: 9, min: 0, value: otpValues[0], onChange: (e) => { let arr = [...otpValues]; arr[0] = e.target.value; setOtpValues(arr); } }), _jsx(StyledOTPInput, { ref: otp2Ref, type: "number", max: 9, min: 0, value: otpValues[1], onChange: (e) => { let arr = [...otpValues]; arr[1] = e.target.value; setOtpValues(arr); } }), _jsx(StyledOTPInput, { ref: otp3Ref, type: "number", max: 9, min: 0, value: otpValues[2], onChange: (e) => { let arr = [...otpValues]; arr[2] = e.target.value; setOtpValues(arr); } }), _jsx(StyledOTPInput, { ref: otp4Ref, type: "number", max: 9, min: 0, value: otpValues[3], onChange: (e) => { let arr = [...otpValues]; arr[3] = e.target.value; setOtpValues(arr); } }), _jsx(StyledOTPInput, { ref: otp5Ref, type: "number", max: 9, min: 0, value: otpValues[4], onChange: (e) => { let arr = [...otpValues]; arr[4] = e.target.value; setOtpValues(arr); } }), _jsx(StyledOTPInput, { ref: otp6Ref, type: "number", max: 9, min: 0, value: otpValues[5], onChange: (e) => { let arr = [...otpValues]; arr[5] = e.target.value; setOtpValues(arr); } })] }), _jsxs(StyledOTPWaitPanel, { children: [_jsxs("em", { children: [" ", SDKUI_Localizator.OTPSent, " ", _jsx("strong", { children: recoveryPasswordState.email }), ". ", SDKUI_Localizator.OTPNewRequest, " ", _jsx("strong", { children: wait }), " ", SDKUI_Localizator.Seconds] }), ".", wait === 0 && _jsx(TMButton, { caption: SDKUI_Localizator.NewOTP, showTooltip: false, onClick: () => setWait(60) })] })] }) }), recoveryPasswordState.step === 3 && _jsxs(_Fragment, { children: [_jsx(TMLayoutItem, { children: _jsx(TMTextBox, { type: "password", label: SDKUI_Localizator.NewPassword, icon: _jsx(IconPassword, {}), onValueChanged: (e) => setRecoveryPasswordState({ ...recoveryPasswordState, newPassword: e.target.value }), value: recoveryPasswordState.newPassword, validationItems: recoveryPasswordValidationItems.filter(item => item.PropertyName === 'recoveryPass_new' || item.PropertyName === 'recoveryPass_equalUsername' || item.PropertyName === 'recoveryPass_containUsername') }) }), _jsx(TMLayoutItem, { children: _jsx(TMTextBox, { type: "password", label: SDKUI_Localizator.ConfirmPassword, icon: _jsx(IconPassword, {}), onValueChanged: (e) => setRecoveryPasswordState({ ...recoveryPasswordState, confermPassword: e.target.value }), value: recoveryPasswordState.confermPassword, validationItems: recoveryPasswordValidationItems.filter(item => item.PropertyName === 'recoveryPass_confirm' || item.PropertyName === 'recoveryPass_notConfirmed') }) })] })] }) }) }) }), recoveryPasswordState.step === 3 && _jsx(TMPasswordManager, { operation: "recovery", validationItems: recoveryPasswordValidationItems }), _jsx(TMLayoutItem, { height: "fit-content", width: "fit-content", children: _jsx("p", { onClick: () => { recoveryPasswordBackClick(); }, tabIndex: isPasswordChangeEnable() ? 0 : undefined, onKeyDown: (e) => e.code === 'Space' && recoveryPasswordBackClick(), style: { userSelect: 'none', cursor: 'pointer', color: TMColors.primary, fontSize: '1rem' }, children: (recoveryPasswordState.step === 1 || recoveryPasswordState.step === 3) ? SDKUI_Localizator.Back : SDKUI_Localizator.Cancel }) }), _jsx(TMLayoutItem, { height: "fit-content", children: _jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '20px 0' }, children: _jsx(TMButton, { width: calcResponsiveSizes(deviceType, '150px', '150px', '300px'), height: calcResponsiveSizes(deviceType, '30px', '40px', '40px'), fontSize: "1rem", disabled: recoveryPasswordValidationItems.filter(vil => vil.ResultType === ResultTypes.ERROR).length > 0, caption: recoveryPasswordState.step < 3 ? SDKUI_Localizator.Next : SDKUI_Localizator.Save, onClick: () => recoveryPasswordOnClickManager(), showTooltip: false }) }) })] }) }), togglePages.change && _jsx(TMChangePassword, { deviceType: deviceType, tmSession: getChangePswTmSession(), username: username, enable: isPasswordChangeEnable(), onClose: () => backToLogin() }), togglePages.endpoint && _jsx(StyledContainer, { children: _jsxs(TMLayoutContainer, { alignItems: "center", children: [_jsx(TMLayoutItem, { width: "fit-content", height: "max-content", children: _jsx(StyledHeaderText, { children: SDKUI_Localizator.Endpoint }) }), _jsx(TMLayoutItem, { height: "fit-content", maxHeight: "70%", children: _jsx("div", { style: { height: '100%', padding: `0px ${calcResponsiveSizes(deviceType, '40px', '40px', '10px')}` }, children: _jsx(TMCard, { showBorder: false, children: _jsxs(DataGrid, { height: '100%', elementAttr: { class: 'dx-custom-row' }, dataSource: endpoints, allowColumnResizing: true, columnResizingMode: "widget", columnAutoWidth: true, allowColumnReordering: true, keyExpr: "URL", showBorders: true, showColumnLines: SDKUI_Globals.dataGridShowColumnLines, showRowLines: SDKUI_Globals.dataGridShowRowLines, onSelectionChanged: (e) => setSelectedEndPoint(e.selectedRowsData[0]), onRowDblClick: () => { setEndpoint(selectedEndpoint); backToLogin(); setSelectedEndPoint(undefined); }, children: [_jsx(Selection, { mode: "single", showCheckBoxesMode: "onClick", selectAllMode: 'allPages' }), _jsx(ScrollBar, { width: 3 }), _jsx(Column, { dataField: "Description", caption: SDKUI_Localizator.Description, allowSorting: false }), _jsx(Column, { dataField: "URL", caption: 'URL', allowSorting: false }), _jsx(Column, { dataField: "isDefault", caption: 'Default', dataType: "boolean", allowSorting: false })] }) }) }) }), recoveryPasswordState.step === 3 && _jsx(TMPasswordManager, { operation: "recovery", validationItems: recoveryPasswordValidationItems }), _jsx(TMLayoutItem, { height: "fit-content", children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '10px 0', gap: 10 }, children: [_jsx(TMButton, { caption: SDKUI_Localizator.Back, btnStyle: "icon", height: calcResponsiveSizes(deviceType, '30px', '40px', '40px'), fontSize: "0.8rem", onClick: backToLogin, icon: _jsx(IconArrowLeft, {}) }), _jsx(TMButton, { width: calcResponsiveSizes(deviceType, '150px', '150px', '300px'), height: calcResponsiveSizes(deviceType, '30px', '40px', '40px'), fontSize: "1rem", disabled: !selectedEndpoint, caption: SDKUI_Localizator.Select, onClick: () => { setEndpoint(selectedEndpoint); backToLogin(); setSelectedEndPoint(undefined); }, showTooltip: false }), _jsx(TMButton, { caption: 'Ping', btnStyle: "icon", height: calcResponsiveSizes(deviceType, '30px', '40px', '40px'), fontSize: "0.8rem", disabled: !selectedEndpoint, onClick: () => pingAsync(selectedEndpoint), icon: _jsx(IconWifi, {}) })] }) })] }) }), togglePages.archive && _jsx(StyledContainer, { children: _jsxs(TMLayoutContainer, { alignItems: "center", children: [_jsx(TMLayoutItem, { width: "fit-content", height: "max-content", children: _jsx(StyledHeaderText, { children: SDKUI_Localizator.ArchiveID }) }), _jsx(TMLayoutItem, { height: "fit-content", maxHeight: "70%", children: _jsx("div", { style: { height: '100%', padding: `0px ${calcResponsiveSizes(deviceType, '40px', '40px', '10px')}` }, children: _jsx(TMCard, { showBorder: false, children: _jsxs(DataGrid, { height: '100%', dataSource: archives, allowColumnResizing: true, columnResizingMode: "widget", columnAutoWidth: true, allowColumnReordering: true, keyExpr: "id", showBorders: true, showColumnLines: SDKUI_Globals.dataGridShowColumnLines, showRowLines: SDKUI_Globals.dataGridShowRowLines, onSelectionChanged: (e) => setSelectedArchive(e.selectedRowsData[0]), onRowDblClick: () => { setArchive(selectedArchive); backToLogin(); setSelectedArchive(undefined); }, children: [_jsx(Selection, { mode: "single", showCheckBoxesMode: "onClick", selectAllMode: 'allPages' }), _jsx(Column, { dataField: "id", caption: 'ID', allowSorting: false }), _jsx(Column, { dataField: "description", caption: SDKUI_Localizator.Description, allowSorting: false }), _jsx(Column, { dataField: "isDefault", caption: 'Default', dataType: "boolean", allowSorting: false })] }) }) }) }), recoveryPasswordState.step === 3 && _jsx(TMPasswordManager, { operation: "recovery", validationItems: recoveryPasswordValidationItems }), _jsx(TMLayoutItem, { height: "fit-content", children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '20px 0', gap: 10 }, children: [_jsx(TMButton, { caption: SDKUI_Localizator.Back, btnStyle: "icon", height: calcResponsiveSizes(deviceType, '30px', '40px', '40px'), fontSize: "0.8rem", onClick: backToLogin, icon: _jsx(IconArrowLeft, {}) }), _jsx(TMButton, { width: calcResponsiveSizes(deviceType, '150px', '150px', '300px'), height: calcResponsiveSizes(deviceType, '30px', '40px', '40px'), fontSize: "1rem", disabled: !selectedArchive, caption: SDKUI_Localizator.Select, onClick: () => { setArchive(selectedArchive); backToLogin(); setSelectedArchive(undefined); }, showTooltip: false })] }) })] }) }), (isLoginPage()) &&
                                 _jsx(StyledContainer, { children: _jsxs(TMLayoutContainer, { alignItems: "center", children: [_jsx(TMLayoutItem, { width: "fit-content", height: "max-content", children: _jsx(StyledHeaderText, { children: "Login" }) }), _jsx(TMLayoutItem, { children: _jsx("div", { style: { padding: `0px ${calcResponsiveSizes(deviceType, '40px', '40px', '10px')}` }, children: _jsx(TMCard, { showBorder: false, children: _jsxs(TMLayoutContainer, { children: [_jsxs(TMLayoutItem, { children: [_jsx(TMSummary, { label: SDKUI_Localizator.Endpoint, icon: _jsx(IconAccessPoint, {}), showClearButton: true, onClearClick: () => setEndpoint(undefined), iconEditButton: _jsx(IconSearch, {}), template: _jsx("div", { children: endpoint?.Description }), buttons: [{ text: "Ping", icon: _jsx(IconWifi, { color: "gray" }), onClick: () => pingAsync(endpoint) }], validationItems: loginValidationItems.filter(item => item.PropertyName === 'endpoint'), onEditorClick: showEndpoints }), archives && archives.length > 0 ?
                                                                             _jsx(TMSummary, { label: SDKUI_Localizator.ArchiveID, onClearClick: () => setArchive(undefined), iconEditButton: _jsx(IconSearch, {}), icon: _jsx(IconArchive, {}), template: _jsx("div", { children: archive ? archive.description : null }), validationItems: loginValidationItems.filter(item => item.PropertyName === 'archive'), onEditorClick: showArchives }) :

package/lib/components/forms/TMLoginPopupSaveLoginInfo.js

@@ -199,9 +199,9 @@ const TMLoginPopupSaveLoginInfo = (props) => {
         if (historyState.searchedLoginHistory.length === 0) {
             return (_jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", textAlign: "center", padding: "20px" }, children: SDKUI_Localizator.NoCredentialsSaved }));
         }
-        return (_jsx("div", { style: { overflowY: "auto", maxHeight: "calc(100% - 60px)", padding: "10px", }, children: _jsx(Accordion, { selectedItems: selectedItems, onSelectionChanged: onSelectionChanged, collapsible: true, multiple: false, animationDuration: 300, noDataText: SDKUI_Localizator.NoCredentialsSaved, style: { border: "1px solid #ddd", borderRadius: "6px" }, children: historyState.searchedLoginHistory.map((data, index) => (_jsx(Item, { titleRender: (titleObj) => _jsx(TMItemTitleRender, { titleObj: titleObj, id: index + 1, historyState: historyState, reloadHistoryState: reloadHistoryState, fillLoginForm: fillLoginForm, deleteItemFromLocalStorage: deleteItemFromLocalStorage }), title: data.name, children: _jsx(TMLoginItemTemplate, { data: data, reloadHistoryState: reloadHistoryState, setSelectedItems: setSelectedItems, setSearchText: setSearchText }) }, data.id))) }) }));
+        return (_jsx("div", { style: { overflowY: "auto", maxHeight: "calc(100% - 60px)", padding: "10px", }, children: _jsx(Accordion, { id: "user-credentials-popup", selectedItems: selectedItems, onSelectionChanged: onSelectionChanged, collapsible: true, multiple: false, animationDuration: 300, noDataText: SDKUI_Localizator.NoCredentialsSaved, style: { border: "1px solid #ddd", borderRadius: "6px" }, children: historyState.searchedLoginHistory.map((data, index) => (_jsx(Item, { titleRender: (titleObj) => _jsx(TMItemTitleRender, { titleObj: titleObj, id: index + 1, historyState: historyState, reloadHistoryState: reloadHistoryState, fillLoginForm: fillLoginForm, deleteItemFromLocalStorage: deleteItemFromLocalStorage }), title: data.name, children: _jsx(TMLoginItemTemplate, { data: data, reloadHistoryState: reloadHistoryState, setSelectedItems: setSelectedItems, setSearchText: setSearchText }) }, data.id))) }) }));
     };
-    return (_jsxs(Popup, { maxWidth: 600, visible: visible, onHiding: closePopup, title: SDKUI_Localizator.SwitchUser, titleRender: titleRender, hideOnOutsideClick: false, showTitle: true, resizeEnabled: true, dragEnabled: true, showCloseButton: true, children: [_jsxs("div", { style: { padding: "10px", display: "flex", justifyContent: "space-between", alignItems: "center", width: "100%", position: "sticky", top: 0, backgroundColor: "#fff", zIndex: 1, }, children: [_jsx("div", { style: { display: "flex", flex: 1 }, children: _jsx(TMSearchBar, { maxWidth: "200px", marginLeft: "0px", onSearchValueChanged: (e) => setSearchText(e), searchValue: searchText }) }), _jsxs("div", { style: { display: "flex", alignItems: "center", marginRight: "10px", gap: 10 }, children: [_jsx(TMTooltip, { content: SDKUI_Localizator.Export, children: _jsx(TMButton, { label: SDKUI_Localizator.Export, color: 'primary', btnStyle: 'toolbar', icon: _jsx(IconExport, {}), onClick: onExportCallback }) }), _jsx(TMTooltip, { content: SDKUI_Localizator.Import, children: _jsx(TMButton, { label: SDKUI_Localizator.Import, color: 'secondary', btnStyle: 'toolbar', icon: _jsx(IconImport, {}), onClick: onImportCallback }) })] })] }), renderPopupContent()] }));
+    return (_jsxs(Popup, { maxWidth: 600, visible: visible, onHiding: closePopup, title: SDKUI_Localizator.SwitchUser, titleRender: titleRender, hideOnOutsideClick: false, showTitle: true, resizeEnabled: true, dragEnabled: true, showCloseButton: true, children: [_jsxs("div", { style: { padding: "10px", display: "flex", justifyContent: "space-between", alignItems: "center", width: "100%", position: "sticky", top: 0, backgroundColor: "#fff", zIndex: 1, }, children: [_jsx("div", { style: { display: "flex", flex: 1 }, children: _jsx(TMSearchBar, { maxWidth: "200px", marginLeft: "0px", onSearchValueChanged: (e) => setSearchText(e), searchValue: searchText }) }), _jsxs("div", { style: { display: "flex", alignItems: "center", marginRight: "5px", gap: 8 }, children: [_jsx(TMTooltip, { content: SDKUI_Localizator.Export, children: _jsx(TMButton, { label: SDKUI_Localizator.Export, color: 'primary', btnStyle: 'toolbar', icon: _jsx(IconExport, {}), onClick: onExportCallback }) }), _jsx(TMTooltip, { content: SDKUI_Localizator.Import, children: _jsx(TMButton, { label: SDKUI_Localizator.Import, color: 'secondary', btnStyle: 'toolbar', icon: _jsx(IconImport, {}), onClick: onImportCallback }) })] })] }), renderPopupContent()] }));
 };
 export default TMLoginPopupSaveLoginInfo;
 // Render a styled title with its ID and title content, using flex layout
@@ -274,26 +274,14 @@ export const TMItemTitleRender = (props) => {
     };
     // Function to truncate title for mobile devices
     const truncateForMobile = (title) => {
-        return title.length > 10 ? `${title.substring(0, 10)}...` : title;
+        return title.length > 20 ? `${title.substring(0, 20)}...` : title;
     };
     // Function to truncate title for non-mobile devices
     const truncateForDesktop = (title) => {
         return title.length > 50 ? `${title.substring(0, 50)}...` : title;
     };
     const truncatedTitle = isMobile ? truncateForMobile(titleObj.title) : truncateForDesktop(titleObj.title);
-    return _jsxs("div", { style: { display: "flex", fontFamily: "Arial, sans-serif", width: "100%" }, children: [_jsxs("div", { style: {
-                    flex: isMobile ? "0 0 60%" : "0 0 85%",
-                    whiteSpace: "nowrap",
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                    display: "flex"
-                }, children: [_jsx(TMTooltip, { content: SDKUI_Localizator.SetAsFavorite, children: _jsxs("div", { style: { paddingTop: "5px", paddingBottom: "5px", paddingRight: "10px" }, children: [preferred && _jsx(Button, { width: 27, height: 27, style: { backgroundColor: '#EAD303', borderRadius: '50%', display: 'flex', justifyContent: 'center', alignItems: 'center' }, icon: "favorites", onClick: onPreferredCallback }), !preferred && _jsx(Button, { width: 27, height: 27, style: { backgroundColor: 'transparent', borderRadius: '50%', display: 'flex', justifyContent: 'center', alignItems: 'center' }, icon: "favorites", onClick: onPreferredCallback })] }) }), _jsx(TMTooltip, { content: titleObj.title, children: _jsxs("div", { style: { paddingTop: 10 }, children: ["(", id, ")\u00A0", _jsx("span", { style: { fontWeight: "bold" }, children: truncatedTitle })] }) })] }), _jsxs("div", { style: {
-                    display: 'flex',
-                    gap: '10px',
-                    alignItems: 'center',
-                    flex: isMobile ? "0 0 40%" : "0 0 15%",
-                    marginLeft: 10
-                }, children: [_jsx(TMTooltip, { content: SDKUI_Localizator.ApplyAndClose, children: _jsx(Button, { render: () => _jsx(IconApplyAndClose, { color: "#fff" }), width: 27, height: 27, style: { backgroundColor: '#6EB735', borderRadius: '50%', display: 'flex', justifyContent: 'center', alignItems: 'center' }, onClick: onLoginCallback }) }), _jsx(TMTooltip, { content: SDKUI_Localizator.Delete, children: _jsx(Button, { render: () => _jsx(IconDelete, { color: "#fff" }), width: 27, height: 27, style: { backgroundColor: '#ED153A', borderRadius: '50%', display: 'flex', justifyContent: 'center', alignItems: 'center' }, onClick: onDeleteCallback }) })] })] });
+    return _jsxs("div", { style: { display: "block", fontFamily: "Arial, sans-serif", width: "100%", position: "relative", whiteSpace: "nowrap" }, children: [_jsx("div", { style: { display: "inline-block", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", width: isMobile ? "72%" : "85%", verticalAlign: "top" }, children: _jsxs("div", { style: { display: "inline-flex", alignItems: "center" }, children: [_jsx(TMTooltip, { content: SDKUI_Localizator.SetAsFavorite, children: _jsxs("div", { style: { paddingTop: "5px", paddingBottom: "5px", paddingRight: "10px" }, children: [preferred && _jsx(Button, { width: 27, height: 27, style: { backgroundColor: '#EAD303', borderRadius: '50%', display: 'inline-flex', justifyContent: 'center', alignItems: 'center' }, icon: "favorites", onClick: onPreferredCallback }), !preferred && _jsx(Button, { width: 27, height: 27, style: { backgroundColor: 'transparent', borderRadius: '50%', display: 'inline-flex', justifyContent: 'center', alignItems: 'center' }, icon: "favorites", onClick: onPreferredCallback })] }) }), _jsx(TMTooltip, { content: titleObj.title, children: _jsxs("div", { style: { fontSize: isMobile ? "11px" : "12px" }, children: ["(", id, ")\u00A0", _jsx("span", { style: { fontWeight: "bold" }, children: truncatedTitle })] }) })] }) }), _jsx("div", { style: { display: "inline-block", position: "absolute", right: 0, textAlign: "right", verticalAlign: "top", whiteSpace: "nowrap" }, children: _jsxs("div", { style: { display: 'inline-flex', gap: '10px' }, children: [_jsx(TMTooltip, { content: SDKUI_Localizator.ApplyAndClose, children: _jsx(Button, { render: () => _jsx(IconApplyAndClose, { color: "#fff" }), width: 27, height: 27, style: { backgroundColor: '#6EB735', borderRadius: '50%', display: 'inline-flex', justifyContent: 'center', alignItems: 'center' }, onClick: onLoginCallback }) }), _jsx(TMTooltip, { content: SDKUI_Localizator.Delete, children: _jsx(Button, { render: () => _jsx(IconDelete, { color: "#fff" }), width: 27, height: 27, style: { backgroundColor: '#ED153A', borderRadius: '50%', display: 'inline-flex', justifyContent: 'center', alignItems: 'center' }, onClick: onDeleteCallback }) })] }) })] });
 };
 export const TMLoginItemTemplate = (props) => {
     const { data, reloadHistoryState, setSelectedItems, setSearchText } = props;

package/lib/helper/TMIcons.js

@@ -427,7 +427,7 @@ function IconFormatPageSplit(props) {
     return (_jsxs("svg", { fontSize: props.fontSize ? props.fontSize : FONTSIZE, viewBox: "0 0 24 24", fill: "currentColor", height: "1em", width: "1em", ...props, children: [" ", _jsx("path", { d: "M11 11V7h2v4h-2m2-10v4h-2V1h2m-2 16v-4h2v4h-2m-2 3H6V4h3V2H6a2 2 0 00-2 2v16c0 1.11.89 2 2 2h3v-2m6-17v5h3v12h-3v2h3c1.11 0 2-.89 2-2V8l-5-5m-2 16h-2v4h2v-4z" }), " "] }));
 }
 function IconChangeUser(props) {
-    return (_jsx("svg", { fontSize: props.fontSize ? props.fontSize : FONTSIZE, ...props, id: "fi_4337319", "enable-background": "new 0 0 512 512", fill: "currentColor", height: "512", viewBox: "0 0 512 512", width: "512", xmlns: "http://www.w3.org/2000/svg", children: _jsxs("g", { children: [_jsx("path", { d: "m472.367 55.7c0-30.713-24.987-55.7-55.7-55.7-73.894 3.06-73.873 108.352 0 111.4 30.713 0 55.7-24.987 55.7-55.7z" }), _jsx("path", { d: "m416.667 111.4c-52.567 0-95.333 42.767-95.333 95.333v17.133c0 8.284 6.716 15 15 15h160.666c8.284 0 15-6.716 15-15v-17.133c0-52.566-42.766-95.333-95.333-95.333z" }), _jsx("path", { d: "m151.033 328.833c0-30.713-24.987-55.7-55.7-55.7-73.894 3.06-73.873 108.352 0 111.4 30.714 0 55.7-24.987 55.7-55.7z" }), _jsx("path", { d: "m95.333 384.533c-52.566 0-95.333 42.767-95.333 95.334v17.133c0 8.284 6.716 15 15 15h160.667c8.284 0 15-6.716 15-15v-17.133c0-52.567-42.767-95.334-95.334-95.334z" }), _jsx("path", { d: "m266.606 36.527-32.133-32.134c-5.857-5.857-15.355-5.858-21.213 0s-5.858 15.355 0 21.213l6.578 6.578c-103.869 2.153-187.704 87.307-187.704 191.683 0 8.284 6.716 15 15 15s15-6.716 15-15c0-87.799 70.323-159.481 157.601-161.681l-6.475 6.474c-5.858 5.857-5.858 15.355 0 21.213 5.859 5.86 15.356 5.856 21.213 0l32.134-32.134c5.858-5.857 5.853-15.36-.001-21.212z" }), _jsx("path", { d: "m464.866 273.133c-8.284 0-15 6.716-15 15 0 87.799-70.323 159.481-157.601 161.681l6.475-6.474c5.858-5.857 5.858-15.355 0-21.213-5.857-5.858-15.355-5.857-21.213 0l-32.134 32.134c-5.858 5.857-5.853 15.361 0 21.213l32.134 32.134c5.859 5.859 15.357 5.856 21.213 0 5.858-5.858 5.858-15.355 0-21.213l-6.578-6.578c103.868-2.153 187.704-87.307 187.704-191.682 0-8.286-6.716-15.002-15-15.002z" })] }) }));
+    return (_jsx("svg", { fontSize: props.fontSize ? props.fontSize : FONTSIZE, ...props, id: "fi_4337319", enableBackground: "new 0 0 512 512", fill: "currentColor", height: "512", viewBox: "0 0 512 512", width: "512", xmlns: "http://www.w3.org/2000/svg", children: _jsxs("g", { children: [_jsx("path", { d: "m472.367 55.7c0-30.713-24.987-55.7-55.7-55.7-73.894 3.06-73.873 108.352 0 111.4 30.713 0 55.7-24.987 55.7-55.7z" }), _jsx("path", { d: "m416.667 111.4c-52.567 0-95.333 42.767-95.333 95.333v17.133c0 8.284 6.716 15 15 15h160.666c8.284 0 15-6.716 15-15v-17.133c0-52.566-42.766-95.333-95.333-95.333z" }), _jsx("path", { d: "m151.033 328.833c0-30.713-24.987-55.7-55.7-55.7-73.894 3.06-73.873 108.352 0 111.4 30.714 0 55.7-24.987 55.7-55.7z" }), _jsx("path", { d: "m95.333 384.533c-52.566 0-95.333 42.767-95.333 95.334v17.133c0 8.284 6.716 15 15 15h160.667c8.284 0 15-6.716 15-15v-17.133c0-52.567-42.767-95.334-95.334-95.334z" }), _jsx("path", { d: "m266.606 36.527-32.133-32.134c-5.857-5.857-15.355-5.858-21.213 0s-5.858 15.355 0 21.213l6.578 6.578c-103.869 2.153-187.704 87.307-187.704 191.683 0 8.284 6.716 15 15 15s15-6.716 15-15c0-87.799 70.323-159.481 157.601-161.681l-6.475 6.474c-5.858 5.857-5.858 15.355 0 21.213 5.859 5.86 15.356 5.856 21.213 0l32.134-32.134c5.858-5.857 5.853-15.36-.001-21.212z" }), _jsx("path", { d: "m464.866 273.133c-8.284 0-15 6.716-15 15 0 87.799-70.323 159.481-157.601 161.681l6.475-6.474c5.858-5.857 5.858-15.355 0-21.213-5.857-5.858-15.355-5.857-21.213 0l-32.134 32.134c-5.858 5.857-5.853 15.361 0 21.213l32.134 32.134c5.859 5.859 15.357 5.856 21.213 0 5.858-5.858 5.858-15.355 0-21.213l-6.578-6.578c103.868-2.153 187.704-87.307 187.704-191.682 0-8.286-6.716-15.002-15-15.002z" })] }) }));
 }
 function IconPaste(props) { return (_jsxs("svg", { fontSize: props?.fontSize ? props?.fontSize : FONTSIZE, viewBox: "0 0 16 16", fill: "currentColor", height: "1em", width: "1em", ...props, children: [" ", _jsx("path", { fill: "currentColor", d: "M11 2H9V1c0-.55-.45-1-1-1H6c-.55 0-1 .45-1 1v1H3v2h8V2zM8 2H6v-.998L6.002 1h1.996L8 1.002V2zm5 3V2.5c0-.275-.225-.5-.5-.5h-1v1h.5v2H9L6 8v4H2V3h.5V2h-1c-.275 0-.5.225-.5.5v10c0 .275.225.5.5.5H6v3h10V5h-3zM9 6.414V8H7.414L9 6.414zM15 15H7V9h3V6h5v9z" }), " "] })); }
 function IconFileSearch(props) { return (_jsxs("svg", { fontSize: props?.fontSize ? props?.fontSize : FONTSIZE, viewBox: "0 0 1024 1024", fill: "currentColor", height: "1em", width: "1em", ...props, children: [" ", _jsx("path", { d: "M688 312v-48c0-4.4-3.6-8-8-8H296c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h384c4.4 0 8-3.6 8-8zm-392 88c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h184c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H296zm144 452H208V148h560v344c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V108c0-17.7-14.3-32-32-32H168c-17.7 0-32 14.3-32 32v784c0 17.7 14.3 32 32 32h272c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm445.7 51.5l-93.3-93.3C814.7 780.7 828 743.9 828 704c0-97.2-78.8-176-176-176s-176 78.8-176 176 78.8 176 176 176c35.8 0 69-10.7 96.8-29l94.7 94.7c1.6 1.6 3.6 2.3 5.6 2.3s4.1-.8 5.6-2.3l31-31a7.9 7.9 0 000-11.2zM652 816c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z" }), " "] })); }

package/package.json

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