@adaptabletools/adaptable-cjs 23.0.0-canary.0 → 23.0.0-canary.10

package/src/View/Export/Wizard/ReportRowsWizardSection.js

@@ -1,16 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReportRowsWizardSection = exports.renderReportRowsSummary = exports.isValidReportRowsQuery = void 0;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ExpressionEditor_1 = require("../../../components/ExpressionEditor");
-const ExpressionPreview_1 = require("../../../components/ExpressionEditor/ExpressionPreview");
-const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
-const Tabs_1 = require("../../../components/Tabs");
-const Tag_1 = require("../../../components/Tag");
+const getExportRowsViewItems_1 = require("../../../Strategy/Utilities/Export/getExportRowsViewItems");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Flex_1 = require("../../../components/Flex");
+const Card_1 = require("../../../components/Card");
+const TypeRadio_1 = require("../../Wizard/TypeRadio");
 const isValidReportRowsQuery = (report) => {
     if (report.ReportRowScope === 'ExpressionRows' && !report.Query?.BooleanExpression) {
         return 'Rows query cannot be empty';
@@ -18,37 +16,33 @@ const isValidReportRowsQuery = (report) => {
     return true;
 };
 exports.isValidReportRowsQuery = isValidReportRowsQuery;
-const renderReportRowsSummary = (report) => {
-    const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-2", children: [report.ReportRowScope === 'AllRows' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Include ", (0, jsx_runtime_1.jsx)("b", { children: "all Rows" }), " in the Report"] })) : null, report.ReportRowScope === 'VisibleRows' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Include ", (0, jsx_runtime_1.jsx)("b", { children: "only visible Rows" }), " in the Report"] })) : null, report.ReportRowScope === 'ExpressionRows' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Include Rows matching the query:", ' ', (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: (0, jsx_runtime_1.jsx)(ExpressionPreview_1.ExpressionPreview, { query: report.Query }) })] })) : null] }));
-};
+const renderReportRowsSummary = (report, api) => (0, getExportRowsViewItems_1.renderExportRowsView)(report, api);
 exports.renderReportRowsSummary = renderReportRowsSummary;
 const ReportRowsWizardSection = (props) => {
     const { api, data, moduleInfo } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const initialData = (0, react_1.useMemo)(() => api.internalApi.getQueryPreviewData(), []);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:m-2", value: data.ReportRowScope, onValueChange: (ReportRowScope) => {
-                const report = {
-                    ...data,
-                    ReportRowScope,
-                };
-                if (report.ReportRowScope !== 'ExpressionRows') {
-                    delete report.Query;
-                }
-                else {
-                    if (!report.Query) {
-                        report.Query = {
-                            BooleanExpression: '',
-                        };
-                    }
-                }
-                props.onChange(report);
-            }, children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "AllRows", children: (0, jsx_runtime_1.jsx)(Radio_1.default, { className: "twa:m-0", checked: data.ReportRowScope == 'AllRows', tabIndex: -1, children: "All Rows" }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "VisibleRows", children: (0, jsx_runtime_1.jsx)(Radio_1.default, { className: "twa:m-0", checked: data.ReportRowScope == 'VisibleRows', tabIndex: -1, children: "Visible Rows" }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "ExpressionRows", children: (0, jsx_runtime_1.jsx)(Radio_1.default, { className: "twa:m-0", checked: data.ReportRowScope == 'ExpressionRows', tabIndex: -1, children: "By Query" }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "AllRows", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:text-2", children: "All Rows in the datasource will be included in the report, whether visible or not at time of export." }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "VisibleRows", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:text-2", children: "Only Rows that are visible at the time the Report is exported will be included in the Export" }) }), (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs.Content, { value: "ExpressionRows", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:pl-0 twa:text-2", children: "Only the Rows which match the Query will be exported - whether visible or not." }), (0, jsx_runtime_1.jsx)(ExpressionEditor_1.ExpressionEditor, { allowSaveNamedQuery: true, type: 'boolean', module: moduleInfo.ModuleName, style: { paddingLeft: 0 }, value: data.Query?.BooleanExpression ?? '', onChange: (BooleanExpression) => {
+    const handleRowScopeChange = (ReportRowScope) => {
+        const report = {
+            ...data,
+            ReportRowScope,
+        };
+        if (report.ReportRowScope !== 'ExpressionRows') {
+            delete report.Query;
+        }
+        else if (!report.Query) {
+            report.Query = {
+                BooleanExpression: '',
+            };
+        }
+        props.onChange(report);
+    };
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full twa:gap-3 twa:p-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Rows" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose which rows to include in the Report" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: "All Rows", description: "All rows in the datasource will be included, whether visible or not at time of export", checked: data.ReportRowScope === 'AllRows', onClick: () => handleRowScopeChange('AllRows') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: "Visible Rows", description: "Only rows that are visible at the time the Report is exported will be included", checked: data.ReportRowScope === 'VisibleRows', onClick: () => handleRowScopeChange('VisibleRows') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: "By Query", description: "Only rows matching the query will be exported \u2014 whether visible or not", checked: data.ReportRowScope === 'ExpressionRows', onClick: () => handleRowScopeChange('ExpressionRows') })] }) })] }), data.ReportRowScope === 'ExpressionRows' ? ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:flex-1 twa:min-h-0", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Query" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Build a boolean expression to filter which rows are included" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:flex-1 twa:min-h-0", children: (0, jsx_runtime_1.jsx)(ExpressionEditor_1.ExpressionEditor, { allowSaveNamedQuery: true, type: 'boolean', module: moduleInfo.ModuleName, className: "twa:pl-0", value: data.Query?.BooleanExpression ?? '', onChange: (BooleanExpression) => {
                                 props.onChange({
                                     ...data,
                                     Query: {
                                         BooleanExpression,
                                     },
                                 });
-                            }, initialData: initialData, columns: api.columnApi.internalApi.getQueryableColumnsForUIEditor(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api })] })] }) }));
+                            }, initialData: initialData, columns: api.columnApi.internalApi.getQueryableColumnsForUIEditor(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api }) })] })) : null] }));
 };
 exports.ReportRowsWizardSection = ReportRowsWizardSection;

