@topconsultnpm/sdkui-react 6.17.0-test10

package/lib/components/forms/Login/TextBox.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+import { ValidationItem } from '@topconsultnpm/sdk-ts';
+export interface AdditionalIconProps {
+    icon: any;
+    tooltip?: string;
+    onClick: () => void;
+    color?: string;
+    visible?: boolean;
+}
+interface TextBoxProps {
+    value?: string;
+    label?: string;
+    icon?: any;
+    additionalIcons?: AdditionalIconProps[];
+    type: "password" | "email" | "number" | "text";
+    placeHolder?: string;
+    validationItems?: ValidationItem[];
+    disabled?: boolean;
+    readOnly?: boolean;
+    cursor?: 'default' | 'pointer' | 'text';
+    showSuccess?: boolean;
+    onClick?: () => void;
+    onValueChanged?: (value: string) => void;
+    onKeyDown?: (event: React.KeyboardEvent) => void;
+}
+declare const TextBox: React.ForwardRefExoticComponent<TextBoxProps & React.RefAttributes<HTMLInputElement>>;
+export default TextBox;

package/lib/components/forms/Login/TextBox.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo, useState } from "react";
+import styled from "styled-components";
+import { ResultTypes } from '@topconsultnpm/sdk-ts';
+import { IconShow, IconHide, SDKUI_Globals } from "../../../helper";
+import { TMColors } from "../../../utils/theme";
+import TMTooltip from "../../base/TMTooltip";
+const Container = styled.div `
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  position: relative;
+  gap: 2px;
+`;
+const Label = styled.label `
+  font-size: 12px;
+  font-weight: 500;
+  color: #313131;
+`;
+const InputContainer = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid #99999A;
+  border-radius: 5px;
+  background: ${(props) => (props.$disabled ? "#f0f0f0" : "white")};
+  opacity: ${(props) => (props.$disabled ? 0.6 : 1)};
+  cursor: ${(props) => (props.$disabled ? "not-allowed" : "text")};
+  position: relative;
+  border-bottom: ${(props) => (props.$focused ? "2px" : props.$borderThickness)} solid ${(props) => props.$borderColor};
+`;
+const Input = styled.input `
+  flex: 1;
+  border: none;
+  outline: none;
+  font-size: ${SDKUI_Globals.userSettings?.themeSettings.fontSize ?? '12px'};
+  padding: 6px 30px 6px 10px;
+  background: transparent;
+  color: ${props => props.$color ?? '#313131'};
+  ${(props) => props.$readOnly && "pointer-events: none; background: #f8f8f8;"}
+  cursor: ${props => props.$cursor};
+`;
+const ValidationMessageContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-top: 2px;
+`;
+const ValidationMessage = styled.span `
+  font-size: 12px;
+  color: ${(props) => props.$color};
+`;
+const IconWrapper = styled.div `
+  color: ${(props) => props.$color};
+  display: flex;
+  align-items: center;
+  position: absolute;
+  left: -30px;
+  cursor: default;
+`;
+const IconsRow = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  position: absolute;
+  right: 10px;
+`;
+const IconButton = styled.div `
+  color: ${(props) => props.$color};
+  display: flex;
+  align-items: center;
+  cursor: ${props => !props.$disabled ? 'pointer' : 'default'};
+`;
+const TextBox = forwardRef(({ label, type, additionalIcons = [], cursor = 'text', disabled, icon, onClick, onKeyDown, onValueChanged, placeHolder, readOnly, showSuccess, validationItems = [], value }, ref) => {
+    const [showPassword, setShowPassword] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
+    const mainValidation = useMemo(() => {
+        return validationItems.find((v) => v.ResultType === ResultTypes.ERROR) ||
+            validationItems.find((v) => v.ResultType === ResultTypes.WARNING);
+    }, [validationItems]);
+    const validationMessages = useMemo(() => validationItems.map((v) => ({
+        message: v.Message,
+        color: v.ResultType === ResultTypes.ERROR ? TMColors.error : TMColors.tertiary
+    })), [validationItems]);
+    const borderColor = useMemo(() => {
+        let color = '#99999A';
+        if (mainValidation) {
+            color = mainValidation.ResultType === ResultTypes.ERROR ? TMColors.error : TMColors.tertiary;
+        }
+        else if (isFocused) {
+            color = showSuccess ? TMColors.success : TMColors.primary;
+        }
+        return color;
+    }, [mainValidation, isFocused, showSuccess]);
+    const borderThickness = useMemo(() => {
+        let thickness = "1px";
+        if (mainValidation) {
+            thickness = "2px";
+        }
+        return thickness;
+    }, [mainValidation, isFocused]);
+    const fontColor = useMemo(() => {
+        let color = "#313131";
+        if (mainValidation) {
+            color = mainValidation.ResultType === ResultTypes.ERROR ? TMColors.error : TMColors.tertiary;
+        }
+        return color;
+    }, [mainValidation]);
+    return (_jsxs(Container, { children: [label && _jsx(Label, { "$color": borderColor, children: label }), _jsxs(InputContainer, { "$borderColor": borderColor, "$borderThickness": borderThickness, "$focused": isFocused, "$disabled": disabled, children: [icon && _jsx(IconWrapper, { "$color": validationItems.length > 0 ? borderColor : TMColors.primary, children: icon }), _jsx(Input, { ref: ref, onKeyDown: onKeyDown, onClick: onClick, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), type: type === "password" && showPassword ? "text" : type, value: value, onChange: (e) => onValueChanged?.(e.target.value), placeholder: placeHolder, "$readOnly": readOnly, disabled: disabled, "$color": fontColor, "$cursor": !disabled ? cursor : 'default' }), _jsxs(IconsRow, { children: [additionalIcons.map((iconItem, index) => (iconItem.visible !== false && _jsx(TMTooltip, { content: iconItem.tooltip, children: _jsxs(IconButton, { "$disabled": disabled, "$color": iconItem.color ?? '#313131', onClick: iconItem.onClick, children: [" ", iconItem.icon, " "] }) }, index * 2))), type === "password" && (_jsx(IconButton, { "$disabled": disabled, "$color": '#313131', onClick: () => setShowPassword(!showPassword), children: showPassword ? _jsx(IconShow, {}) : _jsx(IconHide, {}) }))] })] }), _jsx(ValidationMessageContainer, { children: validationMessages.map((val, index) => (_jsx(ValidationMessage, { "$color": val.color, children: val.message }, index * 2))) })] }));
+});
+export default TextBox;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ITMApplyFormBaseProps } from '../../ts/types';
+declare const TMApplyForm: React.FC<ITMApplyFormBaseProps>;
+export default TMApplyForm;

package/lib/components/forms/TMApplyForm.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ResultTypes } from '@topconsultnpm/sdk-ts';
+import { FormModes } from '../../ts/types';
+import { IconApply, IconApplyAndClose, IconArrowDown, IconArrowLeft, IconArrowUp, IconCloseCircle, IconShow, IconUndo, IconWarning, LocalizeFormModes, SDKUI_Localizator } from '../../helper';
+import { ButtonNames, TMExceptionBoxManager, TMMessageBoxManager } from '../base/TMPopUp';
+import TMLayoutContainer, { TMCard, TMLayoutItem, TMSplitterLayout } from '../base/TMLayout';
+import { StyledResultTypeContainer, StyledToolbarForm } from '../base/Styled';
+import TMButton from '../base/TMButton';
+import { TMColors } from '../../utils/theme';
+import TMValidationItemsList from '../grids/TMValidationItemsList';
+import TMModal from '../base/TMModal';
+const TMApplyForm = ({ children, width, height, showToolbar = true, formMode, isModal, isModified, showApply = true, showUndo = true, showBack = true, skipIsModifiedCheck = false, exception, customToolbarElements, canNext = true, canPrev = true, hasContentPadding = true, hasNavigation = false, hasShowId = false, showId, title = '', validationItems = [], onApply, onClose, onUndo, onNext, onPrev }) => {
+    const [showErrorGrid, setShowErrorGrid] = useState(false);
+    const doApply = async () => { try {
+        onApply?.();
+    }
+    catch (ex) {
+        TMExceptionBoxManager.show({ exception: ex });
+    } };
+    const doNext = () => {
+        if (!isModified) {
+            onNext?.();
+            return;
+        }
+        TMMessageBoxManager.show({
+            message: SDKUI_Localizator.SaveQuestion, buttons: [ButtonNames.YES, ButtonNames.NO, ButtonNames.CANCEL],
+            onButtonClick: async (e) => {
+                try {
+                    if (e == ButtonNames.CANCEL)
+                        return;
+                    if (e == ButtonNames.YES)
+                        onApply?.();
+                    onNext?.();
+                }
+                catch (ex) {
+                    TMExceptionBoxManager.show({ exception: ex });
+                }
+            }
+        });
+    };
+    const doPrev = () => {
+        if (!isModified) {
+            onPrev?.();
+            return;
+        }
+        TMMessageBoxManager.show({
+            message: SDKUI_Localizator.SaveQuestion, buttons: [ButtonNames.YES, ButtonNames.NO, ButtonNames.CANCEL],
+            onButtonClick: async (e) => {
+                try {
+                    if (e == ButtonNames.CANCEL)
+                        return;
+                    if (e == ButtonNames.YES)
+                        await onApply?.();
+                    onPrev?.();
+                }
+                catch (ex) {
+                    TMExceptionBoxManager.show({ exception: ex });
+                }
+            }
+        });
+    };
+    const doClose = () => {
+        if (!isModified || skipIsModifiedCheck) {
+            onClose?.();
+            return;
+        }
+        // Se ci sono errori, chiudi direttamente senza chiedere di applicare
+        if (errorsCount > 0) {
+            onClose?.();
+            return;
+        }
+        TMMessageBoxManager.show({
+            message: "Applicare le modifiche apportate?", buttons: [ButtonNames.YES, ButtonNames.NO, ButtonNames.CANCEL], //TODO SDKUI_Localizator.ApplyQuestion
+            onButtonClick: async (e) => {
+                try {
+                    if (e == ButtonNames.CANCEL)
+                        return;
+                    if (e == ButtonNames.YES) {
+                        onApply?.();
+                    }
+                    onClose?.();
+                }
+                catch (ex) {
+                    TMExceptionBoxManager.show({ exception: ex });
+                }
+            }
+        });
+    };
+    const warningsCount = validationItems.filter(o => o.ResultType == ResultTypes.WARNING).length;
+    const errorsCount = validationItems.filter(o => o.ResultType == ResultTypes.ERROR).length;
+    const renderApplyForm = () => {
+        return (_jsxs(TMLayoutContainer, { direction: 'vertical', gap: 0, children: [showToolbar && _jsx(TMLayoutItem, { height: '35px', children: _jsxs(StyledToolbarForm, { children: [!isModal && showBack && _jsx(TMButton, { btnStyle: 'toolbar', color: 'tertiary', caption: SDKUI_Localizator.Back, icon: _jsx(IconArrowLeft, {}), fontSize: '1.3rem', elementStyle: { marginRight: '10px' }, onClick: () => { doClose(); } }), showApply && _jsx(TMButton, { disabled: isModified && errorsCount <= 0 ? false : true, btnStyle: 'toolbar', caption: SDKUI_Localizator.Apply, icon: _jsx(IconApply, {}), color: 'success', fontSize: '1.3rem', onClick: doApply }), showApply && _jsx(TMButton, { disabled: isModified && errorsCount <= 0 ? false : true, btnStyle: 'toolbar', caption: SDKUI_Localizator.ApplyAndClose, icon: _jsx(IconApplyAndClose, {}), color: 'success', fontSize: '1.3rem', onClick: async () => { await doApply(); onClose?.(); } }), showUndo && _jsx(TMButton, { disabled: !isModified, btnStyle: 'toolbar', caption: SDKUI_Localizator.Undo, icon: _jsx(IconUndo, {}), color: 'warning', fontSize: '1.3rem', onClick: onUndo }), hasNavigation && _jsx(TMButton, { btnStyle: 'toolbar', caption: SDKUI_Localizator.Next, icon: _jsx(IconArrowDown, {}), fontSize: '1.3rem', onClick: doNext, disabled: !canNext || isModified || formMode == FormModes.Create || formMode == FormModes.Duplicate }), hasNavigation && _jsx(TMButton, { btnStyle: 'toolbar', caption: SDKUI_Localizator.Previous, icon: _jsx(IconArrowUp, {}), fontSize: '1.3rem', onClick: doPrev, disabled: !canPrev || isModified || formMode == FormModes.Create || formMode == FormModes.Duplicate }), customToolbarElements, hasShowId ? _jsx(TMButton, { btnStyle: 'toolbar', caption: showId ? SDKUI_Localizator.ID_Hide : SDKUI_Localizator.ID_Show, icon: _jsx(IconShow, {}), fontSize: '1.3rem', onClick: () => console.log('ID') }) : _jsx(_Fragment, {}), warningsCount > 0 &&
+                                _jsx(TMLayoutItem, { width: 'fit-content', height: '90%', children: _jsxs(StyledResultTypeContainer, { style: { marginLeft: '10px' }, onClick: () => setShowErrorGrid(!showErrorGrid), "$resultType": ResultTypes.WARNING, children: [" ", _jsx(IconWarning, { fontSize: 16 }), " ", _jsx("span", { children: warningsCount })] }) }), errorsCount > 0 &&
+                                _jsx(TMLayoutItem, { width: 'fit-content', height: '90%', children: _jsxs(StyledResultTypeContainer, { style: { marginLeft: warningsCount <= 0 ? '10px' : '0' }, onClick: () => setShowErrorGrid(!showErrorGrid), "$resultType": ResultTypes.ERROR, children: [" ", _jsx(IconCloseCircle, { fontSize: 16 }), " ", _jsx("span", { children: errorsCount })] }) })] }) }), _jsx(TMLayoutItem, { height: showToolbar ? 'calc(100% - 35px)' : '100%', children: _jsxs(TMSplitterLayout, { separatorSize: 4, direction: 'vertical', start: showErrorGrid && validationItems.length > 0 ? ['80%', '20%'] : ['100%', '0'], min: ['0', '0'], children: [_jsx(TMCard, { showBorder: false, scrollY: true, padding: hasContentPadding, children: exception
+                                    ?
+                                        _jsx("div", { style: { width: '100%', height: '100%', marginTop: '50px', display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', color: TMColors.error }, children: 'Si è verificato un errore' })
+                                    : _jsx(_Fragment, { children: children }) }), showErrorGrid && validationItems.length > 0 ? _jsx(TMCard, { scrollY: true, padding: false, showBorder: false, children: _jsx(TMValidationItemsList, { validationItems: validationItems }) }) : _jsx(_Fragment, {})] }) })] }));
+    };
+    return (_jsx(_Fragment, { children: isModal && onClose
+            ?
+                _jsx(TMModal, { isModal: isModal, title: `${title} - ${LocalizeFormModes(formMode)}`, width: width, height: height, onClose: doClose, children: renderApplyForm() })
+            : renderApplyForm() }));
+};
+export default TMApplyForm;

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

@@ -0,0 +1,3 @@
+import { ITMChooserFormProps } from '../../ts';
+declare const TMChooserForm: <T>({ children, title, allowMultipleSelection, allowApplyWithZeroSelection, startWithShowOnlySelectedItems, hasShowOnlySelectedItems, allowGrouping, allowSorting, width, height, dataSource, selectedIDs, manageUseLocalizedName, hasShowId, hideRefresh, keyName, customButtons, showFilterPanel, showDefaultColumns, columns, summaryItems, convertID, customFilter, getItems, cellRenderIcon, cellRenderNameAndDesc, onChoose, onClose, onShowIdChanged }: ITMChooserFormProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default TMChooserForm;

package/lib/components/forms/TMChooserForm.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { SDK_Globals } from '@topconsultnpm/sdk-ts';
+import { IconApply, IconHide, IconRefresh, IconShow, SDKUI_Localizator } from '../../helper';
+import TMButton from '../base/TMButton';
+import TMToggleButton from '../base/TMToggleButton';
+import TMModal from '../base/TMModal';
+import TMLayoutContainer, { TMLayoutItem } from '../base/TMLayout';
+import { TMColors } from '../../utils/theme';
+import TMDataGrid from '../base/TMDataGrid';
+const TMChooserForm = ({ children, title, allowMultipleSelection = false, allowApplyWithZeroSelection = false, startWithShowOnlySelectedItems = true, hasShowOnlySelectedItems = false, allowGrouping, allowSorting = true, width, height, dataSource, selectedIDs, manageUseLocalizedName = true, hasShowId = true, hideRefresh = false, keyName = "id", customButtons, showFilterPanel = false, showDefaultColumns = true, columns = [], summaryItems, convertID, customFilter, getItems, cellRenderIcon, cellRenderNameAndDesc, onChoose, onClose, onShowIdChanged }) => {
+    const [showId, setShowId] = useState(false);
+    const [showOnlySelectedItems, setShowOnlySelectedItems] = useState(allowMultipleSelection && hasShowOnlySelectedItems && startWithShowOnlySelectedItems && selectedIDs != undefined && selectedIDs.length > 0);
+    const [allItems, setAllItems] = useState([]);
+    const [filteredItems, setFilteredItems] = useState([]);
+    const [selectedRowKeys, setSelectedRowKeys] = useState(selectedIDs ?? []);
+    const [focusedRowKey, setFocusedRowKey] = useState(selectedIDs?.[0]);
+    const [selectedRowCounter, setSelectedRowCounter] = useState([]);
+    useEffect(() => { doGetItems(false); }, [getItems]);
+    useEffect(() => {
+        if (showOnlySelectedItems)
+            setFilteredItems(allItems.filter((o) => selectedRowKeys?.includes(o[keyName])));
+        else
+            setFilteredItems(allItems);
+    }, [showOnlySelectedItems, allItems, selectedRowKeys, keyName]);
+    useEffect(() => {
+        setSelectedRowCounter(selectedRowKeys);
+    }, [selectedRowKeys]);
+    const getSelectedIDs = () => { return filteredItems.filter((o) => selectedRowKeys?.includes(o[keyName])).map((item) => { return convertID ? convertID(item) : item[keyName]; }); };
+    const getFocusedIDs = () => { return filteredItems.filter((o) => o[keyName] == focusedRowKey).map((item) => { return convertID ? convertID(item) : item[keyName]; }); };
+    const renderTitle = () => { return title ? `${title}  (${selectedRowCounter.length}/${filteredItems.length})` : SDKUI_Localizator.Select; };
+    const doGetItems = (refreshCache) => {
+        if (dataSource) {
+            setAllItems(dataSource);
+            return;
+        }
+        getItems?.(refreshCache).then((result) => {
+            setAllItems(result);
+        });
+    };
+    const ToolbarButtons = () => {
+        return (_jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', gap: '2px' }, children: [_jsx(TMButton, { btnStyle: 'toolbar', caption: SDKUI_Localizator.Apply, disabled: selectedRowCounter.length <= 0 && !allowApplyWithZeroSelection, icon: _jsx(IconApply, {}), color: 'success', fontSize: '1.3rem', onClick: () => { onChoose?.(getSelectedIDs()); onClose?.(); } }), hasShowId ? _jsx(TMButton, { btnStyle: 'toolbar', caption: showId ? SDKUI_Localizator.ID_Hide : SDKUI_Localizator.ID_Show, icon: showId ? _jsx(IconHide, {}) : _jsx(IconShow, {}), fontSize: '1.3rem', onClick: () => { setShowId(!showId); onShowIdChanged?.(); } }) : _jsx(_Fragment, {}), !hideRefresh && _jsx(TMButton, { btnStyle: 'toolbar', caption: SDKUI_Localizator.Refresh, icon: _jsx(IconRefresh, {}), fontSize: '1.3rem', onClick: () => { doGetItems(true); } }), customButtons, hasShowOnlySelectedItems && allowMultipleSelection && _jsx(TMToggleButton, { value: showOnlySelectedItems, elementStyle: { marginLeft: '10px' }, label: 'Mostra solo selezionati', onValueChanged: () => setShowOnlySelectedItems(!showOnlySelectedItems) })] }));
+    };
+    /** check if it's possible to manage double-click to choose */
+    const allowChooseDoubleClick = () => {
+        if (!allowMultipleSelection)
+            return true;
+        if (selectedRowCounter.length <= 0)
+            return true;
+        return false;
+    };
+    /** Handle the selection changed when allowMultipleSelection */
+    const handleSelectionChanged = useCallback((e) => {
+        const selectedKeys = e.component.getSelectedRowKeys() ?? [];
+        setSelectedRowCounter(selectedKeys);
+        if (JSON.stringify(selectedKeys) === JSON.stringify(selectedRowKeys))
+            return;
+        setSelectedRowKeys(selectedKeys);
+    }, [selectedRowKeys]);
+    /** Handle the row double-click event */
+    const handleRowDoubleClick = useCallback(() => {
+        if (!allowChooseDoubleClick())
+            return;
+        onChoose?.(getFocusedIDs());
+        onClose?.();
+    }, [allowChooseDoubleClick, onChoose, onClose, getFocusedIDs]);
+    /** Handle the focused row changed */
+    const handleFocusedRowChange = useCallback((e) => {
+        setFocusedRowKey(e.row?.key);
+    }, []);
+    const dataColumns = useMemo(() => {
+        let dtColumns = [];
+        if (cellRenderIcon)
+            dtColumns.push({ width: 30, allowResizing: false, allowFiltering: false, allowSorting: false, cellRender: cellRenderIcon });
+        if (hasShowId)
+            dtColumns.push({ dataField: "id", visible: showId, dataType: 'number' });
+        if (showDefaultColumns)
+            dtColumns.push({ dataField: SDK_Globals.useLocalizedName && manageUseLocalizedName ? "nameLoc" : "name", caption: SDKUI_Localizator.Name, dataType: 'string', defaultSortOrder: allowSorting ? "asc" : undefined, cellRender: cellRenderNameAndDesc });
+        if (showDefaultColumns)
+            dtColumns.push({ dataField: "description", caption: SDKUI_Localizator.Description, dataType: 'string', cellRender: cellRenderNameAndDesc });
+        return dtColumns.concat(columns);
+    }, [columns, showId, cellRenderIcon, cellRenderNameAndDesc]);
+    const customSummary = useMemo(() => {
+        return ({
+            totalItems: [{ column: SDK_Globals.useLocalizedName && manageUseLocalizedName ? "nameLoc" : "name", summaryType: 'count' }],
+            ...summaryItems ?? {}
+        });
+    }, [manageUseLocalizedName, summaryItems]);
+    return (_jsx(TMModal, { title: renderTitle(), width: width ?? '550px', height: height ?? '600px', toolbar: _jsx(ToolbarButtons, {}), onClose: onClose, children: children ??
+            filteredItems.length > 0
+            ? _jsx(TMDataGrid, { dataSource: filteredItems, keyExpr: keyName, dataColumns: dataColumns, focusedRowKey: focusedRowKey, selectedRowKeys: selectedRowKeys, searchPanelFocusStarting: true, headerFilter: { visible: true }, selection: { mode: allowMultipleSelection ? 'multiple' : 'single', showCheckBoxesMode: 'always', selectAllMode: 'allPages' }, grouping: allowGrouping ? { autoExpandAll: false, expandMode: 'rowClick' } : undefined, summary: customSummary, showFilterPanel: showFilterPanel, onFocusedRowChanged: handleFocusedRowChange, onSelectionChanged: handleSelectionChanged, onRowDblClick: handleRowDoubleClick })
+            : _jsx(TMLayoutContainer, { gap: 30, alignItems: 'center', justifyContent: 'center', children: _jsx(TMLayoutItem, { children: _jsx("p", { style: { height: "100%", color: TMColors.primaryColor, fontSize: "1.5rem", display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: SDKUI_Localizator.NoDataToDisplay }) }) }) }));
+};
+export default TMChooserForm;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ResultTypes } from '@topconsultnpm/sdk-ts';
+export type ResultInfo = {
+    rowIndex: number;
+    id1: number | undefined;
+    id2: number | undefined;
+    resultType: ResultTypes;
+    description?: any;
+};
+interface ITMResultDialogProps {
+    result: ResultInfo[];
+    id1Caption: string | undefined;
+    id2Caption: string | undefined;
+    title: string;
+}
+declare const TMResultDialog: React.FC<ITMResultDialogProps>;
+export default TMResultDialog;
+export declare class TMResultManager {
+    static show(result: ResultInfo[], title: string, id1Caption: string | undefined, id2Caption: string | undefined, customMsg?: string, customDuration?: number): void;
+}

package/lib/components/forms/TMResultDialog.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ResultTypes } from '@topconsultnpm/sdk-ts';
+import DataGrid, { Column, HeaderFilter, Pager, Paging, Scrolling } from 'devextreme-react/data-grid';
+import ReactDOM from 'react-dom/client';
+import { IconSuccessCirlce, IconWarning, IconCloseCircle, IconInfo, SDKUI_Globals, SDKUI_Localizator } from '../../helper';
+import { TMColors } from '../../utils/theme';
+import ShowAlert from '../base/TMAlert';
+import { TMDeviceProvider } from '../base/TMDeviceProvider';
+import TMLayoutContainer from '../base/TMLayout';
+import TMModal from '../base/TMModal';
+import { TMExceptionBoxManager } from '../base/TMPopUp';
+const cellRender = (cellData) => {
+    const resultType = cellData.data.resultType;
+    switch (resultType) {
+        case ResultTypes.SUCCESS: return _jsx(IconSuccessCirlce, { fontSize: 22, color: TMColors.success });
+        case ResultTypes.WARNING: return _jsx(IconWarning, { fontSize: 22, color: TMColors.warning });
+        case ResultTypes.ERROR: return _jsx(IconCloseCircle, { fontSize: 22, color: TMColors.error });
+        case ResultTypes.INFO: return _jsx(IconInfo, { fontSize: 22, color: TMColors.info });
+        default: return _jsx("div", { children: cellData.text });
+    }
+};
+const TMResultDialog = ({ title, result, id1Caption, id2Caption }) => {
+    const handleRowDblClick = (e) => {
+        if (e.data && e.data.description) {
+            TMExceptionBoxManager.show({ exception: e.data.description });
+        }
+    };
+    return (_jsx(TMModal, { height: '65%', width: '75%', title: `${SDKUI_Localizator.OperationResult} - ${title}`, children: _jsxs(TMLayoutContainer, { children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: '5px', padding: '5px', justifyContent: 'center', alignItems: 'center' }, children: [_jsx("p", { children: `${SDKUI_Localizator.ProcessedItems}: ${result.length}` }), _jsx(IconSuccessCirlce, { fontSize: 22, color: TMColors.success }), _jsx("p", { children: result.filter(o => o.resultType == ResultTypes.SUCCESS).length ?? 0 }), _jsx(IconWarning, { fontSize: 22, color: TMColors.warning }), _jsx("p", { children: result.filter(o => o.resultType == ResultTypes.WARNING).length ?? 0 }), _jsx(IconCloseCircle, { fontSize: 22, color: TMColors.error }), _jsx("p", { children: result.filter(o => o.resultType == ResultTypes.ERROR).length ?? 0 })] }), _jsxs(DataGrid, { dataSource: result.filter(o => o.resultType != ResultTypes.SUCCESS), showColumnLines: Number(SDKUI_Globals.userSettings?.themeSettings.gridSettings.showRowLines) === 1, showRowLines: Number(SDKUI_Globals.userSettings?.themeSettings.gridSettings.showColumnLines) === 1, keyExpr: "rowIndex", width: "100%", height: "100%", columnResizingMode: "widget", allowColumnResizing: true, focusedRowEnabled: true, hoverStateEnabled: true, rowAlternationEnabled: true, onRowDblClick: handleRowDblClick, children: [_jsx(Column, { dataField: 'resultType', caption: '', width: "5%", allowResizing: true, allowSorting: true, cellRender: cellRender }), _jsx(Column, { dataField: 'id1', caption: id1Caption, width: "10%" }), id2Caption && _jsx(Column, { dataField: 'id2', caption: id2Caption, width: "10%" }), _jsx(Column, { dataField: 'description', allowResizing: true, caption: SDKUI_Localizator.Description, allowSorting: true, width: id2Caption ? "75%" : "85%" }), _jsx(HeaderFilter, { visible: true }), _jsx(Paging, { enabled: true, pageSize: 30 }), _jsx(Pager, { visible: true, showInfo: true, showNavigationButtons: true }), _jsx(Scrolling, { mode: 'standard', useNative: Number(SDKUI_Globals.userSettings?.themeSettings.gridSettings.useNativeScrollbar) === 1 })] })] }) }));
+};
+export default TMResultDialog;
+export class TMResultManager {
+    static show(result, title, id1Caption, id2Caption, customMsg, customDuration) {
+        const warningsCount = result.filter(o => o.resultType == ResultTypes.WARNING).length;
+        const errorsCount = result.filter(o => o.resultType == ResultTypes.ERROR).length;
+        if (warningsCount <= 0 && errorsCount <= 0) {
+            ShowAlert({ message: customMsg && customMsg.length > 0 ? customMsg : SDKUI_Localizator.OperationSuccess, mode: 'success', duration: customDuration && customDuration > 0 ? customDuration : 3000, title: title });
+            return;
+        }
+        let container = document.createElement('div');
+        document.body.appendChild(container);
+        const root = ReactDOM.createRoot(container);
+        root.render(_jsx(TMDeviceProvider, { children: _jsx(TMResultDialog, { title: title, result: result, id1Caption: id1Caption, id2Caption: id2Caption }) }));
+    }
+}

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

@@ -0,0 +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;
+interface ITMSaveFormButtonBase extends ITMButton {
+    iconColor?: string;
+    formMode: FormModes;
+    isModified: boolean;
+}
+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;
+    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;
+}
+export declare const TMSaveFormButtonUndo: ({ btnStyle, isModified, iconColor, width, advancedColor, advancedType, onUndo, color, showTooltip }: ITMSaveFormButtonUndoProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/forms/TMSaveForm.js

@@ -0,0 +1,176 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { ResultTypes } from '@topconsultnpm/sdk-ts';
+import { FormModes } from '../../ts/types';
+import { IconArrowDown, IconArrowLeft, IconArrowUp, IconCloseCircle, IconHide, IconSave, IconShow, IconUndo, IconWarning, LocalizeFormModes, SDKUI_Localizator, getColor } from '../../helper';
+import { ButtonNames, TMExceptionBoxManager, TMMessageBoxManager } from '../base/TMPopUp';
+import TMLayoutContainer, { TMCard, TMLayoutItem, TMSplitterLayout } from '../base/TMLayout';
+import { StyledResultTypeContainer, StyledToolbarForm } from '../base/Styled';
+import TMButton from '../base/TMButton';
+import { TMColors } from '../../utils/theme';
+import TMValidationItemsList from '../grids/TMValidationItemsList';
+import TMModal from '../base/TMModal';
+import { DeviceType, useDeviceType } from '../base/TMDeviceProvider';
+const TMSaveForm = ({ id, formMode = FormModes.Update, showToolbar = true, skipIsModifiedCheck = false, title, children, isModal, exception, customToolbarElements, hasNavigation, showSaveButton = true, customSaveButton, customTooltipSaveButton, showBackButton, showWarningsCount = true, showErrorCount = true, showUndoButton = true, onClose, onSaveAsync, onNext, onPrev, canNext, canPrev, isModified, onShowList, validationItems = [], onUndo, onCancel, width, height, askClosingConfirm = false, showTitleFormMode = true }) => {
+    const [showList, setShowList] = useState(true);
+    const [showErrorGrid, setShowErrorGrid] = useState(false);
+    const deviceType = useDeviceType();
+    const doSaveAsync = async () => { try {
+        await onSaveAsync?.();
+    }
+    catch (ex) {
+        TMExceptionBoxManager.show({ exception: ex });
+    } };
+    const doNext = () => {
+        if (!isModified) {
+            onNext?.();
+            return;
+        }
+        TMMessageBoxManager.show({
+            parentId: isModal ? "TMSaveFormShowConfirmForClose-" + id : undefined,
+            message: SDKUI_Localizator.SaveQuestion, buttons: [ButtonNames.YES, ButtonNames.NO, ButtonNames.CANCEL],
+            onButtonClick: async (e) => {
+                try {
+                    if (e == ButtonNames.CANCEL)
+                        return;
+                    if (e == ButtonNames.YES)
+                        await onSaveAsync?.();
+                    onNext?.();
+                }
+                catch (ex) {
+                    TMExceptionBoxManager.show({ exception: ex });
+                }
+            }
+        });
+    };
+    const doPrev = () => {
+        if (!isModified) {
+            onPrev?.();
+            return;
+        }
+        TMMessageBoxManager.show({
+            parentId: isModal ? "TMSaveFormShowConfirmForClose-" + id : undefined,
+            message: SDKUI_Localizator.SaveQuestion, buttons: [ButtonNames.YES, ButtonNames.NO, ButtonNames.CANCEL],
+            onButtonClick: async (e) => {
+                try {
+                    if (e == ButtonNames.CANCEL)
+                        return;
+                    if (e == ButtonNames.YES)
+                        await onSaveAsync?.();
+                    onPrev?.();
+                }
+                catch (ex) {
+                    TMExceptionBoxManager.show({ exception: ex });
+                }
+            }
+        });
+    };
+    const doClose = () => {
+        if (!isModified || skipIsModifiedCheck) {
+            onClose?.();
+            deviceType === DeviceType.MOBILE && setShowList(true), onShowList?.(true);
+            return;
+        }
+        TMMessageBoxManager.show({
+            parentId: isModal ? "TMSaveFormShowConfirmForClose-" + id : undefined,
+            message: SDKUI_Localizator.SaveQuestion, buttons: [ButtonNames.YES, ButtonNames.NO, ButtonNames.CANCEL],
+            onButtonClick: async (e) => {
+                try {
+                    if (e == ButtonNames.CANCEL)
+                        return;
+                    if (e == ButtonNames.NO)
+                        deviceType === DeviceType.MOBILE && (onUndo(), setShowList(true), onShowList?.(true));
+                    if (e == ButtonNames.YES)
+                        deviceType === DeviceType.MOBILE ? (await onSaveAsync?.(), setShowList(true), onShowList?.(true)) : await onSaveAsync?.();
+                    onClose?.();
+                }
+                catch (ex) {
+                    TMExceptionBoxManager.show({ exception: ex });
+                }
+            }
+        });
+    };
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape')
+                doClose();
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [doClose]);
+    const warningsCount = validationItems.filter(o => o.ResultType == ResultTypes.WARNING).length;
+    const errorsCount = validationItems.filter(o => o.ResultType == ResultTypes.ERROR).length;
+    const renderSaveForm = () => {
+        return (_jsxs(TMLayoutContainer, { direction: 'vertical', children: [showToolbar && _jsx(TMLayoutItem, { height: 'max-content', children: _jsxs(StyledToolbarForm, { children: [showBackButton && _jsx(TMButton, { btnStyle: 'toolbar', color: 'tertiary', caption: SDKUI_Localizator.Back, icon: _jsx(IconArrowLeft, {}), elementStyle: { marginRight: '10px' }, onClick: () => { doClose(); } }), showSaveButton && _jsx(TMButton, { caption: customTooltipSaveButton ?? SDKUI_Localizator.Save, icon: customSaveButton ?? _jsx(IconSave, {}), keyGesture: "alt+s", backgroundColor: errorsCount > 0 ? TMColors.error : isModified ? TMColors.success : TMColors.disabled, onClick: doSaveAsync, color: "success", btnStyle: "toolbar", disabled: !(isModified && errorsCount <= 0) }), hasNavigation && _jsx(TMButton, { caption: SDKUI_Localizator.Previous, icon: _jsx(IconArrowUp, {}), btnStyle: "toolbar", disabled: !canPrev || isModified || formMode == FormModes.Create || formMode == FormModes.Duplicate, onClick: doPrev }), hasNavigation && _jsx(TMButton, { caption: SDKUI_Localizator.Next, icon: _jsx(IconArrowDown, {}), btnStyle: "toolbar", disabled: !canNext || isModified || formMode == FormModes.Create || formMode == FormModes.Duplicate, onClick: doNext }), showUndoButton && _jsx(TMButton, { caption: SDKUI_Localizator.Undo, icon: _jsx(IconUndo, {}), keyGesture: "alt+z", color: "tertiary", btnStyle: "toolbar", disabled: isModified ? false : true, onClick: onUndo }), customToolbarElements, Boolean(showWarningsCount && warningsCount > 0) &&
+                                _jsx(TMLayoutItem, { width: 'fit-content', height: '90%', children: _jsxs(StyledResultTypeContainer, { style: { marginLeft: '10px' }, onClick: () => setShowErrorGrid(!showErrorGrid), "$resultType": ResultTypes.WARNING, children: [" ", _jsx(IconWarning, { fontSize: 16 }), " ", _jsx("span", { children: warningsCount })] }) }), Boolean(showErrorCount && errorsCount > 0) &&
+                                _jsx(TMLayoutItem, { width: 'fit-content', height: '90%', children: _jsxs(StyledResultTypeContainer, { style: { marginLeft: warningsCount <= 0 ? '10px' : '0' }, onClick: () => setShowErrorGrid(!showErrorGrid), "$resultType": ResultTypes.ERROR, children: [" ", _jsx(IconCloseCircle, { fontSize: 16 }), " ", _jsx("span", { children: errorsCount })] }) }), onShowList &&
+                                _jsx("div", { style: { right: '10px', position: 'absolute' }, children: deviceType !== DeviceType.MOBILE && _jsx(TMButton, { caption: showList ? SDKUI_Localizator.List_Hide : SDKUI_Localizator.List_Show, icon: showList ? _jsx(IconHide, {}) : _jsx(IconShow, {}), keyGesture: "alt+h", onClick: () => { setShowList(!showList); onShowList?.(!showList); }, btnStyle: 'toolbar' }) }), (formMode == FormModes.Create || formMode == FormModes.Duplicate) &&
+                                _jsx("div", { style: { right: '50px', position: 'absolute' }, children: deviceType !== DeviceType.MOBILE && onCancel && _jsx(TMButton, { icon: _jsx(IconCloseCircle, {}), onClick: onCancel, btnStyle: 'toolbar', caption: SDKUI_Localizator.Cancel, color: 'tertiary' }) })] }) }), _jsx(TMLayoutItem, { height: showToolbar ? 'calc(100% - 39px)' : '100%', children: _jsxs(TMSplitterLayout, { separatorSize: 4, direction: 'vertical', start: showErrorGrid && validationItems.length > 0 ? ['80%', '20%'] : ['100%', '0'], min: ['0', '0'], children: [_jsx(TMCard, { showBorder: false, children: exception
+                                    ?
+                                        _jsx("div", { style: { width: '100%', height: '100%', marginTop: '50px', display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', color: getColor('error') }, children: 'Si è verificato un errore' })
+                                    : _jsx(_Fragment, { children: children }) }), showErrorGrid && validationItems.length > 0 ? _jsx(TMCard, { scrollY: true, padding: false, showBorder: false, children: _jsx(TMValidationItemsList, { validationItems: validationItems }) }) : _jsx(_Fragment, {})] }) }), (isModal && onClose) && _jsx("div", { id: "TMSaveFormShowConfirmForClose-" + id })] }));
+    };
+    return (_jsx(_Fragment, { children: (isModal && onClose) ? _jsx(_Fragment, { children: _jsx(TMModal, { title: `${title}${showTitleFormMode ? ` - ${LocalizeFormModes(formMode)}` : ''}`, onClose: doClose, width: width ?? '100%', height: height ?? '100%', hidePopup: false, askClosingConfirm: askClosingConfirm, children: _jsx("div", { style: { width: "100%", height: "100%", display: 'block' }, children: renderSaveForm() }) }) })
+            : renderSaveForm() }));
+};
+export default TMSaveForm;
+export const TMSaveFormButtonPrevious = ({ btnStyle, formMode, isModified, onPrev, canPrev, iconColor, onSaveAsync }) => {
+    const doPrev = () => {
+        if (!isModified) {
+            onPrev?.();
+            return;
+        }
+        TMMessageBoxManager.show({
+            message: SDKUI_Localizator.SaveQuestion, buttons: [ButtonNames.YES, ButtonNames.NO, ButtonNames.CANCEL],
+            onButtonClick: async (e) => {
+                try {
+                    if (e == ButtonNames.CANCEL)
+                        return;
+                    if (e == ButtonNames.YES)
+                        await onSaveAsync?.();
+                    onPrev?.();
+                }
+                catch (ex) {
+                    TMExceptionBoxManager.show({ exception: ex });
+                }
+            }
+        });
+    };
+    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) {
+            onNext?.();
+            return;
+        }
+        TMMessageBoxManager.show({
+            message: SDKUI_Localizator.SaveQuestion, buttons: [ButtonNames.YES, ButtonNames.NO, ButtonNames.CANCEL],
+            onButtonClick: async (e) => {
+                try {
+                    if (e == ButtonNames.CANCEL)
+                        return;
+                    if (e == ButtonNames.YES)
+                        await onSaveAsync?.();
+                    onNext?.();
+                }
+                catch (ex) {
+                    TMExceptionBoxManager.show({ exception: ex });
+                }
+            }
+        });
+    };
+    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, { showTooltip: false, 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, color = 'tertiary', showTooltip = false }) => {
+    return (_jsx(TMButton, { showTooltip: showTooltip, btnStyle: btnStyle, width: width, advancedColor: advancedColor, advancedType: advancedType, caption: SDKUI_Localizator.Undo, icon: _jsx(IconUndo, { color: iconColor }), keyGesture: "alt+z", color: color, disabled: !isModified, onClick: onUndo }));
+};