@adaptabletools/adaptable 17.0.6 → 18.0.0-canary.1

package/src/View/Components/Popups/WindowPopups/WindowPopups.js

@@ -1,38 +1,35 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.WindowPopups = exports.CUSTOM_WINDOW_FACTORY_ID = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_redux_1 = require("react-redux");
-const Dialog_1 = tslib_1.__importDefault(require("../../../../components/Dialog"));
-const PopupRedux_1 = require("../../../../Redux/ActionsReducers/PopupRedux");
-const AdaptableContext_1 = require("../../../AdaptableContext");
-const ExternalRenderer_1 = require("../../ExternalRenderer");
-const PanelWithImage_1 = require("../../Panels/PanelWithImage");
-const Utilities_1 = require("../Utilities");
-const windowFactory_1 = require("./windowFactory");
+import { __rest } from "tslib";
+import * as React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import Dialog from '../../../../components/Dialog';
+import { PopupHideWindow } from '../../../../Redux/ActionsReducers/PopupRedux';
+import { useAdaptable } from '../../../AdaptableContext';
+import { ExternalRenderer } from '../../ExternalRenderer';
+import { PanelWithImage } from '../../Panels/PanelWithImage';
+import { getMiddlePosition, getWindowPopupSize } from '../Utilities';
+import { windowFactory } from './windowFactory';
 const NoopComponent = () => {
     return React.createElement(React.Fragment, null);
 };
