@topconsultnpm/sdkui-react-beta 6.6.111 → 6.6.112

package/lib/components/base/TMClosableList.js

@@ -59,7 +59,6 @@ const StyledClosableItemsCount = styled.div `
 `;
 const TMClosableList = ({ dataSource, visibility = false, label, inline = false, hasPadding = true }) => {
     const [status, setStatus] = useState(visibility);
-    // let width = useWindowWidth()
     let devicrType = useDeviceType();
     const renderedItems = () => {
         return (dataSource.map((item, index) => (_jsx(StyledClosableItem, { children: item }, index))));

package/lib/components/base/TMTooltip.js

@@ -11,8 +11,6 @@ const TMTooltip = ({ children, position, content, hideAfterDelay }) => {
         window.addEventListener('click', () => setShowTooltip(false));
         return () => window.removeEventListener('click', () => setShowTooltip(false));
     }, []);
-    // const width = useWindowWidth();
-    // let isDesktop = width > TABLET_WIDTH;
     const deviceType = useDeviceType();
     return (_jsxs("div", { children: [_jsx("div", { id: `idContainerTooltip${id}`, style: { display: 'flex', alignItems: 'center', height: 'max-content', width: 'max-content' }, onMouseEnter: () => { setShowTooltip(true); }, onMouseLeave: () => { setShowTooltip(false); }, onClick: () => { if (deviceType === DeviceType.DESKTOP || !hideAfterDelay)
                     return; setTimeout(() => { setShowTooltip(false); }, 1500); }, children: children }), content &&

package/lib/components/editors/TMTextArea.js

@@ -15,7 +15,6 @@ const TMTextArea = (props) => {
     const [currentValue, setCurrentValue] = useState(value);
     const [formulaMenuItems, setFormulaMenuItems] = useState([]);
     const { clicked, setClicked, points, setPoints } = useContextMenu();
-    // let screenWidth = useWindowWidth();
     const deviceType = useDeviceType();
     useEffect(() => {
         setCurrentValue(value);

package/lib/components/editors/TMTextBox.js

@@ -39,7 +39,6 @@ const TMTextBox = ({ autoFocus, maxLength, labelColor, precision, scale, showCle
     const [formulaMenuItems, setFormulaMenuItems] = useState([]);
     const [isFocused, setIsFocused] = useState(false);
     const inputRef = useRef(null);
-    // let screenWidth = useWindowWidth();
     const deviceType = useDeviceType();
     const [id, setID] = useState('');
     useEffect(() => { setID(genUniqueId()); }, []);

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

@@ -1,5 +1,6 @@
 import React from "react";
 import { AppModules, CultureIDs, ITopMediaSession, SessionDescriptor } from "@topconsultnpm/sdk-ts-beta";
+import { DeviceType } from "../base/TMDeviceProvider";
 export declare const onChangeLanguage: (cultureID: CultureIDs) => void;
 export declare const useCultureID: ({ cultureID }: {
     cultureID: CultureIDs;
@@ -22,7 +23,8 @@ export declare const cultureIDsDataSource: {
     display: string;
 }[];
 declare const TMLoginForm: React.FunctionComponent<ITMLoginFormProps>;
-export declare const TMChangePassword: ({ tmSession, username, onClose, enable, hasBack }: {
+export declare const TMChangePassword: ({ deviceType, tmSession, username, onClose, enable, hasBack }: {
+    deviceType?: DeviceType | undefined;
     hasBack?: boolean | undefined;
     tmSession?: ITopMediaSession | undefined;
     username: string;

package/lib/components/forms/TMLoginForm.js

@@ -10,7 +10,7 @@ import ptMessages from "devextreme/localization/messages/pt.json";
 import { locale as dxlocale, loadMessages } from "devextreme/localization";
 import backgroundLogin from '../../assets/login-bg.png';
 import six from '../../assets/loading.png';
-import { IconAccessPoint, IconArchive, IconLanguage, IconLogin, IconMail, IconPassword, IconSearch, IconUser, IconWeb, IconWifi, SDKUI_Localizator, calcResponsiveDirection, calcResponsiveSizes, useWindowWidth, IconArrowLeft, SDKUI_Globals } from "../../helper";
+import { IconAccessPoint, IconArchive, IconLanguage, IconLogin, IconMail, IconPassword, IconSearch, IconUser, IconWeb, IconWifi, SDKUI_Localizator, calcResponsiveDirection, calcResponsiveSizes, IconArrowLeft, SDKUI_Globals } from "../../helper";
 // import { TMColors } from "/utils/theme";
 // import TMLayoutContainer, { TMCard, TMLayoutItem } from "../Layout/TMLayout";
 import styled from "styled-components";
@@ -25,6 +25,7 @@ import TMTextBox from "../editors/TMTextBox";
 import TMButton from "../base/TMButton";
 import TMSummary from "../editors/TMSummary";
 import TMDropDown from "../editors/TMDropDown";
+import { DeviceType, useDeviceType } from "../base/TMDeviceProvider";
 export const onChangeLanguage = (cultureID) => {
     //localizzazione devexpress
     switch (cultureID) {
@@ -78,6 +79,7 @@ const StyledLogoContainer = styled.div ` position: relative; width: ${props => p
 export const cultureIDsDataSource = [{ value: CultureIDs.It_IT, display: "Italiano" }, { value: CultureIDs.Fr_FR, display: "Française" }, { value: CultureIDs.Pt_PT, display: "Português" }, { value: CultureIDs.En_US, display: "English" }, { value: CultureIDs.Es_ES, display: "Español" }, { value: CultureIDs.De_DE, display: "Deutsch" },];
 const TMLoginForm = (props) => {
     // const [currentCultureID, setCurrentCultureID] = useState<CultureIDs>(CultureIDs.It_IT);
+    const deviceType = useDeviceType();
     const [endpoints, setEndpoints] = useState();
     const [selectedEndpoint, setSelectedEndPoint] = useState();
     const [selectedArchive, setSelectedArchive] = useState();
@@ -107,7 +109,6 @@ const TMLoginForm = (props) => {
     const otp6Ref = useRef(null);
     const [otpValues, setOtpValues] = useState(['', '', '', '', '', '']);
     const [otpHasFilled, setOtpHasFilled] = useState([false, false, false, false, false, false]);
-    const size = useWindowWidth();
     useEffect(() => {
         let interval;
         if (recoveryPasswordState.step === 2 && wait > 0) {
@@ -768,15 +769,15 @@ const TMLoginForm = (props) => {
                 setOtpValues(['', '', '', '', '', '']);
         }
     };
-    return (_jsx(StyledLoginContainer, { "$responsiveHeight": calcResponsiveSizes(size, '75%', '96%', '98%'), "$responsiveWidth": calcResponsiveSizes(size, '55%', '95%', '95%'), children: _jsxs(TMLayoutContainer, { direction: calcResponsiveDirection(size, "horizontal", "vertical", "vertical"), children: [_jsx(TMLayoutItem, { width: calcResponsiveSizes(size, "40%", "100%", "100%"), height: calcResponsiveSizes(size, '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(size, '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(size, "60%", "100%", "100%"), height: calcResponsiveSizes(size, '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(size, '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(size, '150px', '150px', '300px'), height: calcResponsiveSizes(size, '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, { 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(size, '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(size, '30px', '40px', '40px'), fontSize: "0.8rem", onClick: backToLogin, icon: _jsx(IconArrowLeft, {}) }), _jsx(TMButton, { width: calcResponsiveSizes(size, '150px', '150px', '300px'), height: calcResponsiveSizes(size, '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(size, '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(size, '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(size, '30px', '40px', '40px'), fontSize: "0.8rem", onClick: backToLogin, icon: _jsx(IconArrowLeft, {}) }), _jsx(TMButton, { width: calcResponsiveSizes(size, '150px', '150px', '300px'), height: calcResponsiveSizes(size, '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(size, '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 ?
+    return (_jsx(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: "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') }) })] })] }) }) }) }), authMode === AuthenticationModes.TopMedia && _jsxs(TMLayoutItem, { height: "fit-content", width: "fit-content", 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: { 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(size, '150px', '150px', '250px'), height: calcResponsiveSizes(size, '30px', '40px', '40px'), fontSize: "1.1rem", caption: "Login", disabled: loginValidationItems.length > 0, onClick: login, showTooltip: false }) }) })] }) })] })] }) }));
+                                                                _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') }) })] })] }) }) }) }), authMode === AuthenticationModes.TopMedia && _jsxs(TMLayoutItem, { height: "fit-content", width: "fit-content", 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: { 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 }) }) })] }) })] })] }) }));
 };
 const TMPasswordManager = ({ validationItems = [], operation = 'change' }) => {
     const passwordStrength = () => {
@@ -801,11 +802,10 @@ const TMPasswordManager = ({ validationItems = [], operation = 'change' }) => {
     };
     return (_jsxs(TMLayoutItem, { height: "60%", children: [_jsx("div", { style: { width: 'calc(100% - 70px)', height: '5px', backgroundColor: 'white', margin: '0px 0px 10px 45px', borderRadius: '2px', overflow: 'hidden' }, children: _jsx("div", { style: { width: passwordStrength().width, height: '100%', backgroundColor: passwordStrength().color, transition: 'ease 300ms' } }) }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: 2, padding: '0 45px 10px 45px' }, children: [_jsxs(TMLayoutContainer, { alignItems: "center", direction: "horizontal", children: [_jsx(TMLayoutItem, { width: "fit-content", height: "fit-content", children: _jsx("div", { style: { width: '7px', height: '7px', borderRadius: '10px', backgroundColor: validationItems.find(item => item.PropertyName === `${operation}Pass_length`) ? 'red' : 'green' }, children: " " }) }), _jsx(TMLayoutItem, { width: "max-content", height: "fit-content", children: _jsx("p", { style: { fontSize: '0.9rem', color: validationItems.find(item => item.PropertyName === `${operation}Pass_length`) ? 'red' : 'green' }, children: SDKUI_Localizator.PasswordLengthError }) })] }), _jsxs(TMLayoutContainer, { alignItems: "center", direction: "horizontal", children: [_jsx(TMLayoutItem, { width: "fit-content", height: "fit-content", children: _jsx("div", { style: { width: '7px', height: '7px', borderRadius: '10px', backgroundColor: validationItems.find(item => item.PropertyName === `${operation}Pass_hasNotLower`) ? 'red' : 'green' }, children: " " }) }), _jsx(TMLayoutItem, { width: "max-content", height: "fit-content", children: _jsx("p", { style: { fontSize: '0.9rem', color: validationItems.find(item => item.PropertyName === `${operation}Pass_hasNotLower`) ? 'red' : 'green' }, children: SDKUI_Localizator.PasswordLowercaseError }) })] }), _jsxs(TMLayoutContainer, { alignItems: "center", direction: "horizontal", children: [_jsx(TMLayoutItem, { width: "fit-content", height: "fit-content", children: _jsx("div", { style: { width: '7px', height: '7px', borderRadius: '10px', backgroundColor: validationItems.find(item => item.PropertyName === `${operation}Pass_hasNotUpper`) ? 'red' : 'green' }, children: " " }) }), _jsx(TMLayoutItem, { width: "max-content", height: "fit-content", children: _jsx("p", { style: { fontSize: '0.9rem', color: validationItems.find(item => item.PropertyName === `${operation}Pass_hasNotUpper`) ? 'red' : 'green' }, children: SDKUI_Localizator.PasswordUppercaseError }) })] }), _jsxs(TMLayoutContainer, { alignItems: "center", direction: "horizontal", children: [_jsx(TMLayoutItem, { width: "fit-content", height: "fit-content", children: _jsx("div", { style: { width: '7px', height: '7px', borderRadius: '10px', backgroundColor: validationItems.find(item => item.PropertyName === `${operation}Pass_hasNotNumber`) ? 'red' : 'green' }, children: " " }) }), _jsx(TMLayoutItem, { width: "max-content", height: "fit-content", children: _jsx("p", { style: { fontSize: '0.9rem', color: validationItems.find(item => item.PropertyName === `${operation}Pass_hasNotNumber`) ? 'red' : 'green' }, children: SDKUI_Localizator.PasswordNumberError }) })] }), _jsxs(TMLayoutContainer, { alignItems: "center", direction: "horizontal", children: [_jsx(TMLayoutItem, { width: "fit-content", height: "fit-content", children: _jsx("div", { style: { width: '7px', height: '7px', borderRadius: '10px', backgroundColor: validationItems.find(item => item.PropertyName === `${operation}Pass_hasNotSymbol`) ? 'red' : 'green' }, children: " " }) }), _jsx(TMLayoutItem, { width: "max-content", height: "fit-content", children: _jsxs("p", { style: { fontSize: '0.9rem', color: validationItems.find(item => item.PropertyName === `${operation}Pass_hasNotSymbol`) ? 'red' : 'green' }, children: [SDKUI_Localizator.PasswordSymbolError, " "] }) })] })] })] }));
 };
-export const TMChangePassword = ({ tmSession, username, onClose, enable, hasBack = true }) => {
+export const TMChangePassword = ({ deviceType = DeviceType.DESKTOP, tmSession, username, onClose, enable, hasBack = true }) => {
     const [changePasswordState, setChangePasswordState] = useState({ confermPassword: '', newPassword: '', oldPassword: '' });
     const [changePasswordValidationItems, setChangePasswordValidationItems] = useState([]);
     useEffect(() => { changePasswordValidator(); }, [changePasswordState.oldPassword, changePasswordState.newPassword, changePasswordState.confermPassword, username]);
-    const size = useWindowWidth();
     const changePasswordValidator = () => {
         let arr = [...changePasswordValidationItems];
         let char_upperCase = new RegExp(/([A-Z])/g);
@@ -991,6 +991,6 @@ export const TMChangePassword = ({ tmSession, username, onClose, enable, hasBack
         }
     };
     const back = () => { onClose && onClose(); setChangePasswordState({ confermPassword: '', newPassword: '', oldPassword: '' }); };
-    return (_jsx(StyledContainer, { children: _jsxs(TMLayoutContainer, { alignItems: "center", children: [_jsx(TMLayoutItem, { width: "fit-content", height: "max-content", children: _jsx(StyledHeaderText, { children: SDKUI_Localizator.ChangePassword }) }), _jsx(TMLayoutItem, { children: _jsx("div", { style: { padding: `0px ${calcResponsiveSizes(size, '40px', '40px', '10px')}` }, children: _jsx(TMCard, { showBorder: false, children: _jsxs(TMLayoutContainer, { children: [_jsx(TMLayoutItem, { children: _jsx(TMTextBox, { type: "password", label: SDKUI_Localizator.OldPassword, icon: _jsx(IconPassword, {}), onValueChanged: (e) => setChangePasswordState({ ...changePasswordState, oldPassword: e.target.value }), value: changePasswordState.oldPassword, validationItems: changePasswordValidationItems.filter(item => item.PropertyName === 'changePass_old') }) }), _jsx(TMLayoutItem, { children: _jsx(TMTextBox, { type: "password", label: SDKUI_Localizator.NewPassword, icon: _jsx(IconPassword, {}), onValueChanged: (e) => setChangePasswordState({ ...changePasswordState, newPassword: e.target.value }), value: changePasswordState.newPassword, validationItems: changePasswordValidationItems.filter(item => item.PropertyName === 'changePass_new' || item.PropertyName === 'changePass_equalUsername' || item.PropertyName === 'changePass_containUsername') }) }), _jsx(TMLayoutItem, { children: _jsx(TMTextBox, { type: "password", label: SDKUI_Localizator.ConfirmPassword, icon: _jsx(IconPassword, {}), onValueChanged: (e) => setChangePasswordState({ ...changePasswordState, confermPassword: e.target.value }), value: changePasswordState.confermPassword, validationItems: changePasswordValidationItems.filter(item => item.PropertyName === 'changePass_confirm' || item.PropertyName === 'changePass_notConfirmed') }) })] }) }) }) }), _jsx(TMPasswordManager, { operation: "change", validationItems: changePasswordValidationItems }), hasBack && _jsx(TMLayoutItem, { height: "fit-content", width: "fit-content", children: _jsx("p", { onClick: back, tabIndex: enable ? 0 : undefined, onKeyDown: (e) => e.code === 'Space' && back(), style: { userSelect: 'none', cursor: enable ? 'pointer' : 'default', color: enable ? TMColors.primary : 'rgb(180,180,180)', fontSize: '1rem' }, children: SDKUI_Localizator.Back }) }), _jsx(TMLayoutItem, { height: "fit-content", children: _jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '20px 0' }, children: _jsx(TMButton, { width: calcResponsiveSizes(size, '150px', '150px', '300px'), height: calcResponsiveSizes(size, '30px', '40px', '40px'), fontSize: "1rem", caption: SDKUI_Localizator.Save, disabled: changePasswordValidationItems.length > 0, onClick: () => { changePasswordAsync(); }, showTooltip: false }) }) })] }) }));
+    return (_jsx(StyledContainer, { children: _jsxs(TMLayoutContainer, { alignItems: "center", children: [_jsx(TMLayoutItem, { width: "fit-content", height: "max-content", children: _jsx(StyledHeaderText, { children: SDKUI_Localizator.ChangePassword }) }), _jsx(TMLayoutItem, { children: _jsx("div", { style: { padding: `0px ${calcResponsiveSizes(deviceType, '40px', '40px', '10px')}` }, children: _jsx(TMCard, { showBorder: false, children: _jsxs(TMLayoutContainer, { children: [_jsx(TMLayoutItem, { children: _jsx(TMTextBox, { type: "password", label: SDKUI_Localizator.OldPassword, icon: _jsx(IconPassword, {}), onValueChanged: (e) => setChangePasswordState({ ...changePasswordState, oldPassword: e.target.value }), value: changePasswordState.oldPassword, validationItems: changePasswordValidationItems.filter(item => item.PropertyName === 'changePass_old') }) }), _jsx(TMLayoutItem, { children: _jsx(TMTextBox, { type: "password", label: SDKUI_Localizator.NewPassword, icon: _jsx(IconPassword, {}), onValueChanged: (e) => setChangePasswordState({ ...changePasswordState, newPassword: e.target.value }), value: changePasswordState.newPassword, validationItems: changePasswordValidationItems.filter(item => item.PropertyName === 'changePass_new' || item.PropertyName === 'changePass_equalUsername' || item.PropertyName === 'changePass_containUsername') }) }), _jsx(TMLayoutItem, { children: _jsx(TMTextBox, { type: "password", label: SDKUI_Localizator.ConfirmPassword, icon: _jsx(IconPassword, {}), onValueChanged: (e) => setChangePasswordState({ ...changePasswordState, confermPassword: e.target.value }), value: changePasswordState.confermPassword, validationItems: changePasswordValidationItems.filter(item => item.PropertyName === 'changePass_confirm' || item.PropertyName === 'changePass_notConfirmed') }) })] }) }) }) }), _jsx(TMPasswordManager, { operation: "change", validationItems: changePasswordValidationItems }), hasBack && _jsx(TMLayoutItem, { height: "fit-content", width: "fit-content", children: _jsx("p", { onClick: back, tabIndex: enable ? 0 : undefined, onKeyDown: (e) => e.code === 'Space' && back(), style: { userSelect: 'none', cursor: enable ? 'pointer' : 'default', color: enable ? TMColors.primary : 'rgb(180,180,180)', fontSize: '1rem' }, children: SDKUI_Localizator.Back }) }), _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", caption: SDKUI_Localizator.Save, disabled: changePasswordValidationItems.length > 0, onClick: () => { changePasswordAsync(); }, showTooltip: false }) }) })] }) }));
 };
 export default TMLoginForm;

package/lib/components/forms/TMSaveForm.js

@@ -14,8 +14,6 @@ import { DeviceType, useDeviceType } from '../base/TMDeviceProvider';
 const TMSaveForm = ({ id, formMode = FormModes.Update, showToolbar = true, skipIsModifiedCheck = false, title, children, isModal, exception, customToolbarElements, hasNavigation, showBackButton, onClose, onSaveAsync, onNext, onPrev, canNext, canPrev, isModified, onShowList, validationItems = [], onUndo, onCancel, width, height }) => {
     const [showList, setShowList] = useState(true);
     const [showErrorGrid, setShowErrorGrid] = useState(false);
-    // let windowWidth = useWindowWidth()
-    // let isMobile: boolean = windowWidth <= MOBILE_WIDTH;
     const deviceType = useDeviceType();
     const doSaveAsync = async () => { try {
         await onSaveAsync?.();

package/lib/components/pages/TMPage.js

@@ -17,8 +17,6 @@ const TMToolbarButton = ({ showTooltip = true, color = 'primary', icon, caption
     return (_jsx(TMButton, { keyGesture: keyGesture, color: color, disabled: disabled, caption: caption, onClick: () => { onClick && onClick(); }, icon: icon, showTooltip: showTooltip, btnStyle: 'toolbar' }));
 };
 const TMPage = ({ id, objClass = ObjectClasses.None, objType, listInsteadOfContent, detailInsteadOfContent, routePage, customButtons, customColumns, searchText, detailForm, detailTitlePathKeys, deps, abortSignal, onProgressChanged, onSelectionChanged, onCountersChanged }) => {
-    // let width = useWindowWidth();
-    // let isMobile: boolean = width <= MOBILE_WIDTH;
     const deviceType = useDeviceType();
     let gridInstance;
     const [showId, setShowId] = useState(false);

package/lib/components/query/TMQueryResultForm.js

@@ -222,7 +222,6 @@ const TMQueryResultForm = ({ onUpdate, isModal, onClose, context = SearchResultC
         _jsxs(StyledTitleContainer, { children: [context === SearchResultContext.WORKFLOW_APPROVE ? _jsx(IconActivityLog, { fontSize: 14 }) : context === SearchResultContext.FAVORITES ? _jsx(IconStar, {}) : context === SearchResultContext.RECENT ? _jsx(IconRefresh, {}) : '', context === SearchResultContext.WORKFLOW_APPROVE ? SDKUI_Localizator.WorkflowApproval : context === SearchResultContext.FAVORITES ? SDKUI_Localizator.Favorites : context === SearchResultContext.RECENT ? SDKUI_Localizator.Recent : ''] }, context === SearchResultContext.WORKFLOW_APPROVE ? 'title2' : context === SearchResultContext.FAVORITES ? 'title0' : context === SearchResultContext.RECENT ? 'title1' : '')
     ];
     const [toolbar, setToolbar] = useState(toolbarElements);
-    // let width = useWindowWidth()
     const deviceType = useDeviceType();
     let isMobile = deviceType === DeviceType.MOBILE;
     useEffect(() => { if (isMobile) {

package/lib/components/sidebar/TMHeader.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from 'react';
 import six from '../../assets/loading.png';
-import { IconBxInfo, IconCloseOutline, IconLogout, IconPassword, IconSearch, IconSettings, IconUserProfile, MOBILE_WIDTH, SDKUI_Localizator, useWindowWidth } from '../../helper';
+import { IconBxInfo, IconCloseOutline, IconLogout, IconPassword, IconSearch, IconSettings, IconUserProfile, SDKUI_Localizator } from '../../helper';
 import styled from 'styled-components';
 import { SDK_Globals, AuthenticationModes } from '@topconsultnpm/sdk-ts-beta';
 import { FontSize, TMColors } from '../../utils/theme';
@@ -35,7 +35,6 @@ const StyledChaBotBtnWrapper = styled.div ` position: relative; cursor: pointer;
 const StyledChatBotToppyContainer = styled.div ` background-color: orange; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50px; position: absolute; left: -10px; `;
 const StyledToppyImage = styled.div ` display: flex; align-items: center; justify-content: center; width: 25px; height: 25px; border-radius: 50px; overflow: hidden; background-color: white; `;
 export const TMSearchBar = ({ searchValue, onSearchValueChanged, maxWidth, marginLeft }) => {
-    // const size = useWindowWidth()
     const deviceType = useDeviceType();
     return (_jsxs(StyledSearchBarContainer, { style: { maxWidth: maxWidth ? maxWidth : deviceType === DeviceType.MOBILE ? '65%' : '650px', marginLeft: marginLeft ? marginLeft : deviceType === DeviceType.MOBILE ? '10px' : '50px' }, "$isMobile": deviceType === DeviceType.MOBILE, children: [_jsx(IconSearch, { fontSize: 12, color: '#00000060', style: { position: 'absolute', width: '20px', height: '20px', left: '5px', top: '5px', zIndex: 1 } }), _jsx(StyledSearchBar, { placeholder: SDKUI_Localizator.Search + '...', type: "text", value: searchValue, onChange: (e) => onSearchValueChanged(e.target.value) }), searchValue.length > 0 && _jsx(IconCloseOutline, { onClick: () => onSearchValueChanged(''), color: '#00000060', style: { cursor: 'pointer', position: 'absolute', width: '20px', height: '20px', right: '5px', top: '5px', zIndex: 1 } })] }));
 };
@@ -50,8 +49,8 @@ const TMHeader = ({ showSearchBar = true, clearSearchJobValue, clearSearchQEValu
     const [isChatbot, setIsChatbot] = useState(false);
     const menuRef = useRef(null);
     const userIcon = useRef(null);
-    let width = useWindowWidth();
-    let isMobile = width <= MOBILE_WIDTH;
+    const deviceType = useDeviceType();
+    let isMobile = deviceType == DeviceType.MOBILE;
     useEffect(() => { clearSearchJobValue && setSearchJobsValue(''); }, [clearSearchJobValue]);
     useEffect(() => { clearSearchQEValue && setSearchQEValue(''); }, [clearSearchQEValue]);
     useEffect(() => {

package/lib/helper/helpers.d.ts

@@ -1,12 +1,13 @@
 import { Colors as ColorsType } from "../components/base/TMEditorBase";
+import { DeviceType } from "../components";
 import { AppModules, DataColumnDescriptor, ITopMediaSession, QueryDescriptor, SearchResultDescriptor } from "@topconsultnpm/sdk-ts-beta";
 import { FormModes } from "../ts";
 declare const TABLET_WIDTH = 1024;
 declare const MOBILE_WIDTH = 640;
-declare const calcResponsiveDirection: (currentWidth: number, desktopDir: 'horizontal' | 'vertical', tabletDir: 'horizontal' | 'vertical', mobileDir: 'horizontal' | 'vertical') => 'horizontal' | 'vertical';
+declare const calcResponsiveDirection: (deviceType: DeviceType, desktopDir: 'horizontal' | 'vertical', tabletDir: 'horizontal' | 'vertical', mobileDir: 'horizontal' | 'vertical') => 'horizontal' | 'vertical';
 declare const openApps: (appModule: AppModules, tmSession: ITopMediaSession, appRoutes?: any[]) => Promise<void>;
 export declare const setSDK_GlobalsInfoAsync: (tms: ITopMediaSession | undefined) => Promise<ITopMediaSession>;
-declare const calcResponsiveSizes: (currentWidth: number, desktopSize: string, tabletSize: string, mobileSize: string) => string;
+declare const calcResponsiveSizes: (deviceType: DeviceType | undefined, desktopSize: string, tabletSize: string, mobileSize: string) => string;
 declare const useWindowWidth: () => number;
 declare const getColor: (color: ColorsType) => string;
 declare const makeID: (length: number) => string;

package/lib/helper/helpers.js

@@ -1,6 +1,6 @@
 import { useLayoutEffect, useState } from "react";
 import { Colors } from "../utils/theme";
-import { ButtonNames, TMExceptionBoxManager, TMMessageBoxManager, TMSpinner } from "../components";
+import { ButtonNames, DeviceType, TMExceptionBoxManager, TMMessageBoxManager, TMSpinner } from "../components";
 import { SDK_Globals, SystemMIDsAsNumber, TopMediaServer } from "@topconsultnpm/sdk-ts-beta";
 import { Buffer } from 'buffer';
 import { FormModes } from "../ts";
@@ -8,13 +8,18 @@ import { SDKUI_Localizator } from "./SDKUI_Localizator";
 //#region Responsive Helpers
 const TABLET_WIDTH = 1024;
 const MOBILE_WIDTH = 640;
-const calcResponsiveDirection = (currentWidth, desktopDir, tabletDir, mobileDir) => {
-    if (currentWidth > TABLET_WIDTH)
+const calcResponsiveDirection = (deviceType, desktopDir, tabletDir, mobileDir) => {
+    if (deviceType === DeviceType.DESKTOP)
         return desktopDir;
-    if (currentWidth <= TABLET_WIDTH && currentWidth > MOBILE_WIDTH)
+    if (deviceType === DeviceType.TABLET)
         return tabletDir;
     return mobileDir;
 };
+// const calcResponsiveDirection = (currentWidth: number, desktopDir: 'horizontal' | 'vertical', tabletDir: 'horizontal' | 'vertical', mobileDir: 'horizontal' | 'vertical'): 'horizontal' | 'vertical' => {
+//     if (currentWidth > TABLET_WIDTH) return desktopDir;
+//     if (currentWidth <= TABLET_WIDTH && currentWidth > MOBILE_WIDTH) return tabletDir;
+//     return mobileDir;
+// }
 const openApps = async (appModule, tmSession, appRoutes) => {
     try {
         window.Buffer = Buffer;
@@ -51,13 +56,18 @@ export const setSDK_GlobalsInfoAsync = async (tms) => {
     }
     return tmSessionNew;
 };
-const calcResponsiveSizes = (currentWidth, desktopSize, tabletSize, mobileSize) => {
-    if (currentWidth > TABLET_WIDTH)
+const calcResponsiveSizes = (deviceType, desktopSize, tabletSize, mobileSize) => {
+    if (deviceType === DeviceType.DESKTOP)
         return desktopSize;
-    if (currentWidth <= TABLET_WIDTH && currentWidth > MOBILE_WIDTH)
+    if (deviceType === DeviceType.TABLET)
         return tabletSize;
     return mobileSize;
 };
+// const calcResponsiveSizes = (currentWidth: number, desktopSize: string, tabletSize: string, mobileSize: string): string => {
+//     if (currentWidth > TABLET_WIDTH) return desktopSize;
+//     if (currentWidth <= TABLET_WIDTH && currentWidth > MOBILE_WIDTH) return tabletSize;
+//     return mobileSize;
+// }
 const useWindowWidth = () => {
     const [windowWidth, setWindowWidth] = useState(window.innerWidth);
     const handleSize = () => { setWindowWidth(window.innerWidth); };

package/package.json

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