@topconsultnpm/sdkui-react-beta 6.7.26 → 6.7.28

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

@@ -1,10 +1,13 @@
 import React from 'react';
 import { ITMEditorBase } from './TMEditorBase';
 export type ButtonColors = 'error' | 'warning' | 'success' | 'info' | 'primary' | 'secondary' | 'tertiary' | 'standard' | 'primaryOutline' | 'secondaryOutline' | 'tertiaryOutline' | 'errorOutline' | 'warningOutline' | 'successOutline' | 'infoOutline';
-type ButtonStyle = 'normal' | 'toolbar' | 'icon' | 'text';
-interface ITMButton extends ITMEditorBase {
+export type ButtonStyle = 'normal' | 'toolbar' | 'icon' | 'text' | 'advanced';
+export type AdvancedButtonType = 'success' | 'error' | 'tertiary' | 'primary';
+export interface ITMButton extends ITMEditorBase {
     color?: ButtonColors;
     btnStyle?: ButtonStyle;
+    advancedType?: AdvancedButtonType;
+    advancedColor?: string;
     caption?: string;
     description?: string;
     icon?: any;
@@ -15,7 +18,6 @@ interface ITMButton extends ITMEditorBase {
 }
 declare const TMButton: React.FunctionComponent<ITMButton>;
 export default TMButton;
-export type NewButtonType = 'success' | 'error' | 'tertiary' | 'primary';
 export declare const TMButtonNew: ({ color, caption, disable, onClick, type, icon, width, height }: {
     color?: string;
     width?: string;
@@ -23,6 +25,6 @@ export declare const TMButtonNew: ({ color, caption, disable, onClick, type, ico
     disable?: boolean;
     caption?: string;
     onClick?: () => void;
-    type?: NewButtonType;
+    type?: AdvancedButtonType;
     icon?: any;
 }) => import("react/jsx-runtime").JSX.Element;

package/lib/components/base/TMButton.js

@@ -106,7 +106,8 @@ const StyledButtonTooltipItem = styled.div `
   color: ${props => props.$color ? props.$color : "primary"};
   font-size: ${props => props.fontSize || FontSize.defaultFontSize};
 `;
-const TMButton = ({ width, height, keyGesture, btnStyle = 'normal', color = 'primary', fontSize = FontSize.defaultFontSize, disabled = false, showTooltip = true, caption, icon, description, padding, elementStyle, onClick = () => { } }) => {
+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);
     // const [key, setKey] = useState("");
     // let accBtns = keyGesture?.replaceAll(' ', '').split('+')
@@ -152,6 +153,9 @@ const TMButton = ({ width, height, keyGesture, btnStyle = 'normal', color = 'pri
         else if (btnStyle === 'icon') {
             return (_jsx(StyledIconButton, { color: color, caption: caption, disabled: disabled, fontSize: fontSize, padding: padding, onClick: onClick, children: icon }));
         }
+        else if (btnStyle === 'advanced') {
+            return (_jsxs(StyledAdvancedButton, { "$width": width, "$height": height, onMouseOver: () => !disabled && setIsHovered(true), onMouseOut: () => setIsHovered(false), "$isDisabled": disabled, onClick: () => !disabled && onClick?.(), children: [_jsx(StyledAdvancedButtonIcon, { "$color": color, "$isVisible": isHovered, "$isDisabled": disabled, "$type": advancedType, children: icon }), _jsxs(StyledAdvancedButtonText, { "$color": advancedColor, "$isDisabled": disabled, "$type": advancedType, children: [" ", caption, " "] })] }));
+        }
         else {
             return (_jsx(StyledTextButton, { color: color, caption: caption, disabled: disabled, fontSize: fontSize, onClick: onClick, children: caption }));
         }
@@ -163,7 +167,7 @@ const TMButton = ({ width, height, keyGesture, btnStyle = 'normal', color = 'pri
     return (_jsx("div", { style: elementStyle, children: showTooltip ? _jsx(TMTooltip, { hideAfterDelay: true, content: renderTooltip(), children: renderedButton() }) : renderedButton() }));
 };
 export default TMButton;
-const StyledWorkFlowOperationButton = styled.div `
+const StyledAdvancedButton = styled.div `
     display: flex;
     align-items: center;
     justify-content: flex-end;
@@ -176,18 +180,19 @@ const StyledWorkFlowOperationButton = styled.div `
     color: white;
     user-select: none;
 `;
-const StyledWorkFlowOperationButtonIcon = styled.div `
+const StyledAdvancedButtonIcon = styled.div `
     display: flex;
     align-items: center;
     justify-content: center;
-    width: ${props => props.$isHoverred ? '25px' : '0px'};
+    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 StyledWorkFlowOperationButtonText = styled.div `
+const StyledAdvancedButtonText = styled.div `
     display: flex;
     align-items: center;
     justify-content: center;
@@ -199,5 +204,5 @@ const StyledWorkFlowOperationButtonText = styled.div `
 `;
 export const TMButtonNew = ({ color, caption = '', disable = false, onClick, type = 'primary', icon = _jsx(IconApply, {}), width = '90px', height = '30px' }) => {
     const [isHovered, setIsHovered] = useState(false);
-    return (_jsxs(StyledWorkFlowOperationButton, { "$width": width, "$height": height, onMouseOver: () => !disable && setIsHovered(true), onMouseOut: () => setIsHovered(false), "$isDisabled": disable, onClick: () => !disable && onClick && onClick(), children: [_jsx(StyledWorkFlowOperationButtonIcon, { "$color": color, "$isHoverred": isHovered, "$isDisabled": disable, "$type": type, children: icon }), _jsxs(StyledWorkFlowOperationButtonText, { "$color": color, "$isDisabled": disable, "$type": type, children: [" ", caption, " "] })] }));
+    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/TMLoginPopupSaveLoginInfo.js

@@ -185,7 +185,7 @@ const TMLoginPopupSaveLoginInfo = (props) => {
                 handleFileRead(file, (parsedData) => {
                     const modifiedData = generateModifiedData(parsedData, historyState.loginHistory);
                     updateHistoryState(modifiedData);
-                }, () => alert("Error parsing the file content. Ensure the file is in the correct format."));
+                }, () => alert(SDKUI_Localizator.ErrorParsingFileContent));
             });
         }
         else if (e.itemData.value === 'export') {
@@ -208,7 +208,7 @@ 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), 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) => 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 (_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()] }));
 };

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

