@topconsultnpm/sdkui-react-beta 6.5.51

package/lib/components/base/TMDropDownMenu.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+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 StyledMenuItem = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 6px;
+    width: 100%;
+    font-size: ${FontSize.defaultFontSize};
+`;
+const TMDropDownMenu = ({ content, items, disabled = false, color = TMColors.text_normal, backgroundColor = TMColors.default_background, borderRadius }) => {
+    const [id, setID] = useState('');
+    useEffect(() => { setID(genUniqueId()); }, [content]);
+    const renderItemTemplate = (itemData) => (_jsxs(StyledMenuItem, { children: [itemData.icon && _jsx("div", { style: { display: 'flex', alignItems: 'center' }, children: itemData.icon }), _jsx("span", { style: { flexGrow: 1 }, children: itemData.text }), itemData.items && _jsx("span", { className: "dx-icon-spinright dx-icon", style: { marginLeft: '10px' } })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(StyledContent, { id: `idContainer${id}`, tabIndex: disabled ? -1 : 0, "$disabled": disabled, "$color": color, "$backgroundColor": backgroundColor, "$borderRadius": borderRadius, children: content }), _jsx(ContextMenu, { target: `#idContainer${id}`, dataSource: items, showEvent: 'click', itemRender: renderItemTemplate, onItemClick: (e) => e.itemData?.onClick?.() })] }));
+};
+export default TMDropDownMenu;

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

@@ -0,0 +1,31 @@
+import { ValidationItem } from "@topconsultnpm/sdk-ts-beta";
+export type Colors = 'error' | 'warning' | 'success' | 'info' | 'primary' | 'secondary' | 'tertiary' | 'standard';
+type IconModes = 'outside' | 'inside' | 'none';
+type LabelModes = 'left' | 'top' | 'none';
+export type Sizes = 'small' | 'medium' | 'large';
+export interface ITMEditorBase {
+    backgroundColor?: string;
+    customActionIcon?: any;
+    disabled?: boolean;
+    elementStyle?: React.CSSProperties;
+    flexBase?: number;
+    fontSize?: string;
+    height?: string;
+    horizontalFlexBase?: number;
+    icon?: any;
+    iconMode?: IconModes;
+    iconSize?: Sizes;
+    isModifiedWhen?: boolean;
+    label?: string;
+    labelMode?: LabelModes;
+    labelPosition?: 'top' | 'left' | 'right';
+    labelAlign?: boolean;
+    placeHolder?: string;
+    readOnly?: boolean;
+    showId?: boolean;
+    value?: any;
+    validationItems?: ValidationItem[];
+    width?: string;
+    onCustomActionClick?: VoidFunction;
+}
+export {};

