@genesislcap/grid-pro 14.151.2-alpha-6dc6e2c.0 → 14.152.0

package/dist/esm/grid-pro.js

@@ -1,13 +1,13 @@
-import { __decorate, __rest } from "tslib";
+import { __awaiter, __decorate, __rest } from "tslib";
 import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
 import { ComponentUtil, Grid, ModuleRegistry, } from '@ag-grid-community/core';
 import { CsvExportModule } from '@ag-grid-community/csv-export';
-import { Session } from '@genesislcap/foundation-comms';
 import { insertDocumentCSSRule, LifecycleMixin, respondToVisibility, } from '@genesislcap/foundation-utils';
 import { attr, DOM, observable } from '@microsoft/fast-element';
 import { FoundationElement } from '@microsoft/fast-foundation';
 import { classNames } from '@microsoft/fast-web-utilities';
 import * as changeCase from 'change-case';
+import debounce from 'lodash.debounce';
 import { GridProCell } from './cell';
 import { SelectEditor, NumberEditor, MultiselectEditor, DateEditor, StringEditor, } from './cell-editors';
 import { ActionRenderer, ActionsMenuRenderer, BooleanRenderer, EditableRenderer, } from './cell-renderers';
@@ -19,6 +19,7 @@ import { DEBOUNCED_RESIZE_TIME } from './grid-pro.definitions';
 import { foundationGridProStyles as styles } from './grid-pro.styles';
 import { gridProTemplate as template } from './grid-pro.template';
 import { AgGridTheme, GridProRendererTypes, agThemeFontsId, agThemeTokenMapClassname, GRID_READY_EVENT, ERROR_COLUMN_FIELD, EDITED_COLUMN_FIELD, GridOptionsConfig, } from './grid-pro.types';
+import { StatePersistence } from './state-persistence';
 import { ErrorTooltip } from './tooltips';
 import { convertToKebabCase, logger, mergeAndDedupColDefWithColumnState } from './utils';
 GridProGenesisDatasource;
@@ -27,6 +28,7 @@ GridProServerSideDatasource;
 GridProCell;
 GridProColumn;
 ModuleRegistry.registerModules([CsvExportModule, ClientSideRowModelModule]);
+const DEBOUNCE_TIME = 400;
 /**
  * The Grid Pro element.
  * @remarks Grid Pro is a Web Component wrapper around the AG Grid Community library.
@@ -90,12 +92,6 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
         this.gridFontFace = defaultAgGridFontFace;
         this.columnComponentName = 'grid-pro-column';
         this.theme = AgGridTheme.alpine;
-        /**
-         * If true, will block scrolling when context menu is open and keep the grid in the same position without scrolling to new records
-         * @remarks Defaults to false
-         * @alpha
-         */
-        this.blockScrollingOnContextMenu = false;
         this.rehydrationAttempted = false;
         this.gridEventsQueue = [];
         this.filterConfig = undefined;
