npm - igniteui-webcomponents-grids - Versions diffs - 4.3.1 → 4.3.3-beta.0 - Mend

igniteui-webcomponents-grids 4.3.1 → 4.3.3-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (335) hide show

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

@@ -26,7 +26,7 @@ import { IgcGridSelectedCellRangesChangedEventArgs } from './igc-grid-selected-c
 import { IgcGridSortDescriptionsChangedEventArgs } from './igc-grid-sort-descriptions-changed-event-args';
 import { IgcGridGroupDescriptionsChangedEventArgs } from './igc-grid-group-descriptions-changed-event-args';
 import { IgcGridSummaryDescriptionsChangedEventArgs } from './igc-grid-summary-descriptions-changed-event-args';
-import { Grid } from "./Grid";
+import { DataGrid } from "./DataGrid";
 import { ensureEnum, ensureBool, CollectionAdapter, getAllPropertyNames, enumToString, fromSpinal, toSpinal, brushToString, stringToBrush, initializePropertiesFromCss, NamePatcher } from "igniteui-webcomponents-core";
 import { Thickness } from "igniteui-webcomponents-core";
 import { WebComponentRenderer, WebComponentWrapper, PortalManager } from "igniteui-webcomponents-core";
@@ -280,7 +280,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         _this._contentArea.setRawStyleProperty("flex", "1");
         _this._contentArea.append(_this._renderer.rootWrapper);
         _this._wrapper = _this._renderer;
-        _this._implementation = new Grid();
+        _this._implementation = new DataGrid();
         var grid = _this.i;
         _this._grid = grid;
         _this._grid.externalObject = _this;