package/src/View/Export/Wizard/ScheduledReportSettings.d.ts

@@ -1,11 +1,15 @@
 import * as React from 'react';
 import { ExportDestinationType } from '../../../AdaptableOptions/ExportOptions';
-import { ReportFormatType, ReportSchedule } from '../../../AdaptableState/ExportState';
+import { ReportFormatType, ReportNameType, ReportSchedule } from '../../../AdaptableState/ExportState';
 interface ScheduledReportSettingsProps {
     reportSchedule: ReportSchedule;
     onChange: (reportSchedule: ReportSchedule) => void;
     allFormats: ReportFormatType[];
     allDestinations: ExportDestinationType[];
+    /** When set, the user picks which report this schedule exports (Export popup → New Schedule). */
+    allReportNames?: ReportNameType[];
+    /** When set, the report is fixed (schedule created from a specific report). */
+    fixedReportName?: ReportNameType;
 }
 export declare const ScheduledReportSettings: React.FunctionComponent<ScheduledReportSettingsProps>;
 export {};

package/src/View/Export/Wizard/ScheduledReportSettings.js

@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ScheduledReportSettings = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
-const Tabs_1 = require("../../../components/Tabs");
 const Flex_1 = require("../../../components/Flex");
 const NewSelect_1 = require("../../../components/NewSelect");
+const Card_1 = require("../../../components/Card");
+const Tag_1 = require("../../../components/Tag");
 const ScheduledReportSettings = (props) => {
     const handleNameChange = (event) => {
         props.onChange({
@@ -23,12 +23,19 @@ const ScheduledReportSettings = (props) => {
         label: destination,
         value: destination,
     }));
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": "scheduled-report-settings", children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { autoFocus: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Settings" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Name", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "schedule-name", className: "twa:w-[300px]", onChange: handleNameChange, placeholder: "Enter Schedule Name", type: "string", value: props.reportSchedule?.Name ?? '' }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Format", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[300px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-full", "data-name": "select-format", items: formatOptions, value: props.reportSchedule?.ReportFormat, placeholder: "Select Format", onValueChange: (value) => props.onChange({
-                                            ...props.reportSchedule,
-                                            ReportFormat: value,
-                                        }) }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Destination", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[300px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-full", "data-name": "select-destination", items: destinationOptions, value: props.reportSchedule?.ExportDestination, placeholder: "Select Destination", onValueChange: (value) => props.onChange({
-                                            ...props.reportSchedule,
-                                            ExportDestination: value,
-                                        }) }) }) })] }) })] }) }));
+    const reportOptions = (props.allReportNames ?? []).map((reportName) => ({
+        label: reportName,
+        value: reportName,
+    }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", "data-name": "scheduled-report-settings", children: [props.fixedReportName ? ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Report" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "The report that will be exported on this schedule" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: props.fixedReportName }) })] })) : null, props.allReportNames ? ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Report" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose which report to export on this schedule" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:max-w-[300px]", "data-name": "select-report", items: reportOptions, value: props.reportSchedule?.ReportName || undefined, placeholder: "Select Report", onValueChange: (value) => props.onChange({
+                                ...props.reportSchedule,
+                                ReportName: value,
+                            }) }) })] })) : null, (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Name" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for this scheduled export" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "schedule-name", className: "twa:max-w-[300px] twa:w-full", onChange: handleNameChange, placeholder: "Enter Schedule Name", type: "string", value: props.reportSchedule?.Name ?? '' }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Format" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose the export file format" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:max-w-[300px]", "data-name": "select-format", items: formatOptions, value: props.reportSchedule?.ReportFormat, placeholder: "Select Format", onValueChange: (value) => props.onChange({
+                                ...props.reportSchedule,
+                                ReportFormat: value,
+                            }) }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Destination" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose where the exported report is sent" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:max-w-[300px]", "data-name": "select-destination", items: destinationOptions, value: props.reportSchedule?.ExportDestination, placeholder: "Select Destination", onValueChange: (value) => props.onChange({
+                                ...props.reportSchedule,
+                                ExportDestination: value,
+                            }) }) })] })] }));
 };
 exports.ScheduledReportSettings = ScheduledReportSettings;

package/src/View/Export/Wizard/ScheduledReportWizard.js

@@ -8,7 +8,6 @@ const react_redux_1 = require("react-redux");
 const ExportRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/ExportRedux"));
 const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const Tag_1 = require("../../../components/Tag");
 const ScheduleScheduleWizard_1 = require("../../Schedule/Wizard/ScheduleScheduleWizard");
 const ScheduleScheduleSummary_1 = require("../../Schedule/Wizard/ScheduleScheduleSummary");
 const ObjectTagsWizardSection_1 = require("../../Wizard/ObjectTagsWizardSection");
