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

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

@@ -25,7 +25,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";
@@ -208,8 +208,8 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
             }
         }
         createImplementation() {
-            let test = Grid;
-            return new Grid();
+            //let test = Grid;
+            return new DataGrid();
         }
         get i() {
             return this._implementation;
@@ -362,7 +362,7 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
             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;
@@ -907,109 +907,109 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
      * Gets or sets the type of column resizing to use.
     */
         get columnResizingMode() {
-            return this.i.bz;
+            return this.i.columnResizingMode;
         }
         set columnResizingMode(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));
         }
         /**
          * Gets or sets the type column moving to use.
         */
         get columnMovingMode() {
-            return this.i.bl;
+            return this.i.columnMovingMode;
         }
         set columnMovingMode(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));
         }
         /**
          * Gets or sets whether the row will highlight when hovered.
         */
         get isRowHoverEnabled() {
-            return this.i.ka;
+            return this.i.isRowHoverEnabled;
         }
         set isRowHoverEnabled(v) {
-            this.i.ka = ensureBool(v);
-            this._a("isRowHoverEnabled", this.i.ka);
+            this.i.isRowHoverEnabled = ensureBool(v);
+            this._a("isRowHoverEnabled", this.i.isRowHoverEnabled);
         }
         /**
          * Gets or sets the background color for rows when hovered.
         */
         get rowHoverBackground() {
-            return brushToString(this.i.z8);
+            return brushToString(this.i.rowHoverBackground);
         }
         set rowHoverBackground(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));
         }
         /**
          * Gets or sets the text color for rows when hovered.
         */
         get rowHoverTextColor() {
-            return brushToString(this.i.z9);
+            return brushToString(this.i.rowHoverTextColor);
         }
         set rowHoverTextColor(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));
         }
         /**
          * Gets or sets the border color for rows being edited.
         */
         get editRowBorder() {
-            return brushToString(this.i.z0);
+            return brushToString(this.i.editRowBorder);
         }
         set editRowBorder(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));
         }
         get editRowBorderWidthBottom() {
-            return this.i.aa3 ? this.i.aa3.bottom : NaN;
+            return this.i.editRowBorderWidth ? this.i.editRowBorderWidth.bottom : NaN;
         }
         set editRowBorderWidthBottom(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;
         }
         get editRowBorderWidthLeft() {
-            return this.i.aa3 ? this.i.aa3.left : NaN;
+            return this.i.editRowBorderWidth ? this.i.editRowBorderWidth.left : NaN;
         }
         set editRowBorderWidthLeft(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;
         }
         get editRowBorderWidthRight() {
-            return this.i.aa3 ? this.i.aa3.right : NaN;
+            return this.i.editRowBorderWidth ? this.i.editRowBorderWidth.right : NaN;
         }
         set editRowBorderWidthRight(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;
         }
         get editRowBorderWidthTop() {
-            return this.i.aa3 ? this.i.aa3.top : NaN;
+            return this.i.editRowBorderWidth ? this.i.editRowBorderWidth.top : NaN;
         }
         set editRowBorderWidthTop(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;
         }
         ensureEditRowBorderWidth() {
-            if (this.i.aa3) {
+            if (this.i.editRowBorderWidth) {
                 return;
             }
-            this.i.aa3 = new Thickness(2);
+            this.i.editRowBorderWidth = new Thickness(2);
         }
         /**
          * Gets or sets the header type used for sectioning off groups of rows.
         */
         get sectionHeader() {
-            const r = this.i.f2;
+            const r = this.i.sectionHeader;
             if (r == null) {
                 return null;
             }
@@ -1025,13 +1025,13 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
         set sectionHeader(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;
         }
         /**
          * Gets or sets the cell definition used for summary rows at the root level.
         */
         get summaryRowRoot() {
-            const r = this.i.gc;
+            const r = this.i.summaryRowRoot;
             if (r == null) {
                 return null;
             }
@@ -1047,13 +1047,13 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
         set summaryRowRoot(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;
         }
         /**
          * Gets or sets the cell definition used for summary rows at the section level.
         */
         get summaryRowSection() {
-            const r = this.i.ge;
+            const r = this.i.summaryRowSection;
             if (r == null) {
                 return null;
             }
@@ -1069,13 +1069,13 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
         set summaryRowSection(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;
         }
         /**
          * Gets or sets the row seperator settings.
         */
         get rowSeparator() {
-            const r = this.i.fx;
+            const r = this.i.rowSeparator;
             if (r == null) {
                 return null;
             }
@@ -1091,13 +1091,13 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
         set rowSeparator(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;
         }
         /**
          * Gets or sets the header row seperator settings.
         */
         get headerRowSeparator() {
-            const r = this.i.ex;
+            const r = this.i.headerRowSeparator;
             if (r == null) {
                 return null;
             }
@@ -1113,13 +1113,13 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
         set headerRowSeparator(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;
         }
         /**
          * Gets or sets the header seperator settings.
         */
         get headerSeparator() {
-            const r = this.i.ez;
+            const r = this.i.headerSeparator;
             if (r == null) {
                 return null;
             }
@@ -1135,13 +1135,13 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
         set headerSeparator(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;
         }
         /**
          * Gets or sets the column resizing seperator settings.
         */
         get columnResizingSeparator() {
-            const r = this.i.b1;
+            const r = this.i.columnResizingSeparator;
             if (r == null) {
                 return null;
             }
@@ -1157,13 +1157,13 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
         set columnResizingSeparator(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;
         }
         /**
          * Gets or sets the column resizing seperator settings.
         */
         get columnMovingSeparator() {
-            const r = this.i.bn;
+            const r = this.i.columnMovingSeparator;
             if (r == null) {
                 return null;
             }
@@ -1179,13 +1179,13 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
         set columnMovingSeparator(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;
         }
         /**
          * Gets or sets the pinned area separator settings.
         */
         get pinnedAreaSeparator() {
-            const r = this.i.fl;
+            const r = this.i.pinnedAreaSeparator;
             if (r == null) {
                 return null;
             }
@@ -1201,174 +1201,174 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
         set pinnedAreaSeparator(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;
         }
         /**
          * Gets or sets the desired properties the grid will automatically generate columns for.
         */
         get autoGenerateDesiredProperties() {
-            return this.i.f;
+            return this.i.autoGenerateDesiredProperties;
         }
         set autoGenerateDesiredProperties(v) {
             if (v && !Array.isArray(v) && typeof (v) == "string") {
                 const re = /\s*(?:,|\s|$)\s*/gm;
                 v = v.split(re);
             }
-            this.i.f = v;
+            this.i.autoGenerateDesiredProperties = v;
         }
         /**
          * 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 dataSourceDesiredProperties() {
-            return this.i.g;
+            return this.i.dataSourceDesiredProperties;
         }
         set dataSourceDesiredProperties(v) {
             if (v && !Array.isArray(v) && typeof (v) == "string") {
                 const re = /\s*(?:,|\s|$)\s*/gm;
                 v = v.split(re);
             }
-            this.i.g = v;
+            this.i.dataSourceDesiredProperties = v;
         }
         /**
          * Gets or sets the display density to use for the grid.
         */
         get density() {
-            return this.i.go;
+            return this.i.density;
         }
         set density(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));
         }
         /**
          * Gets the actual height for the rows in the grid.
         */
         get actualRowHeight() {
-            return this.i.nf;
+            return this.i.actualRowHeight;
         }
         set actualRowHeight(v) {
-            this.i.nf = +v;
-            this._a("actualRowHeight", this.i.nf);
+            this.i.actualRowHeight = +v;
+            this._a("actualRowHeight", this.i.actualRowHeight);
         }
         /**
          * Gets or sets the height to use for the rows in the grid. If not set the grid will
          * use the default value for the set display density.
         */
         get rowHeight() {
-            return this.i.oa;
+            return this.i.rowHeight;
         }
         set rowHeight(v) {
-            this.i.oa = +v;
-            this._a("rowHeight", this.i.oa);
+            this.i.rowHeight = +v;
+            this._a("rowHeight", this.i.rowHeight);
         }
         /**
          * Gets or sets the default minimum width to use on all columns. Ignored if NaN.
         */
         get defaultColumnMinWidth() {
-            return this.i.md;
+            return this.i.defaultColumnMinWidth;
         }
         set defaultColumnMinWidth(v) {
-            this.i.md = +v;
-            this._a("defaultColumnMinWidth", this.i.md);
+            this.i.defaultColumnMinWidth = +v;
+            this._a("defaultColumnMinWidth", this.i.defaultColumnMinWidth);
         }
         /**
          * Gets the height used for the header row.
         */
         get actualHeaderHeight() {
-            return this.i.ne;
+            return this.i.actualHeaderHeight;
         }
         set actualHeaderHeight(v) {
-            this.i.ne = +v;
-            this._a("actualHeaderHeight", this.i.ne);
+            this.i.actualHeaderHeight = +v;
+            this._a("actualHeaderHeight", this.i.actualHeaderHeight);
         }
         /**
          * Gets or sets the height to use for the header row.
         */
         get headerHeight() {
-            return this.i.n1;
+            return this.i.headerHeight;
         }
         set headerHeight(v) {
-            this.i.n1 = +v;
-            this._a("headerHeight", this.i.n1);
+            this.i.headerHeight = +v;
+            this._a("headerHeight", this.i.headerHeight);
         }
         /**
          * Returns/sets the action to take when a column header is clicked.
         */
         get headerClickAction() {
-            return this.i.ev;
+            return this.i.headerClickAction;
         }
         set headerClickAction(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));
         }
         /**
          * Gets or sets the type of edit mode
         */
         get editMode() {
-            return this.i.cu;
+            return this.i.editMode;
         }
         set editMode(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));
         }
         /**
          * Gets or sets the type of click action required to enter edit mode.
         */
         get editModeClickAction() {
-            return this.i.cs;
+            return this.i.editModeClickAction;
         }
         set editModeClickAction(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));
         }
         /**
          * Gets or sets whether edit mode will begin as soon as you start typing while a cell is active.
         */
         get editOnKeyPress() {
-            return this.i.i8;
+            return this.i.editOnKeyPress;
         }
         set editOnKeyPress(v) {
-            this.i.i8 = ensureBool(v);
-            this._a("editOnKeyPress", this.i.i8);
+            this.i.editOnKeyPress = ensureBool(v);
+            this._a("editOnKeyPress", this.i.editOnKeyPress);
         }
         /**
          * Configures whether or not the grid will autogenerate columns when the data source is set.
         */
         get autoGenerateColumns() {
-            return this.i.iz;
+            return this.i.autoGenerateColumns;
         }
         set autoGenerateColumns(v) {
-            this.i.iz = ensureBool(v);
-            this._a("autoGenerateColumns", this.i.iz);
+            this.i.autoGenerateColumns = ensureBool(v);
+            this._a("autoGenerateColumns", this.i.autoGenerateColumns);
         }
         /**
          * Sets or gets the height to use for the row separators.
         */
         get rowSeparatorHeight() {
-            return this.i.oc;
+            return this.i.rowSeparatorHeight;
         }
         set rowSeparatorHeight(v) {
-            this.i.oc = +v;
-            this._a("rowSeparatorHeight", this.i.oc);
+            this.i.rowSeparatorHeight = +v;
+            this._a("rowSeparatorHeight", this.i.rowSeparatorHeight);
         }
         /**
          * Configures whether or not place holders are used for cells who do not have their data yet.
         */
         get isPlaceholderRenderingEnabled() {
-            return this.i.j4;
+            return this.i.isPlaceholderRenderingEnabled;
         }
         set isPlaceholderRenderingEnabled(v) {
-            this.i.j4 = ensureBool(v);
-            this._a("isPlaceholderRenderingEnabled", this.i.j4);
+            this.i.isPlaceholderRenderingEnabled = ensureBool(v);
+            this._a("isPlaceholderRenderingEnabled", this.i.isPlaceholderRenderingEnabled);
         }
         /**
          * Sets or gets the Column Adding Animation mode to use.
         */
         get columnAddingAnimationMode() {
-            return this.i.b4;
+            return this.i.columnAddingAnimationMode;
         }
         set columnAddingAnimationMode(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));
         }
         /**
          * Sets or gets the Column Property Updating Animation mode to use.
@@ -1384,47 +1384,47 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
          * Sets or gets the cell data loaded animation mode to use.
         */
         get cellDataLoadedAnimationMode() {
-            return this.i.ao;
+            return this.i.cellDataLoadedAnimationMode;
         }
         set cellDataLoadedAnimationMode(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));
         }
         /**
          * Sets or gets the row selection animation mode to use.
         */
         get rowSelectionAnimationMode() {
-            return this.i.fv;
+            return this.i.rowSelectionAnimationMode;
         }
         set rowSelectionAnimationMode(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));
         }
         /**
          * Sets or gets the row hover animation mode to use.
         */
         get rowHoverAnimationMode() {
-            return this.i.fs;
+            return this.i.rowHoverAnimationMode;
         }
         set rowHoverAnimationMode(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));
         }
         /**
          * Sets or gets the cell selection animation mode to use.
         */
         get cellSelectionAnimationMode() {
-            return this.i.a3;
+            return this.i.cellSelectionAnimationMode;
         }
         set cellSelectionAnimationMode(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));
         }
         /**
          * Sets or gets the default animation settings for the grid.
         */
         get animationSettings() {
-            const r = this.i.de;
+            const r = this.i.animationSettings;
             if (r == null) {
                 return null;
             }
@@ -1443,97 +1443,97 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
             return r.externalObject;
         }
         set animationSettings(v) {
-            v == null ? this.i.de = null : this.i.de = v.i;
+            v == null ? this.i.animationSettings = null : this.i.animationSettings = v.i;
         }
         /**
          * Sets or gets the column resizing animation mode to use. Only applies when resizing in Deferred mode.
         */
         get columnResizingAnimationMode() {
-            return this.i.bw;
+            return this.i.columnResizingAnimationMode;
         }
         set columnResizingAnimationMode(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));
         }
         /**
          * Sets or gets the column showing animation mode to use.
         */
         get columnShowingAnimationMode() {
-            return this.i.b5;
+            return this.i.columnShowingAnimationMode;
         }
         set columnShowingAnimationMode(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));
         }
         /**
          * Sets or gets the column moving animation mode to use.
         */
         get columnMovingAnimationMode() {
-            return this.i.bi;
+            return this.i.columnMovingAnimationMode;
         }
         set columnMovingAnimationMode(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));
         }
         /**
          * Sets or gets the column hiding animation mode to use.
         */
         get columnHidingAnimationMode() {
-            return this.i.bf;
+            return this.i.columnHidingAnimationMode;
         }
         set columnHidingAnimationMode(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));
         }
         /**
          * Sets or gets the column exchanging animation mode to use.
         */
         get columnExchangingAnimationMode() {
-            return this.i.a7;
+            return this.i.columnExchangingAnimationMode;
         }
         set columnExchangingAnimationMode(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));
         }
         /**
          * Sets or gets the grid selection mode.
         */
         get selectionMode() {
-            return this.i.co;
+            return this.i.selectionMode;
         }
         set selectionMode(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));
         }
         /**
          * Sets or gets the grid selection mode.
         */
         get activationMode() {
-            return this.i.c9;
+            return this.i.activationMode;
         }
         set activationMode(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));
         }
         /**
          * Sets or gets how selection behaves in the grid.
         */
         get selectionBehavior() {
-            return this.i.ek;
+            return this.i.selectionBehavior;
         }
         set selectionBehavior(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));
         }
         /**
          * Gets or sets the ability to select rows or cells via mouse dragging. Currently only applies when SelectionMode is MultipleRow or RangeCell.
         */
         get mouseDragSelectionEnabled() {
-            return this.i.kf;
+            return this.i.mouseDragSelectionEnabled;
         }
         set mouseDragSelectionEnabled(v) {
-            this.i.kf = ensureBool(v);
-            this._a("mouseDragSelectionEnabled", this.i.kf);
+            this.i.mouseDragSelectionEnabled = ensureBool(v);
+            this._a("mouseDragSelectionEnabled", this.i.mouseDragSelectionEnabled);
         }
         /**
          * Gets which items are currently selected in the grid. Collection can be updated to programatically select items.
@@ -1541,7 +1541,7 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
         get selectedItems() {
             if (this._selectedItems === null) {
                 let coll = new IgcGridSelectedItemsCollection();
-                let innerColl = this.i.ae;
+                let innerColl = this.i.selectedItems;
                 if (!innerColl) {
                     innerColl = new GridSelectedItemsCollection_internal();
                 }
@@ -1557,7 +1557,7 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
             let coll = new IgcGridSelectedItemsCollection();
             this._selectedItems = coll._fromOuter(v);
             let syncColl = new SyncableObservableCollection$1(Base.$type);
-            let innerColl = this.i.ae;
+            let innerColl = this.i.selectedItems;
             if (!innerColl) {
                 innerColl = new GridSelectedItemsCollection_internal();
             }
@@ -1571,7 +1571,7 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
         get selectedKeys() {
             if (this._selectedKeys === null) {
                 let coll = new IgcGridSelectedKeysCollection();
-                let innerColl = this.i.ai;
+                let innerColl = this.i.selectedKeys;
                 if (!innerColl) {
                     innerColl = new GridSelectedKeysCollection_internal();
                 }
@@ -1587,7 +1587,7 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
             let coll = new IgcGridSelectedKeysCollection();
             this._selectedKeys = coll._fromOuter(v);
             let syncColl = new SyncableObservableCollection$1(PrimaryKeyValue.$type);
-            let innerColl = this.i.ai;
+            let innerColl = this.i.selectedKeys;
             if (!innerColl) {
                 innerColl = new GridSelectedKeysCollection_internal();
             }
@@ -1601,7 +1601,7 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
         get selectedCells() {
             if (this._selectedCells === null) {
                 let coll = new IgcGridSelectedCellsCollection();
-                let innerColl = this.i.eg;
+                let innerColl = this.i.selectedCells;
                 if (!innerColl) {
                     innerColl = new GridSelectedCellsCollection_internal();
                 }
@@ -1617,7 +1617,7 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
             let coll = new IgcGridSelectedCellsCollection();
             this._selectedCells = coll._fromOuter(v);
             let syncColl = new SyncableObservableCollection$1(CellKey.$type);
-            let innerColl = this.i.eg;
+            let innerColl = this.i.selectedCells;
             if (!innerColl) {
                 innerColl = new GridSelectedCellsCollection_internal();
             }
@@ -1631,7 +1631,7 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
         get selectedCellRanges() {
             if (this._selectedCellRanges === null) {
                 let coll = new IgcGridSelectedCellRangesCollection();
-                let innerColl = this.i.ed;
+                let innerColl = this.i.selectedCellRanges;
                 if (!innerColl) {
                     innerColl = new GridSelectedCellRangesCollection_internal();
                 }
@@ -1647,7 +1647,7 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
             let coll = new IgcGridSelectedCellRangesCollection();
             this._selectedCellRanges = coll._fromOuter(v);
             let syncColl = new SyncableObservableCollection$1(CellRange.$type);
-            let innerColl = this.i.ed;
+            let innerColl = this.i.selectedCellRanges;
             if (!innerColl) {
                 innerColl = new GridSelectedCellRangesCollection_internal();
             }
@@ -1661,7 +1661,7 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
         get pinnedItems() {
             if (this._pinnedItems === null) {
                 let coll = new IgcGridSelectedItemsCollection();
-                let innerColl = this.i.ad;
+                let innerColl = this.i.pinnedItems;
                 if (!innerColl) {
                     innerColl = new GridSelectedItemsCollection_internal();
                 }
@@ -1677,7 +1677,7 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
             let coll = new IgcGridSelectedItemsCollection();
             this._pinnedItems = coll._fromOuter(v);
             let syncColl = new SyncableObservableCollection$1(Base.$type);
-            let innerColl = this.i.ad;
+            let innerColl = this.i.pinnedItems;
             if (!innerColl) {
                 innerColl = new GridSelectedItemsCollection_internal();
             }
@@ -1691,7 +1691,7 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
         get pinnedKeys() {
             if (this._pinnedKeys === null) {
                 let coll = new IgcGridSelectedKeysCollection();
-                let innerColl = this.i.ah;
+                let innerColl = this.i.pinnedKeys;
                 if (!innerColl) {
                     innerColl = new GridSelectedKeysCollection_internal();
                 }
@@ -1707,7 +1707,7 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
             let coll = new IgcGridSelectedKeysCollection();
             this._pinnedKeys = coll._fromOuter(v);
             let syncColl = new SyncableObservableCollection$1(PrimaryKeyValue.$type);
-            let innerColl = this.i.ah;
+            let innerColl = this.i.pinnedKeys;
             if (!innerColl) {
                 innerColl = new GridSelectedKeysCollection_internal();
             }
@@ -1719,152 +1719,152 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
          * Gets or sets whether to show the column options UI in the headers for columns.
         */
         get isColumnOptionsEnabled() {
-            return this.i.jn;
+            return this.i.isColumnOptionsEnabled;
         }
         set isColumnOptionsEnabled(v) {
-            this.i.jn = ensureBool(v);
-            this._a("isColumnOptionsEnabled", this.i.jn);
+            this.i.isColumnOptionsEnabled = ensureBool(v);
+            this._a("isColumnOptionsEnabled", this.i.isColumnOptionsEnabled);
         }
         /**
          * Gets or sets if group rows will stick to the top of the grid.
         */
         get isGroupRowSticky() {
-            return this.i.jy;
+            return this.i.isGroupRowSticky;
         }
         set isGroupRowSticky(v) {
-            this.i.jy = ensureBool(v);
-            this._a("isGroupRowSticky", this.i.jy);
+            this.i.isGroupRowSticky = ensureBool(v);
+            this._a("isGroupRowSticky", this.i.isGroupRowSticky);
         }
         /**
          * Gets or sets if header separators are rendered.
         */
         get isHeaderSeparatorVisible() {
-            return this.i.jz;
+            return this.i.isHeaderSeparatorVisible;
         }
         set isHeaderSeparatorVisible(v) {
-            this.i.jz = ensureBool(v);
-            this._a("isHeaderSeparatorVisible", this.i.jz);
+            this.i.isHeaderSeparatorVisible = ensureBool(v);
+            this._a("isHeaderSeparatorVisible", this.i.isHeaderSeparatorVisible);
         }
         /**
          * Gets or sets the default background color to use for content cells when a row is in a selected state
         */
         get cellSelectedBackground() {
-            return brushToString(this.i.zu);
+            return brushToString(this.i.cellSelectedBackground);
         }
         set cellSelectedBackground(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));
         }
         /**
          * Gets or sets the default background color to use for section header cells when a row is in a selected state
         */
         get sectionHeaderSelectedBackground() {
-            return brushToString(this.i.aag);
+            return brushToString(this.i.sectionHeaderSelectedBackground);
         }
         set sectionHeaderSelectedBackground(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));
         }
         /**
          * Gets or sets the default background color to use for summary cells at the root level.
         */
         get summaryRootBackground() {
-            return brushToString(this.i.aaj);
+            return brushToString(this.i.summaryRootBackground);
         }
         set summaryRootBackground(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));
         }
         /**
          * Gets or sets the default background color to use for summary cells at the section level.
         */
         get summarySectionBackground() {
-            return brushToString(this.i.aan);
+            return brushToString(this.i.summarySectionBackground);
         }
         set summarySectionBackground(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));
         }
         /**
          * Gets or sets the default opacity to use for pinned rows
         */
         get pinnedRowOpacity() {
-            return this.i.mf;
+            return this.i.pinnedRowOpacity;
         }
         set pinnedRowOpacity(v) {
-            this.i.mf = +v;
-            this._a("pinnedRowOpacity", this.i.mf);
+            this.i.pinnedRowOpacity = +v;
+            this._a("pinnedRowOpacity", this.i.pinnedRowOpacity);
         }
         /**
          * Gets or sets the font to use for cells that have been edited.
         */
         get editTextStyle() {
-            if (this.i.gy == null) {
+            if (this.i.editTextStyle == null) {
                 return null;
             }
-            return this.i.gy.fontString;
+            return this.i.editTextStyle.fontString;
         }
         set editTextStyle(v) {
             let 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 : "");
         }
         /**
          * Gets or sets the default opacity for unsaved cell edits.
         */
         get editOpacity() {
-            return this.i.me;
+            return this.i.editOpacity;
         }
         set editOpacity(v) {
-            this.i.me = +v;
-            this._a("editOpacity", this.i.me);
+            this.i.editOpacity = +v;
+            this._a("editOpacity", this.i.editOpacity);
         }
         /**
          * Gets or sets the text color for unsaved deleted rows.
         */
         get deletedTextColor() {
-            return brushToString(this.i.zz);
+            return brushToString(this.i.deletedTextColor);
         }
         set deletedTextColor(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));
         }
         /**
          * Gets or sets the default color to use for sticky rows
         */
         get stickyRowBackground() {
-            return brushToString(this.i.aai);
+            return brushToString(this.i.stickyRowBackground);
         }
         set stickyRowBackground(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));
         }
         /**
          * Gets or sets the default color to use for pinned rows
         */
         get pinnedRowBackground() {
-            return brushToString(this.i.z7);
+            return brushToString(this.i.pinnedRowBackground);
         }
         set pinnedRowBackground(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));
         }
         /**
          * Gets or sets the default color to use for the last sticky row
         */
         get lastStickyRowBackground() {
-            return brushToString(this.i.z6);
+            return brushToString(this.i.lastStickyRowBackground);
         }
         set lastStickyRowBackground(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));
         }
         /**
          * Gets or sets the position of the active cell.
         */
         get activeCell() {
-            const r = this.i.dp;
+            const r = this.i.activeCell;
             if (r == null) {
                 return null;
             }
@@ -1883,429 +1883,429 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
             return r.externalObject;
         }
         set activeCell(v) {
-            v == null ? this.i.dp = null : this.i.dp = v.i;
+            v == null ? this.i.activeCell = null : this.i.activeCell = v.i;
         }
         /**
          * Gets or sets the default background color to use for content cells
         */
         get cellBackground() {
-            return brushToString(this.i.zt);
+            return brushToString(this.i.cellBackground);
         }
         set cellBackground(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));
         }
         /**
          * Gets or sets the default text color to use for content cells
         */
         get cellTextColor() {
-            return brushToString(this.i.zv);
+            return brushToString(this.i.cellTextColor);
         }
         set cellTextColor(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));
         }
         /**
          * Gets or sets the default text color to use for content cells
         */
         get headerSortIndicatorColor() {
-            return brushToString(this.i.z4);
+            return brushToString(this.i.headerSortIndicatorColor);
         }
         set headerSortIndicatorColor(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));
         }
         /**
          * Gets or sets the default render style for sort indicators in header cells.
         */
         get headerSortIndicatorStyle() {
-            return this.i.f6;
+            return this.i.headerSortIndicatorStyle;
         }
         set headerSortIndicatorStyle(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));
         }
         /**
          * Gets or sets the font to use for content cells
         */
         get cellTextStyle() {
-            if (this.i.gx == null) {
+            if (this.i.cellTextStyle == null) {
                 return null;
             }
-            return this.i.gx.fontString;
+            return this.i.cellTextStyle.fontString;
         }
         set cellTextStyle(v) {
             let 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 : "");
         }
         /**
          * Gets or sets the default background color to use for section header cells
         */
         get sectionHeaderBackground() {
-            return brushToString(this.i.aaf);
+            return brushToString(this.i.sectionHeaderBackground);
         }
         set sectionHeaderBackground(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));
         }
         /**
          * Gets or sets the default text color to use for section header cells
         */
         get sectionHeaderTextColor() {
-            return brushToString(this.i.aah);
+            return brushToString(this.i.sectionHeaderTextColor);
         }
         set sectionHeaderTextColor(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));
         }
         /**
          * Gets or sets the font to use for section header cells
         */
         get sectionHeaderTextStyle() {
-            if (this.i.g0 == null) {
+            if (this.i.sectionHeaderTextStyle == null) {
                 return null;
             }
-            return this.i.g0.fontString;
+            return this.i.sectionHeaderTextStyle.fontString;
         }
         set sectionHeaderTextStyle(v) {
             let 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 : "");
         }
         /**
          * Gets or sets the font to use for summary labels at the root level.
         */
         get summaryRootLabelTextStyle() {
-            if (this.i.g1 == null) {
+            if (this.i.summaryRootLabelTextStyle == null) {
                 return null;
             }
-            return this.i.g1.fontString;
+            return this.i.summaryRootLabelTextStyle.fontString;
         }
         set summaryRootLabelTextStyle(v) {
             let 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 : "");
         }
         /**
          * Gets or sets the font to use for summary labels at the section level.
         */
         get summarySectionLabelTextStyle() {
-            if (this.i.g3 == null) {
+            if (this.i.summarySectionLabelTextStyle == null) {
                 return null;
             }
-            return this.i.g3.fontString;
+            return this.i.summarySectionLabelTextStyle.fontString;
         }
         set summarySectionLabelTextStyle(v) {
             let 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 : "");
         }
         /**
          * Gets or sets the default text color to use for summary cells at the root level.
         */
         get summaryRootValueTextColor() {
-            return brushToString(this.i.aam);
+            return brushToString(this.i.summaryRootValueTextColor);
         }
         set summaryRootValueTextColor(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));
         }
         /**
          * Gets or sets the font to use for summary values at the root level.
         */
         get summaryRootValueTextStyle() {
-            if (this.i.g2 == null) {
+            if (this.i.summaryRootValueTextStyle == null) {
                 return null;
             }
-            return this.i.g2.fontString;
+            return this.i.summaryRootValueTextStyle.fontString;
         }
         set summaryRootValueTextStyle(v) {
             let 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 : "");
         }
         /**
          * Gets or sets the font to use for summary values at the section level.
         */
         get summarySectionValueTextStyle() {
-            if (this.i.g4 == null) {
+            if (this.i.summarySectionValueTextStyle == null) {
                 return null;
             }
-            return this.i.g4.fontString;
+            return this.i.summarySectionValueTextStyle.fontString;
         }
         set summarySectionValueTextStyle(v) {
             let 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 : "");
         }
         /**
          * Gets or sets the default text color to use for summary cells at the section level.
         */
         get summarySectionValueTextColor() {
-            return brushToString(this.i.aaq);
+            return brushToString(this.i.summarySectionValueTextColor);
         }
         set summarySectionValueTextColor(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));
         }
         /**
          * Gets or sets the default text color to use for summary labels in summary cells at the root level.
         */
         get summaryRootLabelTextColor() {
-            return brushToString(this.i.aak);
+            return brushToString(this.i.summaryRootLabelTextColor);
         }
         set summaryRootLabelTextColor(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));
         }
         /**
          * Gets or sets the default text color to use for summary labels in summary cells at the section level.
         */
         get summarySectionLabelTextColor() {
-            return brushToString(this.i.aao);
+            return brushToString(this.i.summarySectionLabelTextColor);
         }
         set summarySectionLabelTextColor(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));
         }
         /**
          * Gets or sets the default background color to use for summary cells at the root level.
         */
         get summaryRootSelectedBackground() {
-            return brushToString(this.i.aal);
+            return brushToString(this.i.summaryRootSelectedBackground);
         }
         set summaryRootSelectedBackground(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));
         }
         /**
          * Gets or sets the default background color to use for summary cells at the section level.
         */
         get summarySectionSelectedBackground() {
-            return brushToString(this.i.aap);
+            return brushToString(this.i.summarySectionSelectedBackground);
         }
         set summarySectionSelectedBackground(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));
         }
         /**
          * Gets or sets the width of the pinned area separators.
         */
         get pinnedAreaSeparatorWidth() {
-            return this.i.n8;
+            return this.i.pinnedAreaSeparatorWidth;
         }
         set pinnedAreaSeparatorWidth(v) {
-            this.i.n8 = +v;
-            this._a("pinnedAreaSeparatorWidth", this.i.n8);
+            this.i.pinnedAreaSeparatorWidth = +v;
+            this._a("pinnedAreaSeparatorWidth", this.i.pinnedAreaSeparatorWidth);
         }
         /**
          * Gets or sets the width of the header separators.
         */
         get headerSeparatorWidth() {
-            return this.i.n5;
+            return this.i.headerSeparatorWidth;
         }
         set headerSeparatorWidth(v) {
-            this.i.n5 = +v;
-            this._a("headerSeparatorWidth", this.i.n5);
+            this.i.headerSeparatorWidth = +v;
+            this._a("headerSeparatorWidth", this.i.headerSeparatorWidth);
         }
         /**
          * Gets or sets the default background color to use for header separators.
         */
         get headerSeparatorBackground() {
-            return brushToString(this.i.z3);
+            return brushToString(this.i.headerSeparatorBackground);
         }
         set headerSeparatorBackground(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));
         }
         /**
          * Gets or sets the default background color to use for header cells
         */
         get headerBackground() {
-            return brushToString(this.i.z1);
+            return brushToString(this.i.headerBackground);
         }
         set headerBackground(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));
         }
         /**
          * Gets or sets the default text color to use for header cells
         */
         get headerTextColor() {
-            return brushToString(this.i.z5);
+            return brushToString(this.i.headerTextColor);
         }
         set headerTextColor(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));
         }
         /**
          * Gets or sets the font to use for header cells
         */
         get headerTextStyle() {
-            if (this.i.gz == null) {
+            if (this.i.headerTextStyle == null) {
                 return null;
             }
-            return this.i.gz.fontString;
+            return this.i.headerTextStyle.fontString;
         }
         set headerTextStyle(v) {
             let 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 : "");
         }
         /**
          * Gets or sets the default background color to use for row separators
         */
         get rowSeparatorBackground() {
-            return brushToString(this.i.aaa);
+            return brushToString(this.i.rowSeparatorBackground);
         }
         set rowSeparatorBackground(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));
         }
         get headerRowSeparatorBackground() {
-            return brushToString(this.i.z2);
+            return brushToString(this.i.headerRowSeparatorBackground);
         }
         set headerRowSeparatorBackground(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));
         }
         /**
          * Gets or sets the default sticky row background color to use for row separators
         */
         get rowSeparatorStickyRowBackground() {
-            return brushToString(this.i.aad);
+            return brushToString(this.i.rowSeparatorStickyRowBackground);
         }
         set rowSeparatorStickyRowBackground(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));
         }
         /**
          * Gets or sets the default last sticky row background color to use for row separators
         */
         get rowSeparatorLastStickyRowBackground() {
-            return brushToString(this.i.aab);
+            return brushToString(this.i.rowSeparatorLastStickyRowBackground);
         }
         set rowSeparatorLastStickyRowBackground(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));
         }
         /**
          * Gets or sets the pinned row background color to use for row separators
         */
         get rowSeparatorPinnedRowBackground() {
-            return brushToString(this.i.aac);
+            return brushToString(this.i.rowSeparatorPinnedRowBackground);
         }
         set rowSeparatorPinnedRowBackground(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));
         }
         /**
          * Sets or gets the width to use for the column resizing separator.
         */
         get columnResizingSeparatorWidth() {
-            return this.i.nj;
+            return this.i.columnResizingSeparatorWidth;
         }
         set columnResizingSeparatorWidth(v) {
-            this.i.nj = +v;
-            this._a("columnResizingSeparatorWidth", this.i.nj);
+            this.i.columnResizingSeparatorWidth = +v;
+            this._a("columnResizingSeparatorWidth", this.i.columnResizingSeparatorWidth);
         }
         /**
          * Gets or sets the opacity of the column Resizing separator.
         */
         get columnResizingSeparatorOpacity() {
-            return this.i.mc;
+            return this.i.columnResizingSeparatorOpacity;
         }
         set columnResizingSeparatorOpacity(v) {
-            this.i.mc = +v;
-            this._a("columnResizingSeparatorOpacity", this.i.mc);
+            this.i.columnResizingSeparatorOpacity = +v;
+            this._a("columnResizingSeparatorOpacity", this.i.columnResizingSeparatorOpacity);
         }
         /**
          * Sets or gets the width to use for the column resizing separator.
         */
         get columnMovingSeparatorWidth() {
-            return this.i.nh;
+            return this.i.columnMovingSeparatorWidth;
         }
         set columnMovingSeparatorWidth(v) {
-            this.i.nh = +v;
-            this._a("columnMovingSeparatorWidth", this.i.nh);
+            this.i.columnMovingSeparatorWidth = +v;
+            this._a("columnMovingSeparatorWidth", this.i.columnMovingSeparatorWidth);
         }
         /**
          * Gets or sets the opacity of the column moving separator.
         */
         get columnMovingSeparatorOpacity() {
-            return this.i.mb;
+            return this.i.columnMovingSeparatorOpacity;
         }
         set columnMovingSeparatorOpacity(v) {
-            this.i.mb = +v;
-            this._a("columnMovingSeparatorOpacity", this.i.mb);
+            this.i.columnMovingSeparatorOpacity = +v;
+            this._a("columnMovingSeparatorOpacity", this.i.columnMovingSeparatorOpacity);
         }
         /**
          * Gets or sets the default background color to use for column resizing separator.
         */
         get columnResizingSeparatorBackground() {
-            return brushToString(this.i.zy);
+            return brushToString(this.i.columnResizingSeparatorBackground);
         }
         set columnResizingSeparatorBackground(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));
         }
         /**
          * Gets or sets the default background color to use for column moving separator.
         */
         get columnMovingSeparatorBackground() {
-            return brushToString(this.i.zw);
+            return brushToString(this.i.columnMovingSeparatorBackground);
         }
         set columnMovingSeparatorBackground(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));
         }
         /**
          * Gets or sets if the section header content should be shifted into the normal column scrollable area when there are pinned columns
         */
         get shiftSectionContent() {
-            return this.i.k5;
+            return this.i.shiftSectionContent;
         }
         set shiftSectionContent(v) {
-            this.i.k5 = ensureBool(v);
-            this._a("shiftSectionContent", this.i.k5);
+            this.i.shiftSectionContent = ensureBool(v);
+            this._a("shiftSectionContent", this.i.shiftSectionContent);
         }
         /**
          * Gets or sets the column options icon alignment in header cells.
         */
         get columnOptionsIconAlignment() {
-            return this.i.bp;
+            return this.i.columnOptionsIconAlignment;
         }
         set columnOptionsIconAlignment(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));
         }
         /**
          * Gets or sets the column options icon color in header cells.
         */
         get columnOptionsIconColor() {
-            return brushToString(this.i.zx);
+            return brushToString(this.i.columnOptionsIconColor);
         }
         set columnOptionsIconColor(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));
         }
         /**
          * Gets or sets how the column options icon will behave inside header cells.
         */
         get columnOptionsIconBehavior() {
-            return this.i.br;
+            return this.i.columnOptionsIconBehavior;
         }
         set columnOptionsIconBehavior(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));
         }
         /**
          * Gets or sets the border color around the grid.
@@ -2321,156 +2321,156 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
          * Gets the actual border width.
         */
         get actualBorderWidth() {
-            return this.i.aaz;
+            return this.i.actualBorderWidth;
         }
         set actualBorderWidth(v) {
-            this.i.aaz = v;
+            this.i.actualBorderWidth = v;
         }
         get borderWidthBottom() {
-            return this.i.aa0 ? this.i.aa0.bottom : NaN;
+            return this.i.borderWidth ? this.i.borderWidth.bottom : NaN;
         }
         set borderWidthBottom(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;
         }
         get borderWidthLeft() {
-            return this.i.aa0 ? this.i.aa0.left : NaN;
+            return this.i.borderWidth ? this.i.borderWidth.left : NaN;
         }
         set borderWidthLeft(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;
         }
         get borderWidthRight() {
-            return this.i.aa0 ? this.i.aa0.right : NaN;
+            return this.i.borderWidth ? this.i.borderWidth.right : NaN;
         }
         set borderWidthRight(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;
         }
         get borderWidthTop() {
-            return this.i.aa0 ? this.i.aa0.top : NaN;
+            return this.i.borderWidth ? this.i.borderWidth.top : NaN;
         }
         set borderWidthTop(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;
         }
         ensureBorderWidth() {
-            if (this.i.aa0) {
+            if (this.i.borderWidth) {
                 return;
             }
-            this.i.aa0 = new Thickness(2);
+            this.i.borderWidth = new Thickness(2);
         }
         /**
          * Gets or sets if the grid should notify on programmatic selection changes as well as changes from the UI.
         */
         get notifyOnAllSelectionChanges() {
-            return this.i.kh;
+            return this.i.notifyOnAllSelectionChanges;
         }
         set notifyOnAllSelectionChanges(v) {
-            this.i.kh = ensureBool(v);
-            this._a("notifyOnAllSelectionChanges", this.i.kh);
+            this.i.notifyOnAllSelectionChanges = ensureBool(v);
+            this._a("notifyOnAllSelectionChanges", this.i.notifyOnAllSelectionChanges);
         }
         get cornerRadiusBottomRight() {
-            return this.i.yr ? this.i.yr.b : NaN;
+            return this.i.cornerRadius ? this.i.cornerRadius.b : NaN;
         }
         set cornerRadiusBottomRight(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;
         }
         get cornerRadiusBottomLeft() {
-            return this.i.yr ? this.i.yr.a : NaN;
+            return this.i.cornerRadius ? this.i.cornerRadius.a : NaN;
         }
         set cornerRadiusBottomLeft(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;
         }
         get cornerRadiusTopLeft() {
-            return this.i.yr ? this.i.yr.c : NaN;
+            return this.i.cornerRadius ? this.i.cornerRadius.c : NaN;
         }
         set cornerRadiusTopLeft(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;
         }
         get cornerRadiusTopRight() {
-            return this.i.yr ? this.i.yr.d : NaN;
+            return this.i.cornerRadius ? this.i.cornerRadius.d : NaN;
         }
         set cornerRadiusTopRight(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;
         }
         ensureCornerRadius() {
-            if (this.i.yr) {
+            if (this.i.cornerRadius) {
                 return;
             }
-            this.i.yr = new CornerRadius(2);
+            this.i.cornerRadius = new CornerRadius(2);
         }
         get actualCornerRadiusBottomRight() {
-            return this.i.yp ? this.i.yp.b : NaN;
+            return this.i.actualCornerRadius ? this.i.actualCornerRadius.b : NaN;
         }
         set actualCornerRadiusBottomRight(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;
         }
         get actualCornerRadiusBottomLeft() {
-            return this.i.yp ? this.i.yp.a : NaN;
+            return this.i.actualCornerRadius ? this.i.actualCornerRadius.a : NaN;
         }
         set actualCornerRadiusBottomLeft(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;
         }
         get actualCornerRadiusTopLeft() {
-            return this.i.yp ? this.i.yp.c : NaN;
+            return this.i.actualCornerRadius ? this.i.actualCornerRadius.c : NaN;
         }
         set actualCornerRadiusTopLeft(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;
         }
         get actualCornerRadiusTopRight() {
-            return this.i.yp ? this.i.yp.d : NaN;
+            return this.i.actualCornerRadius ? this.i.actualCornerRadius.d : NaN;
         }
         set actualCornerRadiusTopRight(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;
         }
         ensureActualCornerRadius() {
-            if (this.i.yp) {
+            if (this.i.actualCornerRadius) {
                 return;
             }
-            this.i.yp = new CornerRadius(2);
+            this.i.actualCornerRadius = new CornerRadius(2);
         }
         /**
          * Gets or sets whether the active cell style will be applied to cells when made active.
         */
         get isActiveCellStyleEnabled() {
-            return this.i.je;
+            return this.i.isActiveCellStyleEnabled;
         }
         set isActiveCellStyleEnabled(v) {
-            this.i.je = ensureBool(v);
-            this._a("isActiveCellStyleEnabled", this.i.je);
+            this.i.isActiveCellStyleEnabled = ensureBool(v);
+            this._a("isActiveCellStyleEnabled", this.i.isActiveCellStyleEnabled);
         }
         /**
          * A set of states that can be applied to the columns of the grid based on available space.
@@ -2478,7 +2478,7 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
         get responsiveStates() {
             if (this._responsiveStates === null) {
                 let coll = new IgcResponsiveStatesCollection();
-                let innerColl = this.i.fq;
+                let innerColl = this.i.responsiveStates;
                 if (!innerColl) {
                     innerColl = new ResponsiveStatesCollection_internal();
                 }
@@ -2494,7 +2494,7 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
             let coll = new IgcResponsiveStatesCollection();
             this._responsiveStates = coll._fromOuter(v);
             let syncColl = new SyncableObservableCollection$1(ResponsiveState.$type);
-            let innerColl = this.i.fq;
+            let innerColl = this.i.responsiveStates;
             if (!innerColl) {
                 innerColl = new ResponsiveStatesCollection_internal();
             }
@@ -2506,13 +2506,13 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
          * Gets the region of the grid that is visible.
         */
         get actualVisibleRegion() {
-            return fromRect(this.i.aas);
+            return fromRect(this.i.actualVisibleRegion);
         }
         /**
          * 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 initialSortDescriptions() {
-            const r = this.i.ca;
+            const r = this.i.initialSortDescriptions;
             if (r == null) {
                 return null;
             }
@@ -2534,7 +2534,7 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
          * 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 initialGroupDescriptions() {
-            const r = this.i.bc;
+            const r = this.i.initialGroupDescriptions;
             if (r == null) {
                 return null;
             }
@@ -2556,7 +2556,7 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
          * Gets the current summaries that are applied to the grid.
         */
         get initialSummaryDescriptions() {
-            const r = this.i.cf;
+            const r = this.i.initialSummaryDescriptions;
             if (r == null) {
                 return null;
             }
@@ -2575,28 +2575,28 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
             return r.externalObject;
         }
         get initialSorts() {
-            return this.i.q6;
+            return this.i.initialSorts;
         }
         set initialSorts(v) {
-            this.i.q6 = v;
+            this.i.initialSorts = v;
         }
         get initialGroups() {
-            return this.i.q4;
+            return this.i.initialGroups;
         }
         set initialGroups(v) {
-            this.i.q4 = v;
+            this.i.initialGroups = v;
         }
         get initialSummaries() {
-            return this.i.q8;
+            return this.i.initialSummaries;
         }
         set initialSummaries(v) {
-            this.i.q8 = v;
+            this.i.initialSummaries = v;
         }
         /**
          * 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 sortDescriptions() {
-            const r = this.i.cb;
+            const r = this.i.sortDescriptions;
             if (r == null) {
                 return null;
             }
@@ -2618,7 +2618,7 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
          * 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 groupDescriptions() {
-            const r = this.i.bb;
+            const r = this.i.groupDescriptions;
             if (r == null) {
                 return null;
             }
@@ -2640,7 +2640,7 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
          * 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 filterExpressions() {
-            const r = this.i.u;
+            const r = this.i.filterExpressions;
             if (r == null) {
                 return null;
             }
@@ -2662,7 +2662,7 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
          * Gets the current summaries that are applied to the grid.
         */
         get summaryDescriptions() {
-            const r = this.i.cg;
+            const r = this.i.summaryDescriptions;
             if (r == null) {
                 return null;
             }
@@ -2684,51 +2684,51 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
          * Gets or sets the scope which summaries are calculated for.
         */
         get summaryScope() {
-            return this.i.gg;
+            return this.i.summaryScope;
         }
         set summaryScope(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));
         }
         /**
          * Gets or sets whether group headers are collapsable.
         */
         get isGroupCollapsable() {
-            return this.i.jw;
+            return this.i.isGroupCollapsable;
         }
         set isGroupCollapsable(v) {
-            this.i.jw = ensureBool(v);
-            this._a("isGroupCollapsable", this.i.jw);
+            this.i.isGroupCollapsable = ensureBool(v);
+            this._a("isGroupCollapsable", this.i.isGroupCollapsable);
         }
         /**
          * Gets or sets how group headers are displayed when there are multiple groups defined in the grid.
         */
         get groupHeaderDisplayMode() {
-            return this.i.er;
+            return this.i.groupHeaderDisplayMode;
         }
         set groupHeaderDisplayMode(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));
         }
         /**
          * Gets or sets whether groups are expanded or collapsed by default.
         */
         get isGroupExpandedDefault() {
-            return this.i.jx;
+            return this.i.isGroupExpandedDefault;
         }
         set isGroupExpandedDefault(v) {
-            this.i.jx = ensureBool(v);
-            this._a("isGroupExpandedDefault", this.i.jx);
+            this.i.isGroupExpandedDefault = ensureBool(v);
+            this._a("isGroupExpandedDefault", this.i.isGroupExpandedDefault);
         }
         /**
          * Gets or sets the display mode summaries will use inside groups.
         */
         get groupSummaryDisplayMode() {
-            return this.i.et;
+            return this.i.groupSummaryDisplayMode;
         }
         set groupSummaryDisplayMode(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));
         }
         /**
          * Gets or sets whether to automatically accept edits or require explicit acceptance or rejections of edits
@@ -2743,38 +2743,38 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
          * will be auto accepted.
         */
         get autoAcceptEdits() {
-            return this.i.iy;
+            return this.i.autoAcceptEdits;
         }
         set autoAcceptEdits(v) {
-            this.i.iy = ensureBool(v);
-            this._a("autoAcceptEdits", this.i.iy);
+            this.i.autoAcceptEdits = ensureBool(v);
+            this._a("autoAcceptEdits", this.i.autoAcceptEdits);
         }
         /**
          * Sets or gets the user provided primary key to assume for the data. Certain functionality of the grid requires a way to uniquely identify items in order to work correctly.
          * If a primary key cannot be inferred from the data source, you may need to provide one here.
         */
         get primaryKey() {
-            return this.i.l;
+            return this.i.primaryKey;
         }
         set primaryKey(v) {
             if (v && !Array.isArray(v) && typeof (v) == "string") {
                 const re = /\s*(?:,|\s|$)\s*/gm;
                 v = v.split(re);
             }
-            this.i.l = v;
+            this.i.primaryKey = v;
         }
         /**
          * 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 actualPrimaryKey() {
-            return this.i.e;
+            return this.i.actualPrimaryKey;
         }
         set actualPrimaryKey(v) {
             if (v && !Array.isArray(v) && typeof (v) == "string") {
                 const re = /\s*(?:,|\s|$)\s*/gm;
                 v = v.split(re);
             }
