igniteui-webcomponents-grids 1.4.2 → 3.2.2

package/esm5/lib/igc-data-grid-component.js

@@ -178,6 +178,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         _this._hasParentAdded = false;
         _this._isGroupByAreaVisible = false;
         _this._hasColumnGroupingAdded = false;
+        _this._isPagerVisible = false;
         _this._settingAttributes = false;
         _this._attached = false;
         _this._queuedSetAttributes = [];
@@ -275,6 +276,10 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         if (_this._container.getNativeElement() != null) {
             root = _this._container.getNativeElement();
         }
+        _this._contentArea = _this._renderer.createElement("div");
+        _this._contentArea.setRawStyleProperty("overflow", "hidden");
+        _this._contentArea.setRawStyleProperty("flex", "1");
+        _this._contentArea.append(_this._renderer.rootWrapper);
         _this._wrapper = _this._renderer;
         _this._implementation = new Grid();
         var grid = _this.i;
@@ -574,7 +579,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         }
         this.classList.add("ig-data-grid");
         this.classList.add("igc-data-grid");
-        this.appendChild(this._renderer.rootWrapper.getNativeElement());
+        this.appendChild(this._contentArea.getNativeElement());
         this._attached = true;
         this.style.display = "block";
         this.style.height = this._height;
@@ -584,9 +589,15 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         this.style.display = "flex";
         this.style.flexDirection = "column";
         this._hasParentAdded = true;
+        if (this.isToolbarVisible) {
+            this.showToolbar();
+        }
         if (this._isGroupByAreaVisible == true) {
             this.SetupColumnGrouping();
         }
+        if (this.isPagerVisible) {
+            this.showPager();
+        }
         this.i.syncBorder();
         this._flushQueuedAttributes();
         // supports themes or custom properties set in CSS 
@@ -626,7 +637,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
             groupContainer.append(groupAreaContainer);
             groupContainer.setStyleProperty("width", "100%");
             var groupRenderer = this._renderer.getSubRenderer(groupContainer);
-            this.insertBefore(groupRenderer.rootWrapper.getNativeElement(), this._renderer.rootWrapper.getNativeElement());
+            this.insertBefore(groupRenderer.rootWrapper.getNativeElement(), this._contentArea.getNativeElement());
             //this.appendChild(groupRenderer.rootWrapper.getNativeElement());
             var columnGrouping = new ColumnGrouping();
             columnGrouping.targetGrid = this._grid;
@@ -635,6 +646,45 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
             this.i.columnGrouping = columnGrouping;
         }
     };
