igniteui-webcomponents-grids 5.0.3-beta.0 → 5.1.1-beta.0

package/esm5/lib/GridFilterDialogView_combined.js

@@ -5,18 +5,17 @@ https://www.infragistics.com/legal/license/igultimate-eula
 GOVERNS THE LICENSING, INSTALLATION AND USE OF INFRAGISTICS SOFTWARE. BY DOWNLOADING AND/OR INSTALLING AND USING INFRAGISTICS SOFTWARE:  you are indicating that you have read and understand this Agreement, and agree to be legally bound by it on behalf of the yourself and your company.
 */
 import { __extends } from "tslib";
-import { Base, runOn, markType, INotifyPropertyChanged_$type, PropertyChangedEventArgs, enumGetBox, delegateCombine, delegateRemove, EnumUtil } from "igniteui-webcomponents-core";
-import { RenderingContext } from "igniteui-webcomponents-core";
+import { Base, markType, runOn, INotifyPropertyChanged_$type, PropertyChangedEventArgs, enumGetBox, delegateRemove, EnumUtil, delegateCombine } from "igniteui-webcomponents-core";
 import { Path } from "igniteui-webcomponents-core";
-import { GridStyleRepository } from "./GridStyleRepository";
 import { KeyFrameAnimationFactory } from "igniteui-webcomponents-core";
 import { AnimationKeyFrameEffect } from "igniteui-webcomponents-core";
 import { AnimationKeyFrameEffectTiming } from "igniteui-webcomponents-core";
-import { CanvasViewRenderer } from "igniteui-webcomponents-core";
-import { truncate, intDivide, isNaN_ } from "igniteui-webcomponents-core";
+import { NativeUIComponent } from "igniteui-webcomponents-core";
 import { CellContentHorizontalAlignment_$type } from "./CellContentHorizontalAlignment";
+import { intDivide, isNaN_ } from "igniteui-webcomponents-core";
 import { ElevationHelper } from "igniteui-webcomponents-core";
 import { BaseDOMEventProxy } from "igniteui-webcomponents-core";
+import { IToolbarTarget_$type } from "igniteui-webcomponents-core";
 import { DeviceUtils } from "igniteui-webcomponents-core";
 import { BrushUtil } from "igniteui-webcomponents-core";
 import { GridFilterDialogOpeningEventArgs } from "./GridFilterDialogOpeningEventArgs";
@@ -31,8 +30,11 @@ import { GridFilterDialogViewModelGrouping } from "./GridFilterDialogViewModelGr
 import { ColumnComparisonFilterCondition } from "./ColumnComparisonFilterCondition";
 import { ColumnComparisonConditionOperatorType_$type } from "./ColumnComparisonConditionOperatorType";
 import { Geometry } from "igniteui-webcomponents-core";
+import { GridStyleRepository } from "./GridStyleRepository";
 import { NativeUI } from "igniteui-webcomponents-core";
 import { FilterDialogRenderCompletedEventArgs } from "./FilterDialogRenderCompletedEventArgs";
+import { ToolActionIconMenuInfo } from "igniteui-webcomponents-core";
+import { SvgIconRegistry } from "igniteui-webcomponents-core";
 import { stringIsNullOrEmpty } from "igniteui-webcomponents-core";
 import { GridFilterDialogViewModelGroupingLevelCollection } from "./GridFilterDialogViewModelGroupingLevelCollection";
 import { ObservableCollection$1 } from "igniteui-webcomponents-core";
