@skyux/ag-grid 4.11.0 → 4.12.3

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+# 4.12.3 (2022-01-03)
+
+- Added support for wrapped text in custom components. [#177](https://github.com/blackbaud/skyux-ag-grid/pull/177)
+- Fixed an error with the validator popover change detection. [#180](https://github.com/blackbaud/skyux-ag-grid/pull/180)
+
+# 4.12.2 (2021-12-02)
+
+- Added bug fixes and features from the `master` branch. [#173](https://github.com/blackbaud/skyux-ag-grid/pull/173)
+
+# 4.12.1 (2021-11-10)
+
+- Added bug fixes and features from the `master` branch. [#165](https://github.com/blackbaud/skyux-ag-grid/pull/165)
+
+# 4.12.0 (2021-11-04)
+
+- Added bug fixes and features from the `master` branch. [#161](https://github.com/blackbaud/skyux-ag-grid/pull/161)
+- Added AG Grid 26 support. [#162](https://github.com/blackbaud/skyux-ag-grid/pull/162)
+
 # 4.11.0 (2021-09-24)
 
 - Fixed the currency column type so the values are right-aligned. [#147](https://github.com/blackbaud/skyux-ag-grid/pull/147)

package/bundles/skyux-ag-grid.umd.js

@@ -321,6 +321,94 @@
         return SkyAgGridCellEditorDatepickerComponent;
     }(agGridCommunity.PopupComponent));
 
+    function applySkyLookupPropertiesDefaults(skyLookupProperties) {
+        return {
+            ariaLabel: skyLookupProperties.ariaLabel || '',
+            autocompleteAttribute: skyLookupProperties.autocompleteAttribute || 'off',
+            data: skyLookupProperties.data || [],
+            debounceTime: skyLookupProperties.debounceTime || 0,
+            descriptorProperty: skyLookupProperties.descriptorProperty || 'name',
+            disabled: skyLookupProperties.disabled || false,
+            enableShowMore: skyLookupProperties.enableShowMore || false,
+            idProperty: skyLookupProperties.idProperty || undefined,
+            placeholderText: skyLookupProperties.placeholderText || '',
+            propertiesToSearch: skyLookupProperties.propertiesToSearch || undefined,
+            search: skyLookupProperties.search || undefined,
+            searchFilters: skyLookupProperties.searchFilters || [],
+            searchResultsLimit: skyLookupProperties.searchResultsLimit || undefined,
+            searchResultTemplate: skyLookupProperties.searchResultTemplate || undefined,
+            searchTextMinimumCharacters: skyLookupProperties.searchTextMinimumCharacters || 1,
+            selectMode: skyLookupProperties.selectMode || undefined,
+            showAddButton: skyLookupProperties.showAddButton || false,
+            showMoreConfig: skyLookupProperties.showMoreConfig || {},
+            wrapperClass: 'ag-custom-component-popup'
+        };
+    }
+
+    var SkyAgGridCellEditorLookupComponent = /** @class */ (function () {
+        function SkyAgGridCellEditorLookupComponent(changeDetector, elementRef) {
+            this.changeDetector = changeDetector;
+            this.elementRef = elementRef;
+            this.isAlive = true;
+            this.lookupForm = new forms.FormGroup({
+                currentSelection: new forms.FormControl({
+                    value: [],
+                    disabled: false
+                })
+            });
+        }
+        SkyAgGridCellEditorLookupComponent.prototype.agInit = function (params) {
+            this.params = params;
+            if (!Array.isArray(this.params.value)) {
+                throw new Error("Lookup value must be an array");
+            }
+            var control = this.lookupForm.get('currentSelection');
+            control.setValue(this.params.value);
+            if (this.params.skyComponentProperties.disabled) {
+                control.disable();
+            }
+            this.skyComponentProperties = this.updateComponentProperties(this.params);
+            this.changeDetector.markForCheck();
+        };
+        SkyAgGridCellEditorLookupComponent.prototype.isCancelAfterEnd = function () {
+            // Shut down components to commit values before final value syncs to grid.
+            this.isAlive = false;
+            this.changeDetector.detectChanges();
+            return false;
+        };
+        SkyAgGridCellEditorLookupComponent.prototype.getGui = function () {
+            return this.elementRef.nativeElement;
+        };
+        SkyAgGridCellEditorLookupComponent.prototype.getValue = function () {
+            return this.lookupForm.get('currentSelection').value;
+        };
+        SkyAgGridCellEditorLookupComponent.prototype.isPopup = function () {
+            return true;
+        };
+        /*istanbul ignore next*/
+        SkyAgGridCellEditorLookupComponent.prototype.afterGuiAttached = function () {
+            var _a;
+            (_a = this.elementRef.nativeElement.querySelector('.sky-lookup-input')) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+        SkyAgGridCellEditorLookupComponent.prototype.updateComponentProperties = function (params) {
+            var skyLookupProperties = params.skyComponentProperties;
+            return applySkyLookupPropertiesDefaults(skyLookupProperties);
+        };
+        SkyAgGridCellEditorLookupComponent.ctorParameters = function () { return [
+            { type: core.ChangeDetectorRef },
+            { type: core.ElementRef }
+        ]; };
+        SkyAgGridCellEditorLookupComponent = __decorate([
+            core.Component({
+                selector: 'sky-ag-grid-cell-editor-lookup',
+                template: "<sky-input-box *ngIf=\"isAlive\"\n               [disabled]=\"skyComponentProperties?.disabled\"\n               [formGroup]=\"lookupForm\"\n>\n  <sky-lookup\n    [ariaLabel]=\"skyComponentProperties?.ariaLabel\"\n    [autocompleteAttribute]=\"skyComponentProperties?.autocompleteAttribute\"\n    [data]=\"skyComponentProperties?.data\"\n    [debounceTime]=\"skyComponentProperties?.debounceTime\"\n    [descriptorProperty]=\"skyComponentProperties?.descriptorProperty\"\n    [enableShowMore]=\"skyComponentProperties?.enableShowMore\"\n    formControlName=\"currentSelection\"\n    [idProperty]=\"skyComponentProperties?.idProperty\"\n    [placeholderText]=\"skyComponentProperties?.placeholderText\"\n    [propertiesToSearch]=\"skyComponentProperties?.propertiesToSearch\"\n    [search]=\"skyComponentProperties?.search\"\n    [searchFilters]=\"skyComponentProperties?.searchFilters\"\n    [searchResultsLimit]=\"skyComponentProperties?.searchResultsLimit\"\n    [searchResultTemplate]=\"skyComponentProperties?.searchResultTemplate\"\n    [searchTextMinimumCharacters]=\"skyComponentProperties?.searchTextMinimumCharacters\"\n    [selectMode]=\"skyComponentProperties?.selectMode\"\n    [showAddButton]=\"skyComponentProperties?.showAddButton\"\n    [showMoreConfig]=\"skyComponentProperties?.showMoreConfig\"\n    [wrapperClass]=\"skyComponentProperties?.wrapperClass\"\n  >\n  </sky-lookup>\n</sky-input-box>\n",
+                changeDetection: core.ChangeDetectionStrategy.OnPush,
+                styles: [":host{display:block}"]
+            })
+        ], SkyAgGridCellEditorLookupComponent);
+        return SkyAgGridCellEditorLookupComponent;
+    }());
+
     var SkyAgGridCellEditorNumberComponent = /** @class */ (function () {
         function SkyAgGridCellEditorNumberComponent() {
         }
@@ -444,6 +532,36 @@
         return SkyAgGridCellRendererCurrencyValidatorComponent;
     }());
 
+    var SkyAgGridCellRendererLookupComponent = /** @class */ (function () {
+        function SkyAgGridCellRendererLookupComponent(changeDetector) {
+            this.changeDetector = changeDetector;
+            this.value = '';
+            this.summaryCount = 0;
+        }
+        SkyAgGridCellRendererLookupComponent.prototype.agInit = function (params) {
+            var _a;
+            this.summaryCount = ((_a = params.value) === null || _a === void 0 ? void 0 : _a.length) || 0;
+            this.value = "" + params.valueFormatted;
+            this.changeDetector.markForCheck();
+        };
+        SkyAgGridCellRendererLookupComponent.prototype.refresh = function (params) {
+            this.agInit(params);
+            return true;
+        };
+        SkyAgGridCellRendererLookupComponent.ctorParameters = function () { return [
+            { type: core.ChangeDetectorRef }
+        ]; };
+        SkyAgGridCellRendererLookupComponent = __decorate([
+            core.Component({
+                selector: 'sky-cell-renderer-lookup',
+                template: "<ng-container *ngIf=\"summaryCount > 5; else showValue\">\n  {{ 'skyux_lookup_tokens_summary' | skyLibResources:summaryCount }}\n</ng-container>\n<ng-template #showValue>{{ value }}</ng-template>\n",
+                changeDetection: core.ChangeDetectionStrategy.OnPush,
+                styles: [":host{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}"]
+            })
+        ], SkyAgGridCellRendererLookupComponent);
+        return SkyAgGridCellRendererLookupComponent;
+    }());
+
     var SkyAgGridCellRendererRowSelectorComponent = /** @class */ (function () {
         function SkyAgGridCellRendererRowSelectorComponent(changeDetection) {
             this.changeDetection = changeDetection;
@@ -553,6 +671,7 @@
         SkyCellClass["Date"] = "sky-ag-grid-cell-date";
         SkyCellClass["Editable"] = "sky-ag-grid-cell-editable";
         SkyCellClass["Invalid"] = "sky-ag-grid-cell-invalid";
+        SkyCellClass["Lookup"] = "sky-ag-grid-cell-lookup";
         SkyCellClass["Number"] = "sky-ag-grid-cell-number";
         SkyCellClass["RowSelector"] = "sky-ag-grid-cell-row-selector";
         SkyCellClass["Text"] = "sky-ag-grid-cell-text";
@@ -565,6 +684,7 @@
         SkyCellType["Currency"] = "skyCellCurrency";
         SkyCellType["CurrencyValidator"] = "skyCellCurrencyValidator";
         SkyCellType["Date"] = "skyCellDate";
+        SkyCellType["Lookup"] = "skyCellLookup";
         SkyCellType["Number"] = "skyCellNumber";
         SkyCellType["NumberValidator"] = "skyCellNumberValidator";
         SkyCellType["RowSelector"] = "skyCellRowSelector";
@@ -753,18 +873,19 @@
     }
     function getValidatorCellRendererSelector(component, fallback) {
         return function (params) {
-            var _a, _b, _c, _d;
-            if (typeof ((_c = (_b = (_a = params.colDef) === null || _a === void 0 ? void 0 : _a.cellRendererParams) === null || _b === void 0 ? void 0 : _b.skyComponentProperties) === null || _c === void 0 ? void 0 : _c.validator) === 'function') {
+            var _a, _b;
+            if (params.colDef && typeof ((_b = (_a = params.colDef.cellRendererParams) === null || _a === void 0 ? void 0 : _a.skyComponentProperties) === null || _b === void 0 ? void 0 : _b.validator) === 'function') {
                 if (!params.colDef.cellRendererParams.skyComponentProperties.validator(params.value, params.data, params.rowIndex)) {
                     return {
                         component: component,
-                        params: __assign({}, (_d = params.colDef) === null || _d === void 0 ? void 0 : _d.cellRendererParams)
+                        params: __assign({}, params.colDef.cellRendererParams)
                     };
                 }
             }
             return fallback;
         };
     }
+    var rowNodeId = 1;
     /**
      * A service that provides default styling and behavior for agGrids in SKY UX SPAs.
      */
@@ -807,9 +928,9 @@
             return mergedGridOptions;
         };
         SkyAgGridService.prototype.getDefaultGridOptions = function (args) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
             var _this = this;
-            var _k, _l, _m, _o, _p, _q, _r, _s;
+            var _l, _m, _o, _p, _q, _r;
             // cellClassRules can be functions or string expressions
             var cellClassRuleTrueExpression = 'true';
             function getEditableFn(isUneditable) {
@@ -828,8 +949,8 @@
                 _a);
             function getValidatorFn() {
                 return function (param) {
-                    var _a, _b, _c;
-                    if (typeof ((_c = (_b = (_a = param.colDef) === null || _a === void 0 ? void 0 : _a.cellRendererParams) === null || _b === void 0 ? void 0 : _b.skyComponentProperties) === null || _c === void 0 ? void 0 : _c.validator) === 'function') {
+                    var _a, _b;
+                    if (param.colDef && typeof ((_b = (_a = param.colDef.cellRendererParams) === null || _a === void 0 ? void 0 : _a.skyComponentProperties) === null || _b === void 0 ? void 0 : _b.validator) === 'function') {
                         return !param.colDef.cellRendererParams.skyComponentProperties.validator(param.value, param.data, param.rowIndex);
                     }
                     return false;
@@ -858,19 +979,34 @@
                         cellClassRules: __assign((_f = {}, _f[exports.SkyCellClass.Date] = cellClassRuleTrueExpression, _f), editableCellClassRules),
                         cellEditorFramework: SkyAgGridCellEditorDatepickerComponent,
                         comparator: dateComparator,
-                        minWidth: ((_l = (_k = this.currentTheme) === null || _k === void 0 ? void 0 : _k.theme) === null || _l === void 0 ? void 0 : _l.name) === 'modern' ? 180 : 160,
+                        minWidth: ((_m = (_l = this.currentTheme) === null || _l === void 0 ? void 0 : _l.theme) === null || _m === void 0 ? void 0 : _m.name) === 'modern' ? 180 : 160,
                         valueFormatter: function (params) { return _this.dateFormatter(params, args.locale); }
                     },
+                    _c[exports.SkyCellType.Lookup] = {
+                        cellClassRules: __assign((_g = {}, _g[exports.SkyCellClass.Lookup] = cellClassRuleTrueExpression, _g), editableCellClassRules),
+                        cellEditorFramework: SkyAgGridCellEditorLookupComponent,
+                        cellRendererFramework: SkyAgGridCellRendererLookupComponent,
+                        valueFormatter: function (params) {
+                            var lookupProperties = applySkyLookupPropertiesDefaults(params);
+                            return (params.value || [])
+                                .map(function (value) {
+                                return value[lookupProperties.descriptorProperty];
+                            })
+                                .filter(function (value) { return value !== '' && value !== undefined; })
+                                .join('; ');
+                        },
+                        minWidth: 185
+                    },
                     _c[exports.SkyCellType.Number] = {
-                        cellClassRules: __assign((_g = {}, _g[exports.SkyCellClass.Number] = cellClassRuleTrueExpression, _g), editableCellClassRules),
+                        cellClassRules: __assign((_h = {}, _h[exports.SkyCellClass.Number] = cellClassRuleTrueExpression, _h), editableCellClassRules),
                         cellEditorFramework: SkyAgGridCellEditorNumberComponent,
                         headerClass: exports.SkyHeaderClass.RightAligned
                     },
                     _c[exports.SkyCellType.RowSelector] = {
-                        cellClassRules: (_h = {},
-                            _h[exports.SkyCellClass.RowSelector] = cellClassRuleTrueExpression,
-                            _h[exports.SkyCellClass.Uneditable] = cellClassRuleTrueExpression,
-                            _h),
+                        cellClassRules: (_j = {},
+                            _j[exports.SkyCellClass.RowSelector] = cellClassRuleTrueExpression,
+                            _j[exports.SkyCellClass.Uneditable] = cellClassRuleTrueExpression,
+                            _j),
                         cellRendererFramework: SkyAgGridCellRendererRowSelectorComponent,
                         headerName: '',
                         minWidth: 55,
@@ -879,7 +1015,7 @@
                         width: 55
                     },
                     _c[exports.SkyCellType.Text] = {
-                        cellClassRules: __assign((_j = {}, _j[exports.SkyCellClass.Text] = cellClassRuleTrueExpression, _j), editableCellClassRules),
+                        cellClassRules: __assign((_k = {}, _k[exports.SkyCellClass.Text] = cellClassRuleTrueExpression, _k), editableCellClassRules),
                         cellEditorFramework: SkyAgGridCellEditorTextComponent
                     },
                     _c[exports.SkyCellType.Validator] = {
@@ -901,7 +1037,21 @@
                     'sky-ag-grid-cell-renderer-currency-validator': SkyAgGridCellRendererCurrencyValidatorComponent,
                     'sky-ag-grid-cell-renderer-validator-tooltip': SkyAgGridCellRendererValidatorTooltipComponent
                 },
-                headerHeight: ((_o = (_m = this.currentTheme) === null || _m === void 0 ? void 0 : _m.theme) === null || _o === void 0 ? void 0 : _o.name) === 'modern' ? 60 : 37,
+                getRowNodeId: function (data) {
+                    if ('id' in data && data.id) {
+                        return "" + data.id;
+                    }
+                    return "" + rowNodeId++;
+                },
+                getRowClass: function (params) {
+                    if (params.node.id) {
+                        return "sky-ag-grid-row-" + params.node.id;
+                    }
+                    else {
+                        return undefined;
+                    }
+                },
+                headerHeight: ((_p = (_o = this.currentTheme) === null || _o === void 0 ? void 0 : _o.theme) === null || _p === void 0 ? void 0 : _p.name) === 'modern' ? 60 : 37,
                 icons: {
                     sortDescending: this.getIconTemplate('caret-down'),
                     sortAscending: this.getIconTemplate('caret-up'),
@@ -912,7 +1062,7 @@
                     columnMovePin: this.getIconTemplate('arrows')
                 },
                 onCellFocused: function () { return _this.onCellFocused(); },
-                rowHeight: ((_q = (_p = this.currentTheme) === null || _p === void 0 ? void 0 : _p.theme) === null || _q === void 0 ? void 0 : _q.name) === 'modern' ? 60 : 38,
+                rowHeight: ((_r = (_q = this.currentTheme) === null || _q === void 0 ? void 0 : _q.theme) === null || _r === void 0 ? void 0 : _r.name) === 'modern' ? 60 : 38,
                 rowMultiSelectWithClick: true,
                 rowSelection: 'multiple',
                 singleClickEdit: true,
@@ -930,9 +1080,12 @@
                         validatorMessage: 'Please enter a valid currency'
                     }
                 } });
-            (_r = this.resources) === null || _r === void 0 ? void 0 : _r.getString('sky_ag_grid_cell_renderer_currency_validator_message').subscribe(function (value) {
-                defaultSkyGridOptions.columnTypes[exports.SkyCellType.CurrencyValidator].cellRendererParams.skyComponentProperties.validatorMessage = value;
-            });
+            /*istanbul ignore else*/
+            if (this.resources) {
+                this.resources.getString('sky_ag_grid_cell_renderer_currency_validator_message').subscribe(function (value) {
+                    defaultSkyGridOptions.columnTypes[exports.SkyCellType.CurrencyValidator].cellRendererParams.skyComponentProperties.validatorMessage = value;
+                });
+            }
             defaultSkyGridOptions.columnTypes[exports.SkyCellType.NumberValidator] = __assign(__assign(__assign({}, defaultSkyGridOptions.columnTypes[exports.SkyCellType.Validator]), defaultSkyGridOptions.columnTypes[exports.SkyCellType.Number]), { cellClassRules: __assign(__assign({}, defaultSkyGridOptions.columnTypes[exports.SkyCellType.Validator].cellClassRules), defaultSkyGridOptions.columnTypes[exports.SkyCellType.Number].cellClassRules), cellRendererParams: {
                     skyComponentProperties: {
                         validator: function (value, data, rowIndex) {
@@ -941,9 +1094,12 @@
                         validatorMessage: 'Please enter a valid number'
                     }
                 } });
-            (_s = this.resources) === null || _s === void 0 ? void 0 : _s.getString('sky_ag_grid_cell_renderer_number_validator_message').subscribe(function (value) {
-                defaultSkyGridOptions.columnTypes[exports.SkyCellType.NumberValidator].cellRendererParams.skyComponentProperties.validatorMessage = value;
-            });
+            /*istanbul ignore else*/
+            if (this.resources) {
+                this.resources.getString('sky_ag_grid_cell_renderer_number_validator_message').subscribe(function (value) {
+                    defaultSkyGridOptions.columnTypes[exports.SkyCellType.NumberValidator].cellRendererParams.skyComponentProperties.validatorMessage = value;
+                });
+            }
             return defaultSkyGridOptions;
         };
         SkyAgGridService.prototype.onCellFocused = function () {
@@ -962,6 +1118,7 @@
             if (date && typeof date === 'string') {
                 date = new Date(params.value);
             }
+            // @ts-ignore
             var formattedDate = date && date.toLocaleDateString && date.toLocaleDateString(locale, dateConfig);
             if (date && date.getTime && !isNaN(date.getTime())) {
                 return formattedDate;
@@ -1094,7 +1251,7 @@
 
     var SkyAgGridResourcesProvider = /** @class */ (function () {
         function SkyAgGridResourcesProvider() {
-            this.resources = { "EN-US": { "sky_ag_grid_row_selector_aria_label": "Row selector for row {0}", "sky_ag_grid_cell_editor_number_aria_label": "Editable number {0} for row {1}", "sky_ag_grid_cell_editor_text_aria_label": "Editable text {0} for row {1}", "sky_ag_grid_cell_editor_autocomplete_aria_label": "Editable autocomplete {0} for row {1}", "sky_ag_grid_cell_renderer_currency_aria_label": "Editable currency {0} for row {1}", "sky_ag_grid_cell_renderer_number_validator_message": "Please enter a valid number", "sky_ag_grid_cell_renderer_currency_validator_message": "Please enter a valid currency" } };
+            this.resources = { "EN-US": { "sky_ag_grid_row_selector_aria_label": "Row selector for row {0}", "sky_ag_grid_cell_editor_number_aria_label": "Editable number {0} for row {1}", "sky_ag_grid_cell_editor_text_aria_label": "Editable text {0} for row {1}", "sky_ag_grid_cell_editor_autocomplete_aria_label": "Editable autocomplete {0} for row {1}", "sky_ag_grid_cell_renderer_currency_aria_label": "Editable currency {0} for row {1}", "sky_ag_grid_cell_renderer_number_validator_message": "Please enter a valid number", "sky_ag_grid_cell_renderer_currency_validator_message": "Please enter a valid currency", "skyux_lookup_tokens_summary": "{0} items selected" } };
         }
         SkyAgGridResourcesProvider.prototype.getString = function (localeInfo, name) {
             return i18n.getStringForLocale(this.resources, localeInfo.locale, name);
@@ -1164,6 +1321,25 @@
         return SkyAgGridCellEditorDatepickerModule;
     }());
 
+    var SkyAgGridCellEditorLookupModule = /** @class */ (function () {
+        function SkyAgGridCellEditorLookupModule() {
+        }
+        SkyAgGridCellEditorLookupModule = __decorate([
+            core.NgModule({
+                declarations: [SkyAgGridCellEditorLookupComponent],
+                exports: [SkyAgGridCellEditorLookupComponent],
+                imports: [
+                    common.CommonModule,
+                    forms.ReactiveFormsModule,
+                    SkyAgGridResourcesModule,
+                    forms$1.SkyInputBoxModule,
+                    lookup.SkyLookupModule
+                ]
+            })
+        ], SkyAgGridCellEditorLookupModule);
+        return SkyAgGridCellEditorLookupModule;
+    }());
+
     var SkyAgGridCellEditorNumberModule = /** @class */ (function () {
         function SkyAgGridCellEditorNumberModule() {
         }
@@ -1204,6 +1380,19 @@
         return SkyAgGridCellEditorTextModule;
     }());
 
+    var SkyAgGridCellRendererLookupModule = /** @class */ (function () {
+        function SkyAgGridCellRendererLookupModule() {
+        }
+        SkyAgGridCellRendererLookupModule = __decorate([
+            core.NgModule({
+                declarations: [SkyAgGridCellRendererLookupComponent],
+                exports: [SkyAgGridCellRendererLookupComponent],
+                imports: [common.CommonModule, SkyAgGridResourcesModule]
+            })
+        ], SkyAgGridCellRendererLookupModule);
+        return SkyAgGridCellRendererLookupModule;
+    }());
+
     var SkyAgGridCellRendererRowSelectorModule = /** @class */ (function () {
         function SkyAgGridCellRendererRowSelectorModule() {
         }
@@ -1314,13 +1503,30 @@
                 agGrid.api.sizeColumnsToFit();
             });
             agGrid.columnMoved
+                .pipe(operators.takeUntil(this.ngUnsubscribe), operators.filter(function (event) {
+                return ![
+                    'gridInitializing',
+                    'uiColumnResized',
+                    'uiColumnDragged',
+                    'api'
+                ].includes(event.source);
+            }))
+                .subscribe(function (value) {
+                _this.updateColumnsInCurrentDataState(value.columnApi);
+            });
+            var currentColumns;
+            agGrid.dragStarted
                 .pipe(operators.takeUntil(this.ngUnsubscribe))
-                .subscribe(function (event) {
-                var columnOrder = agGrid.columnApi.getAllDisplayedVirtualColumns().map(function (col) { return col.getColDef().colId; });
-                if (event.source !== 'api') {
-                    var viewState = _this.currentDataState.getViewStateById(_this.viewConfig.id);
-                    viewState.displayedColumnIds = columnOrder;
-                    _this.dataManagerSvc.updateDataState(_this.currentDataState.addOrUpdateView(_this.viewConfig.id, viewState), _this.viewConfig.id);
+                .subscribe(function (value) {
+                currentColumns = _this.getColumnOrder(value.columnApi);
+            });
+            agGrid.dragStopped
+                .pipe(operators.takeUntil(this.ngUnsubscribe))
+                .subscribe(function (value) {
+                var newColumns = _this.getColumnOrder(value.columnApi);
+                var hasChanged = currentColumns.findIndex(function (colId, i) { return colId !== newColumns[i]; });
+                if (hasChanged > -1) {
+                    _this.updateColumnsInCurrentDataState(value.columnApi);
                 }
             });
             agGrid.rowSelected
@@ -1342,7 +1548,6 @@
             agGrid.sortChanged
                 .pipe(operators.takeUntil(this.ngUnsubscribe))
                 .subscribe(function () {
-                var _a;
                 var gridSortModel = agGrid.api.getSortModel();
                 var sortOption;
                 /* istanbul ignore else */
@@ -1350,20 +1555,41 @@
                     var activeSortModel_1 = gridSortModel[0];
                     var activeSortColumn_1 = agGrid.columnApi.getColumn(activeSortModel_1.colId);
                     var dataManagerConfig = _this.dataManagerSvc.getCurrentDataManagerConfig();
-                    sortOption = (_a = dataManagerConfig.sortOptions) === null || _a === void 0 ? void 0 : _a.find(function (option) {
-                        return option.propertyName === activeSortColumn_1.getColDef().field &&
-                            option.descending === (activeSortModel_1.sort === 'desc');
-                    });
+                    /* istanbul ignore else */
+                    if (dataManagerConfig.sortOptions) {
+                        sortOption = dataManagerConfig.sortOptions.find(function (option) {
+                            return option.propertyName === activeSortColumn_1.getColDef().field &&
+                                option.descending === (activeSortModel_1.sort === 'desc');
+                        });
+                    }
+                    else {
+                        sortOption = undefined;
+                    }
                 }
                 _this.currentDataState.activeSortOption = sortOption;
                 _this.dataManagerSvc.updateDataState(_this.currentDataState, _this.viewConfig.id);
             });
         };
+        SkyAgGridDataManagerAdapterDirective.prototype.updateColumnsInCurrentDataState = function (columnApi) {
+            var columnOrder = this.getColumnOrder(columnApi);
+            var viewState = this.currentDataState.getViewStateById(this.viewConfig.id);
+            viewState.displayedColumnIds = columnOrder;
+            this.dataManagerSvc.updateDataState(this.currentDataState.addOrUpdateView(this.viewConfig.id, viewState), this.viewConfig.id);
+        };
+        SkyAgGridDataManagerAdapterDirective.prototype.getColumnOrder = function (columnApi) {
+            return columnApi
+                .getAllDisplayedVirtualColumns()
+                .map(function (col) { return col.getColDef().colId; });
+        };
         SkyAgGridDataManagerAdapterDirective.prototype.displayColumns = function (dataState) {
             var e_1, _a;
             var agGrid = this.currentAgGrid;
             var viewState = dataState.getViewStateById(this.viewConfig.id);
-            var displayedColumnIds = viewState.displayedColumnIds || [];
+            var displayedColumnIds = [];
+            /*istanbul ignore else*/
+            if (viewState.displayedColumnIds) {
+                displayedColumnIds = viewState.displayedColumnIds;
+            }
             var columns = agGrid.columnApi.getAllColumns();
             try {
                 for (var columns_1 = __values(columns), columns_1_1 = columns_1.next(); !columns_1_1.done; columns_1_1 = columns_1.next()) {
@@ -1456,7 +1682,7 @@
             var _this = this;
             this.zone.run(function () {
                 _this.indicatorShouldShow = false;
-                _this.changeDetector.markForCheck();
+                _this.changeDetector.detectChanges();
             });
         };
         SkyAgGridCellValidatorTooltipComponent.prototype.hidePopover = function () {
@@ -1466,7 +1692,7 @@
             var _this = this;
             this.zone.run(function () {
                 _this.indicatorShouldShow = true;
-                _this.changeDetector.markForCheck();
+                _this.changeDetector.detectChanges();
             });
         };
         SkyAgGridCellValidatorTooltipComponent.prototype.showPopover = function () {
@@ -1745,7 +1971,7 @@
             return this.rowDeleteConfigs.find(function (rowDelete) { return rowDelete.id === row.id; });
         };
         SkyAgGridRowDeleteDirective.prototype.affixToRow = function (affixer, id) {
-            var rowElement = this.elementRef.nativeElement.querySelector('[row-id="' + id + '"] div[aria-colindex="1"]');
+            var rowElement = this.elementRef.nativeElement.querySelector("\n      [row-id=\"" + id + "\"] div[aria-colindex=\"1\"],\n      .ag-row.sky-ag-grid-row-" + id + " div[aria-colindex=\"1\"]\n    ");
             // This covers cases where AG Grid places the column index on an inner element (such as with the `enableCellTextSelection` option)
             // This appears to have been fixed by AG Grid in version 24 and so it is not testable after that version.
             /* istanbul ignore if */
@@ -1882,9 +2108,11 @@
                     common.CommonModule,
                     SkyAgGridCellEditorAutocompleteModule,
                     SkyAgGridCellEditorDatepickerModule,
+                    SkyAgGridCellEditorLookupModule,
                     SkyAgGridCellEditorNumberModule,
                     SkyAgGridCellEditorCurrencyModule,
                     SkyAgGridCellRendererCurrencyModule,
+                    SkyAgGridCellRendererLookupModule,
                     SkyAgGridCellRendererRowSelectorModule,
                     SkyAgGridCellRendererValidatorTooltipModule,
                     SkyAgGridCellValidatorModule,
@@ -1907,10 +2135,12 @@
                 entryComponents: [
                     SkyAgGridCellEditorAutocompleteComponent,
                     SkyAgGridCellEditorDatepickerComponent,
+                    SkyAgGridCellEditorLookupComponent,
                     SkyAgGridCellEditorNumberComponent,
                     SkyAgGridCellEditorCurrencyComponent,
                     SkyAgGridCellRendererCurrencyComponent,
                     SkyAgGridCellRendererCurrencyValidatorComponent,
+                    SkyAgGridCellRendererLookupComponent,
                     SkyAgGridCellRendererRowSelectorComponent,
                     SkyAgGridCellRendererValidatorTooltipComponent,
                     SkyAgGridCellEditorTextComponent,
@@ -1925,6 +2155,10 @@
     exports.SkyAgGridService = SkyAgGridService;
     exports.ɵa = SkyAgGridDataManagerAdapterDirective;
     exports.ɵb = SkyAgGridWrapperComponent;
+    exports.ɵba = SkyAgGridCellRendererValidatorTooltipModule;
+    exports.ɵbb = SkyAgGridCellRendererValidatorTooltipComponent;
+    exports.ɵbc = SkyAgGridCellEditorTextModule;
+    exports.ɵbd = SkyAgGridCellEditorTextComponent;
     exports.ɵc = SkyAgGridAdapterService;
     exports.ɵd = SkyAgGridRowDeleteComponent;
     exports.ɵe = SkyAgGridRowDeleteDirective;
@@ -1934,21 +2168,21 @@
     exports.ɵi = SkyAgGridCellEditorAutocompleteComponent;
     exports.ɵj = SkyAgGridCellEditorDatepickerModule;
     exports.ɵk = SkyAgGridCellEditorDatepickerComponent;
-    exports.ɵl = SkyAgGridCellEditorNumberModule;
-    exports.ɵm = SkyAgGridCellEditorNumberComponent;
-    exports.ɵn = SkyAgGridCellEditorCurrencyModule;
-    exports.ɵo = SkyAgGridCellEditorCurrencyComponent;
-    exports.ɵp = SkyAgGridCellRendererCurrencyModule;
-    exports.ɵq = SkyAgGridCellValidatorModule;
-    exports.ɵr = SkyAgGridCellValidatorTooltipComponent;
-    exports.ɵs = SkyAgGridCellRendererCurrencyComponent;
-    exports.ɵt = SkyAgGridCellRendererCurrencyValidatorComponent;
-    exports.ɵu = SkyAgGridCellRendererRowSelectorModule;
-    exports.ɵv = SkyAgGridCellRendererRowSelectorComponent;
-    exports.ɵw = SkyAgGridCellRendererValidatorTooltipModule;
-    exports.ɵx = SkyAgGridCellRendererValidatorTooltipComponent;
-    exports.ɵy = SkyAgGridCellEditorTextModule;
-    exports.ɵz = SkyAgGridCellEditorTextComponent;
+    exports.ɵl = SkyAgGridCellEditorLookupModule;
+    exports.ɵm = SkyAgGridCellEditorLookupComponent;
+    exports.ɵn = SkyAgGridCellEditorNumberModule;
+    exports.ɵo = SkyAgGridCellEditorNumberComponent;
+    exports.ɵp = SkyAgGridCellEditorCurrencyModule;
+    exports.ɵq = SkyAgGridCellEditorCurrencyComponent;
+    exports.ɵr = SkyAgGridCellRendererCurrencyModule;
+    exports.ɵs = SkyAgGridCellValidatorModule;
+    exports.ɵt = SkyAgGridCellValidatorTooltipComponent;
+    exports.ɵu = SkyAgGridCellRendererCurrencyComponent;
+    exports.ɵv = SkyAgGridCellRendererCurrencyValidatorComponent;
+    exports.ɵw = SkyAgGridCellRendererLookupModule;
+    exports.ɵx = SkyAgGridCellRendererLookupComponent;
+    exports.ɵy = SkyAgGridCellRendererRowSelectorModule;
+    exports.ɵz = SkyAgGridCellRendererRowSelectorComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });