@skyux/grids 5.5.0-alpha.0 → 5.6.0

package/bundles/skyux-grids.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('ng2-dragula'), require('@skyux/core'), require('@skyux/forms'), require('@skyux/indicators'), require('@skyux/layout'), require('@skyux/popovers'), require('@skyux/list-builder-common'), require('rxjs'), require('rxjs/operators'), require('@skyux/i18n')) :
-    typeof define === 'function' && define.amd ? define('@skyux/grids', ['exports', '@angular/core', '@angular/common', '@angular/forms', 'ng2-dragula', '@skyux/core', '@skyux/forms', '@skyux/indicators', '@skyux/layout', '@skyux/popovers', '@skyux/list-builder-common', 'rxjs', 'rxjs/operators', '@skyux/i18n'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux.grids = {}), global.ng.core, global.ng.common, global.ng.forms, global.i2, global.i1, global.i5, global.i4, global.i7, global.i9, global.listBuilderCommon, global.rxjs, global.rxjs.operators, global.i11));
-})(this, (function (exports, i0, i8, i10, i2, i1, i5, i4, i7, i9, listBuilderCommon, rxjs, operators, i11) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@skyux/core'), require('@skyux/forms'), require('@skyux/indicators'), require('@skyux/layout'), require('@skyux/popovers'), require('ng2-dragula'), require('@skyux/i18n'), require('@skyux/list-builder-common'), require('rxjs'), require('rxjs/operators')) :
+    typeof define === 'function' && define.amd ? define('@skyux/grids', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@skyux/core', '@skyux/forms', '@skyux/indicators', '@skyux/layout', '@skyux/popovers', 'ng2-dragula', '@skyux/i18n', '@skyux/list-builder-common', 'rxjs', 'rxjs/operators'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux.grids = {}), global.ng.common, global.ng.core, global.ng.forms, global.i1, global.i5, global.i4, global.i7, global.i9, global.i2, global.i11, global.listBuilderCommon, global.rxjs, global.rxjs.operators));
+})(this, (function (exports, i8, i0, i10, i1, i5, i4, i7, i9, i2, i11, listBuilderCommon, rxjs, operators) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -22,17 +22,238 @@
         return Object.freeze(n);
     }
 
-    var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
     var i8__namespace = /*#__PURE__*/_interopNamespace(i8);
+    var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
     var i10__namespace = /*#__PURE__*/_interopNamespace(i10);
-    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
     var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
     var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
     var i7__namespace = /*#__PURE__*/_interopNamespace(i7);
     var i9__namespace = /*#__PURE__*/_interopNamespace(i9);
+    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
     var i11__namespace = /*#__PURE__*/_interopNamespace(i11);
 
+    /**
+     * NOTICE: DO NOT MODIFY THIS FILE!
+     * The contents of this file were automatically generated by
+     * the 'ng generate @skyux/i18n:lib-resources-module modules/shared/skyux-grids' schematic.
+     * To update this file, simply rerun the command.
+     */
+    var RESOURCES = {
+        'EN-US': { skyux_grid_multiselect_select_row: { message: 'Select row' } },
+    };
+    var SkyuxGridsResourcesProvider = /** @class */ (function () {
+        function SkyuxGridsResourcesProvider() {
+        }
+        SkyuxGridsResourcesProvider.prototype.getString = function (localeInfo, name) {
+            return i11.getLibStringForLocale(RESOURCES, localeInfo.locale, name);
+        };
+        return SkyuxGridsResourcesProvider;
+    }());
+    /**
+     * Import into any component library module that needs to use resource strings.
+     */
+    var SkyuxGridsResourcesModule = /** @class */ (function () {
+        function SkyuxGridsResourcesModule() {
+        }
+        return SkyuxGridsResourcesModule;
+    }());
+    SkyuxGridsResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyuxGridsResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    SkyuxGridsResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyuxGridsResourcesModule, exports: [i11.SkyI18nModule] });
+    SkyuxGridsResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyuxGridsResourcesModule, providers: [
+            {
+                provide: i11.SKY_LIB_RESOURCES_PROVIDERS,
+                useClass: SkyuxGridsResourcesProvider,
+                multi: true,
+            },
+        ], imports: [i11.SkyI18nModule] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyuxGridsResourcesModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        exports: [i11.SkyI18nModule],
+                        providers: [
+                            {
+                                provide: i11.SKY_LIB_RESOURCES_PROVIDERS,
+                                useClass: SkyuxGridsResourcesProvider,
+                                multi: true,
+                            },
+                        ],
+                    }]
+            }] });
+
+    /**
+     * @internal
+     */
+    var SkyGridCellComponent = /** @class */ (function () {
+        function SkyGridCellComponent() {
+        }
+        SkyGridCellComponent.prototype.ngOnInit = function () {
+            this.container.createEmbeddedView(this.template, this);
+        };
+        Object.defineProperty(SkyGridCellComponent.prototype, "row", {
+            get: function () {
+                return this.item.data;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SkyGridCellComponent.prototype, "value", {
+            get: function () {
+                if (this.item.data && (this.fieldSelector || this.columnId)) {
+                    return listBuilderCommon.getData(this.item.data, this.fieldSelector || this.columnId);
+                }
+                return undefined;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return SkyGridCellComponent;
+    }());
+    SkyGridCellComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyGridCellComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyGridCellComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyGridCellComponent, selector: "sky-grid-cell", inputs: { item: "item", columnId: "columnId", template: "template", fieldSelector: "fieldSelector" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["cell"], descendants: true, read: i0.ViewContainerRef, static: true }], ngImport: i0__namespace, template: '<ng-template #cell></ng-template>', isInline: true, styles: [":host{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:8px;min-height:35px}\n"], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyGridCellComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'sky-grid-cell',
+                        template: '<ng-template #cell></ng-template>',
+                        styles: [":host{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:8px;min-height:35px}\n"],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], propDecorators: { item: [{
+                    type: i0.Input
+                }], columnId: [{
+                    type: i0.Input
+                }], template: [{
+                    type: i0.Input
+                }], fieldSelector: [{
+                    type: i0.Input
+                }], container: [{
+                    type: i0.ViewChild,
+                    args: ['cell', {
+                            read: i0.ViewContainerRef,
+                            static: true,
+                        }]
+                }] } });
+
+    /**
+     * Specifies the column information.
+     */
+    var SkyGridColumnComponent = /** @class */ (function () {
+        function SkyGridColumnComponent() {
+            /**
+             * Specifies the horizontal alignment of the column's data and header.
+             * Options include: `"left"`, `"center"`, and `"right"`.
+             * @default "left"
+             */
+            this.alignment = 'left';
+            /**
+             * Indicates whether the column sorts the grid when users click the column header.
+             * @default true
+             */
+            this.isSortable = true;
+            /**
+             * Specifies a search function to apply for the specific column. By default,
+             * the column executes a string compare on the column data.
+             * @default (value, searchText) => value.toString().toLowerCase().indexOf(searchText) !== -1
+             */
+            // eslint-disable-next-line @angular-eslint/no-input-rename
+            this.searchFunction = this.search;
+            this.descriptionChanges = new i0.EventEmitter();
+            this.descriptionModelChanges = new i0.EventEmitter();
+            this.headingChanges = new i0.EventEmitter();
+            this.headingModelChanges = new i0.EventEmitter();
+            this.inlineHelpPopoverModelChanges = new i0.EventEmitter();
+        }
+        SkyGridColumnComponent.prototype.ngOnChanges = function (changes) {
+            if (changes.heading && changes.heading.firstChange === false) {
+                this.headingChanges.emit(this.heading);
+                this.headingModelChanges.emit({
+                    value: this.heading,
+                    id: this.id,
+                    field: this.field,
+                });
+            }
+            if (changes.description && changes.description.firstChange === false) {
+                this.descriptionChanges.emit(this.description);
+                this.descriptionModelChanges.emit({
+                    value: this.description,
+                    id: this.id,
+                    field: this.field,
+                });
+            }
+            if (changes.inlineHelpPopover &&
+                changes.inlineHelpPopover.firstChange === false) {
+                this.inlineHelpPopoverModelChanges.emit({
+                    value: this.inlineHelpPopover,
+                    id: this.id,
+                    field: this.field,
+                });
+            }
+        };
+        Object.defineProperty(SkyGridColumnComponent.prototype, "template", {
+            get: function () {
+                if (this.templates.length > 0) {
+                    return this.templates.first;
+                }
+                return this.templateInput;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        SkyGridColumnComponent.prototype.search = function (value, searchText) {
+            /* tslint:disable:no-null-keyword */
+            if (value !== undefined && value !== null) {
+                return value.toString().toLowerCase().indexOf(searchText) !== -1;
+            }
+            /* tslint:enable */
+            return false;
+        };
+        return SkyGridColumnComponent;
+    }());
+    SkyGridColumnComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyGridColumnComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyGridColumnComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyGridColumnComponent, selector: "sky-grid-column", inputs: { alignment: "alignment", description: "description", excludeFromHighlighting: "excludeFromHighlighting", field: "field", heading: "heading", hidden: "hidden", id: "id", inlineHelpPopover: "inlineHelpPopover", isSortable: "isSortable", locked: "locked", searchFunction: ["search", "searchFunction"], type: "type", templateInput: ["template", "templateInput"], width: "width" }, queries: [{ propertyName: "templates", predicate: i0.TemplateRef }], usesOnChanges: true, ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyGridColumnComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'sky-grid-column',
+                        template: '<ng-content></ng-content>',
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], propDecorators: { alignment: [{
+                    type: i0.Input
+                }], description: [{
+                    type: i0.Input
+                }], excludeFromHighlighting: [{
+                    type: i0.Input
+                }], field: [{
+                    type: i0.Input
+                }], heading: [{
+                    type: i0.Input
+                }], hidden: [{
+                    type: i0.Input
+                }], id: [{
+                    type: i0.Input
+                }], inlineHelpPopover: [{
+                    type: i0.Input
+                }], isSortable: [{
+                    type: i0.Input
+                }], locked: [{
+                    type: i0.Input
+                }], searchFunction: [{
+                    type: i0.Input,
+                    args: ['search']
+                }], type: [{
+                    type: i0.Input
+                }], templateInput: [{
+                    type: i0.Input,
+                    args: ['template']
+                }], width: [{
+                    type: i0.Input
+                }], templates: [{
+                    type: i0.ContentChildren,
+                    args: [i0.TemplateRef]
+                }] } });
+
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
 
@@ -453,125 +674,6 @@
                 type: i0.Injectable
             }], ctorParameters: function () { return [{ type: i0__namespace.RendererFactory2 }]; } });
 
