@adaptabletools/adaptable-cjs 18.0.12 → 18.1.0-canary.0

package/src/agGrid/editors/AdaptablePercentageEditor/index.d.ts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { ICellEditorComp } from '@ag-grid-community/core';
+import { AdaptableNumberCellEditorParams } from '../AdaptableNumberEditor';
+/**
+ * Adaptable percentage editor parameters extending the number editor params.
+ */
+export interface AdaptablePercentageCellEditorParams extends AdaptableNumberCellEditorParams {
+}
+export declare const AdaptableReactPercentageEditor: React.ForwardRefExoticComponent<AdaptablePercentageCellEditorParams & React.RefAttributes<unknown>>;
+/**
+ * Used by default for all `abColDefNumber` columns.
+ *
+ * You can configure it by specifying `cellEditorParams` in the colDef:
+ *
+ * colDef {
+ *   field: 'stars',
+ *   type: 'abColDefNumber',
+ *   cellEditorParams: {
+ *     emptyValue: 5, // defaults to ''
+ *     showClearButton: false
+ *   }
+ * }
+ *
+ * For now, there are 2 editor params you can configure:
+ *
+ * cellEditorParams.showClearButton - defaults to `true` - whether to show the clear button. If `true`, it works together with `cellEditorParams.emptyValue`
+ * cellEditorParams.emptyValue - defaults to `''` (empty string) - value to set for the cell, when the clear button is pressed.
+ *
+ * When the colDef has a `valueParser` provided as a function, it will be used before setting the value for the cell.
+ */
+export declare class AdaptablePercentageEditor implements ICellEditorComp {
+    private value;
+    private columnId;
+    private el;
+    private params;
+    private editor;
+    private valueParser;
+    private unmountReactRoot?;
+    init(params: AdaptablePercentageCellEditorParams): void;
+    getGui(): HTMLDivElement;
+    getValue(): any;
+    focusIn(): void;
+    focusOut(): void;
+    afterGuiAttached(): void;
+    destroy(): void;
+    private onValueChange;
+}

package/src/agGrid/editors/AdaptablePercentageEditor/index.js

