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

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

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormatColumnFormatWizardSection = exports.getFormatDisplayTypeForScope = exports.renderFormatColumnFormatSummary = exports.getFormatColumnFormatSummaryValue = 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 uniq_1 = tslib_1.__importDefault(require("../../../Utilities/utils/uniq"));
-const clamp_1 = tslib_1.__importDefault(require("../../../Utilities/utils/clamp"));
+const React = tslib_1.__importStar(require("react"));
+const ArrayExtensions_1 = require("../../../Utilities/Extensions/ArrayExtensions");
+const NumberExtensions_1 = require("../../../Utilities/Extensions/NumberExtensions");
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
@@ -17,7 +18,7 @@ const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/StringExtensions"));
 const Tag_1 = require("../../../components/Tag");
 const AdaptableContext_1 = require("../../AdaptableContext");
-const FormatHelper_1 = tslib_1.__importDefault(require("../../../Utilities/Helpers/FormatHelper"));
+const DisplayFormatHelper_1 = tslib_1.__importDefault(require("../../../Utilities/Helpers/DisplayFormatHelper"));
 const Toggle_1 = require("../../../components/Toggle");
 const GeneralConstants_1 = require("../../../Utilities/Constants/GeneralConstants");
 const Textarea_1 = tslib_1.__importDefault(require("../../../components/Textarea"));
@@ -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',
@@ -35,26 +38,128 @@ const DateFormatPresets = [
     'yyyyMMdd',
     'HH:mm:ss',
 ];
