igniteui-angular-core 17.0.0 → 17.2.0-beta.0

package/esm5/lib/PopupView_combined.js

@@ -24,11 +24,12 @@ import { stringEmpty } from "./string";
 import { OnClosedEventArgs } from "./OnClosedEventArgs";
 import { MouseEventArgs } from "./MouseEventArgs";
 import { FocusEventArgs } from "./FocusEventArgs";
+import { PopupAnimation } from "./PopupAnimation";
 import { List$1 } from "./List$1";
+import { IKeyFrameAnimation_$type } from "./IKeyFrameAnimation";
 import { AnimationKeyFrameProperty } from "./AnimationKeyFrameProperty";
 import { TranslateTransform } from "./TranslateTransform";
 import { OnPopupEventArgs } from "./OnPopupEventArgs";
-import { PopupAnimation } from "./PopupAnimation";
 import { DeviceUtils } from "./DeviceUtils";
 import { PopupVisualModelExport } from "./PopupVisualModelExport";
 import { AppearanceHelper } from "./AppearanceHelper";
@@ -40,69 +41,69 @@ var PopupView = /** @class */ /*@__PURE__*/ (function (_super) {
     __extends(PopupView, _super);
     function PopupView() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.ad = null;
+        _this.ag = null;
         _this.f = null;
+        _this.ao = null;
+        _this.an = null;
+        _this.am = null;
+        _this.aj = null;
         _this.al = null;
         _this.ak = null;
-        _this.aj = null;
-        _this.ag = null;
-        _this.ai = null;
-        _this.ah = null;
-        _this.an = null;
+        _this.aq = null;
+        _this.v = 0;
+        _this.w = 0;
+        _this.u = 0;
+        _this.m = false;
+        _this.x = 0;
         _this.s = 0;
         _this.t = 0;
-        _this.r = 0;
-        _this.l = false;
-        _this.u = 0;
-        _this.p = 0;
         _this.q = 0;
-        _this.n = 0;
-        _this.o = 0;
-        _this.af = null;
-        _this.am = null;
-        _this.bk = new Size(1, 0, 0);
+        _this.r = 0;
+        _this.ai = null;
+        _this.ap = null;
+        _this.br = new Size(1, 0, 0);
         _this.k = true;
-        _this.m = false;
+        _this.p = false;
         return _this;
     }
-    Object.defineProperty(PopupView.prototype, "ac", {
+    Object.defineProperty(PopupView.prototype, "af", {
         get: function () {
-            return this.g.a1;
+            return this.g.a3;
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(PopupView.prototype, "z", {
+    Object.defineProperty(PopupView.prototype, "ac", {
         get: function () {
-            return this.ac / 2;
+            return this.af / 2;
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(PopupView.prototype, "y", {
+    Object.defineProperty(PopupView.prototype, "ab", {
         get: function () {
-            return this.ac * 1.414;
+            return this.af * 1.414;
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(PopupView.prototype, "x", {
+    Object.defineProperty(PopupView.prototype, "aa", {
         get: function () {
-            return this.y / 2;
+            return this.ab / 2;
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(PopupView.prototype, "aa", {
+    Object.defineProperty(PopupView.prototype, "ad", {
         get: function () {
-            return (this.bl.width / 2 - this.z);
+            return (this.bs.width / 2 - this.ac);
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(PopupView.prototype, "ab", {
+    Object.defineProperty(PopupView.prototype, "ae", {
         get: function () {
-            return (this.bl.height / 2 - this.z);
+            return (this.bs.height / 2 - this.ac);
         },
         enumerable: false,
         configurable: true
@@ -114,224 +115,234 @@ var PopupView = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(PopupView.prototype, "ae", {
+    Object.defineProperty(PopupView.prototype, "ah", {
         get: function () {
-            return this.ad;
+            return this.ag;
         },
         enumerable: false,
         configurable: true
     });
-    PopupView.prototype.a3 = function () {
-        this.al.setStyleProperty("height", "0%");
-        this.al.setStyleProperty("width", "0%");
-        this.ag = this.ad.createElement("div");
-        this.ag.setStyleProperty("position", "absolute");
-        this.ag.setStyleProperty("z-index", "10000");
-        this.ai = this.ad.createElement("div");
-        this.ai.setStyleProperty("height", 20 * 1.414 / 2 + "px");
-        this.ah = this.ad.createElement("div");
-        this.ah.setStyleProperty("position", "relative");
-        this.ah.setStyleProperty("width", this.ac + "px");
-        this.ah.setStyleProperty("height", this.ac + "px");
-        this.ah.setStyleProperty("z-index", "1");
-        this.ah.setStyleProperty("clip-path", stringFormat("path(\"M0,0l{0},{0}l0,-{0}l-{0},0Z\")", this.ac));
-        this.ai.append(this.ah);
-        this.ak = this.ad.createElement("div");
+    PopupView.prototype.a6 = function () {
+        this.ao.setStyleProperty("height", "0%");
+        this.ao.setStyleProperty("width", "0%");
+        this.aj = this.ag.createElement("div");
+        this.be(this.g.aq);
+        this.aj.setStyleProperty("z-index", "10000");
+        this.aj.setStyleProperty("inset", "unset");
+        this.aj.setStyleProperty("padding", "0px");
+        this.aj.setStyleProperty("border-width", "0px");
+        this.al = this.ag.createElement("div");
+        this.al.setStyleProperty("height", 20 * 1.414 / 2 + "px");
+        this.ak = this.ag.createElement("div");
         this.ak.setStyleProperty("position", "relative");
-        this.ak.setStyleProperty("overflow", "hidden");
-        this.ak.setAttribute("key", "popupContentAreaOuter");
-        this.bb(this.g.aq);
-        this.ag.listen("mouseenter", runOn(this, this.a4));
-        this.ag.listen("mouseleave", runOn(this, this.a5));
-        this.ag.listen("focusin", runOn(this, this.a1));
-        this.ag.listen("focusout", runOn(this, this.a2));
-        this.aj = this.ad.createElement("div");
-        this.aj.setAttribute("key", "popupContentAreaInner");
-        this.ak.append(this.aj);
-        this.ag.append(this.ak);
-    };
-    PopupView.prototype.bh = function () {
+        this.ak.setStyleProperty("width", this.af + "px");
+        this.ak.setStyleProperty("height", this.af + "px");
+        this.ak.setStyleProperty("z-index", "1");
+        this.ak.setStyleProperty("clip-path", stringFormat("path(\"M0,0l{0},{0}l0,-{0}l-{0},0Z\")", this.af));
+        this.al.append(this.ak);
+        this.an = this.ag.createElement("div");
+        this.an.setStyleProperty("position", "relative");
+        this.an.setStyleProperty("overflow", "hidden");
+        this.an.setAttribute("key", "popupContentAreaOuter");
+        this.bf(this.g.ar);
+        this.aj.listen("mouseenter", runOn(this, this.a7));
+        this.aj.listen("mouseleave", runOn(this, this.a8));
+        this.aj.listen("focusin", runOn(this, this.a4));
+        this.aj.listen("focusout", runOn(this, this.a5));
+        this.am = this.ag.createElement("div");
+        this.am.setAttribute("key", "popupContentAreaInner");
+        this.an.append(this.am);
+        this.aj.append(this.an);
+    };
+    PopupView.prototype.bn = function () {
         var a = this.g;
-        var b = ElevationHelper.e(a.a4, a.cm, a.cl, a.ck);
-        this.ak.setStyleProperty("box-shadow", b);
+        var b = ElevationHelper.e(a.a6, a.cv, a.cu, a.ct);
+        if (this.l()) {
+            this.aj.setStyleProperty("box-shadow", b);
+        }
+        else {
+            this.an.setStyleProperty("box-shadow", b);
+        }
     };
-    PopupView.prototype.bf = function () {
-        if (this.g.cn != null) {
-            this.ak.setStyleProperty("background-color", this.g.cn._fill);
-            this.ah.setStyleProperty("background-color", this.g.cn._fill);
+    PopupView.prototype.bl = function () {
+        if (this.g.cw != null) {
+            this.an.setStyleProperty("background-color", this.g.cw._fill);
+            this.ak.setStyleProperty("background-color", this.g.cw._fill);
         }
-        if (this.g.cr != null) {
-            this.ah.setStyleProperty("background-color", this.g.cr._fill);
+        if (this.g.c0 != null) {
+            this.ak.setStyleProperty("background-color", this.g.c0._fill);
         }
     };
-    PopupView.prototype.bg = function () {
-        if (!isNaN_(this.g.ay)) {
-            NativeUI.o(this.ak, new CornerRadius(0, this.g.ay));
+    PopupView.prototype.bm = function () {
+        if (!isNaN_(this.g.a0)) {
+            NativeUI.o(this.an, new CornerRadius(0, this.g.a0));
         }
     };
-    PopupView.prototype.bi = function () {
-        if (null == this.al) {
+    PopupView.prototype.bo = function () {
+        if (null == this.ao) {
             return;
         }
-        this.bh();
-        this.bf();
-        this.bg();
+        this.be(this.g.aq);
+        this.bn();
+        this.bl();
+        this.bm();
+    };
+    PopupView.prototype.a7 = function (a) {
+        this.g.cb();
+    };
+    PopupView.prototype.a8 = function (a) {
+        this.g.cc();
     };
     PopupView.prototype.a4 = function (a) {
-        this.g.b5();
+        this.g.b9();
     };
     PopupView.prototype.a5 = function (a) {
-        this.g.b6();
-    };
-    PopupView.prototype.a1 = function (a) {
-        this.g.b3();
-    };
-    PopupView.prototype.a2 = function (a) {
-        this.g.b4(a.originalEvent.relatedTarget);
-    };
-    PopupView.prototype.aq = function () {
-        if (null != this.ag) {
-            this.bi();
-            this.ak.setStyleProperty("height", "0px");
-            var a = this.ag.getNativeElement();
-            if (false == this.l) {
-                this.ai.remove();
-                if (this.g.as) {
-                    var b = this.g.s();
+        this.g.ca(a.originalEvent.relatedTarget);
+    };
+    PopupView.prototype.o = function () {
+        return (HTMLElement.prototype.hasOwnProperty("popover"));
+    };
+    PopupView.prototype.l = function () {
+        return this.o() && this.g.ax;
+    };
+    PopupView.prototype.at = function () {
+        if (null != this.aj) {
+            this.bo();
+            this.an.setStyleProperty("height", "0px");
+            var a = this.aj.getNativeElement();
+            if (false == this.m) {
+                this.al.remove();
+                if (this.g.at) {
+                    var b = this.g.t();
                     if (b == 1) {
-                        this.ag.setStyleProperty("display", "block");
-                        var c = this.ag.getNativeElement();
-                        var d = this.ai.getNativeElement();
-                        var e = this.ak.getNativeElement();
+                        this.aj.setStyleProperty("display", "block");
+                        var c = this.aj.getNativeElement();
+                        var d = this.al.getNativeElement();
+                        var e = this.an.getNativeElement();
                         c.insertBefore(d, e);
                     }
                     else if (b == 2) {
-                        this.ag.setStyleProperty("display", "block");
-                        this.ag.append(this.ai);
+                        this.aj.setStyleProperty("display", "block");
+                        this.aj.append(this.al);
                     }
                     else if (b == 3) {
-                        this.ag.setStyleProperty("display", "flex");
-                        var f = this.ag.getNativeElement();
-                        var g = this.ai.getNativeElement();
-                        var h = this.ak.getNativeElement();
+                        this.aj.setStyleProperty("display", "flex");
+                        var f = this.aj.getNativeElement();
+                        var g = this.al.getNativeElement();
+                        var h = this.an.getNativeElement();
                         f.insertBefore(g, h);
-                        this.ai.setStyleProperty("height", "unset");
-                        this.ai.setStyleProperty("width", 20 * 1.414 / 2 + "px");
+                        this.al.setStyleProperty("height", "unset");
+                        this.al.setStyleProperty("width", 20 * 1.414 / 2 + "px");
                     }
                     else if (b == 4) {
-                        this.ag.setStyleProperty("display", "flex");
-                        this.ag.append(this.ai);
-                        this.ai.setStyleProperty("height", "unset");
-                        this.ai.setStyleProperty("width", 20 * 1.414 / 2 + "px");
+                        this.aj.setStyleProperty("display", "flex");
+                        this.aj.append(this.al);
+                        this.al.setStyleProperty("height", "unset");
+                        this.al.setStyleProperty("width", 20 * 1.414 / 2 + "px");
                     }
                 }
-                document.body.appendChild(a);
-                this.l = true;
+                if (this.g.bd != null) {
+                    this.g.bd.appendChild(a);
+                }
+                else {
+                    document.body.appendChild(a);
+                }
+                this.m = true;
                 if (this.k) {
-                    this.ay();
+                    this.a1();
+                }
+                this.bh(this.g.ax);
+                if (this.l()) {
+                    a.showPopover();
                 }
             }
         }
     };
-    PopupView.prototype.ar = function (a, b) {
-        this.ag.setStyleProperty("top", PopupView.ao(a.f));
-        this.ak.setStyleProperty("height", PopupView.ap(a.h));
-        this.ag.setStyleProperty("top", PopupView.ap(b.b));
-        this.aj.setStyleProperty("opacity", "1");
-        this.aj.setStyleProperty("transform", stringEmpty());
-        this.u = 0;
-        if (this.m) {
-            this.be();
+    PopupView.prototype.au = function (a, b) {
+        this.aj.setStyleProperty("top", PopupView.ar(a.f));
+        this.an.setStyleProperty("height", PopupView.as(a.h));
+        this.am.setStyleProperty("top", PopupView.as(b.b));
+        this.am.setStyleProperty("opacity", "1");
+        this.am.setStyleProperty("transform", stringEmpty());
+        this.x = 0;
+        if (this.p) {
+            this.bk();
         }
-        if (this.g.av) {
-            this.am.observe(this.af.getNativeElement());
+        if (this.g.aw) {
+            this.ap.observe(this.ai.getNativeElement());
         }
         else {
-            this.am.disconnect();
+            this.ap.disconnect();
         }
         if (this.g.an) {
-            this.bc(this.g.ar);
+            this.bg(this.g.as);
         }
         return {
             p0: a,
             p1: b
         };
     };
-    PopupView.prototype.as = function (a) {
-        this.u = a;
+    PopupView.prototype.av = function (a) {
+        this.x = a;
         if (this.g.an) {
-            this.bc(false);
-        }
-        if (this.g.as) {
-            var b = 0;
-            var c = 0;
-            switch (this.g.s()) {
-                case 3:
-                    b = -135;
-                    c = this.z;
-                    this.s = c;
-                    this.t = a / 2 - this.z;
-                    break;
-                case 4:
-                    b = 45;
-                    c = -this.z;
-                    this.s = c;
-                    this.t = a / 2 - this.z;
-                    break;
-            }
-            this.r = b;
-            this.ah.setStyleProperty("transform", "translate(" + this.s + "px, " + this.t + "px) rotate(" + this.r + "deg)");
+            this.bg(false);
         }
+        this.bi(this.bs.width, a);
     };
-    PopupView.prototype.a9 = function () {
-        if (null != this.ag && this.l) {
-            var a = this.ag.getNativeElement();
-            document.body.removeChild(a);
-            this.l = false;
+    PopupView.prototype.bc = function () {
+        if (null != this.aj && this.m) {
+            var a = this.aj.getNativeElement();
+            if (this.g.bd != null) {
+                this.g.bd.removeChild(a);
+            }
+            else {
+                document.body.removeChild(a);
+            }
+            this.m = false;
         }
     };
-    PopupView.prototype.at = function (a) {
-        this.af = a;
-        this.aj.append(this.af);
-        this.am = new ResizeObserver(runOn(this, this.a0));
+    PopupView.prototype.aw = function (a) {
+        this.ai = a;
+        this.am.append(this.ai);
+        this.ap = new ResizeObserver(runOn(this, this.a3));
     };
-    PopupView.prototype.a0 = function (a) {
-        if (this.l) {
-            if (this.g.ao() && this.g.o == 0) {
+    PopupView.prototype.a3 = function (a) {
+        if (this.m) {
+            if (this.g.ao() && this.g.p == 0) {
                 return;
             }
-            this.g.b0();
+            this.g.b6();
         }
     };
     PopupView.prototype.j = function (a) {
-        var b = this.ag.getNativeElement();
+        var b = this.aj.getNativeElement();
         return b.contains(a);
     };
-    PopupView.prototype.a8 = function (a) {
-        this.af = null;
-        this.am.disconnect();
-        this.am = null;
+    PopupView.prototype.bb = function (a) {
+        this.ai = null;
+        this.ap.disconnect();
+        this.ap = null;
         a.remove();
     };
     PopupView.prototype.d = function (a) {
-        return new AnimationKeyFrameEffect(0, this.aj, 0, null, a);
+        return new AnimationKeyFrameEffect(0, this.am, 0, null, a);
     };
     PopupView.prototype.e = function (a) {
-        return new AnimationKeyFrameEffect(0, this.ak, 0, null, a);
+        return new AnimationKeyFrameEffect(0, this.an, 0, null, a);
     };
-    PopupView.prototype.av = function () {
+    PopupView.prototype.ay = function () {
         if (KeyFrameAnimationFactory.h == null) {
-            KeyFrameAnimationFactory.h = this.ae;
+            KeyFrameAnimationFactory.h = this.ah;
         }
     };
     PopupView.prototype.c = function (a) {
-        return new AnimationKeyFrameEffect(0, this.ag, 0, null, a);
+        return new AnimationKeyFrameEffect(0, this.aj, 0, null, a);
     };
     PopupView.prototype.b = function (a) {
-        return new AnimationKeyFrameEffect(0, this.ak, 0, null, a);
+        return new AnimationKeyFrameEffect(0, this.an, 0, null, a);
     };
     PopupView.prototype.a = function (a) {
-        return new AnimationKeyFrameEffect(0, this.ag, 0, null, a);
+        return new AnimationKeyFrameEffect(0, this.aj, 0, null, a);
     };
     PopupView.prototype.i = function () {
         return 12;
@@ -339,24 +350,27 @@ var PopupView = /** @class */ /*@__PURE__*/ (function (_super) {
     PopupView.prototype.h = function () {
         return 11;
     };
-    Object.defineProperty(PopupView.prototype, "bl", {
+    PopupView.prototype.n = function () {
+        return this.g.bd != null && !this.g.aq && !this.l();
+    };
+    Object.defineProperty(PopupView.prototype, "bs", {
         get: function () {
             if (this.k) {
-                this.ay();
+                this.a1();
             }
-            return this.bk;
+            return this.br;
         },
         enumerable: false,
         configurable: true
     });
-    PopupView.prototype.v = function (a, b, c) {
+    PopupView.prototype.y = function (a, b, c) {
         var d;
         switch (b) {
             case 3:
-                d = a.left - (this.bl.width + (this.g.as ? this.x : 0));
+                d = (!this.n() ? a.left : 0) - (this.bs.width + (this.g.at ? this.aa : 0));
                 break;
             case 4:
-                d = a.right;
+                d = !this.n() ? a.right : a.width;
                 break;
             case 0:
             case 2:
@@ -364,78 +378,78 @@ var PopupView = /** @class */ /*@__PURE__*/ (function (_super) {
             default:
                 switch (c) {
                     case 2:
-                        d = a.right - this.bl.width;
+                        d = (!this.n() ? a.right : a.width) - this.bs.width;
                         break;
                     case 3:
-                        d = a.right - (a.width / 2) - (this.bl.width / 2);
+                        d = (!this.n() ? a.right : a.width) - (a.width / 2) - (this.bs.width / 2);
                         break;
                     case 0:
                     case 1:
                     default:
-                        d = a.left;
+                        d = !this.n() ? a.left : 0;
                         break;
                 }
                 break;
         }
         return d;
     };
-    PopupView.prototype.w = function (a, b, c) {
+    PopupView.prototype.z = function (a, b, c) {
         var d;
         switch (b) {
             case 3:
             case 4:
                 switch (c) {
                     case 2:
-                        d = a.bottom - this.bl.height;
+                        d = (!this.n() ? a.bottom : 0) - this.bs.height;
                         break;
                     case 3:
-                        d = a.top - (this.bl.height / 2) + (a.height / 2);
+                        d = (!this.n() ? a.top : -a.height) - (this.bs.height / 2) + (a.height / 2);
                         break;
                     case 0:
                     case 1:
                     default:
-                        d = a.top;
+                        d = !this.n() ? a.top : -a.height;
                         break;
                 }
                 break;
             case 2:
-                d = a.top - (this.bl.height + (this.g.as ? this.x : 0));
+                d = (!this.n() ? a.top : -a.height) - (this.bs.height + (this.g.at ? this.aa : 0));
                 break;
             case 0:
             case 1:
             default:
-                d = a.bottom;
+                d = !this.n() ? a.bottom : 0;
                 break;
         }
         return d;
     };
-    PopupView.ap = function (a) {
+    PopupView.as = function (a) {
         return stringFormat("{0}px", a);
     };
-    PopupView.ao = function (a) {
+    PopupView.ar = function (a) {
         return stringFormat("{0}px", a);
     };
-    PopupView.prototype.bd = function () {
-        if (this.g.q == 1 || this.g.q == 2) {
-            switch (this.g.i) {
+    PopupView.prototype.bj = function () {
+        if (this.g.r == 1 || this.g.r == 2) {
+            switch (this.g.j) {
                 case 3:
-                    this.s = this.aa + (this.p - this.n);
+                    this.v = this.ad + (this.s - this.q);
                     break;
             }
         }
-        else if (this.g.q == 3 || this.g.q == 4) {
-            switch (this.g.i) {
+        else if (this.g.r == 3 || this.g.r == 4) {
+            switch (this.g.j) {
                 case 3:
-                    this.t = this.ab + (this.q - this.o);
+                    this.w = this.ae + (this.t - this.r);
                     break;
             }
         }
-        this.ah.setStyleProperty("transform", "translate(" + this.s + "px, " + this.t + "px) rotate(" + this.r + "deg)");
+        this.ak.setStyleProperty("transform", "translate(" + this.v + "px, " + this.w + "px) rotate(" + this.u + "deg)");
     };
-    PopupView.prototype.au = function (a, b, c, d) {
-        this.p = a;
-        this.q = b;
-        if (this.g.q == 1 || this.g.q == 2) {
+    PopupView.prototype.ax = function (a, b, c, d) {
+        this.s = a;
+        this.t = b;
+        if (this.g.r == 1 || this.g.r == 2) {
             var e = (window.innerWidth);
             var f = a;
             var g = f + c;
@@ -446,7 +460,7 @@ var PopupView = /** @class */ /*@__PURE__*/ (function (_super) {
                 a = f - (g - (e - 5));
             }
         }
-        else if (this.g.q == 3 || this.g.q == 4) {
+        else if (this.g.r == 3 || this.g.r == 4) {
             var h = (window.innerHeight);
             var i = b;
             var j = i + d;
@@ -462,162 +476,217 @@ var PopupView = /** @class */ /*@__PURE__*/ (function (_super) {
             p1: b
         };
     };
-    PopupView.prototype.bj = function (a, b, c) {
-        var d = this.w(a, b, c);
-        var e = this.v(a, b, c);
-        var f = this.au(e, d, this.bl.width, this.bl.height);
-        e = f.p0;
-        d = f.p1;
-        this.ba(e, d);
+    PopupView.prototype.bq = function (a, b, c) {
+        var d = this.z(a, b, c);
+        var e = this.y(a, b, c);
+        if (this.g.bd == null) {
+            var f = this.ax(e, d, this.bs.width, this.bs.height);
+            e = f.p0;
+            d = f.p1;
+        }
+        this.bd(e, d);
         if (b == 2 || c == 2) {
             var g = 10;
             while (g > 0) {
-                var h = this.w(a, b, c);
-                var i = this.v(a, b, c);
-                var j = this.au(i, h, this.bl.width, this.bl.height);
-                i = j.p0;
-                h = j.p1;
+                var h = this.z(a, b, c);
+                var i = this.y(a, b, c);
+                if (this.g.bd == null) {
+                    var j = this.ax(i, h, this.bs.width, this.bs.height);
+                    i = j.p0;
+                    h = j.p1;
+                }
                 if (h == d && i == e) {
                     g = 0;
                     break;
                 }
                 d = h;
                 e = i;
-                this.ba(e, d);
+                this.bd(e, d);
                 g--;
             }
         }
-        this.bd();
-        return new Rect(0, e, d, this.bl.width, this.bl.height);
+        this.bj();
+        return new Rect(0, e, d, this.bs.width, this.bs.height);
+    };
+    PopupView.prototype.bp = function (a, b, c) {
+        var d = new Rect(4);
+        var target_ = a;
+        if ((target_.getBoundingClientRect)) {
+            var bRect_ = target_.getBoundingClientRect();
+            d.left = (bRect_.left);
+            d.top = (bRect_.top);
+            d.width = (bRect_.width);
+            d.height = (bRect_.height);
+        }
+        var e = this.bq(d, b, c);
+        return e;
     };
-    PopupView.prototype.ay = function () {
-        if (this.l) {
-            this.ak.setStyleProperty("width", stringEmpty());
-            this.ak.setStyleProperty("height", stringEmpty());
-            this.ag.setStyleProperty("width", stringEmpty());
-            this.ag.setStyleProperty("height", stringEmpty());
-            this.bk = new Size(1, this.aj.outerWidth(), this.aj.outerHeight());
+    PopupView.prototype.a1 = function () {
+        if (this.m) {
+            this.an.setStyleProperty("width", stringEmpty());
+            this.an.setStyleProperty("height", stringEmpty());
+            this.aj.setStyleProperty("width", stringEmpty());
+            this.aj.setStyleProperty("height", stringEmpty());
+            this.aj.setStyleProperty("position", "absolute");
+            this.br = new Size(1, this.am.outerWidth(), this.am.outerHeight());
             this.k = false;
-            this.be();
+            this.bk();
         }
         else {
             this.k = true;
         }
     };
-    PopupView.prototype.ba = function (a, b) {
+    PopupView.prototype.bd = function (a, b) {
         var c = stringFormat("{0}px", a);
         var d = stringFormat("{0}px", b);
-        this.ag.setStyleProperty("left", c);
-        this.ag.setStyleProperty("top", d);
-        this.n = a;
-        this.o = b;
+        this.aj.setStyleProperty("left", c);
+        this.aj.setStyleProperty("top", d);
+        this.q = a;
+        this.r = b;
     };
-    PopupView.prototype.a6 = function (a) {
+    PopupView.prototype.a9 = function (a) {
         var _this = this;
         if (a == null) {
-            this.ad = null;
-            if (this.ag != null) {
-                this.ag.unlistenAll();
+            this.ag = null;
+            if (this.aj != null) {
+                this.aj.unlistenAll();
             }
             return;
         }
-        this.ad = a;
+        this.ag = a;
         var b = a.rootWrapper;
-        this.aw(b);
-        this.ad.getPortal(this.aj, "ChildContent", function (c) {
+        this.az(b);
+        this.ag.getPortal(this.am, "ChildContent", function (c) {
             var comp_ = c.componentRef;
-            _this.an = comp_;
+            _this.aq = comp_;
         }, true);
     };
-    PopupView.prototype.be = function () {
-        var a = new Size(1, this.bl.width, this.bl.height);
-        if (!this.l || !this.g.av) {
+    PopupView.prototype.bk = function () {
+        var a = new Size(1, this.bs.width, this.bs.height);
+        if (!this.m || !this.g.aw) {
             a.height = 0;
         }
         var b = a.width;
         var c = a.height;
         var d = stringFormat("{0}px", b);
         var e = stringFormat("{0}px", c);
-        if (this.g.as) {
-            var f = 0;
-            var g = 0;
-            switch (this.g.s()) {
+        this.bi(b, c);
+        if (this.g.at) {
+            switch (this.g.t()) {
                 case 2:
-                    f = 135;
-                    g = -this.z;
-                    this.s = b / 2 - this.z;
-                    this.t = g;
                     d = stringFormat("{0}px", b);
-                    e = stringFormat("{0}px", this.x + c);
+                    e = stringFormat("{0}px", this.aa + c);
                     break;
                 case 1:
-                    f = -45;
-                    g = this.x - this.z;
-                    this.s = b / 2 - this.z;
-                    this.t = g;
                     d = stringFormat("{0}px", b);
-                    e = stringFormat("{0}px", this.x + c);
+                    e = stringFormat("{0}px", this.aa + c);
                     break;
                 case 3:
-                    f = -135;
-                    g = this.x - this.z;
-                    this.s = g;
-                    this.t = c / 2 - this.z;
-                    d = stringFormat("{0}px", this.x + b);
+                    d = stringFormat("{0}px", this.aa + b);
                     e = stringFormat("{0}px", c);
                     break;
                 case 4:
-                    f = 45;
-                    g = -this.z;
-                    this.s = g;
-                    this.t = c / 2 - this.z;
-                    d = stringFormat("{0}px", this.x + b);
+                    d = stringFormat("{0}px", this.aa + b);
                     e = stringFormat("{0}px", c);
                     break;
             }
-            this.r = f;
-            this.ah.setStyleProperty("transform", "translate(" + this.s + "px, " + this.t + "px) rotate(" + this.r + "deg)");
         }
         if (this.f.ao()) {
-            if (this.u == c) {
+            if (this.x == c) {
                 return;
             }
-            this.f.bw();
-            this.m = true;
+            this.f.b2();
+            this.p = true;
             return;
         }
-        this.m = false;
-        var h = stringFormat("{0}px", b);
-        var i = stringFormat("{0}px", c);
-        this.ak.setStyleProperty("width", h);
-        this.ak.setStyleProperty("height", i);
-        this.ag.setStyleProperty("width", d);
-        this.ag.setStyleProperty("height", e);
+        this.p = false;
+        var f = stringFormat("{0}px", b);
+        var g = stringFormat("{0}px", c);
+        this.an.setStyleProperty("width", f);
+        this.an.setStyleProperty("height", g);
+        if (!this.l()) {
+            if (this.g.bd != null) {
+                e = "0px";
+            }
+            this.aj.setStyleProperty("width", d);
+            this.aj.setStyleProperty("height", e);
+        }
+        this.be(this.g.aq);
     };
-    PopupView.prototype.aw = function (a) {
-        this.al = a;
-        this.a3();
+    PopupView.prototype.bi = function (a, b) {
+        if (this.g.at) {
+            var c = 0;
+            var d = 0;
+            switch (this.g.t()) {
+                case 2:
+                    c = 135;
+                    d = -this.ac;
+                    this.v = a / 2 - this.ac;
+                    this.w = d;
+                    break;
+                case 1:
+                    c = -45;
+                    d = this.aa - this.ac;
+                    this.v = a / 2 - this.ac;
+                    this.w = d;
+                    break;
+                case 3:
+                    c = -135;
+                    d = this.aa - this.ac;
+                    this.v = d;
+                    this.w = b / 2 - this.ac;
+                    break;
+                case 4:
+                    c = 45;
+                    d = -this.ac;
+                    this.v = d;
+                    this.w = b / 2 - this.ac;
+                    break;
+            }
+            this.u = c;
+            this.ak.setStyleProperty("transform", "translate(" + this.v + "px, " + this.w + "px) rotate(" + this.u + "deg)");
+        }
+    };
+    PopupView.prototype.az = function (a) {
+        this.ao = a;
+        this.a6();
     };
-    PopupView.prototype.ax = function (a) {
+    PopupView.prototype.a0 = function (a) {
         this.f = a;
     };
-    PopupView.prototype.az = function () {
+    PopupView.prototype.a2 = function () {
     };
-    PopupView.prototype.a7 = function () {
-        this.aq();
-        if (this.g.av) {
+    PopupView.prototype.ba = function () {
+        this.at();
+        if (this.g.aw) {
             return;
         }
-        this.be();
+        this.bk();
     };
-    PopupView.prototype.bc = function (a) {
-        if (this.ag != null) {
-            this.ag.setStyleProperty("pointer-events", a ? "auto" : "none");
+    PopupView.prototype.bg = function (a) {
+        if (this.aj != null) {
+            this.aj.setStyleProperty("pointer-events", a ? "auto" : "none");
         }
     };
-    PopupView.prototype.bb = function (a) {
-        if (this.ag != null) {
-            this.ag.setAttribute("tabindex", a ? "-1" : "");
+    PopupView.prototype.bf = function (a) {
+        if (this.aj != null) {
+            this.aj.setAttribute("tabindex", a ? "-1" : "");
+        }
+    };
+    PopupView.prototype.be = function (a) {
+        if (this.aj != null) {
+            this.aj.setStyleProperty("position", a ? "fixed" : this.g.bd != null ? "relative" : "absolute");
+        }
+    };
+    PopupView.prototype.bh = function (a) {
+        if (this.aj != null && this.o()) {
+            var b = this.aj.getNativeElement();
+            if (a) {
+                b.popover = "manual";
+            }
+            else {
+                b.popover = undefined;
+            }
         }
     };
     PopupView.$t = markType(PopupView, 'PopupView');
@@ -631,13 +700,12 @@ var Popup = /** @class */ /*@__PURE__*/ (function (_super) {
     __extends(Popup, _super);
     function Popup() {
         var _this = _super.call(this) || this;
-        _this.p = 0;
-        _this.h = 0;
-        _this.az = 0;
-        _this.cu = null;
-        _this.cs = null;
-        _this.aa = null;
-        _this.ab = null;
+        _this.q = 0;
+        _this.i = 0;
+        _this.a1 = 0;
+        _this.c3 = null;
+        _this.c1 = null;
+        _this.bb = null;
         _this.onClosed = null;
         _this.onPopup = null;
         _this.propertyChanged = null;
@@ -645,90 +713,102 @@ var Popup = /** @class */ /*@__PURE__*/ (function (_super) {
         _this.popupMouseLeave = null;
         _this.popupGotFocus = null;
         _this.popupLostFocus = null;
-        _this.v = null;
-        _this.ag = false;
-        _this.a5 = 50;
+        _this.w = null;
+        _this.af = false;
+        _this.a7 = 50;
         _this.ak = true;
-        _this.n = 0;
-        _this.a3 = -1;
-        _this.a2 = Popup.a7;
-        _this.au = false;
-        _this.ch = Popup.cq;
-        _this.cg = Popup.cp;
-        _this.cf = Popup.co;
-        _this.ci = null;
-        _this.aw = 0;
-        _this.ah = true;
-        _this.ae = false;
+        _this.o = 0;
+        _this.a5 = -1;
+        _this.a4 = Popup.a9;
+        _this.av = false;
+        _this.cq = Popup.cz;
+        _this.cp = Popup.cy;
+        _this.co = Popup.cx;
+        _this.cr = null;
+        _this.ay = 0;
+        _this.ag = true;
+        _this.ac = false;
+        _this.ah = false;
+        _this.s = 0;
+        _this.cs = null;
+        _this.az = 20;
         _this.ai = false;
-        _this.r = 0;
-        _this.cj = null;
-        _this.ax = 20;
+        _this.ad = false;
+        _this.ae = false;
         _this.aj = false;
-        _this.af = false;
-        _this.j = null;
-        var a = _this.u();
-        _this.v = a;
-        a.ax(_this);
+        _this.k = null;
+        var a = _this.v();
+        _this.w = a;
+        a.a0(_this);
         return _this;
     }
-    Object.defineProperty(Popup.prototype, "cv", {
+    Object.defineProperty(Popup.prototype, "c4", {
         get: function () {
-            return this.cu;
+            return this.c3;
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(Popup.prototype, "ct", {
+    Object.defineProperty(Popup.prototype, "c2", {
         get: function () {
-            return this.cs;
+            return this.c1;
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(Popup.prototype, "q", {
+    Object.defineProperty(Popup.prototype, "r", {
         get: function () {
-            return this.p;
+            return this.q;
+        },
+        set: function (a) {
+            this.q = a;
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(Popup.prototype, "i", {
+    Object.defineProperty(Popup.prototype, "j", {
         get: function () {
-            return this.h;
+            return this.i;
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(Popup.prototype, "a0", {
+    Object.defineProperty(Popup.prototype, "a2", {
         get: function () {
-            return this.az;
+            return this.a1;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Popup.prototype, "bd", {
+        get: function () {
+            return this.bb;
         },
         enumerable: false,
         configurable: true
     });
-    Popup.prototype.b7 = function (a, b, c) {
+    Popup.prototype.cd = function (a, b, c) {
         if (this.propertyChanged != null) {
             this.propertyChanged(this, new PropertyChangedEventArgs(a));
         }
-        this.b9(a, b, c);
+        this.cg(a, b, c);
     };
-    Popup.prototype.b5 = function () {
+    Popup.prototype.cb = function () {
         if (this.popupMouseEnter != null) {
             this.popupMouseEnter(this, new MouseEventArgs());
         }
     };
-    Popup.prototype.b6 = function () {
+    Popup.prototype.cc = function () {
         if (this.popupMouseLeave != null) {
             this.popupMouseLeave(this, new MouseEventArgs());
         }
     };
-    Popup.prototype.b3 = function () {
+    Popup.prototype.b9 = function () {
         if (this.popupGotFocus != null) {
             this.popupGotFocus(this, new FocusEventArgs());
         }
     };
-    Popup.prototype.b4 = function (a) {
+    Popup.prototype.ca = function (a) {
         if (this.popupLostFocus != null) {
             this.popupLostFocus(this, ((function () {
                 var $ret = new FocusEventArgs();
@@ -737,29 +817,29 @@ var Popup = /** @class */ /*@__PURE__*/ (function (_super) {
             })()));
         }
     };
-    Object.defineProperty(Popup.prototype, "aq", {
+    Object.defineProperty(Popup.prototype, "ar", {
         get: function () {
-            return this.ag;
+            return this.af;
         },
         set: function (a) {
-            var b = this.ag;
-            this.ag = a;
-            if (b != this.ag) {
-                this.b7("IsFocusable", b, this.ag);
+            var b = this.af;
+            this.af = a;
+            if (b != this.af) {
+                this.cd("IsFocusable", b, this.af);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(Popup.prototype, "a6", {
+    Object.defineProperty(Popup.prototype, "a8", {
         get: function () {
-            return this.a5;
+            return this.a7;
         },
         set: function (a) {
-            var b = this.a5;
-            this.a5 = a;
-            if (b != this.a5) {
-                this.b7("AnimationDuration", b, a);
+            var b = this.a7;
+            this.a7 = a;
+            if (b != this.a7) {
+                this.cd("AnimationDuration", b, a);
             }
         },
         enumerable: false,
@@ -773,140 +853,140 @@ var Popup = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.ak;
             this.ak = a;
             if (b != this.ak) {
-                this.b7("AnimationEnabled", b, a);
+                this.cd("AnimationEnabled", b, a);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(Popup.prototype, "o", {
+    Object.defineProperty(Popup.prototype, "p", {
         get: function () {
-            return this.n;
+            return this.o;
         },
         set: function (a) {
-            var b = this.n;
-            this.n = a;
-            if (b != this.n) {
-                this.b7("AnimationType", enumGetBox(PopupAnimationType_$type, b), enumGetBox(PopupAnimationType_$type, this.n));
+            var b = this.o;
+            this.o = a;
+            if (b != this.o) {
+                this.cd("AnimationType", enumGetBox(PopupAnimationType_$type, b), enumGetBox(PopupAnimationType_$type, this.o));
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(Popup.prototype, "a8", {
+    Object.defineProperty(Popup.prototype, "ba", {
         get: function () {
-            return this.a3;
+            return this.a5;
         },
         set: function (a) {
-            var b = this.a3;
-            this.a3 = a;
-            if (b != this.a3) {
-                this.b7("Elevation", b, a);
+            var b = this.a5;
+            this.a5 = a;
+            if (b != this.a5) {
+                this.cd("Elevation", b, a);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(Popup.prototype, "a4", {
+    Object.defineProperty(Popup.prototype, "a6", {
         get: function () {
-            return this.a2;
+            return this.a4;
         },
         set: function (a) {
-            var b = this.a2;
-            this.a2 = a;
-            if (b != this.a2) {
-                this.b7("ActualElevation", b, a);
+            var b = this.a4;
+            this.a4 = a;
+            if (b != this.a4) {
+                this.cd("ActualElevation", b, a);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(Popup.prototype, "av", {
+    Object.defineProperty(Popup.prototype, "aw", {
         get: function () {
-            return this.au;
+            return this.av;
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(Popup.prototype, "cm", {
+    Object.defineProperty(Popup.prototype, "cv", {
         get: function () {
-            return this.ch;
+            return this.cq;
         },
         set: function (a) {
-            var b = this.ch;
-            this.ch = a;
-            if (b != this.ch) {
-                this.b7("ActualUmbraShadowColor", b, a);
+            var b = this.cq;
+            this.cq = a;
+            if (b != this.cq) {
+                this.cd("ActualUmbraShadowColor", b, a);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(Popup.prototype, "cl", {
+    Object.defineProperty(Popup.prototype, "cu", {
         get: function () {
-            return this.cg;
+            return this.cp;
         },
         set: function (a) {
-            var b = this.cg;
-            this.cg = a;
-            if (b != this.cg) {
-                this.b7("ActualPenumbraShadowColor", b, a);
+            var b = this.cp;
+            this.cp = a;
+            if (b != this.cp) {
+                this.cd("ActualPenumbraShadowColor", b, a);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(Popup.prototype, "ck", {
+    Object.defineProperty(Popup.prototype, "ct", {
         get: function () {
-            return this.cf;
+            return this.co;
         },
         set: function (a) {
-            var b = this.cf;
-            this.cf = a;
-            if (b != this.cf) {
-                this.b7("ActualAmbientShadowColor", b, a);
+            var b = this.co;
+            this.co = a;
+            if (b != this.co) {
+                this.cd("ActualAmbientShadowColor", b, a);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(Popup.prototype, "cn", {
+    Object.defineProperty(Popup.prototype, "cw", {
         get: function () {
-            return this.ci;
+            return this.cr;
         },
         set: function (a) {
-            var b = this.ci;
-            this.ci = a;
-            if (b != this.ci) {
-                this.b7("Background", b, this.ci);
+            var b = this.cr;
+            this.cr = a;
+            if (b != this.cr) {
+                this.cd("Background", b, this.cr);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(Popup.prototype, "ay", {
+    Object.defineProperty(Popup.prototype, "a0", {
         get: function () {
-            return this.aw;
+            return this.ay;
         },
         set: function (a) {
-            var b = this.aw;
-            this.aw = a;
-            if (b != this.aw) {
-                this.b7("CornerRadius", b, this.aw);
+            var b = this.ay;
+            this.ay = a;
+            if (b != this.ay) {
+                this.cd("CornerRadius", b, this.ay);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(Popup.prototype, "ar", {
+    Object.defineProperty(Popup.prototype, "as", {
         get: function () {
-            return this.ah;
+            return this.ag;
         },
         set: function (a) {
-            var b = this.ah;
-            this.ah = a;
-            if (b != this.ah) {
-                this.b7("IsHitTestVisible", b, this.ah);
+            var b = this.ag;
+            this.ag = a;
+            if (b != this.ag) {
+                this.cd("IsHitTestVisible", b, this.ag);
             }
         },
         enumerable: false,
@@ -914,106 +994,135 @@ var Popup = /** @class */ /*@__PURE__*/ (function (_super) {
     });
     Object.defineProperty(Popup.prototype, "an", {
         get: function () {
-            return this.ae;
+            return this.ac;
         },
         set: function (a) {
-            var b = this.ae;
-            this.ae = a;
-            if (b != this.ae) {
-                this.b7("DisableHitTestDuringAnimation", b, this.ae);
+            var b = this.ac;
+            this.ac = a;
+            if (b != this.ac) {
+                this.cd("DisableHitTestDuringAnimation", b, this.ac);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(Popup.prototype, "as", {
+    Object.defineProperty(Popup.prototype, "at", {
         get: function () {
-            return this.ai;
+            return this.ah;
         },
         set: function (a) {
-            var b = this.ai;
-            this.ai = a;
-            if (b != this.ai) {
-                this.b7("IsPointerEnabled", b, this.ai);
+            var b = this.ah;
+            this.ah = a;
+            if (b != this.ah) {
+                this.cd("IsPointerEnabled", b, this.ah);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(Popup.prototype, "t", {
+    Object.defineProperty(Popup.prototype, "u", {
         get: function () {
-            return this.r;
+            return this.s;
         },
         set: function (a) {
-            var b = this.r;
-            this.r = a;
-            if (b != this.r) {
-                this.b7("PointerPosition", enumGetBox(PopupPointerPosition_$type, b), enumGetBox(PopupPointerPosition_$type, this.r));
+            var b = this.s;
+            this.s = a;
+            if (b != this.s) {
+                this.cd("PointerPosition", enumGetBox(PopupPointerPosition_$type, b), enumGetBox(PopupPointerPosition_$type, this.s));
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(Popup.prototype, "cr", {
+    Object.defineProperty(Popup.prototype, "c0", {
         get: function () {
-            return this.cj;
+            return this.cs;
         },
         set: function (a) {
-            var b = this.cj;
-            this.cj = a;
-            if (b != this.cj) {
-                this.b7("PointerBackground", b, this.cj);
+            var b = this.cs;
+            this.cs = a;
+            if (b != this.cs) {
+                this.cd("PointerBackground", b, this.cs);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(Popup.prototype, "a1", {
+    Object.defineProperty(Popup.prototype, "a3", {
         get: function () {
-            return this.ax;
+            return this.az;
         },
         set: function (a) {
-            var b = this.ax;
-            this.ax = a;
-            if (b != this.ax) {
-                this.b7("PointerSize", b, this.ax);
+            var b = this.az;
+            this.az = a;
+            if (b != this.az) {
+                this.cd("PointerSize", b, this.az);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(Popup.prototype, "at", {
+    Object.defineProperty(Popup.prototype, "au", {
         get: function () {
-            return this.aj;
+            return this.ai;
         },
         set: function (a) {
-            this.aj = a;
+            this.ai = a;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(Popup.prototype, "ap", {
         get: function () {
-            return this.af;
+            return this.ad;
         },
         set: function (a) {
-            this.af = a;
+            this.ad = a;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Popup.prototype, "aq", {
+        get: function () {
+            return this.ae;
+        },
+        set: function (a) {
+            var b = this.ae;
+            this.ae = a;
+            if (b != this.ae) {
+                this.cd("IsFixed", b, this.ae);
+            }
         },
         enumerable: false,
         configurable: true
     });
-    Popup.prototype.u = function () {
+    Object.defineProperty(Popup.prototype, "ax", {
+        get: function () {
+            return this.aj;
+        },
+        set: function (a) {
+            var b = this.aj;
+            this.aj = a;
+            if (b != this.aj) {
+                this.cd("UseTopLayer", b, this.aj);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Popup.prototype.v = function () {
         return new PopupView();
     };
-    Popup.prototype.b9 = function (a, b, c) {
+    Popup.prototype.cg = function (a, b, c) {
         switch (a) {
             case "IsShown":
-                if (false == this.av) {
-                    this.v.a9();
+                if (false == this.aw) {
+                    this.w.bc();
+                    this.bb = null;
                 }
                 break;
             case "Elevation":
-                this.a4 = this.a8 == -1 ? Popup.a7 : this.a8;
+                this.a6 = this.ba == -1 ? Popup.a9 : this.ba;
                 break;
             case "ActualElevation":
             case "ActualUmbraShadowColor":
@@ -1021,35 +1130,40 @@ var Popup = /** @class */ /*@__PURE__*/ (function (_super) {
             case "ActualAmbientShadowColor":
             case "Background":
             case "CornerRadius":
-                this.v.bi();
+                this.w.bo();
                 break;
             case "AnimationEnabled":
                 if (false == this.al) {
-                    this.bw();
+                    this.b2();
                 }
                 break;
             case "IsHitTestVisible":
-                this.v.bc(this.ar);
+                this.w.bg(this.as);
                 break;
             case "IsFocusable":
-                this.v.bb(this.aq);
+                this.w.bf(this.ar);
+                break;
+            case "IsFixed":
+                this.w.be(this.aq);
+                break;
+            case "UseTopLayer":
+                this.w.bh(this.ax);
                 break;
         }
     };
-    Popup.prototype.bw = function () {
+    Popup.prototype.b2 = function () {
         if (this.ao()) {
-            if (null != this.ab && this.ab.playState == 1) {
-                this.ab.cancel();
-            }
-            if (null != this.aa && this.aa.playState == 1) {
-                this.aa.cancel();
+            for (var a = 0; a < this.k.a.count; a++) {
+                if (this.k.a._inner[a].playState == 1) {
+                    this.k.a._inner[a].cancel();
+                }
             }
         }
     };
-    Popup.prototype.y = function (a) {
-        var b = this.f(a);
-        var c = a ? this.b() : this.a();
-        var d = this.v.d(c);
+    Popup.prototype.z = function (a) {
+        var b = this.g(a);
+        var c = a ? this.c() : this.b();
+        var d = this.w.d(c);
         var e = new List$1(AnimationKeyFrameProperty.$, 0);
         var f = new List$1(AnimationKeyFrameProperty.$, 0);
         var g = new TranslateTransform();
@@ -1064,52 +1178,60 @@ var Popup = /** @class */ /*@__PURE__*/ (function (_super) {
         d.m.apply(d, __spreadArray([], __read(f.toArray())));
         return KeyFrameAnimationFactory.f.c(d);
     };
-    Popup.prototype.z = function (a) {
-        var b = this.g(a);
-        this.v.as(b.h);
-        var c = a ? this.b() : this.a();
-        var d = this.v.e(c);
-        var e = new List$1(AnimationKeyFrameProperty.$, 0);
+    Popup.prototype.a = function (a) {
+        var b = new List$1(IKeyFrameAnimation_$type, 0);
+        var c = this.h(a);
+        this.w.av(c.h);
+        var d = a ? this.c() : this.b();
+        var e = this.w.e(d);
         var f = new List$1(AnimationKeyFrameProperty.$, 0);
-        var g = new AnimationKeyFrameProperty(10, b.g);
-        var h = new AnimationKeyFrameProperty(10, b.h);
-        e.add(g);
+        var g = new List$1(AnimationKeyFrameProperty.$, 0);
+        var h = new AnimationKeyFrameProperty(10, c.g);
+        var i = new AnimationKeyFrameProperty(10, c.h);
         f.add(h);
-        if (this.p == 2) {
-            var i = b.c;
-            var j = b.f;
-            var k = new AnimationKeyFrameProperty(12, i);
-            var l = new AnimationKeyFrameProperty(12, j);
-            e.add(k);
-            f.add(l);
+        g.add(i);
+        e.m.apply(e, __spreadArray([], __read(f.toArray())));
+        e.m.apply(e, __spreadArray([], __read(g.toArray())));
+        b.add(KeyFrameAnimationFactory.f.c(e));
+        if (this.q == 2) {
+            var j = c.c;
+            var k = c.f;
+            var l = this.w.c(d);
+            var m = new List$1(AnimationKeyFrameProperty.$, 0);
+            var n = new List$1(AnimationKeyFrameProperty.$, 0);
+            var o = new AnimationKeyFrameProperty(12, j);
+            var p = new AnimationKeyFrameProperty(12, k);
+            m.add(o);
+            n.add(p);
+            l.m.apply(l, __spreadArray([], __read(m.toArray())));
+            l.m.apply(l, __spreadArray([], __read(n.toArray())));
+            b.add(KeyFrameAnimationFactory.f.c(l));
         }
-        d.m.apply(d, __spreadArray([], __read(e.toArray())));
-        d.m.apply(d, __spreadArray([], __read(f.toArray())));
-        return KeyFrameAnimationFactory.f.c(d);
+        return b.toArray();
     };
-    Popup.prototype.a = function () {
+    Popup.prototype.b = function () {
         var a = new AnimationKeyFrameEffectTiming();
-        a.g = this.a6;
+        a.g = this.a8;
         a.b = 3;
         return a;
     };
-    Popup.prototype.b = function () {
+    Popup.prototype.c = function () {
         var a = new AnimationKeyFrameEffectTiming();
-        a.g = this.a6;
+        a.g = this.a8;
         a.b = 3;
         return a;
     };
-    Popup.prototype.bz = function () {
-        this.v.av();
+    Popup.prototype.b5 = function () {
+        this.w.ay();
     };
-    Popup.prototype.f = function (a) {
-        var b = truncate(this.v.bl.height);
+    Popup.prototype.g = function (a) {
+        var b = truncate(this.w.bs.height);
         if (b <= 0) {
             b = 500;
         }
         var c = a ? -b : 0;
         var d = a ? 0 : -b;
-        if (this.p == 2) {
+        if (this.q == 2) {
             c = 0;
             d = 0;
         }
@@ -1121,35 +1243,35 @@ var Popup = /** @class */ /*@__PURE__*/ (function (_super) {
         })());
         return e;
     };
-    Popup.prototype.g = function (a) {
-        var b = truncate(this.v.bl.height);
+    Popup.prototype.h = function (a) {
+        var b = truncate(this.w.bs.height);
         if (b <= 0) {
             b = 500;
         }
         var c = a ? 0 : b;
         var d = a ? b : 0;
-        var e = this.cu.top;
-        var f = this.cu.top;
-        var g = this.cu.left;
+        var e = this.c3.top;
+        var f = this.c3.top;
+        var g = this.c3.left;
         var h = g;
-        switch (this.p) {
+        switch (this.q) {
             case 2:
-                e = a ? this.cu.bottom : this.cu.top;
-                f = a ? this.cu.top : this.cu.bottom;
-                g = this.cu.left;
+                e = a ? this.c3.bottom : this.c3.top;
+                f = a ? this.c3.top : this.c3.bottom;
+                g = this.c3.left;
                 h = g;
                 break;
             case 1:
-                e = this.cu.top;
-                f = this.cu.top;
-                g = this.cu.left;
+                e = this.c3.top;
+                f = this.c3.top;
+                g = this.c3.left;
                 h = g;
                 break;
             case 3:
             case 4:
-                e = this.cu.top;
+                e = this.c3.top;
                 f = e;
-                g = this.cu.left;
+                g = this.c3.left;
                 h = g;
                 break;
         }
@@ -1166,60 +1288,80 @@ var Popup = /** @class */ /*@__PURE__*/ (function (_super) {
         return i;
     };
     Popup.prototype.ao = function () {
-        if (null == this.ab && null == this.aa) {
+        if (this.k == null) {
             return false;
         }
-        if (null != this.ab && this.ab.playState == 1) {
-            return true;
-        }
-        if (null != this.aa && this.aa.playState == 1) {
-            return true;
+        for (var a = 0; a < this.k.a.count; a++) {
+            if (this.k.a._inner[a].playState == 1) {
+                return true;
+            }
         }
         return false;
     };
-    Popup.prototype.b0 = function () {
-        this.v.ay();
+    Popup.prototype.b6 = function () {
+        this.w.a1();
+        if (this.aw) {
+            if (this.bd != null) {
+                this.c3 = this.w.bp(this.bd, this.q, this.i);
+            }
+            else {
+                this.c3 = this.w.bq(this.c1, this.q, this.i);
+            }
+        }
+    };
+    Popup.prototype.cf = function (a, b, c) {
+        this.c1 = a;
+        this.q = b;
+        this.i = c;
+        this.a1 = 0;
+        this.w.ba();
+        this.c3 = this.w.bq(a, b, c);
+    };
+    Popup.prototype.ce = function (a, b, c) {
+        this.bb = a;
+        this.q = b;
+        this.i = c;
+        this.a1 = 0;
+        this.w.ba();
+        this.c3 = this.w.bp(a, b, c);
+    };
+    Popup.prototype.ck = function (a, b, c) {
         if (this.av) {
-            this.cu = this.v.bj(this.cs, this.p, this.h);
+            this.av = false;
+            this.cd("IsShown", true, this.av);
         }
+        this.cf(a, b, c);
+        this.cl(true);
     };
-    Popup.prototype.b8 = function (a, b, c) {
-        this.cs = a;
-        this.p = b;
-        this.h = c;
-        this.az = 0;
-        this.v.a7();
-        this.cu = this.v.bj(a, b, c);
-    };
-    Popup.prototype.cc = function (a, b, c) {
-        if (this.au) {
-            this.au = false;
-            this.b7("IsShown", true, this.au);
+    Popup.prototype.cj = function (a, b, c) {
+        if (this.av) {
+            this.av = false;
+            this.cd("IsShown", true, this.av);
         }
-        this.b8(a, b, c);
-        this.cd(true);
+        this.ce(a, b, c);
+        this.cl(true);
     };
-    Popup.prototype.cd = function (a) {
+    Popup.prototype.cl = function (a) {
         var _this = this;
-        this.bw();
-        var b = this.au;
+        this.b2();
+        var b = this.av;
+        this.av = a;
         this.au = a;
-        this.at = a;
         this.ap = !a;
-        var c = this.g(a);
-        var d = this.f(a);
+        var c = this.h(a);
+        var d = this.g(a);
         if (false == this.al) {
-            var e = this.v.ar(c, d);
+            var e = this.w.au(c, d);
             c = e.p0;
             d = e.p1;
             return;
         }
-        this.bz();
-        this.j = this.k(this.o, this.au);
-        this.j.d(function () {
-            _this.j.c();
-            _this.b7("IsShown", b, _this.au);
-            if (_this.au) {
+        this.b5();
+        this.k = this.l(this.p, this.av);
+        this.k.d(function () {
+            _this.k.c();
+            _this.cd("IsShown", b, _this.av);
+            if (_this.av) {
                 if (_this.onPopup != null) {
                     _this.onPopup(_this, new OnPopupEventArgs());
                 }
@@ -1229,65 +1371,68 @@ var Popup = /** @class */ /*@__PURE__*/ (function (_super) {
                     _this.onClosed(_this, new OnClosedEventArgs());
                 }
             }
-            _this.at = false;
+            _this.au = false;
             _this.ap = false;
-            var f = _this.v.ar(c, d);
+            var f = _this.w.au(c, d);
             c = f.p0;
             d = f.p1;
         });
     };
-    Popup.prototype.k = function (a, b) {
+    Popup.prototype.l = function (a, b) {
         switch (a) {
-            case 0: return this.m(b);
-            case 1: return this.l(b);
-            default: return this.m(b);
+            case 0: return this.n(b);
+            case 1: return this.m(b);
+            default: return this.n(b);
         }
     };
-    Popup.prototype.m = function (a) {
-        var b = this.y(a);
-        var c = this.z(a);
+    Popup.prototype.n = function (a) {
+        var b = this.z(a);
+        var c = this.a(a);
         var d = new PopupAnimation();
         d.a.add(b);
-        d.a.add(c);
+        for (var f = 0; f < c.length; f++) {
+            var e = c[f];
+            d.a.add(e);
+        }
         return d;
     };
-    Popup.prototype.l = function (a) {
-        var b = this.g(a);
-        this.v.as(a ? b.h : b.g);
-        var c = this.b();
-        var d = this.v.c(c);
+    Popup.prototype.m = function (a) {
+        var b = this.h(a);
+        this.w.av(a ? b.h : b.g);
+        var c = this.c();
+        var d = this.w.c(c);
         var e = DeviceUtils.g(30);
-        var f = this.v.i();
+        var f = this.w.i();
         var g = b.f - e;
         var h = b.f;
-        switch (this.p) {
+        switch (this.q) {
             case 2:
                 g = a ? b.f + e : b.c + e;
                 h = a ? b.f : b.c;
-                f = this.v.i();
+                f = this.w.i();
                 break;
             case 1:
                 g = b.f - e;
                 h = b.f;
-                f = this.v.i();
+                f = this.w.i();
                 break;
             case 3:
                 g = b.d + e;
                 h = b.d;
-                f = this.v.h();
+                f = this.w.h();
                 break;
             case 4:
                 g = b.d - e;
                 h = b.d;
-                f = this.v.h();
+                f = this.w.h();
                 break;
         }
         d.m(new AnimationKeyFrameProperty(f, a ? g : h));
         d.m(new AnimationKeyFrameProperty(f, a ? h : g));
-        var i = this.v.a(c);
+        var i = this.w.a(c);
         i.m(new AnimationKeyFrameProperty(1, a ? 0 : 1));
         i.m(new AnimationKeyFrameProperty(1, a ? 1 : 0));
-        var j = this.v.b(c);
+        var j = this.w.b(c);
         j.m(new AnimationKeyFrameProperty(10, (a ? b.h : b.g)));
         j.m(new AnimationKeyFrameProperty(10, (a ? b.h : b.g)));
         var k = new PopupAnimation();
@@ -1297,55 +1442,58 @@ var Popup = /** @class */ /*@__PURE__*/ (function (_super) {
         return k;
     };
     Popup.prototype.contains = function (a) {
-        return this.v.j(a);
+        return this.w.j(a);
     };
     Popup.prototype.appendPopupContent = function (a) {
-        this.v.at(a);
+        this.w.aw(a);
     };
     Popup.prototype.removePopupContent = function (a) {
-        this.v.a8(a);
+        this.w.bb(a);
     };
-    Popup.prototype.bx = function () {
-        if (!this.au) {
+    Popup.prototype.b3 = function () {
+        if (!this.av) {
             return;
         }
-        this.cd(false);
+        this.cl(false);
     };
     Popup.prototype.destroy = function () {
         this.provideRenderer(null);
     };
     Popup.prototype.showRelativeToExclusionRect = function (a, b, c) {
-        this.cc(a, b, c);
+        this.ck(a, b, c);
+    };
+    Popup.prototype.cn = function (a, b, c) {
+        this.cj(a, b, c);
     };
-    Popup.prototype.b1 = function (a) {
-        this.cs = a;
-        this.cu = this.v.bj(a, this.p, this.h);
+    Popup.prototype.b7 = function (a) {
+        this.c1 = a;
+        this.c3 = this.w.bq(a, this.q, this.i);
     };
     Popup.prototype.notifySizeChanged = function () {
     };
     Popup.prototype.provideRenderer = function (a) {
-        this.v.a6(a);
+        this.w.a9(a);
     };
-    Popup.prototype.a9 = function () {
-        return this.c();
+    Popup.prototype.bc = function () {
+        return this.d();
     };
-    Popup.prototype.bl = function () {
-        var a = this.c();
+    Popup.prototype.bp = function () {
+        var a = this.d();
         return a.f();
     };
-    Popup.prototype.c = function () {
+    Popup.prototype.d = function () {
         var a = new PopupVisualModelExport();
-        a.e = this.a4;
-        a.d = this.av;
-        a.c = AppearanceHelper.a(this.cm);
-        a.b = AppearanceHelper.a(this.cl);
-        a.a = AppearanceHelper.a(this.ck);
+        a.e = this.a6;
+        a.d = this.aw;
+        a.c = AppearanceHelper.a(this.cv);
+        a.b = AppearanceHelper.a(this.cu);
+        a.a = AppearanceHelper.a(this.ct);
         return a;
     };
-    Popup.prototype.s = function () {
-        var a = this.t;
+    Popup.prototype.t = function () {
+        var a = this.u;
         if (a == 0) {
-            switch (this.q) {
+            switch (this.r) {
                 case 4:
                     a = 3;
                     break;
@@ -1363,10 +1511,10 @@ var Popup = /** @class */ /*@__PURE__*/ (function (_super) {
         return a;
     };
     Popup.$t = markType(Popup, 'Popup', Base.$, [INotifyPropertyChanged_$type]);
-    Popup.a7 = 2;
-    Popup.cq = BrushUtil.g(66, 0, 0, 0);
-    Popup.cp = BrushUtil.g(30, 0, 0, 0);
-    Popup.co = BrushUtil.g(20, 0, 0, 0);
+    Popup.a9 = 2;
+    Popup.cz = BrushUtil.h(66, 0, 0, 0);
+    Popup.cy = BrushUtil.h(30, 0, 0, 0);
+    Popup.cx = BrushUtil.h(20, 0, 0, 0);
     return Popup;
 }(Base));
 export { Popup };