@topconsultnpm/sdkui-react-beta 6.6.19 → 6.6.21

package/lib/components/editors/TMDateBox.js

@@ -1,11 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
 import { DateBox } from 'devextreme-react';
-import { Button } from 'devextreme-react/cjs/date-box';
-import { DateDisplayTypes, Globalization, IconLayerGroup } from '../../helper';
+import { DateDisplayTypes, Globalization } from '../../helper';
 import { TMColors } from '../../utils/theme';
 import TMVilViewer from '../base/TMVilViewer';
-import ReactDOMServer from 'react-dom/server';
 const TMDateBox = (props) => {
     useEffect(() => {
         let htmlElement = dateBoxRef?.current?.instance().element();
@@ -50,7 +48,7 @@ const TMDateBox = (props) => {
             return "datetime";
         return props.dateDisplayType == DateDisplayTypes.Date ? "date" : "time";
     };
-    return (_jsxs(_Fragment, { children: [_jsxs(DateBox, { ref: dateBoxRef, 
+    return (_jsxs(_Fragment, { children: [_jsx(DateBox, { ref: dateBoxRef, 
                 // defaultValue={props.defaultValue}
                 showClearButton: props.showClearButton, dateSerializationFormat: props.useDateSerializationFormat ? 'yyyy-MM-ddTHH:mm:ss' : undefined, disabled: props.disabled, displayFormat: props.displayFormat ?? Globalization.getDateDisplayFormat(props.dateDisplayType), dropDownOptions: dropDownOptions, label: props.label, labelMode: 'static', type: getType(), useMaskBehavior: true, height: '28px', value: props.value, width: props.width, valueChangeEvent: 'keyup input change', onValueChange: (e) => { props.onValueChange?.(e); }, onKeyUp: (e) => {
                     if (e.event?.code == "Space") {
@@ -67,12 +65,6 @@ const TMDateBox = (props) => {
                     const currentDate = new Date(e.value);
                     currentDate.setHours(0, 0, 0, 0);
                     e.component.option("value", currentDate.toISOString());
-                }, children: [props.buttons?.map((btn) => {
-                        return (_jsx(Button, { name: btn.text, location: "after", options: {
-                                icon: ReactDOMServer.renderToString(_jsx(IconLayerGroup, {})),
-                                stylingMode: 'text',
-                                onClick: () => btn?.onClick?.()
-                            } }, btn.text));
-                    }), _jsx(Button, { name: "dropDown" })] }), _jsx(TMVilViewer, { vil: props.validationItems })] }));
+                } }), _jsx(TMVilViewer, { vil: props.validationItems })] }));
 };
 export default TMDateBox;

package/lib/components/editors/TMTextBox.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from 'react';
 import styled from 'styled-components';
-import { StyledEditor, StyledEditorButtonIcon, StyledEditorContainer, StyledEditorIcon, StyledEditorLabel, editorColorManager } from './TMEditorStyled';
+import { StyledEditor, StyledEditorContainer, StyledEditorIcon, StyledEditorLabel, editorColorManager } from './TMEditorStyled';
 import { FontSize, TMColors } from '../../utils/theme';
 import { genUniqueId, IconClearButton, IconHide, IconShow, useWindowWidth } from '../../helper';
 import ShowAlert from '../base/TMAlert';
@@ -18,6 +18,19 @@ const StyledShowPasswordIcon = styled.div `
     transform: translateY(-25px);
     cursor: pointer;
 `;
+const StyledTextBoxEditorButton = styled.div `
+    color: ${TMColors.button_icon};
+    display: flex;
+    align-items: center;
+    position: relative;
+    cursor: pointer;
+    &:focus{
+        outline: none;
+        background-image: linear-gradient(white, #E4E9F7);
+        border-bottom: 2px solid;
+        border-bottom-color: ${TMColors.primary};
+     }
+`;
 const TMTextBox = ({ autoFocus, maxLength, precision, scale, showClearButton, validationItems = [], label = '', readOnly = false, formulaItems = [], buttons = [], isModifiedWhen, placeHolder, elementStyle, width = '100%', maxValue, fontSize = FontSize.defaultFontSize, icon, labelPosition = 'left', value, disabled = false, type = 'text', onValueChanged, onBlur }) => {
     const [initialType, setInitialType] = useState(type);
     const [currentType, setCurrentType] = useState(type);
@@ -128,12 +141,13 @@ const TMTextBox = ({ autoFocus, maxLength, precision, scale, showClearButton, va
                                 e.preventDefault();
                         }
                     }, "$isMobile": screenWidth < 640, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, "$fontSize": fontSize, "$maxValue": maxValue, "$width": width, "$type": currentType }), initialType === 'password' && currentValue && _jsx(StyledShowPasswordIcon, { onClick: toggleShowPassword, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: showPasswordIcon() }), initialType !== 'password' &&
-                    buttons.map((buttonItem, index) => {
-                        return (_jsx(StyledEditorButtonIcon, { onClick: buttonItem.onClick, "$index": index, "$transform": '-26px', children: _jsx(TMTooltip, { content: buttonItem.text, children: buttonItem.icon }) }, index));
-                    }), initialType !== 'password' && showClearButton && currentValue && _jsx(StyledEditorButtonIcon, { "$index": buttons.length, "$transform": '-26px', onClick: () => {
-                        onValueChanged?.({ target: { value: undefined } });
-                        onBlur?.(undefined);
-                    }, children: _jsx(IconClearButton, {}) }), formulaItems.length > 0 && (_jsx(ContextMenu, { dataSource: formulaMenuItems, target: `#text-${id}`, onItemClick: (e) => { insertText(e.itemData?.text ?? ''); } })), _jsx(TMVilViewer, { vil: validationItems })] }));
+                    _jsxs("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', position: 'absolute', right: '6px', top: '7px', pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? 0.4 : 1 }, children: [showClearButton && currentValue &&
+                                _jsx(StyledTextBoxEditorButton, { onClick: () => {
+                                        onValueChanged?.({ target: { value: undefined } });
+                                        onBlur?.(undefined);
+                                    }, children: _jsx(IconClearButton, {}) }), buttons.map((buttonItem, index) => {
+                                return (_jsx(StyledTextBoxEditorButton, { onClick: buttonItem.onClick, children: _jsx(TMTooltip, { content: buttonItem.text, children: buttonItem.icon }) }, buttonItem.text));
+                            })] }), 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, { "$isFocused": isFocused, "$labelPosition": labelPosition, "$disabled": disabled, "$fontSize": fontSize, children: label }), renderInputField()] }) })] }));

