igniteui-angular-data-grids 20.0.1 → 20.0.2-beta.1

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

@@ -88,6 +88,7 @@ import { GroupHeaderDisplayMode_$type } from "./GroupHeaderDisplayMode";
 import { SummaryScope_$type } from "./SummaryScope";
 import { GroupSummaryDisplayMode_$type } from "./GroupSummaryDisplayMode";
 import { IgxPinnedAreaSeparatorComponent } from "./igx-pinned-area-separator-component";
+import { PinnedPositions_$type } from "./PinnedPositions";
 import { ColumnOptionsIconAlignment_$type } from "./ColumnOptionsIconAlignment";
 import { ColumnOptionsIconBehavior_$type } from "./ColumnOptionsIconBehavior";
 import { fromRect } from "igniteui-angular-core";
@@ -158,6 +159,11 @@ export let IgxDataGridComponent = /*@__PURE__*/ (() => {
                     this.onScroll();
                 }
             };
+            this.onMouseEvent = (e) => {
+                if (this.stopPropagation) {
+                    e.stopPropagation();
+                }
+            };
             this._dataSource = null;
             this._insetLeft = 0;
             this._insetTop = 0;
@@ -284,7 +290,7 @@ export let IgxDataGridComponent = /*@__PURE__*/ (() => {
                 this.containerResized();
             });
             this.i.syncBorder();
