igniteui-angular-data-grids 21.0.1-beta.0 → 21.1.0-beta.0

package/esm5/lib/igx-data-grid-column-component.js

@@ -65,10 +65,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the amount of left padding to use for the cell content for this column.
         */
         get: function () {
-            return this.i.k7;
+            return this.i.lm;
         },
         set: function (v) {
-            this.i.k7 = +v;
+            this.i.lm = +v;
         },
         enumerable: false,
         configurable: true
@@ -78,10 +78,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the amount of top padding to use for the cell content for this column.
         */
         get: function () {
-            return this.i.k9;
+            return this.i.lo;
         },
         set: function (v) {
-            this.i.k9 = +v;
+            this.i.lo = +v;
         },
         enumerable: false,
         configurable: true
@@ -91,10 +91,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the amount of right padding to use for the cell content of this column.
         */
         get: function () {
-            return this.i.k8;
+            return this.i.ln;
         },
         set: function (v) {
-            this.i.k8 = +v;
+            this.i.ln = +v;
         },
         enumerable: false,
         configurable: true
@@ -104,10 +104,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the amount of bottom padding to use for the cell content of this column.
         */
         get: function () {
-            return this.i.k6;
+            return this.i.ll;
         },
         set: function (v) {
-            this.i.k6 = +v;
+            this.i.ll = +v;
         },
         enumerable: false,
         configurable: true
@@ -117,10 +117,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets an unique name of the Column
         */
         get: function () {
-            return this.i.ni;
+            return this.i.ob;
         },
         set: function (v) {
-            this.i.ni = v;
+            this.i.ob = v;
         },
         enumerable: false,
         configurable: true
@@ -130,10 +130,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the key used for the column binding
         */
         get: function () {
-            return this.i.mr;
+            return this.i.nj;
         },
         set: function (v) {
-            this.i.mr = v;
+            this.i.nj = v;
         },
         enumerable: false,
         configurable: true
@@ -143,10 +143,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the text displayed in the header of the column
         */
         get: function () {
-            return this.i.my;
+            return this.i.nq;
         },
         set: function (v) {
-            this.i.my = v;
+            this.i.nq = v;
         },
         enumerable: false,
         configurable: true
@@ -156,10 +156,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets the actual text displayed in the header of the column
         */
         get: function () {
-            return this.i.l0;
+            return this.i.ml;
         },
         set: function (v) {
-            this.i.l0 = v;
+            this.i.ml = v;
         },
         enumerable: false,
         configurable: true
