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

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

@@ -359,6 +359,16 @@ export let IgxDataGridComponent = /*@__PURE__*/ (() => {
                 this._scroller.scrollbarBrush = color;
             }
         }
+        _setScrollbarHoverColor(color) {
+            if (this._scroller) {
+                this._scroller.scrollbarHoverBrush = color;
+            }
+        }
+        _setScrollbarActiveColor(color) {
+            if (this._scroller) {
+                this._scroller.scrollbarActiveBrush = color;
+            }
+        }
         _moveFocusNext() {
             moveFocusNext(this._elRef.element.nativeElement, true);
         }
@@ -672,32 +682,64 @@ export let IgxDataGridComponent = /*@__PURE__*/ (() => {
         }
         set editRowBorderWidthBottom(v) {
             this.ensureEditRowBorderWidth();
-            this.i.editRowBorderWidth.bottom = +v;
-            this.i.editRowBorderWidth = this.i.editRowBorderWidth;
+            const __nv = +v;
+            if (this.i.editRowBorderWidth.bottom === __nv) {
+                return;
+            }
+            const __copy = new Thickness(2);
+            __copy.bottom = __nv;
+            __copy.left = this.i.editRowBorderWidth.left;
+            __copy.right = this.i.editRowBorderWidth.right;
+            __copy.top = this.i.editRowBorderWidth.top;
+            this.i.editRowBorderWidth = __copy;
         }
         get editRowBorderWidthLeft() {
             return this.i.editRowBorderWidth ? this.i.editRowBorderWidth.left : NaN;
         }
         set editRowBorderWidthLeft(v) {
             this.ensureEditRowBorderWidth();
-            this.i.editRowBorderWidth.left = +v;
-            this.i.editRowBorderWidth = this.i.editRowBorderWidth;
+            const __nv = +v;
+            if (this.i.editRowBorderWidth.left === __nv) {
+                return;
+            }
+            const __copy = new Thickness(2);
+            __copy.left = __nv;
+            __copy.bottom = this.i.editRowBorderWidth.bottom;
+            __copy.right = this.i.editRowBorderWidth.right;
+            __copy.top = this.i.editRowBorderWidth.top;
+            this.i.editRowBorderWidth = __copy;
         }
         get editRowBorderWidthRight() {
             return this.i.editRowBorderWidth ? this.i.editRowBorderWidth.right : NaN;
         }
         set editRowBorderWidthRight(v) {
             this.ensureEditRowBorderWidth();
-            this.i.editRowBorderWidth.right = +v;
-            this.i.editRowBorderWidth = this.i.editRowBorderWidth;
+            const __nv = +v;
+            if (this.i.editRowBorderWidth.right === __nv) {
+                return;
+            }
+            const __copy = new Thickness(2);
+            __copy.right = __nv;
+            __copy.bottom = this.i.editRowBorderWidth.bottom;
+            __copy.left = this.i.editRowBorderWidth.left;
+            __copy.top = this.i.editRowBorderWidth.top;
+            this.i.editRowBorderWidth = __copy;
         }
         get editRowBorderWidthTop() {
             return this.i.editRowBorderWidth ? this.i.editRowBorderWidth.top : NaN;
         }
         set editRowBorderWidthTop(v) {
             this.ensureEditRowBorderWidth();
-            this.i.editRowBorderWidth.top = +v;
-            this.i.editRowBorderWidth = this.i.editRowBorderWidth;
+            const __nv = +v;
+            if (this.i.editRowBorderWidth.top === __nv) {
+                return;
+            }
+            const __copy = new Thickness(2);
+            __copy.top = __nv;
+            __copy.bottom = this.i.editRowBorderWidth.bottom;
+            __copy.left = this.i.editRowBorderWidth.left;
+            __copy.right = this.i.editRowBorderWidth.right;
+            this.i.editRowBorderWidth = __copy;
         }
         ensureEditRowBorderWidth() {
             if (this.i.editRowBorderWidth) {
@@ -1982,32 +2024,64 @@ export let IgxDataGridComponent = /*@__PURE__*/ (() => {
         }
         set borderWidthBottom(v) {
             this.ensureBorderWidth();
-            this.i.borderWidth.bottom = +v;
-            this.i.borderWidth = this.i.borderWidth;
+            const __nv = +v;
+            if (this.i.borderWidth.bottom === __nv) {
+                return;
+            }
+            const __copy = new Thickness(2);
+            __copy.bottom = __nv;
+            __copy.left = this.i.borderWidth.left;
+            __copy.right = this.i.borderWidth.right;
+            __copy.top = this.i.borderWidth.top;
+            this.i.borderWidth = __copy;
         }
         get borderWidthLeft() {
             return this.i.borderWidth ? this.i.borderWidth.left : NaN;
         }
         set borderWidthLeft(v) {
             this.ensureBorderWidth();
-            this.i.borderWidth.left = +v;
-            this.i.borderWidth = this.i.borderWidth;
+            const __nv = +v;
+            if (this.i.borderWidth.left === __nv) {
+                return;
+            }
+            const __copy = new Thickness(2);
+            __copy.left = __nv;
+            __copy.bottom = this.i.borderWidth.bottom;
+            __copy.right = this.i.borderWidth.right;
+            __copy.top = this.i.borderWidth.top;
+            this.i.borderWidth = __copy;
         }
         get borderWidthRight() {
             return this.i.borderWidth ? this.i.borderWidth.right : NaN;
         }
         set borderWidthRight(v) {
             this.ensureBorderWidth();
-            this.i.borderWidth.right = +v;
-            this.i.borderWidth = this.i.borderWidth;
+            const __nv = +v;
+            if (this.i.borderWidth.right === __nv) {
+                return;
+            }
+            const __copy = new Thickness(2);
+            __copy.right = __nv;
+            __copy.bottom = this.i.borderWidth.bottom;
+            __copy.left = this.i.borderWidth.left;
+            __copy.top = this.i.borderWidth.top;
+            this.i.borderWidth = __copy;
         }
         get borderWidthTop() {
             return this.i.borderWidth ? this.i.borderWidth.top : NaN;
         }
         set borderWidthTop(v) {
             this.ensureBorderWidth();
-            this.i.borderWidth.top = +v;
-            this.i.borderWidth = this.i.borderWidth;
+            const __nv = +v;
+            if (this.i.borderWidth.top === __nv) {
+                return;
+            }
+            const __copy = new Thickness(2);
+            __copy.top = __nv;
+            __copy.bottom = this.i.borderWidth.bottom;
+            __copy.left = this.i.borderWidth.left;
+            __copy.right = this.i.borderWidth.right;
+            this.i.borderWidth = __copy;
         }
         ensureBorderWidth() {
             if (this.i.borderWidth) {
@@ -2029,32 +2103,64 @@ export let IgxDataGridComponent = /*@__PURE__*/ (() => {
         }
         set cornerRadiusBottomRight(v) {
             this.ensureCornerRadius();
-            this.i.cornerRadius.c = +v;
-            this.i.cornerRadius = this.i.cornerRadius;
+            const __nv = +v;
+            if (this.i.cornerRadius.c === __nv) {
+                return;
+            }
+            const __copy = new CornerRadius(2);
+            __copy.c = __nv;
+            __copy.b = this.i.cornerRadius.b;
+            __copy.d = this.i.cornerRadius.d;
+            __copy.e = this.i.cornerRadius.e;
+            this.i.cornerRadius = __copy;
         }
         get cornerRadiusBottomLeft() {
             return this.i.cornerRadius ? this.i.cornerRadius.b : NaN;
         }
         set cornerRadiusBottomLeft(v) {
             this.ensureCornerRadius();
-            this.i.cornerRadius.b = +v;
-            this.i.cornerRadius = this.i.cornerRadius;
+            const __nv = +v;
+            if (this.i.cornerRadius.b === __nv) {
+                return;
+            }
+            const __copy = new CornerRadius(2);
+            __copy.b = __nv;
+            __copy.c = this.i.cornerRadius.c;
+            __copy.d = this.i.cornerRadius.d;
+            __copy.e = this.i.cornerRadius.e;
+            this.i.cornerRadius = __copy;
         }
         get cornerRadiusTopLeft() {
             return this.i.cornerRadius ? this.i.cornerRadius.d : NaN;
         }
         set cornerRadiusTopLeft(v) {
             this.ensureCornerRadius();
-            this.i.cornerRadius.d = +v;
-            this.i.cornerRadius = this.i.cornerRadius;
+            const __nv = +v;
+            if (this.i.cornerRadius.d === __nv) {
+                return;
+            }
+            const __copy = new CornerRadius(2);
+            __copy.d = __nv;
+            __copy.c = this.i.cornerRadius.c;
+            __copy.b = this.i.cornerRadius.b;
+            __copy.e = this.i.cornerRadius.e;
+            this.i.cornerRadius = __copy;
         }
         get cornerRadiusTopRight() {
             return this.i.cornerRadius ? this.i.cornerRadius.e : NaN;
         }
         set cornerRadiusTopRight(v) {
             this.ensureCornerRadius();
-            this.i.cornerRadius.e = +v;
-            this.i.cornerRadius = this.i.cornerRadius;
+            const __nv = +v;
+            if (this.i.cornerRadius.e === __nv) {
+                return;
+            }
+            const __copy = new CornerRadius(2);
+            __copy.e = __nv;
+            __copy.c = this.i.cornerRadius.c;
+            __copy.b = this.i.cornerRadius.b;
+            __copy.d = this.i.cornerRadius.d;
+            this.i.cornerRadius = __copy;
         }
         ensureCornerRadius() {
             if (this.i.cornerRadius) {
@@ -2067,32 +2173,64 @@ export let IgxDataGridComponent = /*@__PURE__*/ (() => {
         }
         set actualCornerRadiusBottomRight(v) {
             this.ensureActualCornerRadius();
-            this.i.actualCornerRadius.c = +v;
-            this.i.actualCornerRadius = this.i.actualCornerRadius;
+            const __nv = +v;
+            if (this.i.actualCornerRadius.c === __nv) {
+                return;
+            }
+            const __copy = new CornerRadius(2);
+            __copy.c = __nv;
+            __copy.b = this.i.actualCornerRadius.b;
+            __copy.d = this.i.actualCornerRadius.d;
+            __copy.e = this.i.actualCornerRadius.e;
+            this.i.actualCornerRadius = __copy;
         }
         get actualCornerRadiusBottomLeft() {
             return this.i.actualCornerRadius ? this.i.actualCornerRadius.b : NaN;
         }
         set actualCornerRadiusBottomLeft(v) {
             this.ensureActualCornerRadius();
-            this.i.actualCornerRadius.b = +v;
-            this.i.actualCornerRadius = this.i.actualCornerRadius;
+            const __nv = +v;
+            if (this.i.actualCornerRadius.b === __nv) {
+                return;
+            }
+            const __copy = new CornerRadius(2);
+            __copy.b = __nv;
+            __copy.c = this.i.actualCornerRadius.c;
+            __copy.d = this.i.actualCornerRadius.d;
+            __copy.e = this.i.actualCornerRadius.e;
+            this.i.actualCornerRadius = __copy;
         }
         get actualCornerRadiusTopLeft() {
             return this.i.actualCornerRadius ? this.i.actualCornerRadius.d : NaN;
         }
         set actualCornerRadiusTopLeft(v) {
             this.ensureActualCornerRadius();
-            this.i.actualCornerRadius.d = +v;
-            this.i.actualCornerRadius = this.i.actualCornerRadius;
+            const __nv = +v;
+            if (this.i.actualCornerRadius.d === __nv) {
+                return;
+            }
+            const __copy = new CornerRadius(2);
+            __copy.d = __nv;
+            __copy.c = this.i.actualCornerRadius.c;
+            __copy.b = this.i.actualCornerRadius.b;
+            __copy.e = this.i.actualCornerRadius.e;
+            this.i.actualCornerRadius = __copy;
         }
         get actualCornerRadiusTopRight() {
             return this.i.actualCornerRadius ? this.i.actualCornerRadius.e : NaN;
         }
         set actualCornerRadiusTopRight(v) {
             this.ensureActualCornerRadius();
-            this.i.actualCornerRadius.e = +v;
-            this.i.actualCornerRadius = this.i.actualCornerRadius;
+            const __nv = +v;
+            if (this.i.actualCornerRadius.e === __nv) {
+                return;
+            }
+            const __copy = new CornerRadius(2);
+            __copy.e = __nv;
+            __copy.c = this.i.actualCornerRadius.c;
+            __copy.b = this.i.actualCornerRadius.b;
+            __copy.d = this.i.actualCornerRadius.d;
+            this.i.actualCornerRadius = __copy;
         }
         ensureActualCornerRadius() {
             if (this.i.actualCornerRadius) {
@@ -2712,6 +2850,24 @@ export let IgxDataGridComponent = /*@__PURE__*/ (() => {
         set scrollbarBackground(v) {
             this.i.scrollbarBackground = stringToBrush(v);
         }
+        /**
+         * Gets or sets the scrollbar thumb background color when the pointer is over it.
+        */
+        get scrollbarHoverBackground() {
+            return brushToString(this.i.scrollbarHoverBackground);
+        }
+        set scrollbarHoverBackground(v) {
+            this.i.scrollbarHoverBackground = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the scrollbar thumb background color when the user is dragging it.
+        */
+        get scrollbarActiveBackground() {
+            return brushToString(this.i.scrollbarActiveBackground);
+        }
+        set scrollbarActiveBackground(v) {
+            this.i.scrollbarActiveBackground = stringToBrush(v);
+        }
         /**
          * Gets or sets the column options dropdown background color.
         */
@@ -2721,6 +2877,33 @@ export let IgxDataGridComponent = /*@__PURE__*/ (() => {
         set columnOptionsBackground(v) {
             this.i.columnOptionsBackground = stringToBrush(v);
         }
+        /**
+         * Gets or sets the scrollbar background color for checkbox lists in the column options dialog.
+        */
+        get columnOptionsScrollbarBackground() {
+            return brushToString(this.i.columnOptionsScrollbarBackground);
+        }
+        set columnOptionsScrollbarBackground(v) {
+            this.i.columnOptionsScrollbarBackground = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the scrollbar thumb hover background color for checkbox lists in the column options dialog.
+        */
+        get columnOptionsScrollbarHoverBackground() {
+            return brushToString(this.i.columnOptionsScrollbarHoverBackground);
+        }
+        set columnOptionsScrollbarHoverBackground(v) {
+            this.i.columnOptionsScrollbarHoverBackground = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the scrollbar thumb active (dragging) background color for checkbox lists in the column options dialog.
+        */
+        get columnOptionsScrollbarActiveBackground() {
+            return brushToString(this.i.columnOptionsScrollbarActiveBackground);
+        }
+        set columnOptionsScrollbarActiveBackground(v) {
+            this.i.columnOptionsScrollbarActiveBackground = stringToBrush(v);
+        }
         /**
          * Gets or sets the text color for text inside the column options menu.
         */
@@ -4061,7 +4244,7 @@ export let IgxDataGridComponent = /*@__PURE__*/ (() => {
         }
     }
     IgxDataGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxDataGridComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i0.NgZone }, { token: i0.ComponentFactoryResolver }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-    IgxDataGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: IgxDataGridComponent, selector: "igx-data-grid", inputs: { height: "height", width: "width", dataSource: "dataSource", theme: "theme", columnResizingMode: "columnResizingMode", columnMovingMode: "columnMovingMode", isRowHoverEnabled: "isRowHoverEnabled", rowHoverBackground: "rowHoverBackground", rowHoverTextColor: "rowHoverTextColor", editRowBorder: "editRowBorder", editRowBorderWidthBottom: "editRowBorderWidthBottom", editRowBorderWidthLeft: "editRowBorderWidthLeft", editRowBorderWidthRight: "editRowBorderWidthRight", editRowBorderWidthTop: "editRowBorderWidthTop", sectionHeader: "sectionHeader", summaryRowRoot: "summaryRowRoot", summaryRowSection: "summaryRowSection", rowSeparator: "rowSeparator", headerRowSeparator: "headerRowSeparator", headerSeparator: "headerSeparator", columnResizingSeparator: "columnResizingSeparator", columnMovingSeparator: "columnMovingSeparator", pinnedAreaSeparator: "pinnedAreaSeparator", autoGenerateDesiredProperties: "autoGenerateDesiredProperties", dataSourceDesiredProperties: "dataSourceDesiredProperties", density: "density", actualRowHeight: "actualRowHeight", rowHeight: "rowHeight", defaultColumnMinWidth: "defaultColumnMinWidth", actualHeaderHeight: "actualHeaderHeight", headerHeight: "headerHeight", headerClickAction: "headerClickAction", editMode: "editMode", editModeClickAction: "editModeClickAction", editOnKeyPress: "editOnKeyPress", autoGenerateColumns: "autoGenerateColumns", rowSeparatorHeight: "rowSeparatorHeight", isPlaceholderRenderingEnabled: "isPlaceholderRenderingEnabled", columnAddingAnimationMode: "columnAddingAnimationMode", columnPropertyUpdatingAnimationMode: "columnPropertyUpdatingAnimationMode", cellDataLoadedAnimationMode: "cellDataLoadedAnimationMode", rowSelectionAnimationMode: "rowSelectionAnimationMode", rowHoverAnimationMode: "rowHoverAnimationMode", cellSelectionAnimationMode: "cellSelectionAnimationMode", animationSettings: "animationSettings", columnResizingAnimationMode: "columnResizingAnimationMode", columnShowingAnimationMode: "columnShowingAnimationMode", columnMovingAnimationMode: "columnMovingAnimationMode", columnHidingAnimationMode: "columnHidingAnimationMode", columnExchangingAnimationMode: "columnExchangingAnimationMode", selectionMode: "selectionMode", activationMode: "activationMode", selectionBehavior: "selectionBehavior", mouseDragSelectionEnabled: "mouseDragSelectionEnabled", selectedItems: "selectedItems", selectedKeys: "selectedKeys", selectedCells: "selectedCells", selectedCellRanges: "selectedCellRanges", pinnedItems: "pinnedItems", pinnedKeys: "pinnedKeys", isColumnOptionsEnabled: "isColumnOptionsEnabled", useNewerColumnOptionsMenu: "useNewerColumnOptionsMenu", isGroupRowSticky: "isGroupRowSticky", isHeaderSeparatorVisible: "isHeaderSeparatorVisible", cellSelectedBackground: "cellSelectedBackground", cellSelectedTextColor: "cellSelectedTextColor", sectionHeaderSelectedBackground: "sectionHeaderSelectedBackground", summaryRootBackground: "summaryRootBackground", summarySectionBackground: "summarySectionBackground", pinnedRowOpacity: "pinnedRowOpacity", editTextStyle: "editTextStyle", editOpacity: "editOpacity", deletedTextColor: "deletedTextColor", stickyRowBackground: "stickyRowBackground", pinnedRowBackground: "pinnedRowBackground", lastStickyRowBackground: "lastStickyRowBackground", activeCell: "activeCell", cellBackground: "cellBackground", cellTextColor: "cellTextColor", headerSortIndicatorColor: "headerSortIndicatorColor", headerSortIndicatorStyle: "headerSortIndicatorStyle", cellTextStyle: "cellTextStyle", sectionHeaderBackground: "sectionHeaderBackground", sectionHeaderTextColor: "sectionHeaderTextColor", sectionHeaderExpansionIndicatorIconColor: "sectionHeaderExpansionIndicatorIconColor", sectionHeaderTextStyle: "sectionHeaderTextStyle", summaryRootLabelTextStyle: "summaryRootLabelTextStyle", summarySectionLabelTextStyle: "summarySectionLabelTextStyle", summaryRootValueTextColor: "summaryRootValueTextColor", summaryRootValueTextStyle: "summaryRootValueTextStyle", summarySectionValueTextStyle: "summarySectionValueTextStyle", summarySectionValueTextColor: "summarySectionValueTextColor", summaryRootLabelTextColor: "summaryRootLabelTextColor", summarySectionLabelTextColor: "summarySectionLabelTextColor", summaryRootSelectedBackground: "summaryRootSelectedBackground", summarySectionSelectedBackground: "summarySectionSelectedBackground", pinnedAreaSeparatorWidth: "pinnedAreaSeparatorWidth", headerSeparatorWidth: "headerSeparatorWidth", headerSeparatorBackground: "headerSeparatorBackground", headerBackground: "headerBackground", headerTextColor: "headerTextColor", headerTextStyle: "headerTextStyle", rowSeparatorBackground: "rowSeparatorBackground", headerRowSeparatorBackground: "headerRowSeparatorBackground", rowSeparatorStickyRowBackground: "rowSeparatorStickyRowBackground", rowSeparatorLastStickyRowBackground: "rowSeparatorLastStickyRowBackground", rowSeparatorPinnedRowBackground: "rowSeparatorPinnedRowBackground", columnResizingSeparatorWidth: "columnResizingSeparatorWidth", columnResizingSeparatorOpacity: "columnResizingSeparatorOpacity", columnMovingSeparatorWidth: "columnMovingSeparatorWidth", columnMovingSeparatorOpacity: "columnMovingSeparatorOpacity", columnResizingSeparatorBackground: "columnResizingSeparatorBackground", columnMovingSeparatorBackground: "columnMovingSeparatorBackground", shiftSectionContent: "shiftSectionContent", columnOptionsIconAlignment: "columnOptionsIconAlignment", columnOptionsIconColor: "columnOptionsIconColor", columnOptionsIconBehavior: "columnOptionsIconBehavior", actualBorder: "actualBorder", border: "border", actualBorderWidth: "actualBorderWidth", borderWidthBottom: "borderWidthBottom", borderWidthLeft: "borderWidthLeft", borderWidthRight: "borderWidthRight", borderWidthTop: "borderWidthTop", notifyOnAllSelectionChanges: "notifyOnAllSelectionChanges", cornerRadiusBottomRight: "cornerRadiusBottomRight", cornerRadiusBottomLeft: "cornerRadiusBottomLeft", cornerRadiusTopLeft: "cornerRadiusTopLeft", cornerRadiusTopRight: "cornerRadiusTopRight", actualCornerRadiusBottomRight: "actualCornerRadiusBottomRight", actualCornerRadiusBottomLeft: "actualCornerRadiusBottomLeft", actualCornerRadiusTopLeft: "actualCornerRadiusTopLeft", actualCornerRadiusTopRight: "actualCornerRadiusTopRight", isActiveCellStyleEnabled: "isActiveCellStyleEnabled", stopPropagation: "stopPropagation", actualBackground: "actualBackground", background: "background", responsiveStates: "responsiveStates", initialSorts: "initialSorts", initialGroups: "initialGroups", initialSummaries: "initialSummaries", summaryScope: "summaryScope", isGroupCollapsable: "isGroupCollapsable", groupHeaderDisplayMode: "groupHeaderDisplayMode", isGroupExpandedDefault: "isGroupExpandedDefault", expandCollapseOnSectionHeaderClick: "expandCollapseOnSectionHeaderClick", groupSummaryDisplayMode: "groupSummaryDisplayMode", autoAcceptEdits: "autoAcceptEdits", primaryKey: "primaryKey", actualPrimaryKey: "actualPrimaryKey", actualColumns: "actualColumns", reactsToSortChanges: "reactsToSortChanges", reactsToGroupChanges: "reactsToGroupChanges", reactsToFilterChanges: "reactsToFilterChanges", enterBehavior: "enterBehavior", enterBehaviorAfterEdit: "enterBehaviorAfterEdit", isColumnOptionsSummariesEnabled: "isColumnOptionsSummariesEnabled", isColumnOptionsGroupingEnabled: "isColumnOptionsGroupingEnabled", mergedCellMode: "mergedCellMode", mergedCellEvaluationCriteria: "mergedCellEvaluationCriteria", mergedCellVerticalAlignment: "mergedCellVerticalAlignment", filterUIType: "filterUIType", filterLogicalOperator: "filterLogicalOperator", filterComparisonType: "filterComparisonType", todayOverride: "todayOverride", clearSelectionOnEscape: "clearSelectionOnEscape", pageSize: "pageSize", isToolbarColumnChooserVisible: "isToolbarColumnChooserVisible", isToolbarColumnPinningVisible: "isToolbarColumnPinningVisible", toolbarTitle: "toolbarTitle", toolbarColumnChooserText: "toolbarColumnChooserText", toolbarColumnChooserTitle: "toolbarColumnChooserTitle", toolbarColumnPinningText: "toolbarColumnPinningText", toolbarColumnPinningTitle: "toolbarColumnPinningTitle", scrollbarStyle: "scrollbarStyle", scrollbarBackground: "scrollbarBackground", columnOptionsBackground: "columnOptionsBackground", columnOptionsTextColor: "columnOptionsTextColor", columnOptionsTextStyle: "columnOptionsTextStyle", columnOptionsHoverBackgroundColor: "columnOptionsHoverBackgroundColor", columnOptionsToolTipBackgroundColor: "columnOptionsToolTipBackgroundColor", columnOptionsToolTipTextColor: "columnOptionsToolTipTextColor", columnOptionsHighlightColor: "columnOptionsHighlightColor", columnOptionsSeparatorColor: "columnOptionsSeparatorColor", columnOptionsGroupHeaderBackground: "columnOptionsGroupHeaderBackground", columnOptionsGroupHeaderTextColor: "columnOptionsGroupHeaderTextColor", columnOptionsGroupHeaderTextStyle: "columnOptionsGroupHeaderTextStyle", columnOptionsAccentColor: "columnOptionsAccentColor", columnOptionsRowHeight: "columnOptionsRowHeight", allowCopyOperation: "allowCopyOperation", maxSelectedCellRanges: "maxSelectedCellRanges", deferEventForRowDragSelection: "deferEventForRowDragSelection" }, outputs: { filterExpressionsChanging: "filterExpressionsChanging", filterExpressionsChanged: "filterExpressionsChanged", cellPreviewPointerDown: "cellPreviewPointerDown", cellPreviewPointerUp: "cellPreviewPointerUp", cellPointerDown: "cellPointerDown", cellPointerUp: "cellPointerUp", cellClicked: "cellClicked", filterRowDataBinding: "filterRowDataBinding", filterRowDataBound: "filterRowDataBound", sortDescriptionsChanged: "sortDescriptionsChanged", groupDescriptionsChanged: "groupDescriptionsChanged", summaryDescriptionsChanged: "summaryDescriptionsChanged", columnHiddenChanged: "columnHiddenChanged", columnPinnedChanged: "columnPinnedChanged", cellValueChanging: "cellValueChanging", dataCommitted: "dataCommitted", dataCommitting: "dataCommitting", rootSummariesChanged: "rootSummariesChanged", sizeChanged: "sizeChanged", actualColumnsChanged: "actualColumnsChanged", columnsAutoGenerated: "columnsAutoGenerated", selectedItemsChanged: "selectedItemsChanged", selectedKeysChanged: "selectedKeysChanged", selectedCellsChanged: "selectedCellsChanged", selectionChanged: "selectionChanged", activeCellChanged: "activeCellChanged", selectedCellRangesChanged: "selectedCellRangesChanged", columnWidthChanged: "columnWidthChanged", cellEditStarted: "cellEditStarted", cellEditEnded: "cellEditEnded", rowEditStarted: "rowEditStarted", rowEditEnded: "rowEditEnded", customFilterRequested: "customFilterRequested", actualPrimaryKeyChange: "actualPrimaryKeyChange" }, host: { classAttribute: "ig-data-grid igx-data-grid" }, providers: [], queries: [{ propertyName: "contentColumns", predicate: IgxDataGridColumnComponent }], viewQueries: [{ propertyName: "_dynamicContent", first: true, predicate: ["dynamicContent"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `
+    IgxDataGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: IgxDataGridComponent, selector: "igx-data-grid", inputs: { height: "height", width: "width", dataSource: "dataSource", theme: "theme", columnResizingMode: "columnResizingMode", columnMovingMode: "columnMovingMode", isRowHoverEnabled: "isRowHoverEnabled", rowHoverBackground: "rowHoverBackground", rowHoverTextColor: "rowHoverTextColor", editRowBorder: "editRowBorder", editRowBorderWidthBottom: "editRowBorderWidthBottom", editRowBorderWidthLeft: "editRowBorderWidthLeft", editRowBorderWidthRight: "editRowBorderWidthRight", editRowBorderWidthTop: "editRowBorderWidthTop", sectionHeader: "sectionHeader", summaryRowRoot: "summaryRowRoot", summaryRowSection: "summaryRowSection", rowSeparator: "rowSeparator", headerRowSeparator: "headerRowSeparator", headerSeparator: "headerSeparator", columnResizingSeparator: "columnResizingSeparator", columnMovingSeparator: "columnMovingSeparator", pinnedAreaSeparator: "pinnedAreaSeparator", autoGenerateDesiredProperties: "autoGenerateDesiredProperties", dataSourceDesiredProperties: "dataSourceDesiredProperties", density: "density", actualRowHeight: "actualRowHeight", rowHeight: "rowHeight", defaultColumnMinWidth: "defaultColumnMinWidth", actualHeaderHeight: "actualHeaderHeight", headerHeight: "headerHeight", headerClickAction: "headerClickAction", editMode: "editMode", editModeClickAction: "editModeClickAction", editOnKeyPress: "editOnKeyPress", autoGenerateColumns: "autoGenerateColumns", rowSeparatorHeight: "rowSeparatorHeight", isPlaceholderRenderingEnabled: "isPlaceholderRenderingEnabled", columnAddingAnimationMode: "columnAddingAnimationMode", columnPropertyUpdatingAnimationMode: "columnPropertyUpdatingAnimationMode", cellDataLoadedAnimationMode: "cellDataLoadedAnimationMode", rowSelectionAnimationMode: "rowSelectionAnimationMode", rowHoverAnimationMode: "rowHoverAnimationMode", cellSelectionAnimationMode: "cellSelectionAnimationMode", animationSettings: "animationSettings", columnResizingAnimationMode: "columnResizingAnimationMode", columnShowingAnimationMode: "columnShowingAnimationMode", columnMovingAnimationMode: "columnMovingAnimationMode", columnHidingAnimationMode: "columnHidingAnimationMode", columnExchangingAnimationMode: "columnExchangingAnimationMode", selectionMode: "selectionMode", activationMode: "activationMode", selectionBehavior: "selectionBehavior", mouseDragSelectionEnabled: "mouseDragSelectionEnabled", selectedItems: "selectedItems", selectedKeys: "selectedKeys", selectedCells: "selectedCells", selectedCellRanges: "selectedCellRanges", pinnedItems: "pinnedItems", pinnedKeys: "pinnedKeys", isColumnOptionsEnabled: "isColumnOptionsEnabled", useNewerColumnOptionsMenu: "useNewerColumnOptionsMenu", isGroupRowSticky: "isGroupRowSticky", isHeaderSeparatorVisible: "isHeaderSeparatorVisible", cellSelectedBackground: "cellSelectedBackground", cellSelectedTextColor: "cellSelectedTextColor", sectionHeaderSelectedBackground: "sectionHeaderSelectedBackground", summaryRootBackground: "summaryRootBackground", summarySectionBackground: "summarySectionBackground", pinnedRowOpacity: "pinnedRowOpacity", editTextStyle: "editTextStyle", editOpacity: "editOpacity", deletedTextColor: "deletedTextColor", stickyRowBackground: "stickyRowBackground", pinnedRowBackground: "pinnedRowBackground", lastStickyRowBackground: "lastStickyRowBackground", activeCell: "activeCell", cellBackground: "cellBackground", cellTextColor: "cellTextColor", headerSortIndicatorColor: "headerSortIndicatorColor", headerSortIndicatorStyle: "headerSortIndicatorStyle", cellTextStyle: "cellTextStyle", sectionHeaderBackground: "sectionHeaderBackground", sectionHeaderTextColor: "sectionHeaderTextColor", sectionHeaderExpansionIndicatorIconColor: "sectionHeaderExpansionIndicatorIconColor", sectionHeaderTextStyle: "sectionHeaderTextStyle", summaryRootLabelTextStyle: "summaryRootLabelTextStyle", summarySectionLabelTextStyle: "summarySectionLabelTextStyle", summaryRootValueTextColor: "summaryRootValueTextColor", summaryRootValueTextStyle: "summaryRootValueTextStyle", summarySectionValueTextStyle: "summarySectionValueTextStyle", summarySectionValueTextColor: "summarySectionValueTextColor", summaryRootLabelTextColor: "summaryRootLabelTextColor", summarySectionLabelTextColor: "summarySectionLabelTextColor", summaryRootSelectedBackground: "summaryRootSelectedBackground", summarySectionSelectedBackground: "summarySectionSelectedBackground", pinnedAreaSeparatorWidth: "pinnedAreaSeparatorWidth", headerSeparatorWidth: "headerSeparatorWidth", headerSeparatorBackground: "headerSeparatorBackground", headerBackground: "headerBackground", headerTextColor: "headerTextColor", headerTextStyle: "headerTextStyle", rowSeparatorBackground: "rowSeparatorBackground", headerRowSeparatorBackground: "headerRowSeparatorBackground", rowSeparatorStickyRowBackground: "rowSeparatorStickyRowBackground", rowSeparatorLastStickyRowBackground: "rowSeparatorLastStickyRowBackground", rowSeparatorPinnedRowBackground: "rowSeparatorPinnedRowBackground", columnResizingSeparatorWidth: "columnResizingSeparatorWidth", columnResizingSeparatorOpacity: "columnResizingSeparatorOpacity", columnMovingSeparatorWidth: "columnMovingSeparatorWidth", columnMovingSeparatorOpacity: "columnMovingSeparatorOpacity", columnResizingSeparatorBackground: "columnResizingSeparatorBackground", columnMovingSeparatorBackground: "columnMovingSeparatorBackground", shiftSectionContent: "shiftSectionContent", columnOptionsIconAlignment: "columnOptionsIconAlignment", columnOptionsIconColor: "columnOptionsIconColor", columnOptionsIconBehavior: "columnOptionsIconBehavior", actualBorder: "actualBorder", border: "border", actualBorderWidth: "actualBorderWidth", borderWidthBottom: "borderWidthBottom", borderWidthLeft: "borderWidthLeft", borderWidthRight: "borderWidthRight", borderWidthTop: "borderWidthTop", notifyOnAllSelectionChanges: "notifyOnAllSelectionChanges", cornerRadiusBottomRight: "cornerRadiusBottomRight", cornerRadiusBottomLeft: "cornerRadiusBottomLeft", cornerRadiusTopLeft: "cornerRadiusTopLeft", cornerRadiusTopRight: "cornerRadiusTopRight", actualCornerRadiusBottomRight: "actualCornerRadiusBottomRight", actualCornerRadiusBottomLeft: "actualCornerRadiusBottomLeft", actualCornerRadiusTopLeft: "actualCornerRadiusTopLeft", actualCornerRadiusTopRight: "actualCornerRadiusTopRight", isActiveCellStyleEnabled: "isActiveCellStyleEnabled", stopPropagation: "stopPropagation", actualBackground: "actualBackground", background: "background", responsiveStates: "responsiveStates", initialSorts: "initialSorts", initialGroups: "initialGroups", initialSummaries: "initialSummaries", summaryScope: "summaryScope", isGroupCollapsable: "isGroupCollapsable", groupHeaderDisplayMode: "groupHeaderDisplayMode", isGroupExpandedDefault: "isGroupExpandedDefault", expandCollapseOnSectionHeaderClick: "expandCollapseOnSectionHeaderClick", groupSummaryDisplayMode: "groupSummaryDisplayMode", autoAcceptEdits: "autoAcceptEdits", primaryKey: "primaryKey", actualPrimaryKey: "actualPrimaryKey", actualColumns: "actualColumns", reactsToSortChanges: "reactsToSortChanges", reactsToGroupChanges: "reactsToGroupChanges", reactsToFilterChanges: "reactsToFilterChanges", enterBehavior: "enterBehavior", enterBehaviorAfterEdit: "enterBehaviorAfterEdit", isColumnOptionsSummariesEnabled: "isColumnOptionsSummariesEnabled", isColumnOptionsGroupingEnabled: "isColumnOptionsGroupingEnabled", mergedCellMode: "mergedCellMode", mergedCellEvaluationCriteria: "mergedCellEvaluationCriteria", mergedCellVerticalAlignment: "mergedCellVerticalAlignment", filterUIType: "filterUIType", filterLogicalOperator: "filterLogicalOperator", filterComparisonType: "filterComparisonType", todayOverride: "todayOverride", clearSelectionOnEscape: "clearSelectionOnEscape", pageSize: "pageSize", isToolbarColumnChooserVisible: "isToolbarColumnChooserVisible", isToolbarColumnPinningVisible: "isToolbarColumnPinningVisible", toolbarTitle: "toolbarTitle", toolbarColumnChooserText: "toolbarColumnChooserText", toolbarColumnChooserTitle: "toolbarColumnChooserTitle", toolbarColumnPinningText: "toolbarColumnPinningText", toolbarColumnPinningTitle: "toolbarColumnPinningTitle", scrollbarStyle: "scrollbarStyle", scrollbarBackground: "scrollbarBackground", scrollbarHoverBackground: "scrollbarHoverBackground", scrollbarActiveBackground: "scrollbarActiveBackground", columnOptionsBackground: "columnOptionsBackground", columnOptionsScrollbarBackground: "columnOptionsScrollbarBackground", columnOptionsScrollbarHoverBackground: "columnOptionsScrollbarHoverBackground", columnOptionsScrollbarActiveBackground: "columnOptionsScrollbarActiveBackground", columnOptionsTextColor: "columnOptionsTextColor", columnOptionsTextStyle: "columnOptionsTextStyle", columnOptionsHoverBackgroundColor: "columnOptionsHoverBackgroundColor", columnOptionsToolTipBackgroundColor: "columnOptionsToolTipBackgroundColor", columnOptionsToolTipTextColor: "columnOptionsToolTipTextColor", columnOptionsHighlightColor: "columnOptionsHighlightColor", columnOptionsSeparatorColor: "columnOptionsSeparatorColor", columnOptionsGroupHeaderBackground: "columnOptionsGroupHeaderBackground", columnOptionsGroupHeaderTextColor: "columnOptionsGroupHeaderTextColor", columnOptionsGroupHeaderTextStyle: "columnOptionsGroupHeaderTextStyle", columnOptionsAccentColor: "columnOptionsAccentColor", columnOptionsRowHeight: "columnOptionsRowHeight", allowCopyOperation: "allowCopyOperation", maxSelectedCellRanges: "maxSelectedCellRanges", deferEventForRowDragSelection: "deferEventForRowDragSelection" }, outputs: { filterExpressionsChanging: "filterExpressionsChanging", filterExpressionsChanged: "filterExpressionsChanged", cellPreviewPointerDown: "cellPreviewPointerDown", cellPreviewPointerUp: "cellPreviewPointerUp", cellPointerDown: "cellPointerDown", cellPointerUp: "cellPointerUp", cellClicked: "cellClicked", filterRowDataBinding: "filterRowDataBinding", filterRowDataBound: "filterRowDataBound", sortDescriptionsChanged: "sortDescriptionsChanged", groupDescriptionsChanged: "groupDescriptionsChanged", summaryDescriptionsChanged: "summaryDescriptionsChanged", columnHiddenChanged: "columnHiddenChanged", columnPinnedChanged: "columnPinnedChanged", cellValueChanging: "cellValueChanging", dataCommitted: "dataCommitted", dataCommitting: "dataCommitting", rootSummariesChanged: "rootSummariesChanged", sizeChanged: "sizeChanged", actualColumnsChanged: "actualColumnsChanged", columnsAutoGenerated: "columnsAutoGenerated", selectedItemsChanged: "selectedItemsChanged", selectedKeysChanged: "selectedKeysChanged", selectedCellsChanged: "selectedCellsChanged", selectionChanged: "selectionChanged", activeCellChanged: "activeCellChanged", selectedCellRangesChanged: "selectedCellRangesChanged", columnWidthChanged: "columnWidthChanged", cellEditStarted: "cellEditStarted", cellEditEnded: "cellEditEnded", rowEditStarted: "rowEditStarted", rowEditEnded: "rowEditEnded", customFilterRequested: "customFilterRequested", actualPrimaryKeyChange: "actualPrimaryKeyChange" }, host: { classAttribute: "ig-data-grid igx-data-grid" }, providers: [], queries: [{ propertyName: "contentColumns", predicate: IgxDataGridColumnComponent }], viewQueries: [{ propertyName: "_dynamicContent", first: true, predicate: ["dynamicContent"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `
     <ng-container #dynamicContent></ng-container>
   `, isInline: true, styles: [":host {\n\t\tdisplay: block;\n        box-sizing: border-box;\n        overflow: hidden;\n\t}"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
     return IgxDataGridComponent;
@@ -4440,8 +4623,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }], scrollbarBackground: [{
                 type: Input
+            }], scrollbarHoverBackground: [{
+                type: Input
+            }], scrollbarActiveBackground: [{
+                type: Input
             }], columnOptionsBackground: [{
                 type: Input
+            }], columnOptionsScrollbarBackground: [{
+                type: Input
+            }], columnOptionsScrollbarHoverBackground: [{
+                type: Input
+            }], columnOptionsScrollbarActiveBackground: [{
+                type: Input
             }], columnOptionsTextColor: [{
                 type: Input
             }], columnOptionsTextStyle: [{

package/esm2015/lib/igx-data-grid-filter-dialog-component.js

@@ -92,10 +92,10 @@ export let IgxDataGridFilterDialogComponent = /*@__PURE__*/ (() => {
             this.i.ap = +v;
         }
         get iconColor() {
-            return brushToString(this.i.c4);
+            return brushToString(this.i.dd);
         }
         set iconColor(v) {
-            this.i.c4 = stringToBrush(v);
+            this.i.dd = stringToBrush(v);
         }
         get viewSize() {
             return this.i.ar;
@@ -107,19 +107,46 @@ export let IgxDataGridFilterDialogComponent = /*@__PURE__*/ (() => {
          * Gets or sets the column options dropdown background color.
         */
         get columnOptionsBackground() {
-            return brushToString(this.i.cv);
+            return brushToString(this.i.c1);
         }
         set columnOptionsBackground(v) {
-            this.i.cv = stringToBrush(v);
+            this.i.c1 = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the scrollbar background color for checkbox lists in the column options dialog.
+        */
+        get columnOptionsScrollbarBackground() {
+            return brushToString(this.i.c7);
+        }
+        set columnOptionsScrollbarBackground(v) {
+            this.i.c7 = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the scrollbar thumb hover background color for checkbox lists in the column options dialog.
+        */
+        get columnOptionsScrollbarHoverBackground() {
+            return brushToString(this.i.c8);
+        }
+        set columnOptionsScrollbarHoverBackground(v) {
+            this.i.c8 = stringToBrush(v);
+        }
+        /**
+         * Gets or sets the scrollbar thumb active (dragging) background color for checkbox lists in the column options dialog.
+        */
+        get columnOptionsScrollbarActiveBackground() {
+            return brushToString(this.i.c6);
+        }
+        set columnOptionsScrollbarActiveBackground(v) {
+            this.i.c6 = stringToBrush(v);
         }
         /**
          * Gets or sets the text color for text inside the column options menu.
         */
         get columnOptionsTextColor() {
-            return brushToString(this.i.c1);
+            return brushToString(this.i.da);
         }
         set columnOptionsTextColor(v) {
-            this.i.c1 = stringToBrush(v);
+            this.i.da = stringToBrush(v);
         }
         /**
          * Gets or sets the font settings for text inside the column options menu.
@@ -139,64 +166,64 @@ export let IgxDataGridFilterDialogComponent = /*@__PURE__*/ (() => {
          * Gets or sets the hover background color inside the column options menu.
         */
         get columnOptionsHoverBackgroundColor() {
-            return brushToString(this.i.cz);
+            return brushToString(this.i.c5);
         }
         set columnOptionsHoverBackgroundColor(v) {
-            this.i.cz = stringToBrush(v);
+            this.i.c5 = stringToBrush(v);
         }
         /**
          * Gets or sets the tooltip background color inside the column options menu.
         */
         get columnOptionsToolTipBackgroundColor() {
-            return brushToString(this.i.c2);
+            return brushToString(this.i.db);
         }
         set columnOptionsToolTipBackgroundColor(v) {
-            this.i.c2 = stringToBrush(v);
+            this.i.db = stringToBrush(v);
         }
         /**
          * Gets or sets the tooltip text color inside the column options menu.
         */
         get columnOptionsToolTipTextColor() {
-            return brushToString(this.i.c3);
+            return brushToString(this.i.dc);
         }
         set columnOptionsToolTipTextColor(v) {
-            this.i.c3 = stringToBrush(v);
+            this.i.dc = stringToBrush(v);
         }
         /**
          * Gets or sets the highlight color inside the column options menu.
         */
         get columnOptionsHighlightColor() {
-            return brushToString(this.i.cy);
+            return brushToString(this.i.c4);
         }
         set columnOptionsHighlightColor(v) {
-            this.i.cy = stringToBrush(v);
+            this.i.c4 = stringToBrush(v);
         }
         /**
          * Gets or sets the color of separators inside the column options menu.
         */
         get columnOptionsSeparatorColor() {
-            return brushToString(this.i.c0);
+            return brushToString(this.i.c9);
         }
         set columnOptionsSeparatorColor(v) {
-            this.i.c0 = stringToBrush(v);
+            this.i.c9 = stringToBrush(v);
         }
         /**
          * Gets or sets the background color for group headers inside the column options menu.
         */
         get columnOptionsGroupHeaderBackground() {
-            return brushToString(this.i.cw);
+            return brushToString(this.i.c2);
         }
         set columnOptionsGroupHeaderBackground(v) {
-            this.i.cw = stringToBrush(v);
+            this.i.c2 = stringToBrush(v);
         }
         /**
          * Gets or sets the text color for group headers inside the column options menu.
         */
         get columnOptionsGroupHeaderTextColor() {
-            return brushToString(this.i.cx);
+            return brushToString(this.i.c3);
         }
         set columnOptionsGroupHeaderTextColor(v) {
-            this.i.cx = stringToBrush(v);
+            this.i.c3 = stringToBrush(v);
         }
         /**
          * Gets or sets the font settings for group header text inside the column options menu.
@@ -213,10 +240,10 @@ export let IgxDataGridFilterDialogComponent = /*@__PURE__*/ (() => {
             this.i.aa = fi;
         }
         get columnOptionsAccentColor() {
-            return brushToString(this.i.cu);
+            return brushToString(this.i.c0);
         }
         set columnOptionsAccentColor(v) {
-            this.i.cu = stringToBrush(v);
+            this.i.c0 = stringToBrush(v);
         }
         /**
          * Gets or sets the row height for submenus inside the column options menu.
@@ -304,16 +331,16 @@ export let IgxDataGridFilterDialogComponent = /*@__PURE__*/ (() => {
             this._inStyling = false;
         }
         notifySizeChanged(width, height) {
-            this.i.b2(width, height);
+            this.i.b5(width, height);
         }
         notifyCellSizeChanged() {
-            this.i.b1();
+            this.i.b4();
         }
         showIcon() {
-            this.i.cf();
+            this.i.ci();
         }
         hideIcon() {
-            this.i.bz();
+            this.i.b2();
         }
         getDesiredToolbarActions() {
             let iv = this.i.getDesiredToolbarActions();
@@ -421,7 +448,7 @@ export let IgxDataGridFilterDialogComponent = /*@__PURE__*/ (() => {
         }
     }
     IgxDataGridFilterDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxDataGridFilterDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    IgxDataGridFilterDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: IgxDataGridFilterDialogComponent, selector: "igx-data-grid-filter-dialog", inputs: { isAnimationEnabled: "isAnimationEnabled", pixelScalingRatio: "pixelScalingRatio", actualPixelScalingRatio: "actualPixelScalingRatio", iconColor: "iconColor", viewSize: "viewSize", columnOptionsBackground: "columnOptionsBackground", columnOptionsTextColor: "columnOptionsTextColor", columnOptionsTextStyle: "columnOptionsTextStyle", columnOptionsHoverBackgroundColor: "columnOptionsHoverBackgroundColor", columnOptionsToolTipBackgroundColor: "columnOptionsToolTipBackgroundColor", columnOptionsToolTipTextColor: "columnOptionsToolTipTextColor", columnOptionsHighlightColor: "columnOptionsHighlightColor", columnOptionsSeparatorColor: "columnOptionsSeparatorColor", columnOptionsGroupHeaderBackground: "columnOptionsGroupHeaderBackground", columnOptionsGroupHeaderTextColor: "columnOptionsGroupHeaderTextColor", columnOptionsGroupHeaderTextStyle: "columnOptionsGroupHeaderTextStyle", columnOptionsAccentColor: "columnOptionsAccentColor", columnOptionsRowHeight: "columnOptionsRowHeight", commandCompleted: "commandCompleted", invalidateActions: "invalidateActions" }, outputs: { dialogOpening: "dialogOpening", filterChanging: "filterChanging", filterChanged: "filterChanged", renderCompleted: "renderCompleted" }, providers: [], ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    IgxDataGridFilterDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: IgxDataGridFilterDialogComponent, selector: "igx-data-grid-filter-dialog", inputs: { isAnimationEnabled: "isAnimationEnabled", pixelScalingRatio: "pixelScalingRatio", actualPixelScalingRatio: "actualPixelScalingRatio", iconColor: "iconColor", viewSize: "viewSize", columnOptionsBackground: "columnOptionsBackground", columnOptionsScrollbarBackground: "columnOptionsScrollbarBackground", columnOptionsScrollbarHoverBackground: "columnOptionsScrollbarHoverBackground", columnOptionsScrollbarActiveBackground: "columnOptionsScrollbarActiveBackground", columnOptionsTextColor: "columnOptionsTextColor", columnOptionsTextStyle: "columnOptionsTextStyle", columnOptionsHoverBackgroundColor: "columnOptionsHoverBackgroundColor", columnOptionsToolTipBackgroundColor: "columnOptionsToolTipBackgroundColor", columnOptionsToolTipTextColor: "columnOptionsToolTipTextColor", columnOptionsHighlightColor: "columnOptionsHighlightColor", columnOptionsSeparatorColor: "columnOptionsSeparatorColor", columnOptionsGroupHeaderBackground: "columnOptionsGroupHeaderBackground", columnOptionsGroupHeaderTextColor: "columnOptionsGroupHeaderTextColor", columnOptionsGroupHeaderTextStyle: "columnOptionsGroupHeaderTextStyle", columnOptionsAccentColor: "columnOptionsAccentColor", columnOptionsRowHeight: "columnOptionsRowHeight", commandCompleted: "commandCompleted", invalidateActions: "invalidateActions" }, outputs: { dialogOpening: "dialogOpening", filterChanging: "filterChanging", filterChanged: "filterChanged", renderCompleted: "renderCompleted" }, providers: [], ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
     return IgxDataGridFilterDialogComponent;
 })();
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxDataGridFilterDialogComponent, decorators: [{
@@ -444,6 +471,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }], columnOptionsBackground: [{
                 type: Input
+            }], columnOptionsScrollbarBackground: [{
+                type: Input
+            }], columnOptionsScrollbarHoverBackground: [{
+                type: Input
+            }], columnOptionsScrollbarActiveBackground: [{
+                type: Input
             }], columnOptionsTextColor: [{
                 type: Input
             }], columnOptionsTextStyle: [{