@adaptabletools/adaptable 15.0.0-canary.6 → 15.0.0-canary.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable",
-  "version": "15.0.0-canary.6",
+  "version": "15.0.0-canary.8",
   "description": "Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements",
   "keywords": [
     "web-components",

package/publishTimestamp.d.ts

@@ -1,2 +1,2 @@
-declare const _default: 1676465416898;
+declare const _default: 1676638781056;
 export default _default;

package/publishTimestamp.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = 1676465416898;
+exports.default = 1676638781056;

package/src/Api/Implementation/TeamSharingApiImpl.js

@@ -26,7 +26,17 @@ class TeamSharingApiImpl extends ApiBase_1.ApiBase {
             userName: this.adaptable.adaptableOptions.userName,
             adaptableApi: this.getAdaptableApi(),
         };
-        const loadedSharedEntities = await teamSharingOptions.loadSharedEntities(sharedEntitiesContext);
+        let loadedSharedEntities = await teamSharingOptions.loadSharedEntities(sharedEntitiesContext);
+        // with v15 we introduced 2 types of SharedEntity: AdaptableSharedEntity (basically the old one) and the new CustomSharedEntity
+        // for backwards compatibility, we add default the 'EntityType' property to 'adaptableEntity'
+        loadedSharedEntities = loadedSharedEntities.map((sharedEntity) => {
+            if (sharedEntity.EntityType !== 'adaptableEntity' &&
+                sharedEntity.EntityType !== 'customEntity') {
+                // @ts-ignore
+                sharedEntity.EntityType = 'adaptableEntity';
+            }
+            return sharedEntity;
+        });
         const sharedEntities = teamSharingOptions.applySharedEntities(loadedSharedEntities, sharedEntitiesContext);
         return sharedEntities;
     }

package/src/Api/Implementation/ThemeApiImpl.d.ts

@@ -1,7 +1,11 @@
 import { ApiBase } from './ApiBase';
 import { ThemeApi } from '../ThemeApi';
 import { AdaptableTheme, ThemeState } from '../../PredefinedConfig/ThemeState';
