igniteui-webcomponents-data-grids 7.1.0-alpha.0 → 7.1.0-alpha.2

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

@@ -27,7 +27,7 @@ import { IgcGridSortDescriptionsChangedEventArgs } from './igc-grid-sort-descrip
 import { IgcGridGroupDescriptionsChangedEventArgs } from './igc-grid-group-descriptions-changed-event-args';
 import { IgcGridSummaryDescriptionsChangedEventArgs } from './igc-grid-summary-descriptions-changed-event-args';
 import { DataGrid } from "./DataGrid";
-import { ensureEnum, ensureBool, CollectionAdapter, getAllPropertyNames, enumToString, fromSpinal, toSpinal, brushToString, stringToBrush, initializePropertiesFromCss, NamePatcher } from "igniteui-webcomponents-core";
+import { ensureEnum, ensureBool, CollectionAdapter, getAllPropertyNames, enumToString, fromSpinal, toSpinal, brushToString, stringToBrush, initializePropertiesFromCss, NamePatcher, moveFocusNext, moveFocusPrevious } from "igniteui-webcomponents-core";
 import { Thickness } from "igniteui-webcomponents-core";
 import { WebComponentRenderer, WebComponentWrapper, PortalManager } from "igniteui-webcomponents-core";
 import { DataGridColumn } from './DataGridColumn';
@@ -133,6 +133,8 @@ import { IgcTextHeaderCellInfo } from "./igc-text-header-cell-info";
 import { IgcFilterCellInfo } from "./igc-filter-cell-info";
 import { CellContentVerticalAlignment_$type } from "./CellContentVerticalAlignment";
 import { IgcDataSourceRootSummariesChangedEventArgs } from "igniteui-webcomponents-core";
+import { BaseControlTheme_$type } from "igniteui-webcomponents-core";
+import { IgcDataBindingEventArgs } from './igc-data-binding-event-args';
 var GridStylingDefaults = {};
 export var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     __extends(IgcDataGridComponent, _super);
@@ -216,6 +218,10 @@ export var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super)
         _this._cellPointerUp_wrapped = null;
         _this._cellClicked = null;
         _this._cellClicked_wrapped = null;
+        _this._filterRowDataBinding = null;
+        _this._filterRowDataBinding_wrapped = null;
+        _this._filterRowDataBound = null;
+        _this._filterRowDataBound_wrapped = null;
         _this._sortDescriptionsChanged = null;
         _this._sortDescriptionsChanged_wrapped = null;
         _this._groupDescriptionsChanged = null;
@@ -468,6 +474,12 @@ export var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super)
             this._scroller.scrollbarBrush = color;
         }
     };
+    IgcDataGridComponent.prototype._moveFocusNext = function () {
+        moveFocusNext(this, true);
+    };
+    IgcDataGridComponent.prototype._moveFocusPrevious = function () {
+        moveFocusPrevious(this);
+    };
     IgcDataGridComponent.prototype.createImplementation = function () {
         //let test = Grid;
         return new DataGrid();
@@ -1021,10 +1033,24 @@ export var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super)
             RegisterElementHelper.registerElement(IgcDataGridComponent.htmlTagName, IgcDataGridComponent);
         }
     };
