@genesislcap/grid-pro 14.108.0 → 14.109.1-alpha-cf055218219.0

package/dist/esm/cell-editors/string.editor.js

@@ -0,0 +1,86 @@
+import { __decorate } from "tslib";
+import { css, html, observable, ref } from '@microsoft/fast-element';
+import { FoundationElement } from '@microsoft/fast-foundation';
+import { EDITED_COLUMN_FIELD } from '../grid-pro.types';
+/**
+ * The AG String Editor element.
+ * @public
+ * @tagname %%prefix%%-string-editor
+ */
+export class StringEditor extends FoundationElement {
+    init(params) {
+        if (!params)
+            return;
+        this.params = params;
+        this.value = params.value;
+        this.actualWidth = params.column.getActualWidth();
+    }
+    getGui() {
+        return this;
+    }
+    refresh(params) {
+        return true;
+    }
+    getValue() {
+        return this.value;
+    }
+    isPopup() {
+        return true;
+    }
+    afterGuiAttached() {
+        this.input.focus();
+    }
+    changeHandler(event) {
+        this.value = event.target.value;
+    }
+    isCancelBeforeStart() {
+        return !!this.params.data[EDITED_COLUMN_FIELD];
+    }
+}
+__decorate([
+    observable
+], StringEditor.prototype, "params", void 0);
+__decorate([
+    observable
+], StringEditor.prototype, "value", void 0);
+__decorate([
+    observable
+], StringEditor.prototype, "actualWidth", void 0);
+/**
+ * The AG String Renderer Styles.
+ * @public
+ */
+export const agStringEditorStyles = css `
+  :host {
+    display: flex;
+  }
+`;
+/**
+ * Get a Design System prefixed String template.
+ * @param designSystem - The design system prefix to use. Defaults to 'foundation'.
+ * @returns A String component template prefixed with the correct design system.
+ * @public
+ */
+export const getStringEditorTemplate = (designSystem = 'foundation') => html `
+  <${designSystem}-text-field
+    ${ref('input')}
+    :value=${(x) => (x.value === undefined ? '' : x.value)}
+    @input=${(x, c) => {
+    x.changeHandler(c.event);
+}}
+    placeholder=${(x) => x.params.placeholder}
+    style="width: ${(x) => x.actualWidth}px"
+  >
+  </${designSystem}-text-field>
+`;
+/**
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<foundation-string-editor\>
+ */
+export const foundationStringEditor = StringEditor.compose({
+    baseName: 'string-editor',
+    styles: agStringEditorStyles,
+    template: getStringEditorTemplate(),
+});

package/dist/esm/cell-renderers/action.renderer.js

@@ -1,4 +1,5 @@
 import { __awaiter, __decorate } from "tslib";
+import { KeyCode } from '@ag-grid-community/core';
 import { css, html, observable } from '@microsoft/fast-element';
 import { DesignToken, FoundationElement } from '@microsoft/fast-foundation';
 import { logger } from '../utils';