@@ -460,8 +460,8 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         }
     };
     IgcDataGridComponent.prototype.createImplementation = function () {
-        var test = Grid;
-        return new Grid();
+        //let test = Grid;
+        return new DataGrid();
     };
     Object.defineProperty(IgcDataGridComponent.prototype, "i", {
         get: function () {
@@ -996,11 +996,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
      * Gets or sets the type of column resizing to use.
     */
         get: function () {
-            return this.i.bz;
+            return this.i.columnResizingMode;
         },
         set: function (v) {
-            this.i.bz = ensureEnum(ColumnResizingMode_$type, v);
-            this._a("columnResizingMode", enumToString(ColumnResizingMode_$type, this.i.bz));
+            this.i.columnResizingMode = ensureEnum(ColumnResizingMode_$type, v);
+            this._a("columnResizingMode", enumToString(ColumnResizingMode_$type, this.i.columnResizingMode));
         },
         enumerable: false,
         configurable: true
@@ -1010,11 +1010,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the type column moving to use.
         */
         get: function () {
-            return this.i.bl;
+            return this.i.columnMovingMode;
         },
         set: function (v) {
-            this.i.bl = ensureEnum(ColumnMovingMode_$type, v);
-            this._a("columnMovingMode", enumToString(ColumnMovingMode_$type, this.i.bl));
+            this.i.columnMovingMode = ensureEnum(ColumnMovingMode_$type, v);
+            this._a("columnMovingMode", enumToString(ColumnMovingMode_$type, this.i.columnMovingMode));
         },
         enumerable: false,
         configurable: true
@@ -1024,11 +1024,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets whether the row will highlight when hovered.
         */
         get: function () {
-            return this.i.ka;
+            return this.i.isRowHoverEnabled;
         },
         set: function (v) {
-            this.i.ka = ensureBool(v);
-            this._a("isRowHoverEnabled", this.i.ka);
+            this.i.isRowHoverEnabled = ensureBool(v);
+            this._a("isRowHoverEnabled", this.i.isRowHoverEnabled);
         },
         enumerable: false,
         configurable: true
@@ -1038,11 +1038,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the background color for rows when hovered.
         */
         get: function () {
-            return brushToString(this.i.z8);
+            return brushToString(this.i.rowHoverBackground);
         },
         set: function (v) {
-            this.i.z8 = stringToBrush(v);
-            this._a("rowHoverBackground", brushToString(this.i.z8));
+            this.i.rowHoverBackground = stringToBrush(v);
+            this._a("rowHoverBackground", brushToString(this.i.rowHoverBackground));
         },
         enumerable: false,
         configurable: true
@@ -1052,11 +1052,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the text color for rows when hovered.
         */
         get: function () {
-            return brushToString(this.i.z9);
+            return brushToString(this.i.rowHoverTextColor);
         },
         set: function (v) {
-            this.i.z9 = stringToBrush(v);
-            this._a("rowHoverTextColor", brushToString(this.i.z9));
+            this.i.rowHoverTextColor = stringToBrush(v);
+            this._a("rowHoverTextColor", brushToString(this.i.rowHoverTextColor));
         },
         enumerable: false,
         configurable: true
@@ -1066,79 +1066,79 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the border color for rows being edited.
         */
         get: function () {
-            return brushToString(this.i.z0);
+            return brushToString(this.i.editRowBorder);
         },
         set: function (v) {
-            this.i.z0 = stringToBrush(v);
-            this._a("editRowBorder", brushToString(this.i.z0));
+            this.i.editRowBorder = stringToBrush(v);
+            this._a("editRowBorder", brushToString(this.i.editRowBorder));
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcDataGridComponent.prototype, "editRowBorderWidthBottom", {
         get: function () {
-            return this.i.aa3 ? this.i.aa3.bottom : NaN;
+            return this.i.editRowBorderWidth ? this.i.editRowBorderWidth.bottom : NaN;
         },
         set: function (v) {
             this.ensureEditRowBorderWidth();
-            this.i.aa3.bottom = +v;
-            this._a("editRowBorderWidthBottom", this.i.aa3.bottom);
-            this.i.aa3 = this.i.aa3;
+            this.i.editRowBorderWidth.bottom = +v;
+            this._a("editRowBorderWidthBottom", this.i.editRowBorderWidth.bottom);
+            this.i.editRowBorderWidth = this.i.editRowBorderWidth;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcDataGridComponent.prototype, "editRowBorderWidthLeft", {
         get: function () {
-            return this.i.aa3 ? this.i.aa3.left : NaN;
+            return this.i.editRowBorderWidth ? this.i.editRowBorderWidth.left : NaN;
         },
         set: function (v) {
             this.ensureEditRowBorderWidth();
-            this.i.aa3.left = +v;
-            this._a("editRowBorderWidthLeft", this.i.aa3.left);
-            this.i.aa3 = this.i.aa3;
+            this.i.editRowBorderWidth.left = +v;
+            this._a("editRowBorderWidthLeft", this.i.editRowBorderWidth.left);
+            this.i.editRowBorderWidth = this.i.editRowBorderWidth;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcDataGridComponent.prototype, "editRowBorderWidthRight", {
         get: function () {
-            return this.i.aa3 ? this.i.aa3.right : NaN;
+            return this.i.editRowBorderWidth ? this.i.editRowBorderWidth.right : NaN;
         },
         set: function (v) {
             this.ensureEditRowBorderWidth();
-            this.i.aa3.right = +v;
-            this._a("editRowBorderWidthRight", this.i.aa3.right);
-            this.i.aa3 = this.i.aa3;
+            this.i.editRowBorderWidth.right = +v;
+            this._a("editRowBorderWidthRight", this.i.editRowBorderWidth.right);
+            this.i.editRowBorderWidth = this.i.editRowBorderWidth;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcDataGridComponent.prototype, "editRowBorderWidthTop", {
         get: function () {
-            return this.i.aa3 ? this.i.aa3.top : NaN;
+            return this.i.editRowBorderWidth ? this.i.editRowBorderWidth.top : NaN;
         },
         set: function (v) {
             this.ensureEditRowBorderWidth();
-            this.i.aa3.top = +v;
-            this._a("editRowBorderWidthTop", this.i.aa3.top);
-            this.i.aa3 = this.i.aa3;
+            this.i.editRowBorderWidth.top = +v;
+            this._a("editRowBorderWidthTop", this.i.editRowBorderWidth.top);
+            this.i.editRowBorderWidth = this.i.editRowBorderWidth;
         },
         enumerable: false,
         configurable: true
     });
     IgcDataGridComponent.prototype.ensureEditRowBorderWidth = function () {
-        if (this.i.aa3) {
+        if (this.i.editRowBorderWidth) {
             return;
         }
-        this.i.aa3 = new Thickness(2);
+        this.i.editRowBorderWidth = new Thickness(2);
     };
     Object.defineProperty(IgcDataGridComponent.prototype, "sectionHeader", {
         /**
          * Gets or sets the header type used for sectioning off groups of rows.
         */
         get: function () {
-            var r = this.i.f2;
+            var r = this.i.sectionHeader;
             if (r == null) {
                 return null;
             }
@@ -1154,7 +1154,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         set: function (v) {
             if (v != null && this._stylingContainer && v._styling)
                 v._styling(this._stylingContainer, this, this);
-            v == null ? this.i.f2 = null : this.i.f2 = v.i;
+            v == null ? this.i.sectionHeader = null : this.i.sectionHeader = v.i;
         },
         enumerable: false,
         configurable: true
@@ -1164,7 +1164,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the cell definition used for summary rows at the root level.
         */
         get: function () {
-            var r = this.i.gc;
+            var r = this.i.summaryRowRoot;
             if (r == null) {
                 return null;
             }
@@ -1180,7 +1180,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         set: function (v) {
             if (v != null && this._stylingContainer && v._styling)
                 v._styling(this._stylingContainer, this, this);
-            v == null ? this.i.gc = null : this.i.gc = v.i;
+            v == null ? this.i.summaryRowRoot = null : this.i.summaryRowRoot = v.i;
         },
         enumerable: false,
         configurable: true
@@ -1190,7 +1190,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the cell definition used for summary rows at the section level.
         */
         get: function () {
-            var r = this.i.ge;
+            var r = this.i.summaryRowSection;
             if (r == null) {
                 return null;
             }
@@ -1206,7 +1206,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         set: function (v) {
             if (v != null && this._stylingContainer && v._styling)
                 v._styling(this._stylingContainer, this, this);
-            v == null ? this.i.ge = null : this.i.ge = v.i;
+            v == null ? this.i.summaryRowSection = null : this.i.summaryRowSection = v.i;
         },
         enumerable: false,
         configurable: true
@@ -1216,7 +1216,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the row seperator settings.
         */
         get: function () {
-            var r = this.i.fx;
+            var r = this.i.rowSeparator;
             if (r == null) {
                 return null;
             }
@@ -1232,7 +1232,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         set: function (v) {
             if (v != null && this._stylingContainer && v._styling)
                 v._styling(this._stylingContainer, this, this);
-            v == null ? this.i.fx = null : this.i.fx = v.i;
+            v == null ? this.i.rowSeparator = null : this.i.rowSeparator = v.i;
         },
         enumerable: false,
         configurable: true
@@ -1242,7 +1242,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the header row seperator settings.
         */
         get: function () {
-            var r = this.i.ex;
+            var r = this.i.headerRowSeparator;
             if (r == null) {
                 return null;
             }
@@ -1258,7 +1258,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         set: function (v) {
             if (v != null && this._stylingContainer && v._styling)
                 v._styling(this._stylingContainer, this, this);
-            v == null ? this.i.ex = null : this.i.ex = v.i;
+            v == null ? this.i.headerRowSeparator = null : this.i.headerRowSeparator = v.i;
         },
         enumerable: false,
         configurable: true
@@ -1268,7 +1268,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the header seperator settings.
         */
         get: function () {
-            var r = this.i.ez;
+            var r = this.i.headerSeparator;
             if (r == null) {
                 return null;
             }
@@ -1284,7 +1284,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         set: function (v) {
             if (v != null && this._stylingContainer && v._styling)
                 v._styling(this._stylingContainer, this, this);
-            v == null ? this.i.ez = null : this.i.ez = v.i;
+            v == null ? this.i.headerSeparator = null : this.i.headerSeparator = v.i;
         },
         enumerable: false,
         configurable: true
@@ -1294,7 +1294,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the column resizing seperator settings.
         */
         get: function () {
-            var r = this.i.b1;
+            var r = this.i.columnResizingSeparator;
             if (r == null) {
                 return null;
             }
@@ -1310,7 +1310,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         set: function (v) {
             if (v != null && this._stylingContainer && v._styling)
                 v._styling(this._stylingContainer, this, this);
-            v == null ? this.i.b1 = null : this.i.b1 = v.i;
+            v == null ? this.i.columnResizingSeparator = null : this.i.columnResizingSeparator = v.i;
         },
         enumerable: false,
         configurable: true
@@ -1320,7 +1320,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the column resizing seperator settings.
         */
         get: function () {
-            var r = this.i.bn;
+            var r = this.i.columnMovingSeparator;
             if (r == null) {
                 return null;
             }
@@ -1336,7 +1336,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         set: function (v) {
             if (v != null && this._stylingContainer && v._styling)
                 v._styling(this._stylingContainer, this, this);
-            v == null ? this.i.bn = null : this.i.bn = v.i;
+            v == null ? this.i.columnMovingSeparator = null : this.i.columnMovingSeparator = v.i;
         },
         enumerable: false,
         configurable: true
@@ -1346,7 +1346,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the pinned area separator settings.
         */
         get: function () {
-            var r = this.i.fl;
+            var r = this.i.pinnedAreaSeparator;
             if (r == null) {
                 return null;
             }
@@ -1362,7 +1362,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         set: function (v) {
             if (v != null && this._stylingContainer && v._styling)
                 v._styling(this._stylingContainer, this, this);
-            v == null ? this.i.fl = null : this.i.fl = v.i;
+            v == null ? this.i.pinnedAreaSeparator = null : this.i.pinnedAreaSeparator = v.i;
         },
         enumerable: false,
         configurable: true
@@ -1372,14 +1372,14 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the desired properties the grid will automatically generate columns for.
         */
         get: function () {
-            return this.i.f;
+            return this.i.autoGenerateDesiredProperties;
         },
         set: function (v) {
             if (v && !Array.isArray(v) && typeof (v) == "string") {
                 var re = /\s*(?:,|\s|$)\s*/gm;
                 v = v.split(re);
             }
-            this.i.f = v;
+            this.i.autoGenerateDesiredProperties = v;
         },
         enumerable: false,
         configurable: true
@@ -1389,14 +1389,14 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the desired properties for the data source to load. If specified the data source may decide to constrain the properties it fetches to these properties and must make sure that at least those properties are loaded, rather than the default behavior for that data source.
         */
         get: function () {
-            return this.i.g;
+            return this.i.dataSourceDesiredProperties;
         },
         set: function (v) {
             if (v && !Array.isArray(v) && typeof (v) == "string") {
                 var re = /\s*(?:,|\s|$)\s*/gm;
                 v = v.split(re);
             }
-            this.i.g = v;
+            this.i.dataSourceDesiredProperties = v;
         },
         enumerable: false,
         configurable: true
@@ -1406,11 +1406,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the display density to use for the grid.
         */
         get: function () {
-            return this.i.go;
+            return this.i.density;
         },
         set: function (v) {
-            this.i.go = ensureEnum(ControlDisplayDensity_$type, v);
-            this._a("density", enumToString(ControlDisplayDensity_$type, this.i.go));
+            this.i.density = ensureEnum(ControlDisplayDensity_$type, v);
+            this._a("density", enumToString(ControlDisplayDensity_$type, this.i.density));
         },
         enumerable: false,
         configurable: true
@@ -1420,11 +1420,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets the actual height for the rows in the grid.
         */
         get: function () {
-            return this.i.nf;
+            return this.i.actualRowHeight;
         },
         set: function (v) {
-            this.i.nf = +v;
-            this._a("actualRowHeight", this.i.nf);
+            this.i.actualRowHeight = +v;
+            this._a("actualRowHeight", this.i.actualRowHeight);
         },
         enumerable: false,
         configurable: true
@@ -1435,11 +1435,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * use the default value for the set display density.
         */
         get: function () {
-            return this.i.oa;
+            return this.i.rowHeight;
         },
         set: function (v) {
-            this.i.oa = +v;
-            this._a("rowHeight", this.i.oa);
+            this.i.rowHeight = +v;
+            this._a("rowHeight", this.i.rowHeight);
         },
         enumerable: false,
         configurable: true
@@ -1449,11 +1449,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.md;
+            return this.i.defaultColumnMinWidth;
         },
         set: function (v) {
-            this.i.md = +v;
-            this._a("defaultColumnMinWidth", this.i.md);
+            this.i.defaultColumnMinWidth = +v;
+            this._a("defaultColumnMinWidth", this.i.defaultColumnMinWidth);
         },
         enumerable: false,
         configurable: true
@@ -1463,11 +1463,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets the height used for the header row.
         */
         get: function () {
-            return this.i.ne;
+            return this.i.actualHeaderHeight;
         },
         set: function (v) {
-            this.i.ne = +v;
-            this._a("actualHeaderHeight", this.i.ne);
+            this.i.actualHeaderHeight = +v;
+            this._a("actualHeaderHeight", this.i.actualHeaderHeight);
         },
         enumerable: false,
         configurable: true
@@ -1477,11 +1477,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the height to use for the header row.
         */
         get: function () {
-            return this.i.n1;
+            return this.i.headerHeight;
         },
         set: function (v) {
-            this.i.n1 = +v;
-            this._a("headerHeight", this.i.n1);
+            this.i.headerHeight = +v;
+            this._a("headerHeight", this.i.headerHeight);
         },
         enumerable: false,
         configurable: true
@@ -1491,11 +1491,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Returns/sets the action to take when a column header is clicked.
         */
         get: function () {
-            return this.i.ev;
+            return this.i.headerClickAction;
         },
         set: function (v) {
-            this.i.ev = ensureEnum(HeaderClickAction_$type, v);
-            this._a("headerClickAction", enumToString(HeaderClickAction_$type, this.i.ev));
+            this.i.headerClickAction = ensureEnum(HeaderClickAction_$type, v);
+            this._a("headerClickAction", enumToString(HeaderClickAction_$type, this.i.headerClickAction));
         },
         enumerable: false,
         configurable: true
@@ -1505,11 +1505,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the type of edit mode
         */
         get: function () {
-            return this.i.cu;
+            return this.i.editMode;
         },
         set: function (v) {
-            this.i.cu = ensureEnum(EditModeType_$type, v);
-            this._a("editMode", enumToString(EditModeType_$type, this.i.cu));
+            this.i.editMode = ensureEnum(EditModeType_$type, v);
+            this._a("editMode", enumToString(EditModeType_$type, this.i.editMode));
         },
         enumerable: false,
         configurable: true
@@ -1519,11 +1519,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the type of click action required to enter edit mode.
         */
         get: function () {
-            return this.i.cs;
+            return this.i.editModeClickAction;
         },
         set: function (v) {
-            this.i.cs = ensureEnum(EditModeClickAction_$type, v);
-            this._a("editModeClickAction", enumToString(EditModeClickAction_$type, this.i.cs));
+            this.i.editModeClickAction = ensureEnum(EditModeClickAction_$type, v);
+            this._a("editModeClickAction", enumToString(EditModeClickAction_$type, this.i.editModeClickAction));
         },
         enumerable: false,
         configurable: true
@@ -1533,11 +1533,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.i8;
+            return this.i.editOnKeyPress;
         },
         set: function (v) {
-            this.i.i8 = ensureBool(v);
-            this._a("editOnKeyPress", this.i.i8);
+            this.i.editOnKeyPress = ensureBool(v);
+            this._a("editOnKeyPress", this.i.editOnKeyPress);
         },
         enumerable: false,
         configurable: true
@@ -1547,11 +1547,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.iz;
+            return this.i.autoGenerateColumns;
         },
         set: function (v) {
-            this.i.iz = ensureBool(v);
-            this._a("autoGenerateColumns", this.i.iz);
+            this.i.autoGenerateColumns = ensureBool(v);
+            this._a("autoGenerateColumns", this.i.autoGenerateColumns);
         },
         enumerable: false,
         configurable: true
@@ -1561,11 +1561,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Sets or gets the height to use for the row separators.
         */
         get: function () {
-            return this.i.oc;
+            return this.i.rowSeparatorHeight;
         },
         set: function (v) {
-            this.i.oc = +v;
-            this._a("rowSeparatorHeight", this.i.oc);
+            this.i.rowSeparatorHeight = +v;
+            this._a("rowSeparatorHeight", this.i.rowSeparatorHeight);
         },
         enumerable: false,
         configurable: true
@@ -1575,11 +1575,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.j4;
+            return this.i.isPlaceholderRenderingEnabled;
         },
         set: function (v) {
-            this.i.j4 = ensureBool(v);
-            this._a("isPlaceholderRenderingEnabled", this.i.j4);
+            this.i.isPlaceholderRenderingEnabled = ensureBool(v);
+            this._a("isPlaceholderRenderingEnabled", this.i.isPlaceholderRenderingEnabled);
         },
         enumerable: false,
         configurable: true
@@ -1589,11 +1589,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Sets or gets the Column Adding Animation mode to use.
         */
         get: function () {
-            return this.i.b4;
+            return this.i.columnAddingAnimationMode;
         },
         set: function (v) {
-            this.i.b4 = ensureEnum(ColumnShowingAnimationMode_$type, v);
-            this._a("columnAddingAnimationMode", enumToString(ColumnShowingAnimationMode_$type, this.i.b4));
+            this.i.columnAddingAnimationMode = ensureEnum(ColumnShowingAnimationMode_$type, v);
+            this._a("columnAddingAnimationMode", enumToString(ColumnShowingAnimationMode_$type, this.i.columnAddingAnimationMode));
         },
         enumerable: false,
         configurable: true
@@ -1617,11 +1617,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Sets or gets the cell data loaded animation mode to use.
         */
         get: function () {
-            return this.i.ao;
+            return this.i.cellDataLoadedAnimationMode;
         },
         set: function (v) {
-            this.i.ao = ensureEnum(CellDataLoadedAnimationMode_$type, v);
-            this._a("cellDataLoadedAnimationMode", enumToString(CellDataLoadedAnimationMode_$type, this.i.ao));
+            this.i.cellDataLoadedAnimationMode = ensureEnum(CellDataLoadedAnimationMode_$type, v);
+            this._a("cellDataLoadedAnimationMode", enumToString(CellDataLoadedAnimationMode_$type, this.i.cellDataLoadedAnimationMode));
         },
         enumerable: false,
         configurable: true
@@ -1631,11 +1631,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Sets or gets the row selection animation mode to use.
         */
         get: function () {
-            return this.i.fv;
+            return this.i.rowSelectionAnimationMode;
         },
         set: function (v) {
-            this.i.fv = ensureEnum(RowSelectionAnimationMode_$type, v);
-            this._a("rowSelectionAnimationMode", enumToString(RowSelectionAnimationMode_$type, this.i.fv));
+            this.i.rowSelectionAnimationMode = ensureEnum(RowSelectionAnimationMode_$type, v);
+            this._a("rowSelectionAnimationMode", enumToString(RowSelectionAnimationMode_$type, this.i.rowSelectionAnimationMode));
         },
         enumerable: false,
         configurable: true
@@ -1645,11 +1645,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Sets or gets the row hover animation mode to use.
         */
         get: function () {
-            return this.i.fs;
+            return this.i.rowHoverAnimationMode;
         },
         set: function (v) {
-            this.i.fs = ensureEnum(RowHoverAnimationMode_$type, v);
-            this._a("rowHoverAnimationMode", enumToString(RowHoverAnimationMode_$type, this.i.fs));
+            this.i.rowHoverAnimationMode = ensureEnum(RowHoverAnimationMode_$type, v);
+            this._a("rowHoverAnimationMode", enumToString(RowHoverAnimationMode_$type, this.i.rowHoverAnimationMode));
         },
         enumerable: false,
         configurable: true
@@ -1659,11 +1659,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Sets or gets the cell selection animation mode to use.
         */
         get: function () {
-            return this.i.a3;
+            return this.i.cellSelectionAnimationMode;
         },
         set: function (v) {
-            this.i.a3 = ensureEnum(CellSelectionAnimationMode_$type, v);
-            this._a("cellSelectionAnimationMode", enumToString(CellSelectionAnimationMode_$type, this.i.a3));
+            this.i.cellSelectionAnimationMode = ensureEnum(CellSelectionAnimationMode_$type, v);
+            this._a("cellSelectionAnimationMode", enumToString(CellSelectionAnimationMode_$type, this.i.cellSelectionAnimationMode));
         },
         enumerable: false,
         configurable: true
@@ -1673,7 +1673,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Sets or gets the default animation settings for the grid.
         */
         get: function () {
-            var r = this.i.de;
+            var r = this.i.animationSettings;
             if (r == null) {
                 return null;
             }
@@ -1692,7 +1692,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
             return r.externalObject;
         },
         set: function (v) {
-            v == null ? this.i.de = null : this.i.de = v.i;
+            v == null ? this.i.animationSettings = null : this.i.animationSettings = v.i;
         },
         enumerable: false,
         configurable: true
@@ -1702,11 +1702,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Sets or gets the column resizing animation mode to use. Only applies when resizing in Deferred mode.
         */
         get: function () {
-            return this.i.bw;
+            return this.i.columnResizingAnimationMode;
         },
         set: function (v) {
-            this.i.bw = ensureEnum(ColumnResizingAnimationMode_$type, v);
-            this._a("columnResizingAnimationMode", enumToString(ColumnResizingAnimationMode_$type, this.i.bw));
+            this.i.columnResizingAnimationMode = ensureEnum(ColumnResizingAnimationMode_$type, v);
+            this._a("columnResizingAnimationMode", enumToString(ColumnResizingAnimationMode_$type, this.i.columnResizingAnimationMode));
         },
         enumerable: false,
         configurable: true
@@ -1716,11 +1716,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Sets or gets the column showing animation mode to use.
         */
         get: function () {
-            return this.i.b5;
+            return this.i.columnShowingAnimationMode;
         },
         set: function (v) {
-            this.i.b5 = ensureEnum(ColumnShowingAnimationMode_$type, v);
-            this._a("columnShowingAnimationMode", enumToString(ColumnShowingAnimationMode_$type, this.i.b5));
+            this.i.columnShowingAnimationMode = ensureEnum(ColumnShowingAnimationMode_$type, v);
+            this._a("columnShowingAnimationMode", enumToString(ColumnShowingAnimationMode_$type, this.i.columnShowingAnimationMode));
         },
         enumerable: false,
         configurable: true
@@ -1730,11 +1730,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Sets or gets the column moving animation mode to use.
         */
         get: function () {
-            return this.i.bi;
+            return this.i.columnMovingAnimationMode;
         },
         set: function (v) {
-            this.i.bi = ensureEnum(ColumnMovingAnimationMode_$type, v);
-            this._a("columnMovingAnimationMode", enumToString(ColumnMovingAnimationMode_$type, this.i.bi));
+            this.i.columnMovingAnimationMode = ensureEnum(ColumnMovingAnimationMode_$type, v);
+            this._a("columnMovingAnimationMode", enumToString(ColumnMovingAnimationMode_$type, this.i.columnMovingAnimationMode));
         },
         enumerable: false,
         configurable: true
@@ -1744,11 +1744,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Sets or gets the column hiding animation mode to use.
         */
         get: function () {
-            return this.i.bf;
+            return this.i.columnHidingAnimationMode;
         },
         set: function (v) {
-            this.i.bf = ensureEnum(ColumnHidingAnimationMode_$type, v);
-            this._a("columnHidingAnimationMode", enumToString(ColumnHidingAnimationMode_$type, this.i.bf));
+            this.i.columnHidingAnimationMode = ensureEnum(ColumnHidingAnimationMode_$type, v);
+            this._a("columnHidingAnimationMode", enumToString(ColumnHidingAnimationMode_$type, this.i.columnHidingAnimationMode));
         },
         enumerable: false,
         configurable: true
@@ -1758,11 +1758,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Sets or gets the column exchanging animation mode to use.
         */
         get: function () {
-            return this.i.a7;
+            return this.i.columnExchangingAnimationMode;
         },
         set: function (v) {
-            this.i.a7 = ensureEnum(ColumnExchangingAnimationMode_$type, v);
-            this._a("columnExchangingAnimationMode", enumToString(ColumnExchangingAnimationMode_$type, this.i.a7));
+            this.i.columnExchangingAnimationMode = ensureEnum(ColumnExchangingAnimationMode_$type, v);
+            this._a("columnExchangingAnimationMode", enumToString(ColumnExchangingAnimationMode_$type, this.i.columnExchangingAnimationMode));
         },
         enumerable: false,
         configurable: true
@@ -1772,11 +1772,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Sets or gets the grid selection mode.
         */
         get: function () {
-            return this.i.co;
+            return this.i.selectionMode;
         },
         set: function (v) {
-            this.i.co = ensureEnum(DataGridSelectionMode_$type, v);
-            this._a("selectionMode", enumToString(DataGridSelectionMode_$type, this.i.co));
+            this.i.selectionMode = ensureEnum(DataGridSelectionMode_$type, v);
+            this._a("selectionMode", enumToString(DataGridSelectionMode_$type, this.i.selectionMode));
         },
         enumerable: false,
         configurable: true
@@ -1786,11 +1786,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Sets or gets the grid selection mode.
         */
         get: function () {
-            return this.i.c9;
+            return this.i.activationMode;
         },
         set: function (v) {
-            this.i.c9 = ensureEnum(GridActivationMode_$type, v);
-            this._a("activationMode", enumToString(GridActivationMode_$type, this.i.c9));
+            this.i.activationMode = ensureEnum(GridActivationMode_$type, v);
+            this._a("activationMode", enumToString(GridActivationMode_$type, this.i.activationMode));
         },
         enumerable: false,
         configurable: true
@@ -1800,11 +1800,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Sets or gets how selection behaves in the grid.
         */
         get: function () {
-            return this.i.ek;
+            return this.i.selectionBehavior;
         },
         set: function (v) {
-            this.i.ek = ensureEnum(GridSelectionBehavior_$type, v);
-            this._a("selectionBehavior", enumToString(GridSelectionBehavior_$type, this.i.ek));
+            this.i.selectionBehavior = ensureEnum(GridSelectionBehavior_$type, v);
+            this._a("selectionBehavior", enumToString(GridSelectionBehavior_$type, this.i.selectionBehavior));
         },
         enumerable: false,
         configurable: true
@@ -1814,11 +1814,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * 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.kf;
+            return this.i.mouseDragSelectionEnabled;
         },
         set: function (v) {
-            this.i.kf = ensureBool(v);
-            this._a("mouseDragSelectionEnabled", this.i.kf);
+            this.i.mouseDragSelectionEnabled = ensureBool(v);
+            this._a("mouseDragSelectionEnabled", this.i.mouseDragSelectionEnabled);
         },
         enumerable: false,
         configurable: true
@@ -1830,7 +1830,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         get: function () {
             if (this._selectedItems === null) {
                 var coll = new IgcGridSelectedItemsCollection();
-                var innerColl = this.i.ae;
+                var innerColl = this.i.selectedItems;
                 if (!innerColl) {
                     innerColl = new GridSelectedItemsCollection_internal();
                 }
@@ -1846,7 +1846,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
             var coll = new IgcGridSelectedItemsCollection();
             this._selectedItems = coll._fromOuter(v);
             var syncColl = new SyncableObservableCollection$1(Base.$type);
-            var innerColl = this.i.ae;
+            var innerColl = this.i.selectedItems;
             if (!innerColl) {
                 innerColl = new GridSelectedItemsCollection_internal();
             }
@@ -1864,7 +1864,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         get: function () {
             if (this._selectedKeys === null) {
                 var coll = new IgcGridSelectedKeysCollection();
-                var innerColl = this.i.ai;
+                var innerColl = this.i.selectedKeys;
                 if (!innerColl) {
                     innerColl = new GridSelectedKeysCollection_internal();
                 }
@@ -1880,7 +1880,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
             var coll = new IgcGridSelectedKeysCollection();
             this._selectedKeys = coll._fromOuter(v);
             var syncColl = new SyncableObservableCollection$1(PrimaryKeyValue.$type);
-            var innerColl = this.i.ai;
+            var innerColl = this.i.selectedKeys;
             if (!innerColl) {
                 innerColl = new GridSelectedKeysCollection_internal();
             }
@@ -1898,7 +1898,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         get: function () {
             if (this._selectedCells === null) {
                 var coll = new IgcGridSelectedCellsCollection();
-                var innerColl = this.i.eg;
+                var innerColl = this.i.selectedCells;
                 if (!innerColl) {
                     innerColl = new GridSelectedCellsCollection_internal();
                 }
@@ -1914,7 +1914,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
             var coll = new IgcGridSelectedCellsCollection();
             this._selectedCells = coll._fromOuter(v);
             var syncColl = new SyncableObservableCollection$1(CellKey.$type);
-            var innerColl = this.i.eg;
+            var innerColl = this.i.selectedCells;
             if (!innerColl) {
                 innerColl = new GridSelectedCellsCollection_internal();
             }
@@ -1932,7 +1932,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         get: function () {
             if (this._selectedCellRanges === null) {
                 var coll = new IgcGridSelectedCellRangesCollection();
-                var innerColl = this.i.ed;
+                var innerColl = this.i.selectedCellRanges;
                 if (!innerColl) {
                     innerColl = new GridSelectedCellRangesCollection_internal();
                 }
@@ -1948,7 +1948,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
             var coll = new IgcGridSelectedCellRangesCollection();
             this._selectedCellRanges = coll._fromOuter(v);
             var syncColl = new SyncableObservableCollection$1(CellRange.$type);
-            var innerColl = this.i.ed;
+            var innerColl = this.i.selectedCellRanges;
             if (!innerColl) {
                 innerColl = new GridSelectedCellRangesCollection_internal();
             }
@@ -1966,7 +1966,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         get: function () {
             if (this._pinnedItems === null) {
                 var coll = new IgcGridSelectedItemsCollection();
-                var innerColl = this.i.ad;
+                var innerColl = this.i.pinnedItems;
                 if (!innerColl) {
                     innerColl = new GridSelectedItemsCollection_internal();
                 }
@@ -1982,7 +1982,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
             var coll = new IgcGridSelectedItemsCollection();
             this._pinnedItems = coll._fromOuter(v);
             var syncColl = new SyncableObservableCollection$1(Base.$type);
-            var innerColl = this.i.ad;
+            var innerColl = this.i.pinnedItems;
             if (!innerColl) {
                 innerColl = new GridSelectedItemsCollection_internal();
             }
@@ -2000,7 +2000,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         get: function () {
             if (this._pinnedKeys === null) {
                 var coll = new IgcGridSelectedKeysCollection();
-                var innerColl = this.i.ah;
+                var innerColl = this.i.pinnedKeys;
                 if (!innerColl) {
                     innerColl = new GridSelectedKeysCollection_internal();
                 }
@@ -2016,7 +2016,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
             var coll = new IgcGridSelectedKeysCollection();
             this._pinnedKeys = coll._fromOuter(v);
             var syncColl = new SyncableObservableCollection$1(PrimaryKeyValue.$type);
-            var innerColl = this.i.ah;
+            var innerColl = this.i.pinnedKeys;
             if (!innerColl) {
                 innerColl = new GridSelectedKeysCollection_internal();
             }
@@ -2032,11 +2032,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.jn;
+            return this.i.isColumnOptionsEnabled;
         },
         set: function (v) {
-            this.i.jn = ensureBool(v);
-            this._a("isColumnOptionsEnabled", this.i.jn);
+            this.i.isColumnOptionsEnabled = ensureBool(v);
+            this._a("isColumnOptionsEnabled", this.i.isColumnOptionsEnabled);
         },
         enumerable: false,
         configurable: true
@@ -2046,11 +2046,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.jy;
+            return this.i.isGroupRowSticky;
         },
         set: function (v) {
-            this.i.jy = ensureBool(v);
-            this._a("isGroupRowSticky", this.i.jy);
+            this.i.isGroupRowSticky = ensureBool(v);
+            this._a("isGroupRowSticky", this.i.isGroupRowSticky);
         },
         enumerable: false,
         configurable: true
@@ -2060,11 +2060,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets if header separators are rendered.
         */
         get: function () {
-            return this.i.jz;
+            return this.i.isHeaderSeparatorVisible;
         },
         set: function (v) {
-            this.i.jz = ensureBool(v);
-            this._a("isHeaderSeparatorVisible", this.i.jz);
+            this.i.isHeaderSeparatorVisible = ensureBool(v);
+            this._a("isHeaderSeparatorVisible", this.i.isHeaderSeparatorVisible);
         },
         enumerable: false,
         configurable: true
@@ -2074,11 +2074,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.zu);
+            return brushToString(this.i.cellSelectedBackground);
         },
         set: function (v) {
-            this.i.zu = stringToBrush(v);
-            this._a("cellSelectedBackground", brushToString(this.i.zu));
+            this.i.cellSelectedBackground = stringToBrush(v);
+            this._a("cellSelectedBackground", brushToString(this.i.cellSelectedBackground));
         },
         enumerable: false,
         configurable: true
@@ -2088,11 +2088,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.aag);
+            return brushToString(this.i.sectionHeaderSelectedBackground);
         },
         set: function (v) {
-            this.i.aag = stringToBrush(v);
-            this._a("sectionHeaderSelectedBackground", brushToString(this.i.aag));
+            this.i.sectionHeaderSelectedBackground = stringToBrush(v);
+            this._a("sectionHeaderSelectedBackground", brushToString(this.i.sectionHeaderSelectedBackground));
         },
         enumerable: false,
         configurable: true
@@ -2102,11 +2102,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.aaj);
+            return brushToString(this.i.summaryRootBackground);
         },
         set: function (v) {
-            this.i.aaj = stringToBrush(v);
-            this._a("summaryRootBackground", brushToString(this.i.aaj));
+            this.i.summaryRootBackground = stringToBrush(v);
+            this._a("summaryRootBackground", brushToString(this.i.summaryRootBackground));
         },
         enumerable: false,
         configurable: true
@@ -2116,11 +2116,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.aan);
+            return brushToString(this.i.summarySectionBackground);
         },
         set: function (v) {
-            this.i.aan = stringToBrush(v);
-            this._a("summarySectionBackground", brushToString(this.i.aan));
+            this.i.summarySectionBackground = stringToBrush(v);
+            this._a("summarySectionBackground", brushToString(this.i.summarySectionBackground));
         },
         enumerable: false,
         configurable: true
@@ -2130,11 +2130,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the default opacity to use for pinned rows
         */
         get: function () {
-            return this.i.mf;
+            return this.i.pinnedRowOpacity;
         },
         set: function (v) {
-            this.i.mf = +v;
-            this._a("pinnedRowOpacity", this.i.mf);
+            this.i.pinnedRowOpacity = +v;
+            this._a("pinnedRowOpacity", this.i.pinnedRowOpacity);
         },
         enumerable: false,
         configurable: true
@@ -2144,16 +2144,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.gy == null) {
+            if (this.i.editTextStyle == null) {
                 return null;
             }
-            return this.i.gy.fontString;
+            return this.i.editTextStyle.fontString;
         },
         set: function (v) {
             var fi = new FontInfo();
             fi.fontString = v;
-            this.i.gy = fi;
-            this._a("editTextStyle", this.i.gy != null ? this.i.gy.fontString : "");
+            this.i.editTextStyle = fi;
+            this._a("editTextStyle", this.i.editTextStyle != null ? this.i.editTextStyle.fontString : "");
         },
         enumerable: false,
         configurable: true
@@ -2163,11 +2163,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the default opacity for unsaved cell edits.
         */
         get: function () {
-            return this.i.me;
+            return this.i.editOpacity;
         },
         set: function (v) {
-            this.i.me = +v;
-            this._a("editOpacity", this.i.me);
+            this.i.editOpacity = +v;
+            this._a("editOpacity", this.i.editOpacity);
         },
         enumerable: false,
         configurable: true
@@ -2177,11 +2177,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the text color for unsaved deleted rows.
         */
         get: function () {
-            return brushToString(this.i.zz);
+            return brushToString(this.i.deletedTextColor);
         },
         set: function (v) {
-            this.i.zz = stringToBrush(v);
-            this._a("deletedTextColor", brushToString(this.i.zz));
+            this.i.deletedTextColor = stringToBrush(v);
+            this._a("deletedTextColor", brushToString(this.i.deletedTextColor));
         },
         enumerable: false,
         configurable: true
@@ -2191,11 +2191,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the default color to use for sticky rows
         */
         get: function () {
-            return brushToString(this.i.aai);
+            return brushToString(this.i.stickyRowBackground);
         },
         set: function (v) {
-            this.i.aai = stringToBrush(v);
-            this._a("stickyRowBackground", brushToString(this.i.aai));
+            this.i.stickyRowBackground = stringToBrush(v);
+            this._a("stickyRowBackground", brushToString(this.i.stickyRowBackground));
         },
         enumerable: false,
         configurable: true
@@ -2205,11 +2205,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the default color to use for pinned rows
         */
         get: function () {
-            return brushToString(this.i.z7);
+            return brushToString(this.i.pinnedRowBackground);
         },
         set: function (v) {
-            this.i.z7 = stringToBrush(v);
-            this._a("pinnedRowBackground", brushToString(this.i.z7));
+            this.i.pinnedRowBackground = stringToBrush(v);
+            this._a("pinnedRowBackground", brushToString(this.i.pinnedRowBackground));
         },
         enumerable: false,
         configurable: true
@@ -2219,11 +2219,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.z6);
+            return brushToString(this.i.lastStickyRowBackground);
         },
         set: function (v) {
-            this.i.z6 = stringToBrush(v);
-            this._a("lastStickyRowBackground", brushToString(this.i.z6));
+            this.i.lastStickyRowBackground = stringToBrush(v);
+            this._a("lastStickyRowBackground", brushToString(this.i.lastStickyRowBackground));
         },
         enumerable: false,
         configurable: true
@@ -2233,7 +2233,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the position of the active cell.
         */
         get: function () {
-            var r = this.i.dp;
+            var r = this.i.activeCell;
             if (r == null) {
                 return null;
             }
@@ -2252,7 +2252,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
             return r.externalObject;
         },
         set: function (v) {
-            v == null ? this.i.dp = null : this.i.dp = v.i;
+            v == null ? this.i.activeCell = null : this.i.activeCell = v.i;
         },
         enumerable: false,
         configurable: true
@@ -2262,11 +2262,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.zt);
+            return brushToString(this.i.cellBackground);
         },
         set: function (v) {
-            this.i.zt = stringToBrush(v);
-            this._a("cellBackground", brushToString(this.i.zt));
+            this.i.cellBackground = stringToBrush(v);
+            this._a("cellBackground", brushToString(this.i.cellBackground));
         },
         enumerable: false,
         configurable: true
@@ -2276,11 +2276,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.zv);
+            return brushToString(this.i.cellTextColor);
         },
         set: function (v) {
-            this.i.zv = stringToBrush(v);
-            this._a("cellTextColor", brushToString(this.i.zv));
+            this.i.cellTextColor = stringToBrush(v);
+            this._a("cellTextColor", brushToString(this.i.cellTextColor));
         },
         enumerable: false,
         configurable: true
@@ -2290,11 +2290,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.z4);
+            return brushToString(this.i.headerSortIndicatorColor);
         },
         set: function (v) {
-            this.i.z4 = stringToBrush(v);
-            this._a("headerSortIndicatorColor", brushToString(this.i.z4));
+            this.i.headerSortIndicatorColor = stringToBrush(v);
+            this._a("headerSortIndicatorColor", brushToString(this.i.headerSortIndicatorColor));
         },
         enumerable: false,
         configurable: true
@@ -2304,11 +2304,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.f6;
+            return this.i.headerSortIndicatorStyle;
         },
         set: function (v) {
-            this.i.f6 = ensureEnum(SortIndicatorStyle_$type, v);
-            this._a("headerSortIndicatorStyle", enumToString(SortIndicatorStyle_$type, this.i.f6));
+            this.i.headerSortIndicatorStyle = ensureEnum(SortIndicatorStyle_$type, v);
+            this._a("headerSortIndicatorStyle", enumToString(SortIndicatorStyle_$type, this.i.headerSortIndicatorStyle));
         },
         enumerable: false,
         configurable: true
@@ -2318,16 +2318,16 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the font to use for content cells
         */
         get: function () {
-            if (this.i.gx == null) {
+            if (this.i.cellTextStyle == null) {
                 return null;
             }
-            return this.i.gx.fontString;
+            return this.i.cellTextStyle.fontString;
         },
         set: function (v) {
             var fi = new FontInfo();
             fi.fontString = v;
-            this.i.gx = fi;
-            this._a("cellTextStyle", this.i.gx != null ? this.i.gx.fontString : "");
+            this.i.cellTextStyle = fi;
+            this._a("cellTextStyle", this.i.cellTextStyle != null ? this.i.cellTextStyle.fontString : "");
         },
         enumerable: false,
         configurable: true
@@ -2337,11 +2337,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.aaf);
+            return brushToString(this.i.sectionHeaderBackground);
         },
         set: function (v) {
-            this.i.aaf = stringToBrush(v);
-            this._a("sectionHeaderBackground", brushToString(this.i.aaf));
+            this.i.sectionHeaderBackground = stringToBrush(v);
+            this._a("sectionHeaderBackground", brushToString(this.i.sectionHeaderBackground));
         },
         enumerable: false,
         configurable: true
@@ -2351,11 +2351,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.aah);
+            return brushToString(this.i.sectionHeaderTextColor);
         },
         set: function (v) {
-            this.i.aah = stringToBrush(v);
-            this._a("sectionHeaderTextColor", brushToString(this.i.aah));
+            this.i.sectionHeaderTextColor = stringToBrush(v);
+            this._a("sectionHeaderTextColor", brushToString(this.i.sectionHeaderTextColor));
         },
         enumerable: false,
         configurable: true
@@ -2365,16 +2365,16 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the font to use for section header cells
         */
         get: function () {
-            if (this.i.g0 == null) {
+            if (this.i.sectionHeaderTextStyle == null) {
                 return null;
             }
-            return this.i.g0.fontString;
+            return this.i.sectionHeaderTextStyle.fontString;
         },
         set: function (v) {
             var fi = new FontInfo();
             fi.fontString = v;
-            this.i.g0 = fi;
-            this._a("sectionHeaderTextStyle", this.i.g0 != null ? this.i.g0.fontString : "");
+            this.i.sectionHeaderTextStyle = fi;
+            this._a("sectionHeaderTextStyle", this.i.sectionHeaderTextStyle != null ? this.i.sectionHeaderTextStyle.fontString : "");
         },
         enumerable: false,
         configurable: true
@@ -2384,16 +2384,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.g1 == null) {
+            if (this.i.summaryRootLabelTextStyle == null) {
                 return null;
             }
-            return this.i.g1.fontString;
+            return this.i.summaryRootLabelTextStyle.fontString;
         },
         set: function (v) {
             var fi = new FontInfo();
             fi.fontString = v;
-            this.i.g1 = fi;
-            this._a("summaryRootLabelTextStyle", this.i.g1 != null ? this.i.g1.fontString : "");
+            this.i.summaryRootLabelTextStyle = fi;
+            this._a("summaryRootLabelTextStyle", this.i.summaryRootLabelTextStyle != null ? this.i.summaryRootLabelTextStyle.fontString : "");
         },
         enumerable: false,
         configurable: true
@@ -2403,16 +2403,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.g3 == null) {
+            if (this.i.summarySectionLabelTextStyle == null) {
                 return null;
             }
-            return this.i.g3.fontString;
+            return this.i.summarySectionLabelTextStyle.fontString;
         },
         set: function (v) {
             var fi = new FontInfo();
             fi.fontString = v;
-            this.i.g3 = fi;
-            this._a("summarySectionLabelTextStyle", this.i.g3 != null ? this.i.g3.fontString : "");
+            this.i.summarySectionLabelTextStyle = fi;
+            this._a("summarySectionLabelTextStyle", this.i.summarySectionLabelTextStyle != null ? this.i.summarySectionLabelTextStyle.fontString : "");
         },
         enumerable: false,
         configurable: true
@@ -2422,11 +2422,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.aam);
+            return brushToString(this.i.summaryRootValueTextColor);
         },
         set: function (v) {
-            this.i.aam = stringToBrush(v);
-            this._a("summaryRootValueTextColor", brushToString(this.i.aam));
+            this.i.summaryRootValueTextColor = stringToBrush(v);
+            this._a("summaryRootValueTextColor", brushToString(this.i.summaryRootValueTextColor));
         },
         enumerable: false,
         configurable: true
@@ -2436,16 +2436,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.g2 == null) {
+            if (this.i.summaryRootValueTextStyle == null) {
                 return null;
             }
-            return this.i.g2.fontString;
+            return this.i.summaryRootValueTextStyle.fontString;
         },
         set: function (v) {
             var fi = new FontInfo();
             fi.fontString = v;
-            this.i.g2 = fi;
-            this._a("summaryRootValueTextStyle", this.i.g2 != null ? this.i.g2.fontString : "");
+            this.i.summaryRootValueTextStyle = fi;
+            this._a("summaryRootValueTextStyle", this.i.summaryRootValueTextStyle != null ? this.i.summaryRootValueTextStyle.fontString : "");
         },
         enumerable: false,
         configurable: true
@@ -2455,16 +2455,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.g4 == null) {
+            if (this.i.summarySectionValueTextStyle == null) {
                 return null;
             }
-            return this.i.g4.fontString;
+            return this.i.summarySectionValueTextStyle.fontString;
         },
         set: function (v) {
             var fi = new FontInfo();
             fi.fontString = v;
-            this.i.g4 = fi;
-            this._a("summarySectionValueTextStyle", this.i.g4 != null ? this.i.g4.fontString : "");
+            this.i.summarySectionValueTextStyle = fi;
+            this._a("summarySectionValueTextStyle", this.i.summarySectionValueTextStyle != null ? this.i.summarySectionValueTextStyle.fontString : "");
         },
         enumerable: false,
         configurable: true
