@adaptabletools/adaptable 17.0.0-canary.1 → 17.0.0-canary.10

package/src/View/Components/RangesComponent.js

@@ -1,16 +1,20 @@
-import * as React from 'react';
-import { Box, Flex, Text } from 'rebass';
-import { ColorPicker } from '../../components/ColorPicker';
-import clamp from 'lodash/clamp';
-import { CheckBox } from '../../components/CheckBox';
-import FormLayout, { FormRow } from '../../components/FormLayout';
-import { NumberInput } from '../../components/Input/NumberInput';
-import SimpleButton from '../../components/SimpleButton';
-import { getHexForName, GRAY, DARK_GREEN } from '../UIHelper';
-import { ColumnSelector } from './Selectors/ColumnSelector';
-import { Tabs } from '../../components/Tabs';
-import Radio from '../../components/Radio';
-export class RangesComponent extends React.Component {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RangesComponent = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const ColorPicker_1 = require("../../components/ColorPicker");
+const clamp_1 = tslib_1.__importDefault(require("lodash/clamp"));
+const CheckBox_1 = require("../../components/CheckBox");
+const FormLayout_1 = tslib_1.__importStar(require("../../components/FormLayout"));
+const NumberInput_1 = require("../../components/Input/NumberInput");
+const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const UIHelper_1 = require("../UIHelper");
+const ColumnSelector_1 = require("./Selectors/ColumnSelector");
+const Tabs_1 = require("../../components/Tabs");
+const Radio_1 = tslib_1.__importDefault(require("../../components/Radio"));
+class RangesComponent extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
@@ -44,67 +48,67 @@ export class RangesComponent extends React.Component {
             : undefined;
         const isRangeValueTypeNumber = ((_a = this.props.rangeValueType) !== null && _a !== void 0 ? _a : 'Number') === 'Number';
         return (React.createElement(React.Fragment, null,
-            React.createElement(Flex, { flexDirection: "row" },
-                React.createElement(CheckBox, { marginTop: 3, checked: this.state.rangesType == 'ColumnComparison', onChange: (checked) => this.onRangesTypeChanged(checked) }, "Use a Column Comparison")),
-            this.state.rangesType == 'Standard' && (React.createElement(Tabs, { autoFocus: false, marginTop: 2 },
-                React.createElement(Tabs.Tab, null, "Ranges"),
-                React.createElement(Tabs.Content, null,
-                    React.createElement(Flex, { alignItems: "center", mb: 2 },
-                        React.createElement(Text, { mr: 3 }, "Range Type"),
-                        React.createElement(Radio, { onChange: () => this.handleRangeValueTypeChange('Number'), checked: isRangeValueTypeNumber, mr: 2 }, "Number"),
-                        React.createElement(Radio, { onChange: () => this.handleRangeValueTypeChange('Percentage'), checked: !isRangeValueTypeNumber }, "Percentage")), (_b = this.props.ranges) === null || _b === void 0 ? void 0 :
-                    _b.map((range, index, list) => (React.createElement(Flex, { key: index, alignItems: "end", mb: 2, "data-name": "percent-bar-range" },
-                        React.createElement(Flex, { flexDirection: "column" },
-                            isRangeValueTypeNumber && index === 0 && (React.createElement(CheckBox, { onClick: () => this.setRangeColMin(range), checked: range.Min === 'Col-Min', mt: 0, mb: 1, fontSize: 3, disabled: this.props.disabled }, "Col Min")),
-                            React.createElement(NumberInput, { disabled: this.props.disabled ||
+            React.createElement(rebass_1.Flex, { flexDirection: "row" },
+                React.createElement(CheckBox_1.CheckBox, { marginTop: 3, checked: this.state.rangesType == 'ColumnComparison', onChange: (checked) => this.onRangesTypeChanged(checked) }, "Use a Column Comparison")),
+            this.state.rangesType == 'Standard' && (React.createElement(Tabs_1.Tabs, { autoFocus: false, marginTop: 2 },
+                React.createElement(Tabs_1.Tabs.Tab, null, "Ranges"),
+                React.createElement(Tabs_1.Tabs.Content, null,
+                    React.createElement(rebass_1.Flex, { alignItems: "center", mb: 2 },
+                        React.createElement(rebass_1.Text, { mr: 3 }, "Range Type"),
+                        React.createElement(Radio_1.default, { onChange: () => this.handleRangeValueTypeChange('Number'), checked: isRangeValueTypeNumber, mr: 2 }, "Number"),
+                        React.createElement(Radio_1.default, { onChange: () => this.handleRangeValueTypeChange('Percentage'), checked: !isRangeValueTypeNumber }, "Percentage")), (_b = this.props.ranges) === null || _b === void 0 ? void 0 :
+                    _b.map((range, index, list) => (React.createElement(rebass_1.Flex, { key: index, alignItems: "end", mb: 2, "data-name": "percent-bar-range" },
+                        React.createElement(rebass_1.Flex, { flexDirection: "column" },
+                            isRangeValueTypeNumber && index === 0 && (React.createElement(CheckBox_1.CheckBox, { onClick: () => this.setRangeColMin(range), checked: range.Min === 'Col-Min', mt: 0, mb: 1, fontSize: 3, disabled: this.props.disabled }, "Col Min")),
+                            React.createElement(NumberInput_1.NumberInput, { disabled: this.props.disabled ||
                                     range.Min === 'Col-Min' ||
                                     (index === 0 && !isRangeValueTypeNumber), value: range.Min, onChange: (value) => {
                                     this.changeRangeMin(index, value);
                                 }, mr: 2 })),
-                        React.createElement(Flex, { flexDirection: "column" },
-                            isRangeValueTypeNumber && index === list.length - 1 && (React.createElement(CheckBox, { mt: 0, mb: 1, onClick: () => this.setRangeColMax(range), checked: range.Max === 'Col-Max', fontSize: 3, disabled: this.props.disabled }, "Col Max")),
-                            React.createElement(NumberInput, { value: range.Max, disabled: this.props.disabled ||
+                        React.createElement(rebass_1.Flex, { flexDirection: "column" },
+                            isRangeValueTypeNumber && index === list.length - 1 && (React.createElement(CheckBox_1.CheckBox, { mt: 0, mb: 1, onClick: () => this.setRangeColMax(range), checked: range.Max === 'Col-Max', fontSize: 3, disabled: this.props.disabled }, "Col Max")),
+                            React.createElement(NumberInput_1.NumberInput, { value: range.Max, disabled: this.props.disabled ||
                                     range.Max === 'Col-Max' ||
                                     (index === list.length - 1 && !isRangeValueTypeNumber), onChange: (value) => {
                                     this.changeRangeMax(index, value);
                                 }, mr: 2 })),
-                        React.createElement(Flex, { alignItems: "center", height: "100%" },
-                            React.createElement(ColorPicker, { api: this.props.api, value: range.Color, onChange: (color) => {
+                        React.createElement(rebass_1.Flex, { alignItems: "center", height: "100%" },
+                            React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: range.Color, onChange: (color) => {
                                     this.changeRangeColor(index, color);
                                 }, mr: 2, height: 33 })),
-                        this.props.showRangeDirection && (React.createElement(CheckBox, { disabled: this.props.disabled, checked: range.ReverseGradient && range.ReverseGradient == true, onChange: (checked) => this.changeRangeDirectionUp(index, checked), ml: 2 }, "Reverse Gradient")),
-                        React.createElement(SimpleButton, { ml: 2, mb: 1, icon: "delete", disabled: this.props.disabled || (this.props.ranges && this.props.ranges.length == 1), onClick: () => this.removeRange(index) })))),
+                        this.props.showRangeDirection && (React.createElement(CheckBox_1.CheckBox, { disabled: this.props.disabled, checked: range.ReverseGradient && range.ReverseGradient == true, onChange: (checked) => this.changeRangeDirectionUp(index, checked), ml: 2 }, "Reverse Gradient")),
+                        React.createElement(SimpleButton_1.default, { ml: 2, mb: 1, icon: "delete", disabled: this.props.disabled || (this.props.ranges && this.props.ranges.length == 1), onClick: () => this.removeRange(index) })))),
                     React.createElement("div", null,
-                        React.createElement(SimpleButton, { disabled: this.props.disabled, variant: "raised", "data-name": "add", onClick: () => this.addRange() }, "Add New Range"))))),
-            this.state.rangesType == 'ColumnComparison' && (React.createElement(Tabs, { autoFocus: false, marginTop: 2 },
-                React.createElement(Tabs.Tab, null, "Column Comparison"),
-                React.createElement(Tabs.Content, null,
-                    React.createElement(Flex, { flexDirection: "column", key: 'cc', "data-name": "percent-bar-column-comparison" },
-                        React.createElement(Text, { padding: 2, fontSize: 2 },
+                        React.createElement(SimpleButton_1.default, { disabled: this.props.disabled, variant: "raised", "data-name": "add", onClick: () => this.addRange() }, "Add New Range"))))),
+            this.state.rangesType == 'ColumnComparison' && (React.createElement(Tabs_1.Tabs, { autoFocus: false, marginTop: 2 },
+                React.createElement(Tabs_1.Tabs.Tab, null, "Column Comparison"),
+                React.createElement(Tabs_1.Tabs.Content, null,
+                    React.createElement(rebass_1.Flex, { flexDirection: "column", key: 'cc', "data-name": "percent-bar-column-comparison" },
+                        React.createElement(rebass_1.Text, { padding: 2, fontSize: 2 },
                             "Create Minimum and Maximum Values by providing a value or selecting another Column, and choose a",
                             ' ',
                             this.props.api.internalApi.getCorrectEnglishVariant('Colour'),
                             " for the Bar."),
-                        React.createElement(FormLayout, { columns: ['label', 'first', 'or', 'second'], sizes: ['auto', 'auto', 'auto', '1fr'] },
-                            React.createElement(FormRow, { label: "Min Value:", first: React.createElement(NumberInput, { disabled: this.props.disabled, type: "number", value: comparisonMinValueNumber, onChange: (value) => {
+                        React.createElement(FormLayout_1.default, { columns: ['label', 'first', 'or', 'second'], sizes: ['auto', 'auto', 'auto', '1fr'] },
+                            React.createElement(FormLayout_1.FormRow, { label: "Min Value:", first: React.createElement(NumberInput_1.NumberInput, { disabled: this.props.disabled, type: "number", value: comparisonMinValueNumber, onChange: (value) => {
                                         this.changeColumnComparisonMinValue(value);
-                                    } }), or: "OR", second: React.createElement(Box, { maxWidth: '15rem' },
-                                    React.createElement(ColumnSelector, { menuPosition: "fixed", disabled: this.props.disabled, value: comparisonMinValueColumnId, type: "Number", onChange: (columnId) => {
+                                    } }), or: "OR", second: React.createElement(rebass_1.Box, { maxWidth: '15rem' },
+                                    React.createElement(ColumnSelector_1.ColumnSelector, { menuPosition: "fixed", disabled: this.props.disabled, value: comparisonMinValueColumnId, type: "Number", onChange: (columnId) => {
                                             this.onMinColumnSelectedChanged(columnId);
                                         } })) }),
                             ' ',
-                            React.createElement(FormRow, { label: "Max Value:", first: React.createElement(NumberInput, { disabled: this.props.disabled, type: "number", value: comparisonMaxValueNumber, onChange: (value) => {
+                            React.createElement(FormLayout_1.FormRow, { label: "Max Value:", first: React.createElement(NumberInput_1.NumberInput, { disabled: this.props.disabled, type: "number", value: comparisonMaxValueNumber, onChange: (value) => {
                                         this.changeColumnComparisonMaxValue(value);
-                                    } }), or: "OR", second: React.createElement(Box, { maxWidth: '15rem' },
-                                    React.createElement(ColumnSelector, { menuPosition: "fixed", disabled: this.props.disabled, value: comparisonMaxValueColumnId, type: "Number", onChange: (columnId) => this.onMaxColumnSelectedChanged(columnId) })) }),
-                            React.createElement(FormRow, { label: `Bar ${this.props.api.internalApi.getCorrectEnglishVariant('Colour')}`, first: React.createElement(ColorPicker, { disabled: this.props.disabled, api: this.props.api, value: comparisonColor, onChange: (color) => {
+                                    } }), or: "OR", second: React.createElement(rebass_1.Box, { maxWidth: '15rem' },
+                                    React.createElement(ColumnSelector_1.ColumnSelector, { menuPosition: "fixed", disabled: this.props.disabled, value: comparisonMaxValueColumnId, type: "Number", onChange: (columnId) => this.onMaxColumnSelectedChanged(columnId) })) }),
+                            React.createElement(FormLayout_1.FormRow, { label: `Bar ${this.props.api.internalApi.getCorrectEnglishVariant('Colour')}`, first: React.createElement(ColorPicker_1.ColorPicker, { disabled: this.props.disabled, api: this.props.api, value: comparisonColor, onChange: (color) => {
                                         this.changeColumnComparisonColor(color);
                                     } }) }))))))));
     }
     onRangesTypeChanged(checked) {
         if (checked) {
             let columnComparison = {
-                Color: getHexForName(DARK_GREEN),
+                Color: (0, UIHelper_1.getHexForName)(UIHelper_1.DARK_GREEN),
                 MinValue: undefined,
                 MaxValue: undefined,
             };
@@ -128,7 +132,7 @@ export class RangesComponent extends React.Component {
         const { ranges } = this.props;
         let newMin = Number(value);
         if (this.props.rangeValueType === 'Percentage') {
-            newMin = clamp(newMin, 0, 100);
+            newMin = (0, clamp_1.default)(newMin, 0, 100);
         }
         ranges[index].Min = newMin;
         if (ranges[index - 1]) {
@@ -140,7 +144,7 @@ export class RangesComponent extends React.Component {
         const { ranges } = this.props;
         let newMax = Number(value);
         if (this.props.rangeValueType === 'Percentage') {
-            newMax = clamp(newMax, 0, 100);
+            newMax = (0, clamp_1.default)(newMax, 0, 100);
         }
         ranges[index].Max = newMax;
         if (ranges[index + 1]) {
@@ -201,7 +205,7 @@ export class RangesComponent extends React.Component {
         const newRange = {
             Min,
             Max: lastRange.Max,
-            Color: getHexForName(GRAY),
+            Color: (0, UIHelper_1.getHexForName)(UIHelper_1.GRAY),
         };
         const newRanges = [...this.props.ranges.slice(0, -1), previousRange, newRange];
         this.props.updateRanges(newRanges);
@@ -232,3 +236,4 @@ export class RangesComponent extends React.Component {
         this.props.updateColumnComparison(columnComparison);
     }
 }
+exports.RangesComponent = RangesComponent;

package/src/View/Components/ScopeComponent.js

@@ -1,11 +1,15 @@
-import * as React from 'react';
-import { Flex, Box } from 'rebass';
-import Panel from '../../components/Panel';
-import HelpBlock from '../../components/HelpBlock';
-import Radio from '../../components/Radio';
-import { DualListBoxEditor } from './ListBox/DualListBoxEditor';
-import { CheckBox } from '../../components/CheckBox';
-export class ScopeComponent extends React.Component {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScopeComponent = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
+const HelpBlock_1 = tslib_1.__importDefault(require("../../components/HelpBlock"));
+const Radio_1 = tslib_1.__importDefault(require("../../components/Radio"));
+const DualListBoxEditor_1 = require("./ListBox/DualListBoxEditor");
+const CheckBox_1 = require("../../components/CheckBox");
+class ScopeComponent extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
@@ -23,36 +27,36 @@ export class ScopeComponent extends React.Component {
             ? this.props.displayMessage
             : 'Apply Scope for: Row, or one or more Columns, or one or more Data Types';
         return (React.createElement("div", { "data-name": 'scope-component' },
-            React.createElement(Panel, { header: "Scope", margin: 2, className: "ab-ScopeComponent" },
-                React.createElement(Flex, { flexDirection: "column", "data-name": "scope-block" },
-                    React.createElement(HelpBlock, { marginBottom: 1 }, displayMessage),
+            React.createElement(Panel_1.default, { header: "Scope", margin: 2, className: "ab-ScopeComponent" },
+                React.createElement(rebass_1.Flex, { flexDirection: "column", "data-name": "scope-block" },
+                    React.createElement(HelpBlock_1.default, { marginBottom: 1 }, displayMessage),
                     ' ',
-                    React.createElement(Flex, { flexDirection: "row", alignItems: "center", padding: 2 },
-                        React.createElement(Radio, { value: "Row", checked: this.state.ScopeChoice == 'All', onChange: (checked, e) => this.onScopeSelectChanged(e) }, "All Columns"),
+                    React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center", padding: 2 },
+                        React.createElement(Radio_1.default, { value: "Row", checked: this.state.ScopeChoice == 'All', onChange: (checked, e) => this.onScopeSelectChanged(e) }, "All Columns"),
                         ' ',
-                        React.createElement(Radio, { marginLeft: 3, value: "Column", checked: this.state.ScopeChoice == 'Column', onChange: (checked, e) => this.onScopeSelectChanged(e) }, "Selected Column(s)"),
+                        React.createElement(Radio_1.default, { marginLeft: 3, value: "Column", checked: this.state.ScopeChoice == 'Column', onChange: (checked, e) => this.onScopeSelectChanged(e) }, "Selected Column(s)"),
                         ' ',
-                        React.createElement(Radio, { marginLeft: 3, value: "DataType", checked: this.state.ScopeChoice == 'DataType', onChange: (checked, e) => this.onScopeSelectChanged(e) }, "DataType(s)")),
-                    this.state.ScopeChoice == 'Column' && (React.createElement(Box, { marginBottom: 2, "data-name": "column-scope" },
-                        React.createElement(DualListBoxEditor, { style: { flex: 1, overflow: 'hidden', height: '250px' }, AvailableValues: availableValues, SelectedValues: this.state.selectedColumnValues, HeaderAvailable: "Columns", HeaderSelected: "Columns In Style", onChange: (SelectedValues) => this.onColumnsSelectedChanged(SelectedValues) }))),
-                    this.state.ScopeChoice == 'DataType' && (React.createElement(Panel, { "data-name": "datatype-scope", variant: "modern" },
-                        React.createElement(Flex, { flexDirection: "row" },
-                            this.state.availableDataTypes.includes('Date') && (React.createElement(CheckBox, { "data-name": "scope", "data-value": "date", checked: this.state.componentScope &&
+                        React.createElement(Radio_1.default, { marginLeft: 3, value: "DataType", checked: this.state.ScopeChoice == 'DataType', onChange: (checked, e) => this.onScopeSelectChanged(e) }, "DataType(s)")),
+                    this.state.ScopeChoice == 'Column' && (React.createElement(rebass_1.Box, { marginBottom: 2, "data-name": "column-scope" },
+                        React.createElement(DualListBoxEditor_1.DualListBoxEditor, { style: { flex: 1, overflow: 'hidden', height: '250px' }, AvailableValues: availableValues, SelectedValues: this.state.selectedColumnValues, HeaderAvailable: "Columns", HeaderSelected: "Columns In Style", onChange: (SelectedValues) => this.onColumnsSelectedChanged(SelectedValues) }))),
+                    this.state.ScopeChoice == 'DataType' && (React.createElement(Panel_1.default, { "data-name": "datatype-scope", variant: "modern" },
+                        React.createElement(rebass_1.Flex, { flexDirection: "row" },
+                            this.state.availableDataTypes.includes('Date') && (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", "data-value": "date", checked: this.state.componentScope &&
                                     'DataTypes' in this.state.componentScope &&
                                     this.props.api.scopeApi
                                         .getDataTypesInScope(this.state.componentScope)
                                         .includes('Date'), marginLeft: 2, onChange: (checked) => this.onCheckBoxDataTypeChecked(checked, 'Date') }, "Date")),
-                            this.state.availableDataTypes.includes('Number') && (React.createElement(CheckBox, { "data-name": "scope", "data-value": "number", checked: this.state.componentScope &&
+                            this.state.availableDataTypes.includes('Number') && (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", "data-value": "number", checked: this.state.componentScope &&
                                     'DataTypes' in this.state.componentScope &&
                                     this.props.api.scopeApi
                                         .getDataTypesInScope(this.state.componentScope)
                                         .includes('Number'), marginLeft: 4, onChange: (checked) => this.onCheckBoxDataTypeChecked(checked, 'Number') }, "Number")),
-                            this.state.availableDataTypes.includes('String') && (React.createElement(CheckBox, { "data-name": "scope", "data-value": "string", checked: this.state.componentScope &&
+                            this.state.availableDataTypes.includes('String') && (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", "data-value": "string", checked: this.state.componentScope &&
                                     'DataTypes' in this.state.componentScope &&
                                     this.props.api.scopeApi
                                         .getDataTypesInScope(this.state.componentScope)
                                         .includes('String'), marginLeft: 4, onChange: (checked) => this.onCheckBoxDataTypeChecked(checked, 'String') }, "String")),
-                            this.state.availableDataTypes.includes('Boolean') && (React.createElement(CheckBox, { "data-name": "scope", "data-value": "boolean", checked: this.state.componentScope &&
+                            this.state.availableDataTypes.includes('Boolean') && (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", "data-value": "boolean", checked: this.state.componentScope &&
                                     'DataTypes' in this.state.componentScope &&
                                     this.props.api.scopeApi
                                         .getDataTypesInScope(this.state.componentScope)
@@ -131,3 +135,4 @@ export class ScopeComponent extends React.Component {
         this.props.updateScope(newScope);
     }
 }
+exports.ScopeComponent = ScopeComponent;

package/src/View/Components/Selectors/ColumnSelector.js

@@ -1,8 +1,12 @@
-import * as React from 'react';
-import { Select } from '../../../components/Select';
-import { useAdaptable } from '../../AdaptableContext';
-export const ColumnSelector = function (props) {
-    const { api } = useAdaptable();
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnSelector = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const Select_1 = require("../../../components/Select");
+const AdaptableContext_1 = require("../../AdaptableContext");
+const ColumnSelector = function (props) {
+    const { api } = (0, AdaptableContext_1.useAdaptable)();
     const columns = React.useMemo(() => {
         return api.columnApi.getColumnsOfType(props.type);
     }, []);
@@ -21,7 +25,8 @@ export const ColumnSelector = function (props) {
         }
         return true;
     });
-    return (React.createElement(Select, { "data-name": "column-selector", disabled: props.disabled, isMulti: props.isMulti, menuPosition: props.menuPosition, value: props.value, onChange: (colId) => {
+    return (React.createElement(Select_1.Select, { "data-name": "column-selector", disabled: props.disabled, isMulti: props.isMulti, menuPosition: props.menuPosition, value: props.value, placeholder: "Select Column", onChange: (colId) => {
             props.onChange(colId);
         }, options: options }));
 };
+exports.ColumnSelector = ColumnSelector;

package/src/View/Components/Selectors/ColumnSelectorOld.js

@@ -1,15 +1,19 @@
-import * as React from 'react';
-import { StringExtensions } from '../../../Utilities/Extensions/StringExtensions';
-import { SortOrder } from '../../../PredefinedConfig/Common/Enums';
-import { ArrayExtensions } from '../../../Utilities/Extensions/ArrayExtensions';
-import FormLayout, { FormRow } from '../../../components/FormLayout';
-import DropdownButton from '../../../components/DropdownButton';
-export class ColumnSelector extends React.Component {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnSelector = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const StringExtensions_1 = require("../../../Utilities/Extensions/StringExtensions");
+const Enums_1 = require("../../../PredefinedConfig/Common/Enums");
+const ArrayExtensions_1 = require("../../../Utilities/Extensions/ArrayExtensions");
+const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
+const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
+class ColumnSelector extends React.Component {
     render() {
         var _a;
-        const sortedColumns = ArrayExtensions.sortArrayWithProperty(SortOrder.Asc, this.props.ColumnList, 'friendlyName');
-        const selectedColumnIds = this.props.SelectedColumnIds.filter((x) => StringExtensions.IsNotNullOrEmpty(x));
-        const isEmptySelectedColumnIds = this.props.SelectedColumnIds.filter((x) => StringExtensions.IsNotNullOrEmpty(x)).length == 0;
+        const sortedColumns = ArrayExtensions_1.ArrayExtensions.sortArrayWithProperty(Enums_1.SortOrder.Asc, this.props.ColumnList, 'friendlyName');
+        const selectedColumnIds = this.props.SelectedColumnIds.filter((x) => StringExtensions_1.StringExtensions.IsNotNullOrEmpty(x));
+        const isEmptySelectedColumnIds = this.props.SelectedColumnIds.filter((x) => StringExtensions_1.StringExtensions.IsNotNullOrEmpty(x)).length == 0;
         let sortedColumnOptions = sortedColumns.map((column) => {
             return {
                 label: column.friendlyName,
@@ -30,9 +34,9 @@ export class ColumnSelector extends React.Component {
             ? (_a = this.props.ColumnList.find((c) => c.columnId == selectedColumnIds[0])) === null || _a === void 0 ? void 0 : _a.friendlyName
             : 'Select a column';
         return (React.createElement("div", { "data-name": 'column-selector' },
-            React.createElement(FormLayout, { columns: [{ name: 'columnSelector', style: { display: 'flex' } }], style: this.props.style },
-                React.createElement(FormRow, null,
-                    React.createElement(DropdownButton, { marginRight: 2, columns: ['label'], showClearButton: currentColumnName != 'Select a column', onClear: () => this.onClearButton(), style: { width: '100%', fontSize: 'small' }, items: sortedColumnOptions, disabled: this.props.disabled || sortedColumnOptions.length == 0 }, currentColumnName)))));
+            React.createElement(FormLayout_1.default, { columns: [{ name: 'columnSelector', style: { display: 'flex' } }], style: this.props.style },
+                React.createElement(FormLayout_1.FormRow, null,
+                    React.createElement(DropdownButton_1.default, { marginRight: 2, columns: ['label'], showClearButton: currentColumnName != 'Select a column', onClear: () => this.onClearButton(), style: { width: '100%', fontSize: 'small' }, items: sortedColumnOptions, disabled: this.props.disabled || sortedColumnOptions.length == 0 }, currentColumnName)))));
     }
     onClearButton() {
         this.props.onColumnChange([]);
@@ -44,3 +48,4 @@ export class ColumnSelector extends React.Component {
         this.props.onColumnChange(selected);
     }
 }
+exports.ColumnSelector = ColumnSelector;

package/src/View/Components/Selectors/ColumnValueSelector.js

@@ -1,17 +1,21 @@
-import * as React from 'react';
-import FieldWrap from '../../../components/FieldWrap';
-import UIHelper from '../../UIHelper';
-import AdaptableInput from '../AdaptableInput';
-import { Box } from 'rebass';
-import { PermittedValuesSelector } from './PermittedValuesSelector';
-import { Select } from '../../../components/Select';
-export const ColumnValueSelector = (props) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnValueSelector = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const FieldWrap_1 = tslib_1.__importDefault(require("../../../components/FieldWrap"));
+const UIHelper_1 = tslib_1.__importDefault(require("../../UIHelper"));
+const AdaptableInput_1 = tslib_1.__importDefault(require("../AdaptableInput"));
+const rebass_1 = require("rebass");
+const PermittedValuesSelector_1 = require("./PermittedValuesSelector");
+const Select_1 = require("../../../components/Select");
+const ColumnValueSelector = (props) => {
     var _a, _b;
     const [valueType, setValueType] = React.useState('existing');
     const columnType = (_a = props.selectedColumn) === null || _a === void 0 ? void 0 : _a.dataType;
     const isDateType = props.selectedColumn && columnType === 'Date';
-    const permittedValueSelector = (React.createElement(Box, null,
-        React.createElement(PermittedValuesSelector, { allowNewValues: true, disabled: props.disabled || !props.selectedColumn, value: props.selectedColumnValue === '' ? null : props.selectedColumnValue, columnId: (_b = props.selectedColumn) === null || _b === void 0 ? void 0 : _b.columnId, placeholder: isDateType ? 'Select' : 'Select or type new value', onChange: (value) => {
+    const permittedValueSelector = (React.createElement(rebass_1.Box, null,
+        React.createElement(PermittedValuesSelector_1.PermittedValuesSelector, { allowNewValues: true, disabled: props.disabled || !props.selectedColumn, value: props.selectedColumnValue === '' ? null : props.selectedColumnValue, columnId: (_b = props.selectedColumn) === null || _b === void 0 ? void 0 : _b.columnId, placeholder: isDateType ? 'Select' : 'Select or type new value', onChange: (value) => {
                 if (!value) {
                     props.onColumnValueChange(null);
                 }
@@ -19,23 +23,24 @@ export const ColumnValueSelector = (props) => {
                     props.onColumnValueChange(value);
                 }
             } })));
-    const input = (React.createElement(AdaptableInput, { "data-name": "bulkupdate-value-input", type: props.selectedColumn
-            ? UIHelper.getDescriptionForDataType(props.selectedColumn.dataType)
+    const input = (React.createElement(AdaptableInput_1.default, { "data-name": "bulkupdate-value-input", type: props.selectedColumn
+            ? UIHelper_1.default.getDescriptionForDataType(props.selectedColumn.dataType)
             : 'text', placeholder: props.selectedColumn
-            ? UIHelper.getPlaceHolderforDataType(props.selectedColumn.dataType)
+            ? UIHelper_1.default.getPlaceHolderforDataType(props.selectedColumn.dataType)
             : 'Enter Value', autoFocus: true, disabled: props.disabled, style: { width: '100%' }, value: props.selectedColumnValue, onChange: (e) => {
             props.onColumnValueChange(e.target.value);
         } }));
     let valueTypeSelector = null;
     if (isDateType) {
-        valueTypeSelector = (React.createElement(Select, { options: [
+        valueTypeSelector = (React.createElement(Select_1.Select, { options: [
                 { label: 'New', value: 'new' },
                 { label: 'Existing', value: 'existing' },
             ], value: valueType, onChange: (value) => {
                 setValueType(value);
             } }));
     }
-    return (React.createElement(FieldWrap, { className: props.className, style: Object.assign(Object.assign({}, props.style), { overflow: 'visible', maxWidth: '100%' }) }, isDateType ? (React.createElement(React.Fragment, null,
+    return (React.createElement(FieldWrap_1.default, { className: props.className, style: Object.assign(Object.assign({}, props.style), { overflow: 'visible', maxWidth: '100%' }) }, isDateType ? (React.createElement(React.Fragment, null,
         valueType === 'new' ? input : permittedValueSelector,
         valueTypeSelector)) : (permittedValueSelector)));
 };
+exports.ColumnValueSelector = ColumnValueSelector;

package/src/View/Components/Selectors/PermittedValuesSelector.d.ts

@@ -1,13 +1,14 @@
 /// <reference types="react" />
 export type ValueType = number | string | Date;
-interface PermittedValuesSelectorProps<Value extends ValueType> {
+interface PermittedValuesSelectorProps<Value extends ValueType, IsMulti extends boolean> {
+    isMulti?: IsMulti;
     columnId: string;
-    value: Value;
-    onChange: (value: Value) => void;
+    value: IsMulti extends true ? Value[] : Value;
+    onChange: (value: IsMulti extends true ? Value[] : Value) => void;
     allowNewValues?: boolean;
     className?: string;
     disabled?: boolean;
     placeholder?: string;
 }
-export declare const PermittedValuesSelector: <Value extends ValueType>(props: PermittedValuesSelectorProps<Value>) => JSX.Element;
+export declare const PermittedValuesSelector: <Value extends ValueType, IsMulti extends boolean = false>(props: PermittedValuesSelectorProps<Value, IsMulti>) => JSX.Element;
 export {};

package/src/View/Components/Selectors/PermittedValuesSelector.js

@@ -1,9 +1,13 @@
-import * as React from 'react';
-import { Select } from '../../../components/Select';
-import { runIfNotResolvedIn } from '../../../Utilities/runIfNotResolvedIn';
-import { useAdaptable } from '../../AdaptableContext';
-export const PermittedValuesSelector = function (props) {
-    const adaptable = useAdaptable();
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PermittedValuesSelector = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const Select_1 = require("../../../components/Select");
+const runIfNotResolvedIn_1 = require("../../../Utilities/runIfNotResolvedIn");
+const AdaptableContext_1 = require("../../AdaptableContext");
+const PermittedValuesSelector = function (props) {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const [isLoading, setIsLoading] = React.useState(true);
     const [options, setOptions] = React.useState([]);
     const [filter, setFilter] = React.useState('');
@@ -17,7 +21,7 @@ export const PermittedValuesSelector = function (props) {
         }
         setIsLoading(true);
         (async () => {
-            const { values: distinctColumnValues } = await runIfNotResolvedIn(adaptable.api.gridApi.internalApi.getDistinctFilterDisplayValuesForColumn(props.columnId, filter, adaptable.api.optionsApi.getColumnFilterOptions().valuesFilterOptions
+            const { values: distinctColumnValues } = await (0, runIfNotResolvedIn_1.runIfNotResolvedIn)(adaptable.api.gridApi.internalApi.getDistinctFilterDisplayValuesForColumn(props.columnId, filter, adaptable.api.optionsApi.getColumnFilterOptions().valuesFilterOptions
                 .showDistinctFilteredValuesOnly), () => {
                 setIsLoading(true);
             });
@@ -26,8 +30,7 @@ export const PermittedValuesSelector = function (props) {
         })();
     }, [props.columnId, filter]);
     const isCreatable = props.allowNewValues && ['String', 'Number'].includes(columnType);
-    const handleOnChange = (value) => {
-        // convert numbers
+    const handleSingleValueChange = (value) => {
         if (isCreatable) {
             if (columnType === 'Number') {
                 let num = parseFloat(value);
@@ -42,5 +45,29 @@ export const PermittedValuesSelector = function (props) {
             props.onChange(value);
         }
     };
-    return (React.createElement(Select, { className: props.className, disabled: props.disabled, "data-name": "permitted-values-selector", placeholder: props.placeholder || (props.allowNewValues ? 'Select or type new value' : 'Select value'), isCreatable: isCreatable, isClearable: true, options: options, isLoding: isLoading, onInputChange: setFilter, onChange: handleOnChange, value: props.value }));
+    const handleMultiValueChange = (values) => {
+        if (isCreatable) {
+            if (columnType === 'Number') {
+                const nums = values.map((v) => parseFloat(v)).filter((v) => !isNaN(v));
+                props.onChange(nums);
+            }
+            else {
+                props.onChange(values);
+            }
+        }
+        else {
+            props.onChange(values);
+        }
+    };
+    const handleOnChange = (value) => {
+        // convert numbers
+        if (props.isMulti) {
+            handleMultiValueChange(value);
+        }
+        else {
+            handleSingleValueChange(value);
+        }
+    };
+    return (React.createElement(Select_1.Select, { isMulti: props.isMulti, className: props.className, disabled: props.disabled, "data-name": "permitted-values-selector", placeholder: props.placeholder || (props.allowNewValues ? 'Select or type new value' : 'Select value'), isCreatable: isCreatable, isClearable: true, options: options, isLoding: isLoading, onInputChange: setFilter, onChange: handleOnChange, value: props.value }));
 };
+exports.PermittedValuesSelector = PermittedValuesSelector;

package/src/View/Components/SharedProps/BaseProps.js

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

package/src/View/Components/SharedProps/ConfigEntityRowProps.js

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

package/src/View/Components/SharedProps/EditableConfigEntityState.js

@@ -1,7 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WizardStatus = void 0;
 /// <reference path="../../typings/.d.ts" />
-export var WizardStatus;
+var WizardStatus;
 (function (WizardStatus) {
     WizardStatus["New"] = "New";
     WizardStatus["Edit"] = "Edit";
     WizardStatus["None"] = "None";
-})(WizardStatus || (WizardStatus = {}));
+})(WizardStatus = exports.WizardStatus || (exports.WizardStatus = {}));

package/src/View/Components/SharedProps/ModuleSummaryProps.js

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

package/src/View/Components/SharedProps/ModuleViewPopupProps.js

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

package/src/View/Components/SharedProps/ToolPanelModuleViewPopupProps.js

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

package/src/View/Components/SharedProps/ToolbarModuleViewPopupProps.js

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

package/src/View/Components/SharedProps/ViewPanelProps.js

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

package/src/View/Components/SharedProps/WizardScopeState.js

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