@@ -199,44 +195,45 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
         return colState.map((col) => (Object.assign(Object.assign({}, col), { width: null })));
     }
     saveColumnState() {
-        if (this.rehydrationAttempted && this.statePersistanceEnabled()) {
-            const existingOptions = JSON.parse(this.session.getLocalStorageItem('gridOptions') || '{}');
-            let colState = this.columnApi.getColumnState();
-            colState = this.gridAutosizingEnabled
-                ? this.removeConfigWidthsToAutosize(colState)
-                : colState;
-            if (colState.length === 0)
-                return;
-            existingOptions[this.persistColumnStateKey] = JSON.stringify(colState);
-            this.session.setLocalStorageItem('gridOptions', JSON.stringify(existingOptions));
-        }
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.rehydrationAttempted && this.statePersistanceEnabled()) {
+                let colState = this.columnApi.getColumnState();
+                colState = this.gridAutosizingEnabled
+                    ? this.removeConfigWidthsToAutosize(colState)
+                    : colState;
+                if (colState.length === 0 || JSON.stringify(colState) === JSON.stringify(this.columnState))
+                    return;
+                yield this.statePersistence.saveColumnState(this.persistColumnStateKey, colState);
+            }
+        });
     }
     /**
-     * Gets the saved grid ColumnState[] from local storage
+     * Gets the saved grid ColumnState[] from storage
      * @remarks This is used to restore the grid state when the grid is rehydrated
      * @privateRemarks Not using `columnApi.get|setColumnState()` for these flows as it doesn't work setting new columnDefs vs different ordering.
      * @public
      */
     getSavedColumnState() {
-        const localStorageGridOptions = this.session.getLocalStorageItem('gridOptions');
-        if (this.statePersistanceEnabled() && localStorageGridOptions) {
-            const allGridOptions = JSON.parse(localStorageGridOptions);
-            if (this.persistColumnStateKey in allGridOptions) {
-                return JSON.parse(allGridOptions[this.persistColumnStateKey]);
+        return __awaiter(this, void 0, void 0, function* () {
+            this.columnState = [];
+            if (this.statePersistanceEnabled()) {
+                this.columnState = yield this.statePersistence.getColumnState(this.persistColumnStateKey);
             }
-        }
-        return [];
+            return this.columnState;
+        });
     }
     restoreColumnState() {
         var _a;
-        this.rehydrationAttempted = true;
-        const colState = this.getSavedColumnState();
-        if (colState && colState.length > 0) {
-            (_a = this.columnApi) === null || _a === void 0 ? void 0 : _a.applyColumnState({
-                state: colState,
-                applyOrder: true,
-            });
-        }
+        return __awaiter(this, void 0, void 0, function* () {
+            this.rehydrationAttempted = true;
+            const colState = yield this.getSavedColumnState();
+            if (colState && colState.length > 0) {
+                (_a = this.columnApi) === null || _a === void 0 ? void 0 : _a.applyColumnState({
+                    state: colState,
+                    applyOrder: true,
+                });
+            }
+        });
     }
     cacheFilterConfig() {
         var _a;
@@ -261,9 +258,10 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
             this.querySelector('grid-pro-server-side-datasource'));
     }
     set gridOptions(options) {
+        const debounceSaveColumnState = debounce(this.saveColumnState.bind(this), DEBOUNCE_TIME);
         const globalEventListener = this.globalEventListener.bind(this);
         const gridOnChangeCallback = () => {
-            this.saveColumnState.bind(this)();
+            debounceSaveColumnState();
             this.debouncedColumnAutosize.bind(this)();
         };
         Array.from(this.attributes).forEach((attribute) => {
@@ -272,7 +270,7 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
                 return;
             this.agAttributes[attrName] = attribute.value;
         });
-        const { columnDefs, components, defaultColDef, onCellContextMenu, onGridReady, onFirstDataRendered } = options, rest = __rest(options, ["columnDefs", "components", "defaultColDef", "onCellContextMenu", "onGridReady", "onFirstDataRendered"]);
+        const { columnDefs, components, defaultColDef, onGridReady, onFirstDataRendered } = options, rest = __rest(options, ["columnDefs", "components", "defaultColDef", "onGridReady", "onFirstDataRendered"]);
         const derivedOptions = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.gridOptionsConfig), { defaultColDef: Object.assign({ enableCellChangeFlash: this.enableCellFlashing, filter: true, resizable: true, sortable: true }, defaultColDef), components: this.combineAllGridComponents(components), suppressDragLeaveHidesColumns: true }), this.eventsAndCallbacks), { onGridReady: (event) => {
                 var _a, _b;
                 this.gridApi = (_a = options.api) !== null && _a !== void 0 ? _a : event.api;
@@ -296,26 +294,19 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
                 if (onFirstDataRendered) {
                     onFirstDataRendered(event);
                 }
-            }, onColumnPinned: gridOnChangeCallback, onColumnResized: gridOnChangeCallback, onColumnMoved: gridOnChangeCallback, onDisplayedColumnsChanged: gridOnChangeCallback, onFilterChanged: gridOnChangeCallback, onGridSizeChanged: gridOnChangeCallback, onSortChanged: gridOnChangeCallback, onCellContextMenu: (event) => {
-                if (this.blockScrollingOnContextMenu) {
-                    debugger;
-                    this.selectedRowId = event.node.id;
-                    this.selectedColId = event.colDef.colId;
-                    this.addEventListener('click', (e) => {
-                        this.selectedRowId = undefined;
-                        this.selectedColId = undefined;
-                    }, { once: true });
-                }
-                if (onCellContextMenu) {
-                    onCellContextMenu(event);
-                }
-            } }), rest);
+            }, onColumnPinned: gridOnChangeCallback, onColumnResized: gridOnChangeCallback, onColumnMoved: gridOnChangeCallback, onDisplayedColumnsChanged: gridOnChangeCallback, onFilterChanged: gridOnChangeCallback, onGridSizeChanged: gridOnChangeCallback, onSortChanged: gridOnChangeCallback }), rest);
         if (this.gridProDatasource) {
             derivedOptions.columnDefs = columnDefs;
+            this.initGridOptions(derivedOptions, globalEventListener);
         }
         else {
-            derivedOptions.columnDefs = this.mergeAllColumnDefsAndStates(columnDefs);
+            this.mergeAllColumnDefsAndStates(columnDefs).then((value) => {
+                derivedOptions.columnDefs = value;
+                this.initGridOptions(derivedOptions, globalEventListener);
+            });
         }