@@ -2474,11 +2474,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.aaq);
+            return brushToString(this.i.summarySectionValueTextColor);
         },
         set: function (v) {
-            this.i.aaq = stringToBrush(v);
-            this._a("summarySectionValueTextColor", brushToString(this.i.aaq));
+            this.i.summarySectionValueTextColor = stringToBrush(v);
+            this._a("summarySectionValueTextColor", brushToString(this.i.summarySectionValueTextColor));
         },
         enumerable: false,
         configurable: true
@@ -2488,11 +2488,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.aak);
+            return brushToString(this.i.summaryRootLabelTextColor);
         },
         set: function (v) {
-            this.i.aak = stringToBrush(v);
-            this._a("summaryRootLabelTextColor", brushToString(this.i.aak));
+            this.i.summaryRootLabelTextColor = stringToBrush(v);
+            this._a("summaryRootLabelTextColor", brushToString(this.i.summaryRootLabelTextColor));
         },
         enumerable: false,
         configurable: true
@@ -2502,11 +2502,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.aao);
+            return brushToString(this.i.summarySectionLabelTextColor);
         },
         set: function (v) {
-            this.i.aao = stringToBrush(v);
-            this._a("summarySectionLabelTextColor", brushToString(this.i.aao));
+            this.i.summarySectionLabelTextColor = stringToBrush(v);
+            this._a("summarySectionLabelTextColor", brushToString(this.i.summarySectionLabelTextColor));
         },
         enumerable: false,
         configurable: true
