@adaptabletools/adaptable 17.0.6 → 18.0.0-canary.0

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

@@ -1,21 +1,17 @@
-"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) => {
+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) => {
     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(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) => {
+    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) => {
                 if (!value) {
                     props.onColumnValueChange(null);
                 }
@@ -23,24 +19,23 @@ const ColumnValueSelector = (props) => {
                     props.onColumnValueChange(value);
                 }
             } })));
-    const input = (React.createElement(AdaptableInput_1.default, { "data-name": "bulkupdate-value-input", type: props.selectedColumn
-            ? UIHelper_1.default.getDescriptionForDataType(props.selectedColumn.dataType)
+    const input = (React.createElement(AdaptableInput, { "data-name": "bulkupdate-value-input", type: props.selectedColumn
+            ? UIHelper.getDescriptionForDataType(props.selectedColumn.dataType)
             : 'text', placeholder: props.selectedColumn
-            ? UIHelper_1.default.getPlaceHolderforDataType(props.selectedColumn.dataType)
+            ? UIHelper.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_1.Select, { options: [
+        valueTypeSelector = (React.createElement(Select, { options: [
                 { label: 'New', value: 'new' },
                 { label: 'Existing', value: 'existing' },
             ], value: valueType, onChange: (value) => {
                 setValueType(value);
             } }));
     }
-    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,
+    return (React.createElement(FieldWrap, { 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.js

@@ -1,13 +1,9 @@
-"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)();
+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();
     const [isLoading, setIsLoading] = React.useState(true);
     const [options, setOptions] = React.useState([]);
     const [filter, setFilter] = React.useState('');
@@ -21,7 +17,7 @@ const PermittedValuesSelector = function (props) {
         }
         setIsLoading(true);
         (async () => {
-            const { values: distinctColumnValues } = await (0, runIfNotResolvedIn_1.runIfNotResolvedIn)(adaptable.api.gridApi.internalApi.getDistinctFilterDisplayValuesForColumn(props.columnId, filter, adaptable.api.optionsApi.getColumnFilterOptions().valuesFilterOptions
+            const { values: distinctColumnValues } = await runIfNotResolvedIn(adaptable.api.gridApi.internalApi.getDistinctFilterDisplayValuesForColumn(props.columnId, filter, adaptable.api.optionsApi.getColumnFilterOptions().valuesFilterOptions
                 .showDistinctFilteredValuesOnly), () => {
                 setIsLoading(true);
             });
@@ -68,6 +64,5 @@ const PermittedValuesSelector = function (props) {
             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 }));
+    return (React.createElement(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,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/View/Components/StyleComponent.js

@@ -1,25 +1,21 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyleComponent = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const CheckBox_1 = require("../../components/CheckBox");
-const ColorPicker_1 = require("../../components/ColorPicker");
-const FormLayout_1 = tslib_1.__importStar(require("../../components/FormLayout"));
-const HelpBlock_1 = tslib_1.__importDefault(require("../../components/HelpBlock"));
-const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
-const Radio_1 = tslib_1.__importDefault(require("../../components/Radio"));
-const Select_1 = require("../../components/Select");
-const StylePreview_1 = require("../../components/StylePreview");
-const Toggle_1 = require("../../components/Toggle/Toggle");
-const ToggleGroup_1 = require("../../components/Toggle/ToggleGroup");
-const Enums_1 = require("../../PredefinedConfig/Common/Enums");
-const ArrayExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/ArrayExtensions"));
-const EnumExtensions_1 = require("../../Utilities/Extensions/EnumExtensions");
-const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
-const AdaptableInput_1 = tslib_1.__importDefault(require("./AdaptableInput"));
-class StyleComponent extends React.Component {
+import * as React from 'react';
+import { Box, Flex, Text } from 'rebass';
+import { CheckBox } from '../../components/CheckBox';
+import { ColorPicker } from '../../components/ColorPicker';
+import FormLayout, { FormRow } from '../../components/FormLayout';
+import HelpBlock from '../../components/HelpBlock';
+import Panel from '../../components/Panel';
+import Radio from '../../components/Radio';
+import { Select } from '../../components/Select';
+import { StylePreview } from '../../components/StylePreview';
+import { Toggle } from '../../components/Toggle/Toggle';
+import { ToggleGroup } from '../../components/Toggle/ToggleGroup';
+import { FontSize, FontStyle, FontWeight } from '../../PredefinedConfig/Common/Enums';
+import ArrayExtensions from '../../Utilities/Extensions/ArrayExtensions';
+import { EnumExtensions } from '../../Utilities/Extensions/EnumExtensions';
+import { StringExtensions } from '../../Utilities/Extensions/StringExtensions';
+import AdaptableInput from './AdaptableInput';
+export class StyleComponent extends React.Component {
     constructor(props) {
         super(props);
         this.onShowClassNameChanged = (checked) => {
@@ -38,7 +34,7 @@ class StyleComponent extends React.Component {
         };
         this.state = {
             componentStyle: this.props.Style,
-            ShowClassName: StringExtensions_1.StringExtensions.IsNotNullOrEmpty(this.props.Style.ClassName),
+            ShowClassName: StringExtensions.IsNotNullOrEmpty(this.props.Style.ClassName),
         };
     }
     static getDerivedStateFromProps(nextProps, prevState) {
@@ -48,7 +44,7 @@ class StyleComponent extends React.Component {
     }
     render() {
         var _a, _b;
-        const Cmp = this.props.headless ? rebass_1.Box : Panel_1.default;
+        const Cmp = this.props.headless ? Box : Panel;
         const cmpProps = this.props.headless
             ? {}
             : {
@@ -60,73 +56,73 @@ class StyleComponent extends React.Component {
         const colourSpellingVariant = this.props.api.internalApi.getCorrectEnglishVariant('Colour');
         const coloursSpellingVariant = this.props.api.internalApi.getCorrectEnglishVariant('colours');
         let fontSizes = ['Default'];
-        fontSizes.push(...EnumExtensions_1.EnumExtensions.getNames(Enums_1.FontSize));
+        fontSizes.push(...EnumExtensions.getNames(FontSize));
         return (React.createElement(Cmp, Object.assign({}, cmpProps, { className: "ab-StyleComponent" }),
-            ArrayExtensions_1.default.IsNotNullOrEmpty(styleClassNames) && (React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 2 },
-                React.createElement(Radio_1.default, { "data-name": "show-class-name", value: "classname", checked: this.state.ShowClassName, onChange: () => this.onShowClassNameChanged(true) }, "Use Style Class Name"),
+            ArrayExtensions.IsNotNullOrEmpty(styleClassNames) && (React.createElement(Flex, { flexDirection: "row", padding: 2 },
+                React.createElement(Radio, { "data-name": "show-class-name", value: "classname", checked: this.state.ShowClassName, onChange: () => this.onShowClassNameChanged(true) }, "Use Style Class Name"),
                 ' ',
-                React.createElement(Radio_1.default, { "data-name": "create-style", marginLeft: 3, value: "expression", checked: !this.state.ShowClassName, onChange: () => this.onShowClassNameChanged(false) }, "Create Style"),
+                React.createElement(Radio, { "data-name": "create-style", marginLeft: 3, value: "expression", checked: !this.state.ShowClassName, onChange: () => this.onShowClassNameChanged(false) }, "Create Style"),
                 ' ')),
             this.state.ShowClassName ? (React.createElement("div", null,
-                React.createElement(HelpBlock_1.default, { fontSize: 2 }, 'Select a CSS Class Name'),
-                React.createElement(rebass_1.Box, { style: { maxWidth: '15rem' }, m: 3 },
-                    React.createElement(Select_1.Select, { options: ArrayExtensions_1.default.IsNullOrEmpty(styleClassNames)
+                React.createElement(HelpBlock, { fontSize: 2 }, 'Select a CSS Class Name'),
+                React.createElement(Box, { style: { maxWidth: '15rem' }, m: 3 },
+                    React.createElement(Select, { options: ArrayExtensions.IsNullOrEmpty(styleClassNames)
                             ? []
                             : styleClassNames.map((item) => ({
                                 label: item,
                                 value: item,
                             })), value: this.state.componentStyle.ClassName, onChange: (value) => this.onStyleClassNameChanged(value) })),
-                React.createElement(rebass_1.Text, { color: 'var(--ab-color-warn)', style: { flex: 2 }, margin: 2 }, 'Please ensure that the styles listed are in the current stylesheet'))) : (React.createElement(rebass_1.Flex, { flexDirection: "column" },
-                React.createElement(rebass_1.Flex, { flex: 1 },
+                React.createElement(Text, { color: 'var(--ab-color-warn)', style: { flex: 2 }, margin: 2 }, 'Please ensure that the styles listed are in the current stylesheet'))) : (React.createElement(Flex, { flexDirection: "column" },
+                React.createElement(Flex, { flex: 1 },
                     React.createElement("div", null,
-                        React.createElement(HelpBlock_1.default, { fontSize: 2, marginTop: 2, marginBottom: 2 },
+                        React.createElement(HelpBlock, { fontSize: 2, marginTop: 2, marginBottom: 2 },
                             "Set ",
                             coloursSpellingVariant,
                             " by ticking a checkbox and selecting from the dropdown; leave unchecked to use cell's existing ",
                             coloursSpellingVariant),
-                        React.createElement(FormLayout_1.default, { columns: [1, 2] },
-                            React.createElement(FormLayout_1.FormRow, null,
-                                React.createElement(CheckBox_1.CheckBox, { "data-name": "set-background-color", value: "existing", margin: 1, checked: !!this.state.componentStyle.BackColor, onChange: (checked) => this.onUseBackColorCheckChange(checked) },
+                        React.createElement(FormLayout, { columns: [1, 2] },
+                            React.createElement(FormRow, null,
+                                React.createElement(CheckBox, { "data-name": "set-background-color", value: "existing", margin: 1, checked: !!this.state.componentStyle.BackColor, onChange: (checked) => this.onUseBackColorCheckChange(checked) },
                                     "Back ",
                                     colourSpellingVariant),
-                                this.state.componentStyle.BackColor != null ? (React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: this.state.componentStyle.BackColor, onChange: (x) => this.onBackColorSelectChange(x) })) : (React.createElement("span", null))),
-                            React.createElement(FormLayout_1.FormRow, null,
-                                React.createElement(CheckBox_1.CheckBox, { "data-name": "set-foreground-color", margin: 1, value: "existing", checked: this.state.componentStyle.ForeColor ? true : false, onChange: (checked) => this.onUseForeColorCheckChange(checked) },
+                                this.state.componentStyle.BackColor != null ? (React.createElement(ColorPicker, { api: this.props.api, value: this.state.componentStyle.BackColor, onChange: (x) => this.onBackColorSelectChange(x) })) : (React.createElement("span", null))),
+                            React.createElement(FormRow, null,
+                                React.createElement(CheckBox, { "data-name": "set-foreground-color", margin: 1, value: "existing", checked: this.state.componentStyle.ForeColor ? true : false, onChange: (checked) => this.onUseForeColorCheckChange(checked) },
                                     "Fore ",
                                     colourSpellingVariant),
-                                this.state.componentStyle.ForeColor != null ? (React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: this.state.componentStyle.ForeColor, onChange: (x) => this.onForeColorSelectChange(x) })) : (React.createElement("span", null))),
-                            React.createElement(FormLayout_1.FormRow, null,
-                                React.createElement(CheckBox_1.CheckBox, { "data-name": "set-border-color", margin: 1, value: "existing", checked: this.state.componentStyle.BorderColor ? true : false, onChange: (checked) => this.onUseBorderColorCheckChange(checked) },
+                                this.state.componentStyle.ForeColor != null ? (React.createElement(ColorPicker, { api: this.props.api, value: this.state.componentStyle.ForeColor, onChange: (x) => this.onForeColorSelectChange(x) })) : (React.createElement("span", null))),
+                            React.createElement(FormRow, null,
+                                React.createElement(CheckBox, { "data-name": "set-border-color", margin: 1, value: "existing", checked: this.state.componentStyle.BorderColor ? true : false, onChange: (checked) => this.onUseBorderColorCheckChange(checked) },
                                     "Border ",
                                     colourSpellingVariant),
-                                this.state.componentStyle.BorderColor != null ? (React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: this.state.componentStyle.BorderColor, onChange: (x) => this.onBorderColorSelectChange(x) })) : (React.createElement("span", null)))),
-                        React.createElement(HelpBlock_1.default, { fontSize: 2, marginTop: 2, marginBottom: 2 }, "Set the font properties of the Style"),
-                        React.createElement(FormLayout_1.default, null,
-                            React.createElement(FormLayout_1.FormRow, { label: "Font Style" },
-                                React.createElement(ToggleGroup_1.ToggleGroup, null,
-                                    React.createElement(Toggle_1.Toggle, { pressed: this.state.componentStyle.FontStyle == Enums_1.FontStyle.Italic, onPressedChange: (checked) => this.onFontStyleChange(checked), icon: "italic" }),
-                                    React.createElement(Toggle_1.Toggle, { pressed: this.state.componentStyle.FontWeight == Enums_1.FontWeight.Bold, onPressedChange: (checked) => this.onFontWeightChange(checked), icon: "bold" }))),
-                            React.createElement(FormLayout_1.FormRow, { label: "Text Decoration" },
-                                React.createElement(ToggleGroup_1.ToggleGroup, null,
-                                    React.createElement(Toggle_1.Toggle, { icon: "underline", pressed: this.state.componentStyle.TextDecoration === 'Underline', onPressedChange: (checked) => this.onTextDecorationChange(checked ? 'Underline' : 'None') }),
-                                    React.createElement(Toggle_1.Toggle, { icon: "strikethrough", pressed: this.state.componentStyle.TextDecoration === 'LineThrough', onPressedChange: (checked) => this.onTextDecorationChange(checked ? 'LineThrough' : 'None') }),
-                                    React.createElement(Toggle_1.Toggle, { icon: "overline", pressed: this.state.componentStyle.TextDecoration === 'Overline', onPressedChange: (checked) => this.onTextDecorationChange(checked ? 'Overline' : 'None') }))),
-                            React.createElement(FormLayout_1.FormRow, { label: "Font Size" }, !this.props.showFontSizeAs || this.props.showFontSizeAs === 'dropdown' ? (React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center" },
-                                React.createElement(Select_1.Select, { placeholder: "Default", options: [
+                                this.state.componentStyle.BorderColor != null ? (React.createElement(ColorPicker, { api: this.props.api, value: this.state.componentStyle.BorderColor, onChange: (x) => this.onBorderColorSelectChange(x) })) : (React.createElement("span", null)))),
+                        React.createElement(HelpBlock, { fontSize: 2, marginTop: 2, marginBottom: 2 }, "Set the font properties of the Style"),
+                        React.createElement(FormLayout, null,
+                            React.createElement(FormRow, { label: "Font Style" },
+                                React.createElement(ToggleGroup, null,
+                                    React.createElement(Toggle, { pressed: this.state.componentStyle.FontStyle == FontStyle.Italic, onPressedChange: (checked) => this.onFontStyleChange(checked), icon: "italic" }),
+                                    React.createElement(Toggle, { pressed: this.state.componentStyle.FontWeight == FontWeight.Bold, onPressedChange: (checked) => this.onFontWeightChange(checked), icon: "bold" }))),
+                            React.createElement(FormRow, { label: "Text Decoration" },
+                                React.createElement(ToggleGroup, null,
+                                    React.createElement(Toggle, { icon: "underline", pressed: this.state.componentStyle.TextDecoration === 'Underline', onPressedChange: (checked) => this.onTextDecorationChange(checked ? 'Underline' : 'None') }),
+                                    React.createElement(Toggle, { icon: "strikethrough", pressed: this.state.componentStyle.TextDecoration === 'LineThrough', onPressedChange: (checked) => this.onTextDecorationChange(checked ? 'LineThrough' : 'None') }),
+                                    React.createElement(Toggle, { icon: "overline", pressed: this.state.componentStyle.TextDecoration === 'Overline', onPressedChange: (checked) => this.onTextDecorationChange(checked ? 'Overline' : 'None') }))),
+                            React.createElement(FormRow, { label: "Font Size" }, !this.props.showFontSizeAs || this.props.showFontSizeAs === 'dropdown' ? (React.createElement(Flex, { flexDirection: "row", alignItems: "center" },
+                                React.createElement(Select, { placeholder: "Default", options: [
                                         {
                                             label: 'Default',
                                             value: '',
                                         },
-                                        ...EnumExtensions_1.EnumExtensions.getNames(Enums_1.FontSize).map((enumName) => ({
+                                        ...EnumExtensions.getNames(FontSize).map((enumName) => ({
                                             label: enumName,
                                             value: enumName,
                                         })),
-                                    ], value: (_b = (_a = this.state.componentStyle.FontSize) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : '', onChange: (value) => this.onFontSizeChange(value) }))) : (React.createElement(rebass_1.Box, null, fontSizes.map((enumName) => {
-                                return (React.createElement(Radio_1.default, { onClick: () => this.onFontSizeChange(enumName), checked: (enumName == 'Default' && !this.state.componentStyle.FontSize) ||
+                                    ], value: (_b = (_a = this.state.componentStyle.FontSize) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : '', onChange: (value) => this.onFontSizeChange(value) }))) : (React.createElement(Box, null, fontSizes.map((enumName) => {
+                                return (React.createElement(Radio, { onClick: () => this.onFontSizeChange(enumName), checked: (enumName == 'Default' && !this.state.componentStyle.FontSize) ||
                                         this.state.componentStyle.FontSize === enumName, mr: 3, key: enumName }, enumName));
                             })))),
-                            React.createElement(FormLayout_1.FormRow, { label: "Border Radius" },
-                                React.createElement(AdaptableInput_1.default, { width: "100px", type: "number", min: "0", value: this.state.componentStyle.BorderRadius, onChange: (event) => {
+                            React.createElement(FormRow, { label: "Border Radius" },
+                                React.createElement(AdaptableInput, { width: "100px", type: "number", min: "0", value: this.state.componentStyle.BorderRadius, onChange: (event) => {
                                         const number = Number(event.target.value);
                                         if (isNaN(number)) {
                                             this.onBorderRadiusChange(0);
@@ -135,9 +131,9 @@ class StyleComponent extends React.Component {
                                             this.onBorderRadiusChange(number);
                                         }
                                     } }))))))),
-            !this.props.hidePreview && (React.createElement(rebass_1.Box, null,
-                React.createElement(HelpBlock_1.default, { fontSize: 2, marginTop: 2, marginBottom: 2 }, "Preview"),
-                React.createElement(StylePreview_1.StylePreview, { styleObject: this.state.componentStyle })))));
+            !this.props.hidePreview && (React.createElement(Box, null,
+                React.createElement(HelpBlock, { fontSize: 2, marginTop: 2, marginBottom: 2 }, "Preview"),
+                React.createElement(StylePreview, { styleObject: this.state.componentStyle })))));
     }
     onStyleClassNameChanged(value) {
         this.state.componentStyle.ClassName = value == 'select' ? '' : value;
@@ -172,7 +168,7 @@ class StyleComponent extends React.Component {
     }
     onUseFontSizeCheckChange(checked) {
         if (checked) {
-            this.state.componentStyle.FontSize = Enums_1.FontSize.Medium;
+            this.state.componentStyle.FontSize = FontSize.Medium;
         }
         else {
             delete this.state.componentStyle.FontSize;
@@ -193,7 +189,7 @@ class StyleComponent extends React.Component {
     }
     onFontWeightChange(checked) {
         if (checked) {
-            this.state.componentStyle.FontWeight = Enums_1.FontWeight.Bold;
+            this.state.componentStyle.FontWeight = FontWeight.Bold;
         }
         else {
             delete this.state.componentStyle.FontWeight;
@@ -202,7 +198,7 @@ class StyleComponent extends React.Component {
     }
     onFontStyleChange(checked) {
         if (checked) {
-            this.state.componentStyle.FontStyle = Enums_1.FontStyle.Italic;
+            this.state.componentStyle.FontStyle = FontStyle.Italic;
         }
         else {
             delete this.state.componentStyle.FontStyle;
@@ -231,4 +227,3 @@ class StyleComponent extends React.Component {
         this.props.UpdateStyle(this.state.componentStyle);
     }
 }
-exports.StyleComponent = StyleComponent;

package/src/View/Components/StyleVisualItem.js

@@ -1,18 +1,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyleVisualItem = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+import * as React from 'react';
 /// <reference path="../../typings/.d.ts" />
-const EnumExtensions_1 = require("../../Utilities/Extensions/EnumExtensions");
-const Enums_1 = require("../../PredefinedConfig/Common/Enums");
-const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/StringExtensions"));
-class StyleVisualItem extends React.Component {
+import { EnumExtensions } from '../../Utilities/Extensions/EnumExtensions';
+import { FontWeight, FontStyle } from '../../PredefinedConfig/Common/Enums';
+import StringExtensions from '../../Utilities/Extensions/StringExtensions';
+export class StyleVisualItem extends React.Component {
     render() {
         if (!this.props.Style) {
             return null;
         }
-        let styleText = StringExtensions_1.default.IsNotNullOrEmpty(this.props.Text)
+        let styleText = StringExtensions.IsNotNullOrEmpty(this.props.Text)
             ? this.props.Text
             : 'Style';
         let styleVisualisation;
@@ -23,9 +19,9 @@ class StyleVisualItem extends React.Component {
             let backColorForStyle = this.props.Style.BackColor != undefined ? this.props.Style.BackColor : null;
             let foreColorForStyle = this.props.Style.ForeColor != undefined ? this.props.Style.ForeColor : 'black';
             let borderColorForStyle = this.props.Style.BorderColor != undefined ? this.props.Style.BorderColor : null;
-            let fontWeightForStyle = this.props.Style.FontWeight == Enums_1.FontWeight.Bold ? 'bold' : 'normal';
-            let fontStyleForStyle = this.props.Style.FontStyle == Enums_1.FontStyle.Italic ? 'italic' : 'normal';
-            let fontSizeForStyle = EnumExtensions_1.EnumExtensions.getCssFontSizeFromFontSizeEnum(this.props.Style.FontSize);
+            let fontWeightForStyle = this.props.Style.FontWeight == FontWeight.Bold ? 'bold' : 'normal';
+            let fontStyleForStyle = this.props.Style.FontStyle == FontStyle.Italic ? 'italic' : 'normal';
+            let fontSizeForStyle = EnumExtensions.getCssFontSizeFromFontSizeEnum(this.props.Style.FontSize);
             styleVisualisation = (React.createElement("div", { className: this.props.Style.BackColor != undefined ? '' : 'ab_white_grey_stripes', style: {
                     textAlign: 'center',
                     margin: '2px',
@@ -42,4 +38,3 @@ class StyleVisualItem extends React.Component {
         return styleVisualisation;
     }
 }
-exports.StyleVisualItem = StyleVisualItem;

package/src/View/Components/TagValueSelector/index.js

@@ -1,25 +1,19 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TagValueOptionsTags = exports.TagValueSelector = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const ValueSelector_1 = require("../ValueSelector");
-const AdaptableContext_1 = require("../../AdaptableContext");
-const TagValueSelector = (props) => {
-    const { api } = (0, AdaptableContext_1.useAdaptable)();
+import * as React from 'react';
+import { ValueOptionsTags, ValueSelector } from '../ValueSelector';
+import { useAdaptable } from '../../AdaptableContext';
+export const TagValueSelector = (props) => {
+    const { api } = useAdaptable();
     const getDefaultTags = () => {
         var _a;
         return (_a = api.internalApi.getAvailableTags()) !== null && _a !== void 0 ? _a : [];
     };
     const { availableTags = getDefaultTags(), selectedTags = [], onChange, singleSelect } = props;
-    return (React.createElement(ValueSelector_1.ValueSelector, { options: availableTags, value: selectedTags.map((tag) => api.internalApi.getLabelForTag(tag)), singleSelect: singleSelect, allowReorder: false, onChange: (selectedTagsIds, selectedTagsMap) => {
+    return (React.createElement(ValueSelector, { options: availableTags, value: selectedTags.map((tag) => api.internalApi.getLabelForTag(tag)), singleSelect: singleSelect, allowReorder: false, onChange: (selectedTagsIds, selectedTagsMap) => {
             onChange(selectedTagsIds.map((id) => selectedTagsMap.get(id)));
         }, selectionBoxPosition: 'top', toIdentifier: (tag) => api.internalApi.getLabelForTag(tag), toLabel: (tag) => api.internalApi.getLabelForTag(tag), noSelectionLabel: singleSelect ? 'Select a tag' : 'You have not selected any tags.', xSelectedLabel: singleSelect ? () => 'Selected tag:' : () => 'Selected tags:' }));
 };
-exports.TagValueSelector = TagValueSelector;
-const TagValueOptionsTags = (props) => {
+export const TagValueOptionsTags = (props) => {
     const { tags = [] } = props;
-    const { api } = (0, AdaptableContext_1.useAdaptable)();
-    return (React.createElement(ValueSelector_1.ValueOptionsTags, { options: tags, value: tags.map((tag) => api.internalApi.getValueForTag(tag)), toIdentifier: (tag) => api.internalApi.getValueForTag(tag), toLabel: (tag) => api.internalApi.getLabelForTag(tag), allowWrap: true, readOnly: true }));
+    const { api } = useAdaptable();
+    return (React.createElement(ValueOptionsTags, { options: tags, value: tags.map((tag) => api.internalApi.getValueForTag(tag)), toIdentifier: (tag) => api.internalApi.getValueForTag(tag), toLabel: (tag) => api.internalApi.getLabelForTag(tag), allowWrap: true, readOnly: true }));
 };
-exports.TagValueOptionsTags = TagValueOptionsTags;