@adaptabletools/adaptable-cjs 23.0.0-canary.5 → 23.0.0-canary.7

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,18 +3,14 @@ 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 Flex_1 = require("../../../components/Flex");
 const Card_1 = require("../../../components/Card");
-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 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) => {

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"));
@@ -34,3 +34,7 @@ const FlashingAlertScopeWizardSection = (props) => {
                     } }) })] }));
 };
 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/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,12 +1,12 @@
 "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 StyleComponent_1 = require("../../Components/StyleComponent");
-const StylePreview_1 = require("../../../components/StylePreview");
 const Flex_1 = require("../../../components/Flex");
 const Card_1 = require("../../../components/Card");
+const FlashingCellStyle_1 = require("../FlashingCellStyle");
 const FLASH_STYLE_CARDS = [
     {
         key: 'UpChangeStyle',
@@ -30,12 +30,7 @@ const FlashingAlertStyleWizardSection = (props) => {
     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;

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

@@ -10,7 +10,6 @@ const Helper_1 = require("../../../Utilities/Helpers/Helper");
 const FlashingCellRulesWizardSection_1 = require("./FlashingCellRulesWizardSection");
 const FlashingCellStyleWizardSection_1 = require("./FlashingCellStyleWizardSection");
 const FlashingCellScopeWizardSection_1 = require("./FlashingCellScopeWizardSection");
-const BaseAlertScopeWizardSection_1 = require("../../Alert/Wizard/BaseAlertScopeWizardSection");
 const AdaptableContext_1 = require("../../AdaptableContext");
 const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
 const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
@@ -75,7 +74,7 @@ const FlashingCellWizard = (props) => {
                 details: 'Specify which data changes should trigger Cell Flashing',
                 isValid: NewScopeComponent_1.isScopeValid,
                 render: () => (0, jsx_runtime_1.jsx)(FlashingCellScopeWizardSection_1.FlashingAlertScopeWizardSection, { onChange: setFlashingCell }),
-                renderSummary: BaseAlertScopeWizardSection_1.renderScopeSummary,
+                renderSummary: FlashingCellScopeWizardSection_1.renderFlashingCellScopeSummary,
                 title: 'Columns',
             },
             {

package/src/View/FormatColumn/Wizard/FormatColumnFormatWizardSection.d.ts

@@ -16,7 +16,7 @@ type DisplayFormatSummaryItem = {
 };
 export declare const getFormatColumnDisplayFormatSummaryItems: (data: FormatColumn) => DisplayFormatSummaryItem[];
 export declare const hasFormatColumnDisplayFormat: (data: FormatColumn) => boolean;
-export declare const getFormatColumnFormatSummaryValue: (data: FormatColumn) => string;
+export declare const getFormatColumnFormatSummaryTagValues: (data: FormatColumn) => string[];
 export declare const renderFormatColumnFormatSummary: (data: FormatColumn) => React.JSX.Element;
 export declare const getFormatDisplayTypeForScope: (scope: ColumnScope, api: AdaptableApi) => "number" | "date" | "text" | undefined;
 export declare const FormatColumnFormatWizardSection: (props: FormatColumnFormatWizardSectionProps) => React.JSX.Element;

package/src/View/FormatColumn/Wizard/FormatColumnFormatWizardSection.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormatColumnFormatWizardSection = exports.getFormatDisplayTypeForScope = exports.renderFormatColumnFormatSummary = exports.getFormatColumnFormatSummaryValue = exports.hasFormatColumnDisplayFormat = exports.getFormatColumnDisplayFormatSummaryItems = void 0;
+exports.FormatColumnFormatWizardSection = exports.getFormatDisplayTypeForScope = exports.renderFormatColumnFormatSummary = exports.getFormatColumnFormatSummaryTagValues = exports.hasFormatColumnDisplayFormat = exports.getFormatColumnDisplayFormatSummaryItems = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
 const uniq_1 = tslib_1.__importDefault(require("../../../Utilities/utils/uniq"));
 const clamp_1 = tslib_1.__importDefault(require("../../../Utilities/utils/clamp"));
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
@@ -26,6 +27,8 @@ const DocumentationLinkConstants_1 = require("../../../Utilities/Constants/Docum
 const AdaptableColumn_1 = require("../../../AdaptableState/Common/AdaptableColumn");
 const Flex_1 = require("../../../components/Flex");
 const Card_1 = require("../../../components/Card");
+const ObjectExtensions_1 = require("../../../Utilities/Extensions/ObjectExtensions");
+const InfiniteTable_1 = require("../../../components/InfiniteTable");
 const DateFormatPresets = [
     'MM/dd/yyyy',
     'dd-MM-yyyy',
@@ -65,6 +68,12 @@ const appendNumberFormatOptions = (items, options) => {
     appendDisplayFormatItem(items, 'Integer Separator', options.IntegerSeparator);
     appendDisplayFormatItem(items, 'Prefix', options.Prefix);
     appendDisplayFormatItem(items, 'Suffix', options.Suffix);
+    if (options.ZeroDisplay !== undefined && options.ZeroDisplay !== '0') {
+        items.push({
+            label: 'Zero Display',
+            value: options.ZeroDisplay === '' ? 'Blank' : options.ZeroDisplay,
+        });
+    }
     appendDisplayFormatItem(items, 'Content', options.Content);
     if (options.Multiplier != null && options.Multiplier !== 1) {
         items.push({ label: 'Multiplier', value: String(options.Multiplier) });
@@ -105,7 +114,14 @@ const getFormatColumnDisplayFormatSummaryItems = (data) => {
         return [];
     }
     if ((0, AdaptableFormatPresets_1.isAdaptableNumericFormatPreset)(data.DisplayFormat)) {
-        return [{ label: '', value: `${NUMERIC_PRESET_LABELS[data.DisplayFormat]} Preset` }];
+        return [{ label: 'Preset', value: NUMERIC_PRESET_LABELS[data.DisplayFormat] }];
+    }
+    // Wizard materialises an empty { Formatter, Options: {} } shell while editing;
+    // treat it as unset (same as handleFinish in FormatColumnWizard).
+    if (data.DisplayFormat &&
+        typeof data.DisplayFormat === 'object' &&
+        (0, ObjectExtensions_1.isObjectEmpty)(data.DisplayFormat.Options)) {
+        return [];
     }
     const resolved = (0, AdaptableFormatPresets_1.resolveDisplayFormat)(data.DisplayFormat);
     if (!resolved) {
@@ -114,9 +130,6 @@ const getFormatColumnDisplayFormatSummaryItems = (data) => {
     const items = [];
     if (resolved.Formatter === 'NumberFormatter') {
         appendNumberFormatOptions(items, resolved.Options);
-        if (!items.length) {
-            items.push({ label: '', value: 'Number Format' });
-        }
         return items;
     }
     if (resolved.Formatter === 'DateFormatter') {
@@ -128,16 +141,10 @@ const getFormatColumnDisplayFormatSummaryItems = (data) => {
                 value: options.CustomDisplayFormats.join(', '),
             });
         }
-        if (!items.length) {
-            items.push({ label: '', value: 'Date Format' });
-        }
         return items;
     }
     if (resolved.Formatter === 'StringFormatter') {
         appendStringFormatOptions(items, resolved.Options);
-        if (!items.length) {
-            items.push({ label: '', value: 'String Format' });
-        }
         return items;
     }
     return items;
@@ -145,16 +152,14 @@ const getFormatColumnDisplayFormatSummaryItems = (data) => {
 exports.getFormatColumnDisplayFormatSummaryItems = getFormatColumnDisplayFormatSummaryItems;
 const hasFormatColumnDisplayFormat = (data) => (0, exports.getFormatColumnDisplayFormatSummaryItems)(data).length > 0;
 exports.hasFormatColumnDisplayFormat = hasFormatColumnDisplayFormat;
-const getFormatColumnFormatSummaryValue = (data) => {
+const getFormatColumnFormatSummaryTagValues = (data) => {
     const items = (0, exports.getFormatColumnDisplayFormatSummaryItems)(data);
     if (!items.length) {
-        return 'No Display Format';
+        return [];
     }
-    return items
-        .map(({ label, value }) => (label ? `${label}: ${value}` : value))
-        .join(', ');
+    return items.map(({ label, value }) => (label ? `${label}: ${value}` : value));
 };
-exports.getFormatColumnFormatSummaryValue = getFormatColumnFormatSummaryValue;
+exports.getFormatColumnFormatSummaryTagValues = getFormatColumnFormatSummaryTagValues;
 const renderCustomFormatter = (data, customFormatter, setFormatOption) => {
     const resolved = (0, AdaptableFormatPresets_1.resolveDisplayFormat)(data.DisplayFormat);
     return ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: customFormatter.label ?? customFormatter.id, children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": customFormatter.id, checked: resolved?.Options.CustomDisplayFormats?.some?.((item) => item === customFormatter.id), onChange: (checked) => {
@@ -169,14 +174,11 @@ const renderCustomFormatter = (data, customFormatter, setFormatOption) => {
             } }) }, customFormatter.id));
 };
 const renderFormatColumnFormatSummary = (data) => {
-    const items = (0, exports.getFormatColumnDisplayFormatSummaryItems)(data);
-    if (!items.length) {
+    const tagValues = (0, exports.getFormatColumnFormatSummaryTagValues)(data);
+    if (!tagValues.length) {
         return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Display Format" });
     }
-    if (items.length === 1 && !items[0].label) {
-        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: items[0].value });
-    }
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex twa:flex-col twa:gap-2", children: items.map(({ label, value }) => ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [label, " ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: value })] }, label))) }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: tagValues.map((tag) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: tag }, tag))) }));
 };
 exports.renderFormatColumnFormatSummary = renderFormatColumnFormatSummary;
 const getFormatDisplayTypeForScope = (scope, api) => {
@@ -275,27 +277,61 @@ const getFormatDisplayTypeForScope = (scope, api) => {
     return undefined;
 };
 exports.getFormatDisplayTypeForScope = getFormatDisplayTypeForScope;
+const NUMBER_FORMAT_INPUT_CLASS = 'twa:w-[72px] twa:min-w-[72px] twa:max-w-[72px]';
+const NUMBER_FORMAT_LABEL_COLUMN = {
+    name: 'label',
+    className: 'ab-FormLayout_column--label twa:whitespace-nowrap',
+};
+const NUMBER_FORMAT_CHECKBOX_CHILDREN_COLUMN = {
+    name: 'children',
+    className: 'twa:pl-2',
+};
+const NUMBER_FORMAT_VALUE_CHILDREN_COLUMN = {
+    name: 'children',
+    className: 'twa:pl-2',
+};
+const NUMBER_FORMAT_DIGIT_FORM_SIZES = ['148px', '72px'];
+const NUMBER_FORMAT_VALUE_FORM_SIZES = ['92px', '72px'];
+const NUMBER_FORMAT_CHECKBOX_FORM_SIZES = ['72px', 'auto'];
+const DATE_FORMAT_PRESET_ROW_HEIGHT = 32;
+const DATE_FORMAT_PRESET_HEADER_HEIGHT = 40;
+const DateFormatPresetsTable = ({ onApplyPattern }) => {
+    const rows = React.useMemo(() => DateFormatPresets.map((pattern) => ({
+        pattern,
+        formattedDate: FormatHelper_1.default.DateFormatter(new Date(), { Pattern: pattern }) ?? '',
+    })), []);
+    const columns = React.useMemo(() => ({
+        pattern: {
+            field: 'pattern',
+            header: 'Pattern',
+            defaultFlex: 1,
+            renderMenuIcon: false,
+        },
+        formattedDate: {
+            field: 'formattedDate',
+            header: 'Formatted Date',
+            defaultFlex: 1,
+            renderMenuIcon: false,
+        },
+        apply: {
+            field: 'pattern',
+            header: '',
+            defaultWidth: 80,
+            align: 'center',
+            renderMenuIcon: false,
+            render: ({ data }) => ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "data-name": "apply-format-pattern", "data-value": data.pattern, onClick: () => onApplyPattern(data.pattern), children: "Apply" })),
+        },
+    }), [onApplyPattern]);
+    const tableHeight = DATE_FORMAT_PRESET_HEADER_HEIGHT + rows.length * DATE_FORMAT_PRESET_ROW_HEIGHT;
+    return ((0, jsx_runtime_1.jsx)(InfiniteTable_1.DataSource, { data: rows, primaryKey: "pattern", children: (0, jsx_runtime_1.jsx)(InfiniteTable_1.InfiniteTableGrid, { sortable: false, domProps: { style: { height: tableHeight, width: '100%' } }, columns: columns }) }));
+};
 const renderDateFormat = (data, _onChange, setFormatOption, scopedCustomFormatters) => {
     const resolved = (0, AdaptableFormatPresets_1.resolveDisplayFormat)(data.DisplayFormat);
     if (resolved?.Formatter !== 'DateFormatter') {
         return null;
     }
-    return ((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: "Format" }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: ["Either create your own date pattern, or pick one of the presets below \u2014 see the", ' ', (0, jsx_runtime_1.jsx)("a", { href: "https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table", target: "_blank", children: "available symbols" }), "."] })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Pattern", children: [(0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "pattern", value: resolved.Options.Pattern ?? '', onChange: (e) => setFormatOption('Pattern', e.currentTarget.value), className: "twa:mr-2" }), (0, jsx_runtime_1.jsx)("span", { children: resolved.Options.Pattern &&
-                                            FormatHelper_1.default.DateFormatter(new Date(), resolved.Options, true) })] }) }) })] }), scopedCustomFormatters.length > 0 && ((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: "Custom Formats" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Apply a developer-defined formatter to this Column" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { children: scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption)) }) })] })), (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: "Presets" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Apply a common date pattern as a starting point" })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { children: [(0, jsx_runtime_1.jsx)(AdaptableObjectRow_1.AdaptableObjectRow, { style: { fontWeight: 'bold' }, colItems: [
-                                    { Content: 'Pattern', Size: 1 },
-                                    { Content: 'Formatted Date', Size: 1 },
-                                    { Content: '', Size: 1 },
-                                ] }), DateFormatPresets.map((Pattern, index) => ((0, jsx_runtime_1.jsx)(AdaptableObjectRow_1.AdaptableObjectRow, { colItems: [
-                                    { Content: Pattern, Size: 1 },
-                                    {
-                                        Content: FormatHelper_1.default.DateFormatter(new Date(), { Pattern }),
-                                        Size: 1,
-                                    },
-                                    {
-                                        Content: ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "data-name": "apply-format-pattern", "data-value": Pattern, onClick: () => setFormatOption('Pattern', Pattern), children: "Apply" })),
-                                        Size: 1,
-                                    },
-                                ] }, index)))] })] })] }));
+    return ((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: "Format" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Enter a Unicode date pattern (e.g. dd/MM/yyyy), or pick a preset below" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Pattern", children: [(0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "pattern", value: resolved.Options.Pattern ?? '', onChange: (e) => setFormatOption('Pattern', e.currentTarget.value), className: "twa:mr-2" }), (0, jsx_runtime_1.jsx)("span", { children: resolved.Options.Pattern &&
+                                            FormatHelper_1.default.DateFormatter(new Date(), resolved.Options, true) })] }) }) })] }), scopedCustomFormatters.length > 0 && ((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: "Custom Formats" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Apply a developer-defined formatter to this Column" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { children: scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption)) }) })] })), (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: "Presets" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Apply a common date pattern as a starting point" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:px-0 twa:pt-0 twa:pb-1", children: (0, jsx_runtime_1.jsx)(DateFormatPresetsTable, { onApplyPattern: (pattern) => setFormatOption('Pattern', pattern) }) })] })] }));
 };
 const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatters, api) => {
     const resolved = (0, AdaptableFormatPresets_1.resolveDisplayFormat)(data.DisplayFormat);
@@ -309,7 +345,9 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
     const setPreset = (preset) => {
         onChange({ DisplayFormat: preset });
     };
-    const activePreset = (0, AdaptableFormatPresets_1.isAdaptableNumericFormatPreset)(data.DisplayFormat) ? data.DisplayFormat : undefined;
+    const activePreset = (0, AdaptableFormatPresets_1.isAdaptableNumericFormatPreset)(data.DisplayFormat)
+        ? data.DisplayFormat
+        : undefined;
     const IS_PERCENT = activePreset === 'Percentage';
     const IS_THOUSAND = activePreset === 'Thousand';
     const IS_MILLION = activePreset === 'Million';
@@ -326,13 +364,27 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
     const IS_FX_RATE = activePreset === 'FXRate';
     const IS_SCIENTIFIC = activePreset === 'Scientific';
     const showDocumentationLinks = api.internalApi.isDocumentationLinksDisplayed();
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", "data-name": 'format-column-display-format', 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: "Presets" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Pick a common numeric preset as a starting point" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: "twa:m-2", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:mr-6", children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "preset-dollar", className: "twa:my-1", checked: IS_DOLLAR, onChange: () => setPreset('Dollar'), children: "Dollar" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "preset-sterling", className: "twa:my-1", checked: IS_STERLING, onChange: () => setPreset('Sterling'), children: "Sterling" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "preset-euro", className: "twa:my-1", checked: IS_EURO, onChange: () => setPreset('Euro'), children: "Euro" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "preset-yen", className: "twa:my-1", checked: IS_YEN, onChange: () => setPreset('Yen'), children: "Yen" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:mr-6", children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "preset-thousand", className: "twa:my-1", checked: IS_THOUSAND, onChange: () => setPreset('Thousand'), children: "K (Thousand)" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "preset-million", className: "twa:my-1", checked: IS_MILLION, onChange: () => setPreset('Million'), children: "M (Million)" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "preset-billion", className: "twa:my-1", checked: IS_BILLION, onChange: () => setPreset('Billion'), children: "B (Billion)" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "preset-basis-points", className: "twa:my-1", checked: IS_BASIS_POINTS, onChange: () => setPreset('BasisPoints'), children: "bps (Basis Pts)" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:mr-6", children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "preset-integer", className: "twa:my-1", checked: IS_INTEGER, onChange: () => setPreset('Integer'), children: "Integer" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "preset-decimal", className: "twa:my-1", checked: IS_DECIMAL, onChange: () => setPreset('Decimal'), children: "Decimal" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "preset-percentage", className: "twa:my-1", checked: IS_PERCENT, onChange: () => setPreset('Percentage'), children: "Percentage" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "preset-scientific", className: "twa:my-1", checked: IS_SCIENTIFIC, onChange: () => setPreset('Scientific'), children: "Scientific" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "preset-accounting", className: "twa:my-1", checked: IS_ACCOUNTING, onChange: () => setPreset('Accounting'), children: "Accounting" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "preset-fx-rate", className: "twa:my-1", checked: IS_FX_RATE, onChange: () => setPreset('FXRate'), children: "FX Rate" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "preset-bitcoin", className: "twa:my-1", checked: IS_BITCOIN, onChange: () => setPreset('Bitcoin'), children: "Bitcoin" })] })] }) })] }), (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: "Fine-tune digits, separators, prefix / suffix and rounding behaviour" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.default, { className: "twa:mr-3", children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Fraction Digits", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "fraction-digits", type: "number", min: "0", value: typeof resolved.Options.FractionDigits === 'number'
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", "data-name": 'format-column-display-format', 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: "Presets" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Pick a common numeric preset as a starting point" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: "twa:m-2", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:mr-6", children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "preset-dollar", className: "twa:my-1", checked: IS_DOLLAR, onChange: () => setPreset('Dollar'), children: "Dollar" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "preset-sterling", className: "twa:my-1", checked: IS_STERLING, onChange: () => setPreset('Sterling'), children: "Sterling" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "preset-euro", className: "twa:my-1", checked: IS_EURO, onChange: () => setPreset('Euro'), children: "Euro" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "preset-yen", className: "twa:my-1", checked: IS_YEN, onChange: () => setPreset('Yen'), children: "Yen" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:mr-6", children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "preset-thousand", className: "twa:my-1", checked: IS_THOUSAND, onChange: () => setPreset('Thousand'), children: "K (Thousand)" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "preset-million", className: "twa:my-1", checked: IS_MILLION, onChange: () => setPreset('Million'), children: "M (Million)" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "preset-billion", className: "twa:my-1", checked: IS_BILLION, onChange: () => setPreset('Billion'), children: "B (Billion)" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "preset-basis-points", className: "twa:my-1", checked: IS_BASIS_POINTS, onChange: () => setPreset('BasisPoints'), children: "bps (Basis Pts)" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:mr-6", children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "preset-integer", className: "twa:my-1", checked: IS_INTEGER, onChange: () => setPreset('Integer'), children: "Integer" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "preset-decimal", className: "twa:my-1", checked: IS_DECIMAL, onChange: () => setPreset('Decimal'), children: "Decimal" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "preset-percentage", className: "twa:my-1", checked: IS_PERCENT, onChange: () => setPreset('Percentage'), children: "Percentage" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "preset-scientific", className: "twa:my-1", checked: IS_SCIENTIFIC, onChange: () => setPreset('Scientific'), children: "Scientific" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "preset-accounting", className: "twa:my-1", checked: IS_ACCOUNTING, onChange: () => setPreset('Accounting'), children: "Accounting" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "preset-fx-rate", className: "twa:my-1", checked: IS_FX_RATE, onChange: () => setPreset('FXRate'), children: "FX Rate" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "preset-bitcoin", className: "twa:my-1", checked: IS_BITCOIN, onChange: () => setPreset('Bitcoin'), children: "Bitcoin" })] })] }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:pl-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: "Format" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Fine-tune digits, separators, prefix / suffix and rounding behaviour" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:px-0 twa:pt-0 twa:pb-1", children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:flex twa:flex-row twa:items-start twa:-ml-0.5", children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: NUMBER_FORMAT_DIGIT_FORM_SIZES, columns: [NUMBER_FORMAT_LABEL_COLUMN, { name: 'children' }], className: "twa:mr-6 twa:shrink-0", children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Fraction Digits", children: (0, jsx_runtime_1.jsx)(Input_1.default, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "fraction-digits", type: "number", min: "0", value: typeof resolved.Options.FractionDigits === 'number'
                                                     ? resolved.Options.FractionDigits
                                                     : '', onChange: (e) => setFormatOption('FractionDigits', StringExtensions_1.default.IsNumeric(e.currentTarget.value)
                                                     ? (0, clamp_1.default)(Number(e.currentTarget.value), 0, 20)
-                                                    : undefined) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Integer Digits", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "integer-digits", type: "number", min: "0", value: resolved.Options.IntegerDigits, onChange: (e) => setFormatOption('IntegerDigits', StringExtensions_1.default.IsNumeric(e.currentTarget.value)
+                                                    : undefined) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Integer Digits", children: (0, jsx_runtime_1.jsx)(Input_1.default, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "integer-digits", type: "number", min: "0", value: resolved.Options.IntegerDigits, onChange: (e) => setFormatOption('IntegerDigits', StringExtensions_1.default.IsNumeric(e.currentTarget.value)
                                                     ? (0, clamp_1.default)(Number(e.currentTarget.value), 0, 20)
