@genesislcap/grid-pro 14.200.1-alpha-e974201.0 → 14.202.0

package/dist/esm/grid-pro-genesis-datasource/grid-pro-genesis-datasource.js

@@ -1,15 +1,14 @@
 import { __awaiter, __decorate } from "tslib";
-import { Auth, Datasource, DatasourceDefaults, MessageType, dataServerResultFilter, normaliseCriteria, } from '@genesislcap/foundation-comms';
+import { Events, } from '@ag-grid-community/core';
+import { MessageType, dataServerResultFilter, normaliseCriteria, } from '@genesislcap/foundation-comms';
 import { LifecycleMixin } from '@genesislcap/foundation-utils';
-import { DOM, attr, customElement, observable } from '@microsoft/fast-element';
+import { DOM, attr, customElement } from '@microsoft/fast-element';
 import { BehaviorSubject, EMPTY } from 'rxjs';
 import { catchError, debounceTime, skip, tap } from 'rxjs/operators';
-import { GridProBaseDatasource } from '../datasource/base.datasource';
+import { criteriaDelimiter, GridProBaseDatasource } from '../datasource/base.datasource';
 import { getClientSideFilterParamsByFieldType } from '../datasource/client-side.grid-definitions';
 import { logger } from '../utils/logger';
 import { gridProGenesisDatasourceEventNames } from './grid-pro-genesis-datasource.config';