@@ -28,10 +27,11 @@ const ScheduledReportWizard = (props) => {
     });
     const dispatch = (0, react_redux_1.useDispatch)();
     const handleFinish = () => {
-        if (!reportName) {
+        const resolvedReportName = reportName ?? reportSchedule.ReportName;
+        if (!resolvedReportName?.trim()) {
             return;
         }
-        const scheduleToSave = { ...reportSchedule, ReportName: reportName };
+        const scheduleToSave = { ...reportSchedule, ReportName: resolvedReportName };
         const action = isNew
             ? ExportRedux.ScheduledReportAdd(scheduleToSave)
             : ExportRedux.ScheduledReportEdit(scheduleToSave);
@@ -49,7 +49,7 @@ const ScheduledReportWizard = (props) => {
                 title: 'Settings',
                 isValid: (data, api) => (0, isReportScheduledSettingsValid_1.isReportScheduleSettingsValid)(data, api),
                 renderSummary: () => (0, jsx_runtime_1.jsx)(ScheduledReportSettingsSummary_1.ScheduledReportSettingsSummary, {}),
-                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-3", children: (0, jsx_runtime_1.jsx)(ScheduledReportSettingsSection, { onChange: setReportSchedule, reportName: reportName }) })),
+                render: () => ((0, jsx_runtime_1.jsx)(ScheduledReportSettingsSection, { onChange: setReportSchedule, reportName: reportName })),
             },
             {
                 title: 'Schedule',
@@ -76,5 +76,9 @@ const ScheduledReportSettingsSection = (props) => {
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const allFormats = api.exportApi.getAvailableSystemFormats();
     const allDestinations = api.exportApi.getAllExportDestinations();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [props.reportName && ((0, jsx_runtime_1.jsxs)(OnePageAdaptableWizard_1.SummaryText, { children: ["Report: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: props.reportName })] })), (0, jsx_runtime_1.jsx)(ScheduledReportSettings_1.ScheduledReportSettings, { reportSchedule: data, onChange: props.onChange, allFormats: allFormats ?? [], allDestinations: allDestinations ?? [] })] }));
+    const fixedReportName = props.reportName;
+    const allReportNames = fixedReportName
+        ? undefined
+        : api.exportApi.internalApi.getAllAvailableReportNames();
+    return ((0, jsx_runtime_1.jsx)(ScheduledReportSettings_1.ScheduledReportSettings, { reportSchedule: data, onChange: props.onChange, allFormats: allFormats ?? [], allDestinations: allDestinations ?? [], allReportNames: allReportNames, fixedReportName: fixedReportName }));
 };

package/src/View/Export/Wizard/isReportScheduledSettingsValid.d.ts

@@ -1,3 +1,3 @@
 import { AdaptableApi } from '../../../Api/AdaptableApi';
 import { ReportSchedule } from '../../../AdaptableState/ExportState';
-export declare const isReportScheduleSettingsValid: (reportSchedule: ReportSchedule, api: AdaptableApi) => true | "A name is required." | "A scheduled export with this name already exists." | "Please select a report format.";
+export declare const isReportScheduleSettingsValid: (reportSchedule: ReportSchedule, api: AdaptableApi) => true | "A name is required." | "A scheduled export with this name already exists." | "Please select a report." | "Please select a report format.";

package/src/View/Export/Wizard/isReportScheduledSettingsValid.js

@@ -12,6 +12,9 @@ const isReportScheduleSettingsValid = (reportSchedule, api) => {
     if (isDuplicateName) {
         return 'A scheduled export with this name already exists.';
     }
+    if (StringExtensions_1.default.IsNullOrEmpty(reportSchedule?.ReportName?.trim())) {
+        return 'Please select a report.';
+    }
     if (StringExtensions_1.default.IsNullOrEmpty(reportSchedule?.ReportFormat)) {
         return 'Please select a report format.';
     }

package/src/View/Filter/FilterViewPanel.js

@@ -32,7 +32,7 @@ class FilterViewPanelComponent extends React.Component {
                 this.props.api.filterApi.columnFilterApi.unSuspendAllColumnFilters();
             }
         };
-        return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Filter__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap', children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { children: [ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(this.props.ColumnFilters) && ((0, jsx_runtime_1.jsx)(AdaptablePopover_1.AdaptablePopover, { popupPadding: 0, className: `ab-${elementType}__Filter__info`, headerText: "", bodyText: [(0, jsx_runtime_1.jsx)(ActiveFiltersPanel_1.ActiveFiltersPanel, {})], useButton: true, showEvent: 'focus', hideEvent: "blur", popoverMinWidth: 400 })), (0, jsx_runtime_1.jsx)(ButtonClear_1.ButtonClear, { "aria-label": 'Clear Filters', className: `ab-${elementType}__Filter__clear twa:mx-1 twa:mb-0`, onClick: () => this.onClearFilters(), tooltip: "Clear Filters", disabled: this.props.ColumnFilters.length == 0, showText: this.props.viewType === 'ToolPanel', children: this.props.viewType === 'ToolPanel' && 'Clear' }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "aria-label": isAtLeastOneFilterActive ? 'Suspend All Filters' : 'Resume All Filters', className: (0, join_1.default)(`ab-${elementType}__Filter__suspend-button`, isAtLeastOneFilterActive && `ab-${elementType}__Filter__suspend-all`, !isAtLeastOneFilterActive && `ab-${elementType}__Filter__un-suspend-all`), disabled: !isAtLeastOneFilter, onClick: handleSuspendUnsuspendAll, tone: isAtLeastOneFilterActive ? 'neutral' : 'success', variant: "text", icon: isAtLeastOneFilterActive ? 'pause' : 'play', accessLevel: this.props.accessLevel })] }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", children: this.props.api.filterApi.columnFilterApi.isQuickFilterAvailable() && ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "quick-filter-toggle", className: `ab-${elementType}__Filter__active-check twa:my-0 twa:text-2 twa:p-1`, disabled: this.props.accessLevel === GeneralConstants_1.ACCESS_LEVEL_READ_ONLY ||
+        return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Filter__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap', children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { children: [ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(this.props.ColumnFilters) && ((0, jsx_runtime_1.jsx)(AdaptablePopover_1.AdaptablePopover, { popupPadding: 0, className: `ab-${elementType}__Filter__info`, headerText: "", bodyText: [(0, jsx_runtime_1.jsx)(ActiveFiltersPanel_1.ActiveFiltersPanel, {})], useButton: true, showEvent: 'focus', hideEvent: "blur", popoverMinWidth: 400 })), (0, jsx_runtime_1.jsx)(ButtonClear_1.ButtonClear, { "aria-label": 'Clear Filters', className: `ab-${elementType}__Filter__clear twa:mx-1 twa:mb-0`, onClick: () => this.onClearFilters(), tooltip: "Clear Filters", disabled: this.props.ColumnFilters.length == 0, showText: this.props.viewType === 'ToolPanel', children: this.props.viewType === 'ToolPanel' && 'Clear' }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "aria-label": isAtLeastOneFilterActive ? 'Suspend All Filters' : 'Resume All Filters', className: (0, join_1.default)(`ab-${elementType}__Filter__suspend-button`, isAtLeastOneFilterActive && `ab-${elementType}__Filter__suspend-all`, !isAtLeastOneFilterActive && `ab-${elementType}__Filter__un-suspend-all`), disabled: !isAtLeastOneFilter, onClick: handleSuspendUnsuspendAll, tone: "neutral", variant: "text", icon: isAtLeastOneFilterActive ? 'pause' : 'resume', accessLevel: this.props.accessLevel })] }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", children: this.props.api.filterApi.columnFilterApi.isQuickFilterAvailable() && ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "quick-filter-toggle", className: `ab-${elementType}__Filter__active-check twa:my-0 twa:text-2 twa:p-1`, disabled: this.props.accessLevel === GeneralConstants_1.ACCESS_LEVEL_READ_ONLY ||
                             this.props.api.layoutApi.isCurrentLayoutPivot(), checked: this.props.IsQuickFilterVisible, onChange: (checked) => {
                             checked ? this.props.onShowQuickFilterBar() : this.props.onHideQuickFilterBar();
                         }, children: "Filter Bar" })) })] }));

