@topconsultnpm/sdkui-react 6.17.0-test10

package/lib/components/base/TMRightSidebar.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { TMColors } from '../../utils/theme';
+import { StyledAnimatedComponentScaleColor } from './Styled';
+const TMRightSidebar = ({ items = [], onItemClick, selectedItem, showPanel = false }) => {
+    const [hoveredItem, setHoveredItem] = useState(null);
+    const [activeItems, setActiveItems] = useState(new Set());
+    useEffect(() => {
+        setActiveItems(new Set(items.filter(item => item.isActive).map(item => item.id)));
+    }, [items]);
+    useEffect(() => {
+        if (selectedItem) {
+            setActiveItems(new Set([selectedItem]));
+        }
+    }, [selectedItem]);
+    const toggleItem = (id) => {
+        setActiveItems(prev => {
+            const newActiveItems = new Set(prev);
+            if (newActiveItems.has(id)) {
+                newActiveItems.delete(id);
+            }
+            else {
+                newActiveItems.add(id);
+            }
+            return newActiveItems;
+        });
+    };
+    const onClickHandler = (item) => {
+        if (!item.disabled) {
+            toggleItem(item.id);
+            onItemClick && onItemClick(item.id, activeItems.has(item.id));
+        }
+    };
+    return (_jsx(SidebarContainer, { children: items.map((item, index) => (item.visible !== false && (_jsxs(StyledMenuItem, { "$disabled": item.disabled, style: { paddingTop: '10px', borderTop: item.beginGroup ? '2px solid #9c9c9c' : 'none' }, "$isHovered": hoveredItem === item.id, "$isSelected": item.isActive, onMouseEnter: () => setHoveredItem(item.id), onMouseLeave: () => setHoveredItem(null), onClick: () => !item.disabled && (item.onClick?.() ?? onClickHandler(item)), children: [_jsx(StyledAnimatedComponentScaleColor, { "$delay": `${(index * 150) + 650}ms`, children: item.icon }), _jsx("span", { children: item.visibleName })] }, item.id)))) }));
+};
+export default TMRightSidebar;
+// Styled Components
+const SidebarContainer = styled.div `
+  width: 30px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: #203e5a;
+  transition: width 0.3s ease;
+  border-bottom-right-radius: 10px;
+`;
+const StyledMenuItem = styled.div `
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: 8px 0;
+  color: ${props => !props.$disabled ? (props.$isSelected ? props.$selectedColor ?? (TMColors.tertiary) : '#fff') : '#929292'};
+  cursor: ${props => props.$disabled ? 'default' : 'pointer'};
+  position: relative;
+  justify-content: center;
+  background-color: ${props => !props.$disabled ? (props.$isSelected ? '#2e2e2e' : 'transparent') : 'transparent'};
+  transition: background-color 0.3s ease, color 0.3s ease;
+
+  &:hover {
+    background-color: ${props => !props.$disabled && (TMColors.primaryColor)};
+  }
+
+  span {
+    position: absolute;
+    right: 40px;
+    white-space: nowrap;
+    overflow: hidden;
+    font-size: 14px;
+    opacity: ${({ $isHovered }) => ($isHovered ? 1 : 0)};
+    padding: 4px 8px;
+    background-color: #222;
+    border-radius: 4px;
+    color: #fff;
+    pointer-events: none;
+    transition: opacity 0.1s ease, transform 0.1s ease;
+    transform: ${({ $isHovered }) => ($isHovered ? 'translateX(0)' : 'translateX(20px)')};
+  }
+`;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+interface ITMShowAllOrMaxItemsButtonProps {
+    showAll: boolean;
+    dataSourceLength: number;
+    onClick?: () => void;
+}
+declare const TMShowAllOrMaxItemsButton: React.FC<ITMShowAllOrMaxItemsButtonProps>;
+export default TMShowAllOrMaxItemsButton;

