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

package/esm5/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 @@ var IgxDataGridComponent = /** @class */ /*@__PURE__*/ (function () {
                 this.onScroll();
             }
         };
+        this.onMouseEvent = function (e) {
+            if (_this.stopPropagation) {
+                e.stopPropagation();
+            }
+        };
         this._dataSource = null;
         this._insetLeft = 0;
         this._insetTop = 0;
@@ -284,7 +290,7 @@ var IgxDataGridComponent = /** @class */ /*@__PURE__*/ (function () {
             _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);
     }
     IgxDataGridComponent.prototype._ensureColumnsAreManual = function () {
@@ -447,10 +453,16 @@ var IgxDataGridComponent = /** @class */ /*@__PURE__*/ (function () {
             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;
     };
     IgxDataGridComponent.prototype.ngAfterViewInit = function () {
         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);
     };
     IgxDataGridComponent.prototype.ngOnDestroy = function () {
         if (this.i) {
@@ -464,6 +476,11 @@ var IgxDataGridComponent = /** @class */ /*@__PURE__*/ (function () {
                 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);
     };
     Object.defineProperty(IgxDataGridComponent.prototype, "actualDataSource", {
         get: function () {
@@ -509,7 +526,12 @@ var IgxDataGridComponent = /** @class */ /*@__PURE__*/ (function () {
         set: function (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;
+                }
             }
         },
         enumerable: false,
@@ -2588,6 +2610,19 @@ var IgxDataGridComponent = /** @class */ /*@__PURE__*/ (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(IgxDataGridComponent.prototype, "stopPropagation", {
+        /**
+         * Prevents mouse events from bubbling out of the grid.
+        */
+        get: function () {
+            return this.i.stopPropagation;
+        },
+        set: function (v) {
+            this.i.stopPropagation = ensureBool(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.
@@ -3564,7 +3599,7 @@ var IgxDataGridComponent = /** @class */ /*@__PURE__*/ (function () {
         this.i.exchangeColumn((newColumn == null ? null : newColumn.i), (oldColumn == null ? null : oldColumn.i));
     };
     IgxDataGridComponent.prototype.pinColumn = function (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));
     };
     IgxDataGridComponent.prototype.moveColumn = function (oldIndex, newIndex) {
         this.i.moveColumn(oldIndex, newIndex);
@@ -4678,7 +4713,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", 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", 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 });
     return IgxDataGridComponent;
 }());
 export { IgxDataGridComponent };
@@ -4956,6 +4991,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/esm5/lib/igx-date-time-cell-info.js

@@ -29,10 +29,10 @@ var IgxDateTimeCellInfo = /** @class */ /*@__PURE__*/ (function (_super) {
          * Sets or gets the DateTime value for the cell.
         */
         get: function () {
-            return this.i.mt;
+            return this.i.n6;
         },
         set: function (v) {
-            this.i.mt = v;
+            this.i.n6 = v;
         },
         enumerable: false,
         configurable: true
@@ -42,24 +42,24 @@ var IgxDateTimeCellInfo = /** @class */ /*@__PURE__*/ (function (_super) {
          * The format string to apply to the value
         */
         get: function () {
-            return this.i.na;
+            return this.i.on;
         },
         set: function (v) {
-            this.i.na = v;
+            this.i.on = v;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxDateTimeCellInfo.prototype, "formatSpecifiers", {
         get: function () {
-            return this.i.mk;
+            return this.i.nx;
         },
         set: function (v) {
             if (v && !Array.isArray(v) && typeof (v) == "string") {
                 var re = /\s*(?:,|\s|$)\s*/gm;
                 v = v.split(re);
             }
-            this.i.mk = v;
+            this.i.nx = v;
         },
         enumerable: false,
         configurable: true
@@ -69,10 +69,10 @@ var IgxDateTimeCellInfo = /** @class */ /*@__PURE__*/ (function (_super) {
          * The format options to apply to the value
         */
         get: function () {
-            return this.i.m3;
+            return this.i.og;
         },
         set: function (v) {
-            this.i.m3 = v;
+            this.i.og = v;
         },
         enumerable: false,
         configurable: true
@@ -82,10 +82,10 @@ var IgxDateTimeCellInfo = /** @class */ /*@__PURE__*/ (function (_super) {
          * Sets or gets the simple DateTimeFormat to use for the cell.
         */
         get: function () {
-            return this.i.mp;
+            return this.i.n2;
         },
         set: function (v) {
-            this.i.mp = ensureEnum(DateTimeFormats_$type, v);
+            this.i.n2 = ensureEnum(DateTimeFormats_$type, v);
         },
         enumerable: false,
         configurable: true
@@ -95,10 +95,10 @@ var IgxDateTimeCellInfo = /** @class */ /*@__PURE__*/ (function (_super) {
          * Sets or gets whether the value to use is a DateTimeOffset value.
         */
         get: function () {
-            return this.i.mr;
+            return this.i.n4;
         },
         set: function (v) {
-            this.i.mr = ensureBool(v);
+            this.i.n4 = ensureBool(v);
         },
         enumerable: false,
         configurable: true

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

@@ -47,10 +47,10 @@ var IgxDateTimeColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the date time format to use for this column. If FormatString is specificied this value is ignored.
         */
         get: function () {
-            return this.i.oa;
+            return this.i.pb;
         },
         set: function (v) {
-            this.i.oa = ensureEnum(DateTimeFormats_$type, v);
+            this.i.pb = ensureEnum(DateTimeFormats_$type, v);
         },
         enumerable: false,
         configurable: true
@@ -60,10 +60,10 @@ var IgxDateTimeColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the format string to apply to the value. If set, the other value formatting properties on this column are ignored.
         */
         get: function () {
-            return this.i.os;
+            return this.i.pt;
         },
         set: function (v) {
-            this.i.os = v;
+            this.i.pt = v;
         },
         enumerable: false,
         configurable: true
@@ -73,24 +73,24 @@ var IgxDateTimeColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the format string to use when editing dates.
         */
         get: function () {
-            return this.i.ol;
+            return this.i.pm;
         },
         set: function (v) {
-            this.i.ol = v;
+            this.i.pm = v;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxDateTimeColumnComponent.prototype, "formatSpecifiers", {
         get: function () {
-            return this.i.n6;
+            return this.i.o7;
         },
         set: function (v) {
             if (v && !Array.isArray(v) && typeof (v) == "string") {
                 var re = /\s*(?:,|\s|$)\s*/gm;
                 v = v.split(re);
             }
-            this.i.n6 = v;
+            this.i.o7 = v;
         },
         enumerable: false,
         configurable: true
@@ -100,10 +100,10 @@ var IgxDateTimeColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the INTL DateTimeFormat object to use for formatting the date values.
         */
         get: function () {
-            return this.i.oh;
+            return this.i.pi;
         },
         set: function (v) {
-            this.i.oh = v;
+            this.i.pi = v;
         },
         enumerable: false,
         configurable: true
@@ -113,10 +113,10 @@ var IgxDateTimeColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the ShowTodayButton property to detirmine if the today button is shown
         */
         get: function () {
-            return this.i.od;
+            return this.i.pe;
         },
         set: function (v) {
-            this.i.od = ensureBool(v);
+            this.i.pe = ensureBool(v);
         },
         enumerable: false,
         configurable: true
@@ -126,10 +126,10 @@ var IgxDateTimeColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the editor type used for editing cells in this column.
         */
         get: function () {
-            return this.i.ob;
+            return this.i.pc;
         },
         set: function (v) {
-            this.i.ob = ensureEnum(EditorType_$type, v);
+            this.i.pc = ensureEnum(EditorType_$type, v);
         },
         enumerable: false,
         configurable: true
@@ -139,10 +139,10 @@ var IgxDateTimeColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the ComboBox data source.
         */
         get: function () {
-            return this.i.og;
+            return this.i.ph;
         },
         set: function (v) {
-            this.i.og = v;
+            this.i.ph = v;
         },
         enumerable: false,
         configurable: true
@@ -152,10 +152,10 @@ var IgxDateTimeColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the ComboBox text field.
         */
         get: function () {
-            return this.i.on;
+            return this.i.po;
         },
         set: function (v) {
-            this.i.on = v;
+            this.i.po = v;
         },
         enumerable: false,
         configurable: true
@@ -165,10 +165,10 @@ var IgxDateTimeColumnComponent = /** @class */ /*@__PURE__*/ (function (_super)
          * Gets or sets the ComboBox value field.
         */
         get: function () {
-            return this.i.oo;
+            return this.i.pp;
         },
         set: function (v) {
-            this.i.oo = v;
+            this.i.pp = v;
         },
         enumerable: false,
         configurable: true