@topconsultnpm/sdkui-react 6.22.0-t2 → 6.22.0-t3

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

@@ -0,0 +1,320 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactDOM from 'react-dom/client';
+import { SDKUI_Localizator } from '../../../helper';
+import TMWaitPanelView from './TMWaitPanelView';
+const Z_INDEX_BASE = 2147483601;
+const RESOLVED = Promise.resolve();
+const pad2 = (n) => (n < 10 ? '0' + n : String(n));
+/** Formatta una durata in millisecondi come "42s", "3m 07s", "1h 12m". */
+const formatDuration = (ms) => {
+    const totalSeconds = Math.max(0, Math.round(ms / 1000));
+    if (totalSeconds < 60)
+        return `${totalSeconds}s`;
+    const totalMinutes = Math.floor(totalSeconds / 60);
+    if (totalMinutes < 60)
+        return `${totalMinutes}m ${pad2(totalSeconds % 60)}s`;
+    return `${Math.floor(totalMinutes / 60)}h ${pad2(totalMinutes % 60)}m`;
+};
+class TMWaitPanelInstance {
+    constructor(options, zIndex) {
+        this.abortController = new AbortController();
+        this.nodes = null;
+        this.closed = false;
+        this.elapsedLabel = SDKUI_Localizator.Elapsed;
+        this.remainingLabel = SDKUI_Localizator.Remaining;
+        // Pausa in attesa della conferma di interruzione.
+        this._paused = false;
+        this.pauseGate = null;
+        this.resolvePauseGate = null;
+        this.pausedTotalMs = 0;
+        this.pauseStartedAt = 0;
+        this.startTime = performance.now();
+        this.rafId = 0;
+        this._value = 0;
+        this._max = 0;
+        this._ok = 0;
+        this._warning = 0;
+        this._error = 0;
+        this._secondaryValue = 0;
+        this._secondaryMax = 0;
+        // Ultimi valori scritti sul DOM: servono a non riscrivere testo identico.
+        this.lastPercentText = '';
+        this.lastSubtitleText = '';
+        this.lastElapsedText = '';
+        this.lastRemainingText = '';
+        this.lastOk = 0;
+        this.lastWarning = 0;
+        this.lastError = 0;
+        this.lastTitleText = '';
+        this.lastSecondaryPercentText = '';
+        this.lastSecondaryText = '';
+        this.waitWhilePaused = () => this.pauseGate ?? RESOLVED;
+        this.step = (delta = 1) => { this._value += delta; this.schedule(); return this.pauseGate ?? RESOLVED; };
+        this.setValue = (value) => { this._value = value; this.schedule(); };
+        this.setMax = (max) => { this._max = max; this.schedule(); };
+        this.setTitle = (title) => { this._title = title; this.schedule(); };
+        this.setSubtitle = (subtitle) => { this._subtitleOverride = subtitle; this.schedule(); };
+        this.ok = (delta = 1) => { this._ok += delta; this.schedule(); };
+        this.warning = (delta = 1) => { this._warning += delta; this.schedule(); };
+        this.error = (delta = 1) => { this._error += delta; this.schedule(); };
+        this.setSecondary = (patch) => {
+            if (patch.value !== undefined)
+                this._secondaryValue = patch.value;
+            if (patch.max !== undefined)
+                this._secondaryMax = patch.max;
+            if (patch.text !== undefined)
+                this._secondaryText = patch.text;
+            this.schedule();
+        };
+        this.update = (patch) => {
+            if (patch.title !== undefined)
+                this._title = patch.title;
+            if (patch.subtitle !== undefined)
+                this._subtitleOverride = patch.subtitle;
+            if (patch.value !== undefined)
+                this._value = patch.value;
+            if (patch.max !== undefined)
+                this._max = patch.max;
+            if (patch.ok !== undefined)
+                this._ok = patch.ok;
+            if (patch.warning !== undefined)
+                this._warning = patch.warning;
+            if (patch.error !== undefined)
+                this._error = patch.error;
+            this.schedule();
+        };
+        this.close = () => {
+            if (this.closed)
+                return;
+            this.closed = true;
+            // Sblocca un loop eventualmente fermo in attesa della conferma.
+            this.resume();
+            if (this.rafId) {
+                cancelAnimationFrame(this.rafId);
+                this.rafId = 0;
+            }
+            if (this.tickerId !== undefined) {
+                clearInterval(this.tickerId);
+                this.tickerId = undefined;
+            }
+            document.removeEventListener('keydown', this.handleKeyDown, true);
+            // Smonto fuori dal render corrente: close() puo' arrivare durante un render.
+            this.container.style.display = 'none';
+            const root = this.root;
+            const container = this.container;
+            setTimeout(() => { root.unmount(); container.remove(); }, 0);
+            TMWaitPanelManager._unregister(this);
+        };
+        // #endregion
+        this.handleMount = (nodes) => {
+            if (this.closed)
+                return;
+            this.nodes = nodes;
+            // Il chiamante puo' aver gia' avanzato prima del montaggio.
+            this.flush();
+        };
+        this.handleKeyDown = (e) => {
+            if (this.closed)
+                return;
+            // Con la conferma aperta la tastiera risponde a lei: Esc = No, Invio = Si.
+            if (this._paused) {
+                if (e.key === 'Escape') {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.resume();
+                }
+                else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.confirmAbort();
+                }
+                return;
+            }
+            if (e.key !== 'Escape')
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            this.handleAbort();
+        };
+        /** Interrompi non annulla subito: mette in pausa il loop e chiede conferma. */
+        this.handleAbort = () => {
+            if (this.closed || this.aborted || this._paused)
+                return;
+            this.pause();
+        };
+        /** Risposta Si: interrompe davvero e lascia ripartire il loop, che uscira' subito. */
+        this.confirmAbort = () => {
+            if (this.closed || this.aborted)
+                return;
+            this.abortController.abort();
+            const abortButton = this.nodes?.abortButton;
+            if (abortButton) {
+                abortButton.disabled = true;
+                abortButton.textContent = SDKUI_Localizator.Aborting;
+            }
+            this.options.onAbort?.();
+            this.resume();
+        };
+        /** Risposta No, oppure chiusura del pannello: sblocca il loop e riprende. */
+        this.resume = () => {
+            if (!this._paused)
+                return;
+            this._paused = false;
+            this.pausedTotalMs += performance.now() - this.pauseStartedAt;
+            if (this.nodes)
+                this.nodes.confirm.style.display = 'none';
+            const resolve = this.resolvePauseGate;
+            this.pauseGate = null;
+            this.resolvePauseGate = null;
+            resolve?.();
+            this.schedule();
+        };
+        /** Programma al massimo un flush per frame. E' l'unico costo pagato da `step()`. */
+        this.schedule = () => {
+            if (this.closed || this.rafId || !this.nodes)
+                return;
+            this.rafId = requestAnimationFrame(this.flush);
+        };
+        /** Riversa sul DOM lo stato corrente (barra, percentuale, testi, contatori), saltando cio' che non e' cambiato. */
+        this.flush = () => {
+            this.rafId = 0;
+            const nodes = this.nodes;
+            if (this.closed || !nodes)
+                return;
+            const ratio = this._max > 0 ? Math.min(1, Math.max(0, this._value / this._max)) : 0;
+            // scaleX invece di width: resta sul compositor, niente layout.
+            nodes.fill.style.transform = `scaleX(${ratio})`;
+            const percentText = `${(ratio * 100).toFixed(2)}%`;
+            if (percentText !== this.lastPercentText) {
+                this.lastPercentText = percentText;
+                nodes.percent.textContent = percentText;
+            }
+            if (this._title !== this.lastTitleText) {
+                this.lastTitleText = this._title;
+                nodes.title.textContent = this._title;
+            }
+            const subtitleText = this.computeSubtitle();
+            if (subtitleText !== this.lastSubtitleText) {
+                this.lastSubtitleText = subtitleText;
+                nodes.subtitle.textContent = subtitleText;
+            }
+            if (this._ok !== this.lastOk) {
+                this.lastOk = this._ok;
+                nodes.okValue.textContent = String(this._ok);
+            }
+            if (this._warning !== this.lastWarning) {
+                this.lastWarning = this._warning;
+                nodes.warningValue.textContent = String(this._warning);
+            }
+            if (this._error !== this.lastError) {
+                this.lastError = this._error;
+                nodes.errorValue.textContent = String(this._error);
+            }
+            if (nodes.secondaryFill)
+                this.flushSecondary(nodes);
+            if (this.options.showEta ?? true)
+                this.flushEta(nodes, ratio);
+        };
+        this.options = options;
+        this._max = options.max ?? 0;
+        this._title = options.title ?? '';
+        this._secondaryText = options.secondaryText ?? '';
+        this.lastTitleText = this._title;
+        this.lastSecondaryText = this._secondaryText;
+        this.lastSubtitleText = this.computeSubtitle();
+        this.container = document.createElement('div');
+        document.body.appendChild(this.container);
+        this.root = ReactDOM.createRoot(this.container);
+        this.root.render(_jsx(TMWaitPanelView, { title: this._title, subtitle: this.lastSubtitleText, cancelable: options.cancelable ?? false, showEta: options.showEta ?? true, showCounters: options.showCounters ?? true, showSecondary: options.showSecondary ?? false, secondaryText: this._secondaryText, primaryLabel: options.primaryLabel ?? '', secondaryLabel: options.secondaryLabel ?? '', zIndex: zIndex, onAbort: this.handleAbort, onConfirmYes: this.confirmAbort, onConfirmNo: this.resume, onMount: this.handleMount }));
+        if (options.cancelable ?? false)
+            document.addEventListener('keydown', this.handleKeyDown, true);
+        if (options.showEta ?? true)
+            this.tickerId = setInterval(this.schedule, 500);
+    }
+    // #region API pubblica
+    get aborted() { return this.abortController.signal.aborted; }
+    get signal() { return this.abortController.signal; }
+    get value() { return this._value; }
+    get max() { return this._max; }
+    get counters() { return { ok: this._ok, warning: this._warning, error: this._error }; }
+    get isOpen() { return !this.closed; }
+    get paused() { return this._paused; }
+    pause() {
+        if (this._paused)
+            return;
+        this._paused = true;
+        this.pauseStartedAt = performance.now();
+        this.pauseGate = new Promise(resolve => { this.resolvePauseGate = resolve; });
+        if (this.nodes)
+            this.nodes.confirm.style.display = 'flex';
+    }
+    computeSubtitle() {
+        if (this._subtitleOverride !== undefined)
+            return this._subtitleOverride;
+        const template = this.options.subtitleTemplate;
+        if (template)
+            return template.replace('{{0}}', String(this._value)).replace('{{1}}', String(this._max));
+        return this.options.subtitle ?? '';
+    }
+    /** Riversa sul DOM la seconda barra. Invocata solo quando la view l'ha renderizzata. */
+    flushSecondary(nodes) {
+        const ratio = this._secondaryMax > 0 ? Math.min(1, Math.max(0, this._secondaryValue / this._secondaryMax)) : 0;
+        nodes.secondaryFill.style.transform = `scaleX(${ratio})`;
+        const percentText = `${(ratio * 100).toFixed(2)}%`;
+        if (percentText !== this.lastSecondaryPercentText) {
+            this.lastSecondaryPercentText = percentText;
+            nodes.secondaryPercent.textContent = percentText;
+        }
+        if (this._secondaryText !== this.lastSecondaryText) {
+            this.lastSecondaryText = this._secondaryText;
+            nodes.secondaryText.textContent = this._secondaryText;
+        }
+    }
+    /** Aggiorna la riga dei tempi: trascorso al netto delle pause e stima del rimanente. */
+    flushEta(nodes, ratio) {
+        const pausedMs = this.pausedTotalMs + (this._paused ? performance.now() - this.pauseStartedAt : 0);
+        const elapsedMs = performance.now() - this.startTime - pausedMs;
+        const elapsedText = `${formatDuration(elapsedMs)} ${this.elapsedLabel}`;
+        if (elapsedText !== this.lastElapsedText) {
+            this.lastElapsedText = elapsedText;
+            nodes.elapsed.textContent = elapsedText;
+        }
+        // Sotto 1s la stima balla troppo.
+        let remainingText = '';
+        if (ratio > 0 && ratio < 1 && elapsedMs > 1000) {
+            remainingText = `${formatDuration(elapsedMs / ratio - elapsedMs)} ${this.remainingLabel}`;
+        }
+        if (remainingText !== this.lastRemainingText) {
+            this.lastRemainingText = remainingText;
+            nodes.remaining.textContent = remainingText;
+        }
+    }
+}
+export class TMWaitPanelManager {
+    /** Apre un wait panel e restituisce l'handle con cui pilotarlo. */
+    static show(options = {}) {
+        const panel = new TMWaitPanelInstance(options, Z_INDEX_BASE + this._panels.length);
+        this._panels.push(panel);
+        return panel;
+    }
+    /** Pannello aperto piu' recente, se presente. */
+    static get current() {
+        return this._panels[this._panels.length - 1];
+    }
+    /** True finche' almeno un wait panel e' aperto: flag "operazione massiva in corso" per i refresh periodici. */
+    static get isBusy() {
+        return this._panels.length > 0;
+    }
+    /** Chiude tutti i pannelli aperti (rete di sicurezza in caso di unmount della pagina). */
+    static closeAll() {
+        [...this._panels].forEach(panel => panel.close());
+    }
+    /** @internal */
+    static _unregister(panel) {
+        const index = this._panels.indexOf(panel);
+        if (index >= 0)
+            this._panels.splice(index, 1);
+    }
+}
+TMWaitPanelManager._panels = [];
+export default TMWaitPanelManager;

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/TMCultureIDPicker.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import styled from 'styled-components';
 import { IconSearch, SDKUI_Localizator } from '../../helper';
