@adaptabletools/adaptable 11.2.4-canary.0 → 11.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable",
-  "version": "11.2.4-canary.0",
+  "version": "11.2.4",
   "description": "Powerful data-agnostic HTML5 datagrid add-on that sits on top of an underlying grid component and provides all the rich functionality that advanced users expect from their DataGrids and Data Tables",
   "keywords": [
     "web-components",

package/publishTimestamp.d.ts

@@ -1,2 +1,2 @@
-declare const _default: 1652955781582;
+declare const _default: 1653160464222;
 export default _default;

package/publishTimestamp.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = 1652955781582;
+exports.default = 1653160464222;

package/src/AdaptableOptions/AdaptableOptions.d.ts

@@ -22,6 +22,7 @@ import { GridOptions, Module } from '@ag-grid-community/all-modules';
 import { FlashingCellOptions } from './FlashingCellOptions';
 import { AlertOptions } from './AlertOptions';
 import { AdaptableQLOptions } from './AdaptableQLOptions';
+import { FormatColumnOptions } from './FormatColumnOptions';
 /**
  * Group of property options enabling developers to set up AdapTable at design time to fit precise requirements - provides AG Grid, Predefined Config and other information required to ensure a full, rich user experience
  */
@@ -141,6 +142,12 @@ export interface AdaptableOptions {
      * @gridInfoContainer
      */
     flashingCellOptions?: FlashingCellOptions;
+    /**
+     * Options for managing format columns
+     *
+     * @gridInfoContainer
+     */
+    formatColumnOptions?: FormatColumnOptions;
     /**
      * General options to manage AdapTable e.g. grouping behaviour, Primary Keys
      *

package/src/AdaptableOptions/FinancePluginOptions.d.ts

@@ -1,4 +1,5 @@
-import { ContextMenuContext } from '../../types';
+import { ContextMenuContext, GridCell } from '../../types';
+import { CustomFDC3Context } from '../PredefinedConfig/Common/FDC3Context';
 /**
  * Options required for when using the Finance plugin
  */
@@ -27,6 +28,14 @@ export interface FinancePluginOptions {
          * FDC3 Organizations
          */
         organizationColumns?: OrganizationColumn[];
+        /**
+         * Custom FDC3 Columns
+         */
+        customFDC3Columns?: CustomFDC3Column[];
+        /**
+         * Custom FDC3 Intents
+         */
+        customFDC3Intents?: CustomFDC3Intent[];
     };
     /**
      * Columns to use a Weighted Average aggregation
@@ -69,11 +78,15 @@ export interface FDC3Column {
     /**
      * FDC3 intents which the Column can raise
      */
-    intents?: any;
+    intents?: any[];
     /**
      * Label to display in Intent Context Menu Item
      */
     intentContextMenuLabel?: string | ((raiseFDC3IntentContext: RaiseFDC3IntentContext) => string);
+    /**
+     * Returns the icon to display in the Raise Intent Context Menu Item
+     */
+    getIconForIntent?: (intent: FDC3Intent | CustomFDC3Intent) => any;
 }
 /**
  * A Column which will be defined as an FDC3 Instrument
@@ -222,10 +235,27 @@ export declare type CountryIntents = CountryIntent[];
  * FDC3 Intents available to a Country Column
  */
 export declare type CountryIntent = 'ViewChart';
+/**
+ *  A Column which will be defined as Custom FDC3 (can be any datatype)
+ */
+export interface CustomFDC3Column extends FDC3Column {
+    /**
+     * Custom FDC3 Intents available to the column
+     */
+    intents: CustomFDC3Intent[];
+    /**
+     * Function which creates FDC3 context for the current column and row
+     */
+    createContext: (gridCell: GridCell) => CustomFDC3Context;
+}
 /**
  * Full list of FDC3 Intents available - each FDC3 Column can use a subset
  */
 export declare type FDC3Intent = 'StartCall' | 'StartChat' | 'ViewAnalysis' | 'ViewChart' | 'ViewContact' | 'ViewInstrument' | 'ViewNews' | 'ViewQuote';
+/**
+ * Custom FDC3 Intent - just a string value
+ */
+export declare type CustomFDC3Intent = string;
 /**
  * Context passed into Raise FDC3 Intent functions (e.g. get label)
  */
@@ -233,5 +263,5 @@ export interface RaiseFDC3IntentContext extends ContextMenuContext {
     /**
      * FDC3 Intent that was raised
      */
-    intent: FDC3Intent;
+    intent: FDC3Intent | CustomFDC3Intent;
 }

package/src/AdaptableOptions/FormatColumnOptions.d.ts

@@ -0,0 +1,9 @@
+export declare type CustomDisplayFormatter = {
+    id: string;
+    label?: string;
+    handler: (value: any) => any;
+    type: 'Date' | 'Number' | 'String';
+};
+export interface FormatColumnOptions {
+    customDisplayFormatters?: CustomDisplayFormatter[];
+}

package/src/AdaptableOptions/FormatColumnOptions.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/Api/ColumnApi.d.ts

@@ -227,7 +227,10 @@ export interface ColumnApi {
      * @param columnFilter Current applied filter
      */
     getDistinctFilterDisplayValuesForColumn(columnId: string, filter: string): Promise<{
-        values: any[];
+        values: {
+            value: any;
+            label: string;
+        }[];
         suppressClientSideFilter: boolean;
     }>;
     /**

package/src/Api/FinanceApi.d.ts

@@ -1,5 +1,5 @@
 import { RowNode } from '@ag-grid-community/all-modules';
-import { ContactColumn, ContactIntent, CountryColumn, FDC3Intent, FinancePluginOptions, InstrumentColumn, InstrumentIntent, OrganizationColumn, PositionColumn, PositionIntent } from '../AdaptableOptions/FinancePluginOptions';
+import { ContactColumn, ContactIntent, CountryColumn, CustomFDC3Column, CustomFDC3Intent, FDC3Intent, FinancePluginOptions, InstrumentColumn, InstrumentIntent, OrganizationColumn, PositionColumn, PositionIntent } from '../AdaptableOptions/FinancePluginOptions';
 import { ContactContext, ContactListContext, CountryContext, FDC3Context, InstrumentContext, InstrumentListContext, OrganizationContext, PortfolioContext, PositionContext } from '../types';
 /**
  * Provides run-time access to the Finance Plugin
@@ -82,6 +82,7 @@ export interface FinanceApi {
      * @param instrumentColumnId Column to Look
      */
     getCountryColumnById(countryColumnId: string): CountryColumn;
+    getCustomFDC3ColumnById(customFDC3ColumnId: string): CustomFDC3Column;
     /**
      * Publishes an FDC3 Message Event of type `Broadcast`
      * @param context context for Event
@@ -92,7 +93,7 @@ export interface FinanceApi {
      * @param context context for Event
      * @param intent FDC3 Intent to Raise
      */
-    publishRaiseFDC3IntentEvent(context: FDC3Context, intent: FDC3Intent): void;
+    publishRaiseFDC3IntentEvent(context: FDC3Context, intent: FDC3Intent | CustomFDC3Intent): void;
     /**
      * Checks whether the Instrument Intent is valid for Instrument Lists
      * @param intent FDC3 Intent to check

package/src/Api/FormatColumnApi.d.ts

@@ -1,5 +1,5 @@
 import { FormatColumnState, FormatColumn, ColumnStyle, ColumnComparison } from '../PredefinedConfig/FormatColumnState';
-import { AdaptableColumn } from '../types';
+import { AdaptableColumn, AdaptableFormat } from '../types';
 import { RowNode } from '@ag-grid-community/all-modules';
 /**
  * Provides run-time access to the Format Column Module and associated state
@@ -172,4 +172,25 @@ export interface FormatColumnApi {
      * Publishes the CheckboxColumnClickedEvent - when the checkbox in an Checkbox Column is clicked
      */
     fireCheckboxColumnClickedEvent(columnId: string, rowData: any, primaryKeyValue: any, isChecked: boolean): void;
+    /**
+     * Format value according to format options.
+     *
+     * @param value value to format
+     * @param options formatter options
+     */
+    getNumberFormattedValue(value: any, options: AdaptableFormat['Options']): any;
+    /**
+     * Format value according to format options.
+     *
+     * @param value value to format
+     * @param options formatter options
+     */
+    getStringFormattedValue(value: any, options: AdaptableFormat['Options']): string;
+    /**
+     * Format value according to format options.
+     *
+     * @param value value to format
+     * @param options formatter options
+     */
+    getDateFormattedValue(value: any, options: AdaptableFormat['Options']): string;
 }

package/src/Api/Implementation/ColumnApiImpl.js

@@ -299,7 +299,10 @@ class ColumnApiImpl extends ApiBase_1.ApiBase {
         const { gridCells, suppressClientSideFilter } = await this.adaptable.getDistinctFilterValuesForColumn(abColumn, false, filter);
         return {
             values: this.sortDistinctValues(gridCells, abColumn).map((cv) => {
-                return cv.displayValue;
+                return {
+                    label: cv.displayValue,
+                    value: cv.normalisedValue,
+                };
             }),
             suppressClientSideFilter,
         };

package/src/Api/Implementation/FilterApiImpl.js

@@ -156,7 +156,7 @@ class FilterApiImpl extends ApiBase_1.ApiBase {
         return columnFilters.map((cf) => this.columnFilterToString(cf)).join(', ');
     }
     evaluateColumnFilter(columnFilter, node) {
-        var _a, _b;
+        var _a;
         if (!columnFilter.Predicate) {
             return true;
         }
@@ -172,15 +172,10 @@ class FilterApiImpl extends ApiBase_1.ApiBase {
             return true;
         }
         let value = gridCell.normalisedValue;
-        if (((_b = columnFilter.Predicate) === null || _b === void 0 ? void 0 : _b.PredicateId) === 'Contains' && column.dataType === 'Date') {
-            // although 'Contains' Predicate is NOT relevant for Date columns, we have to handle the special case of QuickSearching
-            // in that case, we have to evaluate the displayedValue of the cell, not the normalisedValue (it's a textual search after all)
-            value = gridCell.displayValue;
-        }
         return this.adaptable.api.predicateApi.handlePredicate(columnFilter.Predicate, {
             value: value,
             oldValue: null,
-            displayValue: gridCell.normalisedValue,
+            displayValue: gridCell.displayValue,
             node,
             column,
         }, true);

package/src/Api/Implementation/FormatColumnApiImpl.d.ts

@@ -4,6 +4,7 @@ import { FormatColumnApi } from '../FormatColumnApi';
 import { FormatColumnState, FormatColumn, ColumnStyle, ColumnComparison } from '../../PredefinedConfig/FormatColumnState';
 import { AdaptableColumn } from '../../PredefinedConfig/Common/AdaptableColumn';
 import { RowNode } from '@ag-grid-community/all-modules';
+import { AdaptableFormat } from '../../types';
 export declare class FormatColumnApiImpl extends ApiBase implements FormatColumnApi {
     getFormatColumnState(): FormatColumnState;
     getAllFormatColumn(config?: {
@@ -44,4 +45,8 @@ export declare class FormatColumnApiImpl extends ApiBase implements FormatColumn
     getCheckBoxStyleFormatColumn(column: AdaptableColumn): FormatColumn | undefined;
     isCheckBoxStyleFormatColumn(column: AdaptableColumn): boolean;
     fireCheckboxColumnClickedEvent(columnId: string, rowData: any, primaryKeyValue: any, isChecked: boolean): void;
+    private applyCustomFormatters;
+    getNumberFormattedValue(value: any, options: AdaptableFormat['Options']): string;
+    getStringFormattedValue(value: any, options: AdaptableFormat['Options']): string;
+    getDateFormattedValue(value: any, options: AdaptableFormat['Options']): string;
 }

package/src/Api/Implementation/FormatColumnApiImpl.js

@@ -8,6 +8,7 @@ const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/ArrayExtensions"));
 const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/StringExtensions"));
 const Helper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/Helper"));
+const FormatHelper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/FormatHelper"));
 class FormatColumnApiImpl extends ApiBase_1.ApiBase {
     getFormatColumnState() {
         return this.getAdaptableState().FormatColumn;
@@ -269,5 +270,33 @@ class FormatColumnApiImpl extends ApiBase_1.ApiBase {
         };
         this.adaptable.api.eventApi.emit('CheckboxColumnClicked', checkboxColumnClickedInfo);
     }
+    applyCustomFormatters(value, options) {
+        var _a, _b;
+        const columnCustomFormatters = (_a = options === null || options === void 0 ? void 0 : options.CustomDisplayFormats) !== null && _a !== void 0 ? _a : [];
+        if (!(columnCustomFormatters === null || columnCustomFormatters === void 0 ? void 0 : columnCustomFormatters.length)) {
+            return value;
+        }
+        const adaptableOptions = this.adaptable.adaptableOptions;
+        const customFormattersFromOptions = (_b = adaptableOptions === null || adaptableOptions === void 0 ? void 0 : adaptableOptions.formatColumnOptions) === null || _b === void 0 ? void 0 : _b.customDisplayFormatters;
+        const customFormatters = columnCustomFormatters.map((customFormatter) => customFormattersFromOptions === null || customFormattersFromOptions === void 0 ? void 0 : customFormattersFromOptions.find((customFormatterOption) => customFormatterOption.id === customFormatter.Id));
+        return customFormatters.reduce((acc, formatter) => {
+            if (formatter && formatter.handler) {
+                return formatter.handler(acc);
+            }
+            return acc;
+        }, value);
+    }
+    getNumberFormattedValue(value, options) {
+        let preparedValue = this.applyCustomFormatters(value, options);
+        return FormatHelper_1.default.NumberFormatter(preparedValue, options);
+    }
+    getStringFormattedValue(value, options) {
+        let preparedValue = this.applyCustomFormatters(value, options);
+        return FormatHelper_1.default.StringFormatter(preparedValue, options);
+    }
+    getDateFormattedValue(value, options) {
+        let preparedValue = this.applyCustomFormatters(value, options);
+        return FormatHelper_1.default.DateFormatter(preparedValue, options);
+    }
 }
 exports.FormatColumnApiImpl = FormatColumnApiImpl;

package/src/PredefinedConfig/Common/AdaptableFormat.d.ts

@@ -11,10 +11,15 @@ export declare type AdaptableFormat = {
     Formatter: 'StringFormatter';
     Options: StringFormatterOptions;
 };
+export interface BaseFormatterOptions {
+    CustomDisplayFormats?: {
+        Id: string;
+    }[];
+}
 /**
  * Formatter Options for Numeric Columns
  */
-export interface NumberFormatterOptions {
+export interface NumberFormatterOptions extends BaseFormatterOptions {
     /**
      * Number of digits to show in fractions
      */
@@ -55,7 +60,7 @@ export interface NumberFormatterOptions {
 /**
  * Formatter Options for Date Columns - contains a single `Pattern` property
  */
-export interface DateFormatterOptions {
+export interface DateFormatterOptions extends BaseFormatterOptions {
     /**
      * Pattern to use for Date Format
      */
@@ -64,7 +69,7 @@ export interface DateFormatterOptions {
 /**
  * Formatter Options for String Columns
  */
-export interface StringFormatterOptions {
+export interface StringFormatterOptions extends BaseFormatterOptions {
     /**
      * Sets text to Upper or Lower case
      */

package/src/PredefinedConfig/Common/AdaptablePredicate.js

@@ -27,7 +27,23 @@ exports.SystemPredicateDefs = [
         icon: { text: 'IN' },
         columnScope: { DataTypes: ['String', 'Number', 'Date'] },
         moduleScope: ['filter'],
-        handler: ({ displayValue, inputs }) => inputs.length === 0 || inputs.includes(displayValue),
+        handler: ({ inputs, column, value }) => {
+            if (inputs.length === 0) {
+                return true;
+            }
+            if (column.dataType === 'Date') {
+                return inputs.some((input) => {
+                    return isSameDay_1.default(input, value);
+                });
+            }
+            if (column.dataType === 'Number') {
+                return inputs.includes(value);
+            }
+            if (column.dataType === 'String') {
+                return inputs.includes(value);
+            }
+            return true;
+        },
         toString: ({ inputs }) => `IN (${inputs.join(', ')})`,
         shortcuts: ['#', '['],
     },

package/src/PredefinedConfig/Common/FDC3Context.d.ts

@@ -1,3 +1,4 @@
+import { CustomFDC3Intent } from '../../AdaptableOptions/FinancePluginOptions';
 import { BaseEventInfo } from '../../Api/Events/BaseEventInfo';
 import { FDC3Intent } from '../../types';
 /**
@@ -221,10 +222,13 @@ export interface AdaptableFDC3EventInfo extends BaseEventInfo {
     /**
      * The FDC3 Intent which caused Event to fire (if type is `RaiseIntent`)
      */
-    intent?: FDC3Intent;
+    intent?: FDC3Intent | CustomFDC3Intent;
     /**
      * Full FDC3 Context for the object related to the event
      */
     context: FDC3Context;
 }
 export declare type ContextType = 'fdc3.instrument' | 'fdc3.instrumentList' | 'fdc3.position' | 'fdc3.portfolio' | 'fdc3.contact' | 'fdc3.contactList' | 'fdc3.organization' | 'fdc3.country';
+export interface CustomFDC3Context extends FDC3Context {
+    type: any;
+}

package/src/Strategy/FormatColumnModule.js

@@ -247,7 +247,7 @@ class FormatColumnModule extends AdaptableModuleBase_1.AdaptableModuleBase {
                 },
                 {
                     name: 'Display Format',
-                    values: [FormatColumnFormatWizardSection_1.getFormatColumnFormatSummaryValue(formatColumn)],
+                    values: [FormatColumnFormatWizardSection_1.getFormatColumnFormatSummaryValue(formatColumn, this.api.formatColumnApi)],
                 },
                 getFormatColumnSettingsViewItems_1.getFormatColumnSettingsViewItems(formatColumn),
                 getObjectTagsViewItems_1.getObjectTagsViewItems(formatColumn, this.api),

package/src/Strategy/LayoutModule.js

@@ -152,12 +152,12 @@ class LayoutModule extends AdaptableModuleBase_1.AdaptableModuleBase {
         if (columns.length >
             maxColumnsToDisplay + 1 /* +1 is to show tag only beginning with 2, 'other 2' */) {
             const extraColumns = columns.length - maxColumnsToDisplay;
-            const firstNColumns = columns
-                .slice(0, maxColumnsToDisplay)
-                .map((colId) => columnIdToFriendlyName(colId));
+            const firstNColumns = columns.slice(0, maxColumnsToDisplay);
             columns = [...firstNColumns, `and other ${extraColumns}`];
         }
-        columns = columns.map((column) => this.api.columnApi.getFriendlyNameFromColumnId(column));
+        else {
+            columns = columns.map((column) => this.api.columnApi.getFriendlyNameFromColumnId(column));
+        }
         return {
             items: [
                 {

package/src/Utilities/ExpressionFunctions/booleanExpressionFunctions.js

@@ -226,10 +226,8 @@ exports.booleanExpressionFunctions = {
             var _a;
             const searchTerm = expressionFunctionUtils_1.getStringValue(context, String(args[0]));
             return (_a = context.api) === null || _a === void 0 ? void 0 : _a.columnApi.getColumns().some((column) => {
-                var _a, _b;
-                const value = column.dataType === 'Date'
-                    ? // for Date columns use the display value, as we do a textual comparison
-                     (_a = context.api) === null || _a === void 0 ? void 0 : _a.gridApi.getDisplayValueFromRowNode(context.node, column.columnId) : (_b = context.api) === null || _b === void 0 ? void 0 : _b.gridApi.getNormalisedValueFromRowNode(context.node, column.columnId);
+                var _a;
+                const value = (_a = context.api) === null || _a === void 0 ? void 0 : _a.gridApi.getDisplayValueFromRowNode(context.node, column.columnId);
                 const columnValue = expressionFunctionUtils_1.getStringValue(context, String(value));
                 return columnValue.indexOf(searchTerm) !== -1;
             });

package/src/View/CalculatedColumn/Wizard/CalculatedColumnExpressionWizardSection.js

@@ -70,7 +70,7 @@ exports.CalculatedColumnExpressionWizardSection = (props) => {
         props.onChange(Object.assign(Object.assign({}, data), { Query: calculatedColumnQuery, CalculatedColumnSettings: Object.assign(Object.assign({}, data.CalculatedColumnSettings), { DataType: dataType, Pivotable,
                 Aggregatable }) }));
     };
-    return (React.createElement(Tabs_1.Tabs, { onValueChange: setType, value: selectedTab, p: 2, style: { flex: 1, overflow: 'auto' } },
+    return (React.createElement(Tabs_1.Tabs, { onValueChange: setType, value: selectedTab, p: 2, style: { height: '100%', flex: 1, overflow: 'auto' } },
         React.createElement(QueryTab, { value: "ScalarExpression", type: type, label: "Scalar" }),
         React.createElement(Tabs_1.Tabs.Content, { value: 'ScalarExpression' },
             React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'scalar', module: moduleInfo.ModuleName, style: { paddingLeft: 0 }, value: data.Query.ScalarExpression, onChange: (ScalarExpression) => setCalculatedColumnExpression({ ScalarExpression }), initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getAllNamedQuery(), isFullExpression: true, api: api })),

package/src/View/Components/FilterForm/FilterForm.d.ts

@@ -4,7 +4,10 @@ import { ColumnMenuTab } from '../../../PredefinedConfig/Common/Enums';
 import { ColumnFilter } from '../../../PredefinedConfig/FilterState';
 export interface FilterFormState {
     columnFilters: ColumnFilter[];
-    distinctColumnValues: any[];
+    distinctColumnValues: {
+        label: string;
+        value: any;
+    }[];
     isDistinctColumnValuesLoading: boolean;
     showTab: boolean;
     selectedTab: ColumnMenuTab;

package/src/View/Components/FilterForm/ListBoxFilterForm.d.ts

@@ -5,7 +5,10 @@ export interface ListBoxFilterFormProps extends ListGroupProps {
     currentColumn: AdaptableColumn;
     columns: AdaptableColumn[];
     useAgGridStyle?: boolean;
-    columnDistinctValues: any[];
+    columnDistinctValues: {
+        label: string;
+        value: any;
+    }[];
     uiSelectedColumnValues: Array<string>;
     onColumnValueSelectedChange: (SelectedValues: Array<any>) => void;
     dataType: 'String' | 'Number' | 'NumberArray' | 'Boolean' | 'Date' | 'Object' | 'Unknown';

package/src/View/Components/FilterForm/ListBoxFilterForm.js

@@ -40,9 +40,9 @@ exports.ListBoxFilterForm = (props) => {
             setUiSelectedColumnValues([...UiSelectedColumnValues, item]);
         }
     };
-    const columnValuesItemsElements = props.columnDistinctValues.map((x, y) => {
-        const isActive = UiSelectedColumnValues.indexOf(x) >= 0;
-        const columnValue = x;
+    const columnValuesItemsElements = props.columnDistinctValues.map((distinctValue, index) => {
+        const isActive = UiSelectedColumnValues.indexOf(distinctValue.value) >= 0;
+        const columnValue = distinctValue.value;
         if (StringExtensions_1.StringExtensions.IsNullOrEmpty(columnValue)) {
             return null;
         }
@@ -53,13 +53,13 @@ exports.ListBoxFilterForm = (props) => {
         }
         if (props.useAgGridStyle) {
             return renderItemForAgGridStyle({
-                key: 'columnValue' + y,
-                children: columnValue,
+                key: 'columnValue' + index,
+                children: distinctValue.label,
                 checked: isActive,
-                onChange: () => onClickItemColumnValue(x),
+                onChange: () => onClickItemColumnValue(distinctValue.value),
             });
         }
-        return (React.createElement(ListGroupItem_1.default, { noZebra: props.useAgGridStyle, key: 'columnValue' + y, onClick: () => onClickItemColumnValue(x), active: isActive, value: columnValue }, columnValue));
+        return (React.createElement(ListGroupItem_1.default, { noZebra: props.useAgGridStyle, key: 'columnValue' + index, onClick: () => onClickItemColumnValue(distinctValue.value), active: isActive, value: columnValue }, distinctValue.label));
     });
     const textClear = (React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { autoFocus: true, type: "text", placeholder: "Search Column Values", value: FilterValue, style: {
             paddingTop: 'var(--ab-space-1)',

package/src/View/Components/FilterForm/QuickFilterForm.js

@@ -19,6 +19,7 @@ const CheckBox_1 = require("../../../components/CheckBox");
 const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
 const runIfNotResolvedIn_1 = require("../../../Utilities/runIfNotResolvedIn");
 const getDefaultColumnFilterPredicate_1 = require("./getDefaultColumnFilterPredicate");
+const date_fns_1 = require("date-fns");
 class QuickFilterFormComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -214,6 +215,19 @@ class QuickFilterFormComponent extends React.Component {
         if (this.props.quickFilterValuesTrigger === 'click') {
             showEvent = 'click';
         }
+        let selectedValues = filter.Predicate.PredicateId === 'Values' ? 'Select Values' : 'Exclude Values';
+        if (filter.Predicate.Inputs.length) {
+            selectedValues = filter.Predicate.Inputs.map((input) => {
+                var _a, _b;
+                const label = (_b = (_a = this.state.distinctColumnValues) === null || _a === void 0 ? void 0 : _a.find((distinctValue) => {
+                    if (input instanceof Date) {
+                        return date_fns_1.isSameDay(input, distinctValue.value);
+                    }
+                    return distinctValue.value === input;
+                })) === null || _b === void 0 ? void 0 : _b.label;
+                return label !== null && label !== void 0 ? label : input;
+            }).join(', ');
+        }
         return (React.createElement(OverlayTrigger_1.default, { alignHorizontal: "left", showEvent: showEvent, 
             // cannot hide on blur, because the form input receives the input when this is opened
             hideEvent: "mouseleave", hideDelay: 300, ref: (api) => {
@@ -248,8 +262,7 @@ class QuickFilterFormComponent extends React.Component {
                     borderRadius: 0,
                     borderLeftWidth: 0,
                     borderColor: 'var(--ab-color-primarydark)',
-                }, disabled: ArrayExtensions_1.default.IsNullOrEmptyOrContainsSingleEmptyValue(this.state.distinctColumnValues) }, filter.Predicate.Inputs.join(', ') ||
-                (filter.Predicate.PredicateId === 'Values' ? 'Select Values' : 'Exclude Values'))));
+                }, disabled: ArrayExtensions_1.default.IsNullOrEmptyOrContainsSingleEmptyValue(this.state.distinctColumnValues) }, selectedValues)));
     }
     onColumnValuesChange(columnValues) {
         var _a;

package/src/View/FormatColumn/Wizard/FormatColumnFormatWizardSection.d.ts

@@ -3,6 +3,7 @@ import { FormatColumn } from '../../../PredefinedConfig/FormatColumnState';
 import { AdaptableFormat } from '../../../PredefinedConfig/Common/AdaptableFormat';
 import { AdaptableScope } from '../../../PredefinedConfig/Common/AdaptableScope';
 import { AdaptableApi } from '../../../Api/AdaptableApi';
+import { FormatColumnApi } from '../../../types';
 export declare type FormatColumnFormatWizardSectionProps = {
     onChange: (data: FormatColumn) => void;
 };
@@ -10,7 +11,7 @@ export interface FormatColumnFormatWizardState {
     DisplayFormat: AdaptableFormat;
     NumericFormat?: 'Percent' | 'Thousand' | 'Million' | 'Dollar' | 'Sterling' | undefined;
 }
-export declare const getFormatColumnFormatSummaryValue: (data: FormatColumn) => string;
-export declare const renderFormatColumnFormatSummary: (data: FormatColumn) => JSX.Element;
+export declare const getFormatColumnFormatSummaryValue: (data: FormatColumn, formattedColumnApi: FormatColumnApi) => string;
+export declare const renderFormatColumnFormatSummary: (data: FormatColumn, api: AdaptableApi) => JSX.Element;
 export declare const getFormatDisplayTypeForScope: (scope: AdaptableScope, api: AdaptableApi) => 'Number' | 'Date' | 'String' | undefined;
 export declare const FormatColumnFormatWizardSection: (props: FormatColumnFormatWizardSectionProps) => JSX.Element;