-            // supports angular themes or custom properties set in CSS 
+            // supports angular themes or custom properties set in CSS
             //this._styling(_elRef.element.nativeElement, this);
         }
         _ensureColumnsAreManual() {
@@ -430,10 +436,16 @@ export let IgxDataGridComponent = /*@__PURE__*/ (() => {
                 c._styling(this._elRef.element.nativeElement, this, this);
             }
             this._grid.columnPropertyUpdatingAnimationMode = prev;
-            this._grid.itemsSource = this._dataSource;
+            // we have a grid now so provide it the currently set datasource.
+            this.dataSource = this._dataSource;
         }
         ngAfterViewInit() {
             this._portalManager.dynamicContent = this._dynamicContent;
+            this._container.addEventListener("mousedown", this.onMouseEvent);
+            this._container.addEventListener("mouseup", this.onMouseEvent);
+            this._container.addEventListener("mouseenter", this.onMouseEvent);
+            this._container.addEventListener("mouseleave", this.onMouseEvent);
+            this._container.addEventListener("mousemove", this.onMouseEvent);
         }
         ngOnDestroy() {
             if (this.i) {
@@ -447,6 +459,11 @@ export let IgxDataGridComponent = /*@__PURE__*/ (() => {
                     this._grid.renderingEngine.detach();
                 }
             }
+            this._container.removeEventListener("mousedown", this.onMouseEvent);
+            this._container.removeEventListener("mouseup", this.onMouseEvent);
+            this._container.removeEventListener("mouseenter", this.onMouseEvent);
+            this._container.removeEventListener("mouseleave", this.onMouseEvent);
+            this._container.removeEventListener("mousemove", this.onMouseEvent);
         }
         get actualDataSource() {
             return this.i.actualDataSource;
@@ -484,7 +501,12 @@ export let IgxDataGridComponent = /*@__PURE__*/ (() => {
         set dataSource(value) {
             this._dataSource = value;
             if (this._grid != null) {
-                this._grid.itemsSource = this._dataSource;
+                if (this._dataSource && this._dataSource._implementation) {
+                    this._grid.itemsSource = this._dataSource._implementation;
+                }
+                else {
+                    this._grid.itemsSource = this._dataSource;
+                }
             }
         }
         get dataSource() {
@@ -2035,6 +2057,15 @@ export let IgxDataGridComponent = /*@__PURE__*/ (() => {
         set isActiveCellStyleEnabled(v) {
             this.i.isActiveCellStyleEnabled = ensureBool(v);
         }
+        /**
+         * Prevents mouse events from bubbling out of the grid.
+        */
+        get stopPropagation() {
+            return this.i.stopPropagation;
+        }
+        set stopPropagation(v) {
+            this.i.stopPropagation = ensureBool(v);
+        }
         /**
          * A set of states that can be applied to the columns of the grid based on available space.
         */
@@ -2803,7 +2834,7 @@ export let IgxDataGridComponent = /*@__PURE__*/ (() => {
             this.i.exchangeColumn((newColumn == null ? null : newColumn.i), (oldColumn == null ? null : oldColumn.i));
         }
         pinColumn(column, position) {
-            this.i.pinColumn((column == null ? null : column.i), (position == null ? null : position));
+            this.i.pinColumn((column == null ? null : column.i), ensureEnum(PinnedPositions_$type, position));
         }
         moveColumn(oldIndex, newIndex) {
             this.i.moveColumn(oldIndex, newIndex);
@@ -3758,7 +3789,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", 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", 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: `
+    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: `
     <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;
@@ -4043,6 +4074,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }], isActiveCellStyleEnabled: [{
                 type: Input
+            }], stopPropagation: [{
+                type: Input
             }], responsiveStates: [{
                 type: Input
             }], initialSorts: [{

package/esm2015/lib/igx-date-time-cell-info.js

@@ -22,56 +22,56 @@ export class IgxDateTimeCellInfo extends IgxCellInfo {
      * Sets or gets the DateTime value for the cell.
     */
     get dateTimeValue() {
-        return this.i.mt;
+        return this.i.n6;
     }
     set dateTimeValue(v) {
-        this.i.mt = v;
+        this.i.n6 = v;
     }
     /**
      * The format string to apply to the value
     */
     get formatStringOverride() {
-        return this.i.na;
+        return this.i.on;
     }
     set formatStringOverride(v) {
-        this.i.na = v;
+        this.i.on = v;
     }
     get formatSpecifiers() {
-        return this.i.mk;
+        return this.i.nx;
     }
     set formatSpecifiers(v) {
         if (v && !Array.isArray(v) && typeof (v) == "string") {
             const re = /\s*(?:,|\s|$)\s*/gm;
             v = v.split(re);
         }
-        this.i.mk = v;
+        this.i.nx = v;
     }
     /**
      * The format options to apply to the value
     */
     get formatOverride() {
-        return this.i.m3;
+        return this.i.og;
     }
     set formatOverride(v) {
-        this.i.m3 = v;
+        this.i.og = v;
     }
     /**
      * Sets or gets the simple DateTimeFormat to use for the cell.
     */
     get dateTimeFormat() {
-        return this.i.mp;
+        return this.i.n2;
     }
     set dateTimeFormat(v) {
-        this.i.mp = ensureEnum(DateTimeFormats_$type, v);
+        this.i.n2 = ensureEnum(DateTimeFormats_$type, v);
     }
     /**
      * Sets or gets whether the value to use is a DateTimeOffset value.
     */
     get isOffsetValue() {
-        return this.i.mr;
+        return this.i.n4;
     }
     set isOffsetValue(v) {
-        this.i.mr = ensureBool(v);
+        this.i.n4 = ensureBool(v);
     }
     findByName(name) {
         var baseResult = super.findByName(name);

package/esm2015/lib/igx-date-time-column-component.js

@@ -41,92 +41,92 @@ export let IgxDateTimeColumnComponent = /*@__PURE__*/ (() => {
          * Gets or sets the date time format to use for this column. If FormatString is specificied this value is ignored.
         */
         get dateTimeFormat() {
-            return this.i.oa;
+            return this.i.pb;
         }
         set dateTimeFormat(v) {
-            this.i.oa = ensureEnum(DateTimeFormats_$type, v);
+            this.i.pb = ensureEnum(DateTimeFormats_$type, v);
         }
         /**
          * Gets or sets the format string to apply to the value. If set, the other value formatting properties on this column are ignored.
         */
         get formatString() {
-            return this.i.os;
+            return this.i.pt;
         }
         set formatString(v) {
-            this.i.os = v;
+            this.i.pt = v;
         }
         /**
          * Gets or sets the format string to use when editing dates.
         */
         get editorFormatString() {
-            return this.i.ol;
+            return this.i.pm;
         }
         set editorFormatString(v) {
-            this.i.ol = v;
+            this.i.pm = v;
         }
         get formatSpecifiers() {
-            return this.i.n6;
+            return this.i.o7;
         }
         set formatSpecifiers(v) {
             if (v && !Array.isArray(v) && typeof (v) == "string") {
                 const re = /\s*(?:,|\s|$)\s*/gm;
                 v = v.split(re);
             }
-            this.i.n6 = v;
+            this.i.o7 = v;
         }
         /**
          * Gets or sets the INTL DateTimeFormat object to use for formatting the date values.
         */
         get formatOverride() {
-            return this.i.oh;
+            return this.i.pi;
         }
         set formatOverride(v) {
-            this.i.oh = v;
+            this.i.pi = v;
         }
         /**
          * Gets or sets the ShowTodayButton property to detirmine if the today button is shown
         */
         get showTodayButton() {
-            return this.i.od;
+            return this.i.pe;
         }
         set showTodayButton(v) {
-            this.i.od = ensureBool(v);
+            this.i.pe = ensureBool(v);
         }
         /**
          * Gets or sets the editor type used for editing cells in this column.
         */
         get editorType() {
-            return this.i.ob;
+            return this.i.pc;
         }
         set editorType(v) {
-            this.i.ob = ensureEnum(EditorType_$type, v);
+            this.i.pc = ensureEnum(EditorType_$type, v);
         }
         /**
          * Gets or sets the ComboBox data source.
         */
         get editorDataSource() {
-            return this.i.og;
+            return this.i.ph;
         }
         set editorDataSource(v) {
-            this.i.og = v;
+            this.i.ph = v;
         }
         /**
          * Gets or sets the ComboBox text field.
         */
         get editorTextField() {
-            return this.i.on;
+            return this.i.po;
         }
         set editorTextField(v) {
-            this.i.on = v;
+            this.i.po = v;
         }
         /**
          * Gets or sets the ComboBox value field.
         */
         get editorValueField() {
-            return this.i.oo;
+            return this.i.pp;
         }
         set editorValueField(v) {
-            this.i.oo = v;
+            this.i.pp = v;
         }
         findByName(name) {
             var baseResult = super.findByName(name);

package/esm2015/lib/igx-definition-base-component.js

@@ -5,6 +5,7 @@ import { CellContentVerticalAlignment_$type } from "./CellContentVerticalAlignme
 import { TextCellLineBreakMode_$type } from "./TextCellLineBreakMode";
 import { IgxDataBindingEventArgs } from "./igx-data-binding-event-args";
 import { IgxCellStyleRequestedEventArgs } from "./igx-cell-style-requested-event-args";
+import { CellPropertyAnimationType_$type } from "./CellPropertyAnimationType";
 import { NamePatcher } from "igniteui-angular-core";
 import { ensureBool, brushToString, stringToBrush, ensureEnum, toSpinal, initializePropertiesFromCss, CollectionAdapter } from "igniteui-angular-core";
 import { FontInfo } from "igniteui-angular-core";
@@ -171,10 +172,10 @@ export let IgxDefinitionBaseComponent = /*@__PURE__*/ (() => {
      * Gets or sets the background color to use.
     */
         get background() {
-            return brushToString(this.i.ge);
+            return brushToString(this.i.gf);
         }
         set background(v) {
-            this.i.ge = stringToBrush(v);
+            this.i.gf = stringToBrush(v);
         }
         get actualConditionalStyles() {
             if (!this._actualConditionalStyles) {
@@ -215,37 +216,37 @@ export let IgxDefinitionBaseComponent = /*@__PURE__*/ (() => {
          * Gets or sets the background color to use.
         */
         get border() {
-            return brushToString(this.i.gh);
+            return brushToString(this.i.gi);
         }
         set border(v) {
-            this.i.gh = stringToBrush(v);
+            this.i.gi = stringToBrush(v);
         }
         /**
          * Gets or sets the background color to use.
         */
         get activationBorder() {
-            return brushToString(this.i.f3);
+            return brushToString(this.i.f4);
         }
         set activationBorder(v) {
-            this.i.f3 = stringToBrush(v);
+            this.i.f4 = stringToBrush(v);
         }
         /**
          * Gets or sets the error border color to use.
         */
         get errorBorder() {
-            return brushToString(this.i.gi);
+            return brushToString(this.i.gj);
         }
         set errorBorder(v) {
-            this.i.gi = stringToBrush(v);
+            this.i.gj = stringToBrush(v);
         }
         /**
          * Gets the actual border color that will be used.
         */
         get actualBorder() {
-            return brushToString(this.i.f8);
+            return brushToString(this.i.f9);
         }
         set actualBorder(v) {
-            this.i.f8 = stringToBrush(v);
+            this.i.f9 = stringToBrush(v);
         }
         /**
          * Gets or sets the amount of left border to use for the cell content for this column.
@@ -347,82 +348,82 @@ export let IgxDefinitionBaseComponent = /*@__PURE__*/ (() => {
          * Gets the actual background color that will be used.
         */
         get actualBackground() {
-            return brushToString(this.i.f5);
+            return brushToString(this.i.f6);
         }
         set actualBackground(v) {
-            this.i.f5 = stringToBrush(v);
+            this.i.f6 = stringToBrush(v);
         }
         /**
          * Gets the actual background color that will be used.
         */
         get actualActivationBorder() {
-            return brushToString(this.i.f4);
+            return brushToString(this.i.f5);
         }
         set actualActivationBorder(v) {
-            this.i.f4 = stringToBrush(v);
+            this.i.f5 = stringToBrush(v);
         }
         /**
          * Gets the actual error border color that will be used.
         */
         get actualErrorBorder() {
-            return brushToString(this.i.f9);
+            return brushToString(this.i.ga);
         }
         set actualErrorBorder(v) {
-            this.i.f9 = stringToBrush(v);
+            this.i.ga = stringToBrush(v);
         }
         /**
          * Gets or sets the background color for content that sticks to the top of the grid.
         */
         get stickyRowBackground() {
-            return brushToString(this.i.gw);
+            return brushToString(this.i.gx);
         }
         set stickyRowBackground(v) {
-            this.i.gw = stringToBrush(v);
+            this.i.gx = stringToBrush(v);
         }
         /**
          * Gets the actual background color for content that sticks to the top of the grid.
         */
         get actualStickyRowBackground() {
-            return brushToString(this.i.gc);
+            return brushToString(this.i.gd);
         }
         set actualStickyRowBackground(v) {
-            this.i.gc = stringToBrush(v);
+            this.i.gd = stringToBrush(v);
         }
         /**
          * Gets or sets the background color for cells belonging to rows marked as pinned.
         */
         get pinnedRowBackground() {
-            return brushToString(this.i.gv);
+            return brushToString(this.i.gw);
         }
         set pinnedRowBackground(v) {
-            this.i.gv = stringToBrush(v);
+            this.i.gw = stringToBrush(v);
         }
         /**
          * Gets the actual background color for cells belonging to rows marked as pinned.
         */
         get actualPinnedRowBackground() {
-            return brushToString(this.i.gb);
+            return brushToString(this.i.gc);
         }
         set actualPinnedRowBackground(v) {
-            this.i.gb = stringToBrush(v);
+            this.i.gc = stringToBrush(v);
         }
         /**
          * Gets or sets the color for the last row in the sticky row area.
         */
         get lastStickyRowBackground() {
-            return brushToString(this.i.gu);
+            return brushToString(this.i.gv);
         }
         set lastStickyRowBackground(v) {
-            this.i.gu = stringToBrush(v);
+            this.i.gv = stringToBrush(v);
         }
         /**
          * Gets the actual color for the last row in the sticky row area.
         */
         get actualLastStickyRowBackground() {
-            return brushToString(this.i.ga);
+            return brushToString(this.i.gb);
         }
         set actualLastStickyRowBackground(v) {
-            this.i.ga = stringToBrush(v);
+            this.i.gb = stringToBrush(v);
         }
         /**
          * Gets or sets the opacity of the content.
@@ -473,19 +474,19 @@ export let IgxDefinitionBaseComponent = /*@__PURE__*/ (() => {
          * Gets or sets the color to use for displaying text.
         */
         get textColor() {
-            return brushToString(this.i.gx);
+            return brushToString(this.i.gy);
         }
         set textColor(v) {
-            this.i.gx = stringToBrush(v);
+            this.i.gy = stringToBrush(v);
         }
         /**
          * Gets the actual color used for displaying text.
         */
         get actualTextColor() {
-            return brushToString(this.i.gd);
+            return brushToString(this.i.ge);
         }
         set actualTextColor(v) {
-            this.i.gd = stringToBrush(v);
+            this.i.ge = stringToBrush(v);
         }
         /**
          * Gets or sets whether the bar is supported.
@@ -500,37 +501,37 @@ export let IgxDefinitionBaseComponent = /*@__PURE__*/ (() => {
          * Gets or sets the color to use for value bars.
         */
         get barBackground() {
-            return brushToString(this.i.gf);
+            return brushToString(this.i.gg);
         }
         set barBackground(v) {
-            this.i.gf = stringToBrush(v);
+            this.i.gg = stringToBrush(v);
         }
         /**
          * Gets the actual color used for value bars.
         */
         get actualBarBackground() {
-            return brushToString(this.i.f6);
+            return brushToString(this.i.f7);
         }
         set actualBarBackground(v) {
-            this.i.f6 = stringToBrush(v);
+            this.i.f7 = stringToBrush(v);
         }
         /**
          * Gets or sets the Outline color to use for value bars.
         */
         get barOutline() {
-            return brushToString(this.i.gg);
+            return brushToString(this.i.gh);
         }
         set barOutline(v) {
-            this.i.gg = stringToBrush(v);
+            this.i.gh = stringToBrush(v);
         }
         /**
          * Gets the actual Outline color used for value bars.
         */
         get actualBarOutline() {
-            return brushToString(this.i.f7);
+            return brushToString(this.i.f8);
         }
         set actualBarOutline(v) {
-            this.i.f7 = stringToBrush(v);
+            this.i.f8 = stringToBrush(v);
         }
         /**
          * Gets or sets the stroke thickness to use for value bars.
@@ -612,17 +613,17 @@ export let IgxDefinitionBaseComponent = /*@__PURE__*/ (() => {
             return null;
         }
         transitionStyleOut(style) {
-            this.i.e3((style == null ? null : style.i));
+            this.i.e4((style == null ? null : style.i));
         }
         transitionStyleIn(style) {
-            this.i.e2((style == null ? null : style.i));
+            this.i.e3((style == null ? null : style.i));
         }
         isStyleTransitioningOut(style) {
             let iv = this.i.as((style == null ? null : style.i));
             return (iv);
         }
         setNamedValue(valueName, animationType, value) {
-            this.i.e1(valueName, (animationType == null ? null : animationType), value);
+            this.i.e2(valueName, ensureEnum(CellPropertyAnimationType_$type, animationType), value);
         }
         /**
          * Returns if this definition has named value.
@@ -647,7 +648,7 @@ export let IgxDefinitionBaseComponent = /*@__PURE__*/ (() => {
         * @param valueName  * The named value name to remove.
         */
         removeNamedValue(valueName) {
-            this.i.ew(valueName);
+            this.i.ex(valueName);
         }
         /**
          * Gets the value for a named value from this definition.
@@ -655,7 +656,7 @@ export let IgxDefinitionBaseComponent = /*@__PURE__*/ (() => {
         * @param valueName  * The named value name to check for.
         */
         getNamedValue(valueName) {
-            let iv = this.i.co(valueName);
+            let iv = this.i.cp(valueName);
             return (iv);
         }
         /**