+import { ThemeInternalApi } from '../Internal/ThemeInternalApi';
+import { IAdaptable } from '../../AdaptableInterfaces/IAdaptable';
 export declare class ThemeApiImpl extends ApiBase implements ThemeApi {
+    internalApi: ThemeInternalApi;
+    constructor(adaptable: IAdaptable);
     getThemeState(): ThemeState;
     loadTheme(theme: string): void;
     loadLightTheme(): void;

package/src/Api/Implementation/ThemeApiImpl.js

@@ -7,7 +7,12 @@ const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/
 const ApiBase_1 = require("./ApiBase");
 const logDeprecation_1 = require("../../Utilities/logDeprecation");
 const themes_1 = require("../../themes");
+const ThemeInternalApi_1 = require("../Internal/ThemeInternalApi");
 class ThemeApiImpl extends ApiBase_1.ApiBase {
+    constructor(adaptable) {
+        super(adaptable);
+        this.internalApi = new ThemeInternalApi_1.ThemeInternalApi(adaptable);
+    }
     getThemeState() {
         return this.getAdaptableState().Theme;
     }
@@ -94,6 +99,10 @@ class ThemeApiImpl extends ApiBase_1.ApiBase {
     editTheme(theme) {
         this.dispatchAction(ThemeRedux.ThemeEdit(theme));
         this.getEventApi().emit('ThemeEdited', theme);
+        const currentTheme = this.getCurrentTheme();
+        if (currentTheme === theme.Name) {
+            this.adaptable.applyAdaptableTheme(theme);
+        }
     }
     addUserTheme(theme) {
         this.dispatchAction(ThemeRedux.ThemeAdd(theme));

package/src/Api/Internal/ThemeInternalApi.d.ts

@@ -0,0 +1,6 @@
+import { ApiBase } from '../Implementation/ApiBase';
+export declare class ThemeInternalApi extends ApiBase {
+    isSystemTheme(themeName: string): boolean;
+    getThemeClassName(theme: string): string;
+    openInWindow(): void;
+}

package/src/Api/Internal/ThemeInternalApi.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeInternalApi = void 0;
+const windowFactory_1 = require("../../View/Components/Popups/WindowPopups/windowFactory");
+const ApiBase_1 = require("../Implementation/ApiBase");
+class ThemeInternalApi extends ApiBase_1.ApiBase {
+    isSystemTheme(themeName) {
+        return this.getThemeApi()
+            .getSystemThemes()
+            .some((theme) => theme.Name === themeName);
+    }
+    getThemeClassName(theme) {
+        return `ab--theme-${theme}`;
+    }
+    openInWindow() {
+        this.adaptable.api.internalApi.showPopupWindow({
+            id: windowFactory_1.SHOW_THEME_EDITOR,
+            title: 'Theme',
+            icon: 'theme',
+            factoryId: windowFactory_1.SHOW_THEME_EDITOR,
+            popupProps: {},
+        });
+    }
+}
+exports.ThemeInternalApi = ThemeInternalApi;

package/src/Api/TeamSharingApi.d.ts

@@ -6,11 +6,11 @@ import { AdaptableModule, AdaptableSharedEntityConfig } from '../types';
  */
 export interface TeamSharingApi {
     /**
-     * Retrieves all currently shared entities; async op leveraging `TeamSharingOptions.loadSharedEntities(...)` method
+     * Retrieves all currently shared entities; async operation leveraging `TeamSharingOptions.loadSharedEntities(...)` method
      */
     loadSharedEntities(): Promise<SharedEntity[]>;
     /**
-     * Sets currently shared entities; async op leveraging `TeamSharingOptions.persistSharedEntities(...)` method
+     * Sets currently shared entities; async operation leveraging `TeamSharingOptions.persistSharedEntities(...)` method
      * @param sharedEntities the shared entities
      * @return either TRUE if the shared entities were successfully set or FALSE if the shared entities were not set
      */
@@ -50,7 +50,7 @@ export interface TeamSharingApi {
      */
     unshareEntity(entityId: string): void;
     /**
-     * Import shared entry.
+     * Import the given Shared Entity. In case of `CustomSharedEntity`, the import logic will be delegated to `TeamSharingOptions.handleCustomSharedEntityImport(...)`.
      *
      * @param sharedEntity shared entry to import
      */

package/src/PredefinedConfig/TeamSharingState.d.ts

@@ -23,11 +23,11 @@ export interface TeamSharingState extends InternalState {
     importProcessInProgress: boolean;
 }
 /**
- * Defines an object used in Team Sharing
+ * Defines an object used in Team Sharing. The union type is discriminated by the `EntityType` property (`adaptableEntity` / `customEntity`).
  */
 export declare type SharedEntity = AdaptableSharedEntity | CustomSharedEntity;
 export declare const isAdaptableSharedEntity: (entity: SharedEntity) => entity is AdaptableSharedEntity;
-export declare const isCustomSharedEntity: (entity: SharedEntity) => entity is CustomSharedEntity;
+export declare const isCustomSharedEntity: (entity: SharedEntity) => entity is CustomSharedEntity<any>;
 /**
  * Defines an AdaptableObject shared with Team Sharing
  */
@@ -80,7 +80,7 @@ export interface AdaptableSharedEntity extends AdaptableObject {
 /**
  *
  */
-export interface CustomSharedEntity {
+export interface CustomSharedEntity<T = any> {
     /**
      * Type of shared entity (either Adaptable specific or custom object)
      */
@@ -100,7 +100,7 @@ export interface CustomSharedEntity {
     /**
      * Custom Object being shared
      */
-    Entity: any;
+    Entity: T;
     /**
      * When the object was shared
      */
@@ -117,6 +117,10 @@ export interface CustomSharedEntity {
      * Last time when the object was changed
      */
     ChangedAt: number;
+    /**
+     * Sets Entity to ReadOnly (overwriting a Strategy Entitlement of 'Full')
+     */
+    IsReadOnly?: boolean;
     /**
      * List of Tags associated with the Object
      */

package/src/PredefinedConfig/ThemeState.d.ts

@@ -38,4 +38,5 @@ export interface AdaptableTheme extends AdaptableObject {
      * Variables to be applied at runtime
      */
     CSSVariables?: Record<string, string>;
+    Variant?: 'light' | 'dark';
 }

package/src/Redux/Store/AdaptableStore.js

@@ -1358,8 +1358,8 @@ const adaptableMiddleware = (adaptable) => function (middlewareAPI) {
                     if (needsOverwriteConfirmation) {
                         let confirmation = {
                             CancelButtonText: 'Cancel Import',
-                            Header: 'Overwrite Config',
-                            Msg: 'This import will overwrite one of your config. Do you want to continue?',
+                            Header: 'Overwriting Existing Object',
+                            Msg: 'This import will overwrite an existing object in your State. Do you wish to continue?',
                             ConfirmButtonText: 'Import',
                             CancelAction: null,
                             ConfirmAction: processImportAction,

package/src/Utilities/Services/ThemeService.js

@@ -31,7 +31,9 @@ class ThemeService {
     applyNewThemeVariables(theme) {
         var _a;
         const variables = (_a = theme.CSSVariables) !== null && _a !== void 0 ? _a : {};
-        let str = ':root {';
+        let str = `html.${this.api.themeApi.internalApi.getThemeClassName(theme.Name)} {
+      --ab-theme-loaded: custom-theme;
+    `;
         for (const [key, value] of Object.entries(variables)) {
             if (key.includes('--')) {
                 str += `${key}: ${value};`;

package/src/View/CalculatedColumn/CalculatedColumnSummary.d.ts

@@ -15,4 +15,4 @@ export declare class CalculatedColumnSummaryComponent extends React.Component<Ca
     onCloseWizard(): void;
     onFinishWizard: (calculatedColumn: CalculatedColumn) => void;
 }
-export declare let CalculatedColumnSummary: import("react-redux").ConnectedComponent<typeof CalculatedColumnSummaryComponent, import("react-redux").Omit<React.ClassAttributes<CalculatedColumnSummaryComponent> & CalculatedColumnSummaryProps, "key" | "ref" | "onSuspend" | "api" | "accessLevel" | "modalContainer" | "CalculatedColumns" | "moduleInfo" | "onShare" | "onUnSuspend" | "teamSharingActivated" | "popupParams" | "onClearPopupParams" | "onClosePopup" | "onEdit" | "summarisedColumn" | "onDeleteConfirm">>;
+export declare let CalculatedColumnSummary: import("react-redux").ConnectedComponent<typeof CalculatedColumnSummaryComponent, import("react-redux").Omit<React.ClassAttributes<CalculatedColumnSummaryComponent> & CalculatedColumnSummaryProps, "key" | "ref" | "onSuspend" | "api" | "accessLevel" | "modalContainer" | "CalculatedColumns" | "moduleInfo" | "popupParams" | "onClearPopupParams" | "teamSharingActivated" | "onClosePopup" | "onUnSuspend" | "onShare" | "onEdit" | "summarisedColumn" | "onDeleteConfirm">>;

package/src/View/Components/Popups/WindowPopups/windowFactory.d.ts

@@ -3,4 +3,5 @@ import { WindowPopupChildProps } from './WindowPopups';
 export declare const WINDOW_QUERY_EDITOR = "WINDOW_QUERY_EDITOR";
 export declare const SHOW_PIVOT_COLUMN_DETAILS = "SHOW_PIVOT_COLUMN_DETAILS";
 export declare const SHOW_EXPORT_TABLE = "SHOW_EXPORT_TABLE";
+export declare const SHOW_THEME_EDITOR = "SHOW_THEME_EDITOR";
 export declare const windowFactory: Record<string, React.FunctionComponent<WindowPopupChildProps>>;

package/src/View/Components/Popups/WindowPopups/windowFactory.js

@@ -1,14 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.windowFactory = exports.SHOW_EXPORT_TABLE = exports.SHOW_PIVOT_COLUMN_DETAILS = exports.WINDOW_QUERY_EDITOR = void 0;
+exports.windowFactory = exports.SHOW_THEME_EDITOR = exports.SHOW_EXPORT_TABLE = exports.SHOW_PIVOT_COLUMN_DETAILS = exports.WINDOW_QUERY_EDITOR = void 0;
 const ExpandedQueryPopup_1 = require("../../../Query/ExpandedQueryPopup");
 const PivotDetailsPopoup_1 = require("../../../Layout/PivotDetailsPopoup");
 const ExportTablePopup_1 = require("../../../Export/ExportTablePopup");
+const ThemeEditorWindow_1 = require("../../../Theme/ThemeEditorWindow");
 exports.WINDOW_QUERY_EDITOR = 'WINDOW_QUERY_EDITOR';
 exports.SHOW_PIVOT_COLUMN_DETAILS = 'SHOW_PIVOT_COLUMN_DETAILS';
 exports.SHOW_EXPORT_TABLE = 'SHOW_EXPORT_TABLE';
+exports.SHOW_THEME_EDITOR = 'SHOW_THEME_EDITOR';
 exports.windowFactory = {
     [exports.WINDOW_QUERY_EDITOR]: ExpandedQueryPopup_1.ExpandedQueryPopup,
     [exports.SHOW_PIVOT_COLUMN_DETAILS]: PivotDetailsPopoup_1.PivotDetailsPopoup,
     [exports.SHOW_EXPORT_TABLE]: ExportTablePopup_1.ExportTablePopup,
+    [exports.SHOW_THEME_EDITOR]: ThemeEditorWindow_1.ThemeEditorWindow,
 };

package/src/View/Components/ToolPanel/ToolPanelPopup.d.ts

@@ -23,5 +23,5 @@ declare class ToolPanelPopupComponent extends React.Component<ToolPanelPopupComp
     onShowGridPropertiesChanged(event: React.FormEvent<any>): void;
     onToolPanelToolPanelsChanged(selectedValues: AdaptableToolPanels): void;
 }
-export declare let ToolPanelPopup: import("react-redux").ConnectedComponent<typeof ToolPanelPopupComponent, import("react-redux").Omit<React.ClassAttributes<ToolPanelPopupComponent> & ToolPanelPopupComponentProps, "key" | "ref" | "onSuspend" | "api" | "accessLevel" | "modalContainer" | "moduleInfo" | "onUnSuspend" | "teamSharingActivated" | "ToolPanelState" | "popupParams" | "onClearPopupParams" | "onClosePopup" | "GridState" | "onToolPanelSetModuleButtons" | "onToolPanelSetToolPanels">>;
+export declare let ToolPanelPopup: import("react-redux").ConnectedComponent<typeof ToolPanelPopupComponent, import("react-redux").Omit<React.ClassAttributes<ToolPanelPopupComponent> & ToolPanelPopupComponentProps, "key" | "ref" | "onSuspend" | "api" | "accessLevel" | "modalContainer" | "moduleInfo" | "popupParams" | "onClearPopupParams" | "teamSharingActivated" | "onClosePopup" | "onUnSuspend" | "ToolPanelState" | "GridState" | "onToolPanelSetModuleButtons" | "onToolPanelSetToolPanels">>;
 export {};

package/src/View/Dashboard/CustomToolbarWrapper.js

@@ -85,7 +85,7 @@ const CustomToolbarWrapper = (props) => {
                 const disabled = button.disabled && button.disabled(button, dashboardContext);
                 let buttonVariant = buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'outlined';
                 let buttonTone = buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'neutral';
-                return (React.createElement(SimpleButton_1.default, { style: { marginLeft: index ? 'var(--ab-space-1)' : 0 }, key: index, disabled: disabled, tooltip: buttonTooltip, icon: buttonIcon, variant: buttonVariant, tone: buttonTone, onClick: () => {
+                return (React.createElement(SimpleButton_1.default, { style: { marginLeft: index ? 'var(--ab-space-1)' : 0 }, key: index, disabled: disabled, tooltip: buttonTooltip, icon: buttonIcon, variant: buttonVariant, tone: buttonTone, className: (buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || '', onClick: () => {
                         button.onClick ? button.onClick(button, dashboardContext) : null;
                         setTimeout(() => {
                             // mutate state to force a re-rendering

package/src/View/Filter/FilterSummary.d.ts

@@ -12,4 +12,4 @@ export declare class FilterSummaryComponent extends React.Component<FilterSummar
     render(): any;
     getDescription(columnFilter: ColumnFilter): string;
 }
-export declare let FilterSummary: import("react-redux").ConnectedComponent<typeof FilterSummaryComponent, import("react-redux").Omit<React.ClassAttributes<FilterSummaryComponent> & FilterSummaryProps, "ColumnFilters" | "onShare" | "onClearPopupParams" | "onClearFilter">>;
+export declare let FilterSummary: import("react-redux").ConnectedComponent<typeof FilterSummaryComponent, import("react-redux").Omit<React.ClassAttributes<FilterSummaryComponent> & FilterSummaryProps, "ColumnFilters" | "onClearPopupParams" | "onShare" | "onClearFilter">>;

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { AccessLevel } from '../../types';
+export declare type FieldType = 'color' | 'number' | 'text';
 export interface ThemeEditorProps {
     theme: string;
     accessLevel: AccessLevel;

package/src/View/Theme/ThemeEditor.js

@@ -3,15 +3,15 @@ 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 ThemeField_1 = require("./ThemeField");
+const VariantSelector_1 = require("./VariantSelector");
 const fields = [
     {
         name: 'Primary Color',
@@ -74,32 +74,6 @@ const fields = [
         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)();
@@ -152,6 +126,17 @@ const ThemeEditor = (props) => {
         setCurrentThemeObject((prev) => (Object.assign(Object.assign({}, prev), { Name: name })));
         handleNameDescriptionChangeThrottled('Name', name);
     };
+    const handleVariantChange = (variant) => {
+        const newTheme = Object.assign({}, currentThemeObject);
+        if (!variant) {
+            delete newTheme.Variant;
+        }
+        else {
+            newTheme.Variant = variant;
+        }
+        setCurrentThemeObject(newTheme);
+        adaptable.api.themeApi.editTheme(newTheme);
+    };
     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 === '';
@@ -166,8 +151,10 @@ const ThemeEditor = (props) => {
                 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 : '' })),
+            React.createElement(FormLayout_1.FormRow, { label: "Variant" },
+                React.createElement(VariantSelector_1.VariantSelector, { onChange: handleVariantChange, theme: currentThemeObject })),
             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) => {
+                return (React.createElement(ThemeField_1.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;

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

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const ThemeEditorWindow: React.FunctionComponent;

package/src/View/Theme/ThemeEditorWindow.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeEditorWindow = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const AdaptableContext_1 = require("../AdaptableContext");
+const ThemePopup_1 = require("./ThemePopup");
+const ThemeEditorWindow = () => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const moduleInfo = adaptable.ModuleService.getModuleInfoByModule('Theme');
+    return (React.createElement(rebass_1.Box, { p: 2 },
+        React.createElement(ThemePopup_1.ThemePopup, { hideShowInWindow: true, moduleInfo: moduleInfo, api: adaptable.api })));
+};
+exports.ThemeEditorWindow = ThemeEditorWindow;

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { FieldType } from './ThemeEditor';
+export interface FieldProps {
+    type: FieldType;
+    name: string;
+    value: string;
+    variable: string;
+    onChange: (newVal: string | false) => void;
+    disabled: boolean;
+}
+export declare const Field: React.FunctionComponent<FieldProps>;

package/src/View/Theme/ThemeField.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Field = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const throttle_1 = tslib_1.__importDefault(require("lodash/throttle"));
+const AdaptableContext_1 = require("../AdaptableContext");
+const StyleHelper_1 = require("../../Utilities/Helpers/StyleHelper");
+const FormLayout_1 = require("../../components/FormLayout");
+const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const rebass_1 = require("rebass");
+const ColorPicker_1 = require("../../components/ColorPicker");
+const AdaptableInput_1 = tslib_1.__importDefault(require("../Components/AdaptableInput"));
+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"))));
+};
+exports.Field = Field;

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

@@ -6,6 +6,7 @@ interface ThemePopupProps extends ModuleViewPopupProps<ThemePopupComponent> {
     CurrentTheme: string;
     UserThemes: AdaptableTheme[];
     SelectTheme: (newTheme: string) => ThemeRedux.ThemeSelectAction;
+    hideShowInWindow?: boolean;
 }
 declare class ThemePopupComponent extends React.Component<ThemePopupProps, {}> {
     render(): JSX.Element;

package/src/View/Theme/ThemePopup.js

@@ -12,6 +12,7 @@ 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"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
 class ThemePopupComponent extends React.Component {
     constructor() {
         super(...arguments);
@@ -49,7 +50,11 @@ class ThemePopupComponent extends React.Component {
         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(), button: React.createElement(ButtonNew_1.ButtonNew, { ml: 2, onClick: this.handleCreateNewTheme, accessLevel: this.props.accessLevel }) },
+        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(), button: React.createElement(React.Fragment, null,
+                !this.props.hideShowInWindow && (React.createElement(SimpleButton_1.default, { icon: "open-in-new", onClick: () => {
+                        this.props.api.themeApi.internalApi.openInWindow();
+                    } })),
+                React.createElement(ButtonNew_1.ButtonNew, { ml: 2, onClick: this.handleCreateNewTheme, accessLevel: this.props.accessLevel })) },
             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))),

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { AdaptableTheme } from '../../types';
+export interface VariantSelectorProps {
+    theme: AdaptableTheme;
+    onChange: (variant: AdaptableTheme['Variant'] | null) => void;
+}
+export declare const VariantSelector: React.FunctionComponent<VariantSelectorProps>;

package/src/View/Theme/VariantSelector.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VariantSelector = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const AdaptableContext_1 = require("../AdaptableContext");
+const VariantSelector = (props) => {
+    var _a;
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const systemTemes = adaptable.api.themeApi.getSystemThemes();
+    const options = systemTemes.map((theme) => ({
+        label: theme.Description,
+        value: theme.Name,
+        onClick: () => props.onChange(theme.Name),
+    }));
+    const label = props.theme.Variant
+        ? (_a = options.find((theme) => theme.value === props.theme.Variant)) === null || _a === void 0 ? void 0 : _a.label
+        : 'Select a theme';
+    return (React.createElement(React.Fragment, null,
+        React.createElement(DropdownButton_1.default, { mr: 2, columns: ['label'], items: options }, label),
+        React.createElement(SimpleButton_1.default, { onClick: () => props.onChange(null), disabled: !props.theme.Variant, icon: "delete" })));
+};
+exports.VariantSelector = VariantSelector;

package/src/agGrid/Adaptable.js

@@ -4300,6 +4300,7 @@ class Adaptable {
     }
     applyAdaptableTheme(theme) {
         const themeName = typeof theme === 'string' ? theme : theme.Name;
+        const isSystemTheme = this.api.themeApi.internalApi.isSystemTheme(themeName);
         const themeClassNamesToRemove = [];
         const themesToRemove = [];
         const allThemes = this.api.themeApi.getThemes().map((t) => {
@@ -4312,6 +4313,8 @@ class Adaptable {
             acc[theme.Name] = theme;
             return acc;
         }, {});
+        const themeObject = allThemesMap[themeName];
+        // REMOVE PREVIOUS THEME
         // const themePrefix = 'ab--theme-'
         const el = document.documentElement;
         el.classList.forEach((cssClassName) => {
@@ -4329,37 +4332,34 @@ class Adaptable {
         themesToRemove.forEach((theme) => {
             el.classList.remove(`infinite-${theme.Name}`);
         });
-        if (this.adaptableOptions.userInterfaceOptions &&
-            this.adaptableOptions.userInterfaceOptions.useCustomMacLikeScrollbars &&
-            (0, getScrollbarSize_1.default)() > 0) {
-            el.classList.add('ab--custom-mac-like-scrollbars');
-        }
-        else {
-            el.classList.remove('ab--custom-mac-like-scrollbars');
+        // VARIANT
+        let vairantTheme = '';
+        if (!isSystemTheme && themeObject.Variant) {
+            vairantTheme = themeObject.Variant;
         }
+        // APPLY NEW THEME
         const newTheme = allThemesMap[themeName];
-        const newThemeClassName = GeneralConstants.THEME_STYLE + themeName;
-        el.classList.add(newThemeClassName);
-        // add infinite table classname for theme
-        el.classList.add(`infinite-${themeName}`);
-        const computedDocumentStyle = getComputedStyle(el);
-        const [abLoaded, abThemeLoaded] = ['--ab-loaded', '--ab-theme-loaded'].map((variable) => {
-            let val = computedDocumentStyle.getPropertyValue(variable);
-            if (typeof val === 'string' && val.trim) {
-                val = val.trim();
-            }
-            return val;
-        });
-        const systemThemes = this.api.themeApi.getSystemThemes();
-        const isSystemTheme = !!systemThemes.filter((t) => t.Name === themeName)[0];
+        const getClassName = (theme) => GeneralConstants.THEME_STYLE + theme;
+        el.classList.add(getClassName(themeName));
+        if (vairantTheme) {
+            el.classList.add(getClassName(vairantTheme));
+        }
+        if (isSystemTheme) {
+            // add infinite table classname for theme
+            el.classList.add(`infinite-${themeName}`);
+        }
+        else if (vairantTheme) {
+            el.classList.add(`infinite-${vairantTheme}`);
+        }
+        // AG THEME CLASS NAME
         const container = this.getAgGridContainerElement();
         const getAgGridLightThemeName = () => this.getAgGridLightThemeName();
         const getAgGridDarkThemeName = () => getAgGridLightThemeName() + '-dark';
-        if (newTheme && isSystemTheme) {
-            if (themeName === GeneralConstants_1.LIGHT_THEME) {
+        if (newTheme && (isSystemTheme || vairantTheme)) {
+            if ((vairantTheme !== null && vairantTheme !== void 0 ? vairantTheme : themeName) === GeneralConstants_1.LIGHT_THEME) {
                 newTheme.AgGridClassName = newTheme.AgGridClassName || getAgGridLightThemeName();
             }
-            if (themeName === GeneralConstants_1.DARK_THEME) {
+            if ((vairantTheme !== null && vairantTheme !== void 0 ? vairantTheme : themeName) === GeneralConstants_1.DARK_THEME) {
                 newTheme.AgGridClassName = newTheme.AgGridClassName || getAgGridDarkThemeName();
             }
         }
@@ -4391,6 +4391,23 @@ class Adaptable {
                 container.classList.add('ab-Grid--indicate-filtered-columns');
             }
         }
+        // MAC LIKE SCROLLBARS
+        if (this.adaptableOptions.userInterfaceOptions &&
+            this.adaptableOptions.userInterfaceOptions.useCustomMacLikeScrollbars &&
+            (0, getScrollbarSize_1.default)() > 0) {
+            el.classList.add('ab--custom-mac-like-scrollbars');
+        }
+        else {
+            el.classList.remove('ab--custom-mac-like-scrollbars');
+        }
+        const computedDocumentStyle = getComputedStyle(el);
+        const [abLoaded, abThemeLoaded] = ['--ab-loaded', '--ab-theme-loaded'].map((variable) => {
+            let val = computedDocumentStyle.getPropertyValue(variable);
+            if (typeof val === 'string' && val.trim) {
+                val = val.trim();
+            }
+            return val;
+        });
         if (abLoaded !== '777') {
             (0, LoggingHelper_1.ConsoleLogError)('Please import Adaptable styles from "@adaptabletools/adaptable/index.css"');
         }