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

package/esm2015/lib/igx-column-chooser-component.js

@@ -242,7 +242,7 @@ export let IgxColumnChooserComponent = /*@__PURE__*/ (() => {
     IgxColumnChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: IgxColumnChooserComponent, selector: "igx-column-chooser", inputs: { height: "height", width: "width", targetGrid: "targetGrid", title: "title", titleStyle: "titleStyle", titleColor: "titleColor", filterPlaceholderText: "filterPlaceholderText", baseTheme: "baseTheme", density: "density", backgroundColor: "backgroundColor" }, host: { classAttribute: "ig-column-chooser igx-column-chooser" }, providers: [], viewQueries: [{ propertyName: "_checkboxList", first: true, predicate: ["checkboxList"], descendants: true, read: IgxCheckboxListComponent, static: true }, { propertyName: "_chooserContainer", first: true, predicate: ["chooserContainer"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: `<div #chooserContainer>
                 <span></span>
                 <igx-checkbox-list #checkboxList></igx-checkbox-list>
-                </div>`, isInline: true, styles: ["\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t}\n\t"], components: [{ type: i1.IgxCheckboxListComponent, selector: "igx-checkbox-list", inputs: ["height", "width", "dataSource", "keys", "primaryKey", "dataMemberPath", "dataLegendTarget", "subtitleMemberPath", "propertyTypeMemberPath", "selectedMemberPath", "filterPlaceholderText", "searchInputType", "rowHeight", "cellTextStyle", "indexType", "baseTheme", "density", "searchIconColor", "searchBackgroundColor", "labelClickTriggersChange", "searchTextColor", "searchBorderColor", "searchTextStyle", "checkboxTickColor", "checkboxCheckedBackgroundColor", "checkboxUncheckedBackgroundColor", "checkboxCheckedBorderColor", "checkboxUncheckedBorderColor", "checkboxCornerRadius", "scrollbarStyle", "scrollbarBackground", "selectAllCaption", "selectAllCaptionTextColor", "actualSelectAllCaptionTextColor", "showSelectAll", "backgroundColor", "rowHoverBackgroundColor", "textColor", "showFilter", "isRowHoverEnabled", "checkboxAlignedRight"], outputs: ["selectedKeyAdded", "selectedKeyRemoved", "checkedChanged", "labelClicked", "indexTypeChanged", "keysCleared", "selectAllCheckboxChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+                </div>`, isInline: true, styles: ["\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t}\n\t"], components: [{ type: i1.IgxCheckboxListComponent, selector: "igx-checkbox-list", inputs: ["height", "width", "dataSource", "keys", "primaryKey", "dataMemberPath", "dataLegendTarget", "subtitleMemberPath", "propertyTypeMemberPath", "selectedMemberPath", "filterPlaceholderText", "searchInputType", "rowHeight", "cellTextStyle", "indexType", "baseTheme", "density", "searchIconColor", "searchBackgroundColor", "labelClickTriggersChange", "searchTextColor", "searchBorderColor", "searchFocusBorderColor", "searchTextStyle", "checkboxTickColor", "checkboxCheckedBackgroundColor", "checkboxUncheckedBackgroundColor", "checkboxCheckedBorderColor", "checkboxUncheckedBorderColor", "checkboxCornerRadius", "scrollbarStyle", "scrollbarBackground", "selectAllCaption", "selectAllCaptionTextColor", "actualSelectAllCaptionTextColor", "showSelectAll", "backgroundColor", "rowHoverBackgroundColor", "textColor", "showFilter", "isRowHoverEnabled", "checkboxAlignedRight"], outputs: ["selectedKeyAdded", "selectedKeyRemoved", "checkedChanged", "labelClicked", "indexTypeChanged", "keysCleared", "selectAllCheckboxChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
     return IgxColumnChooserComponent;
 })();
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxColumnChooserComponent, decorators: [{

package/esm2015/lib/igx-column-pinning-component.js

@@ -241,7 +241,7 @@ export let IgxColumnPinningComponent = /*@__PURE__*/ (() => {
     IgxColumnPinningComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: IgxColumnPinningComponent, selector: "igx-column-pinning", inputs: { height: "height", width: "width", targetGrid: "targetGrid", title: "title", titleStyle: "titleStyle", titleColor: "titleColor", filterPlaceholderText: "filterPlaceholderText", baseTheme: "baseTheme", density: "density", backgroundColor: "backgroundColor" }, host: { classAttribute: "ig-column-pinning igx-column-pinning" }, providers: [], viewQueries: [{ propertyName: "_checkboxList", first: true, predicate: ["checkboxList"], descendants: true, read: IgxCheckboxListComponent, static: true }, { propertyName: "_pinningContainer", first: true, predicate: ["pinningContainer"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: `<div #pinningContainer>
                 <span></span>
                 <igx-checkbox-list #checkboxList ></igx-checkbox-list>
-                </div>`, isInline: true, styles: ["\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t}\n\t"], components: [{ type: i1.IgxCheckboxListComponent, selector: "igx-checkbox-list", inputs: ["height", "width", "dataSource", "keys", "primaryKey", "dataMemberPath", "dataLegendTarget", "subtitleMemberPath", "propertyTypeMemberPath", "selectedMemberPath", "filterPlaceholderText", "searchInputType", "rowHeight", "cellTextStyle", "indexType", "baseTheme", "density", "searchIconColor", "searchBackgroundColor", "labelClickTriggersChange", "searchTextColor", "searchBorderColor", "searchTextStyle", "checkboxTickColor", "checkboxCheckedBackgroundColor", "checkboxUncheckedBackgroundColor", "checkboxCheckedBorderColor", "checkboxUncheckedBorderColor", "checkboxCornerRadius", "scrollbarStyle", "scrollbarBackground", "selectAllCaption", "selectAllCaptionTextColor", "actualSelectAllCaptionTextColor", "showSelectAll", "backgroundColor", "rowHoverBackgroundColor", "textColor", "showFilter", "isRowHoverEnabled", "checkboxAlignedRight"], outputs: ["selectedKeyAdded", "selectedKeyRemoved", "checkedChanged", "labelClicked", "indexTypeChanged", "keysCleared", "selectAllCheckboxChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+                </div>`, isInline: true, styles: ["\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t}\n\t"], components: [{ type: i1.IgxCheckboxListComponent, selector: "igx-checkbox-list", inputs: ["height", "width", "dataSource", "keys", "primaryKey", "dataMemberPath", "dataLegendTarget", "subtitleMemberPath", "propertyTypeMemberPath", "selectedMemberPath", "filterPlaceholderText", "searchInputType", "rowHeight", "cellTextStyle", "indexType", "baseTheme", "density", "searchIconColor", "searchBackgroundColor", "labelClickTriggersChange", "searchTextColor", "searchBorderColor", "searchFocusBorderColor", "searchTextStyle", "checkboxTickColor", "checkboxCheckedBackgroundColor", "checkboxUncheckedBackgroundColor", "checkboxCheckedBorderColor", "checkboxUncheckedBorderColor", "checkboxCornerRadius", "scrollbarStyle", "scrollbarBackground", "selectAllCaption", "selectAllCaptionTextColor", "actualSelectAllCaptionTextColor", "showSelectAll", "backgroundColor", "rowHoverBackgroundColor", "textColor", "showFilter", "isRowHoverEnabled", "checkboxAlignedRight"], outputs: ["selectedKeyAdded", "selectedKeyRemoved", "checkedChanged", "labelClicked", "indexTypeChanged", "keysCleared", "selectAllCheckboxChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
     return IgxColumnPinningComponent;
 })();
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxColumnPinningComponent, decorators: [{

package/esm2015/lib/igx-combo-box-column-component.js

@@ -38,50 +38,50 @@ export let IgxComboBoxColumnComponent = /*@__PURE__*/ (() => {
          * Gets the actual data source that is being used by the combo. If a collection was provided for the combobox data, an implicit LocalDataSource is created, and this is available via this property.
         */
         get actualDataSource() {
-            return this.i.r9;
+            return this.i.sg;
         }
         set actualDataSource(v) {
-            this.i.r9 = v;
+            this.i.sg = v;
         }
         /**
          * Gets or sets the ComboBox data source.
         */
         get dataSource() {
-            return this.i.sa;
+            return this.i.sh;
         }
         set dataSource(v) {
-            this.i.sa = v;
+            this.i.sh = v;
         }
         /**
          * Gets or sets the ComboBox text field.
         */
         get textField() {
-            return this.i.se;
+            return this.i.sl;
         }
         set textField(v) {
-            this.i.se = v;
+            this.i.sl = v;
         }
         /**
          * Gets or sets the ComboBox value field.
         */
         get valueField() {
-            return this.i.sf;
+            return this.i.sm;
         }
         set valueField(v) {
-            this.i.sf = v;
+            this.i.sm = v;
         }
         /**
          * Gets or sets the ComboBox value field.
         */
         get valueMultiField() {
-            return this.i.r7;
+            return this.i.se;
         }
         set valueMultiField(v) {
             if (v && !Array.isArray(v) && typeof (v) == "string") {
                 const re = /\s*(?:,|\s|$)\s*/gm;
                 v = v.split(re);
             }
-            this.i.r7 = v;
+            this.i.se = v;
         }
     }
     IgxComboBoxColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxComboBoxColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });

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

@@ -94,109 +94,109 @@ export let IgxDataGridColumnComponent = /*@__PURE__*/ (() => {
          * Gets or sets an unique name of the Column
         */
         get name() {
-            return this.i.ob;
+            return this.i.od;
         }
         set name(v) {
-            this.i.ob = v;
+            this.i.od = v;
         }
         /**
          * Gets or sets the key used for the column binding
         */
         get field() {
-            return this.i.nj;
+            return this.i.nl;
         }
         set field(v) {
-            this.i.nj = v;
+            this.i.nl = v;
         }
         /**
          * Gets or sets the text displayed in the header of the column
         */
         get headerText() {
-            return this.i.nq;
+            return this.i.ns;
         }
         set headerText(v) {
-            this.i.nq = v;
+            this.i.ns = v;
         }
         /**
          * Gets the actual text displayed in the header of the column
         */
         get actualHeaderText() {
-            return this.i.ml;
+            return this.i.mm;
         }
         set actualHeaderText(v) {
-            this.i.ml = v;
+            this.i.mm = v;
         }
         /**
          * Gets or sets the background color to use for the cells when they are selected
         */
         get selectedBackground() {
-            return brushToString(this.i.r2);
+            return brushToString(this.i.r9);
         }
         set selectedBackground(v) {
-            this.i.r2 = stringToBrush(v);
+            this.i.r9 = stringToBrush(v);
         }
         /**
          * Gets the actual background color that is used for the cells when they are selected
         */
         get actualSelectedBackground() {
-            return brushToString(this.i.rl);
+            return brushToString(this.i.rr);
         }
         set actualSelectedBackground(v) {
-            this.i.rl = stringToBrush(v);
+            this.i.rr = stringToBrush(v);
         }
         /**
          * Gets or sets the text color to use for the cells when they are selected
         */
         get selectedTextColor() {
-            return brushToString(this.i.r3);
+            return brushToString(this.i.sa);
         }
         set selectedTextColor(v) {
-            this.i.r3 = stringToBrush(v);
+            this.i.sa = stringToBrush(v);
         }
         /**
          * Gets the actual text color that is used for the cells when they are selected
         */
         get actualSelectedTextColor() {
-            return brushToString(this.i.rm);
+            return brushToString(this.i.rs);
         }
         set actualSelectedTextColor(v) {
-            this.i.rm = stringToBrush(v);
+            this.i.rs = stringToBrush(v);
         }
         /**
          * Gets or sets the background color to use for the cells when the row is hovered.
         */
         get rowHoverBackground() {
-            return brushToString(this.i.r0);
+            return brushToString(this.i.r7);
         }
         set rowHoverBackground(v) {
-            this.i.r0 = stringToBrush(v);
+            this.i.r7 = stringToBrush(v);
         }
         /**
          * Gets the actual background color that is used for the cells when they are hovered.
         */
         get actualHoverBackground() {
-            return brushToString(this.i.rj);
+            return brushToString(this.i.rp);
         }
         set actualHoverBackground(v) {
-            this.i.rj = stringToBrush(v);
+            this.i.rp = stringToBrush(v);
         }
         /**
          * Gets or sets the text color to use for the cells when the row is hovered.
         */
         get rowHoverTextColor() {
-            return brushToString(this.i.r1);
+            return brushToString(this.i.r8);
         }
         set rowHoverTextColor(v) {
-            this.i.r1 = stringToBrush(v);
+            this.i.r8 = stringToBrush(v);
         }
         /**
          * Gets the actual text color that is used for the cells when they are hovered.
         */
         get actualRowHoverTextColor() {
-            return brushToString(this.i.rk);
+            return brushToString(this.i.rq);
         }
         set actualRowHoverTextColor(v) {
-            this.i.rk = stringToBrush(v);
+            this.i.rq = stringToBrush(v);
         }
         /**
          * Gets or sets the animation settings to use for this column.
@@ -406,19 +406,19 @@ export let IgxDataGridColumnComponent = /*@__PURE__*/ (() => {
          * Gets the actual column options icon color for this column.
         */
         get actualColumnOptionsIconColor() {
-            return brushToString(this.i.re);
+            return brushToString(this.i.rj);
         }
         set actualColumnOptionsIconColor(v) {
-            this.i.re = stringToBrush(v);
+            this.i.rj = stringToBrush(v);
         }
         /**
          * Gets or sets the column options icon color for this column.
         */
         get columnOptionsIconColor() {
-            return brushToString(this.i.rt);
+            return brushToString(this.i.rz);
         }
         set columnOptionsIconColor(v) {
-            this.i.rt = stringToBrush(v);
+            this.i.rz = stringToBrush(v);
         }
         /**
          * Gets or sets how the column option icon will behave in the column header.
@@ -497,37 +497,37 @@ export let IgxDataGridColumnComponent = /*@__PURE__*/ (() => {
          * Gets or sets the column options dropdown background color.
         */
         get actualColumnOptionsBackground() {
-            return brushToString(this.i.q9);
+            return brushToString(this.i.re);
         }
         set actualColumnOptionsBackground(v) {
-            this.i.q9 = stringToBrush(v);
+            this.i.re = stringToBrush(v);
         }
         /**
          * Gets or sets the column options dropdown background color.
         */
         get columnOptionsBackground() {
-            return brushToString(this.i.ro);
+            return brushToString(this.i.ru);
         }
         set columnOptionsBackground(v) {
-            this.i.ro = stringToBrush(v);
+            this.i.ru = stringToBrush(v);
         }
         /**
          * Gets or sets the text color for text inside the column options menu.
         */
         get actualColumnOptionsTextColor() {
-            return brushToString(this.i.rg);
+            return brushToString(this.i.rl);
         }
         set actualColumnOptionsTextColor(v) {
-            this.i.rg = stringToBrush(v);
+            this.i.rl = stringToBrush(v);
         }
         /**
          * Gets or sets the text color for text inside the column options menu.
         */
         get columnOptionsTextColor() {
-            return brushToString(this.i.rv);
+            return brushToString(this.i.r1);
         }
         set columnOptionsTextColor(v) {
-            this.i.rv = stringToBrush(v);
+            this.i.r1 = stringToBrush(v);
         }
         /**
          * Gets or sets the font settings for text inside the column options menu.
@@ -544,94 +544,106 @@ export let IgxDataGridColumnComponent = /*@__PURE__*/ (() => {
             this.i.jd = fi;
         }
         get actualColumnOptionsHoverBackgroundColor() {
-            return brushToString(this.i.rd);
+            return brushToString(this.i.ri);
         }
         set actualColumnOptionsHoverBackgroundColor(v) {
-            this.i.rd = stringToBrush(v);
+            this.i.ri = stringToBrush(v);
         }
         get columnOptionsHoverBackgroundColor() {
-            return brushToString(this.i.rs);
+            return brushToString(this.i.ry);
         }
         set columnOptionsHoverBackgroundColor(v) {
-            this.i.rs = stringToBrush(v);
+            this.i.ry = stringToBrush(v);
         }
         get actualColumnOptionsToolTipBackgroundColor() {
-            return brushToString(this.i.rh);
+            return brushToString(this.i.rm);
         }
         set actualColumnOptionsToolTipBackgroundColor(v) {
-            this.i.rh = stringToBrush(v);
+            this.i.rm = stringToBrush(v);
         }
         get columnOptionsToolTipBackgroundColor() {
-            return brushToString(this.i.rw);
+            return brushToString(this.i.r2);
         }
         set columnOptionsToolTipBackgroundColor(v) {
-            this.i.rw = stringToBrush(v);
+            this.i.r2 = stringToBrush(v);
+        }
+        get actualColumnOptionsToolTipTextColor() {
+            return brushToString(this.i.rn);
+        }
+        set actualColumnOptionsToolTipTextColor(v) {
+            this.i.rn = stringToBrush(v);
+        }
+        get columnOptionsToolTipTextColor() {
+            return brushToString(this.i.r3);
+        }
+        set columnOptionsToolTipTextColor(v) {
+            this.i.r3 = stringToBrush(v);
         }
         get actualColumnOptionsHighlightColor() {
-            return brushToString(this.i.rc);
+            return brushToString(this.i.rh);
         }
         set actualColumnOptionsHighlightColor(v) {
-            this.i.rc = stringToBrush(v);
+            this.i.rh = stringToBrush(v);
         }
         get columnOptionsHighlightColor() {
-            return brushToString(this.i.rr);
+            return brushToString(this.i.rx);
         }
         set columnOptionsHighlightColor(v) {
-            this.i.rr = stringToBrush(v);
+            this.i.rx = stringToBrush(v);
         }
         /**
          * Gets or sets the color of separators inside the column options menu.
         */
         get actualColumnOptionsSeparatorColor() {
-            return brushToString(this.i.rf);
+            return brushToString(this.i.rk);
         }
         set actualColumnOptionsSeparatorColor(v) {
-            this.i.rf = stringToBrush(v);
+            this.i.rk = stringToBrush(v);
         }
         /**
          * Gets or sets the color of separators inside the column options menu.
         */
         get columnOptionsSeparatorColor() {
-            return brushToString(this.i.ru);
+            return brushToString(this.i.r0);
         }
         set columnOptionsSeparatorColor(v) {
-            this.i.ru = stringToBrush(v);
+            this.i.r0 = stringToBrush(v);
         }
         /**
          * Gets or sets the background color for group headers inside the column options menu.
         */
         get actualColumnOptionsGroupHeaderBackground() {
-            return brushToString(this.i.ra);
+            return brushToString(this.i.rf);
         }
         set actualColumnOptionsGroupHeaderBackground(v) {
-            this.i.ra = stringToBrush(v);
+            this.i.rf = stringToBrush(v);
         }
         /**
          * Gets or sets the background color for group headers inside the column options menu.
         */
         get columnOptionsGroupHeaderBackground() {
-            return brushToString(this.i.rp);
+            return brushToString(this.i.rv);
         }
         set columnOptionsGroupHeaderBackground(v) {
-            this.i.rp = stringToBrush(v);
+            this.i.rv = stringToBrush(v);
         }
         /**
          * Gets the actual text color for group headers inside the column options menu.
         */
         get actualColumnOptionsGroupHeaderTextColor() {
-            return brushToString(this.i.rb);
+            return brushToString(this.i.rg);
         }
         set actualColumnOptionsGroupHeaderTextColor(v) {
-            this.i.rb = stringToBrush(v);
+            this.i.rg = stringToBrush(v);
         }
         /**
          * Gets or sets the text color for group headers inside the column options menu.
         */
         get columnOptionsGroupHeaderTextColor() {
-            return brushToString(this.i.rq);
+            return brushToString(this.i.rw);
         }
         set columnOptionsGroupHeaderTextColor(v) {
-            this.i.rq = stringToBrush(v);
+            this.i.rw = stringToBrush(v);
         }
         get columnOptionsGroupHeaderTextStyle() {
             if (this.i.jc == null) {
@@ -645,16 +657,16 @@ export let IgxDataGridColumnComponent = /*@__PURE__*/ (() => {
             this.i.jc = fi;
         }
         get actualColumnOptionsAccentColor() {
-            return brushToString(this.i.q8);
+            return brushToString(this.i.rd);
         }
         set actualColumnOptionsAccentColor(v) {
-            this.i.q8 = stringToBrush(v);
+            this.i.rd = stringToBrush(v);
         }
         get columnOptionsAccentColor() {
-            return brushToString(this.i.rn);
+            return brushToString(this.i.rt);
         }
         set columnOptionsAccentColor(v) {
-            this.i.rn = stringToBrush(v);
+            this.i.rt = stringToBrush(v);
         }
         get actualColumnOptionsRowHeight() {
             return this.i.lc;
@@ -681,19 +693,19 @@ export let IgxDataGridColumnComponent = /*@__PURE__*/ (() => {
          * Gets or sets the text color used for deleted rows.
         */
         get deletedTextColor() {
-            return brushToString(this.i.rx);
+            return brushToString(this.i.r4);
         }
         set deletedTextColor(v) {
-            this.i.rx = stringToBrush(v);
+            this.i.r4 = stringToBrush(v);
         }
         /**
          * Gets the actual text color used for deleted rows.
         */
         get actualDeletedTextColor() {
-            return brushToString(this.i.ri);
+            return brushToString(this.i.ro);
         }
         set actualDeletedTextColor(v) {
-            this.i.ri = stringToBrush(v);
+            this.i.ro = stringToBrush(v);
         }
         /**
          * Gets or sets the opacity to use for unsaved edited cell values.
@@ -847,19 +859,19 @@ export let IgxDataGridColumnComponent = /*@__PURE__*/ (() => {
          * Gets or sets the text to display in the suffix area of cells in this column.
         */
         get suffixText() {
-            return this.i.o0;
+            return this.i.o2;
         }
         set suffixText(v) {
-            this.i.o0 = v;
+            this.i.o2 = v;
         }
         /**
          * Gets or sets the color of the text in the suffix area of the cells in this column.
         */
         get suffixTextColor() {
-            return brushToString(this.i.r6);
+            return brushToString(this.i.sd);
         }
         set suffixTextColor(v) {
-            this.i.r6 = stringToBrush(v);
+            this.i.sd = stringToBrush(v);
         }
         /**
          * Gets or sets the font of the suffix text.
@@ -879,37 +891,37 @@ export let IgxDataGridColumnComponent = /*@__PURE__*/ (() => {
          * Gets or sets the icon to use in the suffix area of the cells in this column.
         */
         get suffixIconName() {
-            return this.i.os;
+            return this.i.ou;
         }
         set suffixIconName(v) {
-            this.i.os = v;
+            this.i.ou = v;
         }
         /**
          * Gets or sets the icon to use in the suffix area of the cells in this column.
         */
         get suffixIconCollectionName() {
-            return this.i.op;
+            return this.i.or;
         }
         set suffixIconCollectionName(v) {
-            this.i.op = v;
+            this.i.or = v;
         }
         /**
          * Gets or sets the stroke color of suffix icon.
         */
         get suffixIconStroke() {
-            return brushToString(this.i.r5);
+            return brushToString(this.i.sc);
         }
         set suffixIconStroke(v) {
-            this.i.r5 = stringToBrush(v);
+            this.i.sc = stringToBrush(v);
         }
         /**
          * Gets or sets the fill color of suffix icon.
         */
         get suffixIconFill() {
-            return brushToString(this.i.r4);
+            return brushToString(this.i.sb);
         }
         set suffixIconFill(v) {
-            this.i.r4 = stringToBrush(v);
+            this.i.sb = stringToBrush(v);
         }
         /**
          * Gets or sets the suffix icon's viewbox x coordinate.
@@ -997,11 +1009,11 @@ export let IgxDataGridColumnComponent = /*@__PURE__*/ (() => {
         
         */
         getUniqueKey() {
-            let iv = this.i.no();
+            let iv = this.i.nq();
             return (iv);
         }
         setNamedHeaderValue(valueName, animationType, value) {
-            this.i.pi(valueName, ensureEnum(CellPropertyAnimationType_$type, animationType), value);
+            this.i.pk(valueName, ensureEnum(CellPropertyAnimationType_$type, animationType), value);
         }
         /**
          * Returns if the column has named header values.
@@ -1026,7 +1038,7 @@ export let IgxDataGridColumnComponent = /*@__PURE__*/ (() => {
         * @param valueName  * The named header value to remove.
         */
         removeNamedHeaderValue(valueName) {
-            this.i.ph(valueName);
+            this.i.pj(valueName);
         }
         /**
          * Gets the value of a named header value for this column by name.
@@ -1038,7 +1050,7 @@ export let IgxDataGridColumnComponent = /*@__PURE__*/ (() => {
             return (iv);
         }
         applyCustomFilter(filterID, index, value) {
-            this.i.o8(filterID, index, value);
+            this.i.pa(filterID, index, value);
         }
         getDesiredToolbarActions() {
             let iv = this.i.getDesiredToolbarActions();
@@ -1094,7 +1106,7 @@ export let IgxDataGridColumnComponent = /*@__PURE__*/ (() => {
         }
     }
     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", 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 });
+    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", actualColumnOptionsToolTipTextColor: "actualColumnOptionsToolTipTextColor", columnOptionsToolTipTextColor: "columnOptionsToolTipTextColor", 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;
 })();
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxDataGridColumnComponent, decorators: [{
@@ -1206,6 +1218,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }], columnOptionsToolTipBackgroundColor: [{
                 type: Input
+            }], actualColumnOptionsToolTipTextColor: [{
+                type: Input
+            }], columnOptionsToolTipTextColor: [{
+                type: Input
             }], actualColumnOptionsHighlightColor: [{
                 type: Input
             }], columnOptionsHighlightColor: [{