igniteui-webcomponents-inputs 6.2.2-alpha.2 → 6.3.0-beta.0

package/esm5/lib/InputGroupView_combined.js

@@ -937,50 +937,50 @@ var InputView = /** @class */ /*@__PURE__*/ (function (_super) {
     __extends(InputView, _super);
     function InputView() {
         var _this = _super.call(this) || this;
-        _this.b = null;
-        _this.l = null;
         _this.c = null;
-        _this.j = new List$1(Delegate_$type, 0);
-        _this.g = false;
-        _this.f = false;
-        _this.r = null;
-        _this.d = true;
         _this.m = null;
-        _this.n = null;
+        _this.d = null;
+        _this.k = new List$1(Delegate_$type, 0);
+        _this.h = false;
         _this.g = false;
+        _this.s = null;
+        _this.e = true;
+        _this.n = null;
+        _this.o = null;
+        _this.h = false;
         return _this;
     }
-    InputView.prototype.as = function () {
+    InputView.prototype.at = function () {
     };
-    InputView.prototype.h = function () {
+    InputView.prototype.i = function () {
         return true;
     };
-    Object.defineProperty(InputView.prototype, "q", {
+    Object.defineProperty(InputView.prototype, "r", {
         get: function () {
-            return this.m;
+            return this.n;
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(InputView.prototype, "bd", {
+    Object.defineProperty(InputView.prototype, "be", {
         get: function () {
             return null;
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(InputView.prototype, "i", {
+    Object.defineProperty(InputView.prototype, "j", {
         get: function () {
             return true;
         },
         enumerable: false,
         configurable: true
     });
-    InputView.prototype.ap = function (a) {
+    InputView.prototype.aq = function (a) {
         var e_9, _a;
         if (a == null) {
             try {
-                for (var _b = __values(fromEnum(this.j)), _c = _b.next(); !_c.done; _c = _b.next()) {
+                for (var _b = __values(fromEnum(this.k)), _c = _b.next(); !_c.done; _c = _b.next()) {
                     var b = _c.value;
                     b();
                 }
@@ -998,12 +998,12 @@ var InputView = /** @class */ /*@__PURE__*/ (function (_super) {
                         throw e_9.error;
                 }
             }
-            this.j.clear();
+            this.k.clear();
         }
-        this.l = a;
-        this.l.rootWrapper.setStyleProperty("display", "inline-block");
-        var c = this.l.createElement("input");
-        c.setAttribute("type", this.b.b8);
+        this.m = a;
+        this.m.rootWrapper.setStyleProperty("display", "inline-block");
+        var c = this.m.createElement("input");
+        c.setAttribute("type", this.c.b8);
         c.setStyleProperty("position", "relative");
         c.setStyleProperty("box-sizing", "border-box");
         c.setStyleProperty("display", "inline-block");
@@ -1022,75 +1022,75 @@ var InputView = /** @class */ /*@__PURE__*/ (function (_super) {
         c.setStyleProperty("background-attachment", "initial");
         c.setStyleProperty("background-origin", "initial");
         c.setStyleProperty("background-color", "transparent");
-        NativeUI.q(c, this.b.d4);
+        NativeUI.q(c, this.c.d4);
         c.setStyleProperty("outline-style", "none");
         c.setStyleProperty("box-shadow", "none");
         c.setStyleProperty("border-top", "0.1875rem solid transparent");
         c.setStyleProperty("padding-bottom", "0.1875rem");
-        c.setStyleProperty("text-align", this.t(this.b.dy));
+        c.setStyleProperty("text-align", this.u(this.c.dy));
         c.setStyleProperty("font-family", "Verdana");
         c.setStyleProperty("font-size", "1rem");
-        this.j.add(c.listen("change", runOn(this, this.y)));
-        this.j.add(c.listen("input", runOn(this, this.z)));
-        this.j.add(c.listen("focus", runOn(this, this.ae)));
-        this.j.add(c.listen("blur", runOn(this, this.x)));
-        this.j.add(c.listen("mouseenter", runOn(this, this.v)));
-        this.j.add(c.listen("mouseleave", runOn(this, this.w)));
-        this.j.add(c.listen("keydown", runOn(this, this.af)));
-        this.j.add(c.listen("keyup", runOn(this, this.ah)));
-        this.j.add(c.listen("keypress", runOn(this, this.ag)));
-        this.j.add(c.listen("paste", runOn(this, this.ak)));
-        this.j.add(c.listen("dragenter", runOn(this, this.ac)));
-        this.j.add(c.listen("dragleave", runOn(this, this.ad)));
-        this.j.add(c.listen("compositionstart", runOn(this, this.ab)));
-        this.j.add(c.listen("compositionend", runOn(this, this.aa)));
-        this.j.add(c.listen("mousedown", runOn(this, this.ai)));
-        this.j.add(c.listen("mouseup", runOn(this, this.aj)));
-        this.m = c;
-        this.l.append(this.m);
-        this.am();
-        this.b.dl();
+        this.k.add(c.listen("change", runOn(this, this.z)));
+        this.k.add(c.listen("input", runOn(this, this.aa)));
+        this.k.add(c.listen("focus", runOn(this, this.af)));
+        this.k.add(c.listen("blur", runOn(this, this.y)));
+        this.k.add(c.listen("mouseenter", runOn(this, this.w)));
+        this.k.add(c.listen("mouseleave", runOn(this, this.x)));
+        this.k.add(c.listen("keydown", runOn(this, this.ag)));
+        this.k.add(c.listen("keyup", runOn(this, this.ai)));
+        this.k.add(c.listen("keypress", runOn(this, this.ah)));
+        this.k.add(c.listen("paste", runOn(this, this.al)));
+        this.k.add(c.listen("dragenter", runOn(this, this.ad)));
+        this.k.add(c.listen("dragleave", runOn(this, this.ae)));
+        this.k.add(c.listen("compositionstart", runOn(this, this.ac)));
+        this.k.add(c.listen("compositionend", runOn(this, this.ab)));
+        this.k.add(c.listen("mousedown", runOn(this, this.aj)));
+        this.k.add(c.listen("mouseup", runOn(this, this.ak)));
+        this.n = c;
+        this.m.append(this.n);
+        this.an();
+        this.c.dl();
     };
-    InputView.prototype.a0 = function (a) {
+    InputView.prototype.a1 = function (a) {
         if (a) {
-            this.m.setAttribute("readonly", a.toString());
+            this.n.setAttribute("readonly", a.toString());
         }
         else {
-            this.m.getNativeElement().removeAttribute("readonly");
+            this.n.getNativeElement().removeAttribute("readonly");
         }
     };
-    InputView.prototype.ay = function (a) {
+    InputView.prototype.az = function (a) {
         if (a) {
-            this.m.setAttribute("disabled", "true");
+            this.n.setAttribute("disabled", "true");
         }
         else {
-            this.m.getNativeElement().removeAttribute("disabled");
+            this.n.getNativeElement().removeAttribute("disabled");
         }
     };
-    InputView.prototype.a5 = function (a) {
-        this.m.setStyleProperty("text-align", this.t(a));
+    InputView.prototype.a6 = function (a) {
+        this.n.setStyleProperty("text-align", this.u(a));
     };
-    InputView.prototype.a4 = function (a) {
+    InputView.prototype.a5 = function (a) {
         if (a) {
-            this.m.removeClass("ig-input-hide-spinner");
+            this.n.removeClass("ig-input-hide-spinner");
         }
         else {
-            this.m.addClass("ig-input-hide-spinner");
+            this.n.addClass("ig-input-hide-spinner");
         }
     };
-    InputView.prototype.ab = function (a) {
-        this.g = true;
-        this.b.c3();
+    InputView.prototype.ac = function (a) {
+        this.h = true;
+        this.c.c3();
     };
-    InputView.prototype.aa = function (a) {
-        this.g = false;
+    InputView.prototype.ab = function (a) {
+        this.h = false;
         var b = null;
         if (a.originalEvent != null) {
             b = (a.originalEvent.data);
         }
-        this.b.c2(b);
+        this.c.c2(b);
     };
-    InputView.prototype.t = function (a) {
+    InputView.prototype.u = function (a) {
         switch (a) {
             case 0: return "left";
             case 2: return "right";
@@ -1098,54 +1098,54 @@ var InputView = /** @class */ /*@__PURE__*/ (function (_super) {
         }
         return "left";
     };
-    InputView.prototype.aw = function () {
-        this.m.setAttribute("type", this.b.b8);
-        if (this.b.b8 == "date") {
-            this.m.setStyleProperty("line-height", "normal");
+    InputView.prototype.ax = function () {
+        this.n.setAttribute("type", this.c.b8);
+        if (this.c.b8 == "date") {
+            this.n.setStyleProperty("line-height", "normal");
         }
         else {
-            this.m.setStyleProperty("line-height", "0");
+            this.n.setStyleProperty("line-height", "0");
         }
     };
-    InputView.prototype.au = function () {
-        this.m.setAttribute("placeholder", this.b.cg);
+    InputView.prototype.av = function () {
+        this.n.setAttribute("placeholder", this.c.cg);
     };
-    InputView.prototype.a9 = function () {
-        switch (this.b.z) {
+    InputView.prototype.ba = function () {
+        switch (this.c.z) {
             case 1:
-                this.m.setStyleProperty("height", "2rem");
-                this.m.setStyleProperty("font-size", "1rem");
+                this.n.setStyleProperty("height", "2rem");
+                this.n.setStyleProperty("font-size", "1rem");
                 break;
             case 2:
-                this.m.setStyleProperty("height", "1.68421rem");
-                this.m.setStyleProperty("font-size", "1rem");
+                this.n.setStyleProperty("height", "1.68421rem");
+                this.n.setStyleProperty("font-size", "1rem");
                 break;
             case 3:
-                this.m.setStyleProperty("height", "1.45455rem");
-                this.m.setStyleProperty("font-size", ".95455rem");
+                this.n.setStyleProperty("height", "1.45455rem");
+                this.n.setStyleProperty("font-size", ".95455rem");
                 break;
             case 4:
-                this.m.setStyleProperty("height", "1.388445rem");
-                this.m.setStyleProperty("font-size", "0.91116rem");
+                this.n.setStyleProperty("height", "1.388445rem");
+                this.n.setStyleProperty("font-size", "0.91116rem");
                 break;
         }
     };
-    InputView.prototype.a8 = function () {
+    InputView.prototype.a9 = function () {
         var _this = this;
-        var a = this.k();
+        var a = this.l();
         if (isNaN_(a) || a == 0) {
-            if (!this.f) {
-                this.f = true;
-                this.l.setTimeout(function () {
-                    _this.f = false;
-                    _this.a8();
+            if (!this.g) {
+                this.g = true;
+                this.m.setTimeout(function () {
+                    _this.g = false;
+                    _this.a9();
                 }, 100);
             }
         }
         var b = new TransformGroup();
         b.j.add(((function () {
             var $ret = new TranslateTransform();
-            $ret.k = _this.b.o == 2 ? (_this.k() * -0.25) : 0;
+            $ret.k = _this.c.o == 2 ? (_this.l() * -0.25) : 0;
             return $ret;
         })()));
         b.j.add(((function () {
@@ -1154,141 +1154,141 @@ var InputView = /** @class */ /*@__PURE__*/ (function (_super) {
             $ret.m = 1;
             return $ret;
         })()));
-        NativeUI.af(this.l.rootWrapper, b);
-        this.l.rootWrapper.setStyleProperty("transform-origin", "0px 0px");
+        NativeUI.af(this.m.rootWrapper, b);
+        this.m.rootWrapper.setStyleProperty("transform-origin", "0px 0px");
     };
-    InputView.prototype.k = function () {
-        var a = this.l.rootWrapper.getStyleProperty("height");
+    InputView.prototype.l = function () {
+        var a = this.m.rootWrapper.getStyleProperty("height");
         var b = parseFloat(stringReplace(a, "px", ""));
         return b;
     };
-    InputView.prototype.ax = function (a) {
-        this.m.setProperty("value", a);
+    InputView.prototype.ay = function (a) {
+        this.n.setProperty("value", a);
     };
-    InputView.prototype.az = function (a) {
-        this.m.setAttribute("name", a);
+    InputView.prototype.a0 = function (a) {
+        this.n.setAttribute("name", a);
     };
-    InputView.prototype.x = function (a) {
-        this.b.cz();
+    InputView.prototype.y = function (a) {
+        this.c.cz();
     };
-    InputView.prototype.ae = function (a) {
-        this.b.c7();
+    InputView.prototype.af = function (a) {
+        this.c.c7();
     };
-    InputView.prototype.ai = function (a) {
-        var b = this.bc(a);
-        this.b.dd(b);
+    InputView.prototype.aj = function (a) {
+        var b = this.bd(a);
+        this.c.dd(b);
         if (b.handled) {
             a.preventDefault();
         }
     };
-    InputView.prototype.aj = function (a) {
-        var b = this.bc(a);
-        this.b.dg(b);
+    InputView.prototype.ak = function (a) {
+        var b = this.bd(a);
+        this.c.dg(b);
         if (b.handled) {
             a.preventDefault();
         }
     };
-    InputView.prototype.bc = function (a) {
+    InputView.prototype.bd = function (a) {
         var b = new MouseButtonEventArgs();
         b.position = { $type: Point_$type, x: a.offsetX, y: a.offsetY };
         return b;
     };
-    InputView.prototype.y = function (a) {
-        this.b.c0();
-    };
     InputView.prototype.z = function (a) {
-        this.b.c1();
+        this.c.c0();
     };
-    InputView.prototype.af = function (a) {
-        var b = new KeyEventArgs(0, a);
-        this.b.da(b);
+    InputView.prototype.aa = function (a) {
+        this.c.c1();
     };
-    InputView.prototype.ah = function (a) {
+    InputView.prototype.ag = function (a) {
         var b = new KeyEventArgs(0, a);
-        this.b.dc(b);
+        this.c.da(b);
     };
-    InputView.prototype.ag = function (a) {
+    InputView.prototype.ai = function (a) {
         var b = new KeyEventArgs(0, a);
-        this.b.db(b);
+        this.c.dc(b);
     };
-    InputView.prototype.ak = function (a) {
-        this.b.dh();
+    InputView.prototype.ah = function (a) {
+        var b = new KeyEventArgs(0, a);
+        this.c.db(b);
     };
-    InputView.prototype.ac = function (a) {
-        this.b.c5();
+    InputView.prototype.al = function (a) {
+        this.c.dh();
     };
     InputView.prototype.ad = function (a) {
-        this.b.c6();
+        this.c.c5();
     };
-    InputView.prototype.ba = function (a) {
-        if (this.r != a) {
-            this.r = a;
-            if (this.n != null) {
-                this.n.setAttribute("d", this.r);
+    InputView.prototype.ae = function (a) {
+        this.c.c6();
+    };
+    InputView.prototype.bb = function (a) {
+        if (this.s != a) {
+            this.s = a;
+            if (this.o != null) {
+                this.o.setAttribute("d", this.s);
             }
         }
     };
-    InputView.prototype.s = function () {
-        return this.m.getProperty("value");
+    InputView.prototype.t = function () {
+        return this.n.getProperty("value");
     };
-    InputView.prototype.u = function (a) {
+    InputView.prototype.v = function (a) {
     };
-    InputView.prototype.a7 = function () {
-        if (this.h()) {
-            if (this.b.as) {
-                this.m.setAttribute("tabindex", this.b.be.toString());
+    InputView.prototype.a8 = function () {
+        if (this.i()) {
+            if (this.c.as) {
+                this.n.setAttribute("tabindex", this.c.be.toString());
             }
             else {
-                this.m.getNativeElement().removeAttribute("tabindex");
+                this.n.getNativeElement().removeAttribute("tabindex");
             }
         }
     };
-    InputView.prototype.p = function () {
-        var a = this.m.getProperty("selectionStart");
+    InputView.prototype.q = function () {
+        var a = this.n.getProperty("selectionStart");
         return typeGetValue(a);
     };
-    InputView.prototype.o = function () {
-        var a = this.m.getProperty("selectionEnd");
+    InputView.prototype.p = function () {
+        var a = this.n.getProperty("selectionEnd");
         return typeGetValue(a);
     };
-    InputView.prototype.a3 = function (a) {
-        this.m.setProperty("selectionStart", a);
+    InputView.prototype.a4 = function (a) {
+        this.n.setProperty("selectionStart", a);
     };
-    InputView.prototype.a1 = function (a) {
-        this.m.setProperty("selectionEnd", a);
+    InputView.prototype.a2 = function (a) {
+        this.n.setProperty("selectionEnd", a);
     };
-    InputView.prototype.at = function () {
-        if (this.h()) {
+    InputView.prototype.au = function () {
+        if (this.i()) {
         }
     };
-    InputView.prototype.v = function (a) {
-        this.b.de();
-    };
     InputView.prototype.w = function (a) {
-        this.b.df();
+        this.c.de();
     };
-    InputView.prototype.an = function () {
-        this.d = true;
-        this.j.add(this.m.listen("change", runOn(this, this.y)));
-        this.j.add(this.m.listen("input", runOn(this, this.z)));
-        this.j.add(this.m.listen("focus", runOn(this, this.ae)));
-        this.j.add(this.m.listen("blur", runOn(this, this.x)));
-        this.j.add(this.m.listen("mouseenter", runOn(this, this.v)));
-        this.j.add(this.m.listen("mouseleave", runOn(this, this.w)));
-        this.j.add(this.m.listen("keydown", runOn(this, this.af)));
-        this.j.add(this.m.listen("paste", runOn(this, this.ak)));
-        this.j.add(this.m.listen("dragenter", runOn(this, this.ac)));
-        this.j.add(this.m.listen("dragleave", runOn(this, this.ad)));
-        this.j.add(this.m.listen("compositionstart", runOn(this, this.ab)));
-        this.j.add(this.m.listen("compositionend", runOn(this, this.aa)));
-        this.j.add(this.m.listen("mousedown", runOn(this, this.ai)));
-        this.j.add(this.m.listen("mouseup", runOn(this, this.aj)));
-    };
-    InputView.prototype.aq = function () {
+    InputView.prototype.x = function (a) {
+        this.c.df();
+    };
+    InputView.prototype.ao = function () {
+        this.e = true;
+        this.k.add(this.n.listen("change", runOn(this, this.z)));
+        this.k.add(this.n.listen("input", runOn(this, this.aa)));
+        this.k.add(this.n.listen("focus", runOn(this, this.af)));
+        this.k.add(this.n.listen("blur", runOn(this, this.y)));
+        this.k.add(this.n.listen("mouseenter", runOn(this, this.w)));
+        this.k.add(this.n.listen("mouseleave", runOn(this, this.x)));
+        this.k.add(this.n.listen("keydown", runOn(this, this.ag)));
+        this.k.add(this.n.listen("paste", runOn(this, this.al)));
+        this.k.add(this.n.listen("dragenter", runOn(this, this.ad)));
+        this.k.add(this.n.listen("dragleave", runOn(this, this.ae)));
+        this.k.add(this.n.listen("compositionstart", runOn(this, this.ac)));
+        this.k.add(this.n.listen("compositionend", runOn(this, this.ab)));
+        this.k.add(this.n.listen("mousedown", runOn(this, this.aj)));
+        this.k.add(this.n.listen("mouseup", runOn(this, this.ak)));
+    };
+    InputView.prototype.ar = function () {
         var e_10, _a;
-        this.d = false;
+        this.e = false;
         try {
-            for (var _b = __values(fromEnum(this.j)), _c = _b.next(); !_c.done; _c = _b.next()) {
+            for (var _b = __values(fromEnum(this.k)), _c = _b.next(); !_c.done; _c = _b.next()) {
                 var a = _c.value;
                 a();
             }
@@ -1306,58 +1306,67 @@ var InputView = /** @class */ /*@__PURE__*/ (function (_super) {
                     throw e_10.error;
             }
         }
-        this.j.clear();
+        this.k.clear();
     };
-    InputView.prototype.bb = function (a) {
+    InputView.prototype.bc = function (a) {
         if (a != null) {
-            this.m.setStyleProperty("font", a.fontString);
+            this.n.setStyleProperty("font", a.fontString);
         }
     };
-    InputView.prototype.a6 = function () {
+    InputView.prototype.a7 = function () {
     };
-    InputView.prototype.ao = function () {
-        if (this.m != null) {
-            var a = this.m.getNativeElement();
+    InputView.prototype.ap = function () {
+        if (this.n != null) {
+            var a = this.n.getNativeElement();
             a.blur();
         }
     };
-    InputView.prototype.ar = function (a) {
-        if (this.m != null) {
-            this.m.focus(a);
+    InputView.prototype.as = function (a) {
+        if (this.n != null) {
+            this.n.focus(a);
         }
     };
-    InputView.prototype.av = function () {
-        if (this.m != null) {
-            var nativeInput_ = this.m;
+    InputView.prototype.aw = function () {
+        if (this.n != null) {
+            var nativeInput_ = this.n;
             nativeInput_.getNativeElement().select();
         }
     };
-    InputView.prototype.a2 = function (a, b) {
-        if (this.m != null) {
-            var c = this.m.getNativeElement();
+    InputView.prototype.a3 = function (a, b) {
+        if (this.n != null) {
+            var c = this.n.getNativeElement();
             c.setSelectionRange(a, b);
         }
     };
-    InputView.prototype.al = function () {
+    InputView.prototype.am = function () {
         if (KeyFrameAnimationFactory.h == null) {
-            KeyFrameAnimationFactory.h = this.l;
+            KeyFrameAnimationFactory.h = this.m;
         }
     };
-    InputView.prototype.a = function (a) {
-        return new AnimationKeyFrameEffect(0, this.l.rootWrapper, 0, null, a);
+    InputView.prototype.b = function (a) {
+        return new AnimationKeyFrameEffect(0, this.m.rootWrapper, 0, null, a);
     };
-    InputView.prototype.am = function () {
-        if (InputView.e) {
+    InputView.prototype.an = function () {
+        if (InputView.f) {
             return;
         }
         var a = "\r\n.ig-input-hide-spinner::-webkit-outer-spin-button,\r\n.ig-input-hide-spinner::-webkit-inner-spin-button {\r\n    -webkit-appearance: none;\r\n    margin: 0;\r\n}";
-        var b = this.l.createElement("style");
+        var b = this.m.createElement("style");
         b.setRawText(a);
         document.head.appendChild(b.getNativeElement());
-        InputView.e = true;
+        InputView.f = true;
+    };
+    InputView.prototype.a = function () {
+        var rect_ = this.n.getNativeElement().getBoundingClientRect();
+        var a = (rect_.top);
+        var b = (rect_.left);
+        var c = new Array(2);
+        c[0] = a;
+        c[1] = b;
+        return c;
     };
     InputView.$t = markType(InputView, 'InputView');
-    InputView.e = false;
+    InputView.f = false;
     return InputView;
 }(Base));
 export { InputView };
@@ -2532,7 +2541,7 @@ var XInputGroup = /** @class */ /*@__PURE__*/ (function (_super) {
         configurable: true
     });
     XInputGroup.prototype.onChildrenMutated = function () {
-        this.jr(function (a) { return a.view.a8(); });
+        this.jr(function (a) { return a.view.a9(); });
         this.js(function (a) { return a.view.aj(); });
         this.jt(function (a) { return a.view.r(); });
         this.ju(function (a) { return a.view.r(); });
@@ -4466,7 +4475,7 @@ var XInputGroup = /** @class */ /*@__PURE__*/ (function (_super) {
         this.view.ag();
     };
     XInputGroup.prototype.ensureShift = function () {
-        this.jr(function (a) { return a.view.a8(); });
+        this.jr(function (a) { return a.view.a9(); });
         this.js(function (a) { return a.view.aj(); });
         this.jt(function (a) { return a.view.r(); });
         this.ju(function (a) { return a.view.r(); });
@@ -5916,9 +5925,9 @@ var XInput = /** @class */ /*@__PURE__*/ (function (_super) {
         _this.a0 = false;
         _this.u = new MaskParsingService();
         var a = new InputView();
-        a.b = _this;
+        a.c = _this;
         _this.view = a;
-        _this.view.as();
+        _this.view.at();
         XInput.ae = new FontInfo();
         XInput.ae.q = "Verdana";
         return _this;
@@ -6063,7 +6072,7 @@ var XInput = /** @class */ /*@__PURE__*/ (function (_super) {
                 break;
             case "Value":
                 if (!this.al) {
-                    this.view.ax(this.cq);
+                    this.view.ay(this.cq);
                     if (this.b != null) {
                         this.b.kh();
                     }
@@ -6073,14 +6082,14 @@ var XInput = /** @class */ /*@__PURE__*/ (function (_super) {
                 }
                 break;
             case "Name":
-                this.view.az(this.e);
+                this.view.a0(this.e);
                 break;
             case "Density":
                 this.z = this.aa == 0 ? 1 : this.aa;
                 break;
             case "ActualDensity":
+                this.view.ba();
                 this.view.a9();
-                this.view.a8();
                 break;
             case "InputGroup":
                 this.c8();
@@ -6103,33 +6112,33 @@ var XInput = /** @class */ /*@__PURE__*/ (function (_super) {
                 this.c9();
                 break;
             case "IsDisabled":
-                this.view.ay(this.am);
+                this.view.az(this.am);
                 break;
             case "IsReadOnly":
-                this.view.a0(this.ao);
+                this.view.a1(this.ao);
                 break;
             case "TextAlignment":
-                this.view.a5(this.dy);
+                this.view.a6(this.dy);
                 break;
             case "ShowSpinner":
-                this.view.a4(this.a1);
+                this.view.a5(this.a1);
                 break;
             case "TabIndex":
-                this.view.a7();
+                this.view.a8();
                 break;
         }
     };
     XInput.prototype.di = function () {
-        this.view.au();
+        this.view.av();
     };
     XInput.prototype.dk = function () {
-        this.view.aw();
+        this.view.ax();
     };
     XInput.prototype.dj = function () {
-        this.view.a8();
+        this.view.a9();
     };
     XInput.prototype.c8 = function () {
-        this.view.a8();
+        this.view.a9();
     };
     XInput.prototype.dv = function () {
         this.d4 = this.d8 != null ? this.d8 : XInput.d6;
@@ -6138,10 +6147,10 @@ var XInput = /** @class */ /*@__PURE__*/ (function (_super) {
     };
     XInput.prototype.du = function () {
         if (this.ad != null) {
-            this.view.bb(this.ad);
+            this.view.bc(this.ad);
         }
-        NativeUI.q(this.view.q, this.d4);
-        this.view.a6();
+        NativeUI.q(this.view.r, this.d4);
+        this.view.a7();
     };
     Object.defineProperty(XInput.prototype, "d4", {
         get: function () {
@@ -6272,12 +6281,12 @@ var XInput = /** @class */ /*@__PURE__*/ (function (_super) {
     XInput.prototype.c0 = function () {
         var _this = this;
         this.al = true;
-        this.cq = this.view.s();
+        this.cq = this.view.t();
         if (this.change != null) {
             this.change(this, ((function () {
                 var $ret = new InputChangeEventArgs();
                 $ret.value = _this.cq;
-                $ret.isCompositionInProgress = _this.view.g;
+                $ret.isCompositionInProgress = _this.view.h;
                 return $ret;
             })()));
         }
@@ -6286,7 +6295,7 @@ var XInput = /** @class */ /*@__PURE__*/ (function (_super) {
     XInput.prototype.c1 = function () {
         var _this = this;
         this.al = true;
-        this.cq = this.view.s();
+        this.cq = this.view.t();
         this.al = false;
         if (this.ce != null) {
             this.aq = true;
@@ -6329,7 +6338,7 @@ var XInput = /** @class */ /*@__PURE__*/ (function (_super) {
             this.changing(this, ((function () {
                 var $ret = new InputChangeEventArgs();
                 $ret.value = _this.cq;
-                $ret.isCompositionInProgress = _this.view.g;
+                $ret.isCompositionInProgress = _this.view.h;
                 return $ret;
             })()));
         }
@@ -6450,7 +6459,7 @@ var XInput = /** @class */ /*@__PURE__*/ (function (_super) {
     XInput.prototype.cu = function () {
         this.a9 = 0;
         this.aj = false;
-        this.view.a7();
+        this.view.a8();
     };
     Object.defineProperty(XInput.prototype, "b2", {
         get: function () {
@@ -6560,86 +6569,89 @@ var XInput = /** @class */ /*@__PURE__*/ (function (_super) {
     XInput.prototype.dl = function () {
     };
     XInput.prototype.onDetachedFromUI = function () {
-        this.view.aq();
+        this.view.ar();
     };
     XInput.prototype.onAttachedToUI = function () {
-        this.view.an();
+        this.view.ao();
     };
     XInput.prototype.az = function () {
-        return this.view.h();
+        return this.view.i();
     };
     XInput.prototype.bg = function () {
         return this.j();
     };
     XInput.prototype.b1 = function () {
         var a = this.j();
-        return a.n();
+        return a.p();
     };
     XInput.prototype.j = function () {
         var a = new InputVisualModelExport();
-        var b = this.view.q;
-        a.h = this.view.l.rootWrapper.getNativeElement().offsetTop;
-        a.f = this.view.l.rootWrapper.getNativeElement().offsetLeft;
+        var b = this.view.r;
+        var c = this.view.a();
+        a.i = c[0];
+        a.g = c[1];
+        a.f = this.view.m.rootWrapper.height();
+        a.j = this.view.m.rootWrapper.width();
         a.b = this.o;
         a.c = this.z;
-        a.j = this.ce;
-        a.m = this.ci;
+        a.l = this.ce;
+        a.o = this.ci;
         a.d = this.au;
         a.a = AppearanceHelper.a(NativeUI.al(b));
-        a.i = this.b8;
-        a.l = this.cg;
+        a.k = this.b8;
+        a.n = this.cg;
         a.e = this.aw;
-        a.t = this.cq;
-        a.k = this.e;
+        a.v = this.cq;
+        a.m = this.e;
         if (this.ad != null) {
-            var c = this.ad;
-            if (this.view != null && c.q == null) {
-                var d = this.view.l;
-                var e = FontUtil.getFontInfoFromString(d, c.fontString);
-                c.q = e.q;
-                c.f = e.f;
-                c.r = e.r;
-                c.t = e.t;
-                c.u = e.u;
-                c.v = e.v;
+            var d = this.ad;
+            if (this.view != null && d.q == null) {
+                var e = this.view.m;
+                var f = FontUtil.getFontInfoFromString(e, d.fontString);
+                d.q = f.q;
+                d.f = f.f;
+                d.r = f.r;
+                d.t = f.t;
+                d.u = f.u;
+                d.v = f.v;
             }
-            if (c.q != null) {
-                a.o = c.q;
+            if (d.q != null) {
+                a.q = d.q;
             }
-            if (!isNaN_(c.f)) {
-                a.g = c.f;
+            if (!isNaN_(d.f)) {
+                a.h = d.f;
             }
-            if (c.v != null) {
-                a.s = c.v;
+            if (d.v != null) {
+                a.u = d.v;
             }
-            if (c.t != null) {
-                a.q = c.t;
+            if (d.t != null) {
+                a.s = d.t;
             }
-            if (c.r != null) {
-                a.p = c.t;
+            if (d.r != null) {
+                a.r = d.t;
             }
         }
         return a;
     };
     XInput.prototype.dr = function (a, b) {
-        this.view.a2(a, b);
+        this.view.a3(a, b);
     };
     XInput.prototype.provideContainer = function (a) {
-        this.view.ap(a);
+        this.view.aq(a);
     };
     XInput.prototype.ct = function () {
         this.cz();
-        this.view.ao();
+        this.view.ap();
     };
     XInput.prototype.focus = function (a) {
         if (a === void 0) {
             a = false;
         }
         this.c7();
-        this.view.ar(a);
+        this.view.as(a);
     };
     XInput.prototype.dp = function () {
-        this.view.av();
+        this.view.aw();
     };
     XInput.prototype.dt = function (a) {
         this.aq = true;
@@ -6674,7 +6686,7 @@ var XInput = /** @class */ /*@__PURE__*/ (function (_super) {
             this.changing(this, ((function () {
                 var $ret = new InputChangeEventArgs();
                 $ret.value = _this.cq;
-                $ret.isCompositionInProgress = _this.view.g;
+                $ret.isCompositionInProgress = _this.view.h;
                 return $ret;
             })()));
         }
@@ -6687,19 +6699,19 @@ var XInput = /** @class */ /*@__PURE__*/ (function (_super) {
         this.q = 0;
     };
     XInput.prototype.bb = function () {
-        var a = this.view.p();
-        var b = this.view.o();
+        var a = this.view.q();
+        var b = this.view.p();
         return a == b && this.ai ? b - this.bk.length : a;
     };
     XInput.prototype.ba = function () {
-        return this.view.o();
+        return this.view.p();
     };
     Object.defineProperty(XInput.prototype, "selectionStart", {
         get: function () {
             return this.bb();
         },
         set: function (a) {
-            this.view.a3(a);
+            this.view.a4(a);
         },
         enumerable: false,
         configurable: true
@@ -6709,7 +6721,7 @@ var XInput = /** @class */ /*@__PURE__*/ (function (_super) {
             return this.ba();
         },
         set: function (a) {
-            this.view.a1(a);
+            this.view.a2(a);
         },
         enumerable: false,
         configurable: true
@@ -6750,9 +6762,9 @@ var XInput = /** @class */ /*@__PURE__*/ (function (_super) {
         this.dm(this.ag, this.ay);
     };
     XInput.prototype.cw = function () {
-        this.view.al();
+        this.view.am();
         if (this.ag == null) {
-            this.ag = KeyFrameAnimationFactory.f.c(this.view.a(this.i).m(new AnimationKeyFrameProperty(1, 0)).m(new AnimationKeyFrameProperty(1, 1)));
+            this.ag = KeyFrameAnimationFactory.f.c(this.view.b(this.i).m(new AnimationKeyFrameProperty(1, 0)).m(new AnimationKeyFrameProperty(1, 1)));
         }
     };
     Object.defineProperty(XInput.prototype, "i", {