@@ -169,10 +169,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the background color to use for the cells when they are selected
         */
         get: function () {
-            return brushToString(this.i.qm);
+            return brushToString(this.i.r2);
         },
         set: function (v) {
-            this.i.qm = stringToBrush(v);
+            this.i.r2 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -182,10 +182,36 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets the actual background color that is used for the cells when they are selected
         */
         get: function () {
-            return brushToString(this.i.p9);
+            return brushToString(this.i.rl);
         },
         set: function (v) {
-            this.i.p9 = stringToBrush(v);
+            this.i.rl = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxDataGridColumnComponent.prototype, "selectedTextColor", {
+        /**
+         * Gets or sets the text color to use for the cells when they are selected
+        */
+        get: function () {
+            return brushToString(this.i.r3);
+        },
+        set: function (v) {
+            this.i.r3 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxDataGridColumnComponent.prototype, "actualSelectedTextColor", {
+        /**
+         * Gets the actual text color that is used for the cells when they are selected
+        */
+        get: function () {
+            return brushToString(this.i.rm);
+        },
+        set: function (v) {
+            this.i.rm = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -195,10 +221,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the background color to use for the cells when the row is hovered.
         */
         get: function () {
-            return brushToString(this.i.qk);
+            return brushToString(this.i.r0);
         },
         set: function (v) {
-            this.i.qk = stringToBrush(v);
+            this.i.r0 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -208,10 +234,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets the actual background color that is used for the cells when they are hovered.
         */
         get: function () {
-            return brushToString(this.i.p7);
+            return brushToString(this.i.rj);
         },
         set: function (v) {
-            this.i.p7 = stringToBrush(v);
+            this.i.rj = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -221,10 +247,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the text color to use for the cells when the row is hovered.
         */
         get: function () {
-            return brushToString(this.i.ql);
+            return brushToString(this.i.r1);
         },
         set: function (v) {
-            this.i.ql = stringToBrush(v);
+            this.i.r1 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -234,10 +260,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets the actual text color that is used for the cells when they are hovered.
         */
         get: function () {
-            return brushToString(this.i.p8);
+            return brushToString(this.i.rk);
         },
         set: function (v) {
-            this.i.p8 = stringToBrush(v);
+            this.i.rk = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -247,7 +273,7 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the animation settings to use for this column.
         */
         get: function () {
-            var r = this.i.ic;
+            var r = this.i.id;
             if (r == null) {
                 return null;
             }
@@ -266,7 +292,7 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
             return r.externalObject;
         },
         set: function (v) {
-            v == null ? this.i.ic = null : this.i.ic = v.i;
+            v == null ? this.i.id = null : this.i.id = v.i;
         },
         enumerable: false,
         configurable: true
@@ -311,10 +337,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the minimum width to use for this column. Overrides the DefaultColumnMinWidth from the grid, if set.
         */
         get: function () {
-            return this.i.ki;
+            return this.i.kt;
         },
         set: function (v) {
-            this.i.ki = +v;
+            this.i.kt = +v;
         },
         enumerable: false,
         configurable: true
@@ -324,10 +350,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets whether this column was projected from markup/templates and is constrained.
         */
         get: function () {
-            return this.i.j0;
+            return this.i.ka;
         },
         set: function (v) {
-            this.i.j0 = ensureBool(v);
+            this.i.ka = ensureBool(v);
         },
         enumerable: false,
         configurable: true
@@ -337,10 +363,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets whether this column was auto generated.
         */
         get: function () {
-            return this.i.ju;
+            return this.i.j4;
         },
         set: function (v) {
-            this.i.ju = ensureBool(v);
+            this.i.j4 = ensureBool(v);
         },
         enumerable: false,
         configurable: true
@@ -350,10 +376,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets a filter to apply on the values of this column
         */
         get: function () {
-            return this.i.g4;
+            return this.i.g5;
         },
         set: function (v) {
-            this.i.g4 = v;
+            this.i.g5 = v;
         },
         enumerable: false,
         configurable: true
@@ -363,10 +389,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets a filter to apply to the values of this column.
         */
         get: function () {
-            return this.i.g6;
+            return this.i.g7;
         },
         set: function (v) {
-            this.i.g6 = v;
+            this.i.g7 = v;
         },
         enumerable: false,
         configurable: true
@@ -402,10 +428,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets whether filtering is enabled for this column.
         */
         get: function () {
-            return this.i.jz;
+            return this.i.j9;
         },
         set: function (v) {
-            this.i.jz = ensureBool(v);
+            this.i.j9 = ensureBool(v);
         },
         enumerable: false,
         configurable: true
@@ -415,10 +441,23 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets whether resizing is enabled for this column.
         */
         get: function () {
-            return this.i.j2;
+            return this.i.kc;
+        },
+        set: function (v) {
+            this.i.kc = ensureBool(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxDataGridColumnComponent.prototype, "isSortingEnabled", {
+        /**
+         * Gets or sets whether sorting is enabled for this column from the UI.
+        */
+        get: function () {
+            return this.i.kd;
         },
         set: function (v) {
-            this.i.j2 = ensureBool(v);
+            this.i.kd = ensureBool(v);
         },
         enumerable: false,
         configurable: true
@@ -428,10 +467,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets whether or not a column is hidden from the grid
         */
         get: function () {
-            return this.i.j1;
+            return this.i.kb;
         },
         set: function (v) {
-            this.i.j1 = ensureBool(v);
+            this.i.kb = ensureBool(v);
         },
         enumerable: false,
         configurable: true
@@ -441,10 +480,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets if a column should be removed from the grid when it is fully hidden
         */
         get: function () {
-            return this.i.j5;
+            return this.i.kg;
         },
         set: function (v) {
-            this.i.j5 = ensureBool(v);
+            this.i.kg = ensureBool(v);
         },
         enumerable: false,
         configurable: true
@@ -454,10 +493,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets the current sort direction (None, Ascending, Descending) for this column.
         */
         get: function () {
-            return this.i.hu;
+            return this.i.hv;
         },
         set: function (v) {
-            this.i.hu = ensureEnum(ColumnSortDirection_$type, v);
+            this.i.hv = ensureEnum(ColumnSortDirection_$type, v);
         },
         enumerable: false,
         configurable: true
@@ -467,10 +506,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the current fixed position for this column.
         */
         get: function () {
-            return this.i.is;
+            return this.i.it;
         },
         set: function (v) {
-            this.i.is = ensureEnum(PinnedPositions_$type, v);
+            this.i.it = ensureEnum(PinnedPositions_$type, v);
         },
         enumerable: false,
         configurable: true
@@ -480,10 +519,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets the actual column options icon alignment for this column.
         */
         get: function () {
-            return this.i.hl;
+            return this.i.hm;
         },
         set: function (v) {
-            this.i.hl = ensureEnum(ColumnOptionsIconAlignment_$type, v);
+            this.i.hm = ensureEnum(ColumnOptionsIconAlignment_$type, v);
         },
         enumerable: false,
         configurable: true
@@ -493,10 +532,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets whether the column options icon is aligned opposite the header text or not.
         */
         get: function () {
-            return this.i.hm;
+            return this.i.hn;
         },
         set: function (v) {
-            this.i.hm = ensureEnum(ColumnOptionsIconAlignment_$type, v);
+            this.i.hn = ensureEnum(ColumnOptionsIconAlignment_$type, v);
         },
         enumerable: false,
         configurable: true
@@ -506,10 +545,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets the actual column options icon color for this column.
         */
         get: function () {
-            return brushToString(this.i.p3);
+            return brushToString(this.i.re);
         },
         set: function (v) {
-            this.i.p3 = stringToBrush(v);
+            this.i.re = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -519,10 +558,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the column options icon color for this column.
         */
         get: function () {
-            return brushToString(this.i.qe);
+            return brushToString(this.i.rt);
         },
         set: function (v) {
-            this.i.qe = stringToBrush(v);
+            this.i.rt = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -532,10 +571,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets how the column option icon will behave in the column header.
         */
         get: function () {
-            return this.i.hq;
+            return this.i.hr;
         },
         set: function (v) {
-            this.i.hq = ensureEnum(ColumnOptionsIconBehavior_$type, v);
+            this.i.hr = ensureEnum(ColumnOptionsIconBehavior_$type, v);
         },
         enumerable: false,
         configurable: true
@@ -545,10 +584,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets how the column option icon will behave in the column header.
         */
         get: function () {
-            return this.i.hp;
+            return this.i.hq;
         },
         set: function (v) {
-            this.i.hp = ensureEnum(ColumnOptionsIconBehavior_$type, v);
+            this.i.hq = ensureEnum(ColumnOptionsIconBehavior_$type, v);
         },
         enumerable: false,
         configurable: true
@@ -558,10 +597,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets the actual state of the column options for this column.
         */
         get: function () {
-            return this.i.jn;
+            return this.i.jx;
         },
         set: function (v) {
-            this.i.jn = ensureBool(v);
+            this.i.jx = ensureBool(v);
         },
         enumerable: false,
         configurable: true
@@ -572,10 +611,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * then it will be disabled for the column regardless of what this is set to.
         */
         get: function () {
-            return this.i.jv;
+            return this.i.j5;
         },
         set: function (v) {
-            this.i.jv = ensureBool(v);
+            this.i.j5 = ensureBool(v);
         },
         enumerable: false,
         configurable: true
@@ -585,10 +624,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets the actual state of summaries menu in the column options for this column.
         */
         get: function () {
-            return this.i.jp;
+            return this.i.jz;
         },
         set: function (v) {
-            this.i.jp = ensureBool(v);
+            this.i.jz = ensureBool(v);
         },
         enumerable: false,
         configurable: true
@@ -598,10 +637,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets whether to show the summaries option in the column options menu for this column.
         */
         get: function () {
-            return this.i.jx;
+            return this.i.j7;
         },
         set: function (v) {
-            this.i.jx = ensureBool(v);
+            this.i.j7 = ensureBool(v);
         },
         enumerable: false,
         configurable: true
@@ -611,10 +650,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets the actual state of grouping menu in the column options for this column.
         */
         get: function () {
-            return this.i.jo;
+            return this.i.jy;
         },
         set: function (v) {
-            this.i.jo = ensureBool(v);
+            this.i.jy = ensureBool(v);
         },
         enumerable: false,
         configurable: true
@@ -624,10 +663,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets whether to show the grouping option in the column options menu for this column.
         */
         get: function () {
-            return this.i.jw;
+            return this.i.j6;
         },
         set: function (v) {
-            this.i.jw = ensureBool(v);
+            this.i.j6 = ensureBool(v);
         },
         enumerable: false,
         configurable: true
@@ -637,10 +676,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the column options dropdown background color.
         */
         get: function () {
-            return brushToString(this.i.p0);
+            return brushToString(this.i.q9);
         },
         set: function (v) {
-            this.i.p0 = stringToBrush(v);
+            this.i.q9 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -650,10 +689,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the column options dropdown background color.
         */
         get: function () {
-            return brushToString(this.i.qb);
+            return brushToString(this.i.ro);
         },
         set: function (v) {
-            this.i.qb = stringToBrush(v);
+            this.i.ro = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -663,10 +702,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the text color for text inside the column options menu.
         */
         get: function () {
-            return brushToString(this.i.p5);
+            return brushToString(this.i.rg);
         },
         set: function (v) {
-            this.i.p5 = stringToBrush(v);
+            this.i.rg = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -676,10 +715,88 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the text color for text inside the column options menu.
         */
         get: function () {
-            return brushToString(this.i.qg);
+            return brushToString(this.i.rv);
+        },
+        set: function (v) {
+            this.i.rv = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxDataGridColumnComponent.prototype, "columnOptionsTextStyle", {
+        /**
+         * Gets or sets the font settings for text inside the column options menu.
+        */
+        get: function () {
+            if (this.i.jd == null) {
+                return null;
+            }
+            return this.i.jd.fontString;
+        },
+        set: function (v) {
+            var fi = new FontInfo();
+            fi.fontString = v;
+            this.i.jd = fi;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxDataGridColumnComponent.prototype, "actualColumnOptionsHoverBackgroundColor", {
+        get: function () {
+            return brushToString(this.i.rd);
+        },
+        set: function (v) {
+            this.i.rd = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxDataGridColumnComponent.prototype, "columnOptionsHoverBackgroundColor", {
+        get: function () {
+            return brushToString(this.i.rs);
         },
         set: function (v) {
-            this.i.qg = stringToBrush(v);
+            this.i.rs = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxDataGridColumnComponent.prototype, "actualColumnOptionsToolTipBackgroundColor", {
+        get: function () {
+            return brushToString(this.i.rh);
+        },
+        set: function (v) {
+            this.i.rh = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxDataGridColumnComponent.prototype, "columnOptionsToolTipBackgroundColor", {
+        get: function () {
+            return brushToString(this.i.rw);
+        },
+        set: function (v) {
+            this.i.rw = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxDataGridColumnComponent.prototype, "actualColumnOptionsHighlightColor", {
+        get: function () {
+            return brushToString(this.i.rc);
+        },
+        set: function (v) {
+            this.i.rc = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxDataGridColumnComponent.prototype, "columnOptionsHighlightColor", {
+        get: function () {
+            return brushToString(this.i.rr);
+        },
+        set: function (v) {
+            this.i.rr = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -689,10 +806,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the color of separators inside the column options menu.
         */
         get: function () {
-            return brushToString(this.i.p4);
+            return brushToString(this.i.rf);
         },
         set: function (v) {
-            this.i.p4 = stringToBrush(v);
+            this.i.rf = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -702,10 +819,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the color of separators inside the column options menu.
         */
         get: function () {
-            return brushToString(this.i.qf);
+            return brushToString(this.i.ru);
         },
         set: function (v) {
-            this.i.qf = stringToBrush(v);
+            this.i.ru = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -715,10 +832,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the background color for group headers inside the column options menu.
         */
         get: function () {
-            return brushToString(this.i.p1);
+            return brushToString(this.i.ra);
         },
         set: function (v) {
-            this.i.p1 = stringToBrush(v);
+            this.i.ra = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -728,10 +845,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the background color for group headers inside the column options menu.
         */
         get: function () {
-            return brushToString(this.i.qc);
+            return brushToString(this.i.rp);
         },
         set: function (v) {
-            this.i.qc = stringToBrush(v);
+            this.i.rp = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -741,10 +858,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets the actual text color for group headers inside the column options menu.
         */
         get: function () {
-            return brushToString(this.i.p2);
+            return brushToString(this.i.rb);
         },
         set: function (v) {
-            this.i.p2 = stringToBrush(v);
+            this.i.rb = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -754,30 +871,65 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the text color for group headers inside the column options menu.
         */
         get: function () {
-            return brushToString(this.i.qd);
+            return brushToString(this.i.rq);
         },
         set: function (v) {
-            this.i.qd = stringToBrush(v);
+            this.i.rq = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxDataGridColumnComponent.prototype, "columnOptionsGroupHeaderTextStyle", {
+        get: function () {
+            if (this.i.jc == null) {
+                return null;
+            }
+            return this.i.jc.fontString;
+        },
+        set: function (v) {
+            var fi = new FontInfo();
+            fi.fontString = v;
+            this.i.jc = fi;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxDataGridColumnComponent.prototype, "actualColumnOptionsAccentColor", {
         get: function () {
-            return brushToString(this.i.pz);
+            return brushToString(this.i.q8);
         },
         set: function (v) {
-            this.i.pz = stringToBrush(v);
+            this.i.q8 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxDataGridColumnComponent.prototype, "columnOptionsAccentColor", {
         get: function () {
-            return brushToString(this.i.qa);
+            return brushToString(this.i.rn);
+        },
+        set: function (v) {
+            this.i.rn = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxDataGridColumnComponent.prototype, "actualColumnOptionsRowHeight", {
+        get: function () {
+            return this.i.lc;
+        },
+        set: function (v) {
+            this.i.lc = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxDataGridColumnComponent.prototype, "columnOptionsRowHeight", {
+        get: function () {
+            return this.i.ld;
         },
         set: function (v) {
-            this.i.qa = stringToBrush(v);
+            this.i.ld = +v;
         },
         enumerable: false,
         configurable: true
@@ -787,10 +939,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets if the column is editable.
         */
         get: function () {
-            return this.i.jy;
+            return this.i.j8;
         },
         set: function (v) {
-            this.i.jy = ensureBool(v);
+            this.i.j8 = ensureBool(v);
         },
         enumerable: false,
         configurable: true
@@ -800,10 +952,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the text color used for deleted rows.
         */
         get: function () {
-            return brushToString(this.i.qh);
+            return brushToString(this.i.rx);
         },
         set: function (v) {
-            this.i.qh = stringToBrush(v);
+            this.i.rx = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -813,10 +965,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets the actual text color used for deleted rows.
         */
         get: function () {
-            return brushToString(this.i.p6);
+            return brushToString(this.i.ri);
         },
         set: function (v) {
-            this.i.p6 = stringToBrush(v);
+            this.i.ri = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -826,10 +978,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the opacity to use for unsaved edited cell values.
         */
         get: function () {
-            return this.i.kh;
+            return this.i.ks;
         },
         set: function (v) {
-            this.i.kh = +v;
+            this.i.ks = +v;
         },
         enumerable: false,
         configurable: true
@@ -839,10 +991,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets the actual opacity for unsaved edited cell values.
         */
         get: function () {
-            return this.i.kg;
+            return this.i.kr;
         },
         set: function (v) {
-            this.i.kg = +v;
+            this.i.kr = +v;
         },
         enumerable: false,
         configurable: true
@@ -870,15 +1022,15 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets the actual font style used for unsaved cell edits.
         */
         get: function () {
-            if (this.i.i4 == null) {
+            if (this.i.jb == null) {
                 return null;
             }
-            return this.i.i4.fontString;
+            return this.i.jb.fontString;
         },
         set: function (v) {
             var fi = new FontInfo();
             fi.fontString = v;
-            this.i.i4 = fi;
+            this.i.jb = fi;
         },
         enumerable: false,
         configurable: true
@@ -888,10 +1040,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets if and how cell merging is performed for this field.
         */
         get: function () {
-            return this.i.io;
+            return this.i.ip;
         },
         set: function (v) {
-            this.i.io = ensureEnum(MergedCellMode_$type, v);
+            this.i.ip = ensureEnum(MergedCellMode_$type, v);
         },
         enumerable: false,
         configurable: true
@@ -901,10 +1053,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets how cells are evaluated for merging.
         */
         get: function () {
-            return this.i.ik;
+            return this.i.il;
         },
         set: function (v) {
-            this.i.ik = ensureEnum(MergedCellEvaluationCriteria_$type, v);
+            this.i.il = ensureEnum(MergedCellEvaluationCriteria_$type, v);
         },
         enumerable: false,
         configurable: true
@@ -914,10 +1066,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the vertical alignment to use for the merged cell content.
         */
         get: function () {
-            return this.i.hd;
+            return this.i.he;
         },
         set: function (v) {
-            this.i.hd = ensureEnum(CellContentVerticalAlignment_$type, v);
+            this.i.he = ensureEnum(CellContentVerticalAlignment_$type, v);
         },
         enumerable: false,
         configurable: true
@@ -927,10 +1079,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the amount of left padding to use for the cell content for this column.
         */
         get: function () {
-            return this.i.k0;
+            return this.i.lf;
         },
         set: function (v) {
-            this.i.k0 = +v;
+            this.i.lf = +v;
         },
         enumerable: false,
         configurable: true
@@ -940,10 +1092,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the amount of top padding to use for the cell content for this column.
         */
         get: function () {
-            return this.i.k2;
+            return this.i.lh;
         },
         set: function (v) {
-            this.i.k2 = +v;
+            this.i.lh = +v;
         },
         enumerable: false,
         configurable: true
@@ -953,10 +1105,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the amount of right padding to use for the cell content of this column.
         */
         get: function () {
-            return this.i.k1;
+            return this.i.lg;
         },
         set: function (v) {
-            this.i.k1 = +v;
+            this.i.lg = +v;
         },
         enumerable: false,
         configurable: true
@@ -966,10 +1118,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the amount of bottom padding to use for the cell content of this column.
         */
         get: function () {
-            return this.i.kz;
+            return this.i.le;
         },
         set: function (v) {
-            this.i.kz = +v;
+            this.i.le = +v;
         },
         enumerable: false,
         configurable: true
@@ -979,10 +1131,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets whether UI filters are case sensitive or not.
         */
         get: function () {
-            return this.i.h6;
+            return this.i.h7;
         },
         set: function (v) {
-            this.i.h6 = ensureEnum(FilterComparisonType_$type, v);
+            this.i.h7 = ensureEnum(FilterComparisonType_$type, v);
         },
         enumerable: false,
         configurable: true
@@ -994,7 +1146,7 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
         get: function () {
             if (this._filterOperands === null) {
                 var coll = new IgxGridFilterOperandsCollection();
-                var innerColl = this.i.ie;
+                var innerColl = this.i.ig;
                 if (!innerColl) {
                     innerColl = new GridFilterOperandsCollection_internal();
                 }
@@ -1010,7 +1162,7 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
             var coll = new IgxGridFilterOperandsCollection();
             this._filterOperands = coll._fromOuter(v);
             var syncColl = new SyncableObservableCollection$1(FilterOperand.$type);
-            var innerColl = this.i.ie;
+            var innerColl = this.i.ig;
             if (!innerColl) {
                 innerColl = new GridFilterOperandsCollection_internal();
             }
@@ -1026,10 +1178,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the text to display in the suffix area of cells in this column.
         */
         get: function () {
-            return this.i.n6;
+            return this.i.o0;
         },
         set: function (v) {
-            this.i.n6 = v;
+            this.i.o0 = v;
         },
         enumerable: false,
         configurable: true
@@ -1039,10 +1191,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the color of the text in the suffix area of the cells in this column.
         */
         get: function () {
-            return brushToString(this.i.qp);
+            return brushToString(this.i.r6);
         },
         set: function (v) {
-            this.i.qp = stringToBrush(v);
+            this.i.r6 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -1070,10 +1222,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the icon to use in the suffix area of the cells in this column.
         */
         get: function () {
-            return this.i.ny;
+            return this.i.os;
         },
         set: function (v) {
-            this.i.ny = v;
+            this.i.os = v;
         },
         enumerable: false,
         configurable: true
@@ -1083,10 +1235,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the icon to use in the suffix area of the cells in this column.
         */
         get: function () {
-            return this.i.nv;
+            return this.i.op;
         },
         set: function (v) {
-            this.i.nv = v;
+            this.i.op = v;
         },
         enumerable: false,
         configurable: true
@@ -1096,10 +1248,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the stroke color of suffix icon.
         */
         get: function () {
-            return brushToString(this.i.qo);
+            return brushToString(this.i.r5);
         },
         set: function (v) {
-            this.i.qo = stringToBrush(v);
+            this.i.r5 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -1109,10 +1261,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the fill color of suffix icon.
         */
         get: function () {
-            return brushToString(this.i.qn);
+            return brushToString(this.i.r4);
         },
         set: function (v) {
-            this.i.qn = stringToBrush(v);
+            this.i.r4 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -1122,10 +1274,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the suffix icon's viewbox x coordinate.
         */
         get: function () {
-            return this.i.kk;
+            return this.i.kv;
         },
         set: function (v) {
-            this.i.kk = +v;
+            this.i.kv = +v;
         },
         enumerable: false,
         configurable: true
@@ -1135,10 +1287,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the suffix icon's viewbox y coordinate.
         */
         get: function () {
-            return this.i.kl;
+            return this.i.kw;
         },
         set: function (v) {
-            this.i.kl = +v;
+            this.i.kw = +v;
         },
         enumerable: false,
         configurable: true
@@ -1148,10 +1300,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the suffix icon's viewbox width.
         */
         get: function () {
-            return this.i.km;
+            return this.i.kx;
         },
         set: function (v) {
-            this.i.km = +v;
+            this.i.kx = +v;
         },
         enumerable: false,
         configurable: true
@@ -1161,10 +1313,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the suffix icon's viewbox height.
         */
         get: function () {
-            return this.i.kj;
+            return this.i.ku;
         },
         set: function (v) {
-            this.i.kj = +v;
+            this.i.ku = +v;
         },
         enumerable: false,
         configurable: true
@@ -1174,10 +1326,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the suffix margin.
         */
         get: function () {
-            return this.i.kn;
+            return this.i.ky;
         },
         set: function (v) {
-            this.i.kn = +v;
+            this.i.ky = +v;
         },
         enumerable: false,
         configurable: true
@@ -1187,10 +1339,10 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the text decoration to apply to cells in this column.
         */
         get: function () {
-            return this.i.iu;
+            return this.i.iv;
         },
         set: function (v) {
-            this.i.iu = ensureEnum(TextCellDecoration_$type, v);
+            this.i.iv = ensureEnum(TextCellDecoration_$type, v);
         },
         enumerable: false,
         configurable: true
@@ -1227,18 +1379,18 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
     
     */
     IgxDataGridColumnComponent.prototype.getUniqueKey = function () {
-        var iv = this.i.mw();
+        var iv = this.i.no();
         return (iv);
     };
     IgxDataGridColumnComponent.prototype.setNamedHeaderValue = function (valueName, animationType, value) {
-        this.i.oo(valueName, ensureEnum(CellPropertyAnimationType_$type, animationType), value);
+        this.i.pi(valueName, ensureEnum(CellPropertyAnimationType_$type, animationType), value);
     };
     /**
      * Returns if the column has named header values.
     
     */
     IgxDataGridColumnComponent.prototype.hasNamedHeaderValues = function () {
-        var iv = this.i.js();
+        var iv = this.i.j2();
         return (iv);
     };
     /**
@@ -1247,7 +1399,7 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
     * @param valueName  * The named value to check for.
     */
     IgxDataGridColumnComponent.prototype.hasNamedHeaderValue = function (valueName) {
-        var iv = this.i.jr(valueName);
+        var iv = this.i.j1(valueName);
         return (iv);
     };
     /**
@@ -1256,7 +1408,7 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
     * @param valueName  * The named header value to remove.
     */
     IgxDataGridColumnComponent.prototype.removeNamedHeaderValue = function (valueName) {
-        this.i.on(valueName);
+        this.i.ph(valueName);
     };
     /**
      * Gets the value of a named header value for this column by name.
@@ -1264,11 +1416,11 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
     * @param valueName  * Name of the named header value to retrieve.
     */
     IgxDataGridColumnComponent.prototype.getNamedHeaderValue = function (valueName) {
-        var iv = this.i.le(valueName);
+        var iv = this.i.lt(valueName);
         return (iv);
     };
     IgxDataGridColumnComponent.prototype.applyCustomFilter = function (filterID, index, value) {
-        this.i.oe(filterID, index, value);
+        this.i.o8(filterID, index, value);
     };
     IgxDataGridColumnComponent.prototype.getDesiredToolbarActions = function () {
         var iv = this.i.getDesiredToolbarActions();
@@ -1333,7 +1485,7 @@ var IgxDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
         configurable: true
     });
     IgxDataGridColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxDataGridColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    IgxDataGridColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: IgxDataGridColumnComponent, selector: "ng-component", inputs: { paddingLeft: "paddingLeft", paddingTop: "paddingTop", paddingRight: "paddingRight", paddingBottom: "paddingBottom", name: "name", field: "field", headerText: "headerText", actualHeaderText: "actualHeaderText", selectedBackground: "selectedBackground", actualSelectedBackground: "actualSelectedBackground", rowHoverBackground: "rowHoverBackground", actualHoverBackground: "actualHoverBackground", rowHoverTextColor: "rowHoverTextColor", actualRowHoverTextColor: "actualRowHoverTextColor", animationSettings: "animationSettings", width: "width", minWidth: "minWidth", isFromMarkup: "isFromMarkup", isAutoGenerated: "isAutoGenerated", filter: "filter", filterExpression: "filterExpression", header: "header", isFilteringEnabled: "isFilteringEnabled", isResizingEnabled: "isResizingEnabled", isHidden: "isHidden", shouldRemoveWhenHidden: "shouldRemoveWhenHidden", sortDirection: "sortDirection", pinned: "pinned", actualColumnOptionsIconAlignment: "actualColumnOptionsIconAlignment", columnOptionsIconAlignment: "columnOptionsIconAlignment", actualColumnOptionsIconColor: "actualColumnOptionsIconColor", columnOptionsIconColor: "columnOptionsIconColor", columnOptionsIconBehavior: "columnOptionsIconBehavior", actualColumnOptionsIconBehavior: "actualColumnOptionsIconBehavior", actualIsColumnOptionsEnabled: "actualIsColumnOptionsEnabled", isColumnOptionsEnabled: "isColumnOptionsEnabled", actualIsColumnOptionsSummariesEnabled: "actualIsColumnOptionsSummariesEnabled", isColumnOptionsSummariesEnabled: "isColumnOptionsSummariesEnabled", actualIsColumnOptionsGroupingEnabled: "actualIsColumnOptionsGroupingEnabled", isColumnOptionsGroupingEnabled: "isColumnOptionsGroupingEnabled", actualColumnOptionsBackground: "actualColumnOptionsBackground", columnOptionsBackground: "columnOptionsBackground", actualColumnOptionsTextColor: "actualColumnOptionsTextColor", columnOptionsTextColor: "columnOptionsTextColor", actualColumnOptionsSeparatorColor: "actualColumnOptionsSeparatorColor", columnOptionsSeparatorColor: "columnOptionsSeparatorColor", actualColumnOptionsGroupHeaderBackground: "actualColumnOptionsGroupHeaderBackground", columnOptionsGroupHeaderBackground: "columnOptionsGroupHeaderBackground", actualColumnOptionsGroupHeaderTextColor: "actualColumnOptionsGroupHeaderTextColor", columnOptionsGroupHeaderTextColor: "columnOptionsGroupHeaderTextColor", actualColumnOptionsAccentColor: "actualColumnOptionsAccentColor", columnOptionsAccentColor: "columnOptionsAccentColor", isEditable: "isEditable", deletedTextColor: "deletedTextColor", actualDeletedTextColor: "actualDeletedTextColor", editOpacity: "editOpacity", actualEditOpacity: "actualEditOpacity", textEditStyle: "textEditStyle", actualEditFontInfo: "actualEditFontInfo", mergedCellMode: "mergedCellMode", mergedCellEvaluationCriteria: "mergedCellEvaluationCriteria", mergedCellVerticalAlignment: "mergedCellVerticalAlignment", mergedCellPaddingLeft: "mergedCellPaddingLeft", mergedCellPaddingTop: "mergedCellPaddingTop", mergedCellPaddingRight: "mergedCellPaddingRight", mergedCellPaddingBottom: "mergedCellPaddingBottom", filterComparisonType: "filterComparisonType", filterOperands: "filterOperands", suffixText: "suffixText", suffixTextColor: "suffixTextColor", suffixTextStyle: "suffixTextStyle", suffixIconName: "suffixIconName", suffixIconCollectionName: "suffixIconCollectionName", suffixIconStroke: "suffixIconStroke", suffixIconFill: "suffixIconFill", suffixIconViewBoxLeft: "suffixIconViewBoxLeft", suffixIconViewBoxTop: "suffixIconViewBoxTop", suffixIconViewBoxWidth: "suffixIconViewBoxWidth", suffixIconViewBoxHeight: "suffixIconViewBoxHeight", suffixMargin: "suffixMargin", textDecoration: "textDecoration" }, outputs: { formatCell: "formatCell", actualHeaderTextChange: "actualHeaderTextChange" }, usesInheritance: true, ngImport: i0, template: "", isInline: true });
+    IgxDataGridColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: IgxDataGridColumnComponent, selector: "ng-component", inputs: { paddingLeft: "paddingLeft", paddingTop: "paddingTop", paddingRight: "paddingRight", paddingBottom: "paddingBottom", name: "name", field: "field", headerText: "headerText", actualHeaderText: "actualHeaderText", selectedBackground: "selectedBackground", actualSelectedBackground: "actualSelectedBackground", selectedTextColor: "selectedTextColor", actualSelectedTextColor: "actualSelectedTextColor", rowHoverBackground: "rowHoverBackground", actualHoverBackground: "actualHoverBackground", rowHoverTextColor: "rowHoverTextColor", actualRowHoverTextColor: "actualRowHoverTextColor", animationSettings: "animationSettings", width: "width", minWidth: "minWidth", isFromMarkup: "isFromMarkup", isAutoGenerated: "isAutoGenerated", filter: "filter", filterExpression: "filterExpression", header: "header", isFilteringEnabled: "isFilteringEnabled", isResizingEnabled: "isResizingEnabled", isSortingEnabled: "isSortingEnabled", isHidden: "isHidden", shouldRemoveWhenHidden: "shouldRemoveWhenHidden", sortDirection: "sortDirection", pinned: "pinned", actualColumnOptionsIconAlignment: "actualColumnOptionsIconAlignment", columnOptionsIconAlignment: "columnOptionsIconAlignment", actualColumnOptionsIconColor: "actualColumnOptionsIconColor", columnOptionsIconColor: "columnOptionsIconColor", columnOptionsIconBehavior: "columnOptionsIconBehavior", actualColumnOptionsIconBehavior: "actualColumnOptionsIconBehavior", actualIsColumnOptionsEnabled: "actualIsColumnOptionsEnabled", isColumnOptionsEnabled: "isColumnOptionsEnabled", actualIsColumnOptionsSummariesEnabled: "actualIsColumnOptionsSummariesEnabled", isColumnOptionsSummariesEnabled: "isColumnOptionsSummariesEnabled", actualIsColumnOptionsGroupingEnabled: "actualIsColumnOptionsGroupingEnabled", isColumnOptionsGroupingEnabled: "isColumnOptionsGroupingEnabled", actualColumnOptionsBackground: "actualColumnOptionsBackground", columnOptionsBackground: "columnOptionsBackground", actualColumnOptionsTextColor: "actualColumnOptionsTextColor", columnOptionsTextColor: "columnOptionsTextColor", columnOptionsTextStyle: "columnOptionsTextStyle", actualColumnOptionsHoverBackgroundColor: "actualColumnOptionsHoverBackgroundColor", columnOptionsHoverBackgroundColor: "columnOptionsHoverBackgroundColor", actualColumnOptionsToolTipBackgroundColor: "actualColumnOptionsToolTipBackgroundColor", columnOptionsToolTipBackgroundColor: "columnOptionsToolTipBackgroundColor", actualColumnOptionsHighlightColor: "actualColumnOptionsHighlightColor", columnOptionsHighlightColor: "columnOptionsHighlightColor", actualColumnOptionsSeparatorColor: "actualColumnOptionsSeparatorColor", columnOptionsSeparatorColor: "columnOptionsSeparatorColor", actualColumnOptionsGroupHeaderBackground: "actualColumnOptionsGroupHeaderBackground", columnOptionsGroupHeaderBackground: "columnOptionsGroupHeaderBackground", actualColumnOptionsGroupHeaderTextColor: "actualColumnOptionsGroupHeaderTextColor", columnOptionsGroupHeaderTextColor: "columnOptionsGroupHeaderTextColor", columnOptionsGroupHeaderTextStyle: "columnOptionsGroupHeaderTextStyle", actualColumnOptionsAccentColor: "actualColumnOptionsAccentColor", columnOptionsAccentColor: "columnOptionsAccentColor", actualColumnOptionsRowHeight: "actualColumnOptionsRowHeight", columnOptionsRowHeight: "columnOptionsRowHeight", isEditable: "isEditable", deletedTextColor: "deletedTextColor", actualDeletedTextColor: "actualDeletedTextColor", editOpacity: "editOpacity", actualEditOpacity: "actualEditOpacity", textEditStyle: "textEditStyle", actualEditFontInfo: "actualEditFontInfo", mergedCellMode: "mergedCellMode", mergedCellEvaluationCriteria: "mergedCellEvaluationCriteria", mergedCellVerticalAlignment: "mergedCellVerticalAlignment", mergedCellPaddingLeft: "mergedCellPaddingLeft", mergedCellPaddingTop: "mergedCellPaddingTop", mergedCellPaddingRight: "mergedCellPaddingRight", mergedCellPaddingBottom: "mergedCellPaddingBottom", filterComparisonType: "filterComparisonType", filterOperands: "filterOperands", suffixText: "suffixText", suffixTextColor: "suffixTextColor", suffixTextStyle: "suffixTextStyle", suffixIconName: "suffixIconName", suffixIconCollectionName: "suffixIconCollectionName", suffixIconStroke: "suffixIconStroke", suffixIconFill: "suffixIconFill", suffixIconViewBoxLeft: "suffixIconViewBoxLeft", suffixIconViewBoxTop: "suffixIconViewBoxTop", suffixIconViewBoxWidth: "suffixIconViewBoxWidth", suffixIconViewBoxHeight: "suffixIconViewBoxHeight", suffixMargin: "suffixMargin", textDecoration: "textDecoration" }, outputs: { formatCell: "formatCell", actualHeaderTextChange: "actualHeaderTextChange" }, usesInheritance: true, ngImport: i0, template: "", isInline: true });
     return IgxDataGridColumnComponent;
 }(IgxDefinitionBaseComponent));
 export { IgxDataGridColumnComponent };
@@ -1362,6 +1514,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }], actualSelectedBackground: [{
                 type: Input
+            }], selectedTextColor: [{
+                type: Input
+            }], actualSelectedTextColor: [{
+                type: Input
             }], rowHoverBackground: [{
                 type: Input
             }], actualHoverBackground: [{
@@ -1390,6 +1546,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }], isResizingEnabled: [{
                 type: Input
+            }], isSortingEnabled: [{
+                type: Input
             }], isHidden: [{
                 type: Input
             }], shouldRemoveWhenHidden: [{
@@ -1430,6 +1588,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }], columnOptionsTextColor: [{
                 type: Input
+            }], columnOptionsTextStyle: [{
+                type: Input
+            }], actualColumnOptionsHoverBackgroundColor: [{
+                type: Input
+            }], columnOptionsHoverBackgroundColor: [{
+                type: Input
+            }], actualColumnOptionsToolTipBackgroundColor: [{
+                type: Input
+            }], columnOptionsToolTipBackgroundColor: [{
+                type: Input
+            }], actualColumnOptionsHighlightColor: [{
+                type: Input
+            }], columnOptionsHighlightColor: [{
+                type: Input
             }], actualColumnOptionsSeparatorColor: [{
                 type: Input
             }], columnOptionsSeparatorColor: [{
@@ -1442,10 +1614,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }], columnOptionsGroupHeaderTextColor: [{
                 type: Input
+            }], columnOptionsGroupHeaderTextStyle: [{
+                type: Input
             }], actualColumnOptionsAccentColor: [{
                 type: Input
             }], columnOptionsAccentColor: [{
                 type: Input
+            }], actualColumnOptionsRowHeight: [{
+                type: Input
+            }], columnOptionsRowHeight: [{
+                type: Input
             }], isEditable: [{
                 type: Input
             }], deletedTextColor: [{