package/src/View/FlashingCell/FlashingCellStyle.d.ts

@@ -1,7 +1,9 @@
-import React from 'react';
+import React, { HTMLProps } from 'react';
 import { FlashingCellDefinition } from '../../types';
 import { FlexProps } from '../../components/Flex';
-export interface FlashingCellStyleProps extends Omit<FlexProps, 'data'> {
+export declare const FLASHING_CELL_STYLE_PREVIEW_CLASS = "twa:!mt-0 twa:w-[5.5rem] twa:max-w-[5.5rem] twa:shrink-0 twa:!px-1.5 twa:!py-1 twa:text-2 twa:truncate";
+export interface FlashingCellStyleProps extends Omit<HTMLProps<HTMLDivElement> & FlexProps, 'data'> {
     data: FlashingCellDefinition;
+    className?: string;
 }
 export declare const FlashingCellStyle: React.FunctionComponent<FlashingCellStyleProps>;

package/src/View/FlashingCell/FlashingCellStyle.js

@@ -1,11 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FlashingCellStyle = void 0;
+exports.FlashingCellStyle = exports.FLASHING_CELL_STYLE_PREVIEW_CLASS = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const StylePreview_1 = require("../../components/StylePreview");
 const Flex_1 = require("../../components/Flex");
+const utils_1 = require("../../lib/utils");
+exports.FLASHING_CELL_STYLE_PREVIEW_CLASS = 'twa:!mt-0 twa:w-[5.5rem] twa:max-w-[5.5rem] twa:shrink-0 twa:!px-1.5 twa:!py-1 twa:text-2 twa:truncate';
 const FlashingCellStyle = (props) => {
-    const { data, ...boxProps } = props;
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", ...boxProps, children: [(0, jsx_runtime_1.jsxs)(StylePreview_1.StylePreview, { "data-value": "up-style", styleObject: props.data.UpChangeStyle, className: "twa:mr-1 twa:flex-1", children: ["Up ", !props.data.UpChangeStyle ? ' - no style' : ''] }), (0, jsx_runtime_1.jsxs)(StylePreview_1.StylePreview, { "data-value": "down-style", className: "twa:mr-1 twa:flex-1", styleObject: props.data.DownChangeStyle, children: ["Down", !props.data.DownChangeStyle ? ' - no style' : ''] }), (0, jsx_runtime_1.jsxs)(StylePreview_1.StylePreview, { "data-value": "neutral-style", className: "twa:flex-1", styleObject: props.data.NeutralChangeStyle, children: ["Neutral ", !props.data.NeutralChangeStyle ? ' - no style' : ''] })] }));
+    const { data, className, ...flexProps } = props;
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "stretch", className: (0, utils_1.cn)('twa:gap-1 twa:min-w-0', className), ...flexProps, children: [(0, jsx_runtime_1.jsxs)(StylePreview_1.StylePreview, { "data-value": "up-style", styleObject: data.UpChangeStyle, className: exports.FLASHING_CELL_STYLE_PREVIEW_CLASS, children: ["Up", !data.UpChangeStyle ? ' - none' : ''] }), (0, jsx_runtime_1.jsxs)(StylePreview_1.StylePreview, { "data-value": "down-style", styleObject: data.DownChangeStyle, className: exports.FLASHING_CELL_STYLE_PREVIEW_CLASS, children: ["Down", !data.DownChangeStyle ? ' - none' : ''] }), (0, jsx_runtime_1.jsxs)(StylePreview_1.StylePreview, { "data-value": "neutral-style", styleObject: data.NeutralChangeStyle, className: exports.FLASHING_CELL_STYLE_PREVIEW_CLASS, children: ["Neutral", !data.NeutralChangeStyle ? ' - none' : ''] })] }));
 };
 exports.FlashingCellStyle = FlashingCellStyle;

package/src/View/FlashingCell/Wizard/FlashingCellRulesWizardSection.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { FlashingCellDefinition } from '../../../AdaptableState/FlashingCellState';
+import { AdaptableApi } from '../../../types';
 export interface FlashingAlertRulesWizardSectionProps {
     onChange: (data: FlashingCellDefinition) => void;
 }
-export declare const renderFlashingAlertRulesSummary: (flashingAlert: FlashingCellDefinition) => React.JSX.Element;
+export declare const renderFlashingAlertRulesSummary: (flashingAlert: FlashingCellDefinition, api: AdaptableApi) => React.JSX.Element;
 export declare const FlashingAlertRulesWizardSection: (props: FlashingAlertRulesWizardSectionProps) => React.JSX.Element;

package/src/View/FlashingCell/Wizard/FlashingCellRulesWizardSection.js

@@ -3,26 +3,24 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FlashingAlertRulesWizardSection = exports.renderFlashingAlertRulesSummary = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const CodeBlock_1 = require("../../../components/CodeBlock");
 const EntityRulesEditor_1 = require("../../Components/EntityRulesEditor");
