igniteui-angular-core 16.0.0 → 16.1.0-beta.0

package/esm2015/lib/PopupView_combined.js

@@ -4,26 +4,34 @@ https://www.infragistics.com/legal/license/igultimate-la
 https://www.infragistics.com/legal/license/igultimate-eula
 GOVERNS THE LICENSING, INSTALLATION AND USE OF INFRAGISTICS SOFTWARE. BY DOWNLOADING AND/OR INSTALLING AND USING INFRAGISTICS SOFTWARE:  you are indicating that you have read and understand this Agreement, and agree to be legally bound by it on behalf of the yourself and your company.
 */
-import { Base, markType, INotifyPropertyChanged_$type, PropertyChangedEventArgs } from "./type";
+import { Base, runOn, markType, INotifyPropertyChanged_$type, PropertyChangedEventArgs, enumGetBox } from "./type";
 import { Size } from "./Size";
 import { ElevationHelper } from "./ElevationHelper";
+import { CornerRadius } from "./CornerRadius";
+import { NativeUI } from "./NativeUI";
 import { Popup_OuterAnimationInfo } from "./Popup_OuterAnimationInfo";
 import { Popup_InnerAnimationInfo } from "./Popup_InnerAnimationInfo";
 import { AnimationKeyFrameEffect } from "./AnimationKeyFrameEffect";
 import { AnimationKeyFrameEffectTiming } from "./AnimationKeyFrameEffectTiming";
 import { KeyFrameAnimationFactory } from "./KeyFrameAnimationFactory";
 import { Rect } from "./Rect";
-import { stringEmpty } from "./string";
+import { PopupPointerPosition_$type } from "./PopupPointerPosition";
+import { PopupAnimationType_$type } from "./PopupAnimationType";
 import { stringFormat } from "./stringExtended";
+import { isNaN_, truncate } from "./number";
+import { stringEmpty } from "./string";
 import { OnClosedEventArgs } from "./OnClosedEventArgs";
+import { MouseEventArgs } from "./MouseEventArgs";
+import { FocusEventArgs } from "./FocusEventArgs";
 import { List$1 } from "./List$1";
 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";
 import { BrushUtil } from "./BrushUtil";
-import { truncate } from "./number";
 /**
  * @hidden
  */
