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

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

@@ -6,6 +6,7 @@ import { IgxFilterDialogRenderCompletedEventArgs } from "./igx-filter-dialog-ren
 import { GridFilterDialog } from "./GridFilterDialog";
 import { TypeRegistrar } from "igniteui-angular-core";
 import { NamePatcher, ensureBool, brushToString, stringToBrush, toSpinal, initializePropertiesFromCss } from "igniteui-angular-core";
+import { FontInfo } from "igniteui-angular-core";
 import * as i0 from "@angular/core";
 /**
  * An advanced grid for displaying data.
@@ -67,10 +68,10 @@ var IgxDataGridFilterDialogComponent = /** @class */ /*@__PURE__*/ (function ()
     };
     Object.defineProperty(IgxDataGridFilterDialogComponent.prototype, "isAnimationEnabled", {
         get: function () {
-            return this.i.ad;
+            return this.i.ai;
         },
         set: function (v) {
-            this.i.ad = ensureBool(v);
+            this.i.ai = ensureBool(v);
         },
         enumerable: false,
         configurable: true
@@ -82,10 +83,10 @@ var IgxDataGridFilterDialogComponent = /** @class */ /*@__PURE__*/ (function ()
          * to appear blurry.
         */
         get: function () {
-            return this.i.al;
+            return this.i.aq;
         },
         set: function (v) {
-            this.i.al = +v;
+            this.i.aq = +v;
         },
         enumerable: false,
         configurable: true
@@ -97,30 +98,30 @@ var IgxDataGridFilterDialogComponent = /** @class */ /*@__PURE__*/ (function ()
          * to appear blurry.
         */
         get: function () {
-            return this.i.ak;
+            return this.i.ap;
         },
         set: function (v) {
-            this.i.ak = +v;
+            this.i.ap = +v;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxDataGridFilterDialogComponent.prototype, "iconColor", {
         get: function () {
-            return brushToString(this.i.ci);
+            return brushToString(this.i.c1);
         },
         set: function (v) {
-            this.i.ci = stringToBrush(v);
+            this.i.c1 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxDataGridFilterDialogComponent.prototype, "viewSize", {
         get: function () {
-            return this.i.am;
+            return this.i.ar;
         },
         set: function (v) {
-            this.i.am = +v;
+            this.i.ar = +v;
         },
         enumerable: false,
         configurable: true
@@ -130,10 +131,10 @@ var IgxDataGridFilterDialogComponent = /** @class */ /*@__PURE__*/ (function ()
          * 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.i.ct = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -143,10 +144,67 @@ var IgxDataGridFilterDialogComponent = /** @class */ /*@__PURE__*/ (function ()
          * 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.i.cz = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxDataGridFilterDialogComponent.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;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxDataGridFilterDialogComponent.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);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxDataGridFilterDialogComponent.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);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxDataGridFilterDialogComponent.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);
         },
         enumerable: false,
         configurable: true
@@ -156,10 +214,10 @@ var IgxDataGridFilterDialogComponent = /** @class */ /*@__PURE__*/ (function ()
          * 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.i.cy = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -169,10 +227,10 @@ var IgxDataGridFilterDialogComponent = /** @class */ /*@__PURE__*/ (function ()
          * 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.i.cu = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -182,27 +240,58 @@ var IgxDataGridFilterDialogComponent = /** @class */ /*@__PURE__*/ (function ()
          * 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);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxDataGridFilterDialogComponent.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);
+            var fi = new FontInfo();
+            fi.fontString = v;
+            this.i.aa = fi;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxDataGridFilterDialogComponent.prototype, "columnOptionsAccentColor", {
         get: function () {
-            return brushToString(this.i.cc);
+            return brushToString(this.i.cs);
         },
         set: function (v) {
-            this.i.cc = stringToBrush(v);
+            this.i.cs = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxDataGridFilterDialogComponent.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.ax = +v;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxDataGridFilterDialogComponent.prototype, "isOpen", {
         get: function () {
-            return this.i.ae;
+            return this.i.aj;
         },
         enumerable: false,
         configurable: true
@@ -293,16 +382,16 @@ var IgxDataGridFilterDialogComponent = /** @class */ /*@__PURE__*/ (function ()
         this._inStyling = false;
     };
     IgxDataGridFilterDialogComponent.prototype.notifySizeChanged = function (width, height) {
-        this.i.bo(width, height);
+        this.i.b1(width, height);
     };
     IgxDataGridFilterDialogComponent.prototype.notifyCellSizeChanged = function () {
-        this.i.bn();
+        this.i.b0();
     };
     IgxDataGridFilterDialogComponent.prototype.showIcon = function () {
-        this.i.b1();
+        this.i.ce();
     };
     IgxDataGridFilterDialogComponent.prototype.hideIcon = function () {
-        this.i.bl();
+        this.i.by();
     };
     IgxDataGridFilterDialogComponent.prototype.getDesiredToolbarActions = function () {
         var iv = this.i.getDesiredToolbarActions();
@@ -429,7 +518,7 @@ var IgxDataGridFilterDialogComponent = /** @class */ /*@__PURE__*/ (function ()
         }
     };
     IgxDataGridFilterDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxDataGridFilterDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    IgxDataGridFilterDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: IgxDataGridFilterDialogComponent, selector: "igx-data-grid-filter-dialog", inputs: { isAnimationEnabled: "isAnimationEnabled", pixelScalingRatio: "pixelScalingRatio", actualPixelScalingRatio: "actualPixelScalingRatio", iconColor: "iconColor", viewSize: "viewSize", columnOptionsBackground: "columnOptionsBackground", columnOptionsTextColor: "columnOptionsTextColor", columnOptionsSeparatorColor: "columnOptionsSeparatorColor", columnOptionsGroupHeaderBackground: "columnOptionsGroupHeaderBackground", columnOptionsGroupHeaderTextColor: "columnOptionsGroupHeaderTextColor", columnOptionsAccentColor: "columnOptionsAccentColor", commandCompleted: "commandCompleted", invalidateActions: "invalidateActions" }, outputs: { dialogOpening: "dialogOpening", filterChanging: "filterChanging", filterChanged: "filterChanged", renderCompleted: "renderCompleted" }, providers: [], ngImport: i0, template: "", isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    IgxDataGridFilterDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: IgxDataGridFilterDialogComponent, selector: "igx-data-grid-filter-dialog", inputs: { isAnimationEnabled: "isAnimationEnabled", pixelScalingRatio: "pixelScalingRatio", actualPixelScalingRatio: "actualPixelScalingRatio", iconColor: "iconColor", viewSize: "viewSize", columnOptionsBackground: "columnOptionsBackground", columnOptionsTextColor: "columnOptionsTextColor", columnOptionsTextStyle: "columnOptionsTextStyle", columnOptionsHoverBackgroundColor: "columnOptionsHoverBackgroundColor", columnOptionsToolTipBackgroundColor: "columnOptionsToolTipBackgroundColor", columnOptionsHighlightColor: "columnOptionsHighlightColor", columnOptionsSeparatorColor: "columnOptionsSeparatorColor", columnOptionsGroupHeaderBackground: "columnOptionsGroupHeaderBackground", columnOptionsGroupHeaderTextColor: "columnOptionsGroupHeaderTextColor", columnOptionsGroupHeaderTextStyle: "columnOptionsGroupHeaderTextStyle", columnOptionsAccentColor: "columnOptionsAccentColor", columnOptionsRowHeight: "columnOptionsRowHeight", commandCompleted: "commandCompleted", invalidateActions: "invalidateActions" }, outputs: { dialogOpening: "dialogOpening", filterChanging: "filterChanging", filterChanged: "filterChanged", renderCompleted: "renderCompleted" }, providers: [], ngImport: i0, template: "", isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
     return IgxDataGridFilterDialogComponent;
 }());
 export { IgxDataGridFilterDialogComponent };
@@ -455,14 +544,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }], columnOptionsTextColor: [{
                 type: Input
+            }], columnOptionsTextStyle: [{
+                type: Input
+            }], columnOptionsHoverBackgroundColor: [{
+                type: Input
+            }], columnOptionsToolTipBackgroundColor: [{
+                type: Input
+            }], columnOptionsHighlightColor: [{
+                type: Input
             }], columnOptionsSeparatorColor: [{
                 type: Input
             }], columnOptionsGroupHeaderBackground: [{
                 type: Input
             }], columnOptionsGroupHeaderTextColor: [{
                 type: Input
+            }], columnOptionsGroupHeaderTextStyle: [{
+                type: Input
             }], columnOptionsAccentColor: [{
                 type: Input
+            }], columnOptionsRowHeight: [{
+                type: Input
             }], commandCompleted: [{
                 type: Input
             }], invalidateActions: [{

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.oa;
+            return this.i.oj;
         },
         set: function (v) {
-            this.i.oa = v;
+            this.i.oj = 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.or;
+            return this.i.o0;
         },
         set: function (v) {
-            this.i.or = v;
+            this.i.o0 = v;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxDateTimeCellInfo.prototype, "formatSpecifiers", {
         get: function () {
-            return this.i.n1;
+            return this.i.oa;
         },
         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.oa = 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.ok;
+            return this.i.ot;
         },
         set: function (v) {
-            this.i.ok = v;
+            this.i.ot = 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.n6;
+            return this.i.of;
         },
         set: function (v) {
-            this.i.n6 = ensureEnum(DateTimeFormats_$type, v);
+            this.i.of = 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.n8;
+            return this.i.oh;
         },
         set: function (v) {
-            this.i.n8 = ensureBool(v);
+            this.i.oh = 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.qv;
+            return this.i.sc;
         },
         set: function (v) {
-            this.i.qv = ensureEnum(DateTimeFormats_$type, v);
+            this.i.sc = 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.rd;
+            return this.i.su;
         },
         set: function (v) {
-            this.i.rd = v;
+            this.i.su = 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.q6;
+            return this.i.sn;
         },
         set: function (v) {
-            this.i.q6 = v;
+            this.i.sn = v;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxDateTimeColumnComponent.prototype, "formatSpecifiers", {
         get: function () {
-            return this.i.qr;
+            return this.i.r8;
         },
         set: function (v) {
             if (v && !Array.isArray(v) && typeof (v) == "string") {
                 var re = /\s*(?:,|\s|$)\s*/gm;
                 v = v.split(re);
             }
-            this.i.qr = v;
+            this.i.r8 = 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.q2;
+            return this.i.sj;
         },
         set: function (v) {
-            this.i.q2 = v;
+            this.i.sj = 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.qy;
+            return this.i.sf;
         },
         set: function (v) {
-            this.i.qy = ensureBool(v);
+            this.i.sf = 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.qw;
+            return this.i.sd;
         },
         set: function (v) {
-            this.i.qw = ensureEnum(EditorType_$type, v);
+            this.i.sd = 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.q1;
+            return this.i.si;
         },
         set: function (v) {
-            this.i.q1 = v;
+            this.i.si = 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.q8;
+            return this.i.sp;
         },
         set: function (v) {
-            this.i.q8 = v;
+            this.i.sp = 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.q9;
+            return this.i.sq;
         },
         set: function (v) {
-            this.i.q9 = v;
+            this.i.sq = v;
         },
         enumerable: false,
         configurable: true

package/esm5/lib/igx-date-time-column-dynamic-module.js

@@ -10,11 +10,13 @@ import { IgxDateTimeColumnModule } from './igx-date-time-column-module';
 import { IgxDateTimeColumnComponent } from './igx-date-time-column-component';
 import { DateTimeColumn } from './DateTimeColumn';
 import { TypeRegistrar } from "igniteui-angular-core";
+import { IgxDateTimeCellInfo } from './igx-date-time-cell-info';
 import * as i0 from "@angular/core";
 var IgxDateTimeColumnDynamicModule = /** @class */ /*@__PURE__*/ (function () {
     function IgxDateTimeColumnDynamicModule() {
         TypeRegistrar.registerCons("IgxDateTimeColumnComponent", IgxDateTimeColumnComponent);
         TypeRegistrar.register("DateTimeColumn", DateTimeColumn.$type);
+        TypeRegistrar.registerCons("IgxDateTimeCellInfo", IgxDateTimeCellInfo);
     }
     IgxDateTimeColumnDynamicModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxDateTimeColumnDynamicModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     IgxDateTimeColumnDynamicModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxDateTimeColumnDynamicModule, imports: [CommonModule, IgxDateTimeColumnModule], exports: [IgxDateTimeColumnModule] });

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

@@ -473,10 +473,10 @@ var IgxDefinitionBaseComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the background color for content that sticks to the top of the grid.
         */
         get: function () {
-            return brushToString(this.i.gz);
+            return brushToString(this.i.g0);
         },
         set: function (v) {
-            this.i.gz = stringToBrush(v);
+            this.i.g0 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -499,10 +499,10 @@ var IgxDefinitionBaseComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the background color for cells belonging to rows marked as pinned.
         */
         get: function () {
-            return brushToString(this.i.gy);
+            return brushToString(this.i.gz);
         },
         set: function (v) {
-            this.i.gy = stringToBrush(v);
+            this.i.gz = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -525,10 +525,10 @@ var IgxDefinitionBaseComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color for the last row in the sticky row area.
         */
         get: function () {
-            return brushToString(this.i.gx);
+            return brushToString(this.i.gy);
         },
         set: function (v) {
-            this.i.gx = stringToBrush(v);
+            this.i.gy = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -616,10 +616,10 @@ var IgxDefinitionBaseComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for displaying text.
         */
         get: function () {
-            return brushToString(this.i.g0);
+            return brushToString(this.i.g1);
         },
         set: function (v) {
-            this.i.g0 = stringToBrush(v);
+            this.i.g1 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true