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

package/lib/components/base/TMAccordionNew.js

@@ -1,326 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useEffect, useCallback } from 'react';
-import styled from 'styled-components';
-import { ContextMenu, LoadIndicator } from 'devextreme-react';
-import { LocalStorageService } from '@topconsultnpm/sdk-ts';
-import TMTooltip from './TMTooltip';
-const Container = styled.div `
-    width: 100%;
-    height: 100%;
-    overflow-y: auto;
-    overflow-x: hidden;
-    padding: 5px;
-    
-    &::-webkit-scrollbar {
-        width: 8px;
-    }
-    
-    &::-webkit-scrollbar-track {
-        background: #f1f3f5;
-        border-radius: 4px;
-    }
-    
-    &::-webkit-scrollbar-thumb {
-        background: #adb5bd;
-        border-radius: 4px;
-        
-        &:hover {
-            background: #868e96;
-        }
-    }
-
-    &::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        z-index: -1;
-    }
-`;
-const AccordionItem = styled.div `
-    margin-bottom: 16px;
-    border-radius: 5px;
-    background: white;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-    overflow: hidden;
-    transition: box-shadow 0.3s ease;
-    
-    &:hover {
-        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
-    }
-`;
-const AccordionHeader = styled.div `
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 6px 12px;
-    background: ${props => `linear-gradient(135deg, ${props.$color}15 0%, ${props.$color}08 100%)`};
-    border-left: 4px solid ${props => props.$color};
-    cursor: pointer;
-    transition: all 0.3s ease;
-    
-    &:hover {
-        background: ${props => `linear-gradient(135deg, ${props.$color}25 0%, ${props.$color}15 100%)`};
-    }
-`;
-const AccordionTitle = styled.div `
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    flex: 1;
-`;
-const TitleText = styled.h3 `
-    margin: 0;
-    font-size: 14px;
-    font-weight: 600;
-    color: #212529;
-    display: flex;
-    align-items: center;
-    gap: 6px;
-`;
-const BadgeContainer = styled.div `
-    display: flex;
-    align-items: center;
-    gap: 6px;
-`;
-const Badge = styled.div `
-    min-width: 22px;
-    height: 22px;
-    padding: 0 8px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: ${props => props.$color};
-    color: white;
-    border-radius: 11px;
-    font-size: 11px;
-    font-weight: 700;
-    box-shadow: 0 2px 6px ${props => props.$color}40;
-`;
-const CustomComponentContainer = styled.div `
-    padding: 8px;
-`;
-const ErrorMessage = styled.div `
-    padding: 20px;
-    text-align: center;
-    color: #fa5252;
-    font-size: 14px;
-    font-weight: 500;
-`;
-const ToggleIcon = styled.div `
-    width: 24px;
-    height: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: white;
-    border-radius: 6px;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    transform: ${props => props.$isOpen ? 'rotate(180deg)' : 'rotate(0deg)'};
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-`;
-const AccordionContent = styled.div `
-    max-height: ${props => props.$isOpen ? `${props.$maxHeight}px` : '0'};
-    overflow: hidden;
-    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-`;
-const ItemsList = styled.div `
-    padding: 4px;
-`;
-const ListItem = styled.div `
-    padding: 2px;
-    margin: 2px 0;
-    border-radius: 6px;
-    background: ${props => props.$isSelected ? `${props.$color}30` : 'transparent'};
-    border: none;
-    transition: background 0.2s ease;
-    cursor: pointer;
-    
-    &:hover {
-        background: ${props => props.$isSelected ? `${props.$color}40` : `${props.$color}08`};
-    }
-`;
-const LoadingContainer = styled.div `
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 200px;
-`;
-const DEFAULT_COLORS = ['#339af0', '#fa5252', '#40c057', '#f59f00', '#e64980', '#7950f2'];
-const TMAccordion = ({ groups, localStorageKey, selectedItem, onSelectedItemChange }) => {
-    const [openAccordions, setOpenAccordions] = useState({});
-    const [isInitialized, setIsInitialized] = useState(false);
-    const [anchorEl, setAnchorEl] = useState(null);
-    const [contextMenuItems, setContextMenuItems] = useState([]);
-    const [focusedItem, setFocusedItem] = useState(undefined);
-    const [headerContextGroupId, setHeaderContextGroupId] = useState(null);
-    const [headerContextVisible, setHeaderContextVisible] = useState(false);
-    const [headerContextPosition, setHeaderContextPosition] = useState(null);
-    useEffect(() => {
-        const initialState = {};
-        if (!groups || groups.length === 0) {
-            setIsInitialized(true);
-            return;
-        }
-        if (localStorageKey) {
-            const savedState = LocalStorageService.getItem(localStorageKey);
-            if (savedState && savedState.length === groups.length) {
-                groups.forEach((group, index) => {
-                    initialState[group.id] = savedState[index] === '1';
-                });
-            }
-            else {
-                groups.forEach(group => {
-                    initialState[group.id] = group.isExpanded !== false;
-                });
-            }
-        }
-        else {
-            groups.forEach(group => {
-                initialState[group.id] = group.isExpanded !== false;
-            });
-        }
-        setOpenAccordions(initialState);
-        setIsInitialized(true);
-    }, []);
-    useEffect(() => {
-        if (!isInitialized || !groups)
-            return;
-        setOpenAccordions(prev => {
-            const newState = { ...prev };
-            groups.forEach(group => {
-                if (!(group.id in newState)) {
-                    newState[group.id] = group.isExpanded !== false;
-                }
-            });
-            Object.keys(newState).forEach(groupId => {
-                if (!groups.some(g => g.id === groupId)) { //nosonar
-                    delete newState[groupId];
-                }
-            });
-            return newState;
-        });
-    }, [groups, isInitialized]);
-    useEffect(() => {
-        if (!isInitialized || !groups)
-            return;
-        if (localStorageKey && Object.keys(openAccordions).length === groups.length) {
-            const stateString = groups.map(group => openAccordions[group.id] ? '1' : '0').join('');
-            LocalStorageService.setItem(localStorageKey, stateString);
-        }
-    }, [openAccordions, groups, localStorageKey, isInitialized]);
-    const toggleAccordion = (groupId) => {
-        setOpenAccordions(prev => ({ ...prev, [groupId]: !prev[groupId] }));
-    };
-    const handleItemClick = (item, group) => {
-        if (onSelectedItemChange) {
-            onSelectedItemChange(item);
-        }
-        if (group.onItemClick) {
-            group.onItemClick(item);
-        }
-    };
-    const handleItemDoubleClick = (item, group) => {
-        if (group.onItemDoubleClick) {
-            group.onItemDoubleClick(item);
-        }
-    };
-    const handleContextMenu = (event, item, group) => {
-        event.preventDefault();
-        if (!group.contextMenuItems) {
-            return;
-        }
-        const menuItems = typeof group.contextMenuItems === 'function'
-            ? group.contextMenuItems(item)
-            : group.contextMenuItems;
-        if (menuItems.length === 0) {
-            return;
-        }
-        setAnchorEl(event.currentTarget);
-        setContextMenuItems(menuItems);
-    };
-    const closeContextMenu = useCallback(() => {
-        setAnchorEl(null);
-    }, []);
-    const handleHeaderContextMenu = (event, groupId) => {
-        event.preventDefault();
-        event.stopPropagation();
-        setHeaderContextPosition({ x: event.clientX, y: event.clientY });
-        setHeaderContextGroupId(groupId);
-        setHeaderContextVisible(true);
-    };
-    const handleHeaderClick = (event, groupId) => {
-        if (event.button !== 0)
-            return;
-        toggleAccordion(groupId);
-    };
-    const closeHeaderContextMenu = useCallback(() => {
-        setHeaderContextVisible(false);
-        setHeaderContextPosition(null);
-        setHeaderContextGroupId(null);
-    }, []);
-    const headerContextMenuItems = headerContextGroupId ? [
-        {
-            text: openAccordions[headerContextGroupId] ? 'Collassa' : 'Espandi',
-            onClick: () => {
-                toggleAccordion(headerContextGroupId);
-                closeHeaderContextMenu();
-            }
-        }
-    ] : [];
-    const getGroupColor = (group, index) => {
-        return group.color || DEFAULT_COLORS[index % DEFAULT_COLORS.length];
-    };
-    const renderBadges = (group, color) => {
-        if (group.badges && group.badges.length > 0) {
-            return (_jsx(BadgeContainer, { children: group.badges.map((badgeData, idx) => {
-                    const badgeKey = `${group.id}-badge-${badgeData.badge}-${idx}`;
-                    const badge = _jsx(Badge, { "$color": color, children: badgeData.badge });
-                    if (badgeData.tooltip) {
-                        return (_jsx(TMTooltip, { content: badgeData.tooltip, children: badge }, badgeKey));
-                    }
-                    return _jsx("span", { children: badge }, badgeKey);
-                }) }));
-        }
-        if (group.dataSource && group.dataSource.length > 0) {
-            return _jsx(Badge, { "$color": color, children: group.dataSource.length });
-        }
-        return null;
-    };
-    const renderAccordion = (group, index) => {
-        const color = getGroupColor(group, index);
-        const isOpen = openAccordions[group.id] ?? true;
-        if (group.customComponent) {
-            return (_jsxs(AccordionItem, { children: [_jsxs(AccordionHeader, { "$color": color, "$isOpen": isOpen, onClick: (e) => handleHeaderClick(e, group.id), onContextMenu: (e) => handleHeaderContextMenu(e, group.id), children: [_jsxs(AccordionTitle, { children: [group.icon, _jsx(TitleText, { children: group.title })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [renderBadges(group, color), _jsx(ToggleIcon, { "$isOpen": isOpen, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M4 6L8 10L12 6", stroke: "#495057", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), isOpen && (_jsx(CustomComponentContainer, { children: group.customComponent }))] }, group.id));
-        }
-        if (!group.dataSource || group.dataSource.length === 0)
-            return null;
-        if (!group.renderItem) {
-            return (_jsxs(AccordionItem, { children: [_jsxs(AccordionHeader, { "$color": color, "$isOpen": isOpen, onClick: (e) => handleHeaderClick(e, group.id), onContextMenu: (e) => handleHeaderContextMenu(e, group.id), children: [_jsxs(AccordionTitle, { children: [group.icon, _jsx(TitleText, { children: group.title })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [renderBadges(group, color), _jsx(ToggleIcon, { "$isOpen": isOpen, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M4 6L8 10L12 6", stroke: "#495057", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), _jsx(AccordionContent, { "$isOpen": isOpen, "$maxHeight": 100, children: _jsxs(ErrorMessage, { children: ["\u26A0\uFE0F renderItem function is required for \"", group.title, "\" group"] }) })] }, group.id));
-        }
-        const itemHeight = group.itemHeight || 80;
-        const maxHeight = group.dataSource.length * itemHeight + 20;
-        return (_jsxs(AccordionItem, { children: [_jsxs(AccordionHeader, { "$color": color, "$isOpen": isOpen, onClick: (e) => handleHeaderClick(e, group.id), onContextMenu: (e) => handleHeaderContextMenu(e, group.id), children: [_jsxs(AccordionTitle, { children: [group.icon, _jsx(TitleText, { children: group.title })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [renderBadges(group, color), _jsx(ToggleIcon, { "$isOpen": isOpen, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M4 6L8 10L12 6", stroke: "#495057", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), _jsx(AccordionContent, { "$isOpen": isOpen, "$maxHeight": maxHeight, children: _jsx(ItemsList, { children: group.dataSource.map((item, itemIndex) => {
-                            const isSelected = selectedItem === item;
-                            const isFocused = focusedItem === item;
-                            return (_jsx(ListItem, { "$isSelected": isSelected, "$color": color, onClick: () => handleItemClick(item, group), onDoubleClick: () => handleItemDoubleClick(item, group), onMouseEnter: () => setFocusedItem(item), onMouseLeave: () => setFocusedItem(undefined), onContextMenu: (e) => handleContextMenu(e, item, group), children: group.renderItem(item, isSelected, isFocused, color) }, itemIndex * 2));
-                        }) }) })] }, group.id));
-    };
-    if (!isInitialized) {
-        return (_jsx(LoadingContainer, { children: _jsx(LoadIndicator, { height: 40, width: 40 }) }));
-    }
-    if (!groups || groups.length === 0) {
-        return (_jsx(Container, { children: _jsx(ErrorMessage, { children: "\u26A0\uFE0F No accordion groups defined" }) }));
-    }
-    const handleContainerContextMenu = (event) => {
-        if (event.target === event.currentTarget) {
-            event.preventDefault();
-        }
-    };
-    return (_jsxs(_Fragment, { children: [_jsx(Container, { onContextMenu: handleContainerContextMenu, children: groups.map((group, index) => renderAccordion(group, index)) }), anchorEl && contextMenuItems.length > 0 && (_jsx(ContextMenu, { dataSource: contextMenuItems, target: anchorEl, onHiding: closeContextMenu })), headerContextPosition && headerContextMenuItems.length > 0 && (_jsx(ContextMenu, { dataSource: headerContextMenuItems, visible: headerContextVisible, position: { my: 'left top', at: 'left top', offset: `${headerContextPosition.x} ${headerContextPosition.y}` }, onHiding: closeHeaderContextMenu }))] }));
-};
-export default TMAccordion;

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

@@ -1,73 +0,0 @@
-interface AlertVariant {
-    variant: string;
-    color: string;
-    borderColor: string;
-    icon: JSX.Element;
-    textColor: string;
-}
-interface AlertModes {
-    warning: AlertVariant;
-    error: AlertVariant;
-    success: AlertVariant;
-    info: AlertVariant;
-}
-declare const TMAlertPosition: {
-    readonly TOP_RIGHT: {
-        readonly top: "10px";
-        readonly right: "10px";
-        readonly position: "absolute";
-    };
-    readonly TOP_CENTER: {
-        readonly top: "10px";
-        readonly left: "50%";
-        readonly transform: "translateX(-50%)";
-        readonly position: "absolute";
-    };
-    readonly TOP_LEFT: {
-        readonly top: "10px";
-        readonly left: "10px";
-        readonly position: "absolute";
-    };
-    readonly BOTTOM_RIGHT: {
-        readonly bottom: "10px";
-        readonly right: "10px";
-        readonly position: "absolute";
-    };
-    readonly BOTTOM_LEFT: {
-        readonly bottom: "10px";
-        readonly left: "10px";
-        readonly position: "absolute";
-    };
-    readonly BOTTOM_CENTER: {
-        readonly bottom: "10px";
-        readonly left: "50%";
-        readonly transform: "translateX(-50%)";
-        readonly position: "absolute";
-    };
-    readonly CENTER_RIGHT: {
-        readonly top: "50%";
-        readonly right: "10px";
-        readonly transform: "translateY(-50%)";
-        readonly position: "absolute";
-    };
-    readonly CENTER_LEFT: {
-        readonly top: "50%";
-        readonly left: "10px";
-        readonly transform: "translateY(-50%)";
-        readonly position: "absolute";
-    };
-    readonly CENTER_CENTER: {
-        readonly top: "50%";
-        readonly left: "50%";
-        readonly transform: "translate(-50%, -50%)";
-        readonly position: "absolute";
-    };
-};
-declare const ShowAlert: ({ mode, message, duration, title, position }: {
-    mode: keyof AlertModes;
-    message: string;
-    duration?: number;
-    title?: string;
-    position?: keyof typeof TMAlertPosition;
-}) => void;
-export default ShowAlert;

package/lib/components/base/TMAlert.js

@@ -1,77 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState, useEffect } from 'react';
-import ReactDOM from 'react-dom/client';
-import { IconCloseCircle, IconInfo, IconSuccess, IconWarning } from '../../helper';
-const TMAlertPosition = {
-    TOP_RIGHT: { top: '10px', right: '10px', position: 'absolute' },
-    TOP_CENTER: { top: '10px', left: '50%', transform: 'translateX(-50%)', position: 'absolute' },
-    TOP_LEFT: { top: '10px', left: '10px', position: 'absolute' },
-    BOTTOM_RIGHT: { bottom: '10px', right: '10px', position: 'absolute' },
-    BOTTOM_LEFT: { bottom: '10px', left: '10px', position: 'absolute' },
-    BOTTOM_CENTER: { bottom: '10px', left: '50%', transform: 'translateX(-50%)', position: 'absolute' },
-    CENTER_RIGHT: { top: '50%', right: '10px', transform: 'translateY(-50%)', position: 'absolute' },
-    CENTER_LEFT: { top: '50%', left: '10px', transform: 'translateY(-50%)', position: 'absolute' },
-    CENTER_CENTER: { top: '50%', left: '50%', transform: 'translate(-50%, -50%)', position: 'absolute' },
-};
-const Mode = {
-    warning: {
-        variant: 'warning',
-        color: 'transparent linear-gradient(272deg, #FFFFFF 0%, #EAD305 100%) 0% 0% no-repeat padding-box',
-        borderColor: '#ba873d',
-        textColor: '#6e5024',
-        icon: _jsx(IconWarning, { fontSize: 16, color: '#F0AD4E' }),
-    },
-    error: {
-        variant: 'error',
-        color: 'transparent linear-gradient(272deg, #FFFFFF 0%, #E87A8E 100%) 0% 0% no-repeat padding-box',
-        borderColor: '#a8413e',
-        textColor: '#4a1b1b',
-        icon: _jsx(IconCloseCircle, { fontSize: 16, color: '#D9534F' }),
-    },
-    success: {
-        variant: 'success',
-        color: 'transparent linear-gradient(272deg, #FFFFFF 0%, #6DB735 100%) 0% 0% no-repeat padding-box',
-        borderColor: '#4d994d',
-        textColor: '#203d20',
-        icon: _jsx(IconSuccess, { fontSize: 16, color: '#5CB85C' }),
-    },
-    info: {
-        variant: 'info',
-        color: 'transparent linear-gradient(272deg, #FFFFFF 0%, #679CE8 100%) 0% 0% no-repeat padding-box',
-        borderColor: '#285f8f',
-        textColor: '#16354f',
-        icon: _jsx(IconInfo, { fontSize: 16, color: '#337AB7' }),
-    },
-};
-// const TMAlert = ({ mode, duration = 5000, message, position = 'BOTTOM_CENTER' }: { mode: keyof AlertModes, duration?: number, message: string, position?: keyof typeof TMAlertPosition }) => {
-const TMAlert = ({ mode, duration = 1000, title, message, position = 'BOTTOM_RIGHT' }) => {
-    const [currentWidth, setCurrentWidth] = useState(window.innerWidth);
-    const [container] = useState(document.getElementsByClassName('tm-alert-temporary-container'));
-    useEffect(() => {
-        window.addEventListener('resize', () => {
-            setCurrentWidth(window.innerWidth);
-        });
-    }, [currentWidth]);
-    useEffect(() => {
-        const tiemout = setTimeout(() => {
-            let container = document.getElementsByClassName('tm-alert-temporary-container');
-            container[0]?.remove();
-        }, duration + 50);
-        return () => {
-            clearTimeout(tiemout);
-        };
-    }, [container]);
-    // Determine the style for the alert container based on the position prop
-    const alertContainerStyle = TMAlertPosition[position];
-    return (_jsx("div", { style: { width: '100%', paddingTop: '3px', ...alertContainerStyle }, children: _jsx("div", { className: 'tm-alert-animation-style', style: { animationDuration: `${duration}ms`, position: 'relative', float: 'right', zIndex: '20000999', width: '356px', height: '86px', borderRadius: '8px', overflow: 'hidden', border: '2px white solid', boxShadow: '0px 3px 6px #00000029' }, children: _jsx("div", { className: 'tm-alert-animation-style', style: { animationDuration: `${duration}ms` }, children: _jsxs("div", { className: 'tm-alert-container', style: { background: Mode[mode].color, animationDuration: `${duration}ms` }, children: [_jsxs("div", { className: "tm-alert-context", style: { position: 'relative' }, children: [_jsx("div", { className: 'tm-alert-icon', style: { position: 'absolute', top: '12px', left: '12px', paddingTop: '1px' }, children: Mode[mode].icon }), _jsx("div", { style: { color: Mode[mode].textColor, position: 'absolute', top: '15px', left: '45px', textAlign: 'left', fontSize: '1.1rem', fontWeight: 'bold', maxWidth: '280px' }, children: title }), _jsx("div", { style: { color: Mode[mode].textColor, position: 'absolute', top: '35px', left: '45px', textAlign: 'left', fontSize: '1rem', maxWidth: '280px' }, children: message })] }), _jsx("div", { className: 'tm-alert-loading', style: { backgroundImage: `linear-gradient(to right, ${Mode[mode].borderColor}, ${Mode[mode].textColor})`, animationDuration: `${duration}ms` } })] }) }) }) }));
-};
-const ShowAlert = ({ mode, message, duration, title, position = 'BOTTOM_RIGHT' }) => {
-    let container = document.createElement('div');
-    container.setAttribute("class", 'tm-alert-temporary-container');
-    document.body.appendChild(container);
-    // container.style.position = 'relative'
-    container.style.display = 'flex';
-    const root = ReactDOM.createRoot(container);
-    root.render(_jsx(React.StrictMode, { children: _jsx(TMAlert, { message: message, mode: mode, duration: duration, title: title, position: position }) }));
-};
-export default ShowAlert;

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

@@ -1,25 +0,0 @@
-import React from 'react';
-import { ITopMediaSession } from '@topconsultnpm/sdk-ts';
-export declare class TMFileSystemItem {
-    dataItem: any;
-    name: string;
-    thumbnail: string;
-    isDirectory: boolean;
-    size: number | undefined;
-    dateModified: Date | undefined;
-}
-interface ITMAreaManager {
-    width?: string;
-    height?: string;
-    areaChoose?: any;
-    initialPath?: string;
-    areaStatus?: boolean;
-    isPathChooser?: boolean;
-    showOnlyFolders?: boolean;
-    tmSession?: ITopMediaSession;
-    selectionMode?: 'single' | 'multiple';
-    onFileChanged?: (event: string) => void;
-    onFolderChanged?: (event: string) => void;
-}
-declare const TMAreaManager: React.FC<ITMAreaManager>;
-export default TMAreaManager;