igniteui-angular-data-grids 21.1.0-beta.2 → 21.1.0

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

@@ -108,10 +108,10 @@ var IgxDataGridFilterDialogComponent = /** @class */ /*@__PURE__*/ (function ()
     });
     Object.defineProperty(IgxDataGridFilterDialogComponent.prototype, "iconColor", {
         get: function () {
-            return brushToString(this.i.c4);
+            return brushToString(this.i.dd);
         },
         set: function (v) {
-            this.i.c4 = stringToBrush(v);
+            this.i.dd = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -131,10 +131,49 @@ var IgxDataGridFilterDialogComponent = /** @class */ /*@__PURE__*/ (function ()
          * Gets or sets the column options dropdown background color.
         */
         get: function () {
-            return brushToString(this.i.cv);
+            return brushToString(this.i.c1);
+        },
+        set: function (v) {
+            this.i.c1 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxDataGridFilterDialogComponent.prototype, "columnOptionsScrollbarBackground", {
+        /**
+         * Gets or sets the scrollbar background color for checkbox lists in the column options dialog.
+        */
+        get: function () {
+            return brushToString(this.i.c7);
+        },
+        set: function (v) {
+            this.i.c7 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxDataGridFilterDialogComponent.prototype, "columnOptionsScrollbarHoverBackground", {
+        /**
+         * Gets or sets the scrollbar thumb hover background color for checkbox lists in the column options dialog.
+        */
+        get: function () {
+            return brushToString(this.i.c8);
+        },
+        set: function (v) {
+            this.i.c8 = stringToBrush(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxDataGridFilterDialogComponent.prototype, "columnOptionsScrollbarActiveBackground", {
+        /**
+         * Gets or sets the scrollbar thumb active (dragging) background color for checkbox lists in the column options dialog.
+        */
+        get: function () {
+            return brushToString(this.i.c6);
         },
         set: function (v) {
-            this.i.cv = stringToBrush(v);
+            this.i.c6 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -144,10 +183,10 @@ var IgxDataGridFilterDialogComponent = /** @class */ /*@__PURE__*/ (function ()
          * Gets or sets the text color for text inside the column options menu.
         */
         get: function () {
-            return brushToString(this.i.c1);
+            return brushToString(this.i.da);
         },
         set: function (v) {
-            this.i.c1 = stringToBrush(v);
+            this.i.da = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -175,10 +214,10 @@ var IgxDataGridFilterDialogComponent = /** @class */ /*@__PURE__*/ (function ()
          * Gets or sets the hover background color inside the column options menu.
         */
         get: function () {
-            return brushToString(this.i.cz);
+            return brushToString(this.i.c5);
         },
         set: function (v) {
-            this.i.cz = stringToBrush(v);
+            this.i.c5 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -188,10 +227,10 @@ var IgxDataGridFilterDialogComponent = /** @class */ /*@__PURE__*/ (function ()
          * Gets or sets the tooltip background color inside the column options menu.
         */
         get: function () {
-            return brushToString(this.i.c2);
+            return brushToString(this.i.db);
         },
         set: function (v) {
-            this.i.c2 = stringToBrush(v);
+            this.i.db = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -201,10 +240,10 @@ var IgxDataGridFilterDialogComponent = /** @class */ /*@__PURE__*/ (function ()
          * Gets or sets the tooltip text color inside the column options menu.
         */
         get: function () {
-            return brushToString(this.i.c3);
+            return brushToString(this.i.dc);
         },
         set: function (v) {
-            this.i.c3 = stringToBrush(v);
+            this.i.dc = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -214,10 +253,10 @@ var IgxDataGridFilterDialogComponent = /** @class */ /*@__PURE__*/ (function ()
          * Gets or sets the highlight color inside the column options menu.
         */
         get: function () {
-            return brushToString(this.i.cy);
+            return brushToString(this.i.c4);
         },
         set: function (v) {
-            this.i.cy = stringToBrush(v);
+            this.i.c4 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -227,10 +266,10 @@ var IgxDataGridFilterDialogComponent = /** @class */ /*@__PURE__*/ (function ()
          * Gets or sets the color of separators inside the column options menu.
         */
         get: function () {
-            return brushToString(this.i.c0);
+            return brushToString(this.i.c9);
         },
         set: function (v) {
-            this.i.c0 = stringToBrush(v);
+            this.i.c9 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -240,10 +279,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.cw);
+            return brushToString(this.i.c2);
         },
         set: function (v) {
-            this.i.cw = stringToBrush(v);
+            this.i.c2 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -253,10 +292,10 @@ 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.cx);
+            return brushToString(this.i.c3);
         },
         set: function (v) {
-            this.i.cx = stringToBrush(v);
+            this.i.c3 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -281,10 +320,10 @@ var IgxDataGridFilterDialogComponent = /** @class */ /*@__PURE__*/ (function ()
     });
     Object.defineProperty(IgxDataGridFilterDialogComponent.prototype, "columnOptionsAccentColor", {
         get: function () {
-            return brushToString(this.i.cu);
+            return brushToString(this.i.c0);
         },
         set: function (v) {
-            this.i.cu = stringToBrush(v);
+            this.i.c0 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -395,16 +434,16 @@ var IgxDataGridFilterDialogComponent = /** @class */ /*@__PURE__*/ (function ()
         this._inStyling = false;
     };
     IgxDataGridFilterDialogComponent.prototype.notifySizeChanged = function (width, height) {
-        this.i.b2(width, height);
+        this.i.b5(width, height);
     };
     IgxDataGridFilterDialogComponent.prototype.notifyCellSizeChanged = function () {
-        this.i.b1();
+        this.i.b4();
     };
     IgxDataGridFilterDialogComponent.prototype.showIcon = function () {
-        this.i.cf();
+        this.i.ci();
     };
     IgxDataGridFilterDialogComponent.prototype.hideIcon = function () {
-        this.i.bz();
+        this.i.b2();
     };
     IgxDataGridFilterDialogComponent.prototype.getDesiredToolbarActions = function () {
         var iv = this.i.getDesiredToolbarActions();
@@ -531,7 +570,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", columnOptionsTextStyle: "columnOptionsTextStyle", columnOptionsHoverBackgroundColor: "columnOptionsHoverBackgroundColor", columnOptionsToolTipBackgroundColor: "columnOptionsToolTipBackgroundColor", columnOptionsToolTipTextColor: "columnOptionsToolTipTextColor", 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 });
+    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", columnOptionsScrollbarBackground: "columnOptionsScrollbarBackground", columnOptionsScrollbarHoverBackground: "columnOptionsScrollbarHoverBackground", columnOptionsScrollbarActiveBackground: "columnOptionsScrollbarActiveBackground", columnOptionsTextColor: "columnOptionsTextColor", columnOptionsTextStyle: "columnOptionsTextStyle", columnOptionsHoverBackgroundColor: "columnOptionsHoverBackgroundColor", columnOptionsToolTipBackgroundColor: "columnOptionsToolTipBackgroundColor", columnOptionsToolTipTextColor: "columnOptionsToolTipTextColor", 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 };
@@ -555,6 +594,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }], columnOptionsBackground: [{
                 type: Input
+            }], columnOptionsScrollbarBackground: [{
+                type: Input
+            }], columnOptionsScrollbarHoverBackground: [{
+                type: Input
+            }], columnOptionsScrollbarActiveBackground: [{
+                type: Input
             }], columnOptionsTextColor: [{
                 type: Input
             }], columnOptionsTextStyle: [{

package/esm5/lib/igx-data-grid-toolbar-component.js

@@ -268,8 +268,16 @@ var IgxDataGridToolbarComponent = /** @class */ /*@__PURE__*/ (function () {
         },
         set: function (v) {
             this.ensureBorderWidth();
-            this.i.bi.bottom = +v;
-            this.i.bi = this.i.bi;
+            var __nv = +v;
+            if (this.i.bi.bottom === __nv) {
+                return;
+            }
+            var __copy = new Thickness(2);
+            __copy.bottom = __nv;
+            __copy.left = this.i.bi.left;
+            __copy.right = this.i.bi.right;
+            __copy.top = this.i.bi.top;
+            this.i.bi = __copy;
         },
         enumerable: false,
         configurable: true
@@ -280,8 +288,16 @@ var IgxDataGridToolbarComponent = /** @class */ /*@__PURE__*/ (function () {
         },
         set: function (v) {
             this.ensureBorderWidth();
-            this.i.bi.left = +v;
-            this.i.bi = this.i.bi;
+            var __nv = +v;
+            if (this.i.bi.left === __nv) {
+                return;
+            }
+            var __copy = new Thickness(2);
+            __copy.left = __nv;
+            __copy.bottom = this.i.bi.bottom;
+            __copy.right = this.i.bi.right;
+            __copy.top = this.i.bi.top;
+            this.i.bi = __copy;
         },
         enumerable: false,
         configurable: true
@@ -292,8 +308,16 @@ var IgxDataGridToolbarComponent = /** @class */ /*@__PURE__*/ (function () {
         },
         set: function (v) {
             this.ensureBorderWidth();
-            this.i.bi.right = +v;
-            this.i.bi = this.i.bi;
+            var __nv = +v;
+            if (this.i.bi.right === __nv) {
+                return;
+            }
+            var __copy = new Thickness(2);
+            __copy.right = __nv;
+            __copy.bottom = this.i.bi.bottom;
+            __copy.left = this.i.bi.left;
+            __copy.top = this.i.bi.top;
+            this.i.bi = __copy;
         },
         enumerable: false,
         configurable: true
@@ -304,8 +328,16 @@ var IgxDataGridToolbarComponent = /** @class */ /*@__PURE__*/ (function () {
         },
         set: function (v) {
             this.ensureBorderWidth();
-            this.i.bi.top = +v;
-            this.i.bi = this.i.bi;
+            var __nv = +v;
+            if (this.i.bi.top === __nv) {
+                return;
+            }
+            var __copy = new Thickness(2);
+            __copy.top = __nv;
+            __copy.bottom = this.i.bi.bottom;
+            __copy.left = this.i.bi.left;
+            __copy.right = this.i.bi.right;
+            this.i.bi = __copy;
         },
         enumerable: false,
         configurable: true

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.oj;
+            return this.i.om;
         },
         set: function (v) {
-            this.i.oj = v;
+            this.i.om = 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.o0;
+            return this.i.o3;
         },
         set: function (v) {
-            this.i.o0 = v;
+            this.i.o3 = v;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxDateTimeCellInfo.prototype, "formatSpecifiers", {
         get: function () {
-            return this.i.oa;
+            return this.i.od;
         },
         set: function (v) {
             if (v && !Array.isArray(v) && typeof (v) == "string") {
                 var re = /\s*(?:,|\s|$)\s*/gm;
                 v = v.split(re);
             }
-            this.i.oa = v;
+            this.i.od = 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.ot;
+            return this.i.ow;
         },
         set: function (v) {
-            this.i.ot = v;
+            this.i.ow = 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.of;
+            return this.i.oi;
         },
         set: function (v) {
-            this.i.of = ensureEnum(DateTimeFormats_$type, v);
+            this.i.oi = 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.oh;
+            return this.i.ok;
         },
         set: function (v) {
-            this.i.oh = ensureBool(v);
+            this.i.ok = 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.sj;
+            return this.i.s5;
         },
         set: function (v) {
-            this.i.sj = ensureEnum(DateTimeFormats_$type, v);
+            this.i.s5 = 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.s1;
+            return this.i.tn;
         },
         set: function (v) {
-            this.i.s1 = v;
+            this.i.tn = 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.su;
+            return this.i.tg;
         },
         set: function (v) {
-            this.i.su = v;
+            this.i.tg = v;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxDateTimeColumnComponent.prototype, "formatSpecifiers", {
         get: function () {
-            return this.i.sf;
+            return this.i.s1;
         },
         set: function (v) {
             if (v && !Array.isArray(v) && typeof (v) == "string") {
                 var re = /\s*(?:,|\s|$)\s*/gm;
                 v = v.split(re);
             }
-            this.i.sf = v;
+            this.i.s1 = 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.sq;
+            return this.i.tc;
         },
         set: function (v) {
-            this.i.sq = v;
+            this.i.tc = 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.sm;
+            return this.i.s8;
         },
         set: function (v) {
-            this.i.sm = ensureBool(v);
+            this.i.s8 = 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.sk;
+            return this.i.s6;
         },
         set: function (v) {
-            this.i.sk = ensureEnum(EditorType_$type, v);
+            this.i.s6 = 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.sp;
+            return this.i.tb;
         },
         set: function (v) {
-            this.i.sp = v;
+            this.i.tb = 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.sw;
+            return this.i.ti;
         },
         set: function (v) {
-            this.i.sw = v;
+            this.i.ti = 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.sx;
+            return this.i.tj;
         },
         set: function (v) {
-            this.i.sx = v;
+            this.i.tj = v;
         },
         enumerable: false,
         configurable: true