@topconsultnpm/sdkui-react 6.17.0-test9

package/lib/components/base/TMTreeView.js

@@ -0,0 +1,356 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef } from 'react';
+import styled from 'styled-components';
+import { IconChevronDown, IconChevronRight } from '../../helper';
+import TMButton from './TMButton';
+const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMultipleSelection, onDataChanged, calculateItemsForNode, itemRender, onNodeUpdate, onFocusedItemChanged, onSelectionChanged, shouldDelayFocusOnEvent, itemsPerPage = 100, showLoadMoreButton = true }) => {
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (!focusedItem)
+                return;
+            let newFocusedItem = null;
+            switch (event.key) {
+                case 'ArrowDown':
+                    newFocusedItem = findNextItem(dataSource, focusedItem);
+                    break;
+                case 'ArrowUp':
+                    newFocusedItem = findPreviousItem(dataSource, focusedItem);
+                    break;
+                case '+':
+                    if (!focusedItem.expanded) {
+                        handleNodeToggle(focusedItem.key, false);
+                        newFocusedItem = { ...focusedItem, expanded: true };
+                    }
+                    break;
+                case '-':
+                    if (focusedItem.expanded) {
+                        handleNodeToggle(focusedItem.key, false);
+                        newFocusedItem = { ...focusedItem, expanded: false };
+                    }
+                    break;
+                // case ' ':
+                // 	allowMultipleSelection && handleCheckboxChange(focusedItem, !selectedItems.some(item => item.key === focusedItem.key));
+                // 	break;
+                // case '*':
+                // 	handleExpandAllNodes();
+                // 	break;
+                // case '/':
+                // 	handleCollapseAllNodes();
+                // 	break;
+                default:
+                    break;
+            }
+            if (newFocusedItem)
+                onFocusedItemChanged?.(newFocusedItem);
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [focusedItem, dataSource, onFocusedItemChanged]);
+    const findNextItem = (nodes, currentItem) => {
+        const flatList = flattenTree(nodes);
+        const currentIndex = flatList.findIndex(item => item.key === currentItem.key);
+        return flatList[currentIndex + 1] || null;
+    };
+    const findPreviousItem = (nodes, currentItem) => {
+        const flatList = flattenTree(nodes);
+        const currentIndex = flatList.findIndex(item => item.key === currentItem.key);
+        return flatList[currentIndex - 1] || null;
+    };
+    const flattenTree = (nodes) => {
+        let flatList = [];
+        nodes.forEach(node => {
+            if (!node.hidden) {
+                flatList.push(node);
+                if (node.expanded && node.items) {
+                    flatList = flatList.concat(flattenTree(node.items));
+                }
+            }
+        });
+        return flatList;
+    };
+    const handleNodeToggle = async (key, ctrlKey) => {
+        const updateNodeRecursively = async (nodes) => {
+            const updatedNodes = await Promise.all(nodes.map(async (node) => {
+                if (node.key === key) {
+                    if (node.expanded) {
+                        // Collassa il nodo
+                        const updatedNode = { ...node, expanded: false };
+                        onNodeUpdate?.(updatedNode);
+                        return updatedNode;
+                    }
+                    else {
+                        // Espandi il nodo
+                        let newItems = node.items;
+                        // Solo se calculateItemsForNode è definito E (ctrl è premuto O non è già caricato)
+                        if (calculateItemsForNode && (ctrlKey || !node.isLoaded)) {
+                            newItems = await calculateItemsForNode(node);
+                            const updatedNode = { ...node, expanded: true, items: newItems, isLoaded: true };
+                            onNodeUpdate?.(updatedNode);
+                            return updatedNode;
+                        }
+                        // Altrimenti usa semplicemente gli items esistenti
+                        return { ...node, expanded: true };
+                    }
+                }
+                if (node.items) {
+                    const updatedItems = await updateNodeRecursively(node.items);
+                    return { ...node, items: updatedItems };
+                }
+                return node;
+            }));
+            return updatedNodes;
+        };
+        updateNodeRecursively(dataSource).then(updatedData => {
+            onDataChanged?.(updatedData);
+        });
+    };
+    // Ref per distinguere click singolo/doppio sulla riga (esempio TMDcmtIcon)
+    const clickTimeoutRef = useRef(null);
+    const lastClickedNodeKeyRef = useRef(undefined);
+    const handleNodeClick = useCallback((node, e) => {
+        const targetElement = e.target;
+        // Se il click non è sulla riga (es. click sul paddiing esterno), ignora.
+        if (e.currentTarget !== targetElement && !e.currentTarget.contains(targetElement)) {
+            return;
+        }
+        // Se shouldDelayFocusOnEvent non è fornita, il comportamento predefinito è il focus immediato (false)
+        const delayFocus = shouldDelayFocusOnEvent ? shouldDelayFocusOnEvent(node, e) : false;
+        // Reset del timer se il click è su un nodo diverso dal precedente
+        if (lastClickedNodeKeyRef.current && lastClickedNodeKeyRef.current !== node.key) {
+            if (clickTimeoutRef.current) {
+                clearTimeout(clickTimeoutRef.current);
+            }
+            clickTimeoutRef.current = null;
+        }
+        if (delayFocus) {
+            // Logica per il ritardo del focus (es. click singolo su icona desktop, gestito dal padre)
+            if (clickTimeoutRef.current) {
+                // Questo è il secondo click di un potenziale doppio click.
+                // Annulla l'azione di focus dal click singolo precedente.
+                clearTimeout(clickTimeoutRef.current);
+                clickTimeoutRef.current = null;
+                lastClickedNodeKeyRef.current = undefined;
+                return; // Non attivare onFocusedItemChanged per il doppio click
+            }
+            // Primo click di un potenziale doppio click o un click singolo che necessita di ritardo
+            lastClickedNodeKeyRef.current = node.key;
+            clickTimeoutRef.current = setTimeout(() => {
+                // Se il timer scade, significa che è stato solo un click singolo.
+                onFocusedItemChanged?.(node);
+                clickTimeoutRef.current = null;
+                lastClickedNodeKeyRef.current = undefined;
+            }, 200);
+        }
+        else {
+            // Logica per il focus immediato (per tutti gli altri click, o se shouldDelayFocusOnEvent è false)
+            if (clickTimeoutRef.current) {
+                clearTimeout(clickTimeoutRef.current);
+                clickTimeoutRef.current = null;
+                lastClickedNodeKeyRef.current = undefined;
+            }
+            onFocusedItemChanged?.(node); // Chiama onFocusedItemChanged immediatamente
+        }
+    }, [onFocusedItemChanged, calculateItemsForNode, onNodeUpdate]);
+    const handleCheckboxChange = (node, checked) => {
+        // Funzione helper per trovare il parent di un nodo e verificare se tutti i suoi figli sono selezionati
+        const findAndCheckParents = (items, targetNode, currentSelection) => {
+            const parentsToAdd = [];
+            const checkNode = (item, parent = null) => {
+                if (item.key === targetNode.key && parent) {
+                    // Trovato il nodo target, verifica se tutti i fratelli sono selezionati
+                    if (parent.items) {
+                        const allChildren = flattenTree(parent.items);
+                        const selectedKeys = new Set(currentSelection.map(s => s.key));
+                        const allChildrenSelected = allChildren.every(child => selectedKeys.has(child.key));
+                        if (allChildrenSelected && !selectedKeys.has(parent.key)) {
+                            parentsToAdd.push(parent);
+                            // Ricorsivamente controlla i parent del parent
+                            const grandParents = findAndCheckParents(items, parent, [...currentSelection, parent]);
+                            parentsToAdd.push(...grandParents);
+                        }
+                    }
+                    return true;
+                }
+                if (item.items) {
+                    for (const child of item.items) {
+                        if (checkNode(child, item)) {
+                            return true;
+                        }
+                    }
+                }
+                return false;
+            };
+            items.forEach(item => checkNode(item));
+            return parentsToAdd;
+        };
+        let newSelectedItems;
+        if (checked) {
+            if (node.isContainer) {
+                // Quando selezioni un container, aggiungi il container stesso + tutti i figli
+                const allChildren = flattenTree(node.items || []);
+                newSelectedItems = [...selectedItems, node, ...allChildren];
+            }
+            else if (!selectedItems.some(item => item.key === node.key)) {
+                // Quando selezioni un figlio, aggiungi il figlio
+                newSelectedItems = [...selectedItems, node];
+                // Verifica se selezionando questo figlio sono ora selezionati tutti i figli del parent
+                const parentsToAdd = findAndCheckParents(dataSource, node, newSelectedItems);
+                newSelectedItems = [...newSelectedItems, ...parentsToAdd];
+            }
+            else {
+                newSelectedItems = selectedItems;
+            }
+        }
+        else if (node.isContainer) {
+            // Quando deselezioni un container, rimuovi il container stesso + tutti i figli
+            const childKeys = flattenTree(node.items || []).map(item => item.key);
+            newSelectedItems = selectedItems.filter(item => item.key !== node.key && !childKeys.includes(item.key));
+        }
+        else {
+            // Quando deselezioni un figlio, rimuovi il figlio
+            newSelectedItems = selectedItems.filter(item => item.key !== node.key);
+            // Se il figlio apparteneva a un parent che era selezionato, rimuovi anche il parent
+            const removeParentContainers = (items) => {
+                const parentsToRemove = [];
+                items.forEach(item => {
+                    if (item.isContainer && item.items) {
+                        const childKeys = flattenTree(item.items).map(child => child.key);
+                        if (childKeys.includes(node.key)) {
+                            parentsToRemove.push(item.key);
+                        }
+                        // Ricorsione per parent annidati
+                        parentsToRemove.push(...removeParentContainers(item.items));
+                    }
+                });
+                return parentsToRemove;
+            };
+            const parentsToRemove = removeParentContainers(dataSource);
+            newSelectedItems = newSelectedItems.filter(item => !parentsToRemove.includes(item.key));
+        }
+        onSelectionChanged?.(newSelectedItems);
+    };
+    // const handleExpandAllNodes = () => {
+    // 	const expandAll = (nodes: T[]): T[] => {
+    // 		return nodes.map(node => ({
+    // 			...node,
+    // 			expanded: true,
+    // 			items: node.items ? expandAll(node.items as T[]) : node.items
+    // 		}));
+    // 	};
+    // 	setTreeData(prevData => expandAll(prevData));
+    // };
+    // const handleCollapseAllNodes = () => {
+    // 	const collapseAll = (nodes: T[]): T[] => {
+    // 		return nodes.map(node => ({
+    // 			...node,
+    // 			expanded: false,
+    // 			items: node.items ? collapseAll(node.items as T[]) : node.items
+    // 		}));
+    // 	};
+    // 	setTreeData(prevData => collapseAll(prevData));
+    // };
+    const isIndeterminate = (node) => {
+        if (!node.isContainer || !node.items)
+            return false;
+        const childKeys = flattenTree(node.items).map(item => item.key);
+        const selectedChildKeys = selectedItems.map(item => item.key);
+        const selectedCount = childKeys.filter(key => selectedChildKeys.includes(key)).length;
+        return selectedCount > 0 && selectedCount < childKeys.length;
+    };
+    const isFullySelected = (node) => {
+        if (!node.isContainer || !node.items)
+            return false;
+        const childKeys = flattenTree(node.items).map(item => item.key);
+        const selectedChildKeys = selectedItems.map(item => item.key);
+        return childKeys.every(key => selectedChildKeys.includes(key));
+    };
+    const hasVisibleItems = (node) => {
+        if (!node.items)
+            return false;
+        if (node.items.length <= 0)
+            return false;
+        return node.items.filter(o => !o.hidden).length > 0;
+    };
+    // Gestisce il caricamento di più items per un nodo
+    const handleLoadMoreItems = useCallback((nodeKey) => {
+        const updateNodeVisibleCount = (nodes) => {
+            return nodes.map(node => {
+                if (node.key === nodeKey) {
+                    const currentVisible = node.visibleItemsCount ?? itemsPerPage;
+                    const newVisible = Math.min(currentVisible + itemsPerPage, node.totalItemsCount ?? node.items?.length ?? 0);
+                    const updatedNode = { ...node, visibleItemsCount: newVisible };
+                    onNodeUpdate?.(updatedNode);
+                    return updatedNode;
+                }
+                if (node.items) {
+                    return { ...node, items: updateNodeVisibleCount(node.items) };
+                }
+                return node;
+            });
+        };
+        const updatedData = updateNodeVisibleCount(dataSource);
+        onDataChanged?.(updatedData);
+    }, [dataSource, itemsPerPage, onDataChanged, onNodeUpdate]);
+    // Filtra gli items da mostrare in base alla paginazione
+    const getVisibleItems = useCallback((node) => {
+        if (!node.items)
+            return [];
+        const totalItems = node.items.length;
+        const visibleCount = node.visibleItemsCount ?? itemsPerPage;
+        // Se non c'è paginazione attiva o gli items sono pochi, mostra tutti
+        if (totalItems <= itemsPerPage || !showLoadMoreButton) {
+            return node.items;
+        }
+        // Altrimenti mostra solo i primi N items
+        return node.items.slice(0, visibleCount);
+    }, [itemsPerPage, showLoadMoreButton]);
+    // Verifica se c'è bisogno del bottone "Load More"
+    const needsLoadMoreButton = useCallback((node) => {
+        if (!showLoadMoreButton || !node.items)
+            return false;
+        const totalItems = node.items.length;
+        const visibleCount = node.visibleItemsCount ?? itemsPerPage;
+        return totalItems > itemsPerPage && visibleCount < totalItems;
+    }, [itemsPerPage, showLoadMoreButton]);
+    const renderTree = useCallback((nodes) => {
+        return nodes.map(node => !node.hidden && (_jsxs("div", { style: { width: '100%', margin: 0, padding: 0 }, children: [_jsxs(StyledTreeNode, { "$isSelected": node.key === focusedItem?.key, children: [_jsx("div", { style: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                minHeight: '18px',
+                                minWidth: '18px',
+                                maxHeight: '18px',
+                                maxWidth: '18px',
+                                flexShrink: 0
+                            }, onClick: (e) => { handleNodeToggle(node.key, e.ctrlKey); }, children: hasVisibleItems(node)
+                                ? node.expanded
+                                    ? _jsx(IconChevronDown, { cursor: 'pointer', fontSize: 14 })
+                                    : _jsx(IconChevronRight, { cursor: 'pointer', fontSize: 14 })
+                                : _jsx("div", { style: { height: '18px', width: '18px' } }) }), allowMultipleSelection && (_jsx("input", { type: "checkbox", checked: selectedItems.some(item => item.key === node.key), onChange: (e) => handleCheckboxChange(node, e.target.checked), onClick: (e) => e.stopPropagation(), style: { flexShrink: 0 }, ref: input => {
+                                if (input) {
+                                    input.indeterminate = isIndeterminate(node);
+                                }
+                            } })), _jsx("div", { style: { display: 'flex', alignItems: 'center', flex: 1, minWidth: 0 }, onClick: (e) => { handleNodeClick(node, e); }, children: itemRender(node) })] }), node.expanded && node.items && (_jsxs("div", { style: { paddingLeft: 20, width: '100%' }, children: [renderTree(getVisibleItems(node)), needsLoadMoreButton(node) && (_jsx("div", { style: { display: 'flex', justifyContent: 'center', margin: '5px 0' }, children: _jsx(TMButton, { onClick: () => handleLoadMoreItems(node.key), showTooltip: false, caption: `Carica altri ${itemsPerPage}... (${node.visibleItemsCount ?? itemsPerPage} / ${node.items?.length ?? 0})` }) }))] }))] }, node.key)));
+    }, [handleNodeClick, handleNodeToggle, handleCheckboxChange, focusedItem, selectedItems, allowMultipleSelection, getVisibleItems, needsLoadMoreButton, handleLoadMoreItems, itemsPerPage]);
+    return (_jsx("div", { style: { height: '100%', width: '100%', overflowY: 'auto', overflowX: 'hidden', padding: '0px 5px 2px 2px' }, children: renderTree(dataSource) }));
+};
+export default TMTreeView;
+export const StyledTreeNode = styled.div `
+	display: flex;
+	flex-direction: row;
+	width: 100%;
+	min-width: 0;
+	min-height: 22px;
+	max-height: 30px;
+	gap: 5px;
+	align-items: center;
+	padding: 0;
+	margin: 0;
+	background: ${(props) => props.$isSelected ? 'oklch(from var(--dx-color-primary) l c h / .2) !important' : 'transparent'};
+
+    &:hover {
+        background: ${() => `oklch(from var(--dx-color-primary) l c h / .1)`};
+    }
+`;

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