package/lib/components/base/TMShowAllOrMaxItemsButton.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { getListMaxItems, SDKUI_Localizator } from '../../helper';
+import { TMColors } from '../../utils/theme';
+import TMButton from './TMButton';
+import { useDeviceType, DeviceType } from './TMDeviceProvider';
+const TMShowAllOrMaxItemsButton = ({ showAll, dataSourceLength, onClick }) => {
+    const deviceType = useDeviceType();
+    let maxItems = getListMaxItems(deviceType ?? DeviceType.DESKTOP);
+    const captionText = showAll ? SDKUI_Localizator.ShowLess : SDKUI_Localizator.ShowAll;
+    const isMobile = deviceType === DeviceType.MOBILE;
+    return (_jsx(_Fragment, { children: isMobile ?
+            _jsx(TMButton, { elementStyle: { position: 'absolute', right: '10px' }, btnStyle: 'icon', caption: captionText, icon: showAll ?
+                    _jsx("div", { style: { backgroundColor: TMColors.button_primary, minWidth: '30px', minHeight: '30px', borderRadius: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx("p", { style: { color: 'white' }, children: `-${dataSourceLength - maxItems}` }) }) :
+                    _jsx("div", { style: { backgroundColor: TMColors.button_primary, minWidth: '30px', minHeight: '30px', borderRadius: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx("p", { style: { color: 'white' }, children: `+${dataSourceLength - maxItems}` }) }), onClick: () => onClick?.() })
+            :
+                _jsx(TMButton, { elementStyle: { position: 'absolute', right: '10px' }, width: 'auto', btnStyle: 'advanced', advancedColor: TMColors.button_primary, caption: captionText, showTooltip: false, icon: showAll
+                        ? _jsx("p", { style: { color: 'white' }, children: `-${dataSourceLength - maxItems}` })
+                        : _jsx("p", { style: { color: 'white' }, children: `+${dataSourceLength - maxItems}` }), onClick: () => onClick?.() }) }));
+};
+export default TMShowAllOrMaxItemsButton;

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

@@ -0,0 +1,14 @@
+interface ITMSpinner {
+    backgroundColor?: string;
+    fontSize?: string;
+    description?: string;
+    width?: string;
+    flat?: boolean;
+}
+declare const Spinner: ({ backgroundColor, description, fontSize, width, flat }: ITMSpinner) => import("react/jsx-runtime").JSX.Element;
+declare class TMSpinner {
+    static show({ description, backgroundColor, fontSize, flat }?: ITMSpinner): void;
+    static hide(): void;
+}
+export { Spinner };
+export default TMSpinner;

package/lib/components/base/TMSpinner.js

@@ -0,0 +1,160 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import styled, { keyframes } from 'styled-components';
+import { FontSize } from '../../utils/theme';
+import six from '../../assets/six.png';
+// Keyframe per l'animazione dello spinner
+const spinnerAnimation = keyframes `
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+`;
+// Container principale dello spinner - occupa tutto lo spazio e centra il contenuto
+const StyledSpinnerContainer = styled.div `
+    width: 100%;
+    height: calc(100% - 50px);
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 2000000001;
+    background-color: ${props => props.$backgroundColor || 'transparent'};
+`;
+// Wrapper che contiene lo spinner e la descrizione
+const StyledSpinnerWrapper = styled.div `
+    position: relative;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: ${props => props.$width || 'fit-content'};
+    height: fit-content;
+    max-width: 250px;
+    max-height: 200px;
+    padding: 10px;
+    border-radius: 5px;
+    background-color: ${props => props.$flat ? 'transparent' : '#fcfcfc'};
+    box-shadow: ${props => props.$flat ? 'none' : '2px 2px 2px rgba(0, 0, 0, 0.3)'};
+`;
+// Container dell'animazione dello spinner (8 pallini colorati)
+const StyledSpinnerAnimation = styled.div `
+    display: inline-block;
+    width: 80px;
+    height: 80px;
+    z-index: 2000000;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    & div {
+        animation: ${spinnerAnimation} 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+        transform-origin: 40px 40px;
+    }
+
+    & div:after {
+        content: " ";
+        display: block;
+        position: absolute;
+        width: 7px;
+        height: 7px;
+        border-radius: 50%;
+        background: #0c448e;
+        margin: -4px 0 0 -4px;
+    }
+
+    & div:nth-child(1) {
+        animation-delay: -0.036s;
+    }
+    & div:nth-child(1):after {
+        top: 63px;
+        left: 63px;
+        background: #f7a51f;
+    }
+    & div:nth-child(2) {
+        animation-delay: -0.072s;
+    }
+    & div:nth-child(2):after {
+        top: 68px;
+        left: 56px;
+        background: #f7a51f;
+    }
+    & div:nth-child(3) {
+        animation-delay: -0.108s;
+    }
+    & div:nth-child(3):after {
+        top: 71px;
+        left: 48px;
+        background: #d3237b;
+    }
+    & div:nth-child(4) {
+        animation-delay: -0.144s;
+    }
+    & div:nth-child(4):after {
+        top: 72px;
+        left: 40px;
+        background: #d3237b;
+    }
+    & div:nth-child(5) {
+        animation-delay: -0.18s;
+    }
+    & div:nth-child(5):after {
+        top: 71px;
+        left: 32px;
+        background: #d12a1c;
+    }
+    & div:nth-child(6) {
+        animation-delay: -0.216s;
+    }
+    & div:nth-child(6):after {
+        top: 68px;
+        left: 24px;
+        background: #d12a1c;
+    }
+    & div:nth-child(7) {
+        animation-delay: -0.252s;
+    }
+    & div:nth-child(7):after {
+        top: 63px;
+        left: 17px;
+        background: #782b7d;
+    }
+    & div:nth-child(8) {
+        animation-delay: -0.288s;
+    }
+    & div:nth-child(8):after {
+        top: 56px;
+        left: 12px;
+        background: #782b7d;
+    }
+`;
+// Testo della descrizione sotto lo spinner
+const StyledSpinnerDescription = styled.div `
+    font-size: ${props => props.$fontSize || FontSize.defaultFontSize};
+    text-align: center;
+`;
+const Spinner = ({ backgroundColor = 'transparent', description = '', fontSize = FontSize.defaultFontSize, width = 'fit-content', flat = false }) => {
+    return (_jsx(StyledSpinnerContainer, { "$backgroundColor": backgroundColor, children: _jsxs(StyledSpinnerWrapper, { "$width": width, "$flat": flat, children: [_jsxs("div", { style: { position: 'relative', width: '80px', height: '80px' }, children: [_jsx("img", { style: {
+                                position: 'absolute',
+                                top: '50%',
+                                left: '50%',
+                                transform: 'translate(-54%, -54%)'
+                            }, src: six, width: 35, alt: "" }), _jsxs(StyledSpinnerAnimation, { children: [_jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {})] })] }), _jsx(StyledSpinnerDescription, { "$fontSize": fontSize, children: description })] }) }));
+};
+class TMSpinner {
+    static show({ description, backgroundColor, fontSize, flat } = { backgroundColor: 'transparent', description: '', fontSize: FontSize.defaultFontSize, flat: false }) {
+        let container = document.createElement('div');
+        container.setAttribute("id", 'tm-spinner-temporary-container');
+        document.body.appendChild(container);
+        const root = ReactDOM.createRoot(container);
+        root.render(_jsx(React.StrictMode, { children: _jsx(Spinner, { backgroundColor: backgroundColor, fontSize: fontSize, description: description, flat: flat }) }));
+    }
+    static hide() {
+        let container = document.getElementById('tm-spinner-temporary-container');
+        container?.remove();
+    }
+}
+export { Spinner };
+export default TMSpinner;

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

@@ -0,0 +1,20 @@
+import { ValidationItem } from '@topconsultnpm/sdk-ts';
+export interface ITMTabProps {
+    title: string;
+    propsToBeValidated?: string[];
+}
+export declare const TMTab: ({ label, propsToBeValidated, children }: {
+    label?: string;
+    propsToBeValidated?: string[] | undefined;
+    children?: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const TMTabItemBadge: ({ vil }: {
+    vil: ValidationItem[];
+}) => import("react/jsx-runtime").JSX.Element;
+declare const TMTabGroup: ({ children, fontSize, validationItems, onTabIndexChanged }: {
+    onTabIndexChanged?: (e: number) => void;
+    children: any;
+    fontSize?: string;
+    validationItems?: ValidationItem[];
+}) => import("react/jsx-runtime").JSX.Element;
+export default TMTabGroup;

package/lib/components/base/TMTab.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import TabPanel, { Item } from "devextreme-react/tab-panel";
+import { StyledDivHorizontal } from './Styled';
+import { editorColorManager } from '../editors/TMEditorStyled';
+import { TMCard } from './TMLayout';
+const StyledTabItemResultType = styled.div `
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background-color: ${(props) => props.$backgroundColor};
+    color: #fff;
+    font-size: 0.8rem;
+    padding: 0 5px;
+    border-radius: 999em;
+    line-height: 16px;
+    margin-left: 5px;
+`;
+export const TMTab = ({ label = '', propsToBeValidated = [], children }) => { return (_jsx("div", { children: children })); };
+const renderTabItems = (tabItemProps, tabs, vil) => {
+    return (_jsxs(StyledDivHorizontal, { style: { fontSize: '1rem', fontWeight: '600' }, children: [_jsx("span", { children: tabItemProps.title }), tabs.map((tab, index) => { return (_jsx("div", { style: { display: 'flex' }, children: tabItemProps.title == tab.title && _jsx(TMTabItemBadge, { vil: vil?.filter(o => tab.propsToBeValidated?.some((s) => o.PropertyName == s || o.PropertyScopes.includes(s))) ?? [] }) }, index)); })] }));
+};
+export const TMTabItemBadge = ({ vil }) => {
+    return (_jsxs(_Fragment, { children: [" ", vil.length > 0 && _jsx(StyledTabItemResultType, { "$backgroundColor": editorColorManager(vil), children: vil.length }), " "] }));
+};
+const TMTabGroup = ({ children, fontSize, validationItems = [], onTabIndexChanged }) => {
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [tabs, setTabs] = useState(React.Children.toArray(children));
+    const [tabsTitle, setTabsTitle] = useState([]);
+    useEffect(() => { onTabIndexChanged && onTabIndexChanged(selectedIndex); }, [selectedIndex]);
+    useEffect(() => {
+        let arr = [];
+        setTabs(React.Children.toArray(children));
+        for (let child of children) {
+            arr.push({ title: child.props.label, propsToBeValidated: child.props.propsToBeValidated });
+        }
+        setTabsTitle(arr);
+    }, [children]);
+    return (_jsx(TabPanel, { onSelectedIndexChange: (e) => setSelectedIndex(e), height: '100%', width: '100%', itemTitleRender: (tabItemProps) => renderTabItems(tabItemProps, tabsTitle, validationItems), showNavButtons: true, stylingMode: "primary", children: tabs.map((tab, index) => (_jsxs(Item, { title: tab.props.label, children: [" ", _jsx(TMCard, { showBorder: false, padding: true, scrollY: true, children: tab.props.children ? tab.props.children : _jsx("div", {}) }), " "] }, index))) }));
+};
+export default TMTabGroup;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ITMEditorBase } from './TMEditorBase';
+import { Colors } from '../../utils/theme';
+interface ITMToggleButton extends ITMEditorBase {
+    color?: Colors;
+    showTooltip?: boolean;
+    onValueChanged?: VoidFunction;
+}
+declare const TMToggleButton: React.FunctionComponent<ITMToggleButton>;
+export default TMToggleButton;

package/lib/components/base/TMToggleButton.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Colors, FontSize } from '../../utils/theme';
+import { getColor } from '../../helper';
+import styled from 'styled-components';
+import TMTooltip from './TMTooltip';
+// #region Style
+const StyledToggleButtonWrapper = styled.div `
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    width: 100%;
+`;
+const StyledToggleButtonContainer = styled.div `
+  width: 36px;
+  height: 20px;
+  background-color: ${props => !props.$value ? 'rgb(194, 194, 194)' : getColor(props.$color)};
+  border-radius: 3px;
+  transition: all 100ms ease;
+  padding: 3px;
+  cursor: pointer;
+  position: relative;
+`;
+const StyledToggleButtonSwitch = styled.div `
+  width: 50%;
+  height: 100%;
+  border-radius: 2px;
+  background-color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  float: right;
+  transition: all 100ms ease;
+  z-index: 100;
+  ${props => props.$value ? '' : 'float: left;'}
+`;
+const StyledToggleValue = styled.p `
+    font-size: 0.5rem;
+    color: black;
+    font-weight: bold;
+`;
+const StyledToggleButtonLabel = styled.div `
+    font-size: ${FontSize.defaultFontSize};
+    margin-left: 5px;
+    width: max-content;
+    color: ${props => getColor(props.$color)};
+`;
+const TMToggleButton = ({ color = 'primary', value, label, elementStyle, fontSize = FontSize.defaultFontSize, isModifiedWhen, showTooltip = false, onValueChanged }) => {
+    const [currentColor, setCurrentColor] = useState(color);
+    useEffect(() => {
+        setCurrentColor(isModifiedWhen ? 'tertiary' : color);
+    }, [isModifiedWhen, color]);
+    const renderTooltip = () => { return (showTooltip && _jsx("div", { children: label })); };
+    return (_jsx(TMTooltip, { hideAfterDelay: true, content: renderTooltip(), children: _jsxs(StyledToggleButtonWrapper, { children: [_jsx(StyledToggleButtonContainer, { "$value": value, "$color": currentColor, style: elementStyle, onClick: onValueChanged, children: _jsx(StyledToggleButtonSwitch, { "$value": value, children: _jsx(StyledToggleValue, { children: value ? 'ON' : 'OFF' }) }) }), !showTooltip && label &&
+                    _jsx(StyledToggleButtonLabel, { "$color": isModifiedWhen ? Colors.tertiary : Colors.primary, children: label })] }) }));
+};
+export default TMToggleButton;

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ITMRightSidebarProps } from './TMRightSidebar';
+export interface ITMToolbarCardProps extends ITMRightSidebarProps {
+    color?: string;
+    backgroundColor?: string;
+    backgroundColorContainer?: string;
+    children?: React.ReactNode;
+    showHeader?: boolean;
+    title?: string;
+    displayedItemsCount?: number;
+    totalItems?: number;
+    toolbar?: any;
+    padding?: string;
+    onBack?: () => void;
+    onClose?: () => void;
+    onHeaderDoubleClick?: () => void;
+}
+declare const TMToolbarCard: React.FC<ITMToolbarCardProps>;
+export default TMToolbarCard;

