@adaptabletools/adaptable 15.0.0-canary.1 → 15.0.0-canary.2

package/src/Utilities/Services/MetamodelService.js

@@ -7,14 +7,7 @@ const DefaultAdaptableOptions_1 = require("../Defaults/DefaultAdaptableOptions")
 const LoggingHelper_1 = require("../Helpers/LoggingHelper");
 const DocumentationLinkConstants_1 = require("../Constants/DocumentationLinkConstants");
 const StringExtensions_1 = tslib_1.__importDefault(require("../Extensions/StringExtensions"));
-const supportedMetamodelTypes = [
-    'string',
-    'number',
-    'boolean',
-    'array',
-    'function',
-    'REFERENCE',
-];
+const supportedMetamodelTypes = ['s', 'n', 'b', 'a', 'f', 'R'];
 class MetamodelService {
     constructor(getAdaptableOptions) {
         this.gridInfoOptions = new Map();
@@ -57,23 +50,23 @@ class MetamodelService {
     validateOptionsObject(validationErrors, optionsObjectName, optionsObject, optionsObjectMetamodel, optionsObjectDefaultValues) {
         Object.entries(optionsObject).forEach(([optionKey, optionValue]) => {
             var _a;
-            const optionMetamodel = (_a = optionsObjectMetamodel === null || optionsObjectMetamodel === void 0 ? void 0 : optionsObjectMetamodel.properties) === null || _a === void 0 ? void 0 : _a.find((metamodelProperty) => metamodelProperty.name === optionKey);
+            const optionMetamodel = (_a = optionsObjectMetamodel === null || optionsObjectMetamodel === void 0 ? void 0 : optionsObjectMetamodel.props) === null || _a === void 0 ? void 0 : _a.find((metamodelProperty) => metamodelProperty.name === optionKey);
             if (!optionMetamodel) {
                 validationErrors.push(`${optionsObjectName}.${optionKey} (value=${optionValue}) :: unknown/unsupported property, will be ignored`);
                 return;
             }
             // let's try to validate the type of the provided value
             const expectedOptionsValueType = this.getExpectedOptionsValueType(optionMetamodel);
-            const providedOptionsValueType = Array.isArray(optionValue) ? 'array' : typeof optionValue;
+            const providedOptionsValueType = Array.isArray(optionValue) ? 'a' : typeof optionValue;
             if (!expectedOptionsValueType) {
                 return;
             }
             // if it's a REFERENCE, we try to go (recursively) deeper
-            if (expectedOptionsValueType === 'REFERENCE') {
-                const referenceObjectName = optionMetamodel.reference;
+            if (expectedOptionsValueType === 'R') {
+                const referenceObjectName = optionMetamodel.ref;
                 const referenceObject = optionsObject[optionKey];
                 const referenceObjectMetamodel = this.getAdaptableMetamodel()[referenceObjectName];
-                if (referenceObject && (referenceObjectMetamodel === null || referenceObjectMetamodel === void 0 ? void 0 : referenceObjectMetamodel.kind) === 'Interface') {
+                if (referenceObject && (referenceObjectMetamodel === null || referenceObjectMetamodel === void 0 ? void 0 : referenceObjectMetamodel.kind) === 'I') {
                     this.validateOptionsObject(validationErrors, referenceObjectName, referenceObject, referenceObjectMetamodel, optionsObjectDefaultValues === null || optionsObjectDefaultValues === void 0 ? void 0 : optionsObjectDefaultValues[optionKey]);
                 }
             }
@@ -107,10 +100,10 @@ class MetamodelService {
             items: baseOptionsItems,
         });
         // map containers
-        adaptableOptionsMetamodel.properties
+        adaptableOptionsMetamodel.props
             .filter((optionItem) => optionItem.gridInfo === 'container')
             .forEach((containerOptionItem) => {
-            const containerMetamodelName = containerOptionItem.reference;
+            const containerMetamodelName = containerOptionItem.ref;
             const adaptableOptionsName = containerOptionItem.name;
             const containerOptionsMetamodel = adaptableMetamodel[containerMetamodelName];
             // @ts-ignore
@@ -125,21 +118,21 @@ class MetamodelService {
             }
             const optionItems = this.mapGridInfoContainerItems(containerOptionsMetamodel, containerOptionsValues, containerOptionsDefaultValues, filterItemProperty);
             gridInfoOptions.set(containerOptionItem.name, {
-                containerLabel: containerOptionItem.uiLabel,
+                containerLabel: this.extractUiLabel(containerOptionItem),
                 items: optionItems,
             });
         });
         return gridInfoOptions;
     }
     mapGridInfoContainerItems(optionItemContainer, adaptableOptionsValues, defaultAdaptableOptionsValues, filter = (itemProperty) => itemProperty.gridInfo === 'item') {
-        return optionItemContainer.properties.filter(filter).map((itemProperty) => {
+        return optionItemContainer.props.filter(filter).map((itemProperty) => {
             return {
                 name: itemProperty.name,
                 value: adaptableOptionsValues === null || adaptableOptionsValues === void 0 ? void 0 : adaptableOptionsValues[itemProperty.name],
                 defaultValue: defaultAdaptableOptionsValues[itemProperty.name],
                 kind: itemProperty.kind,
-                description: StringExtensions_1.default.UnescapeHtmlEntities(itemProperty.description),
-                uiLabel: itemProperty.uiLabel,
+                description: StringExtensions_1.default.UnescapeHtmlEntities(itemProperty.desc),
+                uiLabel: this.extractUiLabel(itemProperty),
             };
         });
     }
@@ -152,5 +145,19 @@ class MetamodelService {
     getAdaptableOptionsMetamodel() {
         return this.getAdaptableMetamodel()['AdaptableOptions'];
     }
+    extractUiLabel(item) {
+        return item.uiLabel || this.formatCamelCaseToHumanText(item.name);
+    }
+    formatCamelCaseToHumanText(camelCase) {
+        if (!camelCase || camelCase == null) {
+            return null;
+        }
+        const rex = /([A-Z])([A-Z])([a-z])|([a-z])([A-Z])/g;
+        const words = camelCase.replace(rex, '$1$4 $2$3$5').replace('.', ' ').split(' ');
+        return words
+            .map((word) => word.substring(0, 1).toUpperCase() +
+            (word.length > 1 ? word.substring(1, word.length) : ''))
+            .join(' ');
+    }
 }
 exports.MetamodelService = MetamodelService;

package/src/Utilities/Services/ThemeService.d.ts

@@ -0,0 +1,12 @@
+import { AdaptableApi, AdaptableTheme } from '../../types';
+import { IThemeService } from './Interface/IThemeService';
+export declare class ThemeService implements IThemeService {
+    private api;
+    private unsubscribe;
+    private styleSheetObject;
+    constructor(api: AdaptableApi);
+    subscribe(): void;
+    onThemeChanged: () => void;
+    applyNewThemeVariables(theme: AdaptableTheme): void;
+    destroy(): void;
+}

package/src/Utilities/Services/ThemeService.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeService = void 0;
+class ThemeService {
+    constructor(api) {
+        var _a;
+        this.unsubscribe = () => { };
+        this.onThemeChanged = () => {
+            const currentTheme = this.api.themeApi.getCurrentThemeObject();
+            this.applyNewThemeVariables(currentTheme);
+        };
+        this.api = api;
+        this.subscribe();
+        if (!this.styleSheetObject) {
+            this.styleSheetObject = new CSSStyleSheet();
+            // ts does not know about adoptedStyleSheets
+            document.adoptedStyleSheets = [
+                ...((_a = document.adoptedStyleSheets) !== null && _a !== void 0 ? _a : []),
+                this.styleSheetObject,
+            ];
+        }
+    }
+    subscribe() {
+        const themeChangedUnsubscribe = this.api.eventApi.on('ThemeChanged', this.onThemeChanged);
+        const themeEditedUnsubscribe = this.api.eventApi.on('ThemeEdited', this.onThemeChanged);
+        this.unsubscribe = () => {
+            themeChangedUnsubscribe();
+            themeEditedUnsubscribe();
+        };
+    }
+    applyNewThemeVariables(theme) {
+        var _a;
+        const variables = (_a = theme.CSSVariables) !== null && _a !== void 0 ? _a : {};
+        let str = ':root {';
+        for (const [key, value] of Object.entries(variables)) {
+            if (key.includes('--')) {
+                str += `${key}: ${value};`;
+            }
+        }
+        str += '}';
+        this.styleSheetObject.replaceSync(str);
+    }
+    destroy() {
+        this.api = null;
+        this.unsubscribe();
+        document.adoptedStyleSheets = [...document.adoptedStyleSheets].filter((sheet) => sheet !== this.styleSheetObject);
+    }
+}
+exports.ThemeService = ThemeService;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/AdaptableOptionsForm.js

@@ -12,7 +12,7 @@ const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/E
 const MetamodelService_1 = require("../../../Utilities/Services/MetamodelService");
 const AdaptablePopover_1 = require("../../AdaptablePopover");
 const LABEL_WIDTH = 250;
-const SUPPORTED_PRIMITEVE_TYPES = ['string', 'number', 'boolean'];
+const SUPPORTED_PRIMITEVE_TYPES = ['s', 'n', 'b'];
 const OptionInput = (props) => {
     const { name, defaultValue, value, description, uiLabel } = props.option;
     const label = uiLabel !== null && uiLabel !== void 0 ? uiLabel : StringExtensions_1.default.Humanize(name);
@@ -54,13 +54,13 @@ const OptionInput = (props) => {
     }
     else {
         switch (option.kind) {
-            case 'number':
+            case 'n':
                 input = React.createElement(Input_1.default, Object.assign({ type: "number", onChange: handleInputChange }, inputProps));
                 break;
-            case 'string':
+            case 's':
                 input = React.createElement(Input_1.default, Object.assign({ type: "text", onChange: handleInputChange }, inputProps));
                 break;
-            case 'boolean':
+            case 'b':
                 input = (React.createElement(CheckBox_1.CheckBox, { onChange: handleCheckboxChange, checked: Boolean(value), type: "date" }, label));
                 break;
         }
@@ -71,7 +71,7 @@ const OptionInput = (props) => {
             " ",
             info),
         input));
-    if (option.kind === 'boolean') {
+    if (option.kind === 'b') {
         content = (React.createElement(rebass_1.Flex, { alignItems: "center" },
             input,
             " ",

package/src/View/Charting/ShowChartButton.js

@@ -7,6 +7,7 @@ const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleB
 const AdaptableContext_1 = require("../AdaptableContext");
 const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
 const useChartState_1 = require("./useChartState");
+const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
 const ShowChartButton = (props) => {
     var _a, _b;
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
@@ -21,7 +22,7 @@ const ShowChartButton = (props) => {
     }
     const containerOptions = [
         {
-            label: (_b = chartingOptions.agGridContainerName) !== null && _b !== void 0 ? _b : 'Ag Grid Window',
+            label: (_b = chartingOptions.agGridContainerName) !== null && _b !== void 0 ? _b : GeneralConstants_1.AG_GRID_CHART_WINDOW,
             onClick: () => {
                 showChart(null);
             },

package/src/View/Charting/useChartingElements.js

@@ -12,6 +12,7 @@ const AdaptableHelper_1 = tslib_1.__importDefault(require("../../Utilities/Helpe
 const useChartState_1 = require("./useChartState");
 const DeleteChartButton_1 = require("./DeleteChartButton");
 const EditChartButton_1 = require("./EditChartButton");
+const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
 const useChartingElements = ({ elementType, accessLevel, size = 'normal', }) => {
     var _a, _b;
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
@@ -75,7 +76,7 @@ const useChartingElements = ({ elementType, accessLevel, size = 'normal', }) =>
         iconSize = 15;
     }
     const chartSelector = (React.createElement(DropdownButton_1.default, { style: style, width: "100%", columns: ['label'], className: `ab-${elementType}__Chart__select`, items: options, disabled: !hasCharts }, content));
-    const containerSelector = Boolean(chartContainers === null || chartContainers === void 0 ? void 0 : chartContainers.length) && (React.createElement(DropdownButton_1.default, { style: style, width: "100%", columns: ['label'], items: containerOptions, disabled: !isSelectedChart }, (selectedContainer === null || selectedContainer === void 0 ? void 0 : selectedContainer.name) || chartingOptions.agGridContainerName || 'Ag Grid Window'));
+    const containerSelector = Boolean(chartContainers === null || chartContainers === void 0 ? void 0 : chartContainers.length) && (React.createElement(DropdownButton_1.default, { style: style, width: "100%", columns: ['label'], items: containerOptions, disabled: !isSelectedChart }, (selectedContainer === null || selectedContainer === void 0 ? void 0 : selectedContainer.name) || chartingOptions.agGridContainerName || GeneralConstants_1.AG_GRID_CHART_WINDOW));
     const chartButton = (React.createElement(SimpleButton_1.default, { style: style, mr: 1, onClick: () => (isOpen ? closeChart() : showChart(selectedContainer)), disabled: !Boolean(selectedChart), variant: 'text', tone: 'neutral', icon: isOpen ? 'visibility-off' : 'visibility', tooltip: isOpen ? 'Hide Chart' : 'Show Chart' }));
     const deleteButton = (React.createElement(DeleteChartButton_1.DeleteChartButton, { iconSize: iconSize, chart: selectedChart, accessLevel: chartAccessLevel }));
     const editButton = (React.createElement(EditChartButton_1.EditChartButton, { iconSize: iconSize, chart: selectedChart, accessLevel: chartAccessLevel, isOpen: isOpen }));

package/src/View/Components/FilterForm/QuickFilterForm.js

@@ -206,7 +206,7 @@ class QuickFilterFormComponent extends React.Component {
             var _a, _b;
             return (React.createElement(AdaptableInput_1.default, { disabled: this.isFilterDisabled(), key: index, type: predicateInput.type === 'number' ? 'text' : predicateInput.type, 
                 // autoFocus has to be FALSE because if the input receives focus in the init phase,
-                // it may scroll the ag-grid header viewport into view and de-synchronize it (relative to the content viewport)
+                // it may scroll the AG Grid header viewport into view and de-synchronize it (relative to the content viewport)
                 autoFocus: false, value: (_b = (_a = filter.Predicate.Inputs) === null || _a === void 0 ? void 0 : _a[index]) !== null && _b !== void 0 ? _b : '', onChange: (e) => this.changeColumnPredicateInput(e.target.value, index), onKeyDownCapture: (e) => {
                     if (e.nativeEvent.key === 'Escape') {
                         e.nativeEvent.preventDefault();

package/src/View/Components/ToolPanel/AdaptableToolPanel.js

@@ -244,7 +244,7 @@ const getAdaptableToolPanelAgGridComponent = (adaptable) => {
             const api = adaptable.api;
             this.gui = document.createElement('div');
             this.gui.id = getContainerId();
-            // preserve ag-grid naming convention
+            // preserve AG Grid naming convention
             this.gui.className = 'ag-adaptable-panel';
             Object.keys(toolPanelContainerStyle).forEach((key) => {
                 //@ts-ignore

package/src/View/DataChangeHistory/buildActionColumnButton.d.ts

@@ -1,3 +1,3 @@
 import { IRowNode } from '@ag-grid-community/core';
 import { ActionColumnContext, AdaptableButton, DataChangeHistoryOptions } from '../../types';
-export declare const buildActionColumnButton: (options: DataChangeHistoryOptions, undoRowNode: (rowNode: IRowNode) => void) => AdaptableButton<ActionColumnContext>[];
+export declare const buildActionColumnButton: (options: DataChangeHistoryOptions, undoRowNode: (rowNode: IRowNode) => void) => AdaptableButton<ActionColumnContext<any>>[];

package/src/View/Theme/ThemeEditor.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { AccessLevel } from '../../types';
+export interface ThemeEditorProps {
+    theme: string;
+    accessLevel: AccessLevel;
+}
+export declare const ThemeEditor: React.FunctionComponent<ThemeEditorProps>;

package/src/View/Theme/ThemeEditor.js

@@ -0,0 +1,186 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeEditor = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const ColorPicker_1 = require("../../components/ColorPicker");
+const FormLayout_1 = tslib_1.__importStar(require("../../components/FormLayout"));
+const StyleHelper_1 = require("../../Utilities/Helpers/StyleHelper");
+const AdaptableContext_1 = require("../AdaptableContext");
+const AdaptableInput_1 = tslib_1.__importDefault(require("../Components/AdaptableInput"));
+const throttle_1 = tslib_1.__importDefault(require("lodash/throttle"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const rebass_1 = require("rebass");
+const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
+const fields = [
+    {
+        name: 'Primary Color',
+        type: 'color',
+        variable: '--ab-color-primary',
+    },
+    {
+        name: 'Primary Dark Color',
+        type: 'color',
+        variable: '--ab-color-primarydark',
+    },
+    {
+        name: 'Primary Light Color',
+        type: 'color',
+        variable: '--ab-color-primarylight',
+    },
+    {
+        name: 'Text on Primary Color',
+        type: 'color',
+        variable: '--ab-color-text-on-primary',
+    },
+    {
+        name: 'Text on Primary Dark Color',
+        type: 'color',
+        variable: '--ab-color-text-on-primarydark',
+    },
+    {
+        name: 'Secondary Color',
+        type: 'color',
+        variable: '--ab-color-secondary',
+    },
+    {
+        name: 'Secondary Dark Color',
+        type: 'color',
+        variable: '--ab-color-secondarydark',
+    },
+    {
+        name: 'Secondary Light Color',
+        type: 'color',
+        variable: '--ab-color-secondarylight',
+    },
+    {
+        name: 'Text on Secondary Color',
+        type: 'color',
+        variable: '--ab-color-text-on-secondary',
+    },
+    {
+        name: 'Text on Secondary Light Color',
+        type: 'color',
+        variable: '--ab-color-text-on-secondarylight',
+    },
+    {
+        name: 'Default background',
+        type: 'color',
+        variable: '--ab-color-defaultbackground',
+    },
+    {
+        name: 'Text Color on Default Background',
+        type: 'color',
+        variable: '--ab-color-text-on-defaultbackground',
+    },
+];
+const Field = (props) => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    let input = null;
+    let value = props.value;
+    const throttledOnChange = React.useMemo(() => {
+        return (0, throttle_1.default)((value) => {
+            props.onChange(value);
+        }, 300);
+    }, []);
+    if (value === undefined) {
+        value = (0, StyleHelper_1.getVariableColor)(`var(${props.variable})`);
+    }
+    switch (props.type) {
+        case 'number':
+            input = (React.createElement(AdaptableInput_1.default, { disabled: props.disabled, type: "number", onChange: (event) => throttledOnChange(event.target.value), value: value }));
+            break;
+        case 'color':
+            input = (React.createElement(ColorPicker_1.ColorPicker, { disabled: props.disabled, includeAlpha: false, api: adaptable.api, value: value, onChange: (color) => throttledOnChange(color) }));
+            break;
+    }
+    return (React.createElement(FormLayout_1.FormRow, { label: props.name },
+        React.createElement(rebass_1.Flex, null,
+            input,
+            ' ',
+            React.createElement(SimpleButton_1.default, { disabled: props.value === undefined, onClick: () => props.onChange(false) }, "Clear"))));
+};
+const ThemeEditor = (props) => {
+    var _a, _b;
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const allThemes = adaptable.api.themeApi.getUserThemes();
+    const disabled = props.accessLevel === 'ReadOnly';
+    const [currentThemeObject, setCurrentThemeObject] = React.useState(() => {
+        return adaptable.api.themeApi.getCurrentThemeObject();
+    });
+    // THEME variables
+    const themeVariables = currentThemeObject === null || currentThemeObject === void 0 ? void 0 : currentThemeObject.CSSVariables;
+    const valuesFromTheme = fields.reduce((acc, field) => {
+        if (themeVariables === null || themeVariables === void 0 ? void 0 : themeVariables[field.variable]) {
+            acc[field.variable] = themeVariables === null || themeVariables === void 0 ? void 0 : themeVariables[field.variable];
+        }
+        return acc;
+    }, {});
+    React.useEffect(() => {
+        setCurrentThemeObject(adaptable.api.themeApi.getCurrentThemeObject());
+    }, [props.theme]);
+    // This is needed when clearing variables, so the new value is pickedup up from the document
+    React.useEffect(() => {
+        const updateTheme = () => {
+            const theme = adaptable.api.themeApi.getCurrentThemeObject();
+            setCurrentThemeObject(Object.assign({}, theme));
+        };
+        const themeChangedUnsubscribe = adaptable.api.eventApi.on('ThemeChanged', updateTheme);
+        const themeEditedUnsubscribe = adaptable.api.eventApi.on('ThemeEdited', updateTheme);
+        return () => {
+            themeChangedUnsubscribe();
+            themeEditedUnsubscribe();
+        };
+    }, []);
+    const handleNameDescriptionChangeThrottled = React.useMemo(() => {
+        return (0, throttle_1.default)((key, value) => {
+            const theme = adaptable.api.themeApi.getCurrentThemeObject();
+            const newTheme = Object.assign(Object.assign({}, theme), { [key]: value });
+            adaptable.api.themeApi.editTheme(newTheme);
+        }, 600);
+    }, []);
+    const handleDescriptionChange = React.useCallback((key, value) => {
+        setCurrentThemeObject((prev) => (Object.assign(Object.assign({}, prev), { [key]: value })));
+        handleNameDescriptionChangeThrottled(key, value);
+    }, []);
+    const handleDeleteTheme = React.useCallback(() => {
+        adaptable.api.themeApi.loadLightTheme();
+        adaptable.api.themeApi.deleteUserTheme(currentThemeObject);
+    }, []);
+    const handleSaveName = () => {
+        const name = currentThemeObject.Name;
+        setCurrentThemeObject((prev) => (Object.assign(Object.assign({}, prev), { Name: name })));
+        handleNameDescriptionChangeThrottled('Name', name);
+    };
+    const nameHasChanged = currentThemeObject.Name !== props.theme;
+    const nameIsNotUnique = allThemes.some((theme) => theme.Uuid !== currentThemeObject.Uuid && currentThemeObject.Name === theme.Name);
+    const saveNameDisabled = !nameHasChanged || nameIsNotUnique || currentThemeObject.Name === '';
+    return (React.createElement(Panel_1.default, { header: React.createElement(rebass_1.Flex, { alignItems: "center", width: "100%" },
+            React.createElement(rebass_1.Box, { flex: 1 }, " Edit Custom Theme"),
+            React.createElement(SimpleButton_1.default, { "data-name": "delete", disabled: props.accessLevel !== 'Full', icon: "trash", onClick: handleDeleteTheme, variant: "text" })) },
+        React.createElement(FormLayout_1.default, null,
+            React.createElement(FormLayout_1.FormRow, { label: "Theme Name" },
+                React.createElement(AdaptableInput_1.default, { mr: 2, onChange: (event) => setCurrentThemeObject(Object.assign(Object.assign({}, currentThemeObject), { Name: event.target.value.replace(/ /g, '-') })), value: (_a = currentThemeObject.Name) !== null && _a !== void 0 ? _a : '' }),
+                React.createElement(SimpleButton_1.default, { onClick: handleSaveName, disabled: saveNameDisabled, icon: "save" }),
+                React.createElement(rebass_1.Text, { fontSize: 2, marginTop: 1 }, "The name cannot contain spaces."),
+                nameIsNotUnique && (React.createElement(rebass_1.Text, { fontSize: 2, color: "var(--ab-color-error)" }, "Name must be unique."))),
+            React.createElement(FormLayout_1.FormRow, { label: "Description" },
+                React.createElement(AdaptableInput_1.default, { onChange: (event) => handleDescriptionChange('Description', event.target.value), value: (_b = currentThemeObject === null || currentThemeObject === void 0 ? void 0 : currentThemeObject.Description) !== null && _b !== void 0 ? _b : '' })),
+            fields.map((field) => {
+                return (React.createElement(Field, { disabled: disabled, key: field.name, type: field.type, name: field.name, value: valuesFromTheme[field.variable], variable: field.variable, onChange: (val) => {
+                        // needs a fresh copy
+                        const currentThemeObject = adaptable.api.themeApi.getCurrentThemeObject();
+                        let newTheme = null;
+                        if (val === false) {
+                            newTheme = Object.assign(Object.assign({}, currentThemeObject), { CSSVariables: Object.assign({}, currentThemeObject === null || currentThemeObject === void 0 ? void 0 : currentThemeObject.CSSVariables) });
+                            delete newTheme.CSSVariables[field.variable];
+                        }
+                        else {
+                            newTheme = Object.assign(Object.assign({}, currentThemeObject), { CSSVariables: Object.assign(Object.assign({}, currentThemeObject === null || currentThemeObject === void 0 ? void 0 : currentThemeObject.CSSVariables), { [field.variable]: val }) });
+                        }
+                        setCurrentThemeObject(newTheme);
+                        adaptable.api.themeApi.editTheme(newTheme);
+                    } }));
+            }))));
+};
+exports.ThemeEditor = ThemeEditor;

package/src/View/Theme/ThemePopup.d.ts

@@ -1,13 +1,16 @@
 import * as React from 'react';
 import * as ThemeRedux from '../../Redux/ActionsReducers/ThemeRedux';
 import { ModuleViewPopupProps } from '../Components/SharedProps/ModuleViewPopupProps';
+import { AdaptableTheme } from '../../PredefinedConfig/ThemeState';
 interface ThemePopupProps extends ModuleViewPopupProps<ThemePopupComponent> {
     CurrentTheme: string;
+    UserThemes: AdaptableTheme[];
     SelectTheme: (newTheme: string) => ThemeRedux.ThemeSelectAction;
 }
 declare class ThemePopupComponent extends React.Component<ThemePopupProps, {}> {
     render(): JSX.Element;
     onChangeTheme(value: string): void;
+    handleCreateNewTheme: () => void;
 }
 export declare let ThemePopup: import("react-redux").ConnectedComponent<typeof ThemePopupComponent, any>;
 export {};

package/src/View/Theme/ThemePopup.js

@@ -8,11 +8,31 @@ const ThemeRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/The
 const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
 const FormLayout_1 = tslib_1.__importStar(require("../../components/FormLayout"));
 const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
+const ThemeEditor_1 = require("./ThemeEditor");
+const rebass_1 = require("rebass");
+const ButtonNew_1 = require("../Components/Buttons/ButtonNew");
+const ObjectFactory_1 = tslib_1.__importDefault(require("../../Utilities/ObjectFactory"));
 class ThemePopupComponent extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.handleCreateNewTheme = () => {
+            let nthItem = this.props.UserThemes.length + 1;
+            let name = 'Custom-Theme-' + nthItem;
+            // make sure it is unique
+            while (this.props.UserThemes.some((theme) => theme.Name === name)) {
+                nthItem++;
+                name = 'Custom-Theme-' + nthItem;
+            }
+            const newTheme = ObjectFactory_1.default.CreateEmptyTheme(name);
+            this.props.api.themeApi.addUserTheme(newTheme);
+            this.props.api.themeApi.loadTheme(newTheme.Name);
+        };
+    }
     render() {
         const availableThemes = this.props.api.themeApi.getThemes();
-        let currentThemeDescription = '';
-        let optionThemes = availableThemes.map((theme) => {
+        const theme = this.props.api.themeApi.getCurrentThemeObject();
+        const currentThemeDescription = theme.Description || theme.Name;
+        const optionThemes = availableThemes.map((theme) => {
             if (typeof theme === 'string') {
                 // protection against old state, which could be string
                 theme = {
@@ -20,19 +40,22 @@ class ThemePopupComponent extends React.Component {
                     Description: theme,
                 };
             }
-            if (theme.Name === this.props.CurrentTheme) {
-                currentThemeDescription = theme.Description;
-            }
             return {
                 value: theme.Name,
                 label: theme.Description,
                 onClick: () => this.onChangeTheme(theme.Name),
             };
         });
+        const isCustomTheme = this.props.api.themeApi
+            .getUserThemes()
+            .some((theme) => theme.Name === this.props.CurrentTheme);
         return (React.createElement(PopupPanel_1.PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() },
             React.createElement(FormLayout_1.default, null,
                 React.createElement(FormLayout_1.FormRow, { label: "Current Theme:" },
-                    React.createElement(DropdownButton_1.default, { "data-name": "select-theme-dropdown", columns: ['label'], style: { width: '50%', minWidth: 200 }, placeholder: "Select theme", value: this.props.CurrentTheme, items: optionThemes, accessLevel: this.props.accessLevel }, currentThemeDescription)))));
+                    React.createElement(DropdownButton_1.default, { "data-name": "select-theme-dropdown", columns: ['label'], style: { width: '50%', minWidth: 200 }, placeholder: "Select theme", value: this.props.CurrentTheme, items: optionThemes, accessLevel: this.props.accessLevel }, currentThemeDescription),
+                    React.createElement(ButtonNew_1.ButtonNew, { ml: 2, onClick: this.handleCreateNewTheme, accessLevel: this.props.accessLevel }))),
+            isCustomTheme && (React.createElement(rebass_1.Box, { mt: 3 },
+                React.createElement(ThemeEditor_1.ThemeEditor, { accessLevel: this.props.accessLevel, theme: this.props.CurrentTheme })))));
     }
     onChangeTheme(value) {
         this.props.SelectTheme(value);
@@ -41,6 +64,7 @@ class ThemePopupComponent extends React.Component {
 function mapStateToProps(state, ownProps) {
     return {
         CurrentTheme: state.Theme.CurrentTheme,
+        UserThemes: state.Theme.UserThemes,
     };
 }
 function mapDispatchToProps(dispatch) {

package/src/agGrid/Adaptable.d.ts

@@ -61,6 +61,7 @@ export declare class Adaptable implements IAdaptable {
     RowEditService: IRowEditService;
     private LicenseService;
     private ChartingService;
+    private ThemeService;
     embedColumnMenu: boolean;
     gridOptions: GridOptions;
     isInitialised: boolean;
@@ -198,8 +199,8 @@ export declare class Adaptable implements IAdaptable {
         suppressClientSideFilter?: boolean;
         gridCells: GridCell[];
     }>;
-    getDistinctCustomSortValuesForColumn(column: AdaptableColumn, visibleRowsOnly: boolean, skipRowNode?: IRowNode): Promise<GridCell[]>;
-    getDistinctBulkUpdateValuesForColumn(column: AdaptableColumn, visibleRowsOnly: boolean, selectedGridCells: GridCell[], skipRowNode?: IRowNode): Promise<GridCell[]>;
+    getDistinctCustomSortValuesForColumn(column: AdaptableColumn, visibleRowsOnly: boolean, skipRowNode?: IRowNode): Promise<GridCell<any>[]>;
+    getDistinctBulkUpdateValuesForColumn(column: AdaptableColumn, visibleRowsOnly: boolean, selectedGridCells: GridCell[], skipRowNode?: IRowNode): Promise<GridCell<any>[]>;
     getColumnValueDisplayValuePairList(columnId: string, visibleRowsOnly: boolean, onlyIncludeIds?: {
         [key: string]: boolean;
     }): GridCell[];