@@ -45,14 +47,13 @@ var GridFilterDialogView = /** @class */ /*@__PURE__*/ (function (_super) {
         var _this = _super.call(this) || this;
         _this.b = null;
         _this.q = null;
-        _this.ad = new Path();
+        _this.aa = new Path();
         _this.j = 0;
         _this.i = 0;
-        _this.o = null;
         _this.d = null;
         _this.m = null;
         _this.n = null;
-        _this.p = null;
+        _this.o = null;
         _this.g = 0;
         _this.f = 0;
         _this.h = 1;
@@ -63,39 +64,14 @@ var GridFilterDialogView = /** @class */ /*@__PURE__*/ (function (_super) {
         _this.b = a;
         return _this;
     }
-    GridFilterDialogView.prototype.aa = function () {
-        if (this.j != this.l || this.i != this.k) {
-            this.v();
-            this.j = this.l;
-            this.j = this.k;
-            this.o.setStyleProperty("width", this.l.toString() + "px");
-            this.o.setStyleProperty("height", this.k.toString() + "px");
-        }
-        var a = Math.round(this.b.af * this.h);
-        var b = Math.round(this.b.af * this.h);
-        if (this.g != a || this.f != b) {
-            this.o.setAttribute("width", a.toString());
-            this.o.setAttribute("height", b.toString());
-            this.g = truncate(Math.round(a));
-            this.f = truncate(Math.round(b));
-        }
-        this.z();
-        this.ad._fill = this.b.bq != null ? this.b.bq : GridStyleRepository.az;
-        if (this.d.d && this.h != 1) {
-            this.d.aa();
-            this.d.ab(this.h, this.h);
-        }
-        this.d.l(0, 0, this.l, this.k);
-        this.d.t(this.ad);
-        if (this.d.d && this.h != 1) {
-            this.d.z();
-        }
-        this.b.bc();
-    };
-    GridFilterDialogView.prototype.v = function () {
-        this.b.a6(this.l, this.k, this.ad);
+    GridFilterDialogView.prototype.y = function () {
+        this.x();
+        this.b.bk();
     };
-    GridFilterDialogView.prototype.u = function () {
+    GridFilterDialogView.prototype.t = function () {
+        this.b.bc(this.l, this.k, this.aa);
+    };
+    GridFilterDialogView.prototype.s = function () {
         if (KeyFrameAnimationFactory.h == null) {
             KeyFrameAnimationFactory.h = this.m;
         }
@@ -103,56 +79,43 @@ var GridFilterDialogView = /** @class */ /*@__PURE__*/ (function (_super) {
     GridFilterDialogView.prototype.a = function (a) {
         return new AnimationKeyFrameEffect(0, this.m.rootWrapper, 0, null, a);
     };
-    GridFilterDialogView.prototype.x = function (a, b, c) {
+    GridFilterDialogView.prototype.v = function (a, b, c) {
         if (a == null) {
-            if (this.o != null) {
-                this.o.destroy();
-            }
-            this.o = null;
             this.m = null;
             this.n = null;
             this.d = null;
             return;
         }
-        this.h = (isNaN_(this.b.ae) ? this.b.ad : this.b.ae);
+        this.h = (isNaN_(this.b.aj) ? this.b.ai : this.b.aj);
         var d = a;
         this.m = d;
         this.n = c;
-        this.p = b;
+        this.o = b;
         this.m.rootWrapper.addClass("ig-filter-icon");
         this.m.rootWrapper.setStyleProperty("cursor", "pointer");
         this.q = this.m.rootWrapper;
         var e = this.h;
         var f = Math.round(d.rootWrapper.width());
         var g = Math.round(d.rootWrapper.height());
-        var h = this.b.af * e;
-        var i = this.b.af * e;
-        var j = this.m.createElement("canvas");
-        j.setStyleProperty("position", "absolute");
-        j.setStyleProperty("left", "0");
-        j.setStyleProperty("top", "0");
-        this.m.append(j);
-        this.g = truncate(Math.round(h));
-        this.f = truncate(Math.round(i));
-        j.setAttribute("width", this.g.toString());
-        j.setAttribute("height", this.g.toString());
-        j.setStyleProperty("width", f.toString() + "px");
-        j.setStyleProperty("height", g.toString() + "px");
-        this.z();
-        j.listen("mousedown", runOn(this, this.r));
-        j.listen("mouseup", runOn(this, this.s));
+        var h = this.b.ak * e;
+        var i = this.b.ak * e;
+        this.x();
         this.l = f;
         this.k = g;
-        this.o = j;
-        var k = this.m.get2DCanvasContext(this.o);
-        this.d = new RenderingContext(new CanvasViewRenderer(), k);
-        if (isNaN_(this.b.ae)) {
-            this.b.ad = window.devicePixelRatio;
-            this.h = this.b.ad;
+        if (isNaN_(this.b.aj)) {
+            this.b.ai = window.devicePixelRatio;
+            this.h = this.b.ai;
         }
-        this.aa();
+        this.y();
     };
-    GridFilterDialogView.prototype.z = function () {
+    GridFilterDialogView.prototype.r = function (a) {
+        var b = a;
+        this.m.append(b.an);
+    };
+    GridFilterDialogView.prototype.p = function () {
+        return this.m;
+    };
+    GridFilterDialogView.prototype.x = function () {
         if (this.b.k == this.b.l) {
             this.m.rootWrapper.setStyleProperty("position", "relative");
             this.m.rootWrapper.setStyleProperty("left", "0px");
@@ -162,64 +125,36 @@ var GridFilterDialogView = /** @class */ /*@__PURE__*/ (function (_super) {
         this.m.rootWrapper.setStyleProperty("position", "absolute");
         if (this.b.l == 2) {
             this.m.rootWrapper.setStyleProperty("left", "unset");
-            this.m.rootWrapper.setStyleProperty("right", this.b.aj + "px");
+            this.m.rootWrapper.setStyleProperty("right", this.b.ao + "px");
         }
         else {
-            this.m.rootWrapper.setStyleProperty("left", this.b.ai + "px");
+            this.m.rootWrapper.setStyleProperty("left", this.b.an + "px");
         }
-        var a = intDivide(this.p.height(), 2) - (this.k / 2);
+        var a = intDivide(this.o.height(), 2) - (this.k / 2);
         this.m.rootWrapper.setStyleProperty("top", a + "px");
     };
-    GridFilterDialogView.prototype.r = function (a) {
-    };
-    GridFilterDialogView.prototype.s = function (a) {
-        if (a.button == 2) {
-            return;
-        }
-        if (!this.e) {
-            this.b.be();
-        }
-        else {
-            this.b.a2();
-        }
-    };
-    GridFilterDialogView.prototype.ab = function () {
-        this.aa();
+    GridFilterDialogView.prototype.z = function () {
+        this.y();
     };
-    GridFilterDialogView.prototype.y = function (a, b) {
-        if (isNaN_(this.b.ae)) {
-            this.b.ad = window.devicePixelRatio;
-            this.h = this.b.ad;
+    GridFilterDialogView.prototype.w = function (a, b) {
+        if (isNaN_(this.b.aj)) {
+            this.b.ai = window.devicePixelRatio;
+            this.h = this.b.ai;
         }
         this.l = a;
         this.k = b;
-        this.aa();
-    };
-    GridFilterDialogView.prototype.w = function () {
-        if (isNaN_(this.b.ae)) {
-            this.b.ad = window.devicePixelRatio;
-            if (this.h != this.b.ad) {
-                this.h = this.b.ad;
-                this.aa();
+        this.y();
+    };
+    GridFilterDialogView.prototype.u = function () {
+        if (isNaN_(this.b.aj)) {
+            this.b.ai = window.devicePixelRatio;
+            if (this.h != this.b.ai) {
+                this.h = this.b.ai;
+                this.y();
                 return;
             }
         }
-        this.z();
-    };
-    GridFilterDialogView.prototype.ac = function (a) {
-        this.e = true;
-        var b = new GridFilterDialogPanel(this.b, this.o, this.m, this.n);
-        b.a = this.b;
-        b.t(a);
-        this.c = b;
-    };
-    GridFilterDialogView.prototype.t = function () {
-        this.e = false;
-        if (this.c != null) {
-            this.c.l();
-            this.c.m();
-            this.c = null;
-        }
+        this.x();
     };
     GridFilterDialogView.$t = markType(GridFilterDialogView, 'GridFilterDialogView');
     return GridFilterDialogView;
@@ -254,7 +189,7 @@ var GridFilterDialogPanel = /** @class */ /*@__PURE__*/ (function (_super) {
         e.setStyleProperty("background-color", "#fff");
         e.setStyleProperty("border-radius", "3px");
         e.setStyleProperty("overflow", "auto");
-        var g = ElevationHelper.e(12, _this.b.bp, _this.b.bo, _this.b.bn);
+        var g = ElevationHelper.e(12, _this.b.bv, _this.b.bu, _this.b.bt);
         e.setStyleProperty("boxShadow", g);
         e.listen("mousedown", runOn(_this, _this.o));
         _this.onDocumentKeyDown = _this.onDocumentKeyDown.bind(_this);
@@ -270,21 +205,15 @@ var GridFilterDialogPanel = /** @class */ /*@__PURE__*/ (function (_super) {
     };
     GridFilterDialogPanel.prototype.onDocumentKeyDown = function (a) {
         if (BaseDOMEventProxy.c0(a) == 8) {
-            this.b.a2();
         }
     };
     GridFilterDialogPanel.prototype.onDocumentMouseClick = function (e_) {
-        var filterIconCanvas_ = this.b.aq();
-        var a = (e_.srcElement === filterIconCanvas_ || e_.target === filterIconCanvas_);
-        if (!a) {
-            this.b.a2();
+        {
         }
     };
     GridFilterDialogPanel.prototype.onFilterApplyClick = function () {
-        this.b.a2();
     };
     GridFilterDialogPanel.prototype.onFilterCancelClick = function () {
-        this.b.a2();
     };
     GridFilterDialogPanel.prototype.t = function (a) {
         var _this = this;
@@ -368,7 +297,8 @@ var GridFilterDialogPanel = /** @class */ /*@__PURE__*/ (function (_super) {
         switch (a) {
             case 1: return b ? 2 : 1;
             case 2: return b ? 3 : 1;
-            case 3: return b ? 3 : 2;
+            case 3: return b ? 4 : 2;
+            case 4: return b ? 4 : 3;
             case 0: return a;
             default: return a;
         }
@@ -384,79 +314,83 @@ var GridFilterDialog = /** @class */ /*@__PURE__*/ (function (_super) {
     __extends(GridFilterDialog, _super);
     function GridFilterDialog() {
         var _this = _super.call(this) || this;
-        _this.am = null;
-        _this.w = true;
+        _this.ar = null;
+        _this.z = true;
         _this.propertyChanged = null;
-        _this.ab = NaN;
-        _this.aa = 1;
+        _this.ag = NaN;
+        _this.af = 1;
         _this.j = 2;
         _this.i = 0;
-        _this.ag = 0;
-        _this.ah = 0;
-        _this.bm = null;
-        _this.ac = DeviceUtils.g(24);
-        _this.bp = null;
-        _this.bo = null;
-        _this.bn = null;
+        _this.al = 0;
+        _this.am = 0;
+        _this.bs = null;
+        _this.ah = DeviceUtils.g(24);
+        _this.bv = null;
+        _this.bu = null;
+        _this.bt = null;
+        _this.w = null;
+        _this.y = false;
         _this.m = null;
-        _this.u = null;
-        _this.v = false;
+        _this.x = false;
+        _this.v = null;
         _this.f = null;
         _this.dialogOpening = null;
         _this.filterChanging = null;
         _this.filterChanged = null;
-        _this.r = null;
+        _this.s = null;
+        _this._commandCompleted = null;
+        _this._invalidateActions = null;
         _this.renderCompleted = null;
-        _this.r = new GridFilterDialogView(_this);
-        _this.bp = BrushUtil.h(66, 0, 0, 0);
-        _this.bo = BrushUtil.h(30, 0, 0, 0);
-        _this.bn = BrushUtil.h(20, 0, 0, 0);
+        _this.s = new GridFilterDialogView(_this);
+        _this.bv = BrushUtil.h(66, 0, 0, 0);
+        _this.bu = BrushUtil.h(30, 0, 0, 0);
+        _this.bt = BrushUtil.h(20, 0, 0, 0);
         return _this;
     }
-    Object.defineProperty(GridFilterDialog.prototype, "an", {
+    Object.defineProperty(GridFilterDialog.prototype, "as", {
         get: function () {
-            return this.am;
+            return this.ar;
         },
         set: function (a) {
-            this.am = a;
+            this.ar = a;
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(GridFilterDialog.prototype, "x", {
+    Object.defineProperty(GridFilterDialog.prototype, "ab", {
         get: function () {
-            return this.w;
+            return this.z;
         },
         set: function (a) {
-            var b = this.w;
-            this.w = a;
-            if (b != this.w) {
-                this.bb("IsAnimationEnabled", b, this.w);
+            var b = this.z;
+            this.z = a;
+            if (b != this.z) {
+                this.bj("IsAnimationEnabled", b, this.z);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(GridFilterDialog.prototype, "ae", {
+    Object.defineProperty(GridFilterDialog.prototype, "aj", {
         get: function () {
-            return this.ab;
+            return this.ag;
         },
         set: function (a) {
-            var b = this.ab;
-            this.ab = a;
-            this.bb("PixelScalingRatio", b, this.ab);
+            var b = this.ag;
+            this.ag = a;
+            this.bj("PixelScalingRatio", b, this.ag);
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(GridFilterDialog.prototype, "ad", {
+    Object.defineProperty(GridFilterDialog.prototype, "ai", {
         get: function () {
-            return this.aa;
+            return this.af;
         },
         set: function (a) {
-            var b = this.aa;
-            this.aa = a;
-            this.bb("ActualPixelScalingRatio", b, this.aa);
+            var b = this.af;
+            this.af = a;
+            this.bj("ActualPixelScalingRatio", b, this.af);
         },
         enumerable: false,
         configurable: true
@@ -469,7 +403,7 @@ var GridFilterDialog = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.j;
             this.j = a;
             if (b != this.j) {
-                this.bb("IconHorizontalAlignment", enumGetBox(CellContentHorizontalAlignment_$type, b), enumGetBox(CellContentHorizontalAlignment_$type, this.j));
+                this.bj("IconHorizontalAlignment", enumGetBox(CellContentHorizontalAlignment_$type, b), enumGetBox(CellContentHorizontalAlignment_$type, this.j));
             }
         },
         enumerable: false,
@@ -483,88 +417,88 @@ var GridFilterDialog = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.i;
             this.i = a;
             if (b != this.i) {
-                this.bb("HeaderTextALignment", enumGetBox(CellContentHorizontalAlignment_$type, b), enumGetBox(CellContentHorizontalAlignment_$type, this.i));
+                this.bj("HeaderTextALignment", enumGetBox(CellContentHorizontalAlignment_$type, b), enumGetBox(CellContentHorizontalAlignment_$type, this.i));
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(GridFilterDialog.prototype, "ai", {
+    Object.defineProperty(GridFilterDialog.prototype, "an", {
         get: function () {
-            return this.ag;
+            return this.al;
         },
         set: function (a) {
-            var b = this.ag;
-            this.ag = a;
-            if (b != this.ag) {
-                this.bb("CellPaddingLeft", b, this.ag);
+            var b = this.al;
+            this.al = a;
+            if (b != this.al) {
+                this.bj("CellPaddingLeft", b, this.al);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(GridFilterDialog.prototype, "aj", {
+    Object.defineProperty(GridFilterDialog.prototype, "ao", {
         get: function () {
-            return this.ah;
+            return this.am;
         },
         set: function (a) {
-            var b = this.ah;
-            this.ah = a;
-            if (b != this.ah) {
-                this.bb("CellPaddingRight", b, this.ah);
+            var b = this.am;
+            this.am = a;
+            if (b != this.am) {
+                this.bj("CellPaddingRight", b, this.am);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(GridFilterDialog.prototype, "bq", {
+    Object.defineProperty(GridFilterDialog.prototype, "bw", {
         get: function () {
-            return this.bm;
+            return this.bs;
         },
         set: function (a) {
-            var b = this.bm;
-            this.bm = a;
-            if (b != this.bm) {
-                this.bb("IconColor", b, this.bm);
+            var b = this.bs;
+            this.bs = a;
+            if (b != this.bs) {
+                this.bj("IconColor", b, this.bs);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(GridFilterDialog.prototype, "af", {
+    Object.defineProperty(GridFilterDialog.prototype, "ak", {
         get: function () {
-            return this.ac;
+            return this.ah;
         },
         set: function (a) {
-            var b = this.ac;
-            this.ac = a;
-            if (b != this.ac) {
-                this.bb("ViewSize", b, this.ac);
+            var b = this.ah;
+            this.ah = a;
+            if (b != this.ah) {
+                this.bj("ViewSize", b, this.ah);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(GridFilterDialog.prototype, "y", {
+    Object.defineProperty(GridFilterDialog.prototype, "ac", {
         get: function () {
-            return this.r.e;
+            return this.v.bx;
         },
         enumerable: false,
         configurable: true
     });
-    GridFilterDialog.prototype.bb = function (a, b, c) {
-        this.bf(a, b, c);
+    GridFilterDialog.prototype.bj = function (a, b, c) {
+        this.bm(a, b, c);
         if (this.propertyChanged != null) {
             this.propertyChanged(this, new PropertyChangedEventArgs(a));
         }
     };
-    GridFilterDialog.prototype.bf = function (a, b, c) {
+    GridFilterDialog.prototype.bm = function (a, b, c) {
         switch (a) {
             case "PixelScalingRatio":
-                this.ad = this.ae;
+                this.ai = this.aj;
                 break;
             case "ActualPixelScalingRatio":
-                this.r.ab();
+                this.s.z();
                 break;
             case "IconHorizontalAlignment":
             case "IconColor":
@@ -572,59 +506,88 @@ var GridFilterDialog = /** @class */ /*@__PURE__*/ (function (_super) {
             case "CellPaddingLeft":
             case "CellPaddingRight":
             case "ViewSize":
-                this.r.ab();
+                this.s.z();
                 break;
         }
     };
-    GridFilterDialog.prototype.bg = function (a, b, c) {
-        this.r.x(a, b, c);
+    GridFilterDialog.prototype.bn = function (a, b, c) {
+        this.s.v(a, b, c);
+        this.bg();
+    };
+    Object.defineProperty(GridFilterDialog.prototype, "n", {
+        get: function () {
+            return this.m;
+        },
+        set: function (a) {
+            var b = this.m;
+            this.m = a;
+            if (this.m != b) {
+                this.bf(b, this.m);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    GridFilterDialog.prototype.bf = function (a, b) {
+        this.x = true;
     };
-    GridFilterDialog.prototype.be = function () {
-        var a = null;
-        var b = 0;
+    GridFilterDialog.prototype.bg = function () {
+        var _this = this;
+        NativeUIComponent.au(this.s.p(), 18, function (a) {
+            var b = a;
+            _this.v = b;
+            _this.v.b0 = 16;
+            _this.v.b4 = BrushUtil.h(0, 0, 0, 0);
+            _this.v.bq = runOn(_this, _this.a6);
+            _this.v.by = false;
+            _this.s.r(_this.v);
+            _this.v.c = 1;
+            _this.v.b1 = _this;
+        });
+    };
+    GridFilterDialog.prototype.a6 = function (a, b) {
+        if (this.x) {
+            this.x = false;
+            this.v.b1 = this.n;
+        }
+        if (this.n != null) {
+            if (this.n.grid != null) {
+                this.n.grid.va();
+            }
+            this.n.mx();
+        }
         if (this.dialogOpening != null) {
             var c = new GridFilterDialogOpeningEventArgs();
             this.dialogOpening(this, c);
-            this.m = c.a;
-        }
-        this.bk(this.m);
-        if (this.m != null) {
-            var d = this.m;
-            d.propertyChanged = delegateCombine(d.propertyChanged, runOn(this, this.a3));
         }
     };
-    GridFilterDialog.prototype.a3 = function (a, b) {
+    GridFilterDialog.prototype.a8 = function (a, b) {
         switch (b.propertyName) {
-            case "IsHidden":
-                this.a2();
-                break;
+            case "IsHidden": break;
         }
     };
-    GridFilterDialog.prototype.bk = function (a) {
-        this.r.ac(a);
-    };
-    GridFilterDialog.prototype.a9 = function () {
+    GridFilterDialog.prototype.bh = function () {
     };
-    GridFilterDialog.prototype.ba = function (a, b) {
-        a.onModified = delegateRemove(a.onModified, runOn(this, this.bd));
+    GridFilterDialog.prototype.bi = function (a, b) {
+        a.onModified = delegateRemove(a.onModified, runOn(this, this.bl));
         if (b) {
-            this.bi();
+            this.bp();
         }
         else {
-            this.bh(a, true);
+            this.bo(a, true);
         }
         this.f = null;
     };
-    GridFilterDialog.prototype.a4 = function () {
-        this.r.u();
-        if (this.u == null) {
+    GridFilterDialog.prototype.a9 = function () {
+        this.s.s();
+        if (this.w == null) {
             var a = new AnimationKeyFrameEffectTiming();
             a.g = 200;
             a.b = 0;
-            this.u = KeyFrameAnimationFactory.f.c(this.r.a(a).m(new AnimationKeyFrameProperty(1, 0)).m(new AnimationKeyFrameProperty(1, 1)));
+            this.w = KeyFrameAnimationFactory.f.c(this.s.a(a).m(new AnimationKeyFrameProperty(1, 0)).m(new AnimationKeyFrameProperty(1, 1)));
         }
     };
-    GridFilterDialog.prototype.bj = function () {
+    GridFilterDialog.prototype.bq = function () {
         var _this = this;
         if (this.filterChanged != null) {
             this.filterChanged(this, ((function () {
@@ -634,7 +597,7 @@ var GridFilterDialog = /** @class */ /*@__PURE__*/ (function (_super) {
             })()));
         }
     };
-    GridFilterDialog.prototype.bi = function () {
+    GridFilterDialog.prototype.bp = function () {
         if (this.filterChanged != null) {
             this.filterChanged(this, ((function () {
                 var $ret = new GridFilterDialogFilterChangeEventArgs();
@@ -643,7 +606,7 @@ var GridFilterDialog = /** @class */ /*@__PURE__*/ (function (_super) {
             })()));
         }
     };
-    GridFilterDialog.prototype.bh = function (a, b) {
+    GridFilterDialog.prototype.bo = function (a, b) {
         var c = this.e(a);
         if (b) {
             if (this.filterChanged != null) {
@@ -687,7 +650,7 @@ var GridFilterDialog = /** @class */ /*@__PURE__*/ (function (_super) {
             if (e == null) {
                 e = b;
             }
-            if (this.z(a, a.f._inner[f])) {
+            if (this.ae(a, a.f._inner[f])) {
                 continue;
             }
             e.add(this.d(a.f._inner[f]));
@@ -697,7 +660,7 @@ var GridFilterDialog = /** @class */ /*@__PURE__*/ (function (_super) {
         }
         return b;
     };
-    GridFilterDialog.prototype.z = function (a, b) {
+    GridFilterDialog.prototype.ae = function (a, b) {
         var c = 0;
         for (var d = 0; d < b.e.length; d++) {
             if (b.e[d] == b.l) {
@@ -714,14 +677,14 @@ var GridFilterDialog = /** @class */ /*@__PURE__*/ (function (_super) {
         return false;
     };
     GridFilterDialog.prototype.g = function (a, b, c, d) {
-        var e = this.al(c, d);
+        var e = this.aq(c, d);
         if (a > e) {
             b.e();
             return b.d();
         }
         return null;
     };
-    GridFilterDialog.prototype.al = function (a, b) {
+    GridFilterDialog.prototype.aq = function (a, b) {
         var c = a.c(b);
         if (c == null) {
             return 0;
@@ -729,7 +692,7 @@ var GridFilterDialog = /** @class */ /*@__PURE__*/ (function (_super) {
         return a.e.indexOf(c);
     };
     GridFilterDialog.prototype.h = function (a, b, c, d) {
-        var e = this.al(c, d);
+        var e = this.aq(c, d);
         if (a < e) {
             var f = c.b(d);
             var g = new ColumnFilterConditionGroup();
@@ -748,56 +711,56 @@ var GridFilterDialog = /** @class */ /*@__PURE__*/ (function (_super) {
     GridFilterDialog.prototype.c = function (a) {
         return EnumUtil.getEnumValue(ColumnComparisonConditionOperatorType_$type, EnumUtil.parse(ColumnComparisonConditionOperatorType_$type, a, true));
     };
-    GridFilterDialog.prototype.bd = function (a) {
-        this.bh(a, false);
+    GridFilterDialog.prototype.bl = function (a) {
+        this.bo(a, false);
     };
-    GridFilterDialog.prototype.s = function (a, b) {
+    GridFilterDialog.prototype.t = function (a, b) {
         var c = new GridFilterDialogViewModel();
         if (a != null) {
-            this.a1(c, a, b);
+            this.a7(c, a, b);
         }
         else {
             var d = new GridFilterDialogViewModelRow();
             d.f = b;
             d.e = GridFilterDialog.a(b);
             d.d = GridFilterDialog.b(b);
-            d.l = GridFilterDialog.au(b[0]);
+            d.l = GridFilterDialog.az(b[0]);
             c.f.add(d);
         }
         return c;
     };
-    GridFilterDialog.prototype.a1 = function (a, b, c) {
+    GridFilterDialog.prototype.a7 = function (a, b, c) {
         if (b.isGroup()) {
             var d = b;
             for (var e = 0; e < d.count; e++) {
                 var f = d.item(e);
-                this.a1(a, f, c);
+                this.a7(a, f, c);
             }
         }
         else {
-            a.f.add(this.t(b, c));
+            a.f.add(this.u(b, c));
         }
     };
-    GridFilterDialog.prototype.t = function (a, b) {
+    GridFilterDialog.prototype.u = function (a, b) {
         var c = new GridFilterDialogViewModelRow();
-        c.l = GridFilterDialog.au(a.operator);
+        c.l = GridFilterDialog.az(a.operator);
         c.f = b;
         c.e = GridFilterDialog.a(b);
-        c.i = GridFilterDialog.ao(GridFilterDialog.ak(a.operator), a.operator, a);
-        c.j = GridFilterDialog.ap(GridFilterDialog.ak(a.operator), a.operator, a);
+        c.i = GridFilterDialog.at(GridFilterDialog.ap(a.operator), a.operator, a);
+        c.j = GridFilterDialog.au(GridFilterDialog.ap(a.operator), a.operator, a);
         c.d = GridFilterDialog.b(b);
         return c;
     };
-    GridFilterDialog.ak = function (a) {
+    GridFilterDialog.ap = function (a) {
         return ColumnComparisonFilterCondition.getOperandNumber(a);
     };
-    GridFilterDialog.ao = function (a, b, c) {
+    GridFilterDialog.at = function (a, b, c) {
         if (a == 0) {
             return "";
         }
         return c.value != null ? c.value.toString() : "";
     };
-    GridFilterDialog.ap = function (a, b, c) {
+    GridFilterDialog.au = function (a, b, c) {
         return "";
     };
     GridFilterDialog.b = function (a) {
@@ -810,81 +773,138 @@ var GridFilterDialog = /** @class */ /*@__PURE__*/ (function (_super) {
         }
         return b;
     };
-    GridFilterDialog.au = function (a) {
+    GridFilterDialog.az = function (a) {
         return EnumUtil.getName(ColumnComparisonConditionOperatorType_$type, a);
     };
-    GridFilterDialog.prototype.a8 = function (a, b) {
-        this.r.y(a, b);
+    GridFilterDialog.prototype.be = function (a, b) {
+        this.s.w(a, b);
     };
-    GridFilterDialog.prototype.a7 = function () {
-        this.r.w();
+    GridFilterDialog.prototype.bd = function () {
+        this.s.u();
     };
-    GridFilterDialog.prototype.a6 = function (a, b, c) {
+    GridFilterDialog.prototype.bc = function (a, b, c) {
         var d = Geometry.a("M12 14c -1.1 0 -2 -0.9 -2 -2 s0.9 -2 2 -2 s2 0.9 2 2 S13.1 14 12 14 z M12 8c -1.1 0 -2 -0.9 -2 -2 s0.9 -2 2 -2 s2 0.9 2 2 S13.1 8 12 8z M12 16 c1.1 0 2 0.9 2 2s -0.9 2 -2 2 s-2 -0.9 -2 -2 S10.9 16 12 16z");
         c.an = d;
-        c._fill = this.bq == null ? GridStyleRepository.az : this.bq;
+        c._fill = this.bw == null ? GridStyleRepository.a5 : this.bw;
     };
-    GridFilterDialog.prototype.bl = function () {
+    GridFilterDialog.prototype.br = function () {
         var _this = this;
-        this.v = false;
-        if (NativeUI.g(this.r.q) == 1) {
+        this.y = false;
+        if (NativeUI.g(this.s.q) == 1) {
             return;
         }
-        if (this.x) {
-            this.a4();
-            if (this.u.playbackRate < 0) {
-                this.u.reverse();
+        if (this.ab) {
+            this.a9();
+            if (this.w.playbackRate < 0) {
+                this.w.reverse();
             }
             else {
-                this.u.play();
+                this.w.play();
             }
-            this.u.finished.f(function (a) { return _this.u.commitStyles(); });
+            this.w.finished.f(function (a) { return _this.w.commitStyles(); });
         }
         else {
-            NativeUI.y(this.r.q, 1);
+            NativeUI.y(this.s.q, 1);
         }
     };
-    GridFilterDialog.prototype.a5 = function () {
+    GridFilterDialog.prototype.bb = function () {
         var _this = this;
-        this.v = true;
-        if (!this.y) {
-            if (this.x) {
-                this.a4();
-                if (this.u.playbackRate < 0) {
-                    this.u.play();
+        this.y = true;
+        if (!this.ac) {
+            if (this.ab) {
+                this.a9();
+                if (this.w.playbackRate < 0) {
+                    this.w.play();
                 }
                 else {
-                    this.u.reverse();
+                    this.w.reverse();
                 }
-                this.u.finished.f(function (a) { return _this.u.commitStyles(); });
+                this.w.finished.f(function (a) { return _this.w.commitStyles(); });
             }
             else {
-                NativeUI.y(this.r.q, 0);
+                NativeUI.y(this.s.q, 0);
             }
-            this.v = false;
+            this.y = false;
         }
     };
-    GridFilterDialog.prototype.a2 = function () {
-        this.r.t();
-        this.a9();
-        if (this.v) {
-            this.a5();
+    Object.defineProperty(GridFilterDialog.prototype, "commandCompleted", {
+        get: function () {
+            return this._commandCompleted;
+        },
+        set: function (a) {
+            this._commandCompleted = a;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(GridFilterDialog.prototype, "invalidateActions", {
+        get: function () {
+            return this._invalidateActions;
+        },
+        set: function (a) {
+            this._invalidateActions = a;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    GridFilterDialog.prototype.bk = function () {
+        if (this.renderCompleted != null) {
+            this.renderCompleted(this, new FilterDialogRenderCompletedEventArgs());
         }
-        if (this.m != null) {
-            var a = this.m;
-            a.propertyChanged = delegateRemove(a.propertyChanged, runOn(this, this.a3));
-            this.m = null;
+    };
+    GridFilterDialog.prototype.ba = function () {
+        if (this.v != null) {
+            if (this.n != null && this.v.b1 != this.n) {
+                this.v.b1 = this.n;
+            }
         }
     };
-    GridFilterDialog.prototype.aq = function () {
-        return this.r.o.getNativeElement();
+    GridFilterDialog.prototype.getDesiredToolbarActions = function () {
+        if (!GridFilterDialog.aa) {
+            GridFilterDialog.aa = true;
+            SvgIconRegistry.instance.addSvgPathString("XGrid", "DotDotDot", GridFilterDialog.ay);
+        }
+        var a = new ToolActionIconMenuInfo();
+        a.name = "DataGridColumnOptionsPlaceholder";
+        a.iconCollectionName = "XGrid";
+        a.iconName = "DotDotDot";
+        a.iconViewBoxWidth = 24;
+        a.iconViewBoxHeight = 24;
+        a.paddingBottom = 0;
+        a.paddingTop = 0;
+        a.paddingRight = 0;
+        a.paddingLeft = 0;
+        a.showArrowIcon = false;
+        a.density = 4;
+        a.name = "DataGridColumnOptions";
+        a.tooltipDelay = 500;
+        var b = [a];
+        return b;
     };
-    GridFilterDialog.prototype.bc = function () {
-        if (this.renderCompleted != null) {
-            this.renderCompleted(this, new FilterDialogRenderCompletedEventArgs());
+    GridFilterDialog.prototype.addCommandAvailabilityListener = function (a) {
+    };
+    GridFilterDialog.prototype.removeCommandAvailabilityListener = function (a) {
+    };
+    GridFilterDialog.prototype.addCommandStateChangedListener = function (a) {
+    };
+    GridFilterDialog.prototype.removeCommandStateChangedListener = function (a) {
+    };
+    GridFilterDialog.prototype.onToolCommandExecuting = function (a) {
+        return 0;
+    };
+    GridFilterDialog.prototype.provideContextAccessor = function (a) {
+    };
+    GridFilterDialog.prototype.ad = function (e_) {
+        var a = e_.originalEvent.srcElement;
+        var b = e_.originalEvent.target;
+        if (this.s.m.rootWrapper.getNativeElement().contains(a) || this.s.m.rootWrapper.getNativeElement().contains(b)) {
+            return true;
         }
+        return false;
     };
-    GridFilterDialog.$t = markType(GridFilterDialog, 'GridFilterDialog', Base.$, [INotifyPropertyChanged_$type]);
+    GridFilterDialog.$t = markType(GridFilterDialog, 'GridFilterDialog', Base.$, [INotifyPropertyChanged_$type, IToolbarTarget_$type]);
+    GridFilterDialog.aa = false;
+    GridFilterDialog.ay = "M12 14c -1.1 0 -2 -0.9 -2 -2 s0.9 -2 2 -2 s2 0.9 2 2 S13.1 14 12 14 z M12 8c -1.1 0 -2 -0.9 -2 -2 s0.9 -2 2 -2 s2 0.9 2 2 S13.1 8 12 8z M12 16 c1.1 0 2 0.9 2 2s -0.9 2 -2 2 s-2 -0.9 -2 -2 S10.9 16 12 16z";
     return GridFilterDialog;
 }(Base));
 export { GridFilterDialog };
@@ -916,7 +936,7 @@ var GridFilterDialogViewModel = /** @class */ /*@__PURE__*/ (function (_super) {
         a.f = b;
         a.e = GridFilterDialog.a(b);
         a.d = GridFilterDialog.b(b);
-        a.l = GridFilterDialog.au(b[0]);
+        a.l = GridFilterDialog.az(b[0]);
         this.f.add(a);
     };
     GridFilterDialogViewModel.prototype.u = function (a) {