@adaptabletools/adaptable 13.0.1 → 13.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable",
-  "version": "13.0.1",
+  "version": "13.0.2",
   "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: 1665135058872;
+declare const _default: 1665667712374;
 export default _default;

package/publishTimestamp.js

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

package/src/AdaptableInterfaces/IAdaptable.d.ts

@@ -129,6 +129,7 @@ export interface IAdaptable {
     redrawRow(rowNode: RowNode): void;
     redrawRows(rowNodes: RowNode[]): void;
     refreshCells(rowNodes: RowNode[], columns: (string | any)[], forceUpdate: boolean, suppressFlash?: boolean): void;
+    refreshColumns(columns: (string | Column)[], forceUpdate: boolean, suppressFlash?: boolean): void;
     setSelectedCells(): SelectedCellInfo | undefined;
     setSelectedRows(): SelectedRowInfo | undefined;
     jumpToRow(rowNode: RowNode): void;

package/src/AdaptableOptions/ActionOptions.d.ts

@@ -13,7 +13,13 @@ export interface ActionOptions {
      *
      * @defaultValue undefined
      */
-    actionRowButtons?: ('clone' | 'create' | 'edit' | 'delete')[];
+    actionRowButtons?: ActionRowButtonType[];
+    /**
+     * Optional custom configuration that, when specified, merges with the built-in action row button and overrides the default configuration
+     *
+     * @defaultValue undefined
+     */
+    actionRowButtonCustomConfiguration?: (context: ActionRowButtonCustomConfigurationContext) => Partial<AdaptableButton<ActionColumnContext>>;
     /**
      * Position of supplied Action Buttons
      *
@@ -84,6 +90,10 @@ export interface ActionColumnContext extends BaseContext {
      * Current AG Grid Row Node
      */
     rowNode: RowNode;
+    /**
+     * The row's data
+     */
+    data: any;
 }
 /**
  * Set of optional properties that define an Action Columns behaviour
@@ -179,3 +189,7 @@ export interface FormFieldLabelContext extends BaseContext {
     column: AdaptableColumn;
     rowNode?: RowNode;
 }
+export declare type ActionRowButtonType = 'create' | 'clone' | 'edit' | 'delete';
+export interface ActionRowButtonCustomConfigurationContext extends BaseContext {
+    actionRowButtonType: ActionRowButtonType;
+}

package/src/AdaptableOptions/AdaptableOptions.d.ts

@@ -32,6 +32,7 @@ export interface AdaptableOptions {
      *
      * @defaultValue 'adaptable_id'
      * @gridInfoItem
+     * @noCodeItem
      */
     adaptableId?: string;
     /**

package/src/AdaptableOptions/AdaptableQLOptions.d.ts

@@ -17,6 +17,7 @@ export interface AdaptableQLOptions {
      *
      * @defaultValue false
      * @gridInfoItem
+     * @noCodeItem
      */
     caseSensitiveTextComparisons?: boolean;
     /**

package/src/AdaptableOptions/FilterOptions.d.ts

@@ -23,6 +23,7 @@ export interface FilterOptions {
      *
      * @defaultValue 2,000
      * @gridInfoItem
+     * @noCodeItem
      */
     maxFilterValuesToDisplay?: number;
     /**
@@ -30,12 +31,14 @@ export interface FilterOptions {
      *
      * @defaultValue true
      * @gridInfoItem
+     * @noCodeItem
      */
     indicateFilteredColumns?: boolean;
     /**
      * Uses Adaptable's Filter Form in Column Menu for all columns if 'true' (the default) or those listed, in preference to AG Grid's Filter Form
      *
      * @defaultValue true
+     * @noCodeItem
      */
     useAdaptableFilterForm?: boolean | string[];
     /**
@@ -43,6 +46,7 @@ export interface FilterOptions {
      *
      * @defaultValue true
      * @gridInfoItem
+     * @noCodeItem
      */
     useAgGridFilterFormStyle?: boolean;
     /**
@@ -50,6 +54,7 @@ export interface FilterOptions {
      *
      * @defaultValue true
      * @gridInfoItem
+     * @noCodeItem
      */
     useAdaptableQuickFilter?: boolean | string[];
     /**
@@ -90,6 +95,7 @@ export interface FilterOptions {
      *
      * @defaultValue true
      * @gridInfoItem
+     * @noCodeItem
      */
     autoApplyFilter?: boolean;
     /**

package/src/AdaptableOptions/GeneralOptions.d.ts

@@ -13,6 +13,8 @@ export interface GeneralOptions {
      *
      * @defaultValue false
      * @gridInfoItem
+     * @noCodeItem
+     * @uiLabel Show Missing Primary Key Warning
      */
     showMissingPrimaryKeyAlert?: boolean;
     /**

package/src/AdaptableOptions/LayoutOptions.d.ts

@@ -34,6 +34,7 @@ export interface LayoutOptions {
      *
      * @defaultValue true
      * @gridInfoItem
+     * @noCodeItem
      */
     autoSaveLayouts?: boolean;
     /**

package/src/AdaptableOptions/NotificationsOptions.d.ts

@@ -52,7 +52,7 @@ export interface NotificationsOptions {
      */
     isDraggable?: boolean;
     /**
-     * How Notification will appear: 'Bounce', 'Slide', 'Zoom' or 'Flip'
+     * How Notification will appear: Bounce, Slide, Zoom or Flip
      *
      * @defaultValue 'Slide'
      * @gridInfoItem
@@ -70,6 +70,7 @@ export interface NotificationsOptions {
      *
      * @defaultValue  100
      * @gridInfoItem
+     * @transition
      */
     maxSystemMessagesInStore?: number;
     /**

package/src/Api/EventApi.d.ts

@@ -1,25 +1,4 @@
-import { SelectionChangedInfo } from './Events/SelectionChanged';
-import { LiveDataChangedInfo } from './Events/LiveDataChanged';
-import { DashboardChangedInfo } from './Events/DashboardChanged';
-import { ThemeChangedInfo } from './Events/ThemeChanged';
-import { AlertFiredInfo } from './Events/AlertFired';
-import { LayoutChangedInfo } from './Events/LayoutChanged';
-import { SearchChangedInfo } from './Events/SearchChanged';
-import { AdaptableReadyInfo } from './Events/AdaptableReady';
-import { CustomToolbarConfiguredInfo } from './Events/CustomToolbarConfigured';
-import { CellChangedInfo } from './Events/CellChanged';
-import { SystemStatusMessageDisplayedInfo } from './Events/SystemStatusMessageDisplayed';
-import { CheckboxColumnClickedInfo } from './Events/ChexboxColumnClicked';
-import { AdaptableStateChangedInfo } from './Events/AdaptableStateChanged';
-import { FlashingCellDisplayedInfo } from './Events/FlashingCellDisplayed';
-import { GridDataChangedInfo } from './Events/GridDataChanged';
-import { TeamSharingEntityChangedInfo } from './Events/TeamSharingEntityChanged';
-import { ActionRowSubmittedInfo } from './Events/ActionRowSubmitted';
-import { DataSetSelectedInfo } from './Events/DataSetSelected';
-import { AdaptableStateReloadedInfo } from './Events/AdaptableStateReloaded';
-import { GridSortedInfo } from './Events/GridSorted';
-import { QueryRunInfo } from './Events/QueryRun';
-import { FilterAppliedInfo } from './Events/FilterApplied';
+import { AdaptableFDC3EventInfo, SelectionChangedInfo, LiveDataChangedInfo, DashboardChangedInfo, ThemeChangedInfo, AlertFiredInfo, LayoutChangedInfo, SearchChangedInfo, AdaptableReadyInfo, CustomToolbarConfiguredInfo, CellChangedInfo, SystemStatusMessageDisplayedInfo, CheckboxColumnClickedInfo, AdaptableStateChangedInfo, FlashingCellDisplayedInfo, GridDataChangedInfo, TeamSharingEntityChangedInfo, ActionRowSubmittedInfo, DataSetSelectedInfo, AdaptableStateReloadedInfo, GridSortedInfo, QueryRunInfo, FilterAppliedInfo } from '../types';
 /**
  * Responsible for publishing the many Events that AdapTable fires
  */
@@ -298,6 +277,18 @@ export interface EventApi {
      * Unsubscribe from AdaptableReady
      */
     off(eventName: 'AdaptableReady', callback: (adaptableReadyInfo: AdaptableReadyInfo) => void): void;
+    /**
+     * Fired when an FDC3Message is sent
+     * @param eventName - FDC3MessageSent
+     * @param callback - A callback for listening to `FDC3MessageSent`
+     * @returns the unsubscribe function
+     *
+     */
+    on(eventName: 'FDC3MessageSent', callback: (eventInfo: AdaptableFDC3EventInfo) => void): VoidFunction;
+    /**
+     * Unsubscribe from FDC3MessageSent
+     */
+    off(eventName: 'FDC3MessageSent', callback: (eventInfo: AdaptableFDC3EventInfo) => void): void;
     emitSync(eventName: 'DashboardChanged', data?: any): any[];
     emitSync(eventName: 'FlashingCellDisplayed', data?: any): any[];
     emitSync(eventName: 'AdaptableDestroy'): any[];

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

@@ -17,6 +17,7 @@ export declare class StyledColumnApiImpl extends ApiBase implements StyledColumn
     getCellColorRangeMinValue(range: CellColorRange, column: AdaptableColumn): number | undefined;
     getCellColorRangeMaxValue(range: CellColorRange, column: AdaptableColumn): number | undefined;
     getColumnComparisonForStyledColumn(styledColumn: StyledColumn): ColumnComparison | undefined;
+    hasStyledColumnRelativeCellRange(styledColumn: StyledColumn): boolean;
     getColumnIdsFromColumnComparison(columnComparison: ColumnComparison): string[];
     getCheckBoxStyleStyledColumn(column: AdaptableColumn): StyledColumn | undefined;
     isCheckBoxStyleStyledColumn(column: AdaptableColumn): boolean;

package/src/Api/Implementation/StyledColumnApiImpl.js

@@ -146,6 +146,23 @@ class StyledColumnApiImpl extends ApiBase_1.ApiBase {
         }
         return undefined;
     }
+    hasStyledColumnRelativeCellRange(styledColumn) {
+        var _a, _b, _c;
+        let cellColorRange = null;
+        if (styledColumn.GradientStyle) {
+            if ((_a = styledColumn.GradientStyle) === null || _a === void 0 ? void 0 : _a.CellRanges) {
+                cellColorRange = styledColumn.GradientStyle.CellRanges;
+            }
+        }
+        if (styledColumn.PercentBarStyle) {
+            if ((_b = styledColumn.PercentBarStyle) === null || _b === void 0 ? void 0 : _b.CellRanges) {
+                cellColorRange = styledColumn.PercentBarStyle.CellRanges;
+            }
+        }
+        return ((_c = cellColorRange === null || cellColorRange === void 0 ? void 0 : cellColorRange.some((cellColorRange) => {
+            return cellColorRange.Min == 'Col-Min' || cellColorRange.Max == 'Col-Max';
+        })) !== null && _c !== void 0 ? _c : false);
+    }
     getColumnIdsFromColumnComparison(columnComparison) {
         let returnValues = [];
         if (typeof columnComparison.MinValue === 'string') {

package/src/Api/StyledColumnApi.d.ts

@@ -84,6 +84,11 @@ export interface StyledColumnApi {
      * @param columnComparision Column Comparison to check
      */
     getColumnIdsFromColumnComparison(columnComparision: ColumnComparison): string[];
+    /**
+     * Checks if the styled column has a range with a relative value
+     * @param styledColumn Styled Column to Add
+     */
+    hasStyledColumnRelativeCellRange(styledCOlumn: StyledColumn): boolean;
     /**
      * Returns first Styled Column that contains checkbox style
      * @param columnId column to check

package/src/Strategy/FilterModule.js

@@ -58,7 +58,7 @@ class FilterModule extends AdaptableModuleBase_1.AdaptableModuleBase {
         if (column && this.api.gridApi.isQuickFilterAvailable()) {
             const isFilterVisible = this.api.filterApi.isQuickFilterVisible();
             if (this.isModuleEditable() && this.api.columnApi.usesAdaptableQuickFilter(column.columnId)) {
-                baseMenuItems.push(this.createColumnMenuItemReduxAction(isFilterVisible ? 'Hide Quick Filter Bar' : 'Show Quick Filter Bar', isFilterVisible ? 'unchecked' : 'check', isFilterVisible
+                baseMenuItems.push(this.createColumnMenuItemReduxAction(isFilterVisible ? 'Hide Filter Bar' : 'Show Filter Bar', isFilterVisible ? 'unchecked' : 'check', isFilterVisible
                     ? SystemRedux.SystemQuickFilterBarHide()
                     : SystemRedux.SystemQuickFilterBarShow()));
             }

package/src/Strategy/LayoutModule.js

@@ -227,7 +227,13 @@ class LayoutModule extends AdaptableModuleBase_1.AdaptableModuleBase {
                     name: 'Layout Grid Type',
                     values: [(layout === null || layout === void 0 ? void 0 : layout.EnablePivot) ? 'Pivot' : 'Table'],
                 },
-                {
+                /**
+                 * Hide pivot columns.
+                 *
+                 * The generated pivot columns cannot be prevented from beeing on the layout object.
+                 * When they are removed/not added, they no longer apear in the grid.
+                 */
+                !layout.EnablePivot && {
                     name: 'Columns',
                     values: columns,
                 },

package/src/Utilities/Defaults/DefaultAdaptableOptions.js

@@ -94,6 +94,7 @@ exports.DefaultAdaptableOptions = {
     actionOptions: {
         actionColumns: undefined,
         actionRowButtons: undefined,
+        actionRowButtonCustomConfiguration: undefined,
         actionRowButtonsPosition: 'pinnedLeft',
         autoHandleActionRowButtons: false,
         setPrimaryKeyValue: undefined,

package/src/Utilities/Extensions/StringExtensions.d.ts

@@ -16,6 +16,7 @@ export declare function CapitaliseFirstLetter(str: string): string;
 export declare function Humanize(str: string): string;
 export declare function ReplaceEmptySpacesWithUnderscore(str?: string): string;
 export declare function IsNumeric(str: string): boolean;
+export declare function UnescapeHtmlEntities(str: string): string;
 export declare const StringExtensions: {
     IsNull: typeof IsNull;
     IsNotNull: typeof IsNotNull;
@@ -35,5 +36,6 @@ export declare const StringExtensions: {
     Humanize: typeof Humanize;
     ReplaceEmptySpacesWithUnderscore: typeof ReplaceEmptySpacesWithUnderscore;
     IsNumeric: typeof IsNumeric;
+    UnescapeHtmlEntities: typeof UnescapeHtmlEntities;
 };
 export default StringExtensions;

package/src/Utilities/Extensions/StringExtensions.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StringExtensions = exports.IsNumeric = exports.ReplaceEmptySpacesWithUnderscore = exports.Humanize = exports.CapitaliseFirstLetter = exports.AbbreviateString = exports.NotIncludes = exports.Includes = exports.ToLowerCase = exports.RemoveTrailingComma = exports.CamelCaseToHumanText = exports.IsNotNullOrEmptyOrWhiteSpace = exports.IsNullOrEmptyOrWhiteSpace = exports.IsNotNullOrEmpty = exports.IsNullOrEmpty = exports.IsNotEmpty = exports.IsEmpty = exports.IsNotNull = exports.IsNull = void 0;
+exports.StringExtensions = exports.UnescapeHtmlEntities = exports.IsNumeric = exports.ReplaceEmptySpacesWithUnderscore = exports.Humanize = exports.CapitaliseFirstLetter = exports.AbbreviateString = exports.NotIncludes = exports.Includes = exports.ToLowerCase = exports.RemoveTrailingComma = exports.CamelCaseToHumanText = exports.IsNotNullOrEmptyOrWhiteSpace = exports.IsNullOrEmptyOrWhiteSpace = exports.IsNotNullOrEmpty = exports.IsNullOrEmpty = exports.IsNotEmpty = exports.IsEmpty = exports.IsNotNull = exports.IsNull = void 0;
 const tslib_1 = require("tslib");
 const startCase_1 = tslib_1.__importDefault(require("lodash/startCase"));
 function IsNull(stringToCheck) {
@@ -88,6 +88,25 @@ function IsNumeric(str) {
     return !isNaN(parseFloat(str));
 }
 exports.IsNumeric = IsNumeric;
+function UnescapeHtmlEntities(str) {
+    if (!str || typeof str !== 'string') {
+        return str;
+    }
+    let preparedStr = str;
+    const map = [
+        { target: /'|'/gi, replacement: "'" },
+        { target: /"|"/gi, replacement: '"' },
+        { target: /&|&/gi, replacement: '&' },
+        { target: /&lt;|&#60;/gi, replacement: '<' },
+        { target: /&gt;|&#62;/gi, replacement: '>' },
+        { target: /&nbsp;|&#160;/gi, replacement: ' ' },
+    ];
+    for (const transform of map) {
+        preparedStr = preparedStr.replace(transform.target, transform.replacement);
+    }
+    return preparedStr;
+}
+exports.UnescapeHtmlEntities = UnescapeHtmlEntities;
 exports.StringExtensions = {
     IsNull,
     IsNotNull,
@@ -107,5 +126,6 @@ exports.StringExtensions = {
     Humanize,
     ReplaceEmptySpacesWithUnderscore,
     IsNumeric,
+    UnescapeHtmlEntities,
 };
 exports.default = exports.StringExtensions;

package/src/Utilities/Services/CalculatedColumnExpressionService.js

@@ -133,7 +133,7 @@ class CalculatedColumnExpressionService {
                 this.aggregatedScalarLiveValuesMap.set(calculatedColumn.Uuid, aggregatedScalarLiveValue);
             }
             catch (e) {
-                (0, LoggingHelper_1.LogAdaptableError)(`Creating CalculatedColumn ('${(_c = calculatedColumn.Query) === null || _c === void 0 ? void 0 : _c.AggregatedScalarExpression}') failed!\n${e.message}`);
+                (0, LoggingHelper_1.LogAdaptableError)(`Creating CalculatedColumn ('${(_c = calculatedColumn.Query) === null || _c === void 0 ? void 0 : _c.AggregatedScalarExpression}') failed!`, e.message);
             }
         }
     }

package/src/Utilities/Services/Interface/IMetamodelService.d.ts

@@ -11,6 +11,7 @@ export interface GridInfoOption {
     description: string;
     kind: MetamodelItemPropertyKind;
     defaultValue?: any;
+    uiLabel: string;
 }
 export interface IMetamodelService extends IAdaptableService {
     getAdaptableOptions: () => AdaptableOptions;

package/src/Utilities/Services/MetamodelService.js

@@ -1,10 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MetamodelService = void 0;
+const tslib_1 = require("tslib");
 const adaptable_metamodel_1 = require("../../metamodel/adaptable.metamodel");
 const DefaultAdaptableOptions_1 = require("../Defaults/DefaultAdaptableOptions");
 const LoggingHelper_1 = require("../Helpers/LoggingHelper");
 const DocumentationLinkConstants_1 = require("../Constants/DocumentationLinkConstants");
+const StringExtensions_1 = tslib_1.__importDefault(require("../Extensions/StringExtensions"));
 const supportedMetamodelTypes = [
     'string',
     'number',
@@ -99,7 +101,7 @@ class MetamodelService {
             return gridInfoOptions;
         }
         // root-level properties are grouped in a synthetic 'Base Options' container
-        const baseOptionsItems = this.mapGridInfoContainerItems(adaptableOptionsMetamodel, adaptableOptionsValues, adaptableOptionsDefaultValues);
+        const baseOptionsItems = this.mapGridInfoContainerItems(adaptableOptionsMetamodel, adaptableOptionsValues, adaptableOptionsDefaultValues, filterItemProperty);
         gridInfoOptions.set('baseOptions', {
             containerLabel: 'Base Options',
             items: baseOptionsItems,
@@ -130,14 +132,14 @@ class MetamodelService {
         return gridInfoOptions;
     }
     mapGridInfoContainerItems(optionItemContainer, adaptableOptionsValues, defaultAdaptableOptionsValues, filter = (itemProperty) => itemProperty.gridInfo === 'item') {
-        var _a;
-        return (_a = optionItemContainer.properties) === null || _a === void 0 ? void 0 : _a.filter(filter).map((itemProperty) => {
+        return optionItemContainer.properties.filter(filter).map((itemProperty) => {
             return {
                 name: itemProperty.name,
                 value: adaptableOptionsValues === null || adaptableOptionsValues === void 0 ? void 0 : adaptableOptionsValues[itemProperty.name],
                 defaultValue: defaultAdaptableOptionsValues[itemProperty.name],
                 kind: itemProperty.kind,
-                description: itemProperty.description,
+                description: StringExtensions_1.default.UnescapeHtmlEntities(itemProperty.description),
+                uiLabel: itemProperty.uiLabel,
             };
         });
     }

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/AdaptableOptionsForm.d.ts

@@ -1,8 +1,6 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { AdaptableOptions } from '../../../types';
-interface AdaptableOptionsFormOptions {
+export declare const AdaptableOptionsForm: React.FunctionComponent<{
     adaptableOptions: AdaptableOptions;
     onChangeadAptableOptions: (adaptableOptions: AdaptableOptions) => void;
-}
-declare const AdaptableOptionsForm: (props: AdaptableOptionsFormOptions) => JSX.Element;
-export default AdaptableOptionsForm;
+}>;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/AdaptableOptionsForm.js

@@ -1,101 +1,112 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdaptableOptionsForm = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
+const rebass_1 = require("rebass");
 const CheckBox_1 = require("../../../components/CheckBox");
+const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
-const rebass_1 = require("rebass");
-const DefaultAdaptableOptions_1 = require("../../../Utilities/Defaults/DefaultAdaptableOptions");
+const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/StringExtensions"));
+const MetamodelService_1 = require("../../../Utilities/Services/MetamodelService");
+const AdaptablePopover_1 = require("../../AdaptablePopover");
+const LABEL_WIDTH = 250;
+const SUPPORTED_PRIMITEVE_TYPES = ['string', 'number', 'boolean'];
+const OptionInput = (props) => {
+    const { name, defaultValue, value, description, uiLabel } = props.option;
+    const label = uiLabel !== null && uiLabel !== void 0 ? uiLabel : StringExtensions_1.default.Humanize(name);
+    let input = React.createElement(React.Fragment, null);
+    const info = (React.createElement(rebass_1.Box, { ml: 2 },
+        React.createElement(AdaptablePopover_1.AdaptablePopover, { headerText: null, bodyText: [description] })));
+    const handleInputChange = (event) => props.onChange(Object.assign(Object.assign({}, props.option), { value: event.currentTarget.value }));
+    const handleCheckboxChange = (checked) => props.onChange(Object.assign(Object.assign({}, props.option), { value: checked }));
+    // option is mutated to acomodate complex types overrides
+    const option = Object.assign({}, props.option);
+    const isOptionNonHomogenusUnion = (option) => {
+        const isUnion = option.kind.includes('|');
+        return isUnion && option.kind.split('|').some((unionEl) => !/['"]/.test(unionEl));
+    };
+    if (isOptionNonHomogenusUnion(option)) {
+        // pick the first type
+        const newKind = option.kind
+            .split('|')
+            .find((unionEl) => SUPPORTED_PRIMITEVE_TYPES.includes(unionEl.trim()))
+            .trim();
+        if (newKind)
+            option.kind = newKind;
+    }
+    const inputProps = {
+        value: value !== null && value !== void 0 ? value : defaultValue,
+        minWidth: 200,
+        fontSize: 3,
+        mr: 2,
+    };
+    if (option.kind.includes('|')) {
+        const options = option.kind
+            .split('|')
+            .map((str) => str.trim().replace(/['"]/g, ''))
+            .map((str) => ({
+            label: StringExtensions_1.default.Humanize(str),
+            onClick: () => props.onChange(Object.assign(Object.assign({}, option), { value: str })),
+        }));
+        input = (React.createElement(DropdownButton_1.default, Object.assign({}, inputProps, { columns: ['label'], items: options }), StringExtensions_1.default.Humanize(value)));
+    }
+    else {
+        switch (option.kind) {
+            case 'number':
+                input = React.createElement(Input_1.default, Object.assign({ type: "number", onChange: handleInputChange }, inputProps));
+                break;
+            case 'string':
+                input = React.createElement(Input_1.default, Object.assign({ type: "text", onChange: handleInputChange }, inputProps));
+                break;
+            case 'boolean':
+                input = (React.createElement(CheckBox_1.CheckBox, { onChange: handleCheckboxChange, checked: Boolean(value), type: "date" }, label));
+                break;
+        }
+    }
+    let content = (React.createElement(React.Fragment, null,
+        React.createElement(rebass_1.Flex, { minWidth: LABEL_WIDTH, alignItems: "center" },
+            label,
+            " ",
+            info),
+        input));
+    if (option.kind === 'boolean') {
+        content = (React.createElement(rebass_1.Flex, { alignItems: "center" },
+            input,
+            " ",
+            info));
+    }
+    return (React.createElement(rebass_1.Flex, { mb: 2, pl: 1 }, content));
+};
+const OptionsSection = (props) => {
+    var _a;
+    if (!props.options.length) {
+        return React.createElement(React.Fragment, null);
+    }
+    return (React.createElement(rebass_1.Box, { mb: 2 },
+        React.createElement(HelpBlock_1.default, { mb: 2 }, (_a = props.name) !== null && _a !== void 0 ? _a : props.id),
+        props.options.map((option, index) => (React.createElement(OptionInput, { key: index, option: option, onChange: props.onChange })))));
+};
 const AdaptableOptionsForm = (props) => {
-    var _a, _b;
-    let abOptions = props.adaptableOptions;
-    const layoutOptions = Object.assign(Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions.layoutOptions), abOptions.layoutOptions);
-    const generalOptions = Object.assign(Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions.generalOptions), abOptions.generalOptions);
-    const adaptableQLOptions = Object.assign(Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions.adaptableQLOptions), abOptions.adaptableQLOptions);
-    const filterOptions = Object.assign(Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions.filterOptions), abOptions.filterOptions);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(HelpBlock_1.default, null, "Base Options"),
-        React.createElement(FormLayout_1.default, { margin: 2, columns: [{ name: 'label', style: { textAlign: 'start' } }, { name: 'children' }] },
-            React.createElement(FormLayout_1.FormRow, { label: "Adaptable ID" },
-                React.createElement(Input_1.default, { value: (_b = (_a = props === null || props === void 0 ? void 0 : props.adaptableOptions) === null || _a === void 0 ? void 0 : _a.adaptableId) !== null && _b !== void 0 ? _b : null, onChange: (event) => {
-                        var _a;
-                        props.onChangeadAptableOptions(Object.assign(Object.assign({}, abOptions), { adaptableId: (_a = event.target.value) !== null && _a !== void 0 ? _a : '' }));
-                    }, style: { minWidth: '20rem' } }))),
-        React.createElement(HelpBlock_1.default, null, "General Options"),
-        React.createElement(FormLayout_1.default, { margin: 2, columns: [{ name: 'children' }, { name: 'label', style: { textAlign: 'start' } }] },
-            React.createElement(FormLayout_1.FormRow, { label: "Show Missing Primary Key Warning" },
-                React.createElement(CheckBox_1.CheckBox, { checked: generalOptions.showMissingPrimaryKeyAlert, onChange: (showMissingPrimaryKeyWarning) => {
-                        abOptions = Object.assign({}, abOptions);
-                        abOptions.generalOptions = Object.assign({}, abOptions.generalOptions);
-                        abOptions.generalOptions.showMissingPrimaryKeyAlert = showMissingPrimaryKeyWarning;
-                        props.onChangeadAptableOptions(abOptions);
-                    } }))),
-        React.createElement(HelpBlock_1.default, null, "Layout Options"),
-        React.createElement(FormLayout_1.default, { margin: 2, columns: [{ name: 'children' }, { name: 'label', style: { textAlign: 'start' } }] },
-            React.createElement(FormLayout_1.FormRow, { label: "Auto Save Layouts" },
-                React.createElement(CheckBox_1.CheckBox, { checked: layoutOptions.autoSaveLayouts, onChange: (autoSaveLayouts) => {
-                        abOptions = Object.assign({}, abOptions);
-                        abOptions.layoutOptions = Object.assign({}, abOptions.layoutOptions);
-                        abOptions.layoutOptions.autoSaveLayouts = autoSaveLayouts;
-                        props.onChangeadAptableOptions(abOptions);
-                    } }))),
-        React.createElement(HelpBlock_1.default, null, "Search Options"),
-        React.createElement(FormLayout_1.default, { margin: 2, columns: [{ name: 'children' }, { name: 'label', style: { textAlign: 'start' } }] },
-            React.createElement(FormLayout_1.FormRow, { label: "Case Sensitive Text Comparison" },
-                React.createElement(CheckBox_1.CheckBox, { checked: adaptableQLOptions.caseSensitiveTextComparisons, onChange: (caseSensitiveTextComparisons) => {
-                        abOptions = Object.assign({}, abOptions);
-                        abOptions.adaptableQLOptions = Object.assign({}, abOptions.adaptableQLOptions);
-                        abOptions.adaptableQLOptions.caseSensitiveTextComparisons =
-                            caseSensitiveTextComparisons;
-                        props.onChangeadAptableOptions(abOptions);
-                    } })),
-            React.createElement(FormLayout_1.FormRow, { label: "Use AG Grid Filter Form Style" },
-                React.createElement(CheckBox_1.CheckBox, { checked: filterOptions.useAgGridFilterFormStyle, onChange: (useAgGridFilterFormStyle) => {
-                        abOptions = Object.assign({}, abOptions);
-                        abOptions.filterOptions = Object.assign({}, abOptions.filterOptions);
-                        abOptions.filterOptions.useAgGridFilterFormStyle = useAgGridFilterFormStyle;
-                        props.onChangeadAptableOptions(abOptions);
-                    } })),
-            React.createElement(FormLayout_1.FormRow, { label: "Use Adaptable Quick Filter" },
-                React.createElement(CheckBox_1.CheckBox, { checked: filterOptions.useAdaptableQuickFilter == true, onChange: (useAdaptableQuickFilter) => {
-                        abOptions = Object.assign({}, abOptions);
-                        abOptions.filterOptions = Object.assign({}, abOptions.filterOptions);
-                        abOptions.filterOptions.useAdaptableQuickFilter = useAdaptableQuickFilter;
-                        props.onChangeadAptableOptions(abOptions);
-                    } })),
-            React.createElement(FormLayout_1.FormRow, { label: "Use Adaptable Filter Form" },
-                React.createElement(CheckBox_1.CheckBox, { checked: filterOptions.useAdaptableFilterForm == true, onChange: (useAdaptableFilterForm) => {
-                        abOptions = Object.assign({}, abOptions);
-                        abOptions.filterOptions = Object.assign({}, abOptions.filterOptions);
-                        abOptions.filterOptions.useAdaptableFilterForm = useAdaptableFilterForm;
-                        props.onChangeadAptableOptions(abOptions);
-                    } })),
-            React.createElement(FormLayout_1.FormRow, { label: "Indicate Filtered Columns" },
-                React.createElement(CheckBox_1.CheckBox, { checked: filterOptions.indicateFilteredColumns, onChange: (indicateFilteredColumns) => {
-                        abOptions = Object.assign({}, abOptions);
-                        abOptions.filterOptions = Object.assign({}, abOptions.filterOptions);
-                        abOptions.filterOptions.indicateFilteredColumns = indicateFilteredColumns;
-                        props.onChangeadAptableOptions(abOptions);
-                    } })),
-            React.createElement(FormLayout_1.FormRow, { label: "Auto Apply Filter" },
-                React.createElement(CheckBox_1.CheckBox, { checked: filterOptions.autoApplyFilter, onChange: (autoApplyFilter) => {
-                        abOptions = Object.assign({}, abOptions);
-                        abOptions.filterOptions = Object.assign({}, abOptions.filterOptions);
-                        abOptions.filterOptions.autoApplyFilter = autoApplyFilter;
-                        props.onChangeadAptableOptions(abOptions);
-                    } }))),
-        React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center", margin: 2 },
-            React.createElement(rebass_1.Text, { style: { flex: 3 }, marginRight: 2 }, "Max Column Value Items To Display"),
-            React.createElement(rebass_1.Flex, { flex: 7, flexDirection: "row", alignItems: "center" },
-                React.createElement(Input_1.default, { style: { flex: 1 }, type: "number", placeholder: "Enter Number", onChange: (event) => {
-                        let e = event.target;
-                        let maxColumnValueItemsDisplayed = parseInt(e.value);
-                        abOptions = Object.assign({}, abOptions);
-                        abOptions.filterOptions = Object.assign({}, abOptions.filterOptions);
-                        abOptions.filterOptions.maxFilterValuesToDisplay = maxColumnValueItemsDisplayed;
-                        props.onChangeadAptableOptions(abOptions);
-                    }, value: filterOptions.maxFilterValuesToDisplay, marginRight: 3 })))));
+    const nocodeOptions = React.useMemo(() => {
+        const metamodelService = new MetamodelService_1.MetamodelService(() => props.adaptableOptions);
+        return [...metamodelService.getGridInfoNoCodeOptions()];
+    }, [props.adaptableOptions]);
+    const handleOptionChange = (sectionName) => (option) => {
+        const adaptableOptions = Object.assign({}, props.adaptableOptions);
+        if (sectionName === 'baseOptions') {
+            // @ts-ignore
+            adaptableOptions[option.name] = option.value;
+        }
+        else {
+            // @ts-ignore
+            adaptableOptions[sectionName] = Object.assign(Object.assign({}, adaptableOptions[sectionName]), { [option.name]: option.value });
+        }
+        props.onChangeadAptableOptions(adaptableOptions);
+    };
+    return (React.createElement(rebass_1.Box, { p: 2 }, nocodeOptions.map(([sectionName, { containerLabel, items }]) => {
+        return (React.createElement(OptionsSection, { onChange: handleOptionChange(sectionName), key: sectionName, id: sectionName, name: containerLabel, options: items }));
+    })));
 };
-exports.default = AdaptableOptionsForm;
+exports.AdaptableOptionsForm = AdaptableOptionsForm;