@@ -2516,11 +2516,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.aal);
+            return brushToString(this.i.summaryRootSelectedBackground);
         },
         set: function (v) {
-            this.i.aal = stringToBrush(v);
-            this._a("summaryRootSelectedBackground", brushToString(this.i.aal));
+            this.i.summaryRootSelectedBackground = stringToBrush(v);
+            this._a("summaryRootSelectedBackground", brushToString(this.i.summaryRootSelectedBackground));
         },
         enumerable: false,
         configurable: true
@@ -2530,11 +2530,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.aap);
+            return brushToString(this.i.summarySectionSelectedBackground);
         },
         set: function (v) {
-            this.i.aap = stringToBrush(v);
-            this._a("summarySectionSelectedBackground", brushToString(this.i.aap));
+            this.i.summarySectionSelectedBackground = stringToBrush(v);
+            this._a("summarySectionSelectedBackground", brushToString(this.i.summarySectionSelectedBackground));
         },
         enumerable: false,
         configurable: true
@@ -2544,11 +2544,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the width of the pinned area separators.
         */
         get: function () {
-            return this.i.n8;
+            return this.i.pinnedAreaSeparatorWidth;
         },
         set: function (v) {
-            this.i.n8 = +v;
-            this._a("pinnedAreaSeparatorWidth", this.i.n8);
+            this.i.pinnedAreaSeparatorWidth = +v;
+            this._a("pinnedAreaSeparatorWidth", this.i.pinnedAreaSeparatorWidth);
         },
         enumerable: false,
         configurable: true
@@ -2558,11 +2558,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the width of the header separators.
         */
         get: function () {
-            return this.i.n5;
+            return this.i.headerSeparatorWidth;
         },
         set: function (v) {
-            this.i.n5 = +v;
-            this._a("headerSeparatorWidth", this.i.n5);
+            this.i.headerSeparatorWidth = +v;
+            this._a("headerSeparatorWidth", this.i.headerSeparatorWidth);
         },
         enumerable: false,
         configurable: true
@@ -2572,11 +2572,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.z3);
+            return brushToString(this.i.headerSeparatorBackground);
         },
         set: function (v) {
-            this.i.z3 = stringToBrush(v);
-            this._a("headerSeparatorBackground", brushToString(this.i.z3));
+            this.i.headerSeparatorBackground = stringToBrush(v);
+            this._a("headerSeparatorBackground", brushToString(this.i.headerSeparatorBackground));
         },
         enumerable: false,
         configurable: true