-const getFormatColumnFormatSummaryValue = (data) => {
-    let content = 'N/A';
+const NUMERIC_PRESET_LABELS = {
+    Percentage: 'Percentage',
+    Thousand: 'K (Thousand)',
+    Million: 'M (Million)',
+    Billion: 'B (Billion)',
+    BasisPoints: 'bps (Basis Pts)',
+    Dollar: 'Dollar',
+    Sterling: 'Sterling',
+    Euro: 'Euro',
+    Yen: 'Yen',
+    Bitcoin: 'Bitcoin',
+    Integer: 'Integer',
+    Decimal: 'Decimal',
+    Accounting: 'Accounting',
+    FXRate: 'FX Rate',
+    Scientific: 'Scientific',
+};
+const appendDisplayFormatItem = (items, label, value) => {
+    if (value == null || value === '' || value === false) {
+        return;
+    }
+    items.push({ label, value: String(value) });
+};
+const appendNumberFormatOptions = (items, options) => {
+    appendDisplayFormatItem(items, 'Fraction Digits', options.FractionDigits);
+    appendDisplayFormatItem(items, 'Fraction Separator', options.FractionSeparator);
+    appendDisplayFormatItem(items, 'Integer Digits', options.IntegerDigits);
+    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) });
+    }
+    appendDisplayFormatItem(items, 'Parentheses', options.Parentheses);
+    appendDisplayFormatItem(items, 'Truncate', options.Truncate);
+    appendDisplayFormatItem(items, 'Absolute Value', options.Abs);
+    appendDisplayFormatItem(items, 'Ceiling', options.Ceiling);
+    appendDisplayFormatItem(items, 'Floor', options.Floor);
+    appendDisplayFormatItem(items, 'Round', options.Round);
+    appendDisplayFormatItem(items, 'Empty', options.Empty);
+    if (options.Notation === 'scientific') {
+        items.push({ label: 'Notation', value: 'Scientific' });
+    }
+    if (options.CustomDisplayFormats?.length) {
+        items.push({
+            label: 'Custom Formats',
+            value: options.CustomDisplayFormats.join(', '),
+        });
+    }
+};
+const appendStringFormatOptions = (items, options) => {
+    appendDisplayFormatItem(items, 'Case', options.Case);
+    appendDisplayFormatItem(items, 'Trim', options.Trim);
+    appendDisplayFormatItem(items, 'Prefix', options.Prefix);
+    appendDisplayFormatItem(items, 'Suffix', options.Suffix);
+    appendDisplayFormatItem(items, 'Content', options.Content);
+    appendDisplayFormatItem(items, 'Empty', options.Empty);
+    if (options.CustomDisplayFormats?.length) {
+        items.push({
+            label: 'Custom Formats',
+            value: options.CustomDisplayFormats.join(', '),
+        });
+    }
+};
+const getFormatColumnDisplayFormatSummaryItems = (data) => {
+    if (data.DisplayFormat == null) {
+        return [];
+    }
+    if ((0, AdaptableFormatPresets_1.isAdaptableNumericFormatPreset)(data.DisplayFormat)) {
+        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) {
-        content = 'N/A';
+        return [];
     }
-    else {
-        if (resolved.Formatter === 'NumberFormatter') {
-            content = FormatHelper_1.default.NumberFormatter(GeneralConstants_1.DEFAULT_DOUBLE_DISPLAY_VALUE, resolved.Options);
-        }
-        if (resolved.Formatter === 'DateFormatter') {
-            content = FormatHelper_1.default.DateFormatter(new Date(), resolved.Options);
-        }
-        if (resolved.Formatter === 'StringFormatter') {
-            content = FormatHelper_1.default.StringFormatter(GeneralConstants_1.DEFAULT_STRING_DISPLAY_VALUE, resolved.Options);
+    const items = [];
+    if (resolved.Formatter === 'NumberFormatter') {
+        appendNumberFormatOptions(items, resolved.Options);
+        return items;
+    }
+    if (resolved.Formatter === 'DateFormatter') {
+        const options = resolved.Options;
+        appendDisplayFormatItem(items, 'Pattern', options.Pattern);
+        if (options.CustomDisplayFormats?.length) {
+            items.push({
+                label: 'Custom Formats',
+                value: options.CustomDisplayFormats.join(', '),
+            });
         }
+        return items;
     }
-    return content;
+    if (resolved.Formatter === 'StringFormatter') {
+        appendStringFormatOptions(items, resolved.Options);
+        return items;
+    }
+    return items;
+};
+exports.getFormatColumnDisplayFormatSummaryItems = getFormatColumnDisplayFormatSummaryItems;
+const hasFormatColumnDisplayFormat = (data) => (0, exports.getFormatColumnDisplayFormatSummaryItems)(data).length > 0;
+exports.hasFormatColumnDisplayFormat = hasFormatColumnDisplayFormat;
+const getFormatColumnFormatSummaryTagValues = (data) => {
+    const items = (0, exports.getFormatColumnDisplayFormatSummaryItems)(data);
+    if (!items.length) {
+        return [];
+    }
+    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) => {
@@ -69,7 +174,11 @@ const renderCustomFormatter = (data, customFormatter, setFormatOption) => {
             } }) }, customFormatter.id));
 };
 const renderFormatColumnFormatSummary = (data) => {
-    return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: (0, exports.getFormatColumnFormatSummaryValue)(data) });
+    const tagValues = (0, exports.getFormatColumnFormatSummaryTagValues)(data);
+    if (!tagValues.length) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Display Format" });
+    }
+    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) => {
@@ -84,7 +193,7 @@ const getFormatDisplayTypeForScope = (scope, api) => {
     // Check for ColumnIds in scope
     if ('ColumnIds' in scope) {
         const columns = scope.ColumnIds.map((c) => api.columnApi.getColumnWithColumnId(c)).filter(Boolean);
-        const columnDataTypes = (0, uniq_1.default)(columns.map((c) => c.dataType));
+        const columnDataTypes = (0, ArrayExtensions_1.uniq)(columns.map((c) => c.dataType));
         // If there's only one data type
         if (columnDataTypes.length === 1) {
             const dataType = columnDataTypes[0];
@@ -168,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: DisplayFormatHelper_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 &&
+                                            DisplayFormatHelper_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);
@@ -202,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';
@@ -219,31 +364,51 @@ 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)
-                                                    ? (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: [
+                                                    ? (0, NumberExtensions_1.clamp)(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, { 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, NumberExtensions_1.clamp)(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, { 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: [
                                     { Content: GeneralConstants_1.DEFAULT_DOUBLE_DISPLAY_VALUE, Size: 1 },
                                     {
-                                        Content: FormatHelper_1.default.NumberFormatter(GeneralConstants_1.DEFAULT_DOUBLE_DISPLAY_VALUE, resolved.Options),
+                                        Content: DisplayFormatHelper_1.default.NumberFormatter(GeneralConstants_1.DEFAULT_DOUBLE_DISPLAY_VALUE, resolved.Options),
                                         Size: 1,
                                     },
                                 ] }), (0, jsx_runtime_1.jsx)(AdaptableObjectRow_1.AdaptableObjectRow, { colItems: [
                                     { Content: '-' + GeneralConstants_1.DEFAULT_DOUBLE_DISPLAY_VALUE, Size: 1 },
                                     {
-                                        Content: FormatHelper_1.default.NumberFormatter(-GeneralConstants_1.DEFAULT_DOUBLE_DISPLAY_VALUE, resolved.Options),
+                                        Content: DisplayFormatHelper_1.default.NumberFormatter(-GeneralConstants_1.DEFAULT_DOUBLE_DISPLAY_VALUE, resolved.Options),
                                         Size: 1,
                                     },
                                 ] }), (0, jsx_runtime_1.jsx)(AdaptableObjectRow_1.AdaptableObjectRow, { colItems: [
                                     { Content: '0.123', Size: 1 },
                                     {
-                                        Content: FormatHelper_1.default.NumberFormatter(0.123, resolved.Options),
+                                        Content: DisplayFormatHelper_1.default.NumberFormatter(0.123, resolved.Options),
+                                        Size: 1,
+                                    },
+                                ] }), (0, jsx_runtime_1.jsx)(AdaptableObjectRow_1.AdaptableObjectRow, { colItems: [
+                                    { Content: '0', Size: 1 },
+                                    {
+                                        Content: DisplayFormatHelper_1.default.NumberFormatter(0, resolved.Options),
                                         Size: 1,
                                     },
                                 ] })] })] })] }));