package/lib/components/base/TMToolbarCard.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import TMRightSidebar from './TMRightSidebar';
+import { IconArrowLeft, SDKUI_Localizator } from '../../helper';
+import { TMColors } from '../../utils/theme';
+import { StyledBadge } from './Styled';
+import TMButton from './TMButton';
+const StyledSearchCard = styled.div `
+    width: 100%;
+    height: 100%;
+    font-size: 1rem;
+    border-radius: 12px;
+    border: 1px solid ${() => TMColors.primaryColor}50 ;
+`;
+const StyledSearchCardHeader = styled.div `
+    width:100% ;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 4px 10px;
+    background-color: ${props => props.$backgroundColor ?? TMColors.backgroundColorHeader};
+    color: ${props => props.$color ?? TMColors.colorHeader};
+    border-top-right-radius: 10px;
+    border-top-left-radius: 10px;
+    overflow: hidden;
+    position: sticky;
+    top: 0;
+    font-weight: 600;
+    height: 35px;
+`;
+const StyledSearchCardContent = styled.div `
+    width: 100%;
+    height: ${props => props.$height};
+    overflow: hidden;
+    background-color: ${props => props.$backgroundColor};
+    border-bottom-right-radius: 10px;
+    border-bottom-left-radius: 10px;
+    padding: ${props => props.$padding};
+    display: flex;
+    justify-content: space-between;
+    
+    position: relative;
+    user-select: none;
+`;
+const TMToolbarCard = ({ items = [], onItemClick, selectedItem, showPanel, color = TMColors.colorHeader, backgroundColor = TMColors.backgroundColorHeader, backgroundColorContainer, children, showHeader = true, title, totalItems, displayedItemsCount, toolbar, padding = '3px', onBack, onClose, onHeaderDoubleClick }) => {
+    return (_jsxs(StyledSearchCard, { children: [showHeader && _jsx(StyledSearchCardHeader, { "$backgroundColor": backgroundColor, "$color": color, onDoubleClick: () => { if (onHeaderDoubleClick)
+                    onHeaderDoubleClick(); }, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', width: '100%' }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '8px' }, children: [onBack && _jsx(TMButton, { btnStyle: 'icon', icon: _jsx("div", { style: { backgroundColor: 'white', minWidth: '24px', minHeight: '24px', borderRadius: '24px', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx(IconArrowLeft, { color: TMColors.primaryColor }) }), caption: SDKUI_Localizator.Back, onClick: onBack }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center' }, children: [_jsx("p", { children: title }), Boolean(displayedItemsCount && displayedItemsCount > 0) && (_jsxs(_Fragment, { children: [_jsx(StyledBadge, { "$backgroundColor": '#679CE8', children: displayedItemsCount }), Boolean(totalItems && totalItems > 0) && _jsx("span", { children: "\u00A0\u00A0/\u00A0" })] })), Boolean(totalItems && totalItems > 0) && _jsx(StyledBadge, { "$backgroundColor": '#679CE8', children: totalItems })] })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '5px' }, children: [toolbar, onClose && _jsx(TMButton, { color: 'primaryOutline', caption: SDKUI_Localizator.Close, icon: _jsx("i", { className: 'dx-icon-remove', style: { color: "white" } }), btnStyle: 'icon', onClick: () => onClose?.() })] })] }) }), _jsxs(StyledSearchCardContent, { "$height": showHeader ? "calc(100% - 35px)" : "100%", "$padding": padding, "$backgroundColor": backgroundColorContainer ?? `${TMColors.backgroundColorHeader}12`, children: [_jsx("div", { style: { width: items.length > 0 ? 'calc(100% - 30px)' : '100%' }, children: children }), items.length > 0 &&
+                        _jsx(TMRightSidebar, { items: items, onItemClick: onItemClick, selectedItem: selectedItem, showPanel: showPanel })] })] }));
+};
+export default TMToolbarCard;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ITooltipOptions } from 'devextreme-react/tooltip';
+import { Position } from 'devextreme/common';
+import { PositionConfig } from 'devextreme/animation/position';
+interface ITMTooltipProps extends ITooltipOptions {
+    children?: React.ReactNode;
+    content?: React.ReactNode;
+    position?: Position | PositionConfig;
+    hideAfterDelay?: boolean;
+    parentStyle?: React.CSSProperties;
+    childStyle?: React.CSSProperties;
+}
+declare const TMTooltip: ({ children, position, content, hideAfterDelay, parentStyle, childStyle }: ITMTooltipProps) => import("react/jsx-runtime").JSX.Element;
+export default TMTooltip;