-    /**
-     * Specifies the column information.
-     */
-    var SkyGridColumnComponent = /** @class */ (function () {
-        function SkyGridColumnComponent() {
-            /**
-             * Specifies the horizontal alignment of the column's data and header.
-             * Options include: `"left"`, `"center"`, and `"right"`.
-             * @default "left"
-             */
-            this.alignment = 'left';
-            /**
-             * Indicates whether the column sorts the grid when users click the column header.
-             * @default true
-             */
-            this.isSortable = true;
-            /**
-             * Specifies a search function to apply for the specific column. By default,
-             * the column executes a string compare on the column data.
-             * @default (value, searchText) => value.toString().toLowerCase().indexOf(searchText) !== -1
-             */
-            // eslint-disable-next-line @angular-eslint/no-input-rename
-            this.searchFunction = this.search;
-            this.descriptionChanges = new i0.EventEmitter();
-            this.descriptionModelChanges = new i0.EventEmitter();
-            this.headingChanges = new i0.EventEmitter();
-            this.headingModelChanges = new i0.EventEmitter();
-            this.inlineHelpPopoverModelChanges = new i0.EventEmitter();
-        }
-        SkyGridColumnComponent.prototype.ngOnChanges = function (changes) {
-            if (changes.heading && changes.heading.firstChange === false) {
-                this.headingChanges.emit(this.heading);
-                this.headingModelChanges.emit({
-                    value: this.heading,
-                    id: this.id,
-                    field: this.field,
-                });
-            }
-            if (changes.description && changes.description.firstChange === false) {
-                this.descriptionChanges.emit(this.description);
-                this.descriptionModelChanges.emit({
-                    value: this.description,
-                    id: this.id,
-                    field: this.field,
-                });
-            }
-            if (changes.inlineHelpPopover &&
-                changes.inlineHelpPopover.firstChange === false) {
-                this.inlineHelpPopoverModelChanges.emit({
-                    value: this.inlineHelpPopover,
-                    id: this.id,
-                    field: this.field,
-                });
-            }
-        };
-        Object.defineProperty(SkyGridColumnComponent.prototype, "template", {
-            get: function () {
-                if (this.templates.length > 0) {
-                    return this.templates.first;
-                }
-                return this.templateInput;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        SkyGridColumnComponent.prototype.search = function (value, searchText) {
-            /* tslint:disable:no-null-keyword */
-            if (value !== undefined && value !== null) {
-                return value.toString().toLowerCase().indexOf(searchText) !== -1;
-            }
-            /* tslint:enable */
-            return false;
-        };
-        return SkyGridColumnComponent;
-    }());
-    SkyGridColumnComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyGridColumnComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyGridColumnComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyGridColumnComponent, selector: "sky-grid-column", inputs: { alignment: "alignment", description: "description", excludeFromHighlighting: "excludeFromHighlighting", field: "field", heading: "heading", hidden: "hidden", id: "id", inlineHelpPopover: "inlineHelpPopover", isSortable: "isSortable", locked: "locked", searchFunction: ["search", "searchFunction"], type: "type", templateInput: ["template", "templateInput"], width: "width" }, queries: [{ propertyName: "templates", predicate: i0.TemplateRef }], usesOnChanges: true, ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyGridColumnComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-grid-column',
-                        template: '<ng-content></ng-content>',
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], propDecorators: { alignment: [{
-                    type: i0.Input
-                }], description: [{
-                    type: i0.Input
-                }], excludeFromHighlighting: [{
-                    type: i0.Input
-                }], field: [{
-                    type: i0.Input
-                }], heading: [{
-                    type: i0.Input
-                }], hidden: [{
-                    type: i0.Input
-                }], id: [{
-                    type: i0.Input
-                }], inlineHelpPopover: [{
-                    type: i0.Input
-                }], isSortable: [{
-                    type: i0.Input
-                }], locked: [{
-                    type: i0.Input
-                }], searchFunction: [{
-                    type: i0.Input,
-                    args: ['search']
-                }], type: [{
-                    type: i0.Input
-                }], templateInput: [{
-                    type: i0.Input,
-                    args: ['template']
-                }], width: [{
-                    type: i0.Input
-                }], templates: [{
-                    type: i0.ContentChildren,
-                    args: [i0.TemplateRef]
-                }] } });
-
     /**
      * @internal
      */
@@ -630,60 +732,6 @@
         SkyGridSelectedRowsSource[SkyGridSelectedRowsSource["SelectedRowIdsChange"] = 4] = "SelectedRowIdsChange";
     })(exports.SkyGridSelectedRowsSource || (exports.SkyGridSelectedRowsSource = {}));
 
