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

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormatColumnFormatWizardSection = exports.getFormatDisplayTypeForScope = exports.renderFormatColumnFormatSummary = exports.getFormatColumnFormatSummaryValue = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+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 HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
@@ -14,7 +14,6 @@ const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayou
 const AdaptableObjectRow_1 = require("../../Components/AdaptableObjectRow");
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const Tabs_1 = require("../../../components/Tabs");
 const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/StringExtensions"));
 const Tag_1 = require("../../../components/Tag");
 const AdaptableContext_1 = require("../../AdaptableContext");
@@ -58,8 +57,7 @@ const getFormatColumnFormatSummaryValue = (data) => {
 exports.getFormatColumnFormatSummaryValue = getFormatColumnFormatSummaryValue;
 const renderCustomFormatter = (data, customFormatter, setFormatOption) => {
     const resolved = (0, AdaptableFormatPresets_1.resolveDisplayFormat)(data.DisplayFormat);
-    return (React.createElement(FormLayout_1.FormRow, { key: customFormatter.id, label: customFormatter.label ?? customFormatter.id },
-        React.createElement(CheckBox_1.CheckBox, { "data-name": customFormatter.id, checked: resolved?.Options.CustomDisplayFormats?.some?.((item) => item === customFormatter.id), onChange: (checked) => {
+    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) => {
                 let newCustomFormats = resolved?.Options?.CustomDisplayFormats ?? [];
                 if (checked) {
                     newCustomFormats = [...newCustomFormats, customFormatter.id];
@@ -68,10 +66,10 @@ const renderCustomFormatter = (data, customFormatter, setFormatOption) => {
                     newCustomFormats = newCustomFormats.filter((item) => item !== customFormatter.id);
                 }
                 setFormatOption('CustomDisplayFormats', newCustomFormats);
-            } })));
+            } }) }, customFormatter.id));
 };
 const renderFormatColumnFormatSummary = (data) => {
-    return React.createElement(Tag_1.Tag, null, (0, exports.getFormatColumnFormatSummaryValue)(data));
+    return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: (0, exports.getFormatColumnFormatSummaryValue)(data) });
 };
 exports.renderFormatColumnFormatSummary = renderFormatColumnFormatSummary;
 const getFormatDisplayTypeForScope = (scope, api) => {
@@ -175,43 +173,22 @@ const renderDateFormat = (data, _onChange, setFormatOption, scopedCustomFormatte
     if (resolved?.Formatter !== 'DateFormatter') {
         return null;
     }
-    return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
-        React.createElement(Tabs_1.Tabs, null,
-            React.createElement(Tabs_1.Tabs.Tab, null, "Format"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(Flex_1.Box, { className: "twa:p-2 twa:text-2" },
-                    "Either create your own date pattern, or select one of the preset date formats (check out",
-                    ' ',
-                    React.createElement("a", { href: "https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table", target: "_blank" }, "available symbols"),
-                    ")."),
-                React.createElement(FormLayout_1.default, null,
-                    React.createElement(FormLayout_1.FormRow, { label: "Pattern" },
-                        React.createElement(Input_1.default, { "data-name": "pattern", value: resolved.Options.Pattern ?? '', onChange: (e) => setFormatOption('Pattern', e.currentTarget.value), className: "twa:mr-2" }),
-                        React.createElement("span", null, resolved.Options.Pattern &&
-                            FormatHelper_1.default.DateFormatter(new Date(), resolved.Options, true)))))),
-        scopedCustomFormatters.length > 0 && (React.createElement(Tabs_1.Tabs, { className: "twa:mt-2", keyboardNavigation: false },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Custom Formats"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(FormLayout_1.default, null, scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption)))))),
-        React.createElement(Tabs_1.Tabs, { className: "twa:mt-2", keyboardNavigation: false },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Presets"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { style: { fontWeight: 'bold' }, colItems: [
-                        { Content: 'Pattern', Size: 1 },
-                        { Content: 'Formatted Date', Size: 1 },
-                        { Content: '', Size: 1 },
-                    ] }),
-                DateFormatPresets.map((Pattern, index) => (React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { key: index, colItems: [
-                        { Content: Pattern, Size: 1 },
-                        {
-                            Content: FormatHelper_1.default.DateFormatter(new Date(), { Pattern }),
-                            Size: 1,
-                        },
-                        {
-                            Content: (React.createElement(SimpleButton_1.default, { "data-name": "apply-format-pattern", "data-value": Pattern, onClick: () => setFormatOption('Pattern', Pattern) }, "Apply")),
-                            Size: 1,
-                        },
-                    ] })))))));
+    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)))] })] })] }));
 };
 const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatters, api) => {
     const resolved = (0, AdaptableFormatPresets_1.resolveDisplayFormat)(data.DisplayFormat);
@@ -242,117 +219,34 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
     const IS_FX_RATE = activePreset === 'FXRate';
     const IS_SCIENTIFIC = activePreset === 'Scientific';
     const showDocumentationLinks = api.internalApi.isDocumentationLinksDisplayed();
-    return (React.createElement(Flex_1.Box, { "data-name": 'format-column-display-format', className: "twa:p-2" },
-        React.createElement(Tabs_1.Tabs, { autoFocus: false, keyboardNavigation: false },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Presets"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(Flex_1.Flex, { flexDirection: "row", className: "twa:m-2" },
-                    React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:mr-6" },
-                        React.createElement(Radio_1.default, { "data-name": "preset-dollar", className: "twa:my-1", checked: IS_DOLLAR, onChange: () => setPreset('Dollar') }, "Dollar"),
-                        React.createElement(Radio_1.default, { "data-name": "preset-sterling", className: "twa:my-1", checked: IS_STERLING, onChange: () => setPreset('Sterling') }, "Sterling"),
-                        React.createElement(Radio_1.default, { "data-name": "preset-euro", className: "twa:my-1", checked: IS_EURO, onChange: () => setPreset('Euro') }, "Euro"),
-                        React.createElement(Radio_1.default, { "data-name": "preset-yen", className: "twa:my-1", checked: IS_YEN, onChange: () => setPreset('Yen') }, "Yen")),
-                    React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:mr-6" },
-                        React.createElement(Radio_1.default, { "data-name": "preset-thousand", className: "twa:my-1", checked: IS_THOUSAND, onChange: () => setPreset('Thousand') }, "K (Thousand)"),
-                        React.createElement(Radio_1.default, { "data-name": "preset-million", className: "twa:my-1", checked: IS_MILLION, onChange: () => setPreset('Million') }, "M (Million)"),
-                        React.createElement(Radio_1.default, { "data-name": "preset-billion", className: "twa:my-1", checked: IS_BILLION, onChange: () => setPreset('Billion') }, "B (Billion)"),
-                        React.createElement(Radio_1.default, { "data-name": "preset-basis-points", className: "twa:my-1", checked: IS_BASIS_POINTS, onChange: () => setPreset('BasisPoints') }, "bps (Basis Pts)")),
-                    React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:mr-6" },
-                        React.createElement(Radio_1.default, { "data-name": "preset-integer", className: "twa:my-1", checked: IS_INTEGER, onChange: () => setPreset('Integer') }, "Integer"),
-                        React.createElement(Radio_1.default, { "data-name": "preset-decimal", className: "twa:my-1", checked: IS_DECIMAL, onChange: () => setPreset('Decimal') }, "Decimal"),
-                        React.createElement(Radio_1.default, { "data-name": "preset-percentage", className: "twa:my-1", checked: IS_PERCENT, onChange: () => setPreset('Percentage') }, "Percentage"),
-                        React.createElement(Radio_1.default, { "data-name": "preset-scientific", className: "twa:my-1", checked: IS_SCIENTIFIC, onChange: () => setPreset('Scientific') }, "Scientific")),
-                    React.createElement(Flex_1.Flex, { flexDirection: "column" },
-                        React.createElement(Radio_1.default, { "data-name": "preset-accounting", className: "twa:my-1", checked: IS_ACCOUNTING, onChange: () => setPreset('Accounting') }, "Accounting"),
-                        React.createElement(Radio_1.default, { "data-name": "preset-fx-rate", className: "twa:my-1", checked: IS_FX_RATE, onChange: () => setPreset('FXRate') }, "FX Rate"),
-                        React.createElement(Radio_1.default, { "data-name": "preset-bitcoin", className: "twa:my-1", checked: IS_BITCOIN, onChange: () => setPreset('Bitcoin') }, "Bitcoin"))))),
-        React.createElement(Tabs_1.Tabs, { className: "twa:mt-2" },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Format"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(Flex_1.Flex, { flexDirection: "row" },
-                    React.createElement(FormLayout_1.default, { className: "twa:mr-3" },
-                        React.createElement(FormLayout_1.FormRow, { label: "Fraction Digits" },
-                            React.createElement(Input_1.default, { "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) })),
-                        React.createElement(FormLayout_1.FormRow, { label: "Integer Digits" },
-                            React.createElement(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) })),
-                        React.createElement(FormLayout_1.FormRow, { label: "Fraction Separator" },
-                            React.createElement(Input_1.default, { "data-name": "fraction-separator", value: resolved.Options.FractionSeparator ?? '', onChange: (e) => setFormatOption('FractionSeparator', e.currentTarget.value) })),
-                        React.createElement(FormLayout_1.FormRow, { label: "Integer Separator" },
-                            React.createElement(Input_1.default, { "data-name": "integer-separator", value: resolved.Options.IntegerSeparator ?? '', onChange: (e) => setFormatOption('IntegerSeparator', e.currentTarget.value) })),
-                        React.createElement(FormLayout_1.FormRow, { label: "Multiplier" },
-                            React.createElement(Input_1.default, { "data-name": "multiplier", type: "number", value: resolved.Options.Multiplier, onChange: (e) => setFormatOption('Multiplier', Number(e.currentTarget.value)) }))),
-                    React.createElement(FormLayout_1.default, { className: "twa:mr-3" },
-                        React.createElement(FormLayout_1.FormRow, { label: "Prefix" },
-                            React.createElement(Input_1.default, { "data-name": "prefix", value: resolved.Options.Prefix ?? '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })),
-                        React.createElement(FormLayout_1.FormRow, { label: "Suffix" },
-                            React.createElement(Input_1.default, { "data-name": "suffix", value: resolved.Options.Suffix ?? '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })),
-                        React.createElement(FormLayout_1.FormRow, { label: "Parentheses" },
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "parentheses-checkbox", checked: resolved.Options.Parentheses, onChange: (checked) => setFormatOption('Parentheses', checked) })),
-                        React.createElement(FormLayout_1.FormRow, { label: "Empty" },
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "empty-checkbox", checked: resolved.Options.Empty, onChange: (checked) => setFormatOption('Empty', checked) }))),
-                    React.createElement(FormLayout_1.default, null,
-                        React.createElement(FormLayout_1.FormRow, { label: "Truncate" },
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "truncate-checkbox", checked: resolved.Options.Truncate, onChange: (checked) => setFormatOption('Truncate', checked) })),
-                        React.createElement(FormLayout_1.FormRow, { label: "Round" },
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "round-checkbox", checked: resolved.Options.Round, onChange: (checked) => setFormatOption('Round', checked) })),
-                        React.createElement(FormLayout_1.FormRow, { label: "Ceiling" },
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "ceiling-checkbox", checked: resolved.Options.Ceiling, onChange: (checked) => setFormatOption('Ceiling', checked) })),
-                        React.createElement(FormLayout_1.FormRow, { label: "Floor" },
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "floor-checkbox", checked: resolved.Options.Floor, onChange: (checked) => setFormatOption('Floor', checked) })),
-                        React.createElement(FormLayout_1.FormRow, { label: "Absolute" },
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "abs-checkbox", checked: resolved.Options.Abs, onChange: (checked) => setFormatOption('Abs', checked) })),
-                        React.createElement(FormLayout_1.FormRow, { label: "Scientific" },
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "scientific-checkbox", checked: resolved.Options.Notation === 'scientific', onChange: (checked) => setFormatOption('Notation', checked ? 'scientific' : undefined) })))))),
-        scopedCustomFormatters.length > 0 && (React.createElement(Tabs_1.Tabs, { className: "twa:mt-2", keyboardNavigation: false },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Custom Formats"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(Flex_1.Flex, { flexDirection: "row" },
-                    React.createElement(FormLayout_1.default, null, scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption))))))),
-        React.createElement(Tabs_1.Tabs, { className: "twa:mt-2", autoFocus: false, keyboardNavigation: false },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Dynamic Content"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(Flex_1.Box, { className: "twa:p-2 twa:text-2" }, "Provide dynamic content through the use of Placeholders"),
-                React.createElement(FormLayout_1.default, { className: "twa:m-2" },
-                    React.createElement(FormLayout_1.FormRow, { label: "" },
-                        React.createElement(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 && (React.createElement(HelpBlock_1.default, { "data-name": "query-documentation", className: "twa:mt-3 twa:mb-2 twa:p-0 twa:text-3" },
-                            React.createElement(ButtonInfo_1.ButtonInfo, { className: "twa:mr-2", onClick: () => window.open(DocumentationLinkConstants_1.FormatColumnPlaceholderDocsLink, '_blank') }),
-                            "Learn more about using placeholders"))),
-                    ' '))),
-        React.createElement(Tabs_1.Tabs, { className: "twa:mt-2", autoFocus: false, keyboardNavigation: false },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Examples"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { className: "twa:font-bold", colItems: [
-                        { Content: 'Raw Number', Size: 1 },
-                        { Content: 'Formatted Number', Size: 1 },
-                    ] }),
-                React.createElement(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),
-                            Size: 1,
-                        },
-                    ] }),
-                React.createElement(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),
-                            Size: 1,
-                        },
-                    ] }),
-                React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { colItems: [
-                        { Content: '0.123', Size: 1 },
-                        {
-                            Content: FormatHelper_1.default.NumberFormatter(0.123, resolved.Options),
-                            Size: 1,
-                        },
-                    ] })))));
+    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'
+                                                    ? 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: [
+                                    { 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),
+                                        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),
+                                        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),
+                                        Size: 1,
+                                    },
+                                ] })] })] })] }));
 };
 const renderStringFormat = (data, _onChange, setFormatOption, scopedCustomFormatters, api) => {
     const resolved = (0, AdaptableFormatPresets_1.resolveDisplayFormat)(data.DisplayFormat);
@@ -360,51 +254,18 @@ const renderStringFormat = (data, _onChange, setFormatOption, scopedCustomFormat
         return null;
     }
     const showDocumentationLinks = api.internalApi.isDocumentationLinksDisplayed();
-    return (React.createElement(Flex_1.Flex, { flexDirection: "column", "data-name": 'format-column-display-format', className: "twa:gap-3 twa:p-3" },
-        React.createElement(Card_1.Card, null,
-            React.createElement(Card_1.Card.Title, null, "Format"),
-            React.createElement(Card_1.Card.Body, { className: "twa:grid twa:p-2 twa:grid-cols-[1fr_1fr] twa:gap-2" },
-                React.createElement(Flex_1.Flex, { flexDirection: "row", className: "twa:gap-2 twa:col-span-2 twa:items-center" },
-                    React.createElement("label", null, "Case:"),
-                    React.createElement(Toggle_1.ToggleGroup, null,
-                        React.createElement(Toggle_1.Toggle, { pressed: resolved.Options.Case === 'Upper', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Upper' : undefined), icon: "case-upper" }),
-                        React.createElement(Toggle_1.Toggle, { pressed: resolved.Options.Case === 'Lower', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Lower' : undefined), icon: "case-lower" }),
-                        React.createElement(Toggle_1.Toggle, { pressed: resolved.Options.Case === 'Sentence', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Sentence' : undefined), icon: "case-sentence" })),
-                    React.createElement(CheckBox_1.CheckBox, { "data-name": "trim-checkbox", className: "twa:ml-5", checked: resolved.Options.Trim, onChange: (checked) => setFormatOption('Trim', checked) }, "Trim")),
-                React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2" },
-                    React.createElement("label", null, "Prefix"),
-                    React.createElement(Input_1.default, { "data-name": "prefix", value: resolved.Options.Prefix ?? '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })),
-                React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2" },
-                    React.createElement("label", null, "Suffix"),
-                    React.createElement(Input_1.default, { "data-name": "suffix", value: resolved.Options.Suffix ?? '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })),
-                React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:col-span-2 twa:gap-2" },
-                    React.createElement("label", null, "Content"),
-                    React.createElement(Textarea_1.default, { className: "twa:min-w-[300px]", rows: 3, placeholder: "", type: 'text', autoFocus: false, value: resolved.Options.Content ?? '', onChange: (e) => setFormatOption('Content', e.currentTarget.value) }),
-                    showDocumentationLinks && (React.createElement(HelpBlock_1.default, { "data-name": "query-documentation", className: "twa:mt-3 twa:mb-2 twa:p-0 twa:text-3" },
-                        React.createElement(ButtonInfo_1.ButtonInfo, { className: "twa:mr-2", onClick: () => window.open(DocumentationLinkConstants_1.FormatColumnPlaceholderDocsLink, '_blank') }),
-                        "See how to create dynamic Display Format using placeholders"))),
-                React.createElement(CheckBox_1.CheckBox, { className: "twa:col-span-2", "data-name": "empty-checkbox", checked: resolved.Options.Empty, onChange: (checked) => setFormatOption('Empty', checked) }, "Empty"))),
-        scopedCustomFormatters.length > 0 && (React.createElement(Card_1.Card, { shadow: false },
-            React.createElement(Card_1.Card.Title, null, "Custom Formats"),
-            React.createElement(Card_1.Card.Body, null,
-                React.createElement(Flex_1.Flex, { flexDirection: "column" },
-                    React.createElement(FormLayout_1.default, { className: "twa:mr-3" }, scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption))))))),
-        React.createElement(Card_1.Card, null,
-            React.createElement(Card_1.Card.Title, null, "Example"),
-            React.createElement(Card_1.Card.Body, null,
-                React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { className: "twa:font-bold", colItems: [
-                        { Content: 'Raw String', Size: 1 },
-                        { Content: 'Formatted String', Size: 1 },
-                    ] }),
-                React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { colItems: [
-                        { Content: '"' + GeneralConstants_1.DEFAULT_STRING_DISPLAY_VALUE + '"', Size: 1 },
-                        {
-                            Content: '"' +
-                                FormatHelper_1.default.StringFormatter(GeneralConstants_1.DEFAULT_STRING_DISPLAY_VALUE, resolved.Options) +
-                                '"',
-                            Size: 1,
-                        },
-                    ] })))));
+    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: "Format" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Customise the string format with case, trim, prefix / suffix and dynamic content" })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { className: "twa:grid twa:p-2 twa:grid-cols-[1fr_1fr] twa:gap-2", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: "twa:gap-2 twa:col-span-2 twa:items-center", children: [(0, jsx_runtime_1.jsx)("label", { children: "Case:" }), (0, jsx_runtime_1.jsxs)(Toggle_1.ToggleGroup, { children: [(0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { pressed: resolved.Options.Case === 'Upper', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Upper' : undefined), icon: "case-upper" }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { pressed: resolved.Options.Case === 'Lower', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Lower' : undefined), icon: "case-lower" }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { pressed: resolved.Options.Case === 'Sentence', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Sentence' : undefined), icon: "case-sentence" })] }), (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "trim-checkbox", className: "twa:ml-5", checked: resolved.Options.Trim, onChange: (checked) => setFormatOption('Trim', checked), children: "Trim" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsx)("label", { children: "Prefix" }), (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.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsx)("label", { children: "Suffix" }), (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.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:col-span-2 twa:gap-2", children: [(0, jsx_runtime_1.jsx)("label", { children: "Content" }), (0, jsx_runtime_1.jsx)(Textarea_1.default, { className: "twa:min-w-[300px]", rows: 3, placeholder: "", type: 'text', autoFocus: false, value: resolved.Options.Content ?? '', 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') }), "See how to create dynamic Display Format using placeholders"] }))] }), (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { className: "twa:col-span-2", "data-name": "empty-checkbox", checked: resolved.Options.Empty, onChange: (checked) => setFormatOption('Empty', checked), children: "Empty" })] })] }), 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: "column", children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { className: "twa:mr-3", 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: "Example" }), (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 a sample value" })] }), (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 String', Size: 1 },
+                                    { Content: 'Formatted String', Size: 1 },
+                                ] }), (0, jsx_runtime_1.jsx)(AdaptableObjectRow_1.AdaptableObjectRow, { colItems: [
+                                    { Content: '"' + GeneralConstants_1.DEFAULT_STRING_DISPLAY_VALUE + '"', Size: 1 },
+                                    {
+                                        Content: '"' +
+                                            FormatHelper_1.default.StringFormatter(GeneralConstants_1.DEFAULT_STRING_DISPLAY_VALUE, resolved.Options) +
+                                            '"',
+                                        Size: 1,
+                                    },
+                                ] })] })] })] }));
 };
 const FormatColumnFormatWizardSection = (props) => {
     const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
@@ -445,9 +306,6 @@ const FormatColumnFormatWizardSection = (props) => {
     if (Type === 'StringFormatter') {
         return renderStringFormat(data, update, setFormatOption, customScopedFormatters, adaptable.api);
     }
-    return (React.createElement(HelpBlock_1.default, { className: "twa:m-2" },
-        "Setting a Display Format is only possible if ",
-        React.createElement("b", null, "all"),
-        " the columns in Scope are Numeric, String or Date"));
+    return ((0, jsx_runtime_1.jsxs)(HelpBlock_1.default, { className: "twa:m-2", children: ["Setting a Display Format is only possible if ", (0, jsx_runtime_1.jsx)("b", { children: "all" }), " the columns in Scope are Numeric, String or Date"] }));
 };
 exports.FormatColumnFormatWizardSection = FormatColumnFormatWizardSection;

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

@@ -2,28 +2,19 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormatColumnRuleWizardSection = FormatColumnRuleWizardSection;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+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"));
 function FormatColumnRuleWizardSection(props) {
     const { data, api, moduleInfo } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     if (data.Target && data.Target === 'columnHeader') {
-        return (React.createElement(HelpBlock_1.default, { className: "twa:mt-3" }, "Conditions cannot be applied if the Target of the Format Column is Column Header"));
+        return ((0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:mt-3", children: "Conditions cannot be applied if the Target of the Format Column is Column Header" }));
     }
-    return (React.createElement(EntityRulesEditor_1.EntityRulesEditor, { module: moduleInfo.ModuleName, defaultPredicateId: props.defaultPredicateId, predicateDefs: api.formatColumnApi.internalApi.getFormatColumnDefsForScope(data.Scope), getPredicateDefsForColId: (colId) => api.formatColumnApi.internalApi.getFormatColumnDefsForScope({ ColumnIds: [colId] }), showNoRule: true, showBoolean: true, showAggregation: false, showObservable: false, showQueryBuilder: true, showPredicate: !api.columnScopeApi.scopeIsAll(data.Scope), data: data, onChange: (formatColumn) => props.onChange(formatColumn), descriptions: {
+    return ((0, jsx_runtime_1.jsx)(EntityRulesEditor_1.EntityRulesEditor, { module: moduleInfo.ModuleName, defaultPredicateId: props.defaultPredicateId, predicateDefs: api.formatColumnApi.internalApi.getFormatColumnDefsForScope(data.Scope), getPredicateDefsForColId: (colId) => api.formatColumnApi.internalApi.getFormatColumnDefsForScope({ ColumnIds: [colId] }), showNoRule: true, showBoolean: true, showAggregation: false, showObservable: false, showQueryBuilder: true, showPredicate: !api.columnScopeApi.scopeIsAll(data.Scope), data: data, onChange: (formatColumn) => props.onChange(formatColumn), descriptions: {
             selectPredicate: 'Create a Format Column Rule - to be applied when data changes',
-            useBooleanQuery: (React.createElement(React.Fragment, null,
-                "Use an BooleanQuery if ",
-                React.createElement("i", null, "Scope"),
-                " is 'All Columns' - so any data change may be evaluated in a complex BooleanExpression")),
-            useObservableQuery: (React.createElement(React.Fragment, null,
-                "Use an ObservableQuery if ",
-                React.createElement("i", null, "Scope"),
-                " is 'All Columns' - so any data change may be evaluated in a complex ObservableExpression")),
-            useAggregationQuery: (React.createElement(React.Fragment, null,
-                "Use an AggregatedBooleanQuery if ",
-                React.createElement("i", null, "Scope"),
-                " is 'All Columns' - so any data change may be evaluated in a complex AggregatedBooleanExpression")),
+            useBooleanQuery: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Use an BooleanQuery if ", (0, jsx_runtime_1.jsx)("i", { children: "Scope" }), " is 'All Columns' - so any data change may be evaluated in a complex BooleanExpression"] })),
+            useObservableQuery: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Use an ObservableQuery if ", (0, jsx_runtime_1.jsx)("i", { children: "Scope" }), " is 'All Columns' - so any data change may be evaluated in a complex ObservableExpression"] })),
+            useAggregationQuery: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Use an AggregatedBooleanQuery if ", (0, jsx_runtime_1.jsx)("i", { children: "Scope" }), " is 'All Columns' - so any data change may be evaluated in a complex AggregatedBooleanExpression"] })),
         } }));
 }

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

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormatColumnScopeWizardSection = exports.renderFormatColumnScopeSummary = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const ColumnScope_1 = require("../../../AdaptableState/Common/ColumnScope");
+const Flex_1 = require("../../../components/Flex");
+const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
+const CheckBox_1 = require("../../../components/CheckBox");
+const Tag_1 = require("../../../components/Tag");
+const FORMAT_COLUMN_ROW_KINDS = ['Data', 'Group', 'Summary', 'Total'];
+const ROW_KIND_LABELS = {
+    Data: 'Data (leaf) rows',
+    Group: 'Group rows',
+    Summary: 'Summary rows',
+    Total: 'Total rows',
+};
+const ROW_KIND_EXCLUDE_KEY = {
+    Data: 'ExcludeDataRows',
+    Group: 'ExcludeGroupRows',
+    Summary: 'ExcludeSummaryRows',
+    Total: 'ExcludeTotalRows',
+};
+/**
+ * Missing flags default to "include" — matches the long-standing
+ * Format Column row-scope semantics.
+ */
+const isRowKindIncluded = (data, kind) => {
+    return !data.RowScope?.[ROW_KIND_EXCLUDE_KEY[kind]];
+};
+const collectIncludedRowKinds = (data) => {
+    return FORMAT_COLUMN_ROW_KINDS.filter((k) => isRowKindIncluded(data, k));
+};
+const renderFormatColumnScopeSummary = (data) => {
+    const showRows = data.Target === 'cell';
+    const includedKinds = collectIncludedRowKinds(data);
+    const allKinds = includedKinds.length === 4;
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:pr-2 twa:py-2", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: (0, NewScopeComponent_1.renderScopeSummary)(data.Scope, {
+                    scopeWholeRow: 'Matching rows will be formatted',
+                    scopeColumns: 'Cells in selected columns will be formatted',
+                    scopeDataTypes: 'Cells in columns with these Data Types will be formatted',
+                }) }), showRows && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mt-3", children: ["Rows:", ' ', allKinds ? ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "All" })) : includedKinds.length === 0 ? ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "None" })) : (includedKinds.map((k) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:mr-1", children: k }, k))))] }))] }));
+};
+exports.renderFormatColumnScopeSummary = renderFormatColumnScopeSummary;
+// ---------------------------------------------------------------------------
+// Section
+// ---------------------------------------------------------------------------
+const FormatColumnScopeWizardSection = (props) => {
+    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const handleScopeChange = (Scope) => {
+        const newData = { ...data, Scope };
+        const wholeRow = api.columnScopeApi.scopeIsAll(Scope);
+        if (newData.Rule?.Predicates?.length) {
+            if (wholeRow) {
+                // if scope is whole row, a predicate cannot be present, so we set the rule
+                // to be a boolean expression
+                delete newData.Rule.Predicates;
+                newData.Rule.BooleanExpression = '';
+            }
+            else {
+                const validPredicateIds = new Set(api.formatColumnApi.internalApi
+                    .getFormatColumnDefsForScope(Scope)
+                    .map((def) => def.id));
+                newData.Rule = {
+                    Predicates: newData.Rule.Predicates.filter((p) => validPredicateIds.has(p.PredicateId)).filter((predicate) => {
+                        // if there are more than 1 column, then we must eliminate the IN/NotIn predicates
+                        // TODO: this should NOT be required, but the ColumnValueSelector does NOT support creatable values right now
+                        if ((0, ColumnScope_1.isScopeColumnIds)(Scope) && Scope.ColumnIds.length > 1) {
+                            return predicate.PredicateId !== 'In' && predicate.PredicateId !== 'NotIn';
+                        }
+                        return true;
+                    }),
+                };
+            }
+        }
+        props.onChange(newData);
+    };
+    const handleRowKindChange = (kind, include) => {
+        props.onChange({
+            ...data,
+            RowScope: {
+                ...data.RowScope,
+                [ROW_KIND_EXCLUDE_KEY[kind]]: !include,
+            },
+        });
+    };
+    const showRowToggles = data.Target === 'cell';
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", style: { height: '100%' }, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:flex-1 twa:min-h-0", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2 twa:gap-3 twa:border-b twa:border-b-text-on-defaultbackground/20", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-5 twa:font-medium", children: "Columns" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70", children: "Which Columns the Format Column will be applied to" })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto", children: (0, jsx_runtime_1.jsx)(NewScopeComponent_1.NewScopeComponent, { descriptions: {
+                                rowScope: 'Format all columns in the row',
+                                columnScope: 'Select columns to format',
+                            }, scope: data.Scope, updateScope: handleScopeChange }) })] }), showRowToggles && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:border-t twa:border-border twa:px-2 twa:py-3 twa:shrink-0", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-3 twa:pb-2 twa:mb-3 twa:flex-wrap twa:border-b twa:border-b-text-on-defaultbackground/20", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-5 twa:font-medium", children: "Rows" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[520px]", children: "Which kinds of Rows the Format Column will be applied to" })] }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", className: "twa:gap-6 twa:flex-wrap", children: [
+                            FORMAT_COLUMN_ROW_KINDS.slice(0, 2),
+                            FORMAT_COLUMN_ROW_KINDS.slice(2),
+                        ].map((rowKindGroup, groupIndex) => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1 twa:min-w-[220px]", children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { sizes: ['180px', '1fr'], children: rowKindGroup.map((kind) => ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `${ROW_KIND_LABELS[kind]}:`, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": `include-${kind.toLowerCase()}-rows-checkbox`, className: "twa:mr-2", checked: isRowKindIncluded(data, kind), onChange: (checked) => handleRowKindChange(kind, checked) }) }) }, kind))) }) }, groupIndex))) })] }))] }));
+};
+exports.FormatColumnScopeWizardSection = FormatColumnScopeWizardSection;