igniteui-angular-inputs 20.1.0-beta.0 → 20.2.0-beta.0

package/fesm5/igniteui-angular-inputs.js

@@ -7,7 +7,7 @@
   
 import * as i0 from '@angular/core';
 import { EventEmitter, ɵɵngDeclareFactory, Renderer2, ViewContainerRef, NgZone, Injector, ComponentFactoryResolver, ɵɵFactoryTarget, ɵɵngDeclareComponent, ElementRef, ChangeDetectionStrategy, ɵɵngDeclareClassMetadata, Component, ViewChild, Input, Output, ɵɵngDeclareNgModule, ɵɵngDeclareInjector, NgModule, TemplateRef, HostBinding, ContentChildren } from '@angular/core';
-import { markEnum, markType, Base, StringBuilder, List$1, Delegate_$type, fromEnum, runOn, NativeUI, ScaleTransform, KeyFrameAnimationFactory, AnimationKeyFrameEffect, LinkedList$1, IKeyFrameAnimation_$type, PropertyChangedEventArgs, AnimationKeyFrameProperty, AnimationKeyFrameEffectTiming, AppearanceHelper, INotifyPropertyChanged_$type, BrushUtil, typeGetValue, EnumUtil, ElevationMode_$type, EventArgs, stringIsNullOrEmpty, isNaN_, IVisualData_$type, enumGetBox, CornerRadius, MouseEventArgs, FocusEventArgs, Thickness, ControlDisplayDensity_$type, BaseControlTheme_$type, HorizontalAlignment_$type, VerticalAlignment_$type, FontUtil, Dictionary$2, String_$type, Brush, DomWrapper_$type, Tuple$2, SVGNode, FastIterationDictionary$2, typeCast, PrimitiveVisualData, Ellipse, EllipseVisualData, Rectangle, RectangleVisualData, Line, LineVisualData, Path, PathVisualData, DoubleCollection, LegendItemHelper, stringStartsWith, trimStart, IIcon_$type, dateMinValue, dateGetMonth, parseBool, truncate, dateNow, dateMaxValue, dateAddYears, ObservableCollection$1, dateFromValues, delegateRemove, SRProvider, dateGetDate, stringIsNullOrWhiteSpace, delegateCombine, dateAddDays, Number_$type, dateAddMonths, timeSpanTotalDays, intDivide, NamePatcher, AngularRenderer, ensureEnum, brushToString, stringToBrush, ensureBool, FontInfo, toSpinal, initializePropertiesFromCss, TypeRegistrar, PortalManager, IgxFocusEventArgs, IgxChildContentModule, IgxChildContentDynamicModule, fromBrushCollection, toBrushCollection, Localization, HashSet$1, stringReplace, TransformGroup, TranslateTransform, MouseButtonEventArgs, Point_$type, KeyEventArgs, toNullable, fromEn, DeviceUtils, Rect, stringContains, stringSplit, Popup, IgxKeyEventArgs, SyncableObservableCollection$2, IgCollection, CollectionAdapter, NotifyCollectionChangedAction, NativeUIElementBridge, NativeUIMouseEventArgs, NativeUIKeyEventArgs, NativeUIInputChangingEventArgs, NativeUIFocusEventArgs, NativeUIClickedEventArgs, NativeUIComponentHorizontalAlignment_$type, NativeUIInputType_$type, NativeUIInputDisplayType_$type, NativeUIDisplayDensity_$type, INativeUIInputBridge_$type, NativeUIButtonClickedEventArgs, NativeUIButtonDisplayType_$type, NativeUIComponent, Type, Color, PathGeometry, PathFigure, PolyLineSegment, LineSegment, EllipseGeometry, PropertyUpdatedEventArgs, TextBlock, RenderingContext, CanvasViewRenderer, CanvasGestureDOMEventProxy, Size, NotImplementedException, NativeUISliderValueChangedEventArgs, NativeUISliderOrientation_$type, NativeUIButton, NativeUIButtonGroupSelectionChangedEventArgs, NativeUIButtonGroupDisplayType_$type, INativeUIButtonGroupBridge_$type, RotateTransform, NativeUICheckboxChangeEventArgs, SvgIconRegistry, NativeUIPopupMeasuringContentEventArgs, NativeUIPopupOpenedEventArgs, NativeUIPopupClosedEventArgs, NativeUIPopupPointerPosition_$type, NativeUIPopupAnimationType_$type, INativeUIPopupBridge_$type, NativeUIInput, NativeUISlider, NativeUIButtonGroup, NativeUIColorEditor, NativeUICheckbox, NativeUIIcon, NativeUIPopup, INativeUIElementFactory_$type, NativeUIColorEditorValueChangedEventArgs, DOMExecutionContext, NativeUIInputsFactory, NativeUIWindow, NativeUIContent, ColorUtil, IgxPropertyUpdatedEventArgs, SyncableObservableCollection$1, fromRect, toRect } from 'igniteui-angular-core';
+import { markEnum, markType, Base, StringBuilder, List$1, Delegate_$type, fromEnum, runOn, NativeUI, ScaleTransform, KeyFrameAnimationFactory, AnimationKeyFrameEffect, LinkedList$1, IKeyFrameAnimation_$type, PropertyChangedEventArgs, AnimationKeyFrameProperty, AnimationKeyFrameEffectTiming, AppearanceHelper, INotifyPropertyChanged_$type, BrushUtil, typeGetValue, EnumUtil, ElevationMode_$type, EventArgs, stringIsNullOrEmpty, isNaN_, IVisualData_$type, enumGetBox, CornerRadius, MouseEventArgs, FocusEventArgs, Thickness, ControlDisplayDensity_$type, BaseControlTheme_$type, HorizontalAlignment_$type, VerticalAlignment_$type, FontUtil, Dictionary$2, String_$type, Brush, DomWrapper_$type, Tuple$2, SVGNode, FastIterationDictionary$2, typeCast, Size, PrimitiveVisualData, Ellipse, EllipseVisualData, Rectangle, RectangleVisualData, Line, LineVisualData, Path, PathVisualData, DoubleCollection, LegendItemHelper, stringStartsWith, trimStart, IIcon_$type, dateMinValue, dateGetMonth, parseBool, truncate, dateNow, dateMaxValue, dateAddYears, ObservableCollection$1, dateFromValues, delegateRemove, SRProvider, dateGetDate, stringIsNullOrWhiteSpace, delegateCombine, dateAddDays, Number_$type, dateAddMonths, timeSpanTotalDays, intDivide, NamePatcher, AngularRenderer, ensureEnum, brushToString, stringToBrush, ensureBool, FontInfo, toSpinal, initializePropertiesFromCss, TypeRegistrar, PortalManager, IgxFocusEventArgs, IgxChildContentModule, IgxChildContentDynamicModule, fromBrushCollection, toBrushCollection, Localization, HashSet$1, stringReplace, TransformGroup, TranslateTransform, MouseButtonEventArgs, Point_$type, KeyEventArgs, toNullable, fromEn, DeviceUtils, Rect, stringContains, stringSplit, Popup, IgxKeyEventArgs, SyncableObservableCollection$2, IgCollection, CollectionAdapter, NotifyCollectionChangedAction, NativeUIElementBridge, NativeUIMouseEventArgs, NativeUIKeyEventArgs, NativeUIInputChangingEventArgs, NativeUIFocusEventArgs, NativeUIClickedEventArgs, NativeUIComponentHorizontalAlignment_$type, NativeUIInputType_$type, NativeUIInputDisplayType_$type, NativeUIDisplayDensity_$type, INativeUIInputBridge_$type, NativeUIButtonClickedEventArgs, NativeUIButtonDisplayType_$type, NativeUIComponent, Type, Color, PathGeometry, PathFigure, PolyLineSegment, LineSegment, EllipseGeometry, PropertyUpdatedEventArgs, TextBlock, RenderingContext, CanvasViewRenderer, CanvasGestureDOMEventProxy, NotImplementedException, NativeUISliderValueChangedEventArgs, NativeUISliderOrientation_$type, NativeUIButton, NativeUIButtonGroupSelectionChangedEventArgs, NativeUIButtonGroupDisplayType_$type, INativeUIButtonGroupBridge_$type, RotateTransform, NativeUICheckboxChangeEventArgs, SvgIconRegistry, NativeUIPopupMeasuringContentEventArgs, NativeUIPopupOpenedEventArgs, NativeUIPopupClosedEventArgs, NativeUIPopupPointerPosition_$type, NativeUIPopupAnimationType_$type, INativeUIPopupBridge_$type, NativeUIInput, NativeUISlider, NativeUIButtonGroup, NativeUIColorEditor, NativeUICheckbox, NativeUIIcon, NativeUIPopup, INativeUIElementFactory_$type, NativeUIColorEditorValueChangedEventArgs, DOMExecutionContext, NativeUIInputsFactory, NativeUIWindow, NativeUIContent, ColorUtil, IgxPropertyUpdatedEventArgs, SyncableObservableCollection$1, fromRect, toRect } from 'igniteui-angular-core';
 import { __extends, __values } from 'tslib';
 import { CommonModule } from '@angular/common';
 