@@ -2586,11 +2586,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.z1);
+            return brushToString(this.i.headerBackground);
         },
         set: function (v) {
-            this.i.z1 = stringToBrush(v);
-            this._a("headerBackground", brushToString(this.i.z1));
+            this.i.headerBackground = stringToBrush(v);
+            this._a("headerBackground", brushToString(this.i.headerBackground));
         },
         enumerable: false,
         configurable: true
@@ -2600,11 +2600,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.z5);
+            return brushToString(this.i.headerTextColor);
         },
         set: function (v) {
-            this.i.z5 = stringToBrush(v);
-            this._a("headerTextColor", brushToString(this.i.z5));
+            this.i.headerTextColor = stringToBrush(v);
+            this._a("headerTextColor", brushToString(this.i.headerTextColor));
         },
         enumerable: false,
         configurable: true
@@ -2614,16 +2614,16 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the font to use for header cells
         */
         get: function () {
-            if (this.i.gz == null) {
+            if (this.i.headerTextStyle == null) {
                 return null;
             }
-            return this.i.gz.fontString;
+            return this.i.headerTextStyle.fontString;
         },
         set: function (v) {
             var fi = new FontInfo();
             fi.fontString = v;
-            this.i.gz = fi;
-            this._a("headerTextStyle", this.i.gz != null ? this.i.gz.fontString : "");
+            this.i.headerTextStyle = fi;
+            this._a("headerTextStyle", this.i.headerTextStyle != null ? this.i.headerTextStyle.fontString : "");
         },
         enumerable: false,
         configurable: true
@@ -2633,22 +2633,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.aaa);
+            return brushToString(this.i.rowSeparatorBackground);
         },
         set: function (v) {
-            this.i.aaa = stringToBrush(v);
-            this._a("rowSeparatorBackground", brushToString(this.i.aaa));
+            this.i.rowSeparatorBackground = stringToBrush(v);
+            this._a("rowSeparatorBackground", brushToString(this.i.rowSeparatorBackground));
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcDataGridComponent.prototype, "headerRowSeparatorBackground", {
         get: function () {
-            return brushToString(this.i.z2);
+            return brushToString(this.i.headerRowSeparatorBackground);
         },
         set: function (v) {
-            this.i.z2 = stringToBrush(v);
-            this._a("headerRowSeparatorBackground", brushToString(this.i.z2));
+            this.i.headerRowSeparatorBackground = stringToBrush(v);
+            this._a("headerRowSeparatorBackground", brushToString(this.i.headerRowSeparatorBackground));
         },
         enumerable: false,
         configurable: true
@@ -2658,11 +2658,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.aad);
+            return brushToString(this.i.rowSeparatorStickyRowBackground);
         },
         set: function (v) {
-            this.i.aad = stringToBrush(v);
-            this._a("rowSeparatorStickyRowBackground", brushToString(this.i.aad));
+            this.i.rowSeparatorStickyRowBackground = stringToBrush(v);
+            this._a("rowSeparatorStickyRowBackground", brushToString(this.i.rowSeparatorStickyRowBackground));
         },
         enumerable: false,
         configurable: true
@@ -2672,11 +2672,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.aab);
+            return brushToString(this.i.rowSeparatorLastStickyRowBackground);
         },
         set: function (v) {
-            this.i.aab = stringToBrush(v);
-            this._a("rowSeparatorLastStickyRowBackground", brushToString(this.i.aab));
+            this.i.rowSeparatorLastStickyRowBackground = stringToBrush(v);
+            this._a("rowSeparatorLastStickyRowBackground", brushToString(this.i.rowSeparatorLastStickyRowBackground));
         },
         enumerable: false,
         configurable: true
@@ -2686,11 +2686,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.aac);
+            return brushToString(this.i.rowSeparatorPinnedRowBackground);
         },
         set: function (v) {
-            this.i.aac = stringToBrush(v);
-            this._a("rowSeparatorPinnedRowBackground", brushToString(this.i.aac));
+            this.i.rowSeparatorPinnedRowBackground = stringToBrush(v);
+            this._a("rowSeparatorPinnedRowBackground", brushToString(this.i.rowSeparatorPinnedRowBackground));
         },
         enumerable: false,
         configurable: true
@@ -2700,11 +2700,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Sets or gets the width to use for the column resizing separator.
         */
         get: function () {
-            return this.i.nj;
+            return this.i.columnResizingSeparatorWidth;
         },
         set: function (v) {
-            this.i.nj = +v;
-            this._a("columnResizingSeparatorWidth", this.i.nj);
+            this.i.columnResizingSeparatorWidth = +v;
+            this._a("columnResizingSeparatorWidth", this.i.columnResizingSeparatorWidth);
         },
         enumerable: false,
         configurable: true
@@ -2714,11 +2714,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the opacity of the column Resizing separator.
         */
         get: function () {
-            return this.i.mc;
+            return this.i.columnResizingSeparatorOpacity;
         },
         set: function (v) {
-            this.i.mc = +v;
-            this._a("columnResizingSeparatorOpacity", this.i.mc);
+            this.i.columnResizingSeparatorOpacity = +v;
+            this._a("columnResizingSeparatorOpacity", this.i.columnResizingSeparatorOpacity);
         },
         enumerable: false,
         configurable: true
@@ -2728,11 +2728,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Sets or gets the width to use for the column resizing separator.
         */
         get: function () {
-            return this.i.nh;
+            return this.i.columnMovingSeparatorWidth;
         },
         set: function (v) {
-            this.i.nh = +v;
-            this._a("columnMovingSeparatorWidth", this.i.nh);
+            this.i.columnMovingSeparatorWidth = +v;
+            this._a("columnMovingSeparatorWidth", this.i.columnMovingSeparatorWidth);
         },
         enumerable: false,
         configurable: true
@@ -2742,11 +2742,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the opacity of the column moving separator.
         */
         get: function () {
-            return this.i.mb;
+            return this.i.columnMovingSeparatorOpacity;
         },
         set: function (v) {
-            this.i.mb = +v;
-            this._a("columnMovingSeparatorOpacity", this.i.mb);
+            this.i.columnMovingSeparatorOpacity = +v;
+            this._a("columnMovingSeparatorOpacity", this.i.columnMovingSeparatorOpacity);
         },
         enumerable: false,
         configurable: true
@@ -2756,11 +2756,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.zy);
+            return brushToString(this.i.columnResizingSeparatorBackground);
         },
         set: function (v) {
-            this.i.zy = stringToBrush(v);
-            this._a("columnResizingSeparatorBackground", brushToString(this.i.zy));
+            this.i.columnResizingSeparatorBackground = stringToBrush(v);
+            this._a("columnResizingSeparatorBackground", brushToString(this.i.columnResizingSeparatorBackground));
         },
         enumerable: false,
         configurable: true
@@ -2770,11 +2770,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.zw);
+            return brushToString(this.i.columnMovingSeparatorBackground);
         },
         set: function (v) {
-            this.i.zw = stringToBrush(v);
-            this._a("columnMovingSeparatorBackground", brushToString(this.i.zw));
+            this.i.columnMovingSeparatorBackground = stringToBrush(v);
+            this._a("columnMovingSeparatorBackground", brushToString(this.i.columnMovingSeparatorBackground));
         },
         enumerable: false,
         configurable: true
@@ -2784,11 +2784,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.k5;
+            return this.i.shiftSectionContent;
         },
         set: function (v) {
-            this.i.k5 = ensureBool(v);
-            this._a("shiftSectionContent", this.i.k5);
+            this.i.shiftSectionContent = ensureBool(v);
+            this._a("shiftSectionContent", this.i.shiftSectionContent);
         },
         enumerable: false,
         configurable: true
@@ -2798,11 +2798,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the column options icon alignment in header cells.
         */
         get: function () {
-            return this.i.bp;
+            return this.i.columnOptionsIconAlignment;
         },
         set: function (v) {
-            this.i.bp = ensureEnum(ColumnOptionsIconAlignment_$type, v);
-            this._a("columnOptionsIconAlignment", enumToString(ColumnOptionsIconAlignment_$type, this.i.bp));
+            this.i.columnOptionsIconAlignment = ensureEnum(ColumnOptionsIconAlignment_$type, v);
+            this._a("columnOptionsIconAlignment", enumToString(ColumnOptionsIconAlignment_$type, this.i.columnOptionsIconAlignment));
         },
         enumerable: false,
         configurable: true
@@ -2812,11 +2812,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the column options icon color in header cells.
         */
         get: function () {
-            return brushToString(this.i.zx);
+            return brushToString(this.i.columnOptionsIconColor);
         },
         set: function (v) {
-            this.i.zx = stringToBrush(v);
-            this._a("columnOptionsIconColor", brushToString(this.i.zx));
+            this.i.columnOptionsIconColor = stringToBrush(v);
+            this._a("columnOptionsIconColor", brushToString(this.i.columnOptionsIconColor));
         },
         enumerable: false,
         configurable: true
@@ -2826,11 +2826,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets how the column options icon will behave inside header cells.
         */
         get: function () {
-            return this.i.br;
+            return this.i.columnOptionsIconBehavior;
         },
         set: function (v) {
-            this.i.br = ensureEnum(ColumnOptionsIconBehavior_$type, v);
-            this._a("columnOptionsIconBehavior", enumToString(ColumnOptionsIconBehavior_$type, this.i.br));
+            this.i.columnOptionsIconBehavior = ensureEnum(ColumnOptionsIconBehavior_$type, v);
+            this._a("columnOptionsIconBehavior", enumToString(ColumnOptionsIconBehavior_$type, this.i.columnOptionsIconBehavior));
         },
         enumerable: false,
         configurable: true
