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

package/esm5/lib/igx-numeric-cell-info.js

@@ -28,10 +28,10 @@ var IgxNumericCellInfo = /** @class */ /*@__PURE__*/ (function (_super) {
          * Sets or gets the numeric value to use for the cell.
         */
         get: function () {
-            return this.i.n9;
+            return this.i.ok;
         },
         set: function (v) {
-            this.i.n9 = +v;
+            this.i.ok = +v;
         },
         enumerable: false,
         configurable: true
@@ -41,10 +41,10 @@ var IgxNumericCellInfo = /** @class */ /*@__PURE__*/ (function (_super) {
          * Sets or gets whether there is a decimal numeric value to use for the cell.
         */
         get: function () {
-            return this.i.n5;
+            return this.i.of;
         },
         set: function (v) {
-            this.i.n5 = ensureBool(v);
+            this.i.of = ensureBool(v);
         },
         enumerable: false,
         configurable: true
@@ -54,24 +54,24 @@ var IgxNumericCellInfo = /** @class */ /*@__PURE__*/ (function (_super) {
          * The format string to apply to the value
         */
         get: function () {
-            return this.i.o3;
+            return this.i.pf;
         },
         set: function (v) {
-            this.i.o3 = v;
+            this.i.pf = v;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxNumericCellInfo.prototype, "formatSpecifiers", {
         get: function () {
-            return this.i.n1;
+            return this.i.oa;
         },
         set: function (v) {
             if (v && !Array.isArray(v) && typeof (v) == "string") {
                 var re = /\s*(?:,|\s|$)\s*/gm;
                 v = v.split(re);
             }
-            this.i.n1 = v;
+            this.i.oa = v;
         },
         enumerable: false,
         configurable: true
@@ -81,10 +81,10 @@ var IgxNumericCellInfo = /** @class */ /*@__PURE__*/ (function (_super) {
          * The format options to apply to the value
         */
         get: function () {
-            return this.i.ov;
+            return this.i.o7;
         },
         set: function (v) {
-            this.i.ov = v;
+            this.i.o7 = v;
         },
         enumerable: false,
         configurable: true
@@ -94,10 +94,10 @@ var IgxNumericCellInfo = /** @class */ /*@__PURE__*/ (function (_super) {
          * Sets or gets the text prepended to a negative numeric value
         */
         get: function () {
-            return this.i.o9;
+            return this.i.pm;
         },
         set: function (v) {
-            this.i.o9 = v;
+            this.i.pm = v;
         },
         enumerable: false,
         configurable: true
@@ -107,10 +107,10 @@ var IgxNumericCellInfo = /** @class */ /*@__PURE__*/ (function (_super) {
          * Sets or gets the text prepended to a positive numeric value
         */
         get: function () {
-            return this.i.pe;
+            return this.i.pr;
         },
         set: function (v) {
-            this.i.pe = v;
+            this.i.pr = v;
         },
         enumerable: false,
         configurable: true
@@ -120,10 +120,10 @@ var IgxNumericCellInfo = /** @class */ /*@__PURE__*/ (function (_super) {
          * Sets or gets the text appended to a negative numeric value
         */
         get: function () {
-            return this.i.pb;
+            return this.i.po;
         },
         set: function (v) {
-            this.i.pb = v;
+            this.i.po = v;
         },
         enumerable: false,
         configurable: true
@@ -133,10 +133,10 @@ var IgxNumericCellInfo = /** @class */ /*@__PURE__*/ (function (_super) {
          * Sets or gets the text appended to a positive numeric value
         */
         get: function () {
-            return this.i.pg;
+            return this.i.pt;
         },
         set: function (v) {
-            this.i.pg = v;
+            this.i.pt = v;
         },
         enumerable: false,
         configurable: true
@@ -146,10 +146,10 @@ var IgxNumericCellInfo = /** @class */ /*@__PURE__*/ (function (_super) {
          * The maximum number of decimal places to display when formatting
         */
         get: function () {
-            return this.i.oh;
+            return this.i.ot;
         },
         set: function (v) {
-            this.i.oh = +v;
+            this.i.ot = +v;
         },
         enumerable: false,
         configurable: true
@@ -159,10 +159,10 @@ var IgxNumericCellInfo = /** @class */ /*@__PURE__*/ (function (_super) {
          * The minimum number of decimal places to display when formatting
         */
         get: function () {
-            return this.i.oj;
+            return this.i.ov;
         },
         set: function (v) {
-            this.i.oj = +v;
+            this.i.ov = +v;
         },
         enumerable: false,
         configurable: true
@@ -172,10 +172,10 @@ var IgxNumericCellInfo = /** @class */ /*@__PURE__*/ (function (_super) {
          * The minimum number of integer digits to display when formatting
         */
         get: function () {
-            return this.i.ol;
+            return this.i.ox;
         },
         set: function (v) {
-            this.i.ol = +v;
+            this.i.ox = +v;
         },
         enumerable: false,
         configurable: true
@@ -185,10 +185,23 @@ var IgxNumericCellInfo = /** @class */ /*@__PURE__*/ (function (_super) {
          * Sets or gets if the grouping separator is shown
         */
         get: function () {
-            return this.i.n7;
+            return this.i.oi;
+        },
+        set: function (v) {
+            this.i.oi = ensureBool(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxNumericCellInfo.prototype, "isPercent", {
+        /**
+         * Sets or gets if the value is treated as a percent and multiplied by 100 when formatted.
+        */
+        get: function () {
+            return this.i.oh;
         },
         set: function (v) {
-            this.i.n7 = ensureBool(v);
+            this.i.oh = ensureBool(v);
         },
         enumerable: false,
         configurable: true

package/esm5/lib/igx-numeric-column-component.js

@@ -46,10 +46,10 @@ var IgxNumericColumnComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the string to prefix a negative value. If FormatString is specificied this value is ignored.
         */
         get: function () {
-            return this.i.rl;
+            return this.i.tc;
         },
         set: function (v) {
-            this.i.rl = v;
+            this.i.tc = v;
         },
         enumerable: false,
         configurable: true
@@ -59,10 +59,10 @@ var IgxNumericColumnComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the string to prefix a positive value. If FormatString is specificied this value is ignored.
         */
         get: function () {
-            return this.i.rp;
+            return this.i.tg;
         },
         set: function (v) {
-            this.i.rp = v;
+            this.i.tg = v;
         },
         enumerable: false,
         configurable: true
@@ -72,10 +72,10 @@ var IgxNumericColumnComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the string to suffix a negative value. If FormatString is specificied this value is ignored.
         */
         get: function () {
-            return this.i.rn;
+            return this.i.te;
         },
         set: function (v) {
-            this.i.rn = v;
+            this.i.te = v;
         },
         enumerable: false,
         configurable: true
@@ -85,10 +85,10 @@ var IgxNumericColumnComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the string to suffix a positive value. If FormatString is specificied this value is ignored.
         */
         get: function () {
-            return this.i.rr;
+            return this.i.ti;
         },
         set: function (v) {
-            this.i.rr = v;
+            this.i.ti = v;
         },
         enumerable: false,
         configurable: true
@@ -98,10 +98,10 @@ var IgxNumericColumnComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the maximum fraction digits. If FormatString is specificied this value is ignored.
         */
         get: function () {
-            return this.i.q0;
+            return this.i.sq;
         },
         set: function (v) {
-            this.i.q0 = +v;
+            this.i.sq = +v;
         },
         enumerable: false,
         configurable: true
@@ -111,10 +111,10 @@ var IgxNumericColumnComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the minimum fraction digits. If FormatString is specificied this value is ignored.
         */
         get: function () {
-            return this.i.q1;
+            return this.i.sr;
         },
         set: function (v) {
-            this.i.q1 = +v;
+            this.i.sr = +v;
         },
         enumerable: false,
         configurable: true
@@ -124,10 +124,24 @@ var IgxNumericColumnComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the minimum integer digits. If FormatString is specificied this value is ignored.
         */
         get: function () {
-            return this.i.q2;
+            return this.i.ss;
         },
         set: function (v) {
-            this.i.q2 = +v;
+            this.i.ss = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxNumericColumnComponent.prototype, "isPercent", {
+        /**
+         * Gets or sets whether the column's values are displayed as percentages.
+         * When true, the raw numeric value is multiplied by 100 before it is formatted for display.
+        */
+        get: function () {
+            return this.i.sk;
+        },
+        set: function (v) {
+            this.i.sk = ensureBool(v);
         },
         enumerable: false,
         configurable: true
@@ -137,10 +151,10 @@ var IgxNumericColumnComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets whether to show a grouping separator. If FormatString is specificied this value is ignored.
         */
         get: function () {
-            return this.i.qv;
+            return this.i.sl;
         },
         set: function (v) {
-            this.i.qv = ensureBool(v);
+            this.i.sl = ensureBool(v);
         },
         enumerable: false,
         configurable: true
@@ -150,24 +164,24 @@ var IgxNumericColumnComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the format string to apply to the value. If set, the other value formatting properties on this column are ignored.
         */
         get: function () {
-            return this.i.rg;
+            return this.i.s6;
         },
         set: function (v) {
-            this.i.rg = v;
+            this.i.s6 = v;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxNumericColumnComponent.prototype, "formatSpecifiers", {
         get: function () {
-            return this.i.qr;
+            return this.i.sf;
         },
         set: function (v) {
             if (v && !Array.isArray(v) && typeof (v) == "string") {
                 var re = /\s*(?:,|\s|$)\s*/gm;
                 v = v.split(re);
             }
-            this.i.qr = v;
+            this.i.sf = v;
         },
         enumerable: false,
         configurable: true
@@ -177,10 +191,10 @@ var IgxNumericColumnComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the INTL NumericFormat object to use for formatting the date values.
         */
         get: function () {
-            return this.i.q5;
+            return this.i.sv;
         },
         set: function (v) {
-            this.i.q5 = v;
+            this.i.sv = v;
         },
         enumerable: false,
         configurable: true
@@ -190,10 +204,10 @@ var IgxNumericColumnComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the editor type used for editing cells in this column.
         */
         get: function () {
-            return this.i.qt;
+            return this.i.sh;
         },
         set: function (v) {
-            this.i.qt = ensureEnum(EditorType_$type, v);
+            this.i.sh = ensureEnum(EditorType_$type, v);
         },
         enumerable: false,
         configurable: true
@@ -203,10 +217,10 @@ var IgxNumericColumnComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the ComboBox data source.
         */
         get: function () {
-            return this.i.q4;
+            return this.i.su;
         },
         set: function (v) {
-            this.i.q4 = v;
+            this.i.su = v;
         },
         enumerable: false,
         configurable: true
@@ -216,10 +230,10 @@ var IgxNumericColumnComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the ComboBox text field.
         */
         get: function () {
-            return this.i.rb;
+            return this.i.s1;
         },
         set: function (v) {
-            this.i.rb = v;
+            this.i.s1 = v;
         },
         enumerable: false,
         configurable: true
@@ -229,10 +243,10 @@ var IgxNumericColumnComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the ComboBox value field.
         */
         get: function () {
-            return this.i.rc;
+            return this.i.s2;
         },
         set: function (v) {
-            this.i.rc = v;
+            this.i.s2 = v;
         },
         enumerable: false,
         configurable: true
@@ -248,7 +262,7 @@ var IgxNumericColumnComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         return null;
     };
     IgxNumericColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxNumericColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    IgxNumericColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: IgxNumericColumnComponent, selector: "igx-numeric-column", inputs: { negativePrefix: "negativePrefix", positivePrefix: "positivePrefix", negativeSuffix: "negativeSuffix", positiveSuffix: "positiveSuffix", maxFractionDigits: "maxFractionDigits", minFractionDigits: "minFractionDigits", minIntegerDigits: "minIntegerDigits", showGroupingSeparator: "showGroupingSeparator", formatString: "formatString", formatSpecifiers: "formatSpecifiers", formatOverride: "formatOverride", editorType: "editorType", editorDataSource: "editorDataSource", editorTextField: "editorTextField", editorValueField: "editorValueField" }, providers: [{ provide: IgxDataGridColumnComponent, useExisting: forwardRef(function () { return IgxNumericColumnComponent; }) }, { provide: IgxDefinitionBaseComponent, useExisting: forwardRef(function () { return IgxNumericColumnComponent; }) }], usesInheritance: true, ngImport: i0, template: "", isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    IgxNumericColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: IgxNumericColumnComponent, selector: "igx-numeric-column", inputs: { negativePrefix: "negativePrefix", positivePrefix: "positivePrefix", negativeSuffix: "negativeSuffix", positiveSuffix: "positiveSuffix", maxFractionDigits: "maxFractionDigits", minFractionDigits: "minFractionDigits", minIntegerDigits: "minIntegerDigits", isPercent: "isPercent", showGroupingSeparator: "showGroupingSeparator", formatString: "formatString", formatSpecifiers: "formatSpecifiers", formatOverride: "formatOverride", editorType: "editorType", editorDataSource: "editorDataSource", editorTextField: "editorTextField", editorValueField: "editorValueField" }, providers: [{ provide: IgxDataGridColumnComponent, useExisting: forwardRef(function () { return IgxNumericColumnComponent; }) }, { provide: IgxDefinitionBaseComponent, useExisting: forwardRef(function () { return IgxNumericColumnComponent; }) }], usesInheritance: true, ngImport: i0, template: "", isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
     return IgxNumericColumnComponent;
 }(IgxDataGridColumnComponent));
 export { IgxNumericColumnComponent };
@@ -274,6 +288,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }], minIntegerDigits: [{
                 type: Input
+            }], isPercent: [{
+                type: Input
             }], showGroupingSeparator: [{
                 type: Input
             }], formatString: [{

package/esm5/lib/igx-numeric-column-dynamic-module.js

@@ -10,11 +10,13 @@ import { IgxNumericColumnModule } from './igx-numeric-column-module';
 import { IgxNumericColumnComponent } from './igx-numeric-column-component';
 import { NumericColumn } from './NumericColumn';
 import { TypeRegistrar } from "igniteui-angular-core";
+import { IgxNumericCellInfo } from './igx-numeric-cell-info';
 import * as i0 from "@angular/core";
 var IgxNumericColumnDynamicModule = /** @class */ /*@__PURE__*/ (function () {
     function IgxNumericColumnDynamicModule() {
         TypeRegistrar.registerCons("IgxNumericColumnComponent", IgxNumericColumnComponent);
         TypeRegistrar.register("NumericColumn", NumericColumn.$type);
+        TypeRegistrar.registerCons("IgxNumericCellInfo", IgxNumericCellInfo);
     }
     IgxNumericColumnDynamicModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxNumericColumnDynamicModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     IgxNumericColumnDynamicModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxNumericColumnDynamicModule, imports: [CommonModule, IgxNumericColumnModule], exports: [IgxNumericColumnModule] });

package/esm5/lib/igx-row-separator-dynamic-module.js

@@ -10,11 +10,13 @@ import { IgxRowSeparatorModule } from './igx-row-separator-module';
 import { IgxRowSeparatorComponent } from './igx-row-separator-component';
 import { RowSeparator } from './RowSeparator';
 import { TypeRegistrar } from "igniteui-angular-core";
+import { IgxRowSeparatorInfo } from './igx-row-separator-info';
 import * as i0 from "@angular/core";
 var IgxRowSeparatorDynamicModule = /** @class */ /*@__PURE__*/ (function () {
     function IgxRowSeparatorDynamicModule() {
         TypeRegistrar.registerCons("IgxRowSeparatorComponent", IgxRowSeparatorComponent);
         TypeRegistrar.register("RowSeparator", RowSeparator.$type);
+        TypeRegistrar.registerCons("IgxRowSeparatorInfo", IgxRowSeparatorInfo);
     }
     IgxRowSeparatorDynamicModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxRowSeparatorDynamicModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     IgxRowSeparatorDynamicModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxRowSeparatorDynamicModule, imports: [CommonModule, IgxRowSeparatorModule], exports: [IgxRowSeparatorModule] });

package/esm5/lib/igx-section-header-cell-info.js

@@ -29,10 +29,10 @@ var IgxSectionHeaderCellInfo = /** @class */ /*@__PURE__*/ (function (_super) {
          * Sets or gets the resolved text for the section header cell.
         */
         get: function () {
-            return this.i.og;
+            return this.i.op;
         },
         set: function (v) {
-            this.i.og = v;
+            this.i.op = v;
         },
         enumerable: false,
         configurable: true
@@ -42,10 +42,10 @@ var IgxSectionHeaderCellInfo = /** @class */ /*@__PURE__*/ (function (_super) {
          * Sets or gets the resolved summary text for the section header cell.
         */
         get: function () {
-            return this.i.oe;
+            return this.i.on;
         },
         set: function (v) {
-            this.i.oe = v;
+            this.i.on = v;
         },
         enumerable: false,
         configurable: true
@@ -55,10 +55,10 @@ var IgxSectionHeaderCellInfo = /** @class */ /*@__PURE__*/ (function (_super) {
          * Sets or gets how summaries are displayed in the section header cell.
         */
         get: function () {
-            return this.i.n5;
+            return this.i.oe;
         },
         set: function (v) {
-            this.i.n5 = ensureEnum(GroupSummaryDisplayMode_$type, v);
+            this.i.oe = ensureEnum(GroupSummaryDisplayMode_$type, v);
         },
         enumerable: false,
         configurable: true

package/esm5/lib/igx-section-header-component.js

@@ -42,20 +42,66 @@ var IgxSectionHeaderComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     };
     Object.defineProperty(IgxSectionHeaderComponent.prototype, "selectedBackground", {
         get: function () {
-            return brushToString(this.i.hv);
+            return brushToString(this.i.h9);
         },
         set: function (v) {
-            this.i.hv = stringToBrush(v);
+            this.i.h9 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxSectionHeaderComponent.prototype, "actualSelectedBackground", {
         get: function () {
-            return brushToString(this.i.hu);
+            return brushToString(this.i.h6);
         },
         set: function (v) {
-            this.i.hu = stringToBrush(v);
+            this.i.h6 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxSectionHeaderComponent.prototype, "selectedTextColor", {
+        get: function () {
+            return brushToString(this.i.ia);
+        },
+        set: function (v) {
+            this.i.ia = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxSectionHeaderComponent.prototype, "actualSelectedTextColor", {
+        get: function () {
+            return brushToString(this.i.h7);
+        },
+        set: function (v) {
+            this.i.h7 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxSectionHeaderComponent.prototype, "expansionIndicatorIconColor", {
+        /**
+         * Gets or sets the color of the section header's expansion indicator icon. When unset, the icon defers to the grid-level color or the resolved section header text color.
+        */
+        get: function () {
+            return brushToString(this.i.h8);
+        },
+        set: function (v) {
+            this.i.h8 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxSectionHeaderComponent.prototype, "actualExpansionIndicatorIconColor", {
+        /**
+         * Gets the resolved color of the section header's expansion indicator icon.
+        */
+        get: function () {
+            return brushToString(this.i.h5);
+        },
+        set: function (v) {
+            this.i.h5 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -65,10 +111,10 @@ var IgxSectionHeaderComponent = /** @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.hd;
+            return this.i.he;
         },
         set: function (v) {
-            this.i.hd = +v;
+            this.i.he = +v;
         },
         enumerable: false,
         configurable: true
@@ -78,10 +124,10 @@ var IgxSectionHeaderComponent = /** @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.hf;
+            return this.i.hg;
         },
         set: function (v) {
-            this.i.hf = +v;
+            this.i.hg = +v;
         },
         enumerable: false,
         configurable: true
@@ -91,10 +137,10 @@ var IgxSectionHeaderComponent = /** @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.he;
+            return this.i.hf;
         },
         set: function (v) {
-            this.i.he = +v;
+            this.i.hf = +v;
         },
         enumerable: false,
         configurable: true
@@ -104,36 +150,36 @@ var IgxSectionHeaderComponent = /** @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.hc;
+            return this.i.hd;
         },
         set: function (v) {
-            this.i.hc = +v;
+            this.i.hd = +v;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxSectionHeaderComponent.prototype, "isCollapsable", {
         get: function () {
-            return this.i.g6;
+            return this.i.g7;
         },
         set: function (v) {
-            this.i.g6 = ensureBool(v);
+            this.i.g7 = ensureBool(v);
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxSectionHeaderComponent.prototype, "summaryDisplayMode", {
         get: function () {
-            return this.i.g3;
+            return this.i.g4;
         },
         set: function (v) {
-            this.i.g3 = ensureEnum(GroupSummaryDisplayMode_$type, v);
+            this.i.g4 = ensureEnum(GroupSummaryDisplayMode_$type, v);
         },
         enumerable: false,
         configurable: true
     });
     IgxSectionHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxSectionHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    IgxSectionHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: IgxSectionHeaderComponent, selector: "igx-section-header", inputs: { selectedBackground: "selectedBackground", actualSelectedBackground: "actualSelectedBackground", paddingLeft: "paddingLeft", paddingTop: "paddingTop", paddingRight: "paddingRight", paddingBottom: "paddingBottom", isCollapsable: "isCollapsable", summaryDisplayMode: "summaryDisplayMode" }, providers: [{ provide: IgxDefinitionBaseComponent, useExisting: forwardRef(function () { return IgxSectionHeaderComponent; }) }], usesInheritance: true, ngImport: i0, template: "", isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    IgxSectionHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: IgxSectionHeaderComponent, selector: "igx-section-header", inputs: { selectedBackground: "selectedBackground", actualSelectedBackground: "actualSelectedBackground", selectedTextColor: "selectedTextColor", actualSelectedTextColor: "actualSelectedTextColor", expansionIndicatorIconColor: "expansionIndicatorIconColor", actualExpansionIndicatorIconColor: "actualExpansionIndicatorIconColor", paddingLeft: "paddingLeft", paddingTop: "paddingTop", paddingRight: "paddingRight", paddingBottom: "paddingBottom", isCollapsable: "isCollapsable", summaryDisplayMode: "summaryDisplayMode" }, providers: [{ provide: IgxDefinitionBaseComponent, useExisting: forwardRef(function () { return IgxSectionHeaderComponent; }) }], usesInheritance: true, ngImport: i0, template: "", isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
     return IgxSectionHeaderComponent;
 }(IgxDefinitionBaseComponent));
 export { IgxSectionHeaderComponent };
@@ -149,6 +195,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }], actualSelectedBackground: [{
                 type: Input
+            }], selectedTextColor: [{
+                type: Input
+            }], actualSelectedTextColor: [{
+                type: Input
+            }], expansionIndicatorIconColor: [{
+                type: Input
+            }], actualExpansionIndicatorIconColor: [{
+                type: Input
             }], paddingLeft: [{
                 type: Input
             }], paddingTop: [{

package/esm5/lib/igx-section-header-dynamic-module.js

@@ -10,11 +10,13 @@ import { IgxSectionHeaderModule } from './igx-section-header-module';
 import { IgxSectionHeaderComponent } from './igx-section-header-component';
 import { SectionHeader } from './SectionHeader';
 import { TypeRegistrar } from "igniteui-angular-core";
+import { IgxSectionHeaderCellInfo } from './igx-section-header-cell-info';
 import * as i0 from "@angular/core";
 var IgxSectionHeaderDynamicModule = /** @class */ /*@__PURE__*/ (function () {
     function IgxSectionHeaderDynamicModule() {
         TypeRegistrar.registerCons("IgxSectionHeaderComponent", IgxSectionHeaderComponent);
         TypeRegistrar.register("SectionHeader", SectionHeader.$type);
+        TypeRegistrar.registerCons("IgxSectionHeaderCellInfo", IgxSectionHeaderCellInfo);
     }
     IgxSectionHeaderDynamicModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxSectionHeaderDynamicModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     IgxSectionHeaderDynamicModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxSectionHeaderDynamicModule, imports: [CommonModule, IgxSectionHeaderModule], exports: [IgxSectionHeaderModule] });