@topconsultnpm/sdkui-react 6.20.0-dev1.14 → 6.20.0-dev1.15

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

@@ -1,32 +0,0 @@
-import React from 'react';
-export interface ITMTreeItem {
-    key: string | undefined;
-    name?: string;
-    expanded?: boolean;
-    hidden?: boolean;
-    isLoaded?: boolean;
-    isContainer: boolean;
-    items?: ITMTreeItem[];
-    visibleItemsCount?: number;
-    totalItemsCount?: number;
-}
-interface ITMTreeViewProps<T extends ITMTreeItem> {
-    dataSource?: T[];
-    focusedItem?: T | null;
-    selectedItems?: T[];
-    allowMultipleSelection?: boolean;
-    calculateItemsForNode?: (node: T) => Promise<T[] | undefined>;
-    itemRender: (item: T | null) => JSX.Element;
-    onFocusedItemChanged?: (item: T | null) => void;
-    onSelectionChanged?: (selectedItems: T[]) => void;
-    onNodeUpdate?: (updatedNode: T) => void;
-    onDataChanged?: (items: T[]) => void;
-    shouldDelayFocusOnEvent?: (node: T, event: React.MouseEvent) => boolean;
-    itemsPerPage?: number;
-    showLoadMoreButton?: boolean;
-}
-declare const TMTreeView: <T extends ITMTreeItem>({ dataSource, focusedItem, selectedItems, allowMultipleSelection, onDataChanged, calculateItemsForNode, itemRender, onNodeUpdate, onFocusedItemChanged, onSelectionChanged, shouldDelayFocusOnEvent, itemsPerPage, showLoadMoreButton }: ITMTreeViewProps<T>) => import("react/jsx-runtime").JSX.Element;
-export default TMTreeView;
-export declare const StyledTreeNode: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $isSelected?: boolean;
-}>> & string;

package/lib/components/base/TMTreeView.js

@@ -1,356 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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) => {
-    const calculateProgress = (value = 0, maxValue = 0) => {
-        if (maxValue === 0)
-            return 0;
-        const progress = (value / maxValue) * 100;
-        return Number.isFinite(progress) ? progress : 0;
-    };
-    let progressValue1 = calculateProgress(props.valuePrimary, props.maxValuePrimary);
-    let progressValue2 = calculateProgress(props.valueSecondary, props.maxValueSecondary);
-    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

@@ -1,9 +0,0 @@
-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

@@ -1,72 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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>;