@@ -0,0 +1,8 @@
+interface TMUserAvatarProps {
+    displayName: string;
+    nameForColorCalculation: string;
+    tooltipName?: string;
+    returnType?: 'jsx' | 'svg';
+}
+declare const TMUserAvatar: (props: TMUserAvatarProps) => string | import("react/jsx-runtime").JSX.Element;
+export default TMUserAvatar;

package/lib/components/base/TMUserAvatar.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import TMTooltip from './TMTooltip';
+import { extractInitialsFromName, getAvatarColor } from '../../helper';
+const TMUserAvatar = (props) => {
+    const { displayName, nameForColorCalculation, tooltipName, returnType } = props;
+    const initials = extractInitialsFromName(displayName ?? '-');
+    const bgColor = getAvatarColor(nameForColorCalculation ?? '-');
+    if (returnType === 'svg') {
+        return `
+            <svg width="30" height="30" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+                <circle cx="20" cy="20" r="20" fill="${bgColor}" />
+                <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" fill="#fff" font-size="14" font-weight="bold" font-family="sans-serif">
+                    ${initials}
+                </text>
+            </svg>
+        `.trim();
+    }
+    return (_jsx(TMTooltip, { content: tooltipName ?? displayName, children: _jsx("div", { style: {
+                width: "40px",
+                height: "40px",
+                borderRadius: "50%",
+                backgroundColor: bgColor,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                marginRight: "10px",
+                fontWeight: "bold",
+                color: '#fff',
+                fontSize: "18px",
+                userSelect: "none",
+                cursor: "default",
+            }, children: _jsx("span", { style: { fontSize: "12px" }, children: initials }) }) }));
+};
+export default TMUserAvatar;

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

