igniteui-angular-inputs 21.0.1-beta.0 → 21.1.0-beta.0

package/fesm5/igniteui-angular-inputs.js

@@ -244,7 +244,7 @@ var RippleView = /** @class */ /*@__PURE__*/ (function (_super) {
         d.setStyleProperty("pointer-events", "none");
         d.setStyleProperty("border-radius", c + "px");
         d.setStyleProperty("opacity", ".5");
-        NativeUI.af(d, ((function () {
+        NativeUI.ai(d, ((function () {
             var $ret = new ScaleTransform();
             $ret.l = 0.3;
             $ret.m = 0.3;
@@ -1145,7 +1145,7 @@ var ButtonView = /** @class */ /*@__PURE__*/ (function (_super) {
         this.o.setStyleProperty("white-space", "no-wrap");
         this.o.setStyleProperty("color", "#000");
         this.o.setStyleProperty("background", this.c.nt._fill);
-        NativeUI.o(this.o, this.c.k4);
+        NativeUI.p(this.o, this.c.k4);
         this.o.setAttribute("id", this.c.hz);
         this.ay();
         this.i.add(c.listen("change", runOn(this, this.aa)));
@@ -2236,10 +2236,10 @@ var XButton = /** @class */ /*@__PURE__*/ (function (_super) {
         if (a == null) {
             return;
         }
-        NativeUI.o(a, this.k4);
-        NativeUI.n(a, this.nu);
+        NativeUI.p(a, this.k4);
+        NativeUI.o(a, this.nu);
         if (!isNaN_(this.bk)) {
-            NativeUI.p(a, new Thickness(0, this.bk));
+            NativeUI.q(a, new Thickness(0, this.bk));
         }
         if (this.disabled) {
             this.view.a0(this.cv, this.v);
@@ -2256,17 +2256,17 @@ var XButton = /** @class */ /*@__PURE__*/ (function (_super) {
             }
         }
         if (this.disabled) {
-            NativeUI.m(a, this.nv);
+            NativeUI.n(a, this.nv);
         }
         else if (this.focused && this.a3) {
-            NativeUI.m(a, this.ny);
+            NativeUI.n(a, this.ny);
         }
         else {
             if (this.a4 && !this.av) {
-                NativeUI.m(a, this.n0);
+                NativeUI.n(a, this.n0);
             }
             else {
-                NativeUI.m(a, this.nt);
+                NativeUI.n(a, this.nt);
             }
         }
         this.view.az(this.n3, BrushUtil.l(0, 0, 0, 0));
@@ -2274,21 +2274,21 @@ var XButton = /** @class */ /*@__PURE__*/ (function (_super) {
             this.view.a2(this.ab);
         }
         if (this.disabled) {
-            NativeUI.q(this.view.t, this.nx);
             NativeUI.r(this.view.t, this.nx);
+            NativeUI.t(this.view.t, this.nx);
         }
         else if (this.focused && this.a3) {
-            NativeUI.q(this.view.t, this.nz);
             NativeUI.r(this.view.t, this.nz);
+            NativeUI.t(this.view.t, this.nz);
         }
         else {
             if (this.a4 && !this.av) {
-                NativeUI.q(this.view.t, this.n1);
                 NativeUI.r(this.view.t, this.n1);
+                NativeUI.t(this.view.t, this.n1);
             }
             else {
-                NativeUI.q(this.view.t, this.n4);
                 NativeUI.r(this.view.t, this.n4);
+                NativeUI.t(this.view.t, this.n4);
             }
         }
     };
@@ -4686,16 +4686,16 @@ var XButton = /** @class */ /*@__PURE__*/ (function (_super) {
         c.p = e[1];
         c.h = this.o;
         c.i = this.r;
-        c.c = AppearanceHelper.a(NativeUI.ak(a));
+        c.c = AppearanceHelper.a(NativeUI.an(a));
         c.g = AppearanceHelper.a(this.n5);
         c.d = AppearanceHelper.a(this.n2);
         c.a = AppearanceHelper.a(this.ns);
         c.u = this.cy;
         c.e = AppearanceHelper.a(this.n3);
         c.ag = this.k4;
-        c.b = AppearanceHelper.a(NativeUI.aj(a));
+        c.b = AppearanceHelper.a(NativeUI.am(a));
         c.j = this.v;
-        c.f = AppearanceHelper.a(NativeUI.al(b));
+        c.f = AppearanceHelper.a(NativeUI.ao(b));
         c.o = this.bk;
         c.x = this.f1;
         c.y = this.g5;
@@ -5064,9 +5064,9 @@ var XButton = /** @class */ /*@__PURE__*/ (function (_super) {
     })()));
     XButton.k = new Theme(1, ((function () {
         var $ret = new Dictionary$2(String_$type, Base.$, 0);
-        $ret.addItem("UmbraShadowColor", BrushUtil.l(100, 33, 150, 243));
-        $ret.addItem("PenumbraShadowColor", BrushUtil.l(70, 33, 150, 243));
-        $ret.addItem("AmbientShadowColor", BrushUtil.l(40, 33, 150, 243));
+        $ret.addItem("UmbraShadowColor", BrushUtil.l(0, 0, 0, 0));
+        $ret.addItem("PenumbraShadowColor", BrushUtil.l(0, 0, 0, 0));
+        $ret.addItem("AmbientShadowColor", BrushUtil.l(0, 0, 0, 0));
         $ret.addItem("ElevationMode", enumGetBox(ElevationMode_$type, 2));
         return $ret;
     })()), ((function () {
@@ -5223,9 +5223,9 @@ var XButton = /** @class */ /*@__PURE__*/ (function (_super) {
     })()));
     XButton.j = new Theme(1, ((function () {
         var $ret = new Dictionary$2(String_$type, Base.$, 0);
-        $ret.addItem("UmbraShadowColor", BrushUtil.l(100, 33, 150, 243));
-        $ret.addItem("PenumbraShadowColor", BrushUtil.l(70, 33, 150, 243));
-        $ret.addItem("AmbientShadowColor", BrushUtil.l(40, 33, 150, 243));
+        $ret.addItem("UmbraShadowColor", BrushUtil.l(0, 0, 0, 0));
+        $ret.addItem("PenumbraShadowColor", BrushUtil.l(0, 0, 0, 0));
+        $ret.addItem("AmbientShadowColor", BrushUtil.l(0, 0, 0, 0));
         $ret.addItem("ElevationMode", enumGetBox(ElevationMode_$type, 2));
         return $ret;
     })()), ((function () {
@@ -5655,7 +5655,7 @@ var IconView = /** @class */ /*@__PURE__*/ (function (_super) {
         this.y.append(this.w);
         this.v.append(this.y);
         this.o.add(c.listen("click", runOn(this, this.ak)));
-        this.d.c6();
+        this.d.c8();
     };
     IconView.prototype.ay = function (a) {
         this.z = null;
@@ -5698,7 +5698,7 @@ var IconView = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.v.rootWrapper.getNativeElement();
             b.innerHTML = a;
             this.z = this.v.rootWrapper.getChildAt(0);
-            var c = this.z.getAttribute("viewbox");
+            var c = this.z.getAttribute("viewBox");
             if (c != null) {
                 var d = c.split(' ');
                 if (d.length == 1) {
@@ -5709,11 +5709,11 @@ var IconView = /** @class */ /*@__PURE__*/ (function (_super) {
                     var f = parseFloat(d[1].trim());
                     var g = parseFloat(d[2].trim());
                     var h = parseFloat(d[3].trim());
-                    this.d.dd(e, f, g, h);
+                    this.d.df(e, f, g, h);
                 }
             }
             else {
-                this.d.dd(NaN, NaN, NaN, NaN);
+                this.d.df(NaN, NaN, NaN, NaN);
             }
         }
     };
@@ -5789,7 +5789,7 @@ var IconView = /** @class */ /*@__PURE__*/ (function (_super) {
             this.v.rootWrapper.append(this.y);
         }
         else {
-            NativeUI.r(a, b);
+            NativeUI.t(a, b);
         }
     };
     IconView.prototype.ar = function (a, b) {
@@ -5798,7 +5798,7 @@ var IconView = /** @class */ /*@__PURE__*/ (function (_super) {
             c.setAttribute("stroke", "url('#" + this.n.item(b) + "')");
         }
         else {
-            NativeUI.aa(a, b);
+            NativeUI.ad(a, b);
         }
     };
     IconView.prototype.ad = function (a) {
@@ -5808,10 +5808,10 @@ var IconView = /** @class */ /*@__PURE__*/ (function (_super) {
         }
     };
     IconView.prototype.ae = function (a) {
-        this.d.c3();
+        this.d.c5();
     };
     IconView.prototype.af = function (a) {
-        this.d.c4();
+        this.d.c6();
     };
     IconView.prototype.aj = function () {
         this.j = true;
@@ -6000,18 +6000,18 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
         _this.dp = null;
         _this.dq = null;
         _this.dr = null;
-        _this.be = null;
-        _this.bj = null;
-        _this.bm = null;
+        _this.bf = null;
         _this.bl = null;
+        _this.bo = null;
+        _this.bn = null;
         _this.a = null;
-        _this.de = null;
         _this.bd = null;
+        _this.be = null;
         _this.n = null;
-        _this.bk = "ig-icon-" + XIcon.bc++;
+        _this.bm = "ig-icon-" + XIcon.bc++;
         _this.ba = 0;
         _this.p = false;
-        _this.bi = null;
+        _this.bk = null;
         _this.r = false;
         _this.q = false;
         _this.af = 1;
@@ -6050,13 +6050,13 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
     XIcon.prototype.destroy = function () {
         this.provideContainer(null);
     };
-    XIcon.prototype.c5 = function (a, b, c) {
+    XIcon.prototype.c7 = function (a, b, c) {
         if (this.propertyChanged != null) {
             this.propertyChanged(this, new PropertyChangedEventArgs(a));
         }
-        this.c8(a, b, c);
+        this.da(a, b, c);
     };
-    XIcon.prototype.c8 = function (a, b, c) {
+    XIcon.prototype.da = function (a, b, c) {
         switch (a) {
             case "Fill":
             case "Stroke":
@@ -6065,51 +6065,51 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             case "HoverStroke":
             case "HoverStrokeThickness":
             case "IsHover":
-                this.dc();
+                this.de();
                 break;
             case "FillColors":
             case "StrokeColors":
             case "ActualFill":
             case "ActualStroke":
             case "ActualStrokeWidth":
-                this.da();
+                this.dc();
                 break;
             case "SVG":
-                this.bm = null;
+                this.bo = null;
                 this.a = null;
-                this.da();
+                this.dc();
                 break;
             case "SVGPath":
-                this.bl = null;
+                this.bn = null;
                 this.a = null;
-                this.da();
+                this.dc();
                 break;
             case "SVGPaths":
-                this.bl = null;
-                this.bm = null;
-                this.da();
+                this.bn = null;
+                this.bo = null;
+                this.dc();
                 break;
             case "DataURL":
-                this.bl = null;
-                this.bm = null;
+                this.bn = null;
+                this.bo = null;
                 this.a = null;
-                this.da();
+                this.dc();
                 break;
             case "Source":
-                this.bl = null;
-                this.bm = null;
+                this.bn = null;
+                this.bo = null;
                 this.a = null;
-                this.da();
+                this.dc();
                 break;
             case "DataTemplate":
             case "DataTemplateContext":
-                this.bl = null;
-                this.bm = null;
+                this.bn = null;
+                this.bo = null;
                 this.a = null;
-                this.da();
+                this.dc();
                 break;
             case "Opacity":
-                this.db();
+                this.dd();
                 break;
             case "ViewBoxLeft":
                 this.as = !isNaN_(this.a6) ? this.a6 : !isNaN_(this.ah) ? this.ah : 0;
@@ -6135,7 +6135,7 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
                 break;
         }
     };
-    XIcon.prototype.dc = function () {
+    XIcon.prototype.de = function () {
         var a = this.fill != null ? this.fill : XIcon.dx;
         var b = this.ea != null ? this.ea : XIcon.d1;
         var c = !isNaN_(this.a4) ? this.a4 : XIcon.aw;
@@ -6160,19 +6160,19 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    XIcon.prototype.db = function () {
-        NativeUI.y(this.view.aa, this.a3);
+    XIcon.prototype.dd = function () {
+        NativeUI.ab(this.view.aa, this.a3);
     };
-    XIcon.prototype.cz = function () {
+    XIcon.prototype.c1 = function () {
         this.view.ag();
     };
-    XIcon.prototype.da = function () {
+    XIcon.prototype.dc = function () {
         var a = this.view.aa;
         if (this.t) {
             var b = this.view.ab;
-            NativeUI.r(b, this.du);
-            NativeUI.aa(b, this.dv);
-            NativeUI.ad(b, this.aq);
+            NativeUI.t(b, this.du);
+            NativeUI.ad(b, this.dv);
+            NativeUI.ag(b, this.aq);
         }
         else {
             var c = this.j();
@@ -6181,8 +6181,8 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
                 this.view.ai();
             }
             var d = false;
-            if (this.df != null) {
-                this.view.as(this.df, this.bf);
+            if (this.bg != null) {
+                this.view.as(this.bg, this.bh);
             }
             else if (this.svgPath != null) {
                 if (stringStartsWith(trimStart(this.svgPath, ' ', '\n', '\r', '\t'), "<svg")) {
@@ -6197,9 +6197,9 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
                 this.view.az(this.b);
                 var e = this.view.c;
                 if (e != null && e.length > 0) {
-                    var f = NativeUI.r;
-                    var g = NativeUI.aa;
-                    this.c7();
+                    var f = NativeUI.t;
+                    var g = NativeUI.ad;
+                    this.c9();
                     f = runOn(this.view, this.view.aq);
                     g = runOn(this.view, this.view.ar);
                     for (var h = 0; h < e.length; h++) {
@@ -6210,10 +6210,10 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
                             g(e[h], this.dv);
                         }
                         if (!isNaN_(this.aq)) {
-                            NativeUI.ad(e[h], this.aq);
+                            NativeUI.ag(e[h], this.aq);
                         }
                         if (this.dw != null) {
-                            NativeUI.q(e[h], this.dw);
+                            NativeUI.r(e[h], this.dw);
                         }
                         if (this.e != null && this.e.count == e.length) {
                             f(e[h], this.e.item(h));
@@ -6232,30 +6232,30 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
                 this.view.ax(this.svg);
                 d = true;
             }
-            else if (this.b0 != null) {
-                this.view.at(this.b0);
+            else if (this.b2 != null) {
+                this.view.at(this.b2);
             }
-            else if (this.bh != null) {
-                this.view.aw(this.bh);
+            else if (this.bj != null) {
+                this.view.aw(this.bj);
             }
             else {
             }
             if (d) {
                 for (var i = 0; i < this.view.r.count; i++) {
                     var j = this.view.r._inner[i].c;
-                    NativeUI.r(this.view.r._inner[i].d, j.l.f(this.d6));
+                    NativeUI.t(this.view.r._inner[i].d, j.l.f(this.d6));
                 }
                 for (var k = 0; k < this.view.s.count; k++) {
                     var l = this.view.s._inner[k].c;
-                    NativeUI.aa(this.view.s._inner[k].d, l.m.f(this.d7));
+                    NativeUI.ad(this.view.s._inner[k].d, l.m.f(this.d7));
                 }
                 for (var m = 0; m < this.view.t.count; m++) {
                     var n = this.view.t._inner[m].c;
-                    NativeUI.r(this.view.t._inner[m].d, n.l.f(this.d8));
+                    NativeUI.t(this.view.t._inner[m].d, n.l.f(this.d8));
                 }
                 for (var o = 0; o < this.view.u.count; o++) {
                     var p = this.view.u._inner[o].c;
-                    NativeUI.aa(this.view.u._inner[o].d, p.m.f(this.d9));
+                    NativeUI.ad(this.view.u._inner[o].d, p.m.f(this.d9));
                 }
                 for (var q = 0; q < this.view.e.o.count; q++) {
                     var r = this.view.e.o._inner[q];
@@ -6264,7 +6264,7 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
                     if (t < this.e.count) {
                         for (var u = 0; u < this.view.e.q._inner[q].count; u++) {
                             var v = this.view.e.q._inner[q]._inner[u].c;
-                            NativeUI.r(this.view.e.q._inner[q]._inner[u].d, v.l.f(this.e.item(t)));
+                            NativeUI.t(this.view.e.q._inner[q]._inner[u].d, v.l.f(this.e.item(t)));
                         }
                     }
                 }
@@ -6275,35 +6275,35 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
                     if (z < this.f.count) {
                         for (var aa = 0; aa < this.view.f.q._inner[w].count; aa++) {
                             var ab = this.view.f.q._inner[w]._inner[aa].c;
-                            NativeUI.aa(this.view.f.q._inner[w]._inner[aa].d, ab.m.f(this.f.item(z)));
+                            NativeUI.ad(this.view.f.q._inner[w]._inner[aa].d, ab.m.f(this.f.item(z)));
                         }
                     }
                 }
                 for (var ac = 0; ac < this.view.q.count; ac++) {
                     var ad = this.view.q._inner[ac].c;
-                    NativeUI.r(this.view.q._inner[ac].d, ad.l.f(this.du));
-                    NativeUI.aa(this.view.q._inner[ac].d, ad.m.f(this.dv));
+                    NativeUI.t(this.view.q._inner[ac].d, ad.l.f(this.du));
+                    NativeUI.ad(this.view.q._inner[ac].d, ad.m.f(this.dv));
                 }
             }
             var ae = this.view.aa;
             if (this.du != null) {
-                NativeUI.r(ae, this.du);
+                NativeUI.t(ae, this.du);
             }
             if (this.dv != null) {
-                NativeUI.aa(ae, this.dv);
+                NativeUI.ad(ae, this.dv);
             }
             if (!isNaN_(this.aq)) {
-                NativeUI.ad(ae, this.aq);
+                NativeUI.ag(ae, this.aq);
             }
         }
         if (this.o != null) {
             this.view.a0(this.o);
         }
         if (this.dw != null) {
-            NativeUI.q(this.view.aa, this.dw);
+            NativeUI.r(this.view.aa, this.dw);
         }
     };
-    XIcon.prototype.c7 = function () {
+    XIcon.prototype.c9 = function () {
         var e_3, _a, e_4, _b;
         if (this.du != null) {
             this.view.ap(this.du, "fill");
@@ -6365,10 +6365,10 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
         else if (this.svg != null) {
             a = 0;
         }
-        else if (this.b0 != null) {
+        else if (this.b2 != null) {
             a = 3;
         }
-        else if (this.bh != null) {
+        else if (this.bj != null) {
             a = 4;
         }
         return a;
@@ -6381,7 +6381,7 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.l;
             this.l = a;
             if (b != this.l) {
-                this.c5("BaseTheme", enumGetBox(BaseControlTheme_$type, b), enumGetBox(BaseControlTheme_$type, a));
+                this.c7("BaseTheme", enumGetBox(BaseControlTheme_$type, b), enumGetBox(BaseControlTheme_$type, a));
             }
         },
         enumerable: false,
@@ -6395,7 +6395,7 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.dg;
             this.dg = a;
             if (b != this.dg) {
-                this.c5("ActualFill", b, a);
+                this.c7("ActualFill", b, a);
             }
         },
         enumerable: false,
@@ -6409,7 +6409,7 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.dh;
             this.dh = a;
             if (b != this.dh) {
-                this.c5("ActualStroke", b, a);
+                this.c7("ActualStroke", b, a);
             }
         },
         enumerable: false,
@@ -6423,7 +6423,7 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.di;
             this.di = a;
             if (b != this.di) {
-                this.c5("ActualTextColor", b, a);
+                this.c7("ActualTextColor", b, a);
             }
         },
         enumerable: false,
@@ -6437,7 +6437,7 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.y;
             this.y = a;
             if (b != this.y) {
-                this.c5("ActualStrokeWidth", b, a);
+                this.c7("ActualStrokeWidth", b, a);
             }
         },
         enumerable: false,
@@ -6451,7 +6451,7 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.dj;
             this.dj = a;
             if (b != this.dj) {
-                this.c5("Fill", b, a);
+                this.c7("Fill", b, a);
             }
         },
         enumerable: false,
@@ -6465,7 +6465,7 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.ds;
             this.ds = a;
             if (b != this.ds) {
-                this.c5("Stroke", b, a);
+                this.c7("Stroke", b, a);
             }
         },
         enumerable: false,
@@ -6479,7 +6479,7 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.ak;
             this.ak = a;
             if (b != this.ak) {
-                this.c5("StrokeWidth", b, a);
+                this.c7("StrokeWidth", b, a);
             }
         },
         enumerable: false,
@@ -6493,7 +6493,7 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.dt;
             this.dt = a;
             if (b != this.dt) {
-                this.c5("TextColor", b, a);
+                this.c7("TextColor", b, a);
             }
         },
         enumerable: false,
@@ -6507,7 +6507,7 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.dk;
             this.dk = a;
             if (b != this.dk) {
-                this.c5("HoverFill", b, a);
+                this.c7("HoverFill", b, a);
             }
         },
         enumerable: false,
@@ -6521,7 +6521,7 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.dl;
             this.dl = a;
             if (b != this.dl) {
-                this.c5("HoverStroke", b, a);
+                this.c7("HoverStroke", b, a);
             }
         },
         enumerable: false,
@@ -6535,7 +6535,7 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.ae;
             this.ae = a;
             if (b != this.ae) {
-                this.c5("HoverStrokeThickness", b, a);
+                this.c7("HoverStrokeThickness", b, a);
             }
         },
         enumerable: false,
@@ -6549,7 +6549,7 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.dm;
             this.dm = a;
             if (b != this.dm) {
-                this.c5("HoverTextColor", b, a);
+                this.c7("HoverTextColor", b, a);
             }
         },
         enumerable: false,
@@ -6563,7 +6563,7 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.c;
             this.c = a;
             if (b != this.c) {
-                this.c5("FillColors", b, this.c);
+                this.c7("FillColors", b, this.c);
             }
         },
         enumerable: false,
@@ -6577,7 +6577,7 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.d;
             this.d = a;
             if (b != this.d) {
-                this.c5("StrokeColors", b, this.d);
+                this.c7("StrokeColors", b, this.d);
             }
         },
         enumerable: false,
@@ -6591,7 +6591,7 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.dn;
             this.dn = a;
             if (b != this.dn) {
-                this.c5("PrimaryFillColor", b, this.dn);
+                this.c7("PrimaryFillColor", b, this.dn);
             }
         },
         enumerable: false,
@@ -6605,7 +6605,7 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.dp;
             this.dp = a;
             if (b != this.dp) {
-                this.c5("PrimaryStrokeColor", b, this.dp);
+                this.c7("PrimaryStrokeColor", b, this.dp);
             }
         },
         enumerable: false,
@@ -6619,7 +6619,7 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.dq;
             this.dq = a;
             if (b != this.dq) {
-                this.c5("SecondaryFillColor", b, this.dq);
+                this.c7("SecondaryFillColor", b, this.dq);
             }
         },
         enumerable: false,
@@ -6633,35 +6633,35 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.dr;
             this.dr = a;
             if (b != this.dr) {
-                this.c5("SecondaryStrokeColor", b, this.dr);
+                this.c7("SecondaryStrokeColor", b, this.dr);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(XIcon.prototype, "bh", {
+    Object.defineProperty(XIcon.prototype, "bj", {
         get: function () {
-            return this.be;
+            return this.bf;
         },
         set: function (a) {
-            var b = this.be;
-            this.be = a;
-            if (b != this.be) {
-                this.c5("Source", b, a);
+            var b = this.bf;
+            this.bf = a;
+            if (b != this.bf) {
+                this.c7("Source", b, a);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(XIcon.prototype, "b0", {
+    Object.defineProperty(XIcon.prototype, "b2", {
         get: function () {
-            return this.bj;
+            return this.bl;
         },
         set: function (a) {
-            var b = this.bj;
-            this.bj = a;
-            if (b != this.bj) {
-                this.c5("DataURL", b, a);
+            var b = this.bl;
+            this.bl = a;
+            if (b != this.bl) {
+                this.c7("DataURL", b, a);
             }
         },
         enumerable: false,
@@ -6669,13 +6669,13 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
     });
     Object.defineProperty(XIcon.prototype, "svgPath", {
         get: function () {
-            return this.bm;
+            return this.bo;
         },
         set: function (a) {
-            var b = this.bm;
-            this.bm = a;
-            if (b != this.bm) {
-                this.c5("SVGPath", b, a);
+            var b = this.bo;
+            this.bo = a;
+            if (b != this.bo) {
+                this.c7("SVGPath", b, a);
             }
         },
         enumerable: false,
@@ -6683,13 +6683,13 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
     });
     Object.defineProperty(XIcon.prototype, "svg", {
         get: function () {
-            return this.bl;
+            return this.bn;
         },
         set: function (a) {
-            var b = this.bl;
-            this.bl = a;
-            if (b != this.bl) {
-                this.c5("SVG", b, this.bl);
+            var b = this.bn;
+            this.bn = a;
+            if (b != this.bn) {
+                this.c7("SVG", b, this.bn);
             }
         },
         enumerable: false,
@@ -6703,44 +6703,44 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.a;
             this.a = a;
             if (b != this.a) {
-                this.c5("SVGPaths", b, this.a);
+                this.c7("SVGPaths", b, this.a);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(XIcon.prototype, "df", {
+    Object.defineProperty(XIcon.prototype, "bg", {
         get: function () {
-            return this.de;
+            return this.bd;
         },
         set: function (a) {
-            var b = this.de;
-            this.de = a;
-            if (b != this.de) {
-                this.c5("DataTemplate", b, this.de);
+            var b = this.bd;
+            this.bd = a;
+            if (b != this.bd) {
+                this.c7("DataTemplate", b, this.bd);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(XIcon.prototype, "bf", {
+    Object.defineProperty(XIcon.prototype, "bh", {
         get: function () {
-            return this.bd;
+            return this.be;
         },
         set: function (a) {
-            var b = this.bd;
-            this.bd = a;
-            if (b != this.bd) {
-                this.c5("DataTemplateContext", b, this.bd);
+            var b = this.be;
+            this.be = a;
+            if (b != this.be) {
+                this.c7("DataTemplateContext", b, this.be);
             }
         },
         enumerable: false,
         configurable: true
     });
-    XIcon.prototype.c3 = function () {
+    XIcon.prototype.c5 = function () {
         this.v = true;
     };
-    XIcon.prototype.c4 = function () {
+    XIcon.prototype.c6 = function () {
         this.v = false;
     };
     Object.defineProperty(XIcon.prototype, "o", {
@@ -6751,21 +6751,21 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.n;
             this.n = a;
             if (b != this.n) {
-                this.c5("TextStyle", b, a);
+                this.c7("TextStyle", b, a);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(XIcon.prototype, "ca", {
+    Object.defineProperty(XIcon.prototype, "cc", {
         get: function () {
-            return this.bk;
+            return this.bm;
         },
         set: function (a) {
-            var b = this.bk;
-            this.bk = a;
-            if (b != this.bk) {
-                this.c5("Id", b, a);
+            var b = this.bm;
+            this.bm = a;
+            if (b != this.bm) {
+                this.c7("Id", b, a);
             }
         },
         enumerable: false,
@@ -6787,21 +6787,21 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             this.ba = a;
             this.p = true;
             if (b != this.ba) {
-                this.c5("TabIndex", b, a);
+                this.c7("TabIndex", b, a);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(XIcon.prototype, "bv", {
+    Object.defineProperty(XIcon.prototype, "bx", {
         get: function () {
-            return this.bi;
+            return this.bk;
         },
         set: function (a) {
-            var b = this.bi;
-            this.bi = a;
-            if (b != this.bi) {
-                this.c5("AriaLabel", b, a);
+            var b = this.bk;
+            this.bk = a;
+            if (b != this.bk) {
+                this.c7("AriaLabel", b, a);
             }
         },
         enumerable: false,
@@ -6815,7 +6815,7 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.r;
             this.r = a;
             if (b != this.r) {
-                this.c5("IsHover", b, a);
+                this.c7("IsHover", b, a);
             }
         },
         enumerable: false,
@@ -6829,7 +6829,7 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.q;
             this.q = a;
             if (b != this.q) {
-                this.c5("IsDisabled", b, a);
+                this.c7("IsDisabled", b, a);
             }
         },
         enumerable: false,
@@ -6843,7 +6843,7 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.af;
             this.af = a;
             if (b != this.af) {
-                this.c5("Opacity", b, this.af);
+                this.c7("Opacity", b, this.af);
             }
         },
         enumerable: false,
@@ -6857,7 +6857,7 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.aa;
             this.aa = a;
             if (b != this.aa) {
-                this.c5("ActualViewBoxLeft", b, this.aa);
+                this.c7("ActualViewBoxLeft", b, this.aa);
             }
         },
         enumerable: false,
@@ -6871,7 +6871,7 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.am;
             this.am = a;
             if (b != this.am) {
-                this.c5("ViewBoxLeft", b, this.am);
+                this.c7("ViewBoxLeft", b, this.am);
             }
         },
         enumerable: false,
@@ -6885,7 +6885,7 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.ab;
             this.ab = a;
             if (b != this.ab) {
-                this.c5("ActualViewBoxTop", b, this.ab);
+                this.c7("ActualViewBoxTop", b, this.ab);
             }
         },
         enumerable: false,
@@ -6899,7 +6899,7 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.an;
             this.an = a;
             if (b != this.an) {
-                this.c5("ViewBoxTop", b, this.an);
+                this.c7("ViewBoxTop", b, this.an);
             }
         },
         enumerable: false,
@@ -6913,7 +6913,7 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.ac;
             this.ac = a;
             if (b != this.ac) {
-                this.c5("ActualViewBoxWidth", b, this.ac);
+                this.c7("ActualViewBoxWidth", b, this.ac);
             }
         },
         enumerable: false,
@@ -6927,7 +6927,7 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.ao;
             this.ao = a;
             if (b != this.ao) {
-                this.c5("ViewBoxWidth", b, this.ao);
+                this.c7("ViewBoxWidth", b, this.ao);
             }
         },
         enumerable: false,
@@ -6941,7 +6941,7 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.z;
             this.z = a;
             if (b != this.z) {
-                this.c5("ActualViewBoxHeight", b, this.z);
+                this.c7("ActualViewBoxHeight", b, this.z);
             }
         },
         enumerable: false,
@@ -6955,7 +6955,7 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.al;
             this.al = a;
             if (b != this.al) {
-                this.c5("ViewBoxHeight", b, this.al);
+                this.c7("ViewBoxHeight", b, this.al);
             }
         },
         enumerable: false,
@@ -6969,7 +6969,7 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.ap;
             this.ap = a;
             if (b != this.ap) {
-                this.c5("Width", b, this.ap);
+                this.c7("Width", b, this.ap);
             }
         },
         enumerable: false,
@@ -6983,13 +6983,13 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.ad;
             this.ad = a;
             if (b != this.ad) {
-                this.c5("Height", b, this.ad);
+                this.c7("Height", b, this.ad);
             }
         },
         enumerable: false,
         configurable: true
     });
-    XIcon.prototype.c6 = function () {
+    XIcon.prototype.c8 = function () {
     };
     XIcon.prototype.onDetachedFromUI = function () {
         this.view.am();
@@ -7011,10 +7011,10 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
     XIcon.prototype.w = function () {
         return this.view.l();
     };
-    XIcon.prototype.bg = function () {
+    XIcon.prototype.bi = function () {
         return this.g();
     };
-    XIcon.prototype.b2 = function () {
+    XIcon.prototype.b4 = function () {
         var a = this.g();
         return a.l();
     };
@@ -7029,7 +7029,7 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
         a.a = this.view.a();
         a.svg = this.svg;
         a.svgPath = this.svgPath;
-        a.k = this.b0;
+        a.k = this.b2;
         if (this.o != null) {
             var d = this.o;
             if (this.view != null && d.q == null) {
@@ -7063,7 +7063,7 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
     XIcon.prototype.provideContainer = function (a) {
         this.view.al(a);
     };
-    XIcon.prototype.dd = function (a, b, c, d) {
+    XIcon.prototype.df = function (a, b, c, d) {
         this.ah = a;
         this.ai = b;
         this.aj = c;
@@ -10127,7 +10127,7 @@ var XCalendar = /** @class */ /*@__PURE__*/ (function (_super) {
                 m.d = n[1] - e;
                 m.c = NativeUI.d(k._inner[l].parent());
                 m.f = NativeUI.k(k._inner[l].parent());
-                m.b = AppearanceHelper.a(NativeUI.al(k._inner[l]));
+                m.b = AppearanceHelper.a(NativeUI.ao(k._inner[l]));
                 m.g = k._inner[l].getText();
                 a.k.add(m);
             }
@@ -10140,8 +10140,8 @@ var XCalendar = /** @class */ /*@__PURE__*/ (function (_super) {
                     q.d = r[1] - e;
                     q.c = NativeUI.d(o._inner[p].parent());
                     q.f = NativeUI.k(o._inner[p].parent());
-                    q.b = AppearanceHelper.a(NativeUI.al(o._inner[p]));
-                    q.a = AppearanceHelper.a(NativeUI.ak(o._inner[p]));
+                    q.b = AppearanceHelper.a(NativeUI.ao(o._inner[p]));
+                    q.a = AppearanceHelper.a(NativeUI.an(o._inner[p]));
                     q.g = o._inner[p].getText();
                     a.l.add(q);
                 }
@@ -14731,10 +14731,10 @@ var IgxXIconComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the image source for the icon. Used if none of the other icon types are not used.
         */
         get: function () {
-            return this.i.bh;
+            return this.i.bj;
         },
         set: function (v) {
-            this.i.bh = v;
+            this.i.bj = v;
         },
         enumerable: false,
         configurable: true
@@ -14744,10 +14744,10 @@ var IgxXIconComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets data url for the icon to use.
         */
         get: function () {
-            return this.i.b0;
+            return this.i.b2;
         },
         set: function (v) {
-            this.i.b0 = v;
+            this.i.b2 = v;
         },
         enumerable: false,
         configurable: true
@@ -14818,10 +14818,10 @@ var IgxXIconComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the id to use for the checkbox.
         */
         get: function () {
-            return this.i.ca;
+            return this.i.cc;
         },
         set: function (v) {
-            this.i.ca = v;
+            this.i.cc = v;
         },
         enumerable: false,
         configurable: true
@@ -14844,10 +14844,10 @@ var IgxXIconComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the value of the aria-label attribute.
         */
         get: function () {
-            return this.i.bv;
+            return this.i.bx;
         },
         set: function (v) {
-            this.i.bv = v;
+            this.i.bx = v;
         },
         enumerable: false,
         configurable: true
@@ -15094,7 +15094,7 @@ var IgxXIconComponent = /** @class */ /*@__PURE__*/ (function () {
     
     */
     IgxXIconComponent.prototype.exportVisualModel = function () {
-        var iv = this.i.bg();
+        var iv = this.i.bi();
         return (iv);
     };
     /**
@@ -15102,7 +15102,7 @@ var IgxXIconComponent = /** @class */ /*@__PURE__*/ (function () {
     
     */
     IgxXIconComponent.prototype.exportSerializedVisualModel = function () {
-        var iv = this.i.b2();
+        var iv = this.i.b4();
         return (iv);
     };
     IgxXIconComponent.prototype._runInZone = function (act) {
@@ -16358,7 +16358,7 @@ var InputGroupView = /** @class */ /*@__PURE__*/ (function (_super) {
         g.setStyleProperty("height", "2px");
         g.setStyleProperty("display", "block");
         g.setStyleProperty("pointer-events", "none");
-        NativeUI.af(g, ((function () {
+        NativeUI.ai(g, ((function () {
             var $ret = new ScaleTransform();
             $ret.l = 0.5;
             $ret.m = 1;
@@ -16593,7 +16593,7 @@ var SuffixView = /** @class */ /*@__PURE__*/ (function (_super) {
             $ret.m = 1;
             return $ret;
         })()));
-        NativeUI.af(this.h.rootWrapper, b);
+        NativeUI.ai(this.h.rootWrapper, b);
         this.h.rootWrapper.setStyleProperty("transform-origin", "0px 0px");
     };
     SuffixView.prototype.g = function () {
@@ -16732,7 +16732,7 @@ var PrefixView = /** @class */ /*@__PURE__*/ (function (_super) {
             $ret.m = 1;
             return $ret;
         })()));
-        NativeUI.af(this.h.rootWrapper, b);
+        NativeUI.ai(this.h.rootWrapper, b);
         this.h.rootWrapper.setStyleProperty("transform-origin", "0px 0px");
     };
     PrefixView.prototype.g = function () {
@@ -16875,7 +16875,7 @@ var LabelView = /** @class */ /*@__PURE__*/ (function (_super) {
         c.setStyleProperty("overflow", "hidden");
         c.setStyleProperty("height", "1.125rem");
         c.setStyleProperty("backface-visibility", "hidden");
-        NativeUI.q(this.m.rootWrapper, this.c.c3);
+        NativeUI.r(this.m.rootWrapper, this.c.c3);
         c.setStyleProperty("outline-style", "none");
         c.setStyleProperty("box-shadow", "none");
         c.setStyleProperty("font-family", "Verdana");
@@ -16902,7 +16902,7 @@ var LabelView = /** @class */ /*@__PURE__*/ (function (_super) {
             $ret.m = 1;
             return $ret;
         })()));
-        NativeUI.af(this.m.rootWrapper, a);
+        NativeUI.ai(this.m.rootWrapper, a);
         this.n.setStyleProperty("height", "1.125rem");
         this.m.rootWrapper.setStyleProperty("position", "absolute");
         this.m.rootWrapper.setStyleProperty("transform-origin", "0px 0px");
@@ -17090,7 +17090,7 @@ var LabelView = /** @class */ /*@__PURE__*/ (function (_super) {
         }
     };
     LabelView.prototype.ah = function (a) {
-        NativeUI.q(this.n, a);
+        NativeUI.r(this.n, a);
     };
     LabelView.prototype.e = function () {
         return ((function () {
@@ -17197,7 +17197,7 @@ 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.c.d4);
+        NativeUI.r(c, this.c.d4);
         c.setStyleProperty("outline-style", "none");
         c.setStyleProperty("box-shadow", "none");
         c.setStyleProperty("border-top", "0.1875rem solid transparent");
@@ -17329,7 +17329,7 @@ var InputView = /** @class */ /*@__PURE__*/ (function (_super) {
             $ret.m = 1;
             return $ret;
         })()));
-        NativeUI.af(this.m.rootWrapper, b);
+        NativeUI.ai(this.m.rootWrapper, b);
         this.m.rootWrapper.setStyleProperty("transform-origin", "0px 0px");
     };
     InputView.prototype.l = function () {
@@ -18474,7 +18474,7 @@ var XInputGroup = /** @class */ /*@__PURE__*/ (function (_super) {
                 this.jv();
                 break;
             case "IsDisabled":
-                NativeUI.u(this.view.v, !this.disabled);
+                NativeUI.w(this.view.v, !this.disabled);
                 break;
         }
     };
@@ -18661,44 +18661,44 @@ var XInputGroup = /** @class */ /*@__PURE__*/ (function (_super) {
         var e = this.v != null && this.v.playState == 1;
         var f = this.w != null && this.w.playState == 1;
         var g = this.u != null && this.u.playState == 1;
-        NativeUI.o(a, this.ko);
-        NativeUI.o(b, this.ko);
-        NativeUI.m(a, this.l5);
-        NativeUI.z(a, this.oe);
+        NativeUI.p(a, this.ko);
+        NativeUI.p(b, this.ko);
+        NativeUI.n(a, this.l5);
+        NativeUI.ac(a, this.oe);
         if (this.ao) {
             if (!g) {
-                NativeUI.n(b, this.l7);
-                NativeUI.p(b, new Thickness(0, this.ch));
+                NativeUI.o(b, this.l7);
+                NativeUI.q(b, new Thickness(0, this.ch));
             }
             if (!f) {
-                NativeUI.m(c, this.l8);
+                NativeUI.n(c, this.l8);
             }
         }
         else {
             if (!f) {
                 if (this.ap) {
-                    NativeUI.m(c, this.l9);
-                    NativeUI.y(c, this.ck);
-                    NativeUI.t(c, this.cl);
+                    NativeUI.n(c, this.l9);
+                    NativeUI.ab(c, this.ck);
+                    NativeUI.v(c, this.cl);
                 }
                 else {
-                    NativeUI.m(c, this.ma);
-                    NativeUI.y(c, this.cm);
-                    NativeUI.t(c, this.cp);
+                    NativeUI.n(c, this.ma);
+                    NativeUI.ab(c, this.cm);
+                    NativeUI.v(c, this.cp);
                 }
             }
             if (!g) {
-                NativeUI.n(b, this.l6);
-                NativeUI.p(b, new Thickness(0, this.cg));
+                NativeUI.o(b, this.l6);
+                NativeUI.q(b, new Thickness(0, this.cg));
             }
             if (!f) {
-                NativeUI.m(a, this.l5);
+                NativeUI.n(a, this.l5);
             }
         }
         if (!e) {
-            NativeUI.m(d, this.mb);
-            NativeUI.t(d, this.co);
-            NativeUI.y(d, this.cn);
+            NativeUI.n(d, this.mb);
+            NativeUI.v(d, this.co);
+            NativeUI.ab(d, this.cn);
         }
     };
     Object.defineProperty(XInputGroup.prototype, "a", {
@@ -21967,7 +21967,7 @@ var XLabel = /** @class */ /*@__PURE__*/ (function (_super) {
         a.c = this.p;
         a.e = this.t;
         a.d = this.s;
-        a.a = AppearanceHelper.a(NativeUI.al(b));
+        a.a = AppearanceHelper.a(NativeUI.ao(b));
         a.b = this.l;
         a.i = this.ap;
         a.g = this.an;
@@ -22317,7 +22317,7 @@ var XInput = /** @class */ /*@__PURE__*/ (function (_super) {
         if (this.ad != null) {
             this.view.bc(this.ad);
         }
-        NativeUI.q(this.view.r, this.d4);
+        NativeUI.r(this.view.r, this.d4);
         this.view.a7();
     };
     Object.defineProperty(XInput.prototype, "d4", {
@@ -22765,7 +22765,7 @@ var XInput = /** @class */ /*@__PURE__*/ (function (_super) {
         a.l = this.ce;
         a.o = this.ci;
         a.d = this.au;
-        a.a = AppearanceHelper.a(NativeUI.al(b));
+        a.a = AppearanceHelper.a(NativeUI.ao(b));
         a.k = this.b8;
         a.n = this.cg;
         a.e = this.aw;
@@ -30352,7 +30352,8 @@ var XComponentBridge = /** @class */ /*@__PURE__*/ (function (_super) {
             case 15:
             case 17:
             case 7:
-            case 21: return b;
+            case 21:
+            case 1: return b;
         }
         return this.s != null ? this.s : b;
     };
@@ -30364,7 +30365,8 @@ var XComponentBridge = /** @class */ /*@__PURE__*/ (function (_super) {
     };
     XComponentBridge.prototype.getTargetForBuildInProperty = function (a, b) {
         switch (b) {
-            case 108: return a;
+            case 109:
+            case 122: return a;
         }
         return this.s != null ? this.s : a;
     };
@@ -30623,18 +30625,18 @@ var XInputBridge = /** @class */ /*@__PURE__*/ (function (_super) {
         var c = a;
         var d = typeCast(XInput.$, c.inputs._inner[0]);
         switch (b) {
-            case 103: return a.mc;
+            case 104: return a.mc;
             case 3:
                 this.an(a);
                 var e = this.v(a);
                 return e.text;
-            case 100:
+            case 101:
                 this.ao(a);
                 return this.u.svgPath;
-            case 101:
+            case 102:
                 this.ao(a);
                 return this.u.fill;
-            case 102:
+            case 103:
                 this.ao(a);
                 return this.u.ea;
             case 2: return d.cq;
@@ -30670,11 +30672,11 @@ var XInputBridge = /** @class */ /*@__PURE__*/ (function (_super) {
                 }
                 break;
             case 21: return d.a1;
-            case 32: return d.disabled;
-            case 33: return d.d8;
-            case 105: return d.selectionStart;
-            case 106: return d.selectionEnd;
-            case 107: return c.an;
+            case 33: return d.disabled;
+            case 34: return d.d8;
+            case 106: return d.selectionStart;
+            case 107: return d.selectionEnd;
+            case 108: return c.an;
         }
         return null;
     };
@@ -30682,7 +30684,7 @@ var XInputBridge = /** @class */ /*@__PURE__*/ (function (_super) {
         var d = a;
         var e = typeCast(XInput.$, d.inputs._inner[0]);
         switch (b) {
-            case 103:
+            case 104:
                 a.mc = c;
                 break;
             case 3:
@@ -30690,15 +30692,15 @@ var XInputBridge = /** @class */ /*@__PURE__*/ (function (_super) {
                 var f = this.v(a);
                 f.text = c;
                 break;
-            case 100:
+            case 101:
                 this.ao(a);
                 this.u.svgPath = c;
                 break;
-            case 101:
+            case 102:
                 this.ao(a);
                 this.u.fill = c;
                 break;
-            case 102:
+            case 103:
                 this.ao(a);
                 this.u.ea = c;
                 break;
@@ -30769,19 +30771,19 @@ var XInputBridge = /** @class */ /*@__PURE__*/ (function (_super) {
             case 21:
                 e.a1 = c;
                 break;
-            case 32:
+            case 33:
                 e.disabled = c;
                 break;
-            case 33:
+            case 34:
                 e.d8 = c;
                 break;
-            case 105:
+            case 106:
                 e.selectionStart = typeGetValue(c);
                 break;
-            case 106:
+            case 107:
                 e.selectionEnd = typeGetValue(c);
                 break;
-            case 107:
+            case 108:
                 d.an = c;
                 break;
         }
@@ -30948,7 +30950,7 @@ var XButtonBridge = /** @class */ /*@__PURE__*/ (function (_super) {
                 d.clearButtonContent();
                 if (typeCast(NativeUIComponent.$, c) !== null) {
                     this.ac = c;
-                    d.appendButtonContent(this.ac.an);
+                    d.appendButtonContent(this.ac.ao);
                 }
                 else {
                     this.ac = c;
@@ -30979,10 +30981,10 @@ var XButtonBridge = /** @class */ /*@__PURE__*/ (function (_super) {
             case 18:
                 d.o = EnumUtil.getEnumValue(BaseControlTheme_$type, c);
                 break;
-            case 54:
+            case 55:
                 if (typeCast(NativeUIComponent.$, c) !== null) {
                     this.aa = c;
-                    d.appendButtonContent(this.aa.an);
+                    d.appendButtonContent(this.aa.ao);
                 }
                 break;
             case 0:
@@ -31007,7 +31009,7 @@ var XButtonBridge = /** @class */ /*@__PURE__*/ (function (_super) {
             case 4:
                 d.ax = c;
                 break;
-            case 32:
+            case 33:
                 d.disabled = c;
                 break;
             case 5:
@@ -31019,19 +31021,19 @@ var XButtonBridge = /** @class */ /*@__PURE__*/ (function (_super) {
             case 24:
                 d.ql = c;
                 break;
-            case 55:
+            case 56:
                 d.bn = c.left;
                 d.bp = c.top;
                 d.bo = c.right;
                 d.bm = c.bottom;
                 break;
-            case 57:
+            case 58:
                 d.az = c;
                 break;
-            case 56:
+            case 57:
                 d.aw = c;
                 break;
-            case 58:
+            case 59:
                 d.au = c;
                 break;
             case 17:
@@ -31040,13 +31042,13 @@ var XButtonBridge = /** @class */ /*@__PURE__*/ (function (_super) {
             case 11:
                 d.ab = c;
                 break;
-            case 88:
+            case 89:
                 d.bz = c;
                 break;
-            case 59:
+            case 60:
                 d.a6 = c;
                 break;
-            case 118:
+            case 119:
                 d.n7 = c;
                 break;
             case 23:
@@ -31058,7 +31060,7 @@ var XButtonBridge = /** @class */ /*@__PURE__*/ (function (_super) {
         var c = a;
         switch (b) {
             case 3: return this.ac;
-            case 54: return this.aa;
+            case 55: return this.aa;
             case 1:
                 switch (c.s) {
                     case 0: return enumGetBox(NativeUIDisplayDensity_$type, 0);
@@ -31079,18 +31081,18 @@ var XButtonBridge = /** @class */ /*@__PURE__*/ (function (_super) {
                 }
                 return enumGetBox(NativeUIButtonDisplayType_$type, 0);
             case 4: return c.ax;
-            case 32: return c.disabled;
+            case 33: return c.disabled;
             case 5: return c.av;
             case 6: return !c.a3;
             case 24: return c.ql;
-            case 55: return new Thickness(1, c.bn, c.bp, c.bo, c.bm);
-            case 57: return c.az;
-            case 56: return c.aw;
-            case 58: return c.au;
+            case 56: return new Thickness(1, c.bn, c.bp, c.bo, c.bm);
+            case 58: return c.az;
+            case 57: return c.aw;
+            case 59: return c.au;
             case 17: return c.k6;
-            case 88: return c.bz;
-            case 59: return c.a6;
-            case 118: return c.n7;
+            case 89: return c.bz;
+            case 60: return c.a6;
+            case 119: return c.n7;
             case 23: return c.n6;
         }
         return null;
@@ -32314,7 +32316,7 @@ var MultiSliderView = /** @class */ /*@__PURE__*/ (function (_super) {
         this.m = true;
         this.ap();
         if (this.a != null) {
-            this.a.au(this.u.rootWrapper, "");
+            this.a.av(this.u.rootWrapper, "");
         }
         if (this.z == -1) {
             this.z = this.u.setTimeout(runOn(this, this.an), 200);
@@ -32323,7 +32325,7 @@ var MultiSliderView = /** @class */ /*@__PURE__*/ (function (_super) {
     MultiSliderView.prototype.au = function () {
         this.m = false;
         if (this.a != null && this.u != null) {
-            this.a.bi(this.u.rootWrapper, "");
+            this.a.bk(this.u.rootWrapper, "");
         }
         if (this.z != -1) {
             window.clearTimeout(this.z);
@@ -32366,8 +32368,8 @@ var MultiSliderView = /** @class */ /*@__PURE__*/ (function (_super) {
             this.w = truncate(Math.round(d));
         }
         if (this.l.d && this.t != 1) {
-            this.l.aa();
-            this.l.ab(this.t, this.t);
+            this.l.ac();
+            this.l.ad(this.t, this.t);
         }
         this.l.l(this.g.e0.left, this.g.e0.top, this.g.e0.width, this.g.e0.height);
         for (var e = 0; e < this.r.count; e++) {
@@ -32389,29 +32391,29 @@ var MultiSliderView = /** @class */ /*@__PURE__*/ (function (_super) {
             this.a1(this.r._inner[i].allPaths);
         }
         if (this.l.d && this.t != 1) {
-            this.l.z();
+            this.l.ab();
         }
     };
     MultiSliderView.prototype.a2 = function (a) {
         if (a.j != null) {
-            this.l.aa();
+            this.l.ac();
         }
         this.l.k(a.j);
-        this.l.x(a);
+        this.l.y(a);
         if (a.j != null) {
-            this.l.z();
+            this.l.ab();
         }
     };
     MultiSliderView.prototype.a1 = function (a) {
         for (var b = 0; b < a.count; b++) {
             var c = a.item(b);
             if (c.j != null) {
-                this.l.aa();
+                this.l.ac();
             }
             this.l.k(c.j);
             this.l.t(c);
             if (c.j != null) {
-                this.l.z();
+                this.l.ab();
             }
         }
     };
@@ -32484,17 +32486,17 @@ var MultiSliderView = /** @class */ /*@__PURE__*/ (function (_super) {
         this.v = i;
         var j = this.u.get2DCanvasContext(this.v);
         this.l = new RenderingContext(new CanvasViewRenderer(), j);
-        this.l.af(this.j);
+        this.l.ah(this.j);
         this.ab();
         this.a = new CanvasGestureDOMEventProxy(this.u.rootWrapper, this.u, false);
-        this.a.bm = this.g.e0;
+        this.a.bo = this.g.e0;
         var k = this.a;
         k.onContactStarted = delegateCombine(k.onContactStarted, runOn(this, this.aj));
         var l = this.a;
         l.onContactMoved = delegateCombine(l.onContactMoved, runOn(this, this.ai));
         var m = this.a;
         m.onContactCompleted = delegateCombine(m.onContactCompleted, runOn(this, this.ah));
-        this.a.ap = function (n) { return _this.g.ey.containsPoint(n); };
+        this.a.aq = function (n) { return _this.g.ey.containsPoint(n); };
         this.g.ds(0, 0, e, f);
         this.s = FontUtil.getCurrentFontHeight(this.u, this.j);
         this.g.trackDirty();
@@ -32517,8 +32519,8 @@ var MultiSliderView = /** @class */ /*@__PURE__*/ (function (_super) {
             b.onContactMoved = delegateRemove(b.onContactMoved, runOn(this, this.ai));
             var c = this.a;
             c.onContactCompleted = delegateRemove(c.onContactCompleted, runOn(this, this.ah));
-            this.a.ap = null;
-            this.a.aw();
+            this.a.aq = null;
+            this.a.ax();
         }
     };
     MultiSliderView.prototype.ay = function () {
@@ -32537,7 +32539,7 @@ var MultiSliderView = /** @class */ /*@__PURE__*/ (function (_super) {
         if (a || d) {
             this.g.ds(0, 0, b, c);
             if (this.a != null) {
-                this.a.bm = this.g.e0;
+                this.a.bo = this.g.e0;
             }
         }
     };
@@ -32559,7 +32561,7 @@ var MultiSliderView = /** @class */ /*@__PURE__*/ (function (_super) {
             this.i = c;
             this.j = this.i;
             this.s = FontUtil.getCurrentFontHeight(this.u, this.j);
-            this.l.af(this.i);
+            this.l.ah(this.i);
             this.g.trackDirty();
         }
     };
@@ -34315,15 +34317,15 @@ var MultiSliderBridge = /** @class */ /*@__PURE__*/ (function (_super) {
         switch (b) {
             case 12: return a.bg;
             case 13: return a.bf;
-            case 97: return a.bv;
-            case 98: return a.bf;
+            case 98: return a.bv;
+            case 99: return a.bf;
             case 14: return a.bl;
             case 2: return a.thumbs._inner[0].s;
-            case 92: return a.b0;
-            case 93: return a.ek;
-            case 94: return a.es;
-            case 96: return a.eu;
-            case 95: return a.et;
+            case 93: return a.b0;
+            case 94: return a.ek;
+            case 95: return a.es;
+            case 97: return a.eu;
+            case 96: return a.et;
             case 30:
                 var c = a.e;
                 switch (c) {
@@ -34363,10 +34365,10 @@ var MultiSliderBridge = /** @class */ /*@__PURE__*/ (function (_super) {
             case 13:
                 a.bf = c;
                 break;
-            case 97:
+            case 98:
                 a.bv = c;
                 break;
-            case 98:
+            case 99:
                 a.bu = c;
                 break;
             case 14:
@@ -34375,19 +34377,19 @@ var MultiSliderBridge = /** @class */ /*@__PURE__*/ (function (_super) {
             case 2:
                 a.thumbs._inner[0].s = c;
                 break;
-            case 92:
+            case 93:
                 a.b0 = c;
                 break;
-            case 93:
+            case 94:
                 a.ek = c;
                 break;
-            case 94:
+            case 95:
                 a.es = c;
                 break;
-            case 96:
+            case 97:
                 a.eu = c;
                 break;
-            case 95:
+            case 96:
                 a.et = c;
                 break;
             case 30:
@@ -36316,17 +36318,17 @@ var XButtonGroupBridge = /** @class */ /*@__PURE__*/ (function (_super) {
                 }
                 return enumGetBox(NativeUIDisplayDensity_$type, e);
             case 18: return enumGetBox(BaseControlTheme_$type, c.q);
-            case 87: return c.d;
+            case 88: return c.d;
             case 0:
                 switch (c.i) {
                     case 0: return enumGetBox(NativeUIButtonGroupDisplayType_$type, 0);
                     case 1: return enumGetBox(NativeUIButtonGroupDisplayType_$type, 1);
                 }
                 return enumGetBox(NativeUIButtonDisplayType_$type, 0);
-            case 32: return c.disabled;
+            case 33: return c.disabled;
             case 24: return c.ht;
             case 17: return c.a2;
-            case 119: return c.hp;
+            case 120: return c.hp;
         }
         return null;
     };
@@ -36357,7 +36359,7 @@ var XButtonGroupBridge = /** @class */ /*@__PURE__*/ (function (_super) {
             case 18:
                 d.q = EnumUtil.getEnumValue(BaseControlTheme_$type, c);
                 break;
-            case 87:
+            case 88:
                 d.d = c;
                 break;
             case 0:
@@ -36370,7 +36372,7 @@ var XButtonGroupBridge = /** @class */ /*@__PURE__*/ (function (_super) {
                         break;
                 }
                 break;
-            case 32:
+            case 33:
                 d.disabled = c;
                 break;
             case 24:
@@ -36379,7 +36381,7 @@ var XButtonGroupBridge = /** @class */ /*@__PURE__*/ (function (_super) {
             case 17:
                 d.a2 = c.e;
                 break;
-            case 119:
+            case 120:
                 d.hp = c;
                 break;
         }
@@ -36396,7 +36398,7 @@ var XButtonGroupBridge = /** @class */ /*@__PURE__*/ (function (_super) {
     XButtonGroupBridge.prototype.addButton = function (a, b) {
         this.v.add(b);
         a.buttons.add(b.d.getMethodTarget(null));
-        a.appendContentChild(b.an);
+        a.appendContentChild(b.ao);
     };
     XButtonGroupBridge.prototype.updateButton = function (a, b, c) {
         this.v._inner[b] = c;
@@ -36405,7 +36407,7 @@ var XButtonGroupBridge = /** @class */ /*@__PURE__*/ (function (_super) {
     XButtonGroupBridge.prototype.insertButton = function (a, b, c) {
         this.v.insert(b, c);
         a.buttons.insert(b, c.d.getMethodTarget(null));
-        a.appendContentChild(c.an);
+        a.appendContentChild(c.ao);
     };
     XButtonGroupBridge.prototype.removeButton = function (a, b) {
         this.v.removeAt(b);
@@ -37074,18 +37076,18 @@ var XCheckbox = /** @class */ /*@__PURE__*/ (function (_super) {
         if (a == null || b == null) {
             return;
         }
-        NativeUI.o(a, new CornerRadius(0, this.ao));
-        NativeUI.o(b, new CornerRadius(0, this.ao));
+        NativeUI.p(a, new CornerRadius(0, this.ao));
+        NativeUI.p(b, new CornerRadius(0, this.ao));
         if (!isNaN_(this.an)) {
-            NativeUI.p(b, new Thickness(0, this.an));
+            NativeUI.q(b, new Thickness(0, this.an));
         }
         if (this.checked) {
-            NativeUI.m(a, this.c8);
-            NativeUI.n(b, this.c9);
+            NativeUI.n(a, this.c8);
+            NativeUI.o(b, this.c9);
         }
         else {
-            NativeUI.m(a, this.db);
-            NativeUI.n(b, this.dc);
+            NativeUI.n(a, this.db);
+            NativeUI.o(b, this.dc);
         }
     };
     XCheckbox.prototype.cw = function () {
@@ -37093,8 +37095,8 @@ var XCheckbox = /** @class */ /*@__PURE__*/ (function (_super) {
         if (a == null) {
             return;
         }
-        NativeUI.aa(a, this.da);
-        NativeUI.ad(a, this.ap);
+        NativeUI.ad(a, this.da);
+        NativeUI.ag(a, this.ap);
     };
     Object.defineProperty(XCheckbox.prototype, "dl", {
         get: function () {
@@ -37649,7 +37651,7 @@ var XCheckbox = /** @class */ /*@__PURE__*/ (function (_super) {
             this.view.al(BrushUtil.u(this.c8, 0.6), BrushUtil.u(this.dc, 0.1));
         }
         if (!this.indeterminate) {
-            NativeUI.af(this.view.v, null);
+            NativeUI.ai(this.view.v, null);
         }
         if (this.z || this.indeterminate || a) {
             var d = this.view.u;
@@ -37668,23 +37670,23 @@ var XCheckbox = /** @class */ /*@__PURE__*/ (function (_super) {
                     $ret.j = -_this.view.l();
                     return $ret;
                 })()));
-                NativeUI.m(d, this.c8);
-                NativeUI.n(e, this.c9);
-                NativeUI.y(f, 1);
-                NativeUI.ac(f, 41);
-                NativeUI.af(f, g);
+                NativeUI.n(d, this.c8);
+                NativeUI.o(e, this.c9);
+                NativeUI.ab(f, 1);
+                NativeUI.af(f, 41);
+                NativeUI.ai(f, g);
             }
             else if (b) {
-                NativeUI.m(d, this.c8);
-                NativeUI.n(e, this.c9);
-                NativeUI.y(f, 1);
-                NativeUI.ac(f, 0);
+                NativeUI.n(d, this.c8);
+                NativeUI.o(e, this.c9);
+                NativeUI.ab(f, 1);
+                NativeUI.af(f, 0);
             }
             else {
-                NativeUI.m(d, this.db);
-                NativeUI.n(e, this.dc);
-                NativeUI.y(f, 0);
-                NativeUI.ac(f, 24);
+                NativeUI.n(d, this.db);
+                NativeUI.o(e, this.dc);
+                NativeUI.ab(f, 0);
+                NativeUI.af(f, 24);
             }
             if (this.o.playState == 1) {
                 this.o.cancel();
@@ -37902,10 +37904,10 @@ var XCheckboxBridge = /** @class */ /*@__PURE__*/ (function (_super) {
             case 7: return c.checked;
             case 18: return enumGetBox(BaseControlTheme_$type, c.n);
             case 17: return c.ar;
-            case 66: return c.dl;
-            case 68: return c.dm;
-            case 67: return c.dd;
-            case 69: return c.de;
+            case 67: return c.dl;
+            case 69: return c.dm;
+            case 68: return c.dd;
+            case 70: return c.de;
         }
         return null;
     };
@@ -37924,16 +37926,16 @@ var XCheckboxBridge = /** @class */ /*@__PURE__*/ (function (_super) {
             case 17:
                 d.ar = c;
                 break;
-            case 66:
+            case 67:
                 d.dl = c;
                 break;
-            case 68:
+            case 69:
                 d.dm = c;
                 break;
-            case 67:
+            case 68:
                 d.dd = c;
                 break;
-            case 69:
+            case 70:
                 d.de = c;
                 break;
         }
@@ -37969,15 +37971,15 @@ var XIconBridge = /** @class */ /*@__PURE__*/ (function (_super) {
             case 16: return this.v;
             case 15: return this.u;
             case 18: return enumGetBox(BaseControlTheme_$type, c.m);
-            case 44: return c.a6;
-            case 45: return c.a7;
-            case 46: return c.a8;
-            case 47: return c.a5;
-            case 48: return c.a9;
-            case 49: return c.a1;
-            case 63: return c.e;
-            case 64: return c.f;
-            case 65: return c.a4;
+            case 45: return c.a6;
+            case 46: return c.a7;
+            case 47: return c.a8;
+            case 48: return c.a5;
+            case 49: return c.a9;
+            case 50: return c.a1;
+            case 64: return c.e;
+            case 65: return c.f;
+            case 66: return c.a4;
         }
         return _super.prototype.getValue.call(this, a, b);
     };
@@ -37997,31 +37999,31 @@ var XIconBridge = /** @class */ /*@__PURE__*/ (function (_super) {
                     this.w(d);
                 }
                 break;
-            case 44:
+            case 45:
                 d.a6 = c;
                 break;
-            case 45:
+            case 46:
                 d.a7 = c;
                 break;
-            case 46:
+            case 47:
                 d.a8 = c;
                 break;
-            case 47:
+            case 48:
                 d.a5 = c;
                 break;
-            case 48:
+            case 49:
                 d.a9 = c;
                 break;
-            case 49:
+            case 50:
                 d.a1 = c;
                 break;
-            case 63:
+            case 64:
                 d.e = c;
                 break;
-            case 64:
+            case 65:
                 d.f = c;
                 break;
-            case 65:
+            case 66:
                 d.a4 = c;
                 break;
         }
@@ -38036,8 +38038,8 @@ var XIconBridge = /** @class */ /*@__PURE__*/ (function (_super) {
         a.svg = null;
         a.svgPath = null;
         a.b = null;
-        a.b0 = null;
-        a.bh = null;
+        a.b2 = null;
+        a.bj = null;
         var b = SvgIconRegistry.instance.getSvgPathString(this.u, this.v);
         if (b != null) {
             if (stringStartsWith(trimStart(b, ' ', '\n', '\r', '\t'), "<svg")) {
@@ -38055,16 +38057,16 @@ var XIconBridge = /** @class */ /*@__PURE__*/ (function (_super) {
         }
         var d = SvgIconRegistry.instance.getDataURLString(this.u, this.v);
         if (d != null) {
-            a.b0 = d;
+            a.b2 = d;
             return;
         }
         var e = SvgIconRegistry.instance.getIconSource(this.u, this.v);
         if (e != null) {
-            a.bh = e;
+            a.bj = e;
         }
     };
     XIconBridge.prototype.exportVisualData = function (a) {
-        var b = a.bg();
+        var b = a.bi();
         return b;
     };
     XIconBridge.$t = markType(XIconBridge, 'XIconBridge', XComponentBridge.$);
@@ -38230,28 +38232,28 @@ var XPopupBridge = /** @class */ /*@__PURE__*/ (function (_super) {
         var c = a;
         switch (b) {
             case 22: return c.ax;
-            case 60: return c.av;
-            case 61: return c.aq;
+            case 61: return c.av;
+            case 62: return c.aq;
             case 25: return c.am;
             case 26: return c.a9;
             case 17: return c.a1;
             case 23: return c.c0;
-            case 35: switch (c.p) {
+            case 36: switch (c.p) {
                 case 1: return enumGetBox(NativeUIPopupAnimationType_$type, 1);
                 default: return enumGetBox(NativeUIPopupAnimationType_$type, 0);
             }
-            case 36: return c.at;
-            case 37: return c.as;
-            case 40: return c.bb;
-            case 41: return c.au;
-            case 43: switch (c.v) {
+            case 37: return c.at;
+            case 38: return c.as;
+            case 41: return c.bb;
+            case 42: return c.au;
+            case 44: switch (c.v) {
                 case 1: return enumGetBox(NativeUIPopupPointerPosition_$type, 1);
                 default: return enumGetBox(NativeUIPopupPointerPosition_$type, 2);
             }
-            case 42: return c.c4;
-            case 39: return c.ao;
-            case 62: return c.a4;
-            case 110: return c.ay;
+            case 43: return c.c4;
+            case 40: return c.ao;
+            case 63: return c.a4;
+            case 111: return c.ay;
         }
         return _super.prototype.getValue.call(this, a, b);
     };
@@ -38270,7 +38272,7 @@ var XPopupBridge = /** @class */ /*@__PURE__*/ (function (_super) {
             case 23:
                 d.c0 = c;
                 break;
-            case 35:
+            case 36:
                 switch (EnumUtil.getEnumValue(NativeUIPopupAnimationType_$type, c)) {
                     case 1:
                         d.p = 1;
@@ -38280,22 +38282,22 @@ var XPopupBridge = /** @class */ /*@__PURE__*/ (function (_super) {
                         break;
                 }
                 break;
-            case 36:
+            case 37:
                 d.at = c;
                 break;
-            case 37:
+            case 38:
                 d.as = c;
                 break;
-            case 40:
+            case 41:
                 d.bb = typeGetValue(c);
                 break;
-            case 41:
+            case 42:
                 d.au = c;
                 break;
-            case 42:
+            case 43:
                 d.c4 = c;
                 break;
-            case 43:
+            case 44:
                 switch (EnumUtil.getEnumValue(NativeUIPopupPointerPosition_$type, c)) {
                     case 1:
                         d.v = 1;
@@ -38305,13 +38307,13 @@ var XPopupBridge = /** @class */ /*@__PURE__*/ (function (_super) {
                         break;
                 }
                 break;
-            case 39:
+            case 40:
                 d.ao = c;
                 break;
-            case 62:
+            case 63:
                 d.a4 = c;
                 break;
-            case 110:
+            case 111:
                 d.ay = c;
                 break;
         }
@@ -38321,7 +38323,7 @@ var XPopupBridge = /** @class */ /*@__PURE__*/ (function (_super) {
         a.showRelativeToExclusionRect(b, this.v(c), this.u(d));
     };
     XPopupBridge.prototype.showRelativeToTarget = function (a, b, c, d) {
-        var e = b.an.getNativeElement();
+        var e = b.ao.getNativeElement();
         a.cr(e, this.v(c), this.u(d));
     };
     XPopupBridge.prototype.close = function (a) {
@@ -38353,17 +38355,17 @@ var XPopupBridge = /** @class */ /*@__PURE__*/ (function (_super) {
         }
     };
     XPopupBridge.prototype.exportVisualData = function (a) {
-        return a.bg();
+        return a.bi();
     };
     XPopupBridge.prototype.addChild = function (a, b) {
         this.ae.add(b);
         var c = a;
-        c.appendPopupContent(b.an);
+        c.appendPopupContent(b.ao);
     };
     XPopupBridge.prototype.insertChild = function (a, b, c) {
         this.ae.add(c);
         var d = a;
-        d.appendPopupContent(c.an);
+        d.appendPopupContent(c.ao);
     };
     XPopupBridge.prototype.getChildAt = function (a, b) {
         return this.ae._inner[b];
@@ -38373,12 +38375,12 @@ var XPopupBridge = /** @class */ /*@__PURE__*/ (function (_super) {
     };
     XPopupBridge.prototype.removeChild = function (a, b) {
         var c = a;
-        c.removePopupContent(b.an);
+        c.removePopupContent(b.ao);
         this.ae.remove(b);
     };
     XPopupBridge.prototype.removeChildAt = function (a, b) {
         var c = a;
-        c.removePopupContent(this.ae._inner[b].an);
+        c.removePopupContent(this.ae._inner[b].ao);
         this.ae.removeAt(b);
     };
     XPopupBridge.$t = markType(XPopupBridge, 'XPopupBridge', XComponentBridge.$, [INativeUIPopupBridge_$type]);
@@ -38546,7 +38548,7 @@ var NativeUIXInputsFactory = /** @class */ /*@__PURE__*/ (function (_super) {
         configurable: true
     });
     NativeUIXInputsFactory.m = function () {
-        NativeUIComponent.as(NativeUIXInputsFactory.b);
+        NativeUIComponent.at(NativeUIXInputsFactory.b);
     };
     Object.defineProperty(NativeUIXInputsFactory.prototype, "flavor", {
         get: function () {
@@ -38620,7 +38622,7 @@ var NativeUIXInputsFactory = /** @class */ /*@__PURE__*/ (function (_super) {
         f.inputs.add(j);
         var l = new XInputBridge(f);
         var m = new NativeUIInput();
-        m.an = d;
+        m.ao = d;
         m.d = l;
         b(m);
     };
@@ -38634,7 +38636,7 @@ var NativeUIXInputsFactory = /** @class */ /*@__PURE__*/ (function (_super) {
         var g = e.getExternal(f, e.rootWrapper, e.getExternal(f, null, null));
         var h = new XButtonBridge(f);
         var i = new NativeUIButton();
-        i.an = d;
+        i.ao = d;
         i.d = h;
         b(i);
     };
@@ -38649,7 +38651,7 @@ var NativeUIXInputsFactory = /** @class */ /*@__PURE__*/ (function (_super) {
         var h = e.getExternal(f, e.rootWrapper, e.getExternal(f, null, null));
         var i = new MultiSliderBridge(f);
         var j = new NativeUISlider();
-        j.an = d;
+        j.ao = d;
         j.d = i;
         b(j);
     };
@@ -38662,7 +38664,7 @@ var NativeUIXInputsFactory = /** @class */ /*@__PURE__*/ (function (_super) {
         var g = e.getExternal(f, e.rootWrapper, e.getExternal(f, null, null));
         var h = new XButtonGroupBridge(f);
         var i = new NativeUIButtonGroup();
-        i.an = d;
+        i.ao = d;
         i.d = h;
         b(i);
     };
@@ -38675,7 +38677,7 @@ var NativeUIXInputsFactory = /** @class */ /*@__PURE__*/ (function (_super) {
         var g = e.getExternal(f, e.rootWrapper, e.getExternal(f, null, null));
         var h = new ColorEditorBridge(f);
         var i = new NativeUIColorEditor();
-        i.an = d;
+        i.ao = d;
         i.d = h;
         b(i);
     };
@@ -38688,7 +38690,7 @@ var NativeUIXInputsFactory = /** @class */ /*@__PURE__*/ (function (_super) {
         var g = e.getExternal(f, e.rootWrapper, e.getExternal(f, null, null));
         var h = new XCheckboxBridge(f);
         var i = new NativeUICheckbox();
-        i.an = d;
+        i.ao = d;
         i.d = h;
         b(i);
     };
@@ -38701,7 +38703,7 @@ var NativeUIXInputsFactory = /** @class */ /*@__PURE__*/ (function (_super) {
         var g = e.getExternal(f, e.rootWrapper, e.getExternal(f, null, null));
         var h = new XIconBridge(f);
         var i = new NativeUIIcon();
-        i.an = d;
+        i.ao = d;
         i.d = h;
         var j = c.createElement("div");
         var k = c.getSubRenderer(j);
@@ -38712,9 +38714,9 @@ var NativeUIXInputsFactory = /** @class */ /*@__PURE__*/ (function (_super) {
         var m = k.getExternal(l, k.rootWrapper, k.getExternal(l, null, null));
         var n = new XButtonBridge(l);
         var o = new NativeUIButton();
-        o.an = j;
+        o.ao = j;
         o.d = n;
-        o.bo = i;
+        o.bp = i;
         b(o);
     };
     NativeUIXInputsFactory.prototype.h = function (a, b) {
@@ -38726,7 +38728,7 @@ var NativeUIXInputsFactory = /** @class */ /*@__PURE__*/ (function (_super) {
         var g = e.getExternal(f, e.rootWrapper, e.getExternal(f, null, null));
         var h = new XIconBridge(f);
         var i = new NativeUIIcon();
-        i.an = d;
+        i.ao = d;
         i.d = h;
         b(i);
     };
@@ -38738,7 +38740,7 @@ var NativeUIXInputsFactory = /** @class */ /*@__PURE__*/ (function (_super) {
         f.provideRenderer(e);
         var g = new XPopupBridge(f);
         var h = new NativeUIPopup();
-        h.an = d;
+        h.ao = d;
         h.d = g;
         b(h);
     };
@@ -38948,7 +38950,7 @@ var ColorEditorPanelView = /** @class */ /*@__PURE__*/ (function (_super) {
     ColorEditorPanelView.prototype.bf = function (a) {
     };
     ColorEditorPanelView.prototype.a8 = function (a) {
-        this.aa.append(this.aa.getWrapper(a.an));
+        this.aa.append(this.aa.getWrapper(a.ao));
     };
     ColorEditorPanelView.prototype.be = function (a, b, c, d, e, f, g) {
         var h = truncate(Math.round(f * this.a.ab));
@@ -38971,8 +38973,8 @@ var ColorEditorPanelView = /** @class */ /*@__PURE__*/ (function (_super) {
         };
     };
     ColorEditorPanelView.prototype.ba = function (a) {
-        if (this.ae == null || a.ao == null) {
-            a.ao = "image";
+        if (this.ae == null || a.ap == null) {
+            a.ap = "image";
             var b = this.aa.createElement("canvas");
             this.ae = b;
             var c = this.be(this.ae, this.m, this.l, this.au, this.at, 148, 148);
@@ -38982,7 +38984,7 @@ var ColorEditorPanelView = /** @class */ /*@__PURE__*/ (function (_super) {
             this.at = c.p4;
             this.ae.setStyleProperty("justify-self", "center");
             this.ae.setStyleProperty("align-self", "center");
-            var d = a.an;
+            var d = a.ao;
             d.append(this.ae);
             this.bm(this.a.ad());
         }
@@ -39016,8 +39018,8 @@ var ColorEditorPanelView = /** @class */ /*@__PURE__*/ (function (_super) {
         }
     };
     ColorEditorPanelView.prototype.a9 = function (a) {
-        if (this.ad == null || a.ao == null) {
-            a.ao = "image";
+        if (this.ad == null || a.ap == null) {
+            a.ap = "image";
             var b = this.aa.createElement("canvas");
             this.ad = b;
             var c = this.be(this.ad, this.j, this.h, this.as, this.ar, 248, 19);
@@ -39027,7 +39029,7 @@ var ColorEditorPanelView = /** @class */ /*@__PURE__*/ (function (_super) {
             this.ar = c.p4;
             this.ad.setStyleProperty("justify-self", "center");
             this.ad.setStyleProperty("align-self", "center");
-            var d = a.an;
+            var d = a.ao;
             d.append(this.ad);
             this.bl(0);
         }
@@ -39061,9 +39063,9 @@ var ColorEditorPanelView = /** @class */ /*@__PURE__*/ (function (_super) {
         }
     };
     ColorEditorPanelView.prototype.bb = function (a) {
-        var b = a.an;
+        var b = a.ao;
         if (b.getChildCount() == 1) {
-            a.ao = "image";
+            a.ap = "image";
             var c = this.aa.createElement("canvas");
             this.ah = c;
             var d = this.be(this.ah, this.t, this.p, this.aw, this.av, 85, 148);
@@ -39085,8 +39087,8 @@ var ColorEditorPanelView = /** @class */ /*@__PURE__*/ (function (_super) {
         }
     };
     ColorEditorPanelView.prototype.bc = function (a) {
-        if (this.ai == null || a.ao == null) {
-            a.ao = "image";
+        if (this.ai == null || a.ap == null) {
+            a.ap = "image";
             var b = this.aa.createElement("canvas");
             this.ai = b;
             var c = this.be(this.ai, this.z, this.v, this.aw, this.av, 25, 148);
@@ -39096,7 +39098,7 @@ var ColorEditorPanelView = /** @class */ /*@__PURE__*/ (function (_super) {
             this.av = c.p4;
             this.ai.setStyleProperty("justify-self", "center");
             this.ai.setStyleProperty("align-self", "center");
-            var d = a.an;
+            var d = a.ao;
             d.append(this.ai);
             this.bo(0, 1, 0.5);
         }
@@ -39178,19 +39180,20 @@ var ColorEditorView = /** @class */ /*@__PURE__*/ (function (_super) {
     function ColorEditorView() {
         var _this = _super.call(this) || this;
         _this.a = null;
-        _this.h = null;
+        _this.i = null;
         _this.d = null;
         _this.g = new List$1(Delegate_$type, 0);
         _this.e = true;
+        _this._createColorEditorPanel = null;
         _this.b = null;
         return _this;
     }
-    ColorEditorView.prototype.q = function () {
+    ColorEditorView.prototype.r = function () {
     };
     ColorEditorView.prototype.f = function () {
         return true;
     };
-    ColorEditorView.prototype.o = function (a) {
+    ColorEditorView.prototype.p = function (a) {
         var e_2, _a;
         if (a == null) {
             try {
@@ -39218,45 +39221,61 @@ var ColorEditorView = /** @class */ /*@__PURE__*/ (function (_super) {
         if (this.a.a == null) {
             this.a.a = new DOMExecutionContext(a);
         }
-        this.h = a;
+        this.i = a;
         this.a.bj();
     };
-    ColorEditorView.prototype.m = function () {
+    ColorEditorView.prototype.n = function () {
         if (KeyFrameAnimationFactory.h == null) {
-            KeyFrameAnimationFactory.h = this.h;
+            KeyFrameAnimationFactory.h = this.i;
         }
     };
-    ColorEditorView.prototype.n = function () {
+    ColorEditorView.prototype.o = function () {
         this.e = true;
     };
-    ColorEditorView.prototype.p = function () {
+    ColorEditorView.prototype.q = function () {
         this.e = false;
     };
-    ColorEditorView.prototype.j = function () {
-        return this.h;
+    ColorEditorView.prototype.k = function () {
+        return this.i;
     };
-    ColorEditorView.prototype.i = function () {
-        var a = new ColorEditorPanel();
-        this.b = a;
-        var b = this.h.createElement("div");
-        var c = this.h.getSubRenderer(b);
-        a.provideContainer(c);
-        var d = this.h.getExternal(a, null, null);
-        return b;
+    Object.defineProperty(ColorEditorView.prototype, "createColorEditorPanel", {
+        get: function () {
+            return this._createColorEditorPanel;
+        },
+        set: function (a) {
+            this._createColorEditorPanel = a;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ColorEditorView.prototype.j = function () {
+        if (this.createColorEditorPanel != null) {
+            var a = this.createColorEditorPanel();
+            var b = this.i.getWrapper(a);
+            this.b = (a.i);
+            return a;
+        }
+        var c = new ColorEditorPanel();
+        this.b = c;
+        var d = this.i.createElement("div");
+        var e = this.i.getSubRenderer(d);
+        c.provideContainer(e);
+        var f = this.i.getExternal(c, null, null);
+        return d;
     };
-    ColorEditorView.prototype.k = function (a, b) {
-        var c = a.an;
-        c.append(this.h.getWrapper(b));
+    ColorEditorView.prototype.l = function (a, b) {
+        var c = a.ao;
+        c.append(this.i.getWrapper(b));
     };
-    ColorEditorView.prototype.l = function (a) {
-        this.h.append(this.h.getWrapper(a.an));
+    ColorEditorView.prototype.m = function (a) {
+        this.i.append(this.i.getWrapper(a.ao));
     };
     ColorEditorView.prototype.c = function (a) {
         return this.b;
     };
-    ColorEditorView.prototype.r = function (a) {
-        if (this.h != null) {
-            var b = this.h.rootWrapper.getNativeElement();
+    ColorEditorView.prototype.s = function (a) {
+        if (this.i != null) {
+            var b = this.i.rootWrapper.getNativeElement();
             var c = (b.getBoundingClientRect());
             if (a) {
                 c = new Rect(0, c.left + window.pageXOffset, c.top + window.pageYOffset, c.width, c.height);
@@ -39265,7 +39284,7 @@ var ColorEditorView = /** @class */ /*@__PURE__*/ (function (_super) {
         }
         return null;
     };
-    ColorEditorView.prototype.s = function () {
+    ColorEditorView.prototype.t = function () {
         return new Size(1, NaN, NaN);
     };
     ColorEditorView.$t = markType(ColorEditorView, 'ColorEditorView');
@@ -39278,7 +39297,7 @@ var ColorEditor = /** @class */ /*@__PURE__*/ (function (_super) {
     __extends(ColorEditor, _super);
     function ColorEditor() {
         var _this = _super.call(this) || this;
-        _this.h = null;
+        _this._view = null;
         _this.s = null;
         _this.r = null;
         _this.e = null;
@@ -39316,15 +39335,25 @@ var ColorEditor = /** @class */ /*@__PURE__*/ (function (_super) {
         NativeUIXInputsFactory.m();
         var a = new ColorEditorView();
         a.a = _this;
-        _this.h = a;
-        _this.h.q();
+        _this.view = a;
+        _this.view.r();
         return _this;
     }
+    Object.defineProperty(ColorEditor.prototype, "view", {
+        get: function () {
+            return this._view;
+        },
+        set: function (a) {
+            this._view = a;
+        },
+        enumerable: false,
+        configurable: true
+    });
     ColorEditor.prototype.onAttachedToUI = function () {
-        this.h.n();
+        this.view.o();
     };
     ColorEditor.prototype.onDetachedFromUI = function () {
-        this.h.p();
+        this.view.q();
     };
     ColorEditor.prototype.b4 = function (a, b) {
         if (this.valueChanging != null) {
@@ -39344,12 +39373,12 @@ var ColorEditor = /** @class */ /*@__PURE__*/ (function (_super) {
         this.provideContainer(null);
     };
     ColorEditor.prototype.provideContainer = function (a) {
-        this.h.o(a);
+        this.view.p(a);
     };
     Object.defineProperty(ColorEditor.prototype, "u", {
         get: function () {
             if (this.t == null) {
-                this.t = new SRProvider(this.h.h);
+                this.t = new SRProvider(this.view.i);
                 this.t.cb("ColorEditor");
             }
             return this.t;
@@ -39619,7 +39648,7 @@ var ColorEditor = /** @class */ /*@__PURE__*/ (function (_super) {
                 break;
             case "Label":
                 if (this.r != null) {
-                    this.r.b5 = this.a2;
+                    this.r.b6 = this.a2;
                 }
                 break;
             case "TextStyle":
@@ -39627,7 +39656,7 @@ var ColorEditor = /** @class */ /*@__PURE__*/ (function (_super) {
                 break;
             case "ShowClearButton":
                 if (this.r != null) {
-                    if (this.r.b7 != "") {
+                    if (this.r.b8 != "") {
                     }
                 }
                 break;
@@ -39639,14 +39668,14 @@ var ColorEditor = /** @class */ /*@__PURE__*/ (function (_super) {
                 break;
             case "AllowTextInput":
                 if (this.r != null) {
-                    this.r.b0 = this.am();
+                    this.r.b1 = this.am();
                 }
                 break;
             case "OpenOnFocus": break;
             case "IsDisabled":
                 {
                     if (this.r != null) {
-                        this.r.b0 = this.am();
+                        this.r.b1 = this.am();
                     }
                 }
                 break;
@@ -39657,7 +39686,7 @@ var ColorEditor = /** @class */ /*@__PURE__*/ (function (_super) {
     };
     ColorEditor.prototype.cj = function () {
         if (this.r != null) {
-            this.r.ce = this.cr;
+            this.r.cf = this.cr;
         }
     };
     ColorEditor.prototype.ch = function () {
@@ -39666,7 +39695,7 @@ var ColorEditor = /** @class */ /*@__PURE__*/ (function (_super) {
     };
     ColorEditor.prototype.ci = function () {
         if (this.n != null) {
-            this.r.bk = this.n;
+            this.r.bl = this.n;
         }
     };
     ColorEditor.prototype.bh = function () {
@@ -39674,7 +39703,7 @@ var ColorEditor = /** @class */ /*@__PURE__*/ (function (_super) {
             return;
         }
         if (this.r != null) {
-            this.r.b7 = "";
+            this.r.b8 = "";
         }
         this.value = BrushUtil.l(0, 0, 0, 0);
         this.e.ax();
@@ -39687,8 +39716,8 @@ var ColorEditor = /** @class */ /*@__PURE__*/ (function (_super) {
         this.aa = false;
     };
     ColorEditor.prototype.br = function () {
-        NativeUIWindow.h(15, runOn(this, this.b7), this.h.h);
-        NativeUIWindow.h(9, runOn(this, this.b6), this.h.h);
+        NativeUIWindow.h(15, runOn(this, this.b7), this.view.i);
+        NativeUIWindow.h(9, runOn(this, this.b6), this.view.i);
     };
     ColorEditor.prototype.bv = function () {
         NativeUIWindow.i(15, runOn(this, this.b7));
@@ -39697,46 +39726,46 @@ var ColorEditor = /** @class */ /*@__PURE__*/ (function (_super) {
     ColorEditor.prototype.b6 = function (a) {
         var b = a;
         if (this.r != null) {
-            if (this.s.b6 && !this.s.t(b.b) && !this.r.t(b.b)) {
+            if (this.s.b7 && !this.s.t(b.b) && !this.r.t(b.b)) {
                 this.bi();
             }
         }
     };
     ColorEditor.prototype.b7 = function (a) {
         if (this.r != null) {
-            var b = this.r.be();
-            this.s.ce(b);
+            var b = this.r.bf();
+            this.s.cf(b);
         }
     };
     ColorEditor.prototype.bj = function () {
         var _this = this;
-        NativeUIComponent.av(this.h.j(), [12, 2, 7, 0], [2, 2, 2, 2], function (a) {
+        NativeUIComponent.aw(this.view.k(), [12, 2, 7, 0], [2, 2, 2, 2], function (a) {
             var b = a[0];
             var c = a[1];
             var d = a[2];
             var e = a[3];
-            var f = _this.h.i();
-            _this.h.k(e, f);
-            b.bn(d);
-            d.bn(e);
-            _this.h.l(c);
-            b.ch = BrushUtil.l(255, 255, 255, 255);
-            b.ca = 150;
-            b.b8 = 8;
-            b.cb = 4;
-            b.b1 = true;
+            var f = _this.view.j();
+            _this.view.l(e, f);
+            b.bo(d);
+            d.bo(e);
+            _this.view.m(c);
+            b.ci = BrushUtil.l(255, 255, 255, 255);
+            b.cb = 150;
+            b.b9 = 8;
+            b.cc = 4;
+            b.b2 = true;
             _this.r = c;
             _this.r.c = _this.j;
-            _this.r.bp = _this.l;
-            _this.r.b6 = ColorEditor.a8;
-            _this.r.cc = BrushUtil.l(255, 255, 255, 255);
-            _this.r.cd = BrushUtil.l(255, 0, 0, 0);
-            _this.r.bn = runOn(_this, _this.cf);
+            _this.r.bq = _this.l;
+            _this.r.b7 = ColorEditor.a8;
+            _this.r.cd = BrushUtil.l(255, 255, 255, 255);
+            _this.r.ce = BrushUtil.l(255, 0, 0, 0);
+            _this.r.bo = runOn(_this, _this.cf);
             _this.r.n = runOn(_this, _this.by);
             _this.r.o = runOn(_this, _this.b0);
-            _this.r.cb = BrushUtil.l(255, 0, 0, 255);
+            _this.r.cc = BrushUtil.l(255, 0, 0, 255);
             _this.s = b;
-            _this.e = _this.h.c(f);
+            _this.e = _this.view.c(f);
             _this.e.value = _this.value;
             var g = _this.e;
             g.closed = delegateCombine(g.closed, runOn(_this, _this.bf));
@@ -39756,7 +39785,7 @@ var ColorEditor = /** @class */ /*@__PURE__*/ (function (_super) {
         this.bl(a);
     };
     ColorEditor.prototype.b0 = function (a, b) {
-        if (!this.s.t(b.b) && !this.r.t(b.b) && !(this.r.an == b.b)) {
+        if (!this.s.t(b.b) && !this.r.t(b.b) && !(this.r.ao == b.b)) {
             this.bp();
         }
     };
@@ -39774,18 +39803,18 @@ var ColorEditor = /** @class */ /*@__PURE__*/ (function (_super) {
     };
     ColorEditor.prototype.b5 = function (a, b) {
         if (this.r != null) {
-            this.r.cb = b;
+            this.r.cc = b;
         }
     };
     ColorEditor.prototype.bl = function (a) {
-        if (this.s.b6) {
+        if (this.s.b7) {
             this.w = true;
             this.bi();
         }
     };
     ColorEditor.prototype.cg = function () {
         if (this.w == false) {
-            if (this.s.b6) {
+            if (this.s.b7) {
                 this.bi();
             }
             else {
@@ -39801,8 +39830,8 @@ var ColorEditor = /** @class */ /*@__PURE__*/ (function (_super) {
             return;
         }
         if (this.s != null) {
-            var a = this.h.r(false);
-            var b = this.h.s();
+            var a = this.view.s(false);
+            var b = this.view.t();
             var c = b.height;
             var d = 240;
             var e = a.bottom + d;
@@ -39822,14 +39851,14 @@ var ColorEditor = /** @class */ /*@__PURE__*/ (function (_super) {
     };
     ColorEditor.prototype.ce = function (a, b) {
         {
-            var c = this.h.r(true);
-            this.s.cf(c, a, b);
+            var c = this.view.s(true);
+            this.s.cg(c, a, b);
         }
     };
     ColorEditor.prototype.bi = function () {
         var _this = this;
         if (this.s != null) {
-            this.a.executeDelayed(function () { return _this.s.cc(); }, 0);
+            this.a.executeDelayed(function () { return _this.s.cd(); }, 0);
         }
         if (this.e != null) {
             this.e.bg();
@@ -39842,9 +39871,9 @@ var ColorEditor = /** @class */ /*@__PURE__*/ (function (_super) {
             a = false;
         }
         if (this.r != null) {
-            this.r.a0();
+            this.r.a1();
         }
-        if (!this.s.b6 && this.al == true) {
+        if (!this.s.b7 && this.al == true) {
             if (this.w == false) {
                 if (this.aa) {
                     return;
@@ -39872,7 +39901,7 @@ var ColorEditor = /** @class */ /*@__PURE__*/ (function (_super) {
     };
     ColorEditor.prototype.cb = function () {
         if (this.r != null) {
-            this.r.b9();
+            this.r.ca();
         }
     };
     ColorEditor.prototype.bo = function () {
@@ -40226,7 +40255,7 @@ var ColorEditorPanel = /** @class */ /*@__PURE__*/ (function (_super) {
     };
     ColorEditorPanel.prototype.a4 = function () {
         var _this = this;
-        NativeUIContent.av(this.d.a7(), [7, 7, 0, 5, 0, 5, 0, 5, 2, 7, 1, 1, 7, 2, 7], [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2], function (a) {
+        NativeUIContent.aw(this.d.a7(), [7, 7, 0, 5, 0, 5, 0, 5, 2, 7, 1, 1, 7, 2, 7], [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2], function (a) {
             var b = a[0];
             var c = a[1];
             var d = a[2];
@@ -40242,97 +40271,97 @@ var ColorEditorPanel = /** @class */ /*@__PURE__*/ (function (_super) {
             var n = a[12];
             var o = a[13];
             var p = a[14];
-            e.bk = 2;
-            i.bk = 0;
-            g.bk = 1;
-            e.bw = BrushUtil.l(0, 0, 0, 0);
-            i.bw = BrushUtil.l(0, 0, 0, 0);
-            g.bw = BrushUtil.l(0, 0, 0, 0);
-            g.bh = new Thickness(1, 0, 5, 5, 0);
-            f.bh = new Thickness(1, 0, 5, 5, 0);
-            l.bz = "Ok";
+            e.bl = 2;
+            i.bl = 0;
+            g.bl = 1;
+            e.bx = BrushUtil.l(0, 0, 0, 0);
+            i.bx = BrushUtil.l(0, 0, 0, 0);
+            g.bx = BrushUtil.l(0, 0, 0, 0);
+            g.bi = new Thickness(1, 0, 5, 5, 0);
+            f.bi = new Thickness(1, 0, 5, 5, 0);
+            l.b0 = "Ok";
             l.c = _this.f;
-            m.bz = "Cancel";
+            m.b0 = "Cancel";
             m.c = _this.f;
-            i.bh = new Thickness(1, 5, 0, 5, 2);
-            h.bh = new Thickness(1, 5, 0, 5, 2);
-            e.bh = new Thickness(1, 5, 5, 5, 0);
-            d.bh = new Thickness(1, 5, 5, 5, 0);
-            p.bh = new Thickness(1, 5, 16, 0, 11);
-            p.a8 = BrushUtil.l(255, 255, 0, 0);
-            c.cc(p, 0);
-            c.ca(p, 0);
-            c.bn(p);
-            n.b2(0, 2, 1);
-            n.b2(1, 2, 1);
-            n.bh = new Thickness(1, 5, 2, 5, 2);
-            n.ca(j, 0);
-            j.bh = new Thickness(1, 0, 0, 2, 0);
-            j.bu = 1;
-            j.bp = _this.h;
+            i.bi = new Thickness(1, 5, 0, 5, 2);
+            h.bi = new Thickness(1, 5, 0, 5, 2);
+            e.bi = new Thickness(1, 5, 5, 5, 0);
+            d.bi = new Thickness(1, 5, 5, 5, 0);
+            p.bi = new Thickness(1, 5, 16, 0, 11);
+            p.a9 = BrushUtil.l(255, 255, 0, 0);
+            c.cf(p, 0);
+            c.cd(p, 0);
+            c.bo(p);
+            n.b5(0, 2, 1);
+            n.b5(1, 2, 1);
+            n.bi = new Thickness(1, 5, 2, 5, 2);
+            n.cd(j, 0);
+            j.bi = new Thickness(1, 0, 0, 2, 0);
+            j.bv = 1;
+            j.bq = _this.h;
             j.c = _this.f;
-            j.b5 = "rgba";
-            o.bh = new Thickness(1, 0, 0, 2, 0);
-            o.bu = 1;
-            o.bp = _this.h;
+            j.b6 = "rgba";
+            o.bi = new Thickness(1, 0, 0, 2, 0);
+            o.bv = 1;
+            o.bq = _this.h;
             o.c = _this.f;
-            o.b5 = "hex";
-            n.ca(o, 1);
-            n.bn(j);
-            n.bn(o);
-            l.bh = new Thickness(1, 5, 2, 5, 2);
-            m.bh = new Thickness(1, 5, 2, 5, 2);
-            l.bp = _this.h;
-            m.bp = _this.h;
-            l.bm = runOn(_this, _this.a6);
-            m.bm = runOn(_this, _this.bh);
-            b.b4(0, 1, 175);
-            b.b4(1, 0, 0);
-            b.b4(2, 0, 0);
-            b.b4(3, 0, 0);
-            b.b2(0, 1, 90);
-            b.b2(1, 1, 175);
-            b.b2(2, 1, 25);
-            b.cc(c, 0);
-            b.ca(c, 0);
-            b.cc(d, 0);
-            b.ca(d, 1);
-            b.cc(e, 0);
-            b.ca(e, 1);
-            b.cc(f, 0);
-            b.ca(f, 3);
-            b.cc(g, 0);
-            b.ca(g, 3);
-            b.cc(h, 1);
-            b.ca(h, 0);
-            b.cb(h, 3);
-            b.cc(i, 1);
-            b.ca(i, 0);
-            b.cb(i, 3);
-            b.cc(n, 2);
-            b.ca(n, 0);
-            b.cb(n, 3);
-            b.cc(k, 3);
-            b.ca(k, 0);
-            b.cb(k, 3);
-            k.b2(0, 2, 1);
-            k.b2(1, 2, 1);
-            k.ca(l, 0);
-            k.ca(m, 1);
-            k.bn(l);
-            k.bn(m);
-            b.bn(c);
-            b.bn(d);
-            b.bn(e);
-            b.bn(f);
-            b.bn(g);
-            b.bn(h);
-            b.bn(i);
-            b.bn(n);
-            b.bn(k);
+            o.b6 = "hex";
+            n.cd(o, 1);
+            n.bo(j);
+            n.bo(o);
+            l.bi = new Thickness(1, 5, 2, 5, 2);
+            m.bi = new Thickness(1, 5, 2, 5, 2);
+            l.bq = _this.h;
+            m.bq = _this.h;
+            l.bn = runOn(_this, _this.a6);
+            m.bn = runOn(_this, _this.bh);
+            b.b7(0, 1, 175);
+            b.b7(1, 0, 0);
+            b.b7(2, 0, 0);
+            b.b7(3, 0, 0);
+            b.b5(0, 1, 90);
+            b.b5(1, 1, 175);
+            b.b5(2, 1, 25);
+            b.cf(c, 0);
+            b.cd(c, 0);
+            b.cf(d, 0);
+            b.cd(d, 1);
+            b.cf(e, 0);
+            b.cd(e, 1);
+            b.cf(f, 0);
+            b.cd(f, 3);
+            b.cf(g, 0);
+            b.cd(g, 3);
+            b.cf(h, 1);
+            b.cd(h, 0);
+            b.ce(h, 3);
+            b.cf(i, 1);
+            b.cd(i, 0);
+            b.ce(i, 3);
+            b.cf(n, 2);
+            b.cd(n, 0);
+            b.ce(n, 3);
+            b.cf(k, 3);
+            b.cd(k, 0);
+            b.ce(k, 3);
+            k.b5(0, 2, 1);
+            k.b5(1, 2, 1);
+            k.cd(l, 0);
+            k.cd(m, 1);
+            k.bo(l);
+            k.bo(m);
+            b.bo(c);
+            b.bo(d);
+            b.bo(e);
+            b.bo(f);
+            b.bo(g);
+            b.bo(h);
+            b.bo(i);
+            b.bo(n);
+            b.bo(k);
             _this.d.a8(b);
             _this.n = b;
-            _this.n.bw = true;
+            _this.n.by = true;
             _this.s = i;
             _this.u = g;
             _this.m = f;
@@ -40340,24 +40369,24 @@ var ColorEditorPanel = /** @class */ /*@__PURE__*/ (function (_super) {
             _this.o = p;
             _this.r = j;
             _this.q = o;
-            _this.s.bq = 0;
-            _this.s.bp = 360;
-            _this.s.by = BrushUtil.l(255, 255, 255, 255);
+            _this.s.br = 0;
+            _this.s.bq = 360;
             _this.s.bz = BrushUtil.l(255, 255, 255, 255);
-            _this.u.bq = 0;
-            _this.u.bp = 1;
-            _this.t.by = BrushUtil.l(255, 155, 155, 155);
-            _this.t.bz = BrushUtil.l(255, 255, 255, 255);
-            _this.t.bq = 0;
-            _this.t.bp = 1;
-            _this.t.bu = 0;
-            _this.t.bt = 1;
+            _this.s.b0 = BrushUtil.l(255, 255, 255, 255);
+            _this.u.br = 0;
+            _this.u.bq = 1;
+            _this.t.bz = BrushUtil.l(255, 155, 155, 155);
+            _this.t.b0 = BrushUtil.l(255, 255, 255, 255);
+            _this.t.br = 0;
+            _this.t.bq = 1;
+            _this.t.bv = 0;
+            _this.t.bu = 1;
+            _this.s.bp = runOn(_this, _this.au);
             _this.s.bo = runOn(_this, _this.au);
-            _this.s.bn = runOn(_this, _this.au);
+            _this.u.bp = runOn(_this, _this.aw);
             _this.u.bo = runOn(_this, _this.aw);
-            _this.u.bn = runOn(_this, _this.aw);
+            _this.t.bp = runOn(_this, _this.av);
             _this.t.bo = runOn(_this, _this.av);
-            _this.t.bn = runOn(_this, _this.av);
             _this.l = d;
             _this.k = h;
             _this.p = c;
@@ -40394,26 +40423,26 @@ var ColorEditorPanel = /** @class */ /*@__PURE__*/ (function (_super) {
         var a = Color.u(0, 0, 0, 0);
         var b = Color.u(255, 255, 0, 0);
         if (this.s != null) {
-            var c = this.s.bs;
-            var d = this.t.bs;
-            var e = 1 - this.t.bv;
-            var f = 1 - this.u.bs;
+            var c = this.s.bt;
+            var d = this.t.bt;
+            var e = 1 - this.t.bw;
+            var f = 1 - this.u.bt;
             b = ColorUtil.r(1, c, 1, 0.5);
             a = ColorUtil.r(f, c, d, e);
-            this.s.bx = BrushUtil.l(b.l, b.o, b.n, b.m);
-            this.t.bx = BrushUtil.l(a.l, a.o, a.n, a.m);
-            this.o.a8 = BrushUtil.l(a.l, a.o, a.n, a.m);
-            this.d.bm(this.s.bs);
+            this.s.by = BrushUtil.l(b.l, b.o, b.n, b.m);
+            this.t.by = BrushUtil.l(a.l, a.o, a.n, a.m);
+            this.o.a9 = BrushUtil.l(a.l, a.o, a.n, a.m);
+            this.d.bm(this.s.bt);
             this.d.bn(0);
-            this.d.bo(this.s.bs, this.t.bs, 1 - this.t.bv);
+            this.d.bo(this.s.bt, this.t.bt, 1 - this.t.bw);
         }
         if (this.r != null) {
             var g = a.o + ", " + a.n + ", " + a.m + ", " + Math.round((a.l / 255) * 1000) / 1000;
-            this.r.b7 = g;
+            this.r.b8 = g;
         }
         if (this.q != null) {
             var h = ColorUtil.k(a, false);
-            this.q.b7 = h;
+            this.q.b8 = h;
         }
         this.bx = BrushUtil.l(a.l, a.o, a.n, a.m);
         this.bc(this.value);
@@ -40426,7 +40455,7 @@ var ColorEditorPanel = /** @class */ /*@__PURE__*/ (function (_super) {
     ColorEditorPanel.prototype.bl = function () {
     };
     ColorEditorPanel.prototype.a3 = function () {
-        this.n.az();
+        this.n.a0();
     };
     ColorEditorPanel.prototype.onAttachedToUI = function () {
         this.d.bg();
@@ -40456,10 +40485,10 @@ var ColorEditorPanel = /** @class */ /*@__PURE__*/ (function (_super) {
         var a = this.b5;
         var b = ColorUtil.a(a);
         this.y = true;
-        this.s.bs = b[1] == -1 ? 0 : b[1];
-        this.u.bs = 1 - b[0];
-        this.t.bs = b[2];
-        this.t.bv = 1 - b[3];
+        this.s.bt = b[1] == -1 ? 0 : b[1];
+        this.u.bt = 1 - b[0];
+        this.t.bt = b[2];
+        this.t.bw = 1 - b[3];
         this.y = false;
         if (this.x) {
             this.bn();
@@ -40479,7 +40508,7 @@ var ColorEditorPanel = /** @class */ /*@__PURE__*/ (function (_super) {
         this.bn();
     };
     ColorEditorPanel.prototype.a0 = function (a, b, c) {
-        var d = this.s.bs;
+        var d = this.s.bt;
         var e = 1;
         var f = 255;
         for (var g = 0; g < c; g++) {
@@ -40638,12 +40667,12 @@ var ColorEditorPanel = /** @class */ /*@__PURE__*/ (function (_super) {
     };
     ColorEditorPanel.prototype.ad = function () {
         if (this.s != null) {
-            return this.s.bs;
+            return this.s.bt;
         }
         return 0;
     };
     ColorEditorPanel.prototype.a1 = function (a, b, c) {
-        var d = this.s.bs;
+        var d = this.s.bt;
         var e = 1;
         var f = 255;
         for (var g = 0; g < c; g++) {
@@ -40680,11 +40709,11 @@ var ColorEditorPanel = /** @class */ /*@__PURE__*/ (function (_super) {
         }
     };
     ColorEditorPanel.prototype.a2 = function (a, b, c) {
-        var d = this.s.bs;
+        var d = this.s.bt;
         var e = 1;
         var f = 255;
-        var g = 1 - this.t.bv;
-        var h = this.t.bs;
+        var g = 1 - this.t.bw;
+        var h = this.t.bt;
         for (var i = 0; i < c; i++) {
             var j = i / c;
             for (var k = 0; k < b; k++) {
@@ -40953,6 +40982,9 @@ var IgxColorEditorComponent = /** @class */ /*@__PURE__*/ (function () {
             this._portalManager = new PortalManager("colorEditorContent", componentFactoryResolver);
             var ren = new AngularRenderer(root, this.renderer, window.document, this.ngZone, true, {}, this._portalManager);
             this._wrapper = ren;
+            colorEditor.view.createColorEditorPanel = function () {
+                return window.document.createElement("igx-color-editor-panel");
+            };
             colorEditor.provideContainer(ren);
         }
     }
@@ -42741,15 +42773,10 @@ var IgxMultiSliderTrackThumbRange = /** @class */ /*@__PURE__*/ (function () {
                 return null;
             }
             if (!r.externalObject) {
-                var e = new IgxMultiSliderThumb();
-                if (r.$type) {
+                var e = IgxMultiSliderThumbComponent._createFromInternal(r);
+                if (e) {
                     e._implementation = r;
                 }
-                else {
-                    if (e.i.setNativeElement) {
-                        e.i.setNativeElement(r);
-                    }
-                }
                 r.externalObject = e;
             }
             return r.externalObject;
@@ -42767,15 +42794,10 @@ var IgxMultiSliderTrackThumbRange = /** @class */ /*@__PURE__*/ (function () {
                 return null;
             }
             if (!r.externalObject) {
-                var e = new IgxMultiSliderThumb();
-                if (r.$type) {
+                var e = IgxMultiSliderThumbComponent._createFromInternal(r);
+                if (e) {
                     e._implementation = r;
                 }
-                else {
-                    if (e.i.setNativeElement) {
-                        e.i.setNativeElement(r);
-                    }
-                }
                 r.externalObject = e;
             }
             return r.externalObject;
@@ -42811,139 +42833,236 @@ var IgxMultiSliderTrackThumbRange = /** @class */ /*@__PURE__*/ (function () {
     return IgxMultiSliderTrackThumbRange;
 }());
 
-var IgxMultiSliderThumb = /** @class */ /*@__PURE__*/ (function () {
-    function IgxMultiSliderThumb() {
-        this._propertyUpdated = null;
-        this._zoneRunner = null;
-        this._implementation = this.createImplementation();
-        this._implementation.externalObject = this;
-        this.onImplementationCreated();
-        if (this._initializeAdapters) {
-            this._initializeAdapters();
-        }
-    }
-    IgxMultiSliderThumb.prototype.createImplementation = function () {
-        return new MultiSliderThumb();
-    };
-    Object.defineProperty(IgxMultiSliderThumb.prototype, "i", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            return this._implementation;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    IgxMultiSliderThumb.prototype.onImplementationCreated = function () {
-    };
-    IgxMultiSliderThumb.prototype._provideImplementation = function (i) {
-        this._implementation = i;
-        this._implementation.externalObject = this;
-        this.onImplementationCreated();
-    };
-    Object.defineProperty(IgxMultiSliderThumb.prototype, "value", {
-        get: function () {
-            return this.i.s;
-        },
-        set: function (v) {
-            this.i.s = +v;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(IgxMultiSliderThumb.prototype, "rangePosition", {
-        get: function () {
-            return this.i.g;
-        },
-        set: function (v) {
-            this.i.g = ensureEnum(MultiSliderThumbRangePosition_$type, v);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(IgxMultiSliderThumb.prototype, "range", {
-        get: function () {
-            var r = this.i.i;
-            if (r == null) {
-                return null;
-            }
-            if (!r.externalObject) {
-                var e = new IgxMultiSliderTrackThumbRange();
-                if (r.$type) {
-                    e._implementation = r;
-                }
-                else {
-                    if (e.i.setNativeElement) {
-                        e.i.setNativeElement(r);
-                    }
-                }
-                r.externalObject = e;
-            }
-            return r.externalObject;
-        },
-        set: function (v) {
-            v == null ? this.i.i = null : this.i.i = v.i;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    IgxMultiSliderThumb.prototype.findByName = function (name) {
-        if (this.findEphemera) {
-            if (name && name.indexOf("@@e:") == 0) {
-                return this.findEphemera(name);
-            }
-        }
-        if (this.range && this.range.name && this.range.name == name) {
-            return this.range;
-        }
-        return null;
-    };
-    IgxMultiSliderThumb.prototype.push = function (amount) {
-        var iv = this.i.r(amount);
-        return (iv);
-    };
-    Object.defineProperty(IgxMultiSliderThumb.prototype, "propertyUpdated", {
-        get: function () {
-            var _this = this;
-            if (this._propertyUpdated == null) {
-                this._propertyUpdated = new EventEmitter();
-                this.i.propertyUpdated = delegateCombine(this.i.propertyUpdated, function (o, e) {
-                    _this._runInZone(function () {
-                        var outerArgs = new IgxPropertyUpdatedEventArgs();
-                        outerArgs._provideImplementation(e);
-                        if (_this.beforePropertyUpdated) {
-                            _this.beforePropertyUpdated(_this, outerArgs);
-                        }
-                        _this._propertyUpdated.emit({
-                            sender: _this,
-                            args: outerArgs
-                        });
-                    });
-                });
-            }
-            return this._propertyUpdated;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    IgxMultiSliderThumb.prototype._runInZone = function (act) {
-        if (this._zoneRunner != null) {
-            this._zoneRunner(act);
-        }
-        else {
-            act();
-        }
-    };
-    return IgxMultiSliderThumb;
+var IgxMultiSliderThumbComponent = /** @class */ /*@__PURE__*/ (function () {
+    function IgxMultiSliderThumbComponent() {
+        this.__p = null;
+        this._hasUserValues = new Set();
+        this._stylingContainer = null;
+        this._stylingParent = null;
+        this._inStyling = false;
+        this._propertyUpdated = null;
+        this._zoneRunner = null;
+        if (this._styling) {
+            NamePatcher.ensureStylablePatched(Object.getPrototypeOf(this));
+        }
+        this._implementation = this.createImplementation();
+        this._implementation.externalObject = this;
+        this.onImplementationCreated();
+        if (this._initializeAdapters) {
+            this._initializeAdapters();
+        }
+    }
+    IgxMultiSliderThumbComponent.prototype.createImplementation = function () {
+        return new MultiSliderThumb();
+    };
+    IgxMultiSliderThumbComponent.prototype.ngOnInit = function () {
+    };
+    Object.defineProperty(IgxMultiSliderThumbComponent.prototype, "i", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return this._implementation;
+        } /**
+                                     * @hidden
+                                     */,
+        enumerable: false,
+        configurable: true
+    });
+    IgxMultiSliderThumbComponent._createFromInternal = function (internal) {
+        if (!internal) {
+            return null;
+        }
+        if (!internal.$type) {
+            return null;
+        }
+        var name = internal.$type.name;
+        var externalName = "Igx" + name + "Component";
+        if (!TypeRegistrar.isRegistered(externalName)) {
+            return null;
+        }
+        return TypeRegistrar.create(externalName);
+    };
+    IgxMultiSliderThumbComponent.prototype.onImplementationCreated = function () {
+    };
+    Object.defineProperty(IgxMultiSliderThumbComponent.prototype, "value", {
+        get: function () {
+            return this.i.s;
+        },
+        set: function (v) {
+            this.i.s = +v;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxMultiSliderThumbComponent.prototype, "rangePosition", {
+        get: function () {
+            return this.i.g;
+        },
+        set: function (v) {
+            this.i.g = ensureEnum(MultiSliderThumbRangePosition_$type, v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxMultiSliderThumbComponent.prototype, "range", {
+        get: function () {
+            var r = this.i.i;
+            if (r == null) {
+                return null;
+            }
+            if (!r.externalObject) {
+                var e = new IgxMultiSliderTrackThumbRange();
+                if (r.$type) {
+                    e._implementation = r;
+                }
+                else {
+                    if (e.i.setNativeElement) {
+                        e.i.setNativeElement(r);
+                    }
+                }
+                r.externalObject = e;
+            }
+            return r.externalObject;
+        },
+        set: function (v) {
+            v == null ? this.i.i = null : this.i.i = v.i;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    IgxMultiSliderThumbComponent.prototype.findByName = function (name) {
+        if (this.findEphemera) {
+            if (name && name.indexOf("@@e:") == 0) {
+                return this.findEphemera(name);
+            }
+        }
+        if (this.range && this.range.name && this.range.name == name) {
+            return this.range;
+        }
+        return null;
+    };
+    Object.defineProperty(IgxMultiSliderThumbComponent.prototype, "hasUserValues", {
+        get: function () {
+            return this._hasUserValues;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    IgxMultiSliderThumbComponent.prototype.__m = function (propertyName) {
+        if (!this._inStyling) {
+            this._hasUserValues.add(propertyName);
+        }
+    };
+    IgxMultiSliderThumbComponent.prototype._styling = function (container, component, parent) {
+        if (this._inStyling) {
+            return;
+        }
+        this._inStyling = true;
+        this._stylingContainer = container;
+        this._stylingParent = component;
+        var genericPrefix = "";
+        var typeName = this.i.$type.name;
+        if (typeName.indexOf("Xam") === 0) {
+            typeName = typeName.substring(3);
+        }
+        genericPrefix = toSpinal("MultiSliderThumbComponent");
+        var additionalPrefixes = [];
+        var prefix = toSpinal(typeName);
+        additionalPrefixes.push(prefix + "-");
+        var b = this.i.$type.baseType;
+        while (b && b.name != "Object" &&
+            b.name != "Base" &&
+            b.name != "Control" &&
+            b.Name != "DependencyObject" &&
+            b.Name != "FrameworkElement") {
+            typeName = b.name;
+            if (typeName.indexOf("Xam") === 0) {
+                typeName = typeName.substring(3);
+            }
+            var basePrefix = toSpinal(typeName);
+            additionalPrefixes.push(basePrefix + "-");
+            b = b.baseType;
+        }
+        if (parent) {
+            var parentTypeName = parent.i.$type.name;
+            if (parentTypeName.indexOf("Xam") === 0) {
+                parentTypeName = parentTypeName.substring(3);
+            }
+            var parentPrefix = toSpinal(parentTypeName);
+            additionalPrefixes.push(parentPrefix + "-" + genericPrefix + "-");
+            additionalPrefixes.push(parentPrefix + "-" + prefix + "-");
+        }
+        initializePropertiesFromCss(container, this, genericPrefix + "-", this.hasUserValues, false, additionalPrefixes);
+        if (this._otherStyling) {
+            this._otherStyling(container, component, parent);
+        }
+        this._inStyling = false;
+    };
+    IgxMultiSliderThumbComponent.prototype.push = function (amount) {
+        var iv = this.i.r(amount);
+        return (iv);
+    };
+    Object.defineProperty(IgxMultiSliderThumbComponent.prototype, "propertyUpdated", {
+        get: function () {
+            var _this = this;
+            if (this._propertyUpdated == null) {
+                this._propertyUpdated = new EventEmitter();
+                this.i.propertyUpdated = delegateCombine(this.i.propertyUpdated, function (o, e) {
+                    _this._runInZone(function () {
+                        var outerArgs = new IgxPropertyUpdatedEventArgs();
+                        outerArgs._provideImplementation(e);
+                        if (_this.beforePropertyUpdated) {
+                            _this.beforePropertyUpdated(_this, outerArgs);
+                        }
+                        _this._propertyUpdated.emit({
+                            sender: _this,
+                            args: outerArgs
+                        });
+                    });
+                });
+            }
+            return this._propertyUpdated;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    IgxMultiSliderThumbComponent.prototype._runInZone = function (act) {
+        if (this._zoneRunner != null) {
+            this._zoneRunner(act);
+        }
+        else {
+            act();
+        }
+    };
+    IgxMultiSliderThumbComponent.ɵfac = ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxMultiSliderThumbComponent, deps: [], target: ɵɵFactoryTarget.Component });
+    IgxMultiSliderThumbComponent.ɵcmp = ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: IgxMultiSliderThumbComponent, selector: "igx-multi-slider-thumb", inputs: { value: "value", rangePosition: "rangePosition", range: "range" }, outputs: { propertyUpdated: "propertyUpdated" }, providers: [], ngImport: i0, template: "", isInline: true, changeDetection: ChangeDetectionStrategy.OnPush });
+    return IgxMultiSliderThumbComponent;
 }());
+ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxMultiSliderThumbComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'igx-multi-slider-thumb',
+                    template: "",
+                    providers: [],
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { value: [{
+                type: Input
+            }], rangePosition: [{
+                type: Input
+            }], range: [{
+                type: Input
+            }], propertyUpdated: [{
+                type: Output
+            }] } });
 
 var IgxMultiSliderThumbCollection = /** @class */ /*@__PURE__*/ (function (_super) {
     __extends(IgxMultiSliderThumbCollection, _super);
     function IgxMultiSliderThumbCollection(list) {
         var _this = _super.call(this) || this;
-        if (!IgxMultiSliderThumb.$type) {
-            IgxMultiSliderThumb.$type = markType(IgxMultiSliderThumb, "IgxMultiSliderThumb");
+        if (!IgxMultiSliderThumbComponent.$type) {
+            IgxMultiSliderThumbComponent.$type = markType(IgxMultiSliderThumbComponent, "IgxMultiSliderThumbComponent");
         }
         if (list) {
             for (var i = 0; i < list.length; i++) {
@@ -42953,10 +43072,10 @@ var IgxMultiSliderThumbCollection = /** @class */ /*@__PURE__*/ (function (_supe
         return _this;
     }
     IgxMultiSliderThumbCollection.prototype._createInnerColl = function () {
-        if (!IgxMultiSliderThumb.$type) {
-            IgxMultiSliderThumb.$type = markType(IgxMultiSliderThumb, "IgxMultiSliderThumb");
+        if (!IgxMultiSliderThumbComponent.$type) {
+            IgxMultiSliderThumbComponent.$type = markType(IgxMultiSliderThumbComponent, "IgxMultiSliderThumbComponent");
         }
-        var coll = new SyncableObservableCollection$2(IgxMultiSliderThumb.$type, MultiSliderThumb.$type, 0);
+        var coll = new SyncableObservableCollection$2(IgxMultiSliderThumbComponent.$type, MultiSliderThumb.$type, 0);
         coll.compare = function (ext, int) {
             var comp = ext;
             if (comp._implementation) {
@@ -42973,7 +43092,7 @@ var IgxMultiSliderThumbCollection = /** @class */ /*@__PURE__*/ (function (_supe
         coll.createFrom = function (int) {
             var ext = int.externalObject;
             if (!ext) {
-                ext = new IgxMultiSliderThumb();
+                ext = new IgxMultiSliderThumbComponent();
                 if (ext) {
                     if (!int.$type && ext._implementation.setNativeElement) {
                         ext._implementation.setNativeElement(int);
@@ -43088,15 +43207,10 @@ var IgxMultiSliderThumbValueChangingEventArgs = /** @class */ /*@__PURE__*/ (fun
                 return null;
             }
             if (!r.externalObject) {
-                var e = new IgxMultiSliderThumb();
-                if (r.$type) {
+                var e = IgxMultiSliderThumbComponent._createFromInternal(r);
+                if (e) {
                     e._implementation = r;
                 }
-                else {
-                    if (e.i.setNativeElement) {
-                        e.i.setNativeElement(r);
-                    }
-                }
                 r.externalObject = e;
             }
             return r.externalObject;
@@ -46162,12 +46276,12 @@ var XIconButtonBridge = /** @class */ /*@__PURE__*/ (function (_super) {
         switch (b) {
             case 15:
             case 16:
-            case 44:
             case 45:
             case 46:
             case 47:
             case 48:
-            case 49: return this.al.t;
+            case 49:
+            case 50: return this.al.t;
         }
         return _super.prototype.getTargetForBuildInProperty.call(this, a, b);
     };
@@ -46183,12 +46297,12 @@ var XIconButtonBridge = /** @class */ /*@__PURE__*/ (function (_super) {
         switch (b) {
             case 16:
             case 15:
-            case 44:
             case 45:
             case 46:
             case 47:
             case 48:
-            case 49: return this.al.getValue(a, b);
+            case 49:
+            case 50: return this.al.getValue(a, b);
             case 18: return enumGetBox(BaseControlTheme_$type, a.o);
         }
         return _super.prototype.getValue.call(this, a, b);
@@ -46198,12 +46312,12 @@ var XIconButtonBridge = /** @class */ /*@__PURE__*/ (function (_super) {
         switch (b) {
             case 16:
             case 15:
-            case 44:
             case 45:
             case 46:
             case 47:
             case 48:
             case 49:
+            case 50:
                 this.al.setValue(a, b, c);
                 break;
             case 18:
@@ -46809,6 +46923,56 @@ var DefaultMultiTrackShadeVisual = /** @class */ /*@__PURE__*/ (function (_super
     return DefaultMultiTrackShadeVisual;
 }(Base));
 
+/*
+THIS INFRAGISTICS ULTIMATE SOFTWARE LICENSE  AGREEMENT ("AGREEMENT") LOCATED HERE:
+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.
+*/
+var IgxMultiSliderThumbModule = /** @class */ /*@__PURE__*/ (function () {
+    function IgxMultiSliderThumbModule() {
+    }
+    IgxMultiSliderThumbModule.ɵfac = ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxMultiSliderThumbModule, deps: [], target: ɵɵFactoryTarget.NgModule });
+    IgxMultiSliderThumbModule.ɵmod = ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxMultiSliderThumbModule, declarations: [IgxMultiSliderThumbComponent], imports: [CommonModule], exports: [IgxMultiSliderThumbComponent] });
+    IgxMultiSliderThumbModule.ɵinj = ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxMultiSliderThumbModule, imports: [[CommonModule]] });
+    return IgxMultiSliderThumbModule;
+}());
+ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxMultiSliderThumbModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [IgxMultiSliderThumbComponent],
+                    imports: [CommonModule],
+                    exports: [IgxMultiSliderThumbComponent],
+                    entryComponents: []
+                }]
+        }] });
+
+/*
+THIS INFRAGISTICS ULTIMATE SOFTWARE LICENSE  AGREEMENT ("AGREEMENT") LOCATED HERE:
+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.
+*/
+var IgxMultiSliderThumbDynamicModule = /** @class */ /*@__PURE__*/ (function () {
+    function IgxMultiSliderThumbDynamicModule() {
+        TypeRegistrar.registerCons("IgxMultiSliderThumbComponent", IgxMultiSliderThumbComponent);
+        TypeRegistrar.register("MultiSliderThumb", MultiSliderThumb.$type);
+    }
+    IgxMultiSliderThumbDynamicModule.ɵfac = ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxMultiSliderThumbDynamicModule, deps: [], target: ɵɵFactoryTarget.NgModule });
+    IgxMultiSliderThumbDynamicModule.ɵmod = ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxMultiSliderThumbDynamicModule, imports: [CommonModule, IgxMultiSliderThumbModule], exports: [IgxMultiSliderThumbModule] });
+    IgxMultiSliderThumbDynamicModule.ɵinj = ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxMultiSliderThumbDynamicModule, imports: [[CommonModule, IgxMultiSliderThumbModule], IgxMultiSliderThumbModule] });
+    return IgxMultiSliderThumbDynamicModule;
+}());
+ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxMultiSliderThumbDynamicModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [CommonModule, IgxMultiSliderThumbModule],
+                    exports: [IgxMultiSliderThumbModule],
+                    entryComponents: [IgxMultiSliderThumbComponent]
+                }]
+        }], ctorParameters: function () { return []; } });
+
 /*
 THIS INFRAGISTICS ULTIMATE SOFTWARE LICENSE  AGREEMENT ("AGREEMENT") LOCATED HERE:
 https://www.infragistics.com/legal/license/igultimate-la
@@ -46944,4 +47108,4 @@ var TextBlockVisualModelExport = /** @class */ /*@__PURE__*/ (function (_super)
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonClickEventArgs, ButtonDisplayStyle_$type, ButtonGroupDisplayStyle_$type, ButtonGroupOrientation, ButtonGroupOrientation_$type, ButtonGroupSelectionChangedEventArgs, ButtonGroupView, ButtonGroupVisualModelExport, ButtonView, ButtonVisualModelExport, CalendarView, CalendarVisualModelExport, CheckboxChangeEventArgs, CheckboxLabelPosition_$type, CheckboxListVisualModelExport, CheckboxView, CheckboxVisualModelExport, ColorEditor, ColorEditorBridge, ColorEditorGotFocusEventArgs, ColorEditorLostFocusEventArgs, ColorEditorPanel, ColorEditorPanelClosedEventArgs, ColorEditorPanelSelectedValueChangedEventArgs, ColorEditorPanelView, ColorEditorView, ColorEditorVisualModelExport, DateFormats, DateFormats_$type, DatePickerView, DatePickerVisualModelExport, DateTimeValueFormatter, DayInfo, DayOfWeek, DayOfWeek_$type, DefaultMultiSliderTrackBarVisual, DefaultMultiSliderTrackRangeVisual, DefaultMultiSliderTrackThumbCalloutVisual, DefaultMultiSliderTrackThumbVisual, DefaultMultiTrackShadeVisual, ElevationHelper, FirstWeek, FirstWeek_$type, GotFocusEventArgs, IMultiSliderTrackBarVisual_$type, IMultiSliderTrackRangeVisual_$type, IMultiSliderTrackShadeVisual_$type, IMultiSliderTrackThumbCalloutVisual_$type, IMultiSliderTrackThumbVisual_$type, ISliderTrackOwner_$type, IconClickedEventArgs, IconView, IconViewType_$type, IconVisualModelExport, IgxButtonClickEventArgs, IgxButtonGroupSelectionChangedEventArgs, IgxCheckboxChangeEventArgs, IgxColorEditorComponent, IgxColorEditorDynamicModule, IgxColorEditorGotFocusEventArgs, IgxColorEditorLostFocusEventArgs, IgxColorEditorModule, IgxColorEditorPanelClosedEventArgs, IgxColorEditorPanelComponent, IgxColorEditorPanelDynamicModule, IgxColorEditorPanelModule, IgxColorEditorPanelSelectedValueChangedEventArgs, IgxGotFocusEventArgs, IgxInputChangeEventArgs, IgxLostFocusEventArgs, IgxMultiSliderComponent, IgxMultiSliderDynamicModule, IgxMultiSliderModule, IgxMultiSliderResolvingToolTipValueEventArgs, IgxMultiSliderThumb, IgxMultiSliderThumbCollection, IgxMultiSliderThumbValueChangingEventArgs, IgxMultiSliderTrackThumbRange, IgxMultiSliderYValueChangingEventArgs, IgxSelectedValueChangedEventArgs, IgxXButtonComponent, IgxXButtonDynamicModule, IgxXButtonGroupButtonCollection, IgxXButtonGroupComponent, IgxXButtonGroupDynamicModule, IgxXButtonGroupModule, IgxXButtonModule, IgxXCalendarComponent, IgxXCalendarDynamicModule, IgxXCalendarLocaleEnModule, IgxXCalendarModule, IgxXCheckboxComponent, IgxXCheckboxDynamicModule, IgxXCheckboxModule, IgxXDatePickerComponent, IgxXDatePickerDynamicModule, IgxXDatePickerModule, IgxXIconComponent, IgxXIconDynamicModule, IgxXIconModule, IgxXInputComponent, IgxXInputDynamicModule, IgxXInputGroupComponent, IgxXInputGroupDynamicModule, IgxXInputGroupInputCollection, IgxXInputGroupItemComponent, IgxXInputGroupModule, IgxXInputModule, IgxXLabelComponent, IgxXLabelDynamicModule, IgxXLabelModule, IgxXPrefixComponent, IgxXPrefixDynamicModule, IgxXPrefixModule, IgxXRippleComponent, IgxXRippleDynamicModule, IgxXRippleModule, IgxXSuffixComponent, InputChangeEventArgs, InputGroupDisplayType, InputGroupDisplayType_$type, InputGroupView, InputGroupVisualModelExport, InputShiftType, InputShiftType_$type, InputView, InputVisualModelExport, KEYCODES_$type, LabelShiftType, LabelShiftType_$type, LabelView, LabelVisualModelExport, LostFocusEventArgs, MaskOptions, MaskParsingService, MultiSlider, MultiSliderBridge, MultiSliderCursor_$type, MultiSliderHitInfo, MultiSliderOrientation, MultiSliderOrientation_$type, MultiSliderResolvingToolTipValueEventArgs, MultiSliderThumb, MultiSliderThumbCollection, MultiSliderThumbRangePosition, MultiSliderThumbRangePosition_$type, MultiSliderThumbValueChangingEventArgs, MultiSliderTrackShadeOrientation_$type, MultiSliderTrackThumbRange, MultiSliderView, MultiSliderVisualArea_$type, MultiSliderYValueChangingEventArgs, NativeUIXInputsFactory, PrefixShiftType, PrefixShiftType_$type, PrefixView, PrefixVisualModelExport, Replaced, RippleView, RippleVisualModelExport, SelectedValueChangedEventArgs, SuffixShiftType, SuffixShiftType_$type, SuffixView, SuffixVisualModelExport, TextBlockVisualModelExport, TextElementsVisualModelExport, Theme, ThemeResolver, XButton, XButtonBridge, XButtonGroup, XButtonGroupBridge, XButtonGroupButtonCollection, XCalendar, XCalendarLocaleEn, XCheckbox, XCheckboxBridge, XComponentBridge, XDatePicker, XIcon, XIconBridge, XIconButtonBridge, XInput, XInputBridge, XInputGroup, XInputGroupInputCollection, XInputGroupItem, XLabel, XPopupBridge, XPrefix, XRipple, XSuffix };
+export { ButtonClickEventArgs, ButtonDisplayStyle_$type, ButtonGroupDisplayStyle_$type, ButtonGroupOrientation, ButtonGroupOrientation_$type, ButtonGroupSelectionChangedEventArgs, ButtonGroupView, ButtonGroupVisualModelExport, ButtonView, ButtonVisualModelExport, CalendarView, CalendarVisualModelExport, CheckboxChangeEventArgs, CheckboxLabelPosition_$type, CheckboxListVisualModelExport, CheckboxView, CheckboxVisualModelExport, ColorEditor, ColorEditorBridge, ColorEditorGotFocusEventArgs, ColorEditorLostFocusEventArgs, ColorEditorPanel, ColorEditorPanelClosedEventArgs, ColorEditorPanelSelectedValueChangedEventArgs, ColorEditorPanelView, ColorEditorView, ColorEditorVisualModelExport, DateFormats, DateFormats_$type, DatePickerView, DatePickerVisualModelExport, DateTimeValueFormatter, DayInfo, DayOfWeek, DayOfWeek_$type, DefaultMultiSliderTrackBarVisual, DefaultMultiSliderTrackRangeVisual, DefaultMultiSliderTrackThumbCalloutVisual, DefaultMultiSliderTrackThumbVisual, DefaultMultiTrackShadeVisual, ElevationHelper, FirstWeek, FirstWeek_$type, GotFocusEventArgs, IMultiSliderTrackBarVisual_$type, IMultiSliderTrackRangeVisual_$type, IMultiSliderTrackShadeVisual_$type, IMultiSliderTrackThumbCalloutVisual_$type, IMultiSliderTrackThumbVisual_$type, ISliderTrackOwner_$type, IconClickedEventArgs, IconView, IconViewType_$type, IconVisualModelExport, IgxButtonClickEventArgs, IgxButtonGroupSelectionChangedEventArgs, IgxCheckboxChangeEventArgs, IgxColorEditorComponent, IgxColorEditorDynamicModule, IgxColorEditorGotFocusEventArgs, IgxColorEditorLostFocusEventArgs, IgxColorEditorModule, IgxColorEditorPanelClosedEventArgs, IgxColorEditorPanelComponent, IgxColorEditorPanelDynamicModule, IgxColorEditorPanelModule, IgxColorEditorPanelSelectedValueChangedEventArgs, IgxGotFocusEventArgs, IgxInputChangeEventArgs, IgxLostFocusEventArgs, IgxMultiSliderComponent, IgxMultiSliderDynamicModule, IgxMultiSliderModule, IgxMultiSliderResolvingToolTipValueEventArgs, IgxMultiSliderThumbCollection, IgxMultiSliderThumbComponent, IgxMultiSliderThumbDynamicModule, IgxMultiSliderThumbModule, IgxMultiSliderThumbValueChangingEventArgs, IgxMultiSliderTrackThumbRange, IgxMultiSliderYValueChangingEventArgs, IgxSelectedValueChangedEventArgs, IgxXButtonComponent, IgxXButtonDynamicModule, IgxXButtonGroupButtonCollection, IgxXButtonGroupComponent, IgxXButtonGroupDynamicModule, IgxXButtonGroupModule, IgxXButtonModule, IgxXCalendarComponent, IgxXCalendarDynamicModule, IgxXCalendarLocaleEnModule, IgxXCalendarModule, IgxXCheckboxComponent, IgxXCheckboxDynamicModule, IgxXCheckboxModule, IgxXDatePickerComponent, IgxXDatePickerDynamicModule, IgxXDatePickerModule, IgxXIconComponent, IgxXIconDynamicModule, IgxXIconModule, IgxXInputComponent, IgxXInputDynamicModule, IgxXInputGroupComponent, IgxXInputGroupDynamicModule, IgxXInputGroupInputCollection, IgxXInputGroupItemComponent, IgxXInputGroupModule, IgxXInputModule, IgxXLabelComponent, IgxXLabelDynamicModule, IgxXLabelModule, IgxXPrefixComponent, IgxXPrefixDynamicModule, IgxXPrefixModule, IgxXRippleComponent, IgxXRippleDynamicModule, IgxXRippleModule, IgxXSuffixComponent, InputChangeEventArgs, InputGroupDisplayType, InputGroupDisplayType_$type, InputGroupView, InputGroupVisualModelExport, InputShiftType, InputShiftType_$type, InputView, InputVisualModelExport, KEYCODES_$type, LabelShiftType, LabelShiftType_$type, LabelView, LabelVisualModelExport, LostFocusEventArgs, MaskOptions, MaskParsingService, MultiSlider, MultiSliderBridge, MultiSliderCursor_$type, MultiSliderHitInfo, MultiSliderOrientation, MultiSliderOrientation_$type, MultiSliderResolvingToolTipValueEventArgs, MultiSliderThumb, MultiSliderThumbCollection, MultiSliderThumbRangePosition, MultiSliderThumbRangePosition_$type, MultiSliderThumbValueChangingEventArgs, MultiSliderTrackShadeOrientation_$type, MultiSliderTrackThumbRange, MultiSliderView, MultiSliderVisualArea_$type, MultiSliderYValueChangingEventArgs, NativeUIXInputsFactory, PrefixShiftType, PrefixShiftType_$type, PrefixView, PrefixVisualModelExport, Replaced, RippleView, RippleVisualModelExport, SelectedValueChangedEventArgs, SuffixShiftType, SuffixShiftType_$type, SuffixView, SuffixVisualModelExport, TextBlockVisualModelExport, TextElementsVisualModelExport, Theme, ThemeResolver, XButton, XButtonBridge, XButtonGroup, XButtonGroupBridge, XButtonGroupButtonCollection, XCalendar, XCalendarLocaleEn, XCheckbox, XCheckboxBridge, XComponentBridge, XDatePicker, XIcon, XIconBridge, XIconButtonBridge, XInput, XInputBridge, XInputGroup, XInputGroupInputCollection, XInputGroupItem, XLabel, XPopupBridge, XPrefix, XRipple, XSuffix };