-exports.CUSTOM_WINDOW_FACTORY_ID = 'CUSTOM_WINDOW_FACTORY_ID';
-const WindowPopups = () => {
+export const CUSTOM_WINDOW_FACTORY_ID = 'CUSTOM_WINDOW_FACTORY_ID';
+export const WindowPopups = () => {
     const [windowModalSettings, setWindowModalSettings] = React.useState({});
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const dispatch = (0, react_redux_1.useDispatch)();
-    const windowItems = (0, react_redux_1.useSelector)((state) => state.Popup.WindowPopup.PopupList);
+    const adaptable = useAdaptable();
+    const dispatch = useDispatch();
+    const windowItems = useSelector((state) => state.Popup.WindowPopup.PopupList);
     return (React.createElement(React.Fragment, null, windowItems === null || windowItems === void 0 ? void 0 : windowItems.map((windowItem) => {
         var _a, _b, _c, _d, _e, _f;
-        let Component = (_a = windowFactory_1.windowFactory[windowItem.FactoryId]) !== null && _a !== void 0 ? _a : null;
-        const _g = (_b = windowItem === null || windowItem === void 0 ? void 0 : windowItem.PopupProps) !== null && _b !== void 0 ? _b : {}, { windowModalProps } = _g, restPopupProps = tslib_1.__rest(_g, ["windowModalProps"]);
+        let Component = (_a = windowFactory[windowItem.FactoryId]) !== null && _a !== void 0 ? _a : null;
+        const _g = (_b = windowItem === null || windowItem === void 0 ? void 0 : windowItem.PopupProps) !== null && _b !== void 0 ? _b : {}, { windowModalProps } = _g, restPopupProps = __rest(_g, ["windowModalProps"]);
         const handleDismiss = () => {
-            dispatch((0, PopupRedux_1.PopupHideWindow)(windowItem.Id));
+            dispatch(PopupHideWindow(windowItem.Id));
         };
-        const size = (_d = (_c = windowModalSettings === null || windowModalSettings === void 0 ? void 0 : windowModalSettings[windowItem.Id]) === null || _c === void 0 ? void 0 : _c.size) !== null && _d !== void 0 ? _d : (0, Utilities_1.getWindowPopupSize)();
-        const position = (_f = (_e = windowModalSettings === null || windowModalSettings === void 0 ? void 0 : windowModalSettings[windowItem.Id]) === null || _e === void 0 ? void 0 : _e.position) !== null && _f !== void 0 ? _f : (0, Utilities_1.getMiddlePosition)(size);
+        const size = (_d = (_c = windowModalSettings === null || windowModalSettings === void 0 ? void 0 : windowModalSettings[windowItem.Id]) === null || _c === void 0 ? void 0 : _c.size) !== null && _d !== void 0 ? _d : getWindowPopupSize();
+        const position = (_f = (_e = windowModalSettings === null || windowModalSettings === void 0 ? void 0 : windowModalSettings[windowItem.Id]) === null || _e === void 0 ? void 0 : _e.position) !== null && _f !== void 0 ? _f : getMiddlePosition(size);
         let componentNode = null;
         if (!Component &&
             (windowItem.PopupProps.render || windowItem.PopupProps.frameworkComponent)) {
-            componentNode = (React.createElement(ExternalRenderer_1.ExternalRenderer
+            componentNode = (React.createElement(ExternalRenderer
             // TODO AFL: add configurable width&height for custom popups
             , { 
                 // TODO AFL: add configurable width&height for custom popups
@@ -42,10 +39,9 @@ const WindowPopups = () => {
             Component = Component !== null && Component !== void 0 ? Component : NoopComponent;
             componentNode = (React.createElement(Component, { api: adaptable.api, onDismiss: handleDismiss, popupProps: restPopupProps }));
         }
-        return (React.createElement(Dialog_1.default, { "data-name": windowItem.Id, style: { height: '100%' }, className: "ab-Window-Modal", key: windowItem.Id, windowModal: true, windowModalProps: Object.assign(Object.assign({}, windowModalProps), { onChange: (settings) => {
+        return (React.createElement(Dialog, { "data-name": windowItem.Id, style: { height: '100%' }, className: "ab-Window-Modal", key: windowItem.Id, windowModal: true, windowModalProps: Object.assign(Object.assign({}, windowModalProps), { onChange: (settings) => {
                     setWindowModalSettings((settingsMap) => (Object.assign(Object.assign({}, settingsMap), { [windowItem.Id]: settings })));
                 }, handleSelector: '.ab-Window-Modal .ab-Panel__header', size: size, position: position }), fixed: false, padding: 0, onDismiss: handleDismiss, isOpen: true, showCloseButton: true },
-            React.createElement(PanelWithImage_1.PanelWithImage, { style: { height: '100%' }, bodyProps: { padding: 0, height: '100%' }, header: windowItem.Title, glyphicon: windowItem.Icon, variant: "primary" }, componentNode)));
+            React.createElement(PanelWithImage, { style: { height: '100%' }, bodyProps: { padding: 0, height: '100%' }, header: windowItem.Title, glyphicon: windowItem.Icon, variant: "primary" }, componentNode)));
     })));
 };
-exports.WindowPopups = WindowPopups;

package/src/View/Components/Popups/WindowPopups/windowFactory.js

@@ -1,17 +1,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.windowFactory = exports.SHOW_THEME_EDITOR = exports.SHOW_EXPORT_TABLE = exports.SHOW_PIVOT_COLUMN_DETAILS = exports.WINDOW_GRID_FILTER_EDITOR = void 0;
-const GridFilterWindowPopup_1 = require("../../../GridFilter/GridFilterWindowPopup");
-const PivotDetailsPopoup_1 = require("../../../Layout/PivotDetailsPopoup");
-const ExportTablePopup_1 = require("../../../Export/ExportTablePopup");
-const ThemeEditorWindow_1 = require("../../../Theme/ThemeEditorWindow");
-exports.WINDOW_GRID_FILTER_EDITOR = 'WINDOW_GRID_FILTER_EDITOR';
-exports.SHOW_PIVOT_COLUMN_DETAILS = 'SHOW_PIVOT_COLUMN_DETAILS';
-exports.SHOW_EXPORT_TABLE = 'SHOW_EXPORT_TABLE';
-exports.SHOW_THEME_EDITOR = 'SHOW_THEME_EDITOR';
-exports.windowFactory = {
-    [exports.WINDOW_GRID_FILTER_EDITOR]: GridFilterWindowPopup_1.GridFilterWindowPopup,
-    [exports.SHOW_PIVOT_COLUMN_DETAILS]: PivotDetailsPopoup_1.PivotDetailsPopoup,
-    [exports.SHOW_EXPORT_TABLE]: ExportTablePopup_1.ExportTablePopup,
-    [exports.SHOW_THEME_EDITOR]: ThemeEditorWindow_1.ThemeEditorWindow,
+import { GridFilterWindowPopup } from '../../../GridFilter/GridFilterWindowPopup';
+import { PivotDetailsPopoup } from '../../../Layout/PivotDetailsPopoup';
+import { ExportTablePopup } from '../../../Export/ExportTablePopup';
+import { ThemeEditorWindow } from '../../../Theme/ThemeEditorWindow';
+export const WINDOW_GRID_FILTER_EDITOR = 'WINDOW_GRID_FILTER_EDITOR';
+export const SHOW_PIVOT_COLUMN_DETAILS = 'SHOW_PIVOT_COLUMN_DETAILS';
+export const SHOW_EXPORT_TABLE = 'SHOW_EXPORT_TABLE';
+export const SHOW_THEME_EDITOR = 'SHOW_THEME_EDITOR';
+export const windowFactory = {
+    [WINDOW_GRID_FILTER_EDITOR]: GridFilterWindowPopup,
+    [SHOW_PIVOT_COLUMN_DETAILS]: PivotDetailsPopoup,
+    [SHOW_EXPORT_TABLE]: ExportTablePopup,
+    [SHOW_THEME_EDITOR]: ThemeEditorWindow,
 };

package/src/View/Components/PredicateEditor/PredicateEditor.js

@@ -1,18 +1,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PredicateEditor = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const Icon_1 = require("../../../components/Icon");
-const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
-const Tag_1 = require("../../../components/Tag");
-const AdaptableInput_1 = tslib_1.__importDefault(require("../AdaptableInput"));
-const PermittedValuesSelector_1 = require("../PermittedValuesSelector");
-const AdaptableIconComponent_1 = require("../AdaptableIconComponent");
-const Select_1 = require("../../../components/Select");
+import * as React from 'react';
+import { Box, Flex } from 'rebass';
+import { isAdaptableSystemIcon } from '../../../components/Icon';
+import HelpBlock from '../../../components/HelpBlock';
+import { Tag } from '../../../components/Tag';
+import AdaptableInput from '../AdaptableInput';
+import { PermitedValuesSelector } from '../PermittedValuesSelector';
+import { AdaptableIconComponent } from '../AdaptableIconComponent';
+import { Select } from '../../../components/Select';
 const isValuesPredicateDef = (colDef) => colDef && ['Values', 'ExcludeValues'].includes(colDef.id);
-const PredicateEditor = (props) => {
+export const PredicateEditor = (props) => {
     var _a, _b;
     const baseClassName = 'ab-PredicateEditor';
     const predicateDefsOptions = React.useMemo(() => {
@@ -36,28 +32,27 @@ const PredicateEditor = (props) => {
     const currentPredicateDef = (_a = props === null || props === void 0 ? void 0 : props.predicateDefs) === null || _a === void 0 ? void 0 : _a.find((item) => { var _a; return item.id === ((_a = props.predicate) === null || _a === void 0 ? void 0 : _a.PredicateId); });
     let icon = null;
     if (currentPredicateDef) {
-        if ((0, Icon_1.isAdaptableSystemIcon)(currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.icon)) {
-            icon = React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: currentPredicateDef.icon });
+        if (isAdaptableSystemIcon(currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.icon)) {
+            icon = React.createElement(AdaptableIconComponent, { icon: currentPredicateDef.icon });
         }
         else if ((currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.icon) && 'text' in (currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.icon)) {
             icon = React.createElement("span", null, currentPredicateDef.icon.text);
         }
     }
-    return (React.createElement(rebass_1.Box, { className: baseClassName },
-        React.createElement(rebass_1.Flex, { justifyContent: "stretch", alignItems: "center" },
-            icon && React.createElement(Tag_1.Tag, { mr: 2 }, icon),
-            React.createElement(Select_1.Select, { isClearable: true, options: predicateDefsOptions, "data-name": "select-predicate", placeholder: "Select Rule", value: currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.id, onChange: (value) => {
+    return (React.createElement(Box, { className: baseClassName },
+        React.createElement(Flex, { justifyContent: "stretch", alignItems: "center" },
+            icon && React.createElement(Tag, { mr: 2 }, icon),
+            React.createElement(Select, { isClearable: true, options: predicateDefsOptions, "data-name": "select-predicate", placeholder: "Select Rule", value: currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.id, onChange: (value) => {
                     var _a;
                     const option = predicateDefsOptions.find((x) => x.value === value);
                     props.onChange(Object.assign(Object.assign({}, props.predicate), { PredicateId: option === null || option === void 0 ? void 0 : option.value, Inputs: ((_a = option === null || option === void 0 ? void 0 : option.inputs) !== null && _a !== void 0 ? _a : []).map((input) => { var _a; return (_a = input.defaultValue) !== null && _a !== void 0 ? _a : ''; }) }));
                 } })),
-        React.createElement(rebass_1.Flex, null, (_b = currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.inputs) === null || _b === void 0 ? void 0 : _b.map((predicateDefInput, index) => {
+        React.createElement(Flex, null, (_b = currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.inputs) === null || _b === void 0 ? void 0 : _b.map((predicateDefInput, index) => {
             var _a, _b;
             return (React.createElement(React.Fragment, null,
-                index > 0 && React.createElement(HelpBlock_1.default, { margin: 2 }, "AND"),
-                React.createElement(rebass_1.Flex, { key: index, flex: 1, flexDirection: "column" },
-                    React.createElement(AdaptableInput_1.default, { "data-name": `predicate-input-${index}`, marginTop: 2, type: predicateDefInput.type, autoFocus: index === 0, value: (_b = (_a = props.predicate.Inputs) === null || _a === void 0 ? void 0 : _a[index]) !== null && _b !== void 0 ? _b : '', onChange: (e) => handlePredicateInputChange(e, index) }))));
+                index > 0 && React.createElement(HelpBlock, { margin: 2 }, "AND"),
+                React.createElement(Flex, { key: index, flex: 1, flexDirection: "column" },
+                    React.createElement(AdaptableInput, { "data-name": `predicate-input-${index}`, marginTop: 2, type: predicateDefInput.type, autoFocus: index === 0, value: (_b = (_a = props.predicate.Inputs) === null || _a === void 0 ? void 0 : _a[index]) !== null && _b !== void 0 ? _b : '', onChange: (e) => handlePredicateInputChange(e, index) }))));
         })),
-        isValuesPredicateDef(currentPredicateDef) && (React.createElement(PermittedValuesSelector_1.PermitedValuesSelector, { onPredicateValuesChange: handlePredicateValuesChange, predicate: props.predicate, columnId: props.columnId }))));
+        isValuesPredicateDef(currentPredicateDef) && (React.createElement(PermitedValuesSelector, { onPredicateValuesChange: handlePredicateValuesChange, predicate: props.predicate, columnId: props.columnId }))));
 };
-exports.PredicateEditor = PredicateEditor;

package/src/View/Components/PreviewResultsPanel.js

@@ -1,13 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PreviewResultsPanel = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const AdaptablePopover_1 = require("../AdaptablePopover");
-const InfiniteTable_1 = require("../../components/InfiniteTable");
-const check_1 = tslib_1.__importDefault(require("../../components/icons/check"));
-const UIHelper_1 = tslib_1.__importDefault(require("../UIHelper"));
-const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
+import * as React from 'react';
+import { AdaptablePopover } from '../AdaptablePopover';
+import { DataSource, InfiniteTable } from '../../components/InfiniteTable';
+import CheckIcon from '../../components/icons/check';
+import UIHelper from '../UIHelper';
+import Panel from '../../components/Panel';
 const columnsMap = new Map([
     [
         'InitialValue',
@@ -43,24 +39,24 @@ const columnsMap = new Map([
 const tableDOMProps = {
     style: { flex: 1 },
 };
-class PreviewResultsPanel extends React.Component {
+export class PreviewResultsPanel extends React.Component {
     render() {
         let previewHeader = this.props.showHeader && this.props.previewInfo != null
             ? 'Preview Results: ' +
                 (this.props.selectedColumn ? this.props.selectedColumn.friendlyName : '')
             : '';
-        let successColor = UIHelper_1.default.getColorByMessageType('Success');
+        let successColor = UIHelper.getColorByMessageType('Success');
         const dataSource = this.props.previewInfo.previewResults.map((previewResult, index) => {
             return {
                 Id: index,
                 InitialValue: previewResult.initialValue,
                 ComputedValue: previewResult.computedValue,
-                ValidInfo: previewResult.validationRules.length > 0 ? (React.createElement(React.Fragment, null, this.props.previewInfo.previewValidationSummary.validationResult != 'None' && (React.createElement(AdaptablePopover_1.AdaptablePopover, { showEvent: "mouseenter", hideEvent: "mouseleave", headerText: 'Validation Error', bodyText: [this.getValidationErrorMessage(previewResult.validationRules)], MessageType: 'Error' })))) : (React.createElement(React.Fragment, null,
+                ValidInfo: previewResult.validationRules.length > 0 ? (React.createElement(React.Fragment, null, this.props.previewInfo.previewValidationSummary.validationResult != 'None' && (React.createElement(AdaptablePopover, { showEvent: "mouseenter", hideEvent: "mouseleave", headerText: 'Validation Error', bodyText: [this.getValidationErrorMessage(previewResult.validationRules)], MessageType: 'Error' })))) : (React.createElement(React.Fragment, null,
                     ' ',
-                    React.createElement(check_1.default, { style: { color: successColor, fill: 'currentColor' } }))),
+                    React.createElement(CheckIcon, { style: { color: successColor, fill: 'currentColor' } }))),
             };
         });
-        return this.props.showPanel ? (React.createElement(Panel_1.default, { header: previewHeader, style: { flex: 1 }, bodyProps: {
+        return this.props.showPanel ? (React.createElement(Panel, { header: previewHeader, style: { flex: 1 }, bodyProps: {
                 style: {
                     border: 0,
                     padding: 0,
@@ -70,8 +66,8 @@ class PreviewResultsPanel extends React.Component {
                     minHeight: '20rem',
                 },
             } },
-            React.createElement(InfiniteTable_1.DataSource, { data: dataSource, primaryKey: "Id" },
-                React.createElement(InfiniteTable_1.InfiniteTable, { sortable: false, domProps: tableDOMProps, columns: columnsMap })))) : null;
+            React.createElement(DataSource, { data: dataSource, primaryKey: "Id" },
+                React.createElement(InfiniteTable, { sortable: false, domProps: tableDOMProps, columns: columnsMap })))) : null;
     }
     getValidationErrorMessage(alertDefinitions) {
         let validationService = this.props.api.internalApi.getValidationService();
@@ -85,4 +81,3 @@ class PreviewResultsPanel extends React.Component {
         return returnString.join('\n');
     }
 }
-exports.PreviewResultsPanel = PreviewResultsPanel;

package/src/View/Components/RangesComponent.js

@@ -1,20 +1,16 @@
-"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 {
+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 {
     constructor(props) {
         super(props);
         this.state = {
@@ -48,67 +44,67 @@ 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(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 ||
+            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 ||
                                     range.Min === 'Col-Min' ||
                                     (index === 0 && !isRangeValueTypeNumber), value: range.Min, onChange: (value) => {
                                     this.changeRangeMin(index, value);
                                 }, mr: 2 })),
-                        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 ||
+                        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 ||
                                     range.Max === 'Col-Max' ||
                                     (index === list.length - 1 && !isRangeValueTypeNumber), onChange: (value) => {
                                     this.changeRangeMax(index, value);
                                 }, mr: 2 })),
-                        React.createElement(rebass_1.Flex, { alignItems: "center", height: "100%" },
-                            React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: range.Color, onChange: (color) => {
+                        React.createElement(Flex, { alignItems: "center", height: "100%" },
+                            React.createElement(ColorPicker, { api: this.props.api, value: range.Color, onChange: (color) => {
                                     this.changeRangeColor(index, color);
                                 }, mr: 2, height: 33 })),
-                        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) })))),
+                        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) })))),
                     React.createElement("div", null,
-                        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 },
+                        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 },
                             "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_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) => {
+                        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) => {
                                         this.changeColumnComparisonMinValue(value);
-                                    } }), 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) => {
+                                    } }), or: "OR", second: React.createElement(Box, { maxWidth: '15rem' },
+                                    React.createElement(ColumnSelector, { menuPosition: "fixed", disabled: this.props.disabled, value: comparisonMinValueColumnId, type: "Number", onChange: (columnId) => {
                                             this.onMinColumnSelectedChanged(columnId);
                                         } })) }),
                             ' ',
-                            React.createElement(FormLayout_1.FormRow, { label: "Max Value:", first: React.createElement(NumberInput_1.NumberInput, { disabled: this.props.disabled, type: "number", value: comparisonMaxValueNumber, onChange: (value) => {
+                            React.createElement(FormRow, { label: "Max Value:", first: React.createElement(NumberInput, { disabled: this.props.disabled, type: "number", value: comparisonMaxValueNumber, onChange: (value) => {
                                         this.changeColumnComparisonMaxValue(value);
-                                    } }), 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) => {
+                                    } }), 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) => {
                                         this.changeColumnComparisonColor(color);
                                     } }) }))))))));
     }
     onRangesTypeChanged(checked) {
         if (checked) {
             let columnComparison = {
-                Color: (0, UIHelper_1.getHexForName)(UIHelper_1.DARK_GREEN),
+                Color: getHexForName(DARK_GREEN),
                 MinValue: undefined,
                 MaxValue: undefined,
             };
@@ -132,7 +128,7 @@ class RangesComponent extends React.Component {
         const { ranges } = this.props;
         let newMin = Number(value);
         if (this.props.rangeValueType === 'Percentage') {
-            newMin = (0, clamp_1.default)(newMin, 0, 100);
+            newMin = clamp(newMin, 0, 100);
         }
         ranges[index].Min = newMin;
         if (ranges[index - 1]) {
@@ -144,7 +140,7 @@ class RangesComponent extends React.Component {
         const { ranges } = this.props;
         let newMax = Number(value);
         if (this.props.rangeValueType === 'Percentage') {
-            newMax = (0, clamp_1.default)(newMax, 0, 100);
+            newMax = clamp(newMax, 0, 100);
         }
         ranges[index].Max = newMax;
         if (ranges[index + 1]) {
@@ -205,7 +201,7 @@ class RangesComponent extends React.Component {
         const newRange = {
             Min,
             Max: lastRange.Max,
-            Color: (0, UIHelper_1.getHexForName)(UIHelper_1.GRAY),
+            Color: getHexForName(GRAY),
         };
         const newRanges = [...this.props.ranges.slice(0, -1), previousRange, newRange];
         this.props.updateRanges(newRanges);
@@ -236,4 +232,3 @@ class RangesComponent extends React.Component {
         this.props.updateColumnComparison(columnComparison);
     }
 }
-exports.RangesComponent = RangesComponent;

package/src/View/Components/ScopeComponent.js

@@ -1,15 +1,11 @@
-"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 {
+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 {
     constructor(props) {
         super(props);
         this.state = {
@@ -27,36 +23,36 @@ 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_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(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(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(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(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: "Column", checked: this.state.ScopeChoice == 'Column', onChange: (checked, e) => this.onScopeSelectChanged(e) }, "Selected Column(s)"),
                         ' ',
-                        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 &&
+                        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 &&
                                     '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_1.CheckBox, { "data-name": "scope", "data-value": "number", checked: this.state.componentScope &&
+                            this.state.availableDataTypes.includes('Number') && (React.createElement(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_1.CheckBox, { "data-name": "scope", "data-value": "string", checked: this.state.componentScope &&
+                            this.state.availableDataTypes.includes('String') && (React.createElement(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_1.CheckBox, { "data-name": "scope", "data-value": "boolean", checked: this.state.componentScope &&
+                            this.state.availableDataTypes.includes('Boolean') && (React.createElement(CheckBox, { "data-name": "scope", "data-value": "boolean", checked: this.state.componentScope &&
                                     'DataTypes' in this.state.componentScope &&
                                     this.props.api.scopeApi
                                         .getDataTypesInScope(this.state.componentScope)
@@ -135,4 +131,3 @@ class ScopeComponent extends React.Component {
         this.props.updateScope(newScope);
     }
 }
-exports.ScopeComponent = ScopeComponent;

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

@@ -1,13 +1,9 @@
-"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) {
+import * as React from 'react';
+import { Select } from '../../../components/Select';
+import { useAdaptable } from '../../AdaptableContext';
+export const ColumnSelector = function (props) {
     var _a;
-    const { api } = (0, AdaptableContext_1.useAdaptable)();
+    const { api } = useAdaptable();
     const columns = React.useMemo(() => {
         return api.columnApi.getColumnsOfType(props.type);
     }, []);
@@ -26,8 +22,7 @@ const ColumnSelector = function (props) {
         }
         return true;
     });
-    return (React.createElement(Select_1.Select, { "data-name": "column-selector", disabled: props.disabled, isMulti: props.isMulti, menuPosition: props.menuPosition, value: props.value, placeholder: (_a = props.placeholder) !== null && _a !== void 0 ? _a : 'Select Column', onChange: (colId) => {
+    return (React.createElement(Select, { "data-name": "column-selector", disabled: props.disabled, isMulti: props.isMulti, menuPosition: props.menuPosition, value: props.value, placeholder: (_a = props.placeholder) !== null && _a !== void 0 ? _a : 'Select Column', onChange: (colId) => {
             props.onChange(colId);
         }, options: options }));
 };
-exports.ColumnSelector = ColumnSelector;

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

@@ -1,19 +1,15 @@
-"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 {
+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 {
     render() {
         var _a;
-        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;
+        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;
         let sortedColumnOptions = sortedColumns.map((column) => {
             return {
                 label: column.friendlyName,
@@ -34,9 +30,9 @@ 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_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)))));
+            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)))));
     }
     onClearButton() {
         this.props.onColumnChange([]);
@@ -48,4 +44,3 @@ class ColumnSelector extends React.Component {
         this.props.onColumnChange(selected);
     }
 }
-exports.ColumnSelector = ColumnSelector;