@@ -261,7 +426,7 @@ const renderStringFormat = (data, _onChange, setFormatOption, scopedCustomFormat
                                     { Content: '"' + GeneralConstants_1.DEFAULT_STRING_DISPLAY_VALUE + '"', Size: 1 },
                                     {
                                         Content: '"' +
-                                            FormatHelper_1.default.StringFormatter(GeneralConstants_1.DEFAULT_STRING_DISPLAY_VALUE, resolved.Options) +
+                                            DisplayFormatHelper_1.default.StringFormatter(GeneralConstants_1.DEFAULT_STRING_DISPLAY_VALUE, resolved.Options) +
                                             '"',
                                         Size: 1,
                                     },
@@ -270,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/FormatColumnPreview.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { FormatColumn } from '../../../AdaptableState/FormatColumnState';
+import { AdaptableApi } from '../../../Api/AdaptableApi';
+/** Today's date as sample text — no Display Format options applied. */
+export declare const getFormatColumnPreviewDateSampleText: () => string;
+export declare const getFormatColumnStylePreviewText: (formatColumn: FormatColumn, api: AdaptableApi) => string;
+export declare const getFormatColumnPreviewSampleValue: (formatColumn: FormatColumn, api: AdaptableApi) => string | number;
+export declare const getFormatColumnPreviewText: (formatColumn: FormatColumn, api: AdaptableApi) => string;
+export declare const FormatColumnPreviewContent: React.FunctionComponent<{
+    formatColumn: FormatColumn;
+    api: AdaptableApi;
+}>;
+export declare const renderFormatColumnPreviewSummary: (formatColumn: FormatColumn, api: AdaptableApi) => React.JSX.Element;
+export declare const FormatColumnPreview: React.FunctionComponent;
+export declare const FormatColumnPreviewSummaryCard: React.FunctionComponent;

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

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormatColumnPreviewSummaryCard = exports.FormatColumnPreview = exports.renderFormatColumnPreviewSummary = exports.FormatColumnPreviewContent = exports.getFormatColumnPreviewText = exports.getFormatColumnPreviewSampleValue = exports.getFormatColumnStylePreviewText = exports.getFormatColumnPreviewDateSampleText = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const AdaptableFormatPresets_1 = require("../../../AdaptableState/Common/AdaptableFormatPresets");
+const GeneralConstants_1 = require("../../../Utilities/Constants/GeneralConstants");
+const DisplayFormatHelper_1 = tslib_1.__importDefault(require("../../../Utilities/Helpers/DisplayFormatHelper"));
+const StyleHelper_1 = require("../../../Utilities/Helpers/StyleHelper");
+const Card_1 = require("../../../components/Card");
+const Flex_1 = require("../../../components/Flex");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const FormatColumnFormatWizardSection_1 = require("./FormatColumnFormatWizardSection");
+const toFormatColumnPreviewStyle = (formatColumn) => {
+    const style = formatColumn.Style ?? {};
+    return {
+        ...(0, StyleHelper_1.convertAdaptableStyleToCSS)(style),
+        borderWidth: style.BorderColor ? 2 : 0,
+        borderStyle: 'solid',
+        textAlign: style.Alignment ? style.Alignment.toLowerCase() : undefined,
+    };
+};
+/** Today's date as sample text — no Display Format options applied. */
+const getFormatColumnPreviewDateSampleText = () => new Date().toLocaleDateString();
+exports.getFormatColumnPreviewDateSampleText = getFormatColumnPreviewDateSampleText;
+const getFormatColumnStylePreviewText = (formatColumn, api) => {
+    const formatType = (0, FormatColumnFormatWizardSection_1.getFormatDisplayTypeForScope)(formatColumn.Scope, api);
+    if (formatType === 'number') {
+        return String(GeneralConstants_1.DEFAULT_DOUBLE_DISPLAY_VALUE);
+    }
+    if (formatType === 'date') {
+        return (0, exports.getFormatColumnPreviewDateSampleText)();
+    }
+    return GeneralConstants_1.DEFAULT_STRING_DISPLAY_VALUE;
+};
+exports.getFormatColumnStylePreviewText = getFormatColumnStylePreviewText;
+const getFormatColumnPreviewSampleValue = (formatColumn, api) => {
+    const formatType = (0, FormatColumnFormatWizardSection_1.getFormatDisplayTypeForScope)(formatColumn.Scope, api);
+    if (formatType === 'number') {
+        return GeneralConstants_1.DEFAULT_DOUBLE_DISPLAY_VALUE;
+    }
+    if (formatType === 'date') {
+        return (0, exports.getFormatColumnPreviewDateSampleText)();
+    }
+    return GeneralConstants_1.DEFAULT_STRING_DISPLAY_VALUE;
+};
+exports.getFormatColumnPreviewSampleValue = getFormatColumnPreviewSampleValue;
+const getFormatColumnPreviewText = (formatColumn, api) => {
+    const sample = (0, exports.getFormatColumnPreviewSampleValue)(formatColumn, api);
+    const resolved = (0, AdaptableFormatPresets_1.resolveDisplayFormat)(formatColumn.DisplayFormat);
+    if (!resolved) {
+        return String(sample);
+    }
+    if (resolved.Formatter === 'NumberFormatter' && typeof sample === 'number') {
+        return DisplayFormatHelper_1.default.NumberFormatter(sample, resolved.Options) ?? String(sample);
+    }
+    if (resolved.Formatter === 'DateFormatter') {
+        return DisplayFormatHelper_1.default.DateFormatter(new Date(), resolved.Options) ?? String(sample);
+    }
+    if (resolved.Formatter === 'StringFormatter' && typeof sample === 'string') {
+        return DisplayFormatHelper_1.default.StringFormatter(sample, resolved.Options) ?? sample;
+    }
+    return String(sample);
+};
+exports.getFormatColumnPreviewText = getFormatColumnPreviewText;
+const FormatColumnPreviewContent = ({ formatColumn, api }) => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-FormatPreview twa:p-2 twa:inline-block", style: toFormatColumnPreviewStyle(formatColumn), children: (0, exports.getFormatColumnPreviewText)(formatColumn, api) }));
+exports.FormatColumnPreviewContent = FormatColumnPreviewContent;
+const renderFormatColumnPreviewSummary = (formatColumn, api) => (0, jsx_runtime_1.jsx)(exports.FormatColumnPreviewContent, { formatColumn: formatColumn, api: api });
+exports.renderFormatColumnPreviewSummary = renderFormatColumnPreviewSummary;
+const FormatColumnPreview = () => {
+    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    return (0, jsx_runtime_1.jsx)(exports.FormatColumnPreviewContent, { formatColumn: data, api: api });
+};
+exports.FormatColumnPreview = FormatColumnPreview;
+const FormatColumnPreviewSummaryCard = () => {
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Preview" }) }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(exports.FormatColumnPreview, {}) })] }));
+};
+exports.FormatColumnPreviewSummaryCard = FormatColumnPreviewSummaryCard;

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

@@ -1,8 +1,11 @@
 import * as React from 'react';
 import { FormatColumn } from '../../../../types';
+import { AdaptableApi } from '../../../Api/AdaptableApi';
 type FormatColumnRuleWizardSectionProps = {
     onChange: (data: FormatColumn) => void;
     defaultPredicateId: string;
 };
+export declare const hasFormatColumnCondition: (formatColumn: FormatColumn) => boolean;
+export declare const renderFormatColumnConditionSummary: (formatColumn: FormatColumn, api: AdaptableApi) => React.JSX.Element;
 export declare function FormatColumnRuleWizardSection(props: FormatColumnRuleWizardSectionProps): React.JSX.Element;
 export {};

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

@@ -1,11 +1,40 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderFormatColumnConditionSummary = exports.hasFormatColumnCondition = void 0;
 exports.FormatColumnRuleWizardSection = FormatColumnRuleWizardSection;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const EntityRulesEditor_1 = require("../../Components/EntityRulesEditor");
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
+const Flex_1 = require("../../../components/Flex");
+const Tag_1 = require("../../../components/Tag");
+const hasFormatColumnCondition = (formatColumn) => {
+    const rule = formatColumn.Rule;
+    if (!rule) {
+        return false;
+    }
+    return Boolean(rule.Predicates?.length ||
+        rule.BooleanExpression ||
+        ('ObservableExpression' in rule && rule.ObservableExpression) ||
+        ('AggregatedBooleanExpression' in rule && rule.AggregatedBooleanExpression));
+};
+exports.hasFormatColumnCondition = hasFormatColumnCondition;
+const renderFormatColumnConditionSummary = (formatColumn, api) => {
+    if (formatColumn.Target === 'columnHeader') {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Condition" });
+    }
+    if (!(0, exports.hasFormatColumnCondition)(formatColumn)) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Condition" });
+    }
+    const rule = formatColumn.Rule;
+    if (rule?.Predicates?.length) {
+        return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex twa:flex-col twa:gap-2", children: rule.Predicates.map((predicate, index) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: api.predicateApi.predicateToString(predicate) }, index))) }));
+    }
+    const expressionText = api.internalApi.getAdaptableQueryExpressionText(rule);
+    return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: expressionText || 'No Condition' });
+};
+exports.renderFormatColumnConditionSummary = renderFormatColumnConditionSummary;
 function FormatColumnRuleWizardSection(props) {
     const { data, api, moduleInfo } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     if (data.Target && data.Target === 'columnHeader') {