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

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

@@ -58,151 +58,151 @@ export let IgxDataGridColumnComponent = /*@__PURE__*/ (() => {
          * Gets or sets the amount of left padding to use for the cell content for this column.
         */
         get paddingLeft() {
-            return this.i.lm;
+            return this.i.ln;
         }
         set paddingLeft(v) {
-            this.i.lm = +v;
+            this.i.ln = +v;
         }
         /**
          * Gets or sets the amount of top padding to use for the cell content for this column.
         */
         get paddingTop() {
-            return this.i.lo;
+            return this.i.lp;
         }
         set paddingTop(v) {
-            this.i.lo = +v;
+            this.i.lp = +v;
         }
         /**
          * Gets or sets the amount of right padding to use for the cell content of this column.
         */
         get paddingRight() {
-            return this.i.ln;
+            return this.i.lo;
         }
         set paddingRight(v) {
-            this.i.ln = +v;
+            this.i.lo = +v;
         }
         /**
          * Gets or sets the amount of bottom padding to use for the cell content of this column.
         */
         get paddingBottom() {
-            return this.i.ll;
+            return this.i.lm;
         }
         set paddingBottom(v) {
-            this.i.ll = +v;
+            this.i.lm = +v;
         }
         /**
          * Gets or sets an unique name of the Column
         */
         get name() {
-            return this.i.od;
+            return this.i.ok;
         }
         set name(v) {
-            this.i.od = v;
+            this.i.ok = v;
         }
         /**
          * Gets or sets the key used for the column binding
         */
         get field() {
-            return this.i.nl;
+            return this.i.ns;
         }
         set field(v) {
-            this.i.nl = v;
+            this.i.ns = v;
         }
         /**
          * Gets or sets the text displayed in the header of the column
         */
         get headerText() {
-            return this.i.ns;
+            return this.i.nz;
         }
         set headerText(v) {
-            this.i.ns = v;
+            this.i.nz = v;
         }
         /**
          * Gets the actual text displayed in the header of the column
         */
         get actualHeaderText() {
-            return this.i.mm;
+            return this.i.mq;
         }
         set actualHeaderText(v) {
-            this.i.mm = v;
+            this.i.mq = v;
         }
         /**
          * Gets or sets the background color to use for the cells when they are selected
         */
         get selectedBackground() {
-            return brushToString(this.i.r9);
+            return brushToString(this.i.sv);
         }
         set selectedBackground(v) {
-            this.i.r9 = stringToBrush(v);
+            this.i.sv = stringToBrush(v);
         }
         /**
          * Gets the actual background color that is used for the cells when they are selected
         */
         get actualSelectedBackground() {
-            return brushToString(this.i.rr);
+            return brushToString(this.i.sa);
         }
         set actualSelectedBackground(v) {
-            this.i.rr = stringToBrush(v);
+            this.i.sa = stringToBrush(v);
         }
         /**
          * Gets or sets the text color to use for the cells when they are selected
         */
         get selectedTextColor() {
-            return brushToString(this.i.sa);
+            return brushToString(this.i.sw);
         }
         set selectedTextColor(v) {
-            this.i.sa = stringToBrush(v);
+            this.i.sw = stringToBrush(v);
         }
         /**
          * Gets the actual text color that is used for the cells when they are selected
         */
         get actualSelectedTextColor() {
-            return brushToString(this.i.rs);
+            return brushToString(this.i.sb);
         }
         set actualSelectedTextColor(v) {
-            this.i.rs = stringToBrush(v);
+            this.i.sb = stringToBrush(v);
         }
         /**
          * Gets or sets the background color to use for the cells when the row is hovered.
         */
         get rowHoverBackground() {
-            return brushToString(this.i.r7);
+            return brushToString(this.i.st);
         }
         set rowHoverBackground(v) {
-            this.i.r7 = stringToBrush(v);
+            this.i.st = stringToBrush(v);
         }
         /**
          * Gets the actual background color that is used for the cells when they are hovered.
         */
         get actualHoverBackground() {
-            return brushToString(this.i.rp);
+            return brushToString(this.i.r8);
         }
         set actualHoverBackground(v) {
-            this.i.rp = stringToBrush(v);
+            this.i.r8 = stringToBrush(v);
         }
         /**
          * Gets or sets the text color to use for the cells when the row is hovered.
         */
         get rowHoverTextColor() {
-            return brushToString(this.i.r8);
+            return brushToString(this.i.su);
         }
         set rowHoverTextColor(v) {
-            this.i.r8 = stringToBrush(v);
+            this.i.su = stringToBrush(v);
         }
         /**
          * Gets the actual text color that is used for the cells when they are hovered.
         */
         get actualRowHoverTextColor() {
-            return brushToString(this.i.rq);
+            return brushToString(this.i.r9);
         }
         set actualRowHoverTextColor(v) {
-            this.i.rq = stringToBrush(v);
+            this.i.r9 = stringToBrush(v);
         }
         /**
          * Gets or sets the animation settings to use for this column.
         */
         get animationSettings() {
-            const r = this.i.id;
+            const r = this.i.ie;
             if (r == null) {
                 return null;
             }
@@ -221,7 +221,7 @@ export let IgxDataGridColumnComponent = /*@__PURE__*/ (() => {
             return r.externalObject;
         }
         set animationSettings(v) {
-            v == null ? this.i.id = null : this.i.id = v.i;
+            v == null ? this.i.ie = null : this.i.ie = v.i;
         }
         /**
          * Gets or sets the width to use for this column.
@@ -258,46 +258,46 @@ export let IgxDataGridColumnComponent = /*@__PURE__*/ (() => {
          * Gets or sets the minimum width to use for this column. Overrides the DefaultColumnMinWidth from the grid, if set.
         */
         get minWidth() {
-            return this.i.kt;
+            return this.i.ku;
         }
         set minWidth(v) {
-            this.i.kt = +v;
+            this.i.ku = +v;
         }
         /**
          * Gets whether this column was projected from markup/templates and is constrained.
         */
         get isFromMarkup() {
-            return this.i.ka;
+            return this.i.kb;
         }
         set isFromMarkup(v) {
-            this.i.ka = ensureBool(v);
+            this.i.kb = ensureBool(v);
         }
         /**
          * Gets whether this column was auto generated.
         */
         get isAutoGenerated() {
-            return this.i.j4;
+            return this.i.j5;
         }
         set isAutoGenerated(v) {
-            this.i.j4 = ensureBool(v);
+            this.i.j5 = ensureBool(v);
         }
         /**
          * Gets or sets a filter to apply on the values of this column
         */
         get filter() {
-            return this.i.g5;
+            return this.i.g6;
         }
         set filter(v) {
-            this.i.g5 = v;
+            this.i.g6 = v;
         }
         /**
          * Gets or sets a filter to apply to the values of this column.
         */
         get filterExpression() {
-            return this.i.g7;
+            return this.i.g8;
         }
         set filterExpression(v) {
-            this.i.g7 = v;
+            this.i.g8 = v;
         }
         /**
          * Gets or sets the header definition for this column.
@@ -325,405 +325,459 @@ export let IgxDataGridColumnComponent = /*@__PURE__*/ (() => {
          * Gets or sets whether filtering is enabled for this column.
         */
         get isFilteringEnabled() {
-            return this.i.j9;
+            return this.i.ka;
         }
         set isFilteringEnabled(v) {
-            this.i.j9 = ensureBool(v);
+            this.i.ka = ensureBool(v);
         }
         /**
          * Gets or sets whether resizing is enabled for this column.
         */
         get isResizingEnabled() {
-            return this.i.kc;
+            return this.i.kd;
         }
         set isResizingEnabled(v) {
-            this.i.kc = ensureBool(v);
+            this.i.kd = ensureBool(v);
         }
         /**
          * Gets or sets whether sorting is enabled for this column from the UI.
         */
         get isSortingEnabled() {
-            return this.i.kd;
+            return this.i.ke;
         }
         set isSortingEnabled(v) {
-            this.i.kd = ensureBool(v);
+            this.i.ke = ensureBool(v);
         }
         /**
          * Gets or sets whether or not a column is hidden from the grid
         */
         get isHidden() {
-            return this.i.kb;
+            return this.i.kc;
         }
         set isHidden(v) {
-            this.i.kb = ensureBool(v);
+            this.i.kc = ensureBool(v);
         }
         /**
          * Gets or sets if a column should be removed from the grid when it is fully hidden
         */
         get shouldRemoveWhenHidden() {
-            return this.i.kg;
+            return this.i.kh;
         }
         set shouldRemoveWhenHidden(v) {
-            this.i.kg = ensureBool(v);
+            this.i.kh = ensureBool(v);
         }
         /**
          * Gets the current sort direction (None, Ascending, Descending) for this column.
         */
         get sortDirection() {
-            return this.i.hv;
+            return this.i.hw;
         }
         set sortDirection(v) {
-            this.i.hv = ensureEnum(ColumnSortDirection_$type, v);
+            this.i.hw = ensureEnum(ColumnSortDirection_$type, v);
         }
         /**
          * Gets or sets the current fixed position for this column.
         */
         get pinned() {
-            return this.i.it;
+            return this.i.iu;
         }
         set pinned(v) {
-            this.i.it = ensureEnum(PinnedPositions_$type, v);
+            this.i.iu = ensureEnum(PinnedPositions_$type, v);
         }
         /**
          * Gets the actual column options icon alignment for this column.
         */
         get actualColumnOptionsIconAlignment() {
-            return this.i.hm;
+            return this.i.hn;
         }
         set actualColumnOptionsIconAlignment(v) {
-            this.i.hm = ensureEnum(ColumnOptionsIconAlignment_$type, v);
+            this.i.hn = ensureEnum(ColumnOptionsIconAlignment_$type, v);
         }
         /**
          * Gets or sets whether the column options icon is aligned opposite the header text or not.
         */
         get columnOptionsIconAlignment() {
-            return this.i.hn;
+            return this.i.ho;
         }
         set columnOptionsIconAlignment(v) {
-            this.i.hn = ensureEnum(ColumnOptionsIconAlignment_$type, v);
+            this.i.ho = ensureEnum(ColumnOptionsIconAlignment_$type, v);
         }
         /**
          * Gets the actual column options icon color for this column.
         */
         get actualColumnOptionsIconColor() {
-            return brushToString(this.i.rj);
+            return brushToString(this.i.rz);
         }
         set actualColumnOptionsIconColor(v) {
-            this.i.rj = stringToBrush(v);
+            this.i.rz = stringToBrush(v);
         }
         /**
          * Gets or sets the column options icon color for this column.
         */
         get columnOptionsIconColor() {
-            return brushToString(this.i.rz);
+            return brushToString(this.i.si);
         }
         set columnOptionsIconColor(v) {
-            this.i.rz = stringToBrush(v);
+            this.i.si = stringToBrush(v);
         }
         /**
          * Gets or sets how the column option icon will behave in the column header.
         */
         get columnOptionsIconBehavior() {
-            return this.i.hr;
+            return this.i.hs;
         }
         set columnOptionsIconBehavior(v) {
-            this.i.hr = ensureEnum(ColumnOptionsIconBehavior_$type, v);
+            this.i.hs = ensureEnum(ColumnOptionsIconBehavior_$type, v);
         }
         /**
          * Gets or sets how the column option icon will behave in the column header.
         */
         get actualColumnOptionsIconBehavior() {
-            return this.i.hq;
+            return this.i.hr;
         }
         set actualColumnOptionsIconBehavior(v) {
-            this.i.hq = ensureEnum(ColumnOptionsIconBehavior_$type, v);
+            this.i.hr = ensureEnum(ColumnOptionsIconBehavior_$type, v);
         }
         /**
          * Gets the actual state of the column options for this column.
         */
         get actualIsColumnOptionsEnabled() {
-            return this.i.jx;
+            return this.i.jy;
         }
         set actualIsColumnOptionsEnabled(v) {
-            this.i.jx = ensureBool(v);
+            this.i.jy = ensureBool(v);
         }
         /**
          * Gets or sets the preferred state of the column options for this column. If the feature is disabled at the grid level
          * then it will be disabled for the column regardless of what this is set to.
         */
         get isColumnOptionsEnabled() {
-            return this.i.j5;
+            return this.i.j6;
         }
         set isColumnOptionsEnabled(v) {
-            this.i.j5 = ensureBool(v);
+            this.i.j6 = ensureBool(v);
         }
         /**
          * Gets the actual state of summaries menu in the column options for this column.
         */
         get actualIsColumnOptionsSummariesEnabled() {
-            return this.i.jz;
+            return this.i.j0;
         }
         set actualIsColumnOptionsSummariesEnabled(v) {
-            this.i.jz = ensureBool(v);
+            this.i.j0 = ensureBool(v);
         }
         /**
          * Gets or sets whether to show the summaries option in the column options menu for this column.
         */
         get isColumnOptionsSummariesEnabled() {
-            return this.i.j7;
+            return this.i.j8;
         }
         set isColumnOptionsSummariesEnabled(v) {
-            this.i.j7 = ensureBool(v);
+            this.i.j8 = ensureBool(v);
         }
         /**
          * Gets the actual state of grouping menu in the column options for this column.
         */
         get actualIsColumnOptionsGroupingEnabled() {
-            return this.i.jy;
+            return this.i.jz;
         }
         set actualIsColumnOptionsGroupingEnabled(v) {
-            this.i.jy = ensureBool(v);
+            this.i.jz = ensureBool(v);
         }
         /**
          * Gets or sets whether to show the grouping option in the column options menu for this column.
         */
         get isColumnOptionsGroupingEnabled() {
-            return this.i.j6;
+            return this.i.j7;
         }
         set isColumnOptionsGroupingEnabled(v) {
-            this.i.j6 = ensureBool(v);
+            this.i.j7 = ensureBool(v);
         }
         /**
          * Gets or sets the column options dropdown background color.
         */
         get actualColumnOptionsBackground() {
-            return brushToString(this.i.re);
+            return brushToString(this.i.ru);
         }
         set actualColumnOptionsBackground(v) {
-            this.i.re = stringToBrush(v);
+            this.i.ru = stringToBrush(v);
         }
         /**
          * Gets or sets the column options dropdown background color.
         */
         get columnOptionsBackground() {
-            return brushToString(this.i.ru);
+            return brushToString(this.i.sd);
         }
         set columnOptionsBackground(v) {
-            this.i.ru = stringToBrush(v);
+            this.i.sd = stringToBrush(v);
+        }
+        /**
+         * Gets the resolved scrollbar background color for checkbox lists in the column options dialog.
+        */
+        get actualColumnOptionsScrollbarBackground() {
+            return brushToString(this.i.r1);
+        }
+        set actualColumnOptionsScrollbarBackground(v) {
+            this.i.r1 = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the scrollbar background color for checkbox lists in this column's options dialog.
+        */
+        get columnOptionsScrollbarBackground() {
+            return brushToString(this.i.sk);
+        }
+        set columnOptionsScrollbarBackground(v) {
+            this.i.sk = stringToBrush(v);
+        }
+        /**
+         * Gets the resolved scrollbar thumb hover background color for checkbox lists in the column options dialog.
+        */
+        get actualColumnOptionsScrollbarHoverBackground() {
+            return brushToString(this.i.r2);
+        }
+        set actualColumnOptionsScrollbarHoverBackground(v) {
+            this.i.r2 = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the scrollbar thumb hover background color for checkbox lists in this column's options dialog.
+        */
+        get columnOptionsScrollbarHoverBackground() {
+            return brushToString(this.i.sl);
+        }
+        set columnOptionsScrollbarHoverBackground(v) {
+            this.i.sl = stringToBrush(v);
+        }
+        /**
+         * Gets the resolved scrollbar thumb active (dragging) background color for checkbox lists in the column options dialog.
+        */
+        get actualColumnOptionsScrollbarActiveBackground() {
+            return brushToString(this.i.r0);
+        }
+        set actualColumnOptionsScrollbarActiveBackground(v) {
+            this.i.r0 = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the scrollbar thumb active (dragging) background color for checkbox lists in this column's options dialog.
+        */
+        get columnOptionsScrollbarActiveBackground() {
+            return brushToString(this.i.sj);
+        }
+        set columnOptionsScrollbarActiveBackground(v) {
+            this.i.sj = stringToBrush(v);
         }
         /**
          * Gets or sets the text color for text inside the column options menu.
         */
         get actualColumnOptionsTextColor() {
-            return brushToString(this.i.rl);
+            return brushToString(this.i.r4);
         }
         set actualColumnOptionsTextColor(v) {
-            this.i.rl = stringToBrush(v);
+            this.i.r4 = stringToBrush(v);
         }
         /**
          * Gets or sets the text color for text inside the column options menu.
         */
         get columnOptionsTextColor() {
-            return brushToString(this.i.r1);
+            return brushToString(this.i.sn);
         }
         set columnOptionsTextColor(v) {
-            this.i.r1 = stringToBrush(v);
+            this.i.sn = stringToBrush(v);
         }
         /**
          * Gets or sets the font settings for text inside the column options menu.
         */
         get columnOptionsTextStyle() {
-            if (this.i.jd == null) {
+            if (this.i.je == null) {
                 return null;
             }
-            return this.i.jd.fontString;
+            return this.i.je.fontString;
         }
         set columnOptionsTextStyle(v) {
             let fi = new FontInfo();
             fi.fontString = v;
-            this.i.jd = fi;
+            this.i.je = fi;
         }
         get actualColumnOptionsHoverBackgroundColor() {
-            return brushToString(this.i.ri);
+            return brushToString(this.i.ry);
         }
         set actualColumnOptionsHoverBackgroundColor(v) {
-            this.i.ri = stringToBrush(v);
+            this.i.ry = stringToBrush(v);
         }
         get columnOptionsHoverBackgroundColor() {
-            return brushToString(this.i.ry);
+            return brushToString(this.i.sh);
         }
         set columnOptionsHoverBackgroundColor(v) {
-            this.i.ry = stringToBrush(v);
+            this.i.sh = stringToBrush(v);
         }
         get actualColumnOptionsToolTipBackgroundColor() {
-            return brushToString(this.i.rm);
+            return brushToString(this.i.r5);
         }
         set actualColumnOptionsToolTipBackgroundColor(v) {
-            this.i.rm = stringToBrush(v);
+            this.i.r5 = stringToBrush(v);
         }
         get columnOptionsToolTipBackgroundColor() {
-            return brushToString(this.i.r2);
+            return brushToString(this.i.so);
         }
         set columnOptionsToolTipBackgroundColor(v) {
-            this.i.r2 = stringToBrush(v);
+            this.i.so = stringToBrush(v);
         }
         get actualColumnOptionsToolTipTextColor() {
-            return brushToString(this.i.rn);
+            return brushToString(this.i.r6);
         }
         set actualColumnOptionsToolTipTextColor(v) {
-            this.i.rn = stringToBrush(v);
+            this.i.r6 = stringToBrush(v);
         }
         get columnOptionsToolTipTextColor() {
-            return brushToString(this.i.r3);
+            return brushToString(this.i.sp);
         }
         set columnOptionsToolTipTextColor(v) {
-            this.i.r3 = stringToBrush(v);
+            this.i.sp = stringToBrush(v);
         }
         get actualColumnOptionsHighlightColor() {
-            return brushToString(this.i.rh);
+            return brushToString(this.i.rx);
         }
         set actualColumnOptionsHighlightColor(v) {
-            this.i.rh = stringToBrush(v);
+            this.i.rx = stringToBrush(v);
         }
         get columnOptionsHighlightColor() {
-            return brushToString(this.i.rx);
+            return brushToString(this.i.sg);
         }
         set columnOptionsHighlightColor(v) {
-            this.i.rx = stringToBrush(v);
+            this.i.sg = stringToBrush(v);
         }
         /**
          * Gets or sets the color of separators inside the column options menu.
         */
         get actualColumnOptionsSeparatorColor() {
-            return brushToString(this.i.rk);
+            return brushToString(this.i.r3);
         }
         set actualColumnOptionsSeparatorColor(v) {
-            this.i.rk = stringToBrush(v);
+            this.i.r3 = stringToBrush(v);
         }
         /**
          * Gets or sets the color of separators inside the column options menu.
         */
         get columnOptionsSeparatorColor() {
-            return brushToString(this.i.r0);
+            return brushToString(this.i.sm);
         }
         set columnOptionsSeparatorColor(v) {
-            this.i.r0 = stringToBrush(v);
+            this.i.sm = stringToBrush(v);
         }
         /**
          * Gets or sets the background color for group headers inside the column options menu.
         */
         get actualColumnOptionsGroupHeaderBackground() {
-            return brushToString(this.i.rf);
+            return brushToString(this.i.rv);
         }
         set actualColumnOptionsGroupHeaderBackground(v) {
-            this.i.rf = stringToBrush(v);
+            this.i.rv = stringToBrush(v);
         }
         /**
          * Gets or sets the background color for group headers inside the column options menu.
         */
         get columnOptionsGroupHeaderBackground() {
-            return brushToString(this.i.rv);
+            return brushToString(this.i.se);
         }
         set columnOptionsGroupHeaderBackground(v) {
-            this.i.rv = stringToBrush(v);
+            this.i.se = stringToBrush(v);
         }
         /**
          * Gets the actual text color for group headers inside the column options menu.
         */
         get actualColumnOptionsGroupHeaderTextColor() {
-            return brushToString(this.i.rg);
+            return brushToString(this.i.rw);
         }
         set actualColumnOptionsGroupHeaderTextColor(v) {
-            this.i.rg = stringToBrush(v);
+            this.i.rw = stringToBrush(v);
         }
         /**
          * Gets or sets the text color for group headers inside the column options menu.
         */
         get columnOptionsGroupHeaderTextColor() {
-            return brushToString(this.i.rw);
+            return brushToString(this.i.sf);
         }
         set columnOptionsGroupHeaderTextColor(v) {
-            this.i.rw = stringToBrush(v);
+            this.i.sf = stringToBrush(v);
         }
         get columnOptionsGroupHeaderTextStyle() {
-            if (this.i.jc == null) {
+            if (this.i.jd == null) {
                 return null;
             }
-            return this.i.jc.fontString;
+            return this.i.jd.fontString;
         }
         set columnOptionsGroupHeaderTextStyle(v) {
             let fi = new FontInfo();
             fi.fontString = v;
-            this.i.jc = fi;
+            this.i.jd = fi;
         }
         get actualColumnOptionsAccentColor() {
-            return brushToString(this.i.rd);
+            return brushToString(this.i.rt);
         }
         set actualColumnOptionsAccentColor(v) {
-            this.i.rd = stringToBrush(v);
+            this.i.rt = stringToBrush(v);
         }
         get columnOptionsAccentColor() {
-            return brushToString(this.i.rt);
+            return brushToString(this.i.sc);
         }
         set columnOptionsAccentColor(v) {
-            this.i.rt = stringToBrush(v);
+            this.i.sc = stringToBrush(v);
         }
         get actualColumnOptionsRowHeight() {
-            return this.i.lc;
+            return this.i.ld;
         }
         set actualColumnOptionsRowHeight(v) {
-            this.i.lc = +v;
+            this.i.ld = +v;
         }
         get columnOptionsRowHeight() {
-            return this.i.ld;
+            return this.i.le;
         }
         set columnOptionsRowHeight(v) {
-            this.i.ld = +v;
+            this.i.le = +v;
         }
         /**
          * Gets or sets if the column is editable.
         */
         get isEditable() {
-            return this.i.j8;
+            return this.i.j9;
         }
         set isEditable(v) {
-            this.i.j8 = ensureBool(v);
+            this.i.j9 = ensureBool(v);
         }
         /**
          * Gets or sets the text color used for deleted rows.
         */
         get deletedTextColor() {
-            return brushToString(this.i.r4);
+            return brushToString(this.i.sq);
         }
         set deletedTextColor(v) {
-            this.i.r4 = stringToBrush(v);
+            this.i.sq = stringToBrush(v);
         }
         /**
          * Gets the actual text color used for deleted rows.
         */
         get actualDeletedTextColor() {
-            return brushToString(this.i.ro);
+            return brushToString(this.i.r7);
         }
         set actualDeletedTextColor(v) {
-            this.i.ro = stringToBrush(v);
+            this.i.r7 = stringToBrush(v);
         }
         /**
          * Gets or sets the opacity to use for unsaved edited cell values.
         */
         get editOpacity() {
-            return this.i.ks;
+            return this.i.kt;
         }
         set editOpacity(v) {
-            this.i.ks = +v;
+            this.i.kt = +v;
         }
         /**
          * Gets the actual opacity for unsaved edited cell values.
         */
         get actualEditOpacity() {
-            return this.i.kr;
+            return this.i.ks;
         }
         set actualEditOpacity(v) {
-            this.i.kr = +v;
+            this.i.ks = +v;
         }
         /**
          * Gets or sets the font style to use for unsaved cell edits.
@@ -743,87 +797,87 @@ export let IgxDataGridColumnComponent = /*@__PURE__*/ (() => {
          * Gets the actual font style used for unsaved cell edits.
         */
         get actualEditFontInfo() {
-            if (this.i.jb == null) {
+            if (this.i.jc == null) {
                 return null;
             }
-            return this.i.jb.fontString;
+            return this.i.jc.fontString;
         }
         set actualEditFontInfo(v) {
             let fi = new FontInfo();
             fi.fontString = v;
-            this.i.jb = fi;
+            this.i.jc = fi;
         }
         /**
          * Gets or sets if and how cell merging is performed for this field.
         */
         get mergedCellMode() {
-            return this.i.ip;
+            return this.i.iq;
         }
         set mergedCellMode(v) {
-            this.i.ip = ensureEnum(MergedCellMode_$type, v);
+            this.i.iq = ensureEnum(MergedCellMode_$type, v);
         }
         /**
          * Gets or sets how cells are evaluated for merging.
         */
         get mergedCellEvaluationCriteria() {
-            return this.i.il;
+            return this.i.im;
         }
         set mergedCellEvaluationCriteria(v) {
-            this.i.il = ensureEnum(MergedCellEvaluationCriteria_$type, v);
+            this.i.im = ensureEnum(MergedCellEvaluationCriteria_$type, v);
         }
         /**
          * Gets or sets the vertical alignment to use for the merged cell content.
         */
         get mergedCellVerticalAlignment() {
-            return this.i.he;
+            return this.i.hf;
         }
         set mergedCellVerticalAlignment(v) {
-            this.i.he = ensureEnum(CellContentVerticalAlignment_$type, v);
+            this.i.hf = ensureEnum(CellContentVerticalAlignment_$type, v);
         }
         /**
          * Gets or sets the amount of left padding to use for the cell content for this column.
         */
         get mergedCellPaddingLeft() {
-            return this.i.lf;
+            return this.i.lg;
         }
         set mergedCellPaddingLeft(v) {
-            this.i.lf = +v;
+            this.i.lg = +v;
         }
         /**
          * Gets or sets the amount of top padding to use for the cell content for this column.
         */
         get mergedCellPaddingTop() {
-            return this.i.lh;
+            return this.i.li;
         }
         set mergedCellPaddingTop(v) {
-            this.i.lh = +v;
+            this.i.li = +v;
         }
         /**
          * Gets or sets the amount of right padding to use for the cell content of this column.
         */
         get mergedCellPaddingRight() {
-            return this.i.lg;
+            return this.i.lh;
         }
         set mergedCellPaddingRight(v) {
-            this.i.lg = +v;
+            this.i.lh = +v;
         }
         /**
          * Gets or sets the amount of bottom padding to use for the cell content of this column.
         */
         get mergedCellPaddingBottom() {
-            return this.i.le;
+            return this.i.lf;
         }
         set mergedCellPaddingBottom(v) {
-            this.i.le = +v;
+            this.i.lf = +v;
         }
         /**
          * Gets or sets whether UI filters are case sensitive or not.
         */
         get filterComparisonType() {
-            return this.i.h7;
+            return this.i.h8;
         }
         set filterComparisonType(v) {
-            this.i.h7 = ensureEnum(FilterComparisonType_$type, v);
+            this.i.h8 = ensureEnum(FilterComparisonType_$type, v);
         }
         /**
          * Gets a list of the current custom filters for this column.
@@ -831,7 +885,7 @@ export let IgxDataGridColumnComponent = /*@__PURE__*/ (() => {
         get filterOperands() {
             if (this._filterOperands === null) {
                 let coll = new IgxGridFilterOperandsCollection();
-                let innerColl = this.i.ig;
+                let innerColl = this.i.ih;
                 if (!innerColl) {
                     innerColl = new GridFilterOperandsCollection_internal();
                 }
@@ -847,7 +901,7 @@ export let IgxDataGridColumnComponent = /*@__PURE__*/ (() => {
             let coll = new IgxGridFilterOperandsCollection();
             this._filterOperands = coll._fromOuter(v);
             let syncColl = new SyncableObservableCollection$1(FilterOperand.$type);
-            let innerColl = this.i.ig;
+            let innerColl = this.i.ih;
             if (!innerColl) {
                 innerColl = new GridFilterOperandsCollection_internal();
             }
@@ -859,19 +913,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.o2;
+            return this.i.o9;
         }
         set suffixText(v) {
-            this.i.o2 = v;
+            this.i.o9 = 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.sd);
+            return brushToString(this.i.sz);
         }
         set suffixTextColor(v) {
-            this.i.sd = stringToBrush(v);
+            this.i.sz = stringToBrush(v);
         }
         /**
          * Gets or sets the font of the suffix text.
@@ -891,91 +945,91 @@ 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.ou;
+            return this.i.o1;
         }
         set suffixIconName(v) {
-            this.i.ou = v;
+            this.i.o1 = v;
         }
         /**
          * Gets or sets the icon to use in the suffix area of the cells in this column.
         */
         get suffixIconCollectionName() {
-            return this.i.or;
+            return this.i.oy;
         }
         set suffixIconCollectionName(v) {
-            this.i.or = v;
+            this.i.oy = v;
         }
         /**
          * Gets or sets the stroke color of suffix icon.
         */
         get suffixIconStroke() {
-            return brushToString(this.i.sc);
+            return brushToString(this.i.sy);
         }
         set suffixIconStroke(v) {
-            this.i.sc = stringToBrush(v);
+            this.i.sy = stringToBrush(v);
         }
         /**
          * Gets or sets the fill color of suffix icon.
         */
         get suffixIconFill() {
-            return brushToString(this.i.sb);
+            return brushToString(this.i.sx);
         }
         set suffixIconFill(v) {
-            this.i.sb = stringToBrush(v);
+            this.i.sx = stringToBrush(v);
         }
         /**
          * Gets or sets the suffix icon's viewbox x coordinate.
         */
         get suffixIconViewBoxLeft() {
-            return this.i.kv;
+            return this.i.kw;
         }
         set suffixIconViewBoxLeft(v) {
-            this.i.kv = +v;
+            this.i.kw = +v;
         }
         /**
          * Gets or sets the suffix icon's viewbox y coordinate.
         */
         get suffixIconViewBoxTop() {
-            return this.i.kw;
+            return this.i.kx;
         }
         set suffixIconViewBoxTop(v) {
-            this.i.kw = +v;
+            this.i.kx = +v;
         }
         /**
          * Gets or sets the suffix icon's viewbox width.
         */
         get suffixIconViewBoxWidth() {
-            return this.i.kx;
+            return this.i.ky;
         }
         set suffixIconViewBoxWidth(v) {
-            this.i.kx = +v;
+            this.i.ky = +v;
         }
         /**
          * Gets or sets the suffix icon's viewbox height.
         */
         get suffixIconViewBoxHeight() {
-            return this.i.ku;
+            return this.i.kv;
         }
         set suffixIconViewBoxHeight(v) {
-            this.i.ku = +v;
+            this.i.kv = +v;
         }
         /**
          * Gets or sets the suffix margin.
         */
         get suffixMargin() {
-            return this.i.ky;
+            return this.i.kz;
         }
         set suffixMargin(v) {
-            this.i.ky = +v;
+            this.i.kz = +v;
         }
         /**
          * Gets or sets the text decoration to apply to cells in this column.
         */
         get textDecoration() {
-            return this.i.iv;
+            return this.i.iw;
         }
         set textDecoration(v) {
-            this.i.iv = ensureEnum(TextCellDecoration_$type, v);
+            this.i.iw = ensureEnum(TextCellDecoration_$type, v);
         }
         findByName(name) {
             var baseResult = super.findByName(name);
@@ -1009,18 +1063,18 @@ export let IgxDataGridColumnComponent = /*@__PURE__*/ (() => {
         
         */
         getUniqueKey() {
-            let iv = this.i.nq();
+            let iv = this.i.nx();
             return (iv);
         }
         setNamedHeaderValue(valueName, animationType, value) {
-            this.i.pk(valueName, ensureEnum(CellPropertyAnimationType_$type, animationType), value);
+            this.i.pr(valueName, ensureEnum(CellPropertyAnimationType_$type, animationType), value);
         }
         /**
          * Returns if the column has named header values.
         
         */
         hasNamedHeaderValues() {
-            let iv = this.i.j2();
+            let iv = this.i.j3();
             return (iv);
         }
         /**
@@ -1029,7 +1083,7 @@ export let IgxDataGridColumnComponent = /*@__PURE__*/ (() => {
         * @param valueName  * The named value to check for.
         */
         hasNamedHeaderValue(valueName) {
-            let iv = this.i.j1(valueName);
+            let iv = this.i.j2(valueName);
             return (iv);
         }
         /**
@@ -1038,7 +1092,7 @@ export let IgxDataGridColumnComponent = /*@__PURE__*/ (() => {
         * @param valueName  * The named header value to remove.
         */
         removeNamedHeaderValue(valueName) {
-            this.i.pj(valueName);
+            this.i.pq(valueName);
         }
         /**
          * Gets the value of a named header value for this column by name.
@@ -1046,11 +1100,11 @@ export let IgxDataGridColumnComponent = /*@__PURE__*/ (() => {
         * @param valueName  * Name of the named header value to retrieve.
         */
         getNamedHeaderValue(valueName) {
-            let iv = this.i.lt(valueName);
+            let iv = this.i.lu(valueName);
             return (iv);
         }
         applyCustomFilter(filterID, index, value) {
-            this.i.pa(filterID, index, value);
+            this.i.ph(filterID, index, value);
         }
         getDesiredToolbarActions() {
             let iv = this.i.getDesiredToolbarActions();
@@ -1106,7 +1160,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", 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 });
+    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", actualColumnOptionsScrollbarBackground: "actualColumnOptionsScrollbarBackground", columnOptionsScrollbarBackground: "columnOptionsScrollbarBackground", actualColumnOptionsScrollbarHoverBackground: "actualColumnOptionsScrollbarHoverBackground", columnOptionsScrollbarHoverBackground: "columnOptionsScrollbarHoverBackground", actualColumnOptionsScrollbarActiveBackground: "actualColumnOptionsScrollbarActiveBackground", columnOptionsScrollbarActiveBackground: "columnOptionsScrollbarActiveBackground", 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: [{
@@ -1204,6 +1258,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }], columnOptionsBackground: [{
                 type: Input
+            }], actualColumnOptionsScrollbarBackground: [{
+                type: Input
+            }], columnOptionsScrollbarBackground: [{
+                type: Input
+            }], actualColumnOptionsScrollbarHoverBackground: [{
+                type: Input
+            }], columnOptionsScrollbarHoverBackground: [{
+                type: Input
+            }], actualColumnOptionsScrollbarActiveBackground: [{
+                type: Input
+            }], columnOptionsScrollbarActiveBackground: [{
+                type: Input
             }], actualColumnOptionsTextColor: [{
                 type: Input
             }], columnOptionsTextColor: [{