-                                                    : undefined) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Fraction Separator", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "fraction-separator", value: resolved.Options.FractionSeparator ?? '', onChange: (e) => setFormatOption('FractionSeparator', e.currentTarget.value) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Integer Separator", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "integer-separator", value: resolved.Options.IntegerSeparator ?? '', onChange: (e) => setFormatOption('IntegerSeparator', e.currentTarget.value) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Multiplier", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "multiplier", type: "number", value: resolved.Options.Multiplier, onChange: (e) => setFormatOption('Multiplier', Number(e.currentTarget.value)) }) })] }), (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { className: "twa:mr-3", children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Prefix", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "prefix", value: resolved.Options.Prefix ?? '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Suffix", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "suffix", value: resolved.Options.Suffix ?? '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Parentheses", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "parentheses-checkbox", checked: resolved.Options.Parentheses, onChange: (checked) => setFormatOption('Parentheses', checked) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Empty", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "empty-checkbox", checked: resolved.Options.Empty, onChange: (checked) => setFormatOption('Empty', checked) }) })] }), (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Truncate", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "truncate-checkbox", checked: resolved.Options.Truncate, onChange: (checked) => setFormatOption('Truncate', checked) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Round", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "round-checkbox", checked: resolved.Options.Round, onChange: (checked) => setFormatOption('Round', checked) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Ceiling", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "ceiling-checkbox", checked: resolved.Options.Ceiling, onChange: (checked) => setFormatOption('Ceiling', checked) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Floor", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "floor-checkbox", checked: resolved.Options.Floor, onChange: (checked) => setFormatOption('Floor', checked) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Absolute", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "abs-checkbox", checked: resolved.Options.Abs, onChange: (checked) => setFormatOption('Abs', checked) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Scientific", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "scientific-checkbox", checked: resolved.Options.Notation === 'scientific', onChange: (checked) => setFormatOption('Notation', checked ? 'scientific' : undefined) }) })] })] }) })] }), scopedCustomFormatters.length > 0 && ((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: "Custom Formats" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Apply a developer-defined formatter to this Column" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { children: scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption)) }) }) })] })), (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: "Dynamic Content" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide dynamic content through the use of Placeholders" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { className: "twa:m-2", children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "", children: [(0, jsx_runtime_1.jsx)(Textarea_1.default, { className: "twa:min-w-[300px] twa:mt-2", rows: 3, placeholder: "", type: 'text', autoFocus: false, value: resolved.Options.Content?.toString() ?? '', onChange: (e) => setFormatOption('Content', e.currentTarget.value) }), showDocumentationLinks && ((0, jsx_runtime_1.jsxs)(HelpBlock_1.default, { "data-name": "query-documentation", className: "twa:mt-3 twa:mb-2 twa:p-0 twa:text-3", children: [(0, jsx_runtime_1.jsx)(ButtonInfo_1.ButtonInfo, { className: "twa:mr-2", onClick: () => window.open(DocumentationLinkConstants_1.FormatColumnPlaceholderDocsLink, '_blank') }), "Learn more about using placeholders"] }))] }), ' '] }) })] }), (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: "Examples" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Preview the formatter against sample values" })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { children: [(0, jsx_runtime_1.jsx)(AdaptableObjectRow_1.AdaptableObjectRow, { className: "twa:font-bold", colItems: [
+                                                    : undefined) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Fraction Separator", children: (0, jsx_runtime_1.jsx)(Input_1.default, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "fraction-separator", value: resolved.Options.FractionSeparator ?? '', onChange: (e) => setFormatOption('FractionSeparator', e.currentTarget.value) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Integer Separator", children: (0, jsx_runtime_1.jsx)(Input_1.default, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "integer-separator", value: resolved.Options.IntegerSeparator ?? '', onChange: (e) => setFormatOption('IntegerSeparator', e.currentTarget.value) }) })] }), (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: NUMBER_FORMAT_VALUE_FORM_SIZES, columns: [NUMBER_FORMAT_LABEL_COLUMN, NUMBER_FORMAT_VALUE_CHILDREN_COLUMN], className: "twa:mr-5 twa:shrink-0", children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Multiplier", children: (0, jsx_runtime_1.jsx)(Input_1.default, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "multiplier", type: "number", value: resolved.Options.Multiplier, onChange: (e) => setFormatOption('Multiplier', Number(e.currentTarget.value)) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Prefix", children: (0, jsx_runtime_1.jsx)(Input_1.default, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "prefix", value: resolved.Options.Prefix ?? '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Suffix", children: (0, jsx_runtime_1.jsx)(Input_1.default, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "suffix", value: resolved.Options.Suffix ?? '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Zero Display", children: (0, jsx_runtime_1.jsx)(Input_1.default, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "zero-display", value: resolved.Options.ZeroDisplay === undefined ||
+                                                    resolved.Options.ZeroDisplay === '0'
+                                                    ? '0'
+                                                    : resolved.Options.ZeroDisplay, onChange: (e) => {
+                                                    const value = e.currentTarget.value;
+                                                    if (value === '') {
+                                                        setFormatOption('ZeroDisplay', '');
+                                                    }
+                                                    else if (value === '0') {
+                                                        setFormatOption('ZeroDisplay', undefined);
+                                                    }
+                                                    else {
+                                                        setFormatOption('ZeroDisplay', value);
+                                                    }
+                                                } }) })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:gap-2 twa:shrink-0", children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: NUMBER_FORMAT_CHECKBOX_FORM_SIZES, columns: [NUMBER_FORMAT_LABEL_COLUMN, NUMBER_FORMAT_CHECKBOX_CHILDREN_COLUMN], children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Parentheses", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "parentheses-checkbox", checked: resolved.Options.Parentheses, onChange: (checked) => setFormatOption('Parentheses', checked) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Empty", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "empty-checkbox", checked: resolved.Options.Empty, onChange: (checked) => setFormatOption('Empty', checked) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Truncate", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "truncate-checkbox", checked: resolved.Options.Truncate, onChange: (checked) => setFormatOption('Truncate', checked) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Round", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "round-checkbox", checked: resolved.Options.Round, onChange: (checked) => setFormatOption('Round', checked) }) })] }), (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: NUMBER_FORMAT_CHECKBOX_FORM_SIZES, columns: [NUMBER_FORMAT_LABEL_COLUMN, { name: 'children' }], children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Ceiling", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "ceiling-checkbox", checked: resolved.Options.Ceiling, onChange: (checked) => setFormatOption('Ceiling', checked) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Floor", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "floor-checkbox", checked: resolved.Options.Floor, onChange: (checked) => setFormatOption('Floor', checked) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Absolute", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "abs-checkbox", checked: resolved.Options.Abs, onChange: (checked) => setFormatOption('Abs', checked) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Scientific", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "scientific-checkbox", checked: resolved.Options.Notation === 'scientific', onChange: (checked) => setFormatOption('Notation', checked ? 'scientific' : undefined) }) })] })] })] }) })] }), scopedCustomFormatters.length > 0 && ((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: "Custom Formats" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Apply a developer-defined formatter to this Column" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { children: scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption)) }) }) })] })), (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: "Dynamic Content" }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1 twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: "Provide dynamic content through the use of Placeholders" }), showDocumentationLinks && ((0, jsx_runtime_1.jsx)(ButtonInfo_1.ButtonInfo, { variant: "text", tone: "accent", tooltip: "Learn more about using placeholders", onClick: () => window.open(DocumentationLinkConstants_1.FormatColumnPlaceholderDocsLink, '_blank') }))] })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { className: "twa:m-2", children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "", children: (0, jsx_runtime_1.jsx)(Textarea_1.default, { className: "twa:min-w-[300px] twa:mt-2", rows: 3, placeholder: "", type: 'text', autoFocus: false, value: resolved.Options.Content?.toString() ?? '', onChange: (e) => setFormatOption('Content', e.currentTarget.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: "Examples" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Preview the formatter against sample values" })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { children: [(0, jsx_runtime_1.jsx)(AdaptableObjectRow_1.AdaptableObjectRow, { className: "twa:font-bold", colItems: [
                                     { Content: 'Raw Number', Size: 1 },
                                     { Content: 'Formatted Number', Size: 1 },
                                 ] }), (0, jsx_runtime_1.jsx)(AdaptableObjectRow_1.AdaptableObjectRow, { colItems: [
@@ -353,6 +405,12 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
                                         Content: FormatHelper_1.default.NumberFormatter(0.123, resolved.Options),
                                         Size: 1,
                                     },
+                                ] }), (0, jsx_runtime_1.jsx)(AdaptableObjectRow_1.AdaptableObjectRow, { colItems: [
+                                    { Content: '0', Size: 1 },
+                                    {
+                                        Content: FormatHelper_1.default.NumberFormatter(0, resolved.Options),
+                                        Size: 1,
+                                    },
                                 ] })] })] })] }));
 };
 const renderStringFormat = (data, _onChange, setFormatOption, scopedCustomFormatters, api) => {
@@ -377,7 +435,6 @@ const renderStringFormat = (data, _onChange, setFormatOption, scopedCustomFormat
 const FormatColumnFormatWizardSection = (props) => {
     const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const formatColumnApi = adaptable.api.formatColumnApi;
     const customDisplayFormatters = adaptable.api.optionsApi.getFormatColumnOptions().customDisplayFormatters ?? [];
     const update = (updated) => {
         props.onChange({ ...data, ...updated });

package/src/View/FormatColumn/Wizard/FormatColumnRuleWizardSection.d.ts

@@ -7,6 +7,5 @@ type FormatColumnRuleWizardSectionProps = {
 };
 export declare const hasFormatColumnCondition: (formatColumn: FormatColumn) => boolean;
 export declare const renderFormatColumnConditionSummary: (formatColumn: FormatColumn, api: AdaptableApi) => React.JSX.Element;
-export declare const renderFormatColumnConditionWizardSummary: (formatColumn: FormatColumn) => React.JSX.Element;
 export declare function FormatColumnRuleWizardSection(props: FormatColumnRuleWizardSectionProps): React.JSX.Element;
 export {};

package/src/View/FormatColumn/Wizard/FormatColumnRuleWizardSection.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderFormatColumnConditionWizardSummary = exports.renderFormatColumnConditionSummary = exports.hasFormatColumnCondition = void 0;
+exports.renderFormatColumnConditionSummary = exports.hasFormatColumnCondition = void 0;
 exports.FormatColumnRuleWizardSection = FormatColumnRuleWizardSection;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -35,11 +35,6 @@ const renderFormatColumnConditionSummary = (formatColumn, api) => {
     return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: expressionText || 'No Condition' });
 };
 exports.renderFormatColumnConditionSummary = renderFormatColumnConditionSummary;
-const renderFormatColumnConditionWizardSummary = (formatColumn) => {
-    const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    return (0, exports.renderFormatColumnConditionSummary)(formatColumn, api);
-};
-exports.renderFormatColumnConditionWizardSummary = renderFormatColumnConditionWizardSummary;
 function FormatColumnRuleWizardSection(props) {
     const { data, api, moduleInfo } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     if (data.Target && data.Target === 'columnHeader') {