@topconsultnpm/sdkui-react 6.22.0-dev3.9 → 6.22.0-dev4.3

package/lib/components/base/waitPanel/TMWaitPanelView.d.ts

@@ -0,0 +1,53 @@
+import React from 'react';
+/** Guscio statico del wait panel: montato una sola volta e mai ri-renderizzato, il manager lo aggiorna via DOM. Le props sono valori iniziali. */
+/** Nodi DOM mutabili di cui il manager ha bisogno per aggiornare il pannello senza React. */
+export interface ITMWaitPanelNodes {
+    /** Layer di conferma dell'interruzione: il manager lo accende via style.display. */
+    confirm: HTMLElement;
+    title: HTMLElement;
+    subtitle: HTMLElement;
+    percent: HTMLElement;
+    fill: HTMLElement;
+    elapsed: HTMLElement;
+    remaining: HTMLElement;
+    okValue: HTMLElement;
+    warningValue: HTMLElement;
+    errorValue: HTMLElement;
+    abortButton: HTMLButtonElement | null;
+    /** Presenti solo con `showSecondary`: riga di avanzamento dell'operazione di dettaglio. */
+    secondaryText: HTMLElement | null;
+    secondaryPercent: HTMLElement | null;
+    secondaryFill: HTMLElement | null;
+}
+export interface ITMWaitPanelViewProps {
+    /** Valore iniziale del titolo. */
+    title?: string;
+    /** Valore iniziale del sottotitolo. */
+    subtitle?: string;
+    /** Mostra il bottone di interruzione. */
+    cancelable?: boolean;
+    /** Mostra la riga "trascorsi / rimanenti". */
+    showEta?: boolean;
+    /** Mostra le tre pill numeriche ok / warning / error, sempre visibili anche a 0. */
+    showCounters?: boolean;
+    /** Riserva la seconda barra, quella dell'operazione di dettaglio (es. i byte del file in corso). */
+    showSecondary?: boolean;
+    /** Valore iniziale del testo della barra secondaria. */
+    secondaryText?: string;
+    /** Didascalia fissa sopra la barra principale, es. "Documenti". Vuota: non viene resa. */
+    primaryLabel?: string;
+    /** Didascalia fissa sopra la barra secondaria, es. "File corrente". Vuota: non viene resa. */
+    secondaryLabel?: string;
+    /** z-index dell'overlay: il manager lo incrementa per i pannelli annidati. */
+    zIndex?: number;
+    /** L'utente ha premuto Interrompi: il manager chiede conferma. */
+    onAbort?: () => void;
+    /** Conferma data: interrompere davvero. */
+    onConfirmYes?: () => void;
+    /** Conferma negata: riprendere. */
+    onConfirmNo?: () => void;
+    /** Invocato dopo il commit con i nodi DOM da aggiornare imperativamente. */
+    onMount?: (nodes: ITMWaitPanelNodes) => void;
+}
+declare const TMWaitPanelView: ({ title, subtitle, cancelable, showEta, showCounters, showSecondary, secondaryText, primaryLabel, secondaryLabel, zIndex, onAbort, onConfirmYes, onConfirmNo, onMount }: ITMWaitPanelViewProps) => React.JSX.Element;
+export default TMWaitPanelView;

package/lib/components/base/waitPanel/TMWaitPanelView.js