@@ -1,17 +1,31 @@
 import React from 'react';
 import { FormModes, ITMSaveFormBaseProps } from '../../ts/types';
+import { ITMButton } from '../base/TMButton';
 declare const TMSaveForm: React.FC<ITMSaveFormBaseProps>;
 export default TMSaveForm;
-export declare const TMSaveFormStandardToolbar: ({ btnStyle, formMode, hasNavigation, isModified, errorsCount, onNext, onPrev, canNext, canPrev, onSaveAsync, onUndo }: {
-    btnStyle: "normal" | "toolbar" | "icon" | "text";
+interface ITMSaveFormButtonBase extends ITMButton {
+    iconColor?: string;
     formMode: FormModes;
-    hasNavigation: boolean;
     isModified: boolean;
-    errorsCount: number;
-    onNext?: () => void;
+}
+interface ITMSaveFormButtonPreviousProps extends ITMSaveFormButtonBase {
+    canPrev?: boolean;
     onPrev?: () => void;
+    onSaveAsync?: () => Promise<void>;
+}
+export declare const TMSaveFormButtonPrevious: ({ btnStyle, formMode, isModified, onPrev, canPrev, iconColor, onSaveAsync }: ITMSaveFormButtonPreviousProps) => import("react/jsx-runtime").JSX.Element;
+interface ITMSaveFormButtonNextProps extends ITMSaveFormButtonBase {
     canNext?: boolean;
-    canPrev?: boolean;
+    onNext?: () => void;
+    onSaveAsync?: () => Promise<void>;
+}
+export declare const TMSaveFormButtonNext: ({ btnStyle, formMode, isModified, onNext, canNext, iconColor, onSaveAsync }: ITMSaveFormButtonNextProps) => import("react/jsx-runtime").JSX.Element;
+interface ITMSaveFormButtonSaveProps extends ITMSaveFormButtonBase {
+    errorsCount: number;
     onSaveAsync?: () => Promise<void>;
+}
+export declare const TMSaveFormButtonSave: ({ btnStyle, errorsCount, isModified, iconColor, width, advancedColor, advancedType, onSaveAsync }: ITMSaveFormButtonSaveProps) => import("react/jsx-runtime").JSX.Element;
+interface ITMSaveFormButtonUndoProps extends ITMSaveFormButtonBase {
     onUndo?: () => void;
-}) => import("react/jsx-runtime").JSX.Element;
+}
+export declare const TMSaveFormButtonUndo: ({ btnStyle, isModified, iconColor, width, advancedColor, advancedType, onUndo }: ITMSaveFormButtonUndoProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/forms/TMSaveForm.js

@@ -105,16 +105,10 @@ const TMSaveForm = ({ id, formMode = FormModes.Update, showToolbar = true, skipI
             : renderSaveForm() }));
 };
 export default TMSaveForm;
