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

package/fesm2015/igniteui-webcomponents-inputs.js

@@ -5,7 +5,7 @@
     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.
   */
   
-import { Base, StringBuilder, markType, List$1, Delegate_$type, fromEnum, runOn, NativeUI, ScaleTransform, KeyFrameAnimationFactory, AnimationKeyFrameEffect, LinkedList$1, IKeyFrameAnimation_$type, PropertyChangedEventArgs, AnimationKeyFrameProperty, AnimationKeyFrameEffectTiming, AppearanceHelper, INotifyPropertyChanged_$type, BrushUtil, IgcHTMLElement, NamePatcher, WebComponentRenderer, TypeRegistrar, toSpinal, getAllPropertyNames, fromSpinal, RegisterElementHelper, brushToString, stringToBrush, ensureBool, initializePropertiesFromCss, markEnum, 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, PortalManager, ensureEnum, enumToString, FontInfo, delegateRemove, delegateCombine, IgcFocusEventArgs, IgcChildContentModule, Brush, DomWrapper_$type, Tuple$2, SVGNode, FastIterationDictionary$2, typeCast, PrimitiveVisualData, Ellipse, EllipseVisualData, Rectangle, RectangleVisualData, Line, LineVisualData, Path, PathVisualData, DoubleCollection, LegendItemHelper, stringStartsWith, trimStart, IIcon_$type, fromBrushCollection, toBrushCollection, brushCollectionToString, dateMinValue, dateGetMonth, parseBool, truncate, dateNow, dateMaxValue, dateAddYears, ObservableCollection$1, dateFromValues, SRProvider, dateGetDate, stringIsNullOrWhiteSpace, dateAddDays, Number_$type, dateAddMonths, timeSpanTotalDays, intDivide, Localization, HashSet$1, stringReplace, TransformGroup, TranslateTransform, MouseButtonEventArgs, Point_$type, KeyEventArgs, toNullable, fromEn, DeviceUtils, IgcKeyEventArgs, IgCollection, SyncableObservableCollection$2, NotifyCollectionChangedAction, CollectionAdapter, Rect, stringContains, stringSplit, Popup, 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, IgcPropertyUpdatedEventArgs, SyncableObservableCollection$1, fromRect, toRect, rectToString } from 'igniteui-webcomponents-core';
+import { Base, StringBuilder, markType, List$1, Delegate_$type, fromEnum, runOn, NativeUI, ScaleTransform, KeyFrameAnimationFactory, AnimationKeyFrameEffect, LinkedList$1, IKeyFrameAnimation_$type, PropertyChangedEventArgs, AnimationKeyFrameProperty, AnimationKeyFrameEffectTiming, AppearanceHelper, INotifyPropertyChanged_$type, BrushUtil, IgcHTMLElement, NamePatcher, WebComponentRenderer, TypeRegistrar, toSpinal, getAllPropertyNames, fromSpinal, RegisterElementHelper, brushToString, stringToBrush, ensureBool, initializePropertiesFromCss, markEnum, 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, PortalManager, ensureEnum, enumToString, FontInfo, delegateRemove, delegateCombine, IgcFocusEventArgs, IgcChildContentModule, 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, fromBrushCollection, toBrushCollection, brushCollectionToString, dateMinValue, dateGetMonth, parseBool, truncate, dateNow, dateMaxValue, dateAddYears, ObservableCollection$1, dateFromValues, SRProvider, dateGetDate, stringIsNullOrWhiteSpace, dateAddDays, Number_$type, dateAddMonths, timeSpanTotalDays, intDivide, Localization, HashSet$1, stringReplace, TransformGroup, TranslateTransform, MouseButtonEventArgs, Point_$type, KeyEventArgs, toNullable, fromEn, DeviceUtils, IgcKeyEventArgs, IgCollection, SyncableObservableCollection$2, NotifyCollectionChangedAction, CollectionAdapter, Rect, stringContains, stringSplit, Popup, 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, IgcPropertyUpdatedEventArgs, SyncableObservableCollection$1, fromRect, toRect, rectToString } from 'igniteui-webcomponents-core';
 
 /*
 THIS INFRAGISTICS ULTIMATE SOFTWARE LICENSE  AGREEMENT ("AGREEMENT") LOCATED HERE:
@@ -1264,76 +1264,76 @@ let ButtonView = /*@__PURE__*/ (() => {
     class ButtonView extends Base {
         constructor() {
             super();
-            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;
         }
-        aq() {
+        ar() {
         }
-        g() {
+        h() {
             return true;
         }
-        get q() {
-            return this.n;
+        get r() {
+            return this.o;
         }
-        get s() {
-            return this.m;
+        get t() {
+            return this.n;
         }
-        ak(a) {
+        al(a) {
             if (a == null) {
-                for (let b of fromEnum(this.h)) {
+                for (let b of fromEnum(this.i)) {
                     b();
                 }
-                this.h.clear();
+                this.i.clear();
                 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");
-            let 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);
-            let d = this.k.createElement("div");
-            let 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");
+            let 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);
+            let d = this.l.createElement("div");
+            let e = this.l.getSubRenderer(d);
             d.setStyleProperty("position", "absolute");
             d.setStyleProperty("width", "100%");
             d.setStyleProperty("height", "100%");
@@ -1343,40 +1343,40 @@ let ButtonView = /*@__PURE__*/ (() => {
             let f = new XRipple();
             f.provideContainer(e);
             f.q = c;
-            let g = this.k.getExternal(f, this.k.rootWrapper, this.k.getExternal(this.b, null, null));
+            let 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);
-            let h = this.k.createElement("div");
+            this.d = f;
+            this.o.append(d);
+            let 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", (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", (i) => {
                 let 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);
-                    let direction_ = this.b.g4;
-                    let display_ = this.b.fj != null ? this.b.fj : this.b.f0;
-                    let alignItems_ = this.b.fb;
+                    this.p.setStyleProperty("flex-direction", this.c.g4);
+                    this.p.setStyleProperty("align-items", this.c.fb);
+                    let direction_ = this.c.g4;
+                    let display_ = this.c.fj != null ? this.c.fj : this.c.f0;
+                    let alignItems_ = this.c.fb;
                     comp_.display = display_;
                     comp_.flexDirection = direction_;
                     comp_.alignItems = alignItems_;
                 }
             }, true);
-            this.b.kl();
+            this.c.kl();
         }
-        am() {
-            this.c.i = this.b.as;
+        an() {
+            this.d.i = this.c.as;
         }
-        a0() {
+        a1() {
             let a = "2.25rem";
             let b = "2.25rem";
             let c = "2.25rem";
@@ -1390,7 +1390,7 @@ let ButtonView = /*@__PURE__*/ (() => {
             let k = "0px";
             let l = ".9375rem";
             let m = ".5625rem 1rem";
-            switch (this.b.q) {
+            switch (this.c.q) {
                 case 2:
                     m = ".375rem .75rem";
                     j = "1.875rem";
@@ -1423,130 +1423,130 @@ let ButtonView = /*@__PURE__*/ (() => {
                     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%");
             }
         }
-        au() {
-            switch (this.b.le) {
+        av() {
+            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;
             }
         }
+        ax(a) {
+            this.k = a;
+        }
         aw(a) {
             this.j = a;
         }
-        av(a) {
-            this.i = a;
-        }
-        as() {
-            this.n.setAttribute("disabled", this.b.disabled ? "true" : "false");
-            this.n.setProperty("disabled", this.b.disabled);
+        at() {
+            this.o.setAttribute("disabled", this.c.disabled ? "true" : "false");
+            this.o.setProperty("disabled", this.c.disabled);
         }
-        an() {
-            if (this.k != null) {
-                this.k.rootWrapper.setStyleProperty("display", this.b.f0);
-                let comp_ = this.p;
-                if (this.p != null) {
-                    this.o.setStyleProperty("display", this.b.f0);
-                    let display_ = this.b.fj != null ? this.b.f0 : this.b.fj;
+        ao() {
+            if (this.l != null) {
+                this.l.rootWrapper.setStyleProperty("display", this.c.f0);
+                let comp_ = this.q;
+                if (this.q != null) {
+                    this.p.setStyleProperty("display", this.c.f0);
+                    let display_ = this.c.fj != null ? this.c.f0 : this.c.fj;
                     comp_.display = display_;
                 }
-                let ext_ = this.k.getExternal(this.b, null, null);
+                let ext_ = this.l.getExternal(this.c, null, null);
                 if (ext_ && ext_._onDisplayChanged) {
                     ext_._onDisplayChanged();
                 }
                 ;
             }
         }
-        aj() {
-            if (this.k != null) {
-                let comp_ = this.p;
-                if (this.p != null) {
-                    let display_ = this.b.fj != null ? this.b.fj : this.b.f0;
+        ak() {
+            if (this.l != null) {
+                let comp_ = this.q;
+                if (this.q != null) {
+                    let display_ = this.c.fj != null ? this.c.fj : this.c.f0;
                     comp_.display = display_;
                 }
             }
         }
-        ah() {
-            if (this.k != null) {
-                this.k.rootWrapper.setStyleProperty("align-items", this.b.fb);
-                this.n.setStyleProperty("align-items", this.b.fb);
-                let comp_ = this.p;
-                if (this.p != null) {
-                    this.o.setStyleProperty("align-items", this.b.fb);
-                    let alignItems_ = this.b.fb;
+        ai() {
+            if (this.l != null) {
+                this.l.rootWrapper.setStyleProperty("align-items", this.c.fb);
+                this.o.setStyleProperty("align-items", this.c.fb);
+                let comp_ = this.q;
+                if (this.q != null) {
+                    this.p.setStyleProperty("align-items", this.c.fb);
+                    let alignItems_ = this.c.fb;
                     comp_.alignItems = alignItems_;
                 }
-                let ext_ = this.k.getExternal(this.b, null, null);
+                let ext_ = this.l.getExternal(this.c, null, null);
                 if (ext_ && ext_._onAlignItemsChanged) {
                     ext_._onAlignItemsChanged();
                 }
                 ;
             }
         }
-        ao() {
-            if (this.k != null) {
-                this.k.rootWrapper.setStyleProperty("flex-direction", this.b.g4);
-                this.n.setStyleProperty("flex-direction", this.b.g4);
-                let ext_ = this.k.getExternal(this.b, null, null);
-                let comp_ = this.p;
-                if (this.p != null) {
-                    this.o.setStyleProperty("flex-direction", this.b.g4);
-                    let direction_ = this.b.g4;
+        ap() {
+            if (this.l != null) {
+                this.l.rootWrapper.setStyleProperty("flex-direction", this.c.g4);
+                this.o.setStyleProperty("flex-direction", this.c.g4);
+                let ext_ = this.l.getExternal(this.c, null, null);
+                let comp_ = this.q;
+                if (this.q != null) {
+                    this.p.setStyleProperty("flex-direction", this.c.g4);
+                    let direction_ = this.c.g4;
                     comp_.flexDirection = direction_;
                 }
                 if (ext_ && ext_._onFlexDirectionChanged) {
@@ -1555,147 +1555,147 @@ let ButtonView = /*@__PURE__*/ (() => {
                 ;
             }
         }
-        ap() {
-            if (this.k != null) {
-                this.k.rootWrapper.setStyleProperty("flex-grow", this.b.g6);
-                this.n.setStyleProperty("flex-grow", this.b.g6);
-                let ext_ = this.k.getExternal(this.b, null, null);
+        aq() {
+            if (this.l != null) {
+                this.l.rootWrapper.setStyleProperty("flex-grow", this.c.g6);
+                this.o.setStyleProperty("flex-grow", this.c.g6);
+                let ext_ = this.l.getExternal(this.c, null, null);
                 if (ext_ && ext_._onFlexGrowChanged) {
                     ext_._onFlexGrowChanged();
                 }
                 ;
             }
         }
-        t(a) {
+        u(a) {
         }
-        ax() {
-            if (this.g()) {
-                let 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());
+        ay() {
+            if (this.h()) {
+                let 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");
             }
         }
-        ar() {
-            if (this.g()) {
-                let a = this.b.hy;
-                this.n.setAttribute("id", a);
+        as() {
+            if (this.h()) {
+                let a = this.c.hy;
+                this.o.setAttribute("id", a);
             }
         }
-        v(a) {
-            this.b.kh();
-            if (this.b.a5) {
+        w(a) {
+            this.c.kh();
+            if (this.c.a5) {
                 a.stopPropagation();
             }
         }
-        w(a) {
-            this.b.ki();
-            if (this.b.a5) {
+        x(a) {
+            this.c.ki();
+            if (this.c.a5) {
                 a.stopPropagation();
             }
         }
-        u(a) {
-            this.b.kg();
-            if (this.b.a5) {
+        v(a) {
+            this.c.kg();
+            if (this.c.a5) {
                 a.stopPropagation();
             }
         }
-        x(a) {
-            this.b.kj();
-            if (this.b.a5) {
+        y(a) {
+            this.c.kj();
+            if (this.c.a5) {
                 a.stopPropagation();
             }
         }
-        y(a) {
-            this.b.ka();
+        z(a) {
+            this.c.ka();
         }
-        ab(a) {
-            this.b.kd();
+        ac(a) {
+            this.c.kd();
         }
-        aa(a) {
-            this.b.kb();
-            if (!this.b.at) {
+        ab(a) {
+            this.c.kb();
+            if (!this.c.at) {
                 a.preventDefault();
             }
-            if (this.b.a5) {
+            if (this.c.a5) {
                 a.stopPropagation();
             }
         }
-        ac(a) {
-            this.b.ke();
-        }
         ad(a) {
-            this.b.kf(a.originalEvent.relatedTarget, a.originalEvent.target);
+            this.c.ke();
         }
-        f() {
+        ae(a) {
+            this.c.kf(a.originalEvent.relatedTarget, a.originalEvent.target);
+        }
+        g() {
             return false;
         }
-        z(a) {
+        aa(a) {
         }
-        ag() {
+        ah() {
             if (KeyFrameAnimationFactory.h == null) {
-                KeyFrameAnimationFactory.h = this.k;
+                KeyFrameAnimationFactory.h = this.l;
             }
         }
-        ai() {
-            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)));
+        aj() {
+            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)));
         }
-        al() {
-            this.e = false;
-            for (let a of fromEnum(this.h)) {
+        am() {
+            this.f = false;
+            for (let a of fromEnum(this.i)) {
                 a();
             }
-            this.h.clear();
+            this.i.clear();
         }
-        at() {
-            let model_ = this.b;
+        au() {
+            let model_ = this.c;
             if (model_.externalObject && model_.externalObject.refreshDefaults) {
                 model_.externalObject.refreshDefaults();
             }
             ;
         }
-        ay(a, b) {
-            this.c.ax = a;
-            this.c.aw = b;
-        }
         az(a, b) {
-            let 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;
         }
-        a1(a) {
+        a0(a, b) {
+            let c = ElevationHelper.e(a, this.c.n0, this.c.nx, this.c.nn, b);
+            this.o.setStyleProperty("box-shadow", c);
+        }
+        a2(a) {
             if (a != null) {
-                this.m.setStyleProperty("font", a.fontString);
+                this.n.setStyleProperty("font", a.fontString);
             }
         }
-        ae(a) {
-            this.m.append(a);
+        af(a) {
+            this.n.append(a);
         }
-        af() {
-            this.m.removeChildren();
+        ag() {
+            this.n.removeChildren();
         }
-        r() {
-            return this.m.getChildCount() > 0 ? this.m.getChildAt(0) : null;
+        s() {
+            return this.n.getChildCount() > 0 ? this.n.getChildAt(0) : null;
         }
-        a() {
-            let rect_ = this.k.rootWrapper.getNativeElement().getBoundingClientRect();
+        b() {
+            let rect_ = this.l.rootWrapper.getNativeElement().getBoundingClientRect();
             let a = (rect_.top);
             let b = (rect_.left);
             let c = new Array(2);
@@ -1703,6 +1703,12 @@ let ButtonView = /*@__PURE__*/ (() => {
             c[1] = b;
             return c;
         }
+        a() {
+            let a = new Array(2);
+            a[0] = NativeUI.k(this.r);
+            a[1] = NativeUI.d(this.r);
+            return a;
+        }
     }
     ButtonView.$t = /*@__PURE__*/ markType(ButtonView, 'ButtonView');
     return ButtonView;
@@ -1975,9 +1981,9 @@ let XButton = /*@__PURE__*/ (() => {
             this.gotFocus = null;
             this.lostFocus = null;
             let a = new ButtonView();
-            a.b = this;
+            a.c = this;
             this.view = a;
-            this.view.aq();
+            this.view.ar();
         }
         get view() {
             return this._view;
@@ -2108,7 +2114,7 @@ let XButton = /*@__PURE__*/ (() => {
                 case "IsDisabled":
                     this.as = this.disabled || this.aw;
                     this.kq();
-                    this.view.as();
+                    this.view.at();
                     this.kp();
                     break;
                 case "DisableRipple":
@@ -2120,7 +2126,7 @@ let XButton = /*@__PURE__*/ (() => {
                     this.kp();
                     break;
                 case "ActualDisableRipple":
-                    this.view.am();
+                    this.view.an();
                     break;
                 case "ActualBackgroundColor":
                 case "ActualDisabledBackgroundColor":
@@ -2143,11 +2149,11 @@ let XButton = /*@__PURE__*/ (() => {
                     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;
@@ -2156,43 +2162,43 @@ let XButton = /*@__PURE__*/ (() => {
                 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;
             }
         }
@@ -2376,7 +2382,7 @@ let XButton = /*@__PURE__*/ (() => {
             }
         }
         kp() {
-            let a = this.view.q;
+            let a = this.view.r;
             if (a == null) {
                 return;
             }
@@ -2386,17 +2392,17 @@ let XButton = /*@__PURE__*/ (() => {
                 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) {
@@ -2413,26 +2419,26 @@ let XButton = /*@__PURE__*/ (() => {
                     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);
                 }
             }
         }
@@ -4133,7 +4139,7 @@ let XButton = /*@__PURE__*/ (() => {
         }
         kl() {
             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();
         }
         get a() {
@@ -4143,25 +4149,25 @@ let XButton = /*@__PURE__*/ (() => {
             return a;
         }
         j8() {
-            this.view.ag();
+            this.view.ah();
         }
         onDetachedFromUI() {
-            this.view.al();
+            this.view.am();
         }
         onAttachedToUI() {
-            this.view.ai();
+            this.view.aj();
         }
         appendButtonContent(a) {
-            this.view.ae(a);
+            this.view.af(a);
         }
         clearButtonContent() {
-            this.view.af();
+            this.view.ag();
         }
         getButtonContent() {
-            return this.view.r();
+            return this.view.s();
         }
         a4() {
-            return this.view.g();
+            return this.view.h();
         }
         eb() {
             return this.b();
@@ -4171,14 +4177,15 @@ let XButton = /*@__PURE__*/ (() => {
             return a.serialize();
         }
         b() {
-            let a = this.view.q;
-            let b = this.view.s;
+            let a = this.view.r;
+            let b = this.view.t;
             let c = new ButtonVisualModelExport();
-            let d = this.view.a();
+            let d = this.view.b();
             c.s = d[0];
             c.q = d[1];
-            c.p = NativeUI.d(a);
-            c.t = NativeUI.k(a);
+            let 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));
@@ -4196,44 +4203,44 @@ let XButton = /*@__PURE__*/ (() => {
             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) {
-                let e = this.aa;
-                if (this.view != null && e.q == null) {
-                    let f = this.view.k;
-                    let 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;
+                let f = this.aa;
+                if (this.view != null && f.q == null) {
+                    let g = this.view.l;
+                    let 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;
         }
         provideContainer(a) {
-            this.view.ak(a);
+            this.view.al(a);
         }
     }
     XButton.$t = /*@__PURE__*/ markType(XButton, 'XButton', Base.$, [INotifyPropertyChanged_$type]);
@@ -7193,6 +7200,9 @@ let IconView = /*@__PURE__*/ (() => {
                 this.v.rootWrapper.setStyleProperty("font", a.fontString);
             }
         }
+        a2() {
+            return new Size(1, this.v.rootWrapper.width(), this.v.rootWrapper.height());
+        }
         b() {
             let rect_ = this.v.rootWrapper.getNativeElement().getBoundingClientRect();
             let a = (rect_.top);
@@ -8149,38 +8159,39 @@ let XIcon = /*@__PURE__*/ (() => {
             let 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);
+            let 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) {
-                let c = this.o;
-                if (this.view != null && c.q == null) {
-                    let d = this.view.v;
-                    let 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;
+                let d = this.o;
+                if (this.view != null && d.q == null) {
+                    let e = this.view.v;
+                    let 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;
@@ -12864,8 +12875,8 @@ let InputGroupVisualModelExport = /*@__PURE__*/ (() => {
                 if (e != 0) {
                     a.l(",");
                 }
-                let f = this.k._inner[e].k.charAt(0).toString().toLowerCase() + this.k._inner[e].k.substr(1);
-                a.l(this.k._inner[e].n());
+                let 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 : [");
@@ -12979,60 +12990,62 @@ let InputVisualModelExport = /*@__PURE__*/ (() => {
     class InputVisualModelExport extends Base {
         constructor() {
             super(...arguments);
-            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;
         }
-        n() {
+        p() {
             let 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();
         }
@@ -14025,43 +14038,43 @@ let InputView = /*@__PURE__*/ (() => {
     class InputView extends Base {
         constructor() {
             super();
-            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;
         }
-        as() {
+        at() {
         }
-        h() {
+        i() {
             return true;
         }
-        get q() {
-            return this.m;
+        get r() {
+            return this.n;
         }
-        get bd() {
+        get be() {
             return null;
         }
-        get i() {
+        get j() {
             return true;
         }
-        ap(a) {
+        aq(a) {
             if (a == null) {
-                for (let b of fromEnum(this.j)) {
+                for (let b of fromEnum(this.k)) {
                     b();
                 }
-                this.j.clear();
+                this.k.clear();
             }
-            this.l = a;
-            this.l.rootWrapper.setStyleProperty("display", "inline-block");
-            let c = this.l.createElement("input");
-            c.setAttribute("type", this.b.b8);
+            this.m = a;
+            this.m.rootWrapper.setStyleProperty("display", "inline-block");
+            let 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");
@@ -14080,75 +14093,75 @@ let InputView = /*@__PURE__*/ (() => {
             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();
         }
-        a0(a) {
+        a1(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");
             }
         }
-        ay(a) {
+        az(a) {
             if (a) {
-                this.m.setAttribute("disabled", "true");
+                this.n.setAttribute("disabled", "true");
             }
             else {
-                this.m.getNativeElement().removeAttribute("disabled");
+                this.n.getNativeElement().removeAttribute("disabled");
             }
         }
-        a5(a) {
-            this.m.setStyleProperty("text-align", this.t(a));
+        a6(a) {
+            this.n.setStyleProperty("text-align", this.u(a));
         }
-        a4(a) {
+        a5(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");
             }
         }
-        ab(a) {
-            this.g = true;
-            this.b.c3();
+        ac(a) {
+            this.h = true;
+            this.c.c3();
         }
-        aa(a) {
-            this.g = false;
+        ab(a) {
+            this.h = false;
             let b = null;
             if (a.originalEvent != null) {
                 b = (a.originalEvent.data);
             }
-            this.b.c2(b);
+            this.c.c2(b);
         }
-        t(a) {
+        u(a) {
             switch (a) {
                 case 0: return "left";
                 case 2: return "right";
@@ -14156,53 +14169,53 @@ let InputView = /*@__PURE__*/ (() => {
             }
             return "left";
         }
-        aw() {
-            this.m.setAttribute("type", this.b.b8);
-            if (this.b.b8 == "date") {
-                this.m.setStyleProperty("line-height", "normal");
+        ax() {
+            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");
             }
         }
-        au() {
-            this.m.setAttribute("placeholder", this.b.cg);
+        av() {
+            this.n.setAttribute("placeholder", this.c.cg);
         }
-        a9() {
-            switch (this.b.z) {
+        ba() {
+            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;
             }
         }
-        a8() {
-            let a = this.k();
+        a9() {
+            let a = this.l();
             if (isNaN_(a) || a == 0) {
-                if (!this.f) {
-                    this.f = true;
-                    this.l.setTimeout(() => {
-                        this.f = false;
-                        this.a8();
+                if (!this.g) {
+                    this.g = true;
+                    this.m.setTimeout(() => {
+                        this.g = false;
+                        this.a9();
                     }, 100);
                 }
             }
             let b = new TransformGroup();
             b.j.add(((() => {
                 let $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(((() => {
@@ -14211,194 +14224,203 @@ let InputView = /*@__PURE__*/ (() => {
                 $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");
         }
-        k() {
-            let a = this.l.rootWrapper.getStyleProperty("height");
+        l() {
+            let a = this.m.rootWrapper.getStyleProperty("height");
             let b = parseFloat(stringReplace(a, "px", ""));
             return b;
         }
-        ax(a) {
-            this.m.setProperty("value", a);
+        ay(a) {
+            this.n.setProperty("value", a);
         }
-        az(a) {
-            this.m.setAttribute("name", a);
+        a0(a) {
+            this.n.setAttribute("name", a);
         }
-        x(a) {
-            this.b.cz();
+        y(a) {
+            this.c.cz();
         }
-        ae(a) {
-            this.b.c7();
+        af(a) {
+            this.c.c7();
         }
-        ai(a) {
-            let b = this.bc(a);
-            this.b.dd(b);
+        aj(a) {
+            let b = this.bd(a);
+            this.c.dd(b);
             if (b.handled) {
                 a.preventDefault();
             }
         }
-        aj(a) {
-            let b = this.bc(a);
-            this.b.dg(b);
+        ak(a) {
+            let b = this.bd(a);
+            this.c.dg(b);
             if (b.handled) {
                 a.preventDefault();
             }
         }
-        bc(a) {
+        bd(a) {
             let b = new MouseButtonEventArgs();
             b.position = { $type: Point_$type, x: a.offsetX, y: a.offsetY };
             return b;
         }
-        y(a) {
-            this.b.c0();
-        }
         z(a) {
-            this.b.c1();
+            this.c.c0();
         }
-        af(a) {
-            let b = new KeyEventArgs(0, a);
-            this.b.da(b);
+        aa(a) {
+            this.c.c1();
         }
-        ah(a) {
+        ag(a) {
             let b = new KeyEventArgs(0, a);
-            this.b.dc(b);
+            this.c.da(b);
         }
-        ag(a) {
+        ai(a) {
             let b = new KeyEventArgs(0, a);
-            this.b.db(b);
+            this.c.dc(b);
         }
-        ak(a) {
-            this.b.dh();
+        ah(a) {
+            let b = new KeyEventArgs(0, a);
+            this.c.db(b);
         }
-        ac(a) {
-            this.b.c5();
+        al(a) {
+            this.c.dh();
         }
         ad(a) {
-            this.b.c6();
+            this.c.c5();
         }
-        ba(a) {
-            if (this.r != a) {
-                this.r = a;
-                if (this.n != null) {
-                    this.n.setAttribute("d", this.r);
+        ae(a) {
+            this.c.c6();
+        }
+        bb(a) {
+            if (this.s != a) {
+                this.s = a;
+                if (this.o != null) {
+                    this.o.setAttribute("d", this.s);
                 }
             }
         }
-        s() {
-            return this.m.getProperty("value");
+        t() {
+            return this.n.getProperty("value");
         }
-        u(a) {
+        v(a) {
         }
-        a7() {
-            if (this.h()) {
-                if (this.b.as) {
-                    this.m.setAttribute("tabindex", this.b.be.toString());
+        a8() {
+            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");
                 }
             }
         }
-        p() {
-            let a = this.m.getProperty("selectionStart");
+        q() {
+            let a = this.n.getProperty("selectionStart");
             return typeGetValue(a);
         }
-        o() {
-            let a = this.m.getProperty("selectionEnd");
+        p() {
+            let a = this.n.getProperty("selectionEnd");
             return typeGetValue(a);
         }
-        a3(a) {
-            this.m.setProperty("selectionStart", a);
+        a4(a) {
+            this.n.setProperty("selectionStart", a);
         }
-        a1(a) {
-            this.m.setProperty("selectionEnd", a);
+        a2(a) {
+            this.n.setProperty("selectionEnd", a);
         }
-        at() {
-            if (this.h()) {
+        au() {
+            if (this.i()) {
             }
         }
-        v(a) {
-            this.b.de();
-        }
         w(a) {
-            this.b.df();
+            this.c.de();
         }
-        an() {
-            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)));
+        x(a) {
+            this.c.df();
         }
-        aq() {
-            this.d = false;
-            for (let a of fromEnum(this.j)) {
+        ao() {
+            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)));
+        }
+        ar() {
+            this.e = false;
+            for (let a of fromEnum(this.k)) {
                 a();
             }
-            this.j.clear();
+            this.k.clear();
         }
-        bb(a) {
+        bc(a) {
             if (a != null) {
-                this.m.setStyleProperty("font", a.fontString);
+                this.n.setStyleProperty("font", a.fontString);
             }
         }
-        a6() {
+        a7() {
         }
-        ao() {
-            if (this.m != null) {
-                let a = this.m.getNativeElement();
+        ap() {
+            if (this.n != null) {
+                let a = this.n.getNativeElement();
                 a.blur();
             }
         }
-        ar(a) {
-            if (this.m != null) {
-                this.m.focus(a);
+        as(a) {
+            if (this.n != null) {
+                this.n.focus(a);
             }
         }
-        av() {
-            if (this.m != null) {
-                let nativeInput_ = this.m;
+        aw() {
+            if (this.n != null) {
+                let nativeInput_ = this.n;
                 nativeInput_.getNativeElement().select();
             }
         }
-        a2(a, b) {
-            if (this.m != null) {
-                let c = this.m.getNativeElement();
+        a3(a, b) {
+            if (this.n != null) {
+                let c = this.n.getNativeElement();
                 c.setSelectionRange(a, b);
             }
         }
-        al() {
+        am() {
             if (KeyFrameAnimationFactory.h == null) {
-                KeyFrameAnimationFactory.h = this.l;
+                KeyFrameAnimationFactory.h = this.m;
             }
         }
-        a(a) {
-            return new AnimationKeyFrameEffect(0, this.l.rootWrapper, 0, null, a);
+        b(a) {
+            return new AnimationKeyFrameEffect(0, this.m.rootWrapper, 0, null, a);
         }
-        am() {
-            if (InputView.e) {
+        an() {
+            if (InputView.f) {
                 return;
             }
             let 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}";
-            let b = this.l.createElement("style");
+            let b = this.m.createElement("style");
             b.setRawText(a);
             document.head.appendChild(b.getNativeElement());
-            InputView.e = true;
+            InputView.f = true;
+        }
+        a() {
+            let rect_ = this.n.getNativeElement().getBoundingClientRect();
+            let a = (rect_.top);
+            let b = (rect_.left);
+            let c = new Array(2);
+            c[0] = a;
+            c[1] = b;
+            return c;
         }
     }
     InputView.$t = /*@__PURE__*/ markType(InputView, 'InputView');
-    InputView.e = false;
+    InputView.f = false;
     return InputView;
 })();
 /**
@@ -15450,7 +15472,7 @@ let XInputGroup = /*@__PURE__*/ (() => {
             return a;
         }
         onChildrenMutated() {
-            this.jr((a) => a.view.a8());
+            this.jr((a) => a.view.a9());
             this.js((a) => a.view.aj());
             this.jt((a) => a.view.r());
             this.ju((a) => a.view.r());
@@ -16898,7 +16920,7 @@ let XInputGroup = /*@__PURE__*/ (() => {
             this.view.ag();
         }
         ensureShift() {
-            this.jr((a) => a.view.a8());
+            this.jr((a) => a.view.a9());
             this.js((a) => a.view.aj());
             this.jt((a) => a.view.r());
             this.ju((a) => a.view.r());
@@ -18197,9 +18219,9 @@ let XInput = /*@__PURE__*/ (() => {
             this.a0 = false;
             this.u = new MaskParsingService();
             let 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";
         }
@@ -18307,7 +18329,7 @@ let XInput = /*@__PURE__*/ (() => {
                     break;
                 case "Value":
                     if (!this.al) {
-                        this.view.ax(this.cq);
+                        this.view.ay(this.cq);
                         if (this.b != null) {
                             this.b.kh();
                         }
@@ -18317,14 +18339,14 @@ let XInput = /*@__PURE__*/ (() => {
                     }
                     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();
@@ -18347,33 +18369,33 @@ let XInput = /*@__PURE__*/ (() => {
                     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;
             }
         }
         di() {
-            this.view.au();
+            this.view.av();
         }
         dk() {
-            this.view.aw();
+            this.view.ax();
         }
         dj() {
-            this.view.a8();
+            this.view.a9();
         }
         c8() {
-            this.view.a8();
+            this.view.a9();
         }
         dv() {
             this.d4 = this.d8 != null ? this.d8 : XInput.d6;
@@ -18382,10 +18404,10 @@ let XInput = /*@__PURE__*/ (() => {
         }
         du() {
             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();
         }
         get d4() {
             return this.d0;
@@ -18499,12 +18521,12 @@ let XInput = /*@__PURE__*/ (() => {
         }
         c0() {
             this.al = true;
-            this.cq = this.view.s();
+            this.cq = this.view.t();
             if (this.change != null) {
                 this.change(this, ((() => {
                     let $ret = new InputChangeEventArgs();
                     $ret.value = this.cq;
-                    $ret.isCompositionInProgress = this.view.g;
+                    $ret.isCompositionInProgress = this.view.h;
                     return $ret;
                 })()));
             }
@@ -18512,7 +18534,7 @@ let XInput = /*@__PURE__*/ (() => {
         }
         c1() {
             this.al = true;
-            this.cq = this.view.s();
+            this.cq = this.view.t();
             this.al = false;
             if (this.ce != null) {
                 this.aq = true;
@@ -18555,7 +18577,7 @@ let XInput = /*@__PURE__*/ (() => {
                 this.changing(this, ((() => {
                     let $ret = new InputChangeEventArgs();
                     $ret.value = this.cq;
-                    $ret.isCompositionInProgress = this.view.g;
+                    $ret.isCompositionInProgress = this.view.h;
                     return $ret;
                 })()));
             }
@@ -18648,7 +18670,7 @@ let XInput = /*@__PURE__*/ (() => {
         cu() {
             this.a9 = 0;
             this.aj = false;
-            this.view.a7();
+            this.view.a8();
         }
         get b2() {
             return this.bl;
@@ -18726,83 +18748,86 @@ let XInput = /*@__PURE__*/ (() => {
         dl() {
         }
         onDetachedFromUI() {
-            this.view.aq();
+            this.view.ar();
         }
         onAttachedToUI() {
-            this.view.an();
+            this.view.ao();
         }
         az() {
-            return this.view.h();
+            return this.view.i();
         }
         bg() {
             return this.j();
         }
         b1() {
             let a = this.j();
-            return a.n();
+            return a.p();
         }
         j() {
             let a = new InputVisualModelExport();
-            let b = this.view.q;
-            a.h = this.view.l.rootWrapper.getNativeElement().offsetTop;
-            a.f = this.view.l.rootWrapper.getNativeElement().offsetLeft;
+            let b = this.view.r;
+            let 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) {
-                let c = this.ad;
-                if (this.view != null && c.q == null) {
-                    let d = this.view.l;
-                    let 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;
+                let d = this.ad;
+                if (this.view != null && d.q == null) {
+                    let e = this.view.m;
+                    let 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;
         }
         dr(a, b) {
-            this.view.a2(a, b);
+            this.view.a3(a, b);
         }
         provideContainer(a) {
-            this.view.ap(a);
+            this.view.aq(a);
         }
         ct() {
             this.cz();
-            this.view.ao();
+            this.view.ap();
         }
         focus(a = false) {
             this.c7();
-            this.view.ar(a);
+            this.view.as(a);
         }
         dp() {
-            this.view.av();
+            this.view.aw();
         }
         dt(a) {
             this.aq = true;
@@ -18836,7 +18861,7 @@ let XInput = /*@__PURE__*/ (() => {
                 this.changing(this, ((() => {
                     let $ret = new InputChangeEventArgs();
                     $ret.value = this.cq;
-                    $ret.isCompositionInProgress = this.view.g;
+                    $ret.isCompositionInProgress = this.view.h;
                     return $ret;
                 })()));
             }
@@ -18849,24 +18874,24 @@ let XInput = /*@__PURE__*/ (() => {
             this.q = 0;
         }
         bb() {
-            let a = this.view.p();
-            let b = this.view.o();
+            let a = this.view.q();
+            let b = this.view.p();
             return a == b && this.ai ? b - this.bk.length : a;
         }
         ba() {
-            return this.view.o();
+            return this.view.p();
         }
         get selectionStart() {
             return this.bb();
         }
         set selectionStart(a) {
-            this.view.a3(a);
+            this.view.a4(a);
         }
         get selectionEnd() {
             return this.ba();
         }
         set selectionEnd(a) {
-            this.view.a1(a);
+            this.view.a2(a);
         }
         get ay() {
             return this.ap;
@@ -18897,9 +18922,9 @@ let XInput = /*@__PURE__*/ (() => {
             this.dm(this.ag, this.ay);
         }
         cw() {
-            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)));
             }
         }
         get i() {
@@ -25421,7 +25446,16 @@ let XInputBridge = /*@__PURE__*/ (() => {
             window.setTimeout(() => e.dr(b, c), 0);
         }
         exportVisualData(a) {
-            return a.fe();
+            if (!(typeCast(XInputGroup.$, a) !== null)) {
+                return null;
+            }
+            let b = a;
+            if (b.inputs == null || b.inputs.count == 0 || !(typeCast(XInput.$, b.inputs._inner[0]) !== null)) {
+                return null;
+            }
+            let c = b.inputs._inner[0];
+            let d = c.bg();
+            return d;
         }
     }
     XInputBridge.$t = /*@__PURE__*/ markType(XInputBridge, 'XInputBridge', XComponentBridge.$, [INativeUIInputBridge_$type]);
@@ -25548,7 +25582,7 @@ let XButtonBridge = /*@__PURE__*/ (() => {
                     }
                     else {
                         this.ac = c;
-                        let e = d.view.k.createElement("span");
+                        let e = d.view.l.createElement("span");
                         e.setText(this.ac == null ? null : this.ac.toString());
                         d.appendButtonContent(e);
                     }
@@ -26919,7 +26953,7 @@ let MultiSliderView = /*@__PURE__*/ (() => {
             this.v = i;
             let 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;
@@ -26994,7 +27028,7 @@ let MultiSliderView = /*@__PURE__*/ (() => {
                 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();
             }
         }
@@ -28711,6 +28745,10 @@ let ButtonGroupVisualModelExport = /*@__PURE__*/ (() => {
     class ButtonGroupVisualModelExport extends Base {
         constructor() {
             super(...arguments);
+            this.m = 0;
+            this.n = 0;
+            this.o = 0;
+            this.l = 0;
             this.e = 0;
             this.f = 0;
             this.a = null;
@@ -28723,9 +28761,13 @@ let ButtonGroupVisualModelExport = /*@__PURE__*/ (() => {
             this.h = false;
             this.i = null;
         }
-        l() {
+        p() {
             let 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 + ", ");
@@ -29980,7 +30022,7 @@ let XButtonGroup = /*@__PURE__*/ (() => {
         }
         bq() {
             let a = this.e();
-            return a.l();
+            return a.p();
         }
         e() {
             let a = new ButtonGroupVisualModelExport();
@@ -30214,7 +30256,13 @@ let XButtonGroupBridge = /*@__PURE__*/ (() => {
             }
         }
         exportVisualData(a) {
-            return a.a5();
+            let b = a.a5();
+            let c = this.getBoundingRect(a);
+            b.m = c.left;
+            b.n = c.top;
+            b.o = c.width;
+            b.l = c.height;
+            return b;
         }
         addButton(a, b) {
             this.v.add(b);
@@ -30302,6 +30350,10 @@ let CheckboxVisualModelExport = /*@__PURE__*/ (() => {
     class CheckboxVisualModelExport extends Base {
         constructor() {
             super(...arguments);
+            this.r = 0;
+            this.t = 0;
+            this.u = 0;
+            this.q = 0;
             this.f = 0;
             this.d = null;
             this.c = null;
@@ -30310,20 +30362,24 @@ let CheckboxVisualModelExport = /*@__PURE__*/ (() => {
             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;
             this.k = false;
             this.i = false;
         }
-        s() {
+        w() {
             let 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 + ", ");
@@ -30331,11 +30387,11 @@ let CheckboxVisualModelExport = /*@__PURE__*/ (() => {
             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 + ", ");
@@ -30363,69 +30419,69 @@ let CheckboxView = /*@__PURE__*/ (() => {
     class CheckboxView extends Base {
         constructor() {
             super();
-            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;
         }
-        af() {
+        ag() {
         }
-        i() {
+        j() {
             return true;
         }
-        ad(a) {
+        ae(a) {
             if (a == null) {
-                for (let b of fromEnum(this.j)) {
+                for (let b of fromEnum(this.k)) {
                     b();
                 }
-                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");
-            let 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);
-            let 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");
+            let 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);
+            let 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);
-            let e = this.l.createElement("label");
-            e.setAttribute("for", this.c.b1);
+            this.n = d;
+            this.m.append(d);
+            let 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");
@@ -30444,9 +30500,9 @@ let CheckboxView = /*@__PURE__*/ (() => {
             e.setStyleProperty("border-radius", "2px");
             e.setStyleProperty("-webkit-tap-highlight-color", "transparent");
             e.setStyleProperty("overflow", "hidden");
-            this.q = e;
-            this.m.append(e);
-            let f = this.l.createElementNS("svg", "http://www.w3.org/2000/svg");
+            this.r = e;
+            this.n.append(e);
+            let 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");
@@ -30462,14 +30518,14 @@ let CheckboxView = /*@__PURE__*/ (() => {
             f.setStyleProperty("fill", "none");
             f.setStyleProperty("opacity", "0");
             f.setStyleProperty("z-index", "1");
-            this.o = f;
+            this.p = f;
             e.append(f);
-            let g = this.l.createElementNS("path", "http://www.w3.org/2000/svg");
-            g.setAttribute("d", this.c.bf);
+            let g = this.m.createElementNS("path", "http://www.w3.org/2000/svg");
+            g.setAttribute("d", this.d.bf);
             f.append(g);
-            this.n = g;
-            let h = this.l.createElement("div");
-            let i = this.l.getSubRenderer(h);
+            this.o = g;
+            let h = this.m.createElement("div");
+            let i = this.m.getSubRenderer(h);
             h.setStyleProperty("position", "absolute");
             h.setStyleProperty("width", "3em");
             h.setStyleProperty("height", "3em");
@@ -30480,12 +30536,12 @@ let CheckboxView = /*@__PURE__*/ (() => {
             let j = new XRipple();
             j.provideContainer(i);
             j.q = d;
-            let k = this.l.getExternal(j, this.l.rootWrapper, this.l.getExternal(this.c, null, null));
+            let 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);
-            let l = this.l.createElement("span");
+            let l = this.m.createElement("span");
             l.addClass("ig-checkbox-label");
             l.setStyleProperty("font-family", "Verdana");
             l.setStyleProperty("font-weight", "400");
@@ -30498,124 +30554,133 @@ let CheckboxView = /*@__PURE__*/ (() => {
             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", (m) => {
+            this.q = l;
+            this.k.add(l.listen("click", runOn(this, this.w)));
+            this.m.append(l);
+            this.m.getPortal(l, "ChildContent", (m) => {
             }, true);
-            this.c.cp();
+            this.d.cp();
         }
-        v(a) {
-            this.c.toggle();
+        w(a) {
+            this.d.toggle();
         }
-        aj() {
-            if (this.i()) {
-                let 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");
+        ak() {
+            if (this.j()) {
+                let 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);
             }
         }
-        al() {
-            return new Size(1, this.q.width(), this.q.height());
+        am() {
+            return new Size(1, this.r.width(), this.r.height());
         }
-        ai() {
-            this.n.setAttribute("d", this.c.bf);
+        a() {
+            let rect_ = this.r.getNativeElement().getBoundingClientRect();
+            let a = (rect_.top);
+            let b = (rect_.left);
+            let c = new Array(2);
+            c[0] = a;
+            c[1] = b;
+            return c;
         }
-        ag() {
-            if (this.i()) {
-                let a = this.c.b1;
-                this.r.setAttribute("id", a);
-                this.q.setAttribute("for", a);
+        aj() {
+            this.o.setAttribute("d", this.d.bf);
+        }
+        ah() {
+            if (this.j()) {
+                let a = this.d.b1;
+                this.s.setAttribute("id", a);
+                this.r.setAttribute("for", a);
             }
         }
-        w(a) {
-            this.c.focused = false;
+        x(a) {
+            this.d.focused = false;
         }
-        z(a) {
-            this.c.focused = true;
+        aa(a) {
+            this.d.focused = true;
         }
-        y(a) {
+        z(a) {
             a.stopPropagation();
-            if (this.h()) {
-                let native_ = this.r.getNativeElement();
+            if (this.i()) {
+                let native_ = this.s.getNativeElement();
                 native_.blur();
             }
-            this.c.toggle();
+            this.d.toggle();
         }
-        h() {
+        i() {
             return false;
         }
-        x(a) {
+        y(a) {
             a.stopPropagation();
         }
-        aa() {
+        ab() {
             if (KeyFrameAnimationFactory.h == null) {
-                KeyFrameAnimationFactory.h = this.l;
+                KeyFrameAnimationFactory.h = this.m;
             }
         }
-        a(a) {
-            return new AnimationKeyFrameEffect(0, this.q, 0, null, a);
-        }
         b(a) {
-            return new AnimationKeyFrameEffect(0, this.o, 0, null, a);
+            return new AnimationKeyFrameEffect(0, this.r, 0, null, a);
         }
-        ab(a) {
+        c(a) {
+            return new AnimationKeyFrameEffect(0, this.p, 0, null, a);
         }
-        get t() {
-            return this.q;
+        ac(a) {
         }
-        get s() {
-            return this.q;
+        get u() {
+            return this.r;
         }
-        get e() {
-            return this.d;
+        get t() {
+            return this.r;
         }
-        get u() {
-            return this.o;
+        get f() {
+            return this.e;
         }
-        ac() {
-            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)));
+        get v() {
+            return this.p;
         }
-        ae() {
-            this.g = false;
-            for (let a of fromEnum(this.j)) {
+        ad() {
+            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)));
+        }
+        af() {
+            this.h = false;
+            for (let a of fromEnum(this.k)) {
                 a();
             }
-            this.j.clear();
+            this.k.clear();
         }
-        ah() {
-            let model_ = this.c;
+        ai() {
+            let model_ = this.d;
             if (model_.externalObject && model_.externalObject.refreshDefaults) {
                 model_.externalObject.refreshDefaults();
             }
             ;
         }
-        ak(a, b) {
-            this.d.ax = a;
-            this.d.aw = b;
+        al(a, b) {
+            this.e.ax = a;
+            this.e.aw = b;
         }
-        k() {
-            let a = this.q.getStyleProperty("border-top-width");
+        l() {
+            let a = this.r.getStyleProperty("border-top-width");
             a = stringReplace(a, "px", "");
             return parseFloat(a);
         }
@@ -30684,9 +30749,9 @@ let XCheckbox = /*@__PURE__*/ (() => {
             this.ba = this.a8 + "-label";
             this.a7 = this.ba;
             let a = new CheckboxView();
-            a.c = this;
+            a.d = this;
             this.view = a;
-            this.view.af();
+            this.view.ag();
         }
         get view() {
             return this._view;
@@ -30781,7 +30846,7 @@ let XCheckbox = /*@__PURE__*/ (() => {
                     this.ct();
                     break;
                 case "ActualCheckPath":
-                    this.view.ai();
+                    this.view.aj();
                     break;
                 case "IsChecked":
                     if (!this.s) {
@@ -30801,16 +30866,16 @@ let XCheckbox = /*@__PURE__*/ (() => {
                     }
                     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;
             }
         }
         ct() {
-            let a = this.view.t;
-            let b = this.view.s;
+            let a = this.view.u;
+            let b = this.view.t;
             if (a == null || b == null) {
                 return;
             }
@@ -30829,7 +30894,7 @@ let XCheckbox = /*@__PURE__*/ (() => {
             }
         }
         cw() {
-            let a = this.view.u;
+            let a = this.view.v;
             if (a == null) {
                 return;
             }
@@ -31184,10 +31249,10 @@ let XCheckbox = /*@__PURE__*/ (() => {
         cp() {
             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));
             }
         }
         get a() {
@@ -31197,15 +31262,15 @@ let XCheckbox = /*@__PURE__*/ (() => {
             return a;
         }
         ck() {
-            this.view.aa();
+            this.view.ab();
             let 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)));
             }
         }
         toggle() {
@@ -31242,21 +31307,21 @@ let XCheckbox = /*@__PURE__*/ (() => {
                 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) {
-                let d = this.view.t;
-                let e = this.view.s;
-                let f = this.view.u;
+                let d = this.view.u;
+                let e = this.view.t;
+                let f = this.view.v;
                 if (this.indeterminate) {
                     let g = new TransformGroup();
-                    let h = this.view.al();
+                    let h = this.view.am();
                     g.j.add(((() => {
                         let $ret = new RotateTransform();
                         $ret.j = 45;
@@ -31264,7 +31329,7 @@ let XCheckbox = /*@__PURE__*/ (() => {
                     })()));
                     g.j.add(((() => {
                         let $ret = new TranslateTransform();
-                        $ret.j = -this.view.k();
+                        $ret.j = -this.view.l();
                         return $ret;
                     })()));
                     NativeUI.m(d, this.c8);
@@ -31323,10 +31388,10 @@ let XCheckbox = /*@__PURE__*/ (() => {
             }
         }
         onDetachedFromUI() {
-            this.view.ae();
+            this.view.af();
         }
         onAttachedToUI() {
-            this.view.ac();
+            this.view.ad();
         }
         onContentReady() {
             if (this.indeterminate) {
@@ -31334,17 +31399,23 @@ let XCheckbox = /*@__PURE__*/ (() => {
             }
         }
         af() {
-            return this.view.i();
+            return this.view.j();
         }
         a3() {
             return this.b();
         }
         by() {
             let a = this.b();
-            return a.s();
+            return a.w();
         }
         b() {
             let a = new CheckboxVisualModelExport();
+            let b = this.view.am();
+            let 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);
@@ -31353,11 +31424,11 @@ let XCheckbox = /*@__PURE__*/ (() => {
             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;
@@ -31366,7 +31437,7 @@ let XCheckbox = /*@__PURE__*/ (() => {
             return a;
         }
         provideContainer(a) {
-            this.view.ad(a);
+            this.view.ae(a);
         }
     }
     XCheckbox.$t = /*@__PURE__*/ markType(XCheckbox, 'XCheckbox', Base.$, [INotifyPropertyChanged_$type]);
@@ -31532,7 +31603,8 @@ let XCheckboxBridge = /*@__PURE__*/ (() => {
             }
         }
         exportVisualData(a) {
-            return a.a3();
+            let b = a.a3();
+            return b;
         }
     }
     XCheckboxBridge.$t = /*@__PURE__*/ markType(XCheckboxBridge, 'XCheckboxBridge', XComponentBridge.$);
@@ -31656,7 +31728,8 @@ let XIconBridge = /*@__PURE__*/ (() => {
             }
         }
         exportVisualData(a) {
-            return a.bg();
+            let b = a.bg();
+            return b;
         }
     }
     XIconBridge.$t = /*@__PURE__*/ markType(XIconBridge, 'XIconBridge', XComponentBridge.$);
@@ -32010,6 +32083,45 @@ let ColorEditorPanelSelectedValueChangedEventArgs = /*@__PURE__*/ (() => {
     return ColorEditorPanelSelectedValueChangedEventArgs;
 })();
 
+/*
+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
+ */
+let ColorEditorVisualModelExport = /*@__PURE__*/ (() => {
+    class ColorEditorVisualModelExport extends Base {
+        constructor() {
+            super(...arguments);
+            this.e = 0;
+            this.f = 0;
+            this.g = 0;
+            this.d = 0;
+            this.b = 0;
+            this.a = null;
+            this.c = false;
+        }
+        h() {
+            let 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 = /*@__PURE__*/ markType(ColorEditorVisualModelExport, 'ColorEditorVisualModelExport');
+    return ColorEditorVisualModelExport;
+})();
+
 /*
 THIS INFRAGISTICS ULTIMATE SOFTWARE LICENSE  AGREEMENT ("AGREEMENT") LOCATED HERE:
 https://www.infragistics.com/legal/license/igultimate-la
@@ -32346,6 +32458,15 @@ let ColorEditorBridge = /*@__PURE__*/ (() => {
                     break;
             }
         }
+        exportVisualData(a) {
+            let b = a.as();
+            let c = this.getBoundingRect(a);
+            b.e = c.left;
+            b.f = c.top;
+            b.g = c.width;
+            b.d = c.height;
+            return b;
+        }
     }
     ColorEditorBridge.$t = /*@__PURE__*/ markType(ColorEditorBridge, 'ColorEditorBridge', XComponentBridge.$);
     return ColorEditorBridge;
@@ -32706,7 +32827,7 @@ let ColorEditorView = /*@__PURE__*/ (() => {
                 this.a.a = new DOMExecutionContext(a);
             }
             this.h = a;
-            this.a.bg();
+            this.a.bj();
         }
         m() {
             if (KeyFrameAnimationFactory.h == null) {
@@ -32766,54 +32887,54 @@ let ColorEditor = /*@__PURE__*/ (() => {
     class ColorEditor extends Base {
         constructor() {
             super();
-            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();
             let a = new ColorEditorView();
             a.a = this;
-            this.g = a;
-            this.g.q();
+            this.h = a;
+            this.h.q();
         }
         onAttachedToUI() {
-            this.g.n();
+            this.h.n();
         }
         onDetachedFromUI() {
-            this.g.p();
+            this.h.p();
         }
-        b1(a, b) {
+        b4(a, b) {
             if (this.valueChanging != null) {
                 this.valueChanging(this, ((() => {
                     let $ret = new ColorEditorPanelSelectedValueChangedEventArgs();
@@ -32822,7 +32943,7 @@ let ColorEditor = /*@__PURE__*/ (() => {
                     return $ret;
                 })()));
             }
-            if (this.w) {
+            if (this.x) {
             }
         }
         notifySizeChanged() {
@@ -32831,74 +32952,44 @@ let ColorEditor = /*@__PURE__*/ (() => {
             this.provideContainer(null);
         }
         provideContainer(a) {
-            this.g.o(a);
+            this.h.o(a);
         }
-        get t() {
-            if (this.s == null) {
-                this.s = new SRProvider(this.g.h);
-                this.s.cb("ColorEditor");
+        get u() {
+            if (this.t == null) {
+                this.t = new SRProvider(this.h.h);
+                this.t.cb("ColorEditor");
             }
-            return this.s;
+            return this.t;
         }
         get value() {
-            return this.cl;
+            return this.co;
         }
         set value(a) {
-            let b = this.cl;
-            this.cj = b;
-            this.cl = a;
-            if (b != this.cl) {
-                this.b0("Value", b, this.cl);
-            }
-        }
-        get az() {
-            return this.ar;
-        }
-        set az(a) {
-            let b = this.ar;
-            this.ar = a;
-            if (b != this.ar) {
-                this.b0("Label", b, this.ar);
-            }
-        }
-        get cn() {
-            return this.ci;
-        }
-        set cn(a) {
-            let b = this.ci;
-            this.ci = a;
-            if (b != this.ci) {
-                this.b0("LabelTextColor", b, a);
-            }
-        }
-        get o() {
-            return this.l;
-        }
-        set o(a) {
-            let b = this.l;
-            this.l = a;
-            if (b != this.l) {
-                this.b0("LabelTextStyle", b, this.l);
+            let b = this.co;
+            this.cm = b;
+            this.co = a;
+            if (b != this.co) {
+                this.b3("Value", b, this.co);
             }
         }
-        get k() {
-            return this.j;
+        get a2() {
+            return this.at;
         }
-        set k(a) {
-            let b = this.j;
-            this.j = a;
-            if (b != this.j) {
-                this.b0("Density", enumGetBox(ControlDisplayDensity_$type, b), enumGetBox(ControlDisplayDensity_$type, this.j));
+        set a2(a) {
+            let b = this.at;
+            this.at = a;
+            if (b != this.at) {
+                this.b3("Label", b, this.at);
             }
         }
-        get i() {
-            return this.h;
+        get cq() {
+            return this.cl;
         }
-        set i(a) {
-            let b = this.h;
-            this.h = a;
-            if (b != this.h) {
-                this.b0("BaseTheme", enumGetBox(BaseControlTheme_$type, b), enumGetBox(BaseControlTheme_$type, this.h));
+        set cq(a) {
+            let b = this.cl;
+            this.cl = a;
+            if (b != this.cl) {
+                this.b3("LabelTextColor", b, a);
             }
         }
         get p() {
@@ -32908,77 +32999,87 @@ let ColorEditor = /*@__PURE__*/ (() => {
             let b = this.m;
             this.m = a;
             if (b != this.m) {
-                this.b0("TextStyle", b, this.m);
+                this.b3("LabelTextStyle", b, this.m);
             }
         }
-        get co() {
-            return this.ck;
+        get l() {
+            return this.k;
         }
-        set co(a) {
-            let b = this.ck;
-            this.ck = a;
-            if (b != this.ck) {
-                this.b0("TextColor", b, this.ck);
+        set l(a) {
+            let b = this.k;
+            this.k = a;
+            if (b != this.k) {
+                this.b3("Density", enumGetBox(ControlDisplayDensity_$type, b), enumGetBox(ControlDisplayDensity_$type, this.k));
             }
         }
-        get cm() {
-            return this.ch;
+        get j() {
+            return this.i;
         }
-        set cm(a) {
-            let b = this.ch;
-            this.ch = a;
-            if (b != this.ch) {
-                this.b0("IconColor", b, this.ch);
+        set j(a) {
+            let b = this.i;
+            this.i = a;
+            if (b != this.i) {
+                this.b3("BaseTheme", enumGetBox(BaseControlTheme_$type, b), enumGetBox(BaseControlTheme_$type, this.i));
             }
         }
-        get am() {
-            return this.ac;
+        get q() {
+            return this.n;
         }
-        set am(a) {
-            let b = this.ac;
-            this.ac = a;
-            if (b != this.ac) {
-                this.b0("ShowClearButton", b, this.ac);
+        set q(a) {
+            let b = this.n;
+            this.n = a;
+            if (b != this.n) {
+                this.b3("TextStyle", b, this.n);
             }
         }
-        get ag() {
-            return this.u;
+        get cr() {
+            return this.cn;
         }
-        set ag(a) {
-            let b = this.u;
-            this.u = a;
-            if (b != this.u) {
-                this.b0("AllowTextInput", b, this.u);
+        set cr(a) {
+            let b = this.cn;
+            this.cn = a;
+            if (b != this.cn) {
+                this.b3("TextColor", b, this.cn);
             }
         }
-        get ak() {
-            return this.ab;
+        get cp() {
+            return this.ck;
         }
-        set ak(a) {
-            let b = this.ab;
-            this.ab = a;
-            if (b != this.ab) {
-                this.b0("OpenOnFocus", b, this.ab);
+        set cp(a) {
+            let b = this.ck;
+            this.ck = a;
+            if (b != this.ck) {
+                this.b3("IconColor", b, this.ck);
+            }
+        }
+        get an() {
+            return this.ad;
+        }
+        set an(a) {
+            let b = this.ad;
+            this.ad = a;
+            if (b != this.ad) {
+                this.b3("ShowClearButton", b, this.ad);
             }
         }
         get ah() {
-            return this.x;
+            return this.v;
         }
         set ah(a) {
-            let b = this.x;
-            this.x = a;
-            if (b != this.x) {
-                this.b0("IsDisabled", b, this.x);
+            let b = this.v;
+            this.v = a;
+            if (b != this.v) {
+                this.b3("AllowTextInput", b, this.v);
             }
         }
-        get aq() {
-            return this.ap;
+        get al() {
+            return this.ac;
         }
-        set aq(a) {
-            let b = this.ap;
-            this.ap = a;
-            if (b != this.ap) {
-                this.b0("TabIndex", b, this.ap);
+        set al(a) {
+            let b = this.ac;
+            this.ac = a;
+            if (b != this.ac) {
+                this.b3("OpenOnFocus", b, this.ac);
             }
         }
         get ai() {
@@ -32988,61 +33089,81 @@ let ColorEditor = /*@__PURE__*/ (() => {
             let b = this.y;
             this.y = a;
             if (b != this.y) {
-                this.b0("IsFixed", b, this.y);
+                this.b3("IsDisabled", b, this.y);
+            }
+        }
+        get ar() {
+            return this.aq;
+        }
+        set ar(a) {
+            let b = this.aq;
+            this.aq = a;
+            if (b != this.aq) {
+                this.b3("TabIndex", b, this.aq);
             }
         }
         get aj() {
-            return this.aa;
+            return this.z;
         }
         set aj(a) {
-            let b = this.aa;
-            this.aa = a;
-            if (b != this.aa) {
-                this.b0("OpenAsChild", b, this.aa);
+            let b = this.z;
+            this.z = a;
+            if (b != this.z) {
+                this.b3("IsFixed", b, this.z);
             }
         }
-        get an() {
-            return this.ae;
+        get ak() {
+            return this.ab;
         }
-        set an(a) {
-            let b = this.ae;
-            this.ae = a;
-            if (b != this.ae) {
-                this.b0("UseTopLayer", b, this.ae);
+        set ak(a) {
+            let b = this.ab;
+            this.ab = a;
+            if (b != this.ab) {
+                this.b3("OpenAsChild", b, this.ab);
             }
         }
-        b0(a, b, c) {
+        get ao() {
+            return this.af;
+        }
+        set ao(a) {
+            let b = this.af;
+            this.af = a;
+            if (b != this.af) {
+                this.b3("UseTopLayer", b, this.af);
+            }
+        }
+        b3(a, b, c) {
             if (this.propertyChanged != null) {
                 this.propertyChanged(this, new PropertyChangedEventArgs(a));
             }
-            this.b6(a, b, c);
+            this.b9(a, b, c);
         }
-        b6(a, b, c) {
+        b9(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;
@@ -33050,269 +33171,283 @@ let ColorEditor = /*@__PURE__*/ (() => {
                 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;
             }
         }
-        al() {
-            return this.ah || !this.ag;
+        am() {
+            return this.ai || !this.ah;
         }
-        cg() {
-            if (this.q != null) {
-                this.q.ce = this.co;
+        cj() {
+            if (this.r != null) {
+                this.r.ce = this.cr;
             }
         }
-        ce() {
-            if (this.q != null) {
+        ch() {
+            if (this.r != null) {
             }
         }
-        cf() {
-            if (this.m != null) {
-                this.q.bk = this.m;
+        ci() {
+            if (this.n != null) {
+                this.r.bk = this.n;
             }
         }
-        be() {
-            if (this.ah == true) {
+        bh() {
+            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;
         }
-        by() {
-            this.z = true;
+        b1() {
+            this.aa = true;
         }
-        bz() {
-            this.z = false;
+        b2() {
+            this.aa = false;
         }
-        bo() {
-            NativeUIWindow.h(15, runOn(this, this.b4), this.g.h);
-            NativeUIWindow.h(9, runOn(this, this.b3), this.g.h);
+        br() {
+            NativeUIWindow.h(15, runOn(this, this.b7), this.h.h);
+            NativeUIWindow.h(9, runOn(this, this.b6), this.h.h);
         }
-        bs() {
-            NativeUIWindow.i(15, runOn(this, this.b4));
-            NativeUIWindow.i(9, runOn(this, this.b3));
+        bv() {
+            NativeUIWindow.i(15, runOn(this, this.b7));
+            NativeUIWindow.i(9, runOn(this, this.b6));
         }
-        b3(a) {
+        b6(a) {
             let 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();
                 }
             }
         }
-        b4(a) {
-            if (this.q != null) {
-                let b = this.q.be();
-                this.r.ce(b);
+        b7(a) {
+            if (this.r != null) {
+                let b = this.r.be();
+                this.s.ce(b);
             }
         }
-        bg() {
-            NativeUIComponent.av(this.g.j(), [12, 2, 7, 0], [2, 2, 2, 2], (a) => {
+        bj() {
+            NativeUIComponent.av(this.h.j(), [12, 2, 7, 0], [2, 2, 2, 2], (a) => {
                 let b = a[0];
                 let c = a[1];
                 let d = a[2];
                 let e = a[3];
-                let f = this.g.i();
-                this.g.k(e, f);
+                let 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;
-                let g = this.d;
-                g.closed = delegateCombine(g.closed, runOn(this, this.bc));
-                let h = this.d;
-                h.valueChanged = delegateCombine(h.valueChanged, runOn(this, this.bd));
-                d.o = runOn(this, this.bx);
-                let 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;
+                let g = this.e;
+                g.closed = delegateCombine(g.closed, runOn(this, this.bf));
+                let h = this.e;
+                h.valueChanged = delegateCombine(h.valueChanged, runOn(this, this.bg));
+                d.o = runOn(this, this.b0);
+                let i = this.e;
+                i.valueChanged = delegateCombine(i.valueChanged, runOn(this, this.bm));
             });
         }
-        bd(a, b) {
+        bg(a, b) {
             if (this.valueChanged != null) {
                 this.valueChanged(this, b);
             }
         }
-        bc(a, b) {
-            this.bi(a);
+        bf(a, b) {
+            this.bl(a);
         }
-        bx(a, b) {
-            if (!this.r.t(b.b) && !this.q.t(b.b) && !(this.q.an == b.b)) {
-                this.bm();
+        b0(a, b) {
+            if (!this.s.t(b.b) && !this.r.t(b.b) && !(this.r.an == b.b)) {
+                this.bp();
             }
         }
-        bv(a, b) {
+        by(a, b) {
             this.focus();
         }
-        cc(a, b) {
-            this.cd();
+        cf(a, b) {
+            this.cg();
         }
-        bj(a, b) {
-            this.w = true;
+        bm(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);
         }
-        b2(a, b) {
-            if (this.q != null) {
-                this.q.cb = b;
+        b5(a, b) {
+            if (this.r != null) {
+                this.r.cb = b;
             }
         }
-        bi(a) {
-            if (this.r.b6) {
-                this.v = true;
-                this.bf();
+        bl(a) {
+            if (this.s.b6) {
+                this.w = true;
+                this.bi();
             }
         }
-        cd() {
-            if (this.v == false) {
-                if (this.r.b6) {
-                    this.bf();
+        cg() {
+            if (this.w == false) {
+                if (this.s.b6) {
+                    this.bi();
                 }
                 else {
-                    this.b5();
+                    this.b8();
                 }
             }
             else {
-                this.v = false;
+                this.w = false;
             }
         }
-        b5() {
-            if (this.ah) {
+        b8() {
+            if (this.ai) {
                 return;
             }
-            if (this.r != null) {
-                let a = this.g.r(false);
-                let b = this.g.s();
+            if (this.s != null) {
+                let a = this.h.r(false);
+                let b = this.h.s();
                 let c = b.height;
                 let d = 240;
                 let e = a.bottom + d;
                 if (!isNaN_(c) && c < e) {
                     let 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);
                 }
             }
         }
-        cb(a, b) {
+        ce(a, b) {
             {
-                let c = this.g.r(true);
-                this.r.cf(c, a, b);
+                let c = this.h.r(true);
+                this.s.cf(c, a, b);
             }
         }
-        bf() {
-            if (this.r != null) {
-                this.a.executeDelayed(() => this.r.cc(), 0);
+        bi() {
+            if (this.s != null) {
+                this.a.executeDelayed(() => this.s.cc(), 0);
             }
-            if (this.d != null) {
-                this.d.bg();
+            if (this.e != null) {
+                this.e.bg();
             }
-            this.v = false;
+            this.w = false;
         }
         focus(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(() => this.bl(), 0);
+                    if (this.ah == false) {
+                        this.b8();
+                        this.w = true;
+                        this.a.executeDelayed(() => this.bo(), 0);
                     }
                     else {
-                        if (this.ak == true && this.ad == false) {
-                            this.b5();
-                            this.v = true;
-                            this.a.executeDelayed(() => this.bl(), 0);
+                        if (this.al == true && this.ae == false) {
+                            this.b8();
+                            this.w = true;
+                            this.a.executeDelayed(() => this.bo(), 0);
                         }
                     }
                 }
                 else {
-                    this.v = false;
+                    this.w = false;
                 }
             }
         }
-        bm() {
-            this.v = false;
+        bp() {
+            this.w = false;
         }
-        b8() {
-            if (this.q != null) {
-                this.q.b9();
+        cb() {
+            if (this.r != null) {
+                this.r.b9();
             }
         }
-        bl() {
-            this.d.a3();
+        bo() {
+            this.e.a3();
         }
-        bq() {
+        bt() {
             let a = new ColorEditorGotFocusEventArgs();
-            this.bu(a);
+            this.bx(a);
         }
-        br() {
+        bu() {
             let a = new ColorEditorLostFocusEventArgs();
-            this.bw(a);
+            this.bz(a);
         }
-        ca() {
+        cd() {
+        }
+        cc() {
+        }
+        as() {
+            return this.b();
         }
-        b9() {
+        ay() {
+            let a = this.b();
+            return a.h();
+        }
+        b() {
+            let a = new ColorEditorVisualModelExport();
+            a.b = this.j;
+            a.a = AppearanceHelper.a(this.value);
+            a.c = this.ai;
+            return a;
         }
-        bu(a) {
+        bx(a) {
             if (null != this.gotFocus) {
                 this.gotFocus(this, a);
             }
         }
-        bw(a) {
+        bz(a) {
             if (null != this.lostFocus) {
                 this.lostFocus(this, a);
             }
         }
     }
     ColorEditor.$t = /*@__PURE__*/ 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;
 })();
 /**
@@ -34429,157 +34564,157 @@ let IgcColorEditorComponent = /*@__PURE__*/ (() => {
          * Gets or Sets the property name that contains the label.
         */
         get label() {
-            return this.i.az;
+            return this.i.a2;
         }
         set label(v) {
-            this.i.az = v;
+            this.i.a2 = v;
         }
         /**
          * Gets or sets the color to use for the text.
         */
         get labelTextColor() {
-            return brushToString(this.i.cn);
+            return brushToString(this.i.cq);
         }
         set labelTextColor(v) {
-            this.i.cn = stringToBrush(v);
-            this._a("labelTextColor", brushToString(this.i.cn));
+            this.i.cq = stringToBrush(v);
+            this._a("labelTextColor", brushToString(this.i.cq));
         }
         /**
          * Gets or sets the font to use for the input.
         */
         get labelTextStyle() {
-            if (this.i.o == null) {
+            if (this.i.p == null) {
                 return null;
             }
-            return this.i.o.fontString;
+            return this.i.p.fontString;
         }
         set labelTextStyle(v) {
             let fi = new FontInfo();
             fi.fontString = v;
-            this.i.o = fi;
-            this._a("labelTextStyle", this.i.o != null ? this.i.o.fontString : "");
+            this.i.p = fi;
+            this._a("labelTextStyle", this.i.p != null ? this.i.p.fontString : "");
         }
         /**
          * Gets or sets the display density to use for the date pcicker.
         */
         get density() {
-            return this.i.k;
+            return this.i.l;
         }
         set density(v) {
-            this.i.k = ensureEnum(ControlDisplayDensity_$type, v);
-            this._a("density", enumToString(ControlDisplayDensity_$type, this.i.k));
+            this.i.l = ensureEnum(ControlDisplayDensity_$type, v);
+            this._a("density", enumToString(ControlDisplayDensity_$type, this.i.l));
         }
         /**
          * Gets or sets the base built in theme to use for the date picker.
         */
         get baseTheme() {
-            return this.i.i;
+            return this.i.j;
         }
         set baseTheme(v) {
-            this.i.i = ensureEnum(BaseControlTheme_$type, v);
-            this._a("baseTheme", enumToString(BaseControlTheme_$type, this.i.i));
+            this.i.j = ensureEnum(BaseControlTheme_$type, v);
+            this._a("baseTheme", enumToString(BaseControlTheme_$type, this.i.j));
         }
         /**
          * Gets or sets the font to use for the combobox.
         */
         get textStyle() {
-            if (this.i.p == null) {
+            if (this.i.q == null) {
                 return null;
             }
-            return this.i.p.fontString;
+            return this.i.q.fontString;
         }
         set textStyle(v) {
             let fi = new FontInfo();
             fi.fontString = v;
-            this.i.p = fi;
-            this._a("textStyle", this.i.p != null ? this.i.p.fontString : "");
+            this.i.q = fi;
+            this._a("textStyle", this.i.q != null ? this.i.q.fontString : "");
         }
         /**
          * Gets or Sets the text color
         */
         get textColor() {
-            return brushToString(this.i.co);
+            return brushToString(this.i.cr);
         }
         set textColor(v) {
-            this.i.co = stringToBrush(v);
-            this._a("textColor", brushToString(this.i.co));
+            this.i.cr = stringToBrush(v);
+            this._a("textColor", brushToString(this.i.cr));
         }
         /**
          * Gets or Sets the text color
         */
         get iconColor() {
-            return brushToString(this.i.cm);
+            return brushToString(this.i.cp);
         }
         set iconColor(v) {
-            this.i.cm = stringToBrush(v);
-            this._a("iconColor", brushToString(this.i.cm));
+            this.i.cp = stringToBrush(v);
+            this._a("iconColor", brushToString(this.i.cp));
         }
         /**
          * Gets or sets the ShowClearButton property to detirmine if the clear button is shown
         */
         get showClearButton() {
-            return this.i.am;
+            return this.i.an;
         }
         set showClearButton(v) {
-            this.i.am = ensureBool(v);
-            this._a("showClearButton", this.i.am);
+            this.i.an = ensureBool(v);
+            this._a("showClearButton", this.i.an);
         }
         /**
          * Gets or sets the AllowTextInput property to detirmine if entering text into the input is allowed
         */
         get allowTextInput() {
-            return this.i.ag;
+            return this.i.ah;
         }
         set allowTextInput(v) {
-            this.i.ag = ensureBool(v);
-            this._a("allowTextInput", this.i.ag);
+            this.i.ah = ensureBool(v);
+            this._a("allowTextInput", this.i.ah);
         }
         /**
          * Gets or sets the AllowTextInput property to detirmine if entering text into the input is allowed
         */
         get openOnFocus() {
-            return this.i.ak;
+            return this.i.al;
         }
         set openOnFocus(v) {
-            this.i.ak = ensureBool(v);
-            this._a("openOnFocus", this.i.ak);
+            this.i.al = ensureBool(v);
+            this._a("openOnFocus", this.i.al);
         }
         get isDisabled() {
-            return this.i.ah;
+            return this.i.ai;
         }
         set isDisabled(v) {
-            this.i.ah = ensureBool(v);
-            this._a("isDisabled", this.i.ah);
+            this.i.ai = ensureBool(v);
+            this._a("isDisabled", this.i.ai);
         }
         /**
          * Indicates that the editor dropdown will position itself relative to the window instead of the document.
         */
         get isFixed() {
-            return this.i.ai;
+            return this.i.aj;
         }
         set isFixed(v) {
-            this.i.ai = ensureBool(v);
-            this._a("isFixed", this.i.ai);
+            this.i.aj = ensureBool(v);
+            this._a("isFixed", this.i.aj);
         }
         /**
          * Indicates that the dropdown should open as a child of the color editor.
         */
         get openAsChild() {
-            return this.i.aj;
+            return this.i.ak;
         }
         set openAsChild(v) {
-            this.i.aj = ensureBool(v);
-            this._a("openAsChild", this.i.aj);
+            this.i.ak = ensureBool(v);
+            this._a("openAsChild", this.i.ak);
         }
         /**
          * Indicates that the dropdown will place itself into the browser top layer.
         */
         get useTopLayer() {
-            return this.i.an;
+            return this.i.ao;
         }
         set useTopLayer(v) {
-            this.i.an = ensureBool(v);
-            this._a("useTopLayer", this.i.an);
+            this.i.ao = ensureBool(v);
+            this._a("useTopLayer", this.i.ao);
         }
         findByName(name) {
             if (this.findEphemera) {
@@ -34643,7 +34778,23 @@ let IgcColorEditorComponent = /*@__PURE__*/ (() => {
             this._inStyling = false;
         }
         select() {
-            this.i.b8();
+            this.i.cb();
+        }
+        /**
+         * Exports visual information about the current state of the color editor.
+        
+        */
+        exportVisualModel() {
+            let iv = this.i.as();
+            return (iv);
+        }
+        /**
+         * Returns a serialized copy of the exported visual model
+        
+        */
+        exportSerializedVisualModel() {
+            let iv = this.i.ay();
+            return (iv);
         }
         /**
          * Called when color is selected.
@@ -39107,6 +39258,47 @@ GOVERNS THE LICENSING, INSTALLATION AND USE OF INFRAGISTICS SOFTWARE. BY DOWNLOA
  */
 let IconViewType_$type = /*@__PURE__*/ 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
+ */
+let CheckboxListVisualModelExport = /*@__PURE__*/ (() => {
+    class CheckboxListVisualModelExport extends Base {
+        constructor() {
+            super(...arguments);
+            this.f = 0;
+            this.g = 0;
+            this.h = 0;
+            this.e = 0;
+            this.c = 0;
+            this.b = null;
+            this.a = null;
+            this.d = 0;
+        }
+        i() {
+            let 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 = /*@__PURE__*/ markType(CheckboxListVisualModelExport, 'CheckboxListVisualModelExport');
+    return CheckboxListVisualModelExport;
+})();
+
 /*
 THIS INFRAGISTICS ULTIMATE SOFTWARE LICENSE  AGREEMENT ("AGREEMENT") LOCATED HERE:
 https://www.infragistics.com/legal/license/igultimate-la
@@ -39168,4 +39360,4 @@ let TextBlockVisualModelExport = /*@__PURE__*/ (() => {
     return TextBlockVisualModelExport;
 })();
 
-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, IgcButtonClickEventArgs, IgcButtonGroupSelectionChangedEventArgs, IgcCheckboxChangeEventArgs, IgcColorEditorComponent, IgcColorEditorGotFocusEventArgs, IgcColorEditorLostFocusEventArgs, IgcColorEditorModule, IgcColorEditorPanelClosedEventArgs, IgcColorEditorPanelComponent, IgcColorEditorPanelModule, IgcColorEditorPanelSelectedValueChangedEventArgs, IgcGotFocusEventArgs, IgcInputChangeEventArgs, IgcLostFocusEventArgs, IgcMultiSliderComponent, IgcMultiSliderModule, IgcMultiSliderResolvingToolTipValueEventArgs, IgcMultiSliderThumb, IgcMultiSliderThumbCollection, IgcMultiSliderThumbValueChangingEventArgs, IgcMultiSliderTrackThumbRange, IgcMultiSliderYValueChangingEventArgs, IgcSelectedValueChangedEventArgs, IgcXButtonComponent, IgcXButtonGroupButtonCollection, IgcXButtonGroupComponent, IgcXButtonGroupModule, IgcXButtonModule, IgcXCalendarComponent, IgcXCalendarLocaleEnModule, IgcXCalendarModule, IgcXCheckboxComponent, IgcXCheckboxModule, IgcXDatePickerComponent, IgcXDatePickerModule, IgcXIconComponent, IgcXIconModule, IgcXInputComponent, IgcXInputGroupComponent, IgcXInputGroupInputCollection, IgcXInputGroupItemComponent, IgcXInputGroupModule, IgcXInputModule, IgcXLabelComponent, IgcXLabelModule, IgcXPrefixComponent, IgcXPrefixModule, IgcXRippleComponent, IgcXRippleModule, IgcXSuffixComponent, 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, IgcButtonClickEventArgs, IgcButtonGroupSelectionChangedEventArgs, IgcCheckboxChangeEventArgs, IgcColorEditorComponent, IgcColorEditorGotFocusEventArgs, IgcColorEditorLostFocusEventArgs, IgcColorEditorModule, IgcColorEditorPanelClosedEventArgs, IgcColorEditorPanelComponent, IgcColorEditorPanelModule, IgcColorEditorPanelSelectedValueChangedEventArgs, IgcGotFocusEventArgs, IgcInputChangeEventArgs, IgcLostFocusEventArgs, IgcMultiSliderComponent, IgcMultiSliderModule, IgcMultiSliderResolvingToolTipValueEventArgs, IgcMultiSliderThumb, IgcMultiSliderThumbCollection, IgcMultiSliderThumbValueChangingEventArgs, IgcMultiSliderTrackThumbRange, IgcMultiSliderYValueChangingEventArgs, IgcSelectedValueChangedEventArgs, IgcXButtonComponent, IgcXButtonGroupButtonCollection, IgcXButtonGroupComponent, IgcXButtonGroupModule, IgcXButtonModule, IgcXCalendarComponent, IgcXCalendarLocaleEnModule, IgcXCalendarModule, IgcXCheckboxComponent, IgcXCheckboxModule, IgcXDatePickerComponent, IgcXDatePickerModule, IgcXIconComponent, IgcXIconModule, IgcXInputComponent, IgcXInputGroupComponent, IgcXInputGroupInputCollection, IgcXInputGroupItemComponent, IgcXInputGroupModule, IgcXInputModule, IgcXLabelComponent, IgcXLabelModule, IgcXPrefixComponent, IgcXPrefixModule, IgcXRippleComponent, IgcXRippleModule, IgcXSuffixComponent, 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 };