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

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

@@ -27,7 +27,7 @@ import { IgcGridSortDescriptionsChangedEventArgs } from './igc-grid-sort-descrip
 import { IgcGridGroupDescriptionsChangedEventArgs } from './igc-grid-group-descriptions-changed-event-args';
 import { IgcGridSummaryDescriptionsChangedEventArgs } from './igc-grid-summary-descriptions-changed-event-args';
 import { DataGrid } from "./DataGrid";
-import { ensureEnum, ensureBool, CollectionAdapter, getAllPropertyNames, enumToString, fromSpinal, toSpinal, brushToString, stringToBrush, initializePropertiesFromCss, NamePatcher } from "igniteui-webcomponents-core";
+import { ensureEnum, ensureBool, CollectionAdapter, getAllPropertyNames, enumToString, fromSpinal, toSpinal, brushToString, stringToBrush, initializePropertiesFromCss, NamePatcher, moveFocusNext, moveFocusPrevious } from "igniteui-webcomponents-core";
 import { Thickness } from "igniteui-webcomponents-core";
 import { WebComponentRenderer, WebComponentWrapper, PortalManager } from "igniteui-webcomponents-core";
 import { DataGridColumn } from './DataGridColumn';
@@ -133,6 +133,7 @@ import { IgcTextHeaderCellInfo } from "./igc-text-header-cell-info";
 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";
 var GridStylingDefaults = {};
 export var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     __extends(IgcDataGridComponent, _super);
@@ -468,6 +469,12 @@ export var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super)
             this._scroller.scrollbarBrush = color;
         }
     };
+    IgcDataGridComponent.prototype._moveFocusNext = function () {
+        moveFocusNext(this, true);
+    };
+    IgcDataGridComponent.prototype._moveFocusPrevious = function () {
+        moveFocusPrevious(this);
+    };
     IgcDataGridComponent.prototype.createImplementation = function () {
         //let test = Grid;
         return new DataGrid();
@@ -1021,10 +1028,24 @@ export var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super)
             RegisterElementHelper.registerElement(IgcDataGridComponent.htmlTagName, IgcDataGridComponent);
         }
     };