@@ -12,6 +13,11 @@ export class ActionRenderer extends FoundationElement {
         if (!params)
             return;
         this.params = params;
+        params.eGridCell.addEventListener('keydown', (event) => {
+            if (event.key === KeyCode.ENTER) {
+                this.clickHandler();
+            }
+        });
     }
     getGui() {
         return this;

package/dist/esm/cell-renderers/boolean.renderer.js

@@ -2,6 +2,7 @@ import { __decorate } from "tslib";
 import { Events, } from '@ag-grid-community/core';
 import { css, html, observable } from '@microsoft/fast-element';
 import { FoundationElement } from '@microsoft/fast-foundation';
+import { EDITED_COLUMN_FIELD } from '../grid-pro.types';
 /**
  * The AG Boolean Renderer element.
  * @public
@@ -62,6 +63,9 @@ export class BooleanRenderer extends FoundationElement {
     getValue() {
         return this.selected;
     }
+    isCancelBeforeStart() {
+        return !!this.params.data[EDITED_COLUMN_FIELD];
+    }
 }
 __decorate([
     observable

package/dist/esm/cell-renderers/editable.renderer.js

@@ -0,0 +1,60 @@
+import { __decorate } from "tslib";
+import { css, html, observable } from '@microsoft/fast-element';
+import { FoundationElement } from '@microsoft/fast-foundation';
+/**
+ * The AG Editable Renderer element.
+ * @public
+ * @tagname %%prefix%%-editable-renderer
+ */
+export class EditableRenderer extends FoundationElement {
+    init(params) {
+        if (!params)
+            return;
+        this.valueFormatted = params.formatValue(params.value);
+    }
+    getGui() {
+        return this;
+    }
+    refresh(params) {
+        this.valueFormatted = params.formatValue(params.value);
+        return true;
+    }
+}
+__decorate([
+    observable
+], EditableRenderer.prototype, "valueFormatted", void 0);
+/**
+ * The AG Editable Renderer Styles.
+ * @public
+ */
+export const agEditableRendererStyles = css `
+  :host {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+`;
+/**
+ * Get a Design System prefixed Checkbox template.
+ * @param designSystem - The design system prefix to use. Defaults to 'foundation'.
+ * @returns A Checkbox component template prefixed with the correct design system.
+ * @public
+ */
+export const getAgEditableRendererTemplate = (designSystem = 'foundation') => {
+    return html `
+    <span>${(x) => x.valueFormatted}</span>
+    <${designSystem}-progress-ring style="margin: 0; width: 20px; height: 20px"></${designSystem}-progress-ring>
+  `;
+};
+/**
+ * A function that returns a Foundation Editable Renderer registration for configuring the component with a DesignSystem.
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<foundation-editable-renderer\>
+ */
+export const foundationAgEditableRenderer = EditableRenderer.compose({
+    baseName: 'editable-renderer',
+    styles: agEditableRendererStyles,
+    template: getAgEditableRendererTemplate(),
+});

package/dist/esm/cell-renderers/index.js

@@ -1,6 +1,7 @@
 export * from './action.renderer';
 export * from './actions-menu.renderer';
 export * from './boolean.renderer';
+export * from './editable.renderer';
 export * from './text.renderer';
 export * from './text-field.renderer';
 export * from './select.renderer';

package/dist/esm/grid-components.js

@@ -1,5 +1,5 @@
-import { foundationSelectEditor, foundationNumberEditor, foundationMultiselectEditor, foundationDateEditor, } from './cell-editors';
-import { foundationGridProActionRenderer, foundationGridProActionsMenuRenderer, foundationAgBooleanRenderer, foundationAgSelectRenderer, foundationAgTextRenderer, foundationAgTextFieldRenderer, } from './cell-renderers';
+import { foundationSelectEditor, foundationNumberEditor, foundationMultiselectEditor, foundationDateEditor, foundationStringEditor, } from './cell-editors';
+import { foundationGridProActionRenderer, foundationGridProActionsMenuRenderer, foundationAgBooleanRenderer, foundationAgEditableRenderer, foundationAgSelectRenderer, foundationAgTextRenderer, foundationAgTextFieldRenderer, } from './cell-renderers';
 import { foundationGridPro } from './grid-pro';
 /**
  * The Grid Pro Components.
@@ -12,12 +12,14 @@ export const foundationGridComponents = {
     foundationAgBooleanRenderer,
     foundationAgTextRenderer,
     foundationAgTextFieldRenderer,
+    foundationAgEditableRenderer,
     foundationAgSelectRenderer,
     foundationGridPro,
     foundationSelectEditor,
     foundationNumberEditor,
     foundationDateEditor,
     foundationMultiselectEditor,
+    foundationStringEditor,
     register(container, ...rest) {
         if (!container) {
             // preserve backward compatibility with code that loops through

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

@@ -214,16 +214,16 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
      * @internal
      */
     setRowData(rowData) {
-        var _a;
+        var _a, _b, _c;
         const preSetColumnDefs = (_a = this.agGrid.gridApi) === null || _a === void 0 ? void 0 : _a.getColumnDefs();
         if (!preSetColumnDefs || preSetColumnDefs.length === 0) {
             const agColumnDefs = this.getAgColumnDefs(this.datasource.fieldMetadata);
             if (agColumnDefs) {
-                this.agGrid.gridApi.setColumnDefs(agColumnDefs);
+                (_b = this.agGrid.gridApi) === null || _b === void 0 ? void 0 : _b.setColumnDefs(agColumnDefs);
             }
         }
         const data = this.rowDataMapper ? this.rowDataMapper(rowData) : rowData;
-        this.agGrid.gridApi.setRowData(data);
+        (_c = this.agGrid.gridApi) === null || _c === void 0 ? void 0 : _c.setRowData(data);
         this.requiresFullRowDataAndColDefs = false;
     }
     /**
@@ -233,7 +233,7 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
      * @internal
      */
     reloadResourceData() {
-        var _a, _b;
+        var _a;
         return __awaiter(this, void 0, void 0, function* () {
             if (this.dataSub) {
                 this.dataSub.unsubscribe();
@@ -241,7 +241,7 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
             }
             this.dataLogoff();
             this.clearRowData(withoutColumnDefs);
-            (_b = (_a = this.agGrid) === null || _a === void 0 ? void 0 : _a.gridApi) === null || _b === void 0 ? void 0 : _b.showLoadingOverlay();
+            (_a = this.agGrid.gridApi) === null || _a === void 0 ? void 0 : _a.showLoadingOverlay();
             this.loadResourceData(withoutFullInit);
         });
     }
@@ -374,10 +374,11 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
         this.applyAllAgTransactions();
     }
     applyAllAgTransactions() {
+        var _a;
         if (!this.agTransaction.add.length &&
             !this.agTransaction.update.length &&
             !this.agTransaction.remove.length) {
-            this.agGrid.gridApi.showNoRowsOverlay();
+            (_a = this.agGrid.gridApi) === null || _a === void 0 ? void 0 : _a.showNoRowsOverlay();
             return;
         }
         if (this.agTransaction.add.length > 0) {
@@ -463,6 +464,9 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
             const colDefBase = {};
             colDefBase.filterParams = getFilterParamsByFieldType(field.type);
             switch (field.type) {
+                case FieldTypeEnum.STRING:
+                    colDefBase.cellEditor = GridProRendererTypes.stringEditor;
+                    break;
                 case FieldTypeEnum.NUMBER:
                     colDefBase.cellEditor = GridProRendererTypes.numberEditor;
                     break;

package/dist/esm/grid-pro.js

@@ -8,8 +8,8 @@ import { attr, DOM, observable } from '@microsoft/fast-element';
 import { FoundationElement } from '@microsoft/fast-foundation';
 import { classNames } from '@microsoft/fast-web-utilities';
 import { GridProCell } from './cell';
-import { SelectEditor, NumberEditor, MultiselectEditor, DateEditor } from './cell-editors';
-import { ActionRenderer, ActionsMenuRenderer, BooleanRenderer } from './cell-renderers';
+import { SelectEditor, NumberEditor, MultiselectEditor, DateEditor, StringEditor, } from './cell-editors';
+import { ActionRenderer, ActionsMenuRenderer, BooleanRenderer, EditableRenderer, } from './cell-renderers';
 import { GridProColumn } from './column';
 import { GridProClientSideDatasource, GridProServerSideDatasource } from './datasource';
 import { agThemeFontFaceMap, defaultAgGridFontFace } from './external';
@@ -17,7 +17,8 @@ import { GridProGenesisDatasource } from './grid-pro-genesis-datasource';
 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, } from './grid-pro.types';
+import { AgGridTheme, GridProRendererTypes, agThemeFontsId, agThemeTokenMapClassname, GRID_READY_EVENT, ERROR_COLUMN_FIELD, EDITED_COLUMN_FIELD, } from './grid-pro.types';
+import { ErrorTooltip } from './tooltips';
 import { logger, mergeAndDedupColDefWithColumnState } from './utils';
 GridProGenesisDatasource;
 GridProClientSideDatasource;
@@ -107,6 +108,7 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
     connectedCallback() {
         super.connectedCallback();
         this.rehydrationAttempted = false;
+        this.initialised = false;
         if (this.gridAutosizingEnabled) {
             respondToVisibility(this, (gridVisible) => {
                 if (gridVisible) {
@@ -134,16 +136,20 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
         if (!this.shouldRunDisconnect)
             return;
         (_a = this.gridApi) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.gridApi = null;
+        this.columnApi = null;
     }
     combineAllGridComponents(gridOptionsComponents) {
         const defaultFoundationAgComponents = {
             [GridProRendererTypes.action]: ActionRenderer,
             [GridProRendererTypes.actionsMenu]: ActionsMenuRenderer,
             [GridProRendererTypes.boolean]: BooleanRenderer,
+            [GridProRendererTypes.editable]: EditableRenderer,
             [GridProRendererTypes.selectEditor]: SelectEditor,
             [GridProRendererTypes.numberEditor]: NumberEditor,
             [GridProRendererTypes.multiselectEditor]: MultiselectEditor,
             [GridProRendererTypes.dateEditor]: DateEditor,
+            [GridProRendererTypes.stringEditor]: StringEditor,
         };
         return Object.assign(Object.assign(Object.assign({}, defaultFoundationAgComponents), gridOptionsComponents), this.gridComponents);
     }
@@ -323,6 +329,31 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
             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.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; },
+                    };
+                }
+            }
             const metadataColumnDef = columnDefinitionsFromMetadata.find((colDef) => columnDef.field === colDef.field);
             return Object.assign(Object.assign({}, metadataColumnDef), columnDef);
         });

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

