igniteui-webcomponents-data-grids 6.0.0 → 6.0.1-beta.1

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

@@ -12,6 +12,7 @@ import { MergedCellEvaluationCriteria_$type } from "./MergedCellEvaluationCriter
 import { CellContentVerticalAlignment_$type } from "./CellContentVerticalAlignment";
 import { FilterComparisonType_$type } from "./FilterComparisonType";
 import { IgcGridFilterOperandsCollection } from "./igc-grid-filter-operands-collection";
+import { IgcFormatCellEventArgs } from "./igc-format-cell-event-args";
 import { IgcDefinitionBaseComponent } from "./igc-definition-base-component";
 import { getAllPropertyNames, toSpinal, brushToString, stringToBrush, ensureBool, ensureEnum, enumToString } from "igniteui-webcomponents-core";
 import { ColumnWidth as ColumnWidth_internal } from "./ColumnWidth";
@@ -27,6 +28,8 @@ var IgcDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
     function IgcDataGridColumnComponent() {
         var _this = _super.call(this) || this;
         _this._filterOperands = null;
+        _this._formatCell = null;
+        _this._formatCell_wrapped = null;
         _this._actualHeaderTextChange = null;
         _this._actualHeaderTextChange_wrapped = null;
         return _this;
@@ -89,11 +92,11 @@ var IgcDataGridColumnComponent = /** @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.kk;
+            return this.i.kl;
         },
         set: function (v) {
-            this.i.kk = +v;
-            this._a("paddingLeft", this.i.kk);
+            this.i.kl = +v;
+            this._a("paddingLeft", this.i.kl);
         },
         enumerable: false,
         configurable: true
@@ -103,11 +106,11 @@ var IgcDataGridColumnComponent = /** @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.km;
+            return this.i.kn;
         },
         set: function (v) {
-            this.i.km = +v;
-            this._a("paddingTop", this.i.km);
+            this.i.kn = +v;
+            this._a("paddingTop", this.i.kn);
         },
         enumerable: false,
         configurable: true
@@ -117,11 +120,11 @@ var IgcDataGridColumnComponent = /** @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.kl;
+            return this.i.km;
         },
         set: function (v) {
-            this.i.kl = +v;
-            this._a("paddingRight", this.i.kl);
+            this.i.km = +v;
+            this._a("paddingRight", this.i.km);
         },
         enumerable: false,
         configurable: true
@@ -131,11 +134,11 @@ var IgcDataGridColumnComponent = /** @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.kj;
+            return this.i.kk;
         },
         set: function (v) {
-            this.i.kj = +v;
-            this._a("paddingBottom", this.i.kj);
+            this.i.kk = +v;
+            this._a("paddingBottom", this.i.kk);
         },
         enumerable: false,
         configurable: true
@@ -145,10 +148,10 @@ var IgcDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets an unique name of the Column
         */
         get: function () {
-            return this.i.mf;
+            return this.i.mg;
         },
         set: function (v) {
-            this.i.mf = v;
+            this.i.mg = v;
         },
         enumerable: false,
         configurable: true
@@ -158,10 +161,10 @@ var IgcDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the key used for the column binding
         */
         get: function () {
-            return this.i.lo;
+            return this.i.lp;
         },
         set: function (v) {
-            this.i.lo = v;
+            this.i.lp = v;
         },
         enumerable: false,
         configurable: true
@@ -171,10 +174,10 @@ var IgcDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the text displayed in the header of the column
         */
         get: function () {
-            return this.i.lv;
+            return this.i.lw;
         },
         set: function (v) {
-            this.i.lv = v;
+            this.i.lw = v;
         },
         enumerable: false,
         configurable: true
@@ -184,10 +187,10 @@ var IgcDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets the actual text displayed in the header of the column
         */
         get: function () {
-            return this.i.k3;
+            return this.i.k4;
         },
         set: function (v) {
-            this.i.k3 = v;
+            this.i.k4 = v;
         },
         enumerable: false,
         configurable: true
@@ -197,11 +200,11 @@ var IgcDataGridColumnComponent = /** @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.n2);
+            return brushToString(this.i.n4);
         },
         set: function (v) {
-            this.i.n2 = stringToBrush(v);
-            this._a("selectedBackground", brushToString(this.i.n2));
+            this.i.n4 = stringToBrush(v);
+            this._a("selectedBackground", brushToString(this.i.n4));
         },
         enumerable: false,
         configurable: true
@@ -211,11 +214,11 @@ var IgcDataGridColumnComponent = /** @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.nv);
+            return brushToString(this.i.nx);
         },
         set: function (v) {
-            this.i.nv = stringToBrush(v);
-            this._a("actualSelectedBackground", brushToString(this.i.nv));
+            this.i.nx = stringToBrush(v);
+            this._a("actualSelectedBackground", brushToString(this.i.nx));
         },
         enumerable: false,
         configurable: true
@@ -225,11 +228,11 @@ var IgcDataGridColumnComponent = /** @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.n0);
+            return brushToString(this.i.n2);
         },
         set: function (v) {
-            this.i.n0 = stringToBrush(v);
-            this._a("rowHoverBackground", brushToString(this.i.n0));
+            this.i.n2 = stringToBrush(v);
+            this._a("rowHoverBackground", brushToString(this.i.n2));
         },
         enumerable: false,
         configurable: true
@@ -239,11 +242,11 @@ var IgcDataGridColumnComponent = /** @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.nt);
+            return brushToString(this.i.nv);
         },
         set: function (v) {
-            this.i.nt = stringToBrush(v);
-            this._a("actualHoverBackground", brushToString(this.i.nt));
+            this.i.nv = stringToBrush(v);
+            this._a("actualHoverBackground", brushToString(this.i.nv));
         },
         enumerable: false,
         configurable: true
@@ -253,11 +256,11 @@ var IgcDataGridColumnComponent = /** @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.n1);
+            return brushToString(this.i.n3);
         },
         set: function (v) {
-            this.i.n1 = stringToBrush(v);
-            this._a("rowHoverTextColor", brushToString(this.i.n1));
+            this.i.n3 = stringToBrush(v);
+            this._a("rowHoverTextColor", brushToString(this.i.n3));
         },
         enumerable: false,
         configurable: true
@@ -267,11 +270,11 @@ var IgcDataGridColumnComponent = /** @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.nu);
+            return brushToString(this.i.nw);
         },
         set: function (v) {
-            this.i.nu = stringToBrush(v);
-            this._a("actualRowHoverTextColor", brushToString(this.i.nu));
+            this.i.nw = stringToBrush(v);
+            this._a("actualRowHoverTextColor", brushToString(this.i.nw));
         },
         enumerable: false,
         configurable: true
@@ -281,7 +284,7 @@ var IgcDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the animation settings to use for this column.
         */
         get: function () {
-            var r = this.i.h6;
+            var r = this.i.h7;
             if (r == null) {
                 return null;
             }
@@ -300,7 +303,7 @@ var IgcDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
             return r.externalObject;
         },
         set: function (v) {
-            v == null ? this.i.h6 = null : this.i.h6 = v.i;
+            v == null ? this.i.h7 = null : this.i.h7 = v.i;
         },
         enumerable: false,
         configurable: true
@@ -345,11 +348,11 @@ var IgcDataGridColumnComponent = /** @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.j0;
+            return this.i.j1;
         },
         set: function (v) {
-            this.i.j0 = +v;
-            this._a("minWidth", this.i.j0);
+            this.i.j1 = +v;
+            this._a("minWidth", this.i.j1);
         },
         enumerable: false,
         configurable: true
@@ -359,11 +362,11 @@ var IgcDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets whether this column was projected from markup/templates and is constrained.
         */
         get: function () {
-            return this.i.jn;
+            return this.i.jo;
         },
         set: function (v) {
-            this.i.jn = ensureBool(v);
-            this._a("isFromMarkup", this.i.jn);
+            this.i.jo = ensureBool(v);
+            this._a("isFromMarkup", this.i.jo);
         },
         enumerable: false,
         configurable: true
@@ -373,11 +376,11 @@ var IgcDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets whether this column was auto generated.
         */
         get: function () {
-            return this.i.jh;
+            return this.i.ji;
         },
         set: function (v) {
-            this.i.jh = ensureBool(v);
-            this._a("isAutoGenerated", this.i.jh);
+            this.i.ji = ensureBool(v);
+            this._a("isAutoGenerated", this.i.ji);
         },
         enumerable: false,
         configurable: true
@@ -439,11 +442,11 @@ var IgcDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets whether filtering is enabled for this column.
         */
         get: function () {
-            return this.i.jm;
+            return this.i.jn;
         },
         set: function (v) {
-            this.i.jm = ensureBool(v);
-            this._a("isFilteringEnabled", this.i.jm);
+            this.i.jn = ensureBool(v);
+            this._a("isFilteringEnabled", this.i.jn);
         },
         enumerable: false,
         configurable: true
@@ -453,11 +456,11 @@ var IgcDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets whether resizing is enabled for this column.
         */
         get: function () {
-            return this.i.jp;
+            return this.i.jq;
         },
         set: function (v) {
-            this.i.jp = ensureBool(v);
-            this._a("isResizingEnabled", this.i.jp);
+            this.i.jq = ensureBool(v);
+            this._a("isResizingEnabled", this.i.jq);
         },
         enumerable: false,
         configurable: true
@@ -467,11 +470,11 @@ var IgcDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets whether or not a column is hidden from the grid
         */
         get: function () {
-            return this.i.jo;
+            return this.i.jp;
         },
         set: function (v) {
-            this.i.jo = ensureBool(v);
-            this._a("isHidden", this.i.jo);
+            this.i.jp = ensureBool(v);
+            this._a("isHidden", this.i.jp);
         },
         enumerable: false,
         configurable: true
@@ -481,11 +484,11 @@ var IgcDataGridColumnComponent = /** @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.js;
+            return this.i.jt;
         },
         set: function (v) {
-            this.i.js = ensureBool(v);
-            this._a("shouldRemoveWhenHidden", this.i.js);
+            this.i.jt = ensureBool(v);
+            this._a("shouldRemoveWhenHidden", this.i.jt);
         },
         enumerable: false,
         configurable: true
@@ -509,11 +512,11 @@ var IgcDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the current fixed position for this column.
         */
         get: function () {
-            return this.i.il;
+            return this.i.im;
         },
         set: function (v) {
-            this.i.il = ensureEnum(PinnedPositions_$type, v);
-            this._a("pinned", enumToString(PinnedPositions_$type, this.i.il));
+            this.i.im = ensureEnum(PinnedPositions_$type, v);
+            this._a("pinned", enumToString(PinnedPositions_$type, this.i.im));
         },
         enumerable: false,
         configurable: true
@@ -551,11 +554,11 @@ var IgcDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets the actual column options icon color for this column.
         */
         get: function () {
-            return brushToString(this.i.nr);
+            return brushToString(this.i.nt);
         },
         set: function (v) {
-            this.i.nr = stringToBrush(v);
-            this._a("actualColumnOptionsIconColor", brushToString(this.i.nr));
+            this.i.nt = stringToBrush(v);
+            this._a("actualColumnOptionsIconColor", brushToString(this.i.nt));
         },
         enumerable: false,
         configurable: true
@@ -565,11 +568,11 @@ var IgcDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the column options icon color for this column.
         */
         get: function () {
-            return brushToString(this.i.nw);
+            return brushToString(this.i.ny);
         },
         set: function (v) {
-            this.i.nw = stringToBrush(v);
-            this._a("columnOptionsIconColor", brushToString(this.i.nw));
+            this.i.ny = stringToBrush(v);
+            this._a("columnOptionsIconColor", brushToString(this.i.ny));
         },
         enumerable: false,
         configurable: true
@@ -607,11 +610,11 @@ var IgcDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets the actual state of the column options for this column.
         */
         get: function () {
-            return this.i.ja;
+            return this.i.jb;
         },
         set: function (v) {
-            this.i.ja = ensureBool(v);
-            this._a("actualIsColumnOptionsEnabled", this.i.ja);
+            this.i.jb = ensureBool(v);
+            this._a("actualIsColumnOptionsEnabled", this.i.jb);
         },
         enumerable: false,
         configurable: true
@@ -622,11 +625,11 @@ var IgcDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * then it will be disabled for the column regardless of what this is set to.
         */
         get: function () {
-            return this.i.ji;
+            return this.i.jj;
         },
         set: function (v) {
-            this.i.ji = ensureBool(v);
-            this._a("isColumnOptionsEnabled", this.i.ji);
+            this.i.jj = ensureBool(v);
+            this._a("isColumnOptionsEnabled", this.i.jj);
         },
         enumerable: false,
         configurable: true
@@ -636,11 +639,11 @@ var IgcDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets the actual state of summaries menu in the column options for this column.
         */
         get: function () {
-            return this.i.jc;
+            return this.i.jd;
         },
         set: function (v) {
-            this.i.jc = ensureBool(v);
-            this._a("actualIsColumnOptionsSummariesEnabled", this.i.jc);
+            this.i.jd = ensureBool(v);
+            this._a("actualIsColumnOptionsSummariesEnabled", this.i.jd);
         },
         enumerable: false,
         configurable: true
@@ -650,11 +653,11 @@ var IgcDataGridColumnComponent = /** @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.jk;
+            return this.i.jl;
         },
         set: function (v) {
-            this.i.jk = ensureBool(v);
-            this._a("isColumnOptionsSummariesEnabled", this.i.jk);
+            this.i.jl = ensureBool(v);
+            this._a("isColumnOptionsSummariesEnabled", this.i.jl);
         },
         enumerable: false,
         configurable: true
@@ -664,11 +667,11 @@ var IgcDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets the actual state of grouping menu in the column options for this column.
         */
         get: function () {
-            return this.i.jb;
+            return this.i.jc;
         },
         set: function (v) {
-            this.i.jb = ensureBool(v);
-            this._a("actualIsColumnOptionsGroupingEnabled", this.i.jb);
+            this.i.jc = ensureBool(v);
+            this._a("actualIsColumnOptionsGroupingEnabled", this.i.jc);
         },
         enumerable: false,
         configurable: true
@@ -678,11 +681,11 @@ var IgcDataGridColumnComponent = /** @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.jj;
+            return this.i.jk;
         },
         set: function (v) {
-            this.i.jj = ensureBool(v);
-            this._a("isColumnOptionsGroupingEnabled", this.i.jj);
+            this.i.jk = ensureBool(v);
+            this._a("isColumnOptionsGroupingEnabled", this.i.jk);
         },
         enumerable: false,
         configurable: true
@@ -692,11 +695,11 @@ var IgcDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets if the column is editable.
         */
         get: function () {
-            return this.i.jl;
+            return this.i.jm;
         },
         set: function (v) {
-            this.i.jl = ensureBool(v);
-            this._a("isEditable", this.i.jl);
+            this.i.jm = ensureBool(v);
+            this._a("isEditable", this.i.jm);
         },
         enumerable: false,
         configurable: true
@@ -706,11 +709,11 @@ var IgcDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the text color used for deleted rows.
         */
         get: function () {
-            return brushToString(this.i.nx);
+            return brushToString(this.i.nz);
         },
         set: function (v) {
-            this.i.nx = stringToBrush(v);
-            this._a("deletedTextColor", brushToString(this.i.nx));
+            this.i.nz = stringToBrush(v);
+            this._a("deletedTextColor", brushToString(this.i.nz));
         },
         enumerable: false,
         configurable: true
@@ -720,11 +723,11 @@ var IgcDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets the actual text color used for deleted rows.
         */
         get: function () {
-            return brushToString(this.i.ns);
+            return brushToString(this.i.nu);
         },
         set: function (v) {
-            this.i.ns = stringToBrush(v);
-            this._a("actualDeletedTextColor", brushToString(this.i.ns));
+            this.i.nu = stringToBrush(v);
+            this._a("actualDeletedTextColor", brushToString(this.i.nu));
         },
         enumerable: false,
         configurable: true
@@ -734,11 +737,11 @@ var IgcDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the opacity to use for unsaved edited cell values.
         */
         get: function () {
-            return this.i.jz;
+            return this.i.j0;
         },
         set: function (v) {
-            this.i.jz = +v;
-            this._a("editOpacity", this.i.jz);
+            this.i.j0 = +v;
+            this._a("editOpacity", this.i.j0);
         },
         enumerable: false,
         configurable: true
@@ -748,11 +751,11 @@ var IgcDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets the actual opacity for unsaved edited cell values.
         */
         get: function () {
-            return this.i.jy;
+            return this.i.jz;
         },
         set: function (v) {
-            this.i.jy = +v;
-            this._a("actualEditOpacity", this.i.jy);
+            this.i.jz = +v;
+            this._a("actualEditOpacity", this.i.jz);
         },
         enumerable: false,
         configurable: true
@@ -781,16 +784,16 @@ var IgcDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets the actual font style used for unsaved cell edits.
         */
         get: function () {
-            if (this.i.is == null) {
+            if (this.i.it == null) {
                 return null;
             }
-            return this.i.is.fontString;
+            return this.i.it.fontString;
         },
         set: function (v) {
             var fi = new FontInfo();
             fi.fontString = v;
-            this.i.is = fi;
-            this._a("actualEditFontInfo", this.i.is != null ? this.i.is.fontString : "");
+            this.i.it = fi;
+            this._a("actualEditFontInfo", this.i.it != null ? this.i.it.fontString : "");
         },
         enumerable: false,
         configurable: true
@@ -800,11 +803,11 @@ var IgcDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets if and how cell merging is performed for this field.
         */
         get: function () {
-            return this.i.ih;
+            return this.i.ii;
         },
         set: function (v) {
-            this.i.ih = ensureEnum(MergedCellMode_$type, v);
-            this._a("mergedCellMode", enumToString(MergedCellMode_$type, this.i.ih));
+            this.i.ii = ensureEnum(MergedCellMode_$type, v);
+            this._a("mergedCellMode", enumToString(MergedCellMode_$type, this.i.ii));
         },
         enumerable: false,
         configurable: true
@@ -814,11 +817,11 @@ var IgcDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets how cells are evaluated for merging.
         */
         get: function () {
-            return this.i.id;
+            return this.i.ie;
         },
         set: function (v) {
-            this.i.id = ensureEnum(MergedCellEvaluationCriteria_$type, v);
-            this._a("mergedCellEvaluationCriteria", enumToString(MergedCellEvaluationCriteria_$type, this.i.id));
+            this.i.ie = ensureEnum(MergedCellEvaluationCriteria_$type, v);
+            this._a("mergedCellEvaluationCriteria", enumToString(MergedCellEvaluationCriteria_$type, this.i.ie));
         },
         enumerable: false,
         configurable: true
@@ -842,11 +845,11 @@ var IgcDataGridColumnComponent = /** @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.kd;
+            return this.i.ke;
         },
         set: function (v) {
-            this.i.kd = +v;
-            this._a("mergedCellPaddingLeft", this.i.kd);
+            this.i.ke = +v;
+            this._a("mergedCellPaddingLeft", this.i.ke);
         },
         enumerable: false,
         configurable: true
@@ -856,11 +859,11 @@ var IgcDataGridColumnComponent = /** @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.kf;
+            return this.i.kg;
         },
         set: function (v) {
-            this.i.kf = +v;
-            this._a("mergedCellPaddingTop", this.i.kf);
+            this.i.kg = +v;
+            this._a("mergedCellPaddingTop", this.i.kg);
         },
         enumerable: false,
         configurable: true
@@ -870,11 +873,11 @@ var IgcDataGridColumnComponent = /** @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.ke;
+            return this.i.kf;
         },
         set: function (v) {
-            this.i.ke = +v;
-            this._a("mergedCellPaddingRight", this.i.ke);
+            this.i.kf = +v;
+            this._a("mergedCellPaddingRight", this.i.kf);
         },
         enumerable: false,
         configurable: true
@@ -884,11 +887,11 @@ var IgcDataGridColumnComponent = /** @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.kc;
+            return this.i.kd;
         },
         set: function (v) {
-            this.i.kc = +v;
-            this._a("mergedCellPaddingBottom", this.i.kc);
+            this.i.kd = +v;
+            this._a("mergedCellPaddingBottom", this.i.kd);
         },
         enumerable: false,
         configurable: true
@@ -914,7 +917,7 @@ var IgcDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
         get: function () {
             if (this._filterOperands === null) {
                 var coll = new IgcGridFilterOperandsCollection();
-                var innerColl = this.i.h8;
+                var innerColl = this.i.h9;
                 if (!innerColl) {
                     innerColl = new GridFilterOperandsCollection_internal();
                 }
@@ -930,7 +933,7 @@ var IgcDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
             var coll = new IgcGridFilterOperandsCollection();
             this._filterOperands = coll._fromOuter(v);
             var syncColl = new SyncableObservableCollection$1(FilterOperand.$type);
-            var innerColl = this.i.h8;
+            var innerColl = this.i.h9;
             if (!innerColl) {
                 innerColl = new GridFilterOperandsCollection_internal();
             }
@@ -973,18 +976,18 @@ var IgcDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
     
     */
     IgcDataGridColumnComponent.prototype.getUniqueKey = function () {
-        var iv = this.i.lt();
+        var iv = this.i.lu();
         return (iv);
     };
     IgcDataGridColumnComponent.prototype.setNamedHeaderValue = function (valueName, animationType, value) {
-        this.i.m2(valueName, (animationType == null ? null : animationType), value);
+        this.i.m4(valueName, (animationType == null ? null : animationType), value);
     };
     /**
      * Returns if the column has named header values.
     
     */
     IgcDataGridColumnComponent.prototype.hasNamedHeaderValues = function () {
-        var iv = this.i.jf();
+        var iv = this.i.jg();
         return (iv);
     };
     /**
@@ -993,7 +996,7 @@ var IgcDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
     * @param valueName  * The named value to check for.
     */
     IgcDataGridColumnComponent.prototype.hasNamedHeaderValue = function (valueName) {
-        var iv = this.i.je(valueName);
+        var iv = this.i.jf(valueName);
         return (iv);
     };
     /**
@@ -1002,7 +1005,7 @@ var IgcDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
     * @param valueName  * The named header value to remove.
     */
     IgcDataGridColumnComponent.prototype.removeNamedHeaderValue = function (valueName) {
-        this.i.m1(valueName);
+        this.i.m3(valueName);
     };
     /**
      * Gets the value of a named header value for this column by name.
@@ -1010,11 +1013,11 @@ var IgcDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
     * @param valueName  * Name of the named header value to retrieve.
     */
     IgcDataGridColumnComponent.prototype.getNamedHeaderValue = function (valueName) {
-        var iv = this.i.kr(valueName);
+        var iv = this.i.ks(valueName);
         return (iv);
     };
     IgcDataGridColumnComponent.prototype.applyCustomFilter = function (filterID, index, value) {
-        this.i.mu(filterID, index, value);
+        this.i.mw(filterID, index, value);
     };
     IgcDataGridColumnComponent.prototype.getDesiredToolbarActions = function () {
         var iv = this.i.getDesiredToolbarActions();
@@ -1032,6 +1035,37 @@ var IgcDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
     IgcDataGridColumnComponent.prototype.removeCommandStateChangedListener = function (listener) {
         this.i.removeCommandStateChangedListener(listener);
     };
+    Object.defineProperty(IgcDataGridColumnComponent.prototype, "formatCell", {
+        /**
+         * Called when cell text is being formatted.
+        */
+        get: function () {
+            return this._formatCell;
+        },
+        set: function (ev) {
+            var _this = this;
+            if (this._formatCell_wrapped !== null) {
+                this.i.formatCell = delegateRemove(this.i.formatCell, this._formatCell_wrapped);
+                this._formatCell_wrapped = null;
+                this._formatCell = null;
+            }
+            this._formatCell = ev;
+            this._formatCell_wrapped = function (o, e) {
+                var outerArgs = new IgcFormatCellEventArgs();
+                outerArgs._provideImplementation(e);
+                if (_this.beforeFormatCell) {
+                    _this.beforeFormatCell(_this, outerArgs);
+                }
+                if (_this._formatCell) {
+                    _this._formatCell(_this, outerArgs);
+                }
+            };
+            this.i.formatCell = delegateCombine(this.i.formatCell, this._formatCell_wrapped);
+            ;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(IgcDataGridColumnComponent.prototype, "actualHeaderTextChange", {
         get: function () {
             return this._actualHeaderTextChange;
@@ -1046,7 +1080,7 @@ var IgcDataGridColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
             this._actualHeaderTextChange = ev;
             this._actualHeaderTextChange_wrapped = function (o, e) {
                 var ext = _this.actualHeaderText;
-                if (e.propertyName == 'K3') {
+                if (e.propertyName == 'K4') {
                     if (_this.beforeActualHeaderTextChange) {
                         _this.beforeActualHeaderTextChange(_this, ext);
                     }