@topconsultnpm/sdkui-react-beta 6.7.20 → 6.7.22

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

@@ -4,6 +4,7 @@ interface ITMListViewHeader {
     headerTitle?: string;
     firstCounter?: React.ReactNode;
     secondCounter?: React.ReactNode;
+    titleColor?: string;
 }
 interface ListProps<T> {
     dataSource?: T[];

package/lib/components/base/TMListView.js

@@ -7,6 +7,7 @@ import { IconApply, IconCloseCircle, IconColumns, IconDown, IconHide, IconShow,
 import { TMSearchBar } from '../sidebar/TMHeader';
 import TMTooltip from './TMTooltip';
 import { SDKUI_Localizator } from '../../helper';
+import { TMColors } from '../../utils/theme';
 const StyledListItem = styled.div ` width: 100%; height: max-content; border-bottom: 1px solid #e5e5e5; background-color: ${props => props.$isSelected ? props.$color ? `${props.$color}99` : '#00000030' : 'transparent'} ; color: ${props => props.$isSelected ? props.$color ? 'white' : '#000000' : '#000000'} ; &:hover{ background-color: ${props => props.$color ? props.$isSelected ? `${props.$color}99` : `${props.$color}40` : props.$isSelected ? '#00000030' : '#00000010'};} `;
 const StyledListViewContainer = styled.div ` position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; width: 100%; height: 100%; `;
 const StyledSearchContainer = styled.div ` width: 100%; height: max-content; padding: 5px; border-bottom: 1px solid #e5e5e5; display: flex; align-items: center; gap: 10px; `;
@@ -330,5 +331,5 @@ const TMListView = ({ customGroupingHeaders, headerBackGroundColor, header, show
 };
 export default TMListView;
 export const CustomListViewHeader = (props) => {
-    return (_jsxs("div", { style: { display: 'flex', alignItems: 'center', padding: '0 5px', gap: 5 }, children: [props.headerIcon, _jsx("p", { children: props.headerTitle }), props.firstCounter, props.secondCounter] }));
+    return (_jsxs("div", { style: { display: 'flex', alignItems: 'center', padding: '0 5px', gap: 5 }, children: [props.headerIcon, _jsx("p", { style: { fontWeight: 'bold', color: props.titleColor ? props.titleColor : TMColors.text_normal }, children: props.headerTitle }), props.firstCounter, props.secondCounter] }));
 };

package/lib/components/editors/TMDropDown.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import styled from "styled-components";
 import { FontSize, TMColors } from '../../utils/theme';
-import { StyledEditorContainer, StyledEditorIcon, StyledEditorLabel, editorColorManager } from "./TMEditorStyled";
+import { StyledEditorContainer, StyledEditorIcon, StyledEditorLabel, TMEditorsDefaultBorderRadius, editorColorManager } from "./TMEditorStyled";
 import TMLayoutContainer, { TMLayoutItem } from "../base/TMLayout";
 import TMVilViewer from "../base/TMVilViewer";
 const StyledDropDown = styled.select `
@@ -13,7 +13,7 @@ const StyledDropDown = styled.select `
     border-bottom: ${props => (props.$vil.length > 0) ? '3px' : '1px'} solid ;
     border-bottom-color: ${props => (props.$vil.length === 0) ? !props.$isModified ? TMColors.border_normal : TMColors.isModified : editorColorManager(props.$vil)};
     color: ${props => !props.disabled ? (props.$vil.length === 0) ? !props.$isModified ? TMColors.text_normal : TMColors.isModified : editorColorManager(props.$vil) : TMColors.disabled};
-    border-radius: 2px;
+    border-radius: ${props => props.$borderRadius ?? TMEditorsDefaultBorderRadius};
     min-width: 70px;
     &:focus{
         outline: none;
@@ -31,7 +31,7 @@ const StyledDropDown = styled.select `
 const TMDropDown = ({ validationItems = [], disabled = false, elementStyle, isModifiedWhen, labelPosition = 'left', label, icon, width = '100%', fontSize = FontSize.defaultFontSize, dataSource, value, onValueChanged }) => {
     const [isFocused, setIsfocused] = useState(false);
     const renderedLeftLabelTextBox = () => {
-        return (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: _jsx(StyledEditorIcon, { "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { "$width": width, children: [label && _jsx(StyledEditorLabel, { "$isFocused": isFocused, "$labelPosition": labelPosition, "$disabled": disabled, "$fontSize": fontSize, children: label }), _jsx(StyledDropDown, { value: value, onFocus: () => setIsfocused(true), onBlur: () => setIsfocused(false), "$disabled": disabled, disabled: disabled, "$fontSize": fontSize, "$width": width, "$isModified": isModifiedWhen, "$vil": validationItems, onChange: onValueChanged, children: dataSource?.map((data, index) => (_jsx("option", { value: data.value, children: data.display }, index))) }), _jsx(TMVilViewer, { vil: validationItems })] }) })] }));
+        return (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: _jsx(StyledEditorIcon, { "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { "$width": width, children: [label && _jsx(StyledEditorLabel, { "$isFocused": isFocused, "$labelPosition": labelPosition, "$disabled": disabled, children: label }), _jsx(StyledDropDown, { value: value, onFocus: () => setIsfocused(true), onBlur: () => setIsfocused(false), "$disabled": disabled, disabled: disabled, "$fontSize": fontSize, "$width": width, "$isModified": isModifiedWhen, "$vil": validationItems, onChange: onValueChanged, children: dataSource?.map((data, index) => (_jsx("option", { value: data.value, children: data.display }, index))) }), _jsx(TMVilViewer, { vil: validationItems })] }) })] }));
     };
     return (_jsx("div", { style: elementStyle, children: renderedLeftLabelTextBox() }));
 };

package/lib/components/editors/TMEditorStyled.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
 import { ValidationItem } from '@topconsultnpm/sdk-ts-beta';
+export declare const TMEditorsDefaultBorderRadius = "5px";
+export declare const TMEditorsDefaultLabelFontSize = "0.85rem";
 export declare const editorColorManager: (validationItems: ValidationItem[]) => string;
 export declare const StyledEditorContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $width: string;
@@ -24,7 +26,7 @@ export declare const StyledEditorLabel: import("styled-components").IStyledCompo
     $isFocused: boolean;
     $labelPosition: 'right' | 'left' | 'top';
     $disabled: boolean;
-    $fontSize: string;
+    $fontSize?: string | undefined;
     $color?: string | undefined;
 }>>;
 export declare const StyledEditorButtonIcon: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
@@ -39,4 +41,5 @@ export declare const StyledTextareaEditor: import("styled-components").IStyledCo
     $disabled: boolean;
     $isMobile?: boolean | undefined;
     $maxHeight?: string | undefined;
+    $borderRadius?: string | undefined;
 }>>;

package/lib/components/editors/TMEditorStyled.js

@@ -1,6 +1,8 @@
 import styled from 'styled-components';
 import { ResultTypes } from '@topconsultnpm/sdk-ts-beta';
 import { TMColors } from '../../utils/theme';
+export const TMEditorsDefaultBorderRadius = '5px';
+export const TMEditorsDefaultLabelFontSize = '0.85rem';
 export const editorColorManager = (validationItems) => {
     if (validationItems.find(item => item.ResultType === ResultTypes.ERROR))
         return TMColors.error;
@@ -22,7 +24,7 @@ export const StyledEditor = styled.input `
     border-bottom: ${props => (props.$vil.length > 0) ? '3px' : '1px'} solid ;
     border-bottom-color: ${props => (props.$vil.length === 0) ? !props.$isModified ? TMColors.border_normal : TMColors.isModified : editorColorManager(props.$vil)};
     color: ${props => !props.$disabled ? (props.$vil.length === 0) ? !props.$isModified ? 'black' : TMColors.isModified : editorColorManager(props.$vil) : TMColors.disabled};
-    border-radius: ${props => props.$borderRadius || '2px'};
+    border-radius: ${props => props.$borderRadius ?? TMEditorsDefaultBorderRadius};
     min-width: ${props => props.$isMobile && '70px'};
     &:focus{
         outline: none;
@@ -48,7 +50,7 @@ export const StyledEditorIcon = styled.div `
     transform: translateY(18px);
 `;
 export const StyledEditorLabel = styled.div `
-    font-size: ${props => props.$fontSize} ;
+    font-size: ${props => props.$fontSize ?? TMEditorsDefaultLabelFontSize} ;
     color:${props => !props.$disabled ? props.$isFocused ? TMColors.primary : props.$color ? props.$color : TMColors.label_normal : TMColors.disabled};
     padding: 0 3px;
     user-select: none;
@@ -91,7 +93,7 @@ export const StyledTextareaEditor = styled.textarea `
             : TMColors.isModified
         : editorColorManager(props.$vil)
     : TMColors.disabled};
-    border-radius: 4px; /* Slightly increased radius for smoother corners */
+    border-radius: ${props => props.$borderRadius ?? TMEditorsDefaultBorderRadius}; /* Slightly increased radius for smoother corners */
     min-width: ${props => (props.$isMobile ? '70px' : '100%')}; /* Adjust for mobile */
     max-height: ${props => props.$maxHeight || 'auto'}; 
     &:focus {

package/lib/components/editors/TMSummary.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from 'styled-components';
 import { FontSize, TMColors } from '../../utils/theme';
-import { StyledEditorContainer, StyledEditorIcon, StyledEditorLabel, editorColorManager } from './TMEditorStyled';
+import { StyledEditorContainer, StyledEditorIcon, StyledEditorLabel, TMEditorsDefaultBorderRadius, editorColorManager } from './TMEditorStyled';
 import { IconClearButton, IconPencil, SDKUI_Localizator } from '../../helper';
 import TMLayoutContainer, { TMLayoutItem } from '../base/TMLayout';
 import TMVilViewer from '../base/TMVilViewer';
@@ -16,7 +16,7 @@ const StyledSummaryTemplateInput = styled.div `
     border-bottom: ${props => !props.$showBorder ? '' : (props.$vil.length > 0) ? '3px solid' : '1px solid'} ;
     border-bottom-color: ${props => (props.$vil.length === 0) ? !props.$isModified ? TMColors.border_normal : TMColors.isModified : editorColorManager(props.$vil)};
     color: ${props => !props.$disabled ? (props.$vil.length === 0) ? !props.$isModified ? 'black' : TMColors.isModified : editorColorManager(props.$vil) : TMColors.disabled};
-    border-radius: ${props => !props.$showBorder ? props.$borderRadius : '2px'};
+    border-radius: ${props => !props.$showBorder ? props.$borderRadius : TMEditorsDefaultBorderRadius};
     display: flex;
     align-items: center;
     /* min-width: 70px; */
@@ -55,7 +55,7 @@ const TMSummary = ({ labelColor, hasValue, borderRadius = '4px', validationItems
                             })] })] }) }));
     };
     const renderLabel = () => {
-        return (_jsx(StyledEditorLabel, { "$color": labelColor, "$isFocused": false, "$labelPosition": labelPosition, "$disabled": disabled, "$fontSize": fontSize, children: _jsx("div", { style: { flexDirection: "row", display: "flex", alignItems: "start", justifyContent: "start" }, children: label }) }));
+        return (_jsx(StyledEditorLabel, { "$color": labelColor, "$isFocused": false, "$labelPosition": labelPosition, "$disabled": disabled, children: _jsx("div", { style: { flexDirection: "row", display: "flex", alignItems: "start", justifyContent: "start" }, children: label }) }));
     };
     const renderSummary = () => {
         return (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: icon && _jsx(StyledEditorIcon, { "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { "$width": width, children: [label && renderLabel(), renderTemplateField(), _jsx(TMVilViewer, { vil: validationItems })] }) })] }));

package/lib/components/editors/TMTextArea.js

@@ -64,7 +64,7 @@ const TMTextArea = (props) => {
                 }), formulaItems.length > 0 && clicked && (_jsx(TMContextMenu, { menuData: formulaMenuItems, top: points.y, left: points.x, onMenuItemClick: (formula) => insertText(formula) })), _jsx(TMVilViewer, { vil: validationItems })] });
     };
     const renderedLeftLabelTextArea = () => {
-        return (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: _jsx(StyledEditorIcon, { "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { "$width": width, children: [label && _jsx(StyledEditorLabel, { "$isFocused": isFocused, "$labelPosition": labelPosition, "$disabled": disabled, "$fontSize": fontSize, children: label ?? '' }), renderTextArea()] }) })] }));
+        return (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: _jsx(StyledEditorIcon, { "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { "$width": width, children: [label && _jsx(StyledEditorLabel, { "$isFocused": isFocused, "$labelPosition": labelPosition, "$disabled": disabled, children: label ?? '' }), renderTextArea()] }) })] }));
     };
     return (_jsx("div", { style: elementStyle, children: renderedLeftLabelTextArea() }));
 };

package/lib/components/editors/TMTextBox.js

@@ -151,7 +151,7 @@ const TMTextBox = ({ autoFocus, maxLength, labelColor, precision, scale, showCle
                             })] }), formulaItems.length > 0 && (_jsx(ContextMenu, { dataSource: formulaMenuItems, target: `#text-${id}`, onItemClick: (e) => { insertText(e.itemData?.text ?? ''); } })), _jsx(TMVilViewer, { vil: validationItems })] }));
     };
     const renderedLeftLabelTextBox = () => {
-        return (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: _jsx(StyledEditorIcon, { "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { "$width": width, children: [label && _jsx(StyledEditorLabel, { "$color": labelColor, "$isFocused": isFocused, "$labelPosition": labelPosition, "$disabled": disabled, "$fontSize": fontSize, children: label }), renderInputField()] }) })] }));
+        return (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: _jsx(StyledEditorIcon, { "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { "$width": width, children: [label && _jsx(StyledEditorLabel, { "$color": labelColor, "$isFocused": isFocused, "$labelPosition": labelPosition, "$disabled": disabled, children: label }), renderInputField()] }) })] }));
     };
     return (_jsx("div", { style: elementStyle, children: renderedLeftLabelTextBox() }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react-beta",
-    "version": "6.7.20",
+    "version": "6.7.22",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
@@ -29,7 +29,6 @@
     ],
     "dependencies": {
         "@topconsultnpm/sdk-ts-beta": "^6.7.17",
-        "@topconsultnpm/sdkui-react-beta": "^6.7.10",
         "buffer": "^6.0.3",
         "devextreme": "24.1.6",
         "devextreme-react": "24.1.6",