@topconsultnpm/sdkui-react-beta 6.7.22 → 6.7.24

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: SDKUI_Localizator.NameForAccess, 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/components/forms/TMSaveForm.d.ts

@@ -3,15 +3,15 @@ import { FormModes, ITMSaveFormBaseProps } from '../../ts/types';
 declare const TMSaveForm: React.FC<ITMSaveFormBaseProps>;
 export default TMSaveForm;
 export declare const TMSaveFormStandardToolbar: ({ btnStyle, formMode, hasNavigation, isModified, errorsCount, onNext, onPrev, canNext, canPrev, onSaveAsync, onUndo }: {
-    btnStyle: 'normal' | 'toolbar' | 'icon' | 'text';
+    btnStyle: "normal" | "toolbar" | "icon" | "text";
     formMode: FormModes;
     hasNavigation: boolean;
     isModified: boolean;
     errorsCount: number;
-    onNext?: (() => void) | undefined;
-    onPrev?: (() => void) | undefined;
-    canNext?: boolean | undefined;
-    canPrev?: boolean | undefined;
-    onSaveAsync?: (() => Promise<void>) | undefined;
-    onUndo?: (() => void) | undefined;
+    onNext?: () => void;
+    onPrev?: () => void;
+    canNext?: boolean;
+    canPrev?: boolean;
+    onSaveAsync?: () => Promise<void>;
+    onUndo?: () => void;
 }) => import("react/jsx-runtime").JSX.Element;