@topconsultnpm/sdkui-react-beta 6.6.0 → 6.6.2

package/lib/components/base/TMListViewOLD.js

@@ -0,0 +1,321 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { Colors, FontSize } from '../../utils/theme';
+import { getColor } from '../../helper/helpers';
+import { IconCloseCircle, IconDown, IconInsertAbove, IconInsertBelow, IconSearch, IconUp } from '../../helper';
+const StyledContainer = styled.div `
+    z-index: -1;
+    border: 1px solid;
+    border-color: ${props => getColor(props.$color)} ;
+    overflow: auto;
+    max-height: ${props => props.$maxHight};
+`;
+const StyledListViewWrapper = styled.div `
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    font-size: ${props => props.$fontSize} ;
+`;
+const StyledListItemContainer = styled.div `
+    display: flex;
+    width: 100%;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+    background-color: ${props => !props.$isSelected ? props.$index % 2 === 0 ? 'white' : Colors.colore_sul_primary : Colors.secondary};
+    font-size: ${props => props.$fontSize};
+    color: ${props => !props.$isSelected ? Colors.primary : 'white'};
+    z-index: 1;
+`;
+const StyledLsitItemCheck = styled.input `
+    margin-right: 5px;
+    cursor: pointer;
+`;
+const StyledListItem = styled.li `
+    padding: 3px;
+    list-style: none;
+    text-decoration: none;
+    color: ${props => props.$color};
+`;
+const StyledListViewItemDetails = styled.div `
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    padding: 5px;
+    background-color: ${Colors.contenitore_su_colore_primary};
+    color: white;
+    width: 100%;
+`;
+const StyledDetailsToggleButton = styled.button `
+    border: none;
+    background-color: transparent;
+    cursor: pointer;
+    color: ${props => props.$isSelected ? 'white' : Colors.primary};
+`;
+const StyledListViewSearchContainer = styled.div `
+    position: sticky;
+    padding: 5px;
+    top: 0px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    padding-bottom: 5px;
+    border-bottom: 1px solid ${props => getColor(props.$color)};
+    background-color: ${props => getColor(props.$color)};
+    z-index: 100;
+`;
+const StyledSelectOptionCheckBox = styled.input `
+    margin-right: 5px;
+    margin-left: 2px;
+    cursor: pointer;
+    width: 20px;
+    height: 20px;
+`;
+const StyledListViewSearchInput = styled.input `
+    width: 100%;
+    padding: 3px 10px;
+    border-radius: 5px;
+    border-width: 1px ;
+    border-color: ${props => getColor(props.$color)};
+    border-style: solid;
+    color: ${props => getColor(props.$color)};
+    &::placeholder{
+        color: ${props => getColor(props.$color)};
+    }
+    &:focus{
+        outline: none;
+        background-color: #fbf5ca;      
+    }
+`;
+const StyledListViewSearchIcon = styled.button `
+    background-color: transparent;
+    border: none;
+    cursor: ${props => props.$isSearch ? 'pointer' : 'default'};
+    color: ${props => getColor(props.$color)};
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    &:focus{
+        outline: ${props => !props.$isSearch && 'none'};     
+    }
+`;
+const StyledListViewFooter = styled.div `
+    z-index: 100;
+    position: sticky;
+    bottom: 0px;
+    width: 100%;
+    padding: 5px;
+    background-color: ${props => getColor(props.$color)};
+    color: white;
+    font-size: 1rem;
+`;
+const StyledShowHideDetailsButton = styled.button `
+    background-color: transparent;
+    border: none;
+    margin-right: 10px;
+    /* color: ${props => getColor(props.$color)}; */
+    color: white;
+    cursor: pointer;
+    transform: translateY(1.5px);
+`;
+const TMListViewOLD = ({ maxHeight = '100%', selectedValues = [], color = 'primary', footer = false, header = false, customItemDetails, customListViewItem, hasItemDetails = false, detailsFields, dataSource, displayField, searchable, elementStyle, selectedListItems, multipleSelect = false, fontSize = FontSize.defaultFontSize }) => {
+    const [focusedItem, setFocusedItem] = useState(undefined);
+    const [selectedItems, setSelectedItems] = useState([]);
+    const [detailRequestItems, setDetailRequestItems] = useState([]);
+    const [currentDetailsFields, setCurrentDetailsField] = useState(detailsFields);
+    const [searchValue, setSearchValue] = useState('');
+    const [currentDataSource, setCurrentDataSource] = useState([]);
+    const [usedFields, setUsedFields] = useState([]);
+    useEffect(() => {
+        if (!selectedValues.fieldName) {
+            setSelectedItems(selectedValues);
+        }
+        else {
+            let data = [];
+            for (let value of selectedValues.fieldValues) {
+                for (let d of currentDataSource) {
+                    if (value === d[selectedValues.fieldName]) {
+                        data.push(d);
+                    }
+                }
+            }
+            setSelectedItems(data);
+        }
+    }, [currentDataSource]);
+    useEffect(() => { selectedListItems && selectedListItems(selectedItems); }, [selectedItems]);
+    useEffect(() => {
+        const selectByKey = (e) => { if (e.code === 'Space' && focusedItem) {
+            onListItemClick();
+        } };
+        window.addEventListener('keyup', selectByKey);
+        return () => window.removeEventListener('keyup', selectByKey);
+    }, [focusedItem, selectedItems]);
+    useEffect(() => {
+        let arr = [];
+        if (customListViewItem) {
+            for (let key of Object.keys(customListViewItem.props)) {
+                arr.push(customListViewItem.props[key]);
+            }
+        }
+        else {
+            arr.push(displayField);
+        }
+        if (customItemDetails) {
+            for (let key of Object.keys(customItemDetails.props)) {
+                arr.push(customItemDetails.props[key]);
+            }
+        }
+        else if (currentDetailsFields) {
+            for (let field of currentDetailsFields) {
+                arr.push(field);
+            }
+        }
+        setUsedFields(arr);
+    }, [customItemDetails, customListViewItem, displayField, detailsFields]);
+    useEffect(() => {
+        if (hasItemDetails) {
+            let keys = Object.keys(dataSource[0]);
+            if (!displayField) {
+                let detailsKeys = keys.filter(key => key !== displayField);
+                if (!detailsFields) {
+                    setCurrentDetailsField(detailsKeys);
+                }
+                else {
+                    setCurrentDetailsField(detailsFields);
+                }
+            }
+            else {
+                if (!detailsFields) {
+                    setCurrentDetailsField(keys);
+                }
+                else {
+                    setCurrentDetailsField(detailsFields);
+                }
+            }
+        }
+    }, [hasItemDetails, detailsFields, displayField]);
+    useEffect(() => {
+        if (searchable) {
+            if (searchValue.length > 0) {
+                filter(dataSource, searchValue);
+            }
+            else {
+                setCurrentDataSource(dataSource);
+            }
+        }
+        else {
+            setCurrentDataSource(dataSource);
+        }
+    }, [dataSource, searchValue, searchable]);
+    const showHideDetails = () => {
+        if (detailRequestItems.length > 0) {
+            setDetailRequestItems([]);
+        }
+        else {
+            setDetailRequestItems(currentDataSource);
+        }
+    };
+    const filter = (dataSource, value) => {
+        let arr = [];
+        for (let data of dataSource) {
+            if (typeof data === 'string') {
+                setCurrentDataSource(dataSource.filter(item => item.toString().toLowerCase().includes(value.toLowerCase())));
+            }
+            else {
+                for (let key of usedFields) {
+                    if (data[key].toString().toLowerCase().includes(value.toLowerCase())) {
+                        if (!arr.includes(data)) {
+                            arr.push(data);
+                        }
+                    }
+                }
+                ;
+                setCurrentDataSource(arr);
+            }
+        }
+    };
+    const onListItemClick = () => {
+        if (multipleSelect) {
+            if (!hasItem(selectedItems, focusedItem)) {
+                setSelectedItems(prev => [...prev, focusedItem]);
+            }
+            else {
+                (setSelectedItems(selectedItems.filter(item => JSON.stringify(item) !== JSON.stringify(focusedItem))));
+            }
+        }
+        else {
+            setSelectedItems([]);
+            setSelectedItems(prev => [...prev, focusedItem]);
+        }
+    };
+    const onCheckClick = () => { if (hasItem(selectedItems, focusedItem)) {
+        setSelectedItems(selectedItems.filter(item => JSON.stringify(item) !== JSON.stringify(focusedItem)));
+    } };
+    const detailsToggle = (e) => {
+        if (detailRequestItems.includes(focusedItem)) {
+            setDetailRequestItems(detailRequestItems.filter(item => item !== focusedItem));
+        }
+        else {
+            setDetailRequestItems(prev => [...prev, focusedItem]);
+        }
+    };
+    const obj = (data, type) => {
+        let object = {};
+        switch (type) {
+            case 'item':
+                for (let key of Object.keys(customListViewItem?.props)) {
+                    object[key] = data[customListViewItem?.props[key]];
+                }
+                break;
+            case 'details':
+                for (let key of Object.keys(customItemDetails?.props)) {
+                    object[key] = data[customItemDetails?.props[key]];
+                }
+                break;
+        }
+        return object;
+    };
+    const hasItem = (arr, el) => {
+        let bool = false;
+        for (let item of arr) {
+            if (typeof item === 'string') {
+                if (item === el) {
+                    bool = true;
+                    break;
+                }
+                else {
+                    bool = false;
+                }
+            }
+            else {
+                if (JSON.stringify(item) == JSON.stringify(el)) {
+                    bool = true;
+                    break;
+                }
+                else {
+                    bool = false;
+                }
+            }
+        }
+        return bool;
+    };
+    const selectDeselectAll = () => { if (selectedItems.length > 0) {
+        setSelectedItems([]);
+    }
+    else {
+        setSelectedItems(currentDataSource);
+    } };
+    const renderedList = () => {
+        return (currentDataSource?.map((d, index) => (_jsxs(StyledListViewWrapper, { "$fontSize": fontSize, children: [_jsxs(StyledListItemContainer, { "$isFocused": focusedItem === d, "$isSelected": hasItem(selectedItems, d), "$fontSize": fontSize, tabIndex: 0, "$index": index, onFocus: () => setFocusedItem(d), children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', width: '100%' }, onClick: onListItemClick, children: [multipleSelect && _jsx(StyledLsitItemCheck, { checked: hasItem(selectedItems, d), onChange: onCheckClick, tabIndex: -1, type: "checkbox" }), !customListViewItem ? _jsx(StyledListItem, { "$color": color, children: displayField ? d[displayField] : d }) : React.cloneElement(customListViewItem, obj(d, 'item'))] }), hasItemDetails && _jsx(StyledDetailsToggleButton, { "$isSelected": hasItem(selectedItems, d), onClick: (e) => detailsToggle(e), children: detailRequestItems.includes(d) ? _jsx(IconUp, {}) : _jsx(IconDown, {}) })] }), detailRequestItems.includes(d) && _jsxs(StyledListViewItemDetails, { children: [" ", !customItemDetails ? currentDetailsFields.map((detail, index) => (_jsxs("div", { children: [detail, ": ", d[detail]] }, index))) : React.cloneElement(customItemDetails, obj(d, 'details')), " "] })] }, index))));
+    };
+    const renderedHeader = () => {
+        return (_jsxs(StyledListViewSearchContainer, { "$color": color, children: [multipleSelect && _jsx(StyledSelectOptionCheckBox, { "$color": color, "$fontsize": fontSize, type: 'checkbox', checked: selectedItems.length > 0, onChange: selectDeselectAll }), hasItemDetails && _jsx(StyledShowHideDetailsButton, { "$color": color, onClick: showHideDetails, children: detailRequestItems.length > 0 ? _jsx(IconInsertBelow, {}) : _jsx(IconInsertAbove, {}) }), searchable && _jsx(StyledListViewSearchInput, { "$color": color, value: searchValue, onChange: (e) => setSearchValue(e.target.value), placeholder: 'search' }), searchable && _jsx(StyledListViewSearchIcon, { onClick: () => searchValue.length > 0 && setSearchValue(''), "$isSearch": searchValue.length > 0, "$color": color, children: searchValue.length > 0 ? _jsx(IconCloseCircle, {}) : _jsx(IconSearch, {}) })] }));
+    };
+    return (_jsx("div", { style: elementStyle, children: _jsxs(StyledContainer, { "$maxHight": maxHeight, "$color": color, children: [" ", (searchable || multipleSelect) && renderedHeader(), " ", _jsx("ul", { children: renderedList() }), " ", multipleSelect && footer && _jsxs(StyledListViewFooter, { "$color": color, children: ["Selected items: ", selectedItems.length, " | Visible items: ", currentDataSource.length] })] }) }));
+};
+export default TMListViewOLD;

package/lib/components/choosers/TMDynDataListItemChooser.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import { DataListItemDescriptor, QueryDescriptor, DynamicDataListDescriptor, SearchResultDescriptor, MetadataDescriptor, LayoutModes } from '@topconsultnpm/sdk-ts-beta';
+import { ITMChooserProps, ITMChooserFormProps } from '../../ts';
+interface ITMDynDataListItemChooserProps extends ITMChooserProps {
+    /** TID della lista dati da gestire  */
+    tid: number | undefined;
+    /** metadato della lista dati dinamica da gestire  */
+    md: MetadataDescriptor | undefined;
+    /** Contesto di utilizzo  */
+    layoutMode?: LayoutModes;
+    /** Contiene i values selezionati  */
+    values?: string[];
+    /** Visualizza il bordo  */
+    showBorder?: boolean;
+    /** Se presente, visualizza il bottone Pulisci ed esegue  */
+    hasClear?: boolean;
+    /** Se presente, sono i parametri da passare alla query per recuperare il dataSource  */
+    queryParamsDynDataList?: string[];
+    /** Indica quali liste dati dinamiche aggiornare in cascata  */
+    onCascadeRefreshDynDataLists?: (dynDataListsToBeRefreshed: DynDataListsToBeRefreshed[]) => void;
+}
+export declare const IsParametricQuery: (qd: QueryDescriptor | undefined) => boolean;
+export type DynDataListsToBeRefreshed = {
+    mid: number | undefined;
+    queryParams: string[];
+    midStarter: number | undefined;
+};
+declare const TMDynDataListItemChooser: React.FunctionComponent<ITMDynDataListItemChooserProps>;
+export default TMDynDataListItemChooser;
+interface ITMDynDataListItemChooserFormProps extends ITMChooserFormProps<DataListItemDescriptor> {
+    TID: number | undefined;
+    MID: number | undefined;
+    layoutMode?: LayoutModes;
+    dynDL?: DynamicDataListDescriptor;
+    searchResult?: SearchResultDescriptor;
+}
+export declare const TMDynDataListItemChooserForm: React.FunctionComponent<ITMDynDataListItemChooserFormProps>;

package/lib/components/choosers/TMDynDataListItemChooser.js

@@ -0,0 +1,128 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { DataColumnTypes, SDK_Localizator, DataListCacheService, SDK_Globals, LayoutModes } from '@topconsultnpm/sdk-ts-beta';
+import { Column } from 'devextreme-react/cjs/data-grid';
+import { IconDetails, IconSearch, getDataColumnName, Globalization, SDKUI_Localizator, searchResultDescriptorToSimpleArray } from '../../helper';
+import { StyledDivHorizontal } from '../base/Styled';
+import { TMExceptionBoxManager } from '../base/TMPopUp';
+import TMSpinner from '../base/TMSpinner';
+import TMSummary from '../editors/TMSummary';
+import TMChooserForm from '../forms/TMChooserForm';
+//TODO: Spostare in SDK QueryEngine
+export const IsParametricQuery = (qd) => {
+    if (qd == undefined)
+        return false;
+    if (qd.where == undefined)
+        return false;
+    let qp = "{@QueryParam";
+    for (const wi of qd.where) {
+        if (wi.value1?.includes(qp))
+            return true;
+        if (wi.value2?.includes(qp))
+            return true;
+    }
+    return false;
+};
+const TMDynDataListItemChooser = ({ tid, md, layoutMode = LayoutModes.None, queryParamsDynDataList, backgroundColor, showBorder = true, elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, validationItems = [], onValueChanged, onCascadeRefreshDynDataLists, hasClear }) => {
+    const [showChooser, setShowChooser] = useState(false);
+    const [dynDl, setDynDl] = useState();
+    const [dataSource, setDataSource] = useState();
+    useEffect(() => {
+        let d = md?.dynDL_Cfgs?.[0];
+        if (md?.dynDL_IsMultiCfg == 1) {
+            switch (layoutMode) {
+                case LayoutModes.None:
+                case LayoutModes.Update:
+                    d = md?.dynDL_Cfgs?.[1];
+                    break;
+                default:
+                    d = md?.dynDL_Cfgs?.[0];
+                    break;
+            }
+        }
+        setDynDl(d);
+        // if (IsParametricQuery(d?.qd) && (queryParamsDynDataList?.length ?? 0) <= 0) return;
+        if (!IsParametricQuery(d?.qd) && !dataSource)
+            loadData().then((result) => { setDataSource(result); }).catch((err) => { TMExceptionBoxManager.show({ exception: err }); });
+    }, [md]);
+    useEffect(() => {
+        if (!IsParametricQuery(dynDl?.qd))
+            return;
+        if ((queryParamsDynDataList?.length ?? 0) <= 0) {
+            setDataSource(undefined);
+            return;
+        }
+        loadData().then((result) => {
+            setDataSource(result);
+            if (values && values.length > 0) {
+                let description = result?.dtdResult?.rows?.filter(o => o[dynDl?.selectItemForValue ?? 0] == values?.[0])?.[0]?.[dynDl?.selectItemForDescription ?? 0];
+                if (!description)
+                    onValueChanged?.(undefined);
+            }
+        }).catch((err) => { TMExceptionBoxManager.show({ exception: err }); });
+    }, [queryParamsDynDataList]);
+    const loadData = async () => {
+        return await SDK_Globals.tmSession?.NewSearchEngine().GetDynDataListValuesAsync(tid, md?.id, layoutMode, queryParamsDynDataList ?? []);
+    };
+    const renderTemplate = () => {
+        return (_jsxs(StyledDivHorizontal, { style: { minWidth: '125px' }, children: [placeHolder && (!values || values.length <= 0) && _jsx("p", { children: placeHolder }), values && values.length > 0 && dynDl && dataSource && _jsxs(StyledDivHorizontal, { children: [_jsx(IconDetails, {}), _jsx("p", { style: { marginLeft: '5px' }, children: dataSource.dtdResult?.rows?.filter(o => o[dynDl.selectItemForValue ?? 0] == values?.[0])?.[0]?.[dynDl.selectItemForDescription ?? 0] })] }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }));
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { backgroundColor: backgroundColor, showBorder: showBorder, iconEditButton: _jsx(IconSearch, {}), onEditorClick: () => setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, label: label, template: renderTemplate(), onClearClick: hasClear ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
+                _jsx(TMDynDataListItemChooserForm, { TID: tid, MID: md?.id, dynDL: dynDl, allowMultipleSelection: allowMultipleSelection, searchResult: dataSource, selectedIDs: values, onClose: () => setShowChooser(false), onChoose: (IDs) => {
+                        onValueChanged?.(IDs);
+                        if (!dynDl)
+                            return;
+                        if (!dynDl.onValueChanged_DynDataListsToBeRefreshed)
+                            return;
+                        let row = dataSource?.dtdResult?.rows?.filter(o => o[dynDl.selectItemForValue ?? 0] == IDs?.[0]);
+                        if (!row)
+                            return;
+                        let toBeRefreshed = [];
+                        for (const t of dynDl.onValueChanged_DynDataListsToBeRefreshed) {
+                            let mid = t.item1;
+                            let queryParams = [];
+                            if ((t.item2 ?? 0) >= 0)
+                                queryParams.push(row[0][t.item2 ?? 0]);
+                            if ((t.item3 ?? 0) >= 0)
+                                queryParams.push(row[0][t.item3 ?? 0]);
+                            if ((t.item4 ?? 0) >= 0)
+                                queryParams.push(row[0][t.item4 ?? 0]);
+                            if ((t.item5 ?? 0) >= 0)
+                                queryParams.push(row[0][t.item5 ?? 0]);
+                            toBeRefreshed.push({ mid: mid, queryParams: queryParams, midStarter: md?.id });
+                        }
+                        onCascadeRefreshDynDataLists?.(toBeRefreshed);
+                    } })] }));
+};
+export default TMDynDataListItemChooser;
+export const TMDynDataListItemChooserForm = (props) => {
+    // const renderDataGridColumns = [
+    //     <Column key={0} dataField={"value"} caption={SDKUI_Localizator.Value} />,
+    //     <Column key={1} dataField={"name"} caption={SDKUI_Localizator.Description} />
+    // ]
+    const renderDataGridColumns = props.searchResult?.dtdResult?.columns?.map((col, index) => {
+        let keyField = getDataColumnName(props.searchResult?.fromTID, col);
+        const isVisible = col.extendedProperties?.["Visibility"] != "Hidden";
+        const dataType = () => {
+            switch (col.dataType) {
+                case DataColumnTypes.DateTime: return "datetime";
+                case DataColumnTypes.Bool: return "boolean";
+                case DataColumnTypes.Number: return "number";
+                default: return "string";
+            }
+        };
+        return (_jsx(Column, { dataField: keyField, caption: col.caption, visible: isVisible, dataType: dataType(), format: col.dataType === DataColumnTypes.DateTime ? Globalization.getDateDisplayFormat() : "" }, col.caption + index.toString()));
+    });
+    const keyValue = props.searchResult ? getDataColumnName(props.searchResult?.fromTID, props.searchResult?.dtdResult?.columns?.[props.dynDL?.selectItemForValue ?? 0]) : '';
+    const getItems = async (refreshCache) => {
+        if (!props.searchResult)
+            return [];
+        if (refreshCache)
+            DataListCacheService.RemoveAll();
+        TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.DataList} ...` });
+        let result = await SDK_Globals.tmSession?.NewSearchEngine().GetDynDataListValuesAsync(props.TID, props.MID, props.layoutMode, []);
+        TMSpinner.hide();
+        return result ? searchResultDescriptorToSimpleArray(result) ?? [] : [];
+    };
+    return (_jsx(TMChooserForm, { title: SDK_Localizator.DataLists, allowMultipleSelection: props.allowMultipleSelection, width: props.width, height: props.height, keyName: keyValue ?? '', showDefaultColumns: false, hasShowId: false, columns: renderDataGridColumns, selectedIDs: props.selectedIDs, cellRenderIcon: () => { return (_jsx(IconDetails, {})); }, dataSource: searchResultDescriptorToSimpleArray(props.searchResult) ?? [], getItems: getItems, onClose: props.onClose, onChoose: (IDs) => props.onChoose?.(IDs) }));
+};

package/lib/components/editors/TMTextArea.js

@@ -3,7 +3,7 @@ import { useState, useEffect, useRef } from 'react';
 import { StyledEditorButtonIcon, StyledEditorContainer, StyledEditorIcon, StyledEditorLabel, StyledTextareaEditor } from './TMEditorStyled';
 import { FontSize } from '../../utils/theme';
 import { useWindowWidth } from '../../helper';
-import TMContextMenu, { useContextMenu } from '../base/TMContextMenu';
+import TMContextMenu, { useContextMenu } from '../base/TMContextMenuOLD';
 import { TMExceptionBoxManager } from '../base/TMPopUp';
 import TMLayoutContainer, { TMLayoutItem } from '../base/TMLayout';
 import TMVilViewer from '../base/TMVilViewer';

package/lib/components/editors/TMTextBox.js

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { StyledEditor, StyledEditorButtonIcon, StyledEditorContainer, StyledEditorIcon, StyledEditorLabel, editorColorManager } from './TMEditorStyled';
 import { FontSize, TMColors } from '../../utils/theme';
 import { IconHide, IconShow, useWindowWidth } from '../../helper';
-import TMContextMenu, { useContextMenu } from '../base/TMContextMenu';
+import TMContextMenu, { useContextMenu } from '../base/TMContextMenuOLD';
 import ShowAlert from '../base/TMAlert';
 import { TMExceptionBoxManager } from '../base/TMPopUp';
 import TMLayoutContainer, { TMLayoutItem } from '../base/TMLayout';
@@ -91,7 +91,7 @@ const TMTextBox = ({ autoFocus, maxLength, precision, scale, validationItems = [
         if (maxValue)
             return maxValue;
         // if (precision && (!scale || scale == 0)) return Number("9".repeat(precision ?? 0));
-        console.log(Number("9".repeat((precision ?? 0) - (scale ?? 0)) + '.' + "9".repeat(scale ?? 0)));
+        // console.log(Number("9".repeat((precision ?? 0) - (scale ?? 0)) + '.' + "9".repeat(scale ?? 0)));
         if (precision || scale)
             return Number("9".repeat((precision ?? 0) - (scale ?? 0)) + '.' + "9".repeat(scale ?? 0));
         return Number(curValue);

package/lib/components/index.d.ts

@@ -1,9 +1,9 @@
 export { default as ShowAlert } from './base/TMAlert';
 export { default as TMButton } from './base/TMButton';
 export { default as TMClosableList } from './base/TMClosableList';
-export * from './base/TMContextMenu';
+export * from './base/TMContextMenuOLD';
 export { default as TMDropDownMenu } from './base/TMDropDownMenu';
-export { default as TMListView } from './base/TMListView';
+export { default as TMListViewOLD } from './base/TMListViewOLD';
 export { default as TMList } from './base/TMList';
 export { default as TMModal } from './base/TMModal';
 export * from './base/TMPopUp';
@@ -24,11 +24,13 @@ export { default as TMRadioButton } from './editors/TMRadioButton';
 export { default as TMDateBox } from './editors/TMDateBox';
 export { editorColorManager } from './editors/TMEditorStyled';
 export * from './choosers/TMDataListItemChooser';
+export * from './choosers/TMDynDataListItemChooser';
 export * from './choosers/TMDcmtTypeChooser';
 export * from './choosers/TMMetadataChooser';
 export * from './choosers/TMUserChooser';
 export { default as TMValidationItemsList } from './grids/TMValidationItemsList';
 export * from './query/TMQueryEditor';
+export * from './query/TMQueryResultForm';
 export * from './base/TMTab';
 export { default as TMHeader } from "./sidebar/TMHeader";
 export { default as TMSidebar } from "./sidebar/TMSidebar";

package/lib/components/index.js

@@ -3,9 +3,9 @@
 export { default as ShowAlert } from './base/TMAlert';
 export { default as TMButton } from './base/TMButton';
 export { default as TMClosableList } from './base/TMClosableList';
-export * from './base/TMContextMenu';
+export * from './base/TMContextMenuOLD';
 export { default as TMDropDownMenu } from './base/TMDropDownMenu';
-export { default as TMListView } from './base/TMListView';
+export { default as TMListViewOLD } from './base/TMListViewOLD';
 export { default as TMList } from './base/TMList';
 export { default as TMModal } from './base/TMModal';
 export * from './base/TMPopUp';
@@ -28,6 +28,7 @@ export { default as TMDateBox } from './editors/TMDateBox';
 export { editorColorManager } from './editors/TMEditorStyled';
 // choosers
 export * from './choosers/TMDataListItemChooser';
+export * from './choosers/TMDynDataListItemChooser';
 export * from './choosers/TMDcmtTypeChooser';
 export * from './choosers/TMMetadataChooser';
 export * from './choosers/TMUserChooser';
@@ -35,6 +36,7 @@ export * from './choosers/TMUserChooser';
 export { default as TMValidationItemsList } from './grids/TMValidationItemsList';
 //query
 export * from './query/TMQueryEditor';
+export * from './query/TMQueryResultForm';
 //tab
 export * from './base/TMTab';
 // others

package/lib/components/query/TMQueryEditor.d.ts

@@ -1,6 +1,28 @@
 import React from 'react';
-import { QueryDescriptor, ValidationItem } from '@topconsultnpm/sdk-ts-beta';
+import { MetadataDescriptor, QueryDescriptor, ValidationItem } from '@topconsultnpm/sdk-ts-beta';
 import { ITMApplyFormProps, FormModes } from '../../ts';
+import { DynDataListsToBeRefreshed } from '../choosers/TMDynDataListItemChooser';
+export declare const StyledRowItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledItemWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $borderRadius?: string;
+}>> & string;
+export declare const StyledAccordionItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledAccordionItemContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $disabled?: boolean;
+}>> & string;
+export declare const colorValue = "rgba(224,224,224,.5)";
+export declare const colorBrackets = "rgba(209,52,56,.3)";
+export declare const colorOperator = "rgba(16,124,16,.3)";
+export declare const color1 = "#F5DD9C";
+export declare const color2 = "rgba(15,108,189,.3)";
+export declare const color3 = "rgb(199, 236, 172)";
+export declare const color4 = "rgb(223, 204, 251)";
+export declare const color5 = "rgb(249, 181, 114)";
+export declare const color6 = "rgb(170, 215, 217)";
+export declare const color7 = "rgb(243, 208, 215)";
+export declare const color8 = "rgb(236, 202, 156)";
+export declare const color9 = "rgb(137, 185, 173)";
+export declare const colorX = "rgb(246, 245, 242)";
 export declare enum Descriptors {
     Query = 3
 }
@@ -14,7 +36,7 @@ export declare function useOrchApplyForm<T>(d: Descriptors, formMode: FormModes,
     applyData: () => void;
 };
 interface ITMQueryEditor extends ITMApplyFormProps<QueryDescriptor> {
-    onlyAdvancedSearchMode?: boolean;
+    runQdImmediately?: boolean;
     validateSelect?: boolean;
     validateOrderBy?: boolean;
     showDistinct?: boolean;
@@ -22,6 +44,20 @@ interface ITMQueryEditor extends ITMApplyFormProps<QueryDescriptor> {
     borderRadius?: string;
     searchText?: string;
     onFromTIDChanged?: (tid: number) => void;
+    onQDChanged?: (qd: QueryDescriptor) => void;
 }
 declare const TMQueryEditor: React.FunctionComponent<ITMQueryEditor>;
 export default TMQueryEditor;
+export declare const TMQdWhereItemValueEditor: ({ tid, value, queryParamsDynDataList, containerElement, allowMultipleSelection, autoFocus, numberOfOperands, md, onValueChanged, onValueChange, onCascadeRefreshDynDataLists }: {
+    tid: number | undefined;
+    value: string | undefined;
+    queryParamsDynDataList?: string[];
+    allowMultipleSelection: boolean;
+    numberOfOperands: number;
+    autoFocus: boolean;
+    containerElement: Element | undefined;
+    md: MetadataDescriptor | undefined;
+    onValueChanged?: (value: any) => void;
+    onValueChange?: (value: any) => void;
+    onCascadeRefreshDynDataLists?: (dynDataListsToBeRefreshed: DynDataListsToBeRefreshed[]) => void;
+}) => import("react/jsx-runtime").JSX.Element;