igniteui-webcomponents-inputs 6.2.2-alpha.3 → 6.3.0

package/bundles/igniteui-webcomponents-inputs.umd.js

@@ -1447,46 +1447,46 @@
         tslib.__extends(ButtonView, _super);
         function ButtonView() {
             var _this = _super.call(this) || this;
-            _this.b = null;
-            _this.k = null;
-            _this.d = null;
-            _this.h = new igniteuiWebcomponentsCore.List$1(igniteuiWebcomponentsCore.Delegate_$type, 0);
-            _this.e = true;
-            _this.n = null;
-            _this.j = NaN;
-            _this.i = NaN;
-            _this.l = null;
             _this.c = null;
+            _this.l = null;
+            _this.e = null;
+            _this.i = new igniteuiWebcomponentsCore.List$1(igniteuiWebcomponentsCore.Delegate_$type, 0);
+            _this.f = true;
+            _this.o = null;
+            _this.k = NaN;
+            _this.j = NaN;
             _this.m = null;
+            _this.d = null;
+            _this.n = null;
+            _this.q = null;
             _this.p = null;
-            _this.o = null;
             return _this;
         }
-        ButtonView.prototype.aq = function () {
+        ButtonView.prototype.ar = function () {
         };
-        ButtonView.prototype.g = function () {
+        ButtonView.prototype.h = function () {
             return true;
         };
-        Object.defineProperty(ButtonView.prototype, "q", {
+        Object.defineProperty(ButtonView.prototype, "r", {
             get: function () {
-                return this.n;
+                return this.o;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(ButtonView.prototype, "s", {
+        Object.defineProperty(ButtonView.prototype, "t", {
             get: function () {
-                return this.m;
+                return this.n;
             },
             enumerable: false,
             configurable: true
         });
-        ButtonView.prototype.ak = function (a) {
+        ButtonView.prototype.al = function (a) {
             var e_1, _a;
             var _this = this;
             if (a == null) {
                 try {
-                    for (var _b = tslib.__values(igniteuiWebcomponentsCore.fromEnum(this.h)), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    for (var _b = tslib.__values(igniteuiWebcomponentsCore.fromEnum(this.i)), _c = _b.next(); !_c.done; _c = _b.next()) {
                         var b = _c.value;
                         b();
                     }
@@ -1504,46 +1504,46 @@
                             throw e_1.error;
                     }
                 }
-                this.h.clear();
+                this.i.clear();
                 return;
             }
-            this.k = a;
-            this.k.rootWrapper.setStyleProperty("display", "flex");
-            this.k.rootWrapper.setStyleProperty("flex-direction", "row");
-            this.k.rootWrapper.setStyleProperty("flex-wrap", "no-wrap");
-            this.k.rootWrapper.setStyleProperty("align-items", "center");
-            var c = this.k.createElement("button");
-            this.n = c;
-            this.n.setStyleProperty("position", "relative");
-            this.n.setStyleProperty("display", "inline-flex");
-            this.n.setStyleProperty("align-items", "center");
-            this.n.setStyleProperty("justify-content", "center");
-            this.a0();
-            this.n.setStyleProperty("border", "none");
-            this.n.setStyleProperty("cursor", "pointer");
-            this.n.setStyleProperty("user-select", "none");
-            this.n.setStyleProperty("outline-style", "none");
-            this.n.setStyleProperty("-webkit-tap-highlight-color", "transparent");
-            this.n.setStyleProperty("overflow", "hidden");
-            this.n.setStyleProperty("white-space", "no-wrap");
-            this.n.setStyleProperty("color", "#000");
-            this.n.setStyleProperty("background", this.b.no._fill);
-            igniteuiWebcomponentsCore.NativeUI.o(this.n, this.b.kz);
-            this.n.setAttribute("id", this.b.hy);
-            this.ax();
-            this.h.add(c.listen("change", igniteuiWebcomponentsCore.runOn(this, this.z)));
-            this.h.add(c.listen("click", igniteuiWebcomponentsCore.runOn(this, this.aa)));
-            this.h.add(c.listen("focus", igniteuiWebcomponentsCore.runOn(this, this.ab)));
-            this.h.add(c.listen("blur", igniteuiWebcomponentsCore.runOn(this, this.y)));
-            this.h.add(this.k.rootWrapper.listen("mouseenter", igniteuiWebcomponentsCore.runOn(this, this.v)));
-            this.h.add(this.k.rootWrapper.listen("mouseleave", igniteuiWebcomponentsCore.runOn(this, this.w)));
-            this.h.add(this.k.rootWrapper.listen("mousedown", igniteuiWebcomponentsCore.runOn(this, this.u)));
-            this.h.add(this.k.rootWrapper.listen("mouseup", igniteuiWebcomponentsCore.runOn(this, this.x)));
-            this.h.add(this.k.rootWrapper.listen("focusin", igniteuiWebcomponentsCore.runOn(this, this.ac)));
-            this.h.add(this.k.rootWrapper.listen("focusout", igniteuiWebcomponentsCore.runOn(this, this.ad)));
-            this.k.append(c);
-            var d = this.k.createElement("div");
-            var e = this.k.getSubRenderer(d);
+            this.l = a;
+            this.l.rootWrapper.setStyleProperty("display", "flex");
+            this.l.rootWrapper.setStyleProperty("flex-direction", "row");
+            this.l.rootWrapper.setStyleProperty("flex-wrap", "no-wrap");
+            this.l.rootWrapper.setStyleProperty("align-items", "center");
+            var c = this.l.createElement("button");
+            this.o = c;
+            this.o.setStyleProperty("position", "relative");
+            this.o.setStyleProperty("display", "inline-flex");
+            this.o.setStyleProperty("align-items", "center");
+            this.o.setStyleProperty("justify-content", "center");
+            this.a1();
+            this.o.setStyleProperty("border", "none");
+            this.o.setStyleProperty("cursor", "pointer");
+            this.o.setStyleProperty("user-select", "none");
+            this.o.setStyleProperty("outline-style", "none");
+            this.o.setStyleProperty("-webkit-tap-highlight-color", "transparent");
+            this.o.setStyleProperty("overflow", "hidden");
+            this.o.setStyleProperty("white-space", "no-wrap");
+            this.o.setStyleProperty("color", "#000");
+            this.o.setStyleProperty("background", this.c.no._fill);
+            igniteuiWebcomponentsCore.NativeUI.o(this.o, this.c.kz);
+            this.o.setAttribute("id", this.c.hy);
+            this.ay();
+            this.i.add(c.listen("change", igniteuiWebcomponentsCore.runOn(this, this.aa)));
+            this.i.add(c.listen("click", igniteuiWebcomponentsCore.runOn(this, this.ab)));
+            this.i.add(c.listen("focus", igniteuiWebcomponentsCore.runOn(this, this.ac)));
+            this.i.add(c.listen("blur", igniteuiWebcomponentsCore.runOn(this, this.z)));
+            this.i.add(this.l.rootWrapper.listen("mouseenter", igniteuiWebcomponentsCore.runOn(this, this.w)));
+            this.i.add(this.l.rootWrapper.listen("mouseleave", igniteuiWebcomponentsCore.runOn(this, this.x)));
+            this.i.add(this.l.rootWrapper.listen("mousedown", igniteuiWebcomponentsCore.runOn(this, this.v)));
+            this.i.add(this.l.rootWrapper.listen("mouseup", igniteuiWebcomponentsCore.runOn(this, this.y)));
+            this.i.add(this.l.rootWrapper.listen("focusin", igniteuiWebcomponentsCore.runOn(this, this.ad)));
+            this.i.add(this.l.rootWrapper.listen("focusout", igniteuiWebcomponentsCore.runOn(this, this.ae)));
+            this.l.append(c);
+            var d = this.l.createElement("div");
+            var e = this.l.getSubRenderer(d);
             d.setStyleProperty("position", "absolute");
             d.setStyleProperty("width", "100%");
             d.setStyleProperty("height", "100%");
@@ -1553,40 +1553,40 @@
             var f = new XRipple();
             f.provideContainer(e);
             f.q = c;
-            var g = this.k.getExternal(f, this.k.rootWrapper, this.k.getExternal(this.b, null, null));
+            var g = this.l.getExternal(f, this.l.rootWrapper, this.l.getExternal(this.c, null, null));
             f.h = false;
             f.k = true;
-            this.c = f;
-            this.n.append(d);
-            var h = this.k.createElement("div");
+            this.d = f;
+            this.o.append(d);
+            var h = this.l.createElement("div");
             h.addClass("ig-button-content");
             h.setStyleProperty("font-family", "Verdana");
             h.setStyleProperty("font-weight", "400");
             h.setStyleProperty("font-size", ".875rem");
-            this.m = h;
-            this.h.add(h.listen("click", igniteuiWebcomponentsCore.runOn(this, this.t)));
-            this.n.append(h);
-            this.o = h;
-            this.k.getPortal(h, "ChildContent", function (i) {
+            this.n = h;
+            this.i.add(h.listen("click", igniteuiWebcomponentsCore.runOn(this, this.u)));
+            this.o.append(h);
+            this.p = h;
+            this.l.getPortal(h, "ChildContent", function (i) {
                 var comp_ = i.componentRef;
-                _this.p = comp_;
+                _this.q = comp_;
                 {
-                    _this.o.setStyleProperty("flex-direction", _this.b.g4);
-                    _this.o.setStyleProperty("align-items", _this.b.fb);
-                    var direction_ = _this.b.g4;
-                    var display_ = _this.b.fj != null ? _this.b.fj : _this.b.f0;
-                    var alignItems_ = _this.b.fb;
+                    _this.p.setStyleProperty("flex-direction", _this.c.g4);
+                    _this.p.setStyleProperty("align-items", _this.c.fb);
+                    var direction_ = _this.c.g4;
+                    var display_ = _this.c.fj != null ? _this.c.fj : _this.c.f0;
+                    var alignItems_ = _this.c.fb;
                     comp_.display = display_;
                     comp_.flexDirection = direction_;
                     comp_.alignItems = alignItems_;
                 }
             }, true);
-            this.b.kl();
+            this.c.kl();
         };
-        ButtonView.prototype.am = function () {
-            this.c.i = this.b.as;
+        ButtonView.prototype.an = function () {
+            this.d.i = this.c.as;
         };
-        ButtonView.prototype.a0 = function () {
+        ButtonView.prototype.a1 = function () {
             var a = "2.25rem";
             var b = "2.25rem";
             var c = "2.25rem";
@@ -1600,7 +1600,7 @@
             var k = "0px";
             var l = ".9375rem";
             var m = ".5625rem 1rem";
-            switch (this.b.q) {
+            switch (this.c.q) {
                 case 2:
                     m = ".375rem .75rem";
                     j = "1.875rem";
@@ -1633,130 +1633,130 @@
                     c = "1rem";
                     break;
             }
-            if (!igniteuiWebcomponentsCore.isNaN_(this.b.bm) && !igniteuiWebcomponentsCore.isNaN_(this.b.bo) && !igniteuiWebcomponentsCore.isNaN_(this.b.bn) && !igniteuiWebcomponentsCore.isNaN_(this.b.bl)) {
-                m = this.b.bo + "px " + this.b.bn + "px " + this.b.bl + "px " + this.b.bm + "px";
+            if (!igniteuiWebcomponentsCore.isNaN_(this.c.bm) && !igniteuiWebcomponentsCore.isNaN_(this.c.bo) && !igniteuiWebcomponentsCore.isNaN_(this.c.bn) && !igniteuiWebcomponentsCore.isNaN_(this.c.bl)) {
+                m = this.c.bo + "px " + this.c.bn + "px " + this.c.bl + "px " + this.c.bm + "px";
             }
-            if (this.b.e == 4) {
-                this.n.setStyleProperty("min-width", a);
-                this.n.setStyleProperty("min-height", b);
-                this.n.setStyleProperty("padding", k);
-                this.n.setStyleProperty("width", c);
-                this.n.setStyleProperty("height", d);
+            if (this.c.e == 4) {
+                this.o.setStyleProperty("min-width", a);
+                this.o.setStyleProperty("min-height", b);
+                this.o.setStyleProperty("padding", k);
+                this.o.setStyleProperty("width", c);
+                this.o.setStyleProperty("height", d);
             }
-            else if (this.b.e == 3) {
-                this.n.setStyleProperty("min-width", e);
-                this.n.setStyleProperty("min-height", f);
-                this.n.setStyleProperty("padding", l);
-                this.n.setStyleProperty("width", g);
-                this.n.setStyleProperty("height", h);
+            else if (this.c.e == 3) {
+                this.o.setStyleProperty("min-width", e);
+                this.o.setStyleProperty("min-height", f);
+                this.o.setStyleProperty("padding", l);
+                this.o.setStyleProperty("width", g);
+                this.o.setStyleProperty("height", h);
             }
             else {
-                this.n.setStyleProperty("width", "auto");
-                this.n.setStyleProperty("height", "auto");
-                this.n.setStyleProperty("min-width", i);
-                this.n.setStyleProperty("min-height", j);
-                this.n.setStyleProperty("padding", m);
+                this.o.setStyleProperty("width", "auto");
+                this.o.setStyleProperty("height", "auto");
+                this.o.setStyleProperty("min-width", i);
+                this.o.setStyleProperty("min-height", j);
+                this.o.setStyleProperty("padding", m);
             }
-            this.k.rootWrapper.setStyleProperty("height", "auto");
-            if (!igniteuiWebcomponentsCore.isNaN_(this.b.bj) && this.b.bj > 0) {
-                this.n.setStyleProperty("border-style", "solid");
+            this.l.rootWrapper.setStyleProperty("height", "auto");
+            if (!igniteuiWebcomponentsCore.isNaN_(this.c.bj) && this.c.bj > 0) {
+                this.o.setStyleProperty("border-style", "solid");
             }
             else {
-                this.n.setStyleProperty("border-style", "none");
+                this.o.setStyleProperty("border-style", "none");
             }
-            if (!igniteuiWebcomponentsCore.isNaN_(this.j)) {
-                this.n.setStyleProperty("min-width", this.j.toString() + "px");
+            if (!igniteuiWebcomponentsCore.isNaN_(this.k)) {
+                this.o.setStyleProperty("min-width", this.k.toString() + "px");
             }
-            if (!igniteuiWebcomponentsCore.isNaN_(this.i)) {
-                this.n.setStyleProperty("min-height", this.i.toString() + "px");
+            if (!igniteuiWebcomponentsCore.isNaN_(this.j)) {
+                this.o.setStyleProperty("min-height", this.j.toString() + "px");
             }
-            if (this.b.ay) {
-                this.n.setStyleProperty("width", "100%");
-                this.n.setStyleProperty("height", "100%");
-                this.k.rootWrapper.setStyleProperty("height", "100%");
+            if (this.c.ay) {
+                this.o.setStyleProperty("width", "100%");
+                this.o.setStyleProperty("height", "100%");
+                this.l.rootWrapper.setStyleProperty("height", "100%");
             }
         };
-        ButtonView.prototype.au = function () {
-            switch (this.b.le) {
+        ButtonView.prototype.av = function () {
+            switch (this.c.le) {
                 case 1:
-                    this.n.setStyleProperty("justify-content", "center");
-                    this.o.setStyleProperty("flex-grow", "unset");
+                    this.o.setStyleProperty("justify-content", "center");
+                    this.p.setStyleProperty("flex-grow", "unset");
                     break;
                 case 3:
-                    this.n.setStyleProperty("justify-content", "stretch");
-                    this.o.setStyleProperty("flex-grow", "1");
+                    this.o.setStyleProperty("justify-content", "stretch");
+                    this.p.setStyleProperty("flex-grow", "1");
                     break;
                 case 0:
-                    this.n.setStyleProperty("justify-content", "left");
-                    this.o.setStyleProperty("flex-grow", "unset");
+                    this.o.setStyleProperty("justify-content", "left");
+                    this.p.setStyleProperty("flex-grow", "unset");
                     break;
                 case 2:
-                    this.n.setStyleProperty("justify-content", "right");
-                    this.o.setStyleProperty("flex-grow", "unset");
+                    this.o.setStyleProperty("justify-content", "right");
+                    this.p.setStyleProperty("flex-grow", "unset");
                     break;
             }
         };
+        ButtonView.prototype.ax = function (a) {
+            this.k = a;
+        };
         ButtonView.prototype.aw = function (a) {
             this.j = a;
         };
-        ButtonView.prototype.av = function (a) {
-            this.i = a;
-        };
-        ButtonView.prototype.as = function () {
-            this.n.setAttribute("disabled", this.b.disabled ? "true" : "false");
-            this.n.setProperty("disabled", this.b.disabled);
+        ButtonView.prototype.at = function () {
+            this.o.setAttribute("disabled", this.c.disabled ? "true" : "false");
+            this.o.setProperty("disabled", this.c.disabled);
         };
-        ButtonView.prototype.an = function () {
-            if (this.k != null) {
-                this.k.rootWrapper.setStyleProperty("display", this.b.f0);
-                var comp_ = this.p;
-                if (this.p != null) {
-                    this.o.setStyleProperty("display", this.b.f0);
-                    var display_ = this.b.fj != null ? this.b.f0 : this.b.fj;
+        ButtonView.prototype.ao = function () {
+            if (this.l != null) {
+                this.l.rootWrapper.setStyleProperty("display", this.c.f0);
+                var comp_ = this.q;
+                if (this.q != null) {
+                    this.p.setStyleProperty("display", this.c.f0);
+                    var display_ = this.c.fj != null ? this.c.f0 : this.c.fj;
                     comp_.display = display_;
                 }
-                var ext_ = this.k.getExternal(this.b, null, null);
+                var ext_ = this.l.getExternal(this.c, null, null);
                 if (ext_ && ext_._onDisplayChanged) {
                     ext_._onDisplayChanged();
                 }
                 ;
             }
         };
-        ButtonView.prototype.aj = function () {
-            if (this.k != null) {
-                var comp_ = this.p;
-                if (this.p != null) {
-                    var display_ = this.b.fj != null ? this.b.fj : this.b.f0;
+        ButtonView.prototype.ak = function () {
+            if (this.l != null) {
+                var comp_ = this.q;
+                if (this.q != null) {
+                    var display_ = this.c.fj != null ? this.c.fj : this.c.f0;
                     comp_.display = display_;
                 }
             }
         };
-        ButtonView.prototype.ah = function () {
-            if (this.k != null) {
-                this.k.rootWrapper.setStyleProperty("align-items", this.b.fb);
-                this.n.setStyleProperty("align-items", this.b.fb);
-                var comp_ = this.p;
-                if (this.p != null) {
-                    this.o.setStyleProperty("align-items", this.b.fb);
-                    var alignItems_ = this.b.fb;
+        ButtonView.prototype.ai = function () {
+            if (this.l != null) {
+                this.l.rootWrapper.setStyleProperty("align-items", this.c.fb);
+                this.o.setStyleProperty("align-items", this.c.fb);
+                var comp_ = this.q;
+                if (this.q != null) {
+                    this.p.setStyleProperty("align-items", this.c.fb);
+                    var alignItems_ = this.c.fb;
                     comp_.alignItems = alignItems_;
                 }
-                var ext_ = this.k.getExternal(this.b, null, null);
+                var ext_ = this.l.getExternal(this.c, null, null);
                 if (ext_ && ext_._onAlignItemsChanged) {
                     ext_._onAlignItemsChanged();
                 }
                 ;
             }
         };
-        ButtonView.prototype.ao = function () {
-            if (this.k != null) {
-                this.k.rootWrapper.setStyleProperty("flex-direction", this.b.g4);
-                this.n.setStyleProperty("flex-direction", this.b.g4);
-                var ext_ = this.k.getExternal(this.b, null, null);
-                var comp_ = this.p;
-                if (this.p != null) {
-                    this.o.setStyleProperty("flex-direction", this.b.g4);
-                    var direction_ = this.b.g4;
+        ButtonView.prototype.ap = function () {
+            if (this.l != null) {
+                this.l.rootWrapper.setStyleProperty("flex-direction", this.c.g4);
+                this.o.setStyleProperty("flex-direction", this.c.g4);
+                var ext_ = this.l.getExternal(this.c, null, null);
+                var comp_ = this.q;
+                if (this.q != null) {
+                    this.p.setStyleProperty("flex-direction", this.c.g4);
+                    var direction_ = this.c.g4;
                     comp_.flexDirection = direction_;
                 }
                 if (ext_ && ext_._onFlexDirectionChanged) {
@@ -1765,114 +1765,114 @@
                 ;
             }
         };
-        ButtonView.prototype.ap = function () {
-            if (this.k != null) {
-                this.k.rootWrapper.setStyleProperty("flex-grow", this.b.g6);
-                this.n.setStyleProperty("flex-grow", this.b.g6);
-                var ext_ = this.k.getExternal(this.b, null, null);
+        ButtonView.prototype.aq = function () {
+            if (this.l != null) {
+                this.l.rootWrapper.setStyleProperty("flex-grow", this.c.g6);
+                this.o.setStyleProperty("flex-grow", this.c.g6);
+                var ext_ = this.l.getExternal(this.c, null, null);
                 if (ext_ && ext_._onFlexGrowChanged) {
                     ext_._onFlexGrowChanged();
                 }
                 ;
             }
         };
-        ButtonView.prototype.t = function (a) {
+        ButtonView.prototype.u = function (a) {
         };
-        ButtonView.prototype.ax = function () {
-            if (this.g()) {
-                var a = this.b.hy;
-                this.n.setAttribute("name", this.b.h6);
-                this.n.setProperty("value", this.b.ee);
-                if (this.b.az) {
-                    this.n.setAttribute("tabindex", this.b.d7.toString());
+        ButtonView.prototype.ay = function () {
+            if (this.h()) {
+                var a = this.c.hy;
+                this.o.setAttribute("name", this.c.h6);
+                this.o.setProperty("value", this.c.ee);
+                if (this.c.az) {
+                    this.o.setAttribute("tabindex", this.c.d7.toString());
                 }
-                this.n.setProperty("disabled", this.b.disabled);
+                this.o.setProperty("disabled", this.c.disabled);
                 {
                 }
-                this.n.setAttribute("aria-label", this.b.fd);
-                this.n.setStyleProperty("cursor", !this.b.av ? "pointer" : "unset");
+                this.o.setAttribute("aria-label", this.c.fd);
+                this.o.setStyleProperty("cursor", !this.c.av ? "pointer" : "unset");
             }
         };
-        ButtonView.prototype.ar = function () {
-            if (this.g()) {
-                var a = this.b.hy;
-                this.n.setAttribute("id", a);
+        ButtonView.prototype.as = function () {
+            if (this.h()) {
+                var a = this.c.hy;
+                this.o.setAttribute("id", a);
             }
         };
-        ButtonView.prototype.v = function (a) {
-            this.b.kh();
-            if (this.b.a5) {
+        ButtonView.prototype.w = function (a) {
+            this.c.kh();
+            if (this.c.a5) {
                 a.stopPropagation();
             }
         };
-        ButtonView.prototype.w = function (a) {
-            this.b.ki();
-            if (this.b.a5) {
+        ButtonView.prototype.x = function (a) {
+            this.c.ki();
+            if (this.c.a5) {
                 a.stopPropagation();
             }
         };
-        ButtonView.prototype.u = function (a) {
-            this.b.kg();
-            if (this.b.a5) {
+        ButtonView.prototype.v = function (a) {
+            this.c.kg();
+            if (this.c.a5) {
                 a.stopPropagation();
             }
         };
-        ButtonView.prototype.x = function (a) {
-            this.b.kj();
-            if (this.b.a5) {
+        ButtonView.prototype.y = function (a) {
+            this.c.kj();
+            if (this.c.a5) {
                 a.stopPropagation();
             }
         };
-        ButtonView.prototype.y = function (a) {
-            this.b.ka();
+        ButtonView.prototype.z = function (a) {
+            this.c.ka();
         };
-        ButtonView.prototype.ab = function (a) {
-            this.b.kd();
+        ButtonView.prototype.ac = function (a) {
+            this.c.kd();
         };
-        ButtonView.prototype.aa = function (a) {
-            this.b.kb();
-            if (!this.b.at) {
+        ButtonView.prototype.ab = function (a) {
+            this.c.kb();
+            if (!this.c.at) {
                 a.preventDefault();
             }
-            if (this.b.a5) {
+            if (this.c.a5) {
                 a.stopPropagation();
             }
         };
-        ButtonView.prototype.ac = function (a) {
-            this.b.ke();
-        };
         ButtonView.prototype.ad = function (a) {
-            this.b.kf(a.originalEvent.relatedTarget, a.originalEvent.target);
+            this.c.ke();
+        };
+        ButtonView.prototype.ae = function (a) {
+            this.c.kf(a.originalEvent.relatedTarget, a.originalEvent.target);
         };
-        ButtonView.prototype.f = function () {
+        ButtonView.prototype.g = function () {
             return false;
         };
-        ButtonView.prototype.z = function (a) {
+        ButtonView.prototype.aa = function (a) {
         };
-        ButtonView.prototype.ag = function () {
+        ButtonView.prototype.ah = function () {
             if (igniteuiWebcomponentsCore.KeyFrameAnimationFactory.h == null) {
-                igniteuiWebcomponentsCore.KeyFrameAnimationFactory.h = this.k;
+                igniteuiWebcomponentsCore.KeyFrameAnimationFactory.h = this.l;
             }
         };
-        ButtonView.prototype.ai = function () {
-            this.e = true;
-            this.h.add(this.n.listen("change", igniteuiWebcomponentsCore.runOn(this, this.z)));
-            this.h.add(this.n.listen("click", igniteuiWebcomponentsCore.runOn(this, this.aa)));
-            this.h.add(this.n.listen("focus", igniteuiWebcomponentsCore.runOn(this, this.ab)));
-            this.h.add(this.n.listen("blur", igniteuiWebcomponentsCore.runOn(this, this.y)));
-            this.h.add(this.m.listen("click", igniteuiWebcomponentsCore.runOn(this, this.t)));
-            this.h.add(this.n.listen("mouseenter", igniteuiWebcomponentsCore.runOn(this, this.v)));
-            this.h.add(this.n.listen("mouseleave", igniteuiWebcomponentsCore.runOn(this, this.w)));
-            this.h.add(this.n.listen("mousedown", igniteuiWebcomponentsCore.runOn(this, this.u)));
-            this.h.add(this.n.listen("mouseup", igniteuiWebcomponentsCore.runOn(this, this.x)));
-            this.h.add(this.n.listen("focusin", igniteuiWebcomponentsCore.runOn(this, this.ac)));
-            this.h.add(this.n.listen("focusout", igniteuiWebcomponentsCore.runOn(this, this.ad)));
-        };
-        ButtonView.prototype.al = function () {
+        ButtonView.prototype.aj = function () {
+            this.f = true;
+            this.i.add(this.o.listen("change", igniteuiWebcomponentsCore.runOn(this, this.aa)));
+            this.i.add(this.o.listen("click", igniteuiWebcomponentsCore.runOn(this, this.ab)));
+            this.i.add(this.o.listen("focus", igniteuiWebcomponentsCore.runOn(this, this.ac)));
+            this.i.add(this.o.listen("blur", igniteuiWebcomponentsCore.runOn(this, this.z)));
+            this.i.add(this.n.listen("click", igniteuiWebcomponentsCore.runOn(this, this.u)));
+            this.i.add(this.o.listen("mouseenter", igniteuiWebcomponentsCore.runOn(this, this.w)));
+            this.i.add(this.o.listen("mouseleave", igniteuiWebcomponentsCore.runOn(this, this.x)));
+            this.i.add(this.o.listen("mousedown", igniteuiWebcomponentsCore.runOn(this, this.v)));
+            this.i.add(this.o.listen("mouseup", igniteuiWebcomponentsCore.runOn(this, this.y)));
+            this.i.add(this.o.listen("focusin", igniteuiWebcomponentsCore.runOn(this, this.ad)));
+            this.i.add(this.o.listen("focusout", igniteuiWebcomponentsCore.runOn(this, this.ae)));
+        };
+        ButtonView.prototype.am = function () {
             var e_2, _a;
-            this.e = false;
+            this.f = false;
             try {
-                for (var _b = tslib.__values(igniteuiWebcomponentsCore.fromEnum(this.h)), _c = _b.next(); !_c.done; _c = _b.next()) {
+                for (var _b = tslib.__values(igniteuiWebcomponentsCore.fromEnum(this.i)), _c = _b.next(); !_c.done; _c = _b.next()) {
                     var a = _c.value;
                     a();
                 }
@@ -1890,39 +1890,39 @@
                         throw e_2.error;
                 }
             }
-            this.h.clear();
+            this.i.clear();
         };
-        ButtonView.prototype.at = function () {
-            var model_ = this.b;
+        ButtonView.prototype.au = function () {
+            var model_ = this.c;
             if (model_.externalObject && model_.externalObject.refreshDefaults) {
                 model_.externalObject.refreshDefaults();
             }
             ;
         };
-        ButtonView.prototype.ay = function (a, b) {
-            this.c.ax = a;
-            this.c.aw = b;
-        };
         ButtonView.prototype.az = function (a, b) {
-            var c = ElevationHelper.e(a, this.b.n0, this.b.nx, this.b.nn, b);
-            this.n.setStyleProperty("box-shadow", c);
+            this.d.ax = a;
+            this.d.aw = b;
+        };
+        ButtonView.prototype.a0 = function (a, b) {
+            var c = ElevationHelper.e(a, this.c.n0, this.c.nx, this.c.nn, b);
+            this.o.setStyleProperty("box-shadow", c);
         };
-        ButtonView.prototype.a1 = function (a) {
+        ButtonView.prototype.a2 = function (a) {
             if (a != null) {
-                this.m.setStyleProperty("font", a.fontString);
+                this.n.setStyleProperty("font", a.fontString);
             }
         };
-        ButtonView.prototype.ae = function (a) {
-            this.m.append(a);
+        ButtonView.prototype.af = function (a) {
+            this.n.append(a);
         };
-        ButtonView.prototype.af = function () {
-            this.m.removeChildren();
+        ButtonView.prototype.ag = function () {
+            this.n.removeChildren();
         };
-        ButtonView.prototype.r = function () {
-            return this.m.getChildCount() > 0 ? this.m.getChildAt(0) : null;
+        ButtonView.prototype.s = function () {
+            return this.n.getChildCount() > 0 ? this.n.getChildAt(0) : null;
         };
-        ButtonView.prototype.a = function () {
-            var rect_ = this.k.rootWrapper.getNativeElement().getBoundingClientRect();
+        ButtonView.prototype.b = function () {
+            var rect_ = this.l.rootWrapper.getNativeElement().getBoundingClientRect();
             var a = (rect_.top);
             var b = (rect_.left);
             var c = new Array(2);
@@ -1930,6 +1930,12 @@
             c[1] = b;
             return c;
         };
+        ButtonView.prototype.a = function () {
+            var a = new Array(2);
+            a[0] = igniteuiWebcomponentsCore.NativeUI.k(this.r);
+            a[1] = igniteuiWebcomponentsCore.NativeUI.d(this.r);
+            return a;
+        };
         ButtonView.$t = igniteuiWebcomponentsCore.markType(ButtonView, 'ButtonView');
         return ButtonView;
     }(igniteuiWebcomponentsCore.Base));
@@ -2201,9 +2207,9 @@
             _this.gotFocus = null;
             _this.lostFocus = null;
             var a = new ButtonView();
-            a.b = _this;
+            a.c = _this;
             _this.view = a;
-            _this.view.aq();
+            _this.view.ar();
             return _this;
         }
         Object.defineProperty(XButton.prototype, "view", {
@@ -2339,7 +2345,7 @@
                 case "IsDisabled":
                     this.as = this.disabled || this.aw;
                     this.kq();
-                    this.view.as();
+                    this.view.at();
                     this.kp();
                     break;
                 case "DisableRipple":
@@ -2351,7 +2357,7 @@
                     this.kp();
                     break;
                 case "ActualDisableRipple":
-                    this.view.am();
+                    this.view.an();
                     break;
                 case "ActualBackgroundColor":
                 case "ActualDisabledBackgroundColor":
@@ -2374,11 +2380,11 @@
                     if (this.e == 4) {
                         this.ko();
                     }
-                    this.view.a0();
+                    this.view.a1();
                     this.kp();
                     break;
                 case "DisplayType":
-                    this.view.a0();
+                    this.view.a1();
                     this.kq();
                     this.kp();
                     break;
@@ -2387,43 +2393,43 @@
                 case "ContentPaddingRight":
                 case "ContentPaddingBottom":
                 case "FillAvailableSpace":
-                    this.view.a0();
+                    this.view.a1();
                     break;
                 case "HorizontalContentAlignment":
                 case "VerticalContentAlignment":
-                    this.view.au();
+                    this.view.av();
                     break;
                 case "InputId":
-                    this.view.ar();
+                    this.view.as();
                     break;
                 case "Display":
-                    this.view.an();
+                    this.view.ao();
                     break;
                 case "ChildContentDisplay":
-                    this.view.aj();
+                    this.view.ak();
                     break;
                 case "FlexDirection":
-                    this.view.ao();
+                    this.view.ap();
                     break;
                 case "FlexGrow":
-                    this.view.ap();
+                    this.view.aq();
                     break;
                 case "AlignItems":
-                    this.view.ah();
+                    this.view.ai();
                     break;
                 case "TabIndex":
-                    this.view.ax();
+                    this.view.ay();
                     break;
                 case "DisablePointer":
-                    this.view.ax();
+                    this.view.ay();
                     break;
                 case "MinWidth":
-                    this.view.aw(this.by);
-                    this.view.a0();
+                    this.view.ax(this.by);
+                    this.view.a1();
                     break;
                 case "MinHeight":
-                    this.view.av(this.bx);
-                    this.view.a0();
+                    this.view.aw(this.bx);
+                    this.view.a1();
                     break;
             }
         };
@@ -2607,7 +2613,7 @@
             }
         };
         XButton.prototype.kp = function () {
-            var a = this.view.q;
+            var a = this.view.r;
             if (a == null) {
                 return;
             }
@@ -2617,17 +2623,17 @@
                 igniteuiWebcomponentsCore.NativeUI.p(a, new igniteuiWebcomponentsCore.Thickness(0, this.bj));
             }
             if (this.disabled) {
-                this.view.az(this.cu, this.u);
+                this.view.a0(this.cu, this.u);
             }
             else if (this.focused && this.a2) {
-                this.view.az(this.cv, this.u);
+                this.view.a0(this.cv, this.u);
             }
             else {
                 if (this.a3 && !this.au) {
-                    this.view.az(this.cw, this.u);
+                    this.view.a0(this.cw, this.u);
                 }
                 else {
-                    this.view.az(this.cx, this.u);
+                    this.view.a0(this.cx, this.u);
                 }
             }
             if (this.disabled) {
@@ -2644,26 +2650,26 @@
                     igniteuiWebcomponentsCore.NativeUI.m(a, this.no);
                 }
             }
-            this.view.ay(this.ny, igniteuiWebcomponentsCore.BrushUtil.j(0, 0, 0, 0));
+            this.view.az(this.ny, igniteuiWebcomponentsCore.BrushUtil.j(0, 0, 0, 0));
             if (this.aa != null) {
-                this.view.a1(this.aa);
+                this.view.a2(this.aa);
             }
             if (this.disabled) {
-                igniteuiWebcomponentsCore.NativeUI.q(this.view.s, this.ns);
-                igniteuiWebcomponentsCore.NativeUI.r(this.view.s, this.ns);
+                igniteuiWebcomponentsCore.NativeUI.q(this.view.t, this.ns);
+                igniteuiWebcomponentsCore.NativeUI.r(this.view.t, this.ns);
             }
             else if (this.focused && this.a2) {
-                igniteuiWebcomponentsCore.NativeUI.q(this.view.s, this.nu);
-                igniteuiWebcomponentsCore.NativeUI.r(this.view.s, this.nu);
+                igniteuiWebcomponentsCore.NativeUI.q(this.view.t, this.nu);
+                igniteuiWebcomponentsCore.NativeUI.r(this.view.t, this.nu);
             }
             else {
                 if (this.a3 && !this.au) {
-                    igniteuiWebcomponentsCore.NativeUI.q(this.view.s, this.nw);
-                    igniteuiWebcomponentsCore.NativeUI.r(this.view.s, this.nw);
+                    igniteuiWebcomponentsCore.NativeUI.q(this.view.t, this.nw);
+                    igniteuiWebcomponentsCore.NativeUI.r(this.view.t, this.nw);
                 }
                 else {
-                    igniteuiWebcomponentsCore.NativeUI.q(this.view.s, this.nz);
-                    igniteuiWebcomponentsCore.NativeUI.r(this.view.s, this.nz);
+                    igniteuiWebcomponentsCore.NativeUI.q(this.view.t, this.nz);
+                    igniteuiWebcomponentsCore.NativeUI.r(this.view.t, this.nz);
                 }
             }
         };
@@ -5008,7 +5014,7 @@
         });
         XButton.prototype.kl = function () {
             this.j8();
-            this.view.ay(this.ny, igniteuiWebcomponentsCore.BrushUtil.j(0, 0, 0, 0));
+            this.view.az(this.ny, igniteuiWebcomponentsCore.BrushUtil.j(0, 0, 0, 0));
             this.kp();
         };
         Object.defineProperty(XButton.prototype, "a", {
@@ -5022,25 +5028,25 @@
             configurable: true
         });
         XButton.prototype.j8 = function () {
-            this.view.ag();
+            this.view.ah();
         };
         XButton.prototype.onDetachedFromUI = function () {
-            this.view.al();
+            this.view.am();
         };
         XButton.prototype.onAttachedToUI = function () {
-            this.view.ai();
+            this.view.aj();
         };
         XButton.prototype.appendButtonContent = function (a) {
-            this.view.ae(a);
+            this.view.af(a);
         };
         XButton.prototype.clearButtonContent = function () {
-            this.view.af();
+            this.view.ag();
         };
         XButton.prototype.getButtonContent = function () {
-            return this.view.r();
+            return this.view.s();
         };
         XButton.prototype.a4 = function () {
-            return this.view.g();
+            return this.view.h();
         };
         XButton.prototype.eb = function () {
             return this.b();
@@ -5050,14 +5056,15 @@
             return a.serialize();
         };
         XButton.prototype.b = function () {
-            var a = this.view.q;
-            var b = this.view.s;
+            var a = this.view.r;
+            var b = this.view.t;
             var c = new ButtonVisualModelExport();
-            var d = this.view.a();
+            var d = this.view.b();
             c.s = d[0];
             c.q = d[1];
-            c.p = igniteuiWebcomponentsCore.NativeUI.d(a);
-            c.t = igniteuiWebcomponentsCore.NativeUI.k(a);
+            var e = this.view.a();
+            c.t = e[0];
+            c.p = e[1];
             c.h = this.n;
             c.i = this.q;
             c.c = igniteuiWebcomponentsCore.AppearanceHelper.a(igniteuiWebcomponentsCore.NativeUI.ak(a));
@@ -5075,44 +5082,44 @@
             c.y = this.g4;
             c.z = this.g6;
             c.w = this.fb;
-            c.v = this.view.s.getNativeElement().innerText;
+            c.v = this.view.t.getNativeElement().innerText;
             c.aa = this.h6;
             c.m = this.focused;
             c.k = this.as;
             c.n = this.a3;
             c.l = this.disabled;
             if (this.aa != null) {
-                var e = this.aa;
-                if (this.view != null && e.q == null) {
-                    var f = this.view.k;
-                    var g = igniteuiWebcomponentsCore.FontUtil.getFontInfoFromString(f, e.fontString);
-                    e.q = g.q;
-                    e.f = g.f;
-                    e.r = g.r;
-                    e.t = g.t;
-                    e.u = g.u;
-                    e.v = g.v;
+                var f = this.aa;
+                if (this.view != null && f.q == null) {
+                    var g = this.view.l;
+                    var h = igniteuiWebcomponentsCore.FontUtil.getFontInfoFromString(g, f.fontString);
+                    f.q = h.q;
+                    f.f = h.f;
+                    f.r = h.r;
+                    f.t = h.t;
+                    f.u = h.u;
+                    f.v = h.v;
                 }
-                if (e.q != null) {
-                    c.ab = e.q;
+                if (f.q != null) {
+                    c.ab = f.q;
                 }
-                if (!igniteuiWebcomponentsCore.isNaN_(e.f)) {
-                    c.r = e.f;
+                if (!igniteuiWebcomponentsCore.isNaN_(f.f)) {
+                    c.r = f.f;
                 }
-                if (e.v != null) {
-                    c.af = e.v;
+                if (f.v != null) {
+                    c.af = f.v;
                 }
-                if (e.t != null) {
-                    c.ad = e.t;
+                if (f.t != null) {
+                    c.ad = f.t;
                 }
-                if (e.r != null) {
-                    c.ac = e.t;
+                if (f.r != null) {
+                    c.ac = f.t;
                 }
             }
             return c;
         };
         XButton.prototype.provideContainer = function (a) {
-            this.view.ak(a);
+            this.view.al(a);
         };
         XButton.$t = igniteuiWebcomponentsCore.markType(XButton, 'XButton', igniteuiWebcomponentsCore.Base.$, [igniteuiWebcomponentsCore.INotifyPropertyChanged_$type]);
         XButton.m = 2;
@@ -8906,6 +8913,9 @@
                 this.v.rootWrapper.setStyleProperty("font", a.fontString);
             }
         };
+        IconView.prototype.a2 = function () {
+            return new igniteuiWebcomponentsCore.Size(1, this.v.rootWrapper.width(), this.v.rootWrapper.height());
+        };
         IconView.prototype.b = function () {
             var rect_ = this.v.rootWrapper.getNativeElement().getBoundingClientRect();
             var a = (rect_.top);
@@ -10079,38 +10089,39 @@
             var b = this.view.b();
             a.i = b[0];
             a.g = b[1];
-            a.f = igniteuiWebcomponentsCore.NativeUI.d(this.view.aa);
-            a.j = igniteuiWebcomponentsCore.NativeUI.k(this.view.aa);
+            var c = this.view.a2();
+            a.f = c.height;
+            a.j = c.width;
             a.a = this.view.a();
             a.svg = this.svg;
             a.svgPath = this.svgPath;
             a.k = this.b0;
             if (this.o != null) {
-                var c = this.o;
-                if (this.view != null && c.q == null) {
-                    var d = this.view.v;
-                    var e = igniteuiWebcomponentsCore.FontUtil.getFontInfoFromString(d, c.fontString);
-                    c.q = e.q;
-                    c.f = e.f;
-                    c.r = e.r;
-                    c.t = e.t;
-                    c.u = e.u;
-                    c.v = e.v;
+                var d = this.o;
+                if (this.view != null && d.q == null) {
+                    var e = this.view.v;
+                    var f = igniteuiWebcomponentsCore.FontUtil.getFontInfoFromString(e, d.fontString);
+                    d.q = f.q;
+                    d.f = f.f;
+                    d.r = f.r;
+                    d.t = f.t;
+                    d.u = f.u;
+                    d.v = f.v;
                 }
-                if (c.q != null) {
-                    a.o = c.q;
+                if (d.q != null) {
+                    a.o = d.q;
                 }
-                if (!igniteuiWebcomponentsCore.isNaN_(c.f)) {
-                    a.h = c.f;
+                if (!igniteuiWebcomponentsCore.isNaN_(d.f)) {
+                    a.h = d.f;
                 }
-                if (c.v != null) {
-                    a.s = c.v;
+                if (d.v != null) {
+                    a.s = d.v;
                 }
-                if (c.t != null) {
-                    a.q = c.t;
+                if (d.t != null) {
+                    a.q = d.t;
                 }
-                if (c.r != null) {
-                    a.p = c.t;
+                if (d.r != null) {
+                    a.p = d.t;
                 }
             }
             return a;
@@ -15253,8 +15264,8 @@
                 if (e != 0) {
                     a.l(",");
                 }
-                var f = this.k._inner[e].k.charAt(0).toString().toLowerCase() + this.k._inner[e].k.substr(1);
-                a.l(this.k._inner[e].n());
+                var f = this.k._inner[e].m.charAt(0).toString().toLowerCase() + this.k._inner[e].m.substr(1);
+                a.l(this.k._inner[e].p());
             }
             a.l("],");
             a.l("suffixModels : [");
@@ -15367,61 +15378,63 @@
         tslib.__extends(InputVisualModelExport, _super);
         function InputVisualModelExport() {
             var _this = _super !== null && _super.apply(this, arguments) || this;
-            _this.h = 0;
+            _this.i = 0;
+            _this.g = 0;
+            _this.j = 0;
             _this.f = 0;
             _this.b = 0;
             _this.c = 0;
-            _this.j = null;
-            _this.m = null;
+            _this.l = null;
+            _this.o = null;
             _this.d = false;
             _this.a = null;
-            _this.q = null;
-            _this.r = null;
             _this.s = null;
-            _this.g = 0;
-            _this.o = null;
-            _this.p = null;
-            _this.i = null;
-            _this.l = null;
-            _this.e = false;
             _this.t = null;
+            _this.u = null;
+            _this.h = 0;
+            _this.q = null;
+            _this.r = null;
             _this.k = null;
+            _this.n = null;
+            _this.e = false;
+            _this.v = null;
+            _this.m = null;
             return _this;
         }
-        InputVisualModelExport.prototype.n = function () {
+        InputVisualModelExport.prototype.p = function () {
             var a = new igniteuiWebcomponentsCore.StringBuilder(0);
             a.l("{");
-            a.l("top : " + this.h + ", ");
-            a.l("left : " + this.f + ", ");
+            a.l("top : " + this.i + ", ");
+            a.l("left : " + this.g + ", ");
             a.l("shiftType : " + this.b + ", ");
             a.l("actualDensity : " + this.c + ", ");
-            a.l("mask : \"" + this.j + "\", ");
-            a.l("promptChar : \"" + this.m + "\", ");
+            a.l("mask : \"" + this.l + "\", ");
+            a.l("promptChar : \"" + this.o + "\", ");
             a.l("includeLiterals : " + this.d + ", ");
             a.l("actualTextColor : " + this.a.serialize() + ", ");
-            if (!igniteuiWebcomponentsCore.stringIsNullOrEmpty(this.q)) {
-                a.l("textStyleFontStyle : \"" + this.q + "\", ");
+            if (!igniteuiWebcomponentsCore.stringIsNullOrEmpty(this.s)) {
+                a.l("textStyleFontStyle : \"" + this.s + "\", ");
             }
-            if (!igniteuiWebcomponentsCore.stringIsNullOrEmpty(this.r)) {
-                a.l("textStyleFontVariant : \"" + this.r + "\", ");
+            if (!igniteuiWebcomponentsCore.stringIsNullOrEmpty(this.t)) {
+                a.l("textStyleFontVariant : \"" + this.t + "\", ");
             }
-            if (!igniteuiWebcomponentsCore.stringIsNullOrEmpty(this.s)) {
-                a.l("textStyleFontWeight : \"" + this.s + "\", ");
+            if (!igniteuiWebcomponentsCore.stringIsNullOrEmpty(this.u)) {
+                a.l("textStyleFontWeight : \"" + this.u + "\", ");
             }
-            if (!igniteuiWebcomponentsCore.stringIsNullOrEmpty(this.o)) {
-                a.l("textStyleFontFamily : \"" + this.o + "\", ");
+            if (!igniteuiWebcomponentsCore.stringIsNullOrEmpty(this.q)) {
+                a.l("textStyleFontFamily : \"" + this.q + "\", ");
             }
-            if (!igniteuiWebcomponentsCore.stringIsNullOrEmpty(this.p)) {
-                a.l("textStyleFontStretch : \"" + this.p + "\", ");
+            if (!igniteuiWebcomponentsCore.stringIsNullOrEmpty(this.r)) {
+                a.l("textStyleFontStretch : \"" + this.r + "\", ");
             }
-            if (!igniteuiWebcomponentsCore.isNaN_(this.g)) {
-                a.l("textStyleFontSize : " + this.g + ", ");
+            if (!igniteuiWebcomponentsCore.isNaN_(this.h)) {
+                a.l("textStyleFontSize : " + this.h + ", ");
             }
-            a.l("inputType : \"" + this.i + "\", ");
-            a.l("placeholder : \"" + this.l + "\", ");
+            a.l("inputType : \"" + this.k + "\", ");
+            a.l("placeholder : \"" + this.n + "\", ");
             a.l("isHover : " + this.e + ", ");
-            a.l("value : \"" + this.t + "\", ");
-            a.l("name : \"" + this.k + "\", ");
+            a.l("value : \"" + this.v + "\", ");
+            a.l("name : \"" + this.m + "\", ");
             a.l("}");
             return a.toString();
         };
@@ -16665,50 +16678,50 @@
         tslib.__extends(InputView, _super);
         function InputView() {
             var _this = _super.call(this) || this;
-            _this.b = null;
-            _this.l = null;
             _this.c = null;
-            _this.j = new igniteuiWebcomponentsCore.List$1(igniteuiWebcomponentsCore.Delegate_$type, 0);
-            _this.g = false;
-            _this.f = false;
-            _this.r = null;
-            _this.d = true;
             _this.m = null;
-            _this.n = null;
+            _this.d = null;
+            _this.k = new igniteuiWebcomponentsCore.List$1(igniteuiWebcomponentsCore.Delegate_$type, 0);
+            _this.h = false;
             _this.g = false;
+            _this.s = null;
+            _this.e = true;
+            _this.n = null;
+            _this.o = null;
+            _this.h = false;
             return _this;
         }
-        InputView.prototype.as = function () {
+        InputView.prototype.at = function () {
         };
-        InputView.prototype.h = function () {
+        InputView.prototype.i = function () {
             return true;
         };
-        Object.defineProperty(InputView.prototype, "q", {
+        Object.defineProperty(InputView.prototype, "r", {
             get: function () {
-                return this.m;
+                return this.n;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(InputView.prototype, "bd", {
+        Object.defineProperty(InputView.prototype, "be", {
             get: function () {
                 return null;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(InputView.prototype, "i", {
+        Object.defineProperty(InputView.prototype, "j", {
             get: function () {
                 return true;
             },
             enumerable: false,
             configurable: true
         });
-        InputView.prototype.ap = function (a) {
+        InputView.prototype.aq = function (a) {
             var e_9, _a;
             if (a == null) {
                 try {
-                    for (var _b = tslib.__values(igniteuiWebcomponentsCore.fromEnum(this.j)), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    for (var _b = tslib.__values(igniteuiWebcomponentsCore.fromEnum(this.k)), _c = _b.next(); !_c.done; _c = _b.next()) {
                         var b = _c.value;
                         b();
                     }
@@ -16726,12 +16739,12 @@
                             throw e_9.error;
                     }
                 }
-                this.j.clear();
+                this.k.clear();
             }
-            this.l = a;
-            this.l.rootWrapper.setStyleProperty("display", "inline-block");
-            var c = this.l.createElement("input");
-            c.setAttribute("type", this.b.b8);
+            this.m = a;
+            this.m.rootWrapper.setStyleProperty("display", "inline-block");
+            var c = this.m.createElement("input");
+            c.setAttribute("type", this.c.b8);
             c.setStyleProperty("position", "relative");
             c.setStyleProperty("box-sizing", "border-box");
             c.setStyleProperty("display", "inline-block");
@@ -16750,75 +16763,75 @@
             c.setStyleProperty("background-attachment", "initial");
             c.setStyleProperty("background-origin", "initial");
             c.setStyleProperty("background-color", "transparent");
-            igniteuiWebcomponentsCore.NativeUI.q(c, this.b.d4);
+            igniteuiWebcomponentsCore.NativeUI.q(c, this.c.d4);
             c.setStyleProperty("outline-style", "none");
             c.setStyleProperty("box-shadow", "none");
             c.setStyleProperty("border-top", "0.1875rem solid transparent");
             c.setStyleProperty("padding-bottom", "0.1875rem");
-            c.setStyleProperty("text-align", this.t(this.b.dy));
+            c.setStyleProperty("text-align", this.u(this.c.dy));
             c.setStyleProperty("font-family", "Verdana");
             c.setStyleProperty("font-size", "1rem");
-            this.j.add(c.listen("change", igniteuiWebcomponentsCore.runOn(this, this.y)));
-            this.j.add(c.listen("input", igniteuiWebcomponentsCore.runOn(this, this.z)));
-            this.j.add(c.listen("focus", igniteuiWebcomponentsCore.runOn(this, this.ae)));
-            this.j.add(c.listen("blur", igniteuiWebcomponentsCore.runOn(this, this.x)));
-            this.j.add(c.listen("mouseenter", igniteuiWebcomponentsCore.runOn(this, this.v)));
-            this.j.add(c.listen("mouseleave", igniteuiWebcomponentsCore.runOn(this, this.w)));
-            this.j.add(c.listen("keydown", igniteuiWebcomponentsCore.runOn(this, this.af)));
-            this.j.add(c.listen("keyup", igniteuiWebcomponentsCore.runOn(this, this.ah)));
-            this.j.add(c.listen("keypress", igniteuiWebcomponentsCore.runOn(this, this.ag)));
-            this.j.add(c.listen("paste", igniteuiWebcomponentsCore.runOn(this, this.ak)));
-            this.j.add(c.listen("dragenter", igniteuiWebcomponentsCore.runOn(this, this.ac)));
-            this.j.add(c.listen("dragleave", igniteuiWebcomponentsCore.runOn(this, this.ad)));
-            this.j.add(c.listen("compositionstart", igniteuiWebcomponentsCore.runOn(this, this.ab)));
-            this.j.add(c.listen("compositionend", igniteuiWebcomponentsCore.runOn(this, this.aa)));
-            this.j.add(c.listen("mousedown", igniteuiWebcomponentsCore.runOn(this, this.ai)));
-            this.j.add(c.listen("mouseup", igniteuiWebcomponentsCore.runOn(this, this.aj)));
-            this.m = c;
-            this.l.append(this.m);
-            this.am();
-            this.b.dl();
+            this.k.add(c.listen("change", igniteuiWebcomponentsCore.runOn(this, this.z)));
+            this.k.add(c.listen("input", igniteuiWebcomponentsCore.runOn(this, this.aa)));
+            this.k.add(c.listen("focus", igniteuiWebcomponentsCore.runOn(this, this.af)));
+            this.k.add(c.listen("blur", igniteuiWebcomponentsCore.runOn(this, this.y)));
+            this.k.add(c.listen("mouseenter", igniteuiWebcomponentsCore.runOn(this, this.w)));
+            this.k.add(c.listen("mouseleave", igniteuiWebcomponentsCore.runOn(this, this.x)));
+            this.k.add(c.listen("keydown", igniteuiWebcomponentsCore.runOn(this, this.ag)));
+            this.k.add(c.listen("keyup", igniteuiWebcomponentsCore.runOn(this, this.ai)));
+            this.k.add(c.listen("keypress", igniteuiWebcomponentsCore.runOn(this, this.ah)));
+            this.k.add(c.listen("paste", igniteuiWebcomponentsCore.runOn(this, this.al)));
+            this.k.add(c.listen("dragenter", igniteuiWebcomponentsCore.runOn(this, this.ad)));
+            this.k.add(c.listen("dragleave", igniteuiWebcomponentsCore.runOn(this, this.ae)));
+            this.k.add(c.listen("compositionstart", igniteuiWebcomponentsCore.runOn(this, this.ac)));
+            this.k.add(c.listen("compositionend", igniteuiWebcomponentsCore.runOn(this, this.ab)));
+            this.k.add(c.listen("mousedown", igniteuiWebcomponentsCore.runOn(this, this.aj)));
+            this.k.add(c.listen("mouseup", igniteuiWebcomponentsCore.runOn(this, this.ak)));
+            this.n = c;
+            this.m.append(this.n);
+            this.an();
+            this.c.dl();
         };
-        InputView.prototype.a0 = function (a) {
+        InputView.prototype.a1 = function (a) {
             if (a) {
-                this.m.setAttribute("readonly", a.toString());
+                this.n.setAttribute("readonly", a.toString());
             }
             else {
-                this.m.getNativeElement().removeAttribute("readonly");
+                this.n.getNativeElement().removeAttribute("readonly");
             }
         };
-        InputView.prototype.ay = function (a) {
+        InputView.prototype.az = function (a) {
             if (a) {
-                this.m.setAttribute("disabled", "true");
+                this.n.setAttribute("disabled", "true");
             }
             else {
-                this.m.getNativeElement().removeAttribute("disabled");
+                this.n.getNativeElement().removeAttribute("disabled");
             }
         };
-        InputView.prototype.a5 = function (a) {
-            this.m.setStyleProperty("text-align", this.t(a));
+        InputView.prototype.a6 = function (a) {
+            this.n.setStyleProperty("text-align", this.u(a));
         };
-        InputView.prototype.a4 = function (a) {
+        InputView.prototype.a5 = function (a) {
             if (a) {
-                this.m.removeClass("ig-input-hide-spinner");
+                this.n.removeClass("ig-input-hide-spinner");
             }
             else {
-                this.m.addClass("ig-input-hide-spinner");
+                this.n.addClass("ig-input-hide-spinner");
             }
         };
-        InputView.prototype.ab = function (a) {
-            this.g = true;
-            this.b.c3();
+        InputView.prototype.ac = function (a) {
+            this.h = true;
+            this.c.c3();
         };
-        InputView.prototype.aa = function (a) {
-            this.g = false;
+        InputView.prototype.ab = function (a) {
+            this.h = false;
             var b = null;
             if (a.originalEvent != null) {
                 b = (a.originalEvent.data);
             }
-            this.b.c2(b);
+            this.c.c2(b);
         };
-        InputView.prototype.t = function (a) {
+        InputView.prototype.u = function (a) {
             switch (a) {
                 case 0: return "left";
                 case 2: return "right";
@@ -16826,54 +16839,54 @@
             }
             return "left";
         };
-        InputView.prototype.aw = function () {
-            this.m.setAttribute("type", this.b.b8);
-            if (this.b.b8 == "date") {
-                this.m.setStyleProperty("line-height", "normal");
+        InputView.prototype.ax = function () {
+            this.n.setAttribute("type", this.c.b8);
+            if (this.c.b8 == "date") {
+                this.n.setStyleProperty("line-height", "normal");
             }
             else {
-                this.m.setStyleProperty("line-height", "0");
+                this.n.setStyleProperty("line-height", "0");
             }
         };
-        InputView.prototype.au = function () {
-            this.m.setAttribute("placeholder", this.b.cg);
+        InputView.prototype.av = function () {
+            this.n.setAttribute("placeholder", this.c.cg);
         };
-        InputView.prototype.a9 = function () {
-            switch (this.b.z) {
+        InputView.prototype.ba = function () {
+            switch (this.c.z) {
                 case 1:
-                    this.m.setStyleProperty("height", "2rem");
-                    this.m.setStyleProperty("font-size", "1rem");
+                    this.n.setStyleProperty("height", "2rem");
+                    this.n.setStyleProperty("font-size", "1rem");
                     break;
                 case 2:
-                    this.m.setStyleProperty("height", "1.68421rem");
-                    this.m.setStyleProperty("font-size", "1rem");
+                    this.n.setStyleProperty("height", "1.68421rem");
+                    this.n.setStyleProperty("font-size", "1rem");
                     break;
                 case 3:
-                    this.m.setStyleProperty("height", "1.45455rem");
-                    this.m.setStyleProperty("font-size", ".95455rem");
+                    this.n.setStyleProperty("height", "1.45455rem");
+                    this.n.setStyleProperty("font-size", ".95455rem");
                     break;
                 case 4:
-                    this.m.setStyleProperty("height", "1.388445rem");
-                    this.m.setStyleProperty("font-size", "0.91116rem");
+                    this.n.setStyleProperty("height", "1.388445rem");
+                    this.n.setStyleProperty("font-size", "0.91116rem");
                     break;
             }
         };
-        InputView.prototype.a8 = function () {
+        InputView.prototype.a9 = function () {
             var _this = this;
-            var a = this.k();
+            var a = this.l();
             if (igniteuiWebcomponentsCore.isNaN_(a) || a == 0) {
-                if (!this.f) {
-                    this.f = true;
-                    this.l.setTimeout(function () {
-                        _this.f = false;
-                        _this.a8();
+                if (!this.g) {
+                    this.g = true;
+                    this.m.setTimeout(function () {
+                        _this.g = false;
+                        _this.a9();
                     }, 100);
                 }
             }
             var b = new igniteuiWebcomponentsCore.TransformGroup();
             b.j.add(((function () {
                 var $ret = new igniteuiWebcomponentsCore.TranslateTransform();
-                $ret.k = _this.b.o == 2 ? (_this.k() * -0.25) : 0;
+                $ret.k = _this.c.o == 2 ? (_this.l() * -0.25) : 0;
                 return $ret;
             })()));
             b.j.add(((function () {
@@ -16882,141 +16895,141 @@
                 $ret.m = 1;
                 return $ret;
             })()));
-            igniteuiWebcomponentsCore.NativeUI.af(this.l.rootWrapper, b);
-            this.l.rootWrapper.setStyleProperty("transform-origin", "0px 0px");
+            igniteuiWebcomponentsCore.NativeUI.af(this.m.rootWrapper, b);
+            this.m.rootWrapper.setStyleProperty("transform-origin", "0px 0px");
         };
-        InputView.prototype.k = function () {
-            var a = this.l.rootWrapper.getStyleProperty("height");
+        InputView.prototype.l = function () {
+            var a = this.m.rootWrapper.getStyleProperty("height");
             var b = parseFloat(igniteuiWebcomponentsCore.stringReplace(a, "px", ""));
             return b;
         };
-        InputView.prototype.ax = function (a) {
-            this.m.setProperty("value", a);
+        InputView.prototype.ay = function (a) {
+            this.n.setProperty("value", a);
         };
-        InputView.prototype.az = function (a) {
-            this.m.setAttribute("name", a);
+        InputView.prototype.a0 = function (a) {
+            this.n.setAttribute("name", a);
         };
-        InputView.prototype.x = function (a) {
-            this.b.cz();
+        InputView.prototype.y = function (a) {
+            this.c.cz();
         };
-        InputView.prototype.ae = function (a) {
-            this.b.c7();
+        InputView.prototype.af = function (a) {
+            this.c.c7();
         };
-        InputView.prototype.ai = function (a) {
-            var b = this.bc(a);
-            this.b.dd(b);
+        InputView.prototype.aj = function (a) {
+            var b = this.bd(a);
+            this.c.dd(b);
             if (b.handled) {
                 a.preventDefault();
             }
         };
-        InputView.prototype.aj = function (a) {
-            var b = this.bc(a);
-            this.b.dg(b);
+        InputView.prototype.ak = function (a) {
+            var b = this.bd(a);
+            this.c.dg(b);
             if (b.handled) {
                 a.preventDefault();
             }
         };
-        InputView.prototype.bc = function (a) {
+        InputView.prototype.bd = function (a) {
             var b = new igniteuiWebcomponentsCore.MouseButtonEventArgs();
             b.position = { $type: igniteuiWebcomponentsCore.Point_$type, x: a.offsetX, y: a.offsetY };
             return b;
         };
-        InputView.prototype.y = function (a) {
-            this.b.c0();
-        };
         InputView.prototype.z = function (a) {
-            this.b.c1();
+            this.c.c0();
         };
-        InputView.prototype.af = function (a) {
-            var b = new igniteuiWebcomponentsCore.KeyEventArgs(0, a);
-            this.b.da(b);
+        InputView.prototype.aa = function (a) {
+            this.c.c1();
         };
-        InputView.prototype.ah = function (a) {
+        InputView.prototype.ag = function (a) {
             var b = new igniteuiWebcomponentsCore.KeyEventArgs(0, a);
-            this.b.dc(b);
+            this.c.da(b);
         };
-        InputView.prototype.ag = function (a) {
+        InputView.prototype.ai = function (a) {
             var b = new igniteuiWebcomponentsCore.KeyEventArgs(0, a);
-            this.b.db(b);
+            this.c.dc(b);
         };
-        InputView.prototype.ak = function (a) {
-            this.b.dh();
+        InputView.prototype.ah = function (a) {
+            var b = new igniteuiWebcomponentsCore.KeyEventArgs(0, a);
+            this.c.db(b);
         };
-        InputView.prototype.ac = function (a) {
-            this.b.c5();
+        InputView.prototype.al = function (a) {
+            this.c.dh();
         };
         InputView.prototype.ad = function (a) {
-            this.b.c6();
+            this.c.c5();
         };
-        InputView.prototype.ba = function (a) {
-            if (this.r != a) {
-                this.r = a;
-                if (this.n != null) {
-                    this.n.setAttribute("d", this.r);
+        InputView.prototype.ae = function (a) {
+            this.c.c6();
+        };
+        InputView.prototype.bb = function (a) {
+            if (this.s != a) {
+                this.s = a;
+                if (this.o != null) {
+                    this.o.setAttribute("d", this.s);
                 }
             }
         };
-        InputView.prototype.s = function () {
-            return this.m.getProperty("value");
+        InputView.prototype.t = function () {
+            return this.n.getProperty("value");
         };
-        InputView.prototype.u = function (a) {
+        InputView.prototype.v = function (a) {
         };
-        InputView.prototype.a7 = function () {
-            if (this.h()) {
-                if (this.b.as) {
-                    this.m.setAttribute("tabindex", this.b.be.toString());
+        InputView.prototype.a8 = function () {
+            if (this.i()) {
+                if (this.c.as) {
+                    this.n.setAttribute("tabindex", this.c.be.toString());
                 }
                 else {
-                    this.m.getNativeElement().removeAttribute("tabindex");
+                    this.n.getNativeElement().removeAttribute("tabindex");
                 }
             }
         };
-        InputView.prototype.p = function () {
-            var a = this.m.getProperty("selectionStart");
+        InputView.prototype.q = function () {
+            var a = this.n.getProperty("selectionStart");
             return igniteuiWebcomponentsCore.typeGetValue(a);
         };
-        InputView.prototype.o = function () {
-            var a = this.m.getProperty("selectionEnd");
+        InputView.prototype.p = function () {
+            var a = this.n.getProperty("selectionEnd");
             return igniteuiWebcomponentsCore.typeGetValue(a);
         };
-        InputView.prototype.a3 = function (a) {
-            this.m.setProperty("selectionStart", a);
+        InputView.prototype.a4 = function (a) {
+            this.n.setProperty("selectionStart", a);
         };
-        InputView.prototype.a1 = function (a) {
-            this.m.setProperty("selectionEnd", a);
+        InputView.prototype.a2 = function (a) {
+            this.n.setProperty("selectionEnd", a);
         };
-        InputView.prototype.at = function () {
-            if (this.h()) {
+        InputView.prototype.au = function () {
+            if (this.i()) {
             }
         };
-        InputView.prototype.v = function (a) {
-            this.b.de();
-        };
         InputView.prototype.w = function (a) {
-            this.b.df();
+            this.c.de();
         };
-        InputView.prototype.an = function () {
-            this.d = true;
-            this.j.add(this.m.listen("change", igniteuiWebcomponentsCore.runOn(this, this.y)));
-            this.j.add(this.m.listen("input", igniteuiWebcomponentsCore.runOn(this, this.z)));
-            this.j.add(this.m.listen("focus", igniteuiWebcomponentsCore.runOn(this, this.ae)));
-            this.j.add(this.m.listen("blur", igniteuiWebcomponentsCore.runOn(this, this.x)));
-            this.j.add(this.m.listen("mouseenter", igniteuiWebcomponentsCore.runOn(this, this.v)));
-            this.j.add(this.m.listen("mouseleave", igniteuiWebcomponentsCore.runOn(this, this.w)));
-            this.j.add(this.m.listen("keydown", igniteuiWebcomponentsCore.runOn(this, this.af)));
-            this.j.add(this.m.listen("paste", igniteuiWebcomponentsCore.runOn(this, this.ak)));
-            this.j.add(this.m.listen("dragenter", igniteuiWebcomponentsCore.runOn(this, this.ac)));
-            this.j.add(this.m.listen("dragleave", igniteuiWebcomponentsCore.runOn(this, this.ad)));
-            this.j.add(this.m.listen("compositionstart", igniteuiWebcomponentsCore.runOn(this, this.ab)));
-            this.j.add(this.m.listen("compositionend", igniteuiWebcomponentsCore.runOn(this, this.aa)));
-            this.j.add(this.m.listen("mousedown", igniteuiWebcomponentsCore.runOn(this, this.ai)));
-            this.j.add(this.m.listen("mouseup", igniteuiWebcomponentsCore.runOn(this, this.aj)));
-        };
-        InputView.prototype.aq = function () {
+        InputView.prototype.x = function (a) {
+            this.c.df();
+        };
+        InputView.prototype.ao = function () {
+            this.e = true;
+            this.k.add(this.n.listen("change", igniteuiWebcomponentsCore.runOn(this, this.z)));
+            this.k.add(this.n.listen("input", igniteuiWebcomponentsCore.runOn(this, this.aa)));
+            this.k.add(this.n.listen("focus", igniteuiWebcomponentsCore.runOn(this, this.af)));
+            this.k.add(this.n.listen("blur", igniteuiWebcomponentsCore.runOn(this, this.y)));
+            this.k.add(this.n.listen("mouseenter", igniteuiWebcomponentsCore.runOn(this, this.w)));
+            this.k.add(this.n.listen("mouseleave", igniteuiWebcomponentsCore.runOn(this, this.x)));
+            this.k.add(this.n.listen("keydown", igniteuiWebcomponentsCore.runOn(this, this.ag)));
+            this.k.add(this.n.listen("paste", igniteuiWebcomponentsCore.runOn(this, this.al)));
+            this.k.add(this.n.listen("dragenter", igniteuiWebcomponentsCore.runOn(this, this.ad)));
+            this.k.add(this.n.listen("dragleave", igniteuiWebcomponentsCore.runOn(this, this.ae)));
+            this.k.add(this.n.listen("compositionstart", igniteuiWebcomponentsCore.runOn(this, this.ac)));
+            this.k.add(this.n.listen("compositionend", igniteuiWebcomponentsCore.runOn(this, this.ab)));
+            this.k.add(this.n.listen("mousedown", igniteuiWebcomponentsCore.runOn(this, this.aj)));
+            this.k.add(this.n.listen("mouseup", igniteuiWebcomponentsCore.runOn(this, this.ak)));
+        };
+        InputView.prototype.ar = function () {
             var e_10, _a;
-            this.d = false;
+            this.e = false;
             try {
-                for (var _b = tslib.__values(igniteuiWebcomponentsCore.fromEnum(this.j)), _c = _b.next(); !_c.done; _c = _b.next()) {
+                for (var _b = tslib.__values(igniteuiWebcomponentsCore.fromEnum(this.k)), _c = _b.next(); !_c.done; _c = _b.next()) {
                     var a = _c.value;
                     a();
                 }
@@ -17034,58 +17047,67 @@
                         throw e_10.error;
                 }
             }
-            this.j.clear();
+            this.k.clear();
         };
-        InputView.prototype.bb = function (a) {
+        InputView.prototype.bc = function (a) {
             if (a != null) {
-                this.m.setStyleProperty("font", a.fontString);
+                this.n.setStyleProperty("font", a.fontString);
             }
         };
-        InputView.prototype.a6 = function () {
+        InputView.prototype.a7 = function () {
         };
-        InputView.prototype.ao = function () {
-            if (this.m != null) {
-                var a = this.m.getNativeElement();
+        InputView.prototype.ap = function () {
+            if (this.n != null) {
+                var a = this.n.getNativeElement();
                 a.blur();
             }
         };
-        InputView.prototype.ar = function (a) {
-            if (this.m != null) {
-                this.m.focus(a);
+        InputView.prototype.as = function (a) {
+            if (this.n != null) {
+                this.n.focus(a);
             }
         };
-        InputView.prototype.av = function () {
-            if (this.m != null) {
-                var nativeInput_ = this.m;
+        InputView.prototype.aw = function () {
+            if (this.n != null) {
+                var nativeInput_ = this.n;
                 nativeInput_.getNativeElement().select();
             }
         };
-        InputView.prototype.a2 = function (a, b) {
-            if (this.m != null) {
-                var c = this.m.getNativeElement();
+        InputView.prototype.a3 = function (a, b) {
+            if (this.n != null) {
+                var c = this.n.getNativeElement();
                 c.setSelectionRange(a, b);
             }
         };
-        InputView.prototype.al = function () {
+        InputView.prototype.am = function () {
             if (igniteuiWebcomponentsCore.KeyFrameAnimationFactory.h == null) {
-                igniteuiWebcomponentsCore.KeyFrameAnimationFactory.h = this.l;
+                igniteuiWebcomponentsCore.KeyFrameAnimationFactory.h = this.m;
             }
         };
-        InputView.prototype.a = function (a) {
-            return new igniteuiWebcomponentsCore.AnimationKeyFrameEffect(0, this.l.rootWrapper, 0, null, a);
+        InputView.prototype.b = function (a) {
+            return new igniteuiWebcomponentsCore.AnimationKeyFrameEffect(0, this.m.rootWrapper, 0, null, a);
         };
-        InputView.prototype.am = function () {
-            if (InputView.e) {
+        InputView.prototype.an = function () {
+            if (InputView.f) {
                 return;
             }
             var a = "\r\n.ig-input-hide-spinner::-webkit-outer-spin-button,\r\n.ig-input-hide-spinner::-webkit-inner-spin-button {\r\n    -webkit-appearance: none;\r\n    margin: 0;\r\n}";
-            var b = this.l.createElement("style");
+            var b = this.m.createElement("style");
             b.setRawText(a);
             document.head.appendChild(b.getNativeElement());
-            InputView.e = true;
+            InputView.f = true;
+        };
+        InputView.prototype.a = function () {
+            var rect_ = this.n.getNativeElement().getBoundingClientRect();
+            var a = (rect_.top);
+            var b = (rect_.left);
+            var c = new Array(2);
+            c[0] = a;
+            c[1] = b;
+            return c;
         };
         InputView.$t = igniteuiWebcomponentsCore.markType(InputView, 'InputView');
-        InputView.e = false;
+        InputView.f = false;
         return InputView;
     }(igniteuiWebcomponentsCore.Base));
     /**
@@ -18256,7 +18278,7 @@
             configurable: true
         });
         XInputGroup.prototype.onChildrenMutated = function () {
-            this.jr(function (a) { return a.view.a8(); });
+            this.jr(function (a) { return a.view.a9(); });
             this.js(function (a) { return a.view.aj(); });
             this.jt(function (a) { return a.view.r(); });
             this.ju(function (a) { return a.view.r(); });
@@ -20190,7 +20212,7 @@
             this.view.ag();
         };
         XInputGroup.prototype.ensureShift = function () {
-            this.jr(function (a) { return a.view.a8(); });
+            this.jr(function (a) { return a.view.a9(); });
             this.js(function (a) { return a.view.aj(); });
             this.jt(function (a) { return a.view.r(); });
             this.ju(function (a) { return a.view.r(); });
@@ -21637,9 +21659,9 @@
             _this.a0 = false;
             _this.u = new MaskParsingService();
             var a = new InputView();
-            a.b = _this;
+            a.c = _this;
             _this.view = a;
-            _this.view.as();
+            _this.view.at();
             XInput.ae = new igniteuiWebcomponentsCore.FontInfo();
             XInput.ae.q = "Verdana";
             return _this;
@@ -21784,7 +21806,7 @@
                     break;
                 case "Value":
                     if (!this.al) {
-                        this.view.ax(this.cq);
+                        this.view.ay(this.cq);
                         if (this.b != null) {
                             this.b.kh();
                         }
@@ -21794,14 +21816,14 @@
                     }
                     break;
                 case "Name":
-                    this.view.az(this.e);
+                    this.view.a0(this.e);
                     break;
                 case "Density":
                     this.z = this.aa == 0 ? 1 : this.aa;
                     break;
                 case "ActualDensity":
+                    this.view.ba();
                     this.view.a9();
-                    this.view.a8();
                     break;
                 case "InputGroup":
                     this.c8();
@@ -21824,33 +21846,33 @@
                     this.c9();
                     break;
                 case "IsDisabled":
-                    this.view.ay(this.am);
+                    this.view.az(this.am);
                     break;
                 case "IsReadOnly":
-                    this.view.a0(this.ao);
+                    this.view.a1(this.ao);
                     break;
                 case "TextAlignment":
-                    this.view.a5(this.dy);
+                    this.view.a6(this.dy);
                     break;
                 case "ShowSpinner":
-                    this.view.a4(this.a1);
+                    this.view.a5(this.a1);
                     break;
                 case "TabIndex":
-                    this.view.a7();
+                    this.view.a8();
                     break;
             }
         };
         XInput.prototype.di = function () {
-            this.view.au();
+            this.view.av();
         };
         XInput.prototype.dk = function () {
-            this.view.aw();
+            this.view.ax();
         };
         XInput.prototype.dj = function () {
-            this.view.a8();
+            this.view.a9();
         };
         XInput.prototype.c8 = function () {
-            this.view.a8();
+            this.view.a9();
         };
         XInput.prototype.dv = function () {
             this.d4 = this.d8 != null ? this.d8 : XInput.d6;
@@ -21859,10 +21881,10 @@
         };
         XInput.prototype.du = function () {
             if (this.ad != null) {
-                this.view.bb(this.ad);
+                this.view.bc(this.ad);
             }
-            igniteuiWebcomponentsCore.NativeUI.q(this.view.q, this.d4);
-            this.view.a6();
+            igniteuiWebcomponentsCore.NativeUI.q(this.view.r, this.d4);
+            this.view.a7();
         };
         Object.defineProperty(XInput.prototype, "d4", {
             get: function () {
@@ -21993,12 +22015,12 @@
         XInput.prototype.c0 = function () {
             var _this = this;
             this.al = true;
-            this.cq = this.view.s();
+            this.cq = this.view.t();
             if (this.change != null) {
                 this.change(this, ((function () {
                     var $ret = new InputChangeEventArgs();
                     $ret.value = _this.cq;
-                    $ret.isCompositionInProgress = _this.view.g;
+                    $ret.isCompositionInProgress = _this.view.h;
                     return $ret;
                 })()));
             }
@@ -22007,7 +22029,7 @@
         XInput.prototype.c1 = function () {
             var _this = this;
             this.al = true;
-            this.cq = this.view.s();
+            this.cq = this.view.t();
             this.al = false;
             if (this.ce != null) {
                 this.aq = true;
@@ -22050,7 +22072,7 @@
                 this.changing(this, ((function () {
                     var $ret = new InputChangeEventArgs();
                     $ret.value = _this.cq;
-                    $ret.isCompositionInProgress = _this.view.g;
+                    $ret.isCompositionInProgress = _this.view.h;
                     return $ret;
                 })()));
             }
@@ -22171,7 +22193,7 @@
         XInput.prototype.cu = function () {
             this.a9 = 0;
             this.aj = false;
-            this.view.a7();
+            this.view.a8();
         };
         Object.defineProperty(XInput.prototype, "b2", {
             get: function () {
@@ -22281,86 +22303,89 @@
         XInput.prototype.dl = function () {
         };
         XInput.prototype.onDetachedFromUI = function () {
-            this.view.aq();
+            this.view.ar();
         };
         XInput.prototype.onAttachedToUI = function () {
-            this.view.an();
+            this.view.ao();
         };
         XInput.prototype.az = function () {
-            return this.view.h();
+            return this.view.i();
         };
         XInput.prototype.bg = function () {
             return this.j();
         };
         XInput.prototype.b1 = function () {
             var a = this.j();
-            return a.n();
+            return a.p();
         };
         XInput.prototype.j = function () {
             var a = new InputVisualModelExport();
-            var b = this.view.q;
-            a.h = this.view.l.rootWrapper.getNativeElement().offsetTop;
-            a.f = this.view.l.rootWrapper.getNativeElement().offsetLeft;
+            var b = this.view.r;
+            var c = this.view.a();
+            a.i = c[0];
+            a.g = c[1];
+            a.f = this.view.m.rootWrapper.height();
+            a.j = this.view.m.rootWrapper.width();
             a.b = this.o;
             a.c = this.z;
-            a.j = this.ce;
-            a.m = this.ci;
+            a.l = this.ce;
+            a.o = this.ci;
             a.d = this.au;
             a.a = igniteuiWebcomponentsCore.AppearanceHelper.a(igniteuiWebcomponentsCore.NativeUI.al(b));
-            a.i = this.b8;
-            a.l = this.cg;
+            a.k = this.b8;
+            a.n = this.cg;
             a.e = this.aw;
-            a.t = this.cq;
-            a.k = this.e;
+            a.v = this.cq;
+            a.m = this.e;
             if (this.ad != null) {
-                var c = this.ad;
-                if (this.view != null && c.q == null) {
-                    var d = this.view.l;
-                    var e = igniteuiWebcomponentsCore.FontUtil.getFontInfoFromString(d, c.fontString);
-                    c.q = e.q;
-                    c.f = e.f;
-                    c.r = e.r;
-                    c.t = e.t;
-                    c.u = e.u;
-                    c.v = e.v;
+                var d = this.ad;
+                if (this.view != null && d.q == null) {
+                    var e = this.view.m;
+                    var f = igniteuiWebcomponentsCore.FontUtil.getFontInfoFromString(e, d.fontString);
+                    d.q = f.q;
+                    d.f = f.f;
+                    d.r = f.r;
+                    d.t = f.t;
+                    d.u = f.u;
+                    d.v = f.v;
                 }
-                if (c.q != null) {
-                    a.o = c.q;
+                if (d.q != null) {
+                    a.q = d.q;
                 }
-                if (!igniteuiWebcomponentsCore.isNaN_(c.f)) {
-                    a.g = c.f;
+                if (!igniteuiWebcomponentsCore.isNaN_(d.f)) {
+                    a.h = d.f;
                 }
-                if (c.v != null) {
-                    a.s = c.v;
+                if (d.v != null) {
+                    a.u = d.v;
                 }
-                if (c.t != null) {
-                    a.q = c.t;
+                if (d.t != null) {
+                    a.s = d.t;
                 }
-                if (c.r != null) {
-                    a.p = c.t;
+                if (d.r != null) {
+                    a.r = d.t;
                 }
             }
             return a;
         };
         XInput.prototype.dr = function (a, b) {
-            this.view.a2(a, b);
+            this.view.a3(a, b);
         };
         XInput.prototype.provideContainer = function (a) {
-            this.view.ap(a);
+            this.view.aq(a);
         };
         XInput.prototype.ct = function () {
             this.cz();
-            this.view.ao();
+            this.view.ap();
         };
         XInput.prototype.focus = function (a) {
             if (a === void 0) {
                 a = false;
             }
             this.c7();
-            this.view.ar(a);
+            this.view.as(a);
         };
         XInput.prototype.dp = function () {
-            this.view.av();
+            this.view.aw();
         };
         XInput.prototype.dt = function (a) {
             this.aq = true;
@@ -22395,7 +22420,7 @@
                 this.changing(this, ((function () {
                     var $ret = new InputChangeEventArgs();
                     $ret.value = _this.cq;
-                    $ret.isCompositionInProgress = _this.view.g;
+                    $ret.isCompositionInProgress = _this.view.h;
                     return $ret;
                 })()));
             }
@@ -22408,19 +22433,19 @@
             this.q = 0;
         };
         XInput.prototype.bb = function () {
-            var a = this.view.p();
-            var b = this.view.o();
+            var a = this.view.q();
+            var b = this.view.p();
             return a == b && this.ai ? b - this.bk.length : a;
         };
         XInput.prototype.ba = function () {
-            return this.view.o();
+            return this.view.p();
         };
         Object.defineProperty(XInput.prototype, "selectionStart", {
             get: function () {
                 return this.bb();
             },
             set: function (a) {
-                this.view.a3(a);
+                this.view.a4(a);
             },
             enumerable: false,
             configurable: true
@@ -22430,7 +22455,7 @@
                 return this.ba();
             },
             set: function (a) {
-                this.view.a1(a);
+                this.view.a2(a);
             },
             enumerable: false,
             configurable: true
@@ -22471,9 +22496,9 @@
             this.dm(this.ag, this.ay);
         };
         XInput.prototype.cw = function () {
-            this.view.al();
+            this.view.am();
             if (this.ag == null) {
-                this.ag = igniteuiWebcomponentsCore.KeyFrameAnimationFactory.f.c(this.view.a(this.i).m(new igniteuiWebcomponentsCore.AnimationKeyFrameProperty(1, 0)).m(new igniteuiWebcomponentsCore.AnimationKeyFrameProperty(1, 1)));
+                this.ag = igniteuiWebcomponentsCore.KeyFrameAnimationFactory.f.c(this.view.b(this.i).m(new igniteuiWebcomponentsCore.AnimationKeyFrameProperty(1, 0)).m(new igniteuiWebcomponentsCore.AnimationKeyFrameProperty(1, 1)));
             }
         };
         Object.defineProperty(XInput.prototype, "i", {
@@ -30299,7 +30324,16 @@
             window.setTimeout(function () { return e.dr(b, c); }, 0);
         };
         XInputBridge.prototype.exportVisualData = function (a) {
-            return a.fe();
+            if (!(igniteuiWebcomponentsCore.typeCast(XInputGroup.$, a) !== null)) {
+                return null;
+            }
+            var b = a;
+            if (b.inputs == null || b.inputs.count == 0 || !(igniteuiWebcomponentsCore.typeCast(XInput.$, b.inputs._inner[0]) !== null)) {
+                return null;
+            }
+            var c = b.inputs._inner[0];
+            var d = c.bg();
+            return d;
         };
         XInputBridge.$t = igniteuiWebcomponentsCore.markType(XInputBridge, 'XInputBridge', XComponentBridge.$, [igniteuiWebcomponentsCore.INativeUIInputBridge_$type]);
         return XInputBridge;
@@ -30426,7 +30460,7 @@
                     }
                     else {
                         this.ac = c;
-                        var e = d.view.k.createElement("span");
+                        var e = d.view.l.createElement("span");
                         e.setText(this.ac == null ? null : this.ac.toString());
                         d.appendButtonContent(e);
                     }
@@ -31953,7 +31987,7 @@
             this.v = i;
             var j = this.u.get2DCanvasContext(this.v);
             this.l = new igniteuiWebcomponentsCore.RenderingContext(new igniteuiWebcomponentsCore.CanvasViewRenderer(), j);
-            this.l.ae(this.j);
+            this.l.af(this.j);
             this.ab();
             this.a = new igniteuiWebcomponentsCore.CanvasGestureDOMEventProxy(this.u.rootWrapper, this.u, false);
             this.a.bl = this.g.e0;
@@ -32028,7 +32062,7 @@
                 this.i = c;
                 this.j = this.i;
                 this.s = igniteuiWebcomponentsCore.FontUtil.getCurrentFontHeight(this.u, this.j);
-                this.l.ae(this.i);
+                this.l.af(this.i);
                 this.g.trackDirty();
             }
         };
@@ -33963,6 +33997,10 @@
         tslib.__extends(ButtonGroupVisualModelExport, _super);
         function ButtonGroupVisualModelExport() {
             var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.m = 0;
+            _this.n = 0;
+            _this.o = 0;
+            _this.l = 0;
             _this.e = 0;
             _this.f = 0;
             _this.a = null;
@@ -33976,9 +34014,13 @@
             _this.i = null;
             return _this;
         }
-        ButtonGroupVisualModelExport.prototype.l = function () {
+        ButtonGroupVisualModelExport.prototype.p = function () {
             var a = new igniteuiWebcomponentsCore.StringBuilder(0);
             a.l("{");
+            a.l("left : " + this.m + ", ");
+            a.l("top : " + this.n + ", ");
+            a.l("height : " + this.l + ", ");
+            a.l("width : " + this.o + ", ");
             a.l("baseTheme : " + igniteuiWebcomponentsCore.enumGetBox(igniteuiWebcomponentsCore.BaseControlTheme_$type, this.e) + ", ");
             a.l("actualDensity : " + igniteuiWebcomponentsCore.enumGetBox(igniteuiWebcomponentsCore.ControlDisplayDensity_$type, this.f) + ", ");
             a.l("selectedIndices : " + this.a + ", ");
@@ -35594,7 +35636,7 @@
         };
         XButtonGroup.prototype.bq = function () {
             var a = this.e();
-            return a.l();
+            return a.p();
         };
         XButtonGroup.prototype.e = function () {
             var a = new ButtonGroupVisualModelExport();
@@ -35832,7 +35874,13 @@
             }
         };
         XButtonGroupBridge.prototype.exportVisualData = function (a) {
-            return a.a5();
+            var b = a.a5();
+            var c = this.getBoundingRect(a);
+            b.m = c.left;
+            b.n = c.top;
+            b.o = c.width;
+            b.l = c.height;
+            return b;
         };
         XButtonGroupBridge.prototype.addButton = function (a, b) {
             this.v.add(b);
@@ -35927,6 +35975,10 @@
         tslib.__extends(CheckboxVisualModelExport, _super);
         function CheckboxVisualModelExport() {
             var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.r = 0;
+            _this.t = 0;
+            _this.u = 0;
+            _this.q = 0;
             _this.f = 0;
             _this.d = null;
             _this.c = null;
@@ -35935,11 +35987,11 @@
             _this.o = 0;
             _this.l = 0;
             _this.p = 0;
-            _this.q = 0;
+            _this.s = 0;
             _this.n = 0;
             _this.m = 0;
             _this.a = null;
-            _this.r = null;
+            _this.v = null;
             _this.j = false;
             _this.g = false;
             _this.h = false;
@@ -35947,9 +35999,13 @@
             _this.i = false;
             return _this;
         }
-        CheckboxVisualModelExport.prototype.s = function () {
+        CheckboxVisualModelExport.prototype.w = function () {
             var a = new igniteuiWebcomponentsCore.StringBuilder(0);
             a.l("{");
+            a.l("left : " + this.r + ", ");
+            a.l("top : " + this.t + ", ");
+            a.l("height : " + this.q + ", ");
+            a.l("width : " + this.u + ", ");
             a.l("baseTheme : " + this.f + ", ");
             a.l("actualUncheckedBackgroundColor : " + this.d.serialize() + ", ");
             a.l("actualTickColor : " + this.c + ", ");
@@ -35957,11 +36013,11 @@
             a.l("actualCheckedBorderColor : " + this.b.serialize() + ", ");
             a.l("borderWidth : " + this.o + ", ");
             a.l("actualBorderWidth : " + this.l + ", ");
-            a.l("tickStrokeWidth : " + this.q + ", ");
+            a.l("tickStrokeWidth : " + this.s + ", ");
             a.l("actualTickStrokeWidth : " + this.n + ", ");
             a.l("actualCheckedBackgroundColor : " + this.a.serialize() + ", ");
-            if (this.r != null) {
-                a.l("value : \"" + this.r.toString() + "\", ");
+            if (this.v != null) {
+                a.l("value : \"" + this.v.toString() + "\", ");
             }
             a.l("isFocused : " + this.j + ", ");
             a.l("disableRipple : " + this.g + ", ");
@@ -35988,30 +36044,30 @@
         tslib.__extends(CheckboxView, _super);
         function CheckboxView() {
             var _this = _super.call(this) || this;
-            _this.c = null;
-            _this.l = null;
-            _this.f = null;
-            _this.j = new igniteuiWebcomponentsCore.List$1(igniteuiWebcomponentsCore.Delegate_$type, 0);
-            _this.g = true;
-            _this.r = null;
+            _this.d = null;
             _this.m = null;
-            _this.q = null;
+            _this.g = null;
+            _this.k = new igniteuiWebcomponentsCore.List$1(igniteuiWebcomponentsCore.Delegate_$type, 0);
+            _this.h = true;
+            _this.s = null;
             _this.n = null;
+            _this.r = null;
             _this.o = null;
-            _this.d = null;
             _this.p = null;
+            _this.e = null;
+            _this.q = null;
             return _this;
         }
-        CheckboxView.prototype.af = function () {
+        CheckboxView.prototype.ag = function () {
         };
-        CheckboxView.prototype.i = function () {
+        CheckboxView.prototype.j = function () {
             return true;
         };
-        CheckboxView.prototype.ad = function (a) {
+        CheckboxView.prototype.ae = function (a) {
             var e_1, _a;
             if (a == null) {
                 try {
-                    for (var _b = tslib.__values(igniteuiWebcomponentsCore.fromEnum(this.j)), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    for (var _b = tslib.__values(igniteuiWebcomponentsCore.fromEnum(this.k)), _c = _b.next(); !_c.done; _c = _b.next()) {
                         var b = _c.value;
                         b();
                     }
@@ -36029,46 +36085,46 @@
                             throw e_1.error;
                     }
                 }
-                this.j.clear();
+                this.k.clear();
                 return;
             }
-            this.l = a;
-            this.l.rootWrapper.setStyleProperty("display", "flex");
-            this.l.rootWrapper.setStyleProperty("flex-direction", "row");
-            this.l.rootWrapper.setStyleProperty("flex-wrap", "no-wrap");
-            this.l.rootWrapper.setStyleProperty("align-items", "center");
-            var c = this.l.createElement("input");
-            this.r = c;
-            this.r.addClass("ig-native-checkbox");
-            this.r.setStyleProperty("position", "absolute");
-            this.r.setStyleProperty("width", "1px");
-            this.r.setStyleProperty("height", "1px");
-            this.r.setStyleProperty("margin", "-1px");
-            this.r.setStyleProperty("border", "none");
-            this.r.setStyleProperty("clip", "rect(0, 0, 0, 0)");
-            this.r.setStyleProperty("outline", "0");
-            this.r.setStyleProperty("pointer-events", "none");
-            this.r.setStyleProperty("overflow", "hidden");
-            this.r.setStyleProperty("-webkit-appearance", "none");
-            this.r.setStyleProperty("-moz-appearance", "none");
-            this.r.setStyleProperty("appearance", "none");
-            this.r.setAttribute("type", "checkbox");
-            this.r.setAttribute("id", this.c.b1);
-            this.aj();
-            this.j.add(c.listen("change", igniteuiWebcomponentsCore.runOn(this, this.x)));
-            this.j.add(c.listen("click", igniteuiWebcomponentsCore.runOn(this, this.y)));
-            this.j.add(c.listen("focus", igniteuiWebcomponentsCore.runOn(this, this.z)));
-            this.j.add(c.listen("blur", igniteuiWebcomponentsCore.runOn(this, this.w)));
-            this.l.append(c);
-            var d = this.l.createElement("div");
+            this.m = a;
+            this.m.rootWrapper.setStyleProperty("display", "flex");
+            this.m.rootWrapper.setStyleProperty("flex-direction", "row");
+            this.m.rootWrapper.setStyleProperty("flex-wrap", "no-wrap");
+            this.m.rootWrapper.setStyleProperty("align-items", "center");
+            var c = this.m.createElement("input");
+            this.s = c;
+            this.s.addClass("ig-native-checkbox");
+            this.s.setStyleProperty("position", "absolute");
+            this.s.setStyleProperty("width", "1px");
+            this.s.setStyleProperty("height", "1px");
+            this.s.setStyleProperty("margin", "-1px");
+            this.s.setStyleProperty("border", "none");
+            this.s.setStyleProperty("clip", "rect(0, 0, 0, 0)");
+            this.s.setStyleProperty("outline", "0");
+            this.s.setStyleProperty("pointer-events", "none");
+            this.s.setStyleProperty("overflow", "hidden");
+            this.s.setStyleProperty("-webkit-appearance", "none");
+            this.s.setStyleProperty("-moz-appearance", "none");
+            this.s.setStyleProperty("appearance", "none");
+            this.s.setAttribute("type", "checkbox");
+            this.s.setAttribute("id", this.d.b1);
+            this.ak();
+            this.k.add(c.listen("change", igniteuiWebcomponentsCore.runOn(this, this.y)));
+            this.k.add(c.listen("click", igniteuiWebcomponentsCore.runOn(this, this.z)));
+            this.k.add(c.listen("focus", igniteuiWebcomponentsCore.runOn(this, this.aa)));
+            this.k.add(c.listen("blur", igniteuiWebcomponentsCore.runOn(this, this.x)));
+            this.m.append(c);
+            var d = this.m.createElement("div");
             d.addClass("ig-checkbox-box");
             d.setStyleProperty("width", "1.25em");
             d.setStyleProperty("height", "1.25em");
             d.setStyleProperty("position", "relative");
-            this.m = d;
-            this.l.append(d);
-            var e = this.l.createElement("label");
-            e.setAttribute("for", this.c.b1);
+            this.n = d;
+            this.m.append(d);
+            var e = this.m.createElement("label");
+            e.setAttribute("for", this.d.b1);
             e.addClass("ig-checkbox-composite");
             e.setStyleProperty("box-sizing", "border-box");
             e.setStyleProperty("position", "relative");
@@ -36087,9 +36143,9 @@
             e.setStyleProperty("border-radius", "2px");
             e.setStyleProperty("-webkit-tap-highlight-color", "transparent");
             e.setStyleProperty("overflow", "hidden");
-            this.q = e;
-            this.m.append(e);
-            var f = this.l.createElementNS("svg", "http://www.w3.org/2000/svg");
+            this.r = e;
+            this.n.append(e);
+            var f = this.m.createElementNS("svg", "http://www.w3.org/2000/svg");
             f.setAttribute("viewBox", "0 0 24 24");
             f.addClass("ig-checkbox-mark");
             f.setStyleProperty("position", "absolute");
@@ -36105,14 +36161,14 @@
             f.setStyleProperty("fill", "none");
             f.setStyleProperty("opacity", "0");
             f.setStyleProperty("z-index", "1");
-            this.o = f;
+            this.p = f;
             e.append(f);
-            var g = this.l.createElementNS("path", "http://www.w3.org/2000/svg");
-            g.setAttribute("d", this.c.bf);
+            var g = this.m.createElementNS("path", "http://www.w3.org/2000/svg");
+            g.setAttribute("d", this.d.bf);
             f.append(g);
-            this.n = g;
-            var h = this.l.createElement("div");
-            var i = this.l.getSubRenderer(h);
+            this.o = g;
+            var h = this.m.createElement("div");
+            var i = this.m.getSubRenderer(h);
             h.setStyleProperty("position", "absolute");
             h.setStyleProperty("width", "3em");
             h.setStyleProperty("height", "3em");
@@ -36123,12 +36179,12 @@
             var j = new XRipple();
             j.provideContainer(i);
             j.q = d;
-            var k = this.l.getExternal(j, this.l.rootWrapper, this.l.getExternal(this.c, null, null));
+            var k = this.m.getExternal(j, this.m.rootWrapper, this.m.getExternal(this.d, null, null));
             j.h = true;
             j.k = true;
-            this.d = j;
+            this.e = j;
             d.append(h);
-            var l = this.l.createElement("span");
+            var l = this.m.createElement("span");
             l.addClass("ig-checkbox-label");
             l.setStyleProperty("font-family", "Verdana");
             l.setStyleProperty("font-weight", "400");
@@ -36141,125 +36197,134 @@
             l.setStyleProperty("margin-bottom", "0");
             l.setStyleProperty("cursor", "pointer");
             l.setStyleProperty("role", "label");
-            this.p = l;
-            this.j.add(l.listen("click", igniteuiWebcomponentsCore.runOn(this, this.v)));
-            this.l.append(l);
-            this.l.getPortal(l, "ChildContent", function (m) {
+            this.q = l;
+            this.k.add(l.listen("click", igniteuiWebcomponentsCore.runOn(this, this.w)));
+            this.m.append(l);
+            this.m.getPortal(l, "ChildContent", function (m) {
             }, true);
-            this.c.cp();
-        };
-        CheckboxView.prototype.v = function (a) {
-            this.c.toggle();
+            this.d.cp();
         };
-        CheckboxView.prototype.aj = function () {
-            if (this.i()) {
-                var a = this.c.b1;
-                this.r.setAttribute("name", this.c.ca);
-                this.r.setProperty("value", this.c.a4);
-                if (this.c.aa) {
-                    this.r.setAttribute("tabindex", this.c.az.toString());
-                }
-                this.r.setProperty("disabled", this.c.disabled);
-                this.r.setProperty("indeterminate", this.c.indeterminate);
-                this.r.setProperty("checked", this.c.checked);
-                this.r.setProperty("required", this.c.ay);
-                if (this.c.indeterminate) {
-                    this.r.setAttribute("aria-checked", "mixed");
+        CheckboxView.prototype.w = function (a) {
+            this.d.toggle();
+        };
+        CheckboxView.prototype.ak = function () {
+            if (this.j()) {
+                var a = this.d.b1;
+                this.s.setAttribute("name", this.d.ca);
+                this.s.setProperty("value", this.d.a4);
+                if (this.d.aa) {
+                    this.s.setAttribute("tabindex", this.d.az.toString());
+                }
+                this.s.setProperty("disabled", this.d.disabled);
+                this.s.setProperty("indeterminate", this.d.indeterminate);
+                this.s.setProperty("checked", this.d.checked);
+                this.s.setProperty("required", this.d.ay);
+                if (this.d.indeterminate) {
+                    this.s.setAttribute("aria-checked", "mixed");
                 }
                 else {
-                    this.r.setAttribute("aria-checked", this.c.checked ? "true" : "false");
+                    this.s.setAttribute("aria-checked", this.d.checked ? "true" : "false");
                 }
-                this.r.setAttribute("aria-labelledby", this.c.bn);
-                this.r.setAttribute("aria-label", this.c.bm);
+                this.s.setAttribute("aria-labelledby", this.d.bn);
+                this.s.setAttribute("aria-label", this.d.bm);
             }
         };
-        CheckboxView.prototype.al = function () {
-            return new igniteuiWebcomponentsCore.Size(1, this.q.width(), this.q.height());
+        CheckboxView.prototype.am = function () {
+            return new igniteuiWebcomponentsCore.Size(1, this.r.width(), this.r.height());
         };
-        CheckboxView.prototype.ai = function () {
-            this.n.setAttribute("d", this.c.bf);
+        CheckboxView.prototype.a = function () {
+            var rect_ = this.r.getNativeElement().getBoundingClientRect();
+            var a = (rect_.top);
+            var b = (rect_.left);
+            var c = new Array(2);
+            c[0] = a;
+            c[1] = b;
+            return c;
         };
-        CheckboxView.prototype.ag = function () {
-            if (this.i()) {
-                var a = this.c.b1;
-                this.r.setAttribute("id", a);
-                this.q.setAttribute("for", a);
+        CheckboxView.prototype.aj = function () {
+            this.o.setAttribute("d", this.d.bf);
+        };
+        CheckboxView.prototype.ah = function () {
+            if (this.j()) {
+                var a = this.d.b1;
+                this.s.setAttribute("id", a);
+                this.r.setAttribute("for", a);
             }
         };
-        CheckboxView.prototype.w = function (a) {
-            this.c.focused = false;
+        CheckboxView.prototype.x = function (a) {
+            this.d.focused = false;
         };
-        CheckboxView.prototype.z = function (a) {
-            this.c.focused = true;
+        CheckboxView.prototype.aa = function (a) {
+            this.d.focused = true;
         };
-        CheckboxView.prototype.y = function (a) {
+        CheckboxView.prototype.z = function (a) {
             a.stopPropagation();
-            if (this.h()) {
-                var native_ = this.r.getNativeElement();
+            if (this.i()) {
+                var native_ = this.s.getNativeElement();
                 native_.blur();
             }
-            this.c.toggle();
+            this.d.toggle();
         };
-        CheckboxView.prototype.h = function () {
+        CheckboxView.prototype.i = function () {
             return false;
         };
-        CheckboxView.prototype.x = function (a) {
+        CheckboxView.prototype.y = function (a) {
             a.stopPropagation();
         };
-        CheckboxView.prototype.aa = function () {
+        CheckboxView.prototype.ab = function () {
             if (igniteuiWebcomponentsCore.KeyFrameAnimationFactory.h == null) {
-                igniteuiWebcomponentsCore.KeyFrameAnimationFactory.h = this.l;
+                igniteuiWebcomponentsCore.KeyFrameAnimationFactory.h = this.m;
             }
         };
-        CheckboxView.prototype.a = function (a) {
-            return new igniteuiWebcomponentsCore.AnimationKeyFrameEffect(0, this.q, 0, null, a);
-        };
         CheckboxView.prototype.b = function (a) {
-            return new igniteuiWebcomponentsCore.AnimationKeyFrameEffect(0, this.o, 0, null, a);
+            return new igniteuiWebcomponentsCore.AnimationKeyFrameEffect(0, this.r, 0, null, a);
         };
-        CheckboxView.prototype.ab = function (a) {
+        CheckboxView.prototype.c = function (a) {
+            return new igniteuiWebcomponentsCore.AnimationKeyFrameEffect(0, this.p, 0, null, a);
         };
-        Object.defineProperty(CheckboxView.prototype, "t", {
+        CheckboxView.prototype.ac = function (a) {
+        };
+        Object.defineProperty(CheckboxView.prototype, "u", {
             get: function () {
-                return this.q;
+                return this.r;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(CheckboxView.prototype, "s", {
+        Object.defineProperty(CheckboxView.prototype, "t", {
             get: function () {
-                return this.q;
+                return this.r;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(CheckboxView.prototype, "e", {
+        Object.defineProperty(CheckboxView.prototype, "f", {
             get: function () {
-                return this.d;
+                return this.e;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(CheckboxView.prototype, "u", {
+        Object.defineProperty(CheckboxView.prototype, "v", {
             get: function () {
-                return this.o;
+                return this.p;
             },
             enumerable: false,
             configurable: true
         });
-        CheckboxView.prototype.ac = function () {
-            this.g = true;
-            this.j.add(this.r.listen("change", igniteuiWebcomponentsCore.runOn(this, this.x)));
-            this.j.add(this.r.listen("click", igniteuiWebcomponentsCore.runOn(this, this.y)));
-            this.j.add(this.r.listen("focus", igniteuiWebcomponentsCore.runOn(this, this.z)));
-            this.j.add(this.r.listen("blur", igniteuiWebcomponentsCore.runOn(this, this.w)));
-            this.j.add(this.p.listen("click", igniteuiWebcomponentsCore.runOn(this, this.v)));
+        CheckboxView.prototype.ad = function () {
+            this.h = true;
+            this.k.add(this.s.listen("change", igniteuiWebcomponentsCore.runOn(this, this.y)));
+            this.k.add(this.s.listen("click", igniteuiWebcomponentsCore.runOn(this, this.z)));
+            this.k.add(this.s.listen("focus", igniteuiWebcomponentsCore.runOn(this, this.aa)));
+            this.k.add(this.s.listen("blur", igniteuiWebcomponentsCore.runOn(this, this.x)));
+            this.k.add(this.q.listen("click", igniteuiWebcomponentsCore.runOn(this, this.w)));
         };
-        CheckboxView.prototype.ae = function () {
+        CheckboxView.prototype.af = function () {
             var e_2, _a;
-            this.g = false;
+            this.h = false;
             try {
-                for (var _b = tslib.__values(igniteuiWebcomponentsCore.fromEnum(this.j)), _c = _b.next(); !_c.done; _c = _b.next()) {
+                for (var _b = tslib.__values(igniteuiWebcomponentsCore.fromEnum(this.k)), _c = _b.next(); !_c.done; _c = _b.next()) {
                     var a = _c.value;
                     a();
                 }
@@ -36277,21 +36342,21 @@
                         throw e_2.error;
                 }
             }
-            this.j.clear();
+            this.k.clear();
         };
-        CheckboxView.prototype.ah = function () {
-            var model_ = this.c;
+        CheckboxView.prototype.ai = function () {
+            var model_ = this.d;
             if (model_.externalObject && model_.externalObject.refreshDefaults) {
                 model_.externalObject.refreshDefaults();
             }
             ;
         };
-        CheckboxView.prototype.ak = function (a, b) {
-            this.d.ax = a;
-            this.d.aw = b;
+        CheckboxView.prototype.al = function (a, b) {
+            this.e.ax = a;
+            this.e.aw = b;
         };
-        CheckboxView.prototype.k = function () {
-            var a = this.q.getStyleProperty("border-top-width");
+        CheckboxView.prototype.l = function () {
+            var a = this.r.getStyleProperty("border-top-width");
             a = igniteuiWebcomponentsCore.stringReplace(a, "px", "");
             return parseFloat(a);
         };
@@ -36359,9 +36424,9 @@
             _this.ba = _this.a8 + "-label";
             _this.a7 = _this.ba;
             var a = new CheckboxView();
-            a.c = _this;
+            a.d = _this;
             _this.view = a;
-            _this.view.af();
+            _this.view.ag();
             return _this;
         }
         Object.defineProperty(XCheckbox.prototype, "view", {
@@ -36465,7 +36530,7 @@
                     this.ct();
                     break;
                 case "ActualCheckPath":
-                    this.view.ai();
+                    this.view.aj();
                     break;
                 case "IsChecked":
                     if (!this.s) {
@@ -36485,16 +36550,16 @@
                     }
                     break;
                 case "DisableRipple":
-                    this.view.e.i = this.y;
+                    this.view.f.i = this.y;
                     break;
                 case "InputId":
-                    this.view.ag();
+                    this.view.ah();
                     break;
             }
         };
         XCheckbox.prototype.ct = function () {
-            var a = this.view.t;
-            var b = this.view.s;
+            var a = this.view.u;
+            var b = this.view.t;
             if (a == null || b == null) {
                 return;
             }
@@ -36513,7 +36578,7 @@
             }
         };
         XCheckbox.prototype.cw = function () {
-            var a = this.view.u;
+            var a = this.view.v;
             if (a == null) {
                 return;
             }
@@ -37004,10 +37069,10 @@
         XCheckbox.prototype.cp = function () {
             this.ck();
             if (this.checked) {
-                this.view.ak(igniteuiWebcomponentsCore.BrushUtil.s(this.c8, 0.6), igniteuiWebcomponentsCore.BrushUtil.s(this.c8, 0.1));
+                this.view.al(igniteuiWebcomponentsCore.BrushUtil.s(this.c8, 0.6), igniteuiWebcomponentsCore.BrushUtil.s(this.c8, 0.1));
             }
             else {
-                this.view.ak(igniteuiWebcomponentsCore.BrushUtil.s(this.c8, 0.6), igniteuiWebcomponentsCore.BrushUtil.s(this.dc, 0.1));
+                this.view.al(igniteuiWebcomponentsCore.BrushUtil.s(this.c8, 0.6), igniteuiWebcomponentsCore.BrushUtil.s(this.dc, 0.1));
             }
         };
         Object.defineProperty(XCheckbox.prototype, "a", {
@@ -37021,15 +37086,15 @@
             configurable: true
         });
         XCheckbox.prototype.ck = function () {
-            this.view.aa();
+            this.view.ab();
             var a = false;
             if (this.o == null) {
                 if (!a) {
                     a = true;
-                    this.view.ah();
+                    this.view.ai();
                 }
-                this.o = igniteuiWebcomponentsCore.KeyFrameAnimationFactory.f.c(this.view.a(this.a).m(new igniteuiWebcomponentsCore.AnimationKeyFrameProperty(2, this.db), new igniteuiWebcomponentsCore.AnimationKeyFrameProperty(3, this.dc)).m(new igniteuiWebcomponentsCore.AnimationKeyFrameProperty(2, this.c8), new igniteuiWebcomponentsCore.AnimationKeyFrameProperty(3, this.c9)));
-                this.p = igniteuiWebcomponentsCore.KeyFrameAnimationFactory.f.c(this.view.b(this.a).m(new igniteuiWebcomponentsCore.AnimationKeyFrameProperty(19, 24), new igniteuiWebcomponentsCore.AnimationKeyFrameProperty(1, 0)).m(new igniteuiWebcomponentsCore.AnimationKeyFrameProperty(19, 0), new igniteuiWebcomponentsCore.AnimationKeyFrameProperty(1, 1)));
+                this.o = igniteuiWebcomponentsCore.KeyFrameAnimationFactory.f.c(this.view.b(this.a).m(new igniteuiWebcomponentsCore.AnimationKeyFrameProperty(2, this.db), new igniteuiWebcomponentsCore.AnimationKeyFrameProperty(3, this.dc)).m(new igniteuiWebcomponentsCore.AnimationKeyFrameProperty(2, this.c8), new igniteuiWebcomponentsCore.AnimationKeyFrameProperty(3, this.c9)));
+                this.p = igniteuiWebcomponentsCore.KeyFrameAnimationFactory.f.c(this.view.c(this.a).m(new igniteuiWebcomponentsCore.AnimationKeyFrameProperty(19, 24), new igniteuiWebcomponentsCore.AnimationKeyFrameProperty(1, 0)).m(new igniteuiWebcomponentsCore.AnimationKeyFrameProperty(19, 0), new igniteuiWebcomponentsCore.AnimationKeyFrameProperty(1, 1)));
             }
         };
         XCheckbox.prototype.toggle = function () {
@@ -37067,21 +37132,21 @@
                 c = -1;
             }
             if (b) {
-                this.view.ak(igniteuiWebcomponentsCore.BrushUtil.s(this.c8, 0.6), igniteuiWebcomponentsCore.BrushUtil.s(this.c8, 0.1));
+                this.view.al(igniteuiWebcomponentsCore.BrushUtil.s(this.c8, 0.6), igniteuiWebcomponentsCore.BrushUtil.s(this.c8, 0.1));
             }
             else {
-                this.view.ak(igniteuiWebcomponentsCore.BrushUtil.s(this.c8, 0.6), igniteuiWebcomponentsCore.BrushUtil.s(this.dc, 0.1));
+                this.view.al(igniteuiWebcomponentsCore.BrushUtil.s(this.c8, 0.6), igniteuiWebcomponentsCore.BrushUtil.s(this.dc, 0.1));
             }
             if (!this.indeterminate) {
-                igniteuiWebcomponentsCore.NativeUI.af(this.view.u, null);
+                igniteuiWebcomponentsCore.NativeUI.af(this.view.v, null);
             }
             if (this.z || this.indeterminate || a) {
-                var d = this.view.t;
-                var e = this.view.s;
-                var f = this.view.u;
+                var d = this.view.u;
+                var e = this.view.t;
+                var f = this.view.v;
                 if (this.indeterminate) {
                     var g = new igniteuiWebcomponentsCore.TransformGroup();
-                    var h = this.view.al();
+                    var h = this.view.am();
                     g.j.add(((function () {
                         var $ret = new igniteuiWebcomponentsCore.RotateTransform();
                         $ret.j = 45;
@@ -37089,7 +37154,7 @@
                     })()));
                     g.j.add(((function () {
                         var $ret = new igniteuiWebcomponentsCore.TranslateTransform();
-                        $ret.j = -_this.view.k();
+                        $ret.j = -_this.view.l();
                         return $ret;
                     })()));
                     igniteuiWebcomponentsCore.NativeUI.m(d, this.c8);
@@ -37148,10 +37213,10 @@
             }
         };
         XCheckbox.prototype.onDetachedFromUI = function () {
-            this.view.ae();
+            this.view.af();
         };
         XCheckbox.prototype.onAttachedToUI = function () {
-            this.view.ac();
+            this.view.ad();
         };
         XCheckbox.prototype.onContentReady = function () {
             if (this.indeterminate) {
@@ -37159,17 +37224,23 @@
             }
         };
         XCheckbox.prototype.af = function () {
-            return this.view.i();
+            return this.view.j();
         };
         XCheckbox.prototype.a3 = function () {
             return this.b();
         };
         XCheckbox.prototype.by = function () {
             var a = this.b();
-            return a.s();
+            return a.w();
         };
         XCheckbox.prototype.b = function () {
             var a = new CheckboxVisualModelExport();
+            var b = this.view.am();
+            var c = this.view.a();
+            a.u = b.width;
+            a.q = b.height;
+            a.t = c[0];
+            a.r = c[1];
             a.f = this.n;
             a.d = igniteuiWebcomponentsCore.AppearanceHelper.a(this.db);
             a.c = igniteuiWebcomponentsCore.AppearanceHelper.a(this.da);
@@ -37178,11 +37249,11 @@
             a.o = this.aq;
             a.l = this.an;
             a.p = this.ar;
-            a.q = this.av;
+            a.s = this.av;
             a.n = this.ap;
             a.m = this.ao;
             a.a = igniteuiWebcomponentsCore.AppearanceHelper.a(this.c8);
-            a.r = this.a4;
+            a.v = this.a4;
             a.j = this.focused;
             a.g = this.y;
             a.h = this.checked;
@@ -37191,7 +37262,7 @@
             return a;
         };
         XCheckbox.prototype.provideContainer = function (a) {
-            this.view.ad(a);
+            this.view.ae(a);
         };
         XCheckbox.$t = igniteuiWebcomponentsCore.markType(XCheckbox, 'XCheckbox', igniteuiWebcomponentsCore.Base.$, [igniteuiWebcomponentsCore.INotifyPropertyChanged_$type]);
         XCheckbox.g = ThemeResolver.a(((function () {
@@ -37357,7 +37428,8 @@
             }
         };
         XCheckboxBridge.prototype.exportVisualData = function (a) {
-            return a.a3();
+            var b = a.a3();
+            return b;
         };
         XCheckboxBridge.$t = igniteuiWebcomponentsCore.markType(XCheckboxBridge, 'XCheckboxBridge', XComponentBridge.$);
         return XCheckboxBridge;
@@ -37481,7 +37553,8 @@
             }
         };
         XIconBridge.prototype.exportVisualData = function (a) {
-            return a.bg();
+            var b = a.bg();
+            return b;
         };
         XIconBridge.$t = igniteuiWebcomponentsCore.markType(XIconBridge, 'XIconBridge', XComponentBridge.$);
         return XIconBridge;
@@ -37842,6 +37915,45 @@
         return ColorEditorPanelSelectedValueChangedEventArgs;
     }(igniteuiWebcomponentsCore.EventArgs));
 
+    /*
+    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.
+    */
+    /**
+     * @hidden
+     */
+    var ColorEditorVisualModelExport = /** @class */ /*@__PURE__*/ (function (_super) {
+        tslib.__extends(ColorEditorVisualModelExport, _super);
+        function ColorEditorVisualModelExport() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.e = 0;
+            _this.f = 0;
+            _this.g = 0;
+            _this.d = 0;
+            _this.b = 0;
+            _this.a = null;
+            _this.c = false;
+            return _this;
+        }
+        ColorEditorVisualModelExport.prototype.h = function () {
+            var a = new igniteuiWebcomponentsCore.StringBuilder(0);
+            a.l("{");
+            a.l("left : " + this.e + ", ");
+            a.l("top : " + this.f + ", ");
+            a.l("height : " + this.d + ", ");
+            a.l("width : " + this.g + ", ");
+            a.l("baseTheme : " + this.b + ", ");
+            a.l("value : " + this.a.serialize() + ", ");
+            a.l("isDisabled : " + this.c + ", ");
+            a.l("}");
+            return a.toString();
+        };
+        ColorEditorVisualModelExport.$t = igniteuiWebcomponentsCore.markType(ColorEditorVisualModelExport, 'ColorEditorVisualModelExport');
+        return ColorEditorVisualModelExport;
+    }(igniteuiWebcomponentsCore.Base));
+
     /*
     THIS INFRAGISTICS ULTIMATE SOFTWARE LICENSE  AGREEMENT ("AGREEMENT") LOCATED HERE:
     https://www.infragistics.com/legal/license/igultimate-la
@@ -38193,6 +38305,15 @@
                     break;
             }
         };
+        ColorEditorBridge.prototype.exportVisualData = function (a) {
+            var b = a.as();
+            var c = this.getBoundingRect(a);
+            b.e = c.left;
+            b.f = c.top;
+            b.g = c.width;
+            b.d = c.height;
+            return b;
+        };
         ColorEditorBridge.$t = igniteuiWebcomponentsCore.markType(ColorEditorBridge, 'ColorEditorBridge', XComponentBridge.$);
         return ColorEditorBridge;
     }(XComponentBridge));
@@ -38587,7 +38708,7 @@
                 this.a.a = new igniteuiWebcomponentsCore.DOMExecutionContext(a);
             }
             this.h = a;
-            this.a.bg();
+            this.a.bj();
         };
         ColorEditorView.prototype.m = function () {
             if (igniteuiWebcomponentsCore.KeyFrameAnimationFactory.h == null) {
@@ -38646,55 +38767,55 @@
         tslib.__extends(ColorEditor, _super);
         function ColorEditor() {
             var _this = _super.call(this) || this;
-            _this.g = null;
+            _this.h = null;
+            _this.s = null;
             _this.r = null;
-            _this.q = null;
-            _this.d = null;
-            _this.v = false;
-            _this.af = false;
-            _this.ad = false;
-            _this.cj = igniteuiWebcomponentsCore.BrushUtil.j(0, 0, 0, 0);
+            _this.e = null;
             _this.w = false;
+            _this.ag = false;
+            _this.ae = false;
+            _this.cm = igniteuiWebcomponentsCore.BrushUtil.j(0, 0, 0, 0);
+            _this.x = false;
             _this.propertyChanged = null;
             _this.valueChanged = null;
             _this.valueChanging = null;
-            _this.s = null;
+            _this.t = null;
             _this.a = null;
-            _this.cl = igniteuiWebcomponentsCore.BrushUtil.j(255, 0, 0, 255);
-            _this.ar = "";
-            _this.ci = igniteuiWebcomponentsCore.BrushUtil.j(255, 24, 29, 31);
-            _this.l = null;
-            _this.j = 2;
-            _this.h = 1;
+            _this.co = igniteuiWebcomponentsCore.BrushUtil.j(255, 0, 0, 255);
+            _this.at = "";
+            _this.cl = igniteuiWebcomponentsCore.BrushUtil.j(255, 24, 29, 31);
             _this.m = null;
-            _this.ck = igniteuiWebcomponentsCore.BrushUtil.j(255, 24, 29, 31);
-            _this.ch = igniteuiWebcomponentsCore.BrushUtil.j(255, 163, 172, 184);
+            _this.k = 2;
+            _this.i = 1;
+            _this.n = null;
+            _this.cn = igniteuiWebcomponentsCore.BrushUtil.j(255, 24, 29, 31);
+            _this.ck = igniteuiWebcomponentsCore.BrushUtil.j(255, 163, 172, 184);
+            _this.ad = true;
+            _this.v = true;
             _this.ac = true;
-            _this.u = true;
-            _this.ab = true;
-            _this.x = false;
-            _this.ap = 0;
             _this.y = false;
-            _this.aa = false;
-            _this.ae = false;
+            _this.aq = 0;
             _this.z = false;
+            _this.ab = false;
+            _this.af = false;
+            _this.aa = false;
             _this.gotFocus = null;
             _this.lostFocus = null;
             igniteuiWebcomponentsCore.NativeUIInputsFactory.n();
             NativeUIXInputsFactory.m();
             var a = new ColorEditorView();
             a.a = _this;
-            _this.g = a;
-            _this.g.q();
+            _this.h = a;
+            _this.h.q();
             return _this;
         }
         ColorEditor.prototype.onAttachedToUI = function () {
-            this.g.n();
+            this.h.n();
         };
         ColorEditor.prototype.onDetachedFromUI = function () {
-            this.g.p();
+            this.h.p();
         };
-        ColorEditor.prototype.b1 = function (a, b) {
+        ColorEditor.prototype.b4 = function (a, b) {
             if (this.valueChanging != null) {
                 this.valueChanging(this, ((function () {
                     var $ret = new ColorEditorPanelSelectedValueChangedEventArgs();
@@ -38703,7 +38824,7 @@
                     return $ret;
                 })()));
             }
-            if (this.w) {
+            if (this.x) {
             }
         };
         ColorEditor.prototype.notifySizeChanged = function () {
@@ -38712,290 +38833,290 @@
             this.provideContainer(null);
         };
         ColorEditor.prototype.provideContainer = function (a) {
-            this.g.o(a);
+            this.h.o(a);
         };
-        Object.defineProperty(ColorEditor.prototype, "t", {
+        Object.defineProperty(ColorEditor.prototype, "u", {
             get: function () {
-                if (this.s == null) {
-                    this.s = new igniteuiWebcomponentsCore.SRProvider(this.g.h);
-                    this.s.cb("ColorEditor");
+                if (this.t == null) {
+                    this.t = new igniteuiWebcomponentsCore.SRProvider(this.h.h);
+                    this.t.cb("ColorEditor");
                 }
-                return this.s;
+                return this.t;
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(ColorEditor.prototype, "value", {
             get: function () {
-                return this.cl;
+                return this.co;
             },
             set: function (a) {
-                var b = this.cl;
-                this.cj = b;
-                this.cl = a;
-                if (b != this.cl) {
-                    this.b0("Value", b, this.cl);
+                var b = this.co;
+                this.cm = b;
+                this.co = a;
+                if (b != this.co) {
+                    this.b3("Value", b, this.co);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(ColorEditor.prototype, "az", {
+        Object.defineProperty(ColorEditor.prototype, "a2", {
             get: function () {
-                return this.ar;
+                return this.at;
             },
             set: function (a) {
-                var b = this.ar;
-                this.ar = a;
-                if (b != this.ar) {
-                    this.b0("Label", b, this.ar);
+                var b = this.at;
+                this.at = a;
+                if (b != this.at) {
+                    this.b3("Label", b, this.at);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(ColorEditor.prototype, "cn", {
+        Object.defineProperty(ColorEditor.prototype, "cq", {
             get: function () {
-                return this.ci;
+                return this.cl;
             },
             set: function (a) {
-                var b = this.ci;
-                this.ci = a;
-                if (b != this.ci) {
-                    this.b0("LabelTextColor", b, a);
+                var b = this.cl;
+                this.cl = a;
+                if (b != this.cl) {
+                    this.b3("LabelTextColor", b, a);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(ColorEditor.prototype, "o", {
+        Object.defineProperty(ColorEditor.prototype, "p", {
             get: function () {
-                return this.l;
+                return this.m;
             },
             set: function (a) {
-                var b = this.l;
-                this.l = a;
-                if (b != this.l) {
-                    this.b0("LabelTextStyle", b, this.l);
+                var b = this.m;
+                this.m = a;
+                if (b != this.m) {
+                    this.b3("LabelTextStyle", b, this.m);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(ColorEditor.prototype, "k", {
+        Object.defineProperty(ColorEditor.prototype, "l", {
             get: function () {
-                return this.j;
+                return this.k;
             },
             set: function (a) {
-                var b = this.j;
-                this.j = a;
-                if (b != this.j) {
-                    this.b0("Density", igniteuiWebcomponentsCore.enumGetBox(igniteuiWebcomponentsCore.ControlDisplayDensity_$type, b), igniteuiWebcomponentsCore.enumGetBox(igniteuiWebcomponentsCore.ControlDisplayDensity_$type, this.j));
+                var b = this.k;
+                this.k = a;
+                if (b != this.k) {
+                    this.b3("Density", igniteuiWebcomponentsCore.enumGetBox(igniteuiWebcomponentsCore.ControlDisplayDensity_$type, b), igniteuiWebcomponentsCore.enumGetBox(igniteuiWebcomponentsCore.ControlDisplayDensity_$type, this.k));
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(ColorEditor.prototype, "i", {
+        Object.defineProperty(ColorEditor.prototype, "j", {
             get: function () {
-                return this.h;
+                return this.i;
             },
             set: function (a) {
-                var b = this.h;
-                this.h = a;
-                if (b != this.h) {
-                    this.b0("BaseTheme", igniteuiWebcomponentsCore.enumGetBox(igniteuiWebcomponentsCore.BaseControlTheme_$type, b), igniteuiWebcomponentsCore.enumGetBox(igniteuiWebcomponentsCore.BaseControlTheme_$type, this.h));
+                var b = this.i;
+                this.i = a;
+                if (b != this.i) {
+                    this.b3("BaseTheme", igniteuiWebcomponentsCore.enumGetBox(igniteuiWebcomponentsCore.BaseControlTheme_$type, b), igniteuiWebcomponentsCore.enumGetBox(igniteuiWebcomponentsCore.BaseControlTheme_$type, this.i));
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(ColorEditor.prototype, "p", {
+        Object.defineProperty(ColorEditor.prototype, "q", {
             get: function () {
-                return this.m;
+                return this.n;
             },
             set: function (a) {
-                var b = this.m;
-                this.m = a;
-                if (b != this.m) {
-                    this.b0("TextStyle", b, this.m);
+                var b = this.n;
+                this.n = a;
+                if (b != this.n) {
+                    this.b3("TextStyle", b, this.n);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(ColorEditor.prototype, "co", {
+        Object.defineProperty(ColorEditor.prototype, "cr", {
             get: function () {
-                return this.ck;
+                return this.cn;
             },
             set: function (a) {
-                var b = this.ck;
-                this.ck = a;
-                if (b != this.ck) {
-                    this.b0("TextColor", b, this.ck);
+                var b = this.cn;
+                this.cn = a;
+                if (b != this.cn) {
+                    this.b3("TextColor", b, this.cn);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(ColorEditor.prototype, "cm", {
+        Object.defineProperty(ColorEditor.prototype, "cp", {
             get: function () {
-                return this.ch;
+                return this.ck;
             },
             set: function (a) {
-                var b = this.ch;
-                this.ch = a;
-                if (b != this.ch) {
-                    this.b0("IconColor", b, this.ch);
+                var b = this.ck;
+                this.ck = a;
+                if (b != this.ck) {
+                    this.b3("IconColor", b, this.ck);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(ColorEditor.prototype, "am", {
+        Object.defineProperty(ColorEditor.prototype, "an", {
             get: function () {
-                return this.ac;
+                return this.ad;
             },
             set: function (a) {
-                var b = this.ac;
-                this.ac = a;
-                if (b != this.ac) {
-                    this.b0("ShowClearButton", b, this.ac);
+                var b = this.ad;
+                this.ad = a;
+                if (b != this.ad) {
+                    this.b3("ShowClearButton", b, this.ad);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(ColorEditor.prototype, "ag", {
+        Object.defineProperty(ColorEditor.prototype, "ah", {
             get: function () {
-                return this.u;
+                return this.v;
             },
             set: function (a) {
-                var b = this.u;
-                this.u = a;
-                if (b != this.u) {
-                    this.b0("AllowTextInput", b, this.u);
+                var b = this.v;
+                this.v = a;
+                if (b != this.v) {
+                    this.b3("AllowTextInput", b, this.v);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(ColorEditor.prototype, "ak", {
+        Object.defineProperty(ColorEditor.prototype, "al", {
             get: function () {
-                return this.ab;
+                return this.ac;
             },
             set: function (a) {
-                var b = this.ab;
-                this.ab = a;
-                if (b != this.ab) {
-                    this.b0("OpenOnFocus", b, this.ab);
+                var b = this.ac;
+                this.ac = a;
+                if (b != this.ac) {
+                    this.b3("OpenOnFocus", b, this.ac);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(ColorEditor.prototype, "ah", {
+        Object.defineProperty(ColorEditor.prototype, "ai", {
             get: function () {
-                return this.x;
+                return this.y;
             },
             set: function (a) {
-                var b = this.x;
-                this.x = a;
-                if (b != this.x) {
-                    this.b0("IsDisabled", b, this.x);
+                var b = this.y;
+                this.y = a;
+                if (b != this.y) {
+                    this.b3("IsDisabled", b, this.y);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(ColorEditor.prototype, "aq", {
+        Object.defineProperty(ColorEditor.prototype, "ar", {
             get: function () {
-                return this.ap;
+                return this.aq;
             },
             set: function (a) {
-                var b = this.ap;
-                this.ap = a;
-                if (b != this.ap) {
-                    this.b0("TabIndex", b, this.ap);
+                var b = this.aq;
+                this.aq = a;
+                if (b != this.aq) {
+                    this.b3("TabIndex", b, this.aq);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(ColorEditor.prototype, "ai", {
+        Object.defineProperty(ColorEditor.prototype, "aj", {
             get: function () {
-                return this.y;
+                return this.z;
             },
             set: function (a) {
-                var b = this.y;
-                this.y = a;
-                if (b != this.y) {
-                    this.b0("IsFixed", b, this.y);
+                var b = this.z;
+                this.z = a;
+                if (b != this.z) {
+                    this.b3("IsFixed", b, this.z);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(ColorEditor.prototype, "aj", {
+        Object.defineProperty(ColorEditor.prototype, "ak", {
             get: function () {
-                return this.aa;
+                return this.ab;
             },
             set: function (a) {
-                var b = this.aa;
-                this.aa = a;
-                if (b != this.aa) {
-                    this.b0("OpenAsChild", b, this.aa);
+                var b = this.ab;
+                this.ab = a;
+                if (b != this.ab) {
+                    this.b3("OpenAsChild", b, this.ab);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(ColorEditor.prototype, "an", {
+        Object.defineProperty(ColorEditor.prototype, "ao", {
             get: function () {
-                return this.ae;
+                return this.af;
             },
             set: function (a) {
-                var b = this.ae;
-                this.ae = a;
-                if (b != this.ae) {
-                    this.b0("UseTopLayer", b, this.ae);
+                var b = this.af;
+                this.af = a;
+                if (b != this.af) {
+                    this.b3("UseTopLayer", b, this.af);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        ColorEditor.prototype.b0 = function (a, b, c) {
+        ColorEditor.prototype.b3 = function (a, b, c) {
             if (this.propertyChanged != null) {
                 this.propertyChanged(this, new igniteuiWebcomponentsCore.PropertyChangedEventArgs(a));
             }
-            this.b6(a, b, c);
+            this.b9(a, b, c);
         };
-        ColorEditor.prototype.b6 = function (a, b, c) {
+        ColorEditor.prototype.b9 = function (a, b, c) {
             switch (a) {
                 case "Density":
-                    this.b9();
+                    this.cc();
                     break;
                 case "BaseTheme":
-                    this.ca();
+                    this.cd();
                     break;
                 case "Value":
-                    this.b1(this.cj, this.value);
-                    this.cj = this.value;
-                    if (this.d != null && !this.w) {
-                        this.d.value = this.value;
+                    this.b4(this.cm, this.value);
+                    this.cm = this.value;
+                    if (this.e != null && !this.x) {
+                        this.e.value = this.value;
                     }
                     break;
                 case "Label":
-                    if (this.q != null) {
-                        this.q.b5 = this.az;
+                    if (this.r != null) {
+                        this.r.b5 = this.a2;
                     }
                     break;
                 case "TextStyle":
-                    this.cf();
+                    this.ci();
                     break;
                 case "ShowClearButton":
-                    if (this.q != null) {
-                        if (this.q.b7 != "") {
+                    if (this.r != null) {
+                        if (this.r.b7 != "") {
                         }
                     }
                     break;
@@ -39003,274 +39124,288 @@
                 case "LabelTextStyle":
                 case "TextColor":
                 case "IconColor":
-                    this.cg();
+                    this.cj();
                     break;
                 case "AllowTextInput":
-                    if (this.q != null) {
-                        this.q.b0 = this.al();
+                    if (this.r != null) {
+                        this.r.b0 = this.am();
                     }
                     break;
                 case "OpenOnFocus": break;
                 case "IsDisabled":
                     {
-                        if (this.q != null) {
-                            this.q.b0 = this.al();
+                        if (this.r != null) {
+                            this.r.b0 = this.am();
                         }
                     }
                     break;
             }
         };
-        ColorEditor.prototype.al = function () {
-            return this.ah || !this.ag;
+        ColorEditor.prototype.am = function () {
+            return this.ai || !this.ah;
         };
-        ColorEditor.prototype.cg = function () {
-            if (this.q != null) {
-                this.q.ce = this.co;
+        ColorEditor.prototype.cj = function () {
+            if (this.r != null) {
+                this.r.ce = this.cr;
             }
         };
-        ColorEditor.prototype.ce = function () {
-            if (this.q != null) {
+        ColorEditor.prototype.ch = function () {
+            if (this.r != null) {
             }
         };
-        ColorEditor.prototype.cf = function () {
-            if (this.m != null) {
-                this.q.bk = this.m;
+        ColorEditor.prototype.ci = function () {
+            if (this.n != null) {
+                this.r.bk = this.n;
             }
         };
-        ColorEditor.prototype.be = function () {
-            if (this.ah == true) {
+        ColorEditor.prototype.bh = function () {
+            if (this.ai == true) {
                 return;
             }
-            if (this.q != null) {
-                this.q.b7 = "";
+            if (this.r != null) {
+                this.r.b7 = "";
             }
             this.value = igniteuiWebcomponentsCore.BrushUtil.j(0, 0, 0, 0);
-            this.d.ax();
-            this.z = false;
+            this.e.ax();
+            this.aa = false;
         };
-        ColorEditor.prototype.by = function () {
-            this.z = true;
+        ColorEditor.prototype.b1 = function () {
+            this.aa = true;
         };
-        ColorEditor.prototype.bz = function () {
-            this.z = false;
+        ColorEditor.prototype.b2 = function () {
+            this.aa = false;
         };
-        ColorEditor.prototype.bo = function () {
-            igniteuiWebcomponentsCore.NativeUIWindow.h(15, igniteuiWebcomponentsCore.runOn(this, this.b4), this.g.h);
-            igniteuiWebcomponentsCore.NativeUIWindow.h(9, igniteuiWebcomponentsCore.runOn(this, this.b3), this.g.h);
+        ColorEditor.prototype.br = function () {
+            igniteuiWebcomponentsCore.NativeUIWindow.h(15, igniteuiWebcomponentsCore.runOn(this, this.b7), this.h.h);
+            igniteuiWebcomponentsCore.NativeUIWindow.h(9, igniteuiWebcomponentsCore.runOn(this, this.b6), this.h.h);
         };
-        ColorEditor.prototype.bs = function () {
-            igniteuiWebcomponentsCore.NativeUIWindow.i(15, igniteuiWebcomponentsCore.runOn(this, this.b4));
-            igniteuiWebcomponentsCore.NativeUIWindow.i(9, igniteuiWebcomponentsCore.runOn(this, this.b3));
+        ColorEditor.prototype.bv = function () {
+            igniteuiWebcomponentsCore.NativeUIWindow.i(15, igniteuiWebcomponentsCore.runOn(this, this.b7));
+            igniteuiWebcomponentsCore.NativeUIWindow.i(9, igniteuiWebcomponentsCore.runOn(this, this.b6));
         };
-        ColorEditor.prototype.b3 = function (a) {
+        ColorEditor.prototype.b6 = function (a) {
             var b = a;
-            if (this.q != null) {
-                if (this.r.b6 && !this.r.t(b.b) && !this.q.t(b.b)) {
-                    this.bf();
+            if (this.r != null) {
+                if (this.s.b6 && !this.s.t(b.b) && !this.r.t(b.b)) {
+                    this.bi();
                 }
             }
         };
-        ColorEditor.prototype.b4 = function (a) {
-            if (this.q != null) {
-                var b = this.q.be();
-                this.r.ce(b);
+        ColorEditor.prototype.b7 = function (a) {
+            if (this.r != null) {
+                var b = this.r.be();
+                this.s.ce(b);
             }
         };
-        ColorEditor.prototype.bg = function () {
+        ColorEditor.prototype.bj = function () {
             var _this = this;
-            igniteuiWebcomponentsCore.NativeUIComponent.av(this.g.j(), [12, 2, 7, 0], [2, 2, 2, 2], function (a) {
+            igniteuiWebcomponentsCore.NativeUIComponent.av(this.h.j(), [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.g.i();
-                _this.g.k(e, f);
+                var f = _this.h.i();
+                _this.h.k(e, f);
                 b.bn(d);
                 d.bn(e);
-                _this.g.l(c);
+                _this.h.l(c);
                 b.ch = igniteuiWebcomponentsCore.BrushUtil.j(255, 255, 255, 255);
                 b.ca = 150;
                 b.b8 = 8;
                 b.cb = 4;
                 b.b1 = true;
-                _this.q = c;
-                _this.q.c = _this.i;
-                _this.q.bp = _this.k;
-                _this.q.b6 = ColorEditor.a5;
-                _this.q.cc = igniteuiWebcomponentsCore.BrushUtil.j(255, 255, 255, 255);
-                _this.q.cd = igniteuiWebcomponentsCore.BrushUtil.j(255, 0, 0, 0);
-                _this.q.bn = igniteuiWebcomponentsCore.runOn(_this, _this.cc);
-                _this.q.n = igniteuiWebcomponentsCore.runOn(_this, _this.bv);
-                _this.q.o = igniteuiWebcomponentsCore.runOn(_this, _this.bx);
-                _this.q.cb = igniteuiWebcomponentsCore.BrushUtil.j(255, 0, 0, 255);
-                _this.r = b;
-                _this.d = _this.g.c(f);
-                _this.d.value = _this.value;
-                var g = _this.d;
-                g.closed = igniteuiWebcomponentsCore.delegateCombine(g.closed, igniteuiWebcomponentsCore.runOn(_this, _this.bc));
-                var h = _this.d;
-                h.valueChanged = igniteuiWebcomponentsCore.delegateCombine(h.valueChanged, igniteuiWebcomponentsCore.runOn(_this, _this.bd));
-                d.o = igniteuiWebcomponentsCore.runOn(_this, _this.bx);
-                var i = _this.d;
-                i.valueChanged = igniteuiWebcomponentsCore.delegateCombine(i.valueChanged, igniteuiWebcomponentsCore.runOn(_this, _this.bj));
+                _this.r = c;
+                _this.r.c = _this.j;
+                _this.r.bp = _this.l;
+                _this.r.b6 = ColorEditor.a8;
+                _this.r.cc = igniteuiWebcomponentsCore.BrushUtil.j(255, 255, 255, 255);
+                _this.r.cd = igniteuiWebcomponentsCore.BrushUtil.j(255, 0, 0, 0);
+                _this.r.bn = igniteuiWebcomponentsCore.runOn(_this, _this.cf);
+                _this.r.n = igniteuiWebcomponentsCore.runOn(_this, _this.by);
+                _this.r.o = igniteuiWebcomponentsCore.runOn(_this, _this.b0);
+                _this.r.cb = igniteuiWebcomponentsCore.BrushUtil.j(255, 0, 0, 255);
+                _this.s = b;
+                _this.e = _this.h.c(f);
+                _this.e.value = _this.value;
+                var g = _this.e;
+                g.closed = igniteuiWebcomponentsCore.delegateCombine(g.closed, igniteuiWebcomponentsCore.runOn(_this, _this.bf));
+                var h = _this.e;
+                h.valueChanged = igniteuiWebcomponentsCore.delegateCombine(h.valueChanged, igniteuiWebcomponentsCore.runOn(_this, _this.bg));
+                d.o = igniteuiWebcomponentsCore.runOn(_this, _this.b0);
+                var i = _this.e;
+                i.valueChanged = igniteuiWebcomponentsCore.delegateCombine(i.valueChanged, igniteuiWebcomponentsCore.runOn(_this, _this.bm));
             });
         };
-        ColorEditor.prototype.bd = function (a, b) {
+        ColorEditor.prototype.bg = function (a, b) {
             if (this.valueChanged != null) {
                 this.valueChanged(this, b);
             }
         };
-        ColorEditor.prototype.bc = function (a, b) {
-            this.bi(a);
+        ColorEditor.prototype.bf = function (a, b) {
+            this.bl(a);
         };
-        ColorEditor.prototype.bx = function (a, b) {
-            if (!this.r.t(b.b) && !this.q.t(b.b) && !(this.q.an == b.b)) {
-                this.bm();
+        ColorEditor.prototype.b0 = function (a, b) {
+            if (!this.s.t(b.b) && !this.r.t(b.b) && !(this.r.an == b.b)) {
+                this.bp();
             }
         };
-        ColorEditor.prototype.bv = function (a, b) {
+        ColorEditor.prototype.by = function (a, b) {
             this.focus();
         };
-        ColorEditor.prototype.cc = function (a, b) {
-            this.cd();
+        ColorEditor.prototype.cf = function (a, b) {
+            this.cg();
         };
-        ColorEditor.prototype.bj = function (a, b) {
-            this.w = true;
+        ColorEditor.prototype.bm = function (a, b) {
+            this.x = true;
             this.value = b.newValue;
-            this.w = false;
-            this.b2(b.oldValue, b.newValue);
+            this.x = false;
+            this.b5(b.oldValue, b.newValue);
         };
-        ColorEditor.prototype.b2 = function (a, b) {
-            if (this.q != null) {
-                this.q.cb = b;
+        ColorEditor.prototype.b5 = function (a, b) {
+            if (this.r != null) {
+                this.r.cb = b;
             }
         };
-        ColorEditor.prototype.bi = function (a) {
-            if (this.r.b6) {
-                this.v = true;
-                this.bf();
+        ColorEditor.prototype.bl = function (a) {
+            if (this.s.b6) {
+                this.w = true;
+                this.bi();
             }
         };
-        ColorEditor.prototype.cd = function () {
-            if (this.v == false) {
-                if (this.r.b6) {
-                    this.bf();
+        ColorEditor.prototype.cg = function () {
+            if (this.w == false) {
+                if (this.s.b6) {
+                    this.bi();
                 }
                 else {
-                    this.b5();
+                    this.b8();
                 }
             }
             else {
-                this.v = false;
+                this.w = false;
             }
         };
-        ColorEditor.prototype.b5 = function () {
-            if (this.ah) {
+        ColorEditor.prototype.b8 = function () {
+            if (this.ai) {
                 return;
             }
-            if (this.r != null) {
-                var a = this.g.r(false);
-                var b = this.g.s();
+            if (this.s != null) {
+                var a = this.h.r(false);
+                var b = this.h.s();
                 var c = b.height;
                 var d = 240;
                 var e = a.bottom + d;
                 if (!igniteuiWebcomponentsCore.isNaN_(c) && c < e) {
                     var f = a.top - d;
                     if (f < 0) {
-                        this.cb(1, 0);
+                        this.ce(1, 0);
                     }
                     else {
-                        this.cb(2, 0);
+                        this.ce(2, 0);
                     }
                 }
                 else {
-                    this.cb(1, 0);
+                    this.ce(1, 0);
                 }
             }
         };
-        ColorEditor.prototype.cb = function (a, b) {
+        ColorEditor.prototype.ce = function (a, b) {
             {
-                var c = this.g.r(true);
-                this.r.cf(c, a, b);
+                var c = this.h.r(true);
+                this.s.cf(c, a, b);
             }
         };
-        ColorEditor.prototype.bf = function () {
+        ColorEditor.prototype.bi = function () {
             var _this = this;
-            if (this.r != null) {
-                this.a.executeDelayed(function () { return _this.r.cc(); }, 0);
+            if (this.s != null) {
+                this.a.executeDelayed(function () { return _this.s.cc(); }, 0);
             }
-            if (this.d != null) {
-                this.d.bg();
+            if (this.e != null) {
+                this.e.bg();
             }
-            this.v = false;
+            this.w = false;
         };
         ColorEditor.prototype.focus = function (a) {
             var _this = this;
             if (a === void 0) {
                 a = false;
             }
-            if (this.q != null) {
-                this.q.a0();
+            if (this.r != null) {
+                this.r.a0();
             }
-            if (!this.r.b6 && this.ak == true) {
-                if (this.v == false) {
-                    if (this.z) {
+            if (!this.s.b6 && this.al == true) {
+                if (this.w == false) {
+                    if (this.aa) {
                         return;
                     }
-                    if (this.ag == false) {
-                        this.b5();
-                        this.v = true;
-                        this.a.executeDelayed(function () { return _this.bl(); }, 0);
+                    if (this.ah == false) {
+                        this.b8();
+                        this.w = true;
+                        this.a.executeDelayed(function () { return _this.bo(); }, 0);
                     }
                     else {
-                        if (this.ak == true && this.ad == false) {
-                            this.b5();
-                            this.v = true;
-                            this.a.executeDelayed(function () { return _this.bl(); }, 0);
+                        if (this.al == true && this.ae == false) {
+                            this.b8();
+                            this.w = true;
+                            this.a.executeDelayed(function () { return _this.bo(); }, 0);
                         }
                     }
                 }
                 else {
-                    this.v = false;
+                    this.w = false;
                 }
             }
         };
-        ColorEditor.prototype.bm = function () {
-            this.v = false;
+        ColorEditor.prototype.bp = function () {
+            this.w = false;
         };
-        ColorEditor.prototype.b8 = function () {
-            if (this.q != null) {
-                this.q.b9();
+        ColorEditor.prototype.cb = function () {
+            if (this.r != null) {
+                this.r.b9();
             }
         };
-        ColorEditor.prototype.bl = function () {
-            this.d.a3();
+        ColorEditor.prototype.bo = function () {
+            this.e.a3();
         };
-        ColorEditor.prototype.bq = function () {
+        ColorEditor.prototype.bt = function () {
             var a = new ColorEditorGotFocusEventArgs();
-            this.bu(a);
+            this.bx(a);
         };
-        ColorEditor.prototype.br = function () {
+        ColorEditor.prototype.bu = function () {
             var a = new ColorEditorLostFocusEventArgs();
-            this.bw(a);
+            this.bz(a);
+        };
+        ColorEditor.prototype.cd = function () {
+        };
+        ColorEditor.prototype.cc = function () {
+        };
+        ColorEditor.prototype.as = function () {
+            return this.b();
         };
-        ColorEditor.prototype.ca = function () {
+        ColorEditor.prototype.ay = function () {
+            var a = this.b();
+            return a.h();
         };
-        ColorEditor.prototype.b9 = function () {
+        ColorEditor.prototype.b = function () {
+            var a = new ColorEditorVisualModelExport();
+            a.b = this.j;
+            a.a = igniteuiWebcomponentsCore.AppearanceHelper.a(this.value);
+            a.c = this.ai;
+            return a;
         };
-        ColorEditor.prototype.bu = function (a) {
+        ColorEditor.prototype.bx = function (a) {
             if (null != this.gotFocus) {
                 this.gotFocus(this, a);
             }
         };
-        ColorEditor.prototype.bw = function (a) {
+        ColorEditor.prototype.bz = function (a) {
             if (null != this.lostFocus) {
                 this.lostFocus(this, a);
             }
         };
         ColorEditor.$t = igniteuiWebcomponentsCore.markType(ColorEditor, 'ColorEditor', igniteuiWebcomponentsCore.Base.$, [igniteuiWebcomponentsCore.INotifyPropertyChanged_$type]);
-        ColorEditor.a5 = "M13.093 6.743a1.074 1.074 0 011.306.251l.237.237-6.4 6.4-.242-.231a1.074 1.074 0 01-.251-1.306c.446-.693 1.553-2.516.515-3.554-1.584-1.585-2.225-.94-3.809-2.528S2.714 3 3.354 2.354s2.073-.489 3.658 1.095.943 2.225 2.527 3.809c1.038 1.042 2.861-.069 3.554-.515zm6.93 5.874L15.31 7.9 8.9 14.31l4.433 4.433c-.039.159-.084.327-.137.508 0 0-.8 2.749.8 2.749s.8-2.749.8-2.749a10.75 10.75 0 01-.272-1.14L16.2 16.44a8.944 8.944 0 00-2.072-3.314s.555-.545 3.323 2.063l.811-.811-1.54-2.5 2.5 1.539z";
-        ColorEditor.n = null;
+        ColorEditor.a8 = "M13.093 6.743a1.074 1.074 0 011.306.251l.237.237-6.4 6.4-.242-.231a1.074 1.074 0 01-.251-1.306c.446-.693 1.553-2.516.515-3.554-1.584-1.585-2.225-.94-3.809-2.528S2.714 3 3.354 2.354s2.073-.489 3.658 1.095.943 2.225 2.527 3.809c1.038 1.042 2.861-.069 3.554-.515zm6.93 5.874L15.31 7.9 8.9 14.31l4.433 4.433c-.039.159-.084.327-.137.508 0 0-.8 2.749.8 2.749s.8-2.749.8-2.749a10.75 10.75 0 01-.272-1.14L16.2 16.44a8.944 8.944 0 00-2.072-3.314s.555-.545 3.323 2.063l.811-.811-1.54-2.5 2.5 1.539z";
+        ColorEditor.o = null;
         return ColorEditor;
     }(igniteuiWebcomponentsCore.Base));
     /**
@@ -40499,10 +40634,10 @@
              * Gets or Sets the property name that contains the label.
             */
             get: function () {
-                return this.i.az;
+                return this.i.a2;
             },
             set: function (v) {
-                this.i.az = v;
+                this.i.a2 = v;
             },
             enumerable: false,
             configurable: true
@@ -40512,11 +40647,11 @@
              * Gets or sets the color to use for the text.
             */
             get: function () {
-                return igniteuiWebcomponentsCore.brushToString(this.i.cn);
+                return igniteuiWebcomponentsCore.brushToString(this.i.cq);
             },
             set: function (v) {
-                this.i.cn = igniteuiWebcomponentsCore.stringToBrush(v);
-                this._a("labelTextColor", igniteuiWebcomponentsCore.brushToString(this.i.cn));
+                this.i.cq = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("labelTextColor", igniteuiWebcomponentsCore.brushToString(this.i.cq));
             },
             enumerable: false,
             configurable: true
@@ -40526,16 +40661,16 @@
              * Gets or sets the font to use for the input.
             */
             get: function () {
-                if (this.i.o == null) {
+                if (this.i.p == null) {
                     return null;
                 }
-                return this.i.o.fontString;
+                return this.i.p.fontString;
             },
             set: function (v) {
                 var fi = new igniteuiWebcomponentsCore.FontInfo();
                 fi.fontString = v;
-                this.i.o = fi;
-                this._a("labelTextStyle", this.i.o != null ? this.i.o.fontString : "");
+                this.i.p = fi;
+                this._a("labelTextStyle", this.i.p != null ? this.i.p.fontString : "");
             },
             enumerable: false,
             configurable: true
@@ -40545,11 +40680,11 @@
              * Gets or sets the display density to use for the date pcicker.
             */
             get: function () {
-                return this.i.k;
+                return this.i.l;
             },
             set: function (v) {
-                this.i.k = igniteuiWebcomponentsCore.ensureEnum(igniteuiWebcomponentsCore.ControlDisplayDensity_$type, v);
-                this._a("density", igniteuiWebcomponentsCore.enumToString(igniteuiWebcomponentsCore.ControlDisplayDensity_$type, this.i.k));
+                this.i.l = igniteuiWebcomponentsCore.ensureEnum(igniteuiWebcomponentsCore.ControlDisplayDensity_$type, v);
+                this._a("density", igniteuiWebcomponentsCore.enumToString(igniteuiWebcomponentsCore.ControlDisplayDensity_$type, this.i.l));
             },
             enumerable: false,
             configurable: true
@@ -40559,11 +40694,11 @@
              * Gets or sets the base built in theme to use for the date picker.
             */
             get: function () {
-                return this.i.i;
+                return this.i.j;
             },
             set: function (v) {
-                this.i.i = igniteuiWebcomponentsCore.ensureEnum(igniteuiWebcomponentsCore.BaseControlTheme_$type, v);
-                this._a("baseTheme", igniteuiWebcomponentsCore.enumToString(igniteuiWebcomponentsCore.BaseControlTheme_$type, this.i.i));
+                this.i.j = igniteuiWebcomponentsCore.ensureEnum(igniteuiWebcomponentsCore.BaseControlTheme_$type, v);
+                this._a("baseTheme", igniteuiWebcomponentsCore.enumToString(igniteuiWebcomponentsCore.BaseControlTheme_$type, this.i.j));
             },
             enumerable: false,
             configurable: true
@@ -40573,16 +40708,16 @@
              * Gets or sets the font to use for the combobox.
             */
             get: function () {
-                if (this.i.p == null) {
+                if (this.i.q == null) {
                     return null;
                 }
-                return this.i.p.fontString;
+                return this.i.q.fontString;
             },
             set: function (v) {
                 var fi = new igniteuiWebcomponentsCore.FontInfo();
                 fi.fontString = v;
-                this.i.p = fi;
-                this._a("textStyle", this.i.p != null ? this.i.p.fontString : "");
+                this.i.q = fi;
+                this._a("textStyle", this.i.q != null ? this.i.q.fontString : "");
             },
             enumerable: false,
             configurable: true
@@ -40592,11 +40727,11 @@
              * Gets or Sets the text color
             */
             get: function () {
-                return igniteuiWebcomponentsCore.brushToString(this.i.co);
+                return igniteuiWebcomponentsCore.brushToString(this.i.cr);
             },
             set: function (v) {
-                this.i.co = igniteuiWebcomponentsCore.stringToBrush(v);
-                this._a("textColor", igniteuiWebcomponentsCore.brushToString(this.i.co));
+                this.i.cr = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("textColor", igniteuiWebcomponentsCore.brushToString(this.i.cr));
             },
             enumerable: false,
             configurable: true
@@ -40606,11 +40741,11 @@
              * Gets or Sets the text color
             */
             get: function () {
-                return igniteuiWebcomponentsCore.brushToString(this.i.cm);
+                return igniteuiWebcomponentsCore.brushToString(this.i.cp);
             },
             set: function (v) {
-                this.i.cm = igniteuiWebcomponentsCore.stringToBrush(v);
-                this._a("iconColor", igniteuiWebcomponentsCore.brushToString(this.i.cm));
+                this.i.cp = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("iconColor", igniteuiWebcomponentsCore.brushToString(this.i.cp));
             },
             enumerable: false,
             configurable: true
@@ -40620,11 +40755,11 @@
              * Gets or sets the ShowClearButton property to detirmine if the clear button is shown
             */
             get: function () {
-                return this.i.am;
+                return this.i.an;
             },
             set: function (v) {
-                this.i.am = igniteuiWebcomponentsCore.ensureBool(v);
-                this._a("showClearButton", this.i.am);
+                this.i.an = igniteuiWebcomponentsCore.ensureBool(v);
+                this._a("showClearButton", this.i.an);
             },
             enumerable: false,
             configurable: true
@@ -40634,11 +40769,11 @@
              * Gets or sets the AllowTextInput property to detirmine if entering text into the input is allowed
             */
             get: function () {
-                return this.i.ag;
+                return this.i.ah;
             },
             set: function (v) {
-                this.i.ag = igniteuiWebcomponentsCore.ensureBool(v);
-                this._a("allowTextInput", this.i.ag);
+                this.i.ah = igniteuiWebcomponentsCore.ensureBool(v);
+                this._a("allowTextInput", this.i.ah);
             },
             enumerable: false,
             configurable: true
@@ -40648,22 +40783,22 @@
              * Gets or sets the AllowTextInput property to detirmine if entering text into the input is allowed
             */
             get: function () {
-                return this.i.ak;
+                return this.i.al;
             },
             set: function (v) {
-                this.i.ak = igniteuiWebcomponentsCore.ensureBool(v);
-                this._a("openOnFocus", this.i.ak);
+                this.i.al = igniteuiWebcomponentsCore.ensureBool(v);
+                this._a("openOnFocus", this.i.al);
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(IgcColorEditorComponent.prototype, "isDisabled", {
             get: function () {
-                return this.i.ah;
+                return this.i.ai;
             },
             set: function (v) {
-                this.i.ah = igniteuiWebcomponentsCore.ensureBool(v);
-                this._a("isDisabled", this.i.ah);
+                this.i.ai = igniteuiWebcomponentsCore.ensureBool(v);
+                this._a("isDisabled", this.i.ai);
             },
             enumerable: false,
             configurable: true
@@ -40673,11 +40808,11 @@
              * Indicates that the editor dropdown will position itself relative to the window instead of the document.
             */
             get: function () {
-                return this.i.ai;
+                return this.i.aj;
             },
             set: function (v) {
-                this.i.ai = igniteuiWebcomponentsCore.ensureBool(v);
-                this._a("isFixed", this.i.ai);
+                this.i.aj = igniteuiWebcomponentsCore.ensureBool(v);
+                this._a("isFixed", this.i.aj);
             },
             enumerable: false,
             configurable: true
@@ -40687,11 +40822,11 @@
              * Indicates that the dropdown should open as a child of the color editor.
             */
             get: function () {
-                return this.i.aj;
+                return this.i.ak;
             },
             set: function (v) {
-                this.i.aj = igniteuiWebcomponentsCore.ensureBool(v);
-                this._a("openAsChild", this.i.aj);
+                this.i.ak = igniteuiWebcomponentsCore.ensureBool(v);
+                this._a("openAsChild", this.i.ak);
             },
             enumerable: false,
             configurable: true
@@ -40701,11 +40836,11 @@
              * Indicates that the dropdown will place itself into the browser top layer.
             */
             get: function () {
-                return this.i.an;
+                return this.i.ao;
             },
             set: function (v) {
-                this.i.an = igniteuiWebcomponentsCore.ensureBool(v);
-                this._a("useTopLayer", this.i.an);
+                this.i.ao = igniteuiWebcomponentsCore.ensureBool(v);
+                this._a("useTopLayer", this.i.ao);
             },
             enumerable: false,
             configurable: true
@@ -40776,7 +40911,23 @@
             this._inStyling = false;
         };
         IgcColorEditorComponent.prototype.select = function () {
-            this.i.b8();
+            this.i.cb();
+        };
+        /**
+         * Exports visual information about the current state of the color editor.
+        
+        */
+        IgcColorEditorComponent.prototype.exportVisualModel = function () {
+            var iv = this.i.as();
+            return (iv);
+        };
+        /**
+         * Returns a serialized copy of the exported visual model
+        
+        */
+        IgcColorEditorComponent.prototype.exportSerializedVisualModel = function () {
+            var iv = this.i.ay();
+            return (iv);
         };
         Object.defineProperty(IgcColorEditorComponent.prototype, "valueChanged", {
             /**
@@ -46295,6 +46446,47 @@
      */
     var IconViewType_$type = /*@__PURE__*/ igniteuiWebcomponentsCore.markEnum('IconViewType', 'SVG,0|SVGPath,1|SVGPaths,2|DataURL,3|Source,4|None,5');
 
+    /*
+    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.
+    */
+    /**
+     * @hidden
+     */
+    var CheckboxListVisualModelExport = /** @class */ /*@__PURE__*/ (function (_super) {
+        tslib.__extends(CheckboxListVisualModelExport, _super);
+        function CheckboxListVisualModelExport() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.f = 0;
+            _this.g = 0;
+            _this.h = 0;
+            _this.e = 0;
+            _this.c = 0;
+            _this.b = null;
+            _this.a = null;
+            _this.d = 0;
+            return _this;
+        }
+        CheckboxListVisualModelExport.prototype.i = function () {
+            var a = new igniteuiWebcomponentsCore.StringBuilder(0);
+            a.l("{");
+            a.l("left : " + this.f + ", ");
+            a.l("top : " + this.g + ", ");
+            a.l("height : " + this.e + ", ");
+            a.l("width : " + this.h + ", ");
+            a.l("baseTheme : " + igniteuiWebcomponentsCore.enumGetBox(igniteuiWebcomponentsCore.BaseControlTheme_$type, this.c) + ", ");
+            a.l("backgroundColor : " + this.b.serialize() + ", ");
+            a.l("actualSelectAllCaptionTextColor : " + this.a.serialize() + ", ");
+            a.l("actualRowHeight : " + this.d);
+            a.l("}");
+            return a.toString();
+        };
+        CheckboxListVisualModelExport.$t = igniteuiWebcomponentsCore.markType(CheckboxListVisualModelExport, 'CheckboxListVisualModelExport');
+        return CheckboxListVisualModelExport;
+    }(igniteuiWebcomponentsCore.Base));
+
     /*
     THIS INFRAGISTICS ULTIMATE SOFTWARE LICENSE  AGREEMENT ("AGREEMENT") LOCATED HERE:
     https://www.infragistics.com/legal/license/igultimate-la
@@ -46370,6 +46562,7 @@
     exports.CalendarVisualModelExport = CalendarVisualModelExport;
     exports.CheckboxChangeEventArgs = CheckboxChangeEventArgs;
     exports.CheckboxLabelPosition_$type = CheckboxLabelPosition_$type;
+    exports.CheckboxListVisualModelExport = CheckboxListVisualModelExport;
     exports.CheckboxView = CheckboxView;
     exports.CheckboxVisualModelExport = CheckboxVisualModelExport;
     exports.ColorEditor = ColorEditor;
@@ -46381,6 +46574,7 @@
     exports.ColorEditorPanelSelectedValueChangedEventArgs = ColorEditorPanelSelectedValueChangedEventArgs;
     exports.ColorEditorPanelView = ColorEditorPanelView;
     exports.ColorEditorView = ColorEditorView;
+    exports.ColorEditorVisualModelExport = ColorEditorVisualModelExport;
     exports.DateFormats = DateFormats;
     exports.DateFormats_$type = DateFormats_$type;
     exports.DatePickerView = DatePickerView;