package/lib/components/base/TMEditorBase.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,51 @@
+import React from 'react';
+declare const TMCard: ({ borderRadius, onClick, scrollX, scrollY, width, height, children, title, fontSize, fontWeight, showBorder, padding, scroll, backgroundColor, color }: {
+    borderRadius?: boolean;
+    onClick?: () => void;
+    scrollX?: boolean;
+    scrollY?: boolean;
+    width?: string;
+    height?: string;
+    minWidth?: string;
+    minHeight?: string;
+    children?: React.ReactNode;
+    title?: string;
+    fontSize?: string;
+    fontWeight?: string;
+    showBorder?: boolean;
+    padding?: boolean;
+    scroll?: boolean;
+    backgroundColor?: string;
+    color?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const TMSplitterLayout: ({ animation, showSeparator, separatorColor, separatorSize, direction, children, start, min }: {
+    animation?: boolean;
+    separatorColor?: string;
+    showSeparator?: boolean;
+    separatorSize?: number;
+    direction?: "horizontal" | "vertical";
+    children?: React.ReactNode;
+    start?: string[];
+    min?: string[];
+}) => import("react/jsx-runtime").JSX.Element;
+declare const TMLayoutItem: ({ onClick, children, width, minWidth, maxWidth, maxHeight, height, minHeight }: {
+    onClick?: () => void;
+    children: React.ReactNode;
+    minWidth?: string;
+    width?: string;
+    maxWidth?: string;
+    maxHeight?: string;
+    fixed?: boolean;
+    height?: string;
+    minHeight?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const TMLayoutContainer: ({ gap, onClick, justifyContent, alignItems, children, direction }: {
+    gap?: number;
+    justifyContent?: string;
+    alignItems?: string;
+    onClick?: () => void;
+    children: React.ReactNode;
+    direction?: "vertical" | "horizontal";
+}) => import("react/jsx-runtime").JSX.Element;
+export { TMCard, TMLayoutItem, TMSplitterLayout };
+export default TMLayoutContainer;

package/lib/components/base/TMLayout.js

@@ -0,0 +1,152 @@
+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 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 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, " "] })] }));
+};
+const TMSplitterLayout = ({ animation = false, showSeparator = true, separatorColor = '#e4e4e4', separatorSize = 4, direction = 'horizontal', children, start = ['50%', '50%'], min = ['150px', '150px'] }) => {
+    function isReactFragment(variableToInspect) {
+        if (variableToInspect.type) {
+            return variableToInspect.type === React.Fragment;
+        }
+        return variableToInspect === React.Fragment;
+    }
+    const sepRef = useRef(null);
+    const firstDivRef = useRef(null);
+    const secondDivRef = useRef(null);
+    const [isFrag, setIsFrag] = useState(isReactFragment(React.Children.toArray(children)[1]));
+    useEffect(() => { setIsFrag(isReactFragment(React.Children.toArray(children)[1])); }, [isReactFragment(React.Children.toArray(children)[1])]);
+    useEffect(() => {
+        const firstDiv = firstDivRef.current;
+        const secondDiv = secondDivRef.current;
+        const sepDiv = sepRef.current;
+        let xCord = 0;
+        let yCord = 0;
+        const onMouseMoveSep = (e) => {
+            if (sepDiv) {
+                if (direction === 'horizontal') {
+                    let tempX = e.clientX - xCord;
+                    xCord = e.clientX;
+                    firstDiv.style.width = `calc(${firstDiv?.style.width} + ${tempX}px)`;
+                    secondDiv.style.width = `calc(${secondDiv?.style.width} - ${tempX}px)`;
+                }
+                else {
+                    let tempY = e.clientY - yCord;
+                    yCord = e.clientY;
+                    firstDiv.style.height = `calc(${firstDiv?.style.height} + ${tempY}px)`;
+                    secondDiv.style.height = `calc(${secondDiv?.style.height} - ${tempY}px)`;
+                }
+            }
+        };
+        const onTouchMoveSep = (e) => {
+            if (sepDiv) {
+                if (direction === 'horizontal') {
+                    let tempX = e.touches[0].clientX - xCord;
+                    xCord = e.touches[0].clientX;
+                    firstDiv.style.width = `calc(${firstDiv?.style.width} + ${tempX}px)`;
+                    secondDiv.style.width = `calc(${secondDiv?.style.width} - ${tempX}px)`;
+                }
+                else {
+                    let tempY = e.touches[0].clientY - yCord;
+                    yCord = e.touches[0].clientY;
+                    firstDiv.style.height = `calc(${firstDiv?.style.height} + ${tempY}px)`;
+                    secondDiv.style.height = `calc(${secondDiv?.style.height} - ${tempY}px)`;
+                }
+            }
+        };
+        const onMouseUpSep = () => {
+            sepDiv.style.userSelect = 'auto';
+            firstDiv.style.userSelect = 'auto';
+            secondDiv.style.userSelect = 'auto';
+            sepDiv.style.backgroundColor = separatorColor;
+            if (animation)
+                firstDiv.style.transition = 'ease 300ms';
+            if (animation)
+                secondDiv.style.transition = 'ease 300ms';
+            document.removeEventListener('mousemove', onMouseMoveSep);
+            document.removeEventListener('touchmove', onTouchMoveSep);
+        };
+        const onMouseDownSep = (e) => {
+            sepDiv.style.userSelect = 'none';
+            firstDiv.style.userSelect = 'none';
+            secondDiv.style.userSelect = 'none';
+            if (animation)
+                firstDiv.style.transition = 'none';
+            if (animation)
+                secondDiv.style.transition = 'none';
+            if (direction === 'horizontal') {
+                xCord = e.clientX;
+            }
+            else {
+                yCord = e.clientY;
+            }
+            sepDiv.style.backgroundColor = TMColors.tertiary;
+            document.addEventListener('mousemove', onMouseMoveSep);
+            document.addEventListener('mouseup', onMouseUpSep);
+            document.addEventListener('touchmove', onTouchMoveSep);
+            document.addEventListener('touchend', onMouseUpSep);
+        };
+        sepDiv?.addEventListener('mousedown', onMouseDownSep);
+        sepDiv?.addEventListener('touchstart', onMouseDownSep);
+        return () => { sepDiv?.removeEventListener('mousedown', onMouseDownSep); sepDiv?.removeEventListener('touchstart', onMouseDownSep); };
+    }, [firstDivRef, secondDivRef, sepRef, isFrag]);
+    return (_jsxs("div", { style: { display: 'flex', width: '100%', height: '100%', flexDirection: direction === 'vertical' ? 'column' : 'row', alignItems: 'flex-start', justifyContent: 'flex-start', position: 'relative' }, children: [_jsx("div", { style: { transition: animation ? 'ease 300ms' : 'none', overflow: 'hidden', height: direction === 'vertical' ? start[0] : '100%', minHeight: direction === 'vertical' ? min[0] : '100%', minWidth: direction === 'vertical' ? '100%' : min[0], width: direction === 'vertical' ? '100%' : start[0] }, ref: firstDivRef, children: React.Children.toArray(children)[0] }), !isFrag && _jsx("div", { ref: sepRef, style: { display: showSeparator ? 'block' : 'none', minWidth: direction === 'vertical' ? '100%' : `${separatorSize}px`, minHeight: direction === 'vertical' ? `${separatorSize}px` : '100%', backgroundColor: separatorColor, cursor: direction === 'vertical' ? 's-resize' : 'e-resize' } }), _jsx("div", { style: { transition: animation ? 'ease 300ms' : 'none', overflow: 'hidden', height: direction === 'vertical' ? start[1] : '100%', minHeight: direction === 'vertical' ? min[1] : '100%', minWidth: direction === 'vertical' ? '100%' : min[1], width: direction === 'vertical' ? '100%' : start[1] }, ref: secondDivRef, children: React.Children.toArray(children)[1] })] }));
+};
+const TMLayoutItem = ({ onClick, children, width = '100%', minWidth, maxWidth, maxHeight, height = '100%', minHeight }) => {
+    return (_jsx(StyledLayoutItem, { onClick: onClick, "$height": height, "$maxHeight": maxHeight, "$minHeight": minHeight, "$width": width, "$minWidth": minWidth, "$maxWidth": maxWidth, children: children }));
+};
+const TMLayoutContainer = ({ gap = 3, onClick, justifyContent = 'flex-start', alignItems = 'flex-start', children, direction = 'vertical' }) => {
+    const renderedEls = () => { return (React.Children.map(children, child => (child))); };
+    return (_jsxs(StyledLayoutContainer, { "$alignItems": alignItems, "$justifyContent": justifyContent, onClick: onClick, "$direction": direction, style: { gap: gap }, children: [" ", renderedEls(), " "] }));
+};
+export { TMCard, TMLayoutItem, TMSplitterLayout };
+export default TMLayoutContainer;

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