-export const TMSaveFormStandardToolbar = ({ btnStyle, formMode, hasNavigation, isModified, errorsCount, onNext, onPrev, canNext, canPrev, onSaveAsync, onUndo }) => {
-    const doSaveAsync = async () => { try {
-        await onSaveAsync?.();
-    }
-    catch (ex) {
-        TMExceptionBoxManager.show({ exception: ex });
-    } };
-    const doNext = () => {
+export const TMSaveFormButtonPrevious = ({ btnStyle, formMode, isModified, onPrev, canPrev, iconColor, onSaveAsync }) => {
+    const doPrev = () => {
         if (!isModified) {
-            onNext?.();
+            onPrev?.();
             return;
         }
         TMMessageBoxManager.show({
@@ -125,7 +119,7 @@ export const TMSaveFormStandardToolbar = ({ btnStyle, formMode, hasNavigation, i
                         return;
                     if (e == ButtonNames.YES)
                         await onSaveAsync?.();
-                    onNext?.();
+                    onPrev?.();
                 }
                 catch (ex) {
                     TMExceptionBoxManager.show({ exception: ex });
@@ -133,9 +127,12 @@ export const TMSaveFormStandardToolbar = ({ btnStyle, formMode, hasNavigation, i
             }
         });
     };
-    const doPrev = () => {
+    return (_jsx(TMButton, { btnStyle: btnStyle, caption: SDKUI_Localizator.Previous, icon: _jsx(IconArrowUp, { color: iconColor }), disabled: !canPrev || isModified || formMode == FormModes.Create || formMode == FormModes.Duplicate, onClick: doPrev }));
+};
+export const TMSaveFormButtonNext = ({ btnStyle, formMode, isModified, onNext, canNext, iconColor, onSaveAsync }) => {
+    const doNext = () => {
         if (!isModified) {
-            onPrev?.();
+            onNext?.();
             return;
         }
         TMMessageBoxManager.show({
@@ -146,7 +143,7 @@ export const TMSaveFormStandardToolbar = ({ btnStyle, formMode, hasNavigation, i
                         return;
                     if (e == ButtonNames.YES)
                         await onSaveAsync?.();
-                    onPrev?.();
+                    onNext?.();
                 }
                 catch (ex) {
                     TMExceptionBoxManager.show({ exception: ex });
@@ -154,5 +151,17 @@ export const TMSaveFormStandardToolbar = ({ btnStyle, formMode, hasNavigation, i
             }
         });
     };
-    return (_jsxs(_Fragment, { children: [_jsx(TMButton, { btnStyle: btnStyle, caption: SDKUI_Localizator.Save, icon: _jsx(IconSave, { color: btnStyle === 'icon' ? 'white' : undefined }), keyGesture: "alt+s", backgroundColor: errorsCount > 0 ? TMColors.error : isModified ? TMColors.success : TMColors.disabled, onClick: doSaveAsync, color: "success", disabled: !(isModified && errorsCount <= 0) }), hasNavigation && _jsx(TMButton, { btnStyle: btnStyle, caption: SDKUI_Localizator.Previous, icon: _jsx(IconArrowUp, { color: btnStyle === 'icon' ? 'white' : undefined }), disabled: !canPrev || isModified || formMode == FormModes.Create || formMode == FormModes.Duplicate, onClick: doPrev }), hasNavigation && _jsx(TMButton, { btnStyle: btnStyle, caption: SDKUI_Localizator.Next, icon: _jsx(IconArrowDown, { color: btnStyle === 'icon' ? 'white' : undefined }), disabled: !canNext || isModified || formMode == FormModes.Create || formMode == FormModes.Duplicate, onClick: doNext }), _jsx(TMButton, { btnStyle: btnStyle, caption: SDKUI_Localizator.Undo, icon: _jsx(IconUndo, { color: btnStyle === 'icon' ? 'white' : undefined }), keyGesture: "alt+z", color: "tertiary", disabled: !isModified, onClick: onUndo })] }));
+    return (_jsx(TMButton, { btnStyle: btnStyle, caption: SDKUI_Localizator.Next, icon: _jsx(IconArrowDown, { color: iconColor }), disabled: !canNext || isModified || formMode == FormModes.Create || formMode == FormModes.Duplicate, onClick: doNext }));
+};
+export const TMSaveFormButtonSave = ({ btnStyle, errorsCount, isModified, iconColor, width, advancedColor, advancedType, onSaveAsync }) => {
+    const doSaveAsync = async () => { try {
+        await onSaveAsync?.();
+    }
+    catch (ex) {
+        TMExceptionBoxManager.show({ exception: ex });
+    } };
+    return (_jsx(TMButton, { btnStyle: btnStyle, width: width, advancedColor: advancedColor, advancedType: advancedType, caption: SDKUI_Localizator.Save, icon: _jsx(IconSave, { color: iconColor }), keyGesture: "alt+s", backgroundColor: errorsCount > 0 ? TMColors.error : isModified ? TMColors.success : TMColors.disabled, onClick: doSaveAsync, color: "success", disabled: !(isModified && errorsCount <= 0) }));
+};
+export const TMSaveFormButtonUndo = ({ btnStyle, isModified, iconColor, width, advancedColor, advancedType, onUndo }) => {
+    return (_jsx(TMButton, { btnStyle: btnStyle, width: width, advancedColor: advancedColor, advancedType: advancedType, caption: SDKUI_Localizator.Undo, icon: _jsx(IconUndo, { color: iconColor }), keyGesture: "alt+z", color: "tertiary", disabled: !isModified, onClick: onUndo }));
 };

package/lib/helper/SDKUI_Localizator.d.ts

@@ -234,4 +234,5 @@ export declare class SDKUI_Localizator {
     static get ImportExport(): "Importieren/Exportieren" | "Import/Export" | "Importar/Exportar" | "Importer/Exporter" | "Importa/Esporta";
     static get Import(): "Importieren" | "Import" | "Importar" | "Importer" | "Importa";
     static get Export(): "Exportieren" | "Export" | "Exportar" | "Exporter" | "Esporta";
+    static get ErrorParsingFileContent(): "Fehler beim Parsen des Dateiinhalts. Stellen Sie sicher, dass die Datei im richtigen Format vorliegt." | "Error parsing the file content. Ensure the file is in the correct format." | "Error al analizar el contenido del archivo. Asegúrese de que el archivo esté en el formato correcto." | "Erreur lors de l'analyse du contenu du fichier. Assurez-vous que le fichier est dans le bon format." | "Erro ao analisar o conteúdo do arquivo. Certifique-se de que o arquivo está no formato correto." | "Errore durante l'analisi del contenuto del file. Assicurati che il file sia nel formato corretto.";
 }

package/lib/helper/SDKUI_Localizator.js

@@ -2331,7 +2331,7 @@ export class SDKUI_Localizator {
             case CultureIDs.Pt_PT:
                 return "Importar";
             default:
-                return "Importa"; // Italian
+                return "Importa";
         }
     }
     static get Export() {
@@ -2347,7 +2347,23 @@ export class SDKUI_Localizator {
             case CultureIDs.Pt_PT:
                 return "Exportar";
             default:
-                return "Esporta"; // Italian
+                return "Esporta";
+        }
+    }
+    static get ErrorParsingFileContent() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE:
+                return "Fehler beim Parsen des Dateiinhalts. Stellen Sie sicher, dass die Datei im richtigen Format vorliegt.";
+            case CultureIDs.En_US:
+                return "Error parsing the file content. Ensure the file is in the correct format.";
+            case CultureIDs.Es_ES:
+                return "Error al analizar el contenido del archivo. Asegúrese de que el archivo esté en el formato correcto.";
+            case CultureIDs.Fr_FR:
+                return "Erreur lors de l'analyse du contenu du fichier. Assurez-vous que le fichier est dans le bon format.";
+            case CultureIDs.Pt_PT:
+                return "Erro ao analisar o conteúdo do arquivo. Certifique-se de que o arquivo está no formato correto.";
+            default:
+                return "Errore durante l'analisi del contenuto del file. Assicurati che il file sia nel formato corretto.";
         }
     }
 }

package/package.json

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