-const renderFlashingAlertRulesSummary = (flashingAlert) => {
-    const { api: { flashingCellApi }, } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    const FlashTarget = flashingAlert.FlashTarget ?? flashingCellApi.getFlashingCellFlashTarget(flashingAlert);
-    return ((0, jsx_runtime_1.jsx)(EntityRulesEditor_1.EntityRulesSummary, { data: flashingAlert, renderPredicate: (content) => {
-            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Flash ", (0, jsx_runtime_1.jsx)(CodeBlock_1.CodeBlock, { children: FlashTarget }), " - value condition", ' ', (0, jsx_runtime_1.jsx)(CodeBlock_1.CodeBlock, { children: content })] }));
-        }, renderQueryExpression: (content) => {
-            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Flash ", (0, jsx_runtime_1.jsx)(CodeBlock_1.CodeBlock, { children: FlashTarget }), " when", ' ', (0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(CodeBlock_1.CodeBlock, { children: content }) })] }));
-        } }));
+const Flex_1 = require("../../../components/Flex");
+const Card_1 = require("../../../components/Card");
+const getRuleViewItems_1 = require("../../../Utilities/getRuleViewItems");
+const SummaryColorTag_1 = require("../../Wizard/SummaryColorTag");
+const renderFlashingAlertRulesSummary = (flashingAlert, api) => {
+    const { values } = (0, getRuleViewItems_1.getRuleViewItems)(flashingAlert.Rule, api);
+    return (0, SummaryColorTag_1.renderSummaryStringTags)(values ?? ['No condition']);
 };
 exports.renderFlashingAlertRulesSummary = renderFlashingAlertRulesSummary;
 const FlashingAlertRulesWizardSection = (props) => {
     const { data, api, moduleInfo } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const predicateDefs = api.flashingCellApi.getFlashingCellPredicateDefsForScope(data.Scope);
-    return ((0, jsx_runtime_1.jsx)(EntityRulesEditor_1.EntityRulesEditor, { module: moduleInfo.ModuleName, defaultPredicateId: "AnyChange", data: data, predicateDefs: predicateDefs, getPredicateDefsForColId: (colId) => api.flashingCellApi.getFlashingCellPredicateDefsForScope({ ColumnIds: [colId] }), onChange: props.onChange, showAggregation: false, showObservable: false, showBoolean: true, showPredicate: true, descriptions: {
-            selectPredicate: 'Select an Flashing Cell Rule - to be applied when data changes',
-            useBooleanQuery: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Use an BooleanQuery if ", (0, jsx_runtime_1.jsx)("i", { children: "Scope" }), " is 'All Columns' - so any data change may be evaluated in a complex BooleanExpression"] })),
-            useObservableQuery: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Use an ObservableQuery if ", (0, jsx_runtime_1.jsx)("i", { children: "Scope" }), " is 'All Columns' - so any data change may be evaluated in a complex ObservableExpression"] })),
-            useAggregationQuery: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Use an AggregatedBooleanQuery if ", (0, jsx_runtime_1.jsx)("i", { children: "Scope" }), " is 'All Columns' - so any data change may be evaluated in a complex AggregatedBooleanExpression"] })),
-        } }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full twa:gap-3 twa:p-3", children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:flex-1 twa:min-h-0", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Rule" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Build the rule that determines when cells should flash on a data change" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:flex-1 twa:min-h-0", children: (0, jsx_runtime_1.jsx)(EntityRulesEditor_1.EntityRulesEditor, { module: moduleInfo.ModuleName, defaultPredicateId: "AnyChange", data: data, predicateDefs: predicateDefs, getPredicateDefsForColId: (colId) => api.flashingCellApi.getFlashingCellPredicateDefsForScope({ ColumnIds: [colId] }), onChange: props.onChange, showAggregation: false, showObservable: false, showBoolean: true, showPredicate: true, descriptions: {
+                            selectPredicate: 'Select a Flashing Cell Rule - to be applied when data changes',
+                            useBooleanQuery: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Use an BooleanQuery if ", (0, jsx_runtime_1.jsx)("i", { children: "Scope" }), " is 'All Columns' - so any data change may be evaluated in a complex BooleanExpression"] })),
+                            useObservableQuery: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Use an ObservableQuery if ", (0, jsx_runtime_1.jsx)("i", { children: "Scope" }), " is 'All Columns' - so any data change may be evaluated in a complex ObservableExpression"] })),
+                            useAggregationQuery: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Use an AggregatedBooleanQuery if ", (0, jsx_runtime_1.jsx)("i", { children: "Scope" }), " is 'All Columns' - so any data change may be evaluated in a complex AggregatedBooleanExpression"] })),
+                        } }) })] }) }));
 };
 exports.FlashingAlertRulesWizardSection = FlashingAlertRulesWizardSection;

package/src/View/FlashingCell/Wizard/FlashingCellScopeSummary.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { FlashingCellDefinition } from '../../../../types';
+export declare const FlashingCellScopeSummaryContent: React.FC<{
+    scope: import("../../../../types").ColumnScope;
+}>;
+export declare const FlashingCellScopeSummaryView: React.FunctionComponent<{
+    data: FlashingCellDefinition;
+}>;
+export declare const renderFlashingCellScopeSummary: (flashingCell: FlashingCellDefinition) => React.JSX.Element;

package/src/View/FlashingCell/Wizard/FlashingCellScopeSummary.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderFlashingCellScopeSummary = exports.FlashingCellScopeSummaryView = exports.FlashingCellScopeSummaryContent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const scopeSummaryTags_1 = require("../../Wizard/scopeSummaryTags");
+exports.FlashingCellScopeSummaryContent = scopeSummaryTags_1.ScopeSummaryTags;
+const FlashingCellScopeSummaryView = ({ data }) => (0, jsx_runtime_1.jsx)(scopeSummaryTags_1.ScopeSummaryTags, { scope: data.Scope });
+exports.FlashingCellScopeSummaryView = FlashingCellScopeSummaryView;
+const renderFlashingCellScopeSummary = (flashingCell) => ((0, jsx_runtime_1.jsx)(scopeSummaryTags_1.ScopeSummaryTags, { scope: flashingCell.Scope }));
+exports.renderFlashingCellScopeSummary = renderFlashingCellScopeSummary;