@@ -0,0 +1,9 @@
+interface ITMListItem {
+    icon: any;
+    text?: string;
+    onClick?: () => void;
+}
+declare const TMList: ({ items }: {
+    items: ITMListItem[];
+}) => import("react/jsx-runtime").JSX.Element;
+export default TMList;

package/lib/components/base/TMList.js

@@ -0,0 +1,46 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+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;
+  position: relative;
+  color: ${TMColors.text_normal};
+  padding: 4px 5px;
+  height: 40px;
+  width: 100%;
+  font-size: 1rem;
+  letter-spacing: 0px;
+
+  &:hover {
+        background-color: ${TMColors.border_normal};
+        /* color: ${TMColors.secondary}; */
+        /* border-left: 7px solid ${TMColors.primary}; */
+        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 StyledListContent = styled.div `
+  height: 100%;
+  width: 100%;
+  background-color: ${TMColors.default_background};
+  padding: 10px;
+  border-radius: 2px;
+  box-shadow: 1px 1px 7px rgba(0,0,0,0.15);
+`;
+;
+const TMList = ({ items }) => {
+    return (_jsx(StyledListContainer, { children: items?.map((item, index) => {
+            return (_jsxs(StyledListItem, { style: { gap: 10 }, onClick: item.onClick, children: [item.icon, item.text] }, index));
+        }) }));
+};
+export default TMList;

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ITMEditorBase, Colors as C } from '../base/TMEditorBase';
+type SelectedValueType = {
+    fieldName: string;
+    fieldValues: any[];
+};
+interface ITMListView extends ITMEditorBase {
+    dataSource?: any[];
+    multipleSelect?: boolean;
+    searchable?: boolean;
+    header?: boolean;
+    footer?: boolean;
+    selectedListItems?: (e: any[]) => void;
+    displayField?: string;
+    customListViewItem?: JSX.Element;
+    customItemDetails?: JSX.Element;
+    hasItemDetails?: boolean;
+    detailsFields?: string[];
+    color?: C;
+    selectedValues?: any[] | SelectedValueType;
+    maxHeight?: string;
+}
+declare const TMListView: React.FC<ITMListView>;
+export default TMListView;