@@ -125,11 +125,13 @@ export var GridProRendererTypes;
     GridProRendererTypes["action"] = "action";
     GridProRendererTypes["actionsMenu"] = "actionsMenu";
     GridProRendererTypes["boolean"] = "boolean";
+    GridProRendererTypes["editable"] = "editable";
     GridProRendererTypes["text"] = "text";
     GridProRendererTypes["select"] = "select";
     GridProRendererTypes["dateEditor"] = "dateEditor";
     GridProRendererTypes["selectEditor"] = "selectEditor";
     GridProRendererTypes["numberEditor"] = "numberEditor";
+    GridProRendererTypes["stringEditor"] = "stringEditor";
     GridProRendererTypes["multiselectEditor"] = "multiselectEditor";
 })(GridProRendererTypes || (GridProRendererTypes = {}));
 /**
@@ -137,3 +139,13 @@ export var GridProRendererTypes;
  * @public
  */
 export const GRID_READY_EVENT = 'onGridReady';
+/**
+ * Key used to store currently edited column when it being synced with server side data
+ * @public
+ */
+export const EDITED_COLUMN_FIELD = '__editedColumn';
+/**
+ * Key used to store error details (column, message) when inline edit fails sync with server side data
+ * @public
+ */
+export const ERROR_COLUMN_FIELD = '__errorColumn';

