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

package/lib/components/base/TMResizableMenu.js

@@ -1,98 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useRef, useEffect, useImperativeHandle, forwardRef } from 'react';
-import styled from 'styled-components';
-import { createPortal } from 'react-dom';
-const DEFAULT_WIDTH = 550;
-const DEFAULT_HEIGHT = window.innerHeight - 150;
-export const TMResizableMenu = forwardRef(({ isVisible, onClose, top, left, bottom, right, maxWidth, maxHeight, padding, children, minHeight, minWidth, resizable = true, ignoreRefs = [], onResizeing, }, ref) => {
-    const [width, setWidth] = useState(minWidth ?? DEFAULT_WIDTH);
-    const [height, setHeight] = useState(minHeight ?? DEFAULT_HEIGHT);
-    const [isResizing, setIsResizing] = useState(false);
-    const isResizingRef = useRef(false);
-    const menuRef = useRef(null);
-    const portalRoot = document.getElementById('portal-root') || (() => {
-        const el = document.createElement('div');
-        el.id = 'portal-root';
-        document.body.appendChild(el);
-        return el;
-    })();
-    useImperativeHandle(ref, () => menuRef.current);
-    useEffect(() => {
-        const handleMouseMove = (e) => {
-            if (!isResizingRef.current || !menuRef.current)
-                return;
-            const rect = menuRef.current.getBoundingClientRect();
-            const newWidth = Math.min(e.clientX - rect.left, maxWidth ?? Infinity);
-            const newHeight = Math.min(e.clientY - rect.top, maxHeight ?? Infinity);
-            setWidth(Math.max(150, newWidth));
-            setHeight(Math.max(150, newHeight));
-        };
-        const handleMouseUp = () => {
-            isResizingRef.current = false;
-            setIsResizing(false);
-            onResizeing?.(false);
-            document.body.style.pointerEvents = 'auto';
-        };
-        document.addEventListener('mousemove', handleMouseMove);
-        document.addEventListener('mouseup', handleMouseUp);
-        return () => {
-            document.removeEventListener('mousemove', handleMouseMove);
-            document.removeEventListener('mouseup', handleMouseUp);
-        };
-    }, [maxWidth, maxHeight]);
-    useEffect(() => {
-        const handleClickOutside = (e) => {
-            if (isResizing)
-                return;
-            const insideMenu = menuRef.current && menuRef.current.contains(e.target); //nosonar
-            const insideIgnored = ignoreRefs?.some(ref => ref.current && ref.current.contains(e.target)); //nosonar
-            if (!insideMenu && !insideIgnored) {
-                onClose?.();
-            }
-        };
-        document.addEventListener('mousedown', handleClickOutside);
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, [onClose]);
-    const menuContent = (_jsxs(_Fragment, { children: [_jsxs(MenuContainer, { ref: menuRef, "$display": isVisible ? 'block' : 'none', style: { top, left, bottom, right, width, height, position: 'fixed' }, "$maxWidth": maxWidth, "$maxHeight": maxHeight, "$minHeight": minHeight, "$minWidth": minWidth, "$padding": padding, children: [children, resizable && _jsx(ResizeHandle, { onMouseDown: (e) => {
-                            e.preventDefault();
-                            document.body.style.pointerEvents = 'none';
-                            isResizingRef.current = true;
-                            setIsResizing(true);
-                            onResizeing?.(true);
-                        } })] }), isResizing && _jsx(ResizeOverlay, {})] }));
-    return createPortal(menuContent, portalRoot);
-});
-export default TMResizableMenu;
-const MenuContainer = styled.div `
-  position: absolute;
-  display: ${({ $display }) => $display};
-  background-color: white;
-  border: 1px solid #ccc;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-  overflow: auto;
-  max-width: ${({ $maxWidth }) => ($maxWidth ? `${$maxWidth}px` : 'none')};
-  max-height: ${({ $maxHeight }) => ($maxHeight ? `${$maxHeight}px` : 'none')};
-  border-radius: 6px;
-  padding: ${({ $padding }) => ($padding !== undefined ? `${$padding}px` : '16px')};
-  z-index: 1532;
-  min-width: ${({ $minWidth }) => `${$minWidth ?? 350}px`};
-  min-height: ${({ $minHeight }) => `${$minHeight ?? 500}px`};
-`;
-const ResizeHandle = styled.div `
-  position: absolute;
-  width: 16px;
-  height: 16px;
-  right: 0;
-  bottom: 0;
-  cursor: se-resize;
-  background: linear-gradient(135deg, transparent 40%, #ccc 40%, #ccc 60%, transparent 60%);
-`;
-const ResizeOverlay = styled.div `
-  position: fixed;
-  inset: 0;
-  z-index: 1531;
-  pointer-events: all; 
-  cursor: se-resize;
-`;

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

@@ -1,19 +0,0 @@
-import React from 'react';
-export type ITMRightSidebarItem = {
-    id: string;
-    icon: any;
-    visibleName: string;
-    disabled?: boolean;
-    isActive?: boolean;
-    visible?: boolean;
-    beginGroup?: boolean;
-    onClick?: () => void;
-};
-export interface ITMRightSidebarProps {
-    items?: Array<ITMRightSidebarItem>;
-    onItemClick?: (id: string, isActive: boolean) => void;
-    selectedItem?: string;
-    showPanel?: boolean;
-}
-declare const TMRightSidebar: React.FC<ITMRightSidebarProps>;
-export default TMRightSidebar;

package/lib/components/base/TMRightSidebar.js

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

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

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

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

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

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

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

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

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

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

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

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

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