@@ -0,0 +1,153 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdaptablePercentageEditor = exports.AdaptableReactPercentageEditor = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const renderWithAdaptableContext_1 = require("../../../View/renderWithAdaptableContext");
+const InternalAdaptablePercentageEditor_1 = require("./InternalAdaptablePercentageEditor");
+const react_1 = require("react");
+const AdaptableNumberEditor_1 = require("../AdaptableNumberEditor");
+const times100_1 = require("../../../Utilities/times100");
+const divideBy100_1 = require("../../../Utilities/divideBy100");
+const defaultValueParser = ({ newValue, oldValue: _ }) => {
+    return newValue;
+};
+const style = {
+    position: 'absolute',
+    top: '0px',
+    left: '0px',
+    right: '0px',
+    bottom: '0px',
+};
+exports.AdaptableReactPercentageEditor = (0, react_1.forwardRef)((props, ref) => {
+    var _a, _b;
+    const [initialValue] = (0, react_1.useState)(() => (0, times100_1.times100)((0, AdaptableNumberEditor_1.getStartValue)(props)));
+    const valueRef = (0, react_1.useRef)(initialValue);
+    const columnId = props.column.getColId();
+    const adaptable = props.context.__adaptable;
+    const colValueParser = props.column.getColDef().valueParser;
+    const valueParser = typeof colValueParser === 'function' ? colValueParser : defaultValueParser;
+    function onValueChange(value) {
+        var _a;
+        const newValue = valueParser
+            ? valueParser(Object.assign(Object.assign({}, props), { oldValue: props.value, newValue: value }))
+            : value;
+        valueRef.current = newValue;
+        (_a = props.onValueChange) === null || _a === void 0 ? void 0 : _a.call(props, (0, divideBy100_1.divideBy100)(newValue));
+    }
+    const editorRef = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(ref, () => {
+        return {
+            focusIn() {
+                var _a;
+                (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            },
+            // the final value to send to the grid, on completion of editing
+            getValue() {
+                return (0, divideBy100_1.divideBy100)(valueRef.current);
+            },
+        };
+    });
+    const editorElement = (React.createElement(InternalAdaptablePercentageEditor_1.InternalAdaptablePercentageEditor, { defaultValue: initialValue, showClearButton: (_a = props.showClearButton) !== null && _a !== void 0 ? _a : true, emptyValue: (_b = props.emptyValue) !== null && _b !== void 0 ? _b : '', onValueChange: onValueChange, ref: (editor) => {
+            editorRef.current = editor;
+            editor === null || editor === void 0 ? void 0 : editor.focus();
+        } }));
+    function onKeyDown(keyDownEvent) {
+        adaptable._emit('CellEditorKeyDown', {
+            keyDownEvent,
+            cellValue: valueRef.current,
+            columnId,
+            updateValueCallback: (updatedValue) => {
+                editorRef.current.setValue(updatedValue);
+            },
+        });
+    }
+    return (React.createElement("div", { style: style, onKeyDown: onKeyDown }, (0, renderWithAdaptableContext_1.renderWithAdaptableContext)(editorElement, adaptable)));
+});
+exports.AdaptableReactPercentageEditor.displayName = 'AdaptableReactPercentageEditor';
+/**
+ * Used by default for all `abColDefNumber` columns.
+ *
+ * You can configure it by specifying `cellEditorParams` in the colDef:
+ *
+ * colDef {
+ *   field: 'stars',
+ *   type: 'abColDefNumber',
+ *   cellEditorParams: {
+ *     emptyValue: 5, // defaults to ''
+ *     showClearButton: false
+ *   }
+ * }
+ *
+ * For now, there are 2 editor params you can configure:
+ *
+ * cellEditorParams.showClearButton - defaults to `true` - whether to show the clear button. If `true`, it works together with `cellEditorParams.emptyValue`
+ * cellEditorParams.emptyValue - defaults to `''` (empty string) - value to set for the cell, when the clear button is pressed.
+ *
+ * When the colDef has a `valueParser` provided as a function, it will be used before setting the value for the cell.
+ */
+class AdaptablePercentageEditor {
+    constructor() {
+        this.valueParser = defaultValueParser;
+        this.onValueChange = (value) => {
+            const newValue = this.valueParser
+                ? this.valueParser(Object.assign(Object.assign({}, this.params), { oldValue: this.params.value, newValue: value }))
+                : value;
+            this.value = (0, divideBy100_1.divideBy100)(newValue);
+        };
+    }
+    init(params) {
+        this.value = (0, AdaptableNumberEditor_1.getStartValue)(params);
+        this.params = params;
+        this.columnId = params.column.getColId();
+        const { valueParser } = params.column.getColDef();
+        if (typeof valueParser === 'function') {
+            this.valueParser = valueParser;
+        }
+        this.el = document.createElement('div');
+        Object.keys(style).forEach((key) => {
+            //@ts-ignore
+            this.el.style[key] = style[key];
+        });
+    }
+    /* Component Editor Lifecycle methods */
+    // gets called once when grid ready to insert the element
+    getGui() {
+        return this.el;
+    }
+    // the final value to send to the grid, on completion of editing
+    getValue() {
+        return this.value;
+    }
+    focusIn() {
+        var _a;
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    focusOut() { }
+    // after this component has been created and inserted into the grid
+    afterGuiAttached() {
+        var _a, _b;
+        const adaptable = this.params.context.__adaptable;
+        const defaultValue = (0, times100_1.times100)(this.value);
+        const editorElement = (React.createElement(InternalAdaptablePercentageEditor_1.InternalAdaptablePercentageEditor, { defaultValue: defaultValue, showClearButton: (_a = this.params.showClearButton) !== null && _a !== void 0 ? _a : true, emptyValue: (_b = this.params.emptyValue) !== null && _b !== void 0 ? _b : '', onValueChange: this.onValueChange, ref: (editor) => {
+                this.editor = editor;
+                editor === null || editor === void 0 ? void 0 : editor.focus();
+            } }));
+        this.unmountReactRoot = adaptable.renderReactRoot((0, renderWithAdaptableContext_1.renderWithAdaptableContext)(editorElement, adaptable), this.el);
+        this.getGui().addEventListener('keydown', (keyDownEvent) => {
+            adaptable._emit('CellEditorKeyDown', {
+                keyDownEvent,
+                cellValue: this.value,
+                columnId: this.columnId,
+                updateValueCallback: (updatedValue) => {
+                    this.editor.setValue(updatedValue);
+                },
+            });
+        });
+    }
+    destroy() {
+        var _a;
+        (_a = this.unmountReactRoot) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
+}
+exports.AdaptablePercentageEditor = AdaptablePercentageEditor;

package/src/components/Accordion.js

@@ -30,7 +30,7 @@ const Accordion = ({ title, children }) => {
         setIsOpen(!isOpen);
     };
     return (react_1.default.createElement(Panel_1.default, { className: "ab-Accordion" },
-        react_1.default.createElement(SimpleButton_1.default, { iconPosition: 'end', icon: isOpen ? 'expand-all' : 'collapse-all', variant: "text", onClick: toggleAccordion, style: { width: '100%', textAlign: 'left' } }, title),
+        react_1.default.createElement(SimpleButton_1.default, { iconPosition: "end", icon: isOpen ? 'expand-all' : 'collapse-all', variant: "text", onClick: toggleAccordion, style: { width: '100%', textAlign: 'left' } }, title),
         react_1.default.createElement("div", { ref: content, style: {
                 maxHeight: `${height}`,
                 overflow: 'hidden',

package/src/components/Datepicker/DatepickerContext.d.ts

@@ -2,10 +2,8 @@ import * as React from 'react';
 export declare const DatepickerContext: React.Context<{
     onHide?: (keyboardEventKey?: string) => void;
     onShow?: VoidFunction;
-    showClearButton?: boolean;
 }>;
 export declare const useDatepickerContext: () => {
     onHide?: (keyboardEventKey?: string) => void;
     onShow?: VoidFunction;
-    showClearButton?: boolean;
 };

package/src/components/Datepicker/index.js

@@ -37,9 +37,8 @@ const DatepickerOverlay = ({ onHide, children, onKeyDown, onMouseDown, }) => {
 };
 exports.Datepicker = React.forwardRef((props, ref) => {
     var _a;
-    const { dateProps, required, disabled, style, placeholder, showWeekNumber, showOutsideDays, value: _, defaultValue: __, onChange: ___, showClearButton: showClearButtonFromProps, datepickerButtons } = props, boxProps = tslib_1.__rest(props, ["dateProps", "required", "disabled", "style", "placeholder", "showWeekNumber", "showOutsideDays", "value", "defaultValue", "onChange", "showClearButton", "datepickerButtons"]);
+    const { dateProps, required, disabled, style, placeholder, showWeekNumber, showOutsideDays, value: _, defaultValue: __, onChange: ___, datepickerButtons } = props, boxProps = tslib_1.__rest(props, ["dateProps", "required", "disabled", "style", "placeholder", "showWeekNumber", "showOutsideDays", "value", "defaultValue", "onChange", "datepickerButtons"]);
     const datepickerContext = (0, DatepickerContext_1.useDatepickerContext)();
-    const showClearButton = (showClearButtonFromProps !== null && showClearButtonFromProps !== void 0 ? showClearButtonFromProps : datepickerContext.showClearButton) === false ? false : true;
     let [value, setValue] = (0, useProperty_1.default)(props, 'value', undefined, {
         onChange: props.onChange,
     });
@@ -82,10 +81,10 @@ exports.Datepicker = React.forwardRef((props, ref) => {
         '|': React.createElement("hr", { style: { width: '100%', height: 0, margin: 0, border: 'none' } }),
     };
     const footerButtons = datepickerButtons.map((buttonKey, index) => React.cloneElement(footerButtonsMap[buttonKey], { key: index }));
-    const clearButton = showClearButton ? (React.createElement(SimpleButton_1.default, { "data-name": "clear", variant: "text", tooltip: "Clear", iconSize: 20, padding: 0, icon: "close", onMouseDown: (e) => {
+    const clearButton = (React.createElement(SimpleButton_1.default, { "data-name": "clear", variant: "text", tooltip: "Clear", iconSize: 20, padding: 0, icon: "close", onMouseDown: (e) => {
             e.preventDefault();
             clearValue();
-        }, accessLevel: 'Full' })) : null;
+        }, accessLevel: 'Full' }));
     const calendarButton = (React.createElement(SimpleButton_1.default, { disabled: disabled, variant: "text", icon: "calendar", tooltip: "Date", iconSize: 20, px: 0, py: 0, onClick: () => setVisible(true) }));
     return (React.createElement(rebass_1.Flex, null,
         React.createElement(OverlayTrigger_1.default, { visible: visible, render: () => (React.createElement(DatepickerOverlay, { onMouseDown: props.onMouseDown, onHide: () => setVisible(false), onKeyDown: (e) => {

package/src/components/ExpressionEditor/DataTableEditor.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { AdaptableColumnDataType } from '../../types';
+export declare const DataTableEditor: ({ fields, dataFormatter, data: initialData, type, labels, }: {
+    fields: {
+        label: string;
+        value: string;
+        dataType: AdaptableColumnDataType;
+        readOnly?: boolean;
+    }[];
+    type: string;
+    dataFormatter: (field: string) => string;
+    data: any;
+    labels?: {
+        showIds?: string;
+        filterPlaceholder?: string;
+    };
+}) => JSX.Element;

package/src/components/ExpressionEditor/DataTableEditor.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataTableEditor = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const _1 = require(".");
+const CheckBox_1 = require("../CheckBox");
+const AdaptableFormControlTextClear_1 = require("../../View/Components/Forms/AdaptableFormControlTextClear");
+const FormLayout_1 = tslib_1.__importStar(require("../FormLayout"));
+const EditorButton_1 = tslib_1.__importDefault(require("./EditorButton"));
+const Input_1 = tslib_1.__importDefault(require("../Input"));
+const DateHelper_1 = require("../../Utilities/Helpers/DateHelper");
+const AdaptableContext_1 = require("../../View/AdaptableContext");
+const AdaptableInput_1 = tslib_1.__importDefault(require("../../View/Components/AdaptableInput"));
+const DataTableEditor = ({ fields, dataFormatter, data: initialData, type = 'column', labels, }) => {
+    var _a, _b;
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const [data, setData] = React.useState(initialData);
+    const [showColumnIds, setShowValues] = React.useState(false);
+    const [searchInputValue, setSearchInputValue] = React.useState('');
+    const getColValue = (fieldValue) => {
+        return adaptable.api.internalApi.getValueUsingField(data, fieldValue);
+    };
+    const updateColValue = (rowData, fielValue, newValue) => {
+        const updatedRowData = adaptable.api.internalApi.setValueUsingField(rowData, fielValue, newValue);
+        return Object.assign({}, updatedRowData);
+    };
+    const getColDateValue = (fieldValue) => {
+        const colValue = getColValue(fieldValue);
+        return colValue && (0, DateHelper_1.isValueValidDate)(colValue)
+            ? new Date(colValue).toISOString().substr(0, 10)
+            : '';
+    };
+    const hasFriendlyNames = React.useMemo(() => {
+        return fields.some((field) => field.label !== field.value);
+    }, []);
+    return (React.createElement(rebass_1.Flex, { flexDirection: "column", "data-name": `expression-${type}-picker`, style: { height: '100%' } },
+        React.createElement(rebass_1.Flex, { className: `${_1.baseClassName}__${type}-list`, flexDirection: "column", alignItems: "start", style: { marginTop: 2 }, mb: 2 },
+            hasFriendlyNames && (React.createElement(CheckBox_1.CheckBox, { checked: showColumnIds, onChange: (checked) => setShowValues(checked), style: {
+                    float: 'right',
+                    margin: 0,
+                    paddingTop: 'var(--ab-space-1)',
+                    paddingBottom: 'var(--ab-space-1)',
+                } }, (_a = labels === null || labels === void 0 ? void 0 : labels.showIds) !== null && _a !== void 0 ? _a : 'Show Column IDs')),
+            React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: (_b = labels === null || labels === void 0 ? void 0 : labels.filterPlaceholder) !== null && _b !== void 0 ? _b : 'Filter columns...', style: { flex: 1, marginBottom: 3 } })),
+        React.createElement(FormLayout_1.default, { className: "ab-ExpressionEditor__columns", gridColumnGap: "var(--ab-space-1)", gridRowGap: "var(--ab-space-1)", sizes: ['auto', '1fr'], style: { alignItems: 'stretch', overflow: 'auto' } }, fields
+            .filter((field) => {
+            var _a, _b;
+            if (!searchInputValue) {
+                return true;
+            }
+            return (field.label.includes(searchInputValue) || ((_b = (_a = field.value) === null || _a === void 0 ? void 0 : _a.includes) === null || _b === void 0 ? void 0 : _b.call(_a, searchInputValue)));
+        })
+            .map((field) => {
+            var _a, _b, _c;
+            const label = showColumnIds ? `[${field.value}]` : field.label;
+            return (React.createElement(FormLayout_1.FormRow, { key: field.label, label: React.createElement(EditorButton_1.default, { width: "100%", height: "100%", style: {
+                        background: 'var(--ab-color-primary)',
+                        cursor: 'grab',
+                        marginRight: 'var(--ab-space-1)',
+                    }, data: dataFormatter(field.value), "data-name": type, "data-value": field.value, icon: "drag" },
+                    React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "start" }, label)) }, field.dataType === 'Number' ? (React.createElement(Input_1.default, { type: "number", "data-name": `${type}-input`, "data-value": field.value, value: (_a = getColValue(field.value)) !== null && _a !== void 0 ? _a : '', onChange: (e) => setData(updateColValue(data, field.value, Number(e.target.value))), width: "100%", disabled: field.readOnly })) : field.dataType === 'String' ? (React.createElement(Input_1.default, { type: "text", "data-name": `${type}-input`, "data-value": field.value, value: (_b = getColValue(field.value)) !== null && _b !== void 0 ? _b : '', onChange: (e) => setData(updateColValue(data, field.value, e.target.value)), width: "100%", disabled: field.readOnly })) : field.dataType === 'Date' ? (React.createElement(AdaptableInput_1.default, { type: "date", "data-name": `${type}-input`, "data-value": field.value, value: (_c = getColDateValue(field.value)) !== null && _c !== void 0 ? _c : '', onChange: (e) => {
+                    setData(updateColValue(data, field.value, new Date(e.target.value)));
+                }, style: { width: '100%' }, disabled: field.readOnly })) : field.dataType === 'Boolean' ? (React.createElement(CheckBox_1.CheckBox, { "data-name": `${type}-input`, "data-value": field.value, checked: Boolean(getColValue(field.value)), onChange: (checked) => setData(updateColValue(data, field.value, checked)), disabled: field.readOnly })) : null));
+        }))));
+};
+exports.DataTableEditor = DataTableEditor;

package/src/components/ExpressionEditor/EditorInput.js

@@ -16,14 +16,27 @@ function EditorInput(props) {
         .getQueryLanguageService()
         .getModuleExpressionFunctionsMap(props.module);
     const getFilteredAggregatedExpressionFunctions = (availableAggregatedExpressionFunctions, type) => {
-        const sourceExpressionFunctions = type === 'cumulativeAggregatedScalar'
-            ? aggregatedScalarExpressionFunctions_1.cumulativeAggregatedExpressionFunctions
-            : type === 'quantileAggregatedScalar'
-                ? aggregatedScalarExpressionFunctions_1.quantileAggregatedExpressionFunctions
-                : aggregatedScalarExpressionFunctions_1.aggregatedExpressionFunctions;
-        return Object.keys(availableAggregatedExpressionFunctions)
-            .filter((key) => sourceExpressionFunctions.includes(key))
-            .reduce((obj, key) => {
+        let filteredCollection = [];
+        if (type === 'aggregatedScalar') {
+            const excludeSet = new Set([
+                // we cannot have a hardcodede set of functions,
+                // we need to allow custom expresions
+                ...aggregatedScalarExpressionFunctions_1.cumulativeAggregatedExpressionFunctions,
+                ...aggregatedScalarExpressionFunctions_1.quantileAggregatedExpressionFunctions,
+            ]);
+            filteredCollection = Object.keys(availableAggregatedExpressionFunctions).filter((key) => 
+            //  need to allow standard ones
+            aggregatedScalarExpressionFunctions_1.cumulativeAggregatedExpressionFunctions.includes(key) ||
+                // and anything else that is not cumul or quantile
+                !excludeSet.has(key));
+        }
+        else {
+            const includeExpressionFunctions = type === 'cumulativeAggregatedScalar'
+                ? aggregatedScalarExpressionFunctions_1.cumulativeAggregatedExpressionFunctions
+                : aggregatedScalarExpressionFunctions_1.quantileAggregatedExpressionFunctions;
+            filteredCollection = Object.keys(availableAggregatedExpressionFunctions).filter((key) => includeExpressionFunctions.includes(key));
+        }
+        return filteredCollection.reduce((obj, key) => {
             obj[key] = availableAggregatedExpressionFunctions[key];
             return obj;
         }, {});

package/src/components/ExpressionEditor/NamedQueryEditor.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { NamedQuery } from '../../types';
+export declare const NamedQueryEditor: (props: {
+    namedQueries: NamedQuery[];
+}) => JSX.Element;

package/src/components/ExpressionEditor/NamedQueryEditor.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NamedQueryEditor = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const AdaptableContext_1 = require("../../View/AdaptableContext");
+const CheckBox_1 = require("../CheckBox");
+const EditorButton_1 = tslib_1.__importDefault(require("./EditorButton"));
+const NamedQueryEditor = (props) => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const [showColumnIds, setShowColumnIds] = React.useState(false);
+    const [inlineQuery, setInlineQuery] = React.useState(false);
+    return (React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "start", style: { marginTop: 2 } },
+        React.createElement(CheckBox_1.CheckBox, { checked: showColumnIds, onChange: (checked) => setShowColumnIds(checked) }, "Show Column IDs"),
+        React.createElement(CheckBox_1.CheckBox, { checked: inlineQuery, onChange: (checked) => setInlineQuery(checked) }, "Inline Query"),
+        props.namedQueries.map((namedQuery) => (React.createElement(rebass_1.Flex, { key: namedQuery.Uuid, flexDirection: "column", alignItems: "start", style: {
+                padding: 3,
+                marginTop: 'var(--ab-space-2)',
+                marginBottom: 'var(--ab-space-2)',
+                width: '100%',
+            }, backgroundColor: "primarylight" },
+            ' ',
+            React.createElement(EditorButton_1.default, { width: "100%", height: "100%", style: {
+                    background: 'var(--ab-color-primary)',
+                    cursor: 'grab',
+                }, data: inlineQuery ? namedQuery.BooleanExpression : `QUERY("${namedQuery.Name}")`, "data-name": "column", icon: "drag" },
+                React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "start" }, namedQuery.Name)),
+            React.createElement(rebass_1.Flex, { alignItems: "start", style: {
+                    padding: 5,
+                } }, showColumnIds
+                ? namedQuery.BooleanExpression
+                : adaptable.api.expressionApi.getAdaptableQueryExpressionWithColumnFriendlyNames(namedQuery)))))));
+};
+exports.NamedQueryEditor = NamedQueryEditor;

package/src/components/ExpressionEditor/QueryBuilder/QueryBuilder.d.ts

@@ -7,10 +7,20 @@ interface QueryBuilderProps {
         value: string;
         type: AdaptableColumnDataType;
     }[];
+    getFields: (type?: AdaptableColumnDataType) => {
+        label?: string;
+        value: string;
+        type: AdaptableColumnDataType;
+    }[];
     onChange: (query: string) => void;
     module: AdaptableModule;
 }
 export declare function useQueryBuilderContext(): {
+    getColumns: (type?: AdaptableColumnDataType) => {
+        label?: string;
+        value: string;
+        type: AdaptableColumnDataType;
+    }[];
     getFields: (type?: AdaptableColumnDataType) => {
         label?: string;
         value: string;

package/src/components/ExpressionEditor/QueryBuilder/QueryBuilder.js

@@ -59,7 +59,8 @@ const QueryBuilder = (props) => {
     }, []);
     const context = React.useMemo(() => {
         return {
-            getFields: props.getColumns,
+            getColumns: props.getColumns,
+            getFields: props.getFields,
             getExpressions: (columnType) => {
                 return booleanExpressions
                     ? (0, utils_1.getFunctionsForColumnType)(columnType, Object.keys(booleanExpressions))
@@ -71,10 +72,12 @@ const QueryBuilder = (props) => {
     const clearExpressionButton = (React.createElement(SimpleButton_1.default, { onClick: () => {
             clearExpression();
         } }, "Clear Expression"));
-    const unsupportedExpressionFunction = (0, utils_1.getUnsuportedExpressionFromQlPredicate)(qlPredicate);
+    const unsupportedExpressionFunction = (0, utils_1.getUnsuportedExpressionFromQlPredicate)(qlPredicate, {
+        supportedFields: props.getFields(),
+    });
     let errorOrEditor = null;
     if (qlPredicate && 'errorMessage' in qlPredicate) {
-        errorOrEditor = ((_b = (_a = props.query) === null || _a === void 0 ? void 0 : _a.includes) === null || _b === void 0 ? void 0 : _b.call(_a, 'QUERY')) ? (React.createElement(WarningBox_1.WarningBox, null,
+        errorOrEditor = ((_b = (_a = props.query) === null || _a === void 0 ? void 0 : _a.includes) === null || _b === void 0 ? void 0 : _b.call(_a, 'QUERY')) ? (React.createElement(WarningBox_1.WarningBox, { "data-name": "unsupported-query-warning" },
             React.createElement(rebass_1.Flex, { alignItems: "center" },
                 "Named Queries are not supported in the Query Builder",
                 React.createElement(rebass_1.Box, { flex: 1 }),
@@ -85,7 +88,7 @@ const QueryBuilder = (props) => {
                 clearExpressionButton)));
     }
     else if (unsupportedExpressionFunction) {
-        errorOrEditor = React.createElement(WarningBox_1.WarningBox, null, unsupportedExpressionFunction);
+        errorOrEditor = (React.createElement(WarningBox_1.WarningBox, { "data-name": "unsupported-expression-warning" }, unsupportedExpressionFunction));
     }
     else if (qlPredicate && !('errorMessage' in qlPredicate)) {
         errorOrEditor = (React.createElement(QueryPredicateBuilder_1.QueryPredicateBuilder, { isRoot: true, index: 0, id: "0", predicate: qlPredicate, onNewPredicate: (type) => {

package/src/components/ExpressionEditor/QueryBuilder/QueryBuilderInputs.d.ts

@@ -2,10 +2,11 @@
 import { QlLogicalOperator } from '../../../parser/src/predicate';
 import { ExpressionFunctionInputType } from '../../../parser/src/types';
 import { AdaptableColumn, AdaptableColumnDataType, BooleanFunctionName } from '../../../types';
-export declare const PrimitiveColumnSelector: (props: {
-    columnId: string;
+export declare const PrimitiveColumnOrFieldSelector: (props: {
+    fieldOrColumn: string;
     type?: AdaptableColumnDataType;
     onChange: (colId: string) => void;
+    hideFields?: boolean;
 }) => JSX.Element;
 export declare const PrimiteValueInput: (props: {
     inputType: ExpressionFunctionInputType;

package/src/components/ExpressionEditor/QueryBuilder/QueryBuilderInputs.js

@@ -1,12 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CombinatorSelector = exports.ExpressionSelector = exports.PrimitiveMultiValueInput = exports.PrimiteValueInput = exports.PrimitiveColumnSelector = void 0;
+exports.CombinatorSelector = exports.ExpressionSelector = exports.PrimitiveMultiValueInput = exports.PrimiteValueInput = exports.PrimitiveColumnOrFieldSelector = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const rebass_1 = require("rebass");
 const mapQlPredicateToExpression_1 = require("../../../parser/src/predicate/mapQlPredicateToExpression");
+const AdaptableContext_1 = require("../../../View/AdaptableContext");
 const AdaptableInput_1 = tslib_1.__importDefault(require("../../../View/Components/AdaptableInput"));
 const ColumnSelector_1 = require("../../../View/Components/Selectors/ColumnSelector");
+const FieldSelector_1 = require("../../../View/Components/Selectors/FieldSelector");
 const PermittedValuesSelector_1 = require("../../../View/Components/Selectors/PermittedValuesSelector");
 const CheckBox_1 = require("../../CheckBox");
 const DropdownButton_1 = tslib_1.__importDefault(require("../../DropdownButton"));
@@ -15,20 +17,61 @@ const InputGroup_1 = require("../../InputGroup");
 const Select_1 = require("../../Select");
 const QueryBuilder_1 = require("./QueryBuilder");
 const utils_1 = require("./utils");
-const PrimitiveColumnSelector = (props) => {
-    return (react_1.default.createElement(rebass_1.Box, null,
-        react_1.default.createElement(ColumnSelector_1.ColumnSelector, { value: props.columnId, type: props.type, onChange: (columnId) => {
+const PrimitiveColumnOrFieldSelector = (props) => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const [type, setType] = react_1.default.useState(() => {
+        return (
+            // default to column
+            (!props.fieldOrColumn || props.fieldOrColumn.includes('[') ? 'column' : 'field')
+        );
+    });
+    const hasFields = react_1.default.useMemo(() => {
+        var _a;
+        return ((_a = adaptable.api.expressionApi.internalApi.getAvailableFields()) === null || _a === void 0 ? void 0 : _a.length) > 0;
+    }, []);
+    const hasFieldsOrValueIsField = hasFields || (0, utils_1.isFieldValue)(props.fieldOrColumn);
+    let input = null;
+    if (type === 'column') {
+        const columnId = (0, utils_1.mapColumnExpressionToColumnId)(props.fieldOrColumn);
+        input = (react_1.default.createElement(ColumnSelector_1.ColumnSelector, { value: columnId, type: props.type, onChange: (columnId) => {
                 props.onChange(`[${columnId}]`);
-            } })));
+            } }));
+    }
+    else {
+        input = (react_1.default.createElement(FieldSelector_1.FieldSelector, { value: (0, utils_1.mapExpressionToFieldValue)(props.fieldOrColumn), type: props.type, onChange: (fieldValue) => {
+                props.onChange((0, utils_1.mapFieldValueToExpression)(fieldValue));
+            } }));
+    }
+    const typeOptions = [
+        { label: 'Column', value: 'column', icon: 'grid' },
+        { label: 'Field', value: 'field', icon: 'column-outline' },
+    ];
+    return !hasFieldsOrValueIsField || props.hideFields ? (react_1.default.createElement(rebass_1.Box, null, input)) : (react_1.default.createElement(InputGroup_1.InputGroup, { Component: rebass_1.Flex, "data-id": "query-first-arg-wrapper" },
+        react_1.default.createElement(Select_1.Select, { renderSingleValue: (value) => {
+                return react_1.default.createElement(react_1.default.Fragment, null, type === 'column' ? react_1.default.createElement(icons_1.Icon, { name: "grid" }) : react_1.default.createElement(icons_1.Icon, { name: "column-outline" }));
+            }, value: type, options: typeOptions, onChange: (value) => {
+                props.onChange(null);
+                setType(value);
+            } }),
+        input));
 };
-exports.PrimitiveColumnSelector = PrimitiveColumnSelector;
+exports.PrimitiveColumnOrFieldSelector = PrimitiveColumnOrFieldSelector;
 const PrimiteValueInput = (props) => {
-    var _a, _b;
-    const [type, setType] = react_1.default.useState(() => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const hasFields = react_1.default.useMemo(() => {
         var _a;
-        return typeof (props === null || props === void 0 ? void 0 : props.value) === 'string' && ((_a = props === null || props === void 0 ? void 0 : props.value) === null || _a === void 0 ? void 0 : _a.includes('['))
-            ? 'column-name'
-            : 'input-value';
+        return ((_a = adaptable.api.expressionApi.internalApi.getAvailableFields()) === null || _a === void 0 ? void 0 : _a.length) > 0;
+    }, []);
+    const hasFieldsOrValueIsField = hasFields || (0, utils_1.isFieldValue)(props.value);
+    const [type, setType] = react_1.default.useState(() => {
+        var _a, _b;
+        if (typeof (props === null || props === void 0 ? void 0 : props.value) === 'string' && ((_a = props === null || props === void 0 ? void 0 : props.value) === null || _a === void 0 ? void 0 : _a.includes('['))) {
+            return 'column-name';
+        }
+        if (typeof (props === null || props === void 0 ? void 0 : props.value) === 'string' && ((_b = props === null || props === void 0 ? void 0 : props.value) === null || _b === void 0 ? void 0 : _b.includes('FIELD'))) {
+            return 'field';
+        }
+        return 'input-value';
     });
     const handleTypeChange = (newType) => {
         if (type !== newType) {
@@ -72,12 +115,18 @@ const PrimiteValueInput = (props) => {
     };
     let editor = null;
     if (type === 'column-name') {
-        const columnId = props.value ? (_b = (_a = props === null || props === void 0 ? void 0 : props.value) === null || _a === void 0 ? void 0 : _a.replace) === null || _b === void 0 ? void 0 : _b.call(_a, '[', '').replace(']', '') : undefined;
         const abColType = (0, utils_1.mapExpressionFunctionTypeToColumnDataType)(props.inputType);
-        editor = (react_1.default.createElement(exports.PrimitiveColumnSelector, { columnId: columnId, onChange: (col) => props.onChange(col), type: abColType }));
+        editor = (react_1.default.createElement(exports.PrimitiveColumnOrFieldSelector, { hideFields: true, fieldOrColumn: props.value, type: abColType, onChange: (columnId) => {
+                props.onChange(columnId);
+            } }));
+    }
+    else if (type === 'field') {
+        editor = (react_1.default.createElement(FieldSelector_1.FieldSelector, { value: (0, utils_1.mapExpressionToFieldValue)(props.value), onChange: (fieldValue) => {
+                props.onChange((0, utils_1.mapFieldValueToExpression)(fieldValue));
+            } }));
     }
     else if (!['date', 'boolean'].includes(props.inputType)) {
-        editor = (react_1.default.createElement(PermittedValuesSelector_1.PermittedValuesSelector, { allowNewValues: true, value: props.value, columnId: props.lefthandColumnIdParam, onChange: (value) => {
+        editor = (react_1.default.createElement(PermittedValuesSelector_1.PermittedValuesSelector, { allowNewValues: true, value: props.value, columnId: (0, utils_1.mapColumnExpressionToColumnId)(props.lefthandColumnIdParam), onChange: (value) => {
                 props.onChange(value);
             } }));
     }
@@ -100,6 +149,15 @@ const PrimiteValueInput = (props) => {
             value: 'input-value',
         },
     ];
+    if (hasFieldsOrValueIsField || type === 'field') {
+        options.push({
+            label: (react_1.default.createElement(rebass_1.Flex, null,
+                react_1.default.createElement(icons_1.Icon, { name: "column-outline" }),
+                react_1.default.createElement(rebass_1.Text, { ml: 2 }, "Field"))),
+            icon: 'column-outline',
+            value: 'field',
+        });
+    }
     const typeOption = options.find((option) => option.value === type);
     return (react_1.default.createElement(InputGroup_1.InputGroup, { Component: rebass_1.Flex, "data-id": "query-input-wrapper", mr: 2 },
         react_1.default.createElement(Select_1.Select, { renderSingleValue: (value) => {