+    }
+    initGridOptions(derivedOptions, globalEventListener) {
         this.agGridOptions = Object.assign(Object.assign({}, this.agGridOptions), ComponentUtil.copyAttributesToGridOptions(derivedOptions, this.agAttributes));
         const gridParams = {
             globalEventListener: globalEventListener,
@@ -354,70 +345,72 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
      */
     mergeAllColumnDefsAndStates(columnDefs, deferredColumnDefsOrState = false) {
         var _a;
-        const columnDefinitionsFromMetadata = columnDefs || [];
-        columnDefinitionsFromMetadata.forEach((colDefFromMetadata) => {
-            if (this.headerCaseType && colDefFromMetadata.field && !colDefFromMetadata.headerName) {
-                const changeCaseByType = changeCase[this.headerCaseType];
-                if (changeCaseByType) {
-                    colDefFromMetadata.headerName = changeCaseByType(colDefFromMetadata.field);
+        return __awaiter(this, void 0, void 0, function* () {
+            const columnDefinitionsFromMetadata = columnDefs || [];
+            columnDefinitionsFromMetadata.forEach((colDefFromMetadata) => {
+                if (this.headerCaseType && colDefFromMetadata.field && !colDefFromMetadata.headerName) {
+                    const changeCaseByType = changeCase[this.headerCaseType];
+                    if (changeCaseByType) {
+                        colDefFromMetadata.headerName = changeCaseByType(colDefFromMetadata.field);
+                    }
+                    else {
+                        logger.warn(`Invalid header-case-type attribute value: ${this.headerCaseType}. Please use one of the following: camelCase, capitalCase, dotCase, headerCase, noCase, paramCase, pascalCase, pathCase, sentenceCase, snakeCase.`);
+                    }
                 }
-                else {
-                    logger.warn(`Invalid header-case-type attribute value: ${this.headerCaseType}. Please use one of the following: camelCase, capitalCase, dotCase, headerCase, noCase, paramCase, pascalCase, pathCase, sentenceCase, snakeCase.`);
+            });
+            const templateColumnDefs = Array.from(this.querySelectorAll(this.columnComponentName))
+                .map((templateColumn) => templateColumn.definition)
+                .map((columnDef) => {
+                // enable cell flashing for each column if unspecified on column level but enabled on grid level
+                if (this.enableCellFlashing && columnDef.enableCellChangeFlash === undefined) {
+                    columnDef.enableCellChangeFlash = true;
                 }
-            }
-        });
-        const templateColumnDefs = Array.from(this.querySelectorAll(this.columnComponentName))
-            .map((templateColumn) => templateColumn.definition)
-            .map((columnDef) => {
-            // enable cell flashing for each column if unspecified on column level but enabled on grid level
-            if (this.enableCellFlashing && columnDef.enableCellChangeFlash === undefined) {
-                columnDef.enableCellChangeFlash = true;
-            }
-            if (columnDef.editable) {
-                if (!columnDef.cellRenderer && !columnDef.cellRendererSelector) {
-                    columnDef.cellRendererSelector = (params) => {
-                        if (params.data[EDITED_COLUMN_FIELD] === columnDef.field) {
-                            return {
-                                component: GridProRendererTypes.editable,
-                            };
-                        }
-                    };
+                if (columnDef.editable) {
+                    if (!columnDef.cellRenderer && !columnDef.cellRendererSelector) {
+                        columnDef.cellRendererSelector = (params) => {
+                            if (params.data[EDITED_COLUMN_FIELD] === columnDef.field) {
+                                return {
+                                    component: GridProRendererTypes.editable,
+                                };
+                            }
+                        };
+                    }
+                    if (!columnDef.tooltipComponent && !columnDef.tooltipValueGetter) {
+                        columnDef.tooltipComponent = ErrorTooltip;
+                        columnDef.tooltipValueGetter = (params) => {
+                            const error = params.data[ERROR_COLUMN_FIELD];
+                            if (error && error.column === columnDef.field) {
+                                return error.message;
+                            }
+                        };
+                    }
+                    if (!columnDef.cellClassRules) {
+                        columnDef.cellClassRules = {
+                            error: (params) => { var _a; return ((_a = params.data[ERROR_COLUMN_FIELD]) === null || _a === void 0 ? void 0 : _a.column) === params.colDef.field; },
+                        };
+                    }
                 }
-                if (!columnDef.tooltipComponent && !columnDef.tooltipValueGetter) {
-                    columnDef.tooltipComponent = ErrorTooltip;
-                    columnDef.tooltipValueGetter = (params) => {
-                        const error = params.data[ERROR_COLUMN_FIELD];
-                        if (error && error.column === columnDef.field) {
-                            return error.message;
-                        }
-                    };
+                const metadataColumnDef = columnDefinitionsFromMetadata.find((colDef) => columnDef.field === colDef.field);
+                return Object.assign(Object.assign({}, metadataColumnDef), columnDef);
+            });
+            const templateColumnKeys = templateColumnDefs.map((x) => x.field);
+            const colDefsToReturn = [
+                ...templateColumnDefs,
+                ...(this.onlyTemplateColDefs
+                    ? []
+                    : columnDefinitionsFromMetadata.filter((g) => !templateColumnKeys.includes(g.field))),
+            ];
+            if (this.gridProDatasource && deferredColumnDefsOrState) {
+                const savedColumnState = yield this.getSavedColumnState();
+                if ((savedColumnState === null || savedColumnState === void 0 ? void 0 : savedColumnState.length) > 0) {
+                    return mergeAndDedupColDefWithColumnState(colDefsToReturn, savedColumnState);
                 }
-                if (!columnDef.cellClassRules) {
-                    columnDef.cellClassRules = {
-                        error: (params) => { var _a; return ((_a = params.data[ERROR_COLUMN_FIELD]) === null || _a === void 0 ? void 0 : _a.column) === params.colDef.field; },
-                    };
+                else if (((_a = this.gridProDatasource.deferredColumnStates) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                    return mergeAndDedupColDefWithColumnState(colDefsToReturn, this.gridProDatasource.deferredColumnStates);
                 }
             }
-            const metadataColumnDef = columnDefinitionsFromMetadata.find((colDef) => columnDef.field === colDef.field);
-            return Object.assign(Object.assign({}, metadataColumnDef), columnDef);
+            return colDefsToReturn;
         });
-        const templateColumnKeys = templateColumnDefs.map((x) => x.field);
-        const colDefsToReturn = [
-            ...templateColumnDefs,
-            ...(this.onlyTemplateColDefs
-                ? []
-                : columnDefinitionsFromMetadata.filter((g) => !templateColumnKeys.includes(g.field))),
-        ];
-        if (this.gridProDatasource && deferredColumnDefsOrState) {
-            const savedColumnState = this.getSavedColumnState();
-            if ((savedColumnState === null || savedColumnState === void 0 ? void 0 : savedColumnState.length) > 0) {
-                return mergeAndDedupColDefWithColumnState(colDefsToReturn, savedColumnState);
-            }
-            else if (((_a = this.gridProDatasource.deferredColumnStates) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-                return mergeAndDedupColDefWithColumnState(colDefsToReturn, this.gridProDatasource.deferredColumnStates);
-            }
-        }
-        return colDefsToReturn;
     }
     get observedAttributes() {
         // allow properties to be supplied either lowercased or kebab-cased
@@ -479,8 +472,8 @@ __decorate([
     observable
 ], GridPro.prototype, "gridApi", void 0);
 __decorate([
-    Session
-], GridPro.prototype, "session", void 0);
+    StatePersistence
+], GridPro.prototype, "statePersistence", void 0);
 __decorate([
     attr({ attribute: 'auto-cell-renderer-by-type', mode: 'boolean' })
 ], GridPro.prototype, "autoCellRendererByType", void 0);
@@ -535,9 +528,6 @@ __decorate([
 __decorate([
     attr
 ], GridPro.prototype, "theme", void 0);
-__decorate([
-    attr({ attribute: 'block-scrolling-on-context-menu', mode: 'boolean' })
-], GridPro.prototype, "blockScrollingOnContextMenu", void 0);
 __decorate([
     observable
 ], GridPro.prototype, "classNames", void 0);

package/dist/esm/index.js

@@ -11,6 +11,7 @@ export * from './grid-pro.template';
 export * from './grid-pro.types';
 export * from './grid-pro';
 export * from './grid-pro-genesis-datasource';
+export * from './state-persistence';
 export * from './style';
 export * from './tooltips';
 export * from './utils';

package/dist/esm/state-persistence/index.js

@@ -0,0 +1,3 @@
+export * from './kv-state';
+export * from './local-state';
+export * from './state-persistence';

package/dist/esm/state-persistence/kv-state.js

@@ -0,0 +1,58 @@
+import { __awaiter, __decorate } from "tslib";
+import { KVStorage, Session } from '@genesislcap/foundation-comms';
+import { logger } from '../utils';
+/**
+ * Implementation for the KV Storage State Persistence interface.
+ * @public
+ */
+export class KVStorageStatePersistence {
+    getColumnState(persistColumnStateKey) {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.migrateLocalStorageToKVStorage(persistColumnStateKey);
+            const kvColumnState = yield this.kvStorage.get(persistColumnStateKey);
+            const storageColumnState = kvColumnState ? (_b = (_a = kvColumnState[0]) === null || _a === void 0 ? void 0 : _a.kv) === null || _b === void 0 ? void 0 : _b.value : undefined;
+            if (storageColumnState) {
+                return JSON.parse(storageColumnState);
+            }
+            return [];
+        });
+    }
+    saveColumnState(persistColumnStateKey, columnState) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.kvStorage.put([
+                {
+                    key: persistColumnStateKey,
+                    value: JSON.stringify(columnState),
+                },
+            ]);
+        });
+    }
+    migrateLocalStorageToKVStorage(persistColumnStateKey) {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function* () {
+            const kv = yield this.kvStorage.get(persistColumnStateKey);
+            if (kv && ((_b = (_a = kv[0]) === null || _a === void 0 ? void 0 : _a.kv) === null || _b === void 0 ? void 0 : _b.value))
+                return;
+            const localGridOptions = this.session.getLocalStorageItem('gridOptions');
+            const localState = localGridOptions
+                ? JSON.parse(localGridOptions)[persistColumnStateKey]
+                : undefined;
+            if (localState) {
+                logger.debug(`Columns state migration for key: ${persistColumnStateKey} from LocalStorage to KV Storage`);
+                this.kvStorage.put([
+                    {
+                        key: persistColumnStateKey,
+                        value: localState,
+                    },
+                ]);
+            }
+        });
+    }
+}
+__decorate([
+    KVStorage
+], KVStorageStatePersistence.prototype, "kvStorage", void 0);
+__decorate([
+    Session
+], KVStorageStatePersistence.prototype, "session", void 0);

package/dist/esm/state-persistence/local-state.js

@@ -0,0 +1,30 @@
+import { __awaiter, __decorate } from "tslib";
+import { Session } from '@genesislcap/foundation-comms';
+/**
+ * Implementation for the Local Storage State Persistence interface.
+ * @public
+ */
+export class LocalStorageStatePersistence {
+    getColumnState(persistColumnStateKey) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const localStorageGridOptions = this.session.getLocalStorageItem('gridOptions');
+            if (localStorageGridOptions) {
+                const allGridOptions = JSON.parse(localStorageGridOptions);
+                if (persistColumnStateKey in allGridOptions) {
+                    return JSON.parse(allGridOptions[persistColumnStateKey]);
+                }
+            }
+            return [];
+        });
+    }
+    saveColumnState(persistColumnStateKey, columnState) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const existingOptions = JSON.parse(this.session.getLocalStorageItem('gridOptions') || '{}');
+            existingOptions[persistColumnStateKey] = JSON.stringify(columnState);
+            this.session.setLocalStorageItem('gridOptions', JSON.stringify(existingOptions));
+        });
+    }
+}
+__decorate([
+    Session
+], LocalStorageStatePersistence.prototype, "session", void 0);

package/dist/esm/state-persistence/state-persistence.js

@@ -0,0 +1,7 @@
+import { DI } from '@microsoft/fast-foundation';
+import { LocalStorageStatePersistence } from './local-state';
+/**
+ * The DI token for the StatePersistence interface.
+ * @internal
+ */
+export const StatePersistence = DI.createInterface((x) => x.singleton(LocalStorageStatePersistence));