package/dist/esm/index.js

@@ -12,4 +12,5 @@ export * from './grid-pro.types';
 export * from './grid-pro';
 export * from './grid-pro-genesis-datasource';
 export * from './style';
+export * from './tooltips';
 export * from './utils';

package/dist/esm/tooltips/error-tooltip.js

@@ -0,0 +1,21 @@
+/**
+ * Tooltip for errors that happen while syncing data with server after inline editing
+ * @internal
+ */
+export class ErrorTooltip {
+    init(params) {
+        const eGui = (this.eGui = document.createElement('div'));
+        const message = params.value;
+        eGui.classList.add('custom-tooltip');
+        eGui.style['background-color'] = '#f14376';
+        eGui.style['border'] = '1px inside';
+        eGui.style['border-color'] = '#2e3339';
+        eGui.style['border-radius'] = '4px';
+        eGui.style['padding'] = '5px';
+        eGui.style['box-shadow'] = '0px 4px 10px 0px rgba(0, 0, 0, 0.25);';
+        eGui.innerHTML = `<span style='color: #000000; font-size: 10px'>${message}</span>`;
+    }
+    getGui() {
+        return this.eGui;
+    }
+}

package/dist/esm/tooltips/index.js

@@ -0,0 +1 @@
+export * from './error-tooltip';