package/src/View/FlashingCell/Wizard/FlashingCellScopeWizardSection.d.ts

@@ -3,4 +3,4 @@ type FlashingAlertScopeWizardSectionProps = {
     onChange: (data: any) => void;
 };
 export declare const FlashingAlertScopeWizardSection: (props: FlashingAlertScopeWizardSectionProps) => React.JSX.Element;
-export {};
+export { FlashingCellScopeSummaryContent, FlashingCellScopeSummaryView, renderFlashingCellScopeSummary, } from './FlashingCellScopeSummary';

package/src/View/FlashingCell/Wizard/FlashingCellScopeWizardSection.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FlashingAlertScopeWizardSection = void 0;
+exports.renderFlashingCellScopeSummary = exports.FlashingCellScopeSummaryView = exports.FlashingCellScopeSummaryContent = exports.FlashingAlertScopeWizardSection = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
@@ -10,26 +10,31 @@ const Flex_1 = require("../../../components/Flex");
 const ColumnScope_1 = require("../../../AdaptableState/Common/ColumnScope");
 const FlashingAlertScopeWizardSection = (props) => {
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    const availableColumns = React.useMemo(() => api.columnApi.getNonSpecialColumns(), []);
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full", children: (0, jsx_runtime_1.jsx)(NewScopeComponent_1.NewScopeComponent, { descriptions: {
-                rowScope: 'Changes anywhere in the row will trigger an Flashing Cell',
-                columnScope: 'Changes in selected columns will trigger an Flashing Cell',
-            }, scopeColumns: availableColumns, scope: data.Scope, updateScope: (Scope) => {
-                const newData = { ...data, Scope };
-                if (newData.Rule.Predicates) {
-                    const validPredicateIds = new Set(api.flashingCellApi.getFlashingCellPredicateDefsForScope(Scope).map((def) => def.id));
-                    newData.Rule = {
-                        Predicates: newData.Rule.Predicates.filter((p) => validPredicateIds.has(p.PredicateId)).filter((predicate) => {
-                            // if there are more than 1 column, then we must eliminate the IN/NotIn predicates
-                            // TODO: this should NOT be required, but the ColumnValueSelector does NOT support creatable values right now
-                            if ((0, ColumnScope_1.isScopeColumnIds)(Scope) && Scope.ColumnIds.length > 1) {
-                                return predicate.PredicateId !== 'In' && predicate.PredicateId !== 'NotIn';
-                            }
-                            return true;
-                        }),
-                    };
-                }
-                props.onChange(newData);
-            } }) }));
+    const availableColumns = React.useMemo(() => api.columnApi
+        .getUIAvailableColumns()
+        .filter((column) => !column.isActionColumn && !api.columnApi.isFdc3Column(column.columnId)), [api]);
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2 twa:gap-3 twa:border-b twa:mb-2 twa:border-b-foreground/20", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-5 twa:font-medium", children: "Columns" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[520px]", children: "Specify which data changes should trigger cell flashing" })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto twa:p-2", children: (0, jsx_runtime_1.jsx)(NewScopeComponent_1.NewScopeComponent, { descriptions: {
+                        rowScope: 'Changes anywhere in the row will trigger a Flashing Cell',
+                        columnScope: 'Changes in selected columns will trigger a Flashing Cell',
+                        dataTypeScope: 'Changes in columns with these Data Types will trigger a Flashing Cell',
+                    }, scopeColumns: availableColumns, scope: data.Scope, updateScope: (Scope) => {
+                        const newData = { ...data, Scope };
+                        if (newData.Rule.Predicates) {
+                            const validPredicateIds = new Set(api.flashingCellApi.getFlashingCellPredicateDefsForScope(Scope).map((def) => def.id));
+                            newData.Rule = {
+                                Predicates: newData.Rule.Predicates.filter((p) => validPredicateIds.has(p.PredicateId)).filter((predicate) => {
+                                    if ((0, ColumnScope_1.isScopeColumnIds)(Scope) && Scope.ColumnIds.length > 1) {
+                                        return predicate.PredicateId !== 'In' && predicate.PredicateId !== 'NotIn';
+                                    }
+                                    return true;
+                                }),
+                            };
+                        }
+                        props.onChange(newData);
+                    } }) })] }));
 };
 exports.FlashingAlertScopeWizardSection = FlashingAlertScopeWizardSection;
+var FlashingCellScopeSummary_1 = require("./FlashingCellScopeSummary");
+Object.defineProperty(exports, "FlashingCellScopeSummaryContent", { enumerable: true, get: function () { return FlashingCellScopeSummary_1.FlashingCellScopeSummaryContent; } });
+Object.defineProperty(exports, "FlashingCellScopeSummaryView", { enumerable: true, get: function () { return FlashingCellScopeSummary_1.FlashingCellScopeSummaryView; } });
+Object.defineProperty(exports, "renderFlashingCellScopeSummary", { enumerable: true, get: function () { return FlashingCellScopeSummary_1.renderFlashingCellScopeSummary; } });

package/src/View/FlashingCell/Wizard/FlashingCellSettingsWizardSection.js

@@ -7,14 +7,14 @@ const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const usePrevious_1 = tslib_1.__importDefault(require("../../../components/utils/usePrevious"));
-const Tabs_1 = require("../../../components/Tabs");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const CodeBlock_1 = require("../../../components/CodeBlock");
-const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const CheckBox_1 = require("../../../components/CheckBox");
 const Flex_1 = require("../../../components/Flex");
 const Tag_1 = require("../../../components/Tag");
 const OnePageAdaptableWizard_2 = require("../../Wizard/OnePageAdaptableWizard");