-    Object.defineProperty(IgcDataGridComponent.prototype, "columnResizingMode", {
+    Object.defineProperty(IgcDataGridComponent.prototype, "theme", {
         /**
-     * Gets or sets the type of column resizing to use.
+     * Gets or sets the base theme used by the grid.
     */
+        get: function () {
+            return this.i.theme;
+        },
+        set: function (v) {
+            this.i.theme = ensureEnum(BaseControlTheme_$type, v);
+            this._a("theme", enumToString(BaseControlTheme_$type, this.i.theme));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridComponent.prototype, "columnResizingMode", {
+        /**
+         * Gets or sets the type of column resizing to use.
+        */
         get: function () {
             return this.i.columnResizingMode;
         },
@@ -2071,6 +2097,17 @@ export var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super)
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(IgcDataGridComponent.prototype, "useNewerColumnOptionsMenu", {
+        get: function () {
+            return this.i.useNewerColumnOptionsMenu;
+        },
+        set: function (v) {
+            this.i.useNewerColumnOptionsMenu = ensureBool(v);
+            this._a("useNewerColumnOptionsMenu", this.i.useNewerColumnOptionsMenu);
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(IgcDataGridComponent.prototype, "isGroupRowSticky", {
         /**
          * Gets or sets if group rows will stick to the top of the grid.
@@ -2865,6 +2902,20 @@ export var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super)
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(IgcDataGridComponent.prototype, "actualBorder", {
+        /**
+         * Gets the actual border color around the grid.
+        */
+        get: function () {
+            return brushToString(this.i.actualBorder);
+        },
+        set: function (v) {
+            this.i.actualBorder = stringToBrush(v);
+            this._a("actualBorder", brushToString(this.i.actualBorder));
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(IgcDataGridComponent.prototype, "border", {
         /**
          * Gets or sets the border color around the grid.
@@ -3108,6 +3159,34 @@ export var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super)
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(IgcDataGridComponent.prototype, "actualBackground", {
+        /**
+         * Gets the actual background for the grid.
+        */
+        get: function () {
+            return brushToString(this.i.actualBackground);
+        },
+        set: function (v) {
+            this.i.actualBackground = stringToBrush(v);
+            this._a("actualBackground", brushToString(this.i.actualBackground));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridComponent.prototype, "background", {
+        /**
+         * Gets or sets the background for the grid.
+        */
+        get: function () {
+            return brushToString(this.i.background);
+        },
+        set: function (v) {
+            this.i.background = stringToBrush(v);
+            this._a("background", brushToString(this.i.background));
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(IgcDataGridComponent.prototype, "responsiveStates", {
         /**
          * A set of states that can be applied to the columns of the grid based on available space.
@@ -3895,6 +3974,181 @@ export var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super)
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(IgcDataGridComponent.prototype, "columnOptionsBackground", {
+        /**
+         * Gets or sets the column options dropdown background color.
+        */
+        get: function () {
+            return brushToString(this.i.columnOptionsBackground);
+        },
+        set: function (v) {
+            this.i.columnOptionsBackground = stringToBrush(v);
+            this._a("columnOptionsBackground", brushToString(this.i.columnOptionsBackground));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridComponent.prototype, "columnOptionsTextColor", {
+        /**
+         * Gets or sets the text color for text inside the column options menu.
+        */
+        get: function () {
+            return brushToString(this.i.columnOptionsTextColor);
+        },
+        set: function (v) {
+            this.i.columnOptionsTextColor = stringToBrush(v);
+            this._a("columnOptionsTextColor", brushToString(this.i.columnOptionsTextColor));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridComponent.prototype, "columnOptionsTextStyle", {
+        /**
+         * Gets or sets the font settings for text inside the column options menu.
+        */
+        get: function () {
+            if (this.i.columnOptionsTextStyle == null) {
+                return null;
+            }
+            return this.i.columnOptionsTextStyle.fontString;
+        },
+        set: function (v) {
+            var fi = new FontInfo();
+            fi.fontString = v;
+            this.i.columnOptionsTextStyle = fi;
+            this._a("columnOptionsTextStyle", this.i.columnOptionsTextStyle != null ? this.i.columnOptionsTextStyle.fontString : "");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridComponent.prototype, "columnOptionsHoverBackgroundColor", {
+        /**
+         * Gets or sets the hover background color inside the column options menu.
+        */
+        get: function () {
+            return brushToString(this.i.columnOptionsHoverBackgroundColor);
+        },
+        set: function (v) {
+            this.i.columnOptionsHoverBackgroundColor = stringToBrush(v);
+            this._a("columnOptionsHoverBackgroundColor", brushToString(this.i.columnOptionsHoverBackgroundColor));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridComponent.prototype, "columnOptionsToolTipBackgroundColor", {
+        /**
+         * Gets or sets the tooltip background color inside the column options menu.
+        */
+        get: function () {
+            return brushToString(this.i.columnOptionsToolTipBackgroundColor);
+        },
+        set: function (v) {
+            this.i.columnOptionsToolTipBackgroundColor = stringToBrush(v);
+            this._a("columnOptionsToolTipBackgroundColor", brushToString(this.i.columnOptionsToolTipBackgroundColor));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridComponent.prototype, "columnOptionsHighlightColor", {
+        /**
+         * Gets or sets the highlight color inside the column options menu.
+        */
+        get: function () {
+            return brushToString(this.i.columnOptionsHighlightColor);
+        },
+        set: function (v) {
+            this.i.columnOptionsHighlightColor = stringToBrush(v);
+            this._a("columnOptionsHighlightColor", brushToString(this.i.columnOptionsHighlightColor));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridComponent.prototype, "columnOptionsSeparatorColor", {
+        /**
+         * Gets or sets the color of separators inside the column options menu.
+        */
+        get: function () {
+            return brushToString(this.i.columnOptionsSeparatorColor);
+        },
+        set: function (v) {
+            this.i.columnOptionsSeparatorColor = stringToBrush(v);
+            this._a("columnOptionsSeparatorColor", brushToString(this.i.columnOptionsSeparatorColor));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridComponent.prototype, "columnOptionsGroupHeaderBackground", {
+        /**
+         * Gets or sets the background color for group headers inside the column options menu.
+        */
+        get: function () {
+            return brushToString(this.i.columnOptionsGroupHeaderBackground);
+        },
+        set: function (v) {
+            this.i.columnOptionsGroupHeaderBackground = stringToBrush(v);
+            this._a("columnOptionsGroupHeaderBackground", brushToString(this.i.columnOptionsGroupHeaderBackground));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridComponent.prototype, "columnOptionsGroupHeaderTextColor", {
+        /**
+         * Gets or sets the text color for group headers inside the column options menu.
+        */
+        get: function () {
+            return brushToString(this.i.columnOptionsGroupHeaderTextColor);
+        },
+        set: function (v) {
+            this.i.columnOptionsGroupHeaderTextColor = stringToBrush(v);
+            this._a("columnOptionsGroupHeaderTextColor", brushToString(this.i.columnOptionsGroupHeaderTextColor));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridComponent.prototype, "columnOptionsGroupHeaderTextStyle", {
+        /**
+         * Gets or sets the font settings for group header text inside the column options menu.
+        */
+        get: function () {
+            if (this.i.columnOptionsGroupHeaderTextStyle == null) {
+                return null;
+            }
+            return this.i.columnOptionsGroupHeaderTextStyle.fontString;
+        },
+        set: function (v) {
+            var fi = new FontInfo();
+            fi.fontString = v;
+            this.i.columnOptionsGroupHeaderTextStyle = fi;
+            this._a("columnOptionsGroupHeaderTextStyle", this.i.columnOptionsGroupHeaderTextStyle != null ? this.i.columnOptionsGroupHeaderTextStyle.fontString : "");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridComponent.prototype, "columnOptionsAccentColor", {
+        get: function () {
+            return brushToString(this.i.columnOptionsAccentColor);
+        },
+        set: function (v) {
+            this.i.columnOptionsAccentColor = stringToBrush(v);
+            this._a("columnOptionsAccentColor", brushToString(this.i.columnOptionsAccentColor));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridComponent.prototype, "columnOptionsRowHeight", {
+        /**
+         * Gets or sets the row height for submenus inside the column options menu.
+        */
+        get: function () {
+            return this.i.columnOptionsRowHeight;
+        },
+        set: function (v) {
+            this.i.columnOptionsRowHeight = +v;
+            this._a("columnOptionsRowHeight", this.i.columnOptionsRowHeight);
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(IgcDataGridComponent.prototype, "allowCopyOperation", {
         get: function () {
             return this.i.allowCopyOperation;
@@ -3906,6 +4160,17 @@ export var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super)
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(IgcDataGridComponent.prototype, "maxSelectedCellRanges", {
+        get: function () {
+            return this.i.maxSelectedCellRanges;
+        },
+        set: function (v) {
+            this.i.maxSelectedCellRanges = +v;
+            this._a("maxSelectedCellRanges", this.i.maxSelectedCellRanges);
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(IgcDataGridComponent.prototype, "deferEventForRowDragSelection", {
         /**
          * Gets or sets whether to defer the SelectedItemsChanged and SelectedKeysChanged events till after the drag selection has completed.
@@ -4670,6 +4935,62 @@ export var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super)
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(IgcDataGridComponent.prototype, "filterRowDataBinding", {
+        get: function () {
+            return this._filterRowDataBinding;
+        },
+        set: function (ev) {
+            var _this = this;
+            if (this._filterRowDataBinding_wrapped !== null) {
+                this.i.filterRowDataBinding = delegateRemove(this.i.filterRowDataBinding, this._filterRowDataBinding_wrapped);
+                this._filterRowDataBinding_wrapped = null;
+                this._filterRowDataBinding = null;
+            }
+            this._filterRowDataBinding = ev;
+            this._filterRowDataBinding_wrapped = function (o, e) {
+                var outerArgs = new IgcDataBindingEventArgs();
+                outerArgs._provideImplementation(e);
+                if (_this.beforeFilterRowDataBinding) {
+                    _this.beforeFilterRowDataBinding(_this, outerArgs);
+                }
+                if (_this._filterRowDataBinding) {
+                    _this._filterRowDataBinding(_this, outerArgs);
+                }
+            };
+            this.i.filterRowDataBinding = delegateCombine(this.i.filterRowDataBinding, this._filterRowDataBinding_wrapped);
+            ;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridComponent.prototype, "filterRowDataBound", {
+        get: function () {
+            return this._filterRowDataBound;
+        },
+        set: function (ev) {
+            var _this = this;
+            if (this._filterRowDataBound_wrapped !== null) {
+                this.i.filterRowDataBound = delegateRemove(this.i.filterRowDataBound, this._filterRowDataBound_wrapped);
+                this._filterRowDataBound_wrapped = null;
+                this._filterRowDataBound = null;
+            }
+            this._filterRowDataBound = ev;
+            this._filterRowDataBound_wrapped = function (o, e) {
+                var outerArgs = new IgcDataBindingEventArgs();
+                outerArgs._provideImplementation(e);
+                if (_this.beforeFilterRowDataBound) {
+                    _this.beforeFilterRowDataBound(_this, outerArgs);
+                }
+                if (_this._filterRowDataBound) {
+                    _this._filterRowDataBound(_this, outerArgs);
+                }
+            };
+            this.i.filterRowDataBound = delegateCombine(this.i.filterRowDataBound, this._filterRowDataBound_wrapped);
+            ;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(IgcDataGridComponent.prototype, "sortDescriptionsChanged", {
         /**
          * Called when sorting has changed.

package/esm5/lib/igc-data-grid-filter-dialog-component.js

@@ -8,6 +8,7 @@ import { GridFilterDialog } from "./GridFilterDialog";
 import { TypeRegistrar } from "igniteui-webcomponents-core";
 import { NamePatcher, getAllPropertyNames, fromSpinal, toSpinal, ensureBool, brushToString, stringToBrush, initializePropertiesFromCss } from "igniteui-webcomponents-core";
 import { RegisterElementHelper } from "igniteui-webcomponents-core";
+import { FontInfo } from "igniteui-webcomponents-core";
 /**
  * An advanced grid for displaying data.
 */
@@ -156,11 +157,11 @@ export var IgcDataGridFilterDialogComponent = /** @class */ /*@__PURE__*/ (funct
     };
     Object.defineProperty(IgcDataGridFilterDialogComponent.prototype, "isAnimationEnabled", {
         get: function () {
-            return this.i.ab;
+            return this.i.ai;
         },
         set: function (v) {
-            this.i.ab = ensureBool(v);
-            this._a("isAnimationEnabled", this.i.ab);
+            this.i.ai = ensureBool(v);
+            this._a("isAnimationEnabled", this.i.ai);
         },
         enumerable: false,
         configurable: true
@@ -172,11 +173,11 @@ export var IgcDataGridFilterDialogComponent = /** @class */ /*@__PURE__*/ (funct
          * to appear blurry.
         */
         get: function () {
-            return this.i.aj;
+            return this.i.aq;
         },
         set: function (v) {
-            this.i.aj = +v;
-            this._a("pixelScalingRatio", this.i.aj);
+            this.i.aq = +v;
+            this._a("pixelScalingRatio", this.i.aq);
         },
         enumerable: false,
         configurable: true
@@ -188,40 +189,215 @@ export var IgcDataGridFilterDialogComponent = /** @class */ /*@__PURE__*/ (funct
          * to appear blurry.
         */
         get: function () {
-            return this.i.ai;
+            return this.i.ap;
         },
         set: function (v) {
-            this.i.ai = +v;
-            this._a("actualPixelScalingRatio", this.i.ai);
+            this.i.ap = +v;
+            this._a("actualPixelScalingRatio", this.i.ap);
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcDataGridFilterDialogComponent.prototype, "iconColor", {
         get: function () {
-            return brushToString(this.i.bw);
+            return brushToString(this.i.c1);
         },
         set: function (v) {
-            this.i.bw = stringToBrush(v);
-            this._a("iconColor", brushToString(this.i.bw));
+            this.i.c1 = stringToBrush(v);
+            this._a("iconColor", brushToString(this.i.c1));
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcDataGridFilterDialogComponent.prototype, "viewSize", {
         get: function () {
-            return this.i.ak;
+            return this.i.ar;
+        },
+        set: function (v) {
+            this.i.ar = +v;
+            this._a("viewSize", this.i.ar);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridFilterDialogComponent.prototype, "columnOptionsBackground", {
+        /**
+         * Gets or sets the column options dropdown background color.
+        */
+        get: function () {
+            return brushToString(this.i.ct);
+        },
+        set: function (v) {
+            this.i.ct = stringToBrush(v);
+            this._a("columnOptionsBackground", brushToString(this.i.ct));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridFilterDialogComponent.prototype, "columnOptionsTextColor", {
+        /**
+         * Gets or sets the text color for text inside the column options menu.
+        */
+        get: function () {
+            return brushToString(this.i.cz);
+        },
+        set: function (v) {
+            this.i.cz = stringToBrush(v);
+            this._a("columnOptionsTextColor", brushToString(this.i.cz));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridFilterDialogComponent.prototype, "columnOptionsTextStyle", {
+        /**
+         * Gets or sets the font settings for text inside the column options menu.
+        */
+        get: function () {
+            if (this.i.ab == null) {
+                return null;
+            }
+            return this.i.ab.fontString;
+        },
+        set: function (v) {
+            var fi = new FontInfo();
+            fi.fontString = v;
+            this.i.ab = fi;
+            this._a("columnOptionsTextStyle", this.i.ab != null ? this.i.ab.fontString : "");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridFilterDialogComponent.prototype, "columnOptionsHoverBackgroundColor", {
+        /**
+         * Gets or sets the hover background color inside the column options menu.
+        */
+        get: function () {
+            return brushToString(this.i.cx);
+        },
+        set: function (v) {
+            this.i.cx = stringToBrush(v);
+            this._a("columnOptionsHoverBackgroundColor", brushToString(this.i.cx));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridFilterDialogComponent.prototype, "columnOptionsToolTipBackgroundColor", {
+        /**
+         * Gets or sets the tooltip background color inside the column options menu.
+        */
+        get: function () {
+            return brushToString(this.i.c0);
+        },
+        set: function (v) {
+            this.i.c0 = stringToBrush(v);
+            this._a("columnOptionsToolTipBackgroundColor", brushToString(this.i.c0));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridFilterDialogComponent.prototype, "columnOptionsHighlightColor", {
+        /**
+         * Gets or sets the highlight color inside the column options menu.
+        */
+        get: function () {
+            return brushToString(this.i.cw);
+        },
+        set: function (v) {
+            this.i.cw = stringToBrush(v);
+            this._a("columnOptionsHighlightColor", brushToString(this.i.cw));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridFilterDialogComponent.prototype, "columnOptionsSeparatorColor", {
+        /**
+         * Gets or sets the color of separators inside the column options menu.
+        */
+        get: function () {
+            return brushToString(this.i.cy);
+        },
+        set: function (v) {
+            this.i.cy = stringToBrush(v);
+            this._a("columnOptionsSeparatorColor", brushToString(this.i.cy));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridFilterDialogComponent.prototype, "columnOptionsGroupHeaderBackground", {
+        /**
+         * Gets or sets the background color for group headers inside the column options menu.
+        */
+        get: function () {
+            return brushToString(this.i.cu);
+        },
+        set: function (v) {
+            this.i.cu = stringToBrush(v);
+            this._a("columnOptionsGroupHeaderBackground", brushToString(this.i.cu));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridFilterDialogComponent.prototype, "columnOptionsGroupHeaderTextColor", {
+        /**
+         * Gets or sets the text color for group headers inside the column options menu.
+        */
+        get: function () {
+            return brushToString(this.i.cv);
+        },
+        set: function (v) {
+            this.i.cv = stringToBrush(v);
+            this._a("columnOptionsGroupHeaderTextColor", brushToString(this.i.cv));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridFilterDialogComponent.prototype, "columnOptionsGroupHeaderTextStyle", {
+        /**
+         * Gets or sets the font settings for group header text inside the column options menu.
+        */
+        get: function () {
+            if (this.i.aa == null) {
+                return null;
+            }
+            return this.i.aa.fontString;
+        },
+        set: function (v) {
+            var fi = new FontInfo();
+            fi.fontString = v;
+            this.i.aa = fi;
+            this._a("columnOptionsGroupHeaderTextStyle", this.i.aa != null ? this.i.aa.fontString : "");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridFilterDialogComponent.prototype, "columnOptionsAccentColor", {
+        get: function () {
+            return brushToString(this.i.cs);
+        },
+        set: function (v) {
+            this.i.cs = stringToBrush(v);
+            this._a("columnOptionsAccentColor", brushToString(this.i.cs));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridFilterDialogComponent.prototype, "columnOptionsRowHeight", {
+        /**
+         * Gets or sets the row height for submenus inside the column options menu.
+        */
+        get: function () {
+            return this.i.ax;
         },
         set: function (v) {
-            this.i.ak = +v;
-            this._a("viewSize", this.i.ak);
+            this.i.ax = +v;
+            this._a("columnOptionsRowHeight", this.i.ax);
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcDataGridFilterDialogComponent.prototype, "isOpen", {
         get: function () {
-            return this.i.ac;
+            return this.i.aj;
         },
         enumerable: false,
         configurable: true
@@ -312,16 +488,16 @@ export var IgcDataGridFilterDialogComponent = /** @class */ /*@__PURE__*/ (funct
         this._inStyling = false;
     };
     IgcDataGridFilterDialogComponent.prototype.notifySizeChanged = function (width, height) {
-        this.i.be(width, height);
+        this.i.b1(width, height);
     };
     IgcDataGridFilterDialogComponent.prototype.notifyCellSizeChanged = function () {
-        this.i.bd();
+        this.i.b0();
     };
     IgcDataGridFilterDialogComponent.prototype.showIcon = function () {
-        this.i.br();
+        this.i.ce();
     };
     IgcDataGridFilterDialogComponent.prototype.hideIcon = function () {
-        this.i.bb();
+        this.i.by();
     };
     IgcDataGridFilterDialogComponent.prototype.getDesiredToolbarActions = function () {
         var iv = this.i.getDesiredToolbarActions();