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

package/esm2015/lib/PopupView_combined.js

@@ -23,11 +23,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";
@@ -39,265 +40,275 @@ export let PopupView = /*@__PURE__*/ (() => {
     class PopupView extends Base {
         constructor() {
             super(...arguments);
-            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;
-        }
-        get ac() {
-            return this.g.a1;
+            this.p = false;
         }
-        get z() {
-            return this.ac / 2;
+        get af() {
+            return this.g.a3;
         }
-        get y() {
-            return this.ac * 1.414;
+        get ac() {
+            return this.af / 2;
         }
-        get x() {
-            return this.y / 2;
+        get ab() {
+            return this.af * 1.414;
         }
         get aa() {
-            return (this.bl.width / 2 - this.z);
+            return this.ab / 2;
         }
-        get ab() {
-            return (this.bl.height / 2 - this.z);
+        get ad() {
+            return (this.bs.width / 2 - this.ac);
+        }
+        get ae() {
+            return (this.bs.height / 2 - this.ac);
         }
         get g() {
             return this.f;
         }
-        get ae() {
-            return this.ad;
+        get ah() {
+            return this.ag;
         }
-        a3() {
-            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");
+        a6() {
+            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);
-        }
-        bh() {
+            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);
+        }
+        bn() {
             let a = this.g;
-            let b = ElevationHelper.e(a.a4, a.cm, a.cl, a.ck);
-            this.ak.setStyleProperty("box-shadow", b);
+            let 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);
+            }
         }
-        bf() {
-            if (this.g.cn != null) {
-                this.ak.setStyleProperty("background-color", this.g.cn._fill);
-                this.ah.setStyleProperty("background-color", this.g.cn._fill);
+        bl() {
+            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);
             }
         }
-        bg() {
-            if (!isNaN_(this.g.ay)) {
-                NativeUI.o(this.ak, new CornerRadius(0, this.g.ay));
+        bm() {
+            if (!isNaN_(this.g.a0)) {
+                NativeUI.o(this.an, new CornerRadius(0, this.g.a0));
             }
         }
-        bi() {
-            if (null == this.al) {
+        bo() {
+            if (null == this.ao) {
                 return;
             }
-            this.bh();
-            this.bf();
-            this.bg();
+            this.be(this.g.aq);
+            this.bn();
+            this.bl();
+            this.bm();
+        }
+        a7(a) {
+            this.g.cb();
+        }
+        a8(a) {
+            this.g.cc();
         }
         a4(a) {
-            this.g.b5();
+            this.g.b9();
         }
         a5(a) {
-            this.g.b6();
-        }
-        a1(a) {
-            this.g.b3();
-        }
-        a2(a) {
-            this.g.b4(a.originalEvent.relatedTarget);
-        }
-        aq() {
-            if (null != this.ag) {
-                this.bi();
-                this.ak.setStyleProperty("height", "0px");
-                let a = this.ag.getNativeElement();
-                if (false == this.l) {
-                    this.ai.remove();
-                    if (this.g.as) {
-                        let b = this.g.s();
+            this.g.ca(a.originalEvent.relatedTarget);
+        }
+        o() {
+            return (HTMLElement.prototype.hasOwnProperty("popover"));
+        }
+        l() {
+            return this.o() && this.g.ax;
+        }
+        at() {
+            if (null != this.aj) {
+                this.bo();
+                this.an.setStyleProperty("height", "0px");
+                let a = this.aj.getNativeElement();
+                if (false == this.m) {
+                    this.al.remove();
+                    if (this.g.at) {
+                        let b = this.g.t();
                         if (b == 1) {
-                            this.ag.setStyleProperty("display", "block");
-                            let c = this.ag.getNativeElement();
-                            let d = this.ai.getNativeElement();
-                            let e = this.ak.getNativeElement();
+                            this.aj.setStyleProperty("display", "block");
+                            let c = this.aj.getNativeElement();
+                            let d = this.al.getNativeElement();
+                            let 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");
-                            let f = this.ag.getNativeElement();
-                            let g = this.ai.getNativeElement();
-                            let h = this.ak.getNativeElement();
+                            this.aj.setStyleProperty("display", "flex");
+                            let f = this.aj.getNativeElement();
+                            let g = this.al.getNativeElement();
+                            let 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();
                     }
                 }
             }
         }
-        ar(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();
+        au(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
             };
         }
-        as(a) {
-            this.u = a;
+        av(a) {
+            this.x = a;
             if (this.g.an) {
-                this.bc(false);
-            }
-            if (this.g.as) {
-                let b = 0;
-                let 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);
         }
-        a9() {
-            if (null != this.ag && this.l) {
-                let a = this.ag.getNativeElement();
-                document.body.removeChild(a);
-                this.l = false;
+        bc() {
+            if (null != this.aj && this.m) {
+                let a = this.aj.getNativeElement();
+                if (this.g.bd != null) {
+                    this.g.bd.removeChild(a);
+                }
+                else {
+                    document.body.removeChild(a);
+                }
+                this.m = false;
             }
         }
-        at(a) {
-            this.af = a;
-            this.aj.append(this.af);
-            this.am = new ResizeObserver(runOn(this, this.a0));
+        aw(a) {
+            this.ai = a;
+            this.am.append(this.ai);
+            this.ap = new ResizeObserver(runOn(this, this.a3));
         }
-        a0(a) {
-            if (this.l) {
-                if (this.g.ao() && this.g.o == 0) {
+        a3(a) {
+            if (this.m) {
+                if (this.g.ao() && this.g.p == 0) {
                     return;
                 }
-                this.g.b0();
+                this.g.b6();
             }
         }
         j(a) {
-            let b = this.ag.getNativeElement();
+            let b = this.aj.getNativeElement();
             return b.contains(a);
         }
-        a8(a) {
-            this.af = null;
-            this.am.disconnect();
-            this.am = null;
+        bb(a) {
+            this.ai = null;
+            this.ap.disconnect();
+            this.ap = null;
             a.remove();
         }
         d(a) {
-            return new AnimationKeyFrameEffect(0, this.aj, 0, null, a);
+            return new AnimationKeyFrameEffect(0, this.am, 0, null, a);
         }
         e(a) {
-            return new AnimationKeyFrameEffect(0, this.ak, 0, null, a);
+            return new AnimationKeyFrameEffect(0, this.an, 0, null, a);
         }
-        av() {
+        ay() {
             if (KeyFrameAnimationFactory.h == null) {
-                KeyFrameAnimationFactory.h = this.ae;
+                KeyFrameAnimationFactory.h = this.ah;
             }
         }
         c(a) {
-            return new AnimationKeyFrameEffect(0, this.ag, 0, null, a);
+            return new AnimationKeyFrameEffect(0, this.aj, 0, null, a);
         }
         b(a) {
-            return new AnimationKeyFrameEffect(0, this.ak, 0, null, a);
+            return new AnimationKeyFrameEffect(0, this.an, 0, null, a);
         }
         a(a) {
-            return new AnimationKeyFrameEffect(0, this.ag, 0, null, a);
+            return new AnimationKeyFrameEffect(0, this.aj, 0, null, a);
         }
         i() {
             return 12;
@@ -305,20 +316,23 @@ export let PopupView = /*@__PURE__*/ (() => {
         h() {
             return 11;
         }
-        get bl() {
+        n() {
+            return this.g.bd != null && !this.g.aq && !this.l();
+        }
+        get bs() {
             if (this.k) {
-                this.ay();
+                this.a1();
             }
-            return this.bk;
+            return this.br;
         }
-        v(a, b, c) {
+        y(a, b, c) {
             let 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:
@@ -326,78 +340,78 @@ export let PopupView = /*@__PURE__*/ (() => {
                 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;
         }
-        w(a, b, c) {
+        z(a, b, c) {
             let 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;
         }
-        static ap(a) {
+        static as(a) {
             return stringFormat("{0}px", a);
         }
-        static ao(a) {
+        static ar(a) {
             return stringFormat("{0}px", a);
         }
-        bd() {
-            if (this.g.q == 1 || this.g.q == 2) {
-                switch (this.g.i) {
+        bj() {
+            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)");
         }
-        au(a, b, c, d) {
-            this.p = a;
-            this.q = b;
-            if (this.g.q == 1 || this.g.q == 2) {
+        ax(a, b, c, d) {
+            this.s = a;
+            this.t = b;
+            if (this.g.r == 1 || this.g.r == 2) {
                 let e = (window.innerWidth);
                 let f = a;
                 let g = f + c;
@@ -408,7 +422,7 @@ export let PopupView = /*@__PURE__*/ (() => {
                     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) {
                 let h = (window.innerHeight);
                 let i = b;
                 let j = i + d;
@@ -424,161 +438,216 @@ export let PopupView = /*@__PURE__*/ (() => {
                 p1: b
             };
         }
-        bj(a, b, c) {
-            let d = this.w(a, b, c);
-            let e = this.v(a, b, c);
-            let f = this.au(e, d, this.bl.width, this.bl.height);
-            e = f.p0;
-            d = f.p1;
-            this.ba(e, d);
+        bq(a, b, c) {
+            let d = this.z(a, b, c);
+            let e = this.y(a, b, c);
+            if (this.g.bd == null) {
+                let 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) {
                 let g = 10;
                 while (g > 0) {
-                    let h = this.w(a, b, c);
-                    let i = this.v(a, b, c);
-                    let j = this.au(i, h, this.bl.width, this.bl.height);
-                    i = j.p0;
-                    h = j.p1;
+                    let h = this.z(a, b, c);
+                    let i = this.y(a, b, c);
+                    if (this.g.bd == null) {
+                        let 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);
         }
-        ay() {
-            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());
+        bp(a, b, c) {
+            let d = new Rect(4);
+            let target_ = a;
+            if ((target_.getBoundingClientRect)) {
+                let bRect_ = target_.getBoundingClientRect();
+                d.left = (bRect_.left);
+                d.top = (bRect_.top);
+                d.width = (bRect_.width);
+                d.height = (bRect_.height);
+            }
+            let e = this.bq(d, b, c);
+            return e;
+        }
+        a1() {
+            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;
             }
         }
-        ba(a, b) {
+        bd(a, b) {
             let c = stringFormat("{0}px", a);
             let 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;
         }
-        a6(a) {
+        a9(a) {
             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;
             let b = a.rootWrapper;
-            this.aw(b);
-            this.ad.getPortal(this.aj, "ChildContent", (c) => {
+            this.az(b);
+            this.ag.getPortal(this.am, "ChildContent", (c) => {
                 let comp_ = c.componentRef;
-                this.an = comp_;
+                this.aq = comp_;
             }, true);
         }
-        be() {
-            let a = new Size(1, this.bl.width, this.bl.height);
-            if (!this.l || !this.g.av) {
+        bk() {
+            let a = new Size(1, this.bs.width, this.bs.height);
+            if (!this.m || !this.g.aw) {
                 a.height = 0;
             }
             let b = a.width;
             let c = a.height;
             let d = stringFormat("{0}px", b);
             let e = stringFormat("{0}px", c);
-            if (this.g.as) {
-                let f = 0;
-                let 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;
-            let h = stringFormat("{0}px", b);
-            let 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;
+            let f = stringFormat("{0}px", b);
+            let 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);
         }
-        aw(a) {
-            this.al = a;
-            this.a3();
+        bi(a, b) {
+            if (this.g.at) {
+                let c = 0;
+                let 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)");
+            }
+        }
+        az(a) {
+            this.ao = a;
+            this.a6();
         }
-        ax(a) {
+        a0(a) {
             this.f = a;
         }
-        az() {
+        a2() {
         }
-        a7() {
-            this.aq();
-            if (this.g.av) {
+        ba() {
+            this.at();
+            if (this.g.aw) {
                 return;
             }
-            this.be();
+            this.bk();
         }
-        bc(a) {
-            if (this.ag != null) {
-                this.ag.setStyleProperty("pointer-events", a ? "auto" : "none");
+        bg(a) {
+            if (this.aj != null) {
+                this.aj.setStyleProperty("pointer-events", a ? "auto" : "none");
             }
         }
-        bb(a) {
-            if (this.ag != null) {
-                this.ag.setAttribute("tabindex", a ? "-1" : "");
+        bf(a) {
+            if (this.aj != null) {
+                this.aj.setAttribute("tabindex", a ? "-1" : "");
+            }
+        }
+        be(a) {
+            if (this.aj != null) {
+                this.aj.setStyleProperty("position", a ? "fixed" : this.g.bd != null ? "relative" : "absolute");
+            }
+        }
+        bh(a) {
+            if (this.aj != null && this.o()) {
+                let b = this.aj.getNativeElement();
+                if (a) {
+                    b.popover = "manual";
+                }
+                else {
+                    b.popover = undefined;
+                }
             }
         }
     }
@@ -592,13 +661,12 @@ export let Popup = /*@__PURE__*/ (() => {
     class Popup extends Base {
         constructor() {
             super();
-            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;
@@ -606,69 +674,77 @@ export let Popup = /*@__PURE__*/ (() => {
             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;
-            let a = this.u();
-            this.v = a;
-            a.ax(this);
+            this.k = null;
+            let a = this.v();
+            this.w = a;
+            a.a0(this);
         }
-        get cv() {
-            return this.cu;
+        get c4() {
+            return this.c3;
         }
-        get ct() {
-            return this.cs;
+        get c2() {
+            return this.c1;
         }
-        get q() {
-            return this.p;
+        get r() {
+            return this.q;
         }
-        get i() {
-            return this.h;
+        set r(a) {
+            this.q = a;
         }
-        get a0() {
-            return this.az;
+        get j() {
+            return this.i;
+        }
+        get a2() {
+            return this.a1;
         }
-        b7(a, b, c) {
+        get bd() {
+            return this.bb;
+        }
+        cd(a, b, c) {
             if (this.propertyChanged != null) {
                 this.propertyChanged(this, new PropertyChangedEventArgs(a));
             }
-            this.b9(a, b, c);
+            this.cg(a, b, c);
         }
-        b5() {
+        cb() {
             if (this.popupMouseEnter != null) {
                 this.popupMouseEnter(this, new MouseEventArgs());
             }
         }
-        b6() {
+        cc() {
             if (this.popupMouseLeave != null) {
                 this.popupMouseLeave(this, new MouseEventArgs());
             }
         }
-        b3() {
+        b9() {
             if (this.popupGotFocus != null) {
                 this.popupGotFocus(this, new FocusEventArgs());
             }
         }
-        b4(a) {
+        ca(a) {
             if (this.popupLostFocus != null) {
                 this.popupLostFocus(this, ((() => {
                     let $ret = new FocusEventArgs();
@@ -677,24 +753,24 @@ export let Popup = /*@__PURE__*/ (() => {
                 })()));
             }
         }
-        get aq() {
-            return this.ag;
+        get ar() {
+            return this.af;
         }
-        set aq(a) {
-            let b = this.ag;
-            this.ag = a;
-            if (b != this.ag) {
-                this.b7("IsFocusable", b, this.ag);
+        set ar(a) {
+            let b = this.af;
+            this.af = a;
+            if (b != this.af) {
+                this.cd("IsFocusable", b, this.af);
             }
         }
-        get a6() {
-            return this.a5;
+        get a8() {
+            return this.a7;
         }
-        set a6(a) {
-            let b = this.a5;
-            this.a5 = a;
-            if (b != this.a5) {
-                this.b7("AnimationDuration", b, a);
+        set a8(a) {
+            let b = this.a7;
+            this.a7 = a;
+            if (b != this.a7) {
+                this.cd("AnimationDuration", b, a);
             }
         }
         get al() {
@@ -704,176 +780,197 @@ export let Popup = /*@__PURE__*/ (() => {
             let b = this.ak;
             this.ak = a;
             if (b != this.ak) {
-                this.b7("AnimationEnabled", b, a);
+                this.cd("AnimationEnabled", b, a);
             }
         }
-        get o() {
-            return this.n;
+        get p() {
+            return this.o;
         }
-        set o(a) {
-            let b = this.n;
-            this.n = a;
-            if (b != this.n) {
-                this.b7("AnimationType", enumGetBox(PopupAnimationType_$type, b), enumGetBox(PopupAnimationType_$type, this.n));
+        set p(a) {
+            let b = this.o;
+            this.o = a;
+            if (b != this.o) {
+                this.cd("AnimationType", enumGetBox(PopupAnimationType_$type, b), enumGetBox(PopupAnimationType_$type, this.o));
             }
         }
-        get a8() {
-            return this.a3;
+        get ba() {
+            return this.a5;
         }
-        set a8(a) {
-            let b = this.a3;
-            this.a3 = a;
-            if (b != this.a3) {
-                this.b7("Elevation", b, a);
+        set ba(a) {
+            let b = this.a5;
+            this.a5 = a;
+            if (b != this.a5) {
+                this.cd("Elevation", b, a);
             }
         }
-        get a4() {
-            return this.a2;
+        get a6() {
+            return this.a4;
         }
-        set a4(a) {
-            let b = this.a2;
-            this.a2 = a;
-            if (b != this.a2) {
-                this.b7("ActualElevation", b, a);
+        set a6(a) {
+            let b = this.a4;
+            this.a4 = a;
+            if (b != this.a4) {
+                this.cd("ActualElevation", b, a);
             }
         }
-        get av() {
-            return this.au;
+        get aw() {
+            return this.av;
         }
-        get cm() {
-            return this.ch;
+        get cv() {
+            return this.cq;
         }
-        set cm(a) {
-            let b = this.ch;
-            this.ch = a;
-            if (b != this.ch) {
-                this.b7("ActualUmbraShadowColor", b, a);
+        set cv(a) {
+            let b = this.cq;
+            this.cq = a;
+            if (b != this.cq) {
+                this.cd("ActualUmbraShadowColor", b, a);
             }
         }
-        get cl() {
-            return this.cg;
+        get cu() {
+            return this.cp;
         }
-        set cl(a) {
-            let b = this.cg;
-            this.cg = a;
-            if (b != this.cg) {
-                this.b7("ActualPenumbraShadowColor", b, a);
+        set cu(a) {
+            let b = this.cp;
+            this.cp = a;
+            if (b != this.cp) {
+                this.cd("ActualPenumbraShadowColor", b, a);
             }
         }
-        get ck() {
-            return this.cf;
+        get ct() {
+            return this.co;
         }
-        set ck(a) {
-            let b = this.cf;
-            this.cf = a;
-            if (b != this.cf) {
-                this.b7("ActualAmbientShadowColor", b, a);
+        set ct(a) {
+            let b = this.co;
+            this.co = a;
+            if (b != this.co) {
+                this.cd("ActualAmbientShadowColor", b, a);
             }
         }
-        get cn() {
-            return this.ci;
+        get cw() {
+            return this.cr;
         }
-        set cn(a) {
-            let b = this.ci;
-            this.ci = a;
-            if (b != this.ci) {
-                this.b7("Background", b, this.ci);
+        set cw(a) {
+            let b = this.cr;
+            this.cr = a;
+            if (b != this.cr) {
+                this.cd("Background", b, this.cr);
             }
         }
-        get ay() {
-            return this.aw;
+        get a0() {
+            return this.ay;
         }
-        set ay(a) {
-            let b = this.aw;
-            this.aw = a;
-            if (b != this.aw) {
-                this.b7("CornerRadius", b, this.aw);
+        set a0(a) {
+            let b = this.ay;
+            this.ay = a;
+            if (b != this.ay) {
+                this.cd("CornerRadius", b, this.ay);
             }
         }
-        get ar() {
-            return this.ah;
+        get as() {
+            return this.ag;
         }
-        set ar(a) {
-            let b = this.ah;
-            this.ah = a;
-            if (b != this.ah) {
-                this.b7("IsHitTestVisible", b, this.ah);
+        set as(a) {
+            let b = this.ag;
+            this.ag = a;
+            if (b != this.ag) {
+                this.cd("IsHitTestVisible", b, this.ag);
             }
         }
         get an() {
-            return this.ae;
+            return this.ac;
         }
         set an(a) {
-            let b = this.ae;
-            this.ae = a;
-            if (b != this.ae) {
-                this.b7("DisableHitTestDuringAnimation", b, this.ae);
+            let b = this.ac;
+            this.ac = a;
+            if (b != this.ac) {
+                this.cd("DisableHitTestDuringAnimation", b, this.ac);
             }
         }
-        get as() {
-            return this.ai;
+        get at() {
+            return this.ah;
         }
-        set as(a) {
-            let b = this.ai;
-            this.ai = a;
-            if (b != this.ai) {
-                this.b7("IsPointerEnabled", b, this.ai);
+        set at(a) {
+            let b = this.ah;
+            this.ah = a;
+            if (b != this.ah) {
+                this.cd("IsPointerEnabled", b, this.ah);
             }
         }
-        get t() {
-            return this.r;
+        get u() {
+            return this.s;
         }
-        set t(a) {
-            let b = this.r;
-            this.r = a;
-            if (b != this.r) {
-                this.b7("PointerPosition", enumGetBox(PopupPointerPosition_$type, b), enumGetBox(PopupPointerPosition_$type, this.r));
+        set u(a) {
+            let b = this.s;
+            this.s = a;
+            if (b != this.s) {
+                this.cd("PointerPosition", enumGetBox(PopupPointerPosition_$type, b), enumGetBox(PopupPointerPosition_$type, this.s));
             }
         }
-        get cr() {
-            return this.cj;
+        get c0() {
+            return this.cs;
         }
-        set cr(a) {
-            let b = this.cj;
-            this.cj = a;
-            if (b != this.cj) {
-                this.b7("PointerBackground", b, this.cj);
+        set c0(a) {
+            let b = this.cs;
+            this.cs = a;
+            if (b != this.cs) {
+                this.cd("PointerBackground", b, this.cs);
             }
         }
-        get a1() {
-            return this.ax;
+        get a3() {
+            return this.az;
         }
-        set a1(a) {
-            let b = this.ax;
-            this.ax = a;
-            if (b != this.ax) {
-                this.b7("PointerSize", b, this.ax);
+        set a3(a) {
+            let b = this.az;
+            this.az = a;
+            if (b != this.az) {
+                this.cd("PointerSize", b, this.az);
             }
         }
-        get at() {
-            return this.aj;
+        get au() {
+            return this.ai;
         }
-        set at(a) {
-            this.aj = a;
+        set au(a) {
+            this.ai = a;
         }
         get ap() {
-            return this.af;
+            return this.ad;
         }
         set ap(a) {
-            this.af = a;
+            this.ad = a;
+        }
+        get aq() {
+            return this.ae;
+        }
+        set aq(a) {
+            let b = this.ae;
+            this.ae = a;
+            if (b != this.ae) {
+                this.cd("IsFixed", b, this.ae);
+            }
         }
-        u() {
+        get ax() {
+            return this.aj;
+        }
+        set ax(a) {
+            let b = this.aj;
+            this.aj = a;
+            if (b != this.aj) {
+                this.cd("UseTopLayer", b, this.aj);
+            }
+        }
+        v() {
             return new PopupView();
         }
-        b9(a, b, c) {
+        cg(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":
@@ -881,35 +978,40 @@ export let Popup = /*@__PURE__*/ (() => {
                 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;
             }
         }
-        bw() {
+        b2() {
             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 (let a = 0; a < this.k.a.count; a++) {
+                    if (this.k.a._inner[a].playState == 1) {
+                        this.k.a._inner[a].cancel();
+                    }
                 }
             }
         }
-        y(a) {
-            let b = this.f(a);
-            let c = a ? this.b() : this.a();
-            let d = this.v.d(c);
+        z(a) {
+            let b = this.g(a);
+            let c = a ? this.c() : this.b();
+            let d = this.w.d(c);
             let e = new List$1(AnimationKeyFrameProperty.$, 0);
             let f = new List$1(AnimationKeyFrameProperty.$, 0);
             let g = new TranslateTransform();
@@ -924,52 +1026,60 @@ export let Popup = /*@__PURE__*/ (() => {
             d.m(...f.toArray());
             return KeyFrameAnimationFactory.f.c(d);
         }
-        z(a) {
-            let b = this.g(a);
-            this.v.as(b.h);
-            let c = a ? this.b() : this.a();
-            let d = this.v.e(c);
-            let e = new List$1(AnimationKeyFrameProperty.$, 0);
+        a(a) {
+            let b = new List$1(IKeyFrameAnimation_$type, 0);
+            let c = this.h(a);
+            this.w.av(c.h);
+            let d = a ? this.c() : this.b();
+            let e = this.w.e(d);
             let f = new List$1(AnimationKeyFrameProperty.$, 0);
-            let g = new AnimationKeyFrameProperty(10, b.g);
-            let h = new AnimationKeyFrameProperty(10, b.h);
-            e.add(g);
+            let g = new List$1(AnimationKeyFrameProperty.$, 0);
+            let h = new AnimationKeyFrameProperty(10, c.g);
+            let i = new AnimationKeyFrameProperty(10, c.h);
             f.add(h);
-            if (this.p == 2) {
-                let i = b.c;
-                let j = b.f;
-                let k = new AnimationKeyFrameProperty(12, i);
-                let l = new AnimationKeyFrameProperty(12, j);
-                e.add(k);
-                f.add(l);
-            }
-            d.m(...e.toArray());
-            d.m(...f.toArray());
-            return KeyFrameAnimationFactory.f.c(d);
+            g.add(i);
+            e.m(...f.toArray());
+            e.m(...g.toArray());
+            b.add(KeyFrameAnimationFactory.f.c(e));
+            if (this.q == 2) {
+                let j = c.c;
+                let k = c.f;
+                let l = this.w.c(d);
+                let m = new List$1(AnimationKeyFrameProperty.$, 0);
+                let n = new List$1(AnimationKeyFrameProperty.$, 0);
+                let o = new AnimationKeyFrameProperty(12, j);
+                let p = new AnimationKeyFrameProperty(12, k);
+                m.add(o);
+                n.add(p);
+                l.m(...m.toArray());
+                l.m(...n.toArray());
+                b.add(KeyFrameAnimationFactory.f.c(l));
+            }
+            return b.toArray();
         }
-        a() {
+        b() {
             let a = new AnimationKeyFrameEffectTiming();
-            a.g = this.a6;
+            a.g = this.a8;
             a.b = 3;
             return a;
         }
-        b() {
+        c() {
             let a = new AnimationKeyFrameEffectTiming();
-            a.g = this.a6;
+            a.g = this.a8;
             a.b = 3;
             return a;
         }
-        bz() {
-            this.v.av();
+        b5() {
+            this.w.ay();
         }
-        f(a) {
-            let b = truncate(this.v.bl.height);
+        g(a) {
+            let b = truncate(this.w.bs.height);
             if (b <= 0) {
                 b = 500;
             }
             let c = a ? -b : 0;
             let d = a ? 0 : -b;
-            if (this.p == 2) {
+            if (this.q == 2) {
                 c = 0;
                 d = 0;
             }
@@ -981,35 +1091,35 @@ export let Popup = /*@__PURE__*/ (() => {
             })());
             return e;
         }
-        g(a) {
-            let b = truncate(this.v.bl.height);
+        h(a) {
+            let b = truncate(this.w.bs.height);
             if (b <= 0) {
                 b = 500;
             }
             let c = a ? 0 : b;
             let d = a ? b : 0;
-            let e = this.cu.top;
-            let f = this.cu.top;
-            let g = this.cu.left;
+            let e = this.c3.top;
+            let f = this.c3.top;
+            let g = this.c3.left;
             let 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;
             }
@@ -1026,59 +1136,79 @@ export let Popup = /*@__PURE__*/ (() => {
             return i;
         }
         ao() {
-            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 (let a = 0; a < this.k.a.count; a++) {
+                if (this.k.a._inner[a].playState == 1) {
+                    return true;
+                }
             }
             return false;
         }
-        b0() {
-            this.v.ay();
+        b6() {
+            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);
+                }
+            }
+        }
+        cf(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);
+        }
+        ce(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);
+        }
+        ck(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);
         }
-        b8(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);
-        }
-        cc(a, b, c) {
-            if (this.au) {
-                this.au = false;
-                this.b7("IsShown", true, this.au);
+        cj(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);
         }
-        cd(a) {
-            this.bw();
-            let b = this.au;
+        cl(a) {
+            this.b2();
+            let b = this.av;
+            this.av = a;
             this.au = a;
-            this.at = a;
             this.ap = !a;
-            let c = this.g(a);
-            let d = this.f(a);
+            let c = this.h(a);
+            let d = this.g(a);
             if (false == this.al) {
-                let e = this.v.ar(c, d);
+                let 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(() => {
-                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(() => {
+                this.k.c();
+                this.cd("IsShown", b, this.av);
+                if (this.av) {
                     if (this.onPopup != null) {
                         this.onPopup(this, new OnPopupEventArgs());
                     }
@@ -1088,65 +1218,68 @@ export let Popup = /*@__PURE__*/ (() => {
                         this.onClosed(this, new OnClosedEventArgs());
                     }
                 }
-                this.at = false;
+                this.au = false;
                 this.ap = false;
-                let f = this.v.ar(c, d);
+                let f = this.w.au(c, d);
                 c = f.p0;
                 d = f.p1;
             });
         }
-        k(a, b) {
+        l(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);
             }
         }
-        m(a) {
-            let b = this.y(a);
-            let c = this.z(a);
+        n(a) {
+            let b = this.z(a);
+            let c = this.a(a);
             let d = new PopupAnimation();
             d.a.add(b);
-            d.a.add(c);
+            for (let f = 0; f < c.length; f++) {
+                let e = c[f];
+                d.a.add(e);
+            }
             return d;
         }
-        l(a) {
-            let b = this.g(a);
-            this.v.as(a ? b.h : b.g);
-            let c = this.b();
-            let d = this.v.c(c);
+        m(a) {
+            let b = this.h(a);
+            this.w.av(a ? b.h : b.g);
+            let c = this.c();
+            let d = this.w.c(c);
             let e = DeviceUtils.g(30);
-            let f = this.v.i();
+            let f = this.w.i();
             let g = b.f - e;
             let 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));
-            let i = this.v.a(c);
+            let i = this.w.a(c);
             i.m(new AnimationKeyFrameProperty(1, a ? 0 : 1));
             i.m(new AnimationKeyFrameProperty(1, a ? 1 : 0));
-            let j = this.v.b(c);
+            let 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)));
             let k = new PopupAnimation();
@@ -1156,55 +1289,58 @@ export let Popup = /*@__PURE__*/ (() => {
             return k;
         }
         contains(a) {
-            return this.v.j(a);
+            return this.w.j(a);
         }
         appendPopupContent(a) {
-            this.v.at(a);
+            this.w.aw(a);
         }
         removePopupContent(a) {
-            this.v.a8(a);
+            this.w.bb(a);
         }
-        bx() {
-            if (!this.au) {
+        b3() {
+            if (!this.av) {
                 return;
             }
-            this.cd(false);
+            this.cl(false);
         }
         destroy() {
             this.provideRenderer(null);
         }
         showRelativeToExclusionRect(a, b, c) {
-            this.cc(a, b, c);
+            this.ck(a, b, c);
         }
-        b1(a) {
-            this.cs = a;
-            this.cu = this.v.bj(a, this.p, this.h);
+        cn(a, b, c) {
+            this.cj(a, b, c);
+        }
+        b7(a) {
+            this.c1 = a;
+            this.c3 = this.w.bq(a, this.q, this.i);
         }
         notifySizeChanged() {
         }
         provideRenderer(a) {
-            this.v.a6(a);
+            this.w.a9(a);
         }
-        a9() {
-            return this.c();
+        bc() {
+            return this.d();
         }
-        bl() {
-            let a = this.c();
+        bp() {
+            let a = this.d();
             return a.f();
         }
-        c() {
+        d() {
             let 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;
         }
-        s() {
-            let a = this.t;
+        t() {
+            let a = this.u;
             if (a == 0) {
-                switch (this.q) {
+                switch (this.r) {
                     case 4:
                         a = 3;
                         break;
@@ -1223,9 +1359,9 @@ export let Popup = /*@__PURE__*/ (() => {
         }
     }
     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;
 })();