@adaptabletools/adaptable-cjs 22.0.0-canary.3 → 22.0.0-canary.5

package/src/Strategy/ShortcutModule.js

@@ -86,6 +86,10 @@ class ShortcutModule extends AdaptableModuleBase_1.AdaptableModuleBase {
         return {
             abObject: shortcut,
             items: [
+                {
+                    name: 'Name',
+                    values: [shortcut.Name],
+                },
                 (0, getScopeViewItems_1.getScopeViewItems)(shortcut.Scope, this.api),
                 (0, getShortcutSettingsViewItems_1.getShortcutSettingsViewItems)(shortcut),
                 (0, getObjectTagsViewItems_1.getObjectTagsViewItems)(shortcut, this.api),

package/src/Utilities/Extensions/StringExtensions.d.ts

@@ -17,6 +17,7 @@ export declare function Humanize(str: string): string;
 export declare function ReplaceEmptySpacesWithUnderscore(str?: string): string;
 export declare function IsNumeric(str: string): boolean;
 export declare function UnescapeHtmlEntities(str: string): string;
+export declare function ReplaceAllOccurencesExceptLastOne(str: string, searchTerm: string, replacement: string): string;
 export declare const StringExtensions: {
     IsNull: typeof IsNull;
     IsNotNull: typeof IsNotNull;
@@ -37,5 +38,6 @@ export declare const StringExtensions: {
     ReplaceEmptySpacesWithUnderscore: typeof ReplaceEmptySpacesWithUnderscore;
     IsNumeric: typeof IsNumeric;
     UnescapeHtmlEntities: typeof UnescapeHtmlEntities;
+    ReplaceAllOccurencesExceptLastOne: typeof ReplaceAllOccurencesExceptLastOne;
 };
 export default StringExtensions;

package/src/Utilities/Extensions/StringExtensions.js

@@ -20,6 +20,7 @@ exports.Humanize = Humanize;
 exports.ReplaceEmptySpacesWithUnderscore = ReplaceEmptySpacesWithUnderscore;
 exports.IsNumeric = IsNumeric;
 exports.UnescapeHtmlEntities = UnescapeHtmlEntities;
+exports.ReplaceAllOccurencesExceptLastOne = ReplaceAllOccurencesExceptLastOne;
 const tslib_1 = require("tslib");
 const startCase_1 = tslib_1.__importDefault(require("lodash/startCase"));
 function IsNull(stringToCheck) {
@@ -115,6 +116,21 @@ function UnescapeHtmlEntities(str) {
     }
     return preparedStr;
 }
+function ReplaceAllOccurencesExceptLastOne(str, searchTerm, replacement) {
+    // Find the index of the last occurrence of the search string
+    const lastIndex = str.lastIndexOf(searchTerm);
+    // If the string is not found, return the original string
+    if (lastIndex === -1) {
+        return str;
+    }
+    // Slice the string into two parts: before and after the last occurrence
+    const partBeforeLast = str.slice(0, lastIndex);
+    const partAfterLast = str.slice(lastIndex);
+    // Replace all occurrences in the first part
+    const replacedPart = partBeforeLast.replaceAll(searchTerm, replacement);
+    // Recombine the modified first part with the untouched second part
+    return replacedPart + partAfterLast;
+}
 exports.StringExtensions = {
     IsNull,
     IsNotNull,
@@ -135,5 +151,6 @@ exports.StringExtensions = {
     ReplaceEmptySpacesWithUnderscore,
     IsNumeric,
     UnescapeHtmlEntities,
+    ReplaceAllOccurencesExceptLastOne,
 };
 exports.default = exports.StringExtensions;

package/src/Utilities/Helpers/FormatHelper.js

@@ -34,7 +34,6 @@ function NumberFormatter(input, options = {}, rowNode, column, api) {
     if (isNaN(n)) {
         return preparedInput.toString();
     }
-    const fractionsSepatator = options.FractionSeparator ? options.FractionSeparator : '.';
     let multiplier = options.Multiplier ? options.Multiplier : 1;
     if (options.Multiplier !== undefined) {
         n *= multiplier;
@@ -71,6 +70,7 @@ function NumberFormatter(input, options = {}, rowNode, column, api) {
     }
     let s;
     let digitsToUse;
+    const fractionsSepatator = options.FractionSeparator ?? '.';
     if (options.Truncate || options.Ceiling || options.Round || options.Floor) {
         digitsToUse = 0;
     }
@@ -90,7 +90,14 @@ function NumberFormatter(input, options = {}, rowNode, column, api) {
         s = s.replace(/\./g, options.FractionSeparator);
     }
     if (options.IntegerSeparator !== undefined) {
-        s = s.replace(/\,/g, options.IntegerSeparator);
+        // if fraction separator is not a comma then simply replace all instances
+        if (options.FractionSeparator !== ',') {
+            s = s.replace(/\,/g, options.IntegerSeparator);
+        }
+        else {
+            // otherwise don't replace the last instance
+            s = StringExtensions_1.default.ReplaceAllOccurencesExceptLastOne(s, ',', options.IntegerSeparator);
+        }
     }
     s = (options.Prefix || '') + s + (options.Suffix || '');
     if (options.Parentheses === true && preparedInput < 0) {

package/src/Utilities/ObjectFactory.js

@@ -48,7 +48,7 @@ const Toastify_1 = require("../components/Toastify");
 const UIHelper_1 = require("../View/UIHelper");
 const LayoutHelpers_1 = require("../Api/Implementation/LayoutHelpers");
 function CreateEmptyCustomSort() {
-    return { Uuid: (0, Uuid_1.createUuid)(), ColumnId: GeneralConstants_1.EMPTY_STRING, SortedValues: [] };
+    return { Uuid: (0, Uuid_1.createUuid)(), Name: GeneralConstants_1.EMPTY_STRING, ColumnId: GeneralConstants_1.EMPTY_STRING, SortedValues: [] };
 }
 function CreateAdaptableComment(text, api) {
     const comment = {
@@ -86,6 +86,7 @@ function CreateEmptyNamedQuery(expression) {
 function CreateEmptyPlusMinusNudge() {
     return {
         Uuid: (0, Uuid_1.createUuid)(),
+        Name: GeneralConstants_1.EMPTY_STRING,
         Scope: undefined,
         Rule: undefined,
         NudgeValue: ObjectDefaultConstants_1.PLUS_MINUS_DEFAULT_NUDGE_VALUE,
@@ -123,6 +124,7 @@ function CreateRowChangedAlert(alertHeader, alertMessage, alertDefinition, rowDa
 function CreateEmptyAlertDefinition() {
     return {
         Uuid: (0, Uuid_1.createUuid)(),
+        Name: GeneralConstants_1.EMPTY_STRING,
         Scope: { All: true },
         Rule: {
             Predicates: [],
@@ -134,6 +136,7 @@ function CreateEmptyAlertDefinition() {
 function CreateEmptyFlashingCellDefinition() {
     return {
         Uuid: (0, Uuid_1.createUuid)(),
+        Name: GeneralConstants_1.EMPTY_STRING,
         Scope: { ColumnIds: [] },
         Rule: {
             Predicates: [
@@ -150,6 +153,7 @@ function CreateInternalAlertDefinitionForMessages(messageType, alertProperties)
     };
     return {
         Uuid: (0, Uuid_1.createUuid)(),
+        Name: GeneralConstants_1.EMPTY_STRING,
         Scope: undefined,
         Rule: {
             Predicates: [],
@@ -171,6 +175,7 @@ function CreateEmptyReport() {
 function CreateEmptyBaseSchedule(scheduleType) {
     return {
         Uuid: (0, Uuid_1.createUuid)(),
+        Name: GeneralConstants_1.EMPTY_STRING,
         ScheduleType: scheduleType,
         Schedule: CreateEmptySchedule(),
     };
@@ -178,6 +183,7 @@ function CreateEmptyBaseSchedule(scheduleType) {
 function CreateEmptyReminderSchedule() {
     return {
         Uuid: (0, Uuid_1.createUuid)(),
+        Name: GeneralConstants_1.EMPTY_STRING,
         ScheduleType: Enums_1.ScheduleType.Reminder,
         Schedule: CreateEmptySchedule(),
         Header: GeneralConstants_1.EMPTY_STRING,
@@ -190,6 +196,7 @@ function CreateEmptyReminderSchedule() {
 function CreateEmptyReportSchedule() {
     return {
         Uuid: (0, Uuid_1.createUuid)(),
+        Name: GeneralConstants_1.EMPTY_STRING,
         ScheduleType: Enums_1.ScheduleType.Report,
         Schedule: CreateEmptySchedule(),
         ReportName: GeneralConstants_1.EMPTY_STRING,
@@ -214,6 +221,7 @@ function CreateEmptyOpenFinReport() {
 function CreateEmptyIPushPullSchedule() {
     return {
         Uuid: (0, Uuid_1.createUuid)(),
+        Name: GeneralConstants_1.EMPTY_STRING,
         ScheduleType: Enums_1.ScheduleType.ipushpull,
         Schedule: CreateEmptySchedule(),
         IPushPullReport: CreateEmptyIPushPullReport(),
@@ -223,6 +231,7 @@ function CreateEmptyIPushPullSchedule() {
 function CreateEmptyOpenFinSchedule() {
     return {
         Uuid: (0, Uuid_1.createUuid)(),
+        Name: GeneralConstants_1.EMPTY_STRING,
         ScheduleType: Enums_1.ScheduleType.OpenFin,
         Schedule: CreateEmptySchedule(),
         OpenFinReport: CreateEmptyOpenFinReport(),
@@ -232,6 +241,7 @@ function CreateEmptyOpenFinSchedule() {
 function CreateIPushPullSchedule(iPushPullReport) {
     return {
         Uuid: (0, Uuid_1.createUuid)(),
+        Name: GeneralConstants_1.EMPTY_STRING,
         ScheduleType: Enums_1.ScheduleType.ipushpull,
         Schedule: CreateEmptySchedule(),
         IPushPullReport: iPushPullReport,
@@ -241,6 +251,7 @@ function CreateIPushPullSchedule(iPushPullReport) {
 function CreateReportSchedule(reportName, reportFormat) {
     return {
         Uuid: (0, Uuid_1.createUuid)(),
+        Name: GeneralConstants_1.EMPTY_STRING,
         ScheduleType: Enums_1.ScheduleType.Report,
         Schedule: CreateEmptySchedule(),
         ReportName: reportName,
@@ -249,7 +260,6 @@ function CreateReportSchedule(reportName, reportFormat) {
 }
 function CreateEmptySchedule() {
     return {
-        Uuid: (0, Uuid_1.createUuid)(),
         OneOffDate: undefined,
         DaysOfWeek: [],
         Hour: 0,
@@ -259,6 +269,7 @@ function CreateEmptySchedule() {
 function CreateEmptyShortcut() {
     return {
         Uuid: (0, Uuid_1.createUuid)(),
+        Name: GeneralConstants_1.EMPTY_STRING,
         Scope: undefined,
         ShortcutKey: GeneralConstants_1.EMPTY_STRING,
         ShortcutValue: undefined,
@@ -267,6 +278,8 @@ function CreateEmptyShortcut() {
 }
 function CreateEmptyFormatColumn() {
     return {
+        Uuid: (0, Uuid_1.createUuid)(),
+        Name: GeneralConstants_1.EMPTY_STRING,
         Scope: undefined,
         Style: CreateEmptyStyle(),
         DisplayFormat: undefined,

package/src/View/Alert/Utilities/getDefaultAlertDefinition.d.ts

@@ -13,10 +13,11 @@ export declare const getDefaultAlertDefinition: (alertDefinition: AlertDefinitio
     MessageText?: string;
     AlertProperties?: import("../../../types").AlertProperties;
     AlertForm?: string | import("../../../types").AlertButtonForm;
-    IsSuspended?: boolean;
+    Name: string;
     Source?: "InitialState" | "User";
     AdaptableVersion?: import("../../../types").AdaptableVersion;
     IsReadOnly?: boolean;
     Tags?: import("../../../types").AdaptableObjectTag[];
     Metadata?: any;
+    IsSuspended?: boolean;
 };

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

@@ -1,9 +1,12 @@
 import * as React from 'react';
 import { AlertType } from '../Utilities/getAlertType';
+import { AdaptableApi, AlertDefinition } from '../../../types';
+export declare const isSettingsValid: (data: AlertDefinition, api: AdaptableApi) => true | "Name is required" | "An Alert already exists with that name";
 export declare const renderAlertTypeSummary: (alertType: AlertType) => React.JSX.Element;
-type AlertBehaviourWizardSectionProps = {
+type AlertTypeWizardSectionProps = {
     onAlertTypeChange: (alertType: AlertType) => void;
     alertType: AlertType | null;
+    onChange: (data: AlertDefinition) => void;
 };
-export declare const AlertTypeWizardSection: (props: AlertBehaviourWizardSectionProps) => React.JSX.Element;
+export declare const AlertTypeWizardSection: (props: AlertTypeWizardSectionProps) => React.JSX.Element;
 export {};

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AlertTypeWizardSection = exports.renderAlertTypeSummary = void 0;
+exports.AlertTypeWizardSection = exports.renderAlertTypeSummary = exports.isSettingsValid = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const Tabs_1 = require("../../../components/Tabs");
@@ -8,21 +8,57 @@ const getAlertType_1 = require("../Utilities/getAlertType");
 const TypeRadio_1 = require("../../Wizard/TypeRadio");
 const Tag_1 = require("../../../components/Tag");
 const Flex_1 = require("../../../components/Flex");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
+const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
+const OnePageAdaptableWizard_2 = require("../../Wizard/OnePageAdaptableWizard");
+const isSettingsValid = (data, api) => {
+    if (!data.Name?.trim()) {
+        return 'Name is required';
+    }
+    const allAlerts = api.alertApi.getAlertDefinitions();
+    const isDuplicateName = allAlerts.some((a) => a.Name === data.Name && a.Uuid !== data.Uuid);
+    if (isDuplicateName) {
+        return 'An Alert already exists with that name';
+    }
+    return true;
+};
+exports.isSettingsValid = isSettingsValid;
 const renderAlertTypeSummary = (alertType) => {
+    const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const text = (0, getAlertType_1.getAlertTypeText)(alertType);
-    return (React.createElement(Flex_1.Box, null,
-        React.createElement(Tag_1.Tag, null, text)));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(OnePageAdaptableWizard_2.SummaryText, null,
+            "Name ",
+            React.createElement(Tag_1.Tag, null, data.Name || 'Not specified')),
+        React.createElement(OnePageAdaptableWizard_2.SummaryText, null,
+            "Type ",
+            React.createElement(Tag_1.Tag, null, text))));
 };
 exports.renderAlertTypeSummary = renderAlertTypeSummary;
 const AlertTypeWizardSection = (props) => {
-    return (React.createElement(Tabs_1.Tabs, null,
-        React.createElement(Tabs_1.Tabs.Tab, null, "Alert Type"),
-        React.createElement(Tabs_1.Tabs.Content, null,
-            React.createElement(Flex_1.Flex, { flexDirection: "column" },
-                React.createElement(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.DataChange), description: "A change has been made to the Grid's underlying data", checked: props.alertType === getAlertType_1.AlertType.DataChange, onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.DataChange) }),
-                React.createElement(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.RowChange), description: "A Row was added or removed from the data source", checked: props.alertType === getAlertType_1.AlertType.RowChange, onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.RowChange) }),
-                React.createElement(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.Aggregation), description: "A change has been made to aggregated data (i.e. from multiple Rows)", onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.Aggregation), checked: props.alertType === getAlertType_1.AlertType.Aggregation }),
-                React.createElement(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.Observable), description: "A specified change (or lack of change) over time has been observed in the Grid", onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.Observable), checked: props.alertType === getAlertType_1.AlertType.Observable }),
-                React.createElement(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.Validation), description: "A change has broken a data validation rule", checked: props.alertType === getAlertType_1.AlertType.Validation, onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.Validation) })))));
+    const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const handleNameChange = (event) => {
+        props.onChange({
+            ...data,
+            Name: event.target.value,
+        });
+    };
+    return (React.createElement(Flex_1.Flex, { flexDirection: "column" },
+        React.createElement(Tabs_1.Tabs, null,
+            React.createElement(Tabs_1.Tabs.Tab, null, "Settings"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(FormLayout_1.default, null,
+                    React.createElement(FormLayout_1.FormRow, { label: "Name" },
+                        React.createElement(Input_1.default, { "data-name": "alert-name", className: "twa:flex-1 twa:max-w-[200px] twa:mr-3", onChange: handleNameChange, placeholder: "Enter Name", value: data.Name ?? '' }))))),
+        React.createElement(Tabs_1.Tabs, { className: "twa:mt-2" },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Alert Type"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(Flex_1.Flex, { flexDirection: "column" },
+                    React.createElement(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.DataChange), description: "A change has been made to the Grid's underlying data", checked: props.alertType === getAlertType_1.AlertType.DataChange, onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.DataChange) }),
+                    React.createElement(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.RowChange), description: "A Row was added or removed from the data source", checked: props.alertType === getAlertType_1.AlertType.RowChange, onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.RowChange) }),
+                    React.createElement(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.Aggregation), description: "A change has been made to aggregated data (i.e. from multiple Rows)", onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.Aggregation), checked: props.alertType === getAlertType_1.AlertType.Aggregation }),
+                    React.createElement(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.Observable), description: "A specified change (or lack of change) over time has been observed in the Grid", onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.Observable), checked: props.alertType === getAlertType_1.AlertType.Observable }),
+                    React.createElement(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.Validation), description: "A change has broken a data validation rule", checked: props.alertType === getAlertType_1.AlertType.Validation, onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.Validation) }))))));
 };
 exports.AlertTypeWizardSection = AlertTypeWizardSection;

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

@@ -29,7 +29,7 @@ const AlertWizard = (props) => {
     const { api } = (0, AdaptableContext_1.useAdaptable)();
     const dispatch = (0, react_redux_1.useDispatch)();
     const behaviourSpelling = api.internalApi.getCorrectEnglishVariant('Behaviour');
-    const [alertDefinition, setAlertDefinition] = (0, react_1.useState)(() => {
+    const [alertDefinition, doSetAlertDefinition] = (0, react_1.useState)(() => {
         const alertDefinition = props.data
             ? (0, Helper_1.cloneObject)(props.data)
             : ObjectFactory_1.default.CreateEmptyAlertDefinition();
@@ -49,6 +49,9 @@ const AlertWizard = (props) => {
         alertDefinition.MessageType = alertDefinition.MessageType ?? ObjectDefaultConstants_1.ALERT_DEFAULT_MESSAGE_TYPE;
         return alertDefinition;
     });
+    const setAlertDefinition = (0, react_1.useCallback)((data) => {
+        doSetAlertDefinition(data);
+    }, []);
     // Alert type is based initialy on data, but can be changed by the user
     // the default objects do not neccesary have enough information to determine the type
     const [alertType, setAlertType] = (0, react_1.useState)(() => {
@@ -63,22 +66,23 @@ const AlertWizard = (props) => {
         }
         props.onCloseWizard();
     };
-    const updateAlertDefinition = (newAlertDefinition) => {
-        setAlertDefinition((0, mapAlertDefinition_1.mapAlertDefinition)(api, newAlertDefinition));
-    };
+    const updateAlertDefinition = (0, react_1.useCallback)((newAlertDefinition) => {
+        doSetAlertDefinition((0, mapAlertDefinition_1.mapAlertDefinition)(api, newAlertDefinition));
+    }, [api]);
     const handleAlertTypeChange = (newAlertType) => {
         setAlertType(newAlertType);
-        setAlertDefinition((0, getDefaultAlertDefinition_1.getDefaultAlertDefinition)(alertDefinition, newAlertType));
+        doSetAlertDefinition((0, getDefaultAlertDefinition_1.getDefaultAlertDefinition)(alertDefinition, newAlertType));
     };
     return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, modal: props.modal, data: alertDefinition, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
-                title: 'Type',
+                title: 'Name & Type',
+                isValid: AlertTypeWizardSection_1.isSettingsValid,
                 details: (React.createElement(React.Fragment, null,
-                    "Select ",
+                    "Enter Name and select ",
                     React.createElement("b", null, "what"),
                     " type of change in AdapTable will cause the Alert to fire")),
                 render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
-                    React.createElement(AlertTypeWizardSection_1.AlertTypeWizardSection, { alertType: alertType, onAlertTypeChange: handleAlertTypeChange }))),
+                    React.createElement(AlertTypeWizardSection_1.AlertTypeWizardSection, { alertType: alertType, onAlertTypeChange: handleAlertTypeChange, onChange: setAlertDefinition }))),
                 renderSummary: () => (0, AlertTypeWizardSection_1.renderAlertTypeSummary)(alertType),
             },
             {

package/src/View/Components/Buttons/EntityListActionButtons.d.ts

@@ -2,8 +2,7 @@ import * as React from 'react';
 import * as Redux from 'redux';
 import { AccessLevel } from '../../../AdaptableState/Common/Entitlement';
 import { AdaptableSharedEntityConfig } from '../../../AdaptableState/TeamSharingState';
-import { AdaptableObject } from '../../../AdaptableState/Common/AdaptableObject';
-import { SuspendableObject } from '../../../AdaptableState/Common/SuspendableObject';
+import { AdaptableObject, SuspendableObject } from '../../../AdaptableState/Common/AdaptableObject';
 export interface EntityListActionButtonsProps extends React.ClassAttributes<EntityListActionButtons> {
     editClick?: () => void;
     cloneClick?: () => void;

package/src/View/Components/Buttons/SuspendToggleButton/SuspendToggleButton.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { AdaptableObject } from '../../../../AdaptableState/Common/AdaptableObject';
+import { AdaptableObject, SuspendableObject } from '../../../../AdaptableState/Common/AdaptableObject';
 import { AccessLevel } from '../../../../AdaptableState/Common/Entitlement';
-import { SuspendableObject } from '../../../../AdaptableState/Common/SuspendableObject';
 interface EntityListSuspendButtonProps {
     onSuspend: (adaptableObject: AdaptableObject) => void;
     onUnSuspend: (adaptableObject: AdaptableObject) => void;

package/src/View/Components/StyleComponent.d.ts

@@ -10,6 +10,7 @@ export interface StyleComponentProps {
     hidePreview?: boolean;
     headerText?: string;
     Style: AdaptableStyle;
+    /** @deprecated No longer used - font size is always displayed as dropdown */
     showFontSizeAs?: 'radio' | 'dropdown';
     UpdateStyle: (style: AdaptableStyle) => void;
 }

package/src/View/Components/StyleComponent.js

@@ -9,7 +9,7 @@ const CheckBox_1 = require("../../components/CheckBox");
 const ColorPicker_1 = require("../../components/ColorPicker");
 const HelpBlock_1 = tslib_1.__importDefault(require("../../components/HelpBlock"));
 const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
-const Radio_1 = tslib_1.__importDefault(require("../../components/Radio"));
+const Tabs_1 = require("../../components/Tabs");
 const Select_1 = require("../../components/Select");
 const StylePreview_1 = require("../../components/StylePreview");
 const Toggle_1 = require("../../components/Toggle");
@@ -152,25 +152,85 @@ const StyleComponent = (props) => {
     const styleClassNames = props.api.userInterfaceApi.getStyleClassNames();
     const colourSpellingVariant = props.api.internalApi.getCorrectEnglishVariant('Colour');
     const coloursSpellingVariant = props.api.internalApi.getCorrectEnglishVariant('colours');
-    const fontSizes = ['Default', ...EnumExtensions_1.EnumExtensions.getNames(Enums_1.FontSize)];
     return (React.createElement(Cmp, { ...cmpProps, className: (0, twMerge_1.twMerge)((0, clsx_1.default)('ab-StyleComponent twa:text-3', props.className)) },
-        ArrayExtensions_1.default.IsNotNullOrEmpty(styleClassNames) && (React.createElement(Flex_1.Flex, { flexDirection: "row", className: "twa:p-2" },
-            React.createElement(Radio_1.default, { "data-name": "show-class-name", value: "classname", checked: showClassName, onChange: () => onShowClassNameChanged(true) }, "Use Style Class Name"),
-            ' ',
-            React.createElement(Radio_1.default, { "data-name": "create-style", className: "twa:ml-3", value: "expression", checked: !showClassName, onChange: () => onShowClassNameChanged(false) }, "Create Style"),
-            ' ')),
-        showClassName ? (React.createElement(Card_1.Card, { shadow: false },
-            React.createElement(Card_1.Card.Title, null, "CSS Class Name"),
-            React.createElement(Card_1.Card.Body, { gap: 2, className: "twa:p-1" },
-                React.createElement(HelpBlock_1.default, null, "Select a CSS Class Name"),
-                React.createElement(Flex_1.Box, { className: "twa:max-w-[15rem]" },
-                    React.createElement(Select_1.Select, { options: ArrayExtensions_1.default.IsNullOrEmpty(styleClassNames)
-                            ? []
-                            : styleClassNames.map((item) => ({
-                                label: item,
-                                value: item,
-                            })), value: componentStyle.ClassName, onChange: (value) => onStyleClassNameChanged(value) })),
-                React.createElement(Flex_1.Box, { className: "twa:m-2 twa:flex-2 twa:text-warn" }, 'Please ensure that the styles listed are in the current stylesheet')))) : (React.createElement(Flex_1.Flex, { className: "twa:flex-1 twa:flex twa:flex-col twa:gap-2 twa:lg:flex-row" },
+        ArrayExtensions_1.default.IsNotNullOrEmpty(styleClassNames) ? (React.createElement(Tabs_1.Tabs, { value: showClassName ? 'classname' : 'createstyle', onValueChange: (value) => onShowClassNameChanged(value === 'classname') },
+            React.createElement(Tabs_1.Tabs.Tab, { "data-name": "show-class-name", value: "classname" }, "Use Style Class Name"),
+            React.createElement(Tabs_1.Tabs.Tab, { "data-name": "create-style", value: "createstyle" }, "Create Style"),
+            React.createElement(Tabs_1.Tabs.Content, { value: "classname" },
+                React.createElement(Card_1.Card, { shadow: false },
+                    React.createElement(Card_1.Card.Title, null, "CSS Class Name"),
+                    React.createElement(Card_1.Card.Body, { gap: 2, className: "twa:p-1" },
+                        React.createElement(HelpBlock_1.default, null, "Select a CSS Class Name"),
+                        React.createElement(Flex_1.Box, { className: "twa:max-w-[15rem]" },
+                            React.createElement(Select_1.Select, { options: ArrayExtensions_1.default.IsNullOrEmpty(styleClassNames)
+                                    ? []
+                                    : styleClassNames.map((item) => ({
+                                        label: item,
+                                        value: item,
+                                    })), value: componentStyle.ClassName, onChange: (value) => onStyleClassNameChanged(value) })),
+                        React.createElement(Flex_1.Box, { className: "twa:m-2 twa:flex-2 twa:text-warn" }, 'Please ensure that the styles listed are in the current stylesheet')))),
+            React.createElement(Tabs_1.Tabs.Content, { value: "createstyle" },
+                React.createElement(Flex_1.Flex, { className: "twa:flex-1 twa:flex twa:flex-col twa:gap-2 twa:lg:flex-row" },
+                    React.createElement(Card_1.Card, { shadow: false, className: "twa:flex-1" },
+                        React.createElement(Card_1.Card.Body, { gap: 2, className: "twa:grid twa:grid-cols-[auto_1fr_auto_1fr] twa:items-center twa:p-1" },
+                            React.createElement(Card_1.Card.Title, { className: "twa:col-span-2" },
+                                colourSpellingVariant,
+                                " & Border Properties"),
+                            React.createElement(HelpBlock_1.default, { className: "twa:col-span-2" },
+                                "Set ",
+                                coloursSpellingVariant,
+                                " by ticking a checkbox and selecting from the dropdown; leave unchecked to use cell's existing ",
+                                coloursSpellingVariant),
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "set-background-color", value: "existing", checked: !!componentStyle.BackColor, onChange: (checked) => onUseBackColorCheckChange(checked) },
+                                "Back ",
+                                colourSpellingVariant),
+                            React.createElement(ColorPicker_1.ColorPicker, { disabled: componentStyle.BackColor == null, api: props.api, value: componentStyle.BackColor || '#ffffff', onChange: (x) => onBackColorSelectChange(x) }),
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "set-foreground-color", value: "existing", className: "twa:row-start-4", checked: componentStyle.ForeColor ? true : false, onChange: (checked) => onUseForeColorCheckChange(checked) },
+                                "Fore ",
+                                colourSpellingVariant),
+                            React.createElement(ColorPicker_1.ColorPicker, { className: "twa:row-start-4 twa:col-start-2", disabled: componentStyle.ForeColor == null, api: props.api, value: componentStyle.ForeColor || '#ffffff', onChange: (x) => onForeColorSelectChange(x) }),
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "set-border-color", value: "existing", className: "twa:row-start-5 twa:col-start-1", checked: componentStyle.BorderColor ? true : false, onChange: (checked) => onUseBorderColorCheckChange(checked) },
+                                "Border ",
+                                colourSpellingVariant),
+                            React.createElement(ColorPicker_1.ColorPicker, { disabled: componentStyle.BorderColor == null, api: props.api, className: "twa:row-start-5 twa:col-start-2", value: componentStyle.BorderColor || '#ffffff', onChange: (x) => onBorderColorSelectChange(x) }),
+                            React.createElement("span", { className: "twa:row-start-6" }, "Border Radius"),
+                            React.createElement(AdaptableInput_1.default, { className: "twa:w-[100px] twa:row-start-6", type: "number", min: "0", value: componentStyle.BorderRadius, onChange: (event) => {
+                                    const number = Number(event.target.value);
+                                    if (isNaN(number)) {
+                                        onBorderRadiusChange(0);
+                                    }
+                                    else {
+                                        onBorderRadiusChange(number);
+                                    }
+                                } }),
+                            React.createElement(Card_1.Card.Title, { className: "twa:col-span-2 twa:col-start-3 twa:row-start-1" }, "Font Properties"),
+                            React.createElement(HelpBlock_1.default, { className: "twa:self-stretch twa:col-span-2 twa:col-start-3 twa:row-start-2" }, "Set the font properties of the Style"),
+                            React.createElement("span", null, "Font Style"),
+                            React.createElement(Toggle_1.ToggleGroup, null,
+                                React.createElement(Toggle_1.Toggle, { pressed: componentStyle.FontStyle == Enums_1.FontStyle.Italic, onPressedChange: (checked) => onFontStyleChange(checked), icon: "italic" }),
+                                React.createElement(Toggle_1.Toggle, { pressed: componentStyle.FontWeight == Enums_1.FontWeight.Bold, onPressedChange: (checked) => onFontWeightChange(checked), icon: "bold" })),
+                            React.createElement("span", null, "Text Decoration"),
+                            React.createElement(Toggle_1.ToggleGroup, null,
+                                React.createElement(Toggle_1.Toggle, { icon: "underline", pressed: componentStyle.TextDecoration === 'Underline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Underline' : 'None') }),
+                                React.createElement(Toggle_1.Toggle, { icon: "strikethrough", pressed: componentStyle.TextDecoration === 'LineThrough', onPressedChange: (checked) => onTextDecorationChange(checked ? 'LineThrough' : 'None') }),
+                                React.createElement(Toggle_1.Toggle, { icon: "overline", pressed: componentStyle.TextDecoration === 'Overline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Overline' : 'None') })),
+                            React.createElement("span", null, "Font Size"),
+                            React.createElement(Flex_1.Flex, { flexDirection: "row", alignItems: "center" },
+                                React.createElement(Select_1.Select, { placeholder: "Default", options: [
+                                        {
+                                            label: 'Default',
+                                            value: '',
+                                        },
+                                        ...EnumExtensions_1.EnumExtensions.getNames(Enums_1.FontSize).map((enumName) => ({
+                                            label: enumName,
+                                            value: enumName,
+                                        })),
+                                    ], value: componentStyle.FontSize?.toString() ?? '', onChange: (value) => onFontSizeChange(value) })),
+                            React.createElement("span", null, "Alignment"),
+                            React.createElement(Toggle_1.ToggleGroup, null,
+                                React.createElement(Toggle_1.Toggle, { icon: "align-left", pressed: componentStyle.Alignment === 'Left', onPressedChange: (pressed) => pressed ? onAlignmentChange('Left') : onAlignmentChange('Default') }),
+                                React.createElement(Toggle_1.Toggle, { icon: "align-center", pressed: componentStyle.Alignment === 'Center', onPressedChange: (pressed) => pressed ? onAlignmentChange('Center') : onAlignmentChange('Default') }),
+                                React.createElement(Toggle_1.Toggle, { icon: "align-right", pressed: componentStyle.Alignment === 'Right', onPressedChange: (pressed) => pressed ? onAlignmentChange('Right') : onAlignmentChange('Default') })))))))) : (React.createElement(Flex_1.Flex, { className: "twa:flex-1 twa:flex twa:flex-col twa:gap-2 twa:lg:flex-row" },
             React.createElement(Card_1.Card, { shadow: false, className: "twa:flex-1" },
                 React.createElement(Card_1.Card.Body, { gap: 2, className: "twa:grid twa:grid-cols-[auto_1fr_auto_1fr] twa:items-center twa:p-1" },
                     React.createElement(Card_1.Card.Title, { className: "twa:col-span-2" },
@@ -215,7 +275,7 @@ const StyleComponent = (props) => {
                         React.createElement(Toggle_1.Toggle, { icon: "strikethrough", pressed: componentStyle.TextDecoration === 'LineThrough', onPressedChange: (checked) => onTextDecorationChange(checked ? 'LineThrough' : 'None') }),
                         React.createElement(Toggle_1.Toggle, { icon: "overline", pressed: componentStyle.TextDecoration === 'Overline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Overline' : 'None') })),
                     React.createElement("span", null, "Font Size"),
-                    !props.showFontSizeAs || props.showFontSizeAs === 'dropdown' ? (React.createElement(Flex_1.Flex, { flexDirection: "row", alignItems: "center" },
+                    React.createElement(Flex_1.Flex, { flexDirection: "row", alignItems: "center" },
                         React.createElement(Select_1.Select, { placeholder: "Default", options: [
                                 {
                                     label: 'Default',
@@ -225,21 +285,12 @@ const StyleComponent = (props) => {
                                     label: enumName,
                                     value: enumName,
                                 })),
-                            ], value: componentStyle.FontSize?.toString() ?? '', onChange: (value) => onFontSizeChange(value) }))) : (React.createElement(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:gap-2 twa:flex-wrap" }, fontSizes.map((enumName) => {
-                        return (React.createElement(Radio_1.default, { onClick: () => onFontSizeChange(enumName), checked: (enumName == 'Default' && !componentStyle.FontSize) ||
-                                componentStyle.FontSize === enumName, key: enumName }, enumName));
-                    }))),
+                            ], value: componentStyle.FontSize?.toString() ?? '', onChange: (value) => onFontSizeChange(value) })),
                     React.createElement("span", null, "Alignment"),
                     React.createElement(Toggle_1.ToggleGroup, null,
-                        React.createElement(Toggle_1.Toggle, { icon: "align-left", pressed: componentStyle.Alignment === 'Left', onPressedChange: (pressed) => pressed
-                                ? onAlignmentChange('Left')
-                                : onAlignmentChange('Default') }),
-                        React.createElement(Toggle_1.Toggle, { icon: "align-center", pressed: componentStyle.Alignment === 'Center', onPressedChange: (pressed) => pressed
-                                ? onAlignmentChange('Center')
-                                : onAlignmentChange('Default') }),
-                        React.createElement(Toggle_1.Toggle, { icon: "align-right", pressed: componentStyle.Alignment === 'Right', onPressedChange: (pressed) => pressed
-                                ? onAlignmentChange('Right')
-                                : onAlignmentChange('Default') })))))),
+                        React.createElement(Toggle_1.Toggle, { icon: "align-left", pressed: componentStyle.Alignment === 'Left', onPressedChange: (pressed) => pressed ? onAlignmentChange('Left') : onAlignmentChange('Default') }),
+                        React.createElement(Toggle_1.Toggle, { icon: "align-center", pressed: componentStyle.Alignment === 'Center', onPressedChange: (pressed) => pressed ? onAlignmentChange('Center') : onAlignmentChange('Default') }),
+                        React.createElement(Toggle_1.Toggle, { icon: "align-right", pressed: componentStyle.Alignment === 'Right', onPressedChange: (pressed) => pressed ? onAlignmentChange('Right') : onAlignmentChange('Default') })))))),
         !props.hidePreview && (React.createElement(Card_1.Card, { shadow: false },
             React.createElement(Card_1.Card.Title, null, "Preview"),
             React.createElement(Card_1.Card.Body, { className: "twa:grid twa:place-items-center" },

package/src/View/CustomSort/Wizard/CustomSortColumnWizardSection.d.ts

@@ -3,7 +3,8 @@ import { CustomSort } from '../../../AdaptableState/CustomSortState';
 export type CustomSortColumnWizardSectionProps = {
     onChange: (data: CustomSort) => void;
     isNew: boolean;
+    allCustomSorts: CustomSort[];
 };
 export declare const renderCustomSortColumn: (data: CustomSort) => React.JSX.Element;
-export declare const isValidCustomSortColumn: (data: CustomSort) => true | string;
+export declare const isValidCustomSortColumn: (data: CustomSort, allCustomSorts: CustomSort[]) => true | string;
 export declare const CustomSortColumnWizardSection: (props: CustomSortColumnWizardSectionProps) => React.JSX.Element;