+    IgcDataGridComponent.prototype.showPager = function () {
+        if (!this._pager) {
+            this._pager = document.createElement("igc-data-grid-pager");
+        }
+        if (this._pager && this._hasParentAdded == true) {
+            this._pager.targetGrid = this;
+            this.appendChild(this._pager);
+            this.i.pager = this._pager.i;
+        }
+    };
+    IgcDataGridComponent.prototype.hidePager = function () {
+        if (this._pager) {
+            this.removeChild(this._pager);
+            this._pager.targetGrid = null;
+            this.i.pager = null;
+            // When the pager is shown it replaces the internal grid's datasource with a new paged one. So when hiding the pager
+            // we need to assign back the original datasource.
+            this._grid.itemsSource = this._dataSource;
+        }
+    };
+    IgcDataGridComponent.prototype.showToolbar = function () {
+        if (!this._toolbar && this._hasParentAdded == true) {
+            this._toolbar = document.createElement("igc-data-grid-toolbar");
+            this._toolbar.borderWidthTop = 0;
+            this._toolbar.borderWidthRight = 0;
+            this._toolbar.borderWidthBottom = 1;
+            this._toolbar.borderWidthLeft = 0;
+            this.i.toolbar = this._toolbar.i;
+            this._toolbar.targetGrid = this;
+        }
+        if (this._toolbar && this._hasParentAdded == true) {
+            this.insertBefore(this._toolbar, this._contentArea.getNativeElement());
+        }
+    };
+    IgcDataGridComponent.prototype.hideToolbar = function () {
+        if (this._toolbar) {
+            this.removeChild(this._toolbar);
+        }
+    };
     Object.defineProperty(IgcDataGridComponent.prototype, "actualDataSource", {
         get: function () {
             return this.i.actualDataSource;
@@ -800,6 +850,44 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(IgcDataGridComponent.prototype, "isPagerVisible", {
+        /**
+         * Gets or sets whether to show the pager or not.
+        */
+        get: function () {
+            return this.i.isPagerVisible;
+        },
+        set: function (value) {
+            this.i.isPagerVisible = ensureBool(value);
+            if (this.i.isPagerVisible) {
+                this.showPager();
+            }
+            else {
+                this.hidePager();
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridComponent.prototype, "isToolbarVisible", {
+        /**
+         * Gets or sets whether to show the toolbar.
+         */
+        get: function () {
+            return this.i.isToolbarVisible;
+        },
+        set: function (value) {
+            this.i.isToolbarVisible = ensureBool(value);
+            if (this.i.isToolbarVisible) {
+                this.showToolbar();
+            }
+            else {
+                this.hideToolbar();
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
      * Get the cell that contains the provided coordinates.
      */
@@ -940,11 +1028,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets whether the row will highlight when hovered.
         */
         get: function () {
-            return this.i.jf;
+            return this.i.jp;
         },
         set: function (v) {
-            this.i.jf = ensureBool(v);
-            this._a("isRowHoverEnabled", this.i.jf);
+            this.i.jp = ensureBool(v);
+            this._a("isRowHoverEnabled", this.i.jp);
         },
         enumerable: true,
         configurable: true
@@ -954,11 +1042,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the background color for rows when hovered.
         */
         get: function () {
-            return brushToString(this.i.x8);
+            return brushToString(this.i.za);
         },
         set: function (v) {
-            this.i.x8 = stringToBrush(v);
-            this._a("rowHoverBackground", brushToString(this.i.x8));
+            this.i.za = stringToBrush(v);
+            this._a("rowHoverBackground", brushToString(this.i.za));
         },
         enumerable: true,
         configurable: true
@@ -968,11 +1056,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the text color for rows when hovered.
         */
         get: function () {
-            return brushToString(this.i.x9);
+            return brushToString(this.i.zb);
         },
         set: function (v) {
-            this.i.x9 = stringToBrush(v);
-            this._a("rowHoverTextColor", brushToString(this.i.x9));
+            this.i.zb = stringToBrush(v);
+            this._a("rowHoverTextColor", brushToString(this.i.zb));
         },
         enumerable: true,
         configurable: true
@@ -982,94 +1070,94 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the border color for rows being edited.
         */
         get: function () {
-            return brushToString(this.i.x0);
+            return brushToString(this.i.y2);
         },
         set: function (v) {
-            this.i.x0 = stringToBrush(v);
-            this._a("editRowBorder", brushToString(this.i.x0));
+            this.i.y2 = stringToBrush(v);
+            this._a("editRowBorder", brushToString(this.i.y2));
         },
         enumerable: true,
         configurable: true
     });
     Object.defineProperty(IgcDataGridComponent.prototype, "editRowBorderWidthBottom", {
         get: function () {
-            return this.i.y2 ? this.i.y2.b : NaN;
+            return this.i.z4 ? this.i.z4.bottom : NaN;
         },
         set: function (v) {
             this.ensureEditRowBorderWidth();
-            this.i.y2.b = +v;
-            this._a("editRowBorderWidthBottom", this.i.y2.b);
-            this.i.y2 = this.i.y2;
+            this.i.z4.bottom = +v;
+            this._a("editRowBorderWidthBottom", this.i.z4.bottom);
+            this.i.z4 = this.i.z4;
         },
         enumerable: true,
         configurable: true
     });
     Object.defineProperty(IgcDataGridComponent.prototype, "editRowBorderWidthLeft", {
         get: function () {
-            return this.i.y2 ? this.i.y2.c : NaN;
+            return this.i.z4 ? this.i.z4.left : NaN;
         },
         set: function (v) {
             this.ensureEditRowBorderWidth();
-            this.i.y2.c = +v;
-            this._a("editRowBorderWidthLeft", this.i.y2.c);
-            this.i.y2 = this.i.y2;
+            this.i.z4.left = +v;
+            this._a("editRowBorderWidthLeft", this.i.z4.left);
+            this.i.z4 = this.i.z4;
         },
         enumerable: true,
         configurable: true
     });
     Object.defineProperty(IgcDataGridComponent.prototype, "editRowBorderWidthRight", {
         get: function () {
-            return this.i.y2 ? this.i.y2.d : NaN;
+            return this.i.z4 ? this.i.z4.right : NaN;
         },
         set: function (v) {
             this.ensureEditRowBorderWidth();
-            this.i.y2.d = +v;
-            this._a("editRowBorderWidthRight", this.i.y2.d);
-            this.i.y2 = this.i.y2;
+            this.i.z4.right = +v;
+            this._a("editRowBorderWidthRight", this.i.z4.right);
+            this.i.z4 = this.i.z4;
         },
         enumerable: true,
         configurable: true
     });
     Object.defineProperty(IgcDataGridComponent.prototype, "editRowBorderWidthTop", {
         get: function () {
-            return this.i.y2 ? this.i.y2.e : NaN;
+            return this.i.z4 ? this.i.z4.top : NaN;
         },
         set: function (v) {
             this.ensureEditRowBorderWidth();
-            this.i.y2.e = +v;
-            this._a("editRowBorderWidthTop", this.i.y2.e);
-            this.i.y2 = this.i.y2;
+            this.i.z4.top = +v;
+            this._a("editRowBorderWidthTop", this.i.z4.top);
+            this.i.z4 = this.i.z4;
         },
         enumerable: true,
         configurable: true
     });
     IgcDataGridComponent.prototype.ensureEditRowBorderWidth = function () {
-        if (this.i.y2) {
+        if (this.i.z4) {
             return;
         }
-        this.i.y2 = new Thickness(2);
+        this.i.z4 = new Thickness(2);
     };
     Object.defineProperty(IgcDataGridComponent.prototype, "sectionHeader", {
         /**
          * Gets or sets the header type used for sectioning off groups of rows.
         */
         get: function () {
-            if (this.i.fr == null) {
+            if (this.i.ft == null) {
                 return null;
             }
-            if (!this.i.fr.externalObject) {
-                var e = IgcSectionHeaderComponent._createFromInternal(this.i.fr);
+            if (!this.i.ft.externalObject) {
+                var e = IgcSectionHeaderComponent._createFromInternal(this.i.ft);
                 if (e) {
-                    e._implementation = this.i.fr;
+                    e._implementation = this.i.ft;
                 }
-                this.i.fr.externalObject = e;
+                this.i.ft.externalObject = e;
             }
-            return this.i.fr.externalObject;
+            return this.i.ft.externalObject;
         },
         set: function (v) {
             if (v != null && this._stylingContainer && v._styling)
                 v._styling(this._stylingContainer, this, this);
-            v == null ? this.i.fr = null : this.i.fr = v.i;
+            v == null ? this.i.ft = null : this.i.ft = v.i;
         },
         enumerable: true,
         configurable: true
@@ -1079,22 +1167,22 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the cell definition used for summary rows at the root level.
         */
         get: function () {
-            if (this.i.f1 == null) {
+            if (this.i.f3 == null) {
                 return null;
             }
-            if (!this.i.f1.externalObject) {
-                var e = IgcSummaryRowRootComponent._createFromInternal(this.i.f1);
+            if (!this.i.f3.externalObject) {
+                var e = IgcSummaryRowRootComponent._createFromInternal(this.i.f3);
                 if (e) {
-                    e._implementation = this.i.f1;
+                    e._implementation = this.i.f3;
                 }
-                this.i.f1.externalObject = e;
+                this.i.f3.externalObject = e;
             }
-            return this.i.f1.externalObject;
+            return this.i.f3.externalObject;
         },
         set: function (v) {
             if (v != null && this._stylingContainer && v._styling)
                 v._styling(this._stylingContainer, this, this);
-            v == null ? this.i.f1 = null : this.i.f1 = v.i;
+            v == null ? this.i.f3 = null : this.i.f3 = v.i;
         },
         enumerable: true,
         configurable: true
@@ -1104,22 +1192,22 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the cell definition used for summary rows at the section level.
         */
         get: function () {
-            if (this.i.f3 == null) {
+            if (this.i.f5 == null) {
                 return null;
             }
-            if (!this.i.f3.externalObject) {
-                var e = IgcSummaryRowSectionComponent._createFromInternal(this.i.f3);
+            if (!this.i.f5.externalObject) {
+                var e = IgcSummaryRowSectionComponent._createFromInternal(this.i.f5);
                 if (e) {
-                    e._implementation = this.i.f3;
+                    e._implementation = this.i.f5;
                 }
-                this.i.f3.externalObject = e;
+                this.i.f5.externalObject = e;
             }
-            return this.i.f3.externalObject;
+            return this.i.f5.externalObject;
         },
         set: function (v) {
             if (v != null && this._stylingContainer && v._styling)
                 v._styling(this._stylingContainer, this, this);
-            v == null ? this.i.f3 = null : this.i.f3 = v.i;
+            v == null ? this.i.f5 = null : this.i.f5 = v.i;
         },
         enumerable: true,
         configurable: true
@@ -1129,22 +1217,22 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the row seperator settings.
         */
         get: function () {
-            if (this.i.fm == null) {
+            if (this.i.fo == null) {
                 return null;
             }
-            if (!this.i.fm.externalObject) {
-                var e = IgcRowSeparatorComponent._createFromInternal(this.i.fm);
+            if (!this.i.fo.externalObject) {
+                var e = IgcRowSeparatorComponent._createFromInternal(this.i.fo);
                 if (e) {
-                    e._implementation = this.i.fm;
+                    e._implementation = this.i.fo;
                 }
-                this.i.fm.externalObject = e;
+                this.i.fo.externalObject = e;
             }
-            return this.i.fm.externalObject;
+            return this.i.fo.externalObject;
         },
         set: function (v) {
             if (v != null && this._stylingContainer && v._styling)
                 v._styling(this._stylingContainer, this, this);
-            v == null ? this.i.fm = null : this.i.fm = v.i;
+            v == null ? this.i.fo = null : this.i.fo = v.i;
         },
         enumerable: true,
         configurable: true
@@ -1254,22 +1342,22 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the pinned area separator settings.
         */
         get: function () {
-            if (this.i.fa == null) {
+            if (this.i.fc == null) {
                 return null;
             }
-            if (!this.i.fa.externalObject) {
-                var e = IgcPinnedAreaSeparatorComponent._createFromInternal(this.i.fa);
+            if (!this.i.fc.externalObject) {
+                var e = IgcPinnedAreaSeparatorComponent._createFromInternal(this.i.fc);
                 if (e) {
-                    e._implementation = this.i.fa;
+                    e._implementation = this.i.fc;
                 }
-                this.i.fa.externalObject = e;
+                this.i.fc.externalObject = e;
             }
-            return this.i.fa.externalObject;
+            return this.i.fc.externalObject;
         },
         set: function (v) {
             if (v != null && this._stylingContainer && v._styling)
                 v._styling(this._stylingContainer, this, this);
-            v == null ? this.i.fa = null : this.i.fa = v.i;
+            v == null ? this.i.fc = null : this.i.fc = v.i;
         },
         enumerable: true,
         configurable: true
@@ -1313,11 +1401,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the display density to use for the grid.
         */
         get: function () {
-            return this.i.gb;
+            return this.i.gd;
         },
         set: function (v) {
-            this.i.gb = ensureEnum(ControlDisplayDensity_$type, v);
-            this._a("density", enumToString(ControlDisplayDensity_$type, this.i.gb));
+            this.i.gd = ensureEnum(ControlDisplayDensity_$type, v);
+            this._a("density", enumToString(ControlDisplayDensity_$type, this.i.gd));
         },
         enumerable: true,
         configurable: true
@@ -1327,11 +1415,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets the actual height for the rows in the grid.
         */
         get: function () {
-            return this.i.me;
+            return this.i.mu;
         },
         set: function (v) {
-            this.i.me = +v;
-            this._a("actualRowHeight", this.i.me);
+            this.i.mu = +v;
+            this._a("actualRowHeight", this.i.mu);
         },
         enumerable: true,
         configurable: true
@@ -1342,11 +1430,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * use the default value for the set display density.
         */
         get: function () {
-            return this.i.m8;
+            return this.i.np;
         },
         set: function (v) {
-            this.i.m8 = +v;
-            this._a("rowHeight", this.i.m8);
+            this.i.np = +v;
+            this._a("rowHeight", this.i.np);
         },
         enumerable: true,
         configurable: true
@@ -1356,11 +1444,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the default minimum width to use on all columns. Ignored if NaN.
         */
         get: function () {
-            return this.i.ld;
+            return this.i.ls;
         },
         set: function (v) {
-            this.i.ld = +v;
-            this._a("defaultColumnMinWidth", this.i.ld);
+            this.i.ls = +v;
+            this._a("defaultColumnMinWidth", this.i.ls);
         },
         enumerable: true,
         configurable: true
@@ -1370,11 +1458,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets the height used for the header row.
         */
         get: function () {
-            return this.i.md;
+            return this.i.mt;
         },
         set: function (v) {
-            this.i.md = +v;
-            this._a("actualHeaderHeight", this.i.md);
+            this.i.mt = +v;
+            this._a("actualHeaderHeight", this.i.mt);
         },
         enumerable: true,
         configurable: true
@@ -1384,11 +1472,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the height to use for the header row.
         */
         get: function () {
-            return this.i.m0;
+            return this.i.ng;
         },
         set: function (v) {
-            this.i.m0 = +v;
-            this._a("headerHeight", this.i.m0);
+            this.i.ng = +v;
+            this._a("headerHeight", this.i.ng);
         },
         enumerable: true,
         configurable: true
@@ -1440,11 +1528,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets whether edit mode will begin as soon as you start typing while a cell is active.
         */
         get: function () {
-            return this.i.ie;
+            return this.i.io;
         },
         set: function (v) {
-            this.i.ie = ensureBool(v);
-            this._a("editOnKeyPress", this.i.ie);
+            this.i.io = ensureBool(v);
+            this._a("editOnKeyPress", this.i.io);
         },
         enumerable: true,
         configurable: true
@@ -1454,11 +1542,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Configures whether or not the grid will autogenerate columns when the data source is set.
         */
         get: function () {
-            return this.i.h6;
+            return this.i.ie;
         },
         set: function (v) {
-            this.i.h6 = ensureBool(v);
-            this._a("autoGenerateColumns", this.i.h6);
+            this.i.ie = ensureBool(v);
+            this._a("autoGenerateColumns", this.i.ie);
         },
         enumerable: true,
         configurable: true
@@ -1468,11 +1556,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Sets or gets the height to use for the row separators.
         */
         get: function () {
-            return this.i.na;
+            return this.i.nr;
         },
         set: function (v) {
-            this.i.na = +v;
-            this._a("rowSeparatorHeight", this.i.na);
+            this.i.nr = +v;
+            this._a("rowSeparatorHeight", this.i.nr);
         },
         enumerable: true,
         configurable: true
@@ -1482,11 +1570,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Configures whether or not place holders are used for cells who do not have their data yet.
         */
         get: function () {
-            return this.i.i9;
+            return this.i.jj;
         },
         set: function (v) {
-            this.i.i9 = ensureBool(v);
-            this._a("isPlaceholderRenderingEnabled", this.i.i9);
+            this.i.jj = ensureBool(v);
+            this._a("isPlaceholderRenderingEnabled", this.i.jj);
         },
         enumerable: true,
         configurable: true
@@ -1538,11 +1626,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Sets or gets the row selection animation mode to use.
         */
         get: function () {
-            return this.i.fk;
+            return this.i.fm;
         },
         set: function (v) {
-            this.i.fk = ensureEnum(RowSelectionAnimationMode_$type, v);
-            this._a("rowSelectionAnimationMode", enumToString(RowSelectionAnimationMode_$type, this.i.fk));
+            this.i.fm = ensureEnum(RowSelectionAnimationMode_$type, v);
+            this._a("rowSelectionAnimationMode", enumToString(RowSelectionAnimationMode_$type, this.i.fm));
         },
         enumerable: true,
         configurable: true
@@ -1552,11 +1640,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Sets or gets the row hover animation mode to use.
         */
         get: function () {
-            return this.i.fh;
+            return this.i.fj;
         },
         set: function (v) {
-            this.i.fh = ensureEnum(RowHoverAnimationMode_$type, v);
-            this._a("rowHoverAnimationMode", enumToString(RowHoverAnimationMode_$type, this.i.fh));
+            this.i.fj = ensureEnum(RowHoverAnimationMode_$type, v);
+            this._a("rowHoverAnimationMode", enumToString(RowHoverAnimationMode_$type, this.i.fj));
         },
         enumerable: true,
         configurable: true
@@ -1708,6 +1796,20 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(IgcDataGridComponent.prototype, "mouseDragSelectionEnabled", {
+        /**
+         * Gets or sets the ability to select rows or cells via mouse dragging. Currently only applies when SelectionMode is MultipleRow or RangeCell.
+        */
+        get: function () {
+            return this.i.ju;
+        },
+        set: function (v) {
+            this.i.ju = ensureBool(v);
+            this._a("mouseDragSelectionEnabled", this.i.ju);
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(IgcDataGridComponent.prototype, "selectedItems", {
         /**
          * Gets which items are currently selected in the grid. Collection can be updated to programatically select items.
@@ -1917,11 +2019,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets whether to show the column options UI in the headers for columns.
         */
         get: function () {
-            return this.i.iu;
+            return this.i.i2;
         },
         set: function (v) {
-            this.i.iu = ensureBool(v);
-            this._a("isColumnOptionsEnabled", this.i.iu);
+            this.i.i2 = ensureBool(v);
+            this._a("isColumnOptionsEnabled", this.i.i2);
         },
         enumerable: true,
         configurable: true
@@ -1931,11 +2033,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets if group rows will stick to the top of the grid.
         */
         get: function () {
-            return this.i.i4;
+            return this.i.jd;
         },
         set: function (v) {
-            this.i.i4 = ensureBool(v);
-            this._a("isGroupRowSticky", this.i.i4);
+            this.i.jd = ensureBool(v);
+            this._a("isGroupRowSticky", this.i.jd);
         },
         enumerable: true,
         configurable: true
@@ -1945,11 +2047,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets if header separators are rendered.
         */
         get: function () {
-            return this.i.i5;
+            return this.i.je;
         },
         set: function (v) {
-            this.i.i5 = ensureBool(v);
-            this._a("isHeaderSeparatorVisible", this.i.i5);
+            this.i.je = ensureBool(v);
+            this._a("isHeaderSeparatorVisible", this.i.je);
         },
         enumerable: true,
         configurable: true
@@ -1959,11 +2061,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the default background color to use for content cells when a row is in a selected state
         */
         get: function () {
-            return brushToString(this.i.xu);
+            return brushToString(this.i.yw);
         },
         set: function (v) {
-            this.i.xu = stringToBrush(v);
-            this._a("cellSelectedBackground", brushToString(this.i.xu));
+            this.i.yw = stringToBrush(v);
+            this._a("cellSelectedBackground", brushToString(this.i.yw));
         },
         enumerable: true,
         configurable: true
@@ -1973,11 +2075,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the default background color to use for section header cells when a row is in a selected state
         */
         get: function () {
-            return brushToString(this.i.yf);
+            return brushToString(this.i.zh);
         },
         set: function (v) {
-            this.i.yf = stringToBrush(v);
-            this._a("sectionHeaderSelectedBackground", brushToString(this.i.yf));
+            this.i.zh = stringToBrush(v);
+            this._a("sectionHeaderSelectedBackground", brushToString(this.i.zh));
         },
         enumerable: true,
         configurable: true
@@ -1987,11 +2089,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the default background color to use for summary cells at the root level.
         */
         get: function () {
-            return brushToString(this.i.yi);
+            return brushToString(this.i.zk);
         },
         set: function (v) {
-            this.i.yi = stringToBrush(v);
-            this._a("summaryRootBackground", brushToString(this.i.yi));
+            this.i.zk = stringToBrush(v);
+            this._a("summaryRootBackground", brushToString(this.i.zk));
         },
         enumerable: true,
         configurable: true
@@ -2001,11 +2103,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the default background color to use for summary cells at the section level.
         */
         get: function () {
-            return brushToString(this.i.ym);
+            return brushToString(this.i.zo);
         },
         set: function (v) {
-            this.i.ym = stringToBrush(v);
-            this._a("summarySectionBackground", brushToString(this.i.ym));
+            this.i.zo = stringToBrush(v);
+            this._a("summarySectionBackground", brushToString(this.i.zo));
         },
         enumerable: true,
         configurable: true
@@ -2015,11 +2117,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the default opacity to use for pinned rows
         */
         get: function () {
-            return this.i.lf;
+            return this.i.lu;
         },
         set: function (v) {
-            this.i.lf = +v;
-            this._a("pinnedRowOpacity", this.i.lf);
+            this.i.lu = +v;
+            this._a("pinnedRowOpacity", this.i.lu);
         },
         enumerable: true,
         configurable: true
@@ -2029,16 +2131,16 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the font to use for cells that have been edited.
         */
         get: function () {
-            if (this.i.gl == null) {
+            if (this.i.gn == null) {
                 return null;
             }
-            return this.i.gl.fontString;
+            return this.i.gn.fontString;
         },
         set: function (v) {
             var fi = new FontInfo();
             fi.fontString = v;
-            this.i.gl = fi;
-            this._a("editTextStyle", this.i.gl != null ? this.i.gl.fontString : "");
+            this.i.gn = fi;
+            this._a("editTextStyle", this.i.gn != null ? this.i.gn.fontString : "");
         },
         enumerable: true,
         configurable: true
@@ -2048,11 +2150,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the default opacity for unsaved cell edits.
         */
         get: function () {
-            return this.i.le;
+            return this.i.lt;
         },
         set: function (v) {
-            this.i.le = +v;
-            this._a("editOpacity", this.i.le);
+            this.i.lt = +v;
+            this._a("editOpacity", this.i.lt);
         },
         enumerable: true,
         configurable: true
@@ -2062,11 +2164,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the text color for unsaved deleted rows.
         */
         get: function () {
-            return brushToString(this.i.xz);
+            return brushToString(this.i.y1);
         },
         set: function (v) {
-            this.i.xz = stringToBrush(v);
-            this._a("deletedTextColor", brushToString(this.i.xz));
+            this.i.y1 = stringToBrush(v);
+            this._a("deletedTextColor", brushToString(this.i.y1));
         },
         enumerable: true,
         configurable: true
@@ -2076,11 +2178,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the default color to use for sticky rows
         */
         get: function () {
-            return brushToString(this.i.yh);
+            return brushToString(this.i.zj);
         },
         set: function (v) {
-            this.i.yh = stringToBrush(v);
-            this._a("stickyRowBackground", brushToString(this.i.yh));
+            this.i.zj = stringToBrush(v);
+            this._a("stickyRowBackground", brushToString(this.i.zj));
         },
         enumerable: true,
         configurable: true
@@ -2090,11 +2192,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the default color to use for pinned rows
         */
         get: function () {
-            return brushToString(this.i.x7);
+            return brushToString(this.i.y9);
         },
         set: function (v) {
-            this.i.x7 = stringToBrush(v);
-            this._a("pinnedRowBackground", brushToString(this.i.x7));
+            this.i.y9 = stringToBrush(v);
+            this._a("pinnedRowBackground", brushToString(this.i.y9));
         },
         enumerable: true,
         configurable: true
@@ -2104,11 +2206,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the default color to use for the last sticky row
         */
         get: function () {
-            return brushToString(this.i.x6);
+            return brushToString(this.i.y8);
         },
         set: function (v) {
-            this.i.x6 = stringToBrush(v);
-            this._a("lastStickyRowBackground", brushToString(this.i.x6));
+            this.i.y8 = stringToBrush(v);
+            this._a("lastStickyRowBackground", brushToString(this.i.y8));
         },
         enumerable: true,
         configurable: true
@@ -2139,11 +2241,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the default background color to use for content cells
         */
         get: function () {
-            return brushToString(this.i.xt);
+            return brushToString(this.i.yv);
         },
         set: function (v) {
-            this.i.xt = stringToBrush(v);
-            this._a("cellBackground", brushToString(this.i.xt));
+            this.i.yv = stringToBrush(v);
+            this._a("cellBackground", brushToString(this.i.yv));
         },
         enumerable: true,
         configurable: true
@@ -2153,11 +2255,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the default text color to use for content cells
         */
         get: function () {
-            return brushToString(this.i.xv);
+            return brushToString(this.i.yx);
         },
         set: function (v) {
-            this.i.xv = stringToBrush(v);
-            this._a("cellTextColor", brushToString(this.i.xv));
+            this.i.yx = stringToBrush(v);
+            this._a("cellTextColor", brushToString(this.i.yx));
         },
         enumerable: true,
         configurable: true
@@ -2167,11 +2269,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the default text color to use for content cells
         */
         get: function () {
-            return brushToString(this.i.x4);
+            return brushToString(this.i.y6);
         },
         set: function (v) {
-            this.i.x4 = stringToBrush(v);
-            this._a("headerSortIndicatorColor", brushToString(this.i.x4));
+            this.i.y6 = stringToBrush(v);
+            this._a("headerSortIndicatorColor", brushToString(this.i.y6));
         },
         enumerable: true,
         configurable: true
@@ -2181,11 +2283,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the default render style for sort indicators in header cells.
         */
         get: function () {
-            return this.i.fv;
+            return this.i.fx;
         },
         set: function (v) {
-            this.i.fv = ensureEnum(SortIndicatorStyle_$type, v);
-            this._a("headerSortIndicatorStyle", enumToString(SortIndicatorStyle_$type, this.i.fv));
+            this.i.fx = ensureEnum(SortIndicatorStyle_$type, v);
+            this._a("headerSortIndicatorStyle", enumToString(SortIndicatorStyle_$type, this.i.fx));
         },
         enumerable: true,
         configurable: true
@@ -2195,16 +2297,16 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the font to use for content cells
         */
         get: function () {
-            if (this.i.gk == null) {
+            if (this.i.gm == null) {
                 return null;
             }
-            return this.i.gk.fontString;
+            return this.i.gm.fontString;
         },
         set: function (v) {
             var fi = new FontInfo();
             fi.fontString = v;
-            this.i.gk = fi;
-            this._a("cellTextStyle", this.i.gk != null ? this.i.gk.fontString : "");
+            this.i.gm = fi;
+            this._a("cellTextStyle", this.i.gm != null ? this.i.gm.fontString : "");
         },
         enumerable: true,
         configurable: true
@@ -2214,11 +2316,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the default background color to use for section header cells
         */
         get: function () {
-            return brushToString(this.i.ye);
+            return brushToString(this.i.zg);
         },
         set: function (v) {
-            this.i.ye = stringToBrush(v);
-            this._a("sectionHeaderBackground", brushToString(this.i.ye));
+            this.i.zg = stringToBrush(v);
+            this._a("sectionHeaderBackground", brushToString(this.i.zg));
         },
         enumerable: true,
         configurable: true
@@ -2228,11 +2330,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the default text color to use for section header cells
         */
         get: function () {
-            return brushToString(this.i.yg);
+            return brushToString(this.i.zi);
         },
         set: function (v) {
-            this.i.yg = stringToBrush(v);
-            this._a("sectionHeaderTextColor", brushToString(this.i.yg));
+            this.i.zi = stringToBrush(v);
+            this._a("sectionHeaderTextColor", brushToString(this.i.zi));
         },
         enumerable: true,
         configurable: true
@@ -2242,16 +2344,16 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the font to use for section header cells
         */
         get: function () {
-            if (this.i.gn == null) {
+            if (this.i.gp == null) {
                 return null;
             }
-            return this.i.gn.fontString;
+            return this.i.gp.fontString;
         },
         set: function (v) {
             var fi = new FontInfo();
             fi.fontString = v;
-            this.i.gn = fi;
-            this._a("sectionHeaderTextStyle", this.i.gn != null ? this.i.gn.fontString : "");
+            this.i.gp = fi;
+            this._a("sectionHeaderTextStyle", this.i.gp != null ? this.i.gp.fontString : "");
         },
         enumerable: true,
         configurable: true
@@ -2261,16 +2363,16 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the font to use for summary labels at the root level.
         */
         get: function () {
-            if (this.i.go == null) {
+            if (this.i.gq == null) {
                 return null;
             }
-            return this.i.go.fontString;
+            return this.i.gq.fontString;
         },
         set: function (v) {
             var fi = new FontInfo();
             fi.fontString = v;
-            this.i.go = fi;
-            this._a("summaryRootLabelTextStyle", this.i.go != null ? this.i.go.fontString : "");
+            this.i.gq = fi;
+            this._a("summaryRootLabelTextStyle", this.i.gq != null ? this.i.gq.fontString : "");
         },
         enumerable: true,
         configurable: true
@@ -2280,16 +2382,16 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the font to use for summary labels at the section level.
         */
         get: function () {
-            if (this.i.gq == null) {
+            if (this.i.gs == null) {
                 return null;
             }
-            return this.i.gq.fontString;
+            return this.i.gs.fontString;
         },
         set: function (v) {
             var fi = new FontInfo();
             fi.fontString = v;
-            this.i.gq = fi;
-            this._a("summarySectionLabelTextStyle", this.i.gq != null ? this.i.gq.fontString : "");
+            this.i.gs = fi;
+            this._a("summarySectionLabelTextStyle", this.i.gs != null ? this.i.gs.fontString : "");
         },
         enumerable: true,
         configurable: true
@@ -2299,11 +2401,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the default text color to use for summary cells at the root level.
         */
         get: function () {
-            return brushToString(this.i.yl);
+            return brushToString(this.i.zn);
         },
         set: function (v) {
-            this.i.yl = stringToBrush(v);
-            this._a("summaryRootValueTextColor", brushToString(this.i.yl));
+            this.i.zn = stringToBrush(v);
+            this._a("summaryRootValueTextColor", brushToString(this.i.zn));
         },
         enumerable: true,
         configurable: true
@@ -2313,16 +2415,16 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the font to use for summary values at the root level.
         */
         get: function () {
-            if (this.i.gp == null) {
+            if (this.i.gr == null) {
                 return null;
             }
-            return this.i.gp.fontString;
+            return this.i.gr.fontString;
         },
         set: function (v) {
             var fi = new FontInfo();
             fi.fontString = v;
-            this.i.gp = fi;
-            this._a("summaryRootValueTextStyle", this.i.gp != null ? this.i.gp.fontString : "");
+            this.i.gr = fi;
+            this._a("summaryRootValueTextStyle", this.i.gr != null ? this.i.gr.fontString : "");
         },
         enumerable: true,
         configurable: true
@@ -2332,16 +2434,16 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the font to use for summary values at the section level.
         */
         get: function () {
-            if (this.i.gr == null) {
+            if (this.i.gt == null) {
                 return null;
             }
-            return this.i.gr.fontString;
+            return this.i.gt.fontString;
         },
         set: function (v) {
             var fi = new FontInfo();
             fi.fontString = v;
-            this.i.gr = fi;
-            this._a("summarySectionValueTextStyle", this.i.gr != null ? this.i.gr.fontString : "");
+            this.i.gt = fi;
+            this._a("summarySectionValueTextStyle", this.i.gt != null ? this.i.gt.fontString : "");
         },
         enumerable: true,
         configurable: true
@@ -2351,11 +2453,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the default text color to use for summary cells at the section level.
         */
         get: function () {
-            return brushToString(this.i.yp);
+            return brushToString(this.i.zr);
         },
         set: function (v) {
-            this.i.yp = stringToBrush(v);
-            this._a("summarySectionValueTextColor", brushToString(this.i.yp));
+            this.i.zr = stringToBrush(v);
+            this._a("summarySectionValueTextColor", brushToString(this.i.zr));
         },
         enumerable: true,
         configurable: true
@@ -2365,11 +2467,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the default text color to use for summary labels in summary cells at the root level.
         */
         get: function () {
-            return brushToString(this.i.yj);
+            return brushToString(this.i.zl);
         },
         set: function (v) {
-            this.i.yj = stringToBrush(v);
-            this._a("summaryRootLabelTextColor", brushToString(this.i.yj));
+            this.i.zl = stringToBrush(v);
+            this._a("summaryRootLabelTextColor", brushToString(this.i.zl));
         },
         enumerable: true,
         configurable: true
@@ -2379,11 +2481,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the default text color to use for summary labels in summary cells at the section level.
         */
         get: function () {
-            return brushToString(this.i.yn);
+            return brushToString(this.i.zp);
         },
         set: function (v) {
-            this.i.yn = stringToBrush(v);
-            this._a("summarySectionLabelTextColor", brushToString(this.i.yn));
+            this.i.zp = stringToBrush(v);
+            this._a("summarySectionLabelTextColor", brushToString(this.i.zp));
         },
         enumerable: true,
         configurable: true
@@ -2393,11 +2495,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the default background color to use for summary cells at the root level.
         */
         get: function () {
-            return brushToString(this.i.yk);
+            return brushToString(this.i.zm);
         },
         set: function (v) {
-            this.i.yk = stringToBrush(v);
-            this._a("summaryRootSelectedBackground", brushToString(this.i.yk));
+            this.i.zm = stringToBrush(v);
+            this._a("summaryRootSelectedBackground", brushToString(this.i.zm));
         },
         enumerable: true,
         configurable: true
@@ -2407,11 +2509,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the default background color to use for summary cells at the section level.
         */
         get: function () {
-            return brushToString(this.i.yo);
+            return brushToString(this.i.zq);
         },
         set: function (v) {
-            this.i.yo = stringToBrush(v);
-            this._a("summarySectionSelectedBackground", brushToString(this.i.yo));
+            this.i.zq = stringToBrush(v);
+            this._a("summarySectionSelectedBackground", brushToString(this.i.zq));
         },
         enumerable: true,
         configurable: true
@@ -2421,11 +2523,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the width of the pinned area separators.
         */
         get: function () {
-            return this.i.m6;
+            return this.i.nn;
         },
         set: function (v) {
-            this.i.m6 = +v;
-            this._a("pinnedAreaSeparatorWidth", this.i.m6);
+            this.i.nn = +v;
+            this._a("pinnedAreaSeparatorWidth", this.i.nn);
         },
         enumerable: true,
         configurable: true
@@ -2435,11 +2537,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the width of the header separators.
         */
         get: function () {
-            return this.i.m4;
+            return this.i.nk;
         },
         set: function (v) {
-            this.i.m4 = +v;
-            this._a("headerSeparatorWidth", this.i.m4);
+            this.i.nk = +v;
+            this._a("headerSeparatorWidth", this.i.nk);
         },
         enumerable: true,
         configurable: true
@@ -2449,11 +2551,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the default background color to use for header separators.
         */
         get: function () {
-            return brushToString(this.i.x3);
+            return brushToString(this.i.y5);
         },
         set: function (v) {
-            this.i.x3 = stringToBrush(v);
-            this._a("headerSeparatorBackground", brushToString(this.i.x3));
+            this.i.y5 = stringToBrush(v);
+            this._a("headerSeparatorBackground", brushToString(this.i.y5));
         },
         enumerable: true,
         configurable: true
@@ -2463,11 +2565,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the default background color to use for header cells
         */
         get: function () {
-            return brushToString(this.i.x1);
+            return brushToString(this.i.y3);
         },
         set: function (v) {
-            this.i.x1 = stringToBrush(v);
-            this._a("headerBackground", brushToString(this.i.x1));
+            this.i.y3 = stringToBrush(v);
+            this._a("headerBackground", brushToString(this.i.y3));
         },
         enumerable: true,
         configurable: true
@@ -2477,11 +2579,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the default text color to use for header cells
         */
         get: function () {
-            return brushToString(this.i.x5);
+            return brushToString(this.i.y7);
         },
         set: function (v) {
-            this.i.x5 = stringToBrush(v);
-            this._a("headerTextColor", brushToString(this.i.x5));
+            this.i.y7 = stringToBrush(v);
+            this._a("headerTextColor", brushToString(this.i.y7));
         },
         enumerable: true,
         configurable: true
@@ -2491,16 +2593,16 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the font to use for header cells
         */
         get: function () {
-            if (this.i.gm == null) {
+            if (this.i.go == null) {
                 return null;
             }
-            return this.i.gm.fontString;
+            return this.i.go.fontString;
         },
         set: function (v) {
             var fi = new FontInfo();
             fi.fontString = v;
-            this.i.gm = fi;
-            this._a("headerTextStyle", this.i.gm != null ? this.i.gm.fontString : "");
+            this.i.go = fi;
+            this._a("headerTextStyle", this.i.go != null ? this.i.go.fontString : "");
         },
         enumerable: true,
         configurable: true
@@ -2510,22 +2612,22 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the default background color to use for row separators
         */
         get: function () {
-            return brushToString(this.i.ya);
+            return brushToString(this.i.zc);
         },
         set: function (v) {
-            this.i.ya = stringToBrush(v);
-            this._a("rowSeparatorBackground", brushToString(this.i.ya));
+            this.i.zc = stringToBrush(v);
+            this._a("rowSeparatorBackground", brushToString(this.i.zc));
         },
         enumerable: true,
         configurable: true
     });
     Object.defineProperty(IgcDataGridComponent.prototype, "headerRowSeparatorBackground", {
         get: function () {
-            return brushToString(this.i.x2);
+            return brushToString(this.i.y4);
         },
         set: function (v) {
-            this.i.x2 = stringToBrush(v);
-            this._a("headerRowSeparatorBackground", brushToString(this.i.x2));
+            this.i.y4 = stringToBrush(v);
+            this._a("headerRowSeparatorBackground", brushToString(this.i.y4));
         },
         enumerable: true,
         configurable: true
@@ -2535,11 +2637,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the default sticky row background color to use for row separators
         */
         get: function () {
-            return brushToString(this.i.yd);
+            return brushToString(this.i.zf);
         },
         set: function (v) {
-            this.i.yd = stringToBrush(v);
-            this._a("rowSeparatorStickyRowBackground", brushToString(this.i.yd));
+            this.i.zf = stringToBrush(v);
+            this._a("rowSeparatorStickyRowBackground", brushToString(this.i.zf));
         },
         enumerable: true,
         configurable: true
@@ -2549,11 +2651,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the default last sticky row background color to use for row separators
         */
         get: function () {
-            return brushToString(this.i.yb);
+            return brushToString(this.i.zd);
         },
         set: function (v) {
-            this.i.yb = stringToBrush(v);
-            this._a("rowSeparatorLastStickyRowBackground", brushToString(this.i.yb));
+            this.i.zd = stringToBrush(v);
+            this._a("rowSeparatorLastStickyRowBackground", brushToString(this.i.zd));
         },
         enumerable: true,
         configurable: true
@@ -2563,11 +2665,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the pinned row background color to use for row separators
         */
         get: function () {
-            return brushToString(this.i.yc);
+            return brushToString(this.i.ze);
         },
         set: function (v) {
-            this.i.yc = stringToBrush(v);
-            this._a("rowSeparatorPinnedRowBackground", brushToString(this.i.yc));
+            this.i.ze = stringToBrush(v);
+            this._a("rowSeparatorPinnedRowBackground", brushToString(this.i.ze));
         },
         enumerable: true,
         configurable: true
@@ -2577,11 +2679,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Sets or gets the width to use for the column resizing separator.
         */
         get: function () {
-            return this.i.mi;
+            return this.i.my;
         },
         set: function (v) {
-            this.i.mi = +v;
-            this._a("columnResizingSeparatorWidth", this.i.mi);
+            this.i.my = +v;
+            this._a("columnResizingSeparatorWidth", this.i.my);
         },
         enumerable: true,
         configurable: true
@@ -2591,11 +2693,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the opacity of the column Resizing separator.
         */
         get: function () {
-            return this.i.lc;
+            return this.i.lr;
         },
         set: function (v) {
-            this.i.lc = +v;
-            this._a("columnResizingSeparatorOpacity", this.i.lc);
+            this.i.lr = +v;
+            this._a("columnResizingSeparatorOpacity", this.i.lr);
         },
         enumerable: true,
         configurable: true
@@ -2605,11 +2707,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Sets or gets the width to use for the column resizing separator.
         */
         get: function () {
-            return this.i.mg;
+            return this.i.mw;
         },
         set: function (v) {
-            this.i.mg = +v;
-            this._a("columnMovingSeparatorWidth", this.i.mg);
+            this.i.mw = +v;
+            this._a("columnMovingSeparatorWidth", this.i.mw);
         },
         enumerable: true,
         configurable: true
@@ -2619,11 +2721,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the opacity of the column moving separator.
         */
         get: function () {
-            return this.i.lb;
+            return this.i.lq;
         },
         set: function (v) {
-            this.i.lb = +v;
-            this._a("columnMovingSeparatorOpacity", this.i.lb);
+            this.i.lq = +v;
+            this._a("columnMovingSeparatorOpacity", this.i.lq);
         },
         enumerable: true,
         configurable: true
@@ -2633,11 +2735,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the default background color to use for column resizing separator.
         */
         get: function () {
-            return brushToString(this.i.xy);
+            return brushToString(this.i.y0);
         },
         set: function (v) {
-            this.i.xy = stringToBrush(v);
-            this._a("columnResizingSeparatorBackground", brushToString(this.i.xy));
+            this.i.y0 = stringToBrush(v);
+            this._a("columnResizingSeparatorBackground", brushToString(this.i.y0));
         },
         enumerable: true,
         configurable: true
@@ -2647,11 +2749,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the default background color to use for column moving separator.
         */
         get: function () {
-            return brushToString(this.i.xw);
+            return brushToString(this.i.yy);
         },
         set: function (v) {
-            this.i.xw = stringToBrush(v);
-            this._a("columnMovingSeparatorBackground", brushToString(this.i.xw));
+            this.i.yy = stringToBrush(v);
+            this._a("columnMovingSeparatorBackground", brushToString(this.i.yy));
         },
         enumerable: true,
         configurable: true
@@ -2661,11 +2763,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets if the section header content should be shifted into the normal column scrollable area when there are pinned columns
         */
         get: function () {
-            return this.i.j6;
+            return this.i.kk;
         },
         set: function (v) {
-            this.i.j6 = ensureBool(v);
-            this._a("shiftSectionContent", this.i.j6);
+            this.i.kk = ensureBool(v);
+            this._a("shiftSectionContent", this.i.kk);
         },
         enumerable: true,
         configurable: true
@@ -2689,11 +2791,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the column options icon color in header cells.
         */
         get: function () {
-            return brushToString(this.i.xx);
+            return brushToString(this.i.yz);
         },
         set: function (v) {
-            this.i.xx = stringToBrush(v);
-            this._a("columnOptionsIconColor", brushToString(this.i.xx));
+            this.i.yz = stringToBrush(v);
+            this._a("columnOptionsIconColor", brushToString(this.i.yz));
         },
         enumerable: true,
         configurable: true
@@ -2731,212 +2833,212 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets the actual border width.
         */
         get: function () {
-            return this.i.yy;
+            return this.i.z0;
         },
         set: function (v) {
-            this.i.yy = v;
+            this.i.z0 = v;
         },
         enumerable: true,
         configurable: true
     });
     Object.defineProperty(IgcDataGridComponent.prototype, "borderWidthBottom", {
         get: function () {
-            return this.i.yz ? this.i.yz.b : NaN;
+            return this.i.z1 ? this.i.z1.bottom : NaN;
         },
         set: function (v) {
             this.ensureBorderWidth();
-            this.i.yz.b = +v;
-            this._a("borderWidthBottom", this.i.yz.b);
-            this.i.yz = this.i.yz;
+            this.i.z1.bottom = +v;
+            this._a("borderWidthBottom", this.i.z1.bottom);
+            this.i.z1 = this.i.z1;
         },
         enumerable: true,
         configurable: true
     });
     Object.defineProperty(IgcDataGridComponent.prototype, "borderWidthLeft", {
         get: function () {
-            return this.i.yz ? this.i.yz.c : NaN;
+            return this.i.z1 ? this.i.z1.left : NaN;
         },
         set: function (v) {
             this.ensureBorderWidth();
-            this.i.yz.c = +v;
-            this._a("borderWidthLeft", this.i.yz.c);
-            this.i.yz = this.i.yz;
+            this.i.z1.left = +v;
+            this._a("borderWidthLeft", this.i.z1.left);
+            this.i.z1 = this.i.z1;
         },
         enumerable: true,
         configurable: true
     });
     Object.defineProperty(IgcDataGridComponent.prototype, "borderWidthRight", {
         get: function () {
-            return this.i.yz ? this.i.yz.d : NaN;
+            return this.i.z1 ? this.i.z1.right : NaN;
         },
         set: function (v) {
             this.ensureBorderWidth();
-            this.i.yz.d = +v;
-            this._a("borderWidthRight", this.i.yz.d);
-            this.i.yz = this.i.yz;
+            this.i.z1.right = +v;
+            this._a("borderWidthRight", this.i.z1.right);
+            this.i.z1 = this.i.z1;
         },
         enumerable: true,
         configurable: true
     });
     Object.defineProperty(IgcDataGridComponent.prototype, "borderWidthTop", {
         get: function () {
-            return this.i.yz ? this.i.yz.e : NaN;
+            return this.i.z1 ? this.i.z1.top : NaN;
         },
         set: function (v) {
             this.ensureBorderWidth();
-            this.i.yz.e = +v;
-            this._a("borderWidthTop", this.i.yz.e);
-            this.i.yz = this.i.yz;
+            this.i.z1.top = +v;
+            this._a("borderWidthTop", this.i.z1.top);
+            this.i.z1 = this.i.z1;
         },
         enumerable: true,
         configurable: true
     });
     IgcDataGridComponent.prototype.ensureBorderWidth = function () {
-        if (this.i.yz) {
+        if (this.i.z1) {
             return;
         }
-        this.i.yz = new Thickness(2);
+        this.i.z1 = new Thickness(2);
     };
     Object.defineProperty(IgcDataGridComponent.prototype, "notifyOnAllSelectionChanges", {
         /**
          * Gets or sets if the grid should notify on programmatic selection changes as well as changes from the UI.
         */
         get: function () {
-            return this.i.ji;
+            return this.i.jw;
         },
         set: function (v) {
-            this.i.ji = ensureBool(v);
-            this._a("notifyOnAllSelectionChanges", this.i.ji);
+            this.i.jw = ensureBool(v);
+            this._a("notifyOnAllSelectionChanges", this.i.jw);
         },
         enumerable: true,
         configurable: true
     });
     Object.defineProperty(IgcDataGridComponent.prototype, "cornerRadiusBottomRight", {
         get: function () {
-            return this.i.ws ? this.i.ws.b : NaN;
+            return this.i.xu ? this.i.xu.b : NaN;
         },
         set: function (v) {
             this.ensureCornerRadius();
-            this.i.ws.b = +v;
-            this._a("cornerRadiusBottomRight", this.i.ws.b);
-            this.i.ws = this.i.ws;
+            this.i.xu.b = +v;
+            this._a("cornerRadiusBottomRight", this.i.xu.b);
+            this.i.xu = this.i.xu;
         },
         enumerable: true,
         configurable: true
     });
     Object.defineProperty(IgcDataGridComponent.prototype, "cornerRadiusBottomLeft", {
         get: function () {
-            return this.i.ws ? this.i.ws.a : NaN;
+            return this.i.xu ? this.i.xu.a : NaN;
         },
         set: function (v) {
             this.ensureCornerRadius();
-            this.i.ws.a = +v;
-            this._a("cornerRadiusBottomLeft", this.i.ws.a);
-            this.i.ws = this.i.ws;
+            this.i.xu.a = +v;
+            this._a("cornerRadiusBottomLeft", this.i.xu.a);
+            this.i.xu = this.i.xu;
         },
         enumerable: true,
         configurable: true
     });
     Object.defineProperty(IgcDataGridComponent.prototype, "cornerRadiusTopLeft", {
         get: function () {
-            return this.i.ws ? this.i.ws.c : NaN;
+            return this.i.xu ? this.i.xu.c : NaN;
         },
         set: function (v) {
             this.ensureCornerRadius();
-            this.i.ws.c = +v;
-            this._a("cornerRadiusTopLeft", this.i.ws.c);
-            this.i.ws = this.i.ws;
+            this.i.xu.c = +v;
+            this._a("cornerRadiusTopLeft", this.i.xu.c);
+            this.i.xu = this.i.xu;
         },
         enumerable: true,
         configurable: true
     });
     Object.defineProperty(IgcDataGridComponent.prototype, "cornerRadiusTopRight", {
         get: function () {
-            return this.i.ws ? this.i.ws.d : NaN;
+            return this.i.xu ? this.i.xu.d : NaN;
         },
         set: function (v) {
             this.ensureCornerRadius();
-            this.i.ws.d = +v;
-            this._a("cornerRadiusTopRight", this.i.ws.d);
-            this.i.ws = this.i.ws;
+            this.i.xu.d = +v;
+            this._a("cornerRadiusTopRight", this.i.xu.d);
+            this.i.xu = this.i.xu;
         },
         enumerable: true,
         configurable: true
     });
     IgcDataGridComponent.prototype.ensureCornerRadius = function () {
-        if (this.i.ws) {
+        if (this.i.xu) {
             return;
         }
-        this.i.ws = new CornerRadius(2);
+        this.i.xu = new CornerRadius(2);
     };
     Object.defineProperty(IgcDataGridComponent.prototype, "actualCornerRadiusBottomRight", {
         get: function () {
-            return this.i.wq ? this.i.wq.b : NaN;
+            return this.i.xs ? this.i.xs.b : NaN;
         },
         set: function (v) {
             this.ensureActualCornerRadius();
-            this.i.wq.b = +v;
-            this._a("actualCornerRadiusBottomRight", this.i.wq.b);
-            this.i.wq = this.i.wq;
+            this.i.xs.b = +v;
+            this._a("actualCornerRadiusBottomRight", this.i.xs.b);
+            this.i.xs = this.i.xs;
         },
         enumerable: true,
         configurable: true
     });
     Object.defineProperty(IgcDataGridComponent.prototype, "actualCornerRadiusBottomLeft", {
         get: function () {
-            return this.i.wq ? this.i.wq.a : NaN;
+            return this.i.xs ? this.i.xs.a : NaN;
         },
         set: function (v) {
             this.ensureActualCornerRadius();
-            this.i.wq.a = +v;
-            this._a("actualCornerRadiusBottomLeft", this.i.wq.a);
-            this.i.wq = this.i.wq;
+            this.i.xs.a = +v;
+            this._a("actualCornerRadiusBottomLeft", this.i.xs.a);
+            this.i.xs = this.i.xs;
         },
         enumerable: true,
         configurable: true
     });
     Object.defineProperty(IgcDataGridComponent.prototype, "actualCornerRadiusTopLeft", {
         get: function () {
-            return this.i.wq ? this.i.wq.c : NaN;
+            return this.i.xs ? this.i.xs.c : NaN;
         },
         set: function (v) {
             this.ensureActualCornerRadius();
-            this.i.wq.c = +v;
-            this._a("actualCornerRadiusTopLeft", this.i.wq.c);
-            this.i.wq = this.i.wq;
+            this.i.xs.c = +v;
+            this._a("actualCornerRadiusTopLeft", this.i.xs.c);
+            this.i.xs = this.i.xs;
         },
         enumerable: true,
         configurable: true
     });
     Object.defineProperty(IgcDataGridComponent.prototype, "actualCornerRadiusTopRight", {
         get: function () {
-            return this.i.wq ? this.i.wq.d : NaN;
+            return this.i.xs ? this.i.xs.d : NaN;
         },
         set: function (v) {
             this.ensureActualCornerRadius();
-            this.i.wq.d = +v;
-            this._a("actualCornerRadiusTopRight", this.i.wq.d);
-            this.i.wq = this.i.wq;
+            this.i.xs.d = +v;
+            this._a("actualCornerRadiusTopRight", this.i.xs.d);
+            this.i.xs = this.i.xs;
         },
         enumerable: true,
         configurable: true
     });
     IgcDataGridComponent.prototype.ensureActualCornerRadius = function () {
-        if (this.i.wq) {
+        if (this.i.xs) {
             return;
         }
-        this.i.wq = new CornerRadius(2);
+        this.i.xs = new CornerRadius(2);
     };
     Object.defineProperty(IgcDataGridComponent.prototype, "isActiveCellStyleEnabled", {
         /**
          * Gets or sets whether the active cell style will be applied to cells when made active.
         */
         get: function () {
-            return this.i.ik;
+            return this.i.it;
         },
         set: function (v) {
-            this.i.ik = ensureBool(v);
-            this._a("isActiveCellStyleEnabled", this.i.ik);
+            this.i.it = ensureBool(v);
+            this._a("isActiveCellStyleEnabled", this.i.it);
         },
         enumerable: true,
         configurable: true
@@ -2948,7 +3050,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         get: function () {
             if (this._responsiveStates === null) {
                 var coll = new IgcResponsiveStatesCollection();
-                var innerColl = this.i.ff;
+                var innerColl = this.i.fh;
                 if (!innerColl) {
                     innerColl = new ResponsiveStatesCollection_internal();
                 }
@@ -2964,7 +3066,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
             var coll = new IgcResponsiveStatesCollection();
             this._responsiveStates = coll._fromOuter(v);
             var syncColl = new SyncableObservableCollection$1(ResponsiveState.$type);
-            var innerColl = this.i.ff;
+            var innerColl = this.i.fh;
             if (!innerColl) {
                 innerColl = new ResponsiveStatesCollection_internal();
             }
@@ -2980,7 +3082,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets the region of the grid that is visible.
         */
         get: function () {
-            return fromRect(this.i.yr);
+            return fromRect(this.i.zt);
         },
         enumerable: true,
         configurable: true
@@ -3062,11 +3164,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the scope which summaries are calculated for.
         */
         get: function () {
-            return this.i.f5;
+            return this.i.f7;
         },
         set: function (v) {
-            this.i.f5 = ensureEnum(SummaryScope_$type, v);
-            this._a("summaryScope", enumToString(SummaryScope_$type, this.i.f5));
+            this.i.f7 = ensureEnum(SummaryScope_$type, v);
+            this._a("summaryScope", enumToString(SummaryScope_$type, this.i.f7));
         },
         enumerable: true,
         configurable: true
@@ -3076,11 +3178,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets whether group headers are collapsable.
         */
         get: function () {
-            return this.i.i2;
+            return this.i.jb;
         },
         set: function (v) {
-            this.i.i2 = ensureBool(v);
-            this._a("isGroupCollapsable", this.i.i2);
+            this.i.jb = ensureBool(v);
+            this._a("isGroupCollapsable", this.i.jb);
         },
         enumerable: true,
         configurable: true
@@ -3104,11 +3206,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets whether groups are expanded or collapsed by default.
         */
         get: function () {
-            return this.i.i3;
+            return this.i.jc;
         },
         set: function (v) {
-            this.i.i3 = ensureBool(v);
-            this._a("isGroupExpandedDefault", this.i.i3);
+            this.i.jc = ensureBool(v);
+            this._a("isGroupExpandedDefault", this.i.jc);
         },
         enumerable: true,
         configurable: true
@@ -3141,11 +3243,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * will be auto accepted.
         */
         get: function () {
-            return this.i.h5;
+            return this.i.id;
         },
         set: function (v) {
-            this.i.h5 = ensureBool(v);
-            this._a("autoAcceptEdits", this.i.h5);
+            this.i.id = ensureBool(v);
+            this._a("autoAcceptEdits", this.i.id);
         },
         enumerable: true,
         configurable: true
@@ -3221,11 +3323,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Sets or gets whether the grid will react to sort changes.
         */
         get: function () {
-            return this.i.jz;
+            return this.i.kd;
         },
         set: function (v) {
-            this.i.jz = ensureBool(v);
-            this._a("reactsToSortChanges", this.i.jz);
+            this.i.kd = ensureBool(v);
+            this._a("reactsToSortChanges", this.i.kd);
         },
         enumerable: true,
         configurable: true
@@ -3235,11 +3337,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Sets or gets whether the grid will react to group changes.
         */
         get: function () {
-            return this.i.jy;
+            return this.i.kc;
         },
         set: function (v) {
-            this.i.jy = ensureBool(v);
-            this._a("reactsToGroupChanges", this.i.jy);
+            this.i.kc = ensureBool(v);
+            this._a("reactsToGroupChanges", this.i.kc);
         },
         enumerable: true,
         configurable: true
@@ -3249,11 +3351,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Sets or gets whether the grid will react to filter changes.
         */
         get: function () {
-            return this.i.jx;
+            return this.i.kb;
         },
         set: function (v) {
-            this.i.jx = ensureBool(v);
-            this._a("reactsToFilterChanges", this.i.jx);
+            this.i.kb = ensureBool(v);
+            this._a("reactsToFilterChanges", this.i.kb);
         },
         enumerable: true,
         configurable: true
@@ -3263,7 +3365,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets whether an undo can be performed.
         */
         get: function () {
-            return this.i.ic;
+            return this.i.il;
         },
         enumerable: true,
         configurable: true
@@ -3273,7 +3375,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets whether a redo can be performed.
         */
         get: function () {
-            return this.i.ib;
+            return this.i.ik;
         },
         enumerable: true,
         configurable: true
@@ -3284,7 +3386,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * on any pending transactions.
         */
         get: function () {
-            return this.i.h8;
+            return this.i.ih;
         },
         enumerable: true,
         configurable: true
@@ -3322,11 +3424,25 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets whether to show the summaries option in the column options menu.
         */
         get: function () {
-            return this.i.iv;
+            return this.i.i4;
         },
         set: function (v) {
-            this.i.iv = ensureBool(v);
-            this._a("isColumnOptionsSummariesEnabled", this.i.iv);
+            this.i.i4 = ensureBool(v);
+            this._a("isColumnOptionsSummariesEnabled", this.i.i4);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridComponent.prototype, "isColumnOptionsGroupingEnabled", {
+        /**
+         * Gets or sets whether to show the grouping option in the column options menu.
+        */
+        get: function () {
+            return this.i.i3;
+        },
+        set: function (v) {
+            this.i.i3 = ensureBool(v);
+            this._a("isColumnOptionsGroupingEnabled", this.i.i3);
         },
         enumerable: true,
         configurable: true
@@ -3336,11 +3452,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets if and how cell merging is performed for all fields.
         */
         get: function () {
-            return this.i.e8;
+            return this.i.e9;
         },
         set: function (v) {
-            this.i.e8 = ensureEnum(MergedCellMode_$type, v);
-            this._a("mergedCellMode", enumToString(MergedCellMode_$type, this.i.e8));
+            this.i.e9 = ensureEnum(MergedCellMode_$type, v);
+            this._a("mergedCellMode", enumToString(MergedCellMode_$type, this.i.e9));
         },
         enumerable: true,
         configurable: true
@@ -3350,11 +3466,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets how cells are evaluated for merging.
         */
         get: function () {
-            return this.i.e6;
+            return this.i.e7;
         },
         set: function (v) {
-            this.i.e6 = ensureEnum(MergedCellEvaluationCriteria_$type, v);
-            this._a("mergedCellEvaluationCriteria", enumToString(MergedCellEvaluationCriteria_$type, this.i.e6));
+            this.i.e7 = ensureEnum(MergedCellEvaluationCriteria_$type, v);
+            this._a("mergedCellEvaluationCriteria", enumToString(MergedCellEvaluationCriteria_$type, this.i.e7));
         },
         enumerable: true,
         configurable: true
@@ -3417,10 +3533,10 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     });
     Object.defineProperty(IgcDataGridComponent.prototype, "todayOverride", {
         get: function () {
-            return this.i.kp;
+            return this.i.k4;
         },
         set: function (v) {
-            this.i.kp = v;
+            this.i.k4 = v;
         },
         enumerable: true,
         configurable: true
@@ -3430,11 +3546,118 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets whether selection is cleared when pressing the Escape key.
         */
         get: function () {
-            return this.i.id;
+            return this.i.im;
         },
         set: function (v) {
-            this.i.id = ensureBool(v);
-            this._a("clearSelectionOnEscape", this.i.id);
+            this.i.im = ensureBool(v);
+            this._a("clearSelectionOnEscape", this.i.im);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridComponent.prototype, "pageSize", {
+        /**
+         * Gets or sets the size of each page when the pager is visible.
+        */
+        get: function () {
+            return this.i.nl;
+        },
+        set: function (v) {
+            this.i.nl = +v;
+            this._a("pageSize", this.i.nl);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridComponent.prototype, "isToolbarColumnChooserVisible", {
+        /**
+         * Gets or sets whether to show the column chooser button in the toolbar.
+        */
+        get: function () {
+            return this.i.jr;
+        },
+        set: function (v) {
+            this.i.jr = ensureBool(v);
+            this._a("isToolbarColumnChooserVisible", this.i.jr);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridComponent.prototype, "isToolbarColumnPinningVisible", {
+        /**
+         * Gets or sets whether to show the column pinning button in the toolbar.
+        */
+        get: function () {
+            return this.i.js;
+        },
+        set: function (v) {
+            this.i.js = ensureBool(v);
+            this._a("isToolbarColumnPinningVisible", this.i.js);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridComponent.prototype, "toolbarTitle", {
+        /**
+         * Gets or sets the title text to use in the toolbar.
+        */
+        get: function () {
+            return this.i.ss;
+        },
+        set: function (v) {
+            this.i.ss = v;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridComponent.prototype, "toolbarColumnChooserText", {
+        /**
+         * Gets or sets the column chooser button text to use in the toolbar.
+        */
+        get: function () {
+            return this.i.sk;
+        },
+        set: function (v) {
+            this.i.sk = v;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridComponent.prototype, "toolbarColumnChooserTitle", {
+        /**
+         * Gets or sets the column chooser title text to use in the toolbar.
+        */
+        get: function () {
+            return this.i.sm;
+        },
+        set: function (v) {
+            this.i.sm = v;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridComponent.prototype, "toolbarColumnPinningText", {
+        /**
+         * Gets or sets the column pinning button text to use in the toolbar.
+        */
+        get: function () {
+            return this.i.so;
+        },
+        set: function (v) {
+            this.i.so = v;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridComponent.prototype, "toolbarColumnPinningTitle", {
+        /**
+         * Gets or sets the column pinning title text to use in the toolbar.
+        */
+        get: function () {
+            return this.i.sq;
+        },
+        set: function (v) {
+            this.i.sq = v;
         },
         enumerable: true,
         configurable: true
@@ -3597,14 +3820,14 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
 
 */
     IgcDataGridComponent.prototype.refresh = function () {
-        this.i.vd();
+        this.i.wf();
     };
     /**
      * Makes sure pending work has completed if the grid need to be synchronously examined.
     
     */
     IgcDataGridComponent.prototype.flush = function () {
-        this.i.sk();
+        this.i.tm();
     };
     IgcDataGridComponent.prototype.notifyScrollStart = function () {
         this.i.notifyScrollStart();
@@ -3613,13 +3836,13 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         this.i.notifyScrollStop();
     };
     IgcDataGridComponent.prototype.exchangeColumn = function (newColumn, oldColumn) {
-        this.i.si((newColumn == null ? null : newColumn.i), (oldColumn == null ? null : oldColumn.i));
+        this.i.tk((newColumn == null ? null : newColumn.i), (oldColumn == null ? null : oldColumn.i));
     };
     IgcDataGridComponent.prototype.pinColumn = function (column, position) {
-        this.i.u6((column == null ? null : column.i), (position == null ? null : position));
+        this.i.v8((column == null ? null : column.i), (position == null ? null : position));
     };
     IgcDataGridComponent.prototype.moveColumn = function (oldIndex, newIndex) {
-        this.i.sw(oldIndex, newIndex);
+        this.i.ty(oldIndex, newIndex);
     };
     /**
      * Moves a column to the left, if possible.
@@ -3627,7 +3850,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     * @param columnIndex  * The index of the column to move.
     */
     IgcDataGridComponent.prototype.moveColumnLeft = function (columnIndex) {
-        this.i.sx(columnIndex);
+        this.i.tz(columnIndex);
     };
     /**
      * Moves a column to the right, if possible.
@@ -3635,7 +3858,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     * @param columnIndex  * The index of the column to move.
     */
     IgcDataGridComponent.prototype.moveColumnRight = function (columnIndex) {
-        this.i.sy(columnIndex);
+        this.i.t0(columnIndex);
     };
     /**
      * Returns true if a column can be moved to the left of it's current position; otherwise false.
@@ -3643,7 +3866,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     * @param columnIndex  * The index of the column.
     */
     IgcDataGridComponent.prototype.canMoveColumnLeft = function (columnIndex) {
-        var iv = this.i.h9(columnIndex);
+        var iv = this.i.ii(columnIndex);
         return (iv);
     };
     /**
@@ -3652,7 +3875,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     * @param columnIndex  * The index of the column.
     */
     IgcDataGridComponent.prototype.canMoveColumnRight = function (columnIndex) {
-        var iv = this.i.ia(columnIndex);
+        var iv = this.i.ij(columnIndex);
         return (iv);
     };
     /**
@@ -3660,7 +3883,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     
     */
     IgcDataGridComponent.prototype.exportVisualModel = function () {
-        var iv = this.i.nj();
+        var iv = this.i.n0();
         return (iv);
     };
     /**
@@ -3668,7 +3891,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     
     */
     IgcDataGridComponent.prototype.exportSerializedVisualModel = function () {
-        var iv = this.i.pb();
+        var iv = this.i.px();
         return (iv);
     };
     /**
@@ -3677,7 +3900,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     * @param rowNumber  * The row index to scroll to.
     */
     IgcDataGridComponent.prototype.scrollToRowByIndex = function (rowNumber) {
-        this.i.vw(rowNumber);
+        this.i.wy(rowNumber);
     };
     /**
      * Scrolls the grid so that a row is the last visible, by index.
@@ -3685,7 +3908,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     * @param rowNumber  * The row index to scroll to.
     */
     IgcDataGridComponent.prototype.scrollToLastRowByIndex = function (rowNumber) {
-        this.i.vv(rowNumber);
+        this.i.wx(rowNumber);
     };
     /**
      * Scrolls to an item, if found.
@@ -3693,11 +3916,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     * @param item  * The item to scroll to.
     */
     IgcDataGridComponent.prototype.scrollToItem = function (item) {
-        var iv = this.i.j4(item);
+        var iv = this.i.ki(item);
         return (iv);
     };
     IgcDataGridComponent.prototype.scrollToPrimaryKey = function (key) {
-        var iv = this.i.j5(key);
+        var iv = this.i.kj(key);
         return (iv);
     };
     /**
@@ -3706,14 +3929,14 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     * @param columnNumber  * The column number to scroll to.
     */
     IgcDataGridComponent.prototype.scrollToColumnByIndex = function (columnNumber) {
-        this.i.vt(columnNumber);
+        this.i.wv(columnNumber);
     };
     /**
      * Gets the last visible index in the grid.
     
     */
     IgcDataGridComponent.prototype.getLastVisibleIndex = function () {
-        var iv = this.i.mw();
+        var iv = this.i.nc();
         return (iv);
     };
     /**
@@ -3721,7 +3944,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     
     */
     IgcDataGridComponent.prototype.getFirstVisibleIndex = function () {
-        var iv = this.i.mr();
+        var iv = this.i.m7();
         return (iv);
     };
     /**
@@ -3729,7 +3952,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     
     */
     IgcDataGridComponent.prototype.invalidateVisibleRows = function () {
-        this.i.su();
+        this.i.tw();
     };
     /**
      * Manually set the active responsive state of the grid.
@@ -3737,10 +3960,10 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     * @param name
     */
     IgcDataGridComponent.prototype.setActiveResponsiveState = function (name) {
-        this.i.v4(name);
+        this.i.w6(name);
     };
     IgcDataGridComponent.prototype.notifySetItem = function (index, oldItem, newItem) {
-        this.i.s6(index, oldItem, newItem);
+        this.i.t8(index, oldItem, newItem);
     };
     /**
      * Manually notifies the grid's data source that the data it has bound to has been cleared and needs to be re-examined.
@@ -3748,13 +3971,13 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     
     */
     IgcDataGridComponent.prototype.notifyClearItems = function () {
-        this.i.s0();
+        this.i.t2();
     };
     IgcDataGridComponent.prototype.notifyInsertItem = function (index, newItem) {
-        this.i.s2(index, newItem);
+        this.i.t4(index, newItem);
     };
     IgcDataGridComponent.prototype.notifyRemoveItem = function (index, oldItem) {
-        this.i.s3(index, oldItem);
+        this.i.t5(index, oldItem);
     };
     /**
      * Returns the data index of an item within the bound data source.
@@ -3762,11 +3985,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     * @param item  * The item from which to get the index.
     */
     IgcDataGridComponent.prototype.dataIndexOfItem = function (item) {
-        var iv = this.i.mk(item);
+        var iv = this.i.m0(item);
         return (iv);
     };
     IgcDataGridComponent.prototype.dataIndexOfPrimaryKey = function (key) {
-        var iv = this.i.ml(key);
+        var iv = this.i.m1(key);
         return (iv);
     };
     /**
@@ -3775,11 +3998,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     * @param cellKey  * The cell to resolve.
     */
     IgcDataGridComponent.prototype.resolveCellValue = function (cellKey) {
-        var iv = this.i.nm((cellKey == null ? null : cellKey.i));
+        var iv = this.i.n3((cellKey == null ? null : cellKey.i));
         return (iv);
     };
     IgcDataGridComponent.prototype.resolveCellValueFromPosition = function (row, column) {
-        var iv = this.i.nn(row, column);
+        var iv = this.i.n4(row, column);
         return (iv);
     };
     /**
@@ -3813,14 +4036,14 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     
     */
     IgcDataGridComponent.prototype.commitEdits = function () {
-        this.i.sa();
+        this.i.tc();
     };
     /**
      * Cancels any edits that may exist in the datasource.
     
     */
     IgcDataGridComponent.prototype.cancelEdits = function () {
-        this.i.r1();
+        this.i.s3();
     };
     /**
      * Accepts a specific commit to the datasource.
@@ -3828,7 +4051,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     * @param commitID  * The ID of the commit provided by the Committing event.
     */
     IgcDataGridComponent.prototype.acceptCommit = function (commitID) {
-        this.i.rs(commitID);
+        this.i.su(commitID);
     };
     /**
      * Rejects a specific commit.
@@ -3836,27 +4059,27 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     * @param commitID  * The ID of the commit provided by the Committing event.
     */
     IgcDataGridComponent.prototype.rejectCommit = function (commitID) {
-        this.i.vg(commitID);
+        this.i.wi(commitID);
     };
     /**
      * Undo the last edit.
     
     */
     IgcDataGridComponent.prototype.undo = function () {
-        this.i.wd();
+        this.i.xf();
     };
     /**
      * Redo the last edit.
     
     */
     IgcDataGridComponent.prototype.redo = function () {
-        this.i.vc();
+        this.i.we();
     };
     IgcDataGridComponent.prototype.updatePropertyAtKey = function (key, propertyPath, value) {
-        this.i.wi(key, propertyPath, value);
+        this.i.xk(key, propertyPath, value);
     };
     IgcDataGridComponent.prototype.removeItemByKey = function (key) {
-        this.i.vl(key);
+        this.i.wn(key);
     };
     /**
      * Removes an item by its instance.
@@ -3864,7 +4087,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     * @param item  * The item instance to remove.
     */
     IgcDataGridComponent.prototype.removeItem = function (item) {
-        this.i.vk(item);
+        this.i.wm(item);
     };
     /**
      * Accept a pending edit turning it into a real edit.
@@ -3872,7 +4095,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     * @param editID  * The ID of the edit. Provided by the CellValueChanging event.
     */
     IgcDataGridComponent.prototype.acceptEdit = function (editID) {
-        this.i.rt(editID);
+        this.i.sv(editID);
     };
     /**
      * Reject a pending edit.
@@ -3880,41 +4103,41 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     * @param editID  * The ID of the edit. Provided by the CellValueChanging event.
     */
     IgcDataGridComponent.prototype.rejectEdit = function (editID) {
-        this.i.vh(editID);
+        this.i.wj(editID);
     };
     IgcDataGridComponent.prototype.setEditError = function (editID, errorMessage) {
-        this.i.v6(editID, errorMessage);
+        this.i.w8(editID, errorMessage);
     };
     /**
      * Start edit mode on the active cell.
     
     */
     IgcDataGridComponent.prototype.startEditMode = function () {
-        this.i.v9();
+        this.i.xb();
     };
     IgcDataGridComponent.prototype.endEditMode = function (commit) {
-        this.i.sf(commit);
+        this.i.th(commit);
     };
     /**
      * Selects all of the rows in the grid.
     
     */
     IgcDataGridComponent.prototype.selectAllRows = function () {
-        this.i.vx();
+        this.i.wz();
     };
     /**
      * Deselects all currently selected rows.
     
     */
     IgcDataGridComponent.prototype.deselectAllRows = function () {
-        this.i.sd();
+        this.i.tf();
     };
     /**
      * Saves the layout chnages that have been made to the grid
     
     */
     IgcDataGridComponent.prototype.saveLayout = function () {
-        var iv = this.i.qx();
+        var iv = this.i.rp();
         return (iv);
     };
     /**
@@ -3922,7 +4145,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     
     */
     IgcDataGridComponent.prototype.loadLayout = function (json) {
-        this.i.sv(json);
+        this.i.tx(json);
     };
     Object.defineProperty(IgcDataGridComponent.prototype, "filterExpressionsChanging", {
         get: function () {