@@ -0,0 +1,5 @@
+import { ValidationItem } from '@topconsultnpm/sdk-ts';
+declare const TMVilViewer: ({ vil }: {
+    vil?: ValidationItem[];
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default TMVilViewer;

package/lib/components/base/TMVilViewer.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ResultTypes } from '@topconsultnpm/sdk-ts';
+import { TMColors } from '../../utils/theme';
+import TMClosableList from './TMClosableList';
+const TMVilViewer = ({ vil = [] }) => {
+    const renderVil = () => {
+        if (!vil)
+            return [];
+        let errItems = [];
+        let sortedVil = vil.slice().sort((a, b) => a.ResultType.localeCompare(b.ResultType));
+        for (let i = 0; i < sortedVil.length; i++) {
+            let viColor = sortedVil[i].ResultType == ResultTypes.ERROR ? TMColors.error : sortedVil[i].ResultType == ResultTypes.INFO ? TMColors.info : TMColors.tertiary;
+            let msg_prefix = sortedVil.length > 1 ? `${i + 1}) ` : '';
+            errItems.push(_jsx("div", { style: { color: viColor }, children: `${msg_prefix}${sortedVil[i].Message}` }, i));
+        }
+        return errItems;
+    };
+    if (!vil || vil.length <= 0)
+        return null;
+    return (_jsx(TMClosableList, { inline: true, dataSource: renderVil(), hasPadding: false }));
+};
+export default TMVilViewer;

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

@@ -0,0 +1,32 @@
+import { ITMLayoutContainerProps } from './TMLayout';
+interface ITMWaitPanelProps {
+    title?: string;
+    showPrimary?: boolean;
+    textPrimary?: string;
+    valuePrimary?: number;
+    maxValuePrimary?: number;
+    showSecondary?: boolean;
+    textSecondary?: string;
+    valueSecondary?: number;
+    maxValueSecondary?: number;
+    isCancelable?: boolean;
+    abortController?: AbortController;
+    onAbortClick?: (abortController: AbortController | undefined) => void;
+}
+export declare const TMWaitPanel: (props: ITMWaitPanelProps) => import("react/jsx-runtime").JSX.Element;
+interface ITMLayoutWaitingContainerProps extends ITMLayoutContainerProps {
+    showWaitPanel?: boolean;
+    waitPanelTitle?: string;
+    showWaitPanelPrimary?: boolean;
+    waitPanelTextPrimary?: string;
+    waitPanelValuePrimary?: number;
+    waitPanelMaxValuePrimary?: number;
+    showWaitPanelSecondary?: boolean;
+    waitPanelTextSecondary?: string;
+    waitPanelValueSecondary?: number;
+    waitPanelMaxValueSecondary?: number;
+    isCancelable?: boolean;
+    abortController?: AbortController;
+}
+export declare const TMLayoutWaitingContainer: ({ showWaitPanel, showWaitPanelPrimary, showWaitPanelSecondary, waitPanelTitle, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, isCancelable, abortController, gap, onClick, justifyContent, alignItems, children, direction }: ITMLayoutWaitingContainerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/base/TMWaitPanel.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import TMLayoutContainer from './TMLayout';
+import { SDKUI_Localizator } from '../../helper';
+const StyledWaitPanelOverlay = styled.div `
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1501;
+    transition: all; 
+    overflow: visible; 
+    background-color: rgba(0, 0, 0, 0.4);
+`;
+const StyledWaitPanel = styled.div ` 
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 300px; 
+    height: ${(props) => props.$height};
+    background: white; 
+    border-radius: 8px; 
+    padding: 10px; 
+    text-align: center; 
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
+`;
+const StyledTitle = styled.h2 ` margin: 0; font-size: 1.5em; color: #333; `;
+const StyledProgressBarContainer = styled.div ` width: 100%; height: 20px; background: #e0e0e0; border-radius: 10px; overflow: hidden; margin: 20px 0; `;
+const StyledProgressBar = styled.div ` height: 100%; background: #4caf50; transition: width 0.3s ease; `;
+const StyledProgressText = styled.p ` font-weight: bold; color: #333; margin: 0; `;
+const StyledMessage = styled.p ` color: #666; font-size: 0.9em; margin-top: 10px; `;
+const StyledAbortButton = styled.button ` background: #ff4d4d; color: white; border: none; border-radius: 5px; padding: 10px 20px; font-size: 1em; cursor: pointer; margin-top: 20px; &:hover { background: #ff6666; } `;
+export const TMWaitPanel = (props) => {
+    let progressValue1 = 100 * (((props.valuePrimary ?? 0) / (props.maxValuePrimary ?? 0)) || 0);
+    let progressValue2 = 100 * (((props.valueSecondary ?? 0) / (props.maxValueSecondary ?? 0)) || 0);
+    return (_jsx(StyledWaitPanelOverlay, { children: _jsxs(StyledWaitPanel, { "$height": (props.showPrimary && props.showSecondary) ? '350px' : '250px', children: [_jsx(StyledTitle, { children: props.title }), props.showPrimary &&
+                    _jsxs("div", { style: { width: '100%', height: '100px' }, children: [_jsx(StyledProgressBarContainer, { children: _jsx(StyledProgressBar, { style: { width: `${progressValue1.toFixed(2)}%` } }) }), _jsxs(StyledProgressText, { children: [progressValue1.toFixed(2), "%"] }), _jsx(StyledMessage, { children: props.textPrimary })] }), props.showSecondary &&
+                    _jsxs("div", { style: { width: '100%', height: '100px' }, children: [_jsx(StyledProgressBarContainer, { children: _jsx(StyledProgressBar, { style: { width: `${progressValue2.toFixed(2)}%` } }) }), _jsxs(StyledProgressText, { children: [progressValue2.toFixed(2), "%"] }), _jsx(StyledMessage, { children: props.textSecondary })] }), props.isCancelable && _jsx(StyledAbortButton, { onClick: () => props.onAbortClick?.(props.abortController), children: SDKUI_Localizator.Abort })] }) }));
+};
+export const TMLayoutWaitingContainer = ({ showWaitPanel, showWaitPanelPrimary, showWaitPanelSecondary, waitPanelTitle, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, isCancelable, abortController, gap = 3, onClick, justifyContent = 'flex-start', alignItems = 'flex-start', children, direction = 'vertical' }) => {
+    return (_jsxs(TMLayoutContainer, { gap: gap, justifyContent: justifyContent, alignItems: alignItems, direction: direction, children: [children, showWaitPanel && (_jsx(TMWaitPanel, { title: waitPanelTitle, showPrimary: showWaitPanelPrimary, textPrimary: waitPanelTextPrimary, valuePrimary: waitPanelValuePrimary, maxValuePrimary: waitPanelMaxValuePrimary, showSecondary: showWaitPanelSecondary, textSecondary: waitPanelTextSecondary, valueSecondary: waitPanelValueSecondary, maxValueSecondary: waitPanelMaxValueSecondary, isCancelable: isCancelable, abortController: abortController, onAbortClick: (abortController) => { setTimeout(() => { abortController?.abort(); }, 1000); } }))] }));
+};

package/lib/components/choosers/TMCultureIDPicker.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { CultureIDs } from '@topconsultnpm/sdk-ts';
+import { ITMChooserProps } from '../../ts';
+interface TMCultureIDPickerProps extends ITMChooserProps {
+    selectedValue: CultureIDs | undefined;
+    onSelectCultureID: (cultureID: CultureIDs) => void;
+}
+declare const TMCultureIDPicker: React.FC<TMCultureIDPickerProps>;
+export default TMCultureIDPicker;

package/lib/components/choosers/TMCultureIDPicker.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import styled from 'styled-components';
+import { IconSearch, SDKUI_Localizator } from '../../helper';
+import { CultureIDs } from '@topconsultnpm/sdk-ts';
+import { getCultureIDImg } from '../editors/TMLocalizedTextBox';
+import TMModal from '../base/TMModal';
+import TMSummary from '../editors/TMSummary';
+import { StyledDivHorizontal } from '../..';
+const CULTUREIDs_DATASOURCE = [
+    { value: CultureIDs.It_IT, display: "Italiano", icon: _jsx("img", { src: getCultureIDImg(CultureIDs.It_IT), alt: "Lang", width: 16, height: 16 }) },
+    { value: CultureIDs.Fr_FR, display: "Française", icon: _jsx("img", { src: getCultureIDImg(CultureIDs.Fr_FR), alt: "Lang", width: 16, height: 16 }) },
+    { value: CultureIDs.Pt_PT, display: "Português", icon: _jsx("img", { src: getCultureIDImg(CultureIDs.Pt_PT), alt: "Lang", width: 16, height: 16 }) },
+    { value: CultureIDs.En_US, display: "English", icon: _jsx("img", { src: getCultureIDImg(CultureIDs.En_US), alt: "Lang", width: 16, height: 16 }) },
+    { value: CultureIDs.Es_ES, display: "Español", icon: _jsx("img", { src: getCultureIDImg(CultureIDs.Es_ES), alt: "Lang", width: 16, height: 16 }) },
+    { value: CultureIDs.De_DE, display: "Deutsch", icon: _jsx("img", { src: getCultureIDImg(CultureIDs.De_DE), alt: "Lang", width: 16, height: 16 }) },
+];
+const PickerContainer = styled.div `
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 20px;
+`;
+const ItemsContainer = styled.div `
+    display: flex;
+    flex-wrap: wrap;
+    gap: 15px;
+    justify-content: center;
+`;
+const CultureItem = styled.div `
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    text-align: center;
+    font-size: 0.9em;
+    padding: 10px 15px;
+    border-radius: 8px;
+    border: 2px solid transparent;
+    transition: all 0.2s ease-in-out;
+    width: 120px;
+
+    &:hover {
+        background-color: #f0f0f0;
+    }
+
+    ${props => props.$isSelected && `
+        border-color: #007bff;
+        background-color: #e6f2ff;
+    `}
+`;
+const FlagIcon = styled.div `
+    margin-bottom: 5px;
+    font-size: 2em;
+`;
+const TMCultureIDPicker = ({ selectedValue, onSelectCultureID, placeHolder, width = '100%', icon, backgroundColor, readOnly = false, openChooserBySingleClick = false, buttons = [], elementStyle, isModifiedWhen, label, showClearButton = false, validationItems = [], onValueChanged }) => {
+    const [showPicker, setShowPicker] = useState(false);
+    const getCultureIDName = (cultureID) => {
+        const item = CULTUREIDs_DATASOURCE.find(c => c.value === cultureID);
+        return item ? item.display : '';
+    };
+    const renderTemplate = () => {
+        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: () => {
+                                onSelectCultureID(item.value);
+                                setShowPicker(false);
+                            }, children: [_jsx(FlagIcon, { children: item.icon }), _jsx("span", { children: item.display })] }, item.value))) }) }) })] }));
+};
+export default TMCultureIDPicker;

package/lib/components/choosers/TMDataListItemChooser.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { DataListItemDescriptor } from '@topconsultnpm/sdk-ts';
+import { ITMChooserFormProps, ITMChooserProps } from '../../ts';
+interface ITMDataListItemChooserProps extends ITMChooserProps {
+    /** id della lista dati da gestire  */
+    dataListId: number | undefined;
+    /** Contiene i values selezionati  */
+    values?: string[];
+    /** Visualizza il bordo  */
+    showBorder?: boolean;
+}
+declare const TMDataListItemChooser: React.FunctionComponent<ITMDataListItemChooserProps>;
+export default TMDataListItemChooser;
+interface ITMDataListItemChooserFormProps extends ITMChooserFormProps<DataListItemDescriptor> {
+    dataListId: number | undefined;
+}
+export declare const TMDataListItemChooserForm: React.FunctionComponent<ITMDataListItemChooserFormProps>;