-const criteriaDelimiter = ';';
-const criteriaJoin = ' && ';
 const withoutFullInit = null;
 const withoutColumnDefs = null;
 /**
@@ -22,13 +21,9 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
         super(...arguments);
         this.applyFuncName = 'applyTransaction';
         this.applyAsyncFuncName = 'applyTransactionAsync';
-        this.pollingInterval = DatasourceDefaults.REQ_REP_POLLING_INTERVAL_MS;
-        this.disablePolling = false;
         this.restartOnReconnection = false;
         this.keepColDefsOnClearRowData = false;
         this.requiresFullRowDataAndColDefs = true;
-        this.criteriaFromFilters = new Map();
-        this.update = new BehaviorSubject(new Map());
     }
     // DatasourceOptions
     criteriaChanged(oldCriteria, newCriteria) {
@@ -75,7 +70,7 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
         DOM.queueUpdate(() => {
             if (!shouldRunDisconnect)
                 return;
-            this.deinit();
+            this.destroy();
         });
     }
     deepClone() {
@@ -122,12 +117,13 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
      */
     init(columnDefinitions, columnStates) {
         return __awaiter(this, void 0, void 0, function* () {
-            if (this.agGrid && this.datasource.validResourceName(this.resourceName)) {
-                this.agGrid.gridOptions = Object.assign(Object.assign(Object.assign({ getRowId: (params) => params.data[this.rowId] }, (columnDefinitions && { columnDefs: columnDefinitions })), this.agGrid['agGridOptions']), this.deferredGridOptions);
+            if (this.agGrid) {
+                const gridOptions = Object.assign(Object.assign(Object.assign({ getRowId: (params) => params.data[this.rowId] }, (columnDefinitions && { columnDefs: columnDefinitions })), this.agGrid['agGridOptions']), this.deferredGridOptions);
+                this.agGrid.gridOptions = Object.assign({}, gridOptions);
                 this.agGrid['initGrid']();
-                this.agGrid.addEventListener('onGridReady', () => __awaiter(this, void 0, void 0, function* () {
+                this.agGrid.addEventListener(Events.EVENT_GRID_READY, () => __awaiter(this, void 0, void 0, function* () {
                     if (columnStates) {
-                        this.agGrid.gridApi.applyColumnState({ state: columnStates });
+                        this.agGrid.columnApi.applyColumnState({ state: columnStates });
                     }
                     yield this.loadResourceData();
                 }), { once: true });
@@ -142,8 +138,16 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
             this.handleErrors('Application not connected or invalid resource name, datasource will not work. Falling back to local columnDefs/rowData.');
         });
     }
+    /**
+     * Destroys the datasource, resetting it to its initial state.
+     * @public
+     */
+    destroy() {
+        this.reset();
+    }
     /**
      * Deinitialises the datasource, resetting it to its initial state.
+     * @deprecated Use `destroy` instead
      * @public
      */
     deinit() {
@@ -152,7 +156,7 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
     /**
      * Resets the datasource to its initial state.
      * @public
-     * @deprecated Use `deinit` instead
+     * @deprecated Use `destroy` instead
      */
     reset() {
         var _a;
@@ -170,7 +174,6 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
             this.connectionSub = undefined;
         }
         this.clearRowData();
-        this.isRequestServer = false;
         this.requiresFullRowDataAndColDefs = true;
         this.dataSubWasLoggedOff = false;
         this.criteriaFromFilters = new Map();
@@ -178,7 +181,7 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
         this.update = new BehaviorSubject(new Map());
         this.agGrid.removeAttribute('ds-disconnected');
         // TODO: There may need to be a full destroy path. Datasources need some love!
-        this.datasource.deinit();
+        this.datasource.destroy();
     }
     /**
      * Restarts the datasource, uses `deinit` and `init` in sequence.
@@ -189,9 +192,9 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
         let columnStates;
         if (this.keepColDefsOnClearRowData) {
             columnDefinitions = this.agGrid.gridApi.getColumnDefs();
-            columnStates = this.agGrid.gridApi.getColumnState();
+            columnStates = this.agGrid.columnApi.getColumnState();
         }
-        this.deinit();
+        this.destroy();
         this.init(columnDefinitions, columnStates);
     }
     /**
@@ -207,12 +210,13 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
      * @internal
      */
     clearRowData(withColumnDefs = true) {
+        var _a, _b, _c, _d;
         this.rowData = new Map();
         this.agTransaction = undefined;
         if (withColumnDefs && !this.keepColDefsOnClearRowData) {
-            this.agGrid.gridApi.updateGridOptions({ columnDefs: [] });
+            (_b = (_a = this.agGrid) === null || _a === void 0 ? void 0 : _a.gridApi) === null || _b === void 0 ? void 0 : _b.setColumnDefs([]);
         }
-        this.agGrid.gridApi.updateGridOptions({ rowData: [] });
+        (_d = (_c = this.agGrid) === null || _c === void 0 ? void 0 : _c.gridApi) === null || _d === void 0 ? void 0 : _d.setRowData([]);
     }
     /**
      * Sets the columnDefs and rowData for the grid.
@@ -237,13 +241,12 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
                             col.pivot = null;
                         }
                     });
-                    this.agGrid.gridApi.updateGridOptions({ columnDefs: agColumnDefs });
+                    this.agGrid.gridApi.setColumnDefs(agColumnDefs);
                 }
             }
             const data = this.rowDataMapper ? this.rowDataMapper(rowData) : rowData;
             this.agGrid.restoreCachedFilterConfig();
-            this.agTransaction = { add: [...data], remove: [], update: [], addIndex: 0 };
-            // this.agGrid.gridApi.setGridOption('rowData', data);
+            this.agTransaction = { add: data ? [...data] : [], remove: [], update: [], addIndex: 0 };
             this.applyAllAgTransactions();
             this.requiresFullRowDataAndColDefs = false;
         });
@@ -255,6 +258,7 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
      * @internal
      */
     reloadResourceData() {
+        var _a, _b;
         return __awaiter(this, void 0, void 0, function* () {
             logger.debug('GridProGenesisDatasource.reloadResourceData()', this.resourceName);
             if (this.dataSub) {
@@ -262,7 +266,7 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
                 this.dataSub = undefined;
             }
             this.clearRowData(withoutColumnDefs);
-            this.agGrid.gridApi.setGridOption('loading', true);
+            (_b = (_a = this.agGrid) === null || _a === void 0 ? void 0 : _a.gridApi) === null || _b === void 0 ? void 0 : _b.showLoadingOverlay();
             this.agGrid.removeAttribute('ds-disconnected');
             this.loadResourceData(withoutFullInit);
         });
@@ -297,12 +301,12 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
                 this.dataSub = this.datasource.stream
                     .pipe(catchError((err) => {
                     var _a;
-                    this.handleErrors((_a = err === null || err === void 0 ? void 0 : err.receivedMessage) === null || _a === void 0 ? void 0 : _a.ERROR.join(', '));
+                    this.handleErrors((_a = err === null || err === void 0 ? void 0 : err.receivedMessage) === null || _a === void 0 ? void 0 : _a.ERROR);
                     return EMPTY;
                 }))
                     .subscribe((result) => {
                     if (result === null || result === void 0 ? void 0 : result.ERROR) {
-                        this.handleErrors(result.ERROR.join(', '));
+                        this.handleErrors(result.ERROR);
                     }
                     const messageType = result.MESSAGE_TYPE;
                     if (messageType && messageType === MessageType.LOGOFF_ACK) {
@@ -341,31 +345,30 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
         }
         return result.inserts;
     }
-    handleErrors(message) {
+    handleErrors(errors) {
+        let message;
+        if (Array.isArray(errors)) {
+            const stringArray = errors.map((item) => {
+                if (typeof item === 'string') {
+                    return item;
+                }
+                else if (typeof item === 'object' && item !== null && 'TEXT' in item) {
+                    return item.TEXT;
+                }
+                else {
+                    throw new Error('Array contains invalid elements');
+                }
+            });
+            message = stringArray.join(', ');
+        }
         if (this.agGrid) {
             this.agGrid.setAttribute('ds-disconnected', 'ds-disconnected');
         }
         if (message) {
-            logger.warn(message);
+            logger.error(message);
             this.$emit(gridProGenesisDatasourceEventNames.error, { message });
         }
     }
-    datasourceOptions() {
-        return {
-            criteria: this.buildCriteria(),
-            fields: this.fields,
-            isSnapshot: this.isSnapshot,
-            maxRows: this.maxRows,
-            maxView: this.maxView,
-            movingView: this.movingView,
-            orderBy: this.orderBy,
-            pollingInterval: this.pollingInterval,
-            disablePolling: this.disablePolling,
-            request: this.request,
-            resourceName: this.resourceName,
-            reverse: this.reverse,
-        };
-    }
     handleStreamResult(result) {
         if (!result)
             return;
@@ -386,9 +389,23 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
             return;
         }
         if (this.requiresFullRowDataAndColDefs) {
-            requestServerData === null || requestServerData === void 0 ? void 0 : requestServerData.forEach((insertData) => {
-                this.rowData.set(insertData[this.rowId], insertData);
-            });
+            let noRowIdError = false;
+            for (const insertData of requestServerData || []) {
+                const insertDataRowId = insertData[this.rowId];
+                if (!insertDataRowId) {
+                    if (!noRowIdError) {
+                        const noRowIdMessage = `The specified rowId (${this.rowId}) is not present in the data. Since this is not a snapshot (isSnapshot=false), the data will not be loaded. Please provide a valid 'row-id' attribute.`;
+                        logger.error(noRowIdMessage);
+                        noRowIdError = true;
+                    }
+                    break;
+                }
+                this.rowData.set(insertDataRowId, insertData);
+            }
+            if (noRowIdError) {
+                this.destroy();
+                return;
+            }
             const rowData = this.rowData.size > 0 ? Array.from(this.rowData.values()) : requestServerData;
             this.handleSizeChanged(previousSize, this.rowData.size);
             this.setRowData(rowData);
@@ -438,12 +455,6 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
             return colDefsMergedWithTemplateDefs;
         });
     }
-    buildCriteria() {
-        var _a;
-        const initialCriteria = ((_a = this.criteria) === null || _a === void 0 ? void 0 : _a.split(criteriaDelimiter)) || [];
-        const criteria = initialCriteria.concat(Array.from(this.criteriaFromFilters.values()));
-        return normaliseCriteria(criteria.join(criteriaJoin), criteriaDelimiter);
-    }
     setFilter(fieldName, newFilter) {
         this.criteriaFromFilters.set(fieldName, newFilter);
         this.update.next(this.criteriaFromFilters);
@@ -467,21 +478,6 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
         });
     }
 };
-__decorate([
-    Auth
-], GridProGenesisDatasource.prototype, "auth", void 0);
-__decorate([
-    Datasource
-], GridProGenesisDatasource.prototype, "datasource", void 0);
-__decorate([
-    attr({ attribute: 'polling-interval' })
-], GridProGenesisDatasource.prototype, "pollingInterval", void 0);
-__decorate([
-    attr({ mode: 'boolean', attribute: 'disable-polling' })
-], GridProGenesisDatasource.prototype, "disablePolling", void 0);
-__decorate([
-    observable
-], GridProGenesisDatasource.prototype, "request", void 0);
 __decorate([
     attr({ mode: 'boolean', attribute: 'restart-on-reconnection' })
 ], GridProGenesisDatasource.prototype, "restartOnReconnection", void 0);

package/dist/esm/grid-pro.js

@@ -1,9 +1,9 @@
 import { __awaiter, __decorate, __rest } from "tslib";
 import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
-import { _combineAttributesAndGridOptions, createGrid, ComponentUtil, ModuleRegistry, } from '@ag-grid-community/core';
+import { ComponentUtil, Grid, ModuleRegistry } from '@ag-grid-community/core';
 import { CsvExportModule } from '@ag-grid-community/csv-export';
 import { insertDocumentCSSRule, LifecycleMixin, respondToVisibility, } from '@genesislcap/foundation-utils';
-import { attr, DOM, observable, volatile } from '@microsoft/fast-element';
+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';
@@ -42,38 +42,12 @@ export const AG_PROPERTIES = ComponentUtil.ALL_PROPERTIES.filter((p) => p !== 'r
  * @tagname %%prefix%%-grid-pro
  */
 export class GridPro extends LifecycleMixin(FoundationElement) {
-    get gridApi() {
-        if (!this.initialised) {
-            // Return a proxy object to intercept property accesses
-            return new Proxy({}, {
-                get: () => {
-                    return () => {
-                        return {
-                            destroy: () => {
-                                // do nothing
-                            },
-                            // updateGridOptions: () => {
-                            //   // do nothing
-                            // },
-                            // applyTransaction: () => {
-                            //   // do nothing
-                            // },
-                            // applyTransactionAsync: () => {
-                            //   // do nothing
-                            // },
-                        };
-                    };
-                },
-            });
-        }
-        return this._gridApi;
-    }
     rowDataChanged(_, rowData) {
         if (this.initialised) {
-            this.gridApi.setGridOption('rowData', rowData);
+            this.gridApi.setRowData(rowData);
         }
     }
-    themeChanged(_oldValue, newValue) {
+    themeChanged(oldValue, newValue) {
         if (!newValue) {
             this.classNames = '';
             this.destroyFontFace();
@@ -164,7 +138,10 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
             action: this.handleError.bind(this, gridProErrorNames.datasource),
         });
     }
-    addEventListener(type, listener, options) {
+    addEventListener(eventType, listener, options) {
+        const type = eventType.startsWith('on')
+            ? eventType
+            : `on${eventType.charAt(0).toUpperCase() + eventType.slice(1)}`;
         super.addEventListener(type, listener, options);
         if (ComponentUtil.PUBLIC_EVENTS.includes(type)) {
             if (this.gridApi) {
@@ -175,9 +152,9 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
             }
         }
     }
-    addGridEventListener(type) {
-        this.gridApi.addEventListener(type, (e) => {
-            this.$emit(type, e);
+    addGridEventListener(eventType) {
+        this.gridApi.addEventListener(eventType, (e) => {
+            this.$emit(eventType, e);
         });
     }
     handleError(type, event) {
@@ -273,7 +250,7 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
     saveColumnState() {
         return __awaiter(this, void 0, void 0, function* () {
             if (this.rehydrationAttempted && this.statePersistanceEnabled()) {
-                let colState = this.gridApi.getColumnState();
+                let colState = this.columnApi.getColumnState();
                 colState = this.gridAutosizingEnabled
                     ? this.removeConfigWidthsToAutosize(colState)
                     : colState;
@@ -286,7 +263,7 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
     /**
      * Gets the saved grid ColumnState[] from storage
      * @remarks This is used to restore the grid state when the grid is rehydrated
-     * @privateRemarks Not using `gridApi.get|setColumnState()` for these flows as it doesn't work setting new columnDefs vs different ordering.
+     * @privateRemarks Not using `columnApi.get|setColumnState()` for these flows as it doesn't work setting new columnDefs vs different ordering.
      * @public
      */
     getSavedColumnState() {
@@ -304,7 +281,7 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
             this.rehydrationAttempted = true;
             const colState = yield this.getSavedColumnState();
             if (colState && colState.length > 0) {
-                (_a = this.gridApi) === null || _a === void 0 ? void 0 : _a.applyColumnState({
+                (_a = this.columnApi) === null || _a === void 0 ? void 0 : _a.applyColumnState({
                     state: colState,
                     applyOrder: true,
                 });
@@ -364,13 +341,16 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
         });
         const { columnDefs, components, defaultColDef, getRowId, onGridReady, onFilterChanged } = options, rest = __rest(options, ["columnDefs", "components", "defaultColDef", "getRowId", "onGridReady", "onFilterChanged"]);
         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;
+                this.columnApi = (_b = options.columnApi) !== null && _b !== void 0 ? _b : event.columnApi;
                 if (this.gridEventsQueue.length) {
                     this.gridEventsQueue.forEach((type) => {
                         this.addGridEventListener(type);
                     });
                 }
                 if (this.rowData) {
-                    this.gridApi.setGridOption('rowData', this.rowData);
+                    this.gridApi.setRowData(this.rowData);
                 }
                 if (onGridReady) {
                     onGridReady(event);
@@ -402,7 +382,7 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
         }
     }
     setLocalGridOptions(derivedOptions) {
-        this.agGridOptions = Object.assign(Object.assign({}, this.agGridOptions), _combineAttributesAndGridOptions(derivedOptions, this.agAttributes));
+        this.agGridOptions = Object.assign(Object.assign({}, this.agGridOptions), ComponentUtil.copyAttributesToGridOptions(derivedOptions, this.agAttributes));
     }
     initGrid() {
         DOM.queueUpdate(() => {
@@ -413,7 +393,7 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
                     this.gridSlot.removeChild(this.gridSlot.firstChild);
                 }
             }
-            this._gridApi = createGrid(this.gridSlot, this.agGridOptions);
+            this.agGrid = new Grid(this.gridSlot, this.agGridOptions, this.gridParams);
             this.initialised = true;
         });
     }
@@ -527,7 +507,7 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
                 // for subsequent (post gridOptions) changes
                 const changeObject = {};
                 changeObject[gridPropertyName] = { currentValue: newValue };
-                // ComponentUtil.processOnChange(changeObject, this.gridApi);
+                ComponentUtil.processOnChange(changeObject, this.gridApi);
             }
         }
     }
@@ -559,15 +539,18 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
         }
     }
 }
+__decorate([
+    observable
+], GridPro.prototype, "columnApi", void 0);
+__decorate([
+    observable
+], GridPro.prototype, "gridApi", void 0);
 __decorate([
     observable
 ], GridPro.prototype, "gridErrorItems", void 0);
 __decorate([
     StatePersistence
 ], GridPro.prototype, "statePersistence", void 0);
-__decorate([
-    volatile
-], GridPro.prototype, "gridApi", null);
 __decorate([
     attr({ attribute: 'auto-cell-renderer-by-type', mode: 'boolean' })
 ], GridPro.prototype, "autoCellRendererByType", void 0);
@@ -631,6 +614,9 @@ __decorate([
 __decorate([
     observable
 ], GridPro.prototype, "classNames", void 0);
+__decorate([
+    observable
+], GridPro.prototype, "agGrid", void 0);
 __decorate([
     observable
 ], GridPro.prototype, "gridSlot", void 0);

package/dist/esm/grid-pro.template.js

@@ -9,7 +9,8 @@ import { gridProErrorNames } from './grid-pro.definitions';
 export const getGridProTemplate = (prefix = 'foundation') => html `
   <template>
     <span part="grid" class="${(x) => x.classNames}">
-      <div ${ref('gridSlot')} style="width: 100%; height: 100%">
+      <slot name="grid" ${ref('gridSlot')}></slot>
+      <slot></slot>
     </span>
     <slot
         name="grid-datasource-error"