@topconsultnpm/sdkui-react-beta 6.7.37 → 6.7.39

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

@@ -18,13 +18,3 @@ export interface ITMButton extends ITMEditorBase {
 }
 declare const TMButton: React.FunctionComponent<ITMButton>;
 export default TMButton;
-export declare const TMButtonNew: ({ color, caption, disable, onClick, type, icon, width, height }: {
-    color?: string;
-    width?: string;
-    height?: string;
-    disable?: boolean;
-    caption?: string;
-    onClick?: () => void;
-    type?: AdvancedButtonType;
-    icon?: any;
-}) => import("react/jsx-runtime").JSX.Element;

package/lib/components/base/TMButton.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
 import styled from 'styled-components';
-import { getColor, IconApply } from '../../helper';
+import { getColor } from '../../helper';
 import { FontSize, TMColors } from '../../utils/theme';
 import TMTooltip from './TMTooltip';
 const StyledNormalButton = styled.button.withConfig({ shouldForwardProp: prop => !['text'].includes(prop) }) `
@@ -106,6 +106,41 @@ const StyledButtonTooltipItem = styled.div `
   color: ${props => props.$color ? props.$color : "primary"};
   font-size: ${props => props.fontSize || FontSize.defaultFontSize};
 `;
+const StyledAdvancedButton = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    width: ${props => props.$width};
+    height: ${props => props.$height};
+    font-weight: 600;
+    cursor: ${props => !props.$isDisabled ? 'pointer' : 'default'};
+    border-radius: 10px;
+    overflow: hidden;
+    color: white;
+    user-select: none;
+`;
+const StyledAdvancedButtonIcon = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: ${props => props.$isVisible ? '25px' : '0px'};
+   
+    transition: width ease-in-out 100ms;
+    height: 100%;
+    background-color: ${props => props.$isDisabled ? '#b4b4b4' : props.$color ? `${props.$color}90` : props.$type === 'success' ? `${TMColors.success}90` : props.$type === 'error' ? `${TMColors.error}90` : props.$type === 'tertiary' ? `${TMColors.tertiary}90` : `${TMColors.primary}90`};
+    border-top-left-radius: 10px;
+    border-bottom-left-radius: 10px;
+`;
+const StyledAdvancedButtonText = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    background-color: ${props => props.$isDisabled ? '#d1d1d1' : props.$color ? props.$color : props.$type === 'success' ? `${TMColors.success}` : props.$type === 'error' ? `${TMColors.error}` : props.$type === 'tertiary' ? `${TMColors.tertiary}` : `${TMColors.primary}`};
+    border-top-right-radius: 10px;
+    border-bottom-right-radius: 10px;
+`;
 const TMButton = ({ width, height, keyGesture, btnStyle = 'normal', advancedColor, advancedType = 'primary', color = 'primary', fontSize = FontSize.defaultFontSize, disabled = false, showTooltip = true, caption, icon, description, padding, elementStyle, onClick = () => { } }) => {
     const [isHovered, setIsHovered] = useState(false);
     // const [random, setRandom] = useState(0.0);
@@ -167,42 +202,3 @@ const TMButton = ({ width, height, keyGesture, btnStyle = 'normal', advancedColo
     return (_jsx("div", { style: elementStyle, children: showTooltip ? _jsx(TMTooltip, { hideAfterDelay: true, content: renderTooltip(), children: renderedButton() }) : renderedButton() }));
 };
 export default TMButton;
-const StyledAdvancedButton = styled.div `
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    width: ${props => props.$width};
-    height: ${props => props.$height};
-    font-weight: 600;
-    cursor: ${props => !props.$isDisabled ? 'pointer' : 'default'};
-    border-radius: 10px;
-    overflow: hidden;
-    color: white;
-    user-select: none;
-`;
-const StyledAdvancedButtonIcon = styled.div `
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: ${props => props.$isVisible ? '25px' : '0px'};
-   
-    transition: width ease-in-out 100ms;
-    height: 100%;
-    background-color: ${props => props.$isDisabled ? '#b4b4b4' : props.$color ? `${props.$color}90` : props.$type === 'success' ? `${TMColors.success}90` : props.$type === 'error' ? `${TMColors.error}90` : props.$type === 'tertiary' ? `${TMColors.tertiary}90` : `${TMColors.primary}90`};
-    border-top-left-radius: 10px;
-    border-bottom-left-radius: 10px;
-`;
-const StyledAdvancedButtonText = styled.div `
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    background-color: ${props => props.$isDisabled ? '#d1d1d1' : props.$color ? props.$color : props.$type === 'success' ? `${TMColors.success}` : props.$type === 'error' ? `${TMColors.error}` : props.$type === 'tertiary' ? `${TMColors.tertiary}` : `${TMColors.primary}`};
-    border-top-right-radius: 10px;
-    border-bottom-right-radius: 10px;
-`;
-export const TMButtonNew = ({ color, caption = '', disable = false, onClick, type = 'primary', icon = _jsx(IconApply, {}), width = '90px', height = '30px' }) => {
-    const [isHovered, setIsHovered] = useState(false);
-    return (_jsxs(StyledAdvancedButton, { "$width": width, "$height": height, onMouseOver: () => !disable && setIsHovered(true), onMouseOut: () => setIsHovered(false), "$isDisabled": disable, onClick: () => !disable && onClick && onClick(), children: [_jsx(StyledAdvancedButtonIcon, { "$color": color, "$isVisible": isHovered, "$isDisabled": disable, "$type": type, children: icon }), _jsxs(StyledAdvancedButtonText, { "$color": color, "$isDisabled": disable, "$type": type, children: [" ", caption, " "] })] }));
-};

package/lib/components/forms/TMLoginForm.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
-import { AppModules, AuthenticationModes, CultureIDs, ChangePswDescriptor, SDK_Localizator, SessionDescriptor, TopMediaServer, ValidationItem, ResultTypes, SDK_Globals, LocalStorageService } from "@topconsultnpm/sdk-ts-beta";
+import { AppModules, ArchiveDescriptor, AuthenticationModes, CultureIDs, ChangePswDescriptor, SDK_Localizator, SessionDescriptor, TopMediaServer, ValidationItem, ResultTypes, SDK_Globals, LocalStorageService, DBBrands } from "@topconsultnpm/sdk-ts-beta";
 import deMessages from "devextreme/localization/messages/de.json";
 import enMessages from "devextreme/localization/messages/en.json";
 import esMessages from "devextreme/localization/messages/es.json";
@@ -118,6 +118,7 @@ const TMLoginForm = (props) => {
     const [saveLoginInfoName, setSaveLoginInfoName] = useState("");
     const [loginHistory, setLoginHistory] = useState(LocalStorageService.getItem(LOGIN_HISTORY_KEY) ?? []);
     const [preferredLoginItem, setPreferredLoginItem] = useState(undefined);
+    const [loadLoginFromLocalStorage, setLoadLoginFromLocalStorage] = useState(false);
     useEffect(() => {
         if (props.saveLoginHistoryToLocalStorage && loginHistory.length > 0) {
             setPreferredLoginItem(loginHistory.find(item => item.preferred));
@@ -180,7 +181,8 @@ const TMLoginForm = (props) => {
     useEffect(() => { setTmServer(new TopMediaServer(endpoint?.URL)); }, [endpoint]);
     useEffect(() => { setTmSession(tmServer?.NewSession()); }, [tmServer]);
     useEffect(() => { getArchivesAsync().then((result) => { setArchives(result); }); }, [tmSession]);
-    useEffect(() => { setArchive(archives && archives.find(a => a.isDefault == 1)); }, [archives]);
+    useEffect(() => { if (!loadLoginFromLocalStorage)
+        setArchive(archives && archives.find(a => a.isDefault == 1)); }, [archives, loadLoginFromLocalStorage]);
     useEffect(() => { if (archive && archive.id) {
         setArchiveID(archive.id);
     }
@@ -707,11 +709,12 @@ const TMLoginForm = (props) => {
             try {
                 if (SDK_Globals.tmSession && saveLoginInfo && saveLoginInfoName.length > 0) {
                     const maxId = loginHistory.reduce((max, item) => (item.id > max ? item.id : max), 0);
+                    const archiveModified = ArchiveDescriptor.fromJS({ ...archive, dbBrand: DBBrands.None, imageID: 0, msAzureTenantID: "", msAzureClientID: "", isDefault: 0, });
                     const loginHistoryNewEntry = {
                         id: maxId + 1,
                         name: saveLoginInfoName,
                         endpoint: endpoint ?? undefined,
-                        archive: archive ?? undefined,
+                        archive: archiveModified ?? undefined,
                         domain: domain ?? '',
                         domainAlternative: domainAlternative ?? '',
                         authenticationMode: authMode,
@@ -726,6 +729,7 @@ const TMLoginForm = (props) => {
             catch (e) {
                 // Login failed
                 console.log("Login failed. Please check your username and password.");
+                return TMExceptionBoxManager.show({ exception: e });
             }
         }
         TMSpinner.hide();
@@ -860,14 +864,14 @@ const TMLoginForm = (props) => {
         }
     };
     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" }), _jsx("div", { style: { fontSize: '2.5rem', lineHeight: 1 }, children: SDK_Globals.appModule })] })] }) }) }) }) }), _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: 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: () => { setLoadLoginFromLocalStorage(false); 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 }) :
                                                                             _jsx(TMTextBox, { label: SDKUI_Localizator.ArchiveID, icon: _jsx(IconArchive, {}), onValueChanged: (e) => setArchiveID(e.target.value), value: archiveID, validationItems: loginValidationItems.filter(item => item.PropertyName === 'archive') }), _jsx(TMDropDown, { dataSource: [{ display: 'TopMedia', value: AuthenticationModes.TopMedia }, { display: SDKUI_Localizator.AuthMode_OnBehalfOf, value: AuthenticationModes.TopMediaOnBehalfOf }, { display: 'MSAzure', value: AuthenticationModes.MSAzure }, { display: SDKUI_Localizator.AuthMode_WindowsViaTopMedia, value: AuthenticationModes.WindowsThroughTopMedia }], label: SDKUI_Localizator.AuthMode, value: authMode, icon: _jsx(IconLogin, {}), onValueChanged: (e) => { setAuthMode(e.target.value); }, validationItems: loginValidationItems.filter(item => item.PropertyName === 'authMode') })] }), (authMode === AuthenticationModes.TopMedia || authMode === AuthenticationModes.WindowsThroughTopMedia) && _jsx(TMLayoutItem, { children: authMode === AuthenticationModes.WindowsThroughTopMedia ?
                                                                         _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, 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, setLoadLoginFromLocalStorage: setLoadLoginFromLocalStorage, 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

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

package/lib/components/forms/TMLoginPopupSaveLoginInfo.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
-import { Accordion, LoadIndicator, Popup, SelectBox } from "devextreme-react";
+import { Accordion, Button, LoadIndicator, Popup, ScrollView, SelectBox } from "devextreme-react";
 import { cultureIDsDataSource, LOGIN_HISTORY_KEY, } from "./TMLoginForm";
 import { LocalStorageService, ResultTypes, SDK_Localizator, ValidationItem } from "@topconsultnpm/sdk-ts-beta";
 import { Item } from "devextreme-react/cjs/accordion";
@@ -9,15 +9,15 @@ import { ButtonNames, TMExceptionBoxManager, TMMessageBoxManager } from "../base
 import TMTooltip from "../base/TMTooltip";
 import TMTextBox from "../editors/TMTextBox";
 import { TMSearchBar } from "../sidebar/TMHeader";
-import TMCheckBox from "../editors/TMCheckBox";
 const TMLoginPopupSaveLoginInfo = (props) => {
-    const { setLoginHistory, visible, hidePopup, setEndpoint, setArchive, setAuthMode, setUsername, setPassword, setDomain, setDomainArternative, setOnBeHalfUsername, setOnBeHalfPassword, onChangeLanguage } = props;
+    const { setLoginHistory, setLoadLoginFromLocalStorage, 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([]);
+    // State to store the selected import/export option as a string
     const [selectedImportExportOption, setSelectedImportExportOption] = 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 = () => {
@@ -76,6 +76,7 @@ const TMLoginPopupSaveLoginInfo = (props) => {
         setOnBeHalfPassword("");
         if (onChangeLanguage)
             onChangeLanguage(data.language);
+        setLoadLoginFromLocalStorage(true);
         hidePopup();
     };
     // Display a confirmation dialog for deleting an item from local storage and handle the deletion on confirmation
@@ -195,11 +196,6 @@ const TMLoginPopupSaveLoginInfo = (props) => {
     };
     // titleRender function returns JSX to render a header with user interface components for import/export and closing the popup
     const titleRender = () => (_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }, children: [_jsx("h3", { children: SDKUI_Localizator.SwitchUser }), _jsxs("div", { style: { marginLeft: 'auto', display: 'flex', alignItems: 'center' }, children: [_jsx(SelectBox, { items: [{ text: SDKUI_Localizator.Import, value: 'import', disabled: false }, { text: SDKUI_Localizator.Export, value: 'export', disabled: historyState.loginHistory.length === 0 }], placeholder: SDKUI_Localizator.ImportExport, onItemClick: onImportExportItemClick, value: selectedImportExportOption, valueExpr: "value", displayExpr: "text" }), _jsx("button", { style: { background: 'none', border: 'none', fontSize: '16px', cursor: 'pointer', marginLeft: '10px' }, 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) => {
-        const historyItem = historyState.loginHistory.find(item => item.name === titleObj.title);
-        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 }), historyItem?.preferred && _jsx(TMTooltip, { position: "right", content: SDKUI_Localizator.SetAsFavorite, children: _jsx("div", { style: { padding: "10px", border: "1px solid #ddd", borderRadius: "10px", }, children: _jsx("i", { className: "dx-icon-favorites" }) }) })] });
-    };
     // Conditionally render popup content based on loading state, available login history, or display login items in an accordion
     const renderPopupContent = () => {
         if (loading) {
@@ -208,19 +204,75 @@ 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", boxShadow: "0 2px 6px rgba(0, 0, 0, 0.1)" }, children: historyState.searchedLoginHistory.map((data, index) => (_jsx(Item, { titleRender: (titleObj) => itemTitleRender(titleObj, index + 1), title: data.name, children: _jsx(TMLoginItemTemplate, { data: data, reloadHistoryState: reloadHistoryState, fillLoginForm: fillLoginForm, deleteItemFromLocalStorage: deleteItemFromLocalStorage, setSelectedItems: setSelectedItems, setSearchText: setSearchText, historyState: historyState }) }, data.id))) }) }));
+        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) => _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: [_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;
+// Render a styled title with its ID and title content, using flex layout
+export const TMItemTitleRender = (props) => {
+    const { titleObj, id, historyState, reloadHistoryState, fillLoginForm, deleteItemFromLocalStorage } = props;
+    const historyItem = historyState.loginHistory.find(item => item.name === titleObj.title);
+    const [preferred, setPreferred] = useState(historyItem?.preferred ?? false);
+    if (historyItem === undefined)
+        return;
+    useEffect(() => {
+        setPreferred(historyItem.preferred ?? false);
+    }, [historyItem.preferred]);
+    useEffect(() => {
+        if (preferred === historyItem.preferred)
+            return;
+        const historyStateUpdtated = historyState.loginHistory.map(history => {
+            if (history.name === historyItem.name) {
+                return { ...history, preferred };
+            }
+            return { ...history, preferred: false };
+        });
+        LocalStorageService.setItem(LOGIN_HISTORY_KEY, historyStateUpdtated);
+        reloadHistoryState();
+    }, [preferred]);
+    const onPreferredCallback = (e) => {
+        if (e === undefined || e.event === undefined)
+            return;
+        e.event.preventDefault();
+        e.event.stopPropagation();
+        let msg = preferred ? SDKUI_Localizator.RemoveNamedPreferredCredentials.replaceParams(historyItem?.name) : SDKUI_Localizator.SetNamedCredentialsAsPreferred.replaceParams(historyItem?.name);
+        TMMessageBoxManager.show({
+            title: SDKUI_Localizator.SetAsFavorite, message: msg, buttons: [ButtonNames.YES, ButtonNames.NO],
+            onButtonClick: async (e) => {
+                if (e !== ButtonNames.YES)
+                    return;
+                try {
+                    setPreferred((prev) => !prev);
+                }
+                catch (e) {
+                    TMExceptionBoxManager.show({ exception: e });
+                }
+            }
+        });
+    };
+    const onLoginCallback = (e) => {
+        if (e === undefined || e.event === undefined)
+            return;
+        e.event.preventDefault();
+        e.event.stopPropagation();
+        fillLoginForm(historyItem);
+    };
+    const onDeleteCallback = (e) => {
+        if (e === undefined || e.event === undefined)
+            return;
+        e.event.preventDefault();
+        e.event.stopPropagation();
+        deleteItemFromLocalStorage(historyItem.name);
+    };
+    return _jsx(ScrollView, { direction: "horizontal", useNative: true, children: _jsxs("div", { style: { display: "flex", gap: "15px", 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 }), _jsx(TMTooltip, { content: SDKUI_Localizator.SetAsFavorite, children: _jsxs("div", { style: { paddingTop: "5px", paddingBottom: "5px" }, children: [preferred && _jsx(Button, { icon: "favorites", style: { backgroundColor: '#ffff00' }, onClick: onPreferredCallback }), !preferred && _jsx(Button, { icon: "favorites", style: { backgroundColor: 'transparent' }, onClick: onPreferredCallback })] }) }), _jsx(TMTooltip, { content: "Login", children: _jsx("div", { style: { paddingTop: "5px", paddingBottom: "5px" }, children: _jsx(Button, { render: () => _jsx("i", { style: { color: "#ffffff" }, className: "dx-icon-login" }), style: { backgroundColor: '#2559A5' }, onClick: onLoginCallback }) }) }), _jsx(TMTooltip, { content: SDKUI_Localizator.Delete, children: _jsx("div", { style: { paddingTop: "5px", paddingBottom: "5px" }, children: _jsx(Button, { render: () => _jsx("i", { style: { color: "#ffffff" }, className: "dx-icon-trash" }), style: { backgroundColor: '#ff4d4f' }, onClick: onDeleteCallback }) }) })] }) });
+};
 export const TMLoginItemTemplate = (props) => {
-    const { data, fillLoginForm, reloadHistoryState, deleteItemFromLocalStorage, setSelectedItems, setSearchText, historyState } = props;
+    const { data, reloadHistoryState, setSelectedItems, setSearchText } = props;
     const [name, setName] = useState(data.name);
-    const [preferred, setPreferred] = useState(data.preferred ?? false);
     const [error, setError] = useState(false);
     const [validationItems, setValidationItems] = useState([]);
     const isNameMatching = data.name.trim().toLowerCase() === name.trim().toLowerCase();
-    const isPreferredMatching = data.preferred === preferred;
     // Effect to handle validation side-effects (like setting error state)
     useEffect(() => {
         const validationsItems = getValidationItems();
@@ -229,7 +281,7 @@ export const TMLoginItemTemplate = (props) => {
     }, [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 updateHandler = () => {
-        if (error || (isNameMatching && isPreferredMatching))
+        if (error || (isNameMatching))
             return;
         if (!isNameMatching) {
             const dataToUpdate = { ...data, name };
@@ -238,16 +290,6 @@ export const TMLoginItemTemplate = (props) => {
             setSelectedItems([]);
             setSearchText("");
         }
-        if (!isPreferredMatching) {
-            const historyStateUpdtated = historyState.loginHistory.map(history => {
-                if (history.name === data.name) {
-                    return { ...history, preferred };
-                }
-                return { ...history, preferred: false };
-            });
-            LocalStorageService.setItem(LOGIN_HISTORY_KEY, historyStateUpdtated);
-            reloadHistoryState();
-        }
     };
     // Validation logic function
     const getValidationItems = () => {
@@ -262,42 +304,5 @@ export const TMLoginItemTemplate = (props) => {
         }
         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 || (isNameMatching && isPreferredMatching)) ? "rgb(80,80,80)" : "#28a745", fontSize: 20 }, className: "dx-icon-save" }), onClick: updateHandler }], 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 }), _jsx(TMCheckBox, { elementStyle: { marginTop: 10, marginBottom: 10 }, labelPosition: "left", label: SDKUI_Localizator.SetAsFavorite, value: preferred, onValueChanged: (value) => { setPreferred(value); } }), _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: () => { updateHandler(); }, style: { backgroundColor: (error || (isNameMatching && isPreferredMatching)) ? "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' } }) }) })] })] })] });
+    return _jsx("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: _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 || isNameMatching) ? "rgb(80,80,80)" : "#28a745", fontSize: 20 }, className: "dx-icon-save" }), onClick: updateHandler }], 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 })] }) });
 };

package/lib/components/index.d.ts

@@ -1,5 +1,5 @@
 export { default as ShowAlert } from './base/TMAlert';
-export { default as TMButton, TMButtonNew } from './base/TMButton';
+export { default as TMButton } from './base/TMButton';
 export { default as TMClosableList } from './base/TMClosableList';
 export * from './base/TMContextMenu';
 export { default as TMDropDownMenu } from './base/TMDropDownMenu';

package/lib/components/index.js

@@ -1,7 +1,7 @@
 // base
 // export { default as TMAbortBox } from './base/TMAbortBox'
 export { default as ShowAlert } from './base/TMAlert';
-export { default as TMButton, TMButtonNew } from './base/TMButton';
+export { default as TMButton } from './base/TMButton';
 export { default as TMClosableList } from './base/TMClosableList';
 export * from './base/TMContextMenu';
 export { default as TMDropDownMenu } from './base/TMDropDownMenu';

package/lib/components/query/TMQueryResultForm.js

@@ -8,7 +8,7 @@ import { FormModes } from '../../ts';
 import { TMColors } from '../../utils/theme';
 import { StyledBadge } from '../base/Styled';
 import ShowAlert from '../base/TMAlert';
-import TMButton, { TMButtonNew } from '../base/TMButton';
+import TMButton from '../base/TMButton';
 import TMDropDownMenu from '../base/TMDropDownMenu';
 import { TMSplitterLayout, TMLayoutItem } from '../base/TMLayout';
 import TMModal from '../base/TMModal';
@@ -49,7 +49,7 @@ const WorfflowListItem = ({ data }) => {
     return (_jsxs("div", { style: { width: '100%', padding: '2px 5px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', userSelect: 'none' }, children: [_jsx(TMTidViewer, { tid: data.fromTID, showIcon: true }), _jsx("div", { style: { padding: 3, display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: 'white', color: 'gray', borderRadius: 3 }, children: data.dcmtsReturned })] }));
 };
 const WorkFlowOperationButtons = ({ onApprove, onReAssign, onReject, approveDisable = false, reassignDisable = false, rejectDisable = false }) => {
-    return (_jsxs(StyledWorkFlowOperationButtonsContainer, { children: [_jsx(TMButtonNew, { icon: _jsx(IconApply, {}), caption: 'Approva', disable: approveDisable, onClick: () => !approveDisable && onApprove && onApprove(), type: 'success' }), _jsx(TMButtonNew, { icon: _jsx(IconCloseOutline, {}), caption: 'Rifiuta', disable: rejectDisable, onClick: () => !rejectDisable && onReject && onReject(), type: 'error' }), _jsx(TMButtonNew, { icon: _jsx(IconUser, { fontSize: 16 }), caption: 'Riassegna', disable: reassignDisable, onClick: () => !reassignDisable && onReAssign && onReAssign(), type: 'tertiary' }), _jsx(TMButtonNew, { icon: _jsx(IconInfo, { fontSize: 16 }), caption: 'Maggiori informazioni', width: '180px', disable: approveDisable, onClick: () => alert('TODO!!!'), type: 'primary' })] }));
+    return (_jsxs(StyledWorkFlowOperationButtonsContainer, { children: [_jsx(TMButton, { btnStyle: 'advanced', icon: _jsx(IconApply, {}), caption: 'Approva', disabled: approveDisable, onClick: () => !approveDisable && onApprove && onApprove(), advancedColor: TMColors.success }), _jsx(TMButton, { btnStyle: 'advanced', icon: _jsx(IconCloseOutline, {}), caption: 'Rifiuta', disabled: rejectDisable, onClick: () => !rejectDisable && onReject && onReject(), advancedColor: TMColors.error }), _jsx(TMButton, { btnStyle: 'advanced', icon: _jsx(IconUser, { fontSize: 16 }), caption: 'Riassegna', disabled: reassignDisable, onClick: () => !reassignDisable && onReAssign && onReAssign(), advancedColor: TMColors.tertiary }), _jsx(TMButton, { btnStyle: 'advanced', icon: _jsx(IconInfo, { fontSize: 16 }), caption: 'Maggiori informazioni', width: '180px', disabled: approveDisable, onClick: () => alert('TODO!!!'), advancedColor: TMColors.info })] }));
 };
 const WorkFlowApproveRejectPopUp = ({ op, onClose, selectedItems = [], onUpdate }) => {
     const [commentValue, setCommentValue] = useState('');
@@ -87,8 +87,8 @@ const WorkFlowApproveRejectPopUp = ({ op, onClose, selectedItems = [], onUpdate
         }
     };
     return (_jsx(TMModal, { toolbar: op === 0 ?
-            _jsx(TMButtonNew, { icon: _jsx(IconApply, {}), caption: 'Approva', disable: false, onClick: completeWorkFlowAsync, type: 'success' }) :
-            _jsx(TMButtonNew, { icon: _jsx(IconCloseOutline, {}), caption: 'Rifiuta', disable: disable, onClick: () => { !disable && rejectWorkFlowAsync(); }, type: 'error' }), onClose: onClose, width: '60%', height: '60%', isModal: true, title: (op === 0 ? 'Approva workflow ' + '(' + count() + ')' : 'Rifiuta workflow ' + '(' + count() + ')'), children: _jsxs("div", { style: { width: '100%', height: '100%', padding: '10px', display: 'flex', flexDirection: 'column', gap: 5 }, children: [_jsxs("p", { style: { color: (op === 1 && disable) ? TMColors.error : 'black' }, children: ["Commento ", op === 1 && disable && _jsx("span", { children: ' (Campo obbligatorio)' }), " "] }), _jsx(StyledTextArea, { "$isValid": op === 0 ? true : !disable, value: commentValue, onChange: (e) => setCommentValue(e.target.value) })] }) }));
+            _jsx(TMButton, { btnStyle: 'advanced', icon: _jsx(IconApply, {}), caption: 'Approva', disabled: false, onClick: completeWorkFlowAsync, advancedColor: TMColors.success }) :
+            _jsx(TMButton, { btnStyle: 'advanced', icon: _jsx(IconCloseOutline, {}), caption: 'Rifiuta', disabled: disable, onClick: () => { !disable && rejectWorkFlowAsync(); }, advancedColor: TMColors.error }), onClose: onClose, width: '60%', height: '60%', isModal: true, title: (op === 0 ? 'Approva workflow ' + '(' + count() + ')' : 'Rifiuta workflow ' + '(' + count() + ')'), children: _jsxs("div", { style: { width: '100%', height: '100%', padding: '10px', display: 'flex', flexDirection: 'column', gap: 5 }, children: [_jsxs("p", { style: { color: (op === 1 && disable) ? TMColors.error : 'black' }, children: ["Commento ", op === 1 && disable && _jsx("span", { children: ' (Campo obbligatorio)' }), " "] }), _jsx(StyledTextArea, { "$isValid": op === 0 ? true : !disable, value: commentValue, onChange: (e) => setCommentValue(e.target.value) })] }) }));
 };
 const WorkFlowReAssignPopUp = ({ onClose, selectedItems = [], onUpdate }) => {
     const [commentValue, setCommentValue] = useState('');
@@ -111,7 +111,7 @@ const WorkFlowReAssignPopUp = ({ onClose, selectedItems = [], onUpdate }) => {
             TMSpinner.hide();
         }
     };
-    return (_jsx(TMModal, { toolbar: _jsx(TMButtonNew, { icon: _jsx(IconUser, { fontSize: 16 }), caption: 'Riassegna', disable: disable, onClick: () => !disable && reAssignWorkFlowAsync(), type: 'tertiary' }), onClose: onClose, width: '60%', height: '60%', isModal: true, title: 'Riassegna workflow ' + '(' + count() + ')', children: _jsxs("div", { style: { width: '100%', height: '100%', padding: '10px', display: 'flex', flexDirection: 'column', gap: 5 }, children: [_jsx(TMUserChooser, { value: selectedUserID, onValueChanged: (e) => setSelectedUserID(e) }), _jsxs("p", { style: { color: commentValue.length === 0 ? TMColors.error : 'black' }, children: ["Commento ", commentValue.length === 0 && _jsx("span", { children: ' (Campo obbligatorio)' }), " "] }), _jsx(StyledTextArea, { "$isValid": commentValue.length !== 0, value: commentValue, onChange: (e) => setCommentValue(e.target.value) })] }) }));
+    return (_jsx(TMModal, { toolbar: _jsx(TMButton, { btnStyle: 'advanced', icon: _jsx(IconUser, { fontSize: 16 }), caption: 'Riassegna', disabled: disable, onClick: () => !disable && reAssignWorkFlowAsync(), advancedColor: TMColors.tertiary }), onClose: onClose, width: '60%', height: '60%', isModal: true, title: 'Riassegna workflow ' + '(' + count() + ')', children: _jsxs("div", { style: { width: '100%', height: '100%', padding: '10px', display: 'flex', flexDirection: 'column', gap: 5 }, children: [_jsx(TMUserChooser, { value: selectedUserID, onValueChanged: (e) => setSelectedUserID(e) }), _jsxs("p", { style: { color: commentValue.length === 0 ? TMColors.error : 'black' }, children: ["Commento ", commentValue.length === 0 && _jsx("span", { children: ' (Campo obbligatorio)' }), " "] }), _jsx(StyledTextArea, { "$isValid": commentValue.length !== 0, value: commentValue, onChange: (e) => setCommentValue(e.target.value) })] }) }));
 };
 const TabView = ({ title = '', onMouseOut, onMouseOver, onClick, clickable, selectedTabBorderColor, icon = _jsx(IconApply, {}), count = 0 }) => {
     return (_jsx(TMTooltip, { content: title, children: _jsxs("div", { onMouseOut: onMouseOut, onMouseOver: onMouseOver, onClick: onClick, style: { userSelect: 'none', width: 'max-content', padding: 5, height: '40px', display: 'flex', alignItems: 'center', position: 'relative', cursor: clickable ? 'pointer' : 'default' }, children: [_jsx("div", { style: { position: 'absolute', top: 0, left: 0, width: '100%', height: '3px', backgroundColor: selectedTabBorderColor, transition: 'all ease 100ms' } }), _jsx("div", { style: { transform: 'translateY(2px)' }, children: icon }), _jsx(StyledBadge, { "$backgroundColor": '#679CE8', children: count })] }) }));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react-beta",
-    "version": "6.7.37",
+    "version": "6.7.39",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
@@ -29,6 +29,7 @@
     ],
     "dependencies": {
         "@topconsultnpm/sdk-ts-beta": "^6.7.18",
+        "@topconsultnpm/sdkui-react-beta": "^6.7.37",
         "buffer": "^6.0.3",
         "devextreme": "24.1.6",
         "devextreme-react": "24.1.6",