igniteui-angular-inputs 18.1.1 → 18.2.0-beta.1

package/esm2015/lib/InputGroupView_combined.js

@@ -19,11 +19,11 @@ import { TranslateTransform } from "igniteui-angular-core";
 import { SuffixShiftType_$type } from "./SuffixShiftType";
 import { PrefixShiftType_$type } from "./PrefixShiftType";
 import { LabelShiftType_$type } from "./LabelShiftType";
+import { isNaN_ } from "igniteui-angular-core";
 import { HorizontalAlignment_$type } from "igniteui-angular-core";
 import { MouseButtonEventArgs } from "igniteui-angular-core";
 import { KeyEventArgs } from "igniteui-angular-core";
 import { InputShiftType_$type } from "./InputShiftType";
-import { isNaN_ } from "igniteui-angular-core";
 import { SuffixVisualModelExport } from "./SuffixVisualModelExport";
 import { PrefixVisualModelExport } from "./PrefixVisualModelExport";
 import { InputGroupDisplayType_$type } from "./InputGroupDisplayType";
@@ -70,7 +70,7 @@ export let InputGroupView = /*@__PURE__*/ (() => {
         }
         ac(a) {
             if (typeCast(XLabel.$, a) !== null) {
-                a.bc = "flex-start";
+                a.bd = "flex-start";
             }
         }
         ae(a) {
@@ -194,6 +194,9 @@ export let InputGroupView = /*@__PURE__*/ (() => {
                 case 3:
                     this.p.setStyleProperty("padding-top", ".81818rem");
                     break;
+                case 4:
+                    this.p.setStyleProperty("padding-top", ".68899rem");
+                    break;
             }
         }
         aa(a) {
@@ -222,7 +225,7 @@ export let InputGroupView = /*@__PURE__*/ (() => {
             }
         }
         k(a) {
-            return a.view.i();
+            return a.view.j();
         }
         af() {
             if (KeyFrameAnimationFactory.h == null) {
@@ -442,50 +445,51 @@ export let LabelView = /*@__PURE__*/ (() => {
         constructor() {
             super();
             this.c = null;
-            this.k = null;
+            this.m = null;
             this.d = null;
-            this.h = new List$1(Delegate_$type, 0);
+            this.i = new List$1(Delegate_$type, 0);
+            this.r = null;
+            this.f = true;
+            this.n = null;
             this.o = null;
-            this.e = true;
-            this.l = null;
-            this.m = null;
+            this.p = -1;
         }
-        ab() {
+        ae() {
         }
-        f() {
+        g() {
             return true;
         }
-        get n() {
-            return this.l;
+        get q() {
+            return this.n;
         }
-        get aj() {
+        get an() {
             return null;
         }
-        get g() {
+        get h() {
             return true;
         }
-        s() {
+        v() {
             if (KeyFrameAnimationFactory.h == null) {
-                KeyFrameAnimationFactory.h = this.k;
+                KeyFrameAnimationFactory.h = this.m;
             }
         }
         b(a) {
-            return new AnimationKeyFrameEffect(0, this.k.rootWrapper, 0, null, a);
+            return new AnimationKeyFrameEffect(0, this.m.rootWrapper, 0, null, a);
         }
         a(a) {
-            return new AnimationKeyFrameEffect(0, this.k.rootWrapper, 0, null, a);
+            return new AnimationKeyFrameEffect(0, this.m.rootWrapper, 0, null, a);
         }
-        w(a) {
+        z(a) {
             if (a == null) {
-                for (let b of fromEnum(this.h)) {
+                for (let b of fromEnum(this.i)) {
                     b();
                 }
-                this.h.clear();
+                this.i.clear();
             }
-            this.k = a;
-            this.k.rootWrapper.setStyleProperty("display", "inline-block");
-            this.k.rootWrapper.setStyleProperty("position", "relative");
-            let c = this.k.createElement("label");
+            this.m = a;
+            this.m.rootWrapper.setStyleProperty("display", "inline-block");
+            this.m.rootWrapper.setStyleProperty("position", "relative");
+            let c = this.m.createElement("label");
             c.setStyleProperty("position", "relative");
             c.setStyleProperty("display", "inline-block");
             c.setStyleProperty("white-space", "nowrap");
@@ -494,24 +498,24 @@ export let LabelView = /*@__PURE__*/ (() => {
             c.setStyleProperty("overflow", "hidden");
             c.setStyleProperty("height", "1.125rem");
             c.setStyleProperty("backface-visibility", "hidden");
-            NativeUI.q(this.k.rootWrapper, this.c.cz);
+            NativeUI.q(this.m.rootWrapper, this.c.c2);
             c.setStyleProperty("outline-style", "none");
             c.setStyleProperty("box-shadow", "none");
             c.setStyleProperty("font-family", "Verdana");
             c.setStyleProperty("font-size", "1rem");
-            this.l = c;
-            this.k.append(this.l);
-            this.c.ch();
+            this.n = c;
+            this.m.append(this.n);
+            this.c.ck();
         }
-        j() {
-            return this.c.l == 0 ? (this.i() * 0.5) : 0;
+        l() {
+            return this.c.l == 0 ? (this.j() * 0.5) : 0;
         }
-        af() {
-            this.c.bi = "block";
+        aj() {
+            this.c.bj = "block";
             let a = new TransformGroup();
             a.j.add(((() => {
                 let $ret = new TranslateTransform();
-                $ret.k = this.c.l == 0 ? (this.i() * 0.5) : 0;
+                $ret.k = this.c.l == 0 ? (this.j() * 0.5) : 0;
                 return $ret;
             })()));
             a.j.add(((() => {
@@ -520,125 +524,188 @@ export let LabelView = /*@__PURE__*/ (() => {
                 $ret.m = 1;
                 return $ret;
             })()));
-            NativeUI.af(this.k.rootWrapper, a);
-            this.l.setStyleProperty("height", "1.125rem");
-            this.k.rootWrapper.setStyleProperty("position", "absolute");
-            this.k.rootWrapper.setStyleProperty("transform-origin", "0px 0px");
+            NativeUI.af(this.m.rootWrapper, a);
+            this.n.setStyleProperty("height", "1.125rem");
+            this.m.rootWrapper.setStyleProperty("position", "absolute");
+            this.m.rootWrapper.setStyleProperty("transform-origin", "0px 0px");
         }
-        ag() {
+        ak() {
             switch (this.c.s) {
                 case 1:
-                    this.k.rootWrapper.setStyleProperty("margin-top", "0px");
+                    this.m.rootWrapper.setStyleProperty("margin-top", "0px");
                     break;
                 case 2:
-                    this.k.rootWrapper.setStyleProperty("margin-top", "-.125rem");
+                    this.m.rootWrapper.setStyleProperty("margin-top", "-.125rem");
                     break;
                 case 3:
-                    this.k.rootWrapper.setStyleProperty("margin-top", "-.25rem");
+                    this.m.rootWrapper.setStyleProperty("margin-top", "-.25rem");
+                    break;
+                case 4:
+                    this.m.rootWrapper.setStyleProperty("margin-top", "-.5rem");
                     break;
             }
         }
-        ae() {
-            this.l.setText(this.c.text != null ? this.c.text : "");
+        ai() {
+            this.n.setText(this.c.text != null ? this.c.text : "");
         }
-        ah(a) {
-            if (this.o != a) {
-                this.o = a;
-                if (this.m != null) {
-                    this.m.setAttribute("d", this.o);
+        al(a) {
+            if (this.r != a) {
+                this.r = a;
+                if (this.o != null) {
+                    this.o.setAttribute("d", this.r);
                 }
             }
         }
-        y() {
-            if (this.k != null) {
-                this.k.rootWrapper.setStyleProperty("display", this.c.bi);
-                this.l.setStyleProperty("display", this.c.bi);
-                let ext_ = this.k.getExternal(this.c, null, null);
+        ab() {
+            if (this.m != null) {
+                this.m.rootWrapper.setStyleProperty("display", this.c.bj);
+                this.n.setStyleProperty("display", this.c.bj);
+                let ext_ = this.m.getExternal(this.c, null, null);
                 if (ext_ && ext_._onDisplayChanged) {
                     ext_._onDisplayChanged();
                 }
                 ;
             }
         }
-        t() {
-            if (this.k != null) {
-                this.k.rootWrapper.setStyleProperty("align-items", this.c.ba);
-                this.l.setStyleProperty("align-items", this.c.ba);
-                let ext_ = this.k.getExternal(this.c, null, null);
+        w() {
+            if (this.m != null) {
+                this.m.rootWrapper.setStyleProperty("align-items", this.c.bb);
+                this.n.setStyleProperty("align-items", this.c.bb);
+                let ext_ = this.m.getExternal(this.c, null, null);
                 if (ext_ && ext_._onAlignItemsChanged) {
                     ext_._onAlignItemsChanged();
                 }
                 ;
             }
         }
-        u() {
-            if (this.k != null) {
-                this.k.rootWrapper.setStyleProperty("align-self", this.c.bc);
-                this.l.setStyleProperty("align-self", this.c.bc);
-                let ext_ = this.k.getExternal(this.c, null, null);
+        x() {
+            if (this.m != null) {
+                this.m.rootWrapper.setStyleProperty("align-self", this.c.bd);
+                this.n.setStyleProperty("align-self", this.c.bd);
+                let ext_ = this.m.getExternal(this.c, null, null);
                 if (ext_ && ext_._onAlignSelfChanged) {
                     ext_._onAlignSelfChanged();
                 }
                 ;
             }
         }
-        z() {
-            if (this.k != null) {
-                this.k.rootWrapper.setStyleProperty("flex-direction", this.c.bl);
-                this.l.setStyleProperty("flex-direction", this.c.bl);
-                let ext_ = this.k.getExternal(this.c, null, null);
+        ac() {
+            if (this.m != null) {
+                this.m.rootWrapper.setStyleProperty("flex-direction", this.c.bm);
+                this.n.setStyleProperty("flex-direction", this.c.bm);
+                let ext_ = this.m.getExternal(this.c, null, null);
                 if (ext_ && ext_._onFlexDirectionChanged) {
                     ext_._onFlexDirectionChanged();
                 }
                 ;
             }
         }
-        aa() {
-            if (this.k != null) {
-                this.k.rootWrapper.setStyleProperty("flex-grow", this.c.bn);
-                this.l.setStyleProperty("flex-grow", this.c.bn);
-                let ext_ = this.k.getExternal(this.c, null, null);
+        ad() {
+            if (this.m != null) {
+                this.m.rootWrapper.setStyleProperty("flex-grow", this.c.bo);
+                this.n.setStyleProperty("flex-grow", this.c.bo);
+                let ext_ = this.m.getExternal(this.c, null, null);
                 if (ext_ && ext_._onFlexGrowChanged) {
                     ext_._onFlexGrowChanged();
                 }
                 ;
             }
         }
-        p(a) {
+        s(a) {
         }
-        ac() {
-            if (this.f()) {
+        ag() {
+            if (this.g()) {
             }
         }
-        i() {
-            let a = this.k.rootWrapper.getStyleProperty("height");
+        j() {
+            let a = this.k();
+            if (a == 0 || isNaN_(a)) {
+                let b = NaN;
+                let c = this.m.rootWrapper.parent();
+                if (c != null) {
+                    if (c.getChildCount() > 1) {
+                        let d = null;
+                        let e = null;
+                        for (let f = 0; f < c.getChildCount(); f++) {
+                            let g = c.getChildAt(f);
+                            if (g.getNativeElement() == this.m.rootWrapper.getNativeElement()) {
+                                if (f == c.getChildCount() - 1) {
+                                    d = c.getChildAt(f - 1);
+                                }
+                                else {
+                                    e = c.getChildAt(f + 1);
+                                }
+                                break;
+                            }
+                        }
+                        this.m.rootWrapper.remove();
+                        document.body.appendChild(this.m.rootWrapper.getNativeElement());
+                        b = this.k();
+                        this.m.rootWrapper.remove();
+                        if (e != null) {
+                            e.before(this.m.rootWrapper);
+                        }
+                        else {
+                            c.append(this.m.rootWrapper);
+                        }
+                    }
+                    else {
+                        this.m.rootWrapper.remove();
+                        document.body.appendChild(this.m.rootWrapper.getNativeElement());
+                        b = this.k();
+                        this.m.rootWrapper.remove();
+                        c.append(this.m.rootWrapper);
+                    }
+                }
+                else {
+                    this.m.rootWrapper.remove();
+                    document.body.appendChild(this.m.rootWrapper.getNativeElement());
+                    b = this.k();
+                    this.m.rootWrapper.remove();
+                }
+                return b;
+            }
+            return a;
+        }
+        k() {
+            let a = this.m.rootWrapper.getStyleProperty("height");
             return parseFloat(stringReplace(a, "px", ""));
         }
-        q(a) {
-            this.c.ce();
+        t(a) {
+            this.c.cg();
         }
-        r(a) {
-            this.c.cf();
+        u(a) {
+            this.c.ch();
         }
-        v() {
-            this.e = true;
-            this.h.add(this.k.rootWrapper.listen("mouseenter", runOn(this, this.q)));
-            this.h.add(this.k.rootWrapper.listen("mouseleave", runOn(this, this.r)));
+        y() {
+            this.f = true;
+            this.i.add(this.m.rootWrapper.listen("mouseenter", runOn(this, this.t)));
+            this.i.add(this.m.rootWrapper.listen("mouseleave", runOn(this, this.u)));
         }
-        x() {
-            this.e = false;
-            for (let a of fromEnum(this.h)) {
+        aa() {
+            this.f = false;
+            for (let a of fromEnum(this.i)) {
                 a();
             }
-            this.h.clear();
+            this.i.clear();
         }
-        ai(a) {
+        am(a) {
             if (a != null) {
-                this.l.setStyleProperty("font", a.fontString);
+                this.n.setStyleProperty("font", a.fontString);
             }
         }
-        ad(a) {
-            NativeUI.q(this.l, a);
+        ah(a) {
+            NativeUI.q(this.n, a);
+        }
+        e() {
+            return ((() => {
+                let $ret = new FontInfo();
+                $ret.q = "Verdana";
+                $ret.f = 13;
+                return $ret;
+            })());
+        }
+        af() {
         }
     }
     LabelView.$t = markType(LabelView, 'LabelView');
@@ -808,6 +875,10 @@ export let InputView = /*@__PURE__*/ (() => {
                     this.m.setStyleProperty("height", "1.45455rem");
                     this.m.setStyleProperty("font-size", ".95455rem");
                     break;
+                case 4:
+                    this.m.setStyleProperty("height", "1.388445rem");
+                    this.m.setStyleProperty("font-size", "0.91116rem");
+                    break;
             }
         }
         a8() {
@@ -1847,7 +1918,7 @@ export let XInputGroup = /*@__PURE__*/ (() => {
             }
         }
         static kr(a, b) {
-            return new CornerRadius(1, !isNaN_(a.c) ? a.c : b.c, !isNaN_(a.d) ? a.d : b.d, !isNaN_(a.b) ? a.b : b.b, !isNaN_(a.a) ? a.a : b.a);
+            return new CornerRadius(1, !isNaN_(a.d) ? a.d : b.d, !isNaN_(a.e) ? a.e : b.e, !isNaN_(a.c) ? a.c : b.c, !isNaN_(a.b) ? a.b : b.b);
         }
         static oh(a, b) {
             return new Thickness(1, !isNaN_(a.left) ? a.left : b.left, !isNaN_(a.top) ? a.top : b.top, !isNaN_(a.right) ? a.right : b.right, !isNaN_(a.bottom) ? a.bottom : b.bottom);
@@ -1868,7 +1939,7 @@ export let XInputGroup = /*@__PURE__*/ (() => {
                         a.l = 2;
                         break;
                 }
-                a.ck(this.ai, false);
+                a.cn(this.ai, false);
             });
         }
         kf() {
@@ -2073,7 +2144,7 @@ export let XInputGroup = /*@__PURE__*/ (() => {
         }
         onChildrenMutated() {
             this.jr((a) => a.view.a8());
-            this.js((a) => a.view.af());
+            this.js((a) => a.view.aj());
             this.jt((a) => a.view.q());
             this.ju((a) => a.view.q());
         }
@@ -2201,11 +2272,11 @@ export let XInputGroup = /*@__PURE__*/ (() => {
         jv() {
             this.jp();
             if (this.ai) {
-                this.js((a) => a.ck(true, !this.aj));
+                this.js((a) => a.cn(true, !this.aj));
                 this.jr((a) => a.dq(this.ar, !this.aj));
             }
             else {
-                this.js((a) => a.ck(false, !this.aj));
+                this.js((a) => a.cn(false, !this.aj));
                 this.jr((a) => a.dq(this.ar, !this.aj));
             }
         }
@@ -2213,12 +2284,12 @@ export let XInputGroup = /*@__PURE__*/ (() => {
             this.jp();
             if (this.ao) {
                 let a = 1;
-                this.js((b) => b.al = true);
+                this.js((b) => b.am = true);
                 this.j4(a);
             }
             else {
                 let b = -1;
-                this.js((c) => c.al = false);
+                this.js((c) => c.am = false);
                 this.j4(b);
             }
         }
@@ -3521,7 +3592,7 @@ export let XInputGroup = /*@__PURE__*/ (() => {
         }
         ensureShift() {
             this.jr((a) => a.view.a8());
-            this.js((a) => a.view.af());
+            this.js((a) => a.view.aj());
             this.jt((a) => a.view.q());
             this.ju((a) => a.view.q());
         }
@@ -3574,7 +3645,7 @@ export let XInputGroup = /*@__PURE__*/ (() => {
                     if (this.inputs._inner[b].e == null) {
                         this.inputs._inner[b].e = "Label" + a.l.count.toString();
                     }
-                    a.l.add1(this.inputs._inner[b].au());
+                    a.l.add1(this.inputs._inner[b].av());
                 }
                 else if (typeCast(XInput.$, this.inputs._inner[b]) !== null) {
                     if (this.inputs._inner[b].e == null) {
@@ -4071,42 +4142,43 @@ export let XLabel = /*@__PURE__*/ (() => {
             this._view = null;
             this.aa = null;
             this.z = null;
+            this.ab = false;
             this.r = 0;
             this.q = 1;
+            this.cu = ThemeResolver.ah(XLabel.o, XLabel.dd, XLabel.c6);
             this.cr = ThemeResolver.ah(XLabel.o, XLabel.da, XLabel.c3);
-            this.co = ThemeResolver.ah(XLabel.o, XLabel.c7, XLabel.c0);
-            this.cp = ThemeResolver.ah(XLabel.o, XLabel.c8, XLabel.c1);
-            this.cq = ThemeResolver.ah(XLabel.o, XLabel.c9, XLabel.c2);
+            this.cs = ThemeResolver.ah(XLabel.o, XLabel.db, XLabel.c4);
+            this.ct = ThemeResolver.ah(XLabel.o, XLabel.dc, XLabel.c5);
             this.u = null;
-            this.cv = XLabel.db;
-            this.cs = XLabel.c4;
-            this.ct = XLabel.c5;
+            this.cy = XLabel.de;
+            this.cv = XLabel.c7;
+            this.cw = XLabel.c8;
             this.k = 0;
-            this.af = false;
-            this.ad = false;
+            this.ag = false;
+            this.ae = false;
             this.v = null;
-            this.cu = null;
-            this.a2 = "ig-label-" + XLabel.at++;
-            this.ay = "inline-block";
+            this.cx = null;
+            this.a3 = "ig-label-" + XLabel.au++;
             this.az = "inline-block";
-            this.a0 = null;
-            this.av = "center";
-            this.aw = "center";
-            this.ar = 0;
-            this.ab = false;
+            this.a0 = "inline-block";
             this.a1 = null;
-            this.ax = null;
-            this.a3 = null;
-            this.ae = false;
-            this.ai = false;
+            this.aw = "center";
+            this.ax = "center";
+            this.as = 0;
             this.ac = false;
+            this.a2 = null;
+            this.ay = null;
+            this.a4 = null;
+            this.af = false;
+            this.aj = false;
+            this.ad = false;
+            this.ai = false;
             this.ah = false;
-            this.ag = false;
-            this.ap = false;
+            this.aq = false;
             let a = new LabelView();
             a.c = this;
             this.view = a;
-            this.view.ab();
+            this.view.ae();
         }
         get p() {
             return this.n;
@@ -4133,14 +4205,14 @@ export let XLabel = /*@__PURE__*/ (() => {
             a.b = 0;
             return a;
         }
-        b8() {
-            this.view.s();
+        ca() {
+            this.view.v();
             let a = false;
             if (this.aa == null) {
                 let b = new TransformGroup();
                 b.j.add(((() => {
                     let $ret = new TranslateTransform();
-                    $ret.k = this.view.j();
+                    $ret.k = this.view.l();
                     return $ret;
                 })()));
                 b.j.add(((() => {
@@ -4149,17 +4221,20 @@ export let XLabel = /*@__PURE__*/ (() => {
                     $ret.m = 1;
                     return $ret;
                 })()));
-                let c = -(this.view.i() * 1.3);
+                let c = -(this.view.j() * 1.3);
                 if (this.s == 2) {
-                    c = -(this.view.i() * 1.05);
+                    c = -(this.view.j() * 1.05);
                 }
                 if (this.s == 3) {
-                    c = -(this.view.i() * 1.01);
+                    c = -(this.view.j() * 1.01);
+                }
+                if (this.s == 4) {
+                    c = -(this.view.j() * 1.05);
                 }
                 let d = new TransformGroup();
                 d.j.add(((() => {
                     let $ret = new TranslateTransform();
-                    $ret.k = this.l == 2 ? c : -(this.view.i() * 0.65);
+                    $ret.k = this.l == 2 ? c : -(this.view.j() * 0.65);
                     return $ret;
                 })()));
                 d.j.add(((() => {
@@ -4171,35 +4246,39 @@ export let XLabel = /*@__PURE__*/ (() => {
                 this.aa = KeyFrameAnimationFactory.f.c(this.view.b(this.i).m(new AnimationKeyFrameProperty(14, b), new AnimationKeyFrameProperty(2, BrushUtil.h(0, 255, 255, 255))).m(new AnimationKeyFrameProperty(14, d), new AnimationKeyFrameProperty(2, BrushUtil.h(this.l == 2 ? 255 : 0, 255, 255, 255))));
             }
             if (this.z == null) {
-                this.z = KeyFrameAnimationFactory.f.c(this.view.a(this.i).m(new AnimationKeyFrameProperty(7, this.cz)).m(new AnimationKeyFrameProperty(7, this.cw)));
+                this.z = KeyFrameAnimationFactory.f.c(this.view.a(this.i).m(new AnimationKeyFrameProperty(7, this.c2)).m(new AnimationKeyFrameProperty(7, this.cz)));
             }
         }
-        ci(a, b) {
+        cl(a, b) {
             if ((b > 0 && a.playbackRate < 0) || (b < 0 && a.playbackRate > 0)) {
                 a.reverse();
-                if (this.ap) {
+                if (this.aq) {
                     a.finish();
-                    this.b9(a);
+                    this.cb(a);
                     return;
                 }
-                a.finished.f((c) => this.b9(a));
+                a.finished.f((c) => this.cb(a));
             }
             else {
                 a.play();
-                if (this.ap) {
+                if (this.aq) {
                     a.finish();
-                    this.b9(a);
+                    this.cb(a);
                     return;
                 }
-                a.finished.f((c) => this.b9(a));
+                a.finished.f((c) => this.cb(a));
             }
         }
-        b9(a) {
+        cb(a) {
             a.commitStyles();
-            if (a == this.aa && this.ah) {
+            if (a == this.aa && this.ai) {
                 this.aa = null;
+                if (this.ab) {
+                    this.ab = false;
+                    this.cf();
+                }
             }
-            if (a == this.z && this.ag) {
+            if (a == this.z && this.ah) {
                 this.z = null;
             }
         }
@@ -4207,15 +4286,15 @@ export let XLabel = /*@__PURE__*/ (() => {
             super.h(a, b, c);
             switch (a) {
                 case "BaseTheme":
-                    this.cl(this.p);
-                    this.cn();
+                    this.co(this.p);
+                    this.cq();
                     break;
                 case "TextColor":
                 case "HoverTextColor":
                 case "TextStyle":
                 case "HighlightTextColor":
                 case "HoverHighlightTextColor":
-                    this.cn();
+                    this.cq();
                     break;
                 case "ActualTextColor":
                 case "ActualHoverTextColor":
@@ -4227,7 +4306,7 @@ export let XLabel = /*@__PURE__*/ (() => {
                             this.aa = null;
                         }
                         else {
-                            this.ah = true;
+                            this.ai = true;
                         }
                     }
                     if (this.z != null) {
@@ -4235,29 +4314,29 @@ export let XLabel = /*@__PURE__*/ (() => {
                             this.z = null;
                         }
                         else {
-                            this.ag = true;
+                            this.ah = true;
                         }
                     }
-                    this.cm();
+                    this.cp();
                     break;
                 case "Text":
-                    this.view.ae();
+                    this.view.ai();
                     break;
                 case "Density":
                     this.s = this.t == 0 ? 1 : this.t;
                     break;
                 case "ActualDensity":
-                    this.view.ag();
-                    this.view.af();
+                    this.view.ak();
+                    this.view.aj();
                     break;
                 case "InputGroup":
-                    this.view.af();
+                    this.view.aj();
                     break;
                 case "IsHighlighted":
-                    this.cc();
+                    this.ce();
                     break;
                 case "IsShifted":
-                    this.cd();
+                    this.cf();
                     break;
                 case "ShiftType":
                     if (this.aa != null) {
@@ -4265,66 +4344,88 @@ export let XLabel = /*@__PURE__*/ (() => {
                             this.aa = null;
                         }
                         else {
-                            this.ah = true;
+                            this.ai = true;
                         }
                     }
-                    this.cg();
+                    this.ci();
                     break;
                 case "Display":
-                    this.view.y();
+                    this.view.ab();
                     break;
                 case "FlexDirection":
-                    this.view.z();
+                    this.view.ac();
                     break;
                 case "FlexGrow":
-                    this.view.aa();
+                    this.view.ad();
                     break;
                 case "AlignItems":
-                    this.view.t();
+                    this.view.w();
                     break;
                 case "AlignSelf":
-                    this.view.u();
+                    this.view.x();
                     break;
             }
         }
-        cg() {
-            this.view.af();
+        ci() {
+            this.view.aj();
         }
-        cd() {
-            this.b8();
+        cf() {
+            this.view.af();
+            this.ca();
             let a = 1;
-            let b = this.an;
+            let b = this.ao;
             if (!b) {
                 a = -1;
             }
-            this.ci(this.aa, a);
+            this.cl(this.aa, a);
         }
-        cc() {
-            this.b8();
+        ce() {
+            this.ca();
             let a = 1;
-            let b = this.al;
+            let b = this.am;
             if (!b) {
                 a = -1;
             }
-            this.ci(this.z, a);
+            this.cl(this.z, a);
+        }
+        onSizeReady() {
+            if (this.aa != null) {
+                this.b9();
+                if (this.ao) {
+                    this.view.aj();
+                    this.cf();
+                }
+            }
+        }
+        b9() {
+            if (this.aa != null && this.aa.playState == 3) {
+                this.aa = null;
+            }
+            else {
+                this.ab = true;
+                this.ai = true;
+            }
         }
-        cn() {
-            this.cz = this.df != null ? this.df : XLabel.db;
-            this.cy = this.de != null ? this.de : XLabel.db;
-            this.cw = this.dc != null ? this.dc : XLabel.c4;
+        cq() {
+            this.c2 = this.di != null ? this.di : XLabel.de;
+            this.c1 = this.dh != null ? this.dh : XLabel.de;
+            this.cz = this.df != null ? this.df : XLabel.c7;
             this.w = this.y != null ? this.y : XLabel.x;
         }
-        cm() {
+        cp() {
             if (this.w != null) {
-                this.view.ai(this.w);
+                this.view.am(this.w);
             }
-            this.view.ad(this.cz);
+            else {
+                this.view.am(this.view.e());
+            }
+            this.view.ah(this.c2);
         }
-        cl(a) {
-            XLabel.db = ThemeResolver.ah(a, XLabel.da, XLabel.c3);
-            XLabel.c4 = ThemeResolver.ah(a, XLabel.c7, XLabel.c0);
-            XLabel.c6 = ThemeResolver.ah(a, XLabel.c9, XLabel.c2);
-            XLabel.c5 = ThemeResolver.ah(a, XLabel.c8, XLabel.c1);
+        co(a) {
+            XLabel.de = ThemeResolver.ah(a, XLabel.dd, XLabel.c6);
+            XLabel.c7 = ThemeResolver.ah(a, XLabel.da, XLabel.c3);
+            XLabel.c9 = ThemeResolver.ah(a, XLabel.dc, XLabel.c5);
+            XLabel.c8 = ThemeResolver.ah(a, XLabel.db, XLabel.c4);
         }
         get t() {
             return this.r;
@@ -4346,6 +4447,16 @@ export let XLabel = /*@__PURE__*/ (() => {
                 this.g("ActualDensity", enumGetBox(ControlDisplayDensity_$type, b), enumGetBox(ControlDisplayDensity_$type, a));
             }
         }
+        get c2() {
+            return this.cu;
+        }
+        set c2(a) {
+            let b = this.cu;
+            this.cu = a;
+            if (b != this.cu) {
+                this.g("ActualTextColor", b, a);
+            }
+        }
         get cz() {
             return this.cr;
         }
@@ -4353,36 +4464,26 @@ export let XLabel = /*@__PURE__*/ (() => {
             let b = this.cr;
             this.cr = a;
             if (b != this.cr) {
-                this.g("ActualTextColor", b, a);
-            }
-        }
-        get cw() {
-            return this.co;
-        }
-        set cw(a) {
-            let b = this.co;
-            this.co = a;
-            if (b != this.co) {
                 this.g("ActualHighlightTextColor", b, a);
             }
         }
-        get cx() {
-            return this.cp;
+        get c0() {
+            return this.cs;
         }
-        set cx(a) {
-            let b = this.cp;
-            this.cp = a;
-            if (b != this.cp) {
+        set c0(a) {
+            let b = this.cs;
+            this.cs = a;
+            if (b != this.cs) {
                 this.g("ActualHoverHighlightTextColor", b, a);
             }
         }
-        get cy() {
-            return this.cq;
+        get c1() {
+            return this.ct;
         }
-        set cy(a) {
-            let b = this.cq;
-            this.cq = a;
-            if (b != this.cq) {
+        set c1(a) {
+            let b = this.ct;
+            this.ct = a;
+            if (b != this.ct) {
                 this.g("ActualHoverTextColor", b, a);
             }
         }
@@ -4396,6 +4497,16 @@ export let XLabel = /*@__PURE__*/ (() => {
                 this.g("ActualTextStyle", b, a);
             }
         }
+        get di() {
+            return this.cy;
+        }
+        set di(a) {
+            let b = this.cy;
+            this.cy = a;
+            if (b != this.cy) {
+                this.g("TextColor", b, a);
+            }
+        }
         get df() {
             return this.cv;
         }
@@ -4403,26 +4514,16 @@ export let XLabel = /*@__PURE__*/ (() => {
             let b = this.cv;
             this.cv = a;
             if (b != this.cv) {
-                this.g("TextColor", b, a);
-            }
-        }
-        get dc() {
-            return this.cs;
-        }
-        set dc(a) {
-            let b = this.cs;
-            this.cs = a;
-            if (b != this.cs) {
                 this.g("HighlightTextColor", b, a);
             }
         }
-        get dd() {
-            return this.ct;
+        get dg() {
+            return this.cw;
         }
-        set dd(a) {
-            let b = this.ct;
-            this.ct = a;
-            if (b != this.ct) {
+        set dg(a) {
+            let b = this.cw;
+            this.cw = a;
+            if (b != this.cw) {
                 this.g("HoverHighlightTextColor", b, a);
             }
         }
@@ -4436,45 +4537,45 @@ export let XLabel = /*@__PURE__*/ (() => {
                 this.g("ShiftType", enumGetBox(LabelShiftType_$type, b), enumGetBox(LabelShiftType_$type, a));
             }
         }
-        get an() {
-            return this.af;
+        get ao() {
+            return this.ag;
         }
-        set an(a) {
-            let b = this.af;
-            this.af = a;
-            if (b != this.af) {
+        set ao(a) {
+            let b = this.ag;
+            this.ag = a;
+            if (b != this.ag) {
                 this.g("IsShifted", b, a);
             }
         }
-        ck(a, b = true) {
-            let c = this.ap;
+        cn(a, b = true) {
+            let c = this.aq;
             if (!b) {
-                this.ap = true;
+                this.aq = true;
             }
             try {
-                this.an = a;
+                this.ao = a;
             }
             finally {
                 if (!b) {
-                    this.ap = c;
+                    this.aq = c;
                 }
             }
         }
-        get al() {
-            return this.ad;
+        get am() {
+            return this.ae;
         }
-        set al(a) {
-            let b = this.ad;
-            this.ad = a;
-            if (b != this.ad) {
+        set am(a) {
+            let b = this.ae;
+            this.ae = a;
+            if (b != this.ae) {
                 this.g("IsHighlighted", b, a);
             }
         }
-        ce() {
-            this.am = true;
+        cg() {
+            this.an = true;
         }
-        cf() {
-            this.am = false;
+        ch() {
+            this.an = false;
         }
         get y() {
             return this.v;
@@ -4486,192 +4587,192 @@ export let XLabel = /*@__PURE__*/ (() => {
                 this.g("TextStyle", b, a);
             }
         }
-        get de() {
-            return this.cu;
+        get dh() {
+            return this.cx;
         }
-        set de(a) {
-            let b = this.cu;
-            this.cu = a;
-            if (b != this.cu) {
+        set dh(a) {
+            let b = this.cx;
+            this.cx = a;
+            if (b != this.cx) {
                 this.g("HoverTextColor", b, a);
             }
         }
-        get bu() {
-            return this.a2;
+        get bv() {
+            return this.a3;
         }
-        set bu(a) {
-            let b = this.a2;
-            this.a2 = a;
-            if (b != this.a2) {
+        set bv(a) {
+            let b = this.a3;
+            this.a3 = a;
+            if (b != this.a3) {
                 this.g("Id", b, a);
             }
         }
-        get bi() {
-            return this.ay;
-        }
-        set bi(a) {
-            let b = this.ay;
-            this.ay = a;
-            if (b != this.ay) {
-                this.g("Display", b, a);
-            }
-        }
-        get bl() {
+        get bj() {
             return this.az;
         }
-        set bl(a) {
+        set bj(a) {
             let b = this.az;
             this.az = a;
             if (b != this.az) {
-                this.g("FlexDirection", b, a);
+                this.g("Display", b, a);
             }
         }
-        get bn() {
+        get bm() {
             return this.a0;
         }
-        set bn(a) {
+        set bm(a) {
             let b = this.a0;
             this.a0 = a;
             if (b != this.a0) {
-                this.g("FlexGrow", b, a);
+                this.g("FlexDirection", b, a);
             }
         }
-        get ba() {
-            return this.av;
+        get bo() {
+            return this.a1;
         }
-        set ba(a) {
-            let b = this.av;
-            this.av = a;
-            if (b != this.av) {
-                this.g("AlignItems", b, a);
+        set bo(a) {
+            let b = this.a1;
+            this.a1 = a;
+            if (b != this.a1) {
+                this.g("FlexGrow", b, a);
             }
         }
-        get bc() {
+        get bb() {
             return this.aw;
         }
-        set bc(a) {
+        set bb(a) {
             let b = this.aw;
             this.aw = a;
             if (b != this.aw) {
+                this.g("AlignItems", b, a);
+            }
+        }
+        get bd() {
+            return this.ax;
+        }
+        set bd(a) {
+            let b = this.ax;
+            this.ax = a;
+            if (b != this.ax) {
                 this.g("AlignSelf", b, a);
             }
         }
-        get aj() {
-            return this.ab;
+        get ak() {
+            return this.ac;
         }
-        get as() {
-            return this.ar;
+        get at() {
+            return this.as;
         }
-        set as(a) {
-            let b = this.ar;
-            this.ar = a;
-            this.ab = true;
-            if (b != this.ar) {
+        set at(a) {
+            let b = this.as;
+            this.as = a;
+            this.ac = true;
+            if (b != this.as) {
                 this.g("TabIndex", b, a);
             }
         }
-        get bp() {
-            return this.a1;
+        get bq() {
+            return this.a2;
         }
-        set bp(a) {
-            let b = this.a1;
-            this.a1 = a;
-            if (b != this.a1) {
+        set bq(a) {
+            let b = this.a2;
+            this.a2 = a;
+            if (b != this.a2) {
                 this.g("TabIndex", b, a);
             }
         }
-        get be() {
-            return this.ax;
+        get bf() {
+            return this.ay;
         }
-        set be(a) {
-            let b = this.ax;
-            this.ax = a;
-            if (b != this.ax) {
+        set bf(a) {
+            let b = this.ay;
+            this.ay = a;
+            if (b != this.ay) {
                 this.g("AriaLabel", b, a);
             }
         }
         get text() {
-            return this.a3;
+            return this.a4;
         }
         set text(a) {
-            let b = this.a3;
-            this.a3 = a;
-            if (b != this.a3) {
+            let b = this.a4;
+            this.a4 = a;
+            if (b != this.a4) {
                 this.g("Text", b, a);
             }
         }
-        get am() {
-            return this.ae;
+        get an() {
+            return this.af;
         }
-        set am(a) {
-            let b = this.ae;
-            this.ae = a;
-            if (b != this.ae) {
+        set an(a) {
+            let b = this.af;
+            this.af = a;
+            if (b != this.af) {
                 this.g("IsHover", b, a);
             }
         }
-        get aq() {
-            return this.ai;
+        get ar() {
+            return this.aj;
         }
-        set aq(a) {
-            let b = this.ai;
-            this.ai = a;
-            if (b != this.ai) {
+        set ar(a) {
+            let b = this.aj;
+            this.aj = a;
+            if (b != this.aj) {
                 this.g("Value", b, a);
             }
         }
         get disabled() {
-            return this.ac;
+            return this.ad;
         }
         set disabled(a) {
-            let b = this.ac;
-            this.ac = a;
-            if (b != this.ac) {
+            let b = this.ad;
+            this.ad = a;
+            if (b != this.ad) {
                 this.g("IsDisabled", b, a);
             }
         }
-        ch() {
-            this.view.ae();
+        ck() {
+            this.view.ai();
         }
         onDetachedFromUI() {
-            this.view.x();
+            this.view.aa();
         }
         onAttachedToUI() {
-            this.view.v();
+            this.view.y();
         }
-        ao() {
-            return this.view.f();
+        ap() {
+            return this.view.g();
         }
-        au() {
+        av() {
             return this.j();
         }
-        bk() {
+        bl() {
             let a = this.j();
             return a.q();
         }
         j() {
             let a = new LabelVisualModelExport();
-            let b = this.view.n;
+            let b = this.view.q;
             a.c = this.p;
             a.e = this.t;
             a.d = this.s;
             a.a = AppearanceHelper.a(NativeUI.al(b));
             a.b = this.l;
-            a.i = this.an;
-            a.g = this.al;
-            a.m = this.bi;
-            a.n = this.bl;
-            a.o = this.bn;
-            a.l = this.ba;
+            a.i = this.ao;
+            a.g = this.am;
+            a.m = this.bj;
+            a.n = this.bm;
+            a.o = this.bo;
+            a.l = this.bb;
             a.r = this.text;
-            a.h = this.am;
-            a.j = this.aq;
+            a.h = this.an;
+            a.j = this.ar;
             a.f = this.disabled;
             a.p = this.e;
             if (this.w != null) {
                 let c = this.w;
                 if (this.view != null && c.q == null) {
-                    let d = this.view.k;
+                    let d = this.view.m;
                     let e = FontUtil.getFontInfoFromString(d, c.fontString);
                     c.q = e.q;
                     c.f = e.f;
@@ -4699,25 +4800,25 @@ export let XLabel = /*@__PURE__*/ (() => {
             return a;
         }
         provideContainer(a) {
-            this.view.w(a);
+            this.view.z(a);
         }
     }
     XLabel.$t = markType(XLabel, 'XLabel', XInputGroupItem.$);
-    XLabel.da = BrushUtil.h(221, 0, 0, 0);
-    XLabel.c7 = BrushUtil.h(255, 0, 153, 155);
-    XLabel.c9 = BrushUtil.h(221, 0, 0, 0);
-    XLabel.c8 = BrushUtil.h(255, 0, 153, 155);
-    XLabel.c3 = BrushUtil.h(255, 24, 29, 31);
-    XLabel.c0 = BrushUtil.h(255, 33, 150, 243);
-    XLabel.c2 = BrushUtil.h(255, 24, 29, 31);
-    XLabel.c1 = BrushUtil.h(255, 33, 150, 243);
+    XLabel.dd = BrushUtil.h(221, 0, 0, 0);
+    XLabel.da = BrushUtil.h(255, 0, 153, 155);
+    XLabel.dc = BrushUtil.h(221, 0, 0, 0);
+    XLabel.db = BrushUtil.h(255, 0, 153, 155);
+    XLabel.c6 = BrushUtil.h(255, 24, 29, 31);
+    XLabel.c3 = BrushUtil.h(255, 33, 150, 243);
+    XLabel.c5 = BrushUtil.h(255, 24, 29, 31);
+    XLabel.c4 = BrushUtil.h(255, 33, 150, 243);
     XLabel.o = 2;
-    XLabel.db = ThemeResolver.ah(XLabel.o, XLabel.da, XLabel.c3);
-    XLabel.c4 = ThemeResolver.ah(XLabel.o, XLabel.c7, XLabel.c0);
-    XLabel.c6 = ThemeResolver.ah(XLabel.o, XLabel.c9, XLabel.c2);
-    XLabel.c5 = ThemeResolver.ah(XLabel.o, XLabel.c8, XLabel.c1);
+    XLabel.de = ThemeResolver.ah(XLabel.o, XLabel.dd, XLabel.c6);
+    XLabel.c7 = ThemeResolver.ah(XLabel.o, XLabel.da, XLabel.c3);
+    XLabel.c9 = ThemeResolver.ah(XLabel.o, XLabel.dc, XLabel.c5);
+    XLabel.c8 = ThemeResolver.ah(XLabel.o, XLabel.db, XLabel.c4);
     XLabel.x = null;
-    XLabel.at = 0;
+    XLabel.au = 0;
     return XLabel;
 })();
 /**