@@ -1050,46 +1050,46 @@ var ButtonView = /** @class */ /*@__PURE__*/ (function (_super) {
     __extends(ButtonView, _super);
     function ButtonView() {
         var _this = _super.call(this) || this;
-        _this.b = null;
-        _this.k = null;
-        _this.d = null;
-        _this.h = new List$1(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 List$1(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 = __values(fromEnum(this.h)), _c = _b.next(); !_c.done; _c = _b.next()) {
+                for (var _b = __values(fromEnum(this.i)), _c = _b.next(); !_c.done; _c = _b.next()) {
                     var b = _c.value;
                     b();
                 }
@@ -1107,46 +1107,46 @@ var ButtonView = /** @class */ /*@__PURE__*/ (function (_super) {
                         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);
-        NativeUI.o(this.n, this.b.kz);
-        this.n.setAttribute("id", this.b.hy);
-        this.ax();
-        this.h.add(c.listen("change", runOn(this, this.z)));
-        this.h.add(c.listen("click", runOn(this, this.aa)));
-        this.h.add(c.listen("focus", runOn(this, this.ab)));
-        this.h.add(c.listen("blur", runOn(this, this.y)));
-        this.h.add(this.k.rootWrapper.listen("mouseenter", runOn(this, this.v)));
-        this.h.add(this.k.rootWrapper.listen("mouseleave", runOn(this, this.w)));
-        this.h.add(this.k.rootWrapper.listen("mousedown", runOn(this, this.u)));
-        this.h.add(this.k.rootWrapper.listen("mouseup", runOn(this, this.x)));
-        this.h.add(this.k.rootWrapper.listen("focusin", runOn(this, this.ac)));
-        this.h.add(this.k.rootWrapper.listen("focusout", 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);
+        NativeUI.o(this.o, this.c.kz);
+        this.o.setAttribute("id", this.c.hy);
+        this.ay();
+        this.i.add(c.listen("change", runOn(this, this.aa)));
+        this.i.add(c.listen("click", runOn(this, this.ab)));
+        this.i.add(c.listen("focus", runOn(this, this.ac)));
+        this.i.add(c.listen("blur", runOn(this, this.z)));
+        this.i.add(this.l.rootWrapper.listen("mouseenter", runOn(this, this.w)));
+        this.i.add(this.l.rootWrapper.listen("mouseleave", runOn(this, this.x)));
+        this.i.add(this.l.rootWrapper.listen("mousedown", runOn(this, this.v)));
+        this.i.add(this.l.rootWrapper.listen("mouseup", runOn(this, this.y)));
+        this.i.add(this.l.rootWrapper.listen("focusin", runOn(this, this.ad)));
+        this.i.add(this.l.rootWrapper.listen("focusout", 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%");
@@ -1156,40 +1156,40 @@ var ButtonView = /** @class */ /*@__PURE__*/ (function (_super) {
         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", 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", 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";
@@ -1203,7 +1203,7 @@ var ButtonView = /** @class */ /*@__PURE__*/ (function (_super) {
         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";
@@ -1236,130 +1236,130 @@ var ButtonView = /** @class */ /*@__PURE__*/ (function (_super) {
                 c = "1rem";
                 break;
         }
-        if (!isNaN_(this.b.bm) && !isNaN_(this.b.bo) && !isNaN_(this.b.bn) && !isNaN_(this.b.bl)) {
-            m = this.b.bo + "px " + this.b.bn + "px " + this.b.bl + "px " + this.b.bm + "px";
+        if (!isNaN_(this.c.bm) && !isNaN_(this.c.bo) && !isNaN_(this.c.bn) && !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 (!isNaN_(this.b.bj) && this.b.bj > 0) {
-            this.n.setStyleProperty("border-style", "solid");
+        this.l.rootWrapper.setStyleProperty("height", "auto");
+        if (!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 (!isNaN_(this.j)) {
-            this.n.setStyleProperty("min-width", this.j.toString() + "px");
+        if (!isNaN_(this.k)) {
+            this.o.setStyleProperty("min-width", this.k.toString() + "px");
         }
-        if (!isNaN_(this.i)) {
-            this.n.setStyleProperty("min-height", this.i.toString() + "px");
+        if (!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) {
@@ -1368,114 +1368,114 @@ var ButtonView = /** @class */ /*@__PURE__*/ (function (_super) {
             ;
         }
     };
-    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 (KeyFrameAnimationFactory.h == null) {
-            KeyFrameAnimationFactory.h = this.k;
+            KeyFrameAnimationFactory.h = this.l;
         }
     };
-    ButtonView.prototype.ai = function () {
-        this.e = true;
-        this.h.add(this.n.listen("change", runOn(this, this.z)));
-        this.h.add(this.n.listen("click", runOn(this, this.aa)));
-        this.h.add(this.n.listen("focus", runOn(this, this.ab)));
-        this.h.add(this.n.listen("blur", runOn(this, this.y)));
-        this.h.add(this.m.listen("click", runOn(this, this.t)));
-        this.h.add(this.n.listen("mouseenter", runOn(this, this.v)));
-        this.h.add(this.n.listen("mouseleave", runOn(this, this.w)));
-        this.h.add(this.n.listen("mousedown", runOn(this, this.u)));
-        this.h.add(this.n.listen("mouseup", runOn(this, this.x)));
-        this.h.add(this.n.listen("focusin", runOn(this, this.ac)));
-        this.h.add(this.n.listen("focusout", runOn(this, this.ad)));
-    };
-    ButtonView.prototype.al = function () {
+    ButtonView.prototype.aj = function () {
+        this.f = true;
+        this.i.add(this.o.listen("change", runOn(this, this.aa)));
+        this.i.add(this.o.listen("click", runOn(this, this.ab)));
+        this.i.add(this.o.listen("focus", runOn(this, this.ac)));
+        this.i.add(this.o.listen("blur", runOn(this, this.z)));
+        this.i.add(this.n.listen("click", runOn(this, this.u)));
+        this.i.add(this.o.listen("mouseenter", runOn(this, this.w)));
+        this.i.add(this.o.listen("mouseleave", runOn(this, this.x)));
+        this.i.add(this.o.listen("mousedown", runOn(this, this.v)));
+        this.i.add(this.o.listen("mouseup", runOn(this, this.y)));
+        this.i.add(this.o.listen("focusin", runOn(this, this.ad)));
+        this.i.add(this.o.listen("focusout", runOn(this, this.ae)));
+    };
+    ButtonView.prototype.am = function () {
         var e_2, _a;
-        this.e = false;
+        this.f = false;
         try {
-            for (var _b = __values(fromEnum(this.h)), _c = _b.next(); !_c.done; _c = _b.next()) {
+            for (var _b = __values(fromEnum(this.i)), _c = _b.next(); !_c.done; _c = _b.next()) {
                 var a = _c.value;
                 a();
             }
@@ -1493,39 +1493,39 @@ var ButtonView = /** @class */ /*@__PURE__*/ (function (_super) {
                     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);
@@ -1533,6 +1533,12 @@ var ButtonView = /** @class */ /*@__PURE__*/ (function (_super) {
         c[1] = b;
         return c;
     };
+    ButtonView.prototype.a = function () {
+        var a = new Array(2);
+        a[0] = NativeUI.k(this.r);
+        a[1] = NativeUI.d(this.r);
+        return a;
+    };
     ButtonView.$t = markType(ButtonView, 'ButtonView');
     return ButtonView;
 }(Base));
@@ -1804,9 +1810,9 @@ var XButton = /** @class */ /*@__PURE__*/ (function (_super) {
         _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", {
@@ -1942,7 +1948,7 @@ var XButton = /** @class */ /*@__PURE__*/ (function (_super) {
             case "IsDisabled":
                 this.as = this.disabled || this.aw;
                 this.kq();
-                this.view.as();
+                this.view.at();
                 this.kp();
                 break;
             case "DisableRipple":
@@ -1954,7 +1960,7 @@ var XButton = /** @class */ /*@__PURE__*/ (function (_super) {
                 this.kp();
                 break;
             case "ActualDisableRipple":
-                this.view.am();
+                this.view.an();
                 break;
             case "ActualBackgroundColor":
             case "ActualDisabledBackgroundColor":
@@ -1977,11 +1983,11 @@ var XButton = /** @class */ /*@__PURE__*/ (function (_super) {
                 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;
@@ -1990,43 +1996,43 @@ var XButton = /** @class */ /*@__PURE__*/ (function (_super) {
             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;
         }
     };
@@ -2210,7 +2216,7 @@ var XButton = /** @class */ /*@__PURE__*/ (function (_super) {
         }
     };
     XButton.prototype.kp = function () {
-        var a = this.view.q;
+        var a = this.view.r;
         if (a == null) {
             return;
         }
@@ -2220,17 +2226,17 @@ var XButton = /** @class */ /*@__PURE__*/ (function (_super) {
             NativeUI.p(a, new 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) {
@@ -2247,26 +2253,26 @@ var XButton = /** @class */ /*@__PURE__*/ (function (_super) {
                 NativeUI.m(a, this.no);
             }
         }
-        this.view.ay(this.ny, BrushUtil.j(0, 0, 0, 0));
+        this.view.az(this.ny, BrushUtil.j(0, 0, 0, 0));
         if (this.aa != null) {
-            this.view.a1(this.aa);
+            this.view.a2(this.aa);
         }
         if (this.disabled) {
-            NativeUI.q(this.view.s, this.ns);
-            NativeUI.r(this.view.s, this.ns);
+            NativeUI.q(this.view.t, this.ns);
+            NativeUI.r(this.view.t, this.ns);
         }
         else if (this.focused && this.a2) {
-            NativeUI.q(this.view.s, this.nu);
-            NativeUI.r(this.view.s, this.nu);
+            NativeUI.q(this.view.t, this.nu);
+            NativeUI.r(this.view.t, this.nu);
         }
         else {
             if (this.a3 && !this.au) {
-                NativeUI.q(this.view.s, this.nw);
-                NativeUI.r(this.view.s, this.nw);
+                NativeUI.q(this.view.t, this.nw);
+                NativeUI.r(this.view.t, this.nw);
             }
             else {
-                NativeUI.q(this.view.s, this.nz);
-                NativeUI.r(this.view.s, this.nz);
+                NativeUI.q(this.view.t, this.nz);
+                NativeUI.r(this.view.t, this.nz);
             }
         }
     };
@@ -4611,7 +4617,7 @@ var XButton = /** @class */ /*@__PURE__*/ (function (_super) {
     });
     XButton.prototype.kl = function () {
         this.j8();
-        this.view.ay(this.ny, BrushUtil.j(0, 0, 0, 0));
+        this.view.az(this.ny, BrushUtil.j(0, 0, 0, 0));
         this.kp();
     };
     Object.defineProperty(XButton.prototype, "a", {
@@ -4625,25 +4631,25 @@ var XButton = /** @class */ /*@__PURE__*/ (function (_super) {
         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();
@@ -4653,14 +4659,15 @@ var XButton = /** @class */ /*@__PURE__*/ (function (_super) {
         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 = NativeUI.d(a);
-        c.t = 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 = AppearanceHelper.a(NativeUI.ak(a));
@@ -4678,44 +4685,44 @@ var XButton = /** @class */ /*@__PURE__*/ (function (_super) {
         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 = 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 = 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 (!isNaN_(e.f)) {
-                c.r = e.f;
+            if (!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 = markType(XButton, 'XButton', Base.$, [INotifyPropertyChanged_$type]);
     XButton.m = 2;
@@ -5533,6 +5540,9 @@ var IconView = /** @class */ /*@__PURE__*/ (function (_super) {
             this.v.rootWrapper.setStyleProperty("font", a.fontString);
         }
     };
+    IconView.prototype.a2 = function () {
+        return new 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);
@@ -6706,38 +6716,39 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
         var b = this.view.b();
         a.i = b[0];
         a.g = b[1];
-        a.f = NativeUI.d(this.view.aa);
-        a.j = 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 = 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 = 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 (!isNaN_(c.f)) {
-                a.h = c.f;
+            if (!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;
@@ -15380,8 +15391,8 @@ var InputGroupVisualModelExport = /** @class */ /*@__PURE__*/ (function (_super)
             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 : [");
@@ -15494,61 +15505,63 @@ var InputVisualModelExport = /** @class */ /*@__PURE__*/ (function (_super) {
     __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 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 (!stringIsNullOrEmpty(this.q)) {
-            a.l("textStyleFontStyle : \"" + this.q + "\", ");
+        if (!stringIsNullOrEmpty(this.s)) {
+            a.l("textStyleFontStyle : \"" + this.s + "\", ");
         }
-        if (!stringIsNullOrEmpty(this.r)) {
-            a.l("textStyleFontVariant : \"" + this.r + "\", ");
+        if (!stringIsNullOrEmpty(this.t)) {
+            a.l("textStyleFontVariant : \"" + this.t + "\", ");
         }
-        if (!stringIsNullOrEmpty(this.s)) {
-            a.l("textStyleFontWeight : \"" + this.s + "\", ");
+        if (!stringIsNullOrEmpty(this.u)) {
+            a.l("textStyleFontWeight : \"" + this.u + "\", ");
         }
-        if (!stringIsNullOrEmpty(this.o)) {
-            a.l("textStyleFontFamily : \"" + this.o + "\", ");
+        if (!stringIsNullOrEmpty(this.q)) {
+            a.l("textStyleFontFamily : \"" + this.q + "\", ");
         }
-        if (!stringIsNullOrEmpty(this.p)) {
-            a.l("textStyleFontStretch : \"" + this.p + "\", ");
+        if (!stringIsNullOrEmpty(this.r)) {
+            a.l("textStyleFontStretch : \"" + this.r + "\", ");
         }
-        if (!isNaN_(this.g)) {
-            a.l("textStyleFontSize : " + this.g + ", ");
+        if (!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();
     };
@@ -16792,50 +16805,50 @@ var InputView = /** @class */ /*@__PURE__*/ (function (_super) {
     __extends(InputView, _super);
     function InputView() {
         var _this = _super.call(this) || this;
-        _this.b = null;
-        _this.l = null;
         _this.c = null;
-        _this.j = new List$1(Delegate_$type, 0);
-        _this.g = false;
-        _this.f = false;
-        _this.r = null;
-        _this.d = true;
         _this.m = null;
-        _this.n = null;
+        _this.d = null;
+        _this.k = new List$1(Delegate_$type, 0);
+        _this.h = false;
         _this.g = false;
+        _this.s = null;
+        _this.e = true;
+        _this.n = null;
+        _this.o = null;
+        _this.h = false;
         return _this;
     }
-    InputView.prototype.as = function () {
+    InputView.prototype.at = function () {
     };
-    InputView.prototype.h = function () {
+    InputView.prototype.i = function () {
         return true;
     };
-    Object.defineProperty(InputView.prototype, "q", {
+    Object.defineProperty(InputView.prototype, "r", {
         get: function () {
-            return this.m;
+            return this.n;
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(InputView.prototype, "bd", {
+    Object.defineProperty(InputView.prototype, "be", {
         get: function () {
             return null;
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(InputView.prototype, "i", {
+    Object.defineProperty(InputView.prototype, "j", {
         get: function () {
             return true;
         },
         enumerable: false,
         configurable: true
     });
-    InputView.prototype.ap = function (a) {
+    InputView.prototype.aq = function (a) {
         var e_9, _a;
         if (a == null) {
             try {
-                for (var _b = __values(fromEnum(this.j)), _c = _b.next(); !_c.done; _c = _b.next()) {
+                for (var _b = __values(fromEnum(this.k)), _c = _b.next(); !_c.done; _c = _b.next()) {
                     var b = _c.value;
                     b();
                 }
@@ -16853,12 +16866,12 @@ var InputView = /** @class */ /*@__PURE__*/ (function (_super) {
                         throw e_9.error;
                 }
             }
-            this.j.clear();
+            this.k.clear();
         }
-        this.l = a;
-        this.l.rootWrapper.setStyleProperty("display", "inline-block");
-        var c = this.l.createElement("input");
-        c.setAttribute("type", this.b.b8);
+        this.m = a;
+        this.m.rootWrapper.setStyleProperty("display", "inline-block");
+        var c = this.m.createElement("input");
+        c.setAttribute("type", this.c.b8);
         c.setStyleProperty("position", "relative");
         c.setStyleProperty("box-sizing", "border-box");
         c.setStyleProperty("display", "inline-block");
@@ -16877,75 +16890,75 @@ var InputView = /** @class */ /*@__PURE__*/ (function (_super) {
         c.setStyleProperty("background-attachment", "initial");
         c.setStyleProperty("background-origin", "initial");
         c.setStyleProperty("background-color", "transparent");
-        NativeUI.q(c, this.b.d4);
+        NativeUI.q(c, this.c.d4);
         c.setStyleProperty("outline-style", "none");
         c.setStyleProperty("box-shadow", "none");
         c.setStyleProperty("border-top", "0.1875rem solid transparent");
         c.setStyleProperty("padding-bottom", "0.1875rem");
-        c.setStyleProperty("text-align", this.t(this.b.dy));
+        c.setStyleProperty("text-align", this.u(this.c.dy));
         c.setStyleProperty("font-family", "Verdana");
         c.setStyleProperty("font-size", "1rem");
-        this.j.add(c.listen("change", runOn(this, this.y)));
-        this.j.add(c.listen("input", runOn(this, this.z)));
-        this.j.add(c.listen("focus", runOn(this, this.ae)));
-        this.j.add(c.listen("blur", runOn(this, this.x)));
-        this.j.add(c.listen("mouseenter", runOn(this, this.v)));
-        this.j.add(c.listen("mouseleave", runOn(this, this.w)));
-        this.j.add(c.listen("keydown", runOn(this, this.af)));
-        this.j.add(c.listen("keyup", runOn(this, this.ah)));
-        this.j.add(c.listen("keypress", runOn(this, this.ag)));
-        this.j.add(c.listen("paste", runOn(this, this.ak)));
-        this.j.add(c.listen("dragenter", runOn(this, this.ac)));
-        this.j.add(c.listen("dragleave", runOn(this, this.ad)));
-        this.j.add(c.listen("compositionstart", runOn(this, this.ab)));
-        this.j.add(c.listen("compositionend", runOn(this, this.aa)));
-        this.j.add(c.listen("mousedown", runOn(this, this.ai)));
-        this.j.add(c.listen("mouseup", runOn(this, this.aj)));
-        this.m = c;
-        this.l.append(this.m);
-        this.am();
-        this.b.dl();
+        this.k.add(c.listen("change", runOn(this, this.z)));
+        this.k.add(c.listen("input", runOn(this, this.aa)));
+        this.k.add(c.listen("focus", runOn(this, this.af)));
+        this.k.add(c.listen("blur", runOn(this, this.y)));
+        this.k.add(c.listen("mouseenter", runOn(this, this.w)));
+        this.k.add(c.listen("mouseleave", runOn(this, this.x)));
+        this.k.add(c.listen("keydown", runOn(this, this.ag)));
+        this.k.add(c.listen("keyup", runOn(this, this.ai)));
+        this.k.add(c.listen("keypress", runOn(this, this.ah)));
+        this.k.add(c.listen("paste", runOn(this, this.al)));
+        this.k.add(c.listen("dragenter", runOn(this, this.ad)));
+        this.k.add(c.listen("dragleave", runOn(this, this.ae)));
+        this.k.add(c.listen("compositionstart", runOn(this, this.ac)));
+        this.k.add(c.listen("compositionend", runOn(this, this.ab)));
+        this.k.add(c.listen("mousedown", runOn(this, this.aj)));
+        this.k.add(c.listen("mouseup", runOn(this, this.ak)));
+        this.n = c;
+        this.m.append(this.n);
+        this.an();
+        this.c.dl();
     };
-    InputView.prototype.a0 = function (a) {
+    InputView.prototype.a1 = function (a) {
         if (a) {
-            this.m.setAttribute("readonly", a.toString());
+            this.n.setAttribute("readonly", a.toString());
         }
         else {
-            this.m.getNativeElement().removeAttribute("readonly");
+            this.n.getNativeElement().removeAttribute("readonly");
         }
     };
-    InputView.prototype.ay = function (a) {
+    InputView.prototype.az = function (a) {
         if (a) {
-            this.m.setAttribute("disabled", "true");
+            this.n.setAttribute("disabled", "true");
         }
         else {
-            this.m.getNativeElement().removeAttribute("disabled");
+            this.n.getNativeElement().removeAttribute("disabled");
         }
     };
-    InputView.prototype.a5 = function (a) {
-        this.m.setStyleProperty("text-align", this.t(a));
+    InputView.prototype.a6 = function (a) {
+        this.n.setStyleProperty("text-align", this.u(a));
     };
-    InputView.prototype.a4 = function (a) {
+    InputView.prototype.a5 = function (a) {
         if (a) {
-            this.m.removeClass("ig-input-hide-spinner");
+            this.n.removeClass("ig-input-hide-spinner");
         }
         else {
-            this.m.addClass("ig-input-hide-spinner");
+            this.n.addClass("ig-input-hide-spinner");
         }
     };
-    InputView.prototype.ab = function (a) {
-        this.g = true;
-        this.b.c3();
+    InputView.prototype.ac = function (a) {
+        this.h = true;
+        this.c.c3();
     };
-    InputView.prototype.aa = function (a) {
-        this.g = false;
+    InputView.prototype.ab = function (a) {
+        this.h = false;
         var b = null;
         if (a.originalEvent != null) {
             b = (a.originalEvent.data);
         }
-        this.b.c2(b);
+        this.c.c2(b);
     };
-    InputView.prototype.t = function (a) {
+    InputView.prototype.u = function (a) {
         switch (a) {
             case 0: return "left";
             case 2: return "right";
@@ -16953,54 +16966,54 @@ var InputView = /** @class */ /*@__PURE__*/ (function (_super) {
         }
         return "left";
     };
-    InputView.prototype.aw = function () {
-        this.m.setAttribute("type", this.b.b8);
-        if (this.b.b8 == "date") {
-            this.m.setStyleProperty("line-height", "normal");
+    InputView.prototype.ax = function () {
+        this.n.setAttribute("type", this.c.b8);
+        if (this.c.b8 == "date") {
+            this.n.setStyleProperty("line-height", "normal");
         }
         else {
-            this.m.setStyleProperty("line-height", "0");
+            this.n.setStyleProperty("line-height", "0");
         }
     };
-    InputView.prototype.au = function () {
-        this.m.setAttribute("placeholder", this.b.cg);
+    InputView.prototype.av = function () {
+        this.n.setAttribute("placeholder", this.c.cg);
     };
-    InputView.prototype.a9 = function () {
-        switch (this.b.z) {
+    InputView.prototype.ba = function () {
+        switch (this.c.z) {
             case 1:
-                this.m.setStyleProperty("height", "2rem");
-                this.m.setStyleProperty("font-size", "1rem");
+                this.n.setStyleProperty("height", "2rem");
+                this.n.setStyleProperty("font-size", "1rem");
                 break;
             case 2:
-                this.m.setStyleProperty("height", "1.68421rem");
-                this.m.setStyleProperty("font-size", "1rem");
+                this.n.setStyleProperty("height", "1.68421rem");
+                this.n.setStyleProperty("font-size", "1rem");
                 break;
             case 3:
-                this.m.setStyleProperty("height", "1.45455rem");
-                this.m.setStyleProperty("font-size", ".95455rem");
+                this.n.setStyleProperty("height", "1.45455rem");
+                this.n.setStyleProperty("font-size", ".95455rem");
                 break;
             case 4:
-                this.m.setStyleProperty("height", "1.388445rem");
-                this.m.setStyleProperty("font-size", "0.91116rem");
+                this.n.setStyleProperty("height", "1.388445rem");
+                this.n.setStyleProperty("font-size", "0.91116rem");
                 break;
         }
     };
-    InputView.prototype.a8 = function () {
+    InputView.prototype.a9 = function () {
         var _this = this;
-        var a = this.k();
+        var a = this.l();
         if (isNaN_(a) || a == 0) {
-            if (!this.f) {
-                this.f = true;
-                this.l.setTimeout(function () {
-                    _this.f = false;
-                    _this.a8();
+            if (!this.g) {
+                this.g = true;
+                this.m.setTimeout(function () {
+                    _this.g = false;
+                    _this.a9();
                 }, 100);
             }
         }
         var b = new TransformGroup();
         b.j.add(((function () {
             var $ret = new TranslateTransform();
-            $ret.k = _this.b.o == 2 ? (_this.k() * -0.25) : 0;
+            $ret.k = _this.c.o == 2 ? (_this.l() * -0.25) : 0;
             return $ret;
         })()));
         b.j.add(((function () {
@@ -17009,141 +17022,141 @@ var InputView = /** @class */ /*@__PURE__*/ (function (_super) {
             $ret.m = 1;
             return $ret;
         })()));
-        NativeUI.af(this.l.rootWrapper, b);
-        this.l.rootWrapper.setStyleProperty("transform-origin", "0px 0px");
+        NativeUI.af(this.m.rootWrapper, b);
+        this.m.rootWrapper.setStyleProperty("transform-origin", "0px 0px");
     };
-    InputView.prototype.k = function () {
-        var a = this.l.rootWrapper.getStyleProperty("height");
+    InputView.prototype.l = function () {
+        var a = this.m.rootWrapper.getStyleProperty("height");
         var b = parseFloat(stringReplace(a, "px", ""));
         return b;
     };
-    InputView.prototype.ax = function (a) {
-        this.m.setProperty("value", a);
+    InputView.prototype.ay = function (a) {
+        this.n.setProperty("value", a);
     };
-    InputView.prototype.az = function (a) {
-        this.m.setAttribute("name", a);
+    InputView.prototype.a0 = function (a) {
+        this.n.setAttribute("name", a);
     };
-    InputView.prototype.x = function (a) {
-        this.b.cz();
+    InputView.prototype.y = function (a) {
+        this.c.cz();
     };
-    InputView.prototype.ae = function (a) {
-        this.b.c7();
+    InputView.prototype.af = function (a) {
+        this.c.c7();
     };
-    InputView.prototype.ai = function (a) {
-        var b = this.bc(a);
-        this.b.dd(b);
+    InputView.prototype.aj = function (a) {
+        var b = this.bd(a);
+        this.c.dd(b);
         if (b.handled) {
             a.preventDefault();
         }
     };
-    InputView.prototype.aj = function (a) {
-        var b = this.bc(a);
-        this.b.dg(b);
+    InputView.prototype.ak = function (a) {
+        var b = this.bd(a);
+        this.c.dg(b);
         if (b.handled) {
             a.preventDefault();
         }
     };
-    InputView.prototype.bc = function (a) {
+    InputView.prototype.bd = function (a) {
         var b = new MouseButtonEventArgs();
         b.position = { $type: Point_$type, x: a.offsetX, y: a.offsetY };
         return b;
     };
-    InputView.prototype.y = function (a) {
-        this.b.c0();
-    };
     InputView.prototype.z = function (a) {
-        this.b.c1();
+        this.c.c0();
     };
-    InputView.prototype.af = function (a) {
-        var b = new KeyEventArgs(0, a);
-        this.b.da(b);
+    InputView.prototype.aa = function (a) {
+        this.c.c1();
     };
-    InputView.prototype.ah = function (a) {
+    InputView.prototype.ag = function (a) {
         var b = new KeyEventArgs(0, a);
-        this.b.dc(b);
+        this.c.da(b);
     };
-    InputView.prototype.ag = function (a) {
+    InputView.prototype.ai = function (a) {
         var b = new KeyEventArgs(0, a);
-        this.b.db(b);
+        this.c.dc(b);
     };
-    InputView.prototype.ak = function (a) {
-        this.b.dh();
+    InputView.prototype.ah = function (a) {
+        var b = new KeyEventArgs(0, a);
+        this.c.db(b);
     };
-    InputView.prototype.ac = function (a) {
-        this.b.c5();
+    InputView.prototype.al = function (a) {
+        this.c.dh();
     };
     InputView.prototype.ad = function (a) {
-        this.b.c6();
+        this.c.c5();
     };
-    InputView.prototype.ba = function (a) {
-        if (this.r != a) {
-            this.r = a;
-            if (this.n != null) {
-                this.n.setAttribute("d", this.r);
+    InputView.prototype.ae = function (a) {
+        this.c.c6();
+    };
+    InputView.prototype.bb = function (a) {
+        if (this.s != a) {
+            this.s = a;
+            if (this.o != null) {
+                this.o.setAttribute("d", this.s);
             }
         }
     };
-    InputView.prototype.s = function () {
-        return this.m.getProperty("value");
+    InputView.prototype.t = function () {
+        return this.n.getProperty("value");
     };
-    InputView.prototype.u = function (a) {
+    InputView.prototype.v = function (a) {
     };
-    InputView.prototype.a7 = function () {
-        if (this.h()) {
-            if (this.b.as) {
-                this.m.setAttribute("tabindex", this.b.be.toString());
+    InputView.prototype.a8 = function () {
+        if (this.i()) {
+            if (this.c.as) {
+                this.n.setAttribute("tabindex", this.c.be.toString());
             }
             else {
-                this.m.getNativeElement().removeAttribute("tabindex");
+                this.n.getNativeElement().removeAttribute("tabindex");
             }
         }
     };
-    InputView.prototype.p = function () {
-        var a = this.m.getProperty("selectionStart");
+    InputView.prototype.q = function () {
+        var a = this.n.getProperty("selectionStart");
         return typeGetValue(a);
     };
-    InputView.prototype.o = function () {
-        var a = this.m.getProperty("selectionEnd");
+    InputView.prototype.p = function () {
+        var a = this.n.getProperty("selectionEnd");
         return typeGetValue(a);
     };
-    InputView.prototype.a3 = function (a) {
-        this.m.setProperty("selectionStart", a);
+    InputView.prototype.a4 = function (a) {
+        this.n.setProperty("selectionStart", a);
     };
-    InputView.prototype.a1 = function (a) {
-        this.m.setProperty("selectionEnd", a);
+    InputView.prototype.a2 = function (a) {
+        this.n.setProperty("selectionEnd", a);
     };
-    InputView.prototype.at = function () {
-        if (this.h()) {
+    InputView.prototype.au = function () {
+        if (this.i()) {
         }
     };
-    InputView.prototype.v = function (a) {
-        this.b.de();
-    };
     InputView.prototype.w = function (a) {
-        this.b.df();
+        this.c.de();
     };
-    InputView.prototype.an = function () {
-        this.d = true;
-        this.j.add(this.m.listen("change", runOn(this, this.y)));
-        this.j.add(this.m.listen("input", runOn(this, this.z)));
-        this.j.add(this.m.listen("focus", runOn(this, this.ae)));
-        this.j.add(this.m.listen("blur", runOn(this, this.x)));
-        this.j.add(this.m.listen("mouseenter", runOn(this, this.v)));
-        this.j.add(this.m.listen("mouseleave", runOn(this, this.w)));
-        this.j.add(this.m.listen("keydown", runOn(this, this.af)));
-        this.j.add(this.m.listen("paste", runOn(this, this.ak)));
-        this.j.add(this.m.listen("dragenter", runOn(this, this.ac)));
-        this.j.add(this.m.listen("dragleave", runOn(this, this.ad)));
-        this.j.add(this.m.listen("compositionstart", runOn(this, this.ab)));
-        this.j.add(this.m.listen("compositionend", runOn(this, this.aa)));
-        this.j.add(this.m.listen("mousedown", runOn(this, this.ai)));
-        this.j.add(this.m.listen("mouseup", runOn(this, this.aj)));
-    };
-    InputView.prototype.aq = function () {
+    InputView.prototype.x = function (a) {
+        this.c.df();
+    };
+    InputView.prototype.ao = function () {
+        this.e = true;
+        this.k.add(this.n.listen("change", runOn(this, this.z)));
+        this.k.add(this.n.listen("input", runOn(this, this.aa)));
+        this.k.add(this.n.listen("focus", runOn(this, this.af)));
+        this.k.add(this.n.listen("blur", runOn(this, this.y)));
+        this.k.add(this.n.listen("mouseenter", runOn(this, this.w)));
+        this.k.add(this.n.listen("mouseleave", runOn(this, this.x)));
+        this.k.add(this.n.listen("keydown", runOn(this, this.ag)));
+        this.k.add(this.n.listen("paste", runOn(this, this.al)));
+        this.k.add(this.n.listen("dragenter", runOn(this, this.ad)));
+        this.k.add(this.n.listen("dragleave", runOn(this, this.ae)));
+        this.k.add(this.n.listen("compositionstart", runOn(this, this.ac)));
+        this.k.add(this.n.listen("compositionend", runOn(this, this.ab)));
+        this.k.add(this.n.listen("mousedown", runOn(this, this.aj)));
+        this.k.add(this.n.listen("mouseup", runOn(this, this.ak)));
+    };
+    InputView.prototype.ar = function () {
         var e_10, _a;
-        this.d = false;
+        this.e = false;
         try {
-            for (var _b = __values(fromEnum(this.j)), _c = _b.next(); !_c.done; _c = _b.next()) {
+            for (var _b = __values(fromEnum(this.k)), _c = _b.next(); !_c.done; _c = _b.next()) {
                 var a = _c.value;
                 a();
             }
@@ -17161,58 +17174,67 @@ var InputView = /** @class */ /*@__PURE__*/ (function (_super) {
                     throw e_10.error;
             }
         }
-        this.j.clear();
+        this.k.clear();
     };
-    InputView.prototype.bb = function (a) {
+    InputView.prototype.bc = function (a) {
         if (a != null) {
-            this.m.setStyleProperty("font", a.fontString);
+            this.n.setStyleProperty("font", a.fontString);
         }
     };
-    InputView.prototype.a6 = function () {
+    InputView.prototype.a7 = function () {
     };
-    InputView.prototype.ao = function () {
-        if (this.m != null) {
-            var a = this.m.getNativeElement();
+    InputView.prototype.ap = function () {
+        if (this.n != null) {
+            var a = this.n.getNativeElement();
             a.blur();
         }
     };
-    InputView.prototype.ar = function (a) {
-        if (this.m != null) {
-            this.m.focus(a);
+    InputView.prototype.as = function (a) {
+        if (this.n != null) {
+            this.n.focus(a);
         }
     };
-    InputView.prototype.av = function () {
-        if (this.m != null) {
-            var nativeInput_ = this.m;
+    InputView.prototype.aw = function () {
+        if (this.n != null) {
+            var nativeInput_ = this.n;
             nativeInput_.getNativeElement().select();
         }
     };
-    InputView.prototype.a2 = function (a, b) {
-        if (this.m != null) {
-            var c = this.m.getNativeElement();
+    InputView.prototype.a3 = function (a, b) {
+        if (this.n != null) {
+            var c = this.n.getNativeElement();
             c.setSelectionRange(a, b);
         }
     };
-    InputView.prototype.al = function () {
+    InputView.prototype.am = function () {
         if (KeyFrameAnimationFactory.h == null) {
-            KeyFrameAnimationFactory.h = this.l;
+            KeyFrameAnimationFactory.h = this.m;
         }
     };
-    InputView.prototype.a = function (a) {
-        return new AnimationKeyFrameEffect(0, this.l.rootWrapper, 0, null, a);
+    InputView.prototype.b = function (a) {
+        return new AnimationKeyFrameEffect(0, this.m.rootWrapper, 0, null, a);
     };
-    InputView.prototype.am = function () {
-        if (InputView.e) {
+    InputView.prototype.an = function () {
+        if (InputView.f) {
             return;
         }
         var a = "\r\n.ig-input-hide-spinner::-webkit-outer-spin-button,\r\n.ig-input-hide-spinner::-webkit-inner-spin-button {\r\n    -webkit-appearance: none;\r\n    margin: 0;\r\n}";
-        var b = this.l.createElement("style");
+        var b = this.m.createElement("style");
         b.setRawText(a);
         document.head.appendChild(b.getNativeElement());
-        InputView.e = true;
+        InputView.f = true;
+    };
+    InputView.prototype.a = function () {
+        var rect_ = this.n.getNativeElement().getBoundingClientRect();
+        var a = (rect_.top);
+        var b = (rect_.left);
+        var c = new Array(2);
+        c[0] = a;
+        c[1] = b;
+        return c;
     };
     InputView.$t = markType(InputView, 'InputView');
-    InputView.e = false;
+    InputView.f = false;
     return InputView;
 }(Base));
 /**
@@ -18383,7 +18405,7 @@ var XInputGroup = /** @class */ /*@__PURE__*/ (function (_super) {
         configurable: true
     });
     XInputGroup.prototype.onChildrenMutated = function () {
-        this.jr(function (a) { return a.view.a8(); });
+        this.jr(function (a) { return a.view.a9(); });
         this.js(function (a) { return a.view.aj(); });
         this.jt(function (a) { return a.view.r(); });
         this.ju(function (a) { return a.view.r(); });
@@ -20317,7 +20339,7 @@ var XInputGroup = /** @class */ /*@__PURE__*/ (function (_super) {
         this.view.ag();
     };
     XInputGroup.prototype.ensureShift = function () {
-        this.jr(function (a) { return a.view.a8(); });
+        this.jr(function (a) { return a.view.a9(); });
         this.js(function (a) { return a.view.aj(); });
         this.jt(function (a) { return a.view.r(); });
         this.ju(function (a) { return a.view.r(); });
@@ -21764,9 +21786,9 @@ var XInput = /** @class */ /*@__PURE__*/ (function (_super) {
         _this.a0 = false;
         _this.u = new MaskParsingService();
         var a = new InputView();
-        a.b = _this;
+        a.c = _this;
         _this.view = a;
-        _this.view.as();
+        _this.view.at();
         XInput.ae = new FontInfo();
         XInput.ae.q = "Verdana";
         return _this;
@@ -21911,7 +21933,7 @@ var XInput = /** @class */ /*@__PURE__*/ (function (_super) {
                 break;
             case "Value":
                 if (!this.al) {
-                    this.view.ax(this.cq);
+                    this.view.ay(this.cq);
                     if (this.b != null) {
                         this.b.kh();
                     }
@@ -21921,14 +21943,14 @@ var XInput = /** @class */ /*@__PURE__*/ (function (_super) {
                 }
                 break;
             case "Name":
-                this.view.az(this.e);
+                this.view.a0(this.e);
                 break;
             case "Density":
                 this.z = this.aa == 0 ? 1 : this.aa;
                 break;
             case "ActualDensity":
+                this.view.ba();
                 this.view.a9();
-                this.view.a8();
                 break;
             case "InputGroup":
                 this.c8();
@@ -21951,33 +21973,33 @@ var XInput = /** @class */ /*@__PURE__*/ (function (_super) {
                 this.c9();
                 break;
             case "IsDisabled":
-                this.view.ay(this.am);
+                this.view.az(this.am);
                 break;
             case "IsReadOnly":
-                this.view.a0(this.ao);
+                this.view.a1(this.ao);
                 break;
             case "TextAlignment":
-                this.view.a5(this.dy);
+                this.view.a6(this.dy);
                 break;
             case "ShowSpinner":
-                this.view.a4(this.a1);
+                this.view.a5(this.a1);
                 break;
             case "TabIndex":
-                this.view.a7();
+                this.view.a8();
                 break;
         }
     };
     XInput.prototype.di = function () {
-        this.view.au();
+        this.view.av();
     };
     XInput.prototype.dk = function () {
-        this.view.aw();
+        this.view.ax();
     };
     XInput.prototype.dj = function () {
-        this.view.a8();
+        this.view.a9();
     };
     XInput.prototype.c8 = function () {
-        this.view.a8();
+        this.view.a9();
     };
     XInput.prototype.dv = function () {
         this.d4 = this.d8 != null ? this.d8 : XInput.d6;
@@ -21986,10 +22008,10 @@ var XInput = /** @class */ /*@__PURE__*/ (function (_super) {
     };
     XInput.prototype.du = function () {
         if (this.ad != null) {
-            this.view.bb(this.ad);
+            this.view.bc(this.ad);
         }
-        NativeUI.q(this.view.q, this.d4);
-        this.view.a6();
+        NativeUI.q(this.view.r, this.d4);
+        this.view.a7();
     };
     Object.defineProperty(XInput.prototype, "d4", {
         get: function () {
@@ -22120,12 +22142,12 @@ var XInput = /** @class */ /*@__PURE__*/ (function (_super) {
     XInput.prototype.c0 = function () {
         var _this = this;
         this.al = true;
-        this.cq = this.view.s();
+        this.cq = this.view.t();
         if (this.change != null) {
             this.change(this, ((function () {
                 var $ret = new InputChangeEventArgs();
                 $ret.value = _this.cq;
-                $ret.isCompositionInProgress = _this.view.g;
+                $ret.isCompositionInProgress = _this.view.h;
                 return $ret;
             })()));
         }
@@ -22134,7 +22156,7 @@ var XInput = /** @class */ /*@__PURE__*/ (function (_super) {
     XInput.prototype.c1 = function () {
         var _this = this;
         this.al = true;
-        this.cq = this.view.s();
+        this.cq = this.view.t();
         this.al = false;
         if (this.ce != null) {
             this.aq = true;
@@ -22177,7 +22199,7 @@ var XInput = /** @class */ /*@__PURE__*/ (function (_super) {
             this.changing(this, ((function () {
                 var $ret = new InputChangeEventArgs();
                 $ret.value = _this.cq;
-                $ret.isCompositionInProgress = _this.view.g;
+                $ret.isCompositionInProgress = _this.view.h;
                 return $ret;
             })()));
         }
@@ -22298,7 +22320,7 @@ var XInput = /** @class */ /*@__PURE__*/ (function (_super) {
     XInput.prototype.cu = function () {
         this.a9 = 0;
         this.aj = false;
-        this.view.a7();
+        this.view.a8();
     };
     Object.defineProperty(XInput.prototype, "b2", {
         get: function () {
@@ -22408,86 +22430,89 @@ var XInput = /** @class */ /*@__PURE__*/ (function (_super) {
     XInput.prototype.dl = function () {
     };
     XInput.prototype.onDetachedFromUI = function () {
-        this.view.aq();
+        this.view.ar();
     };
     XInput.prototype.onAttachedToUI = function () {
-        this.view.an();
+        this.view.ao();
     };
     XInput.prototype.az = function () {
-        return this.view.h();
+        return this.view.i();
     };
     XInput.prototype.bg = function () {
         return this.j();
     };
     XInput.prototype.b1 = function () {
         var a = this.j();
-        return a.n();
+        return a.p();
     };
     XInput.prototype.j = function () {
         var a = new InputVisualModelExport();
-        var b = this.view.q;
-        a.h = this.view.l.rootWrapper.getNativeElement().offsetTop;
-        a.f = this.view.l.rootWrapper.getNativeElement().offsetLeft;
+        var b = this.view.r;
+        var c = this.view.a();
+        a.i = c[0];
+        a.g = c[1];
+        a.f = this.view.m.rootWrapper.height();
+        a.j = this.view.m.rootWrapper.width();
         a.b = this.o;
         a.c = this.z;
-        a.j = this.ce;
-        a.m = this.ci;
+        a.l = this.ce;
+        a.o = this.ci;
         a.d = this.au;
         a.a = AppearanceHelper.a(NativeUI.al(b));
-        a.i = this.b8;
-        a.l = this.cg;
+        a.k = this.b8;
+        a.n = this.cg;
         a.e = this.aw;
-        a.t = this.cq;
-        a.k = this.e;
+        a.v = this.cq;
+        a.m = this.e;
         if (this.ad != null) {
-            var c = this.ad;
-            if (this.view != null && c.q == null) {
-                var d = this.view.l;
-                var e = FontUtil.getFontInfoFromString(d, c.fontString);
-                c.q = e.q;
-                c.f = e.f;
-                c.r = e.r;
-                c.t = e.t;
-                c.u = e.u;
-                c.v = e.v;
+            var d = this.ad;
+            if (this.view != null && d.q == null) {
+                var e = this.view.m;
+                var f = FontUtil.getFontInfoFromString(e, d.fontString);
+                d.q = f.q;
+                d.f = f.f;
+                d.r = f.r;
+                d.t = f.t;
+                d.u = f.u;
+                d.v = f.v;
             }
-            if (c.q != null) {
-                a.o = c.q;
+            if (d.q != null) {
+                a.q = d.q;
             }
-            if (!isNaN_(c.f)) {
-                a.g = c.f;
+            if (!isNaN_(d.f)) {
+                a.h = d.f;
             }
-            if (c.v != null) {
-                a.s = c.v;
+            if (d.v != null) {
+                a.u = d.v;
             }
-            if (c.t != null) {
-                a.q = c.t;
+            if (d.t != null) {
+                a.s = d.t;
             }
-            if (c.r != null) {
-                a.p = c.t;
+            if (d.r != null) {
+                a.r = d.t;
             }
         }
         return a;
     };
     XInput.prototype.dr = function (a, b) {
-        this.view.a2(a, b);
+        this.view.a3(a, b);
     };
     XInput.prototype.provideContainer = function (a) {
-        this.view.ap(a);
+        this.view.aq(a);
     };
     XInput.prototype.ct = function () {
         this.cz();
-        this.view.ao();
+        this.view.ap();
     };
     XInput.prototype.focus = function (a) {
         if (a === void 0) {
             a = false;
         }
         this.c7();
-        this.view.ar(a);
+        this.view.as(a);
     };
     XInput.prototype.dp = function () {
-        this.view.av();
+        this.view.aw();
     };
     XInput.prototype.dt = function (a) {
         this.aq = true;
@@ -22522,7 +22547,7 @@ var XInput = /** @class */ /*@__PURE__*/ (function (_super) {
             this.changing(this, ((function () {
                 var $ret = new InputChangeEventArgs();
                 $ret.value = _this.cq;
-                $ret.isCompositionInProgress = _this.view.g;
+                $ret.isCompositionInProgress = _this.view.h;
                 return $ret;
             })()));
         }
@@ -22535,19 +22560,19 @@ var XInput = /** @class */ /*@__PURE__*/ (function (_super) {
         this.q = 0;
     };
     XInput.prototype.bb = function () {
-        var a = this.view.p();
-        var b = this.view.o();
+        var a = this.view.q();
+        var b = this.view.p();
         return a == b && this.ai ? b - this.bk.length : a;
     };
     XInput.prototype.ba = function () {
-        return this.view.o();
+        return this.view.p();
     };
     Object.defineProperty(XInput.prototype, "selectionStart", {
         get: function () {
             return this.bb();
         },
         set: function (a) {
-            this.view.a3(a);
+            this.view.a4(a);
         },
         enumerable: false,
         configurable: true
@@ -22557,7 +22582,7 @@ var XInput = /** @class */ /*@__PURE__*/ (function (_super) {
             return this.ba();
         },
         set: function (a) {
-            this.view.a1(a);
+            this.view.a2(a);
         },
         enumerable: false,
         configurable: true
@@ -22598,9 +22623,9 @@ var XInput = /** @class */ /*@__PURE__*/ (function (_super) {
         this.dm(this.ag, this.ay);
     };
     XInput.prototype.cw = function () {
-        this.view.al();
+        this.view.am();
         if (this.ag == null) {
-            this.ag = KeyFrameAnimationFactory.f.c(this.view.a(this.i).m(new AnimationKeyFrameProperty(1, 0)).m(new AnimationKeyFrameProperty(1, 1)));
+            this.ag = KeyFrameAnimationFactory.f.c(this.view.b(this.i).m(new AnimationKeyFrameProperty(1, 0)).m(new AnimationKeyFrameProperty(1, 1)));
         }
     };
     Object.defineProperty(XInput.prototype, "i", {
@@ -30484,7 +30509,16 @@ var XInputBridge = /** @class */ /*@__PURE__*/ (function (_super) {
         window.setTimeout(function () { return e.dr(b, c); }, 0);
     };
     XInputBridge.prototype.exportVisualData = function (a) {
-        return a.fe();
+        if (!(typeCast(XInputGroup.$, a) !== null)) {
+            return null;
+        }
+        var b = a;
+        if (b.inputs == null || b.inputs.count == 0 || !(typeCast(XInput.$, b.inputs._inner[0]) !== null)) {
+            return null;
+        }
+        var c = b.inputs._inner[0];
+        var d = c.bg();
+        return d;
     };
     XInputBridge.$t = markType(XInputBridge, 'XInputBridge', XComponentBridge.$, [INativeUIInputBridge_$type]);
     return XInputBridge;
@@ -30611,7 +30645,7 @@ var XButtonBridge = /** @class */ /*@__PURE__*/ (function (_super) {
                 }
                 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);
                 }
@@ -32138,7 +32172,7 @@ var MultiSliderView = /** @class */ /*@__PURE__*/ (function (_super) {
         this.v = i;
         var j = this.u.get2DCanvasContext(this.v);
         this.l = new RenderingContext(new CanvasViewRenderer(), j);
-        this.l.ae(this.j);
+        this.l.af(this.j);
         this.ab();
         this.a = new CanvasGestureDOMEventProxy(this.u.rootWrapper, this.u, false);
         this.a.bl = this.g.e0;
@@ -32213,7 +32247,7 @@ var MultiSliderView = /** @class */ /*@__PURE__*/ (function (_super) {
             this.i = c;
             this.j = this.i;
             this.s = FontUtil.getCurrentFontHeight(this.u, this.j);
-            this.l.ae(this.i);
+            this.l.af(this.i);
             this.g.trackDirty();
         }
     };
@@ -34148,6 +34182,10 @@ var ButtonGroupVisualModelExport = /** @class */ /*@__PURE__*/ (function (_super
     __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;
@@ -34161,9 +34199,13 @@ var ButtonGroupVisualModelExport = /** @class */ /*@__PURE__*/ (function (_super
         _this.i = null;
         return _this;
     }
-    ButtonGroupVisualModelExport.prototype.l = function () {
+    ButtonGroupVisualModelExport.prototype.p = function () {
         var a = new 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 : " + enumGetBox(BaseControlTheme_$type, this.e) + ", ");
         a.l("actualDensity : " + enumGetBox(ControlDisplayDensity_$type, this.f) + ", ");
         a.l("selectedIndices : " + this.a + ", ");
@@ -35779,7 +35821,7 @@ var XButtonGroup = /** @class */ /*@__PURE__*/ (function (_super) {
     };
     XButtonGroup.prototype.bq = function () {
         var a = this.e();
-        return a.l();
+        return a.p();
     };
     XButtonGroup.prototype.e = function () {
         var a = new ButtonGroupVisualModelExport();
@@ -36017,7 +36059,13 @@ var XButtonGroupBridge = /** @class */ /*@__PURE__*/ (function (_super) {
         }
     };
     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);
@@ -36112,6 +36160,10 @@ var CheckboxVisualModelExport = /** @class */ /*@__PURE__*/ (function (_super) {
     __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;
@@ -36120,11 +36172,11 @@ var CheckboxVisualModelExport = /** @class */ /*@__PURE__*/ (function (_super) {
         _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;
@@ -36132,9 +36184,13 @@ var CheckboxVisualModelExport = /** @class */ /*@__PURE__*/ (function (_super) {
         _this.i = false;
         return _this;
     }
-    CheckboxVisualModelExport.prototype.s = function () {
+    CheckboxVisualModelExport.prototype.w = function () {
         var a = new 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 + ", ");
@@ -36142,11 +36198,11 @@ var CheckboxVisualModelExport = /** @class */ /*@__PURE__*/ (function (_super) {
         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 + ", ");
@@ -36173,30 +36229,30 @@ var CheckboxView = /** @class */ /*@__PURE__*/ (function (_super) {
     __extends(CheckboxView, _super);
     function CheckboxView() {
         var _this = _super.call(this) || this;
-        _this.c = null;
-        _this.l = null;
-        _this.f = null;
-        _this.j = new List$1(Delegate_$type, 0);
-        _this.g = true;
-        _this.r = null;
+        _this.d = null;
         _this.m = null;
-        _this.q = null;
+        _this.g = null;
+        _this.k = new List$1(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 = __values(fromEnum(this.j)), _c = _b.next(); !_c.done; _c = _b.next()) {
+                for (var _b = __values(fromEnum(this.k)), _c = _b.next(); !_c.done; _c = _b.next()) {
                     var b = _c.value;
                     b();
                 }
@@ -36214,46 +36270,46 @@ var CheckboxView = /** @class */ /*@__PURE__*/ (function (_super) {
                         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", runOn(this, this.x)));
-        this.j.add(c.listen("click", runOn(this, this.y)));
-        this.j.add(c.listen("focus", runOn(this, this.z)));
-        this.j.add(c.listen("blur", 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", runOn(this, this.y)));
+        this.k.add(c.listen("click", runOn(this, this.z)));
+        this.k.add(c.listen("focus", runOn(this, this.aa)));
+        this.k.add(c.listen("blur", 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");
@@ -36272,9 +36328,9 @@ var CheckboxView = /** @class */ /*@__PURE__*/ (function (_super) {
         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");
@@ -36290,14 +36346,14 @@ var CheckboxView = /** @class */ /*@__PURE__*/ (function (_super) {
         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");
@@ -36308,12 +36364,12 @@ var CheckboxView = /** @class */ /*@__PURE__*/ (function (_super) {
         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");
@@ -36326,125 +36382,134 @@ var CheckboxView = /** @class */ /*@__PURE__*/ (function (_super) {
         l.setStyleProperty("margin-bottom", "0");
         l.setStyleProperty("cursor", "pointer");
         l.setStyleProperty("role", "label");
-        this.p = l;
-        this.j.add(l.listen("click", runOn(this, this.v)));
-        this.l.append(l);
-        this.l.getPortal(l, "ChildContent", function (m) {
+        this.q = l;
+        this.k.add(l.listen("click", 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 Size(1, this.q.width(), this.q.height());
+    CheckboxView.prototype.am = function () {
+        return new 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 (KeyFrameAnimationFactory.h == null) {
-            KeyFrameAnimationFactory.h = this.l;
+            KeyFrameAnimationFactory.h = this.m;
         }
     };
-    CheckboxView.prototype.a = function (a) {
-        return new AnimationKeyFrameEffect(0, this.q, 0, null, a);
-    };
     CheckboxView.prototype.b = function (a) {
-        return new AnimationKeyFrameEffect(0, this.o, 0, null, a);
+        return new AnimationKeyFrameEffect(0, this.r, 0, null, a);
     };
-    CheckboxView.prototype.ab = function (a) {
+    CheckboxView.prototype.c = function (a) {
+        return new 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", runOn(this, this.x)));
-        this.j.add(this.r.listen("click", runOn(this, this.y)));
-        this.j.add(this.r.listen("focus", runOn(this, this.z)));
-        this.j.add(this.r.listen("blur", runOn(this, this.w)));
-        this.j.add(this.p.listen("click", runOn(this, this.v)));
+    CheckboxView.prototype.ad = function () {
+        this.h = true;
+        this.k.add(this.s.listen("change", runOn(this, this.y)));
+        this.k.add(this.s.listen("click", runOn(this, this.z)));
+        this.k.add(this.s.listen("focus", runOn(this, this.aa)));
+        this.k.add(this.s.listen("blur", runOn(this, this.x)));
+        this.k.add(this.q.listen("click", 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 = __values(fromEnum(this.j)), _c = _b.next(); !_c.done; _c = _b.next()) {
+            for (var _b = __values(fromEnum(this.k)), _c = _b.next(); !_c.done; _c = _b.next()) {
                 var a = _c.value;
                 a();
             }
@@ -36462,21 +36527,21 @@ var CheckboxView = /** @class */ /*@__PURE__*/ (function (_super) {
                     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 = stringReplace(a, "px", "");
         return parseFloat(a);
     };
@@ -36544,9 +36609,9 @@ var XCheckbox = /** @class */ /*@__PURE__*/ (function (_super) {
         _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", {
@@ -36650,7 +36715,7 @@ var XCheckbox = /** @class */ /*@__PURE__*/ (function (_super) {
                 this.ct();
                 break;
             case "ActualCheckPath":
-                this.view.ai();
+                this.view.aj();
                 break;
             case "IsChecked":
                 if (!this.s) {
@@ -36670,16 +36735,16 @@ var XCheckbox = /** @class */ /*@__PURE__*/ (function (_super) {
                 }
                 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;
         }
@@ -36698,7 +36763,7 @@ var XCheckbox = /** @class */ /*@__PURE__*/ (function (_super) {
         }
     };
     XCheckbox.prototype.cw = function () {
-        var a = this.view.u;
+        var a = this.view.v;
         if (a == null) {
             return;
         }
@@ -37189,10 +37254,10 @@ var XCheckbox = /** @class */ /*@__PURE__*/ (function (_super) {
     XCheckbox.prototype.cp = function () {
         this.ck();
         if (this.checked) {
-            this.view.ak(BrushUtil.s(this.c8, 0.6), BrushUtil.s(this.c8, 0.1));
+            this.view.al(BrushUtil.s(this.c8, 0.6), BrushUtil.s(this.c8, 0.1));
         }
         else {
-            this.view.ak(BrushUtil.s(this.c8, 0.6), BrushUtil.s(this.dc, 0.1));
+            this.view.al(BrushUtil.s(this.c8, 0.6), BrushUtil.s(this.dc, 0.1));
         }
     };
     Object.defineProperty(XCheckbox.prototype, "a", {
@@ -37206,15 +37271,15 @@ var XCheckbox = /** @class */ /*@__PURE__*/ (function (_super) {
         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 = KeyFrameAnimationFactory.f.c(this.view.a(this.a).m(new AnimationKeyFrameProperty(2, this.db), new AnimationKeyFrameProperty(3, this.dc)).m(new AnimationKeyFrameProperty(2, this.c8), new AnimationKeyFrameProperty(3, this.c9)));
-            this.p = KeyFrameAnimationFactory.f.c(this.view.b(this.a).m(new AnimationKeyFrameProperty(19, 24), new AnimationKeyFrameProperty(1, 0)).m(new AnimationKeyFrameProperty(19, 0), new AnimationKeyFrameProperty(1, 1)));
+            this.o = KeyFrameAnimationFactory.f.c(this.view.b(this.a).m(new AnimationKeyFrameProperty(2, this.db), new AnimationKeyFrameProperty(3, this.dc)).m(new AnimationKeyFrameProperty(2, this.c8), new AnimationKeyFrameProperty(3, this.c9)));
+            this.p = KeyFrameAnimationFactory.f.c(this.view.c(this.a).m(new AnimationKeyFrameProperty(19, 24), new AnimationKeyFrameProperty(1, 0)).m(new AnimationKeyFrameProperty(19, 0), new AnimationKeyFrameProperty(1, 1)));
         }
     };
     XCheckbox.prototype.toggle = function () {
@@ -37252,21 +37317,21 @@ var XCheckbox = /** @class */ /*@__PURE__*/ (function (_super) {
             c = -1;
         }
         if (b) {
-            this.view.ak(BrushUtil.s(this.c8, 0.6), BrushUtil.s(this.c8, 0.1));
+            this.view.al(BrushUtil.s(this.c8, 0.6), BrushUtil.s(this.c8, 0.1));
         }
         else {
-            this.view.ak(BrushUtil.s(this.c8, 0.6), BrushUtil.s(this.dc, 0.1));
+            this.view.al(BrushUtil.s(this.c8, 0.6), BrushUtil.s(this.dc, 0.1));
         }
         if (!this.indeterminate) {
-            NativeUI.af(this.view.u, null);
+            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 TransformGroup();
-                var h = this.view.al();
+                var h = this.view.am();
                 g.j.add(((function () {
                     var $ret = new RotateTransform();
                     $ret.j = 45;
@@ -37274,7 +37339,7 @@ var XCheckbox = /** @class */ /*@__PURE__*/ (function (_super) {
                 })()));
                 g.j.add(((function () {
                     var $ret = new TranslateTransform();
-                    $ret.j = -_this.view.k();
+                    $ret.j = -_this.view.l();
                     return $ret;
                 })()));
                 NativeUI.m(d, this.c8);
@@ -37333,10 +37398,10 @@ var XCheckbox = /** @class */ /*@__PURE__*/ (function (_super) {
         }
     };
     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) {
@@ -37344,17 +37409,23 @@ var XCheckbox = /** @class */ /*@__PURE__*/ (function (_super) {
         }
     };
     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 = AppearanceHelper.a(this.db);
         a.c = AppearanceHelper.a(this.da);
@@ -37363,11 +37434,11 @@ var XCheckbox = /** @class */ /*@__PURE__*/ (function (_super) {
         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 = AppearanceHelper.a(this.c8);
-        a.r = this.a4;
+        a.v = this.a4;
         a.j = this.focused;
         a.g = this.y;
         a.h = this.checked;
@@ -37376,7 +37447,7 @@ var XCheckbox = /** @class */ /*@__PURE__*/ (function (_super) {
         return a;
     };
     XCheckbox.prototype.provideContainer = function (a) {
-        this.view.ad(a);
+        this.view.ae(a);
     };
     XCheckbox.$t = markType(XCheckbox, 'XCheckbox', Base.$, [INotifyPropertyChanged_$type]);
     XCheckbox.g = ThemeResolver.a(((function () {
@@ -37542,7 +37613,8 @@ var XCheckboxBridge = /** @class */ /*@__PURE__*/ (function (_super) {
         }
     };
     XCheckboxBridge.prototype.exportVisualData = function (a) {
-        return a.a3();
+        var b = a.a3();
+        return b;
     };
     XCheckboxBridge.$t = markType(XCheckboxBridge, 'XCheckboxBridge', XComponentBridge.$);
     return XCheckboxBridge;
@@ -37666,7 +37738,8 @@ var XIconBridge = /** @class */ /*@__PURE__*/ (function (_super) {
         }
     };
     XIconBridge.prototype.exportVisualData = function (a) {
-        return a.bg();
+        var b = a.bg();
+        return b;
     };
     XIconBridge.$t = markType(XIconBridge, 'XIconBridge', XComponentBridge.$);
     return XIconBridge;
@@ -38027,6 +38100,45 @@ var ColorEditorPanelSelectedValueChangedEventArgs = /** @class */ /*@__PURE__*/
     return ColorEditorPanelSelectedValueChangedEventArgs;
 }(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) {
+    __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 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 = markType(ColorEditorVisualModelExport, 'ColorEditorVisualModelExport');
+    return ColorEditorVisualModelExport;
+}(Base));
+
 /*
 THIS INFRAGISTICS ULTIMATE SOFTWARE LICENSE  AGREEMENT ("AGREEMENT") LOCATED HERE:
 https://www.infragistics.com/legal/license/igultimate-la
@@ -38378,6 +38490,15 @@ var ColorEditorBridge = /** @class */ /*@__PURE__*/ (function (_super) {
                 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 = markType(ColorEditorBridge, 'ColorEditorBridge', XComponentBridge.$);
     return ColorEditorBridge;
 }(XComponentBridge));
@@ -38772,7 +38893,7 @@ var ColorEditorView = /** @class */ /*@__PURE__*/ (function (_super) {
             this.a.a = new DOMExecutionContext(a);
         }
         this.h = a;
-        this.a.bg();
+        this.a.bj();
     };
     ColorEditorView.prototype.m = function () {
         if (KeyFrameAnimationFactory.h == null) {
@@ -38831,55 +38952,55 @@ var ColorEditor = /** @class */ /*@__PURE__*/ (function (_super) {
     __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 = BrushUtil.j(0, 0, 0, 0);
+        _this.e = null;
         _this.w = false;
+        _this.ag = false;
+        _this.ae = false;
+        _this.cm = 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 = BrushUtil.j(255, 0, 0, 255);
-        _this.ar = "";
-        _this.ci = BrushUtil.j(255, 24, 29, 31);
-        _this.l = null;
-        _this.j = 2;
-        _this.h = 1;
+        _this.co = BrushUtil.j(255, 0, 0, 255);
+        _this.at = "";
+        _this.cl = BrushUtil.j(255, 24, 29, 31);
         _this.m = null;
-        _this.ck = BrushUtil.j(255, 24, 29, 31);
-        _this.ch = BrushUtil.j(255, 163, 172, 184);
+        _this.k = 2;
+        _this.i = 1;
+        _this.n = null;
+        _this.cn = BrushUtil.j(255, 24, 29, 31);
+        _this.ck = 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;
         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();
@@ -38888,7 +39009,7 @@ var ColorEditor = /** @class */ /*@__PURE__*/ (function (_super) {
                 return $ret;
             })()));
         }
-        if (this.w) {
+        if (this.x) {
         }
     };
     ColorEditor.prototype.notifySizeChanged = function () {
@@ -38897,290 +39018,290 @@ var ColorEditor = /** @class */ /*@__PURE__*/ (function (_super) {
         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 SRProvider(this.g.h);
-                this.s.cb("ColorEditor");
+            if (this.t == null) {
+                this.t = new 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", enumGetBox(ControlDisplayDensity_$type, b), enumGetBox(ControlDisplayDensity_$type, this.j));
+            var b = this.k;
+            this.k = a;
+            if (b != this.k) {
+                this.b3("Density", enumGetBox(ControlDisplayDensity_$type, b), enumGetBox(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", enumGetBox(BaseControlTheme_$type, b), enumGetBox(BaseControlTheme_$type, this.h));
+            var b = this.i;
+            this.i = a;
+            if (b != this.i) {
+                this.b3("BaseTheme", enumGetBox(BaseControlTheme_$type, b), enumGetBox(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 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;
@@ -39188,274 +39309,288 @@ var ColorEditor = /** @class */ /*@__PURE__*/ (function (_super) {
             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 = 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 () {
-        NativeUIWindow.h(15, runOn(this, this.b4), this.g.h);
-        NativeUIWindow.h(9, runOn(this, this.b3), this.g.h);
+    ColorEditor.prototype.br = function () {
+        NativeUIWindow.h(15, runOn(this, this.b7), this.h.h);
+        NativeUIWindow.h(9, runOn(this, this.b6), this.h.h);
     };
-    ColorEditor.prototype.bs = function () {
-        NativeUIWindow.i(15, runOn(this, this.b4));
-        NativeUIWindow.i(9, runOn(this, this.b3));
+    ColorEditor.prototype.bv = function () {
+        NativeUIWindow.i(15, runOn(this, this.b7));
+        NativeUIWindow.i(9, 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;
-        NativeUIComponent.av(this.g.j(), [12, 2, 7, 0], [2, 2, 2, 2], function (a) {
+        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 = 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 = BrushUtil.j(255, 255, 255, 255);
-            _this.q.cd = BrushUtil.j(255, 0, 0, 0);
-            _this.q.bn = runOn(_this, _this.cc);
-            _this.q.n = runOn(_this, _this.bv);
-            _this.q.o = runOn(_this, _this.bx);
-            _this.q.cb = 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 = delegateCombine(g.closed, runOn(_this, _this.bc));
-            var h = _this.d;
-            h.valueChanged = delegateCombine(h.valueChanged, runOn(_this, _this.bd));
-            d.o = runOn(_this, _this.bx);
-            var i = _this.d;
-            i.valueChanged = delegateCombine(i.valueChanged, 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 = BrushUtil.j(255, 255, 255, 255);
+            _this.r.cd = BrushUtil.j(255, 0, 0, 0);
+            _this.r.bn = runOn(_this, _this.cf);
+            _this.r.n = runOn(_this, _this.by);
+            _this.r.o = runOn(_this, _this.b0);
+            _this.r.cb = 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 = delegateCombine(g.closed, runOn(_this, _this.bf));
+            var h = _this.e;
+            h.valueChanged = delegateCombine(h.valueChanged, runOn(_this, _this.bg));
+            d.o = runOn(_this, _this.b0);
+            var i = _this.e;
+            i.valueChanged = delegateCombine(i.valueChanged, 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 (!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 = 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 = markType(ColorEditor, 'ColorEditor', Base.$, [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;
 }(Base));
 /**
@@ -40556,10 +40691,10 @@ var IgxColorEditorComponent = /** @class */ /*@__PURE__*/ (function () {
          * 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
@@ -40569,10 +40704,10 @@ var IgxColorEditorComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the text.
         */
         get: function () {
-            return brushToString(this.i.cn);
+            return brushToString(this.i.cq);
         },
         set: function (v) {
-            this.i.cn = stringToBrush(v);
+            this.i.cq = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -40582,15 +40717,15 @@ var IgxColorEditorComponent = /** @class */ /*@__PURE__*/ (function () {
          * 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 FontInfo();
             fi.fontString = v;
-            this.i.o = fi;
+            this.i.p = fi;
         },
         enumerable: false,
         configurable: true
@@ -40600,10 +40735,10 @@ var IgxColorEditorComponent = /** @class */ /*@__PURE__*/ (function () {
          * 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 = ensureEnum(ControlDisplayDensity_$type, v);
+            this.i.l = ensureEnum(ControlDisplayDensity_$type, v);
         },
         enumerable: false,
         configurable: true
@@ -40613,10 +40748,10 @@ var IgxColorEditorComponent = /** @class */ /*@__PURE__*/ (function () {
          * 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 = ensureEnum(BaseControlTheme_$type, v);
+            this.i.j = ensureEnum(BaseControlTheme_$type, v);
         },
         enumerable: false,
         configurable: true
@@ -40626,15 +40761,15 @@ var IgxColorEditorComponent = /** @class */ /*@__PURE__*/ (function () {
          * 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 FontInfo();
             fi.fontString = v;
-            this.i.p = fi;
+            this.i.q = fi;
         },
         enumerable: false,
         configurable: true
@@ -40644,10 +40779,10 @@ var IgxColorEditorComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or Sets the text color
         */
         get: function () {
-            return brushToString(this.i.co);
+            return brushToString(this.i.cr);
         },
         set: function (v) {
-            this.i.co = stringToBrush(v);
+            this.i.cr = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -40657,10 +40792,10 @@ var IgxColorEditorComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or Sets the text color
         */
         get: function () {
-            return brushToString(this.i.cm);
+            return brushToString(this.i.cp);
         },
         set: function (v) {
-            this.i.cm = stringToBrush(v);
+            this.i.cp = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -40670,10 +40805,10 @@ var IgxColorEditorComponent = /** @class */ /*@__PURE__*/ (function () {
          * 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 = ensureBool(v);
+            this.i.an = ensureBool(v);
         },
         enumerable: false,
         configurable: true
@@ -40683,10 +40818,10 @@ var IgxColorEditorComponent = /** @class */ /*@__PURE__*/ (function () {
          * 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 = ensureBool(v);
+            this.i.ah = ensureBool(v);
         },
         enumerable: false,
         configurable: true
@@ -40696,20 +40831,20 @@ var IgxColorEditorComponent = /** @class */ /*@__PURE__*/ (function () {
          * 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 = ensureBool(v);
+            this.i.al = ensureBool(v);
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxColorEditorComponent.prototype, "isDisabled", {
         get: function () {
-            return this.i.ah;
+            return this.i.ai;
         },
         set: function (v) {
-            this.i.ah = ensureBool(v);
+            this.i.ai = ensureBool(v);
         },
         enumerable: false,
         configurable: true
@@ -40719,10 +40854,10 @@ var IgxColorEditorComponent = /** @class */ /*@__PURE__*/ (function () {
          * 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 = ensureBool(v);
+            this.i.aj = ensureBool(v);
         },
         enumerable: false,
         configurable: true
@@ -40732,10 +40867,10 @@ var IgxColorEditorComponent = /** @class */ /*@__PURE__*/ (function () {
          * 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 = ensureBool(v);
+            this.i.ak = ensureBool(v);
         },
         enumerable: false,
         configurable: true
@@ -40745,10 +40880,10 @@ var IgxColorEditorComponent = /** @class */ /*@__PURE__*/ (function () {
          * 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 = ensureBool(v);
+            this.i.ao = ensureBool(v);
         },
         enumerable: false,
         configurable: true
@@ -40819,7 +40954,23 @@ var IgxColorEditorComponent = /** @class */ /*@__PURE__*/ (function () {
         this._inStyling = false;
     };
     IgxColorEditorComponent.prototype.select = function () {
-        this.i.b8();
+        this.i.cb();
+    };
+    /**
+     * Exports visual information about the current state of the color editor.
+    
+    */
+    IgxColorEditorComponent.prototype.exportVisualModel = function () {
+        var iv = this.i.as();
+        return (iv);
+    };
+    /**
+     * Returns a serialized copy of the exported visual model
+    
+    */
+    IgxColorEditorComponent.prototype.exportSerializedVisualModel = function () {
+        var iv = this.i.ay();
+        return (iv);
     };
     Object.defineProperty(IgxColorEditorComponent.prototype, "valueChanged", {
         /**
@@ -46361,6 +46512,47 @@ GOVERNS THE LICENSING, INSTALLATION AND USE OF INFRAGISTICS SOFTWARE. BY DOWNLOA
  */
 var IconViewType_$type = 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) {
+    __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 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 : " + enumGetBox(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 = markType(CheckboxListVisualModelExport, 'CheckboxListVisualModelExport');
+    return CheckboxListVisualModelExport;
+}(Base));
+
 /*
 THIS INFRAGISTICS ULTIMATE SOFTWARE LICENSE  AGREEMENT ("AGREEMENT") LOCATED HERE:
 https://www.infragistics.com/legal/license/igultimate-la
@@ -46426,4 +46618,4 @@ var TextBlockVisualModelExport = /** @class */ /*@__PURE__*/ (function (_super)
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonClickEventArgs, ButtonDisplayStyle_$type, ButtonGroupDisplayStyle_$type, ButtonGroupOrientation, ButtonGroupOrientation_$type, ButtonGroupSelectionChangedEventArgs, ButtonGroupView, ButtonGroupVisualModelExport, ButtonView, ButtonVisualModelExport, CalendarView, CalendarVisualModelExport, CheckboxChangeEventArgs, CheckboxLabelPosition_$type, CheckboxView, CheckboxVisualModelExport, ColorEditor, ColorEditorBridge, ColorEditorGotFocusEventArgs, ColorEditorLostFocusEventArgs, ColorEditorPanel, ColorEditorPanelClosedEventArgs, ColorEditorPanelSelectedValueChangedEventArgs, ColorEditorPanelView, ColorEditorView, DateFormats, DateFormats_$type, DatePickerView, DatePickerVisualModelExport, DateTimeValueFormatter, DayInfo, DayOfWeek, DayOfWeek_$type, DefaultMultiSliderTrackBarVisual, DefaultMultiSliderTrackRangeVisual, DefaultMultiSliderTrackThumbCalloutVisual, DefaultMultiSliderTrackThumbVisual, DefaultMultiTrackShadeVisual, ElevationHelper, FirstWeek, FirstWeek_$type, GotFocusEventArgs, IMultiSliderTrackBarVisual_$type, IMultiSliderTrackRangeVisual_$type, IMultiSliderTrackShadeVisual_$type, IMultiSliderTrackThumbCalloutVisual_$type, IMultiSliderTrackThumbVisual_$type, ISliderTrackOwner_$type, IconClickedEventArgs, IconView, IconViewType_$type, IconVisualModelExport, IgxButtonClickEventArgs, IgxButtonGroupSelectionChangedEventArgs, IgxCheckboxChangeEventArgs, IgxColorEditorComponent, IgxColorEditorDynamicModule, IgxColorEditorGotFocusEventArgs, IgxColorEditorLostFocusEventArgs, IgxColorEditorModule, IgxColorEditorPanelClosedEventArgs, IgxColorEditorPanelComponent, IgxColorEditorPanelDynamicModule, IgxColorEditorPanelModule, IgxColorEditorPanelSelectedValueChangedEventArgs, IgxGotFocusEventArgs, IgxInputChangeEventArgs, IgxLostFocusEventArgs, IgxMultiSliderComponent, IgxMultiSliderDynamicModule, IgxMultiSliderModule, IgxMultiSliderResolvingToolTipValueEventArgs, IgxMultiSliderThumb, IgxMultiSliderThumbCollection, IgxMultiSliderThumbValueChangingEventArgs, IgxMultiSliderTrackThumbRange, IgxMultiSliderYValueChangingEventArgs, IgxSelectedValueChangedEventArgs, IgxXButtonComponent, IgxXButtonDynamicModule, IgxXButtonGroupButtonCollection, IgxXButtonGroupComponent, IgxXButtonGroupDynamicModule, IgxXButtonGroupModule, IgxXButtonModule, IgxXCalendarComponent, IgxXCalendarDynamicModule, IgxXCalendarLocaleEnModule, IgxXCalendarModule, IgxXCheckboxComponent, IgxXCheckboxDynamicModule, IgxXCheckboxModule, IgxXDatePickerComponent, IgxXDatePickerDynamicModule, IgxXDatePickerModule, IgxXIconComponent, IgxXIconDynamicModule, IgxXIconModule, IgxXInputComponent, IgxXInputDynamicModule, IgxXInputGroupComponent, IgxXInputGroupDynamicModule, IgxXInputGroupInputCollection, IgxXInputGroupItemComponent, IgxXInputGroupModule, IgxXInputModule, IgxXLabelComponent, IgxXLabelDynamicModule, IgxXLabelModule, IgxXPrefixComponent, IgxXPrefixDynamicModule, IgxXPrefixModule, IgxXRippleComponent, IgxXRippleDynamicModule, IgxXRippleModule, IgxXSuffixComponent, InputChangeEventArgs, InputGroupDisplayType, InputGroupDisplayType_$type, InputGroupView, InputGroupVisualModelExport, InputShiftType, InputShiftType_$type, InputView, InputVisualModelExport, KEYCODES_$type, LabelShiftType, LabelShiftType_$type, LabelView, LabelVisualModelExport, LostFocusEventArgs, MaskOptions, MaskParsingService, MultiSlider, MultiSliderBridge, MultiSliderCursor_$type, MultiSliderHitInfo, MultiSliderOrientation, MultiSliderOrientation_$type, MultiSliderResolvingToolTipValueEventArgs, MultiSliderThumb, MultiSliderThumbCollection, MultiSliderThumbRangePosition, MultiSliderThumbRangePosition_$type, MultiSliderThumbValueChangingEventArgs, MultiSliderTrackShadeOrientation_$type, MultiSliderTrackThumbRange, MultiSliderView, MultiSliderVisualArea_$type, MultiSliderYValueChangingEventArgs, NativeUIXInputsFactory, PrefixShiftType, PrefixShiftType_$type, PrefixView, PrefixVisualModelExport, Replaced, RippleView, RippleVisualModelExport, SelectedValueChangedEventArgs, SuffixShiftType, SuffixShiftType_$type, SuffixView, SuffixVisualModelExport, TextBlockVisualModelExport, TextElementsVisualModelExport, Theme, ThemeResolver, XButton, XButtonBridge, XButtonGroup, XButtonGroupBridge, XButtonGroupButtonCollection, XCalendar, XCalendarLocaleEn, XCheckbox, XCheckboxBridge, XComponentBridge, XDatePicker, XIcon, XIconBridge, XIconButtonBridge, XInput, XInputBridge, XInputGroup, XInputGroupInputCollection, XInputGroupItem, XLabel, XPopupBridge, XPrefix, XRipple, XSuffix };
+export { ButtonClickEventArgs, ButtonDisplayStyle_$type, ButtonGroupDisplayStyle_$type, ButtonGroupOrientation, ButtonGroupOrientation_$type, ButtonGroupSelectionChangedEventArgs, ButtonGroupView, ButtonGroupVisualModelExport, ButtonView, ButtonVisualModelExport, CalendarView, CalendarVisualModelExport, CheckboxChangeEventArgs, CheckboxLabelPosition_$type, CheckboxListVisualModelExport, CheckboxView, CheckboxVisualModelExport, ColorEditor, ColorEditorBridge, ColorEditorGotFocusEventArgs, ColorEditorLostFocusEventArgs, ColorEditorPanel, ColorEditorPanelClosedEventArgs, ColorEditorPanelSelectedValueChangedEventArgs, ColorEditorPanelView, ColorEditorView, ColorEditorVisualModelExport, DateFormats, DateFormats_$type, DatePickerView, DatePickerVisualModelExport, DateTimeValueFormatter, DayInfo, DayOfWeek, DayOfWeek_$type, DefaultMultiSliderTrackBarVisual, DefaultMultiSliderTrackRangeVisual, DefaultMultiSliderTrackThumbCalloutVisual, DefaultMultiSliderTrackThumbVisual, DefaultMultiTrackShadeVisual, ElevationHelper, FirstWeek, FirstWeek_$type, GotFocusEventArgs, IMultiSliderTrackBarVisual_$type, IMultiSliderTrackRangeVisual_$type, IMultiSliderTrackShadeVisual_$type, IMultiSliderTrackThumbCalloutVisual_$type, IMultiSliderTrackThumbVisual_$type, ISliderTrackOwner_$type, IconClickedEventArgs, IconView, IconViewType_$type, IconVisualModelExport, IgxButtonClickEventArgs, IgxButtonGroupSelectionChangedEventArgs, IgxCheckboxChangeEventArgs, IgxColorEditorComponent, IgxColorEditorDynamicModule, IgxColorEditorGotFocusEventArgs, IgxColorEditorLostFocusEventArgs, IgxColorEditorModule, IgxColorEditorPanelClosedEventArgs, IgxColorEditorPanelComponent, IgxColorEditorPanelDynamicModule, IgxColorEditorPanelModule, IgxColorEditorPanelSelectedValueChangedEventArgs, IgxGotFocusEventArgs, IgxInputChangeEventArgs, IgxLostFocusEventArgs, IgxMultiSliderComponent, IgxMultiSliderDynamicModule, IgxMultiSliderModule, IgxMultiSliderResolvingToolTipValueEventArgs, IgxMultiSliderThumb, IgxMultiSliderThumbCollection, IgxMultiSliderThumbValueChangingEventArgs, IgxMultiSliderTrackThumbRange, IgxMultiSliderYValueChangingEventArgs, IgxSelectedValueChangedEventArgs, IgxXButtonComponent, IgxXButtonDynamicModule, IgxXButtonGroupButtonCollection, IgxXButtonGroupComponent, IgxXButtonGroupDynamicModule, IgxXButtonGroupModule, IgxXButtonModule, IgxXCalendarComponent, IgxXCalendarDynamicModule, IgxXCalendarLocaleEnModule, IgxXCalendarModule, IgxXCheckboxComponent, IgxXCheckboxDynamicModule, IgxXCheckboxModule, IgxXDatePickerComponent, IgxXDatePickerDynamicModule, IgxXDatePickerModule, IgxXIconComponent, IgxXIconDynamicModule, IgxXIconModule, IgxXInputComponent, IgxXInputDynamicModule, IgxXInputGroupComponent, IgxXInputGroupDynamicModule, IgxXInputGroupInputCollection, IgxXInputGroupItemComponent, IgxXInputGroupModule, IgxXInputModule, IgxXLabelComponent, IgxXLabelDynamicModule, IgxXLabelModule, IgxXPrefixComponent, IgxXPrefixDynamicModule, IgxXPrefixModule, IgxXRippleComponent, IgxXRippleDynamicModule, IgxXRippleModule, IgxXSuffixComponent, InputChangeEventArgs, InputGroupDisplayType, InputGroupDisplayType_$type, InputGroupView, InputGroupVisualModelExport, InputShiftType, InputShiftType_$type, InputView, InputVisualModelExport, KEYCODES_$type, LabelShiftType, LabelShiftType_$type, LabelView, LabelVisualModelExport, LostFocusEventArgs, MaskOptions, MaskParsingService, MultiSlider, MultiSliderBridge, MultiSliderCursor_$type, MultiSliderHitInfo, MultiSliderOrientation, MultiSliderOrientation_$type, MultiSliderResolvingToolTipValueEventArgs, MultiSliderThumb, MultiSliderThumbCollection, MultiSliderThumbRangePosition, MultiSliderThumbRangePosition_$type, MultiSliderThumbValueChangingEventArgs, MultiSliderTrackShadeOrientation_$type, MultiSliderTrackThumbRange, MultiSliderView, MultiSliderVisualArea_$type, MultiSliderYValueChangingEventArgs, NativeUIXInputsFactory, PrefixShiftType, PrefixShiftType_$type, PrefixView, PrefixVisualModelExport, Replaced, RippleView, RippleVisualModelExport, SelectedValueChangedEventArgs, SuffixShiftType, SuffixShiftType_$type, SuffixView, SuffixVisualModelExport, TextBlockVisualModelExport, TextElementsVisualModelExport, Theme, ThemeResolver, XButton, XButtonBridge, XButtonGroup, XButtonGroupBridge, XButtonGroupButtonCollection, XCalendar, XCalendarLocaleEn, XCheckbox, XCheckboxBridge, XComponentBridge, XDatePicker, XIcon, XIconBridge, XIconButtonBridge, XInput, XInputBridge, XInputGroup, XInputGroupInputCollection, XInputGroupItem, XLabel, XPopupBridge, XPrefix, XRipple, XSuffix };