@@ -2854,212 +2854,212 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets the actual border width.
         */
         get: function () {
-            return this.i.aaz;
+            return this.i.actualBorderWidth;
         },
         set: function (v) {
-            this.i.aaz = v;
+            this.i.actualBorderWidth = v;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcDataGridComponent.prototype, "borderWidthBottom", {
         get: function () {
-            return this.i.aa0 ? this.i.aa0.bottom : NaN;
+            return this.i.borderWidth ? this.i.borderWidth.bottom : NaN;
         },
         set: function (v) {
             this.ensureBorderWidth();
-            this.i.aa0.bottom = +v;
-            this._a("borderWidthBottom", this.i.aa0.bottom);
-            this.i.aa0 = this.i.aa0;
+            this.i.borderWidth.bottom = +v;
+            this._a("borderWidthBottom", this.i.borderWidth.bottom);
+            this.i.borderWidth = this.i.borderWidth;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcDataGridComponent.prototype, "borderWidthLeft", {
         get: function () {
-            return this.i.aa0 ? this.i.aa0.left : NaN;
+            return this.i.borderWidth ? this.i.borderWidth.left : NaN;
         },
         set: function (v) {
             this.ensureBorderWidth();
-            this.i.aa0.left = +v;
-            this._a("borderWidthLeft", this.i.aa0.left);
-            this.i.aa0 = this.i.aa0;
+            this.i.borderWidth.left = +v;
+            this._a("borderWidthLeft", this.i.borderWidth.left);
+            this.i.borderWidth = this.i.borderWidth;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcDataGridComponent.prototype, "borderWidthRight", {
         get: function () {
-            return this.i.aa0 ? this.i.aa0.right : NaN;
+            return this.i.borderWidth ? this.i.borderWidth.right : NaN;
         },
         set: function (v) {
             this.ensureBorderWidth();
-            this.i.aa0.right = +v;
-            this._a("borderWidthRight", this.i.aa0.right);
-            this.i.aa0 = this.i.aa0;
+            this.i.borderWidth.right = +v;
+            this._a("borderWidthRight", this.i.borderWidth.right);
+            this.i.borderWidth = this.i.borderWidth;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcDataGridComponent.prototype, "borderWidthTop", {
         get: function () {
-            return this.i.aa0 ? this.i.aa0.top : NaN;
+            return this.i.borderWidth ? this.i.borderWidth.top : NaN;
         },
         set: function (v) {
             this.ensureBorderWidth();
-            this.i.aa0.top = +v;
-            this._a("borderWidthTop", this.i.aa0.top);
-            this.i.aa0 = this.i.aa0;
+            this.i.borderWidth.top = +v;
+            this._a("borderWidthTop", this.i.borderWidth.top);
+            this.i.borderWidth = this.i.borderWidth;
         },
         enumerable: false,
         configurable: true
     });
     IgcDataGridComponent.prototype.ensureBorderWidth = function () {
-        if (this.i.aa0) {
+        if (this.i.borderWidth) {
             return;
         }
-        this.i.aa0 = new Thickness(2);
+        this.i.borderWidth = 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.kh;
+            return this.i.notifyOnAllSelectionChanges;
         },
         set: function (v) {
-            this.i.kh = ensureBool(v);
-            this._a("notifyOnAllSelectionChanges", this.i.kh);
+            this.i.notifyOnAllSelectionChanges = ensureBool(v);
+            this._a("notifyOnAllSelectionChanges", this.i.notifyOnAllSelectionChanges);
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcDataGridComponent.prototype, "cornerRadiusBottomRight", {
         get: function () {
-            return this.i.yr ? this.i.yr.b : NaN;
+            return this.i.cornerRadius ? this.i.cornerRadius.b : NaN;
         },
         set: function (v) {
             this.ensureCornerRadius();
-            this.i.yr.b = +v;
-            this._a("cornerRadiusBottomRight", this.i.yr.b);
-            this.i.yr = this.i.yr;
+            this.i.cornerRadius.b = +v;
+            this._a("cornerRadiusBottomRight", this.i.cornerRadius.b);
+            this.i.cornerRadius = this.i.cornerRadius;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcDataGridComponent.prototype, "cornerRadiusBottomLeft", {
         get: function () {
-            return this.i.yr ? this.i.yr.a : NaN;
+            return this.i.cornerRadius ? this.i.cornerRadius.a : NaN;
         },
         set: function (v) {
             this.ensureCornerRadius();
-            this.i.yr.a = +v;
-            this._a("cornerRadiusBottomLeft", this.i.yr.a);
-            this.i.yr = this.i.yr;
+            this.i.cornerRadius.a = +v;
+            this._a("cornerRadiusBottomLeft", this.i.cornerRadius.a);
+            this.i.cornerRadius = this.i.cornerRadius;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcDataGridComponent.prototype, "cornerRadiusTopLeft", {
         get: function () {
-            return this.i.yr ? this.i.yr.c : NaN;
+            return this.i.cornerRadius ? this.i.cornerRadius.c : NaN;
         },
         set: function (v) {
             this.ensureCornerRadius();
-            this.i.yr.c = +v;
-            this._a("cornerRadiusTopLeft", this.i.yr.c);
-            this.i.yr = this.i.yr;
+            this.i.cornerRadius.c = +v;
+            this._a("cornerRadiusTopLeft", this.i.cornerRadius.c);
+            this.i.cornerRadius = this.i.cornerRadius;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcDataGridComponent.prototype, "cornerRadiusTopRight", {
         get: function () {
-            return this.i.yr ? this.i.yr.d : NaN;
+            return this.i.cornerRadius ? this.i.cornerRadius.d : NaN;
         },
         set: function (v) {
             this.ensureCornerRadius();
-            this.i.yr.d = +v;
-            this._a("cornerRadiusTopRight", this.i.yr.d);
-            this.i.yr = this.i.yr;
+            this.i.cornerRadius.d = +v;
+            this._a("cornerRadiusTopRight", this.i.cornerRadius.d);
+            this.i.cornerRadius = this.i.cornerRadius;
         },
         enumerable: false,
         configurable: true
     });
     IgcDataGridComponent.prototype.ensureCornerRadius = function () {
-        if (this.i.yr) {
+        if (this.i.cornerRadius) {
             return;
         }
-        this.i.yr = new CornerRadius(2);
+        this.i.cornerRadius = new CornerRadius(2);
     };
     Object.defineProperty(IgcDataGridComponent.prototype, "actualCornerRadiusBottomRight", {
         get: function () {
-            return this.i.yp ? this.i.yp.b : NaN;
+            return this.i.actualCornerRadius ? this.i.actualCornerRadius.b : NaN;
         },
         set: function (v) {
             this.ensureActualCornerRadius();
-            this.i.yp.b = +v;
-            this._a("actualCornerRadiusBottomRight", this.i.yp.b);
-            this.i.yp = this.i.yp;
+            this.i.actualCornerRadius.b = +v;
+            this._a("actualCornerRadiusBottomRight", this.i.actualCornerRadius.b);
+            this.i.actualCornerRadius = this.i.actualCornerRadius;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcDataGridComponent.prototype, "actualCornerRadiusBottomLeft", {
         get: function () {
-            return this.i.yp ? this.i.yp.a : NaN;
+            return this.i.actualCornerRadius ? this.i.actualCornerRadius.a : NaN;
         },
         set: function (v) {
             this.ensureActualCornerRadius();
-            this.i.yp.a = +v;
-            this._a("actualCornerRadiusBottomLeft", this.i.yp.a);
-            this.i.yp = this.i.yp;
+            this.i.actualCornerRadius.a = +v;
+            this._a("actualCornerRadiusBottomLeft", this.i.actualCornerRadius.a);
+            this.i.actualCornerRadius = this.i.actualCornerRadius;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcDataGridComponent.prototype, "actualCornerRadiusTopLeft", {
         get: function () {
-            return this.i.yp ? this.i.yp.c : NaN;
+            return this.i.actualCornerRadius ? this.i.actualCornerRadius.c : NaN;
         },
         set: function (v) {
             this.ensureActualCornerRadius();
-            this.i.yp.c = +v;
-            this._a("actualCornerRadiusTopLeft", this.i.yp.c);
-            this.i.yp = this.i.yp;
+            this.i.actualCornerRadius.c = +v;
+            this._a("actualCornerRadiusTopLeft", this.i.actualCornerRadius.c);
+            this.i.actualCornerRadius = this.i.actualCornerRadius;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcDataGridComponent.prototype, "actualCornerRadiusTopRight", {
         get: function () {
-            return this.i.yp ? this.i.yp.d : NaN;
+            return this.i.actualCornerRadius ? this.i.actualCornerRadius.d : NaN;
         },
         set: function (v) {
             this.ensureActualCornerRadius();
-            this.i.yp.d = +v;
-            this._a("actualCornerRadiusTopRight", this.i.yp.d);
-            this.i.yp = this.i.yp;
+            this.i.actualCornerRadius.d = +v;
+            this._a("actualCornerRadiusTopRight", this.i.actualCornerRadius.d);
+            this.i.actualCornerRadius = this.i.actualCornerRadius;
         },
         enumerable: false,
         configurable: true
     });
     IgcDataGridComponent.prototype.ensureActualCornerRadius = function () {
-        if (this.i.yp) {
+        if (this.i.actualCornerRadius) {
             return;
         }
-        this.i.yp = new CornerRadius(2);
+        this.i.actualCornerRadius = 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.je;
+            return this.i.isActiveCellStyleEnabled;
         },
         set: function (v) {
-            this.i.je = ensureBool(v);
-            this._a("isActiveCellStyleEnabled", this.i.je);
+            this.i.isActiveCellStyleEnabled = ensureBool(v);
+            this._a("isActiveCellStyleEnabled", this.i.isActiveCellStyleEnabled);
         },
         enumerable: false,
         configurable: true
@@ -3071,7 +3071,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         get: function () {
             if (this._responsiveStates === null) {
                 var coll = new IgcResponsiveStatesCollection();
-                var innerColl = this.i.fq;
+                var innerColl = this.i.responsiveStates;
                 if (!innerColl) {
                     innerColl = new ResponsiveStatesCollection_internal();
                 }
@@ -3087,7 +3087,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.fq;
+            var innerColl = this.i.responsiveStates;
             if (!innerColl) {
                 innerColl = new ResponsiveStatesCollection_internal();
             }
@@ -3103,7 +3103,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets the region of the grid that is visible.
         */
         get: function () {
-            return fromRect(this.i.aas);
+            return fromRect(this.i.actualVisibleRegion);
         },
         enumerable: false,
         configurable: true
@@ -3113,7 +3113,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets the current sort that is applied to the grid. Collection can be updated to modify the sort for the grid. Once sort descriptions are in this collection, the grid will no longer listen for changes on their properties.
         */
         get: function () {
-            var r = this.i.ca;
+            var r = this.i.initialSortDescriptions;
             if (r == null) {
                 return null;
             }
@@ -3139,7 +3139,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets the current sort that is applied to the grid. Collection can be updated to modify the sort for the grid. Once sort descriptions are in this collection, the grid will no longer listen for changes on their properties.
         */
         get: function () {
-            var r = this.i.bc;
+            var r = this.i.initialGroupDescriptions;
             if (r == null) {
                 return null;
             }
@@ -3165,7 +3165,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets the current summaries that are applied to the grid.
         */
         get: function () {
-            var r = this.i.cf;
+            var r = this.i.initialSummaryDescriptions;
             if (r == null) {
                 return null;
             }
@@ -3188,30 +3188,30 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     });
     Object.defineProperty(IgcDataGridComponent.prototype, "initialSorts", {
         get: function () {
-            return this.i.q6;
+            return this.i.initialSorts;
         },
         set: function (v) {
-            this.i.q6 = v;
+            this.i.initialSorts = v;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcDataGridComponent.prototype, "initialGroups", {
         get: function () {
-            return this.i.q4;
+            return this.i.initialGroups;
         },
         set: function (v) {
-            this.i.q4 = v;
+            this.i.initialGroups = v;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcDataGridComponent.prototype, "initialSummaries", {
         get: function () {
-            return this.i.q8;
+            return this.i.initialSummaries;
         },
         set: function (v) {
-            this.i.q8 = v;
+            this.i.initialSummaries = v;
         },
         enumerable: false,
         configurable: true
@@ -3221,7 +3221,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets the current sort that is applied to the grid. Collection can be updated to modify the sort for the grid. Once sort descriptions are in this collection, the grid will no longer listen for changes on their properties.
         */
         get: function () {
-            var r = this.i.cb;
+            var r = this.i.sortDescriptions;
             if (r == null) {
                 return null;
             }
@@ -3247,7 +3247,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets the current grouping that is applied to the grid. Collection can be updated to modify the grouping for the grid. Once grouping descriptions are in this collection, the grid will no longer listen for changes on their properties.
         */
         get: function () {
-            var r = this.i.bb;
+            var r = this.i.groupDescriptions;
             if (r == null) {
                 return null;
             }
@@ -3273,7 +3273,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets the current filter that is applied to the grid. Collection can be updated to modify the filter for the grid. Once filter expresisons are in this collection, the grid will no longer listen for changes on their properties.
         */
         get: function () {
-            var r = this.i.u;
+            var r = this.i.filterExpressions;
             if (r == null) {
                 return null;
             }
@@ -3299,7 +3299,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets the current summaries that are applied to the grid.
         */
         get: function () {
-            var r = this.i.cg;
+            var r = this.i.summaryDescriptions;
             if (r == null) {
                 return null;
             }
@@ -3325,11 +3325,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the scope which summaries are calculated for.
         */
         get: function () {
-            return this.i.gg;
+            return this.i.summaryScope;
         },
         set: function (v) {
-            this.i.gg = ensureEnum(SummaryScope_$type, v);
-            this._a("summaryScope", enumToString(SummaryScope_$type, this.i.gg));
+            this.i.summaryScope = ensureEnum(SummaryScope_$type, v);
+            this._a("summaryScope", enumToString(SummaryScope_$type, this.i.summaryScope));
         },
         enumerable: false,
         configurable: true
@@ -3339,11 +3339,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets whether group headers are collapsable.
         */
         get: function () {
-            return this.i.jw;
+            return this.i.isGroupCollapsable;
         },
         set: function (v) {
-            this.i.jw = ensureBool(v);
-            this._a("isGroupCollapsable", this.i.jw);
+            this.i.isGroupCollapsable = ensureBool(v);
+            this._a("isGroupCollapsable", this.i.isGroupCollapsable);
         },
         enumerable: false,
         configurable: true
@@ -3353,11 +3353,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets how group headers are displayed when there are multiple groups defined in the grid.
         */
         get: function () {
-            return this.i.er;
+            return this.i.groupHeaderDisplayMode;
         },
         set: function (v) {
-            this.i.er = ensureEnum(GroupHeaderDisplayMode_$type, v);
-            this._a("groupHeaderDisplayMode", enumToString(GroupHeaderDisplayMode_$type, this.i.er));
+            this.i.groupHeaderDisplayMode = ensureEnum(GroupHeaderDisplayMode_$type, v);
+            this._a("groupHeaderDisplayMode", enumToString(GroupHeaderDisplayMode_$type, this.i.groupHeaderDisplayMode));
         },
         enumerable: false,
         configurable: true
@@ -3367,11 +3367,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets whether groups are expanded or collapsed by default.
         */
         get: function () {
-            return this.i.jx;
+            return this.i.isGroupExpandedDefault;
         },
         set: function (v) {
-            this.i.jx = ensureBool(v);
-            this._a("isGroupExpandedDefault", this.i.jx);
+            this.i.isGroupExpandedDefault = ensureBool(v);
+            this._a("isGroupExpandedDefault", this.i.isGroupExpandedDefault);
         },
         enumerable: false,
         configurable: true
@@ -3381,11 +3381,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the display mode summaries will use inside groups.
         */
         get: function () {
-            return this.i.et;
+            return this.i.groupSummaryDisplayMode;
         },
         set: function (v) {
-            this.i.et = ensureEnum(GroupSummaryDisplayMode_$type, v);
-            this._a("groupSummaryDisplayMode", enumToString(GroupSummaryDisplayMode_$type, this.i.et));
+            this.i.groupSummaryDisplayMode = ensureEnum(GroupSummaryDisplayMode_$type, v);
+            this._a("groupSummaryDisplayMode", enumToString(GroupSummaryDisplayMode_$type, this.i.groupSummaryDisplayMode));
         },
         enumerable: false,
         configurable: true
@@ -3404,11 +3404,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * will be auto accepted.
         */
         get: function () {
-            return this.i.iy;
+            return this.i.autoAcceptEdits;
         },
         set: function (v) {
-            this.i.iy = ensureBool(v);
-            this._a("autoAcceptEdits", this.i.iy);
+            this.i.autoAcceptEdits = ensureBool(v);
+            this._a("autoAcceptEdits", this.i.autoAcceptEdits);
         },
         enumerable: false,
         configurable: true
@@ -3419,14 +3419,14 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * If a primary key cannot be inferred from the data source, you may need to provide one here.
         */
         get: function () {
-            return this.i.l;
+            return this.i.primaryKey;
         },
         set: function (v) {
             if (v && !Array.isArray(v) && typeof (v) == "string") {
                 var re = /\s*(?:,|\s|$)\s*/gm;
                 v = v.split(re);
             }
-            this.i.l = v;
+            this.i.primaryKey = v;
         },
         enumerable: false,
         configurable: true
@@ -3436,14 +3436,14 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets either the inferred primary key from the data source, or the user provided primary key, if present. Represents the actual primary key that the grid will use in operations that require it.
         */
         get: function () {
-            return this.i.e;
+            return this.i.actualPrimaryKey;
         },
         set: function (v) {
             if (v && !Array.isArray(v) && typeof (v) == "string") {
                 var re = /\s*(?:,|\s|$)\s*/gm;
                 v = v.split(re);
             }
-            this.i.e = v;
+            this.i.actualPrimaryKey = v;
         },
         enumerable: false,
         configurable: true
@@ -3484,11 +3484,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Sets or gets whether the grid will react to sort changes.
         */
         get: function () {
-            return this.i.ky;
+            return this.i.reactsToSortChanges;
         },
         set: function (v) {
-            this.i.ky = ensureBool(v);
-            this._a("reactsToSortChanges", this.i.ky);
+            this.i.reactsToSortChanges = ensureBool(v);
+            this._a("reactsToSortChanges", this.i.reactsToSortChanges);
         },
         enumerable: false,
         configurable: true
@@ -3498,11 +3498,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Sets or gets whether the grid will react to group changes.
         */
         get: function () {
-            return this.i.kx;
+            return this.i.reactsToGroupChanges;
         },
         set: function (v) {
-            this.i.kx = ensureBool(v);
-            this._a("reactsToGroupChanges", this.i.kx);
+            this.i.reactsToGroupChanges = ensureBool(v);
+            this._a("reactsToGroupChanges", this.i.reactsToGroupChanges);
         },
         enumerable: false,
         configurable: true
@@ -3512,11 +3512,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Sets or gets whether the grid will react to filter changes.
         */
         get: function () {
-            return this.i.kw;
+            return this.i.reactsToFilterChanges;
         },
         set: function (v) {
-            this.i.kw = ensureBool(v);
-            this._a("reactsToFilterChanges", this.i.kw);
+            this.i.reactsToFilterChanges = ensureBool(v);
+            this._a("reactsToFilterChanges", this.i.reactsToFilterChanges);
         },
         enumerable: false,
         configurable: true
@@ -3526,7 +3526,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets whether an undo can be performed.
         */
         get: function () {
-            return this.i.i5;
+            return this.i.canUndo;
         },
         enumerable: false,
         configurable: true
@@ -3536,7 +3536,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets whether a redo can be performed.
         */
         get: function () {
-            return this.i.i4;
+            return this.i.canRedo;
         },
         enumerable: false,
         configurable: true
@@ -3547,7 +3547,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * on any pending transactions.
         */
         get: function () {
-            return this.i.i1;
+            return this.i.canCommit;
         },
         enumerable: false,
         configurable: true
@@ -3557,11 +3557,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the behavior of the Enter key.
         */
         get: function () {
-            return this.i.c0;
+            return this.i.enterBehavior;
         },
         set: function (v) {
-            this.i.c0 = ensureEnum(EnterKeyBehaviors_$type, v);
-            this._a("enterBehavior", enumToString(EnterKeyBehaviors_$type, this.i.c0));
+            this.i.enterBehavior = ensureEnum(EnterKeyBehaviors_$type, v);
+            this._a("enterBehavior", enumToString(EnterKeyBehaviors_$type, this.i.enterBehavior));
         },
         enumerable: false,
         configurable: true
@@ -3571,11 +3571,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the behavior of the enter key when exiting edit mode.
         */
         get: function () {
-            return this.i.cy;
+            return this.i.enterBehaviorAfterEdit;
         },
         set: function (v) {
-            this.i.cy = ensureEnum(EnterKeyBehaviorAfterEdit_$type, v);
-            this._a("enterBehaviorAfterEdit", enumToString(EnterKeyBehaviorAfterEdit_$type, this.i.cy));
+            this.i.enterBehaviorAfterEdit = ensureEnum(EnterKeyBehaviorAfterEdit_$type, v);
+            this._a("enterBehaviorAfterEdit", enumToString(EnterKeyBehaviorAfterEdit_$type, this.i.enterBehaviorAfterEdit));
         },
         enumerable: false,
         configurable: true
@@ -3585,11 +3585,11 @@ 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.jp;
+            return this.i.isColumnOptionsSummariesEnabled;
         },
         set: function (v) {
-            this.i.jp = ensureBool(v);
-            this._a("isColumnOptionsSummariesEnabled", this.i.jp);
+            this.i.isColumnOptionsSummariesEnabled = ensureBool(v);
+            this._a("isColumnOptionsSummariesEnabled", this.i.isColumnOptionsSummariesEnabled);
         },
         enumerable: false,
         configurable: true
@@ -3599,11 +3599,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets whether to show the grouping option in the column options menu.
         */
         get: function () {
-            return this.i.jo;
+            return this.i.isColumnOptionsGroupingEnabled;
         },
         set: function (v) {
-            this.i.jo = ensureBool(v);
-            this._a("isColumnOptionsGroupingEnabled", this.i.jo);
+            this.i.isColumnOptionsGroupingEnabled = ensureBool(v);
+            this._a("isColumnOptionsGroupingEnabled", this.i.isColumnOptionsGroupingEnabled);
         },
         enumerable: false,
         configurable: true
@@ -3613,11 +3613,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.fi;
+            return this.i.mergedCellMode;
         },
         set: function (v) {
-            this.i.fi = ensureEnum(MergedCellMode_$type, v);
-            this._a("mergedCellMode", enumToString(MergedCellMode_$type, this.i.fi));
+            this.i.mergedCellMode = ensureEnum(MergedCellMode_$type, v);
+            this._a("mergedCellMode", enumToString(MergedCellMode_$type, this.i.mergedCellMode));
         },
         enumerable: false,
         configurable: true
@@ -3627,11 +3627,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets how cells are evaluated for merging.
         */
         get: function () {
-            return this.i.fg;
+            return this.i.mergedCellEvaluationCriteria;
         },
         set: function (v) {
-            this.i.fg = ensureEnum(MergedCellEvaluationCriteria_$type, v);
-            this._a("mergedCellEvaluationCriteria", enumToString(MergedCellEvaluationCriteria_$type, this.i.fg));
+            this.i.mergedCellEvaluationCriteria = ensureEnum(MergedCellEvaluationCriteria_$type, v);
+            this._a("mergedCellEvaluationCriteria", enumToString(MergedCellEvaluationCriteria_$type, this.i.mergedCellEvaluationCriteria));
         },
         enumerable: false,
         configurable: true
@@ -3641,11 +3641,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the vertical alignment to use for the merged cell content.
         */
         get: function () {
-            return this.i.am;
+            return this.i.mergedCellVerticalAlignment;
         },
         set: function (v) {
-            this.i.am = ensureEnum(CellContentVerticalAlignment_$type, v);
-            this._a("mergedCellVerticalAlignment", enumToString(CellContentVerticalAlignment_$type, this.i.am));
+            this.i.mergedCellVerticalAlignment = ensureEnum(CellContentVerticalAlignment_$type, v);
+            this._a("mergedCellVerticalAlignment", enumToString(CellContentVerticalAlignment_$type, this.i.mergedCellVerticalAlignment));
         },
         enumerable: false,
         configurable: true
@@ -3655,11 +3655,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets which filter UI type to use.
         */
         get: function () {
-            return this.i.c7;
+            return this.i.filterUIType;
         },
         set: function (v) {
-            this.i.c7 = ensureEnum(FilterUIType_$type, v);
-            this._a("filterUIType", enumToString(FilterUIType_$type, this.i.c7));
+            this.i.filterUIType = ensureEnum(FilterUIType_$type, v);
+            this._a("filterUIType", enumToString(FilterUIType_$type, this.i.filterUIType));
         },
         enumerable: false,
         configurable: true
@@ -3669,11 +3669,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets how filters set through the filter UI are combined.
         */
         get: function () {
-            return this.i.c4;
+            return this.i.filterLogicalOperator;
         },
         set: function (v) {
-            this.i.c4 = ensureEnum(FilterLogicalOperator_$type, v);
-            this._a("filterLogicalOperator", enumToString(FilterLogicalOperator_$type, this.i.c4));
+            this.i.filterLogicalOperator = ensureEnum(FilterLogicalOperator_$type, v);
+            this._a("filterLogicalOperator", enumToString(FilterLogicalOperator_$type, this.i.filterLogicalOperator));
         },
         enumerable: false,
         configurable: true
@@ -3683,21 +3683,21 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets whether UI filters are case sensitive or not.
         */
         get: function () {
-            return this.i.c2;
+            return this.i.filterComparisonType;
         },
         set: function (v) {
-            this.i.c2 = ensureEnum(FilterComparisonType_$type, v);
-            this._a("filterComparisonType", enumToString(FilterComparisonType_$type, this.i.c2));
+            this.i.filterComparisonType = ensureEnum(FilterComparisonType_$type, v);
+            this._a("filterComparisonType", enumToString(FilterComparisonType_$type, this.i.filterComparisonType));
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcDataGridComponent.prototype, "todayOverride", {
         get: function () {
-            return this.i.lp;
+            return this.i.todayOverride;
         },
         set: function (v) {
-            this.i.lp = v;
+            this.i.todayOverride = v;
         },
         enumerable: false,
         configurable: true
@@ -3707,11 +3707,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets whether selection is cleared when pressing the Escape key.
         */
         get: function () {
-            return this.i.i6;
+            return this.i.clearSelectionOnEscape;
         },
         set: function (v) {
-            this.i.i6 = ensureBool(v);
-            this._a("clearSelectionOnEscape", this.i.i6);
+            this.i.clearSelectionOnEscape = ensureBool(v);
+            this._a("clearSelectionOnEscape", this.i.clearSelectionOnEscape);
         },
         enumerable: false,
         configurable: true
@@ -3721,11 +3721,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the size of each page when the pager is visible.
         */
         get: function () {
-            return this.i.n6;
+            return this.i.pageSize;
         },
         set: function (v) {
-            this.i.n6 = +v;
-            this._a("pageSize", this.i.n6);
+            this.i.pageSize = +v;
+            this._a("pageSize", this.i.pageSize);
         },
         enumerable: false,
         configurable: true
@@ -3735,11 +3735,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets whether to show the column chooser button in the toolbar.
         */
         get: function () {
-            return this.i.kc;
+            return this.i.isToolbarColumnChooserVisible;
         },
         set: function (v) {
-            this.i.kc = ensureBool(v);
-            this._a("isToolbarColumnChooserVisible", this.i.kc);
+            this.i.isToolbarColumnChooserVisible = ensureBool(v);
+            this._a("isToolbarColumnChooserVisible", this.i.isToolbarColumnChooserVisible);
         },
         enumerable: false,
         configurable: true
@@ -3749,11 +3749,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets whether to show the column pinning button in the toolbar.
         */
         get: function () {
-            return this.i.kd;
+            return this.i.isToolbarColumnPinningVisible;
         },
         set: function (v) {
-            this.i.kd = ensureBool(v);
-            this._a("isToolbarColumnPinningVisible", this.i.kd);
+            this.i.isToolbarColumnPinningVisible = ensureBool(v);
+            this._a("isToolbarColumnPinningVisible", this.i.isToolbarColumnPinningVisible);
         },
         enumerable: false,
         configurable: true
@@ -3763,10 +3763,10 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the title text to use in the toolbar.
         */
         get: function () {
-            return this.i.to;
+            return this.i.toolbarTitle;
         },
         set: function (v) {
-            this.i.to = v;
+            this.i.toolbarTitle = v;
         },
         enumerable: false,
         configurable: true
@@ -3776,10 +3776,10 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the column chooser button text to use in the toolbar.
         */
         get: function () {
-            return this.i.tg;
+            return this.i.toolbarColumnChooserText;
         },
         set: function (v) {
-            this.i.tg = v;
+            this.i.toolbarColumnChooserText = v;
         },
         enumerable: false,
         configurable: true
@@ -3789,10 +3789,10 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the column chooser title text to use in the toolbar.
         */
         get: function () {
-            return this.i.ti;
+            return this.i.toolbarColumnChooserTitle;
         },
         set: function (v) {
-            this.i.ti = v;
+            this.i.toolbarColumnChooserTitle = v;
         },
         enumerable: false,
         configurable: true
@@ -3802,10 +3802,10 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the column pinning button text to use in the toolbar.
         */
         get: function () {
-            return this.i.tk;
+            return this.i.toolbarColumnPinningText;
         },
         set: function (v) {
-            this.i.tk = v;
+            this.i.toolbarColumnPinningText = v;
         },
         enumerable: false,
         configurable: true
@@ -3815,10 +3815,10 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the column pinning title text to use in the toolbar.
         */
         get: function () {
-            return this.i.tm;
+            return this.i.toolbarColumnPinningTitle;
         },
         set: function (v) {
-            this.i.tm = v;
+            this.i.toolbarColumnPinningTitle = v;
         },
         enumerable: false,
         configurable: true
@@ -3828,11 +3828,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the style of scrollbar.
         */
         get: function () {
-            return this.i.gm;
+            return this.i.scrollbarStyle;
         },
         set: function (v) {
-            this.i.gm = ensureEnum(ScrollbarStyle_$type, v);
-            this._a("scrollbarStyle", enumToString(ScrollbarStyle_$type, this.i.gm));
+            this.i.scrollbarStyle = ensureEnum(ScrollbarStyle_$type, v);
+            this._a("scrollbarStyle", enumToString(ScrollbarStyle_$type, this.i.scrollbarStyle));
         },
         enumerable: false,
         configurable: true
@@ -3842,22 +3842,22 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the scrollbar background color.
         */
         get: function () {
-            return brushToString(this.i.aae);
+            return brushToString(this.i.scrollbarBackground);
         },
         set: function (v) {
-            this.i.aae = stringToBrush(v);
-            this._a("scrollbarBackground", brushToString(this.i.aae));
+            this.i.scrollbarBackground = stringToBrush(v);
+            this._a("scrollbarBackground", brushToString(this.i.scrollbarBackground));
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcDataGridComponent.prototype, "allowCopyOperation", {
         get: function () {
-            return this.i.ix;
+            return this.i.allowCopyOperation;
         },
         set: function (v) {
-            this.i.ix = ensureBool(v);
-            this._a("allowCopyOperation", this.i.ix);
+            this.i.allowCopyOperation = ensureBool(v);
+            this._a("allowCopyOperation", this.i.allowCopyOperation);
         },
         enumerable: false,
         configurable: true
@@ -3867,11 +3867,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets whether to defer the SelectedItemsChanged and SelectedKeysChanged events till after the drag selection has completed.
         */
         get: function () {
-            return this.i.i7;
+            return this.i.deferEventForRowDragSelection;
         },
         set: function (v) {
-            this.i.i7 = ensureBool(v);
-            this._a("deferEventForRowDragSelection", this.i.i7);
+            this.i.deferEventForRowDragSelection = ensureBool(v);
+            this._a("deferEventForRowDragSelection", this.i.deferEventForRowDragSelection);
         },
         enumerable: false,
         configurable: true
@@ -4048,14 +4048,14 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
 */
     IgcDataGridComponent.prototype.refresh = function () {
-        this.i.xc();
+        this.i.refresh();
     };
     /**
      * Makes sure pending work has completed if the grid need to be synchronously examined.
     */
     IgcDataGridComponent.prototype.flush = function () {
-        this.i.ui();
+        this.i.flush();
     };
     IgcDataGridComponent.prototype.notifyScrollStart = function () {
         this.i.notifyScrollStart();
@@ -4064,13 +4064,13 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         this.i.notifyScrollStop();
     };
     IgcDataGridComponent.prototype.exchangeColumn = function (newColumn, oldColumn) {
-        this.i.ug((newColumn == null ? null : newColumn.i), (oldColumn == null ? null : oldColumn.i));
+        this.i.exchangeColumn((newColumn == null ? null : newColumn.i), (oldColumn == null ? null : oldColumn.i));
     };
     IgcDataGridComponent.prototype.pinColumn = function (column, position) {
-        this.i.w5((column == null ? null : column.i), (position == null ? null : position));
+        this.i.pinColumn((column == null ? null : column.i), (position == null ? null : position));
     };
     IgcDataGridComponent.prototype.moveColumn = function (oldIndex, newIndex) {
-        this.i.uv(oldIndex, newIndex);
+        this.i.moveColumn(oldIndex, newIndex);
     };
     /**
      * Moves a column to the left, if possible.
@@ -4078,7 +4078,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     * @param columnIndex  * The index of the column to move.
     */
     IgcDataGridComponent.prototype.moveColumnLeft = function (columnIndex) {
-        this.i.uw(columnIndex);
+        this.i.moveColumnLeft(columnIndex);
     };
     /**
      * Moves a column to the right, if possible.
@@ -4086,7 +4086,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     * @param columnIndex  * The index of the column to move.
     */
     IgcDataGridComponent.prototype.moveColumnRight = function (columnIndex) {
-        this.i.ux(columnIndex);
+        this.i.moveColumnRight(columnIndex);
     };
     /**
      * Returns true if a column can be moved to the left of it's current position; otherwise false.
@@ -4094,7 +4094,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     * @param columnIndex  * The index of the column.
     */
     IgcDataGridComponent.prototype.canMoveColumnLeft = function (columnIndex) {
-        var iv = this.i.i2(columnIndex);
+        var iv = this.i.canMoveColumnLeft(columnIndex);
         return (iv);
     };
     /**
@@ -4103,7 +4103,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     * @param columnIndex  * The index of the column.
     */
     IgcDataGridComponent.prototype.canMoveColumnRight = function (columnIndex) {
-        var iv = this.i.i3(columnIndex);
+        var iv = this.i.canMoveColumnRight(columnIndex);
         return (iv);
     };
     /**
@@ -4111,7 +4111,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     */
     IgcDataGridComponent.prototype.exportVisualModel = function () {
-        var iv = this.i.ol();
+        var iv = this.i.exportVisualModel();
         return (iv);
     };
     /**
@@ -4119,7 +4119,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     */
     IgcDataGridComponent.prototype.exportSerializedVisualModel = function () {
-        var iv = this.i.ql();
+        var iv = this.i.exportSerializedVisualModel();
         return (iv);
     };
     /**
@@ -4128,7 +4128,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     * @param rowNumber  * The row index to scroll to.
     */
     IgcDataGridComponent.prototype.scrollToRowByIndex = function (rowNumber) {
-        this.i.xv(rowNumber);
+        this.i.scrollToRowByIndex(rowNumber);
     };
     /**
      * Scrolls the grid so that a row is the last visible, by index.
@@ -4136,7 +4136,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     * @param rowNumber  * The row index to scroll to.
     */
     IgcDataGridComponent.prototype.scrollToLastRowByIndex = function (rowNumber) {
-        this.i.xu(rowNumber);
+        this.i.scrollToLastRowByIndex(rowNumber);
     };
     /**
      * Scrolls to an item, if found.
@@ -4144,11 +4144,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     * @param item  * The item to scroll to.
     */
     IgcDataGridComponent.prototype.scrollToItem = function (item) {
-        var iv = this.i.k3(item);
+        var iv = this.i.scrollToItem(item);
         return (iv);
     };
     IgcDataGridComponent.prototype.scrollToPrimaryKey = function (key) {
-        var iv = this.i.k4(key);
+        var iv = this.i.scrollToPrimaryKey(key);
         return (iv);
     };
     /**
@@ -4157,14 +4157,14 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     * @param columnNumber  * The column number to scroll to.
     */
     IgcDataGridComponent.prototype.scrollToColumnByIndex = function (columnNumber) {
-        this.i.xs(columnNumber);
+        this.i.scrollToColumnByIndex(columnNumber);
     };
     /**
      * Gets the last visible index in the grid.
     */
     IgcDataGridComponent.prototype.getLastVisibleIndex = function () {
-        var iv = this.i.nx();
+        var iv = this.i.getLastVisibleIndex();
         return (iv);
     };
     /**
@@ -4172,7 +4172,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     */
     IgcDataGridComponent.prototype.getFirstVisibleIndex = function () {
-        var iv = this.i.ns();
+        var iv = this.i.getFirstVisibleIndex();
         return (iv);
     };
     /**
@@ -4180,7 +4180,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     */
     IgcDataGridComponent.prototype.invalidateVisibleRows = function () {
-        this.i.ut();
+        this.i.invalidateVisibleRows();
     };
     /**
      * Manually set the active responsive state of the grid.
@@ -4188,10 +4188,10 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     * @param name
     */
     IgcDataGridComponent.prototype.setActiveResponsiveState = function (name) {
-        this.i.x3(name);
+        this.i.setActiveResponsiveState(name);
     };
     IgcDataGridComponent.prototype.notifySetItem = function (index, oldItem, newItem) {
-        this.i.u5(index, oldItem, newItem);
+        this.i.notifySetItem(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.
@@ -4199,13 +4199,13 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     */
     IgcDataGridComponent.prototype.notifyClearItems = function () {
-        this.i.uz();
+        this.i.notifyClearItems();
     };
     IgcDataGridComponent.prototype.notifyInsertItem = function (index, newItem) {
-        this.i.u1(index, newItem);
+        this.i.notifyInsertItem(index, newItem);
     };
     IgcDataGridComponent.prototype.notifyRemoveItem = function (index, oldItem) {
-        this.i.u2(index, oldItem);
+        this.i.notifyRemoveItem(index, oldItem);
     };
     /**
      * Returns the data index of an item within the bound data source.
@@ -4213,11 +4213,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.nl(item);
+        var iv = this.i.dataIndexOfItem(item);
         return (iv);
     };
     IgcDataGridComponent.prototype.dataIndexOfPrimaryKey = function (key) {
-        var iv = this.i.nm(key);
+        var iv = this.i.dataIndexOfPrimaryKey(key);
         return (iv);
     };
     /**
@@ -4226,11 +4226,11 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     * @param cellKey  * The cell to resolve.
     */
     IgcDataGridComponent.prototype.resolveCellValue = function (cellKey) {
-        var iv = this.i.oo((cellKey == null ? null : cellKey.i));
+        var iv = this.i.resolveCellValue((cellKey == null ? null : cellKey.i));
         return (iv);
     };
     IgcDataGridComponent.prototype.resolveCellValueFromPosition = function (row, column) {
-        var iv = this.i.op(row, column);
+        var iv = this.i.resolveCellValueFromPosition(row, column);
         return (iv);
     };
     /**
@@ -4240,7 +4240,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     * @param index  * The rendered index of the column.
     */
     IgcDataGridComponent.prototype.getColumnAtRenderedIndex = function (index) {
-        var iv = this.i.cl(index);
+        var iv = this.i.getColumnAtRenderedIndex(index);
         var ret = null;
         if (iv && iv.externalObject) {
             ret = iv.externalObject;
@@ -4260,7 +4260,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     */
     IgcDataGridComponent.prototype.getRootSummaryResults = function () {
-        var iv = this.i.j();
+        var iv = this.i.getRootSummaryResults();
         return (iv);
     };
     /**
@@ -4268,7 +4268,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     */
     IgcDataGridComponent.prototype.getSectionSummaryResults = function (sectionIndex) {
-        var iv = this.i.k(sectionIndex);
+        var iv = this.i.getSectionSummaryResults(sectionIndex);
         return (iv);
     };
     /**
@@ -4276,14 +4276,14 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     */
     IgcDataGridComponent.prototype.commitEdits = function () {
-        this.i.t8();
+        this.i.commitEdits();
     };
     /**
      * Cancels any edits that may exist in the datasource.
     */
     IgcDataGridComponent.prototype.cancelEdits = function () {
-        this.i.tz();
+        this.i.cancelEdits();
     };
     /**
      * Accepts a specific commit to the datasource.
@@ -4291,7 +4291,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.tq(commitID);
+        this.i.acceptCommit(commitID);
     };
     /**
      * Rejects a specific commit.
@@ -4299,27 +4299,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.xf(commitID);
+        this.i.rejectCommit(commitID);
     };
     /**
      * Undo the last edit.
     */
     IgcDataGridComponent.prototype.undo = function () {
-        this.i.yc();
+        this.i.undo();
     };
     /**
      * Redo the last edit.
     */
     IgcDataGridComponent.prototype.redo = function () {
-        this.i.xb();
+        this.i.redo();
     };
     IgcDataGridComponent.prototype.updatePropertyAtKey = function (key, propertyPath, value) {
-        this.i.yh(key, propertyPath, value);
+        this.i.updatePropertyAtKey(key, propertyPath, value);
     };
     IgcDataGridComponent.prototype.removeItemByKey = function (key) {
-        this.i.xk(key);
+        this.i.removeItemByKey(key);
     };
     /**
      * Removes an item by its instance.
@@ -4327,7 +4327,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     * @param item  * The item instance to remove.
     */
     IgcDataGridComponent.prototype.removeItem = function (item) {
-        this.i.xj(item);
+        this.i.removeItem(item);
     };
     /**
      * Accept a pending edit turning it into a real edit.
@@ -4335,7 +4335,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.tr(editID);
+        this.i.acceptEdit(editID);
     };
     /**
      * Reject a pending edit.
@@ -4343,41 +4343,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.xg(editID);
+        this.i.rejectEdit(editID);
     };
     IgcDataGridComponent.prototype.setEditError = function (editID, errorMessage) {
-        this.i.x5(editID, errorMessage);
+        this.i.setEditError(editID, errorMessage);
     };
     /**
      * Start edit mode on the active cell.
     */
     IgcDataGridComponent.prototype.startEditMode = function () {
-        this.i.x8();
+        this.i.startEditMode();
     };
     IgcDataGridComponent.prototype.endEditMode = function (commit) {
-        this.i.ud(commit);
+        this.i.endEditMode(commit);
     };
     /**
      * Selects all of the rows in the grid.
     */
     IgcDataGridComponent.prototype.selectAllRows = function () {
-        this.i.xw();
+        this.i.selectAllRows();
     };
     /**
      * Deselects all currently selected rows.
     */
     IgcDataGridComponent.prototype.deselectAllRows = function () {
-        this.i.ub();
+        this.i.deselectAllRows();
     };
     /**
      * Saves the layout chnages that have been made to the grid
     */
     IgcDataGridComponent.prototype.saveLayout = function () {
-        var iv = this.i.sj();
+        var iv = this.i.saveLayout();
         return (iv);
     };
     /**
@@ -4385,7 +4385,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     */
     IgcDataGridComponent.prototype.loadLayout = function (json) {
-        this.i.uu(json);
+        this.i.loadLayout(json);
     };
     Object.defineProperty(IgcDataGridComponent.prototype, "filterExpressionsChanging", {
         get: function () {
@@ -5319,7 +5319,7 @@ var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
             this._actualPrimaryKeyChange = ev;
             this._actualPrimaryKeyChange_wrapped = function (o, e) {
                 var ext = _this.actualPrimaryKey;
-                if (e.propertyName == 'E') {
+                if (e.propertyName == 'ActualPrimaryKey') {
                     if (_this.beforeActualPrimaryKeyChange) {
                         _this.beforeActualPrimaryKeyChange(_this, ext);
                     }