@@ -64,7 +64,7 @@ const TMCultureIDPicker = ({ selectedValue, onSelectCultureID, placeHolder, widt
         const isPlaceholder = selectedValue === placeHolder;
         return (_jsxs(StyledDivHorizontal, { style: { width: '100%', color: isPlaceholder ? '#a9a9a9' : 'inherit' }, children: [selectedValue && _jsx("img", { src: getCultureIDImg(selectedValue), alt: "Lang", width: 16, height: 16, style: { marginRight: '8px' } }), selectedValue && _jsx("p", { children: getCultureIDName(selectedValue) })] }));
     };
-    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { width: width, icon: icon, buttons: buttons, readOnly: readOnly, backgroundColor: backgroundColor, showBorder: true, hasValue: selectedValue !== undefined, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => !readOnly && setShowPicker(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, label: label, openEditorOnSummaryClick: openChooserBySingleClick, template: renderTemplate(), onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showPicker && _jsx(TMModal, { title: label || SDKUI_Localizator.Select, onClose: () => setShowPicker(false), isModal: true, width: "450px", height: "255px", children: _jsx(PickerContainer, { children: _jsx(ItemsContainer, { children: CULTUREIDs_DATASOURCE.map(item => (_jsxs(CultureItem, { "$isSelected": item.value === selectedValue, onClick: () => {
+    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { width: width, icon: icon, buttons: buttons, readOnly: readOnly, backgroundColor: backgroundColor, showBorder: true, hasValue: selectedValue !== undefined, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => !readOnly && setShowPicker(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, label: label, openEditorOnSummaryClick: openChooserBySingleClick, template: renderTemplate(), onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showPicker && _jsx(TMModal, { title: label || SDKUI_Localizator.Select, onClose: () => setShowPicker(false), isModal: true, width: "450px", height: "255px", children: _jsx(PickerContainer, { children: _jsx(ItemsContainer, { children: CULTUREIDs_DATASOURCE.map(item => (_jsxs(CultureItem, { $isSelected: item.value === selectedValue, onClick: () => {
                                 onSelectCultureID(item.value);
                                 setShowPicker(false);
                             }, children: [_jsx(FlagIcon, { children: item.icon }), _jsx("span", { children: item.display })] }, item.value))) }) }) })] }));

package/lib/components/choosers/TMDataListItemChooser.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { SDK_Localizator, DataListCacheService } from '@topconsultnpm/sdk-ts';
 import { StyledDivHorizontal } from '../base/Styled';