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

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

@@ -134,6 +134,7 @@ import { IgcFilterCellInfo } from "./igc-filter-cell-info";
 import { CellContentVerticalAlignment_$type } from "./CellContentVerticalAlignment";
 import { IgcDataSourceRootSummariesChangedEventArgs } from "igniteui-webcomponents-core";
 import { BaseControlTheme_$type } from "igniteui-webcomponents-core";
+import { IgcDataBindingEventArgs } from './igc-data-binding-event-args';
 var GridStylingDefaults = {};
 export var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     __extends(IgcDataGridComponent, _super);
@@ -217,6 +218,10 @@ export var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super)
         _this._cellPointerUp_wrapped = null;
         _this._cellClicked = null;
         _this._cellClicked_wrapped = null;
+        _this._filterRowDataBinding = null;
+        _this._filterRowDataBinding_wrapped = null;
+        _this._filterRowDataBound = null;
+        _this._filterRowDataBound_wrapped = null;
         _this._sortDescriptionsChanged = null;
         _this._sortDescriptionsChanged_wrapped = null;
         _this._groupDescriptionsChanged = null;
@@ -2092,6 +2097,17 @@ export var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super)
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(IgcDataGridComponent.prototype, "useNewerColumnOptionsMenu", {
+        get: function () {
+            return this.i.useNewerColumnOptionsMenu;
+        },
+        set: function (v) {
+            this.i.useNewerColumnOptionsMenu = ensureBool(v);
+            this._a("useNewerColumnOptionsMenu", this.i.useNewerColumnOptionsMenu);
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(IgcDataGridComponent.prototype, "isGroupRowSticky", {
         /**
          * Gets or sets if group rows will stick to the top of the grid.
@@ -3986,6 +4002,67 @@ export var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super)
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(IgcDataGridComponent.prototype, "columnOptionsTextStyle", {
+        /**
+         * Gets or sets the font settings for text inside the column options menu.
+        */
+        get: function () {
+            if (this.i.columnOptionsTextStyle == null) {
+                return null;
+            }
+            return this.i.columnOptionsTextStyle.fontString;
+        },
+        set: function (v) {
+            var fi = new FontInfo();
+            fi.fontString = v;
+            this.i.columnOptionsTextStyle = fi;
+            this._a("columnOptionsTextStyle", this.i.columnOptionsTextStyle != null ? this.i.columnOptionsTextStyle.fontString : "");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridComponent.prototype, "columnOptionsHoverBackgroundColor", {
+        /**
+         * Gets or sets the hover background color inside the column options menu.
+        */
+        get: function () {
+            return brushToString(this.i.columnOptionsHoverBackgroundColor);
+        },
+        set: function (v) {
+            this.i.columnOptionsHoverBackgroundColor = stringToBrush(v);
+            this._a("columnOptionsHoverBackgroundColor", brushToString(this.i.columnOptionsHoverBackgroundColor));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridComponent.prototype, "columnOptionsToolTipBackgroundColor", {
+        /**
+         * Gets or sets the tooltip background color inside the column options menu.
+        */
+        get: function () {
+            return brushToString(this.i.columnOptionsToolTipBackgroundColor);
+        },
+        set: function (v) {
+            this.i.columnOptionsToolTipBackgroundColor = stringToBrush(v);
+            this._a("columnOptionsToolTipBackgroundColor", brushToString(this.i.columnOptionsToolTipBackgroundColor));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridComponent.prototype, "columnOptionsHighlightColor", {
+        /**
+         * Gets or sets the highlight color inside the column options menu.
+        */
+        get: function () {
+            return brushToString(this.i.columnOptionsHighlightColor);
+        },
+        set: function (v) {
+            this.i.columnOptionsHighlightColor = stringToBrush(v);
+            this._a("columnOptionsHighlightColor", brushToString(this.i.columnOptionsHighlightColor));
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(IgcDataGridComponent.prototype, "columnOptionsSeparatorColor", {
         /**
          * Gets or sets the color of separators inside the column options menu.
@@ -4028,6 +4105,25 @@ export var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super)
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(IgcDataGridComponent.prototype, "columnOptionsGroupHeaderTextStyle", {
+        /**
+         * Gets or sets the font settings for group header text inside the column options menu.
+        */
+        get: function () {
+            if (this.i.columnOptionsGroupHeaderTextStyle == null) {
+                return null;
+            }
+            return this.i.columnOptionsGroupHeaderTextStyle.fontString;
+        },
+        set: function (v) {
+            var fi = new FontInfo();
+            fi.fontString = v;
+            this.i.columnOptionsGroupHeaderTextStyle = fi;
+            this._a("columnOptionsGroupHeaderTextStyle", this.i.columnOptionsGroupHeaderTextStyle != null ? this.i.columnOptionsGroupHeaderTextStyle.fontString : "");
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(IgcDataGridComponent.prototype, "columnOptionsAccentColor", {
         get: function () {
             return brushToString(this.i.columnOptionsAccentColor);
@@ -4039,6 +4135,20 @@ export var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super)
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(IgcDataGridComponent.prototype, "columnOptionsRowHeight", {
+        /**
+         * Gets or sets the row height for submenus inside the column options menu.
+        */
+        get: function () {
+            return this.i.columnOptionsRowHeight;
+        },
+        set: function (v) {
+            this.i.columnOptionsRowHeight = +v;
+            this._a("columnOptionsRowHeight", this.i.columnOptionsRowHeight);
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(IgcDataGridComponent.prototype, "allowCopyOperation", {
         get: function () {
             return this.i.allowCopyOperation;
@@ -4050,6 +4160,17 @@ export var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super)
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(IgcDataGridComponent.prototype, "maxSelectedCellRanges", {
+        get: function () {
+            return this.i.maxSelectedCellRanges;
+        },
+        set: function (v) {
+            this.i.maxSelectedCellRanges = +v;
+            this._a("maxSelectedCellRanges", this.i.maxSelectedCellRanges);
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(IgcDataGridComponent.prototype, "deferEventForRowDragSelection", {
         /**
          * Gets or sets whether to defer the SelectedItemsChanged and SelectedKeysChanged events till after the drag selection has completed.
@@ -4814,6 +4935,62 @@ export var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super)
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(IgcDataGridComponent.prototype, "filterRowDataBinding", {
+        get: function () {
+            return this._filterRowDataBinding;
+        },
+        set: function (ev) {
+            var _this = this;
+            if (this._filterRowDataBinding_wrapped !== null) {
+                this.i.filterRowDataBinding = delegateRemove(this.i.filterRowDataBinding, this._filterRowDataBinding_wrapped);
+                this._filterRowDataBinding_wrapped = null;
+                this._filterRowDataBinding = null;
+            }
+            this._filterRowDataBinding = ev;
+            this._filterRowDataBinding_wrapped = function (o, e) {
+                var outerArgs = new IgcDataBindingEventArgs();
+                outerArgs._provideImplementation(e);
+                if (_this.beforeFilterRowDataBinding) {
+                    _this.beforeFilterRowDataBinding(_this, outerArgs);
+                }
+                if (_this._filterRowDataBinding) {
+                    _this._filterRowDataBinding(_this, outerArgs);
+                }
+            };
+            this.i.filterRowDataBinding = delegateCombine(this.i.filterRowDataBinding, this._filterRowDataBinding_wrapped);
+            ;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridComponent.prototype, "filterRowDataBound", {
+        get: function () {
+            return this._filterRowDataBound;
+        },
+        set: function (ev) {
+            var _this = this;
+            if (this._filterRowDataBound_wrapped !== null) {
+                this.i.filterRowDataBound = delegateRemove(this.i.filterRowDataBound, this._filterRowDataBound_wrapped);
+                this._filterRowDataBound_wrapped = null;
+                this._filterRowDataBound = null;
+            }
+            this._filterRowDataBound = ev;
+            this._filterRowDataBound_wrapped = function (o, e) {
+                var outerArgs = new IgcDataBindingEventArgs();
+                outerArgs._provideImplementation(e);
+                if (_this.beforeFilterRowDataBound) {
+                    _this.beforeFilterRowDataBound(_this, outerArgs);
+                }
+                if (_this._filterRowDataBound) {
+                    _this._filterRowDataBound(_this, outerArgs);
+                }
+            };
+            this.i.filterRowDataBound = delegateCombine(this.i.filterRowDataBound, this._filterRowDataBound_wrapped);
+            ;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(IgcDataGridComponent.prototype, "sortDescriptionsChanged", {
         /**
          * Called when sorting has changed.

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

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

package/esm5/lib/igc-date-time-cell-info.js

@@ -29,10 +29,10 @@ var IgcDateTimeCellInfo = /** @class */ /*@__PURE__*/ (function (_super) {
          * Sets or gets the DateTime value for the cell.
         */
         get: function () {
-            return this.i.oa;
+            return this.i.ob;
         },
         set: function (v) {
-            this.i.oa = v;
+            this.i.ob = v;
         },
         enumerable: false,
         configurable: true
@@ -42,24 +42,24 @@ var IgcDateTimeCellInfo = /** @class */ /*@__PURE__*/ (function (_super) {
          * The format string to apply to the value
         */
         get: function () {
-            return this.i.or;
+            return this.i.os;
         },
         set: function (v) {
-            this.i.or = v;
+            this.i.os = v;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcDateTimeCellInfo.prototype, "formatSpecifiers", {
         get: function () {
-            return this.i.n1;
+            return this.i.n2;
         },
         set: function (v) {
             if (v && !Array.isArray(v) && typeof (v) == "string") {
                 var re = /\s*(?:,|\s|$)\s*/gm;
                 v = v.split(re);
             }
-            this.i.n1 = v;
+            this.i.n2 = v;
         },
         enumerable: false,
         configurable: true
@@ -69,10 +69,10 @@ var IgcDateTimeCellInfo = /** @class */ /*@__PURE__*/ (function (_super) {
          * The format options to apply to the value
         */
         get: function () {
-            return this.i.ok;
+            return this.i.ol;
         },
         set: function (v) {
-            this.i.ok = v;
+            this.i.ol = v;
         },
         enumerable: false,
         configurable: true
@@ -82,10 +82,10 @@ var IgcDateTimeCellInfo = /** @class */ /*@__PURE__*/ (function (_super) {
          * Sets or gets the simple DateTimeFormat to use for the cell.
         */
         get: function () {
-            return this.i.n6;
+            return this.i.n7;
         },
         set: function (v) {
-            this.i.n6 = ensureEnum(DateTimeFormats_$type, v);
+            this.i.n7 = ensureEnum(DateTimeFormats_$type, v);
         },
         enumerable: false,
         configurable: true
@@ -95,10 +95,10 @@ var IgcDateTimeCellInfo = /** @class */ /*@__PURE__*/ (function (_super) {
          * Sets or gets whether the value to use is a DateTimeOffset value.
         */
         get: function () {
-            return this.i.n8;
+            return this.i.n9;
         },
         set: function (v) {
-            this.i.n8 = ensureBool(v);
+            this.i.n9 = ensureBool(v);
         },
         enumerable: false,
         configurable: true