@topconsultnpm/sdkui-react-beta 6.7.21 → 6.7.23

package/lib/components/base/TMListView.d.ts

@@ -4,6 +4,7 @@ interface ITMListViewHeader {
     headerTitle?: string;
     firstCounter?: React.ReactNode;
     secondCounter?: React.ReactNode;
+    titleColor?: string;
 }
 interface ListProps<T> {
     dataSource?: T[];

package/lib/components/base/TMListView.js

@@ -7,6 +7,7 @@ import { IconApply, IconCloseCircle, IconColumns, IconDown, IconHide, IconShow,
 import { TMSearchBar } from '../sidebar/TMHeader';
 import TMTooltip from './TMTooltip';
 import { SDKUI_Localizator } from '../../helper';
+import { TMColors } from '../../utils/theme';
 const StyledListItem = styled.div ` width: 100%; height: max-content; border-bottom: 1px solid #e5e5e5; background-color: ${props => props.$isSelected ? props.$color ? `${props.$color}99` : '#00000030' : 'transparent'} ; color: ${props => props.$isSelected ? props.$color ? 'white' : '#000000' : '#000000'} ; &:hover{ background-color: ${props => props.$color ? props.$isSelected ? `${props.$color}99` : `${props.$color}40` : props.$isSelected ? '#00000030' : '#00000010'};} `;
 const StyledListViewContainer = styled.div ` position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; width: 100%; height: 100%; `;
 const StyledSearchContainer = styled.div ` width: 100%; height: max-content; padding: 5px; border-bottom: 1px solid #e5e5e5; display: flex; align-items: center; gap: 10px; `;
@@ -330,5 +331,5 @@ const TMListView = ({ customGroupingHeaders, headerBackGroundColor, header, show
 };
 export default TMListView;
 export const CustomListViewHeader = (props) => {
-    return (_jsxs("div", { style: { display: 'flex', alignItems: 'center', padding: '0 5px', gap: 5 }, children: [props.headerIcon, _jsx("p", { children: props.headerTitle }), props.firstCounter, props.secondCounter] }));
+    return (_jsxs("div", { style: { display: 'flex', alignItems: 'center', padding: '0 5px', gap: 5 }, children: [props.headerIcon, _jsx("p", { style: { fontWeight: 'bold', color: props.titleColor ? props.titleColor : TMColors.text_normal }, children: props.headerTitle }), props.firstCounter, props.secondCounter] }));
 };

package/lib/components/forms/TMLoginForm.js

@@ -146,13 +146,13 @@ const TMLoginForm = (props) => {
         }
     }, []);
     useEffect(() => {
-        const loginWidthEnterKey = (e) => { if (loginValidationItems.length === 0) {
+        const loginWidthEnterKey = (e) => { if (loginValidationItems.length === 0 && !popupSaveLoginInfoVisible) {
             if (e.key === 'Enter')
                 login();
         } };
         window.addEventListener('keyup', loginWidthEnterKey);
         return () => window.removeEventListener('keyup', loginWidthEnterKey);
-    }, [loginValidationItems]);
+    }, [loginValidationItems, popupSaveLoginInfoVisible]);
     // useEffect(() => { setEndpoint(props.endpoints[0]) }, [endpoints])
     useEffect(() => { setEndpoint(props.endpoints.find(ep => ep.isDefault)); }, [endpoints]);
     useEffect(() => { setTmServer(new TopMediaServer(endpoint?.URL)); }, [endpoint]);
@@ -844,7 +844,7 @@ const TMLoginForm = (props) => {
                                                                         _jsxs(_Fragment, { children: [_jsx(TMTextBox, { label: SDKUI_Localizator.Domain, icon: _jsx(IconWeb, {}), value: domainAlternative, onValueChanged: (e) => setDomainArternative(e.target.value), validationItems: loginValidationItems.filter(item => item.PropertyName === 'domain_alt') }), _jsx(TMTextBox, { validationItems: loginValidationItems.filter(item => item.PropertyName === 'username'), label: SDKUI_Localizator.UserName, icon: _jsx(IconUser, {}), value: username, onValueChanged: (e) => setUsername(e.target.value) }), _jsx(TMTextBox, { validationItems: loginValidationItems.filter(item => item.PropertyName === 'password'), type: "password", label: SDKUI_Localizator.Password, icon: _jsx(IconPassword, {}), value: password, onValueChanged: (e) => setPassword(e.target.value) })] })
                                                                         :
                                                                             _jsxs(_Fragment, { children: [_jsx(TMTextBox, { validationItems: loginValidationItems.filter(item => item.PropertyName === 'username'), label: SDKUI_Localizator.UserName, icon: _jsx(IconUser, {}), value: username, onValueChanged: (e) => setUsername(e.target.value) }), _jsx(TMLayoutItem, { children: _jsx(TMTextBox, { validationItems: loginValidationItems.filter(item => item.PropertyName === 'password'), type: "password", label: SDKUI_Localizator.Password, icon: _jsx(IconPassword, {}), value: password, onValueChanged: (e) => setPassword(e.target.value) }) })] }) }), authMode === AuthenticationModes.TopMediaOnBehalfOf && _jsx(TMLayoutItem, { children: _jsxs(TMLayoutContainer, { direction: "horizontal", children: [_jsx(TMLayoutItem, { children: _jsxs(TMLayoutContainer, { children: [_jsx(TMLayoutItem, { children: _jsx(TMTextBox, { validationItems: loginValidationItems.filter(item => item.PropertyName === 'username'), label: SDKUI_Localizator.UserName, icon: _jsx(IconUser, {}), value: username, onValueChanged: (e) => setUsername(e.target.value) }) }), _jsx(TMLayoutItem, { children: _jsx(TMTextBox, { validationItems: loginValidationItems.filter(item => item.PropertyName === 'password'), type: "password", label: SDKUI_Localizator.Password, icon: _jsx(IconPassword, {}), value: password, onValueChanged: (e) => setPassword(e.target.value) }) })] }) }), _jsx(TMLayoutItem, { children: _jsxs(TMLayoutContainer, { children: [_jsx(TMLayoutItem, { children: _jsx(TMTextBox, { label: SDKUI_Localizator.Domain, icon: _jsx(IconWeb, {}), value: domain, onValueChanged: (e) => setDomain(e.target.value), validationItems: loginValidationItems.filter(item => item.PropertyName === 'domain') }) }), _jsx(TMLayoutItem, { children: _jsx(TMTextBox, { label: SDKUI_Localizator.UserName, icon: _jsx(IconUser, {}), value: onBehalfUsername, onValueChanged: (e) => setOnBeHalfUsername(e.target.value), validationItems: loginValidationItems.filter(item => item.PropertyName === 'onBeHalfUsername') }) })] }) })] }) }), authMode !== AuthenticationModes.TopMediaOnBehalfOf ? _jsx(TMLayoutItem, { children: _jsx(TMDropDown, { dataSource: cultureIDsDataSource, icon: _jsx(IconLanguage, {}), label: SDKUI_Localizator.CultureID, onValueChanged: (e) => props.onChangeLanguage && props.onChangeLanguage(e.target.value), value: props.cultureID, validationItems: loginValidationItems.filter(item => item.PropertyName === 'cultureId') }) }) :