-    Object.defineProperty(IgcDataGridComponent.prototype, "columnResizingMode", {
+    Object.defineProperty(IgcDataGridComponent.prototype, "theme", {
         /**
-     * Gets or sets the type of column resizing to use.
+     * Gets or sets the base theme used by the grid.
     */
+        get: function () {
+            return this.i.theme;
+        },
+        set: function (v) {
+            this.i.theme = ensureEnum(BaseControlTheme_$type, v);
+            this._a("theme", enumToString(BaseControlTheme_$type, this.i.theme));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridComponent.prototype, "columnResizingMode", {
+        /**
+         * Gets or sets the type of column resizing to use.
+        */
         get: function () {
             return this.i.columnResizingMode;
         },
@@ -2865,6 +2886,20 @@ export var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super)
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(IgcDataGridComponent.prototype, "actualBorder", {
+        /**
+         * Gets the actual border color around the grid.
+        */
+        get: function () {
+            return brushToString(this.i.actualBorder);
+        },
+        set: function (v) {
+            this.i.actualBorder = stringToBrush(v);
+            this._a("actualBorder", brushToString(this.i.actualBorder));
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(IgcDataGridComponent.prototype, "border", {
         /**
          * Gets or sets the border color around the grid.
@@ -3108,6 +3143,34 @@ export var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super)
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(IgcDataGridComponent.prototype, "actualBackground", {
+        /**
+         * Gets the actual background for the grid.
+        */
+        get: function () {
+            return brushToString(this.i.actualBackground);
+        },
+        set: function (v) {
+            this.i.actualBackground = stringToBrush(v);
+            this._a("actualBackground", brushToString(this.i.actualBackground));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridComponent.prototype, "background", {
+        /**
+         * Gets or sets the background for the grid.
+        */
+        get: function () {
+            return brushToString(this.i.background);
+        },
+        set: function (v) {
+            this.i.background = stringToBrush(v);
+            this._a("background", brushToString(this.i.background));
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(IgcDataGridComponent.prototype, "responsiveStates", {
         /**
          * A set of states that can be applied to the columns of the grid based on available space.
@@ -3895,6 +3958,87 @@ export var IgcDataGridComponent = /** @class */ /*@__PURE__*/ (function (_super)
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(IgcDataGridComponent.prototype, "columnOptionsBackground", {
+        /**
+         * Gets or sets the column options dropdown background color.
+        */
+        get: function () {
+            return brushToString(this.i.columnOptionsBackground);
+        },
+        set: function (v) {
+            this.i.columnOptionsBackground = stringToBrush(v);
+            this._a("columnOptionsBackground", brushToString(this.i.columnOptionsBackground));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridComponent.prototype, "columnOptionsTextColor", {
+        /**
+         * Gets or sets the text color for text inside the column options menu.
+        */
+        get: function () {
+            return brushToString(this.i.columnOptionsTextColor);
+        },
+        set: function (v) {
+            this.i.columnOptionsTextColor = stringToBrush(v);
+            this._a("columnOptionsTextColor", brushToString(this.i.columnOptionsTextColor));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridComponent.prototype, "columnOptionsSeparatorColor", {
+        /**
+         * Gets or sets the color of separators inside the column options menu.
+        */
+        get: function () {
+            return brushToString(this.i.columnOptionsSeparatorColor);
+        },
+        set: function (v) {
+            this.i.columnOptionsSeparatorColor = stringToBrush(v);
+            this._a("columnOptionsSeparatorColor", brushToString(this.i.columnOptionsSeparatorColor));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridComponent.prototype, "columnOptionsGroupHeaderBackground", {
+        /**
+         * Gets or sets the background color for group headers inside the column options menu.
+        */
+        get: function () {
+            return brushToString(this.i.columnOptionsGroupHeaderBackground);
+        },
+        set: function (v) {
+            this.i.columnOptionsGroupHeaderBackground = stringToBrush(v);
+            this._a("columnOptionsGroupHeaderBackground", brushToString(this.i.columnOptionsGroupHeaderBackground));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridComponent.prototype, "columnOptionsGroupHeaderTextColor", {
+        /**
+         * Gets or sets the text color for group headers inside the column options menu.
+        */
+        get: function () {
+            return brushToString(this.i.columnOptionsGroupHeaderTextColor);
+        },
+        set: function (v) {
+            this.i.columnOptionsGroupHeaderTextColor = stringToBrush(v);
+            this._a("columnOptionsGroupHeaderTextColor", brushToString(this.i.columnOptionsGroupHeaderTextColor));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridComponent.prototype, "columnOptionsAccentColor", {
+        get: function () {
+            return brushToString(this.i.columnOptionsAccentColor);
+        },
+        set: function (v) {
+            this.i.columnOptionsAccentColor = stringToBrush(v);
+            this._a("columnOptionsAccentColor", brushToString(this.i.columnOptionsAccentColor));
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(IgcDataGridComponent.prototype, "allowCopyOperation", {
         get: function () {
             return this.i.allowCopyOperation;

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

@@ -156,11 +156,11 @@ export var IgcDataGridFilterDialogComponent = /** @class */ /*@__PURE__*/ (funct
     };
     Object.defineProperty(IgcDataGridFilterDialogComponent.prototype, "isAnimationEnabled", {
         get: function () {
-            return this.i.ab;
+            return this.i.ad;
         },
         set: function (v) {
-            this.i.ab = ensureBool(v);
-            this._a("isAnimationEnabled", this.i.ab);
+            this.i.ad = ensureBool(v);
+            this._a("isAnimationEnabled", this.i.ad);
         },
         enumerable: false,
         configurable: true
@@ -172,11 +172,11 @@ export var IgcDataGridFilterDialogComponent = /** @class */ /*@__PURE__*/ (funct
          * to appear blurry.
         */
         get: function () {
-            return this.i.aj;
+            return this.i.al;
         },
         set: function (v) {
-            this.i.aj = +v;
-            this._a("pixelScalingRatio", this.i.aj);
+            this.i.al = +v;
+            this._a("pixelScalingRatio", this.i.al);
         },
         enumerable: false,
         configurable: true
@@ -188,40 +188,121 @@ export var IgcDataGridFilterDialogComponent = /** @class */ /*@__PURE__*/ (funct
          * to appear blurry.
         */
         get: function () {
-            return this.i.ai;
+            return this.i.ak;
         },
         set: function (v) {
-            this.i.ai = +v;
-            this._a("actualPixelScalingRatio", this.i.ai);
+            this.i.ak = +v;
+            this._a("actualPixelScalingRatio", this.i.ak);
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcDataGridFilterDialogComponent.prototype, "iconColor", {
         get: function () {
-            return brushToString(this.i.bw);
+            return brushToString(this.i.ci);
         },
         set: function (v) {
-            this.i.bw = stringToBrush(v);
-            this._a("iconColor", brushToString(this.i.bw));
+            this.i.ci = stringToBrush(v);
+            this._a("iconColor", brushToString(this.i.ci));
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcDataGridFilterDialogComponent.prototype, "viewSize", {
         get: function () {
-            return this.i.ak;
+            return this.i.am;
         },
         set: function (v) {
-            this.i.ak = +v;
-            this._a("viewSize", this.i.ak);
+            this.i.am = +v;
+            this._a("viewSize", this.i.am);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridFilterDialogComponent.prototype, "columnOptionsBackground", {
+        /**
+         * Gets or sets the column options dropdown background color.
+        */
+        get: function () {
+            return brushToString(this.i.cd);
+        },
+        set: function (v) {
+            this.i.cd = stringToBrush(v);
+            this._a("columnOptionsBackground", brushToString(this.i.cd));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridFilterDialogComponent.prototype, "columnOptionsTextColor", {
+        /**
+         * Gets or sets the text color for text inside the column options menu.
+        */
+        get: function () {
+            return brushToString(this.i.ch);
+        },
+        set: function (v) {
+            this.i.ch = stringToBrush(v);
+            this._a("columnOptionsTextColor", brushToString(this.i.ch));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridFilterDialogComponent.prototype, "columnOptionsSeparatorColor", {
+        /**
+         * Gets or sets the color of separators inside the column options menu.
+        */
+        get: function () {
+            return brushToString(this.i.cg);
+        },
+        set: function (v) {
+            this.i.cg = stringToBrush(v);
+            this._a("columnOptionsSeparatorColor", brushToString(this.i.cg));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridFilterDialogComponent.prototype, "columnOptionsGroupHeaderBackground", {
+        /**
+         * Gets or sets the background color for group headers inside the column options menu.
+        */
+        get: function () {
+            return brushToString(this.i.ce);
+        },
+        set: function (v) {
+            this.i.ce = stringToBrush(v);
+            this._a("columnOptionsGroupHeaderBackground", brushToString(this.i.ce));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridFilterDialogComponent.prototype, "columnOptionsGroupHeaderTextColor", {
+        /**
+         * Gets or sets the text color for group headers inside the column options menu.
+        */
+        get: function () {
+            return brushToString(this.i.cf);
+        },
+        set: function (v) {
+            this.i.cf = stringToBrush(v);
+            this._a("columnOptionsGroupHeaderTextColor", brushToString(this.i.cf));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridFilterDialogComponent.prototype, "columnOptionsAccentColor", {
+        get: function () {
+            return brushToString(this.i.cc);
+        },
+        set: function (v) {
+            this.i.cc = stringToBrush(v);
+            this._a("columnOptionsAccentColor", brushToString(this.i.cc));
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcDataGridFilterDialogComponent.prototype, "isOpen", {
         get: function () {
-            return this.i.ac;
+            return this.i.ae;
         },
         enumerable: false,
         configurable: true
@@ -312,16 +393,16 @@ export var IgcDataGridFilterDialogComponent = /** @class */ /*@__PURE__*/ (funct
         this._inStyling = false;
     };
     IgcDataGridFilterDialogComponent.prototype.notifySizeChanged = function (width, height) {
-        this.i.be(width, height);
+        this.i.bo(width, height);
     };
     IgcDataGridFilterDialogComponent.prototype.notifyCellSizeChanged = function () {
-        this.i.bd();
+        this.i.bn();
     };
     IgcDataGridFilterDialogComponent.prototype.showIcon = function () {
-        this.i.br();
+        this.i.b1();
     };
     IgcDataGridFilterDialogComponent.prototype.hideIcon = function () {
-        this.i.bb();
+        this.i.bl();
     };
     IgcDataGridFilterDialogComponent.prototype.getDesiredToolbarActions = function () {
         var iv = this.i.getDesiredToolbarActions();

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

@@ -209,10 +209,10 @@ export var IgcDataGridPagerComponent = /** @class */ /*@__PURE__*/ (function (_s
     };
     Object.defineProperty(IgcDataGridPagerComponent.prototype, "pagerText", {
         get: function () {
-            return this.i.a9;
+            return this.i.bb;
         },
         set: function (v) {
-            this.i.a9 = v;
+            this.i.bb = v;
         },
         enumerable: false,
         configurable: true
@@ -278,16 +278,44 @@ export var IgcDataGridPagerComponent = /** @class */ /*@__PURE__*/ (function (_s
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(IgcDataGridPagerComponent.prototype, "actualBackground", {
+        /**
+         * Gets or sets the background color to use.
+        */
+        get: function () {
+            return brushToString(this.i.cg);
+        },
+        set: function (v) {
+            this.i.cg = stringToBrush(v);
+            this._a("actualBackground", brushToString(this.i.cg));
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(IgcDataGridPagerComponent.prototype, "background", {
         /**
          * Gets or sets the background color to use.
         */
         get: function () {
-            return brushToString(this.i.ca);
+            return brushToString(this.i.ci);
+        },
+        set: function (v) {
+            this.i.ci = stringToBrush(v);
+            this._a("background", brushToString(this.i.ci));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgcDataGridPagerComponent.prototype, "actualBorder", {
+        /**
+         * Gets or sets the border color around the grid.
+        */
+        get: function () {
+            return brushToString(this.i.ch);
         },
         set: function (v) {
-            this.i.ca = stringToBrush(v);
-            this._a("background", brushToString(this.i.ca));
+            this.i.ch = stringToBrush(v);
+            this._a("actualBorder", brushToString(this.i.ch));
         },
         enumerable: false,
         configurable: true
@@ -372,16 +400,16 @@ export var IgcDataGridPagerComponent = /** @class */ /*@__PURE__*/ (function (_s
         this._inStyling = false;
     };
     IgcDataGridPagerComponent.prototype.nextPage = function () {
-        this.i.bn();
+        this.i.bp();
     };
     IgcDataGridPagerComponent.prototype.previousPage = function () {
-        this.i.by();
+        this.i.b0();
     };
     IgcDataGridPagerComponent.prototype.firstPage = function () {
-        this.i.bk();
+        this.i.bm();
     };
     IgcDataGridPagerComponent.prototype.lastPage = function () {
-        this.i.bm();
+        this.i.bo();
     };
     IgcDataGridPagerComponent.prototype.provideContainer = function (container) {
         this.i.provideContainer(container);
@@ -399,7 +427,7 @@ export var IgcDataGridPagerComponent = /** @class */ /*@__PURE__*/ (function (_s
     
     */
     IgcDataGridPagerComponent.prototype.exportSerializedVisualModel = function () {
-        var iv = this.i.az();
+        var iv = this.i.a1();
         return (iv);
     };
     Object.defineProperty(IgcDataGridPagerComponent.prototype, "pageChanged", {

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

@@ -80,11 +80,11 @@ export var IgcDateTimeColumnComponent = /** @class */ /*@__PURE__*/ (function (_
          * 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.pe;
+            return this.i.qv;
         },
         set: function (v) {
-            this.i.pe = ensureEnum(DateTimeFormats_$type, v);
-            this._a("dateTimeFormat", enumToString(DateTimeFormats_$type, this.i.pe));
+            this.i.qv = ensureEnum(DateTimeFormats_$type, v);
+            this._a("dateTimeFormat", enumToString(DateTimeFormats_$type, this.i.qv));
         },
         enumerable: false,
         configurable: true
@@ -94,10 +94,10 @@ export var IgcDateTimeColumnComponent = /** @class */ /*@__PURE__*/ (function (_
          * 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.pw;
+            return this.i.rd;
         },
         set: function (v) {
-            this.i.pw = v;
+            this.i.rd = v;
         },
         enumerable: false,
         configurable: true
@@ -107,24 +107,24 @@ export var IgcDateTimeColumnComponent = /** @class */ /*@__PURE__*/ (function (_
          * Gets or sets the format string to use when editing dates.
         */
         get: function () {
-            return this.i.pp;
+            return this.i.q6;
         },
         set: function (v) {
-            this.i.pp = v;
+            this.i.q6 = v;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgcDateTimeColumnComponent.prototype, "formatSpecifiers", {
         get: function () {
-            return this.i.pa;
+            return this.i.qr;
         },
         set: function (v) {
             if (v && !Array.isArray(v) && typeof (v) == "string") {
                 var re = /\s*(?:,|\s|$)\s*/gm;
                 v = v.split(re);
             }
-            this.i.pa = v;
+            this.i.qr = v;
         },
         enumerable: false,
         configurable: true
@@ -134,10 +134,10 @@ export var IgcDateTimeColumnComponent = /** @class */ /*@__PURE__*/ (function (_
          * Gets or sets the INTL DateTimeFormat object to use for formatting the date values.
         */
         get: function () {
-            return this.i.pl;
+            return this.i.q2;
         },
         set: function (v) {
-            this.i.pl = v;
+            this.i.q2 = v;
         },
         enumerable: false,
         configurable: true
@@ -147,11 +147,11 @@ export var IgcDateTimeColumnComponent = /** @class */ /*@__PURE__*/ (function (_
          * Gets or sets the ShowTodayButton property to detirmine if the today button is shown
         */
         get: function () {
-            return this.i.ph;
+            return this.i.qy;
         },
         set: function (v) {
-            this.i.ph = ensureBool(v);
-            this._a("showTodayButton", this.i.ph);
+            this.i.qy = ensureBool(v);
+            this._a("showTodayButton", this.i.qy);
         },
         enumerable: false,
         configurable: true
@@ -161,11 +161,11 @@ export var IgcDateTimeColumnComponent = /** @class */ /*@__PURE__*/ (function (_
          * Gets or sets the editor type used for editing cells in this column.
         */
         get: function () {
-            return this.i.pf;
+            return this.i.qw;
         },
         set: function (v) {
-            this.i.pf = ensureEnum(EditorType_$type, v);
-            this._a("editorType", enumToString(EditorType_$type, this.i.pf));
+            this.i.qw = ensureEnum(EditorType_$type, v);
+            this._a("editorType", enumToString(EditorType_$type, this.i.qw));
         },
         enumerable: false,
         configurable: true
@@ -175,10 +175,10 @@ export var IgcDateTimeColumnComponent = /** @class */ /*@__PURE__*/ (function (_
          * Gets or sets the ComboBox data source.
         */
         get: function () {
-            return this.i.pk;
+            return this.i.q1;
         },
         set: function (v) {
-            this.i.pk = v;
+            this.i.q1 = v;
         },
         enumerable: false,
         configurable: true
@@ -188,10 +188,10 @@ export var IgcDateTimeColumnComponent = /** @class */ /*@__PURE__*/ (function (_
          * Gets or sets the ComboBox text field.
         */
         get: function () {
-            return this.i.pr;
+            return this.i.q8;
         },
         set: function (v) {
-            this.i.pr = v;
+            this.i.q8 = v;
         },
         enumerable: false,
         configurable: true
@@ -201,10 +201,10 @@ export var IgcDateTimeColumnComponent = /** @class */ /*@__PURE__*/ (function (_
          * Gets or sets the ComboBox value field.
         */
         get: function () {
-            return this.i.ps;
+            return this.i.q9;
         },
         set: function (v) {
-            this.i.ps = v;
+            this.i.q9 = v;
         },
         enumerable: false,
         configurable: true