package/lib/components/sidebar/TMSidebar.d.ts

@@ -12,6 +12,10 @@ interface ITMSidebar {
     /** Lista di TMSidebarItem che compongono il menù */
     items: JSX.Element[];
     height?: string;
+    width?: string;
+    top?: string;
+    left?: string;
+    borderRightRadius?: string;
 }
 declare const TMSidebar: React.FC<ITMSidebar>;
 export default TMSidebar;

package/lib/components/sidebar/TMSidebar.js

@@ -1,14 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from 'styled-components';
 import { SDK_Globals } from '@topconsultnpm/sdk-ts-beta';
+import { ApplicationThemeColor } from './TMSidebarItem';
 const StyledTMSidebarContainer = styled.div `
-    top: 50px;
-    left: 0px;
-    width: 50px;
-    height: ${props => props.$height ?? ''} ;
-    background: ${props => props.$appName === 'ORCHESTRATOR' ? '#135596 0% 0% no-repeat padding-box' : props.$appName === 'SURFER' ? '#0e7418 0% 0% no-repeat padding-box' : '#b51678 0% 0% no-repeat padding-box'};
+    top: ${props => props.$top ? props.$top : '53px'};
+    left: ${props => props.$left ? props.$left : '0px'};
+    width: ${props => props.$width ? props.$width : '50px'};
+    height: ${props => props.$height ? props.$height : 'calc(100% - 88px)'};
+    background: ${props => props.$appName === 'ORCHESTRATOR' ? `${ApplicationThemeColor.ORCHESTRATOR} 0% 0% no-repeat padding-box` : props.$appName === 'SURFER' ? `${ApplicationThemeColor.SURFER} 0% 0% no-repeat padding-box` : `${ApplicationThemeColor.DESIGNER} 0% 0% no-repeat padding-box`};
     box-shadow: 0px 3px 6px #00000029;
-    border-radius: 0px 0px;
+    border-radius: 0;
     opacity: 1;
     display: flex;
     flex-direction: column;
@@ -16,9 +17,11 @@ const StyledTMSidebarContainer = styled.div `
     align-items: center;
     padding: 10px 0px 0px 0px;
     position: absolute;