-    /**
-     * @internal
-     */
-    var SkyGridCellComponent = /** @class */ (function () {
-        function SkyGridCellComponent() {
-        }
-        SkyGridCellComponent.prototype.ngOnInit = function () {
-            this.container.createEmbeddedView(this.template, this);
-        };
-        Object.defineProperty(SkyGridCellComponent.prototype, "row", {
-            get: function () {
-                return this.item.data;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyGridCellComponent.prototype, "value", {
-            get: function () {
-                if (this.item.data && (this.fieldSelector || this.columnId)) {
-                    return listBuilderCommon.getData(this.item.data, this.fieldSelector || this.columnId);
-                }
-                return undefined;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        return SkyGridCellComponent;
-    }());
-    SkyGridCellComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyGridCellComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyGridCellComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyGridCellComponent, selector: "sky-grid-cell", inputs: { item: "item", columnId: "columnId", template: "template", fieldSelector: "fieldSelector" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["cell"], descendants: true, read: i0.ViewContainerRef, static: true }], ngImport: i0__namespace, template: '<ng-template #cell></ng-template>', isInline: true, styles: [":host{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:8px;min-height:35px}\n"], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyGridCellComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-grid-cell',
-                        template: '<ng-template #cell></ng-template>',
-                        styles: [":host{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:8px;min-height:35px}\n"],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], propDecorators: { item: [{
-                    type: i0.Input
-                }], columnId: [{
-                    type: i0.Input
-                }], template: [{
-                    type: i0.Input
-                }], fieldSelector: [{
-                    type: i0.Input
-                }], container: [{
-                    type: i0.ViewChild,
-                    args: ['cell', {
-                            read: i0.ViewContainerRef,
-                            static: true,
-                        }]
-                }] } });
-
     var nextId = 0;
     var SkyGridComponent = /** @class */ (function () {
         function SkyGridComponent(affixService, changeDetector, dragulaService, gridAdapter, overlayService, skyWindow, uiConfigService) {
@@ -767,6 +815,26 @@
                 descending: false,
             });
         }
+        Object.defineProperty(SkyGridComponent.prototype, "columns", {
+            get: function () {
+                return this._columns;
+            },
+            /**
+             * Specifies columns and column properties for the grid.
+             */
+            set: function (newColumns) {
+                var oldColumns = this.columns;
+                this._columns = newColumns;
+                if (oldColumns) {
+                    this.transferColumnWidths(oldColumns, this.columns);
+                    this.isResized = false;
+                    this.setDisplayedColumns(true);
+                }
+                this.changeDetector.markForCheck();
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(SkyGridComponent.prototype, "selectedColumnIds", {
             get: function () {
                 return this._selectedColumnIds;
@@ -1307,23 +1375,27 @@
         SkyGridComponent.prototype.setDisplayedColumns = function (respectHidden) {
             var _this = this;
             if (respectHidden === void 0) { respectHidden = false; }
-            if (this.selectedColumnIds !== undefined) {
-                // setup displayed columns
-                this.displayedColumns = this.selectedColumnIds
-                    .filter(function (columnId) {
-                    return _this.columns.find(function (column) { return column.id === columnId; });
-                })
-                    .map(function (columnId) {
-                    return _this.columns.filter(function (column) { return column.id === columnId; })[0];
-                });
-            }
-            else if (respectHidden) {
-                this.displayedColumns = this.columns.filter(function (column) {
-                    return !column.hidden;
-                });
-            }
-            else {
-                this.displayedColumns = this.columns;
+            /* sanity check */
+            /* istanbul ignore else */
+            if (this.columns) {
+                if (this.selectedColumnIds !== undefined) {
+                    // setup displayed columns
+                    this.displayedColumns = this.selectedColumnIds
+                        .filter(function (columnId) {
+                        return _this.columns.find(function (column) { return column.id === columnId; });
+                    })
+                        .map(function (columnId) {
+                        return _this.columns.filter(function (column) { return column.id === columnId; })[0];
+                    });
+                }
+                else if (respectHidden) {
+                    this.displayedColumns = this.columns.filter(function (column) {
+                        return !column.hidden;
+                    });
+                }
+                else {
+                    this.displayedColumns = this.columns;
+                }
             }
         };
         SkyGridComponent.prototype.transformData = function () {
@@ -1377,8 +1449,6 @@
         SkyGridComponent.prototype.updateColumns = function () {
             var _this = this;
             this.getColumnsFromComponent();
-            this.setDisplayedColumns(true);
-            this.changeDetector.markForCheck();
             // This set timeout is necessary to ensure the columns have rendered in the grid
             setTimeout(function () {
                 _this.checkUserColumnWidthsForScroll();
@@ -1434,6 +1504,35 @@
             }
             this.changeDetector.detectChanges();
         };
+        SkyGridComponent.prototype.transferColumnWidths = function (oldColumns, newColumns) {
+            var e_1, _a;
+            /* sanity check */
+            /* istanbul ignore else */
+            if (oldColumns && newColumns) {
+                var _loop_1 = function (oldColumn) {
+                    if (oldColumn.width) {
+                        var matchingColumn = newColumns.find(function (newColumn) { return oldColumn.id === newColumn.id; });
+                        if (matchingColumn && !matchingColumn.width) {
+                            matchingColumn.width = oldColumn.width;
+                        }
+                    }
+                };
+                try {
+                    for (var oldColumns_1 = __values(oldColumns), oldColumns_1_1 = oldColumns_1.next(); !oldColumns_1_1.done; oldColumns_1_1 = oldColumns_1.next()) {
+                        var oldColumn = oldColumns_1_1.value;
+                        _loop_1(oldColumn);
+                    }
+                }
+                catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                finally {
+                    try {
+                        if (oldColumns_1_1 && !oldColumns_1_1.done && (_a = oldColumns_1.return)) _a.call(oldColumns_1);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                }
+            }
+            this.changeDetector.markForCheck();
+        };
         SkyGridComponent.prototype.getColumnWidthModelChange = function () {
             var columnWidthModelChange = new Array();
             this.columns.forEach(function (column) {
@@ -1593,12 +1692,12 @@
         return SkyGridComponent;
     }());
     SkyGridComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyGridComponent, deps: [{ token: i1__namespace.SkyAffixService }, { token: i0__namespace.ChangeDetectorRef }, { token: i2__namespace.DragulaService }, { token: SkyGridAdapterService }, { token: i1__namespace.SkyOverlayService }, { token: i1__namespace.SkyAppWindowRef }, { token: i1__namespace.SkyUIConfigService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyGridComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyGridComponent, selector: "sky-grid", inputs: { columns: "columns", data: "data", enableMultiselect: "enableMultiselect", fit: "fit", hasToolbar: "hasToolbar", height: "height", highlightText: "highlightText", messageStream: "messageStream", multiselectRowId: "multiselectRowId", rowHighlightedId: "rowHighlightedId", selectedColumnIds: "selectedColumnIds", selectedRowIds: "selectedRowIds", settingsKey: "settingsKey", sortField: "sortField", width: "width" }, outputs: { columnWidthChange: "columnWidthChange", multiselectSelectionChange: "multiselectSelectionChange", rowDeleteCancel: "rowDeleteCancel", rowDeleteConfirm: "rowDeleteConfirm", selectedColumnIdsChange: "selectedColumnIdsChange", sortFieldChange: "sortFieldChange" }, host: { listeners: { "window:resize": "onWindowResize()" } }, providers: [SkyGridAdapterService], queries: [{ propertyName: "columnComponents", predicate: SkyGridColumnComponent }], viewQueries: [{ propertyName: "inlineDeleteTemplateRef", first: true, predicate: ["inlineDeleteTemplateRef"], descendants: true, read: i0.TemplateRef }, { propertyName: "tableContainerElementRef", first: true, predicate: ["gridContainer"], descendants: true }, { propertyName: "tableElementRef", first: true, predicate: ["gridTable"], descendants: true }, { propertyName: "topScrollContainerElementRef", first: true, predicate: ["topScrollContainer"], descendants: true }, { propertyName: "resizeBar", first: true, predicate: ["resizeBar"], descendants: true }, { propertyName: "columnElementRefs", predicate: ["gridCol"], descendants: true }, { propertyName: "columnRangeInputElementRefs", predicate: ["colSizeRange"], descendants: true }, { propertyName: "inlineDeleteRefs", predicate: ["inlineDeleteRef"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"sky-grid\">\n  <div\n    *ngIf=\"showTopScroll\"\n    class=\"sky-grid-top-scroll-container\"\n    (scroll)=\"onTopScroll($event)\"\n    #topScrollContainer\n  >\n    <div\n      class=\"sky-grid-top-scroll\"\n      [style.width.px]=\"getTopScrollWidth()\"\n    ></div>\n  </div>\n  <div\n    class=\"sky-grid-table-container\"\n    [style.height.px]=\"height\"\n    [style.width.px]=\"width\"\n    (scroll)=\"onGridScroll($event)\"\n    #gridContainer\n  >\n    <table class=\"sky-grid-table\" [ngClass]=\"getTableClassNames()\" #gridTable>\n      <thead>\n        <tr dragula=\"sky-grid-heading\">\n          <th\n            *ngIf=\"enableMultiselect\"\n            class=\"\n              sky-grid-heading sky-grid-multiselect-cell sky-grid-header-locked\n            \"\n            scope=\"col\"\n            [style.max-width.px]=\"minColWidth\"\n            [style.width.px]=\"minColWidth\"\n          >\n            <span class=\"screen-reader-only\">\n              {{ 'skyux_grid_multiselect_select_row' | skyLibResources }}\n            </span>\n          </th>\n          <th\n            *ngFor=\"\n              let column of displayedColumns;\n              let last = last;\n              let i = index\n            \"\n            class=\"sky-grid-heading sky-field-label\"\n            scope=\"col\"\n            [attr.sky-cmp-index]=\"i\"\n            [attr.sky-cmp-id]=\"column.id || column.field\"\n            [attr.aria-sort]=\"getAriaSortDirection(column) | async\"\n            [id]=\"'sky-grid-' + gridId + '-column-' + i\"\n            [ngClass]=\"'sky-grid-column-alignment-' + column.alignment\"\n            [style.max-width.px]=\"column.width\"\n            [style.width.px]=\"column.width\"\n            [tabIndex]=\"column.isSortable ? 0 : -1\"\n            (mouseup)=\"sortByColumn(column)\"\n            (keydown)=\"onKeydown($event, column)\"\n            (touchmove)=\"onTouchMove($event)\"\n            #gridCol\n          >\n            <div\n              class=\"overflow\"\n              [ngClass]=\"getTableHeaderClassNames(column)\"\n              [style.max-width.px]=\"column.width - 1\"\n              [style.width.px]=\"column.width - 1\"\n            >\n              <span\n                *ngIf=\"(getCaretVisibility(column.field) | async) === 'hidden'\"\n                class=\"sky-grid-header-caret-hidden-spacing\"\n              ></span>\n              <!-- The no spacing here is intentional to avoid extra spaces due to these being inline elements -->\n              <span class=\"sky-grid-header-text\">{{\n                column.heading?.trim()\n              }}</span>\n              <sky-icon\n                class=\"sky-grid-heading-sort\"\n                [ngClass]=\"\n                  'sky-grid-heading-sort-' +\n                  (getCaretVisibility(column.field) | async)\n                \"\n                [icon]=\"getCaretIconNames(column)\"\n              >\n              </sky-icon>\n              <sky-help-inline\n                *ngIf=\"column.inlineHelpPopover\"\n                [ngClass]=\"{\n                  'sky-grid-help-inline-sort-hidden':\n                    getHelpInlineClass(column.field) | async\n                }\"\n                [skyPopover]=\"column.inlineHelpPopover\"\n                (keydown.enter)=\"$event.stopPropagation()\"\n                (keydown.space)=\"$event.stopPropagation()\"\n                (mousedown)=\"$event.stopPropagation()\"\n                (mouseup)=\"$event.stopPropagation()\"\n              >\n              </sky-help-inline>\n            </div>\n            <span\n              *ngIf=\"(fit === 'width' && !last) || fit === 'scroll'\"\n              aria-hidden=\"true\"\n              class=\"sky-grid-resize-handle\"\n              tabindex=\"-1\"\n              [attr.sky-cmp-index]=\"i\"\n              (mousedown)=\"onResizeColumnStart($event)\"\n              (touchstart)=\"onResizeColumnStart($event)\"\n            >\n            </span>\n            <input\n              aria-label=\"Width of column\"\n              class=\"sky-grid-column-input-aria-only\"\n              role=\"slider\"\n              type=\"range\"\n              [attr.aria-controls]=\"'sky-grid-' + gridId + '-column-' + i\"\n              [attr.aria-valuemin]=\"minColWidth\"\n              [attr.aria-valuemax]=\"maxColWidth\"\n              [attr.aria-valuenow]=\"column.width\"\n              [attr.sky-cmp-index]=\"i\"\n              [min]=\"minColWidth\"\n              [max]=\"maxColWidth\"\n              [step]=\"columnResizeStep\"\n              [(ngModel)]=\"column.width\"\n              (blur)=\"onResizeHandleBlur($event)\"\n              (focus)=\"onResizeHandleFocus($event)\"\n              (keydown)=\"onKeydownResizeCol($event)\"\n              (change)=\"onInputChangeResizeCol($event)\"\n              #colSizeRange\n            />\n          </th>\n        </tr>\n      </thead>\n      <tbody class=\"sky-grid-tbody\">\n        <tr\n          class=\"sky-grid-row\"\n          *ngFor=\"let item of items; let i = index\"\n          [attr.aria-current]=\"isRowHighlighted(item.id) ? true : null\"\n          [attr.aria-selected]=\"item.isSelected\"\n          [attr.sky-cmp-id]=\"item.id\"\n          [ngClass]=\"{\n            'sky-grid-multiselect-selected-row': item.isSelected,\n            'sky-grid-multiselect-row': enableMultiselect,\n            'sky-grid-row-highlight': isRowHighlighted(item.id)\n          }\"\n          (click)=\"onRowClick($event, item)\"\n        >\n          <td\n            *ngIf=\"enableMultiselect\"\n            class=\"sky-grid-multiselect-cell sky-grid-header-locked\"\n          >\n            <div\n              [style.max-width.px]=\"minColWidth\"\n              [style.width.px]=\"minColWidth\"\n            >\n              <sky-checkbox\n                [label]=\"'skyux_grid_multiselect_select_row' | skyLibResources\"\n                (change)=\"onMultiselectCheckboxChange()\"\n                [(ngModel)]=\"item.isSelected\"\n              >\n              </sky-checkbox>\n            </div>\n          </td>\n          <td\n            *ngFor=\"\n              let column of displayedColumns;\n              let last = last;\n              let i = index\n            \"\n            class=\"sky-grid-cell\"\n            [ngClass]=\"'sky-grid-column-alignment-' + column.alignment\"\n            [style.max-width.px]=\"column.width\"\n            [style.width.px]=\"column.width\"\n          >\n            <sky-grid-cell\n              [skyHighlight]=\"\n                !column.excludeFromHighlighting ? highlightText : undefined\n              \"\n              [template]=\"column.template || defaultCellTemplate\"\n              [fieldSelector]=\"column.field\"\n              [item]=\"item\"\n              [columnId]=\"column.id\"\n              [attr.sky-cmp-id]=\"column.id || column.field\"\n            >\n            </sky-grid-cell>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n    <div\n      *ngIf=\"showResizeBar\"\n      aria-hidden=\"true\"\n      id=\"sky-grid-resize-bar\"\n      tabindex=\"-1\"\n      #resizeBar\n    ></div>\n  </div>\n</div>\n\n<ng-template #defaultCellTemplate let-row=\"row\" let-value=\"value\">{{\n  value\n}}</ng-template>\n\n<ng-template let-item #inlineDeleteTemplateRef>\n  <div\n    [id]=\"'row-delete-ref-' + item.id\"\n    [ngStyle]=\"{\n      height: getRowHeight(0),\n      position: 'fixed',\n      width: tableWidth + 'px'\n    }\"\n    #inlineDeleteRef\n  >\n    <sky-inline-delete\n      [pending]=\"getRowDeleteItem(item.id).pending\"\n      (cancelTriggered)=\"cancelRowDelete(item.id)\"\n      (deleteTriggered)=\"confirmRowDelete(item.id)\"\n    ></sky-inline-delete>\n  </div>\n</ng-template>\n", styles: [".sky-grid{position:relative;display:block}.sky-grid-table-container{overflow:auto}.sky-grid-table{position:relative;table-layout:fixed;border-collapse:collapse;margin:0;font-size:15px;min-width:100%}.sky-grid-table.sky-grid-fit{max-width:100%;width:100%}.sky-grid-tbody{background-color:#fff}.sky-grid-row{border-bottom:1px dotted #cdcfd2}.sky-grid-row:nth-child(odd){background-color:#fbfbfb}.sky-grid-row.sky-grid-row-highlight{border-top:1px solid #0974a1;box-shadow:0 0 0 3px inset #0974a1}.sky-grid-row .sky-grid-cell{padding:0;min-width:10px}.sky-grid-heading{position:relative;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;border-right-width:0px;padding:0;cursor:pointer;background-color:#fff;overflow:visible;background-clip:padding-box;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;user-select:none}.sky-grid-heading:first-child{border-left:1px solid transparent}.sky-grid-heading.sky-grid-header-dragging{background-color:#eeeeef}.sky-grid-heading.sky-grid-column-alignment-left .sky-grid-heading-sort,.sky-grid-heading.sky-grid-column-alignment-center .sky-grid-heading-sort{width:14px}.sky-grid-heading.sky-grid-column-alignment-left .sky-grid-help-inline-sort-hidden,.sky-grid-heading.sky-grid-column-alignment-center .sky-grid-help-inline-sort-hidden{margin-left:-14px;margin-right:14px}.sky-grid-heading.sky-grid-column-alignment-right .sky-grid-header-caret-hidden-spacing{padding-left:14px}.sky-grid-heading.sky-grid-column-alignment-right .sky-grid-heading-sort-visible{width:14px}.sky-grid-heading div{padding:8px}.sky-grid-heading .overflow{text-overflow:ellipsis;white-space:nowrap;position:relative;z-index:1;overflow:hidden;min-width:100%}.sky-grid-heading .sky-grid-column-input-aria-only{-webkit-appearance:none;-moz-appearance:none;height:100%;width:5px;position:absolute;display:block;top:0;bottom:0;right:0}.sky-grid-heading .sky-grid-column-input-aria-only::-moz-range-track{background:transparent}.sky-grid-heading .sky-grid-column-input-aria-only::-moz-range-thumb{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-grid-heading .sky-grid-column-input-aria-only::-ms-thumb{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-grid-heading .sky-grid-column-input-aria-only::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-grid-heading .sky-grid-column-input-aria-only:focus{background-color:#00b4f1}.sky-grid-column-alignment-left{text-align:left}.sky-grid-column-alignment-center{text-align:center}.sky-grid-column-alignment-right{text-align:right}.sky-grid-multiselect-cell{padding:0;text-align:center}.sky-grid-multiselect-cell ::ng-deep .sky-switch-control{margin:0 auto}th.sky-grid-multiselect-cell{cursor:default}th.sky-grid-multiselect-cell .screen-reader-only{width:0;height:0;padding:0;opacity:0;position:absolute;margin:-1px;border:0;overflow:hidden;clip:rect(0,0,0,0);outline:none;white-space:nowrap}@-moz-document url-prefix(){.sky-grid-multiselect-row td{border-left:0px solid transparent;border-right:0px solid transparent}}.sky-grid-multiselect-row:hover{background-color:#e9e4f1}.sky-grid-multiselect-row:hover:nth-child(odd){background:#e9e4f1}.sky-grid-multiselect-selected-row{background:#f1eef6;border-top:1px solid #dadbf6;border-bottom:1px solid #dadbf6}.sky-grid-multiselect-selected-row:nth-child(odd){background:#f1eef6}.sky-grid-has-toolbar .sky-grid-heading{border-top-width:0px}.sky-grid-heading-sort.sky-grid-heading-sort-hidden{visibility:hidden}.sky-grid-heading-sort.sky-grid-heading-sort-visible{visibility:visible;padding-left:5px}.sky-grid-resize-handle{position:absolute;right:0;top:0;bottom:0;width:30px;z-index:2;min-height:20px;height:100%!important;vertical-align:middle;cursor:col-resize}.sky-grid-resize-handle:hover:after{background-color:#00b4f1}.sky-grid-resize-handle:after{position:absolute;right:0;top:0;bottom:0;width:5px;height:100%;content:\"\"}#sky-grid-resize-bar{position:absolute;top:0;left:0;z-index:99;height:100%;width:5px;background:#00b4f1;opacity:.6}tr{position:relative}.sky-grid-top-scroll-container{overflow:auto}.sky-grid-top-scroll{height:1px}\n"], components: [{ type: i4__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: i4__namespace.λ3, selector: "sky-help-inline", outputs: ["actionClick"] }, { type: i5__namespace.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "required"], outputs: ["change", "checkedChange", "disabledChange"] }, { type: SkyGridCellComponent, selector: "sky-grid-cell", inputs: ["item", "columnId", "template", "fieldSelector"] }, { type: i7__namespace.λ8, selector: "sky-inline-delete", inputs: ["pending"], outputs: ["cancelTriggered", "deleteTriggered"] }], directives: [{ type: i8__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.DragulaDirective, selector: "[dragula]", inputs: ["dragula", "dragulaModel", "dragulaOptions"] }, { type: i8__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9__namespace.λ7, selector: "[skyPopover]", inputs: ["skyPopover", "skyPopoverAlignment", "skyPopoverMessageStream", "skyPopoverPlacement", "skyPopoverTrigger"] }, { type: i10__namespace.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { type: i10__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i10__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i10__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4__namespace.λ11, selector: "[skyHighlight]", inputs: ["skyHighlight"] }, { type: i8__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "skyLibResources": i11__namespace.SkyLibResourcesPipe, "async": i8__namespace.AsyncPipe }, viewProviders: [i2.DragulaService], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    SkyGridComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyGridComponent, selector: "sky-grid", inputs: { columns: "columns", data: "data", enableMultiselect: "enableMultiselect", fit: "fit", hasToolbar: "hasToolbar", height: "height", highlightText: "highlightText", messageStream: "messageStream", multiselectRowId: "multiselectRowId", rowHighlightedId: "rowHighlightedId", selectedColumnIds: "selectedColumnIds", selectedRowIds: "selectedRowIds", settingsKey: "settingsKey", sortField: "sortField", width: "width" }, outputs: { columnWidthChange: "columnWidthChange", multiselectSelectionChange: "multiselectSelectionChange", rowDeleteCancel: "rowDeleteCancel", rowDeleteConfirm: "rowDeleteConfirm", selectedColumnIdsChange: "selectedColumnIdsChange", sortFieldChange: "sortFieldChange" }, host: { listeners: { "window:resize": "onWindowResize()" } }, providers: [SkyGridAdapterService], queries: [{ propertyName: "columnComponents", predicate: SkyGridColumnComponent }], viewQueries: [{ propertyName: "inlineDeleteTemplateRef", first: true, predicate: ["inlineDeleteTemplateRef"], descendants: true, read: i0.TemplateRef }, { propertyName: "tableContainerElementRef", first: true, predicate: ["gridContainer"], descendants: true }, { propertyName: "tableElementRef", first: true, predicate: ["gridTable"], descendants: true }, { propertyName: "topScrollContainerElementRef", first: true, predicate: ["topScrollContainer"], descendants: true }, { propertyName: "resizeBar", first: true, predicate: ["resizeBar"], descendants: true }, { propertyName: "columnElementRefs", predicate: ["gridCol"], descendants: true }, { propertyName: "columnRangeInputElementRefs", predicate: ["colSizeRange"], descendants: true }, { propertyName: "inlineDeleteRefs", predicate: ["inlineDeleteRef"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"sky-grid\">\n  <div\n    *ngIf=\"showTopScroll\"\n    class=\"sky-grid-top-scroll-container\"\n    (scroll)=\"onTopScroll($event)\"\n    #topScrollContainer\n  >\n    <div\n      class=\"sky-grid-top-scroll\"\n      [style.width.px]=\"getTopScrollWidth()\"\n    ></div>\n  </div>\n  <div\n    class=\"sky-grid-table-container\"\n    [style.height.px]=\"height\"\n    [style.width.px]=\"width\"\n    (scroll)=\"onGridScroll($event)\"\n    #gridContainer\n  >\n    <table class=\"sky-grid-table\" [ngClass]=\"getTableClassNames()\" #gridTable>\n      <thead>\n        <tr dragula=\"sky-grid-heading\">\n          <th\n            *ngIf=\"enableMultiselect\"\n            class=\"\n              sky-grid-heading sky-grid-multiselect-cell sky-grid-header-locked\n            \"\n            scope=\"col\"\n            [style.max-width.px]=\"minColWidth\"\n            [style.width.px]=\"minColWidth\"\n          >\n            <span class=\"screen-reader-only\">\n              {{ 'skyux_grid_multiselect_select_row' | skyLibResources }}\n            </span>\n          </th>\n          <th\n            *ngFor=\"\n              let column of displayedColumns;\n              let last = last;\n              let i = index\n            \"\n            class=\"sky-grid-heading sky-field-label\"\n            scope=\"col\"\n            [attr.sky-cmp-index]=\"i\"\n            [attr.sky-cmp-id]=\"column.id || column.field\"\n            [attr.aria-sort]=\"getAriaSortDirection(column) | async\"\n            [id]=\"'sky-grid-' + gridId + '-column-' + i\"\n            [ngClass]=\"'sky-grid-column-alignment-' + column.alignment\"\n            [style.max-width.px]=\"column.width\"\n            [style.width.px]=\"column.width\"\n            [tabIndex]=\"column.isSortable ? 0 : -1\"\n            (mouseup)=\"sortByColumn(column)\"\n            (keydown)=\"onKeydown($event, column)\"\n            (touchmove)=\"onTouchMove($event)\"\n            #gridCol\n          >\n            <div\n              class=\"overflow\"\n              [ngClass]=\"getTableHeaderClassNames(column)\"\n              [style.max-width.px]=\"column.width - 1\"\n              [style.width.px]=\"column.width - 1\"\n            >\n              <span\n                *ngIf=\"(getCaretVisibility(column.field) | async) === 'hidden'\"\n                class=\"sky-grid-header-caret-hidden-spacing\"\n              ></span>\n              <!-- The no spacing here is intentional to avoid extra spaces due to these being inline elements -->\n              <span class=\"sky-grid-header-text\">{{\n                column.heading?.trim()\n              }}</span>\n              <sky-icon\n                class=\"sky-grid-heading-sort\"\n                [ngClass]=\"\n                  'sky-grid-heading-sort-' +\n                  (getCaretVisibility(column.field) | async)\n                \"\n                [icon]=\"getCaretIconNames(column)\"\n              >\n              </sky-icon>\n              <sky-help-inline\n                *ngIf=\"column.inlineHelpPopover\"\n                [ngClass]=\"{\n                  'sky-grid-help-inline-sort-hidden':\n                    getHelpInlineClass(column.field) | async\n                }\"\n                [skyPopover]=\"column.inlineHelpPopover\"\n                (keydown.enter)=\"$event.stopPropagation()\"\n                (keydown.space)=\"$event.stopPropagation()\"\n                (mousedown)=\"$event.stopPropagation()\"\n                (mouseup)=\"$event.stopPropagation()\"\n              >\n              </sky-help-inline>\n            </div>\n            <span\n              *ngIf=\"(fit === 'width' && !last) || fit === 'scroll'\"\n              aria-hidden=\"true\"\n              class=\"sky-grid-resize-handle\"\n              tabindex=\"-1\"\n              [attr.sky-cmp-index]=\"i\"\n              (mousedown)=\"onResizeColumnStart($event)\"\n              (touchstart)=\"onResizeColumnStart($event)\"\n            >\n            </span>\n            <input\n              aria-label=\"Width of column\"\n              class=\"sky-grid-column-input-aria-only\"\n              role=\"slider\"\n              type=\"range\"\n              [attr.aria-controls]=\"'sky-grid-' + gridId + '-column-' + i\"\n              [attr.aria-valuemin]=\"minColWidth\"\n              [attr.aria-valuemax]=\"maxColWidth\"\n              [attr.aria-valuenow]=\"column.width\"\n              [attr.sky-cmp-index]=\"i\"\n              [min]=\"minColWidth\"\n              [max]=\"maxColWidth\"\n              [step]=\"columnResizeStep\"\n              [(ngModel)]=\"column.width\"\n              (blur)=\"onResizeHandleBlur($event)\"\n              (focus)=\"onResizeHandleFocus($event)\"\n              (keydown)=\"onKeydownResizeCol($event)\"\n              (change)=\"onInputChangeResizeCol($event)\"\n              #colSizeRange\n            />\n          </th>\n        </tr>\n      </thead>\n      <tbody class=\"sky-grid-tbody\">\n        <tr\n          class=\"sky-grid-row\"\n          *ngFor=\"let item of items; let i = index\"\n          [attr.aria-current]=\"isRowHighlighted(item.id) ? true : null\"\n          [attr.sky-cmp-id]=\"item.id\"\n          [ngClass]=\"{\n            'sky-grid-multiselect-selected-row': item.isSelected,\n            'sky-grid-multiselect-row': enableMultiselect,\n            'sky-grid-row-highlight': isRowHighlighted(item.id)\n          }\"\n          (click)=\"onRowClick($event, item)\"\n        >\n          <td\n            *ngIf=\"enableMultiselect\"\n            class=\"sky-grid-multiselect-cell sky-grid-header-locked\"\n          >\n            <div\n              [style.max-width.px]=\"minColWidth\"\n              [style.width.px]=\"minColWidth\"\n            >\n              <sky-checkbox\n                [label]=\"'skyux_grid_multiselect_select_row' | skyLibResources\"\n                (change)=\"onMultiselectCheckboxChange()\"\n                [(ngModel)]=\"item.isSelected\"\n              >\n              </sky-checkbox>\n            </div>\n          </td>\n          <td\n            *ngFor=\"\n              let column of displayedColumns;\n              let last = last;\n              let i = index\n            \"\n            class=\"sky-grid-cell\"\n            [ngClass]=\"'sky-grid-column-alignment-' + column.alignment\"\n            [style.max-width.px]=\"column.width\"\n            [style.width.px]=\"column.width\"\n          >\n            <sky-grid-cell\n              [skyHighlight]=\"\n                !column.excludeFromHighlighting ? highlightText : undefined\n              \"\n              [template]=\"column.template || defaultCellTemplate\"\n              [fieldSelector]=\"column.field\"\n              [item]=\"item\"\n              [columnId]=\"column.id\"\n              [attr.sky-cmp-id]=\"column.id || column.field\"\n            >\n            </sky-grid-cell>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n    <div\n      *ngIf=\"showResizeBar\"\n      aria-hidden=\"true\"\n      id=\"sky-grid-resize-bar\"\n      tabindex=\"-1\"\n      #resizeBar\n    ></div>\n  </div>\n</div>\n\n<ng-template #defaultCellTemplate let-row=\"row\" let-value=\"value\">{{\n  value\n}}</ng-template>\n\n<ng-template let-item #inlineDeleteTemplateRef>\n  <div\n    [id]=\"'row-delete-ref-' + item.id\"\n    [ngStyle]=\"{\n      height: getRowHeight(0),\n      position: 'fixed',\n      width: tableWidth + 'px'\n    }\"\n    #inlineDeleteRef\n  >\n    <sky-inline-delete\n      [pending]=\"getRowDeleteItem(item.id).pending\"\n      (cancelTriggered)=\"cancelRowDelete(item.id)\"\n      (deleteTriggered)=\"confirmRowDelete(item.id)\"\n    ></sky-inline-delete>\n  </div>\n</ng-template>\n", styles: [".sky-grid{position:relative;display:block}.sky-grid-table-container{overflow:auto}.sky-grid-table{position:relative;table-layout:fixed;border-collapse:collapse;margin:0;font-size:15px;min-width:100%}.sky-grid-table.sky-grid-fit{max-width:100%;width:100%}.sky-grid-tbody{background-color:#fff}.sky-grid-row{border-bottom:1px dotted #cdcfd2}.sky-grid-row:nth-child(odd){background-color:#fbfbfb}.sky-grid-row.sky-grid-row-highlight{border-top:1px solid #0974a1;box-shadow:0 0 0 3px inset #0974a1}.sky-grid-row .sky-grid-cell{padding:0;min-width:10px}.sky-grid-heading{position:relative;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;border-right-width:0px;padding:0;cursor:pointer;background-color:#fff;overflow:visible;background-clip:padding-box;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;user-select:none}.sky-grid-heading:first-child{border-left:1px solid transparent}.sky-grid-heading.sky-grid-header-dragging{background-color:#eeeeef}.sky-grid-heading.sky-grid-column-alignment-left .sky-grid-heading-sort,.sky-grid-heading.sky-grid-column-alignment-center .sky-grid-heading-sort{width:14px}.sky-grid-heading.sky-grid-column-alignment-left .sky-grid-help-inline-sort-hidden,.sky-grid-heading.sky-grid-column-alignment-center .sky-grid-help-inline-sort-hidden{margin-left:-14px;margin-right:14px}.sky-grid-heading.sky-grid-column-alignment-right .sky-grid-header-caret-hidden-spacing{padding-left:14px}.sky-grid-heading.sky-grid-column-alignment-right .sky-grid-heading-sort-visible{width:14px}.sky-grid-heading div{padding:8px}.sky-grid-heading .overflow{text-overflow:ellipsis;white-space:nowrap;position:relative;z-index:1;overflow:hidden;min-width:100%}.sky-grid-heading .sky-grid-column-input-aria-only{-webkit-appearance:none;-moz-appearance:none;height:100%;width:5px;position:absolute;display:block;top:0;bottom:0;right:0}.sky-grid-heading .sky-grid-column-input-aria-only::-moz-range-track{background:transparent}.sky-grid-heading .sky-grid-column-input-aria-only::-moz-range-thumb{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-grid-heading .sky-grid-column-input-aria-only::-ms-thumb{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-grid-heading .sky-grid-column-input-aria-only::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-grid-heading .sky-grid-column-input-aria-only:focus{background-color:#00b4f1}.sky-grid-column-alignment-left{text-align:left}.sky-grid-column-alignment-center{text-align:center}.sky-grid-column-alignment-right{text-align:right}.sky-grid-multiselect-cell{padding:0;text-align:center}.sky-grid-multiselect-cell ::ng-deep .sky-switch-control{margin:0 auto}th.sky-grid-multiselect-cell{cursor:default}th.sky-grid-multiselect-cell .screen-reader-only{width:0;height:0;padding:0;opacity:0;position:absolute;margin:-1px;border:0;overflow:hidden;clip:rect(0,0,0,0);outline:none;white-space:nowrap}@-moz-document url-prefix(){.sky-grid-multiselect-row td{border-left:0px solid transparent;border-right:0px solid transparent}}.sky-grid-multiselect-row:hover{background-color:#e9e4f1}.sky-grid-multiselect-row:hover:nth-child(odd){background:#e9e4f1}.sky-grid-multiselect-selected-row{background:#f1eef6;border-top:1px solid #dadbf6;border-bottom:1px solid #dadbf6}.sky-grid-multiselect-selected-row:nth-child(odd){background:#f1eef6}.sky-grid-has-toolbar .sky-grid-heading{border-top-width:0px}.sky-grid-heading-sort.sky-grid-heading-sort-hidden{visibility:hidden}.sky-grid-heading-sort.sky-grid-heading-sort-visible{visibility:visible;padding-left:5px}.sky-grid-resize-handle{position:absolute;right:0;top:0;bottom:0;width:30px;z-index:2;min-height:20px;height:100%!important;vertical-align:middle;cursor:col-resize}.sky-grid-resize-handle:hover:after{background-color:#00b4f1}.sky-grid-resize-handle:after{position:absolute;right:0;top:0;bottom:0;width:5px;height:100%;content:\"\"}#sky-grid-resize-bar{position:absolute;top:0;left:0;z-index:99;height:100%;width:5px;background:#00b4f1;opacity:.6}tr{position:relative}.sky-grid-top-scroll-container{overflow:auto}.sky-grid-top-scroll{height:1px}\n"], components: [{ type: i4__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: i4__namespace.λ3, selector: "sky-help-inline", outputs: ["actionClick"] }, { type: i5__namespace.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "required"], outputs: ["change", "checkedChange", "disabledChange"] }, { type: SkyGridCellComponent, selector: "sky-grid-cell", inputs: ["item", "columnId", "template", "fieldSelector"] }, { type: i7__namespace.λ8, selector: "sky-inline-delete", inputs: ["pending"], outputs: ["cancelTriggered", "deleteTriggered"] }], directives: [{ type: i8__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.DragulaDirective, selector: "[dragula]", inputs: ["dragula", "dragulaModel", "dragulaOptions"] }, { type: i8__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9__namespace.λ7, selector: "[skyPopover]", inputs: ["skyPopover", "skyPopoverAlignment", "skyPopoverMessageStream", "skyPopoverPlacement", "skyPopoverTrigger"] }, { type: i10__namespace.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { type: i10__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i10__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i10__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4__namespace.λ11, selector: "[skyHighlight]", inputs: ["skyHighlight"] }, { type: i8__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "skyLibResources": i11__namespace.SkyLibResourcesPipe, "async": i8__namespace.AsyncPipe }, viewProviders: [i2.DragulaService], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyGridComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-grid',
-                        template: "<div class=\"sky-grid\">\n  <div\n    *ngIf=\"showTopScroll\"\n    class=\"sky-grid-top-scroll-container\"\n    (scroll)=\"onTopScroll($event)\"\n    #topScrollContainer\n  >\n    <div\n      class=\"sky-grid-top-scroll\"\n      [style.width.px]=\"getTopScrollWidth()\"\n    ></div>\n  </div>\n  <div\n    class=\"sky-grid-table-container\"\n    [style.height.px]=\"height\"\n    [style.width.px]=\"width\"\n    (scroll)=\"onGridScroll($event)\"\n    #gridContainer\n  >\n    <table class=\"sky-grid-table\" [ngClass]=\"getTableClassNames()\" #gridTable>\n      <thead>\n        <tr dragula=\"sky-grid-heading\">\n          <th\n            *ngIf=\"enableMultiselect\"\n            class=\"\n              sky-grid-heading sky-grid-multiselect-cell sky-grid-header-locked\n            \"\n            scope=\"col\"\n            [style.max-width.px]=\"minColWidth\"\n            [style.width.px]=\"minColWidth\"\n          >\n            <span class=\"screen-reader-only\">\n              {{ 'skyux_grid_multiselect_select_row' | skyLibResources }}\n            </span>\n          </th>\n          <th\n            *ngFor=\"\n              let column of displayedColumns;\n              let last = last;\n              let i = index\n            \"\n            class=\"sky-grid-heading sky-field-label\"\n            scope=\"col\"\n            [attr.sky-cmp-index]=\"i\"\n            [attr.sky-cmp-id]=\"column.id || column.field\"\n            [attr.aria-sort]=\"getAriaSortDirection(column) | async\"\n            [id]=\"'sky-grid-' + gridId + '-column-' + i\"\n            [ngClass]=\"'sky-grid-column-alignment-' + column.alignment\"\n            [style.max-width.px]=\"column.width\"\n            [style.width.px]=\"column.width\"\n            [tabIndex]=\"column.isSortable ? 0 : -1\"\n            (mouseup)=\"sortByColumn(column)\"\n            (keydown)=\"onKeydown($event, column)\"\n            (touchmove)=\"onTouchMove($event)\"\n            #gridCol\n          >\n            <div\n              class=\"overflow\"\n              [ngClass]=\"getTableHeaderClassNames(column)\"\n              [style.max-width.px]=\"column.width - 1\"\n              [style.width.px]=\"column.width - 1\"\n            >\n              <span\n                *ngIf=\"(getCaretVisibility(column.field) | async) === 'hidden'\"\n                class=\"sky-grid-header-caret-hidden-spacing\"\n              ></span>\n              <!-- The no spacing here is intentional to avoid extra spaces due to these being inline elements -->\n              <span class=\"sky-grid-header-text\">{{\n                column.heading?.trim()\n              }}</span>\n              <sky-icon\n                class=\"sky-grid-heading-sort\"\n                [ngClass]=\"\n                  'sky-grid-heading-sort-' +\n                  (getCaretVisibility(column.field) | async)\n                \"\n                [icon]=\"getCaretIconNames(column)\"\n              >\n              </sky-icon>\n              <sky-help-inline\n                *ngIf=\"column.inlineHelpPopover\"\n                [ngClass]=\"{\n                  'sky-grid-help-inline-sort-hidden':\n                    getHelpInlineClass(column.field) | async\n                }\"\n                [skyPopover]=\"column.inlineHelpPopover\"\n                (keydown.enter)=\"$event.stopPropagation()\"\n                (keydown.space)=\"$event.stopPropagation()\"\n                (mousedown)=\"$event.stopPropagation()\"\n                (mouseup)=\"$event.stopPropagation()\"\n              >\n              </sky-help-inline>\n            </div>\n            <span\n              *ngIf=\"(fit === 'width' && !last) || fit === 'scroll'\"\n              aria-hidden=\"true\"\n              class=\"sky-grid-resize-handle\"\n              tabindex=\"-1\"\n              [attr.sky-cmp-index]=\"i\"\n              (mousedown)=\"onResizeColumnStart($event)\"\n              (touchstart)=\"onResizeColumnStart($event)\"\n            >\n            </span>\n            <input\n              aria-label=\"Width of column\"\n              class=\"sky-grid-column-input-aria-only\"\n              role=\"slider\"\n              type=\"range\"\n              [attr.aria-controls]=\"'sky-grid-' + gridId + '-column-' + i\"\n              [attr.aria-valuemin]=\"minColWidth\"\n              [attr.aria-valuemax]=\"maxColWidth\"\n              [attr.aria-valuenow]=\"column.width\"\n              [attr.sky-cmp-index]=\"i\"\n              [min]=\"minColWidth\"\n              [max]=\"maxColWidth\"\n              [step]=\"columnResizeStep\"\n              [(ngModel)]=\"column.width\"\n              (blur)=\"onResizeHandleBlur($event)\"\n              (focus)=\"onResizeHandleFocus($event)\"\n              (keydown)=\"onKeydownResizeCol($event)\"\n              (change)=\"onInputChangeResizeCol($event)\"\n              #colSizeRange\n            />\n          </th>\n        </tr>\n      </thead>\n      <tbody class=\"sky-grid-tbody\">\n        <tr\n          class=\"sky-grid-row\"\n          *ngFor=\"let item of items; let i = index\"\n          [attr.aria-current]=\"isRowHighlighted(item.id) ? true : null\"\n          [attr.aria-selected]=\"item.isSelected\"\n          [attr.sky-cmp-id]=\"item.id\"\n          [ngClass]=\"{\n            'sky-grid-multiselect-selected-row': item.isSelected,\n            'sky-grid-multiselect-row': enableMultiselect,\n            'sky-grid-row-highlight': isRowHighlighted(item.id)\n          }\"\n          (click)=\"onRowClick($event, item)\"\n        >\n          <td\n            *ngIf=\"enableMultiselect\"\n            class=\"sky-grid-multiselect-cell sky-grid-header-locked\"\n          >\n            <div\n              [style.max-width.px]=\"minColWidth\"\n              [style.width.px]=\"minColWidth\"\n            >\n              <sky-checkbox\n                [label]=\"'skyux_grid_multiselect_select_row' | skyLibResources\"\n                (change)=\"onMultiselectCheckboxChange()\"\n                [(ngModel)]=\"item.isSelected\"\n              >\n              </sky-checkbox>\n            </div>\n          </td>\n          <td\n            *ngFor=\"\n              let column of displayedColumns;\n              let last = last;\n              let i = index\n            \"\n            class=\"sky-grid-cell\"\n            [ngClass]=\"'sky-grid-column-alignment-' + column.alignment\"\n            [style.max-width.px]=\"column.width\"\n            [style.width.px]=\"column.width\"\n          >\n            <sky-grid-cell\n              [skyHighlight]=\"\n                !column.excludeFromHighlighting ? highlightText : undefined\n              \"\n              [template]=\"column.template || defaultCellTemplate\"\n              [fieldSelector]=\"column.field\"\n              [item]=\"item\"\n              [columnId]=\"column.id\"\n              [attr.sky-cmp-id]=\"column.id || column.field\"\n            >\n            </sky-grid-cell>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n    <div\n      *ngIf=\"showResizeBar\"\n      aria-hidden=\"true\"\n      id=\"sky-grid-resize-bar\"\n      tabindex=\"-1\"\n      #resizeBar\n    ></div>\n  </div>\n</div>\n\n<ng-template #defaultCellTemplate let-row=\"row\" let-value=\"value\">{{\n  value\n}}</ng-template>\n\n<ng-template let-item #inlineDeleteTemplateRef>\n  <div\n    [id]=\"'row-delete-ref-' + item.id\"\n    [ngStyle]=\"{\n      height: getRowHeight(0),\n      position: 'fixed',\n      width: tableWidth + 'px'\n    }\"\n    #inlineDeleteRef\n  >\n    <sky-inline-delete\n      [pending]=\"getRowDeleteItem(item.id).pending\"\n      (cancelTriggered)=\"cancelRowDelete(item.id)\"\n      (deleteTriggered)=\"confirmRowDelete(item.id)\"\n    ></sky-inline-delete>\n  </div>\n</ng-template>\n",
+                        template: "<div class=\"sky-grid\">\n  <div\n    *ngIf=\"showTopScroll\"\n    class=\"sky-grid-top-scroll-container\"\n    (scroll)=\"onTopScroll($event)\"\n    #topScrollContainer\n  >\n    <div\n      class=\"sky-grid-top-scroll\"\n      [style.width.px]=\"getTopScrollWidth()\"\n    ></div>\n  </div>\n  <div\n    class=\"sky-grid-table-container\"\n    [style.height.px]=\"height\"\n    [style.width.px]=\"width\"\n    (scroll)=\"onGridScroll($event)\"\n    #gridContainer\n  >\n    <table class=\"sky-grid-table\" [ngClass]=\"getTableClassNames()\" #gridTable>\n      <thead>\n        <tr dragula=\"sky-grid-heading\">\n          <th\n            *ngIf=\"enableMultiselect\"\n            class=\"\n              sky-grid-heading sky-grid-multiselect-cell sky-grid-header-locked\n            \"\n            scope=\"col\"\n            [style.max-width.px]=\"minColWidth\"\n            [style.width.px]=\"minColWidth\"\n          >\n            <span class=\"screen-reader-only\">\n              {{ 'skyux_grid_multiselect_select_row' | skyLibResources }}\n            </span>\n          </th>\n          <th\n            *ngFor=\"\n              let column of displayedColumns;\n              let last = last;\n              let i = index\n            \"\n            class=\"sky-grid-heading sky-field-label\"\n            scope=\"col\"\n            [attr.sky-cmp-index]=\"i\"\n            [attr.sky-cmp-id]=\"column.id || column.field\"\n            [attr.aria-sort]=\"getAriaSortDirection(column) | async\"\n            [id]=\"'sky-grid-' + gridId + '-column-' + i\"\n            [ngClass]=\"'sky-grid-column-alignment-' + column.alignment\"\n            [style.max-width.px]=\"column.width\"\n            [style.width.px]=\"column.width\"\n            [tabIndex]=\"column.isSortable ? 0 : -1\"\n            (mouseup)=\"sortByColumn(column)\"\n            (keydown)=\"onKeydown($event, column)\"\n            (touchmove)=\"onTouchMove($event)\"\n            #gridCol\n          >\n            <div\n              class=\"overflow\"\n              [ngClass]=\"getTableHeaderClassNames(column)\"\n              [style.max-width.px]=\"column.width - 1\"\n              [style.width.px]=\"column.width - 1\"\n            >\n              <span\n                *ngIf=\"(getCaretVisibility(column.field) | async) === 'hidden'\"\n                class=\"sky-grid-header-caret-hidden-spacing\"\n              ></span>\n              <!-- The no spacing here is intentional to avoid extra spaces due to these being inline elements -->\n              <span class=\"sky-grid-header-text\">{{\n                column.heading?.trim()\n              }}</span>\n              <sky-icon\n                class=\"sky-grid-heading-sort\"\n                [ngClass]=\"\n                  'sky-grid-heading-sort-' +\n                  (getCaretVisibility(column.field) | async)\n                \"\n                [icon]=\"getCaretIconNames(column)\"\n              >\n              </sky-icon>\n              <sky-help-inline\n                *ngIf=\"column.inlineHelpPopover\"\n                [ngClass]=\"{\n                  'sky-grid-help-inline-sort-hidden':\n                    getHelpInlineClass(column.field) | async\n                }\"\n                [skyPopover]=\"column.inlineHelpPopover\"\n                (keydown.enter)=\"$event.stopPropagation()\"\n                (keydown.space)=\"$event.stopPropagation()\"\n                (mousedown)=\"$event.stopPropagation()\"\n                (mouseup)=\"$event.stopPropagation()\"\n              >\n              </sky-help-inline>\n            </div>\n            <span\n              *ngIf=\"(fit === 'width' && !last) || fit === 'scroll'\"\n              aria-hidden=\"true\"\n              class=\"sky-grid-resize-handle\"\n              tabindex=\"-1\"\n              [attr.sky-cmp-index]=\"i\"\n              (mousedown)=\"onResizeColumnStart($event)\"\n              (touchstart)=\"onResizeColumnStart($event)\"\n            >\n            </span>\n            <input\n              aria-label=\"Width of column\"\n              class=\"sky-grid-column-input-aria-only\"\n              role=\"slider\"\n              type=\"range\"\n              [attr.aria-controls]=\"'sky-grid-' + gridId + '-column-' + i\"\n              [attr.aria-valuemin]=\"minColWidth\"\n              [attr.aria-valuemax]=\"maxColWidth\"\n              [attr.aria-valuenow]=\"column.width\"\n              [attr.sky-cmp-index]=\"i\"\n              [min]=\"minColWidth\"\n              [max]=\"maxColWidth\"\n              [step]=\"columnResizeStep\"\n              [(ngModel)]=\"column.width\"\n              (blur)=\"onResizeHandleBlur($event)\"\n              (focus)=\"onResizeHandleFocus($event)\"\n              (keydown)=\"onKeydownResizeCol($event)\"\n              (change)=\"onInputChangeResizeCol($event)\"\n              #colSizeRange\n            />\n          </th>\n        </tr>\n      </thead>\n      <tbody class=\"sky-grid-tbody\">\n        <tr\n          class=\"sky-grid-row\"\n          *ngFor=\"let item of items; let i = index\"\n          [attr.aria-current]=\"isRowHighlighted(item.id) ? true : null\"\n          [attr.sky-cmp-id]=\"item.id\"\n          [ngClass]=\"{\n            'sky-grid-multiselect-selected-row': item.isSelected,\n            'sky-grid-multiselect-row': enableMultiselect,\n            'sky-grid-row-highlight': isRowHighlighted(item.id)\n          }\"\n          (click)=\"onRowClick($event, item)\"\n        >\n          <td\n            *ngIf=\"enableMultiselect\"\n            class=\"sky-grid-multiselect-cell sky-grid-header-locked\"\n          >\n            <div\n              [style.max-width.px]=\"minColWidth\"\n              [style.width.px]=\"minColWidth\"\n            >\n              <sky-checkbox\n                [label]=\"'skyux_grid_multiselect_select_row' | skyLibResources\"\n                (change)=\"onMultiselectCheckboxChange()\"\n                [(ngModel)]=\"item.isSelected\"\n              >\n              </sky-checkbox>\n            </div>\n          </td>\n          <td\n            *ngFor=\"\n              let column of displayedColumns;\n              let last = last;\n              let i = index\n            \"\n            class=\"sky-grid-cell\"\n            [ngClass]=\"'sky-grid-column-alignment-' + column.alignment\"\n            [style.max-width.px]=\"column.width\"\n            [style.width.px]=\"column.width\"\n          >\n            <sky-grid-cell\n              [skyHighlight]=\"\n                !column.excludeFromHighlighting ? highlightText : undefined\n              \"\n              [template]=\"column.template || defaultCellTemplate\"\n              [fieldSelector]=\"column.field\"\n              [item]=\"item\"\n              [columnId]=\"column.id\"\n              [attr.sky-cmp-id]=\"column.id || column.field\"\n            >\n            </sky-grid-cell>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n    <div\n      *ngIf=\"showResizeBar\"\n      aria-hidden=\"true\"\n      id=\"sky-grid-resize-bar\"\n      tabindex=\"-1\"\n      #resizeBar\n    ></div>\n  </div>\n</div>\n\n<ng-template #defaultCellTemplate let-row=\"row\" let-value=\"value\">{{\n  value\n}}</ng-template>\n\n<ng-template let-item #inlineDeleteTemplateRef>\n  <div\n    [id]=\"'row-delete-ref-' + item.id\"\n    [ngStyle]=\"{\n      height: getRowHeight(0),\n      position: 'fixed',\n      width: tableWidth + 'px'\n    }\"\n    #inlineDeleteRef\n  >\n    <sky-inline-delete\n      [pending]=\"getRowDeleteItem(item.id).pending\"\n      (cancelTriggered)=\"cancelRowDelete(item.id)\"\n      (deleteTriggered)=\"confirmRowDelete(item.id)\"\n    ></sky-inline-delete>\n  </div>\n</ng-template>\n",
                         styles: [".sky-grid{position:relative;display:block}.sky-grid-table-container{overflow:auto}.sky-grid-table{position:relative;table-layout:fixed;border-collapse:collapse;margin:0;font-size:15px;min-width:100%}.sky-grid-table.sky-grid-fit{max-width:100%;width:100%}.sky-grid-tbody{background-color:#fff}.sky-grid-row{border-bottom:1px dotted #cdcfd2}.sky-grid-row:nth-child(odd){background-color:#fbfbfb}.sky-grid-row.sky-grid-row-highlight{border-top:1px solid #0974a1;box-shadow:0 0 0 3px inset #0974a1}.sky-grid-row .sky-grid-cell{padding:0;min-width:10px}.sky-grid-heading{position:relative;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;border-right-width:0px;padding:0;cursor:pointer;background-color:#fff;overflow:visible;background-clip:padding-box;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;user-select:none}.sky-grid-heading:first-child{border-left:1px solid transparent}.sky-grid-heading.sky-grid-header-dragging{background-color:#eeeeef}.sky-grid-heading.sky-grid-column-alignment-left .sky-grid-heading-sort,.sky-grid-heading.sky-grid-column-alignment-center .sky-grid-heading-sort{width:14px}.sky-grid-heading.sky-grid-column-alignment-left .sky-grid-help-inline-sort-hidden,.sky-grid-heading.sky-grid-column-alignment-center .sky-grid-help-inline-sort-hidden{margin-left:-14px;margin-right:14px}.sky-grid-heading.sky-grid-column-alignment-right .sky-grid-header-caret-hidden-spacing{padding-left:14px}.sky-grid-heading.sky-grid-column-alignment-right .sky-grid-heading-sort-visible{width:14px}.sky-grid-heading div{padding:8px}.sky-grid-heading .overflow{text-overflow:ellipsis;white-space:nowrap;position:relative;z-index:1;overflow:hidden;min-width:100%}.sky-grid-heading .sky-grid-column-input-aria-only{-webkit-appearance:none;-moz-appearance:none;height:100%;width:5px;position:absolute;display:block;top:0;bottom:0;right:0}.sky-grid-heading .sky-grid-column-input-aria-only::-moz-range-track{background:transparent}.sky-grid-heading .sky-grid-column-input-aria-only::-moz-range-thumb{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-grid-heading .sky-grid-column-input-aria-only::-ms-thumb{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-grid-heading .sky-grid-column-input-aria-only::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-grid-heading .sky-grid-column-input-aria-only:focus{background-color:#00b4f1}.sky-grid-column-alignment-left{text-align:left}.sky-grid-column-alignment-center{text-align:center}.sky-grid-column-alignment-right{text-align:right}.sky-grid-multiselect-cell{padding:0;text-align:center}.sky-grid-multiselect-cell ::ng-deep .sky-switch-control{margin:0 auto}th.sky-grid-multiselect-cell{cursor:default}th.sky-grid-multiselect-cell .screen-reader-only{width:0;height:0;padding:0;opacity:0;position:absolute;margin:-1px;border:0;overflow:hidden;clip:rect(0,0,0,0);outline:none;white-space:nowrap}@-moz-document url-prefix(){.sky-grid-multiselect-row td{border-left:0px solid transparent;border-right:0px solid transparent}}.sky-grid-multiselect-row:hover{background-color:#e9e4f1}.sky-grid-multiselect-row:hover:nth-child(odd){background:#e9e4f1}.sky-grid-multiselect-selected-row{background:#f1eef6;border-top:1px solid #dadbf6;border-bottom:1px solid #dadbf6}.sky-grid-multiselect-selected-row:nth-child(odd){background:#f1eef6}.sky-grid-has-toolbar .sky-grid-heading{border-top-width:0px}.sky-grid-heading-sort.sky-grid-heading-sort-hidden{visibility:hidden}.sky-grid-heading-sort.sky-grid-heading-sort-visible{visibility:visible;padding-left:5px}.sky-grid-resize-handle{position:absolute;right:0;top:0;bottom:0;width:30px;z-index:2;min-height:20px;height:100%!important;vertical-align:middle;cursor:col-resize}.sky-grid-resize-handle:hover:after{background-color:#00b4f1}.sky-grid-resize-handle:after{position:absolute;right:0;top:0;bottom:0;width:5px;height:100%;content:\"\"}#sky-grid-resize-bar{position:absolute;top:0;left:0;z-index:99;height:100%;width:5px;background:#00b4f1;opacity:.6}tr{position:relative}.sky-grid-top-scroll-container{overflow:auto}.sky-grid-top-scroll{height:1px}\n"],
                         viewProviders: [i2.DragulaService],
                         providers: [SkyGridAdapterService],
@@ -1678,54 +1777,6 @@
                     args: ['window:resize']
                 }] } });
 
-    /**
-     * NOTICE: DO NOT MODIFY THIS FILE!
-     * The contents of this file were automatically generated by
-     * the 'ng generate @skyux/i18n:lib-resources-module modules/shared/skyux-grids' schematic.
-     * To update this file, simply rerun the command.
-     */
-    var RESOURCES = {
-        'EN-US': { skyux_grid_multiselect_select_row: { message: 'Select row' } },
-    };
-    var SkyuxGridsResourcesProvider = /** @class */ (function () {
-        function SkyuxGridsResourcesProvider() {
-        }
-        SkyuxGridsResourcesProvider.prototype.getString = function (localeInfo, name) {
-            return i11.getLibStringForLocale(RESOURCES, localeInfo.locale, name);
-        };
-        return SkyuxGridsResourcesProvider;
-    }());
-    /**
-     * Import into any component library module that needs to use resource strings.
-     */
-    var SkyuxGridsResourcesModule = /** @class */ (function () {
-        function SkyuxGridsResourcesModule() {
-        }
-        return SkyuxGridsResourcesModule;
-    }());
-    SkyuxGridsResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyuxGridsResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyuxGridsResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyuxGridsResourcesModule, exports: [i11.SkyI18nModule] });
-    SkyuxGridsResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyuxGridsResourcesModule, providers: [
-            {
-                provide: i11.SKY_LIB_RESOURCES_PROVIDERS,
-                useClass: SkyuxGridsResourcesProvider,
-                multi: true,
-            },
-        ], imports: [i11.SkyI18nModule] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyuxGridsResourcesModule, decorators: [{
-                type: i0.NgModule,
-                args: [{
-                        exports: [i11.SkyI18nModule],
-                        providers: [
-                            {
-                                provide: i11.SKY_LIB_RESOURCES_PROVIDERS,
-                                useClass: SkyuxGridsResourcesProvider,
-                                multi: true,
-                            },
-                        ],
-                    }]
-            }] });
-
     var SkyGridModule = /** @class */ (function () {
         function SkyGridModule() {
         }