@@ -31,113 +39,213 @@ export let PopupView = /*@__PURE__*/ (() => {
     class PopupView extends Base {
         constructor() {
             super(...arguments);
-            this.k = null;
-            this.c = null;
-            this.o = null;
-            this.n = null;
-            this.m = null;
-            this.p = null;
-            this.f = false;
-            this.h = 0;
-            this.al = new Size(1, 0, 0);
-            this.e = true;
-            this.g = false;
-        }
-        get d() {
-            return this.c;
-        }
-        get l() {
-            return this.k;
-        }
-        ab() {
-            this.o.setStyleProperty("height", "0%");
-            this.o.setStyleProperty("width", "0%");
-            this.n = this.k.createElement("div");
-            this.n.setStyleProperty("position", "absolute");
-            this.n.setStyleProperty("overflow", "hidden");
-            this.n.setStyleProperty("z-index", "10000");
-            this.n.setAttribute("key", "popupContentAreaOuter");
-            this.m = this.k.createElement("div");
-            this.m.setAttribute("key", "popupContentAreaInner");
-            this.n.append(this.m);
-        }
-        ai() {
-            let a = this.d;
-            let b = ElevationHelper.e(a.w, a.a7, a.a6, a.a5);
-            this.n.setStyleProperty("box-shadow", b);
-        }
-        ah() {
-            if (this.d.a8 != null) {
-                this.n.setStyleProperty("background-color", this.d.a8._fill);
-            }
-        }
-        aj() {
-            if (null == this.o) {
+            this.t = null;
+            this.f = null;
+            this.ab = null;
+            this.aa = null;
+            this.z = null;
+            this.w = null;
+            this.y = null;
+            this.x = null;
+            this.ad = null;
+            this.k = false;
+            this.m = 0;
+            this.v = null;
+            this.ac = null;
+            this.a8 = new Size(1, 0, 0);
+            this.j = true;
+            this.l = false;
+        }
+        get g() {
+            return this.f;
+        }
+        get u() {
+            return this.t;
+        }
+        as() {
+            this.ab.setStyleProperty("height", "0%");
+            this.ab.setStyleProperty("width", "0%");
+            this.w = this.t.createElement("div");
+            this.w.setStyleProperty("position", "absolute");
+            this.w.setStyleProperty("z-index", "10000");
+            this.y = this.t.createElement("div");
+            this.y.setStyleProperty("height", 20 * 1.414 / 2 + "px");
+            this.x = this.t.createElement("div");
+            this.x.setStyleProperty("position", "relative");
+            this.x.setStyleProperty("width", 20 + "px");
+            this.x.setStyleProperty("height", 20 + "px");
+            this.x.setStyleProperty("z-index", "1");
+            this.x.setStyleProperty("clip-path", stringFormat("path(\"M0,0l{0},{0}l0,-{0}l-{0},0Z\")", 20));
+            this.y.append(this.x);
+            this.aa = this.t.createElement("div");
+            this.aa.setStyleProperty("position", "relative");
+            this.aa.setStyleProperty("overflow", "hidden");
+            this.aa.setAttribute("key", "popupContentAreaOuter");
+            this.a0(this.g.ak);
+            this.w.listen("mouseenter", runOn(this, this.at));
+            this.w.listen("mouseleave", runOn(this, this.au));
+            this.w.listen("focusin", runOn(this, this.aq));
+            this.w.listen("focusout", runOn(this, this.ar));
+            this.z = this.t.createElement("div");
+            this.z.setAttribute("key", "popupContentAreaInner");
+            this.aa.append(this.z);
+            this.w.append(this.aa);
+        }
+        a5() {
+            let a = this.g;
+            let b = ElevationHelper.e(a.at, a.b8, a.b7, a.b6);
+            this.aa.setStyleProperty("box-shadow", b);
+        }
+        a3() {
+            if (this.g.b9 != null) {
+                this.aa.setStyleProperty("background-color", this.g.b9._fill);
+                this.x.setStyleProperty("background-color", this.g.b9._fill);
+            }
+            if (this.g.cd != null) {
+                this.x.setStyleProperty("background-color", this.g.cd._fill);
+            }
+        }
+        a4() {
+            if (!isNaN_(this.g.aq)) {
+                NativeUI.n(this.aa, new CornerRadius(0, this.g.aq));
+            }
+        }
+        a6() {
+            if (null == this.ab) {
                 return;
             }
-            this.ai();
-            this.ah();
+            this.a5();
+            this.a3();
+            this.a4();
+        }
+        at(a) {
+            this.g.br();
+        }
+        au(a) {
+            this.g.bs();
         }
-        s() {
-            if (null != this.n) {
-                this.aj();
-                this.n.setStyleProperty("height", "0px");
-                let a = this.n.getNativeElement();
-                if (false == this.f) {
+        aq(a) {
+            this.g.bp();
+        }
+        ar(a) {
+            this.g.bq(a.originalEvent.relatedTarget);
+        }
+        ag() {
+            if (null != this.w) {
+                this.a6();
+                this.aa.setStyleProperty("height", "0px");
+                let a = this.w.getNativeElement();
+                if (false == this.k) {
+                    this.y.remove();
+                    if (this.g.am) {
+                        if (this.g.q == 0) {
+                            let b = this.w.getNativeElement();
+                            let c = this.y.getNativeElement();
+                            let d = this.aa.getNativeElement();
+                            b.insertBefore(c, d);
+                        }
+                        else {
+                            this.w.append(this.y);
+                        }
+                    }
                     document.body.appendChild(a);
-                    this.f = true;
-                    if (this.e) {
-                        this.z();
+                    this.k = true;
+                    if (this.j) {
+                        this.an();
                     }
                 }
             }
         }
-        t(a, b) {
-            this.n.setStyleProperty("top", PopupView.q(a.b));
-            this.n.setStyleProperty("height", PopupView.r(a.d));
-            this.m.setStyleProperty("top", PopupView.r(b.b));
-            this.m.setStyleProperty("opacity", "1");
-            this.m.setStyleProperty("transform", stringEmpty());
-            this.h = 0;
-            if (this.g) {
-                this.ag();
+        ah(a, b) {
+            this.w.setStyleProperty("top", PopupView.ae(a.d));
+            this.aa.setStyleProperty("height", PopupView.af(a.f));
+            this.w.setStyleProperty("top", PopupView.af(b.b));
+            this.z.setStyleProperty("opacity", "1");
+            this.z.setStyleProperty("transform", stringEmpty());
+            this.m = 0;
+            if (this.l) {
+                this.a2();
+            }
+            if (this.g.ao) {
+                this.ac.observe(this.v.getNativeElement());
+            }
+            else {
+                this.ac.disconnect();
+            }
+            if (this.g.ai) {
+                this.a1(this.g.al);
             }
             return {
                 p0: a,
                 p1: b
             };
         }
-        u(a) {
-            this.h = a;
+        ai(a) {
+            this.m = a;
+            if (this.g.ai) {
+                this.a1(false);
+            }
         }
-        ae() {
-            if (null != this.n && this.f) {
-                let a = this.n.getNativeElement();
+        ay() {
+            if (null != this.w && this.k) {
+                let a = this.w.getNativeElement();
                 document.body.removeChild(a);
-                this.f = false;
+                this.k = false;
             }
         }
-        v(a) {
-            this.m.append(a);
+        aj(a) {
+            this.v = a;
+            this.z.append(this.v);
+            this.ac = new ResizeObserver(runOn(this, this.ap));
         }
-        a(a) {
-            return new AnimationKeyFrameEffect(0, this.m, 0, null, a);
+        ap(a) {
+            if (this.k) {
+                if (this.g.aj() && this.g.n == 0) {
+                    return;
+                }
+                this.g.bm();
+            }
         }
-        b(a) {
-            return new AnimationKeyFrameEffect(0, this.n, 0, null, a);
+        i(a) {
+            let b = this.w.getNativeElement();
+            return b.contains(a);
+        }
+        ax(a) {
+            this.v = null;
+            this.ac.disconnect();
+            this.ac = null;
+            a.remove();
+        }
+        d(a) {
+            return new AnimationKeyFrameEffect(0, this.z, 0, null, a);
         }
-        w() {
+        e(a) {
+            return new AnimationKeyFrameEffect(0, this.aa, 0, null, a);
+        }
+        ak() {
             if (KeyFrameAnimationFactory.h == null) {
-                KeyFrameAnimationFactory.h = this.l;
+                KeyFrameAnimationFactory.h = this.u;
             }
         }
-        get am() {
-            if (this.e) {
-                this.z();
+        c(a) {
+            return new AnimationKeyFrameEffect(0, this.w, 0, null, a);
+        }
+        b(a) {
+            return new AnimationKeyFrameEffect(0, this.aa, 0, null, a);
+        }
+        a(a) {
+            return new AnimationKeyFrameEffect(0, this.w, 0, null, a);
+        }
+        h() {
+            return 12;
+        }
+        get a9() {
+            if (this.j) {
+                this.an();
             }
-            return this.al;
+            return this.a8;
         }
-        i(a, b) {
+        n(a, b) {
             let c;
             let t1 = b;
             L0: while (true) {
@@ -147,7 +255,10 @@ export let PopupView = /*@__PURE__*/ (() => {
                         c = a.left;
                         break;
                     case 2:
-                        c = a.right - this.am.width;
+                        c = a.right - this.a9.width;
+                        break;
+                    case 3:
+                        c = a.right - (a.width / 2) - (this.a8.width / 2);
                         break;
                     default:
                         t1 = 0;
@@ -157,7 +268,7 @@ export let PopupView = /*@__PURE__*/ (() => {
             }
             return c;
         }
-        j(a, b) {
+        o(a, b) {
             let c;
             let t1 = b;
             L0: while (true) {
@@ -167,7 +278,7 @@ export let PopupView = /*@__PURE__*/ (() => {
                         c = a.bottom;
                         break;
                     case 2:
-                        c = a.top - this.am.height;
+                        c = a.top - this.a9.height;
                         break;
                     default:
                         t1 = 0;
@@ -177,100 +288,124 @@ export let PopupView = /*@__PURE__*/ (() => {
             }
             return c;
         }
-        static r(a) {
+        static af(a) {
             return stringFormat("{0}px", a);
         }
-        static q(a) {
+        static ae(a) {
             return stringFormat("{0}px", a);
         }
-        ak(a, b, c) {
-            let d = this.j(a, b);
-            let e = this.i(a, c);
-            this.af(e, d);
+        a7(a, b, c) {
+            let d = this.o(a, b);
+            let e = this.n(a, c);
+            this.az(e, d);
             if (b == 2 || c == 2) {
                 let f = 10;
                 while (f > 0) {
-                    let g = this.j(a, b);
-                    let h = this.i(a, c);
+                    let g = this.o(a, b);
+                    let h = this.n(a, c);
                     if (g == d && h == e) {
                         f = 0;
                         break;
                     }
                     d = g;
                     e = h;
-                    this.af(e, d);
+                    this.az(e, d);
                     f--;
                 }
             }
-            return new Rect(0, e, d, this.am.width, this.am.height);
+            return new Rect(0, e, d, this.a9.width, this.a9.height);
         }
-        z() {
-            if (this.f) {
-                this.n.setStyleProperty("width", stringEmpty());
-                this.n.setStyleProperty("height", stringEmpty());
-                this.al = new Size(1, this.m.outerWidth(), this.m.outerHeight());
-                this.e = false;
-                this.ag();
+        an() {
+            if (this.k) {
+                this.aa.setStyleProperty("width", stringEmpty());
+                this.aa.setStyleProperty("height", stringEmpty());
+                this.w.setStyleProperty("width", stringEmpty());
+                this.w.setStyleProperty("height", stringEmpty());
+                this.a8 = new Size(1, this.z.outerWidth(), this.z.outerHeight());
+                this.j = false;
+                this.a2();
             }
             else {
-                this.e = true;
+                this.j = true;
             }
         }
-        af(a, b) {
+        az(a, b) {
             let c = stringFormat("{0}px", a);
             let d = stringFormat("{0}px", b);
-            this.n.setStyleProperty("left", c);
-            this.n.setStyleProperty("top", d);
+            this.w.setStyleProperty("left", c);
+            this.w.setStyleProperty("top", d);
         }
-        ac(a) {
+        av(a) {
             if (a == null) {
-                this.k = null;
+                this.t = null;
+                if (this.w != null) {
+                    this.w.unlistenAll();
+                }
                 return;
             }
-            this.k = a;
+            this.t = a;
             let b = a.rootWrapper;
-            this.x(b);
-            this.k.getPortal(this.m, "ChildContent", (c) => {
+            this.al(b);
+            this.t.getPortal(this.z, "ChildContent", (c) => {
                 let comp_ = c.componentRef;
-                this.p = comp_;
+                this.ad = comp_;
             }, true);
         }
-        ag() {
-            let a = new Size(1, this.am.width, this.am.height);
-            if (!this.f || !this.d.t) {
+        a2() {
+            let a = new Size(1, this.a9.width, this.a9.height);
+            if (!this.k || !this.g.ao) {
                 a.height = 0;
             }
             let b = a.width;
             let c = a.height;
-            if (this.c.r()) {
-                if (this.h == c) {
+            if (this.f.aj()) {
+                if (this.m == c) {
                     return;
                 }
-                this.c.an();
-                this.g = true;
+                this.f.bi();
+                this.l = true;
                 return;
             }
-            this.g = false;
+            this.l = false;
             let d = stringFormat("{0}px", b);
             let e = stringFormat("{0}px", c);
-            this.n.setStyleProperty("width", d);
-            this.n.setStyleProperty("height", e);
+            this.aa.setStyleProperty("width", d);
+            this.aa.setStyleProperty("height", e);
+            this.w.setStyleProperty("width", d);
+            this.w.setStyleProperty("height", e);
+            if (this.g.am) {
+                let f = this.g.q == 1 ? 135 : -45;
+                let g = this.g.q == 1 ? -10 : 14.139999999999999 - 10;
+                this.x.setStyleProperty("transform", "translate(" + (b / 2 - 10) + "px, " + g + "px) rotate(" + f + "deg)");
+                e = stringFormat("{0}px", 14.139999999999999 + c);
+                this.w.setStyleProperty("height", e);
+            }
         }
-        x(a) {
-            this.o = a;
-            this.ab();
+        al(a) {
+            this.ab = a;
+            this.as();
         }
-        y(a) {
-            this.c = a;
+        am(a) {
+            this.f = a;
         }
-        aa() {
+        ao() {
         }
-        ad() {
-            this.s();
-            if (this.d.t) {
+        aw() {
+            this.ag();
+            if (this.g.ao) {
                 return;
             }
-            this.ag();
+            this.a2();
+        }
+        a1(a) {
+            if (this.w != null) {
+                this.w.setStyleProperty("pointer-events", a ? "auto" : "none");
+            }
+        }
+        a0(a) {
+            if (this.w != null) {
+                this.w.setAttribute("tabindex", a ? "-1" : "");
+            }
         }
     }
     PopupView.$t = markType(PopupView, 'PopupView');
@@ -283,158 +418,289 @@ export let Popup = /*@__PURE__*/ (() => {
     class Popup extends Base {
         constructor() {
             super();
-            this.i = 0;
+            this.o = 0;
             this.h = 0;
-            this.bc = null;
-            this.n = null;
-            this.o = null;
+            this.cg = null;
+            this.ce = null;
+            this.x = null;
+            this.y = null;
             this.onClosed = null;
             this.onPopup = null;
             this.propertyChanged = null;
-            this.k = null;
-            this.x = 50;
-            this.p = true;
-            this.v = -1;
-            this.u = Popup.z;
-            this.s = false;
-            this.a3 = Popup.bb;
-            this.a2 = Popup.ba;
-            this.a1 = Popup.a9;
-            this.a4 = null;
-            let a = this.j();
-            this.k = a;
-            a.y(this);
-        }
-        au(a, b, c) {
+            this.popupMouseEnter = null;
+            this.popupMouseLeave = null;
+            this.popupGotFocus = null;
+            this.popupLostFocus = null;
+            this.s = null;
+            this.ac = false;
+            this.au = 50;
+            this.af = true;
+            this.m = 0;
+            this.as = -1;
+            this.ar = Popup.aw;
+            this.an = false;
+            this.b3 = Popup.cc;
+            this.b2 = Popup.cb;
+            this.b1 = Popup.ca;
+            this.b4 = null;
+            this.ap = 0;
+            this.ad = true;
+            this.ab = false;
+            this.ae = false;
+            this.p = 0;
+            this.b5 = null;
+            this.i = null;
+            let a = this.r();
+            this.s = a;
+            a.am(this);
+        }
+        get ch() {
+            return this.cg;
+        }
+        get cf() {
+            return this.ce;
+        }
+        bt(a, b, c) {
             if (this.propertyChanged != null) {
                 this.propertyChanged(this, new PropertyChangedEventArgs(a));
             }
-            this.aw(a, b, c);
+            this.bv(a, b, c);
         }
-        get y() {
-            return this.x;
+        br() {
+            if (this.popupMouseEnter != null) {
+                this.popupMouseEnter(this, new MouseEventArgs());
+            }
         }
-        set y(a) {
-            let b = this.x;
-            this.x = a;
-            if (b != this.x) {
-                this.au("AnimationDuration", b, a);
+        bs() {
+            if (this.popupMouseLeave != null) {
+                this.popupMouseLeave(this, new MouseEventArgs());
             }
         }
-        get q() {
-            return this.p;
+        bp() {
+            if (this.popupGotFocus != null) {
+                this.popupGotFocus(this, new FocusEventArgs());
+            }
         }
-        set q(a) {
-            let b = this.p;
-            this.p = a;
-            if (b != this.p) {
-                this.au("AnimationEnabled", b, a);
+        bq(a) {
+            if (this.popupLostFocus != null) {
+                this.popupLostFocus(this, ((() => {
+                    let $ret = new FocusEventArgs();
+                    $ret.a = a;
+                    return $ret;
+                })()));
             }
         }
-        get aa() {
-            return this.v;
+        get ak() {
+            return this.ac;
         }
-        set aa(a) {
-            let b = this.v;
-            this.v = a;
-            if (b != this.v) {
-                this.au("Elevation", b, a);
+        set ak(a) {
+            let b = this.ac;
+            this.ac = a;
+            if (b != this.ac) {
+                this.bt("IsFocusable", b, this.ac);
+            }
+        }
+        get av() {
+            return this.au;
+        }
+        set av(a) {
+            let b = this.au;
+            this.au = a;
+            if (b != this.au) {
+                this.bt("AnimationDuration", b, a);
+            }
+        }
+        get ag() {
+            return this.af;
+        }
+        set ag(a) {
+            let b = this.af;
+            this.af = a;
+            if (b != this.af) {
+                this.bt("AnimationEnabled", b, a);
+            }
+        }
+        get n() {
+            return this.m;
+        }
+        set n(a) {
+            let b = this.m;
+            this.m = a;
+            if (b != this.m) {
+                this.bt("AnimationType", enumGetBox(PopupAnimationType_$type, b), enumGetBox(PopupAnimationType_$type, this.m));
+            }
+        }
+        get ax() {
+            return this.as;
+        }
+        set ax(a) {
+            let b = this.as;
+            this.as = a;
+            if (b != this.as) {
+                this.bt("Elevation", b, a);
+            }
+        }
+        get at() {
+            return this.ar;
+        }
+        set at(a) {
+            let b = this.ar;
+            this.ar = a;
+            if (b != this.ar) {
+                this.bt("ActualElevation", b, a);
+            }
+        }
+        get ao() {
+            return this.an;
+        }
+        get b8() {
+            return this.b3;
+        }
+        set b8(a) {
+            let b = this.b3;
+            this.b3 = a;
+            if (b != this.b3) {
+                this.bt("ActualUmbraShadowColor", b, a);
+            }
+        }
+        get b7() {
+            return this.b2;
+        }
+        set b7(a) {
+            let b = this.b2;
+            this.b2 = a;
+            if (b != this.b2) {
+                this.bt("ActualPenumbraShadowColor", b, a);
+            }
+        }
+        get b6() {
+            return this.b1;
+        }
+        set b6(a) {
+            let b = this.b1;
+            this.b1 = a;
+            if (b != this.b1) {
+                this.bt("ActualAmbientShadowColor", b, a);
+            }
+        }
+        get b9() {
+            return this.b4;
+        }
+        set b9(a) {
+            let b = this.b4;
+            this.b4 = a;
+            if (b != this.b4) {
+                this.bt("Background", b, this.b4);
             }
         }
-        get w() {
-            return this.u;
+        get aq() {
+            return this.ap;
         }
-        set w(a) {
-            let b = this.u;
-            this.u = a;
-            if (b != this.u) {
-                this.au("ActualElevation", b, a);
+        set aq(a) {
+            let b = this.ap;
+            this.ap = a;
+            if (b != this.ap) {
+                this.bt("CornerRadius", b, this.ap);
             }
         }
-        get t() {
-            return this.s;
+        get al() {
+            return this.ad;
         }
-        get a7() {
-            return this.a3;
+        set al(a) {
+            let b = this.ad;
+            this.ad = a;
+            if (b != this.ad) {
+                this.bt("IsHitTestVisible", b, this.ad);
+            }
+        }
+        get ai() {
+            return this.ab;
         }
-        set a7(a) {
-            let b = this.a3;
-            this.a3 = a;
-            if (b != this.a3) {
-                this.au("ActualUmbraShadowColor", b, a);
+        set ai(a) {
+            let b = this.ab;
+            this.ab = a;
+            if (b != this.ab) {
+                this.bt("DisableHitTestDuringAnimation", b, this.ab);
             }
         }
-        get a6() {
-            return this.a2;
+        get am() {
+            return this.ae;
         }
-        set a6(a) {
-            let b = this.a2;
-            this.a2 = a;
-            if (b != this.a2) {
-                this.au("ActualPenumbraShadowColor", b, a);
+        set am(a) {
+            let b = this.ae;
+            this.ae = a;
+            if (b != this.ae) {
+                this.bt("IsPointerEnabled", b, this.ae);
             }
         }
-        get a5() {
-            return this.a1;
+        get q() {
+            return this.p;
         }
-        set a5(a) {
-            let b = this.a1;
-            this.a1 = a;
-            if (b != this.a1) {
-                this.au("ActualAmbientShadowColor", b, a);
+        set q(a) {
+            let b = this.p;
+            this.p = a;
+            if (b != this.p) {
+                this.bt("PointerPosition", enumGetBox(PopupPointerPosition_$type, b), enumGetBox(PopupPointerPosition_$type, this.p));
             }
         }
-        get a8() {
-            return this.a4;
+        get cd() {
+            return this.b5;
         }
-        set a8(a) {
-            let b = this.a4;
-            this.a4 = a;
-            if (b != this.a4) {
-                this.au("Background", b, this.a4);
+        set cd(a) {
+            let b = this.b5;
+            this.b5 = a;
+            if (b != this.b5) {
+                this.bt("PointerBackground", b, this.b5);
             }
         }
-        j() {
+        r() {
             return new PopupView();
         }
-        aw(a, b, c) {
+        bv(a, b, c) {
             switch (a) {
                 case "IsShown":
-                    if (false == this.t) {
-                        this.k.ae();
+                    if (false == this.ao) {
+                        this.s.ay();
                     }
                     break;
                 case "Elevation":
-                    this.w = this.aa == -1 ? Popup.z : this.aa;
+                    this.at = this.ax == -1 ? Popup.aw : this.ax;
                     break;
                 case "ActualElevation":
                 case "ActualUmbraShadowColor":
                 case "ActualPenumbraShadowColor":
                 case "ActualAmbientShadowColor":
                 case "Background":
-                    this.k.aj();
+                case "CornerRadius":
+                    this.s.a6();
                     break;
                 case "AnimationEnabled":
-                    if (false == this.q) {
-                        this.an();
+                    if (false == this.ag) {
+                        this.bi();
                     }
                     break;
+                case "IsHitTestVisible":
+                    this.s.a1(this.al);
+                    break;
+                case "IsFocusable":
+                    this.s.a0(this.ak);
+                    break;
             }
         }
-        an() {
-            if (this.r()) {
-                if (null != this.o && this.o.playState == 1) {
-                    this.o.cancel();
+        bi() {
+            if (this.aj()) {
+                if (null != this.y && this.y.playState == 1) {
+                    this.y.cancel();
                 }
-                if (null != this.n && this.n.playState == 1) {
-                    this.n.cancel();
+                if (null != this.x && this.x.playState == 1) {
+                    this.x.cancel();
                 }
             }
         }
-        l(a) {
+        v(a) {
             let b = this.f(a);
             let c = a ? this.b() : this.a();
-            let d = this.k.a(c);
+            let d = this.s.d(c);
             let e = new List$1(AnimationKeyFrameProperty.$, 0);
             let f = new List$1(AnimationKeyFrameProperty.$, 0);
             let g = new TranslateTransform();
@@ -449,20 +715,20 @@ export let Popup = /*@__PURE__*/ (() => {
             d.m(...f.toArray());
             return KeyFrameAnimationFactory.f.c(d);
         }
-        m(a) {
+        w(a) {
             let b = this.g(a);
-            this.k.u(b.d);
+            this.s.ai(b.f);
             let c = a ? this.b() : this.a();
-            let d = this.k.b(c);
+            let d = this.s.e(c);
             let e = new List$1(AnimationKeyFrameProperty.$, 0);
             let f = new List$1(AnimationKeyFrameProperty.$, 0);
-            let g = new AnimationKeyFrameProperty(10, b.c);
-            let h = new AnimationKeyFrameProperty(10, b.d);
+            let g = new AnimationKeyFrameProperty(10, b.e);
+            let h = new AnimationKeyFrameProperty(10, b.f);
             e.add(g);
             f.add(h);
-            if (this.i == 2) {
-                let i = b.a;
-                let j = b.b;
+            if (this.o == 2) {
+                let i = b.b;
+                let j = b.d;
                 let k = new AnimationKeyFrameProperty(12, i);
                 let l = new AnimationKeyFrameProperty(12, j);
                 e.add(k);
@@ -474,27 +740,27 @@ export let Popup = /*@__PURE__*/ (() => {
         }
         a() {
             let a = new AnimationKeyFrameEffectTiming();
-            a.g = this.y;
+            a.g = this.av;
             a.b = 3;
             return a;
         }
         b() {
             let a = new AnimationKeyFrameEffectTiming();
-            a.g = this.y;
+            a.g = this.av;
             a.b = 3;
             return a;
         }
-        aq() {
-            this.k.w();
+        bl() {
+            this.s.ak();
         }
         f(a) {
-            let b = truncate(this.k.am.height);
+            let b = truncate(this.s.a9.height);
             if (b <= 0) {
                 b = 500;
             }
             let c = a ? -b : 0;
             let d = a ? 0 : -b;
-            if (this.i == 2) {
+            if (this.o == 2) {
                 c = 0;
                 d = 0;
             }
@@ -507,7 +773,7 @@ export let Popup = /*@__PURE__*/ (() => {
             return e;
         }
         g(a) {
-            let b = truncate(this.k.am.height);
+            let b = truncate(this.s.a9.height);
             if (b <= 0) {
                 b = 500;
             }
@@ -515,75 +781,75 @@ export let Popup = /*@__PURE__*/ (() => {
             let d = a ? b : 0;
             let e;
             let f;
-            if (this.i == 2) {
-                e = a ? this.bc.bottom : this.bc.top;
-                f = a ? this.bc.top : this.bc.bottom;
+            if (this.o == 2) {
+                e = a ? this.cg.bottom : this.cg.top;
+                f = a ? this.cg.top : this.cg.bottom;
             }
             else {
-                e = this.bc.top;
-                f = this.bc.top;
+                e = this.cg.top;
+                f = this.cg.top;
             }
             let g = ((() => {
                 let $ret = new Popup_OuterAnimationInfo();
-                $ret.c = c;
-                $ret.d = d;
-                $ret.a = e;
-                $ret.b = f;
+                $ret.e = c;
+                $ret.f = d;
+                $ret.b = e;
+                $ret.d = f;
                 return $ret;
             })());
             return g;
         }
-        r() {
-            if (null == this.o && null == this.n) {
+        aj() {
+            if (null == this.y && null == this.x) {
                 return false;
             }
-            if (null != this.o && this.o.playState == 1) {
+            if (null != this.y && this.y.playState == 1) {
                 return true;
             }
-            if (null != this.n && this.n.playState == 1) {
+            if (null != this.x && this.x.playState == 1) {
                 return true;
             }
             return false;
         }
-        ar() {
-            this.k.z();
+        bm() {
+            this.s.an();
+            if (this.ao) {
+                this.cg = this.s.a7(this.ce, this.o, this.h);
+            }
         }
-        av(a, b, c) {
-            this.k.ad();
-            this.bc = this.k.ak(a, b, c);
-            this.i = b;
+        bu(a, b, c) {
+            this.ce = a;
+            this.s.aw();
+            this.cg = this.s.a7(a, b, c);
+            this.o = b;
             this.h = c;
         }
-        ay(a, b, c) {
-            if (this.s) {
-                this.s = false;
-                this.au("IsShown", true, this.s);
+        by(a, b, c) {
+            if (this.an) {
+                this.an = false;
+                this.bt("IsShown", true, this.an);
             }
-            this.av(a, b, c);
-            this.az(true);
+            this.bu(a, b, c);
+            this.bz(true);
         }
-        az(a) {
-            this.an();
-            let b = this.s;
-            this.s = a;
+        bz(a) {
+            this.bi();
+            let b = this.an;
+            this.an = a;
             let c = this.g(a);
             let d = this.f(a);
-            if (false == this.q) {
-                let e = this.k.t(c, d);
+            if (false == this.ag) {
+                let e = this.s.ah(c, d);
                 c = e.p0;
                 d = e.p1;
                 return;
             }
-            this.aq();
-            this.n = this.l(this.s);
-            this.o = this.m(this.s);
-            this.n.play();
-            this.o.play();
-            this.n.finished.f((f) => this.n.commitStyles());
-            this.o.finished.f((f) => {
-                this.o.commitStyles();
-                this.au("IsShown", b, this.s);
-                if (this.s) {
+            this.bl();
+            this.i = this.j(this.n, this.an);
+            this.i.d(() => {
+                this.i.c();
+                this.bt("IsShown", b, this.an);
+                if (this.an) {
                     if (this.onPopup != null) {
                         this.onPopup(this, new OnPopupEventArgs());
                     }
@@ -593,55 +859,98 @@ export let Popup = /*@__PURE__*/ (() => {
                         this.onClosed(this, new OnClosedEventArgs());
                     }
                 }
-                let g = this.k.t(c, d);
-                c = g.p0;
-                d = g.p1;
+                let f = this.s.ah(c, d);
+                c = f.p0;
+                d = f.p1;
             });
         }
+        j(a, b) {
+            switch (a) {
+                case 0: return this.l(b);
+                case 1: return this.k(b);
+                default: return this.l(b);
+            }
+        }
+        l(a) {
+            let b = this.v(a);
+            let c = this.w(a);
+            let d = new PopupAnimation();
+            d.a.add(b);
+            d.a.add(c);
+            return d;
+        }
+        k(a) {
+            let b = this.g(a);
+            this.s.ai(a ? b.f : b.e);
+            let c = this.b();
+            let d = this.s.c(c);
+            let e = DeviceUtils.g(30);
+            let f = this.o == 1 ? b.d - e : b.d + e;
+            d.m(new AnimationKeyFrameProperty(this.s.h(), a ? f : b.d));
+            d.m(new AnimationKeyFrameProperty(this.s.h(), a ? b.d : f));
+            let g = this.s.a(c);
+            g.m(new AnimationKeyFrameProperty(1, a ? 0 : 1));
+            g.m(new AnimationKeyFrameProperty(1, a ? 1 : 0));
+            let h = this.s.b(c);
+            h.m(new AnimationKeyFrameProperty(10, (a ? b.f : b.e)));
+            h.m(new AnimationKeyFrameProperty(10, (a ? b.f : b.e)));
+            let i = new PopupAnimation();
+            i.a.add(KeyFrameAnimationFactory.f.c(d));
+            i.a.add(KeyFrameAnimationFactory.f.c(g));
+            i.a.add(KeyFrameAnimationFactory.f.c(h));
+            return i;
+        }
+        contains(a) {
+            return this.s.i(a);
+        }
         appendPopupContent(a) {
-            this.k.v(a);
+            this.s.aj(a);
         }
-        ao() {
-            if (!this.s) {
+        removePopupContent(a) {
+            this.s.ax(a);
+        }
+        bj() {
+            if (!this.an) {
                 return;
             }
-            this.az(false);
+            this.bz(false);
         }
         destroy() {
             this.provideRenderer(null);
         }
         showRelativeToExclusionRect(a, b, c) {
-            this.ay(a, b, c);
+            this.by(a, b, c);
         }
-        as(a) {
-            this.bc = this.k.ak(a, this.i, this.h);
+        bn(a) {
+            this.ce = a;
+            this.cg = this.s.a7(a, this.o, this.h);
         }
         notifySizeChanged() {
         }
         provideRenderer(a) {
-            this.k.ac(a);
+            this.s.av(a);
         }
-        ab() {
+        ay() {
             return this.c();
         }
-        ak() {
+        ba() {
             let a = this.c();
             return a.f();
         }
         c() {
             let a = new PopupVisualModelExport();
-            a.e = this.w;
-            a.d = this.t;
-            a.c = AppearanceHelper.a(this.a7);
-            a.b = AppearanceHelper.a(this.a6);
-            a.a = AppearanceHelper.a(this.a5);
+            a.e = this.at;
+            a.d = this.ao;
+            a.c = AppearanceHelper.a(this.b8);
+            a.b = AppearanceHelper.a(this.b7);
+            a.a = AppearanceHelper.a(this.b6);
             return a;
         }
     }
     Popup.$t = markType(Popup, 'Popup', Base.$, [INotifyPropertyChanged_$type]);
-    Popup.z = 2;
-    Popup.bb = BrushUtil.g(66, 0, 0, 0);
-    Popup.ba = BrushUtil.g(30, 0, 0, 0);
-    Popup.a9 = BrushUtil.g(20, 0, 0, 0);
+    Popup.aw = 2;
+    Popup.cc = BrushUtil.g(66, 0, 0, 0);
+    Popup.cb = BrushUtil.g(30, 0, 0, 0);
+    Popup.ca = BrushUtil.g(20, 0, 0, 0);
     return Popup;
 })();