+const Card_1 = require("../../../components/Card");
+const TypeRadio_1 = require("../../Wizard/TypeRadio");
 const isSettingsValid = (data, api) => {
     if (!data.Name?.trim()) {
         return 'Name is required';
@@ -27,8 +27,17 @@ const isSettingsValid = (data, api) => {
     return true;
 };
 exports.isSettingsValid = isSettingsValid;
+const formatFlashTarget = (flashTarget) => {
+    if (!flashTarget) {
+        return 'Not specified';
+    }
+    if (typeof flashTarget === 'string') {
+        return flashTarget;
+    }
+    return flashTarget.join(', ');
+};
 const renderFlashingAlertSettingsSummary = (flashingAlert) => {
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(OnePageAdaptableWizard_2.SummaryText, { children: ["Name ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: flashingAlert.Name || 'Not specified' })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2", children: flashingAlert.FlashDuration === 'always' ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Flashing is never removed" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Flashing is removed after ", (0, jsx_runtime_1.jsx)(CodeBlock_1.CodeBlock, { children: flashingAlert.FlashDuration }), ' ', "milliseconds"] })) })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(OnePageAdaptableWizard_2.SummaryText, { children: ["Name ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: flashingAlert.Name || 'Not specified' })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2", children: flashingAlert.FlashDuration === 'always' ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Flashing is never removed" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Flashing is removed after ", (0, jsx_runtime_1.jsx)(CodeBlock_1.CodeBlock, { children: flashingAlert.FlashDuration }), ' ', "milliseconds"] })) }), (0, jsx_runtime_1.jsxs)(OnePageAdaptableWizard_2.SummaryText, { children: ["Flash Target ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: formatFlashTarget(flashingAlert.FlashTarget) })] })] }));
 };
 exports.renderFlashingAlertSettingsSummary = renderFlashingAlertSettingsSummary;
 const FlashingAlertSettingsWizardSection = (props) => {
@@ -52,7 +61,7 @@ const FlashingAlertSettingsWizardSection = (props) => {
             inputRef.current?.focus();
         }
     }, [duration, oldDuration]);
-    const handleTypeChange = (type) => {
+    const handleDurationTypeChange = (type) => {
         setDuration(type === 'number' ? numberDuration.current : 'always');
     };
     const handleTargetChange = (type, checked) => {
@@ -73,12 +82,12 @@ const FlashingAlertSettingsWizardSection = (props) => {
             FlashTarget,
         });
     };
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", "data-name": "plus-minus-column-settings", className: "twa:h-full", children: [(0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { autoFocus: false, className: "twa:p-2", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Flashing Cell Settings" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Name", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "flashing-cell-name", className: "twa:flex-1 twa:mr-3", onChange: handleNameChange, placeholder: "Enter Name", value: flashingCell.Name ?? '' }) }) }) })] }), (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { autoFocus: false, className: "twa:p-2", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Flash Duration" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "duration-always", checked: duration === 'always', onChange: (checked) => handleTypeChange(checked ? 'always' : 'number'), className: "twa:mr-4", tabIndex: -1, children: "Always" }), duration !== 'always' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "duration-input", readOnly: props.readOnly, type: "number", name: "value", ref: inputRef, className: "twa:w-20 twa:mr-2", value: duration, onChange: (event) => {
-                                                        const value = event.target.value;
-                                                        setDuration(isNaN(Number(value)) ? 500 : Number(value));
-                                                    } }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2", children: "ms" })] }))] }) }) }) })] }), ' ', (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { autoFocus: false, className: "twa:p-2", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Flash Target" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "flashing-target", onChange: (checked) => handleTargetChange('cell', checked), className: "twa:mr-3", checked: flashingCell?.FlashTarget === 'cell' ||
-                                            flashingCell?.FlashTarget?.includes?.('cell'), tabIndex: -1, children: "Cell" }), (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "flashing-target-row", className: "twa:mr-3", onChange: (checked) => handleTargetChange('row', checked), checked: flashingCell?.FlashTarget === 'row' ||
-                                            flashingCell?.FlashTarget?.includes?.('row'), tabIndex: -1, children: "Row" }), (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "flashing-target-aggFuncCell", onChange: (checked) => handleTargetChange('aggFuncCell', checked), checked: flashingCell?.FlashTarget === 'aggFuncCell' ||
-                                            flashingCell?.FlashTarget?.includes?.('aggFuncCell'), tabIndex: -1, children: "Aggregated Function Cell" })] }) }) })] })] }));
+    const isTargetChecked = (type) => flashingCell?.FlashTarget === type || flashingCell?.FlashTarget?.includes?.(type);
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": "flashing-cell-settings", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Name" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the Flashing Cell rule" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "flashing-cell-name", className: "twa:max-w-[300px] twa:w-full", onChange: handleNameChange, placeholder: "Enter Name", value: flashingCell.Name ?? '' }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Flash Duration" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose how long the flash style remains visible after a change" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3", children: [(0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { "data-name": "duration-always", text: "Always", description: "The flash style is never removed automatically", checked: duration === 'always', onClick: () => handleDurationTypeChange('always') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { "data-name": "duration-timed", text: "Timed", description: "The flash style is removed after a set number of milliseconds", checked: duration !== 'always', onClick: () => handleDurationTypeChange('number') }), duration !== 'always' ? ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:ml-6", children: [(0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "duration-input", readOnly: props.readOnly, type: "number", name: "value", ref: inputRef, className: "twa:w-24 twa:mr-2", value: duration, onChange: (event) => {
+                                                    const value = event.target.value;
+                                                    const parsed = Number(value);
+                                                    numberDuration.current = isNaN(parsed) ? 500 : parsed;
+                                                    setDuration(numberDuration.current);
+                                                } }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2", children: "ms" })] })) : null] }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Flash Target" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose which parts of the grid flash when a change occurs" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "flashing-target", onChange: (checked) => handleTargetChange('cell', checked), checked: isTargetChecked('cell'), children: "Cell" }), (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "flashing-target-row", onChange: (checked) => handleTargetChange('row', checked), checked: isTargetChecked('row'), children: "Row" }), (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "flashing-target-aggFuncCell", onChange: (checked) => handleTargetChange('aggFuncCell', checked), checked: isTargetChecked('aggFuncCell'), children: "Aggregated Function Cell" })] }) })] })] }) }));
 };
 exports.FlashingAlertSettingsWizardSection = FlashingAlertSettingsWizardSection;

