@adaptabletools/adaptable 13.0.0-canary.16 → 13.0.0-canary.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable",
-  "version": "13.0.0-canary.16",
+  "version": "13.0.0-canary.17",
   "description": "Powerful data-agnostic HTML5 datagrid add-on that sits on top of an underlying grid component and provides all the rich functionality that advanced users expect from their DataGrids and Data Tables",
   "keywords": [
     "web-components",

package/publishTimestamp.d.ts

@@ -1,2 +1,2 @@
-declare const _default: 1663819851210;
+declare const _default: 1663843348593;
 export default _default;

package/publishTimestamp.js

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

package/src/Api/StyledColumnApi.d.ts

@@ -2,19 +2,9 @@ import { RowNode } from '@ag-grid-community/core/dist/cjs/es5/entities/rowNode';
 import { AdaptableColumn } from '../PredefinedConfig/Common/AdaptableColumn';
 import { StyledColumnState, StyledColumn, CellColorRange, ColumnComparison } from '../PredefinedConfig/StyledColumnState';
 /**
- * Provides run-time access to the Styled Column Module and associated state
+ * Provides run-time access to Styled Column Module and associated state
  */
 export interface StyledColumnApi {
-    /**
-     * Delete styled column
-     * @param styledColumn
-     */
-    deleteStyledColumn(styledColumn: StyledColumn): void;
-    /**
-     * Create a styled column
-     * @param styledColumn
-     */
-    addStyledColumn(styledColumn: StyledColumn): void;
     /**
      * Retrieves Styled Column section from Adaptable State
      */
@@ -48,6 +38,16 @@ export interface StyledColumnApi {
      * @returns Styled Columns
      */
     getAllSuspendedStyledColumn(): StyledColumn[];
+    /**
+     * Delete a Styled column
+     * @param styledColumn
+     */
+    deleteStyledColumn(styledColumn: StyledColumn): void;
+    /**
+     * Create a Styled column
+     * @param styledColumn
+     */
+    addStyledColumn(styledColumn: StyledColumn): void;
     /**
      * Gets the Minimum Value to display for a Styled Column
      * @param styledColumn Styled Column to check
@@ -62,13 +62,23 @@ export interface StyledColumnApi {
      * @param cellValue current Cell Value
      */
     getNumericStyleMaxValue(styledColumn: Omit<StyledColumn, 'ColumnId'>, column: AdaptableColumn, rowNode: RowNode, cellValue: any): number;
+    /**
+     * Returns the smallest number in a Range
+     * @param range Range to check
+     * @param column current Column
+     */
     getCellColorRangeMinValue(range: CellColorRange, column: AdaptableColumn): number | undefined;
+    /**
+     * Returns the largest number in a Range
+     * @param range Range to check
+     * @param column current Column
+     */
     getCellColorRangeMaxValue(range: CellColorRange, column: AdaptableColumn): number | undefined;
     /**
      * Retrieves the ColumnComparison property, if there, from a Styled Column
-     * @param formatColumn Styled Column to Add
+     * @param styledColumn Styled Column to Add
      */
-    getColumnComparisonForStyledColumn(formatColumn: StyledColumn): ColumnComparison | undefined;
+    getColumnComparisonForStyledColumn(styledColumn: StyledColumn): ColumnComparison | undefined;
     /**
      * Returns any ColumnIds referenced in a Column Comparison
      * @param columnComparision Column Comparison to check
@@ -88,5 +98,9 @@ export interface StyledColumnApi {
      * Publishes the CheckboxColumnClickedEvent - when the checkbox in an Checkbox Column is clicked
      */
     fireCheckboxColumnClickedEvent(columnId: string, rowData: any, primaryKeyValue: any, isChecked: boolean): void;
+    /**
+     * Returns a Styled Column for a given column
+     * @param column Column to check
+     */
     getActiveStyledColumnForColumn(column: AdaptableColumn): StyledColumn | undefined;
 }

package/src/PredefinedConfig/StyledColumnState.d.ts

@@ -13,14 +13,20 @@ export interface StyledColumnState extends ConfigState {
  * Object used in Special Column Style function
  */
 export interface StyledColumn extends SuspendableObject {
+    /**
+     * Column being styled
+     */
     ColumnId: string;
+    /**
+     * Styles a numeric column with a Gradient
+     */
     GradientStyle?: GradientStyle;
     /**
-     * Style a numeric column so each cell displays a 'bar'
+     * Styles a numeric column so each cell displays a 'bar'
      */
     PercentBarStyle?: PercentBarStyle;
     /**
-     * Style a boolean column so each cell displays a checkbox
+     * Renders a Checkbox in a boolean column
      */
     CheckBoxStyle?: boolean;
 }
@@ -33,7 +39,7 @@ export interface PercentBarStyle extends NumericStyledColumn {
      */
     CellRanges?: CellColorRange[];
     /**
-     * Compares cell values to another Column
+     * Compares Cell values to another Column
      */
     ColumnComparison?: ColumnComparison;
     /**
@@ -45,7 +51,7 @@ export interface PercentBarStyle extends NumericStyledColumn {
      */
     ToolTipText?: CellTextOptions;
     /**
-     * Back colour - only used for 'Percent Bar' Numeric style; leave unset if none required
+     * Background colour for 'Percent Bar'; leave unset if none required
      * @defaultValue Gray
      */
     BackColor?: string;

package/src/Strategy/ConditionalStyleModule.d.ts

@@ -1,6 +1,5 @@
 import { AdaptableApi } from '../Api/AdaptableApi';
 import { AdaptableColumn } from '../PredefinedConfig/Common/AdaptableColumn';
-import { AdaptableMenuItem } from '../PredefinedConfig/Common/Menu';
 import { ConditionalStyle } from '../PredefinedConfig/ConditionalStyleState';
 import { TeamSharingImportInfo } from '../PredefinedConfig/TeamSharingState';
 import { AdaptableModuleBase } from './AdaptableModuleBase';
@@ -15,7 +14,6 @@ export declare class ConditionalStyleModule extends AdaptableModuleBase implemen
     getExplicitlyReferencedColumnIds(conditionalStyle: ConditionalStyle): string[];
     getReferencedNamedQueryNames(conditionalStyle: ConditionalStyle): string[];
     updateOldConfig(): void;
-    addColumnMenuItems(column: AdaptableColumn): AdaptableMenuItem[] | undefined;
     getTeamSharingAction(): TeamSharingImportInfo<ConditionalStyle>;
     isConditionalStyleActiveForColumn(conditionalStyleForColumn: ConditionalStyle, column: AdaptableColumn, params: any): boolean;
     isConditionalStyleActiveForRow(conditionalStyleForRow: ConditionalStyle, params: any): boolean;

package/src/Strategy/ConditionalStyleModule.js

@@ -9,7 +9,6 @@ const LoggingHelper_1 = require("../Utilities/Helpers/LoggingHelper");
 const AdaptableModuleBase_1 = require("./AdaptableModuleBase");
 const ModuleConstants_1 = require("../Utilities/Constants/ModuleConstants");
 const getScopeViewItems_1 = require("./Utilities/getScopeViewItems");
-const ConditionalStyleWizard_1 = require("../View/ConditionalStyle/Wizard/ConditionalStyleWizard");
 const getRuleViewItems_1 = require("./Utilities/getRuleViewItems");
 const getStyleViewItems_1 = require("./Utilities/getStyleViewItems");
 const getObjectTagsViewItems_1 = require("./Utilities/getObjectTagsViewItems");
@@ -79,25 +78,6 @@ class ConditionalStyleModule extends AdaptableModuleBase_1.AdaptableModuleBase {
         });
         this.api.conditionalStyleApi.editConditionalStyles(oldConditionalStyles);
     }
-    addColumnMenuItems(column) {
-        if (column && this.isModuleEditable() && !column.isSparkline) {
-            let conditionalStyles = this.api.conditionalStyleApi.getConditionalStylesForColumn(column);
-            let firstConditionalStyle = ArrayExtensions_1.default.IsNotNullOrEmpty(conditionalStyles)
-                ? conditionalStyles.find((cs) => this.api.scopeApi.isColumnInScopeColumns(column, cs.Scope))
-                : undefined;
-            let conditionalStyleExists = firstConditionalStyle != undefined;
-            let label = conditionalStyleExists ? 'Edit ' : 'Create ';
-            let popupParam = {
-                column: column,
-                action: conditionalStyleExists ? 'Edit' : 'New',
-                source: 'ColumnMenu',
-                value: firstConditionalStyle,
-            };
-            return [
-                this.createColumnMenuItemShowPopup(label + this.moduleInfo.FriendlyName, this.moduleInfo.Popup, this.moduleInfo.Glyph, popupParam),
-            ];
-        }
-    }
     getTeamSharingAction() {
         return {
             ModuleEntities: this.api.conditionalStyleApi.getAllConditionalStyle(),
@@ -211,13 +191,7 @@ class ConditionalStyleModule extends AdaptableModuleBase_1.AdaptableModuleBase {
     getViewProperties() {
         return {
             HeaderComponent: ConditionalStylePopupHeader_1.ConditionalStylePopupHeader,
-            getDeleteAction: (conditionalStyle) => ConditionalStyleRedux.ConditionalStyleDelete(conditionalStyle),
-            getSuspendAction: (conditionalStyle) => ConditionalStyleRedux.ConditionalStyleSuspend(conditionalStyle),
-            getUnSuspendAction: (conditionalStyle) => ConditionalStyleRedux.ConditionalStyleUnSuspend(conditionalStyle),
-            emptyView: "Click 'New' to create a new Conditional Style Rule.  When this is met, row or cells in the Conditional Style's scope will be styled appropriately.",
-            getEditWizard() {
-                return ConditionalStyleWizard_1.ConditionalStyleWizard;
-            },
+            emptyView: '',
         };
     }
     canBeAssociatedWithLayouts() {

package/src/View/ConditionalStyle/Wizard/ConditionalStyleWizard.js

@@ -16,7 +16,6 @@ const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
 const EntityRulesEditor_1 = require("../../Components/EntityRulesEditor");
 const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
 const react_redux_1 = require("react-redux");
-const ConditionalStyleRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/ConditionalStyleRedux"));
 const ConditionalStyleSettingsWizardSettings_1 = require("./ConditionalStyleSettingsWizardSettings");
 const ObjectTagsWizardSection_1 = require("../../Wizard/ObjectTagsWizardSection");
 const ConditionalStyleWizard = (props) => {
@@ -43,16 +42,7 @@ const ConditionalStyleWizard = (props) => {
         return conditionalStyle;
     });
     const dispatch = (0, react_redux_1.useDispatch)();
-    const handleFinish = () => {
-        if (data) {
-            dispatch(ConditionalStyleRedux.ConditionalStyleEdit(conditionalStyle));
-        }
-        else {
-            dispatch(ConditionalStyleRedux.ConditionalStyleAdd(conditionalStyle));
-        }
-        props.onCloseWizard();
-    };
-    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: conditionalStyle, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: conditionalStyle, onHide: props.onCloseWizard, sections: [
             {
                 title: 'Style',
                 details: 'Specify the Style to be applied conditionally',

package/src/agGrid/ActionColumnRenderer.d.ts

@@ -1,8 +1,10 @@
+/// <reference types="react" />
 import { ICellRendererComp, ICellRendererParams } from '@ag-grid-community/core';
 import { ActionColumn } from '../AdaptableOptions/ActionOptions';
 interface ActionColumnCellRendererParams extends ICellRendererParams {
     actionColumn?: ActionColumn;
 }
+export declare const ReactActionColumnRenderer: (props: ActionColumnCellRendererParams) => JSX.Element;
 export declare class ActionColumnRenderer implements ICellRendererComp {
     private eGui;
     private eventListener;

package/src/agGrid/ActionColumnRenderer.js

@@ -1,76 +1,108 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ActionColumnRenderer = void 0;
+exports.ActionColumnRenderer = exports.ReactActionColumnRenderer = void 0;
 const tslib_1 = require("tslib");
 const SimpleButton_1 = tslib_1.__importDefault(require("../components/SimpleButton"));
 const React = tslib_1.__importStar(require("react"));
 const uuid_1 = require("../components/utils/uuid");
+const useRerender_1 = require("../components/utils/useRerender");
+function getActionButtonsAndActionColumn(adaptable, actionColumn, colId) {
+    var _a;
+    const actionCol = actionColumn
+        ? actionColumn
+        : (_a = adaptable.api.actionApi.getAllActionColumn()) === null || _a === void 0 ? void 0 : _a.find((ac) => ac.columnId == colId);
+    if (actionCol && actionCol.actionColumnButton) {
+        let actionButtons = Array.isArray(actionCol.actionColumnButton)
+            ? actionCol.actionColumnButton
+            : [actionCol.actionColumnButton];
+        if (!actionButtons.length) {
+            return;
+        }
+        // actionButtons don't have IDs, so we need to generate them to be used later as a react component key
+        actionButtons = actionButtons.map((actionButton) => (Object.assign(Object.assign({}, actionButton), { Uuid: (0, uuid_1.createUuid)() })));
+        return { actionButtons, actionColumn: actionCol };
+    }
+    return {
+        actionButtons: [],
+        actionColumn: actionCol,
+    };
+}
+const renderActionButtons = (buttons, adaptableApi, context, rerender) => {
+    return (React.createElement(React.Fragment, null, buttons.map((button, index) => {
+        var _a, _b;
+        if (button.hidden && button.hidden(button, context)) {
+            return;
+        }
+        const buttonIcon = adaptableApi.internalApi.getIconForButton(button, context, {
+            height: 15,
+            width: 15,
+        });
+        const buttonStyle = adaptableApi.internalApi.getStyleForButton(button, context);
+        const buttonLabel = adaptableApi.internalApi.getLabelForButton(button, context);
+        const buttonTooltip = adaptableApi.internalApi.getTooltipForButton(button, context);
+        const handleClick = () => {
+            var _a;
+            (_a = button.onClick) === null || _a === void 0 ? void 0 : _a.call(button, button, context);
+            // Timeout to let any updates to be done before re-rendering the component
+            setTimeout(() => {
+                // when called again it triggers a re-render
+                // https:reactjs.org/docs/react-dom.html#render
+                rerender();
+            }, 16);
+        };
+        const disabled = button.disabled && button.disabled(button, context);
+        return (React.createElement(SimpleButton_1.default, { key: button.Uuid, "data-name": `action-button-${index + 1}`, variant: (_a = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.variant) !== null && _a !== void 0 ? _a : 'text', disabled: disabled, tooltip: buttonTooltip, icon: buttonIcon, tone: (_b = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.tone) !== null && _b !== void 0 ? _b : 'none', onClick: handleClick, className: buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className, accessLevel: 'Full' }, buttonLabel));
+    })));
+};
+const ReactActionColumnRenderer = (props) => {
+    const rerender = (0, useRerender_1.useRerender)();
+    const adaptable = props.api.__adaptable;
+    const { actionButtons, actionColumn } = getActionButtonsAndActionColumn(adaptable, props.actionColumn, props.colDef.colId);
+    if (!actionColumn || !actionButtons.length) {
+        return null;
+    }
+    if (adaptable.api.gridApi.isGroupRowNode(props.node) && !actionColumn.includeGroupedRows) {
+        return null;
+    }
+    const pkValue = adaptable.getPrimaryKeyValueFromRowNode(props.node);
+    const buttonContext = {
+        actionColumn,
+        primaryKeyValue: pkValue,
+        rowNode: props.node,
+        adaptableApi: adaptable.api,
+    };
+    return (React.createElement("div", { className: "ab-ActionColumn" }, renderActionButtons(actionButtons, adaptable.api, buttonContext, rerender)));
+};
+exports.ReactActionColumnRenderer = ReactActionColumnRenderer;
 class ActionColumnRenderer {
     // gets called once before the renderer is used
     init(params) {
-        var _a;
         const adaptable = params.api.__adaptable;
-        const actionCol = params.actionColumn
-            ? params.actionColumn
-            : (_a = adaptable.api.actionApi
-                .getAllActionColumn()) === null || _a === void 0 ? void 0 : _a.find((ac) => ac.columnId == params.colDef.colId);
-        if (actionCol && actionCol.actionColumnButton) {
-            let actionButtons = Array.isArray(actionCol.actionColumnButton)
-                ? actionCol.actionColumnButton
-                : [actionCol.actionColumnButton];
-            if (!actionButtons.length) {
-                return;
-            }
-            // actionButtons don't have IDs, so we need to generate them to be used later as a react component key
-            actionButtons = actionButtons.map((actionButton) => (Object.assign(Object.assign({}, actionButton), { Uuid: (0, uuid_1.createUuid)() })));
-            // create the cell
-            this.eGui = document.createElement('div');
-            this.eGui.className = 'ab-ActionColumn';
-            // if its a group node then only show if set to do so
-            if (adaptable.api.gridApi.isGroupRowNode(params.node) && !actionCol.includeGroupedRows) {
-                this.eGui.innerHTML = '';
-                return;
-            }
-            const pkValue = adaptable.getPrimaryKeyValueFromRowNode(params.node);
-            const buttonContext = {
-                actionColumn: actionCol,
-                primaryKeyValue: pkValue,
-                rowNode: params.node,
-                adaptableApi: adaptable.api,
-            };
-            const renderActionButtons = (buttons, adaptableApi, context) => {
-                return (React.createElement(React.Fragment, null, buttons.map((button, index) => {
-                    var _a, _b;
-                    if (button.hidden && button.hidden(button, context)) {
-                        return;
-                    }
-                    const buttonIcon = adaptableApi.internalApi.getIconForButton(button, context, {
-                        height: 15,
-                        width: 15,
-                    });
-                    const buttonStyle = adaptableApi.internalApi.getStyleForButton(button, context);
-                    const buttonLabel = adaptableApi.internalApi.getLabelForButton(button, context);
-                    const buttonTooltip = adaptableApi.internalApi.getTooltipForButton(button, context);
-                    const handleClick = () => {
-                        button.onClick(button, context);
-                        // Timeout to let any updates to be done before re-rendering the component
-                        setTimeout(() => {
-                            // when called again it triggers a re-render
-                            // https:reactjs.org/docs/react-dom.html#render
-                            doRender();
-                        }, 16);
-                    };
-                    const disabled = button.disabled && button.disabled(button, context);
-                    return (React.createElement(SimpleButton_1.default, { key: button.Uuid, "data-name": `action-button-${index + 1}`, variant: (_a = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.variant) !== null && _a !== void 0 ? _a : 'text', disabled: disabled, tooltip: buttonTooltip, icon: buttonIcon, tone: (_b = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.tone) !== null && _b !== void 0 ? _b : 'none', onClick: handleClick, className: buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className, accessLevel: 'Full' }, buttonLabel));
-                })));
-            };
-            const eGui = this.eGui;
-            const doRender = () => {
-                this.unmountReactRoot = adaptable.renderReactRoot(renderActionButtons(actionButtons, adaptable.api, buttonContext), eGui);
-            };
-            this.render = doRender;
-            doRender();
+        const { actionButtons, actionColumn } = getActionButtonsAndActionColumn(adaptable, params.actionColumn, params.colDef.colId);
+        if (!actionColumn || !actionButtons.length) {
+            return;
+        }
+        // create the cell
+        this.eGui = document.createElement('div');
+        this.eGui.className = 'ab-ActionColumn';
+        // if its a group node then only show if set to do so
+        if (adaptable.api.gridApi.isGroupRowNode(params.node) && !actionColumn.includeGroupedRows) {
+            this.eGui.innerHTML = '';
+            return;
         }
+        const pkValue = adaptable.getPrimaryKeyValueFromRowNode(params.node);
+        const buttonContext = {
+            actionColumn,
+            primaryKeyValue: pkValue,
+            rowNode: params.node,
+            adaptableApi: adaptable.api,
+        };
+        const eGui = this.eGui;
+        const doRender = () => {
+            this.unmountReactRoot = adaptable.renderReactRoot(renderActionButtons(actionButtons, adaptable.api, buttonContext, doRender), eGui);
+        };
+        this.render = doRender;
+        doRender();
     }
     // defined on init
     // used to re-render in refresh

package/src/agGrid/Adaptable.js

@@ -2335,7 +2335,7 @@ class Adaptable {
                 pinned: this.adaptableOptions.actionOptions.actionRowButtonsPosition === 'pinnedRight'
                     ? 'right'
                     : 'left',
-                cellRenderer: ActionColumnRenderer_1.ActionColumnRenderer,
+                cellRenderer: this.variant === 'react' ? ActionColumnRenderer_1.ReactActionColumnRenderer : ActionColumnRenderer_1.ActionColumnRenderer,
                 cellRendererParams: {
                     actionColumn: rowEditActionColumn,
                 },
@@ -2364,7 +2364,7 @@ class Adaptable {
                 filter: false,
                 sortable: false,
                 enableRowGroup: false,
-                cellRenderer: ActionColumnRenderer_1.ActionColumnRenderer,
+                cellRenderer: this.variant === 'react' ? ActionColumnRenderer_1.ReactActionColumnRenderer : ActionColumnRenderer_1.ActionColumnRenderer,
                 type: [GeneralConstants_1.AB_SPECIAL_COLUMN, 'abColDefObject'],
             };
             (0, LoggingHelper_1.LogAdaptableInfo)('Setting up Action Column: ' + actionColumn.columnId);

package/src/agGrid/PercentBarRenderer.js

@@ -4,6 +4,7 @@ exports.getPercentBarRendererForColumn = void 0;
 const tslib_1 = require("tslib");
 const Helper_1 = tslib_1.__importDefault(require("../Utilities/Helpers/Helper"));
 const clamp_1 = tslib_1.__importDefault(require("lodash/clamp"));
+const FormatHelper_1 = require("../Utilities/Helpers/FormatHelper");
 const getPercentBarRendererForColumn = (columnStyle, abColumn, api) => {
     if (!columnStyle.PercentBarStyle) {
         return;
@@ -56,6 +57,18 @@ const getPercentBarRendererForColumn = (columnStyle, abColumn, api) => {
                     textEl.className = 'ab-PercentBar__text';
                     textEl.style.lineHeight = '1.2';
                     if (percentBarStyle.CellText.includes('CellValue')) {
+                        let preparedValue = value;
+                        const formatColumn = api.formatColumnApi.getFormatColumnWithDisplayFormatForColumn(abColumn);
+                        if (formatColumn &&
+                            !formatColumn.IsSuspended &&
+                            formatColumn.DisplayFormat &&
+                            api.scopeApi.isColumnInNumericScope(abColumn, formatColumn.Scope)) {
+                            const options = formatColumn.DisplayFormat.Options;
+                            value = api.formatColumnApi.getNumberFormattedValue(params.value, params.node, abColumn, options);
+                        }
+                        else {
+                            value = (0, FormatHelper_1.NumberFormatter)(value, { FractionDigits: 2 });
+                        }
                         textEl.innerText = value;
                     }
                     if (percentBarStyle.CellText.includes('PercentageValue')) {

package/src/metamodel/adaptable.metamodel.d.ts

@@ -4728,6 +4728,13 @@ export declare const ADAPTABLE_METAMODEL: {
             uiLabel: string;
             isOptional: boolean;
             reference?: undefined;
+        } | {
+            name: string;
+            kind: string;
+            description: string;
+            uiLabel: string;
+            isOptional?: undefined;
+            reference?: undefined;
         } | {
             name: string;
             kind: string;