@skyux/ag-grid 4.10.2 → 4.12.2

package/fesm5/skyux-ag-grid.js

@@ -7,13 +7,13 @@ import { SkyDataManagerService, SkyDataManagerModule } from '@skyux/data-manager
 import { SkyInlineDeleteModule } from '@skyux/layout';
 import { SkyLibResourcesService, getStringForLocale, SKY_LIB_RESOURCES_PROVIDERS, SkyI18nModule } from '@skyux/i18n';
 import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { takeUntil, filter } from 'rxjs/operators';
 import { SkyThemeService } from '@skyux/theme';
 import { PopupComponent, RowNode, Events } from 'ag-grid-community';
-import { FormsModule } from '@angular/forms';
-import { SkyAutocompleteModule } from '@skyux/lookup';
+import { FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { SkyAutocompleteModule, SkyLookupModule } from '@skyux/lookup';
 import { SkyDatepickerModule } from '@skyux/datetime';
-import { SkyCheckboxModule } from '@skyux/forms';
+import { SkyInputBoxModule, SkyCheckboxModule } from '@skyux/forms';
 import { SkyStatusIndicatorModule } from '@skyux/indicators';
 import { SkyPopoverMessageType, SkyPopoverModule } from '@skyux/popovers';
 import { SkyAutonumericModule } from '@skyux/autonumeric';
@@ -116,6 +116,94 @@ var SkyAgGridCellEditorDatepickerComponent = /** @class */ (function (_super) {
     return SkyAgGridCellEditorDatepickerComponent;
 }(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 FormGroup({
+            currentSelection: new 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: ChangeDetectorRef },
+        { type: ElementRef }
+    ]; };
+    SkyAgGridCellEditorLookupComponent = __decorate([
+        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: ChangeDetectionStrategy.OnPush,
+            styles: [":host{display:block}"]
+        })
+    ], SkyAgGridCellEditorLookupComponent);
+    return SkyAgGridCellEditorLookupComponent;
+}());
+
 var SkyAgGridCellEditorNumberComponent = /** @class */ (function () {
     function SkyAgGridCellEditorNumberComponent() {
     }
@@ -239,6 +327,36 @@ var SkyAgGridCellRendererCurrencyValidatorComponent = /** @class */ (function ()
     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: ChangeDetectorRef }
+    ]; };
+    SkyAgGridCellRendererLookupComponent = __decorate([
+        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: 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;
@@ -348,6 +466,7 @@ var SkyCellClass;
     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";
@@ -360,6 +479,7 @@ var SkyCellType;
     SkyCellType["Currency"] = "skyCellCurrency";
     SkyCellType["CurrencyValidator"] = "skyCellCurrencyValidator";
     SkyCellType["Date"] = "skyCellDate";
+    SkyCellType["Lookup"] = "skyCellLookup";
     SkyCellType["Number"] = "skyCellNumber";
     SkyCellType["NumberValidator"] = "skyCellNumberValidator";
     SkyCellType["RowSelector"] = "skyCellRowSelector";
@@ -548,18 +668,19 @@ function dateComparator(date1, date2) {
 }
 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.
  */
@@ -602,9 +723,9 @@ var SkyAgGridService = /** @class */ (function () {
         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) {
@@ -623,8 +744,8 @@ var SkyAgGridService = /** @class */ (function () {
             _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;
@@ -646,25 +767,41 @@ var SkyAgGridService = /** @class */ (function () {
                     cellClassRules: __assign(__assign((_e = {}, _e[SkyCellClass.Currency] = cellClassRuleTrueExpression, _e), validatorCellClassRules), editableCellClassRules),
                     cellRendererSelector: getValidatorCellRendererSelector('sky-ag-grid-cell-renderer-currency-validator', { component: 'sky-ag-grid-cell-renderer-currency' }),
                     cellEditorFramework: SkyAgGridCellEditorCurrencyComponent,
+                    headerClass: SkyHeaderClass.RightAligned,
                     minWidth: 185
                 },
                 _c[SkyCellType.Date] = {
                     cellClassRules: __assign((_f = {}, _f[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[SkyCellType.Lookup] = {
+                    cellClassRules: __assign((_g = {}, _g[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[SkyCellType.Number] = {
-                    cellClassRules: __assign((_g = {}, _g[SkyCellClass.Number] = cellClassRuleTrueExpression, _g), editableCellClassRules),
+                    cellClassRules: __assign((_h = {}, _h[SkyCellClass.Number] = cellClassRuleTrueExpression, _h), editableCellClassRules),
                     cellEditorFramework: SkyAgGridCellEditorNumberComponent,
                     headerClass: SkyHeaderClass.RightAligned
                 },
                 _c[SkyCellType.RowSelector] = {
-                    cellClassRules: (_h = {},
-                        _h[SkyCellClass.RowSelector] = cellClassRuleTrueExpression,
-                        _h[SkyCellClass.Uneditable] = cellClassRuleTrueExpression,
-                        _h),
+                    cellClassRules: (_j = {},
+                        _j[SkyCellClass.RowSelector] = cellClassRuleTrueExpression,
+                        _j[SkyCellClass.Uneditable] = cellClassRuleTrueExpression,
+                        _j),
                     cellRendererFramework: SkyAgGridCellRendererRowSelectorComponent,
                     headerName: '',
                     minWidth: 55,
@@ -673,7 +810,7 @@ var SkyAgGridService = /** @class */ (function () {
                     width: 55
                 },
                 _c[SkyCellType.Text] = {
-                    cellClassRules: __assign((_j = {}, _j[SkyCellClass.Text] = cellClassRuleTrueExpression, _j), editableCellClassRules),
+                    cellClassRules: __assign((_k = {}, _k[SkyCellClass.Text] = cellClassRuleTrueExpression, _k), editableCellClassRules),
                     cellEditorFramework: SkyAgGridCellEditorTextComponent
                 },
                 _c[SkyCellType.Validator] = {
@@ -695,7 +832,21 @@ var SkyAgGridService = /** @class */ (function () {
                 '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'),
@@ -706,7 +857,7 @@ var SkyAgGridService = /** @class */ (function () {
                 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,
@@ -724,9 +875,12 @@ var SkyAgGridService = /** @class */ (function () {
                     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[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[SkyCellType.CurrencyValidator].cellRendererParams.skyComponentProperties.validatorMessage = value;
+            });
+        }
         defaultSkyGridOptions.columnTypes[SkyCellType.NumberValidator] = __assign(__assign(__assign({}, defaultSkyGridOptions.columnTypes[SkyCellType.Validator]), defaultSkyGridOptions.columnTypes[SkyCellType.Number]), { cellClassRules: __assign(__assign({}, defaultSkyGridOptions.columnTypes[SkyCellType.Validator].cellClassRules), defaultSkyGridOptions.columnTypes[SkyCellType.Number].cellClassRules), cellRendererParams: {
                 skyComponentProperties: {
                     validator: function (value, data, rowIndex) {
@@ -735,9 +889,12 @@ var SkyAgGridService = /** @class */ (function () {
                     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[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[SkyCellType.NumberValidator].cellRendererParams.skyComponentProperties.validatorMessage = value;
+            });
+        }
         return defaultSkyGridOptions;
     };
     SkyAgGridService.prototype.onCellFocused = function () {
@@ -756,6 +913,7 @@ var SkyAgGridService = /** @class */ (function () {
         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;
@@ -888,7 +1046,7 @@ var SkyAgGridWrapperComponent = /** @class */ (function () {
 
 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 getStringForLocale(this.resources, localeInfo.locale, name);
@@ -958,6 +1116,25 @@ var SkyAgGridCellEditorDatepickerModule = /** @class */ (function () {
     return SkyAgGridCellEditorDatepickerModule;
 }());
 
+var SkyAgGridCellEditorLookupModule = /** @class */ (function () {
+    function SkyAgGridCellEditorLookupModule() {
+    }
+    SkyAgGridCellEditorLookupModule = __decorate([
+        NgModule({
+            declarations: [SkyAgGridCellEditorLookupComponent],
+            exports: [SkyAgGridCellEditorLookupComponent],
+            imports: [
+                CommonModule,
+                ReactiveFormsModule,
+                SkyAgGridResourcesModule,
+                SkyInputBoxModule,
+                SkyLookupModule
+            ]
+        })
+    ], SkyAgGridCellEditorLookupModule);
+    return SkyAgGridCellEditorLookupModule;
+}());
+
 var SkyAgGridCellEditorNumberModule = /** @class */ (function () {
     function SkyAgGridCellEditorNumberModule() {
     }
@@ -998,6 +1175,19 @@ var SkyAgGridCellEditorTextModule = /** @class */ (function () {
     return SkyAgGridCellEditorTextModule;
 }());
 
+var SkyAgGridCellRendererLookupModule = /** @class */ (function () {
+    function SkyAgGridCellRendererLookupModule() {
+    }
+    SkyAgGridCellRendererLookupModule = __decorate([
+        NgModule({
+            declarations: [SkyAgGridCellRendererLookupComponent],
+            exports: [SkyAgGridCellRendererLookupComponent],
+            imports: [CommonModule, SkyAgGridResourcesModule]
+        })
+    ], SkyAgGridCellRendererLookupModule);
+    return SkyAgGridCellRendererLookupModule;
+}());
+
 var SkyAgGridCellRendererRowSelectorModule = /** @class */ (function () {
     function SkyAgGridCellRendererRowSelectorModule() {
     }
@@ -1108,13 +1298,30 @@ var SkyAgGridDataManagerAdapterDirective = /** @class */ (function () {
             agGrid.api.sizeColumnsToFit();
         });
         agGrid.columnMoved
+            .pipe(takeUntil(this.ngUnsubscribe), filter(function (event) {
+            return ![
+                'gridInitializing',
+                'uiColumnResized',
+                'uiColumnDragged',
+                'api'
+            ].includes(event.source);
+        }))
+            .subscribe(function (value) {
+            _this.updateColumnsInCurrentDataState(value.columnApi);
+        });
+        var currentColumns;
+        agGrid.dragStarted
             .pipe(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(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
@@ -1136,7 +1343,6 @@ var SkyAgGridDataManagerAdapterDirective = /** @class */ (function () {
         agGrid.sortChanged
             .pipe(takeUntil(this.ngUnsubscribe))
             .subscribe(function () {
-            var _a;
             var gridSortModel = agGrid.api.getSortModel();
             var sortOption;
             /* istanbul ignore else */
@@ -1144,20 +1350,41 @@ var SkyAgGridDataManagerAdapterDirective = /** @class */ (function () {
                 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()) {
@@ -1539,7 +1766,7 @@ var SkyAgGridRowDeleteDirective = /** @class */ (function () {
         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 */
@@ -1676,9 +1903,11 @@ var SkyAgGridModule = /** @class */ (function () {
                 CommonModule,
                 SkyAgGridCellEditorAutocompleteModule,
                 SkyAgGridCellEditorDatepickerModule,
+                SkyAgGridCellEditorLookupModule,
                 SkyAgGridCellEditorNumberModule,
                 SkyAgGridCellEditorCurrencyModule,
                 SkyAgGridCellRendererCurrencyModule,
+                SkyAgGridCellRendererLookupModule,
                 SkyAgGridCellRendererRowSelectorModule,
                 SkyAgGridCellRendererValidatorTooltipModule,
                 SkyAgGridCellValidatorModule,
@@ -1701,10 +1930,12 @@ var SkyAgGridModule = /** @class */ (function () {
             entryComponents: [
                 SkyAgGridCellEditorAutocompleteComponent,
                 SkyAgGridCellEditorDatepickerComponent,
+                SkyAgGridCellEditorLookupComponent,
                 SkyAgGridCellEditorNumberComponent,
                 SkyAgGridCellEditorCurrencyComponent,
                 SkyAgGridCellRendererCurrencyComponent,
                 SkyAgGridCellRendererCurrencyValidatorComponent,
+                SkyAgGridCellRendererLookupComponent,
                 SkyAgGridCellRendererRowSelectorComponent,
                 SkyAgGridCellRendererValidatorTooltipComponent,
                 SkyAgGridCellEditorTextComponent,
@@ -1721,5 +1952,5 @@ var SkyAgGridModule = /** @class */ (function () {
  * Generated bundle index. Do not edit.
  */
 
-export { SkyAgGridModule, SkyAgGridService, SkyCellClass, SkyCellType, SkyHeaderClass, SkyAgGridDataManagerAdapterDirective as ɵa, SkyAgGridWrapperComponent as ɵb, SkyAgGridAdapterService as ɵc, SkyAgGridRowDeleteComponent as ɵd, SkyAgGridRowDeleteDirective as ɵe, SkyAgGridCellEditorAutocompleteModule as ɵf, SkyAgGridResourcesModule as ɵg, SkyAgGridResourcesProvider as ɵh, SkyAgGridCellEditorAutocompleteComponent as ɵi, SkyAgGridCellEditorDatepickerModule as ɵj, SkyAgGridCellEditorDatepickerComponent as ɵk, SkyAgGridCellEditorNumberModule as ɵl, SkyAgGridCellEditorNumberComponent as ɵm, SkyAgGridCellEditorCurrencyModule as ɵn, SkyAgGridCellEditorCurrencyComponent as ɵo, SkyAgGridCellRendererCurrencyModule as ɵp, SkyAgGridCellValidatorModule as ɵq, SkyAgGridCellValidatorTooltipComponent as ɵr, SkyAgGridCellRendererCurrencyComponent as ɵs, SkyAgGridCellRendererCurrencyValidatorComponent as ɵt, SkyAgGridCellRendererRowSelectorModule as ɵu, SkyAgGridCellRendererRowSelectorComponent as ɵv, SkyAgGridCellRendererValidatorTooltipModule as ɵw, SkyAgGridCellRendererValidatorTooltipComponent as ɵx, SkyAgGridCellEditorTextModule as ɵy, SkyAgGridCellEditorTextComponent as ɵz };
+export { SkyAgGridModule, SkyAgGridService, SkyCellClass, SkyCellType, SkyHeaderClass, SkyAgGridDataManagerAdapterDirective as ɵa, SkyAgGridWrapperComponent as ɵb, SkyAgGridCellRendererValidatorTooltipModule as ɵba, SkyAgGridCellRendererValidatorTooltipComponent as ɵbb, SkyAgGridCellEditorTextModule as ɵbc, SkyAgGridCellEditorTextComponent as ɵbd, SkyAgGridAdapterService as ɵc, SkyAgGridRowDeleteComponent as ɵd, SkyAgGridRowDeleteDirective as ɵe, SkyAgGridCellEditorAutocompleteModule as ɵf, SkyAgGridResourcesModule as ɵg, SkyAgGridResourcesProvider as ɵh, SkyAgGridCellEditorAutocompleteComponent as ɵi, SkyAgGridCellEditorDatepickerModule as ɵj, SkyAgGridCellEditorDatepickerComponent as ɵk, SkyAgGridCellEditorLookupModule as ɵl, SkyAgGridCellEditorLookupComponent as ɵm, SkyAgGridCellEditorNumberModule as ɵn, SkyAgGridCellEditorNumberComponent as ɵo, SkyAgGridCellEditorCurrencyModule as ɵp, SkyAgGridCellEditorCurrencyComponent as ɵq, SkyAgGridCellRendererCurrencyModule as ɵr, SkyAgGridCellValidatorModule as ɵs, SkyAgGridCellValidatorTooltipComponent as ɵt, SkyAgGridCellRendererCurrencyComponent as ɵu, SkyAgGridCellRendererCurrencyValidatorComponent as ɵv, SkyAgGridCellRendererLookupModule as ɵw, SkyAgGridCellRendererLookupComponent as ɵx, SkyAgGridCellRendererRowSelectorModule as ɵy, SkyAgGridCellRendererRowSelectorComponent as ɵz };
 //# sourceMappingURL=skyux-ag-grid.js.map