-            this.i.e = v;
+            this.i.actualPrimaryKey = v;
         }
         get actualColumns() {
             if (this._actualColumns === null) {
@@ -2807,278 +2807,278 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
          * Sets or gets whether the grid will react to sort changes.
         */
         get reactsToSortChanges() {
-            return this.i.ky;
+            return this.i.reactsToSortChanges;
         }
         set reactsToSortChanges(v) {
-            this.i.ky = ensureBool(v);
-            this._a("reactsToSortChanges", this.i.ky);
+            this.i.reactsToSortChanges = ensureBool(v);
+            this._a("reactsToSortChanges", this.i.reactsToSortChanges);
         }
         /**
          * Sets or gets whether the grid will react to group changes.
         */
         get reactsToGroupChanges() {
-            return this.i.kx;
+            return this.i.reactsToGroupChanges;
         }
         set reactsToGroupChanges(v) {
-            this.i.kx = ensureBool(v);
-            this._a("reactsToGroupChanges", this.i.kx);
+            this.i.reactsToGroupChanges = ensureBool(v);
+            this._a("reactsToGroupChanges", this.i.reactsToGroupChanges);
         }
         /**
          * Sets or gets whether the grid will react to filter changes.
         */
         get reactsToFilterChanges() {
-            return this.i.kw;
+            return this.i.reactsToFilterChanges;
         }
         set reactsToFilterChanges(v) {
-            this.i.kw = ensureBool(v);
-            this._a("reactsToFilterChanges", this.i.kw);
+            this.i.reactsToFilterChanges = ensureBool(v);
+            this._a("reactsToFilterChanges", this.i.reactsToFilterChanges);
         }
         /**
          * Gets whether an undo can be performed.
         */
         get canUndo() {
-            return this.i.i5;
+            return this.i.canUndo;
         }
         /**
          * Gets whether a redo can be performed.
         */
         get canRedo() {
-            return this.i.i4;
+            return this.i.canRedo;
         }
         /**
          * Gets whether a commit can be performed. False if there are any errors present
          * on any pending transactions.
         */
         get canCommit() {
-            return this.i.i1;
+            return this.i.canCommit;
         }
         /**
          * Gets or sets the behavior of the Enter key.
         */
         get enterBehavior() {
-            return this.i.c0;
+            return this.i.enterBehavior;
         }
         set enterBehavior(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));
         }
         /**
          * Gets or sets the behavior of the enter key when exiting edit mode.
         */
         get enterBehaviorAfterEdit() {
-            return this.i.cy;
+            return this.i.enterBehaviorAfterEdit;
         }
         set enterBehaviorAfterEdit(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));
         }
         /**
          * Gets or sets whether to show the summaries option in the column options menu.
         */
         get isColumnOptionsSummariesEnabled() {
-            return this.i.jp;
+            return this.i.isColumnOptionsSummariesEnabled;
         }
         set isColumnOptionsSummariesEnabled(v) {
-            this.i.jp = ensureBool(v);
-            this._a("isColumnOptionsSummariesEnabled", this.i.jp);
+            this.i.isColumnOptionsSummariesEnabled = ensureBool(v);
+            this._a("isColumnOptionsSummariesEnabled", this.i.isColumnOptionsSummariesEnabled);
         }
         /**
          * Gets or sets whether to show the grouping option in the column options menu.
         */
         get isColumnOptionsGroupingEnabled() {
-            return this.i.jo;
+            return this.i.isColumnOptionsGroupingEnabled;
         }
         set isColumnOptionsGroupingEnabled(v) {
-            this.i.jo = ensureBool(v);
-            this._a("isColumnOptionsGroupingEnabled", this.i.jo);
+            this.i.isColumnOptionsGroupingEnabled = ensureBool(v);
+            this._a("isColumnOptionsGroupingEnabled", this.i.isColumnOptionsGroupingEnabled);
         }
         /**
          * Gets or sets if and how cell merging is performed for all fields.
         */
         get mergedCellMode() {
-            return this.i.fi;
+            return this.i.mergedCellMode;
         }
         set mergedCellMode(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));
         }
         /**
          * Gets or sets how cells are evaluated for merging.
         */
         get mergedCellEvaluationCriteria() {
-            return this.i.fg;
+            return this.i.mergedCellEvaluationCriteria;
         }
         set mergedCellEvaluationCriteria(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));
         }
         /**
          * Gets or sets the vertical alignment to use for the merged cell content.
         */
         get mergedCellVerticalAlignment() {
-            return this.i.am;
+            return this.i.mergedCellVerticalAlignment;
         }
         set mergedCellVerticalAlignment(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));
         }
         /**
          * Gets or sets which filter UI type to use.
         */
         get filterUIType() {
-            return this.i.c7;
+            return this.i.filterUIType;
         }
         set filterUIType(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));
         }
         /**
          * Gets or sets how filters set through the filter UI are combined.
         */
         get filterLogicalOperator() {
-            return this.i.c4;
+            return this.i.filterLogicalOperator;
         }
         set filterLogicalOperator(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));
         }
         /**
          * Gets or sets whether UI filters are case sensitive or not.
         */
         get filterComparisonType() {
-            return this.i.c2;
+            return this.i.filterComparisonType;
         }
         set filterComparisonType(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));
         }
         get todayOverride() {
-            return this.i.lp;
+            return this.i.todayOverride;
         }
         set todayOverride(v) {
-            this.i.lp = v;
+            this.i.todayOverride = v;
         }
         /**
          * Gets or sets whether selection is cleared when pressing the Escape key.
         */
         get clearSelectionOnEscape() {
-            return this.i.i6;
+            return this.i.clearSelectionOnEscape;
         }
         set clearSelectionOnEscape(v) {
-            this.i.i6 = ensureBool(v);
-            this._a("clearSelectionOnEscape", this.i.i6);
+            this.i.clearSelectionOnEscape = ensureBool(v);
+            this._a("clearSelectionOnEscape", this.i.clearSelectionOnEscape);
         }
         /**
          * Gets or sets the size of each page when the pager is visible.
         */
         get pageSize() {
-            return this.i.n6;
+            return this.i.pageSize;
         }
         set pageSize(v) {
-            this.i.n6 = +v;
-            this._a("pageSize", this.i.n6);
+            this.i.pageSize = +v;
+            this._a("pageSize", this.i.pageSize);
         }
         /**
          * Gets or sets whether to show the column chooser button in the toolbar.
         */
         get isToolbarColumnChooserVisible() {
-            return this.i.kc;
+            return this.i.isToolbarColumnChooserVisible;
         }
         set isToolbarColumnChooserVisible(v) {
-            this.i.kc = ensureBool(v);
-            this._a("isToolbarColumnChooserVisible", this.i.kc);
+            this.i.isToolbarColumnChooserVisible = ensureBool(v);
+            this._a("isToolbarColumnChooserVisible", this.i.isToolbarColumnChooserVisible);
         }
         /**
          * Gets or sets whether to show the column pinning button in the toolbar.
         */
         get isToolbarColumnPinningVisible() {
-            return this.i.kd;
+            return this.i.isToolbarColumnPinningVisible;
         }
         set isToolbarColumnPinningVisible(v) {
-            this.i.kd = ensureBool(v);
-            this._a("isToolbarColumnPinningVisible", this.i.kd);
+            this.i.isToolbarColumnPinningVisible = ensureBool(v);
+            this._a("isToolbarColumnPinningVisible", this.i.isToolbarColumnPinningVisible);
         }
         /**
          * Gets or sets the title text to use in the toolbar.
         */
         get toolbarTitle() {
-            return this.i.to;
+            return this.i.toolbarTitle;
         }
         set toolbarTitle(v) {
-            this.i.to = v;
+            this.i.toolbarTitle = v;
         }
         /**
          * Gets or sets the column chooser button text to use in the toolbar.
         */
         get toolbarColumnChooserText() {
-            return this.i.tg;
+            return this.i.toolbarColumnChooserText;
         }
         set toolbarColumnChooserText(v) {
-            this.i.tg = v;
+            this.i.toolbarColumnChooserText = v;
         }
         /**
          * Gets or sets the column chooser title text to use in the toolbar.
         */
         get toolbarColumnChooserTitle() {
-            return this.i.ti;
+            return this.i.toolbarColumnChooserTitle;
         }
         set toolbarColumnChooserTitle(v) {
-            this.i.ti = v;
+            this.i.toolbarColumnChooserTitle = v;
         }
         /**
          * Gets or sets the column pinning button text to use in the toolbar.
         */
         get toolbarColumnPinningText() {
-            return this.i.tk;
+            return this.i.toolbarColumnPinningText;
         }
         set toolbarColumnPinningText(v) {
-            this.i.tk = v;
+            this.i.toolbarColumnPinningText = v;
         }
         /**
          * Gets or sets the column pinning title text to use in the toolbar.
         */
         get toolbarColumnPinningTitle() {
-            return this.i.tm;
+            return this.i.toolbarColumnPinningTitle;
         }
         set toolbarColumnPinningTitle(v) {
-            this.i.tm = v;
+            this.i.toolbarColumnPinningTitle = v;
         }
         /**
          * Gets or sets the style of scrollbar.
         */
         get scrollbarStyle() {
-            return this.i.gm;
+            return this.i.scrollbarStyle;
         }
         set scrollbarStyle(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));
         }
         /**
          * Gets or sets the scrollbar background color.
         */
         get scrollbarBackground() {
-            return brushToString(this.i.aae);
+            return brushToString(this.i.scrollbarBackground);
         }
         set scrollbarBackground(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));
         }
         get allowCopyOperation() {
-            return this.i.ix;
+            return this.i.allowCopyOperation;
         }
         set allowCopyOperation(v) {
-            this.i.ix = ensureBool(v);
-            this._a("allowCopyOperation", this.i.ix);
+            this.i.allowCopyOperation = ensureBool(v);
+            this._a("allowCopyOperation", this.i.allowCopyOperation);
         }
         /**
          * Gets or sets whether to defer the SelectedItemsChanged and SelectedKeysChanged events till after the drag selection has completed.
         */
         get deferEventForRowDragSelection() {
-            return this.i.i7;
+            return this.i.deferEventForRowDragSelection;
         }
         set deferEventForRowDragSelection(v) {
-            this.i.i7 = ensureBool(v);
-            this._a("deferEventForRowDragSelection", this.i.i7);
+            this.i.deferEventForRowDragSelection = ensureBool(v);
+            this._a("deferEventForRowDragSelection", this.i.deferEventForRowDragSelection);
         }
         findByName(name) {
             if (this.findEphemera) {
@@ -3248,14 +3248,14 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
     
     */
         refresh() {
-            this.i.xc();
+            this.i.refresh();
         }
         /**
          * Makes sure pending work has completed if the grid need to be synchronously examined.
         
         */
         flush() {
-            this.i.ui();
+            this.i.flush();
         }
         notifyScrollStart() {
             this.i.notifyScrollStart();
@@ -3264,13 +3264,13 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
             this.i.notifyScrollStop();
         }
         exchangeColumn(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));
         }
         pinColumn(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));
         }
         moveColumn(oldIndex, newIndex) {
-            this.i.uv(oldIndex, newIndex);
+            this.i.moveColumn(oldIndex, newIndex);
         }
         /**
          * Moves a column to the left, if possible.
@@ -3278,7 +3278,7 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
         * @param columnIndex  * The index of the column to move.
         */
         moveColumnLeft(columnIndex) {
-            this.i.uw(columnIndex);
+            this.i.moveColumnLeft(columnIndex);
         }
         /**
          * Moves a column to the right, if possible.
@@ -3286,7 +3286,7 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
         * @param columnIndex  * The index of the column to move.
         */
         moveColumnRight(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.
@@ -3294,7 +3294,7 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
         * @param columnIndex  * The index of the column.
         */
         canMoveColumnLeft(columnIndex) {
-            let iv = this.i.i2(columnIndex);
+            let iv = this.i.canMoveColumnLeft(columnIndex);
             return (iv);
         }
         /**
@@ -3303,7 +3303,7 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
         * @param columnIndex  * The index of the column.
         */
         canMoveColumnRight(columnIndex) {
-            let iv = this.i.i3(columnIndex);
+            let iv = this.i.canMoveColumnRight(columnIndex);
             return (iv);
         }
         /**
@@ -3311,7 +3311,7 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
         
         */
         exportVisualModel() {
-            let iv = this.i.ol();
+            let iv = this.i.exportVisualModel();
             return (iv);
         }
         /**
@@ -3319,7 +3319,7 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
         
         */
         exportSerializedVisualModel() {
-            let iv = this.i.ql();
+            let iv = this.i.exportSerializedVisualModel();
             return (iv);
         }
         /**
@@ -3328,7 +3328,7 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
         * @param rowNumber  * The row index to scroll to.
         */
         scrollToRowByIndex(rowNumber) {
-            this.i.xv(rowNumber);
+            this.i.scrollToRowByIndex(rowNumber);
         }
         /**
          * Scrolls the grid so that a row is the last visible, by index.
@@ -3336,7 +3336,7 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
         * @param rowNumber  * The row index to scroll to.
         */
         scrollToLastRowByIndex(rowNumber) {
-            this.i.xu(rowNumber);
+            this.i.scrollToLastRowByIndex(rowNumber);
         }
         /**
          * Scrolls to an item, if found.
@@ -3344,11 +3344,11 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
         * @param item  * The item to scroll to.
         */
         scrollToItem(item) {
-            let iv = this.i.k3(item);
+            let iv = this.i.scrollToItem(item);
             return (iv);
         }
         scrollToPrimaryKey(key) {
-            let iv = this.i.k4(key);
+            let iv = this.i.scrollToPrimaryKey(key);
             return (iv);
         }
         /**
@@ -3357,14 +3357,14 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
         * @param columnNumber  * The column number to scroll to.
         */
         scrollToColumnByIndex(columnNumber) {
-            this.i.xs(columnNumber);
+            this.i.scrollToColumnByIndex(columnNumber);
         }
         /**
          * Gets the last visible index in the grid.
         
         */
         getLastVisibleIndex() {
-            let iv = this.i.nx();
+            let iv = this.i.getLastVisibleIndex();
             return (iv);
         }
         /**
@@ -3372,7 +3372,7 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
         
         */
         getFirstVisibleIndex() {
-            let iv = this.i.ns();
+            let iv = this.i.getFirstVisibleIndex();
             return (iv);
         }
         /**
@@ -3380,7 +3380,7 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
         
         */
         invalidateVisibleRows() {
-            this.i.ut();
+            this.i.invalidateVisibleRows();
         }
         /**
          * Manually set the active responsive state of the grid.
@@ -3388,10 +3388,10 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
         * @param name
         */
         setActiveResponsiveState(name) {
-            this.i.x3(name);
+            this.i.setActiveResponsiveState(name);
         }
         notifySetItem(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.
@@ -3399,13 +3399,13 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
         
         */
         notifyClearItems() {
-            this.i.uz();
+            this.i.notifyClearItems();
         }
         notifyInsertItem(index, newItem) {
-            this.i.u1(index, newItem);
+            this.i.notifyInsertItem(index, newItem);
         }
         notifyRemoveItem(index, oldItem) {
-            this.i.u2(index, oldItem);
+            this.i.notifyRemoveItem(index, oldItem);
         }
         /**
          * Returns the data index of an item within the bound data source.
@@ -3413,11 +3413,11 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
         * @param item  * The item from which to get the index.
         */
         dataIndexOfItem(item) {
-            let iv = this.i.nl(item);
+            let iv = this.i.dataIndexOfItem(item);
             return (iv);
         }
         dataIndexOfPrimaryKey(key) {
-            let iv = this.i.nm(key);
+            let iv = this.i.dataIndexOfPrimaryKey(key);
             return (iv);
         }
         /**
@@ -3426,11 +3426,11 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
         * @param cellKey  * The cell to resolve.
         */
         resolveCellValue(cellKey) {
-            let iv = this.i.oo((cellKey == null ? null : cellKey.i));
+            let iv = this.i.resolveCellValue((cellKey == null ? null : cellKey.i));
             return (iv);
         }
         resolveCellValueFromPosition(row, column) {
-            let iv = this.i.op(row, column);
+            let iv = this.i.resolveCellValueFromPosition(row, column);
             return (iv);
         }
         /**
@@ -3440,7 +3440,7 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
         * @param index  * The rendered index of the column.
         */
         getColumnAtRenderedIndex(index) {
-            let iv = this.i.cl(index);
+            let iv = this.i.getColumnAtRenderedIndex(index);
             let ret = null;
             if (iv && iv.externalObject) {
                 ret = iv.externalObject;
@@ -3460,7 +3460,7 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
         
         */
         getRootSummaryResults() {
-            let iv = this.i.j();
+            let iv = this.i.getRootSummaryResults();
             return (iv);
         }
         /**
@@ -3468,7 +3468,7 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
         
         */
         getSectionSummaryResults(sectionIndex) {
-            let iv = this.i.k(sectionIndex);
+            let iv = this.i.getSectionSummaryResults(sectionIndex);
             return (iv);
         }
         /**
@@ -3476,14 +3476,14 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
         
         */
         commitEdits() {
-            this.i.t8();
+            this.i.commitEdits();
         }
         /**
          * Cancels any edits that may exist in the datasource.
         
         */
         cancelEdits() {
-            this.i.tz();
+            this.i.cancelEdits();
         }
         /**
          * Accepts a specific commit to the datasource.
@@ -3491,7 +3491,7 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
         * @param commitID  * The ID of the commit provided by the Committing event.
         */
         acceptCommit(commitID) {
-            this.i.tq(commitID);
+            this.i.acceptCommit(commitID);
         }
         /**
          * Rejects a specific commit.
@@ -3499,27 +3499,27 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
         * @param commitID  * The ID of the commit provided by the Committing event.
         */
         rejectCommit(commitID) {
-            this.i.xf(commitID);
+            this.i.rejectCommit(commitID);
         }
         /**
          * Undo the last edit.
         
         */
         undo() {
-            this.i.yc();
+            this.i.undo();
         }
         /**
          * Redo the last edit.
         
         */
         redo() {
-            this.i.xb();
+            this.i.redo();
         }
         updatePropertyAtKey(key, propertyPath, value) {
-            this.i.yh(key, propertyPath, value);
+            this.i.updatePropertyAtKey(key, propertyPath, value);
         }
         removeItemByKey(key) {
-            this.i.xk(key);
+            this.i.removeItemByKey(key);
         }
         /**
          * Removes an item by its instance.
@@ -3527,7 +3527,7 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
         * @param item  * The item instance to remove.
         */
         removeItem(item) {
-            this.i.xj(item);
+            this.i.removeItem(item);
         }
         /**
          * Accept a pending edit turning it into a real edit.
@@ -3535,7 +3535,7 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
         * @param editID  * The ID of the edit. Provided by the CellValueChanging event.
         */
         acceptEdit(editID) {
-            this.i.tr(editID);
+            this.i.acceptEdit(editID);
         }
         /**
          * Reject a pending edit.
@@ -3543,41 +3543,41 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
         * @param editID  * The ID of the edit. Provided by the CellValueChanging event.
         */
         rejectEdit(editID) {
-            this.i.xg(editID);
+            this.i.rejectEdit(editID);
         }
         setEditError(editID, errorMessage) {
-            this.i.x5(editID, errorMessage);
+            this.i.setEditError(editID, errorMessage);
         }
         /**
          * Start edit mode on the active cell.
         
         */
         startEditMode() {
-            this.i.x8();
+            this.i.startEditMode();
         }
         endEditMode(commit) {
-            this.i.ud(commit);
+            this.i.endEditMode(commit);
         }
         /**
          * Selects all of the rows in the grid.
         
         */
         selectAllRows() {
-            this.i.xw();
+            this.i.selectAllRows();
         }
         /**
          * Deselects all currently selected rows.
         
         */
         deselectAllRows() {
-            this.i.ub();
+            this.i.deselectAllRows();
         }
         /**
          * Saves the layout chnages that have been made to the grid
         
         */
         saveLayout() {
-            let iv = this.i.sj();
+            let iv = this.i.saveLayout();
             return (iv);
         }
         /**
@@ -3585,7 +3585,7 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
         
         */
         loadLayout(json) {
-            this.i.uu(json);
+            this.i.loadLayout(json);
         }
         get filterExpressionsChanging() {
             return this._filterExpressionsChanging;
@@ -4367,7 +4367,7 @@ export let IgcDataGridComponent = /*@__PURE__*/ (() => {
             this._actualPrimaryKeyChange = ev;
             this._actualPrimaryKeyChange_wrapped = (o, e) => {
                 let ext = this.actualPrimaryKey;
-                if (e.propertyName == 'E') {
+                if (e.propertyName == 'ActualPrimaryKey') {
                     if (this.beforeActualPrimaryKeyChange) {
                         this.beforeActualPrimaryKeyChange(this, ext);
                     }