package/src/View/FlashingCell/Wizard/FlashingCellStyleWizardSection.d.ts

@@ -1,15 +1,10 @@
 import * as React from 'react';
 import { AdaptableStyle } from '../../../types';
 import { FlashingCellDefinition } from '../../../../types';
-import { BoxProps } from '../../../components/Flex';
 type FlashingAlertStyleWizardSectionProps = {
     flashingAlert?: FlashingCellDefinition;
     onStyleChange: (styleName: 'UpChangeStyle' | 'DownChangeStyle' | 'NeutralChangeStyle', style: AdaptableStyle) => void;
 };
 export declare const FlashingAlertStyleWizardSection: (props: FlashingAlertStyleWizardSectionProps) => React.JSX.Element;
-export interface FlashingCellStyleProps extends Omit<BoxProps & {}, 'data'> {
-    data: FlashingCellDefinition;
-}
-export declare const FlashingCellStyle: React.FunctionComponent<FlashingCellStyleProps>;
 export declare const renderFlashingAlertStyleSummary: (flashingAlert: FlashingCellDefinition) => React.JSX.Element;
 export {};

package/src/View/FlashingCell/Wizard/FlashingCellStyleWizardSection.js

@@ -1,25 +1,36 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderFlashingAlertStyleSummary = exports.FlashingCellStyle = exports.FlashingAlertStyleWizardSection = void 0;
+exports.renderFlashingAlertStyleSummary = exports.FlashingAlertStyleWizardSection = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const Tabs_1 = require("../../../components/Tabs");
 const StyleComponent_1 = require("../../Components/StyleComponent");
-const StylePreview_1 = require("../../../components/StylePreview");
 const Flex_1 = require("../../../components/Flex");
-const changeStyle = (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2 twa:inline-block", children: "Change style" });
+const Card_1 = require("../../../components/Card");
+const FlashingCellStyle_1 = require("../FlashingCellStyle");
+const FLASH_STYLE_CARDS = [
+    {
+        key: 'UpChangeStyle',
+        title: 'Up Change Style',
+        description: 'Style applied when a cell value increases',
+    },
+    {
+        key: 'DownChangeStyle',
+        title: 'Down Change Style',
+        description: 'Style applied when a cell value decreases',
+    },
+    {
+        key: 'NeutralChangeStyle',
+        title: 'Neutral Change Style',
+        description: 'Style applied when a cell value changes but not up or down (e.g. text edits)',
+    },
+];
 const FlashingAlertStyleWizardSection = (props) => {
     let { data: flashingAlert, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     flashingAlert = flashingAlert ?? props.flashingAlert;
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { defaultValue: "up", children: [(0, jsx_runtime_1.jsxs)(Tabs_1.Tabs.Tab, { value: "up", children: ["Up ", changeStyle] }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "up", children: (0, jsx_runtime_1.jsx)(StyleComponent_1.StyleComponent, { headless: true, api: api, Style: flashingAlert.UpChangeStyle ?? {}, UpdateStyle: (style) => props.onStyleChange('UpChangeStyle', style) }) }), (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs.Tab, { value: "down", children: ["Down ", changeStyle] }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "down", children: (0, jsx_runtime_1.jsx)(StyleComponent_1.StyleComponent, { headless: true, api: api, Style: flashingAlert.DownChangeStyle ?? {}, UpdateStyle: (style) => props.onStyleChange('DownChangeStyle', style) }) }), (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs.Tab, { value: "neutral", children: ["Neutral ", changeStyle] }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "neutral", children: (0, jsx_runtime_1.jsx)(StyleComponent_1.StyleComponent, { headless: true, api: api, Style: flashingAlert.NeutralChangeStyle ?? {}, UpdateStyle: (style) => props.onStyleChange('NeutralChangeStyle', style) }) })] }) }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: FLASH_STYLE_CARDS.map(({ key, title, description }) => ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: title }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: description })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(StyleComponent_1.StyleComponent, { headless: true, api: api, Style: flashingAlert[key] ?? {}, UpdateStyle: (style) => props.onStyleChange(key, style) }) })] }, key))) }));
 };
 exports.FlashingAlertStyleWizardSection = FlashingAlertStyleWizardSection;
-const FlashingCellStyle = (props) => {
-    const { data, ...boxProps } = props;
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { ...boxProps, children: [(0, jsx_runtime_1.jsxs)(StylePreview_1.StylePreview, { styleObject: props.data.UpChangeStyle, children: ["Up change style ", !props.data.UpChangeStyle ? ' - no style' : ''] }), (0, jsx_runtime_1.jsxs)(StylePreview_1.StylePreview, { styleObject: props.data.DownChangeStyle, className: "twa:mt-2", children: ["Down change style ", !props.data.DownChangeStyle ? ' - no style' : ''] }), (0, jsx_runtime_1.jsxs)(StylePreview_1.StylePreview, { styleObject: props.data.NeutralChangeStyle, className: "twa:mt-2", children: ["Neutral change style ", !props.data.NeutralChangeStyle ? ' - no style' : ''] })] }));
-};
-exports.FlashingCellStyle = FlashingCellStyle;
 const renderFlashingAlertStyleSummary = (flashingAlert) => {
-    return (0, jsx_runtime_1.jsx)(exports.FlashingCellStyle, { data: flashingAlert });
+    return (0, jsx_runtime_1.jsx)(FlashingCellStyle_1.FlashingCellStyle, { data: flashingAlert });
 };
 exports.renderFlashingAlertStyleSummary = renderFlashingAlertStyleSummary;