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

package/src/View/Alert/Wizard/AlertButtonsEditor.js

@@ -1,15 +1,19 @@
-import { Flex, Box, Text } from 'rebass';
-import * as React from 'react';
-import { sentenceCase } from 'sentence-case';
-import SimpleButton from '../../../components/SimpleButton';
-import Input from '../../../components/Input';
-import DropdownButton from '../../../components/DropdownButton';
-import FormLayout, { FormRow } from '../../../components/FormLayout';
-import { CheckBox } from '../../../components/CheckBox';
-import { cloneObject } from '../../../Utilities/Helpers/Helper';
-import StringExtensions from '../../../Utilities/Extensions/StringExtensions';
-import { AdaptableIconSelector } from '../../Components/AdaptableIconSelector';
-export const AlertButtonsEditor = (props) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertButtonsEditor = void 0;
+const tslib_1 = require("tslib");
+const rebass_1 = require("rebass");
+const React = tslib_1.__importStar(require("react"));
+const sentence_case_1 = require("sentence-case");
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
+const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
+const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
+const CheckBox_1 = require("../../../components/CheckBox");
+const Helper_1 = require("../../../Utilities/Helpers/Helper");
+const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/StringExtensions"));
+const AdaptableIconSelector_1 = require("../../Components/AdaptableIconSelector");
+const Select_1 = require("../../../components/Select");
+const AlertButtonsEditor = (props) => {
     const { api, adaptableAlert } = props;
     const onChange = (newButtons) => {
         props.onChange(newButtons);
@@ -29,7 +33,7 @@ export const AlertButtonsEditor = (props) => {
     const hasSuspend = true;
     // only data change
     const hasUndo = props.alertType === 'DataChange';
-    const AlertButtons = cloneObject(props.AlertButtons || []) || [];
+    const AlertButtons = (0, Helper_1.cloneObject)(props.AlertButtons || []) || [];
     const buttonActions = [];
     if (hasHighlightRow) {
         buttonActions.push('highlight-row');
@@ -50,9 +54,9 @@ export const AlertButtonsEditor = (props) => {
         buttonActions.push('suspend');
     }
     return (React.createElement(React.Fragment, null,
-        React.createElement(Flex, { flexDirection: "row", alignItems: "center", justifyContent: "space-between" },
-            React.createElement(Text, { fontSize: 2, mt: 3, mb: 2 }, "Add buttons to Alert, and Actions to perform when button is clicked"),
-            React.createElement(SimpleButton, { icon: "plus", onClick: () => {
+        React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center", justifyContent: "space-between" },
+            React.createElement(rebass_1.Text, { fontSize: 2, mt: 3, mb: 2 }, "Add buttons to Alert Notification, and set Actions to perform when button is clicked"),
+            React.createElement(SimpleButton_1.default, { icon: "plus", onClick: () => {
                     onChange([
                         ...(AlertButtons || []),
                         {
@@ -64,7 +68,7 @@ export const AlertButtonsEditor = (props) => {
                     ]);
                 } }, "Add")),
         AlertButtons.map((button, index) => {
-            var _a, _b, _c;
+            var _a, _b;
             let buttonStyle = button.ButtonStyle;
             let buttonLabel = button.Label;
             let btnActions = [];
@@ -119,7 +123,7 @@ export const AlertButtonsEditor = (props) => {
             };
             let iconSelector = null;
             if (!button.icon || (button.icon && 'name' in button.icon)) {
-                iconSelector = (React.createElement(AdaptableIconSelector, { value: button.icon && 'name' in button.icon ? (_a = button === null || button === void 0 ? void 0 : button.icon) === null || _a === void 0 ? void 0 : _a.name : '', onChange: (iconName) => {
+                iconSelector = (React.createElement(AdaptableIconSelector_1.AdaptableIconSelector, { value: button.icon && 'name' in button.icon ? (_a = button === null || button === void 0 ? void 0 : button.icon) === null || _a === void 0 ? void 0 : _a.name : '', onChange: (iconName) => {
                         onChange(AlertButtons.map((btn) => {
                             if (btn === button) {
                                 return Object.assign(Object.assign({}, btn), { icon: {
@@ -130,13 +134,13 @@ export const AlertButtonsEditor = (props) => {
                         }));
                     } }));
             }
-            return (React.createElement(Box, { key: index, marginLeft: 3, style: {
+            return (React.createElement(rebass_1.Box, { key: index, marginLeft: 3, style: {
                     borderTop: index ? '1px dashed var(--ab-color-inputborder)' : '',
                 } },
-                React.createElement(FormLayout, { marginBottom: 2, paddingTop: 2 },
-                    React.createElement(FormRow, { label: React.createElement(Text, { fontSize: 2, style: { whiteSpace: 'nowrap' } }, "Button Text") },
-                        React.createElement(Flex, { flexDirection: "row" },
-                            React.createElement(Input, { value: buttonLabel, style: { width: 80 }, onChange: (e) => {
+                React.createElement(FormLayout_1.default, { marginBottom: 2, paddingTop: 2 },
+                    React.createElement(FormLayout_1.FormRow, { label: React.createElement(rebass_1.Text, { fontSize: 2, style: { whiteSpace: 'nowrap' } }, "Button Text") },
+                        React.createElement(rebass_1.Flex, { flexDirection: "row" },
+                            React.createElement(Input_1.default, { value: buttonLabel, mr: 2, style: { width: 80 }, onChange: (e) => {
                                     onChange(AlertButtons.map((btn, i) => {
                                         if (i === index) {
                                             return Object.assign(Object.assign({}, btn), { Label: e.target.value });
@@ -144,52 +148,50 @@ export const AlertButtonsEditor = (props) => {
                                         return btn;
                                     }));
                                 } }),
-                            React.createElement(DropdownButton, { marginLeft: 2, columns: ['label'], style: { minWidth: 110 }, items: ['text', 'outlined', 'raised'].map((variant) => {
-                                    return {
-                                        label: StringExtensions.CapitaliseFirstLetter(variant),
-                                        value: variant,
-                                        onClick: () => setVariant(variant),
-                                    };
-                                }) },
-                                React.createElement(Text, { fontSize: 2 },
-                                    "Variant:",
-                                    ' ',
-                                    StringExtensions.CapitaliseFirstLetter((_b = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.variant) !== null && _b !== void 0 ? _b : 'raised'))),
-                            React.createElement(DropdownButton, { columns: ['label'], marginLeft: 2, style: { minWidth: 120 }, items: [
+                            React.createElement(rebass_1.Box, { mr: 2 },
+                                React.createElement(Select_1.Select, { options: ['text', 'outlined', 'raised'].map((variant) => {
+                                        return {
+                                            label: StringExtensions_1.default.CapitaliseFirstLetter(variant),
+                                            value: variant,
+                                        };
+                                    }), rederSingleValue: (option) => `Variant: ${option.label}`, value: buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.variant, onChange: (value) => {
+                                        setVariant(value);
+                                    } })),
+                            React.createElement(Select_1.Select, { options: [
                                     {
-                                        label: 'Use Alert Tone',
+                                        label: 'Tone: Use Alert Tone',
                                         value: 'text',
-                                        onClick: () => setTone(null),
                                     },
                                     ...['success', 'info', 'error', 'warning', 'accent', 'neutral'].map((tone) => {
                                         return {
-                                            label: StringExtensions.CapitaliseFirstLetter(tone),
+                                            label: StringExtensions_1.default.CapitaliseFirstLetter(tone),
                                             value: tone,
-                                            onClick: () => setTone(tone),
                                         };
                                     }),
-                                ] },
-                                React.createElement(Text, { fontSize: 2 },
-                                    "Tone:",
-                                    ' ',
-                                    StringExtensions.CapitaliseFirstLetter((_c = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.tone) !== null && _c !== void 0 ? _c : 'Use alert tone'))),
-                            React.createElement(SimpleButton, { icon: "close", tone: "error", disabled: AlertButtons.length <= 1, marginLeft: 1, variant: "text", tooltip: AlertButtons.length <= 1 ? 'Cannot remove last button' : 'Remove button', onClick: () => {
+                                ], rederSingleValue: (option) => `Tone: ${option.label}`, onChange: (value) => {
+                                    if (value === 'text') {
+                                        setTone(null);
+                                    }
+                                    setTone(value);
+                                }, value: (_b = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.tone) !== null && _b !== void 0 ? _b : 'text' }),
+                            React.createElement(SimpleButton_1.default, { icon: "close", tone: "error", disabled: AlertButtons.length <= 1, marginLeft: 1, variant: "text", tooltip: AlertButtons.length <= 1 ? 'Cannot remove last button' : 'Remove button', onClick: () => {
                                     onChange(AlertButtons.filter((btn) => btn !== button));
                                 } }))),
-                    React.createElement(FormRow, { label: React.createElement(Text, { fontSize: 2 }, "Actions") },
+                    React.createElement(FormLayout_1.FormRow, { label: React.createElement(rebass_1.Text, { fontSize: 2 }, "Actions") },
                         buttonActions.map((actionName) => {
-                            return (React.createElement(CheckBox, { key: actionName, marginRight: 3, onChange: (checked) => handleActionChange(checked, actionName), checked: button.Action === actionName ||
+                            return (React.createElement(CheckBox_1.CheckBox, { key: actionName, marginRight: 3, onChange: (checked) => handleActionChange(checked, actionName), checked: button.Action === actionName ||
                                     (Array.isArray(button.Action) && button.Action.includes(actionName)) },
-                                React.createElement(Text, { fontSize: 2 }, sentenceCase(actionName))));
+                                React.createElement(rebass_1.Text, { fontSize: 2 }, (0, sentence_case_1.sentenceCase)(actionName))));
                         }),
-                        btnUserFunctions.length ? (React.createElement(CheckBox, { checked: true, disabled: true },
-                            React.createElement(Text, { fontSize: 2 },
+                        btnUserFunctions.length ? (React.createElement(CheckBox_1.CheckBox, { checked: true, disabled: true },
+                            React.createElement(rebass_1.Text, { fontSize: 2 },
                                 "User function",
                                 btnUserFunctions.length > 1 ? 's' : '',
                                 ":",
                                 ' ',
                                 btnUserFunctions.join(', ')))) : null),
-                    iconSelector && (React.createElement(FormRow, { label: React.createElement(Text, { fontSize: 2 }, "Icon") },
-                        React.createElement(Box, null, iconSelector))))));
+                    iconSelector && (React.createElement(FormLayout_1.FormRow, { label: React.createElement(rebass_1.Text, { fontSize: 2 }, "Icon") },
+                        React.createElement(rebass_1.Box, null, iconSelector))))));
         })));
 };
+exports.AlertButtonsEditor = AlertButtonsEditor;

package/src/View/Alert/Wizard/AlertMessageWizardSection.d.ts

@@ -2,7 +2,7 @@
 import { AlertDefinition } from '../../../PredefinedConfig/AlertState';
 import { AlertType } from '../Utilities/getAlertType';
 export declare const renderAlertMessageSummary: () => JSX.Element;
-declare type AlertDisplayWizardSectionProps = {
+type AlertDisplayWizardSectionProps = {
     onChange: (data: AlertDefinition) => void;
     alertType: AlertType;
 };

package/src/View/Alert/Wizard/AlertMessageWizardSection.js

@@ -1,19 +1,24 @@
-import * as React from 'react';
-import { Tabs } from '../../../components/Tabs';
-import Radio, { RadioGroup } from '../../../components/Radio';
-import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-import { Text } from 'rebass';
-import { CodeBlock } from '../../../components/CodeBlock';
-import AdaptableInput from '../../Components/AdaptableInput';
-import FormLayout, { FormRow } from '../../../components/FormLayout';
-export const renderAlertMessageSummary = () => {
-    const { data } = useOnePageAdaptableWizardContext();
-    return (React.createElement(Text, { fontSize: 2 },
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertMessageWizardSection = exports.renderAlertMessageSummary = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const Tabs_1 = require("../../../components/Tabs");
+const Radio_1 = tslib_1.__importStar(require("../../../components/Radio"));
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const rebass_1 = require("rebass");
+const CodeBlock_1 = require("../../../components/CodeBlock");
+const AdaptableInput_1 = tslib_1.__importDefault(require("../../Components/AdaptableInput"));
+const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
+const renderAlertMessageSummary = () => {
+    const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    return (React.createElement(rebass_1.Text, { fontSize: 2 },
         "Message Type ",
-        React.createElement(CodeBlock, null, data.MessageType)));
+        React.createElement(CodeBlock_1.CodeBlock, null, data.MessageType)));
 };
-export const AlertMessageWizardSection = (props) => {
-    const { data, api } = useOnePageAdaptableWizardContext();
+exports.renderAlertMessageSummary = renderAlertMessageSummary;
+const AlertMessageWizardSection = (props) => {
+    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const messageType = data.MessageType;
     const messageText = api.alertApi.internalApi.getAlertDescription(data);
     const messageHeader = data.MessageHeader;
@@ -26,26 +31,27 @@ export const AlertMessageWizardSection = (props) => {
         props.onChange(Object.assign(Object.assign({}, data), { MessageHeader: value }));
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement(Tabs, { "data-name": "message-type" },
-            React.createElement(Tabs.Tab, null, "Message Type"),
-            React.createElement(Tabs.Content, null,
-                React.createElement(RadioGroup, { value: messageType, name: "messageType", orientation: "horizontal", onRadioChange: (MessageType) => {
+        React.createElement(Tabs_1.Tabs, { "data-name": "message-type" },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Message Type"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(Radio_1.RadioGroup, { value: messageType, name: "messageType", orientation: "horizontal", onRadioChange: (MessageType) => {
                         props.onChange(Object.assign(Object.assign({}, data), { MessageType }));
                     } },
-                    React.createElement(Radio, { marginLeft: 1, value: "Info" }, "Info"),
-                    React.createElement(Radio, { marginLeft: 4, value: "Success" }, "Success"),
-                    React.createElement(Radio, { marginLeft: 4, value: "Warning" }, "Warning"),
-                    React.createElement(Radio, { marginLeft: 4, value: "Error" }, "Error")))),
-        React.createElement(Tabs, { "data-name": "message-text", mt: 2, mb: 3, autoFocus: false },
-            React.createElement(Tabs.Tab, null, "Message Text"),
-            React.createElement(Tabs.Content, null,
-                React.createElement(Text, { fontSize: 2, mt: 3, mb: 2 }, "The text to display as the Alert Message (leave blank to show automated Message based on Alert Type)"),
+                    React.createElement(Radio_1.default, { marginLeft: 1, value: "Info" }, "Info"),
+                    React.createElement(Radio_1.default, { marginLeft: 4, value: "Success" }, "Success"),
+                    React.createElement(Radio_1.default, { marginLeft: 4, value: "Warning" }, "Warning"),
+                    React.createElement(Radio_1.default, { marginLeft: 4, value: "Error" }, "Error")))),
+        React.createElement(Tabs_1.Tabs, { "data-name": "message-text", mt: 2, mb: 3, autoFocus: false },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Message Text"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(rebass_1.Text, { fontSize: 2, mt: 3, mb: 2 }, "The text to display as the Alert Message (leave blank to show automated Message based on Alert Type)"),
                 ' ',
-                React.createElement(FormLayout, null,
-                    React.createElement(FormRow, { label: "Header" },
-                        React.createElement(AdaptableInput, { minWidth: 250, placeholder: "use defaults", marginTop: 2, type: 'text', autoFocus: false, value: messageHeader !== null && messageHeader !== void 0 ? messageHeader : '', 
+                React.createElement(FormLayout_1.default, null,
+                    React.createElement(FormLayout_1.FormRow, { label: "Header" },
+                        React.createElement(AdaptableInput_1.default, { minWidth: 250, placeholder: "use defaults", marginTop: 2, type: 'text', autoFocus: false, value: messageHeader !== null && messageHeader !== void 0 ? messageHeader : '', 
                             // placeholder="defaults to column name"
                             onChange: (e) => onMessageHeaderChange(e) })),
-                    React.createElement(FormRow, { label: "Message" },
-                        React.createElement(AdaptableInput, { minWidth: 250, marginTop: 2, type: 'text', autoFocus: false, value: messageText !== null && messageText !== void 0 ? messageText : '', onChange: (e) => onMessageTextChange(e) })))))));
+                    React.createElement(FormLayout_1.FormRow, { label: "Message" },
+                        React.createElement(AdaptableInput_1.default, { minWidth: 250, marginTop: 2, type: 'text', autoFocus: false, value: messageText !== null && messageText !== void 0 ? messageText : '', onChange: (e) => onMessageTextChange(e) })))))));
 };
+exports.AlertMessageWizardSection = AlertMessageWizardSection;

package/src/View/Alert/Wizard/AlertNotificationWizardSection.d.ts

@@ -10,7 +10,7 @@ interface AlertPreviewProps extends BoxProps {
     focusFirstButton?: boolean;
 }
 export declare const AlertPreview: React.FunctionComponent<AlertPreviewProps>;
-declare type AlertNotificationWizardSectionProps = {
+type AlertNotificationWizardSectionProps = {
     onChange: (data: AlertDefinition) => void;
     alertType: AlertType;
 };

package/src/View/Alert/Wizard/AlertNotificationWizardSection.js

@@ -1,22 +1,26 @@
-import { __rest } from "tslib";
-import * as React from 'react';
-import { Tabs } from '../../../components/Tabs';
-import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-import { CheckBox } from '../../../components/CheckBox';
-import { Box, Text } from 'rebass';
-import { AdaptablePopupAlert } from '../../Components/Popups/AdaptablePopupAlert';
-import { AlertButtonsEditor } from './AlertButtonsEditor';
-import join from '../../../components/utils/join';
-export const renderAlertNotificationSummary = () => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertNotificationWizardSection = exports.AlertPreview = exports.renderAlertNotificationSummary = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const Tabs_1 = require("../../../components/Tabs");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const CheckBox_1 = require("../../../components/CheckBox");
+const rebass_1 = require("rebass");
+const AdaptablePopupAlert_1 = require("../../Components/Popups/AdaptablePopupAlert");
+const AlertButtonsEditor_1 = require("./AlertButtonsEditor");
+const join_1 = tslib_1.__importDefault(require("../../../components/utils/join"));
+const renderAlertNotificationSummary = () => {
     var _a;
-    const { data, api } = useOnePageAdaptableWizardContext();
+    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     if (!((_a = data.AlertProperties) === null || _a === void 0 ? void 0 : _a.DisplayNotification)) {
-        return React.createElement(Text, { fontSize: 2 }, "No Alert Notification will be displayed");
+        return React.createElement(rebass_1.Text, { fontSize: 2 }, "No Alert Notification will be displayed");
     }
-    return React.createElement(AlertPreview, { api: api, alertDefinition: data });
+    return React.createElement(exports.AlertPreview, { api: api, alertDefinition: data });
 };
-export const AlertPreview = (_a) => {
-    var { alertDefinition, api, focusFirstButton } = _a, boxProps = __rest(_a, ["alertDefinition", "api", "focusFirstButton"]);
+exports.renderAlertNotificationSummary = renderAlertNotificationSummary;
+const AlertPreview = (_a) => {
+    var { alertDefinition, api, focusFirstButton } = _a, boxProps = tslib_1.__rest(_a, ["alertDefinition", "api", "focusFirstButton"]);
     const mapButtons = React.useCallback((button) => {
         let buttonStyle = button.ButtonStyle;
         if (buttonStyle && buttonStyle.tone == null && (alertDefinition === null || alertDefinition === void 0 ? void 0 : alertDefinition.MessageType)) {
@@ -37,12 +41,13 @@ export const AlertPreview = (_a) => {
         };
         return result;
     }, [alertDefinition]);
-    return (React.createElement(Box, Object.assign({}, boxProps, { className: join(boxProps.className, 'ab-AlertPreview'), style: Object.assign({ border: '1px solid var(--ab-color-inputborder)' }, boxProps.style) }),
-        React.createElement(AdaptablePopupAlert, { headless: true, focusFirstButton: focusFirstButton, adaptableAlert: alertToPreview, onClose: () => { } })));
+    return (React.createElement(rebass_1.Box, Object.assign({}, boxProps, { className: (0, join_1.default)(boxProps.className, 'ab-AlertPreview'), style: Object.assign({ border: '1px solid var(--ab-color-inputborder)' }, boxProps.style) }),
+        React.createElement(AdaptablePopupAlert_1.AdaptablePopupAlert, { headless: true, focusFirstButton: focusFirstButton, adaptableAlert: alertToPreview, onClose: () => { } })));
 };
-export const AlertNotificationWizardSection = (props) => {
+exports.AlertPreview = AlertPreview;
+const AlertNotificationWizardSection = (props) => {
     var _a, _b, _c, _d;
-    const { data, api } = useOnePageAdaptableWizardContext();
+    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const adaptableAlert = {
         alertType: 'generic',
         header: data.MessageType,
@@ -53,10 +58,10 @@ export const AlertNotificationWizardSection = (props) => {
         data.AlertForm = api.alertApi.internalApi.getDefaultAlertNotificationForm();
     }
     return (React.createElement(React.Fragment, null,
-        React.createElement(Tabs, { "data-name": "display-options", mt: 2, mb: 3, autoFocus: false },
-            React.createElement(Tabs.Tab, null, "Notification Options"),
-            React.createElement(Tabs.Content, null,
-                React.createElement(CheckBox, { checked: (_a = data.AlertProperties) === null || _a === void 0 ? void 0 : _a.DisplayNotification, onChange: (DisplayNotification) => {
+        React.createElement(Tabs_1.Tabs, { "data-name": "display-options", mt: 2, mb: 3, autoFocus: false },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Notification Options"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(CheckBox_1.CheckBox, { checked: (_a = data.AlertProperties) === null || _a === void 0 ? void 0 : _a.DisplayNotification, onChange: (DisplayNotification) => {
                         const newAlertDefinition = Object.assign(Object.assign({}, data), { AlertProperties: Object.assign(Object.assign({}, data.AlertProperties), { DisplayNotification }) });
                         if (!DisplayNotification && typeof newAlertDefinition.AlertForm === 'object') {
                             delete newAlertDefinition.AlertForm.Buttons;
@@ -66,11 +71,12 @@ export const AlertNotificationWizardSection = (props) => {
                                 api.alertApi.internalApi.getDefaultAlertNotificationForm();
                         }
                         props.onChange(newAlertDefinition);
-                    } }, "Show a Notification when Alert is triggered (with action buttons)"),
-                ((_b = data.AlertProperties) === null || _b === void 0 ? void 0 : _b.DisplayNotification) ? (typeof data.AlertForm === 'string' ? (React.createElement(Text, { fontSize: 2 }, "Alert buttons cannot be customized because form is dynamically driven")) : (React.createElement(AlertButtonsEditor, { alertType: props.alertType, AlertButtons: (_c = data.AlertForm) === null || _c === void 0 ? void 0 : _c.Buttons, api: api, adaptableAlert: adaptableAlert, onChange: (buttons) => {
+                    } }, "Display a Notification when Alert is triggered (with action buttons)"),
+                ((_b = data.AlertProperties) === null || _b === void 0 ? void 0 : _b.DisplayNotification) ? (typeof data.AlertForm === 'string' ? (React.createElement(rebass_1.Text, { fontSize: 2 }, "Alert buttons cannot be customized because form is dynamically driven")) : (React.createElement(AlertButtonsEditor_1.AlertButtonsEditor, { alertType: props.alertType, AlertButtons: (_c = data.AlertForm) === null || _c === void 0 ? void 0 : _c.Buttons, api: api, adaptableAlert: adaptableAlert, onChange: (buttons) => {
                         props.onChange(Object.assign(Object.assign({}, data), { AlertForm: Object.assign(Object.assign({}, data.AlertForm), { Buttons: buttons }) }));
                     } }))) : null)),
-        ((_d = data.AlertProperties) === null || _d === void 0 ? void 0 : _d.DisplayNotification) ? (React.createElement(Tabs, { "data-name": "alert-preview", autoFocus: false },
-            React.createElement(Tabs.Tab, null, "Alert Preview"),
-            React.createElement(Tabs.Content, null, typeof data.AlertForm === 'string' ? (React.createElement(Text, { fontSize: 2 }, "Preview not available because form is dynamically driven")) : (React.createElement(AlertPreview, { alertDefinition: data, api: api }))))) : null));
+        ((_d = data.AlertProperties) === null || _d === void 0 ? void 0 : _d.DisplayNotification) ? (React.createElement(Tabs_1.Tabs, { "data-name": "alert-preview", autoFocus: false },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Alert Preview"),
+            React.createElement(Tabs_1.Tabs.Content, null, typeof data.AlertForm === 'string' ? (React.createElement(rebass_1.Text, { fontSize: 2 }, "Preview not available because form is dynamically driven")) : (React.createElement(exports.AlertPreview, { alertDefinition: data, api: api }))))) : null));
 };
+exports.AlertNotificationWizardSection = AlertNotificationWizardSection;

package/src/View/Alert/Wizard/AlertRulesWizardSection.js

@@ -1,20 +1,26 @@
-import * as React from 'react';
-import { EntityRulesEditor, EntityRulesSummary } from '../../Components/EntityRulesEditor';
-import { Tag } from '../../../components/Tag';
-import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-import { getAvailablePredicateDefinitions } from '../Utilities/getAvailablePredicates';
-import { Tabs } from '../../../components/Tabs';
-import Radio from '../../../components/Radio';
-import { Box } from 'rebass';
-export const getRuleStepDescription = (alertType) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertRulesWizardSection = exports.renderAlertRulesSummary = exports.getRuleStepDescription = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const EntityRulesEditor_1 = require("../../Components/EntityRulesEditor");
+const Tag_1 = require("../../../components/Tag");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const getAvailablePredicates_1 = require("../Utilities/getAvailablePredicates");
+const Tabs_1 = require("../../../components/Tabs");
+const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
+const rebass_1 = require("rebass");
+const getRuleStepDescription = (alertType) => {
     switch (alertType) {
         case 'DataChange':
             return (React.createElement(React.Fragment, null,
                 "Build the Rule ",
                 React.createElement("b", null, "when"),
-                " the Alert should trigger, using a Predicate or a Query"));
+                " the Alert should trigger (using a Predicate or a Query)"));
         case 'RowChange':
             return React.createElement(React.Fragment, null, "Specify which type of Row Change will trigger the Alert");
+        case 'Validation':
+            return React.createElement(React.Fragment, null, "Create the Validation Rule which will trigger the Alert (using a Predicate or a Query)");
         case 'Aggregation':
             return React.createElement(React.Fragment, null, "Build an Aggregation Boolean Rule to specify when the Alert should trigger");
         case 'Observable':
@@ -22,17 +28,19 @@ export const getRuleStepDescription = (alertType) => {
     }
     return '';
 };
-export const renderAlertRulesSummary = (alertDefinition) => {
-    return (React.createElement(EntityRulesSummary, { data: alertDefinition, renderPredicate: (contents) => {
+exports.getRuleStepDescription = getRuleStepDescription;
+const renderAlertRulesSummary = (alertDefinition) => {
+    return (React.createElement(EntityRulesEditor_1.EntityRulesSummary, { data: alertDefinition, renderPredicate: (contents) => {
             return (React.createElement(React.Fragment, null,
                 "Alert Rule ",
-                React.createElement(Tag, null, contents)));
+                React.createElement(Tag_1.Tag, null, contents)));
         }, renderQueryExpression: (contents) => {
             return (React.createElement(React.Fragment, null,
                 "Alert when ",
-                React.createElement(Tag, null, contents)));
+                React.createElement(Tag_1.Tag, null, contents)));
         } }));
 };
+exports.renderAlertRulesSummary = renderAlertRulesSummary;
 const RowChangeEditor = (props) => {
     var _a, _b, _c;
     const predicate = (_c = (_b = (_a = props.alert.Rule) === null || _a === void 0 ? void 0 : _a.Predicates) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : { PredicateId: null };
@@ -41,26 +49,27 @@ const RowChangeEditor = (props) => {
                 Predicates: [{ PredicateId: predicateId }],
             } }));
     };
-    return (React.createElement(Box, { p: 2 },
-        React.createElement(Tabs, null,
-            React.createElement(Tabs.Tab, null, "Row Change"),
-            React.createElement(Tabs.Content, null,
-                React.createElement(Radio, { onClick: () => handleChange('AddedRow'), checked: predicate.PredicateId === 'AddedRow' }, "Row Added"),
-                React.createElement(Radio, { onClick: () => handleChange('RemovedRow'), checked: predicate.PredicateId === 'RemovedRow' }, "Row Removed")))));
+    return (React.createElement(rebass_1.Box, { p: 2 },
+        React.createElement(Tabs_1.Tabs, null,
+            React.createElement(Tabs_1.Tabs.Tab, null, "Row Change"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(Radio_1.default, { onClick: () => handleChange('AddedRow'), checked: predicate.PredicateId === 'AddedRow' }, "Row Added"),
+                React.createElement(Radio_1.default, { onClick: () => handleChange('RemovedRow'), checked: predicate.PredicateId === 'RemovedRow' }, "Row Removed")))));
 };
-export const AlertRulesWizardSection = (props) => {
-    const { data, api, moduleInfo } = useOnePageAdaptableWizardContext();
-    const predicateDefs = getAvailablePredicateDefinitions(api, data.Scope, props.alertType);
+const AlertRulesWizardSection = (props) => {
+    const { data, api, moduleInfo } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const predicateDefs = (0, getAvailablePredicates_1.getAvailablePredicateDefinitions)(api, data.Scope, props.alertType);
     const showObservable = props.alertType === 'Observable';
     const showAggregation = props.alertType === 'Aggregation';
-    const showBoolean = props.alertType === 'DataChange';
-    const showPredicate = props.alertType === 'DataChange' || props.alertType === 'RowChange';
-    const enablePredicateColumnId = props.alertType === 'DataChange';
+    const showBoolean = props.alertType === 'DataChange' || props.alertType == 'Validation';
+    const showPredicate = props.alertType === 'DataChange' || props.alertType == 'Validation' || props.alertType === 'RowChange';
+    const enablePredicateColumnId = props.alertType === 'DataChange' || props.alertType == 'Validation';
+    ;
     if (props.alertType === 'RowChange') {
         return React.createElement(RowChangeEditor, { alert: data, onChange: props.onChange });
     }
-    return (React.createElement(EntityRulesEditor, { module: moduleInfo.ModuleName, defaultPredicateId: "Any", data: data, predicateDefs: predicateDefs, enablePredicateColumnId: enablePredicateColumnId, getPredicateDefsForColId: (colId) => getAvailablePredicateDefinitions(api, { ColumnIds: [colId] }, props.alertType), onChange: props.onChange, showAggregation: showAggregation, showObservable: showObservable, showBoolean: showBoolean, showPredicate: showPredicate, descriptions: {
-            selectPredicate: 'Create an Alert Rule - to be applied when data changes',
+    return (React.createElement(EntityRulesEditor_1.EntityRulesEditor, { module: moduleInfo.ModuleName, defaultPredicateId: "AnyChange", data: data, predicateDefs: predicateDefs, enablePredicateColumnId: enablePredicateColumnId, getPredicateDefsForColId: (colId) => (0, getAvailablePredicates_1.getAvailablePredicateDefinitions)(api, { ColumnIds: [colId] }, props.alertType), onChange: props.onChange, showAggregation: showAggregation, showObservable: showObservable, showBoolean: showBoolean, showPredicate: showPredicate, descriptions: {
+            selectPredicate: 'Build the Predicate',
             useBooleanQuery: (React.createElement(React.Fragment, null,
                 "Use an BooleanQuery if ",
                 React.createElement("i", null, "Scope"),
@@ -75,3 +84,4 @@ export const AlertRulesWizardSection = (props) => {
                 " is 'All Columns' - so any data change may be evaluated in a complex AggregatedBooleanExpression")),
         } }));
 };
+exports.AlertRulesWizardSection = AlertRulesWizardSection;

package/src/View/Alert/Wizard/AlertScopeWizardSection.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { AlertDefinition } from '../../../PredefinedConfig/AlertState';
 import { AlertType } from '../Utilities/getAlertType';
-declare type AlertScopeWizardSectionProps = {
+type AlertScopeWizardSectionProps = {
     onChange: (data: AlertDefinition) => void;
     alertType: AlertType;
 };

package/src/View/Alert/Wizard/AlertScopeWizardSection.js

@@ -1,17 +1,21 @@
-import * as React from 'react';
-import { Flex } from 'rebass';
-import { NewScopeComponent } from '../../Components/NewScopeComponent';
-import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-export const AlertScopeWizardSection = (props) => {
-    const { data, api } = useOnePageAdaptableWizardContext();
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertScopeWizardSection = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const AlertScopeWizardSection = (props) => {
+    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     let disableDataTypes = true;
     let disableColumns = true;
-    if (props.alertType === 'DataChange') {
+    if (props.alertType === 'DataChange' || props.alertType == 'Validation') {
         disableDataTypes = false;
         disableColumns = false;
     }
-    return (React.createElement(Flex, { flexDirection: "column", style: { height: '100%' }, padding: 2 },
-        React.createElement(NewScopeComponent, { disableColumns: disableColumns, disableDataTypes: disableDataTypes, descriptions: {
+    return (React.createElement(rebass_1.Flex, { flexDirection: "column", style: { height: '100%' }, padding: 2 },
+        React.createElement(NewScopeComponent_1.NewScopeComponent, { disableColumns: disableColumns, disableDataTypes: disableDataTypes, descriptions: {
                 rowScope: 'Changes in any Column in the row will trigger an Alert',
                 columnScope: 'Changes in selected Columns will trigger an Alert',
                 dataTypeScope: 'Changes in any Column which is of the selected Data Type(s) will trigger an Alert',
@@ -21,7 +25,7 @@ export const AlertScopeWizardSection = (props) => {
                     // when scope is changed, reset the rule to predicate of any
                     // if it was set to a predicate before
                     newData.Rule = {
-                        Predicates: [{ PredicateId: 'Any' }],
+                        Predicates: [{ PredicateId: 'AnyChange' }],
                     };
                 }
                 if (newData.Rule.ObservableExpression !== undefined && !api.scopeApi.scopeIsAll(Scope)) {
@@ -42,3 +46,4 @@ export const AlertScopeWizardSection = (props) => {
                 props.onChange(newData);
             } })));
 };
+exports.AlertScopeWizardSection = AlertScopeWizardSection;

package/src/View/Alert/Wizard/AlertSelectQueryWizard.js

@@ -1,29 +1,33 @@
-import * as React from 'react';
-import { AdaptablePopover } from '../../AdaptablePopover';
-import WizardPanel from '../../../components/WizardPanel';
-import HelpBlock from '../../../components/HelpBlock';
-import { CheckBox } from '../../../components/CheckBox';
-import { Flex } from 'rebass';
-import StringExtensions from '../../../Utilities/Extensions/StringExtensions';
-export class AlertSelectQueryWizard extends React.Component {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertSelectQueryWizard = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const AdaptablePopover_1 = require("../../AdaptablePopover");
+const WizardPanel_1 = tslib_1.__importDefault(require("../../../components/WizardPanel"));
+const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
+const CheckBox_1 = require("../../../components/CheckBox");
+const rebass_1 = require("rebass");
+const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/StringExtensions"));
+class AlertSelectQueryWizard extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            HasExpression: StringExtensions.IsNotNullOrEmpty(this.props.data.Rule.BooleanExpression),
+            HasExpression: StringExtensions_1.default.IsNotNullOrEmpty(this.props.data.Rule.BooleanExpression),
         };
     }
     render() {
         return (React.createElement("div", { "data-name": 'alert-query' },
-            React.createElement(WizardPanel, null,
-                React.createElement(HelpBlock, null,
+            React.createElement(WizardPanel_1.default, null,
+                React.createElement(HelpBlock_1.default, null,
                     "A Query is used if the alert triggering is dependent on value in other columns in the row.",
                     React.createElement("br", null),
                     React.createElement("br", null),
                     "If so, then alert will only be triggered if the Query evaluates as true."),
-                React.createElement(Flex, { alignItems: "center", flexDirection: "row", marginTop: 2 },
-                    React.createElement(CheckBox, { marginRight: 3, marginLeft: 2, onChange: (checked) => this.onOtherExpressionOptionChanged(checked), checked: this.state.HasExpression }, "Use Query"),
+                React.createElement(rebass_1.Flex, { alignItems: "center", flexDirection: "row", marginTop: 2 },
+                    React.createElement(CheckBox_1.CheckBox, { marginRight: 3, marginLeft: 2, onChange: (checked) => this.onOtherExpressionOptionChanged(checked), checked: this.state.HasExpression }, "Use Query"),
                     ' ',
-                    React.createElement(AdaptablePopover, { headerText: 'Alert: Query', bodyText: [
+                    React.createElement(AdaptablePopover_1.AdaptablePopover, { headerText: 'Alert: Query', bodyText: [
                             'Create a query (in next step) which will stipulate other cell values required for the Alert to be triggered.',
                         ] })))));
     }
@@ -52,3 +56,4 @@ export class AlertSelectQueryWizard extends React.Component {
         return 1;
     }
 }
+exports.AlertSelectQueryWizard = AlertSelectQueryWizard;