package/lib/components/base/TMTooltip.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Tooltip } from 'devextreme-react/tooltip';
+import { genUniqueId } from '../../helper';
+import { DeviceType, useDeviceType } from './TMDeviceProvider';
+const TMTooltip = ({ children, position, content, hideAfterDelay, parentStyle, childStyle }) => {
+    const [showTooltip, setShowTooltip] = useState(false);
+    const [id, setID] = useState('');
+    useEffect(() => { setID(genUniqueId()); }, [children]);
+    useEffect(() => {
+        window.addEventListener('click', () => setShowTooltip(false));
+        return () => window.removeEventListener('click', () => setShowTooltip(false));
+    }, []);
+    const deviceType = useDeviceType();
+    return (_jsxs("div", { style: parentStyle, children: [_jsx("div", { id: `idContainerTooltip${id}`, style: { display: 'flex', alignItems: 'center', height: 'max-content', width: 'max-content', ...childStyle }, onMouseEnter: () => { setShowTooltip(true); }, onMouseLeave: () => { setShowTooltip(false); }, onTouchStart: () => { setShowTooltip(true); }, onClick: () => { if (deviceType === DeviceType.DESKTOP || !hideAfterDelay)
+                    return; setTimeout(() => { setShowTooltip(false); }, 1500); }, onTouchEnd: () => { if (deviceType === DeviceType.DESKTOP || !hideAfterDelay)
+                    return; setTimeout(() => { setShowTooltip(false); }, 1500); }, children: children }), content &&
+                _jsx(Tooltip, { target: `#idContainerTooltip${id}`, hideOnOutsideClick: true, visible: showTooltip, position: position ?? 'bottom', onHidden: () => setShowTooltip(false), children: content })] }));
+};
+export default TMTooltip;

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

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