@skyux/ag-grid 4.11.0 → 4.12.3

package/fesm2015/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';
@@ -111,6 +111,93 @@ SkyAgGridCellEditorDatepickerComponent = __decorate([
     __param(0, Optional())
 ], SkyAgGridCellEditorDatepickerComponent);
 
+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'
+    };
+}
+
+let SkyAgGridCellEditorLookupComponent = class SkyAgGridCellEditorLookupComponent {
+    constructor(changeDetector, elementRef) {
+        this.changeDetector = changeDetector;
+        this.elementRef = elementRef;
+        this.isAlive = true;
+        this.lookupForm = new FormGroup({
+            currentSelection: new FormControl({
+                value: [],
+                disabled: false
+            })
+        });
+    }
+    agInit(params) {
+        this.params = params;
+        if (!Array.isArray(this.params.value)) {
+            throw new Error(`Lookup value must be an array`);
+        }
+        const 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();
+    }
+    isCancelAfterEnd() {
+        // Shut down components to commit values before final value syncs to grid.
+        this.isAlive = false;
+        this.changeDetector.detectChanges();
+        return false;
+    }
+    getGui() {
+        return this.elementRef.nativeElement;
+    }
+    getValue() {
+        return this.lookupForm.get('currentSelection').value;
+    }
+    isPopup() {
+        return true;
+    }
+    /*istanbul ignore next*/
+    afterGuiAttached() {
+        var _a;
+        (_a = this.elementRef.nativeElement.querySelector('.sky-lookup-input')) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    updateComponentProperties(params) {
+        const skyLookupProperties = params.skyComponentProperties;
+        return applySkyLookupPropertiesDefaults(skyLookupProperties);
+    }
+};
+SkyAgGridCellEditorLookupComponent.ctorParameters = () => [
+    { 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);
+
 let SkyAgGridCellEditorNumberComponent = class SkyAgGridCellEditorNumberComponent {
     /**
      * agInit is called by agGrid once after the editor is created and provides the editor with the information it needs.
@@ -223,6 +310,35 @@ SkyAgGridCellRendererCurrencyValidatorComponent = __decorate([
     })
 ], SkyAgGridCellRendererCurrencyValidatorComponent);
 
+let SkyAgGridCellRendererLookupComponent = class SkyAgGridCellRendererLookupComponent {
+    constructor(changeDetector) {
+        this.changeDetector = changeDetector;
+        this.value = '';
+        this.summaryCount = 0;
+    }
+    agInit(params) {
+        var _a;
+        this.summaryCount = ((_a = params.value) === null || _a === void 0 ? void 0 : _a.length) || 0;
+        this.value = `${params.valueFormatted}`;
+        this.changeDetector.markForCheck();
+    }
+    refresh(params) {
+        this.agInit(params);
+        return true;
+    }
+};
+SkyAgGridCellRendererLookupComponent.ctorParameters = () => [
+    { 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);
+
 let SkyAgGridCellRendererRowSelectorComponent = class SkyAgGridCellRendererRowSelectorComponent {
     constructor(changeDetection) {
         this.changeDetection = changeDetection;
@@ -325,6 +441,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";
@@ -337,6 +454,7 @@ var SkyCellType;
     SkyCellType["Currency"] = "skyCellCurrency";
     SkyCellType["CurrencyValidator"] = "skyCellCurrencyValidator";
     SkyCellType["Date"] = "skyCellDate";
+    SkyCellType["Lookup"] = "skyCellLookup";
     SkyCellType["Number"] = "skyCellNumber";
     SkyCellType["NumberValidator"] = "skyCellNumberValidator";
     SkyCellType["RowSelector"] = "skyCellRowSelector";
@@ -518,18 +636,19 @@ function dateComparator(date1, date2) {
 }
 function getValidatorCellRendererSelector(component, fallback) {
     return (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,
-                    params: Object.assign({}, (_d = params.colDef) === null || _d === void 0 ? void 0 : _d.cellRendererParams)
+                    params: Object.assign({}, params.colDef.cellRendererParams)
                 };
             }
         }
         return fallback;
     };
 }
+let rowNodeId = 1;
 /**
  * A service that provides default styling and behavior for agGrids in SKY UX SPAs.
  */
@@ -571,7 +690,7 @@ let SkyAgGridService = class SkyAgGridService {
         return mergedGridOptions;
     }
     getDefaultGridOptions(args) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f;
         // cellClassRules can be functions or string expressions
         const cellClassRuleTrueExpression = 'true';
         function getEditableFn(isUneditable) {
@@ -590,8 +709,8 @@ let SkyAgGridService = class SkyAgGridService {
         };
         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;
@@ -623,6 +742,21 @@ let SkyAgGridService = class SkyAgGridService {
                     minWidth: ((_b = (_a = this.currentTheme) === null || _a === void 0 ? void 0 : _a.theme) === null || _b === void 0 ? void 0 : _b.name) === 'modern' ? 180 : 160,
                     valueFormatter: (params) => this.dateFormatter(params, args.locale)
                 },
+                [SkyCellType.Lookup]: {
+                    cellClassRules: Object.assign({ [SkyCellClass.Lookup]: cellClassRuleTrueExpression }, editableCellClassRules),
+                    cellEditorFramework: SkyAgGridCellEditorLookupComponent,
+                    cellRendererFramework: SkyAgGridCellRendererLookupComponent,
+                    valueFormatter: (params) => {
+                        const lookupProperties = applySkyLookupPropertiesDefaults(params);
+                        return (params.value || [])
+                            .map((value) => {
+                            return value[lookupProperties.descriptorProperty];
+                        })
+                            .filter((value) => value !== '' && value !== undefined)
+                            .join('; ');
+                    },
+                    minWidth: 185
+                },
                 [SkyCellType.Number]: {
                     cellClassRules: Object.assign({ [SkyCellClass.Number]: cellClassRuleTrueExpression }, editableCellClassRules),
                     cellEditorFramework: SkyAgGridCellEditorNumberComponent,
@@ -663,6 +797,20 @@ let SkyAgGridService = class SkyAgGridService {
                 'sky-ag-grid-cell-renderer-currency-validator': SkyAgGridCellRendererCurrencyValidatorComponent,
                 'sky-ag-grid-cell-renderer-validator-tooltip': SkyAgGridCellRendererValidatorTooltipComponent
             },
+            getRowNodeId(data) {
+                if ('id' in data && data.id) {
+                    return `${data.id}`;
+                }
+                return `${rowNodeId++}`;
+            },
+            getRowClass: (params) => {
+                if (params.node.id) {
+                    return `sky-ag-grid-row-${params.node.id}`;
+                }
+                else {
+                    return undefined;
+                }
+            },
             headerHeight: ((_d = (_c = this.currentTheme) === null || _c === void 0 ? void 0 : _c.theme) === null || _d === void 0 ? void 0 : _d.name) === 'modern' ? 60 : 37,
             icons: {
                 sortDescending: this.getIconTemplate('caret-down'),
@@ -692,9 +840,12 @@ let SkyAgGridService = class SkyAgGridService {
                     validatorMessage: 'Please enter a valid currency'
                 }
             } });
-        (_g = this.resources) === null || _g === void 0 ? void 0 : _g.getString('sky_ag_grid_cell_renderer_currency_validator_message').subscribe((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((value) => {
+                defaultSkyGridOptions.columnTypes[SkyCellType.CurrencyValidator].cellRendererParams.skyComponentProperties.validatorMessage = value;
+            });
+        }
         defaultSkyGridOptions.columnTypes[SkyCellType.NumberValidator] = Object.assign(Object.assign(Object.assign({}, defaultSkyGridOptions.columnTypes[SkyCellType.Validator]), defaultSkyGridOptions.columnTypes[SkyCellType.Number]), { cellClassRules: Object.assign(Object.assign({}, defaultSkyGridOptions.columnTypes[SkyCellType.Validator].cellClassRules), defaultSkyGridOptions.columnTypes[SkyCellType.Number].cellClassRules), cellRendererParams: {
                 skyComponentProperties: {
                     validator: (value, data, rowIndex) => {
@@ -703,9 +854,12 @@ let SkyAgGridService = class SkyAgGridService {
                     validatorMessage: 'Please enter a valid number'
                 }
             } });
-        (_h = this.resources) === null || _h === void 0 ? void 0 : _h.getString('sky_ag_grid_cell_renderer_number_validator_message').subscribe((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((value) => {
+                defaultSkyGridOptions.columnTypes[SkyCellType.NumberValidator].cellRendererParams.skyComponentProperties.validatorMessage = value;
+            });
+        }
         return defaultSkyGridOptions;
     }
     onCellFocused() {
@@ -723,6 +877,7 @@ let SkyAgGridService = class SkyAgGridService {
         if (date && typeof date === 'string') {
             date = new Date(params.value);
         }
+        // @ts-ignore
         let formattedDate = date && date.toLocaleDateString && date.toLocaleDateString(locale, dateConfig);
         if (date && date.getTime && !isNaN(date.getTime())) {
             return formattedDate;
@@ -845,7 +1000,7 @@ SkyAgGridWrapperComponent = __decorate([
 
 let SkyAgGridResourcesProvider = class SkyAgGridResourcesProvider {
     constructor() {
-        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" } };
     }
     getString(localeInfo, name) {
         return getStringForLocale(this.resources, localeInfo.locale, name);
@@ -905,6 +1060,22 @@ SkyAgGridCellEditorDatepickerModule = __decorate([
     })
 ], SkyAgGridCellEditorDatepickerModule);
 
+let SkyAgGridCellEditorLookupModule = class SkyAgGridCellEditorLookupModule {
+};
+SkyAgGridCellEditorLookupModule = __decorate([
+    NgModule({
+        declarations: [SkyAgGridCellEditorLookupComponent],
+        exports: [SkyAgGridCellEditorLookupComponent],
+        imports: [
+            CommonModule,
+            ReactiveFormsModule,
+            SkyAgGridResourcesModule,
+            SkyInputBoxModule,
+            SkyLookupModule
+        ]
+    })
+], SkyAgGridCellEditorLookupModule);
+
 let SkyAgGridCellEditorNumberModule = class SkyAgGridCellEditorNumberModule {
 };
 SkyAgGridCellEditorNumberModule = __decorate([
@@ -939,6 +1110,16 @@ SkyAgGridCellEditorTextModule = __decorate([
     })
 ], SkyAgGridCellEditorTextModule);
 
+let SkyAgGridCellRendererLookupModule = class SkyAgGridCellRendererLookupModule {
+};
+SkyAgGridCellRendererLookupModule = __decorate([
+    NgModule({
+        declarations: [SkyAgGridCellRendererLookupComponent],
+        exports: [SkyAgGridCellRendererLookupComponent],
+        imports: [CommonModule, SkyAgGridResourcesModule]
+    })
+], SkyAgGridCellRendererLookupModule);
+
 let SkyAgGridCellRendererRowSelectorModule = class SkyAgGridCellRendererRowSelectorModule {
 };
 SkyAgGridCellRendererRowSelectorModule = __decorate([
@@ -1043,13 +1224,28 @@ let SkyAgGridDataManagerAdapterDirective = class SkyAgGridDataManagerAdapterDire
             agGrid.api.sizeColumnsToFit();
         });
         agGrid.columnMoved
+            .pipe(takeUntil(this.ngUnsubscribe), filter((event) => ![
+            'gridInitializing',
+            'uiColumnResized',
+            'uiColumnDragged',
+            'api'
+        ].includes(event.source)))
+            .subscribe((value) => {
+            this.updateColumnsInCurrentDataState(value.columnApi);
+        });
+        let currentColumns;
+        agGrid.dragStarted
             .pipe(takeUntil(this.ngUnsubscribe))
-            .subscribe((event) => {
-            let columnOrder = agGrid.columnApi.getAllDisplayedVirtualColumns().map(col => col.getColDef().colId);
-            if (event.source !== 'api') {
-                const viewState = this.currentDataState.getViewStateById(this.viewConfig.id);
-                viewState.displayedColumnIds = columnOrder;
-                this.dataManagerSvc.updateDataState(this.currentDataState.addOrUpdateView(this.viewConfig.id, viewState), this.viewConfig.id);
+            .subscribe((value) => {
+            currentColumns = this.getColumnOrder(value.columnApi);
+        });
+        agGrid.dragStopped
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((value) => {
+            const newColumns = this.getColumnOrder(value.columnApi);
+            const hasChanged = currentColumns.findIndex((colId, i) => colId !== newColumns[i]);
+            if (hasChanged > -1) {
+                this.updateColumnsInCurrentDataState(value.columnApi);
             }
         });
         agGrid.rowSelected
@@ -1071,7 +1267,6 @@ let SkyAgGridDataManagerAdapterDirective = class SkyAgGridDataManagerAdapterDire
         agGrid.sortChanged
             .pipe(takeUntil(this.ngUnsubscribe))
             .subscribe(() => {
-            var _a;
             const gridSortModel = agGrid.api.getSortModel();
             let sortOption;
             /* istanbul ignore else */
@@ -1079,19 +1274,40 @@ let SkyAgGridDataManagerAdapterDirective = class SkyAgGridDataManagerAdapterDire
                 const activeSortModel = gridSortModel[0];
                 const activeSortColumn = agGrid.columnApi.getColumn(activeSortModel.colId);
                 const dataManagerConfig = this.dataManagerSvc.getCurrentDataManagerConfig();
-                sortOption = (_a = dataManagerConfig.sortOptions) === null || _a === void 0 ? void 0 : _a.find((option) => {
-                    return option.propertyName === activeSortColumn.getColDef().field &&
-                        option.descending === (activeSortModel.sort === 'desc');
-                });
+                /* istanbul ignore else */
+                if (dataManagerConfig.sortOptions) {
+                    sortOption = dataManagerConfig.sortOptions.find((option) => {
+                        return option.propertyName === activeSortColumn.getColDef().field &&
+                            option.descending === (activeSortModel.sort === 'desc');
+                    });
+                }
+                else {
+                    sortOption = undefined;
+                }
             }
             this.currentDataState.activeSortOption = sortOption;
             this.dataManagerSvc.updateDataState(this.currentDataState, this.viewConfig.id);
         });
     }
+    updateColumnsInCurrentDataState(columnApi) {
+        const columnOrder = this.getColumnOrder(columnApi);
+        const viewState = this.currentDataState.getViewStateById(this.viewConfig.id);
+        viewState.displayedColumnIds = columnOrder;
+        this.dataManagerSvc.updateDataState(this.currentDataState.addOrUpdateView(this.viewConfig.id, viewState), this.viewConfig.id);
+    }
+    getColumnOrder(columnApi) {
+        return columnApi
+            .getAllDisplayedVirtualColumns()
+            .map((col) => col.getColDef().colId);
+    }
     displayColumns(dataState) {
         const agGrid = this.currentAgGrid;
         const viewState = dataState.getViewStateById(this.viewConfig.id);
-        const displayedColumnIds = viewState.displayedColumnIds || [];
+        let displayedColumnIds = [];
+        /*istanbul ignore else*/
+        if (viewState.displayedColumnIds) {
+            displayedColumnIds = viewState.displayedColumnIds;
+        }
         const columns = agGrid.columnApi.getAllColumns();
         for (const column of columns) {
             const colId = column.getColId();
@@ -1167,7 +1383,7 @@ let SkyAgGridCellValidatorTooltipComponent = class SkyAgGridCellValidatorTooltip
     hideIndicator() {
         this.zone.run(() => {
             this.indicatorShouldShow = false;
-            this.changeDetector.markForCheck();
+            this.changeDetector.detectChanges();
         });
     }
     hidePopover() {
@@ -1176,7 +1392,7 @@ let SkyAgGridCellValidatorTooltipComponent = class SkyAgGridCellValidatorTooltip
     showIndicator() {
         this.zone.run(() => {
             this.indicatorShouldShow = true;
-            this.changeDetector.markForCheck();
+            this.changeDetector.detectChanges();
         });
     }
     showPopover() {
@@ -1425,7 +1641,10 @@ let SkyAgGridRowDeleteDirective = class SkyAgGridRowDeleteDirective {
         return this.rowDeleteConfigs.find(rowDelete => rowDelete.id === row.id);
     }
     affixToRow(affixer, id) {
-        let rowElement = this.elementRef.nativeElement.querySelector('[row-id="' + id + '"] div[aria-colindex="1"]');
+        let rowElement = this.elementRef.nativeElement.querySelector(`
+      [row-id="${id}"] div[aria-colindex="1"],
+      .ag-row.sky-ag-grid-row-${id} div[aria-colindex="1"]
+    `);
         // 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 */
@@ -1553,9 +1772,11 @@ SkyAgGridModule = __decorate([
             CommonModule,
             SkyAgGridCellEditorAutocompleteModule,
             SkyAgGridCellEditorDatepickerModule,
+            SkyAgGridCellEditorLookupModule,
             SkyAgGridCellEditorNumberModule,
             SkyAgGridCellEditorCurrencyModule,
             SkyAgGridCellRendererCurrencyModule,
+            SkyAgGridCellRendererLookupModule,
             SkyAgGridCellRendererRowSelectorModule,
             SkyAgGridCellRendererValidatorTooltipModule,
             SkyAgGridCellValidatorModule,
@@ -1578,10 +1799,12 @@ SkyAgGridModule = __decorate([
         entryComponents: [
             SkyAgGridCellEditorAutocompleteComponent,
             SkyAgGridCellEditorDatepickerComponent,
+            SkyAgGridCellEditorLookupComponent,
             SkyAgGridCellEditorNumberComponent,
             SkyAgGridCellEditorCurrencyComponent,
             SkyAgGridCellRendererCurrencyComponent,
             SkyAgGridCellRendererCurrencyValidatorComponent,
+            SkyAgGridCellRendererLookupComponent,
             SkyAgGridCellRendererRowSelectorComponent,
             SkyAgGridCellRendererValidatorTooltipComponent,
             SkyAgGridCellEditorTextComponent,
@@ -1596,5 +1819,5 @@ SkyAgGridModule = __decorate([
  * 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