@topconsultnpm/sdkui-react 6.19.0-dev2.2 → 6.19.0-test.1

package/lib/components/base/TMCounterBar.js

@@ -1,39 +1,39 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import TMTooltip from './TMTooltip';
 import styled from 'styled-components';
-const StyledList = styled.div `
-    background-color: #f0f0f0;
-    display: flex;
-    align-items: center;
-    /* border: 1px solid #dadada; */
-    border-bottom-left-radius: 5px;
-    border-bottom-right-radius: 5px;
-    border-top: 0;
-    width: 100%;
-    margin-top: -3px;
+const StyledList = styled.div `
+    background-color: #f0f0f0;
+    display: flex;
+    align-items: center;
+    /* border: 1px solid #dadada; */
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+    border-top: 0;
+    width: 100%;
+    margin-top: -3px;
 `;
-const StyledListItem = styled.div `
-    display: flex;
-    align-items: center;
-    border-right: 1px dashed lightgray;
-    padding: 4px 12px;
-    gap: 3px;
-    transition: all .5s ease-in;
-    &:hover {
-        background-color: white;
-        svg, span {
-            color: orange;
-        }
-    }
-    svg {
-        margin-right: 3px;
-        font-size: 12px;
-        color: gray;
-	}
-    span {
-        color: gray;
-        cursor: default;
-    }
+const StyledListItem = styled.div `
+    display: flex;
+    align-items: center;
+    border-right: 1px dashed lightgray;
+    padding: 4px 12px;
+    gap: 3px;
+    transition: all .5s ease-in;
+    &:hover {
+        background-color: white;
+        svg, span {
+            color: orange;
+        }
+    }
+    svg {
+        margin-right: 3px;
+        font-size: 12px;
+        color: gray;
+	}
+    span {
+        color: gray;
+        cursor: default;
+    }
 `;
 const TMCounterBar = ({ items }) => {
     return (_jsx(StyledList, { children: parseInt(items[0].text) !== -1 && items.map((item, index) => {

package/lib/components/base/TMCounterContainer.js

@@ -2,38 +2,38 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
 import TMTooltip from './TMTooltip';
 /* Styled container component that holds all counter items */
-const Container = styled.div `
-    background: ${({ bgColor }) => bgColor || 'linear-gradient(to right, #f8f9fa, #e9ecef)'};
-    display: flex;
-    align-items: center;
-    width: 100%;
-    padding: 4px 8px;
-    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.1);
-    gap: 8px;
+const Container = styled.div `
+    background: ${({ bgColor }) => bgColor || 'linear-gradient(to right, #f8f9fa, #e9ecef)'};
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 4px 8px;
+    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.1);
+    gap: 8px;
 `;
 /* Styled counter item component with customizable styles */
-const Counter = styled.div `
-    display: flex;
-    align-items: center;
-    border-right: 1px solid rgba(211, 211, 211, 0.5);
-    padding: 4px 10px;
-    gap: 8px;
-    transition: all 0.3s ease-in-out;
-    background: ${({ color }) => color || 'rgba(255, 255, 255, 0.6)'};
-    
-    &:last-child {
-        border-right: none;
-    }
-
-    svg {
-        color: ${({ textColor }) => textColor || '#495057'};
-        transition: color 0.3s ease-in-out;
-    }
-
-    span {
-        color: ${({ textColor }) => textColor || '#495057'};
-        transition: color 0.3s ease-in-out;
-    }
+const Counter = styled.div `
+    display: flex;
+    align-items: center;
+    border-right: 1px solid rgba(211, 211, 211, 0.5);
+    padding: 4px 10px;
+    gap: 8px;
+    transition: all 0.3s ease-in-out;
+    background: ${({ color }) => color || 'rgba(255, 255, 255, 0.6)'};
+    
+    &:last-child {
+        border-right: none;
+    }
+
+    svg {
+        color: ${({ textColor }) => textColor || '#495057'};
+        transition: color 0.3s ease-in-out;
+    }
+
+    span {
+        color: ${({ textColor }) => textColor || '#495057'};
+        transition: color 0.3s ease-in-out;
+    }
 `;
 /* Enum for possible counter item keys */
 export var CounterItemKey;

package/lib/components/base/TMCustomButton.js

@@ -4,14 +4,14 @@ import { useEffect, useRef, useState } from 'react';
 import TMModal from './TMModal';
 import styled from 'styled-components';
 import { processButtonAttributes } from '../../helper/dcmtsHelper';
-const IframeContainer = styled.div `
-  display: flex;
-  height: 100%;
-  flex-direction: column;
+const IframeContainer = styled.div `
+  display: flex;
+  height: 100%;
+  flex-direction: column;
 `;
-const StyledIframe = styled.iframe `
-  border: none;
-  flex: 1;
+const StyledIframe = styled.iframe `
+  border: none;
+  flex: 1;
 `;
 const TMCustomButton = (props) => {
     const { button, isModal = true, formData, selectedItems, onClose } = props;

package/lib/components/base/TMDropDownMenu.js

@@ -4,31 +4,31 @@ import styled from 'styled-components';
 import ContextMenu from 'devextreme-react/context-menu';
 import { FontSize, TMColors } from '../../utils/theme';
 import { genUniqueId } from '../../helper';
-const StyledContent = styled.div `
-    cursor: pointer;
-    border-radius: ${props => props.$borderRadius};
-    color: ${props => props.$color};
-    /* background-color: ${props => props.$backgroundColor}; */
-    background-color: transparent;
-    opacity: ${props => props.$disabled ? 0.4 : 1};
-    pointer-events: ${props => props.$disabled ? 'none' : ''};
-    user-select: none;
-    display: flex;
-    align-items: center;
-
-    &:focus {
-        outline: none;
-        border-bottom: ${props => props.$disabled ? '' : '2px solid'};
-        border-bottom-color: ${TMColors.primary};
-    }
+const StyledContent = styled.div `
+    cursor: pointer;
+    border-radius: ${props => props.$borderRadius};
+    color: ${props => props.$color};
+    /* background-color: ${props => props.$backgroundColor}; */
+    background-color: transparent;
+    opacity: ${props => props.$disabled ? 0.4 : 1};
+    pointer-events: ${props => props.$disabled ? 'none' : ''};
+    user-select: none;
+    display: flex;
+    align-items: center;
+
+    &:focus {
+        outline: none;
+        border-bottom: ${props => props.$disabled ? '' : '2px solid'};
+        border-bottom-color: ${TMColors.primary};
+    }
 `;
-const StyledMenuItem = styled.div `
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 6px;
-    width: 100%;
-    font-size: ${FontSize.defaultFontSize};
+const StyledMenuItem = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 6px;
+    width: 100%;
+    font-size: ${FontSize.defaultFontSize};
 `;
 const TMDropDownMenu = forwardRef(({ content, items, disabled = false, color = TMColors.text_normal, backgroundColor = TMColors.default_background, borderRadius, onMenuShown }, ref) => {
     const [id, setID] = useState('');

package/lib/components/base/TMFileManagerUtils.js

@@ -15,25 +15,25 @@ export const colors = {
     LIGHT_YELLOW: "#fff9c4",
     MEDIUM_GREEN: "#28a745",
 };
-export const TMFileItemContainer = styled.div `
-    border: 1px solid #ddd;
-    border-radius: 8px;
-    background-color: ${({ $backgroundColor }) => $backgroundColor ?? colors.LIGHT_GRAY};
-    color: ${({ $textColor }) => $textColor ?? colors.BLACK}; 
-    cursor: pointer;
-    margin: 10px 5px;
-    padding: 8px;
-    display: flex;
-    flex-direction: column;
-    min-width: 100px;
-    gap: 4px;
-    &:hover {
-        background-color: ${({ $bgHoverColor }) => $bgHoverColor ?? '#e0e0e0'};
-        border-color: #999;
-    }
-    &:focus {
-        outline: none;
-    }
+export const TMFileItemContainer = styled.div `
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    background-color: ${({ $backgroundColor }) => $backgroundColor ?? colors.LIGHT_GRAY};
+    color: ${({ $textColor }) => $textColor ?? colors.BLACK}; 
+    cursor: pointer;
+    margin: 10px 5px;
+    padding: 8px;
+    display: flex;
+    flex-direction: column;
+    min-width: 100px;
+    gap: 4px;
+    &:hover {
+        background-color: ${({ $bgHoverColor }) => $bgHoverColor ?? '#e0e0e0'};
+        border-color: #999;
+    }
+    &:focus {
+        outline: none;
+    }
 `;
 // Function to find a specific file or folder based on its ID (used for finding nested items)
 export const findFileItems = (items, id) => {

package/lib/components/base/TMFloatingToolbar.js

@@ -2,42 +2,42 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import { IconDraggabledots } from '../../helper/TMIcons';
-const StyledFloatingToolbarContainer = styled.div `
-    position: absolute;
-    width: max-content;
-    height: max-content;
-    display: flex;
-    flex-direction: row;
-    background-color: ${props => `${props.$backgroundColor}a6`};
-    left: calc(50% - 90px);
-    top: calc(100% - 40px);
-    border-radius: 8px;
-    z-index: 10;
-    &:hover {
-        background: ${props => props.$backgroundColor};
-    }
+const StyledFloatingToolbarContainer = styled.div `
+    position: absolute;
+    width: max-content;
+    height: max-content;
+    display: flex;
+    flex-direction: row;
+    background-color: ${props => `${props.$backgroundColor}a6`};
+    left: calc(50% - 90px);
+    top: calc(100% - 40px);
+    border-radius: 8px;
+    z-index: 10;
+    &:hover {
+        background: ${props => props.$backgroundColor};
+    }
 `;
-const StyledFloatingToolbarDraggable = styled.div `
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 25px;
-    height: 100%;
-    background-color: ${props => `${props.$backgroundColor}FF`};
-    border-top-left-radius: 8px;
-    border-bottom-left-radius: 8px;
-    padding: 10px 0px 10px 0px;
-    &:hover {
-        cursor: grab;
-    }
+const StyledFloatingToolbarDraggable = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 25px;
+    height: 100%;
+    background-color: ${props => `${props.$backgroundColor}FF`};
+    border-top-left-radius: 8px;
+    border-bottom-left-radius: 8px;
+    padding: 10px 0px 10px 0px;
+    &:hover {
+        cursor: grab;
+    }
 `;
-const StyledFloatingToolbar = styled.div `
-    width: max-content;
-    display: flex;
-    flex-direction: row;
-    padding: 10px 10px 10px 20px; 
-    gap: 8px; 
-    border-radius: 8px;
+const StyledFloatingToolbar = styled.div `
+    width: max-content;
+    display: flex;
+    flex-direction: row;
+    padding: 10px 10px 10px 20px; 
+    gap: 8px; 
+    border-radius: 8px;
 `;
 const TMFloatingToolbar = ({ children, backgroundColor, initialLeft, initialTop }) => {
     const boxRef = useRef(null);

package/lib/components/base/TMLayout.js

@@ -2,53 +2,53 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { FontSize, TMColors } from '../../utils/theme';
-const StyledLayoutContainer = styled.div `
-    width: 100%;
-    position: relative;
-    height: 100%;
-    /* min-height: max-content; */
-    /* min-width: max-content; */
-    display: flex;
-    flex-direction: ${props => props.$direction === 'horizontal' ? 'row' : 'column'};
-    justify-content: ${props => props.$justifyContent};
-    align-items: ${props => props.$alignItems};
-    /* overflow: ${props => props.$direction === 'horizontal' ? 'auto' : 'hidden'}; */
-    /* gap: 3px; */
+const StyledLayoutContainer = styled.div `
+    width: 100%;
+    position: relative;
+    height: 100%;
+    /* min-height: max-content; */
+    /* min-width: max-content; */
+    display: flex;
+    flex-direction: ${props => props.$direction === 'horizontal' ? 'row' : 'column'};
+    justify-content: ${props => props.$justifyContent};
+    align-items: ${props => props.$alignItems};
+    /* overflow: ${props => props.$direction === 'horizontal' ? 'auto' : 'hidden'}; */
+    /* gap: 3px; */
 `;
-const StyledLayoutItem = styled.div `
-    width: ${props => props.$width};
-    min-width: ${props => props.$minWidth};
-    max-width: ${props => props.$maxWidth};
-    max-height: ${props => props.$maxHeight};
-    min-height: ${props => props.$minHeight};
-    height: ${props => props.$height};
-    position: relative;
+const StyledLayoutItem = styled.div `
+    width: ${props => props.$width};
+    min-width: ${props => props.$minWidth};
+    max-width: ${props => props.$maxWidth};
+    max-height: ${props => props.$maxHeight};
+    min-height: ${props => props.$minHeight};
+    height: ${props => props.$height};
+    position: relative;
 `;
-const StyledCardHeader = styled.div `
-    width:100% ;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    padding: 4px 5px;
-    background-color: ${props => props.$backgroundColor ?? TMColors.backgroundColorHeader};
-    color: ${props => props.$color ?? TMColors.colorHeader};
-    border-top-right-radius: ${props => props.$borderRadius && '3px'};
-    border-top-left-radius: ${props => props.$borderRadius && '3px'};
-    overflow: hidden;
-    position: sticky;
-    top: 0;
-    font-weight: ${props => props.$fontWeight ?? 'normal'};
+const StyledCardHeader = styled.div `
+    width:100% ;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 4px 5px;
+    background-color: ${props => props.$backgroundColor ?? TMColors.backgroundColorHeader};
+    color: ${props => props.$color ?? TMColors.colorHeader};
+    border-top-right-radius: ${props => props.$borderRadius && '3px'};
+    border-top-left-radius: ${props => props.$borderRadius && '3px'};
+    overflow: hidden;
+    position: sticky;
+    top: 0;
+    font-weight: ${props => props.$fontWeight ?? 'normal'};
 `;
-const StyledCardContext = styled.div `
-    width: 100%;
-    height: ${props => props.$showHeader ? 'calc(100% - 25px);' : '100%'} ;
-    overflow: ${props => props.$scroll && 'auto'};
-    overflow-y:  ${props => props.$scrollY && 'auto'};
-    overflow-x:  ${props => props.$scrollX && 'auto'};
-    background-color: white;
-    top: 0;
-    padding: ${props => props.$padding ? '5px' : '0'};
+const StyledCardContext = styled.div `
+    width: 100%;
+    height: ${props => props.$showHeader ? 'calc(100% - 25px);' : '100%'} ;
+    overflow: ${props => props.$scroll && 'auto'};
+    overflow-y:  ${props => props.$scrollY && 'auto'};
+    overflow-x:  ${props => props.$scrollX && 'auto'};
+    background-color: white;
+    top: 0;
+    padding: ${props => props.$padding ? '5px' : '0'};
 `;
 const TMCard = ({ borderRadius = true, onClick, scrollX = false, scrollY = false, width = '100%', height = '100%', children, title = '', fontSize = FontSize.defaultFontSize, fontWeight, showBorder = true, padding = true, scroll = false, backgroundColor, color }) => {
     return (_jsxs("div", { onClick: onClick, style: { width: width, height: height, fontSize: fontSize, overflow: 'hidden' }, children: [title.length > 0 && _jsx(StyledCardHeader, { "$borderRadius": borderRadius, "$fontWeight": fontWeight, "$backgroundColor": backgroundColor, "$color": color, children: title }), _jsxs(StyledCardContext, { "$scrollX": scrollX, "$scrollY": scrollY, "$scroll": scroll, "$padding": padding, "$showHeader": title.length > 0, style: { border: showBorder ? '2px solid #CAD9EB' : 'none', borderBottomLeftRadius: showBorder ? '3px' : '0', borderBottomRightRadius: showBorder ? '3px' : '0' }, children: [" ", children, " "] })] }));

package/lib/components/base/TMList.js

@@ -2,42 +2,42 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import styled from 'styled-components';
 import { TMColors } from '../../utils/theme';
-const StyledListItem = styled.li `
-  display: flex; 
-  flex-direction: row; 
-  align-items: center; 
-  justify-content: flex-start;
-  gap: 10px;
-  position: relative;
-  color: ${TMColors.text_normal};
-  padding: 4px 5px;
-  height: 40px;
-  width: 100%;
-  font-size: 1rem;
-  letter-spacing: 0px;
-  background-color: ${({ $isSelected }) => ($isSelected ? '#d0e5fb' : 'transparent')};
-
-  &:hover {
-        background-color: ${TMColors.border_normal};
-        cursor: pointer;
-    }
+const StyledListItem = styled.li `
+  display: flex; 
+  flex-direction: row; 
+  align-items: center; 
+  justify-content: flex-start;
+  gap: 10px;
+  position: relative;
+  color: ${TMColors.text_normal};
+  padding: 4px 5px;
+  height: 40px;
+  width: 100%;
+  font-size: 1rem;
+  letter-spacing: 0px;
+  background-color: ${({ $isSelected }) => ($isSelected ? '#d0e5fb' : 'transparent')};
+
+  &:hover {
+        background-color: ${TMColors.border_normal};
+        cursor: pointer;
+    }
 `;
-const StyledListContainer = styled.div `
-  height: 100%;
-  width: 100%;
-  background-color: ${TMColors.default_background};
-  padding: 3px;
-  border-radius: 2px;
-  box-shadow: 1px 1px 7px rgba(0,0,0,0.15);
+const StyledListContainer = styled.div `
+  height: 100%;
+  width: 100%;
+  background-color: ${TMColors.default_background};
+  padding: 3px;
+  border-radius: 2px;
+  box-shadow: 1px 1px 7px rgba(0,0,0,0.15);
 `;
-const StyledIconWrapper = styled.span `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  min-width: 24px;
-  min-height: 24px;
+const StyledIconWrapper = styled.span `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  min-width: 24px;
+  min-height: 24px;
 `;
 ;
 const TMList = ({ items }) => {

package/lib/components/base/TMModal.js

@@ -4,39 +4,39 @@ import { Popup } from 'devextreme-react';
 import styled from 'styled-components';
 import TMLayoutContainer, { TMCard, TMLayoutItem } from './TMLayout';
 import { FontSize, TMColors } from '../../utils/theme';
-const StyledModal = styled.div `
-    width: ${props => props.$width};
-    height: ${props => props.$height};
-    position: ${props => (props.$isModal ? 'relative' : 'fixed')};
-    background-color: white;
-    box-shadow: 2px 2px 10px #939393;
-    border-radius: 5px;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-start;
-    font-size: ${props => props.$fontSize};
-    overflow: hidden;
-    min-height: 33px;
-    min-width: 250px;
-    max-width: 95%;
-    max-height: 95%;
-    z-index: 2000000000;
+const StyledModal = styled.div `
+    width: ${props => props.$width};
+    height: ${props => props.$height};
+    position: ${props => (props.$isModal ? 'relative' : 'fixed')};
+    background-color: white;
+    box-shadow: 2px 2px 10px #939393;
+    border-radius: 5px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    font-size: ${props => props.$fontSize};
+    overflow: hidden;
+    min-height: 33px;
+    min-width: 250px;
+    max-width: 95%;
+    max-height: 95%;
+    z-index: 2000000000;
 `;
-const StyledModalToolbar = styled.div `
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    padding: 5px;
-    flex-direction: row;
-    background-color: ${TMColors.toolbar_background};
-    border-bottom: 1px solid gray;
+const StyledModalToolbar = styled.div `
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 5px;
+    flex-direction: row;
+    background-color: ${TMColors.toolbar_background};
+    border-bottom: 1px solid gray;
 `;
-const StyledModalContext = styled.div `
-    width: 100%;
-    overflow: auto;
-    height: 100%;
+const StyledModalContext = styled.div `
+    width: 100%;
+    overflow: auto;
+    height: 100%;
 `;
 const TMModal = ({ resizable = true, isModal = true, title = '', toolbar, onClose, children, width = '100%', height = '100%', fontSize = FontSize.defaultFontSize, hidePopup = true, askClosingConfirm = false }) => {
     const [initialWidth, setInitialWidth] = useState(width);