@@ -0,0 +1,274 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from 'react';
+import styled, { keyframes } from 'styled-components';
+import toppy from '../../../assets/Toppy-generico.png';
+import { AppModules, SDK_Globals } from '@topconsultnpm/sdk-ts';
+import { getAppModuleButtonColors, SDKUI_Localizator } from '../../../helper';
+import TMWaitPanelConfirm from './TMWaitPanelConfirm';
+/** Colore della barra per applicazione, da getAppModuleButtonColors. SDK_Globals.tmSession lancia senza sessione. */
+const getProgressColor = () => {
+    let appModuleID = AppModules.SURFER;
+    try {
+        appModuleID = SDK_Globals.tmSession?.SessionDescr?.appModuleID ?? AppModules.SURFER;
+    }
+    catch { /* nessuna sessione: resta il default */ }
+    return getAppModuleButtonColors(appModuleID).base;
+};
+const fadeIn = keyframes `
+    from { opacity: 0; }
+    to   { opacity: 1; }
+`;
+// Sfondo su uno pseudo-elemento: il layer composito dell'animazione sgranerebbe Toppy.
+const StyledOverlay = styled.div `
+    position: fixed;
+    inset: 0;
+    z-index: ${props => props.$zIndex};
+
+    &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background-color: rgba(17, 24, 39, 0.16);
+        animation: ${fadeIn} 140ms ease-out;
+    }
+`;
+const StyledCard = styled.div `
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 420px;
+    max-width: calc(100% - 24px);
+    max-height: calc(100% - 24px);
+    overflow-y: auto;
+    box-sizing: border-box;
+    padding: 22px 24px 18px 24px;
+    background: #ffffff;
+    border-radius: 16px;
+    box-shadow: 0 18px 48px rgba(16, 24, 40, 0.22);
+    font-family: inherit;
+`;
+const StyledHeader = styled.div `
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 16px;
+`;
+// Ritaglio dal contenitore, non object-fit: cover darebbe un'altezza frazionaria e sgranerebbe l'immagine.
+const StyledToppyClip = styled.div `
+    height: 61px;
+    width: 68px;
+    overflow: hidden;
+    flex: 0 0 auto;
+`;
+const StyledToppy = styled.img `
+    display: block;
+    width: 68px;
+    height: 79px;
+    user-select: none;
+    -webkit-user-drag: none;
+`;
+const StyledHeaderText = styled.div `
+    flex: 1;
+    min-width: 0;
+`;
+const StyledTitle = styled.div `
+    font-size: 17px;
+    font-weight: 600;
+    color: #1f2937;
+    line-height: 1.3;
+    overflow-wrap: anywhere;
+`;
+const StyledSubtitle = styled.div `
+    margin-top: 3px;
+    font-size: 13px;
+    color: #6b7280;
+    line-height: 1.3;
+    font-variant-numeric: tabular-nums;
+    overflow-wrap: anywhere;
+`;
+// Didascalia di una barra: con due avanzamenti e' l'unica cosa che dice quale sia quale.
+const StyledBarLabel = styled.div `
+    margin-top: 18px;
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: #9aa3b2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+`;
+const StyledPercentRow = styled.div `
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 8px 12px;
+    margin-top: ${props => (props.$hasLabel ? '4px' : '18px')};
+`;
+const StyledPercent = styled.div `
+    font-size: 34px;
+    font-weight: 700;
+    color: #111827;
+    line-height: 1;
+    font-variant-numeric: tabular-nums;
+`;
+const StyledCounters = styled.div `
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 6px;
+    padding-bottom: 3px;
+`;
+const StyledPill = styled.span `
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 4px;
+    padding: 2px 8px 2px 6px;
+    border-radius: 999px;
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 18px;
+    color: ${props => props.$color};
+    background: ${props => props.$background};
+    font-variant-numeric: tabular-nums;
+
+    svg { flex: 0 0 auto; }
+`;
+const StyledTrack = styled.div `
+    margin-top: 12px;
+    width: 100%;
+    height: 8px;
+    border-radius: 999px;
+    background: #e8edf4;
+    overflow: hidden;
+`;
+const StyledFill = styled.div `
+    width: 100%;
+    height: 100%;
+    background: ${props => props.$color};
+    transform: scaleX(0);
+    transform-origin: left center;
+    transition: transform 120ms linear;
+    will-change: transform;
+`;
+const StyledTimeRow = styled.div `
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin-top: 8px;
+    font-size: 12px;
+    color: #8a94a6;
+    font-variant-numeric: tabular-nums;
+`;
+// Seconda barra: come la principale ma piu' piccola e in tono minore.
+const StyledSecondary = styled.div `
+    margin-top: ${props => (props.$hasLabel ? '4px' : '14px')};
+`;
+const StyledSecondaryRow = styled.div `
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 12px;
+    font-size: 12px;
+    color: #6b7280;
+    font-variant-numeric: tabular-nums;
+`;
+const StyledSecondaryText = styled.span `
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+`;
+const StyledSecondaryTrack = styled.div `
+    margin-top: 5px;
+    width: 100%;
+    height: 5px;
+    border-radius: 999px;
+    background: #eef1f6;
+    overflow: hidden;
+`;
+const StyledSecondaryFill = styled.div `
+    width: 100%;
+    height: 100%;
+    background: ${props => props.$color};
+    opacity: 0.55;
+    transform: scaleX(0);
+    transform-origin: left center;
+    transition: transform 120ms linear;
+    will-change: transform;
+`;
+const StyledFooter = styled.div `
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    margin-top: 18px;
+`;
+const StyledAbortButton = styled.button `
+    padding: 9px 18px;
+    border: 1px solid #d5dbe5;
+    border-radius: 10px;
+    background: #ffffff;
+    color: #374151;
+    font-size: 13px;
+    font-family: inherit;
+    cursor: pointer;
+    transition: background-color 120ms ease, border-color 120ms ease;
+
+    &:hover:not(:disabled) { background: #f3f5f9; border-color: #c3cbd8; }
+    &:active:not(:disabled) { background: #e9edf4; }
+    &:disabled { cursor: default; opacity: 0.55; }
+`;
+const IconOk = () => (_jsx("svg", { width: '13', height: '13', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '3', strokeLinecap: 'round', strokeLinejoin: 'round', children: _jsx("polyline", { points: '20 6 9 17 4 12' }) }));
+const IconWarning = () => (_jsxs("svg", { width: '13', height: '13', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2.4', strokeLinecap: 'round', strokeLinejoin: 'round', children: [_jsx("path", { d: 'M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z' }), _jsx("line", { x1: '12', y1: '9', x2: '12', y2: '13' }), _jsx("line", { x1: '12', y1: '17', x2: '12.01', y2: '17' })] }));
+const IconError = () => (_jsxs("svg", { width: '13', height: '13', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '3', strokeLinecap: 'round', strokeLinejoin: 'round', children: [_jsx("line", { x1: '18', y1: '6', x2: '6', y2: '18' }), _jsx("line", { x1: '6', y1: '6', x2: '18', y2: '18' })] }));
+const TMWaitPanelView = ({ title = '', subtitle = '', cancelable = false, showEta = true, showCounters = true, showSecondary = false, secondaryText = '', primaryLabel = '', secondaryLabel = '', zIndex = 2147483601, onAbort, onConfirmYes, onConfirmNo, onMount }) => {
+    const confirmRef = useRef(null);
+    const titleRef = useRef(null);
+    const subtitleRef = useRef(null);
+    const percentRef = useRef(null);
+    const fillRef = useRef(null);
+    const elapsedRef = useRef(null);
+    const remainingRef = useRef(null);
+    const okValueRef = useRef(null);
+    const warningValueRef = useRef(null);
+    const errorValueRef = useRef(null);
+    const abortRef = useRef(null);
+    const secondaryTextRef = useRef(null);
+    const secondaryPercentRef = useRef(null);
+    const secondaryFillRef = useRef(null);
+    useLayoutEffect(() => {
+        if (!confirmRef.current || !titleRef.current || !subtitleRef.current || !percentRef.current || !fillRef.current)
+            return;
+        if (!elapsedRef.current || !remainingRef.current)
+            return;
+        if (!okValueRef.current || !warningValueRef.current || !errorValueRef.current)
+            return;
+        onMount?.({
+            confirm: confirmRef.current,
+            title: titleRef.current,
+            subtitle: subtitleRef.current,
+            percent: percentRef.current,
+            fill: fillRef.current,
+            elapsed: elapsedRef.current,
+            remaining: remainingRef.current,
+            okValue: okValueRef.current,
+            warningValue: warningValueRef.current,
+            errorValue: errorValueRef.current,
+            abortButton: abortRef.current,
+            secondaryText: secondaryTextRef.current,
+            secondaryPercent: secondaryPercentRef.current,
+            secondaryFill: secondaryFillRef.current,
+        });
+        // Montaggio una tantum: da qui in avanti il manager aggiorna il pannello via DOM, non via render.
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx(StyledOverlay, { $zIndex: zIndex, children: _jsxs(StyledCard, { role: 'dialog', "aria-live": 'polite', children: [_jsxs(StyledHeader, { children: [_jsx(StyledToppyClip, { children: _jsx(StyledToppy, { src: toppy, alt: '', draggable: false }) }), _jsxs(StyledHeaderText, { children: [_jsx(StyledTitle, { ref: titleRef, children: title }), _jsx(StyledSubtitle, { ref: subtitleRef, children: subtitle })] })] }), primaryLabel && _jsx(StyledBarLabel, { children: primaryLabel }), _jsxs(StyledPercentRow, { $hasLabel: !!primaryLabel, children: [_jsx(StyledPercent, { ref: percentRef, children: "0.00%" }), _jsxs(StyledCounters, { style: { display: showCounters ? 'flex' : 'none' }, children: [_jsxs(StyledPill, { $color: '#3E7B1C', $background: '#E8F5E0', children: [_jsx(IconOk, {}), _jsx("span", { ref: okValueRef, children: "0" })] }), _jsxs(StyledPill, { $color: '#8A6D00', $background: '#FBF3CF', children: [_jsx(IconWarning, {}), _jsx("span", { ref: warningValueRef, children: "0" })] }), _jsxs(StyledPill, { $color: '#B00F2B', $background: '#FBE1E6', children: [_jsx(IconError, {}), _jsx("span", { ref: errorValueRef, children: "0" })] })] })] }), _jsx(StyledTrack, { children: _jsx(StyledFill, { ref: fillRef, $color: getProgressColor() }) }), _jsxs(StyledTimeRow, { style: { visibility: showEta ? 'visible' : 'hidden' }, children: [_jsx("span", { ref: elapsedRef }), _jsx("span", { ref: remainingRef })] }), showSecondary && secondaryLabel && _jsx(StyledBarLabel, { children: secondaryLabel }), showSecondary &&
+                            _jsxs(StyledSecondary, { $hasLabel: !!secondaryLabel, children: [_jsxs(StyledSecondaryRow, { children: [_jsx(StyledSecondaryText, { ref: secondaryTextRef, children: secondaryText }), _jsx("span", { ref: secondaryPercentRef, children: "0.00%" })] }), _jsx(StyledSecondaryTrack, { children: _jsx(StyledSecondaryFill, { ref: secondaryFillRef, $color: getProgressColor() }) })] }), cancelable &&
+                            _jsx(StyledFooter, { children: _jsx(StyledAbortButton, { ref: abortRef, type: 'button', onClick: onAbort, children: SDKUI_Localizator.Abort }) })] }) }), _jsx(TMWaitPanelConfirm, { ref: confirmRef, zIndex: zIndex + 1, onYes: onConfirmYes, onNo: onConfirmNo })] }));
+};
+export default TMWaitPanelView;

package/lib/components/base/waitPanel/index.d.ts

@@ -0,0 +1 @@
+export * from './TMWaitPanelManager';

package/lib/components/base/waitPanel/index.js

@@ -0,0 +1 @@
+export * from './TMWaitPanelManager';

package/lib/components/choosers/TMPathChooser.js

@@ -6,12 +6,11 @@ import { TMColors } from '../../utils/theme';
 import ShowAlert from '../base/TMAlert';
 import TMAreaManager from '../base/TMAreaManager';
 import TMButton from '../base/TMButton';
-import { TMLayoutItem } from '../base/TMLayout';
+import TMLayoutContainer, { TMLayoutItem } from '../base/TMLayout';
 import TMModal from '../base/TMModal';
 import { TMExceptionBoxManager } from '../base/TMPopUp';
-import { TMLayoutWaitingContainer } from '../base/TMWaitPanel';
+import TMWaitPanelManager from '../base/waitPanel/TMWaitPanelManager';
 import TMTextBox from '../editors/TMTextBox';
-let abortController = new AbortController();
 const TMPathChooser = (props) => {
     //const [path, setPath] = useState<string>(props.value)
     const [elementStyle, setElementStyle] = useState(props.elementStyle);
@@ -22,12 +21,6 @@ const TMPathChooser = (props) => {
     const [showAreaManager, setShowAreaManager] = useState(false);
     const [downloadLink, setDownloadLink] = useState(null);
     const [file, setFile] = useState(null);
-    const [showWaitPanel, setShowWaitPanel] = useState(false);
-    const [waitPanelTitle, setWaitPanelTitle] = useState('');
-    const [showSecondary, setShowSecondary] = useState(false);
-    const [waitPanelTextSecondary, setWaitPanelTextSecondary] = useState('');
-    const [waitPanelValueSecondary, setWaitPanelValueSecondary] = useState(0);
-    const [waitPanelMaxValueSecondary, setWaitPanelMaxValueSecondary] = useState(0);
     const formulaItems = ['{@JobName}', '{@JobStartDate}', '{@JobStartDate_DDMMYYYY}', '{@JobStartDateTime}', '{@ProcessRunID}', '{@ProcessName}', '{@ProcessStartDate}', '{@ProcessStartDateTime}'];
     //useEffect(() => { setPath(props.value) }, [props.value])
     useEffect(() => {
@@ -98,30 +91,23 @@ const TMPathChooser = (props) => {
         return buttons;
     };
     const onFileDownloadHandler = async () => {
+        // Un solo file: la barra del pannello segue i byte scaricati
+        const waitPanel = TMWaitPanelManager.show({
+            title: "Download",
+            cancelable: true,
+            showCounters: false,
+        });
         try {
             let av = AreaHelper.ExtractAreaInfo_2(props.value, true);
             let doc;
             let tms = props.tmSession ?? SDK_Globals.tmSession;
-            setShowWaitPanel(true);
-            setShowSecondary(true);
-            setWaitPanelTitle("Download");
-            abortController = new AbortController();
-            let firstBlock = true;
-            let maxFileSize = 0;
-            doc = await tms?.NewAreaEngine().RetrieveFileAsync(av.aid, av.subFolder, av.fileName, FileFormats.None, abortController.signal, (pd) => {
-                if (firstBlock) {
-                    maxFileSize = pd.ProgressBarMaximum ?? 0;
-                    setWaitPanelMaxValueSecondary(maxFileSize);
-                    firstBlock = false;
-                }
-                setWaitPanelValueSecondary(pd.ProgressBarValue);
-                setWaitPanelTextSecondary(`Downloading... ${Globalization.getNumberDisplayValue(pd.ProgressBarValue, true)} / ${Globalization.getNumberDisplayValue(maxFileSize, true)}`);
-                if (pd.ProgressBarValue === pd.ProgressBarMaximum) {
-                    setWaitPanelMaxValueSecondary(0);
-                    setWaitPanelValueSecondary(0);
-                    setWaitPanelTextSecondary('');
-                    firstBlock = true;
-                }
+            doc = await tms?.NewAreaEngine().RetrieveFileAsync(av.aid, av.subFolder, av.fileName, FileFormats.None, waitPanel.signal, (pd) => {
+                const total = pd.ProgressBarMaximum ?? 0;
+                waitPanel.update({
+                    value: pd.ProgressBarValue,
+                    max: total,
+                    subtitle: `Downloading... ${Globalization.getNumberDisplayValue(pd.ProgressBarValue, true)} / ${Globalization.getNumberDisplayValue(total, true)}`
+                });
             });
             setFile(doc);
         }
@@ -135,13 +121,10 @@ const TMPathChooser = (props) => {
             setFile(null);
         }
         finally {
-            setWaitPanelTextSecondary('');
-            setWaitPanelMaxValueSecondary(0);
-            setWaitPanelValueSecondary(0);
-            setShowWaitPanel(false);
+            waitPanel.close();
         }
     };
-    return (_jsxs(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelSecondary: showSecondary, waitPanelTitle: waitPanelTitle, waitPanelTextSecondary: waitPanelTextSecondary, waitPanelValueSecondary: waitPanelValueSecondary, waitPanelMaxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, children: [_jsx(TMLayoutItem, { children: _jsx(TMTextBox, { buttons: renderButtons(), elementStyle: elementStyle, formulaItems: props.allowParametricPath ? formulaItems : [], isModifiedWhen: props.isModifiedWhen, label: props.label, value: props.value || '', onValueChanged: (e) => { /*setPath(e.target.value);*/ props.onValueChanged?.(e.target.value); }, validationItems: props.validationItems }) }), showAreaManager &&
+    return (_jsxs(TMLayoutContainer, { direction: 'vertical', children: [_jsx(TMLayoutItem, { children: _jsx(TMTextBox, { buttons: renderButtons(), elementStyle: elementStyle, formulaItems: props.allowParametricPath ? formulaItems : [], isModifiedWhen: props.isModifiedWhen, label: props.label, value: props.value || '', onValueChanged: (e) => { /*setPath(e.target.value);*/ props.onValueChanged?.(e.target.value); }, validationItems: props.validationItems }) }), showAreaManager &&
                 _jsxs(TMModal, { resizable: true, width: '80%', onClose: () => setShowAreaManager(false), children: [_jsx(TMAreaManager, { showOnlyFolders: props.allowBrowseFolder_Area && !props.allowBrowseFile_Area, initialPath: props.value, onFolderChanged: (folder) => setAreaFolderPath(folder), onFileChanged: (file) => setAreaFilePath(file), isPathChooser: true, areaChoose: areaChoose, width: '98%', height: props.allowBrowseFile_Area ? '70vh' : '90%', tmSession: props.tmSession, selectionMode: 'single' }), _jsx("div", { style: { position: 'absolute', right: '22px', bottom: '8px' }, children: _jsx(TMButton, { caption: 'OK', onClick: () => areaChoose() }) })] })] }));
 };
 export default TMPathChooser;

package/lib/components/editors/TMTextBox.d.ts

@@ -16,6 +16,10 @@ export interface ITMTextBox extends ITMEditorBase {
     allowedPattern?: RegExp;
     textTransform?: 'lowercase' | 'uppercase';
     currencySymbol?: string;
+    /** Solo per type='number'. 'alert' (default): popup e valore rifiutato. 'inline': il valore resta digitabile, errore in rosso sotto il campo e clamp al blur */
+    rangeValidationMode?: 'alert' | 'inline';
+    /** Descrizione mostrata nel tooltip dell'icona "i" accanto alla label (insieme al range in modalità inline) */
+    infoText?: string;
     onClick?: () => void;
     onValueChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     onBlur?: (value: string | undefined) => void;

package/lib/components/editors/TMTextBox.js

@@ -1,9 +1,10 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from 'react';
 import styled from 'styled-components';
+import { ResultTypes, ValidationItem } from '@topconsultnpm/sdk-ts';
 import { StyledEditor, StyledEditorContainer, StyledEditorIcon, StyledEditorLabel, editorColorManager } from './TMEditorStyled';
 import { FontSize, TMColors } from '../../utils/theme';
-import { genUniqueId, IconClearButton, IconDataList, IconHide, IconShow, SDKUI_Localizator } from '../../helper';
+import { genUniqueId, IconClearButton, IconDataList, IconHide, IconInfo, IconShow, SDKUI_Localizator } from '../../helper';
 import ShowAlert from '../base/TMAlert';
 import { TMExceptionBoxManager } from '../base/TMPopUp';
 import TMLayoutContainer, { TMLayoutItem } from '../base/TMLayout';
@@ -34,7 +35,7 @@ const StyledTextBoxEditorButton = styled.div `
         border-bottom-color: ${TMColors.primary};
      }
 `;
-const TMTextBox = ({ autoComplete = 'off', autoFocus, maxLength, labelColor, precision, fromModal = false, scale, showClearButton, validationItems = [], label = '', readOnly = false, formulaItems = [], buttons = [], isModifiedWhen, placeHolder, elementStyle, width = '100%', maxValue, minValue, fontSize = FontSize.defaultFontSize, icon, labelPosition = 'left', value, disabled = false, type = 'text', onClick, onValueChanged, onBlur, onKeyDown, borderRadius, allowedPattern, textTransform, currencySymbol }) => {
+const TMTextBox = ({ autoComplete = 'off', autoFocus, maxLength, labelColor, precision, fromModal = false, scale, showClearButton, validationItems = [], label = '', readOnly = false, formulaItems = [], buttons = [], isModifiedWhen, placeHolder, elementStyle, width = '100%', maxValue, minValue, fontSize = FontSize.defaultFontSize, icon, labelPosition = 'left', value, disabled = false, type = 'text', onClick, onValueChanged, onBlur, onKeyDown, borderRadius, allowedPattern, textTransform, currencySymbol, rangeValidationMode = 'alert', infoText }) => {
     const [initialType, setInitialType] = useState(type);
     const [currentType, setCurrentType] = useState(type);
     const [currentValue, setCurrentValue] = useState(value);
@@ -52,8 +53,28 @@ const TMTextBox = ({ autoComplete = 'off', autoFocus, maxLength, labelColor, pre
             setCurrentType('password');
         }
     }, [value]);
+    const isInlineRange = currentType === 'number' && rangeValidationMode === 'inline';
+    // Modalità inline: i valori validi vengono propagati con un debounce durante la digitazione
+    const inlineTimerRef = useRef();
+    const inlinePendingRef = useRef();
+    const valueRef = useRef(value);
+    valueRef.current = value;
+    const onValueChangedRef = useRef(onValueChanged);
+    onValueChangedRef.current = onValueChanged;
+    const commitInlineValue = (newValue) => {
+        clearTimeout(inlineTimerRef.current);
+        inlinePendingRef.current = undefined;
+        if (newValue != valueRef.current)
+            onValueChangedRef.current?.({ target: { value: newValue } });
+    };
+    // Alla chiusura (es. Esc) non si perde il valore in attesa
+    useEffect(() => () => {
+        clearTimeout(inlineTimerRef.current);
+        if (inlinePendingRef.current !== undefined)
+            commitInlineValue(inlinePendingRef.current);
+    }, []);
     useEffect(() => {
-        if (currentType === 'number') {
+        if (currentType === 'number' && !isInlineRange) {
             if (currentValue) {
                 const numericValue = parseFloat(currentValue);
                 // Check maxValue
@@ -78,7 +99,7 @@ const TMTextBox = ({ autoComplete = 'off', autoFocus, maxLength, labelColor, pre
                 }
             }
         }
-    }, [maxValue, minValue, currentValue, currentType]);
+    }, [maxValue, minValue, currentValue, currentType, isInlineRange]);
     // Handle autofocus behavior on mount
     useEffect(() => {
         if (!autoFocus || !inputRef.current)
@@ -149,6 +170,45 @@ const TMTextBox = ({ autoComplete = 'off', autoFocus, maxLength, labelColor, pre
             return Number("9".repeat((precision ?? 0) - (scale ?? 0)) + '.' + "9".repeat(scale ?? 0));
         return Number(curValue);
     };
+    const formatNumber = (n) => n.toLocaleString(navigator.language);
+    // Modalità inline: messaggio di range fuori limite (undefined se valido)
+    const getRangeError = (curValue) => {
+        if (curValue === undefined || curValue === null || curValue === '')
+            return undefined;
+        const number = Number(curValue);
+        if (isNaN(number))
+            return undefined;
+        if (maxValue !== undefined && number > maxValue)
+            return SDKUI_Localizator.Max_Value.replaceParams(formatNumber(maxValue));
+        if (minValue !== undefined && number < minValue)
+            return SDKUI_Localizator.Min_Value.replaceParams(formatNumber(minValue));
+        return undefined;
+    };
+    // Modalità inline: testo del tooltip accanto alla label
+    const getRangeInfo = () => {
+        if (minValue !== undefined && maxValue !== undefined)
+            return SDKUI_Localizator.AllowedValuesRange.replaceParams(formatNumber(minValue), formatNumber(maxValue));
+        if (maxValue !== undefined)
+            return SDKUI_Localizator.Max_Value.replaceParams(formatNumber(maxValue));
+        if (minValue !== undefined)
+            return SDKUI_Localizator.Min_Value.replaceParams(formatNumber(minValue));
+        return undefined;
+    };
+    // Modalità inline: riporta il valore nel range (vuoto -> ultimo valore valido)
+    const clampToRange = (curValue) => {
+        if (curValue === undefined || curValue === null || curValue === '')
+            return minValue !== undefined ? (value?.toString() ?? minValue.toString()) : curValue;
+        let number = Number(curValue);
+        if (isNaN(number))
+            return value?.toString();
+        if (maxValue !== undefined)
+            number = Math.min(maxValue, number);
+        if (minValue !== undefined)
+            number = Math.max(minValue, number);
+        return number.toString();
+    };
+    const rangeError = isInlineRange ? getRangeError(currentValue) : undefined;
+    const effectiveVil = rangeError ? [...validationItems, new ValidationItem(ResultTypes.ERROR, label, rangeError)] : validationItems;
     const handleInputChange = (e) => {
         let inputValue = e.target.value;
         // Applica textTransform direttamente durante la digitazione (non per i numeri)
@@ -187,7 +247,7 @@ const TMTextBox = ({ autoComplete = 'off', autoFocus, maxLength, labelColor, pre
             let number = Number(inputValue);
             let max = getMaxValue(inputValue);
             // Check maxValue
-            if (number > max) {
+            if (!isInlineRange && number > max) {
                 ShowAlert({
                     mode: 'warning',
                     message: `Max value is ${max}`,
@@ -198,7 +258,7 @@ const TMTextBox = ({ autoComplete = 'off', autoFocus, maxLength, labelColor, pre
                 return;
             }
             // Check minValue
-            if (minValue && number < minValue) {
+            if (!isInlineRange && minValue && number < minValue) {
                 ShowAlert({
                     mode: 'warning',
                     message: `Min value is ${minValue}`,
@@ -229,6 +289,14 @@ const TMTextBox = ({ autoComplete = 'off', autoFocus, maxLength, labelColor, pre
             }
         }
         setCurrentValue(inputValue);
+        if (isInlineRange) {
+            clearTimeout(inlineTimerRef.current);
+            const isValid = !getRangeError(inputValue) && !(inputValue === '' && minValue !== undefined);
+            inlinePendingRef.current = isValid ? inputValue : undefined;
+            if (isValid)
+                inlineTimerRef.current = setTimeout(() => commitInlineValue(inputValue), 800);
+            return;
+        }
         onValueChanged?.({ target: { value: inputValue } }); // Passa il valore filtrato
     };
     function getFormulaDataSorce() {
@@ -296,24 +364,44 @@ const TMTextBox = ({ autoComplete = 'off', autoFocus, maxLength, labelColor, pre
             // Stima la larghezza del simbolo (circa 10px per carattere + margine)
             return 6 + (currencySymbol.length * 10) + 4;
         };
-        return (_jsx("div", { style: { width: '100%', height: 'fit-content', cursor: onClick ? 'pointer' : undefined, display: 'flex', alignItems: 'center' }, id: `text-${id}`, onClick: onClick, children: _jsxs("div", { style: { flex: 1 }, children: [_jsxs("div", { style: { position: 'relative' }, children: [currencySymbol && initialType !== 'password' && initialType !== 'secureText' && _jsx("span", { style: { position: 'absolute', left: '6px', top: '50%', transform: 'translateY(-50%)', color: disabled ? TMColors.disabled : TMColors.text_normal, fontSize: fontSize, pointerEvents: 'none', zIndex: 1 }, children: currencySymbol }), _jsx(StyledEditor, { ref: inputRef, onContextMenu: (e) => e.stopPropagation(), id: `text-${label}-${id}`, name: label, autoFocus: autoFocus, readOnly: readOnly, type: currentType, disabled: disabled, value: displayedValue, width: width || '100%', placeholder: placeHolder, maxLength: maxLength, autoComplete: autoComplete, spellCheck: false, onFocus: () => setIsFocused(true), onBlur: (e) => { setIsFocused(false); if (currentValue != value)
-                                    onBlur?.(currentValue); }, onChange: handleInputChange, onKeyDown: (e) => {
+        return (_jsx("div", { style: { width: '100%', height: 'fit-content', cursor: onClick ? 'pointer' : undefined, display: 'flex', alignItems: 'center' }, id: `text-${id}`, onClick: onClick, children: _jsxs("div", { style: { flex: 1 }, children: [_jsxs("div", { style: { position: 'relative' }, children: [currencySymbol && initialType !== 'password' && initialType !== 'secureText' && _jsx("span", { style: { position: 'absolute', left: '6px', top: '50%', transform: 'translateY(-50%)', color: disabled ? TMColors.disabled : TMColors.text_normal, fontSize: fontSize, pointerEvents: 'none', zIndex: 1 }, children: currencySymbol }), _jsx(StyledEditor, { ref: inputRef, onContextMenu: (e) => e.stopPropagation(), id: `text-${label}-${id}`, name: label, autoFocus: autoFocus, readOnly: readOnly, type: currentType, disabled: disabled, value: displayedValue, width: width || '100%', placeholder: placeHolder, maxLength: maxLength, autoComplete: autoComplete, spellCheck: false, onFocus: () => setIsFocused(true), onBlur: (e) => {
+                                    setIsFocused(false);
+                                    let blurValue = currentValue;
+                                    if (isInlineRange) {
+                                        const clamped = clampToRange(currentValue);
+                                        if (clamped !== currentValue) {
+                                            blurValue = clamped;
+                                            setCurrentValue(blurValue);
+                                        }
+                                        commitInlineValue(blurValue);
+                                    }
+                                    if (blurValue != value)
+                                        onBlur?.(blurValue);
+                                }, onChange: handleInputChange, onKeyDown: (e) => {
                                     if (currentType === 'number') {
                                         if (!scale && (e.key == "." || e.key == ","))
                                             e.preventDefault();
+                                        if (isInlineRange && e.key === 'Enter')
+                                            inputRef.current?.blur();
                                     }
                                     onKeyDown?.(e);
-                                }, $isMobile: deviceType === DeviceType.MOBILE, $disabled: disabled, $vil: validationItems, $isModified: isModifiedWhen, $fontSize: fontSize, $maxValue: maxValue, $width: width, $type: currentType, $borderRadius: borderRadius, style: { paddingLeft: `${calculateLeftPadding()}px`, paddingRight: `${calculateRightPadding()}px`, cursor: onClick ? 'pointer' : undefined } }), (initialType === 'password' || initialType === 'secureText') && _jsx(StyledShowPasswordIcon, { onClick: toggleShowPassword, $disabled: disabled, $vil: validationItems, $isModified: isModifiedWhen, children: showPasswordIcon() }), (formulaItems.length > 0 || (showClearButton && currentValue) || buttons.length > 0) &&
+                                }, $isMobile: deviceType === DeviceType.MOBILE, $disabled: disabled, $vil: effectiveVil, $isModified: isModifiedWhen, $fontSize: fontSize, $maxValue: maxValue, $width: width, $type: currentType, $borderRadius: borderRadius, style: { paddingLeft: `${calculateLeftPadding()}px`, paddingRight: `${calculateRightPadding()}px`, cursor: onClick ? 'pointer' : undefined } }), (initialType === 'password' || initialType === 'secureText') && _jsx(StyledShowPasswordIcon, { onClick: toggleShowPassword, $disabled: disabled, $vil: validationItems, $isModified: isModifiedWhen, children: showPasswordIcon() }), (formulaItems.length > 0 || (showClearButton && currentValue) || buttons.length > 0) &&
                                 _jsxs("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', position: 'absolute', right: type === 'number' ? '25px' : (initialType === 'password' ? '34px' : '6px'), top: '50%', transform: 'translateY(-50%)', pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? 0.4 : 1 }, children: [formulaItems.length > 0 &&
                                             _jsx(StyledTextBoxEditorButton, { onClick: () => {
                                                     setShowFormulaItemsChooser(true);
                                                 }, children: _jsx(IconDataList, {}) }), (showClearButton && currentValue) &&
                                             _jsx(StyledTextBoxEditorButton, { onClick: () => { onValueChanged?.({ target: { value: undefined } }); onBlur?.(undefined); }, children: _jsx(IconClearButton, {}) }), buttons.map((buttonItem, index) => {
                                             return (_jsx(StyledTextBoxEditorButton, { onClick: buttonItem.onClick, children: _jsx(TMTooltip, { content: buttonItem.text, children: buttonItem.icon }) }, buttonItem.text));
-                                        })] }), openFormulaItemsChooser(), formulaItems.length > 0 && (_jsx(TMContextMenu, { items: formulaMenuItems, target: `#text-${id}` }))] }), _jsx(TMVilViewer, { vil: validationItems })] }) }));
+                                        })] }), openFormulaItemsChooser(), formulaItems.length > 0 && (_jsx(TMContextMenu, { items: formulaMenuItems, target: `#text-${id}` }))] }), _jsx(TMVilViewer, { vil: effectiveVil })] }) }));
     };
     const renderedLeftLabelTextBox = () => {
-        return (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: _jsx(StyledEditorIcon, { $disabled: disabled, $vil: validationItems, $isModified: isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { $width: width, children: [label && _jsx(StyledEditorLabel, { $color: labelColor, $isFocused: isFocused, $labelPosition: labelPosition, $disabled: disabled, children: label }), renderInputField()] }) })] }));
+        const rangeInfo = isInlineRange ? getRangeInfo() : undefined;
+        const tooltipContent = (infoText || rangeInfo)
+            ? _jsxs("div", { style: { maxWidth: '280px', whiteSpace: 'normal', textAlign: 'left', lineHeight: 1.4 }, children: [infoText && _jsx("div", { children: infoText }), rangeInfo && _jsx("div", { style: { marginTop: infoText ? '6px' : 0, fontWeight: infoText ? 600 : undefined }, children: rangeInfo })] })
+            : undefined;
+        return (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: _jsx(StyledEditorIcon, { $disabled: disabled, $vil: validationItems, $isModified: isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { $width: width, children: [label && _jsx(StyledEditorLabel, { $color: labelColor, $isFocused: isFocused, $labelPosition: labelPosition, $disabled: disabled, children: tooltipContent
+                                    ? _jsxs("span", { style: { display: 'inline-flex', alignItems: 'center', gap: '4px' }, children: [label, _jsx(TMTooltip, { content: tooltipContent, parentStyle: { display: 'inline-flex' }, children: _jsx(IconInfo, { fontSize: 11, style: { color: disabled ? TMColors.disabled : TMColors.label_normal, opacity: 0.5 } }) })] })
+                                    : label }), renderInputField()] }) })] }));
     };
     return (_jsx("div", { style: elementStyle, children: renderedLeftLabelTextBox() }));
 };

package/lib/components/features/archive/TMArchive.js

@@ -22,12 +22,17 @@ const TMArchive = ({ onDcmtTypeSelect = undefined, inputTID, inputFile = null, c
     const pendingMidsRef = React.useRef(null);
     const deviceType = useDeviceType();
     useEffect(() => { setMruTIDs(SDKUI_Globals.userSettings.archivingSettings.mruTIDs); }, []);
+    // Applica inputTID solo quando cambia davvero: non deve sovrascrivere il tipo documento
+    // selezionato dall'utente.
     useEffect(() => {
         if (!inputTID)
             return;
         setCurrentTID(inputTID);
-        setCurrentMruTID(mruTIDs.includes(inputTID) ? inputTID : 0);
-    }, [inputTID, mruTIDs]);
+    }, [inputTID]);
+    // Evidenzia la scorciatoia del tipo documento corrente, anche quando mruTIDs cambia.
+    useEffect(() => {
+        setCurrentMruTID(currentTID && mruTIDs.includes(currentTID) ? currentTID : 0);
+    }, [currentTID, mruTIDs]);
     useEffect(() => {
         pendingMidsRef.current = inputMids;
         if (currentTID && currentTID > 0 && inputMids && inputMids.length > 0) {