-                                                                    _jsxs(TMLayoutContainer, { direction: "horizontal", children: [_jsx(TMLayoutItem, { children: _jsx(TMDropDown, { dataSource: cultureIDsDataSource, icon: _jsx(IconLanguage, {}), label: SDKUI_Localizator.CultureID, onValueChanged: (e) => props.onChangeLanguage && props.onChangeLanguage(e.target.value), value: props.cultureID, validationItems: loginValidationItems.filter(item => item.PropertyName === 'cultureId') }) }), _jsx(TMLayoutItem, { children: _jsx(TMTextBox, { type: "password", label: SDKUI_Localizator.Password, icon: _jsx(IconPassword, {}), value: onBeHalfPassword, onValueChanged: (e) => setOnBeHalfPassword(e.target.value), validationItems: loginValidationItems.filter(item => item.PropertyName === 'onBeHalfPassword') }) })] }), props.saveLoginHistoryToLocalStorage && _jsxs(TMLayoutItem, { children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', marginTop: 12 }, children: [_jsx("i", { style: { fontSize: 20 }, className: "dx-icon-save" }), _jsx(TMCheckBox, { elementStyle: { marginLeft: 5 }, labelPosition: "left", label: SDKUI_Localizator.RememberCredentials, value: saveLoginInfo, onValueChanged: () => { setSaveLoginInfo(prevSaveLoginInfo => !prevSaveLoginInfo); }, isModifiedWhen: saveLoginInfo })] }), saveLoginInfo && _jsx(TMTextBox, { type: "text", label: SDKUI_Localizator.EnterNameForAccess, icon: _jsx("i", { style: { fontSize: 20 }, className: "dx-icon-save" }), value: saveLoginInfoName, onValueChanged: (e) => setSaveLoginInfoName(e.target.value), validationItems: loginValidationItems.filter(item => item.PropertyName === 'saveLoginName') })] })] }) }) }) }), _jsxs(TMLayoutItem, { height: "fit-content", width: "fit-content", children: [props.saveLoginHistoryToLocalStorage && _jsx("p", { onClick: showPopupSaveLoginInfo, onKeyDown: (e) => { }, style: { marginTop: '10px', userSelect: 'none', cursor: 'pointer', color: TMColors.primary, textAlign: 'center', fontSize: '0.9rem' }, children: SDKUI_Localizator.SwitchUser }), authMode === AuthenticationModes.TopMedia && _jsxs("div", { children: [_jsx("p", { onClick: () => isPasswordChangeEnable() && setTogglePages({ recovery: false, change: true, archive: false, endpoint: false }), tabIndex: isPasswordChangeEnable() ? 0 : undefined, onKeyDown: (e) => e.code === 'Space' && setTogglePages({ recovery: false, change: true, archive: false, endpoint: false }), style: { marginTop: '10px', userSelect: 'none', cursor: isPasswordChangeEnable() ? 'pointer' : 'default', color: isPasswordChangeEnable() ? TMColors.primary : 'rgb(180,180,180)', textAlign: 'center', fontSize: '0.9rem' }, children: SDKUI_Localizator.ChangePassword }), _jsx("p", { tabIndex: isPasswordChangeEnable() ? 0 : undefined, onKeyDown: (e) => e.code === 'Space' && showRecoveryPassword(), onClick: () => isPasswordChangeEnable() && showRecoveryPassword(), style: { userSelect: 'none', marginTop: '10px', cursor: isPasswordChangeEnable() ? 'pointer' : 'default', color: isPasswordChangeEnable() ? TMColors.primary : 'rgb(180,180,180)', fontSize: '0.9rem' }, children: SDKUI_Localizator.ForgetPassword })] })] }), _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', '250px'), height: calcResponsiveSizes(deviceType, '30px', '40px', '40px'), fontSize: "1.1rem", caption: "Login", disabled: loginValidationItems.length > 0, onClick: login, showTooltip: false }) }) })] }) })] })] }), _jsx(TMLoginPopupSaveLoginInfo, { visible: popupSaveLoginInfoVisible, hidePopup: hidePopupSaveLoginInfo, loginHistory: loginHistory, setLoginHistory: setLoginHistory, setEndpoint: setEndpoint, setArchive: setArchive, setAuthMode: setAuthMode, setUsername: setUsername, setPassword: setPassword, setDomain: setDomain, setDomainArternative: setDomainArternative, setOnBeHalfUsername: setOnBeHalfUsername, setOnBeHalfPassword: setOnBeHalfPassword, onChangeLanguage: onChangeLanguage })] }));
+                                                                    _jsxs(TMLayoutContainer, { direction: "horizontal", children: [_jsx(TMLayoutItem, { children: _jsx(TMDropDown, { dataSource: cultureIDsDataSource, icon: _jsx(IconLanguage, {}), label: SDKUI_Localizator.CultureID, onValueChanged: (e) => props.onChangeLanguage && props.onChangeLanguage(e.target.value), value: props.cultureID, validationItems: loginValidationItems.filter(item => item.PropertyName === 'cultureId') }) }), _jsx(TMLayoutItem, { children: _jsx(TMTextBox, { type: "password", label: SDKUI_Localizator.Password, icon: _jsx(IconPassword, {}), value: onBeHalfPassword, onValueChanged: (e) => setOnBeHalfPassword(e.target.value), validationItems: loginValidationItems.filter(item => item.PropertyName === 'onBeHalfPassword') }) })] }), props.saveLoginHistoryToLocalStorage && _jsxs(TMLayoutItem, { children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', marginTop: 12 }, children: [_jsx("i", { style: { fontSize: 20 }, className: "dx-icon-save" }), _jsx(TMCheckBox, { elementStyle: { marginLeft: 5 }, labelPosition: "left", label: SDKUI_Localizator.RememberCredentials, value: saveLoginInfo, onValueChanged: () => { setSaveLoginInfo(prevSaveLoginInfo => !prevSaveLoginInfo); }, isModifiedWhen: saveLoginInfo })] }), saveLoginInfo && _jsx(TMTextBox, { type: "text", label: SDKUI_Localizator.EnterNameForAccess, icon: _jsx("i", { style: { fontSize: 20 }, className: "dx-icon-save" }), value: saveLoginInfoName, onValueChanged: (e) => setSaveLoginInfoName(e.target.value), validationItems: loginValidationItems.filter(item => item.PropertyName === 'saveLoginName') })] })] }) }) }) }), _jsxs(TMLayoutItem, { height: "fit-content", width: "fit-content", children: [props.saveLoginHistoryToLocalStorage && _jsx("p", { onClick: showPopupSaveLoginInfo, onKeyDown: (e) => { }, style: { marginTop: '10px', userSelect: 'none', cursor: 'pointer', color: TMColors.primary, textAlign: 'center', fontSize: '0.9rem' }, children: SDKUI_Localizator.SwitchUser }), authMode === AuthenticationModes.TopMedia && _jsxs("div", { children: [_jsx("p", { onClick: () => isPasswordChangeEnable() && setTogglePages({ recovery: false, change: true, archive: false, endpoint: false }), tabIndex: isPasswordChangeEnable() ? 0 : undefined, onKeyDown: (e) => e.code === 'Space' && setTogglePages({ recovery: false, change: true, archive: false, endpoint: false }), style: { marginTop: '10px', userSelect: 'none', cursor: isPasswordChangeEnable() ? 'pointer' : 'default', color: isPasswordChangeEnable() ? TMColors.primary : 'rgb(180,180,180)', textAlign: 'center', fontSize: '0.9rem' }, children: SDKUI_Localizator.ChangePassword }), _jsx("p", { tabIndex: isPasswordChangeEnable() ? 0 : undefined, onKeyDown: (e) => e.code === 'Space' && showRecoveryPassword(), onClick: () => isPasswordChangeEnable() && showRecoveryPassword(), style: { userSelect: 'none', marginTop: '10px', cursor: isPasswordChangeEnable() ? 'pointer' : 'default', color: isPasswordChangeEnable() ? TMColors.primary : 'rgb(180,180,180)', fontSize: '0.9rem' }, children: SDKUI_Localizator.ForgetPassword })] })] }), _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', '250px'), height: calcResponsiveSizes(deviceType, '30px', '40px', '40px'), fontSize: "1.1rem", caption: "Login", disabled: loginValidationItems.length > 0, onClick: login, showTooltip: false }) }) })] }) })] })] }), _jsx(TMLoginPopupSaveLoginInfo, { visible: popupSaveLoginInfoVisible, hidePopup: hidePopupSaveLoginInfo, setLoginHistory: setLoginHistory, setEndpoint: setEndpoint, setArchive: setArchive, setAuthMode: setAuthMode, setUsername: setUsername, setPassword: setPassword, setDomain: setDomain, setDomainArternative: setDomainArternative, setOnBeHalfUsername: setOnBeHalfUsername, setOnBeHalfPassword: setOnBeHalfPassword, onChangeLanguage: onChangeLanguage })] }));
 };
 const TMPasswordManager = ({ validationItems = [], operation = 'change' }) => {
     const passwordStrength = () => {

package/lib/components/forms/TMLoginPopupSaveLoginInfo.d.ts

@@ -2,7 +2,6 @@ import React from "react";
 import { ITMLoginHistory, TMEndpointsType } from "./TMLoginForm";
 import { ArchiveDescriptor, AuthenticationModes, CultureIDs } from "@topconsultnpm/sdk-ts-beta";
 interface TMLoginPopupSaveLoginInfoProps {
-    loginHistory: Array<ITMLoginHistory>;
     setLoginHistory: React.Dispatch<React.SetStateAction<Array<ITMLoginHistory>>>;
     visible: boolean;
     hidePopup: () => void;
@@ -19,3 +18,12 @@ interface TMLoginPopupSaveLoginInfoProps {
 }
 declare const TMLoginPopupSaveLoginInfo: (props: TMLoginPopupSaveLoginInfoProps) => import("react/jsx-runtime").JSX.Element;
 export default TMLoginPopupSaveLoginInfo;
+interface TMLoginItemTemplateProps {
+    data: ITMLoginHistory;
+    reloadHistoryState: () => void;
+    fillLoginForm: (data: ITMLoginHistory) => void;
+    deleteItemFromLocalStorage: (name: string) => void;
+    setSelectedItems: React.Dispatch<React.SetStateAction<ITMLoginHistory[]>>;
+    setSearchText: React.Dispatch<React.SetStateAction<string>>;
+}
+export declare const TMLoginItemTemplate: React.FC<TMLoginItemTemplateProps>;

package/lib/components/forms/TMLoginPopupSaveLoginInfo.js

@@ -1,69 +1,82 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
-import { Accordion, LoadIndicator, Popup, ScrollView } from "devextreme-react";
+import { Accordion, LoadIndicator, Popup } from "devextreme-react";
 import { cultureIDsDataSource, LOGIN_HISTORY_KEY, } from "./TMLoginForm";
-import { LocalStorageService } from "@topconsultnpm/sdk-ts-beta";
+import { LocalStorageService, ResultTypes, SDK_Localizator, ValidationItem } from "@topconsultnpm/sdk-ts-beta";
 import { Item } from "devextreme-react/cjs/accordion";
 import { SDKUI_Localizator } from "../../helper/SDKUI_Localizator";
 import { ButtonNames, TMExceptionBoxManager, TMMessageBoxManager } from "../base/TMPopUp";
 import TMTooltip from "../base/TMTooltip";
 import TMTextBox from "../editors/TMTextBox";
+import { TMSearchBar } from "../sidebar/TMHeader";
 const TMLoginPopupSaveLoginInfo = (props) => {
-    const { loginHistory, setLoginHistory, visible, hidePopup, setEndpoint, setArchive, setAuthMode, setUsername, setPassword, setDomain, setDomainArternative, setOnBeHalfUsername, setOnBeHalfPassword, onChangeLanguage } = props;
-    const [loginHistoryData, setLoginHistoryData] = useState(loginHistory);
+    const { setLoginHistory, visible, hidePopup, setEndpoint, setArchive, setAuthMode, setUsername, setPassword, setDomain, setDomainArternative, setOnBeHalfUsername, setOnBeHalfPassword, onChangeLanguage } = props;
+    // State to manage loading status
     const [loading, setLoading] = useState(false);
+    // State to store the search input text
     const [searchText, setSearchText] = useState('');
+    // State to store selected items of type ITMLoginHistory
+    const [selectedItems, setSelectedItems] = useState([]);
+    // Retrieve the login history from local storage, sort by 'name', and return the sorted array (or an empty array if not found)
+    const getSortedLoginHistory = () => {
+        const loginHistory = LocalStorageService.getItem(LOGIN_HISTORY_KEY);
+        return loginHistory?.sort((a, b) => a.name.localeCompare(b.name)) || [];
+    };
+    // State to store both the full login history and the filtered search history
+    const [historyState, setHistoryState] = useState({
+        loginHistory: getSortedLoginHistory(),
+        searchedLoginHistory: getSortedLoginHistory(),
+    });
+    // Handle search input changes with a debounce effect, updating the searched login history after a delay
     useEffect(() => {
         let timeoutId;
         if (searchText.length > 0) {
             setLoading(true);
             timeoutId = setTimeout(() => {
-                setLoginHistoryData(loginHistory.filter(data => data.name.toLowerCase().includes(searchText.toLowerCase())));
+                setHistoryState(prevState => ({
+                    ...prevState,
+                    searchedLoginHistory: historyState.loginHistory.filter(data => data.name.toLowerCase().includes(searchText.toLowerCase()))
+                }));
                 setLoading(false);
             }, 300);
         }
         else {
-            setLoginHistoryData(loginHistory);
+            setHistoryState(prevState => ({ ...prevState, loginHistory: historyState.loginHistory, searchedLoginHistory: historyState.loginHistory }));
             setLoading(false);
         }
         return () => {
             clearTimeout(timeoutId);
         };
     }, [searchText]);
-    // Function to generate a hash from a string (text)
-    const stringToHash = (str) => {
-        let hash = 0;
-        for (let i = 0; i < str.length; i++) {
-            hash = (hash << 5) - hash + str.charCodeAt(i);
-            hash = hash & hash; // Convert to 32bit integer
-        }
-        return hash;
+    // Function to reload and update state
+    const reloadHistoryState = () => {
+        const updatedLoginHistory = getSortedLoginHistory();
+        setHistoryState({
+            loginHistory: updatedLoginHistory,
+            searchedLoginHistory: updatedLoginHistory,
+        });
     };
-    const getRandomColorFromText = (text) => {
-        const hash = stringToHash(text);
-        // Map the hash to a color, using the hash value for RGB
-        const r = (hash & 0xFF0000) >> 16; // Red (8 bits)
-        const g = (hash & 0x00FF00) >> 8; // Green (8 bits)
-        const b = hash & 0x0000FF; // Blue (8 bits)
-        // Ensure the RGB values are within the valid range (0-255)
-        return `rgb(${r % 256}, ${g % 256}, ${b % 256})`;
+    // Update selected items with the last added item from the event (or an empty array if none were added)
+    const onSelectionChanged = (e) => {
+        const newItems = e.addedItems.length ? [e.addedItems[e.addedItems.length - 1]] : [];
+        setSelectedItems(newItems);
     };
-    // Function to calculate luminance from a hex color
-    const getLuminance = (color) => {
-        // Using slice() instead of substr()
-        let r = parseInt(color.slice(1, 3), 16) / 255; // slice(1, 3) extracts the hex digits for red
-        let g = parseInt(color.slice(3, 5), 16) / 255; // slice(3, 5) extracts the hex digits for green
-        let b = parseInt(color.slice(5, 7), 16) / 255; // slice(5, 7) extracts the hex digits for blue
-        // Apply the luminance formula
-        const a = [r, g, b].map(c => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4));
-        const luminance = 0.2126 * a[0] + 0.7152 * a[1] + 0.0722 * a[2];
-        return luminance;
-    };
-    // Function to determine text color based on background luminance
-    const getTextColor = (backgroundColor) => {
-        return getLuminance(backgroundColor) > 0.5 ? 'black' : 'white';
+    // Populate the login form fields with data from the selected login history item
+    const fillLoginForm = (data) => {
+        setEndpoint(data.endpoint);
+        setArchive(data.archive);
+        setUsername(data.username);
+        setPassword("");
+        setAuthMode(data.authenticationMode);
+        setDomain(data.domain);
+        setDomainArternative(data.domainAlternative);
+        setOnBeHalfUsername(data.onBehalfUsername);
+        setOnBeHalfPassword("");
+        if (onChangeLanguage)
+            onChangeLanguage(data.language);
+        hidePopup();
     };
-    const titleRender = () => (_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }, children: [_jsx("h3", { children: SDKUI_Localizator.SwitchUser }), _jsx("button", { style: { background: 'none', border: 'none', fontSize: '16px', cursor: 'pointer' }, onClick: hidePopup, children: _jsx("i", { style: { fontSize: 20 }, className: "dx-icon-remove" }) })] }));
+    // Display a confirmation dialog for deleting an item from local storage and handle the deletion on confirmation
     const deleteItemFromLocalStorage = (name) => {
         const msg = SDKUI_Localizator.Delete_ConfirmFor1.replaceParams(name);
         TMMessageBoxManager.show({
@@ -74,7 +87,8 @@ const TMLoginPopupSaveLoginInfo = (props) => {
                 try {
                     LocalStorageService.deleteItemByField(LOGIN_HISTORY_KEY, "name", name);
                     setLoginHistory(LocalStorageService.getItem(LOGIN_HISTORY_KEY) ?? []);
-                    setLoginHistoryData(LocalStorageService.getItem(LOGIN_HISTORY_KEY) ?? []);
+                    reloadHistoryState();
+                    setSelectedItems([]);
                 }
                 catch (e) {
                     TMExceptionBoxManager.show({ exception: e });
@@ -82,33 +96,101 @@ const TMLoginPopupSaveLoginInfo = (props) => {
             }
         });
     };
-    const fillLoginForm = (data) => {
-        setEndpoint(data.endpoint);
-        setArchive(data.archive);
-        setUsername(data.username);
-        setPassword("");
-        setAuthMode(data.authenticationMode);
-        setDomain(data.domain);
-        setDomainArternative(data.domainAlternative);
-        setOnBeHalfUsername(data.onBehalfUsername);
-        setOnBeHalfPassword("");
-        if (onChangeLanguage)
-            onChangeLanguage(data.language);
+    // Clear the search text and close the popup
+    const closePopup = () => {
+        setSearchText('');
         hidePopup();
     };
-    const itemTemplate = (data) => {
-        // Generate a random background color for the circle
-        const randomBGColor = getRandomColorFromText(data.name);
-        // Determine the text color (black or white) based on background color luminance
-        const textColor = getTextColor(randomBGColor);
-        return _jsx(ScrollView, { direction: "horizontal", showScrollbar: "always", style: { width: '100%' }, useNative: true, children: _jsxs("div", { style: { display: 'flex', background: '#fff', boxShadow: '0 4px 20px rgba(0, 0, 0, 0.1)', overflow: 'hidden', width: '100%', justifyContent: 'center', alignItems: 'center' }, children: [_jsx(TMTooltip, { content: data.name, children: _jsx("div", { style: { background: randomBGColor, color: textColor, display: 'flex', justifyContent: 'center', alignItems: 'center', width: '15vw', height: '15vw', maxWidth: '70px', maxHeight: '70px', borderRadius: '50%', fontWeight: 'bold', margin: '20px', textAlign: 'center' }, children: data.name.slice(0, 3).toUpperCase() }) }), _jsxs("div", { style: { padding: '5px', flex: 1 }, children: [_jsxs("div", { style: { marginBottom: '12px', fontSize: '1em', color: '#555' }, children: [SDKUI_Localizator.Name, ": ", _jsxs("span", { style: { fontWeight: 'bold', color: '#333' }, children: [" ", data.name] })] }), _jsxs("div", { style: { marginBottom: '12px', fontSize: '1em', color: '#555' }, children: [SDKUI_Localizator.Endpoint, ": ", _jsxs("span", { style: { fontWeight: 'bold', color: '#333' }, children: [" ", data.endpoint?.Description ?? '', "/", data.username] }), " "] }), _jsxs("div", { style: { marginBottom: '12px', fontSize: '1em', color: '#555' }, children: [SDKUI_Localizator.ArchiveID, ": ", _jsxs("span", { style: { fontWeight: 'bold', color: '#333' }, children: [" ", data.archive?.description ?? ''] })] }), _jsxs("div", { style: { marginBottom: '12px', fontSize: '1em', color: '#555' }, children: [SDKUI_Localizator.AuthMode, ":", _jsxs("span", { style: { fontWeight: 'bold', color: '#333' }, children: [" ", data.authenticationMode] })] }), _jsxs("div", { style: { marginBottom: '12px', fontSize: '1em', color: '#555' }, children: [SDKUI_Localizator.CultureID, ":", _jsxs("span", { style: { fontWeight: 'bold', color: '#333' }, children: [" ", cultureIDsDataSource.find(item => item.value === data.language)?.display ?? ''] })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'flex-start', alignItems: 'center' }, children: [_jsx(TMTooltip, { content: "Login", children: _jsx("div", { onClick: () => { fillLoginForm(data); }, style: { backgroundColor: randomBGColor, color: textColor, display: 'flex', justifyContent: 'center', alignItems: 'center', width: '15vw', height: '15vw', maxWidth: '50px', maxHeight: '50px', borderRadius: '50%', fontWeight: 'bold', marginRight: '10px', textAlign: 'center' }, children: _jsx("i", { className: "dx-icon-login", style: { fontSize: '1.5em', color: textColor, cursor: 'pointer' } }) }) }), _jsx(TMTooltip, { content: SDKUI_Localizator.Delete, children: _jsx("div", { onClick: () => { deleteItemFromLocalStorage(data.name); }, style: { backgroundColor: "#ff4d4f", display: 'flex', justifyContent: 'center', alignItems: 'center', width: '15vw', height: '15vw', maxWidth: '50px', maxHeight: '50px', borderRadius: '50%', fontWeight: 'bold', textAlign: 'center' }, children: _jsx("i", { className: "dx-icon-trash", style: { fontSize: '1.5em', color: getTextColor("#ff4d4f"), cursor: 'pointer' } }) }) })] })] })] }) });
+    // Render a title with a "Switch User" label and a close button styled as an icon
+    const titleRender = () => (_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }, children: [_jsx("h3", { children: SDKUI_Localizator.SwitchUser }), _jsx("button", { style: { background: 'none', border: 'none', fontSize: '16px', cursor: 'pointer' }, onClick: hidePopup, children: _jsx("i", { style: { fontSize: 20 }, className: "dx-icon-remove" }) })] }));
+    // Render a styled title with its ID and title content, using flex layout
+    const itemTitleRender = (titleObj, id) => {
+        return _jsxs("div", { style: { display: "flex", gap: "20px", fontFamily: "Arial, sans-serif" }, children: [_jsx("div", { style: { padding: "10px", border: "1px solid #ddd", borderRadius: "10px", }, children: id }), _jsx("div", { style: { padding: "10px", fontWeight: "bold", border: "1px solid #ddd", borderRadius: "10px", }, children: titleObj.title })] });
     };
-    const onSearchValueChanged = (e) => {
-        if (e === undefined)
-            return;
-        setSearchText(e.target.value);
+    // Conditionally render popup content based on loading state, available login history, or display login items in an accordion
+    const renderPopupContent = () => {
+        if (loading) {
+            return (_jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%", width: "100%" }, children: _jsx(LoadIndicator, {}) }));
+        }
+        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", boxShadow: "0 2px 6px rgba(0, 0, 0, 0.1)" }, children: historyState.searchedLoginHistory.map((data, index) => (_jsx(Item, { titleRender: (titleObj) => itemTitleRender(titleObj, index), title: data.name, children: _jsx(TMLoginItemTemplate, { data: data, reloadHistoryState: reloadHistoryState, fillLoginForm: fillLoginForm, deleteItemFromLocalStorage: deleteItemFromLocalStorage, setSelectedItems: setSelectedItems, setSearchText: setSearchText }) }, data.id))) }) }));
     };
-    return _jsxs(Popup, { width: "90%", height: "80%", maxWidth: 600, visible: visible, onHiding: hidePopup, title: SDKUI_Localizator.SwitchUser, titleRender: titleRender, hideOnOutsideClick: false, showTitle: true, resizeEnabled: true, dragEnabled: true, showCloseButton: true, children: [_jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", width: "100%", marginBottom: "10px" }, children: _jsx(TMTextBox, { width: "160px", value: searchText, onValueChanged: onSearchValueChanged, label: SDKUI_Localizator.Search, placeHolder: SDKUI_Localizator.Search + "...", borderRadius: "6px" }) }), loading ? (_jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%", width: "100%" }, children: _jsx(LoadIndicator, {}) })) :
-                _jsx(Accordion, { defaultSelectedItems: [], collapsible: true, multiple: false, animationDuration: 300, noDataText: SDKUI_Localizator.NoCredentialsSaved, style: { border: "1px solid #ddd", borderRadius: "6px", boxShadow: "0 2px 6px rgba(0, 0, 0, 0.1)" }, children: loginHistoryData.sort((a, b) => a.name.localeCompare(b.name)).map((data, index) => _jsxs(Item, { title: data.name, children: [itemTemplate(data), " "] }, index)) })] });
+    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: [_jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", width: "100%", position: "sticky", top: 0, backgroundColor: "#fff", zIndex: 1, padding: "10px 0" }, children: _jsx(TMSearchBar, { maxWidth: "200px", marginLeft: "0px", onSearchValueChanged: (e) => setSearchText(e), searchValue: searchText }) }), renderPopupContent()] }));
 };
 export default TMLoginPopupSaveLoginInfo;
+export const TMLoginItemTemplate = (props) => {
+    const { data, fillLoginForm, reloadHistoryState, deleteItemFromLocalStorage, setSelectedItems, setSearchText } = props;
+    const [name, setName] = useState(data.name);
+    const [error, setError] = useState(false);
+    const [validationItems, setValidationItems] = useState([]);
+    const nameIsEqualToInitName = data.name.trim().toLowerCase() === name.trim().toLowerCase();
+    // Effect to handle validation side-effects (like setting error state)
+    useEffect(() => {
+        const validationsItems = getValidationItems();
+        setValidationItems(validationsItems);
+        setError(validationsItems.length > 0); // Set error state based on validation result
+    }, [name]); // Only re-run when 'name' changes
+    // Update the login history item name in local storage if no errors and name is different from the initial name
+    const updateNameHandler = () => {
+        if (error || nameIsEqualToInitName)
+            return;
+        const dataToUpdate = { ...data, name };
+        LocalStorageService.updateItemByField(LOGIN_HISTORY_KEY, "name", data.name, dataToUpdate);
+        reloadHistoryState();
+        setSelectedItems([]);
+        setSearchText("");
+    };
+    // Validation logic function
+    const getValidationItems = () => {
+        const validationsArray = [];
+        if (nameIsEqualToInitName)
+            return validationsArray;
+        if (name.length === 0)
+            validationsArray.push(new ValidationItem(ResultTypes.ERROR, 'saveLoginName', SDK_Localizator.RequiredField));
+        const findItemByField = LocalStorageService.findItemByField(LOGIN_HISTORY_KEY, "name", name);
+        if (findItemByField) {
+            validationsArray.push(new ValidationItem(ResultTypes.ERROR, 'saveLoginName', SDKUI_Localizator.DuplicateNameError));
+        }
+        return validationsArray;
+    };
+    // Function to calculate luminance from a hex color
+    const getLuminance = (color) => {
+        // Using slice() instead of substr()
+        let r = parseInt(color.slice(1, 3), 16) / 255; // slice(1, 3) extracts the hex digits for red
+        let g = parseInt(color.slice(3, 5), 16) / 255; // slice(3, 5) extracts the hex digits for green
+        let b = parseInt(color.slice(5, 7), 16) / 255; // slice(5, 7) extracts the hex digits for blue
+        // Apply the luminance formula
+        const a = [r, g, b].map(c => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4));
+        const luminance = 0.2126 * a[0] + 0.7152 * a[1] + 0.0722 * a[2];
+        return luminance;
+    };
+    // Function to determine text color based on background luminance
+    const getTextColor = (backgroundColor) => {
+        return getLuminance(backgroundColor) > 0.5 ? 'black' : 'white';
+    };
+    // Function to generate a hash from a string (text)
+    const stringToHash = (str) => {
+        let hash = 0;
+        for (let i = 0; i < str.length; i++) {
+            hash = (hash << 5) - hash + str.charCodeAt(i);
+            hash = hash & hash; // Convert to 32bit integer
+        }
+        return hash;
+    };
+    const getRandomColorFromText = (text) => {
+        const hash = stringToHash(text);
+        // Map the hash to a color, using the hash value for RGB
+        const r = (hash & 0xFF0000) >> 16; // Red (8 bits)
+        const g = (hash & 0x00FF00) >> 8; // Green (8 bits)
+        const b = hash & 0x0000FF; // Blue (8 bits)
+        // Ensure the RGB values are within the valid range (0-255)
+        return `rgb(${r % 256}, ${g % 256}, ${b % 256})`;
+    };
+    // Generate a random background color for the circle
+    const randomBGColor = getRandomColorFromText(data.name);
+    // Determine the text color (black or white) based on background color luminance
+    const textColor = getTextColor(randomBGColor);
+    return _jsxs("div", { style: { display: 'flex', background: '#fff', boxShadow: '0 4px 20px rgba(0, 0, 0, 0.1)', overflow: 'hidden', width: '100%', justifyContent: 'center', alignItems: 'center' }, children: [_jsx(TMTooltip, { content: data.name, children: _jsx("div", { style: { background: randomBGColor, color: textColor, display: 'flex', justifyContent: 'center', alignItems: 'center', width: '15vw', height: '15vw', maxWidth: '70px', maxHeight: '70px', borderRadius: '50%', fontWeight: 'bold', margin: '20px', textAlign: 'center' }, children: data.name.slice(0, 3).toUpperCase() }) }), _jsxs("div", { style: { padding: '2px', flex: 1 }, children: [_jsx(TMTextBox, { type: "text", label: "Nome per l'accesso", value: name, readOnly: false, buttons: [{ text: `${SDKUI_Localizator.Save}`, icon: _jsx("i", { style: { color: (error || nameIsEqualToInitName) ? "rgb(80,80,80)" : "#28a745", fontSize: 20 }, className: "dx-icon-save" }), onClick: updateNameHandler }], onValueChanged: (e) => setName(e.target.value), validationItems: validationItems }, "name"), (data.endpoint && data.endpoint?.Description) && _jsx(TMTextBox, { type: "text", label: SDKUI_Localizator.Endpoint, value: data.endpoint.Description + (' (' + data.endpoint.URL + ')'), readOnly: true, onValueChanged: (e) => setName(e.target.value) }), (data.archive && data.archive?.description) && _jsx(TMTextBox, { type: "text", label: SDKUI_Localizator.ArchiveID, value: data.archive.description + (' (' + (data.archive.id ?? '-') + ')'), readOnly: true }), _jsx(TMTextBox, { type: "text", label: SDKUI_Localizator.AuthMode, value: data.authenticationMode, readOnly: true }), data.domain.length > 0 && _jsx(TMTextBox, { type: "text", label: SDKUI_Localizator.Domain, value: data.domain, readOnly: true }), _jsx(TMTextBox, { type: "text", label: SDKUI_Localizator.UserName, value: data.username, readOnly: true }), _jsx(TMTextBox, { type: "text", label: SDKUI_Localizator.CultureID, value: cultureIDsDataSource.find(item => item.value === data.language)?.display ?? '', readOnly: true }), _jsxs("div", { style: { display: 'flex', justifyContent: 'flex-start', alignItems: 'center', marginTop: 10 }, children: [_jsx(TMTooltip, { content: "Login", children: _jsx("div", { onClick: () => { fillLoginForm(data); }, style: { backgroundColor: randomBGColor, color: textColor, display: 'flex', justifyContent: 'center', alignItems: 'center', width: '15vw', height: '15vw', maxWidth: '50px', maxHeight: '50px', borderRadius: '50%', fontWeight: 'bold', marginRight: '10px', textAlign: 'center' }, children: _jsx("i", { className: "dx-icon-login", style: { fontSize: '1.5em', color: textColor, cursor: 'pointer' } }) }) }), _jsx(TMTooltip, { content: SDKUI_Localizator.Save, children: _jsx("div", { onClick: () => { updateNameHandler(); }, style: { backgroundColor: (error || nameIsEqualToInitName) ? "rgb(80,80,80, 0.5)" : "#28a745", color: textColor, display: 'flex', justifyContent: 'center', alignItems: 'center', width: '15vw', height: '15vw', maxWidth: '50px', maxHeight: '50px', borderRadius: '50%', fontWeight: 'bold', marginRight: '10px', textAlign: 'center' }, children: _jsx("i", { className: "dx-icon-save", style: { fontSize: '1.5em', color: textColor, cursor: 'pointer' } }) }) }), _jsx(TMTooltip, { content: SDKUI_Localizator.Delete, children: _jsx("div", { onClick: () => { deleteItemFromLocalStorage(data.name); }, style: { backgroundColor: "#ff4d4f", display: 'flex', justifyContent: 'center', alignItems: 'center', width: '15vw', height: '15vw', maxWidth: '50px', maxHeight: '50px', borderRadius: '50%', fontWeight: 'bold', textAlign: 'center' }, children: _jsx("i", { className: "dx-icon-trash", style: { fontSize: '1.5em', color: getTextColor("#ff4d4f"), cursor: 'pointer' } }) }) })] })] })] });
+};

package/lib/helper/SDKUI_Localizator.d.ts

@@ -225,7 +225,7 @@ export declare class SDKUI_Localizator {
     static get ShowSearch(): "Suche anzeigen" | "Show search" | "Mostrar búsqueda" | "Afficher la recherche" | "Mostrar pesquisa" | "Mostra ricerca";
     static get HideSearch(): "Suche ausblenden" | "Hide search" | "Ocultar búsqueda" | "Masquer la recherche" | "Ocultar pesquisa" | "Nascondi ricerca";
     static get NoCredentialsSaved(): "Keine gespeicherten Anmeldedaten" | "No credentials saved" | "No se han guardado credenciales" | "Aucune information d'identification enregistrée" | "Nenhuma credencial salva" | "Nessuna credenziale salvata";
-    static get DuplicateNameError(): "Der Name existiert bereits in der Anmeldehistorie. Jeder Eintrag muss einen eindeutigen Namen haben, um Duplikate zu vermeiden. Bitte wählen Sie einen anderen Namen." | "The name already exists in the login history. Each entry must have a unique name to avoid duplication. Please choose a different name." | "El nombre ya existe en el historial de inicio de sesión. Cada entrada debe tener un nombre único para evitar duplicados. Por favor, elija un nombre diferente." | "Le nom existe déjà dans l'historique de connexion. Chaque entrée doit avoir un nom unique pour éviter les doublons. Veuillez choisir un autre nom." | "O nome já existe no histórico de login. Cada entrada deve ter um nome único para evitar duplicações. Por favor, escolha um nome diferente." | "Il nome esiste già nella cronologia di accesso. Ogni voce deve avere un nome unico per evitare duplicati. Si prega di scegliere un nome diverso.";
+    static get DuplicateNameError(): "Der Name existiert bereits in der Anmeldehistorie. Bitte wählen Sie einen anderen Namen" | "The name already exists in the login history. Please choose a different nam" | "El nombre ya existe en el historial de inicio de sesión. Por favor, elija un nombre diferente" | "Le nom existe déjà dans l'historique de connexion. Veuillez choisir un autre nom" | "O nome já existe no histórico de login. Por favor, escolha um nome diferente" | "Il nome esiste già nella cronologia di accesso. Si prega di scegliere un nome diverso";
     static get EnterNameForAccess(): "Geben Sie einen Namen für den Zugriff ein" | "Enter a name for access" | "Introduzca un nombre para el acceso" | "Entrez un nom pour l'accès" | "Insira um nome para o acesso" | "Inserire un nome per l'accesso";
     static get RememberCredentials(): "Anmeldedaten merken" | "Remember credentials" | "Recordar credenciales" | "Se souvenir des identifiants" | "Lembrar credenciais" | "Ricorda credenziali";
     static get SwitchUser(): "Benutzer wechseln" | "Switch user" | "Cambiar usuario" | "Changer d'utilisateur" | "Mudar de usuário" | "Cambia utente";

package/lib/helper/SDKUI_Localizator.js

@@ -2209,17 +2209,17 @@ export class SDKUI_Localizator {
     static get DuplicateNameError() {
         switch (this._cultureID) {
             case CultureIDs.De_DE:
-                return "Der Name existiert bereits in der Anmeldehistorie. Jeder Eintrag muss einen eindeutigen Namen haben, um Duplikate zu vermeiden. Bitte wählen Sie einen anderen Namen.";
+                return "Der Name existiert bereits in der Anmeldehistorie. Bitte wählen Sie einen anderen Namen";
             case CultureIDs.En_US:
-                return "The name already exists in the login history. Each entry must have a unique name to avoid duplication. Please choose a different name.";
+                return "The name already exists in the login history. Please choose a different nam";
             case CultureIDs.Es_ES:
-                return "El nombre ya existe en el historial de inicio de sesión. Cada entrada debe tener un nombre único para evitar duplicados. Por favor, elija un nombre diferente.";
+                return "El nombre ya existe en el historial de inicio de sesión. Por favor, elija un nombre diferente";
             case CultureIDs.Fr_FR:
-                return "Le nom existe déjà dans l'historique de connexion. Chaque entrée doit avoir un nom unique pour éviter les doublons. Veuillez choisir un autre nom.";
+                return "Le nom existe déjà dans l'historique de connexion. Veuillez choisir un autre nom";
             case CultureIDs.Pt_PT:
-                return "O nome já existe no histórico de login. Cada entrada deve ter um nome único para evitar duplicações. Por favor, escolha um nome diferente.";
+                return "O nome já existe no histórico de login. Por favor, escolha um nome diferente";
             default:
-                return "Il nome esiste già nella cronologia di accesso. Ogni voce deve avere un nome unico per evitare duplicati. Si prega di scegliere un nome diverso.";
+                return "Il nome esiste già nella cronologia di accesso. Si prega di scegliere un nome diverso";
         }
     }
     static get EnterNameForAccess() {

package/package.json

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