+    border-top-right-radius: 10px;
+    border-bottom-right-radius: 10px;
     /* z-index: 20000001; */
 `;
-const TMSidebar = ({ items, height }) => {
-    return (_jsx(_Fragment, { children: _jsxs(StyledTMSidebarContainer, { "$appName": SDK_Globals.appModule, "$height": height, children: [items.filter(item => item.props.type !== 'app'), _jsx("div", { style: { position: 'absolute', bottom: '10px', display: 'flex', flexDirection: 'column' }, children: items.filter(item => item.props.type === 'app') })] }) }));
+const TMSidebar = ({ items, height, borderRightRadius, left, top, width }) => {
+    return (_jsxs(StyledTMSidebarContainer, { "$borderRightRadius": borderRightRadius, "$left": left, "$top": top, "$width": width, "$appName": SDK_Globals.appModule, "$height": height, children: [items.filter(item => item.props.type !== 'app'), _jsx("div", { style: { position: 'absolute', bottom: '10px', display: 'flex', flexDirection: 'column' }, children: items.filter(item => item.props.type === 'app') })] }));
 };
 export default TMSidebar;

package/lib/components/sidebar/TMSidebarItem.d.ts

@@ -1,12 +1,19 @@
 import React from 'react';
 import { AppRouteType } from './TMSidebar';
+export declare enum ApplicationThemeColor {
+    SURFER = "#0e7418",
+    ORCHESTRATOR = "#135596",
+    DESIGNER = "#b51678"
+}
 export interface ITMSidebarItem {
     name: string;
     path: string;
     type?: AppRouteType;
     isSelected: boolean;
     icon: any;
+    badgeNumber?: number;
     onClick?: (e: ITMSidebarItem) => void;
+    isAppIcon?: boolean;
 }
 declare const TMSidebarItem: React.FunctionComponent<ITMSidebarItem>;
 export default TMSidebarItem;

package/lib/components/sidebar/TMSidebarItem.js

@@ -1,7 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from 'styled-components';
-import { TMColors } from '../../utils/theme';
 import TMTooltip from '../base/TMTooltip';
+import { AppModules, SDK_Globals } from '@topconsultnpm/sdk-ts-beta';
+export var ApplicationThemeColor;
+(function (ApplicationThemeColor) {
+    ApplicationThemeColor["SURFER"] = "#0e7418";
+    ApplicationThemeColor["ORCHESTRATOR"] = "#135596";
+    ApplicationThemeColor["DESIGNER"] = "#b51678";
+})(ApplicationThemeColor || (ApplicationThemeColor = {}));
 const StyledTMSidebarItemContainer = styled.div `
     margin-bottom: 10px;
     background-color: transparent;
@@ -9,7 +15,9 @@ const StyledTMSidebarItemContainer = styled.div `
     transition: all 200ms ease;
     user-select: none;
     cursor: pointer;
-    color:  ${(props) => props.$isSelected ? TMColors.secondary : '#fff'};
+    color:  ${(props) => props.$isSelected ? props.$app === AppModules.SURFER ? ApplicationThemeColor.SURFER : props.$app === AppModules.ORCHESTRATOR ? ApplicationThemeColor.ORCHESTRATOR : ApplicationThemeColor.DESIGNER : '#fff'};
+    background-color: ${props => props.$isSelected ? 'white' : 'transparent'} ;
+    border-radius: 3px;
     width: 32px;
     height: 32px;
 
@@ -18,10 +26,12 @@ const StyledTMSidebarItemContainer = styled.div `
     }
 
     &:hover {
-        color: ${TMColors.secondary};
+        background-color: ${props => !props.$isApp && 'white'};
+        color: ${props => !props.$isApp && props.$app === AppModules.SURFER ? ApplicationThemeColor.SURFER : props.$app === AppModules.ORCHESTRATOR ? ApplicationThemeColor.ORCHESTRATOR : ApplicationThemeColor.DESIGNER};
     }
 `;
 const TMSidebarItem = (props) => {
-    return (_jsx(TMTooltip, { hideAfterDelay: true, content: props.name, children: _jsx(StyledTMSidebarItemContainer, { "$isSelected": props.isSelected, children: _jsxs("div", { onClick: () => props.onClick?.(props), children: [_jsx("i", { children: props.icon }), _jsx("p", { children: props.name })] }) }) }));
+    let app = SDK_Globals.appModule;
+    return (_jsx(TMTooltip, { hideAfterDelay: true, content: props.name, children: _jsxs(StyledTMSidebarItemContainer, { "$app": app, "$isApp": props.isAppIcon, onClick: () => props.onClick?.(props), style: { position: 'relative' }, "$isSelected": props.isSelected, children: [_jsxs("div", { children: [_jsx("i", { children: props.icon }), _jsx("p", { children: props.name })] }), props.badgeNumber > 0 && _jsx("div", { style: { width: '22px', height: '22px', backgroundColor: '#f09c0a', position: 'absolute', borderRadius: '22px', top: -6, right: -6, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '1rem', fontWeight: 'bold' }, children: props.badgeNumber })] }) }));
 };
 export default TMSidebarItem;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react-beta",
-    "version": "6.6.19",
+    "version": "6.6.21",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",