igniteui-angular-data-grids 21.0.0-beta.0 → 21.0.1-beta.0

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

@@ -119,6 +119,7 @@ import { IgxGridCustomFilterRequestedEventArgs } from "./igx-grid-custom-filter-
 import { ColumnGrouping } from "./ColumnGrouping";
 import { CellContentVerticalAlignment_$type } from "./CellContentVerticalAlignment";
 import { IgxDataSourceRootSummariesChangedEventArgs } from "igniteui-angular-core";
+import { BaseControlTheme_$type } from "igniteui-angular-core";
 import * as i0 from "@angular/core";
 var GridStylingDefaults = {};
 var IgxDataGridComponent = /** @class */ /*@__PURE__*/ (function () {
@@ -643,10 +644,23 @@ var IgxDataGridComponent = /** @class */ /*@__PURE__*/ (function () {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(IgxDataGridComponent.prototype, "columnResizingMode", {
+    Object.defineProperty(IgxDataGridComponent.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);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxDataGridComponent.prototype, "columnResizingMode", {
+        /**
+         * Gets or sets the type of column resizing to use.
+        */
         get: function () {
             return this.i.columnResizingMode;
         },
@@ -2396,6 +2410,19 @@ var IgxDataGridComponent = /** @class */ /*@__PURE__*/ (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(IgxDataGridComponent.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);
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(IgxDataGridComponent.prototype, "border", {
         /**
          * Gets or sets the border color around the grid.
@@ -2623,6 +2650,32 @@ var IgxDataGridComponent = /** @class */ /*@__PURE__*/ (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(IgxDataGridComponent.prototype, "actualBackground", {
+        /**
+         * Gets the actual background for the grid.
+        */
+        get: function () {
+            return brushToString(this.i.actualBackground);
+        },
+        set: function (v) {
+            this.i.actualBackground = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxDataGridComponent.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);
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(IgxDataGridComponent.prototype, "responsiveStates", {
         /**
          * A set of states that can be applied to the columns of the grid based on available space.
@@ -3385,6 +3438,81 @@ var IgxDataGridComponent = /** @class */ /*@__PURE__*/ (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(IgxDataGridComponent.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);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxDataGridComponent.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);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxDataGridComponent.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);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxDataGridComponent.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);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxDataGridComponent.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);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxDataGridComponent.prototype, "columnOptionsAccentColor", {
+        get: function () {
+            return brushToString(this.i.columnOptionsAccentColor);
+        },
+        set: function (v) {
+            this.i.columnOptionsAccentColor = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(IgxDataGridComponent.prototype, "allowCopyOperation", {
         get: function () {
             return this.i.allowCopyOperation;
@@ -4741,7 +4869,7 @@ var IgxDataGridComponent = /** @class */ /*@__PURE__*/ (function () {
         }
     };
     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", 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", isGroupRowSticky: "isGroupRowSticky", isHeaderSeparatorVisible: "isHeaderSeparatorVisible", cellSelectedBackground: "cellSelectedBackground", 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", 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", 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", responsiveStates: "responsiveStates", initialSorts: "initialSorts", initialGroups: "initialGroups", initialSummaries: "initialSummaries", summaryScope: "summaryScope", isGroupCollapsable: "isGroupCollapsable", groupHeaderDisplayMode: "groupHeaderDisplayMode", isGroupExpandedDefault: "isGroupExpandedDefault", 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", allowCopyOperation: "allowCopyOperation", deferEventForRowDragSelection: "deferEventForRowDragSelection" }, outputs: { filterExpressionsChanging: "filterExpressionsChanging", filterExpressionsChanged: "filterExpressionsChanged", cellPreviewPointerDown: "cellPreviewPointerDown", cellPreviewPointerUp: "cellPreviewPointerUp", cellPointerDown: "cellPointerDown", cellPointerUp: "cellPointerUp", cellClicked: "cellClicked", 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: "\n    <ng-container #dynamicContent></ng-container>\n  ", isInline: true, styles: [":host {\n\t\tdisplay: block;\n        box-sizing: border-box;\n        overflow: hidden;\n\t}"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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", isGroupRowSticky: "isGroupRowSticky", isHeaderSeparatorVisible: "isHeaderSeparatorVisible", cellSelectedBackground: "cellSelectedBackground", 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", 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", 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", columnOptionsSeparatorColor: "columnOptionsSeparatorColor", columnOptionsGroupHeaderBackground: "columnOptionsGroupHeaderBackground", columnOptionsGroupHeaderTextColor: "columnOptionsGroupHeaderTextColor", columnOptionsAccentColor: "columnOptionsAccentColor", allowCopyOperation: "allowCopyOperation", deferEventForRowDragSelection: "deferEventForRowDragSelection" }, outputs: { filterExpressionsChanging: "filterExpressionsChanging", filterExpressionsChanged: "filterExpressionsChanged", cellPreviewPointerDown: "cellPreviewPointerDown", cellPreviewPointerUp: "cellPreviewPointerUp", cellPointerDown: "cellPointerDown", cellPointerUp: "cellPointerUp", cellClicked: "cellClicked", 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: "\n    <ng-container #dynamicContent></ng-container>\n  ", isInline: true, styles: [":host {\n\t\tdisplay: block;\n        box-sizing: border-box;\n        overflow: hidden;\n\t}"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
     return IgxDataGridComponent;
 }());
 export { IgxDataGridComponent };
@@ -4767,6 +4895,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }], dataSource: [{
                 type: Input
+            }], theme: [{
+                type: Input
             }], columnResizingMode: [{
                 type: Input
             }], columnMovingMode: [{
@@ -4987,6 +5117,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }], columnOptionsIconBehavior: [{
                 type: Input
+            }], actualBorder: [{
+                type: Input
             }], border: [{
                 type: Input
             }], actualBorderWidth: [{
@@ -5021,6 +5153,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }], stopPropagation: [{
                 type: Input
+            }], actualBackground: [{
+                type: Input
+            }], background: [{
+                type: Input
             }], responsiveStates: [{
                 type: Input
             }], initialSorts: [{
@@ -5097,6 +5233,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }], scrollbarBackground: [{
                 type: Input
+            }], columnOptionsBackground: [{
+                type: Input
+            }], columnOptionsTextColor: [{
+                type: Input
+            }], columnOptionsSeparatorColor: [{
+                type: Input
+            }], columnOptionsGroupHeaderBackground: [{
+                type: Input
+            }], columnOptionsGroupHeaderTextColor: [{
+                type: Input
+            }], columnOptionsAccentColor: [{
+                type: Input
             }], allowCopyOperation: [{
                 type: Input
             }], deferEventForRowDragSelection: [{

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

@@ -67,10 +67,10 @@ var IgxDataGridFilterDialogComponent = /** @class */ /*@__PURE__*/ (function ()
     };
     Object.defineProperty(IgxDataGridFilterDialogComponent.prototype, "isAnimationEnabled", {
         get: function () {
-            return this.i.ab;
+            return this.i.ad;
         },
         set: function (v) {
-            this.i.ab = ensureBool(v);
+            this.i.ad = ensureBool(v);
         },
         enumerable: false,
         configurable: true
@@ -82,10 +82,10 @@ var IgxDataGridFilterDialogComponent = /** @class */ /*@__PURE__*/ (function ()
          * to appear blurry.
         */
         get: function () {
-            return this.i.aj;
+            return this.i.al;
         },
         set: function (v) {
-            this.i.aj = +v;
+            this.i.al = +v;
         },
         enumerable: false,
         configurable: true
@@ -97,37 +97,112 @@ var IgxDataGridFilterDialogComponent = /** @class */ /*@__PURE__*/ (function ()
          * to appear blurry.
         */
         get: function () {
-            return this.i.ai;
+            return this.i.ak;
         },
         set: function (v) {
-            this.i.ai = +v;
+            this.i.ak = +v;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxDataGridFilterDialogComponent.prototype, "iconColor", {
         get: function () {
-            return brushToString(this.i.bw);
+            return brushToString(this.i.ci);
         },
         set: function (v) {
-            this.i.bw = stringToBrush(v);
+            this.i.ci = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxDataGridFilterDialogComponent.prototype, "viewSize", {
         get: function () {
-            return this.i.ak;
+            return this.i.am;
         },
         set: function (v) {
-            this.i.ak = +v;
+            this.i.am = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxDataGridFilterDialogComponent.prototype, "columnOptionsBackground", {
+        /**
+         * Gets or sets the column options dropdown background color.
+        */
+        get: function () {
+            return brushToString(this.i.cd);
+        },
+        set: function (v) {
+            this.i.cd = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxDataGridFilterDialogComponent.prototype, "columnOptionsTextColor", {
+        /**
+         * Gets or sets the text color for text inside the column options menu.
+        */
+        get: function () {
+            return brushToString(this.i.ch);
+        },
+        set: function (v) {
+            this.i.ch = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxDataGridFilterDialogComponent.prototype, "columnOptionsSeparatorColor", {
+        /**
+         * Gets or sets the color of separators inside the column options menu.
+        */
+        get: function () {
+            return brushToString(this.i.cg);
+        },
+        set: function (v) {
+            this.i.cg = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxDataGridFilterDialogComponent.prototype, "columnOptionsGroupHeaderBackground", {
+        /**
+         * Gets or sets the background color for group headers inside the column options menu.
+        */
+        get: function () {
+            return brushToString(this.i.ce);
+        },
+        set: function (v) {
+            this.i.ce = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxDataGridFilterDialogComponent.prototype, "columnOptionsGroupHeaderTextColor", {
+        /**
+         * Gets or sets the text color for group headers inside the column options menu.
+        */
+        get: function () {
+            return brushToString(this.i.cf);
+        },
+        set: function (v) {
+            this.i.cf = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxDataGridFilterDialogComponent.prototype, "columnOptionsAccentColor", {
+        get: function () {
+            return brushToString(this.i.cc);
+        },
+        set: function (v) {
+            this.i.cc = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxDataGridFilterDialogComponent.prototype, "isOpen", {
         get: function () {
-            return this.i.ac;
+            return this.i.ae;
         },
         enumerable: false,
         configurable: true
@@ -218,16 +293,16 @@ var IgxDataGridFilterDialogComponent = /** @class */ /*@__PURE__*/ (function ()
         this._inStyling = false;
     };
     IgxDataGridFilterDialogComponent.prototype.notifySizeChanged = function (width, height) {
-        this.i.be(width, height);
+        this.i.bo(width, height);
     };
     IgxDataGridFilterDialogComponent.prototype.notifyCellSizeChanged = function () {
-        this.i.bd();
+        this.i.bn();
     };
     IgxDataGridFilterDialogComponent.prototype.showIcon = function () {
-        this.i.br();
+        this.i.b1();
     };
     IgxDataGridFilterDialogComponent.prototype.hideIcon = function () {
-        this.i.bb();
+        this.i.bl();
     };
     IgxDataGridFilterDialogComponent.prototype.getDesiredToolbarActions = function () {
         var iv = this.i.getDesiredToolbarActions();
@@ -354,7 +429,7 @@ var IgxDataGridFilterDialogComponent = /** @class */ /*@__PURE__*/ (function ()
         }
     };
     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", 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", columnOptionsTextColor: "columnOptionsTextColor", columnOptionsSeparatorColor: "columnOptionsSeparatorColor", columnOptionsGroupHeaderBackground: "columnOptionsGroupHeaderBackground", columnOptionsGroupHeaderTextColor: "columnOptionsGroupHeaderTextColor", columnOptionsAccentColor: "columnOptionsAccentColor", 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;
 }());
 export { IgxDataGridFilterDialogComponent };
@@ -376,6 +451,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }], viewSize: [{
                 type: Input
+            }], columnOptionsBackground: [{
+                type: Input
+            }], columnOptionsTextColor: [{
+                type: Input
+            }], columnOptionsSeparatorColor: [{
+                type: Input
+            }], columnOptionsGroupHeaderBackground: [{
+                type: Input
+            }], columnOptionsGroupHeaderTextColor: [{
+                type: Input
+            }], columnOptionsAccentColor: [{
+                type: Input
             }], commandCompleted: [{
                 type: Input
             }], invalidateActions: [{

package/esm5/lib/igx-data-grid-pager-component.js

@@ -60,10 +60,10 @@ var IgxDataGridPagerComponent = /** @class */ /*@__PURE__*/ (function () {
     };
     Object.defineProperty(IgxDataGridPagerComponent.prototype, "pagerText", {
         get: function () {
-            return this.i.a9;
+            return this.i.bb;
         },
         set: function (v) {
-            this.i.a9 = v;
+            this.i.bb = v;
         },
         enumerable: false,
         configurable: true
@@ -125,15 +125,41 @@ var IgxDataGridPagerComponent = /** @class */ /*@__PURE__*/ (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(IgxDataGridPagerComponent.prototype, "actualBackground", {
+        /**
+         * Gets or sets the background color to use.
+        */
+        get: function () {
+            return brushToString(this.i.cg);
+        },
+        set: function (v) {
+            this.i.cg = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(IgxDataGridPagerComponent.prototype, "background", {
         /**
          * Gets or sets the background color to use.
         */
         get: function () {
-            return brushToString(this.i.ca);
+            return brushToString(this.i.ci);
+        },
+        set: function (v) {
+            this.i.ci = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxDataGridPagerComponent.prototype, "actualBorder", {
+        /**
+         * Gets or sets the border color around the grid.
+        */
+        get: function () {
+            return brushToString(this.i.ch);
         },
         set: function (v) {
-            this.i.ca = stringToBrush(v);
+            this.i.ch = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -217,16 +243,16 @@ var IgxDataGridPagerComponent = /** @class */ /*@__PURE__*/ (function () {
         this._inStyling = false;
     };
     IgxDataGridPagerComponent.prototype.nextPage = function () {
-        this.i.bn();
+        this.i.bp();
     };
     IgxDataGridPagerComponent.prototype.previousPage = function () {
-        this.i.by();
+        this.i.b0();
     };
     IgxDataGridPagerComponent.prototype.firstPage = function () {
-        this.i.bk();
+        this.i.bm();
     };
     IgxDataGridPagerComponent.prototype.lastPage = function () {
-        this.i.bm();
+        this.i.bo();
     };
     IgxDataGridPagerComponent.prototype.provideContainer = function (container) {
         this.i.provideContainer(container);
@@ -244,7 +270,7 @@ var IgxDataGridPagerComponent = /** @class */ /*@__PURE__*/ (function () {
     
     */
     IgxDataGridPagerComponent.prototype.exportSerializedVisualModel = function () {
-        var iv = this.i.az();
+        var iv = this.i.a1();
         return (iv);
     };
     Object.defineProperty(IgxDataGridPagerComponent.prototype, "pageChanged", {
@@ -283,7 +309,7 @@ var IgxDataGridPagerComponent = /** @class */ /*@__PURE__*/ (function () {
         }
     };
     IgxDataGridPagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxDataGridPagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    IgxDataGridPagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: IgxDataGridPagerComponent, selector: "igx-data-grid-pager", inputs: { pagerText: "pagerText", pageSize: "pageSize", pageCount: "pageCount", currentPage: "currentPage", textStyle: "textStyle", background: "background", border: "border" }, outputs: { pageChanged: "pageChanged" }, providers: [], ngImport: i0, template: "", isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    IgxDataGridPagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: IgxDataGridPagerComponent, selector: "igx-data-grid-pager", inputs: { pagerText: "pagerText", pageSize: "pageSize", pageCount: "pageCount", currentPage: "currentPage", textStyle: "textStyle", actualBackground: "actualBackground", background: "background", actualBorder: "actualBorder", border: "border" }, outputs: { pageChanged: "pageChanged" }, providers: [], ngImport: i0, template: "", isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
     return IgxDataGridPagerComponent;
 }());
 export { IgxDataGridPagerComponent };
@@ -305,8 +331,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }], textStyle: [{
                 type: Input
+            }], actualBackground: [{
+                type: Input
             }], background: [{
                 type: Input
+            }], actualBorder: [{
+                type: Input
             }], border: [{
                 type: Input
             }], pageChanged: [{