igniteui-webcomponents-inputs 5.3.0 → 5.4.0

package/fesm5/igniteui-webcomponents-inputs.js

@@ -6,7 +6,7 @@
   */
   
 import { __extends, __values } from 'tslib';
-import { StringBuilder, markType, Base, List$1, Delegate_$type, fromEnum, runOn, NativeUI, ScaleTransform, KeyFrameAnimationFactory, AnimationKeyFrameEffect, LinkedList$1, IKeyFrameAnimation_$type, PropertyChangedEventArgs, AnimationKeyFrameProperty, AnimationKeyFrameEffectTiming, AppearanceHelper, INotifyPropertyChanged_$type, BrushUtil, NamePatcher, WebComponentRenderer, TypeRegistrar, toSpinal, getAllPropertyNames, fromSpinal, RegisterElementHelper, brushToString, stringToBrush, ensureBool, initializePropertiesFromCss, IgcHTMLElement, 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, 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, SyncableObservableCollection$2, IgCollection, CollectionAdapter, NotifyCollectionChangedAction, 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 { StringBuilder, markType, Base, List$1, Delegate_$type, fromEnum, runOn, NativeUI, ScaleTransform, KeyFrameAnimationFactory, AnimationKeyFrameEffect, LinkedList$1, IKeyFrameAnimation_$type, PropertyChangedEventArgs, AnimationKeyFrameProperty, AnimationKeyFrameEffectTiming, AppearanceHelper, INotifyPropertyChanged_$type, BrushUtil, NamePatcher, WebComponentRenderer, TypeRegistrar, toSpinal, getAllPropertyNames, fromSpinal, RegisterElementHelper, brushToString, stringToBrush, ensureBool, initializePropertiesFromCss, IgcHTMLElement, 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, SyncableObservableCollection$2, IgCollection, CollectionAdapter, NotifyCollectionChangedAction, 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';
 
 /*
 THIS INFRAGISTICS ULTIMATE SOFTWARE LICENSE  AGREEMENT ("AGREEMENT") LOCATED HERE:
@@ -2409,6 +2409,8 @@ var XButton = /** @class */ /*@__PURE__*/ (function (_super) {
                 this.view.ah();
                 break;
             case "TabIndex":
+                this.view.ax();
+                break;
             case "DisablePointer":
                 this.view.ax();
                 break;
@@ -8620,7 +8622,7 @@ var IconView = /** @class */ /*@__PURE__*/ (function (_super) {
         _this.f = new FastIterationDictionary$2(String_$type, List$1.$.specialize(Tuple$2.$.specialize(SVGNode.$, Base.$)), 0);
         return _this;
     }
-    IconView.prototype.al = function () {
+    IconView.prototype.am = function () {
     };
     IconView.prototype.l = function () {
         return true;
@@ -8653,7 +8655,7 @@ var IconView = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    IconView.prototype.aj = function (a) {
+    IconView.prototype.ak = function (a) {
         var e_1, _a;
         if (a == null) {
             try {
@@ -8690,7 +8692,7 @@ var IconView = /** @class */ /*@__PURE__*/ (function (_super) {
         this.v.rootWrapper.setStyleProperty("flex-wrap", "no-wrap");
         this.v.rootWrapper.setStyleProperty("align-items", "center");
         this.v.rootWrapper.setStyleProperty("justify-content", "center");
-        this.as();
+        this.au();
         var c = this.v.createElementNS("svg", "http://www.w3.org/2000/svg");
         c.setStyleProperty("position", "absolute");
         c.setStyleProperty("top", "0");
@@ -8703,14 +8705,14 @@ var IconView = /** @class */ /*@__PURE__*/ (function (_super) {
         d.setStyleProperty("width", "100%");
         d.setStyleProperty("object-fit", "contain");
         this.x = d;
-        this.ay();
+        this.a0();
         this.w = a.createElementNS("defs", "http://www.w3.org/2000/svg");
         this.y.append(this.w);
         this.v.append(this.y);
-        this.o.add(c.listen("click", runOn(this, this.ai)));
-        this.d.ch();
+        this.o.add(c.listen("click", runOn(this, this.aj)));
+        this.d.cm();
     };
-    IconView.prototype.av = function (a) {
+    IconView.prototype.ax = function (a) {
         this.n.clear();
         this.v.rootWrapper.removeChildren();
         this.v.rootWrapper.append(this.y);
@@ -8725,7 +8727,7 @@ var IconView = /** @class */ /*@__PURE__*/ (function (_super) {
             this.p.add(b);
         }
     };
-    IconView.prototype.aw = function (a) {
+    IconView.prototype.ay = function (a) {
         this.n.clear();
         this.v.rootWrapper.removeChildren();
         this.v.rootWrapper.append(this.y);
@@ -8742,14 +8744,14 @@ var IconView = /** @class */ /*@__PURE__*/ (function (_super) {
             }
         }
     };
-    IconView.prototype.au = function (a) {
+    IconView.prototype.aw = function (a) {
         this.v.rootWrapper.removeChildren();
         if (a != null) {
             var b = this.v.rootWrapper.getNativeElement();
             b.innerHTML = a;
         }
     };
-    IconView.prototype.aq = function (a) {
+    IconView.prototype.as = function (a) {
         if (this.ab != a) {
             this.ab = a;
             this.v.rootWrapper.removeChildren();
@@ -8757,12 +8759,12 @@ var IconView = /** @class */ /*@__PURE__*/ (function (_super) {
             this.x.setAttribute("src", a);
         }
     };
-    IconView.prototype.at = function (a) {
+    IconView.prototype.av = function (a) {
         if (typeof a === 'string') {
-            this.aq(typeCast(String_$type, a));
+            this.as(typeCast(String_$type, a));
         }
     };
-    IconView.prototype.ag = function () {
+    IconView.prototype.ah = function () {
         if (this.d.k != 3 && this.d.k != 4) {
             this.ab = null;
         }
@@ -8770,18 +8772,18 @@ var IconView = /** @class */ /*@__PURE__*/ (function (_super) {
     IconView.prototype.k = function () {
         return this.d.svgPath != null || this.d.svg != null || this.d.b != null;
     };
-    IconView.prototype.as = function () {
+    IconView.prototype.au = function () {
         this.v.rootWrapper.setStyleProperty("width", isNaN_(this.d.at) ? "1.5rem" : this.d.at + "px");
         this.v.rootWrapper.setStyleProperty("height", isNaN_(this.d.al) ? "1.5rem" : this.d.al + "px");
     };
-    IconView.prototype.ay = function () {
+    IconView.prototype.a0 = function () {
         var a = isNaN_(this.d.aq) ? 0 : this.d.aq;
         var b = isNaN_(this.d.ar) ? 0 : this.d.ar;
         var c = isNaN_(this.d.as) ? 24 : this.d.as;
         var d = isNaN_(this.d.ap) ? 24 : this.d.ap;
         this.y.setAttribute("viewBox", a + " " + b + " " + c + " " + d);
     };
-    IconView.prototype.an = function (a, b) {
+    IconView.prototype.ao = function (a, b) {
         var c = a.color;
         if (!this.n.containsKey(a)) {
             if (a.isGradient) {
@@ -8809,7 +8811,7 @@ var IconView = /** @class */ /*@__PURE__*/ (function (_super) {
             }
         }
     };
-    IconView.prototype.ao = function (a, b) {
+    IconView.prototype.ap = function (a, b) {
         var c = a;
         if (this.n.containsKey(b)) {
             c.setAttribute("fill", "url(#" + this.n.item(b) + ")");
@@ -8820,7 +8822,7 @@ var IconView = /** @class */ /*@__PURE__*/ (function (_super) {
             NativeUI.r(a, b);
         }
     };
-    IconView.prototype.ap = function (a, b) {
+    IconView.prototype.aq = function (a, b) {
         var c = a;
         if (this.n.containsKey(b)) {
             c.setAttribute("stroke", "url('#" + this.n.item(b) + "')");
@@ -8831,22 +8833,22 @@ var IconView = /** @class */ /*@__PURE__*/ (function (_super) {
     };
     IconView.prototype.ac = function (a) {
     };
-    IconView.prototype.am = function () {
+    IconView.prototype.an = function () {
         if (this.l()) {
         }
     };
     IconView.prototype.ad = function (a) {
-        this.d.ce();
+        this.d.cj();
     };
     IconView.prototype.ae = function (a) {
-        this.d.cf();
+        this.d.ck();
     };
-    IconView.prototype.ah = function () {
+    IconView.prototype.ai = function () {
         this.j = true;
         this.o.add(this.v.rootWrapper.listen("mouseenter", runOn(this, this.ad)));
         this.o.add(this.v.rootWrapper.listen("mouseleave", runOn(this, this.ae)));
     };
-    IconView.prototype.ak = function () {
+    IconView.prototype.al = function () {
         var e_2, _a;
         this.j = false;
         try {
@@ -8870,7 +8872,7 @@ var IconView = /** @class */ /*@__PURE__*/ (function (_super) {
         }
         this.o.clear();
     };
-    IconView.prototype.ax = function (a) {
+    IconView.prototype.az = function (a) {
         if (a != null) {
             this.v.rootWrapper.setStyleProperty("font", a.fontString);
         }
@@ -8884,7 +8886,7 @@ var IconView = /** @class */ /*@__PURE__*/ (function (_super) {
         c[1] = b;
         return c;
     };
-    IconView.prototype.ai = function (a) {
+    IconView.prototype.aj = function (a) {
         if (this.d.x()) {
             a.stopPropagation();
             a.preventDefault();
@@ -8895,7 +8897,7 @@ var IconView = /** @class */ /*@__PURE__*/ (function (_super) {
         var b = this.v.rootWrapper.getNativeElement();
         return a.toArray();
     };
-    IconView.prototype.af = function (a, b) {
+    IconView.prototype.ag = function (a, b) {
         for (var c = 0; c < b.e.count; c++) {
             var d = b.e._inner[c];
             var e = this.h(d);
@@ -8903,7 +8905,7 @@ var IconView = /** @class */ /*@__PURE__*/ (function (_super) {
                 a.add(e);
             }
             else {
-                this.af(a, d);
+                this.ag(a, d);
             }
         }
     };
@@ -8916,7 +8918,7 @@ var IconView = /** @class */ /*@__PURE__*/ (function (_super) {
                     $ret.an = a.w;
                     return $ret;
                 })());
-                this.ar(c, a);
+                this.at(c, a);
                 b = new PathVisualData(1, "path1", c);
                 break;
             case 3:
@@ -8926,7 +8928,7 @@ var IconView = /** @class */ /*@__PURE__*/ (function (_super) {
                 e.ao = d.x;
                 e.ap = d.y;
                 e.aq = d.z;
-                this.ar(e, a);
+                this.at(e, a);
                 b = new LineVisualData(1, "line1", e);
                 break;
             case 4:
@@ -8936,7 +8938,7 @@ var IconView = /** @class */ /*@__PURE__*/ (function (_super) {
                 g.height = f.w;
                 g.ap = f.x;
                 g.aq = f.y;
-                this.ar(g, a);
+                this.at(g, a);
                 b = new RectangleVisualData(1, "rect1", g);
                 break;
             case 5:
@@ -8945,13 +8947,13 @@ var IconView = /** @class */ /*@__PURE__*/ (function (_super) {
                 var i = new Ellipse();
                 i.width = h.y * 2;
                 i.height = h.z * 2;
-                this.ar(i, a);
+                this.at(i, a);
                 b = new EllipseVisualData(1, "ellipse1", i);
                 break;
         }
         return b;
     };
-    IconView.prototype.ar = function (a, b) {
+    IconView.prototype.at = function (a, b) {
         var c = b;
         a.ad = b.t;
         a.j = c.h;
@@ -8984,6 +8986,16 @@ var IconView = /** @class */ /*@__PURE__*/ (function (_super) {
         }
         return null;
     };
+    IconView.prototype.ar = function (a, b) {
+        this.v.rootWrapper.removeChildren();
+        if (a == null) {
+            return;
+        }
+        LegendItemHelper.c(this.v, 0, 0, 24, 24, b, null, a, null);
+    };
+    IconView.prototype.af = function () {
+        this.v.rootWrapper.removeChildren();
+    };
     IconView.$t = markType(IconView, 'IconView');
     return IconView;
 }(Base));
@@ -8997,34 +9009,36 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
         _this._view = null;
         _this.k = 0;
         _this.l = 0;
-        _this.co = XIcon.c4;
-        _this.cp = XIcon.c8;
-        _this.cq = XIcon.c9;
+        _this.cv = XIcon.db;
+        _this.cw = XIcon.df;
+        _this.cx = XIcon.dg;
         _this.y = XIcon.ak;
-        _this.cr = XIcon.c4;
-        _this.cz = XIcon.c8;
+        _this.cy = XIcon.db;
+        _this.c6 = XIcon.df;
         _this.ac = XIcon.ak;
-        _this.c0 = XIcon.c9;
-        _this.cs = XIcon.c5;
-        _this.ct = XIcon.c6;
+        _this.c7 = XIcon.dg;
+        _this.cz = XIcon.dc;
+        _this.c0 = XIcon.dd;
         _this.aa = XIcon.aj;
-        _this.cu = null;
+        _this.c1 = null;
         _this.c = null;
         _this.d = null;
-        _this.cv = null;
-        _this.cw = null;
-        _this.cx = null;
-        _this.cy = null;
-        _this.ax = null;
-        _this.a1 = null;
-        _this.a4 = null;
+        _this.c2 = null;
+        _this.c3 = null;
+        _this.c4 = null;
+        _this.c5 = null;
+        _this.ay = null;
         _this.a3 = null;
+        _this.a6 = null;
+        _this.a5 = null;
         _this.a = null;
+        _this.ct = null;
+        _this.ax = null;
         _this.n = null;
-        _this.a2 = "ig-icon-" + XIcon.aw++;
+        _this.a4 = "ig-icon-" + XIcon.aw++;
         _this.au = 0;
         _this.p = false;
-        _this.a0 = null;
+        _this.a2 = null;
         _this.r = false;
         _this.q = false;
         _this.ab = 1;
@@ -9039,7 +9053,7 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
         var a = new IconView();
         a.d = _this;
         _this.view = a;
-        _this.view.al();
+        _this.view.am();
         return _this;
     }
     Object.defineProperty(XIcon.prototype, "view", {
@@ -9055,13 +9069,13 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
     XIcon.prototype.destroy = function () {
         this.provideContainer(null);
     };
-    XIcon.prototype.cg = function (a, b, c) {
+    XIcon.prototype.cl = function (a, b, c) {
         if (this.propertyChanged != null) {
             this.propertyChanged(this, new PropertyChangedEventArgs(a));
         }
-        this.cj(a, b, c);
+        this.co(a, b, c);
     };
-    XIcon.prototype.cj = function (a, b, c) {
+    XIcon.prototype.co = function (a, b, c) {
         switch (a) {
             case "Fill":
             case "Stroke":
@@ -9070,73 +9084,80 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             case "HoverStroke":
             case "HoverStrokeThickness":
             case "IsHover":
-                this.cn();
+                this.cs();
                 break;
             case "FillColors":
             case "StrokeColors":
             case "ActualFill":
             case "ActualStroke":
             case "ActualStrokeWidth":
-                this.cl();
+                this.cq();
                 break;
             case "SVG":
-                this.a4 = null;
+                this.a6 = null;
                 this.a = null;
-                this.cl();
+                this.cq();
                 break;
             case "SVGPath":
-                this.a3 = null;
+                this.a5 = null;
                 this.a = null;
-                this.cl();
+                this.cq();
                 break;
             case "SVGPaths":
-                this.a3 = null;
-                this.a4 = null;
-                this.cl();
+                this.a5 = null;
+                this.a6 = null;
+                this.cq();
                 break;
             case "DataURL":
-                this.a3 = null;
-                this.a4 = null;
+                this.a5 = null;
+                this.a6 = null;
                 this.a = null;
-                this.cl();
+                this.cq();
                 break;
             case "Source":
-                this.a3 = null;
-                this.a4 = null;
+                this.a5 = null;
+                this.a6 = null;
                 this.a = null;
-                this.cl();
+                this.cq();
+                break;
+            case "DataTemplate":
+            case "DataTemplateContext":
+                this.a5 = null;
+                this.a6 = null;
+                this.a = null;
+                this.cq();
                 break;
             case "Opacity":
-                this.cm();
+                this.cr();
                 break;
             case "ViewBoxLeft":
             case "ViewBoxTop":
             case "ViewBoxWidth":
             case "ViewBoxHeight":
-                this.view.ay();
+                this.view.a0();
                 break;
             case "Width":
             case "Height":
-                this.view.as();
+                this.view.au();
                 break;
         }
     };
-    XIcon.prototype.cn = function () {
-        var a = this.fill != null ? this.fill : XIcon.c4;
-        var b = this.dh != null ? this.dh : XIcon.c8;
+    XIcon.prototype.cs = function () {
+        var a = this.fill != null ? this.fill : XIcon.db;
+        var b = this.dp != null ? this.dp : XIcon.df;
         var c = !isNaN_(this.ao) ? this.ao : XIcon.ak;
-        var d = this.di != null ? this.di : XIcon.c9;
+        var d = this.dq != null ? this.dq : XIcon.dg;
         if (this.v) {
-            this.c1 = this.da != null ? this.da : a;
-            this.c2 = this.db != null ? this.db : b;
+            this.c8 = this.dh != null ? this.dh : a;
+            this.c9 = this.di != null ? this.di : b;
             this.ai = !isNaN_(this.am) ? this.am : c;
-            this.c3 = this.dc != null ? this.dc : d;
+            this.da = this.dj != null ? this.dj : d;
         }
         else {
-            this.c1 = a;
-            this.c2 = b;
+            this.c8 = a;
+            this.c9 = b;
             this.ai = c;
-            this.c3 = d;
+            this.da = d;
         }
     };
     Object.defineProperty(XIcon.prototype, "t", {
@@ -9146,54 +9167,60 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    XIcon.prototype.cm = function () {
+    XIcon.prototype.cr = function () {
         NativeUI.y(this.view.z, this.an);
     };
-    XIcon.prototype.cl = function () {
+    XIcon.prototype.cf = function () {
+        this.view.af();
+    };
+    XIcon.prototype.cq = function () {
         var a = this.view.z;
         if (this.t) {
             var b = this.view.aa;
-            NativeUI.r(b, this.c1);
-            NativeUI.aa(b, this.c2);
+            NativeUI.r(b, this.c8);
+            NativeUI.aa(b, this.c9);
             NativeUI.ad(b, this.ai);
         }
         else {
             var c = this.j();
             if (c != this.k) {
                 this.k = c;
-                this.view.ag();
+                this.view.ah();
             }
             var d = false;
-            if (this.svgPath != null) {
+            if (this.cu != null) {
+                this.view.ar(this.cu, this.az);
+            }
+            else if (this.svgPath != null) {
                 if (stringStartsWith(trimStart(this.svgPath, ' ', '\n', '\r', '\t'), "<svg")) {
-                    this.view.au(this.svgPath);
+                    this.view.aw(this.svgPath);
                     d = true;
                 }
                 else {
-                    this.view.av(this.svgPath);
+                    this.view.ax(this.svgPath);
                 }
             }
             else if (this.b != null) {
-                this.view.aw(this.b);
+                this.view.ay(this.b);
                 var e = this.view.c;
                 if (e != null && e.length > 0) {
                     var f = NativeUI.r;
                     var g = NativeUI.aa;
-                    this.ci();
-                    f = runOn(this.view, this.view.ao);
-                    g = runOn(this.view, this.view.ap);
+                    this.cn();
+                    f = runOn(this.view, this.view.ap);
+                    g = runOn(this.view, this.view.aq);
                     for (var h = 0; h < e.length; h++) {
-                        if (this.c1 != null) {
-                            f(e[h], this.c1);
+                        if (this.c8 != null) {
+                            f(e[h], this.c8);
                         }
-                        if (this.c2 != null) {
-                            g(e[h], this.c2);
+                        if (this.c9 != null) {
+                            g(e[h], this.c9);
                         }
                         if (!isNaN_(this.ai)) {
                             NativeUI.ad(e[h], this.ai);
                         }
-                        if (this.c3 != null) {
-                            NativeUI.q(e[h], this.c3);
+                        if (this.da != null) {
+                            NativeUI.q(e[h], this.da);
                         }
                         if (this.e != null && this.e.count == e.length) {
                             f(e[h], this.e.item(h));
@@ -9204,36 +9231,38 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
                     }
                 }
                 if (this.o != null) {
-                    this.view.ax(this.o);
+                    this.view.az(this.o);
                 }
                 return;
             }
             else if (this.svg != null) {
-                this.view.au(this.svg);
+                this.view.aw(this.svg);
                 d = true;
             }
-            else if (this.bc != null) {
-                this.view.aq(this.bc);
+            else if (this.bg != null) {
+                this.view.as(this.bg);
             }
-            else if (this.az != null) {
-                this.view.at(this.az);
+            else if (this.a1 != null) {
+                this.view.av(this.a1);
+            }
+            else {
             }
             if (d) {
                 for (var i = 0; i < this.view.r.count; i++) {
                     var j = this.view.r._inner[i].c;
-                    NativeUI.r(this.view.r._inner[i].d, j.l.f(this.dd));
+                    NativeUI.r(this.view.r._inner[i].d, j.l.f(this.dk));
                 }
                 for (var k = 0; k < this.view.s.count; k++) {
                     var l = this.view.s._inner[k].c;
-                    NativeUI.aa(this.view.s._inner[k].d, l.m.f(this.de));
+                    NativeUI.aa(this.view.s._inner[k].d, l.m.f(this.dl));
                 }
                 for (var m = 0; m < this.view.t.count; m++) {
                     var n = this.view.t._inner[m].c;
-                    NativeUI.r(this.view.t._inner[m].d, n.l.f(this.df));
+                    NativeUI.r(this.view.t._inner[m].d, n.l.f(this.dm));
                 }
                 for (var o = 0; o < this.view.u.count; o++) {
                     var p = this.view.u._inner[o].c;
-                    NativeUI.aa(this.view.u._inner[o].d, p.m.f(this.dg));
+                    NativeUI.aa(this.view.u._inner[o].d, p.m.f(this.dn));
                 }
                 for (var q = 0; q < this.view.e.o.count; q++) {
                     var r = this.view.e.o._inner[q];
@@ -9259,41 +9288,41 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
                 }
                 for (var ac = 0; ac < this.view.q.count; ac++) {
                     var ad = this.view.q._inner[ac].c;
-                    NativeUI.r(this.view.q._inner[ac].d, ad.l.f(this.c1));
-                    NativeUI.aa(this.view.q._inner[ac].d, ad.m.f(this.c2));
+                    NativeUI.r(this.view.q._inner[ac].d, ad.l.f(this.c8));
+                    NativeUI.aa(this.view.q._inner[ac].d, ad.m.f(this.c9));
                 }
             }
             var ae = this.view.z;
-            if (this.c1 != null) {
-                NativeUI.r(ae, this.c1);
+            if (this.c8 != null) {
+                NativeUI.r(ae, this.c8);
             }
-            if (this.c2 != null) {
-                NativeUI.aa(ae, this.c2);
+            if (this.c9 != null) {
+                NativeUI.aa(ae, this.c9);
             }
             if (!isNaN_(this.ai)) {
                 NativeUI.ad(ae, this.ai);
             }
         }
         if (this.o != null) {
-            this.view.ax(this.o);
+            this.view.az(this.o);
         }
-        if (this.c3 != null) {
-            NativeUI.q(this.view.z, this.c3);
+        if (this.da != null) {
+            NativeUI.q(this.view.z, this.da);
         }
     };
-    XIcon.prototype.ci = function () {
+    XIcon.prototype.cn = function () {
         var e_3, _a, e_4, _b;
-        if (this.c1 != null) {
-            this.view.an(this.c1, "fill");
+        if (this.c8 != null) {
+            this.view.ao(this.c8, "fill");
         }
-        if (this.c2 != null) {
-            this.view.an(this.c2, "stroke");
+        if (this.c9 != null) {
+            this.view.ao(this.c9, "stroke");
         }
         if (this.e != null) {
             try {
                 for (var _c = __values(fromEnum(this.e)), _d = _c.next(); !_d.done; _d = _c.next()) {
                     var a = _d.value;
-                    this.view.an(a, "fills");
+                    this.view.ao(a, "fills");
                 }
             }
             catch (e_3_1) {
@@ -9314,7 +9343,7 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             try {
                 for (var _e = __values(fromEnum(this.f)), _f = _e.next(); !_f.done; _f = _e.next()) {
                     var b = _f.value;
-                    this.view.an(b, "strokes");
+                    this.view.ao(b, "strokes");
                 }
             }
             catch (e_4_1) {
@@ -9343,10 +9372,10 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
         else if (this.svg != null) {
             a = 0;
         }
-        else if (this.bc != null) {
+        else if (this.bg != null) {
             a = 3;
         }
-        else if (this.az != null) {
+        else if (this.a1 != null) {
             a = 4;
         }
         return a;
@@ -9359,49 +9388,49 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.l;
             this.l = a;
             if (b != this.l) {
-                this.cg("BaseTheme", enumGetBox(BaseControlTheme_$type, b), enumGetBox(BaseControlTheme_$type, a));
+                this.cl("BaseTheme", enumGetBox(BaseControlTheme_$type, b), enumGetBox(BaseControlTheme_$type, a));
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(XIcon.prototype, "c1", {
+    Object.defineProperty(XIcon.prototype, "c8", {
         get: function () {
-            return this.co;
+            return this.cv;
         },
         set: function (a) {
-            var b = this.co;
-            this.co = a;
-            if (b != this.co) {
-                this.cg("ActualFill", b, a);
+            var b = this.cv;
+            this.cv = a;
+            if (b != this.cv) {
+                this.cl("ActualFill", b, a);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(XIcon.prototype, "c2", {
+    Object.defineProperty(XIcon.prototype, "c9", {
         get: function () {
-            return this.cp;
+            return this.cw;
         },
         set: function (a) {
-            var b = this.cp;
-            this.cp = a;
-            if (b != this.cp) {
-                this.cg("ActualStroke", b, a);
+            var b = this.cw;
+            this.cw = a;
+            if (b != this.cw) {
+                this.cl("ActualStroke", b, a);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(XIcon.prototype, "c3", {
+    Object.defineProperty(XIcon.prototype, "da", {
         get: function () {
-            return this.cq;
+            return this.cx;
         },
         set: function (a) {
-            var b = this.cq;
-            this.cq = a;
-            if (b != this.cq) {
-                this.cg("ActualTextColor", b, a);
+            var b = this.cx;
+            this.cx = a;
+            if (b != this.cx) {
+                this.cl("ActualTextColor", b, a);
             }
         },
         enumerable: false,
@@ -9415,7 +9444,7 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.y;
             this.y = a;
             if (b != this.y) {
-                this.cg("ActualStrokeWidth", b, a);
+                this.cl("ActualStrokeWidth", b, a);
             }
         },
         enumerable: false,
@@ -9423,27 +9452,27 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
     });
     Object.defineProperty(XIcon.prototype, "fill", {
         get: function () {
-            return this.cr;
+            return this.cy;
         },
         set: function (a) {
-            var b = this.cr;
-            this.cr = a;
-            if (b != this.cr) {
-                this.cg("Fill", b, a);
+            var b = this.cy;
+            this.cy = a;
+            if (b != this.cy) {
+                this.cl("Fill", b, a);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(XIcon.prototype, "dh", {
+    Object.defineProperty(XIcon.prototype, "dp", {
         get: function () {
-            return this.cz;
+            return this.c6;
         },
         set: function (a) {
-            var b = this.cz;
-            this.cz = a;
-            if (b != this.cz) {
-                this.cg("Stroke", b, a);
+            var b = this.c6;
+            this.c6 = a;
+            if (b != this.c6) {
+                this.cl("Stroke", b, a);
             }
         },
         enumerable: false,
@@ -9457,49 +9486,49 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.ac;
             this.ac = a;
             if (b != this.ac) {
-                this.cg("StrokeWidth", b, a);
+                this.cl("StrokeWidth", b, a);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(XIcon.prototype, "di", {
+    Object.defineProperty(XIcon.prototype, "dq", {
         get: function () {
-            return this.c0;
+            return this.c7;
         },
         set: function (a) {
-            var b = this.c0;
-            this.c0 = a;
-            if (b != this.c0) {
-                this.cg("TextColor", b, a);
+            var b = this.c7;
+            this.c7 = a;
+            if (b != this.c7) {
+                this.cl("TextColor", b, a);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(XIcon.prototype, "da", {
+    Object.defineProperty(XIcon.prototype, "dh", {
         get: function () {
-            return this.cs;
+            return this.cz;
         },
         set: function (a) {
-            var b = this.cs;
-            this.cs = a;
-            if (b != this.cs) {
-                this.cg("HoverFill", b, a);
+            var b = this.cz;
+            this.cz = a;
+            if (b != this.cz) {
+                this.cl("HoverFill", b, a);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(XIcon.prototype, "db", {
+    Object.defineProperty(XIcon.prototype, "di", {
         get: function () {
-            return this.ct;
+            return this.c0;
         },
         set: function (a) {
-            var b = this.ct;
-            this.ct = a;
-            if (b != this.ct) {
-                this.cg("HoverStroke", b, a);
+            var b = this.c0;
+            this.c0 = a;
+            if (b != this.c0) {
+                this.cl("HoverStroke", b, a);
             }
         },
         enumerable: false,
@@ -9513,21 +9542,21 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.aa;
             this.aa = a;
             if (b != this.aa) {
-                this.cg("HoverStrokeThickness", b, a);
+                this.cl("HoverStrokeThickness", b, a);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(XIcon.prototype, "dc", {
+    Object.defineProperty(XIcon.prototype, "dj", {
         get: function () {
-            return this.cu;
+            return this.c1;
         },
         set: function (a) {
-            var b = this.cu;
-            this.cu = a;
-            if (b != this.cu) {
-                this.cg("HoverTextColor", b, a);
+            var b = this.c1;
+            this.c1 = a;
+            if (b != this.c1) {
+                this.cl("HoverTextColor", b, a);
             }
         },
         enumerable: false,
@@ -9541,7 +9570,7 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.c;
             this.c = a;
             if (b != this.c) {
-                this.cg("FillColors", b, this.c);
+                this.cl("FillColors", b, this.c);
             }
         },
         enumerable: false,
@@ -9555,91 +9584,91 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.d;
             this.d = a;
             if (b != this.d) {
-                this.cg("StrokeColors", b, this.d);
+                this.cl("StrokeColors", b, this.d);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(XIcon.prototype, "dd", {
+    Object.defineProperty(XIcon.prototype, "dk", {
         get: function () {
-            return this.cv;
+            return this.c2;
         },
         set: function (a) {
-            var b = this.cv;
-            this.cv = a;
-            if (b != this.cv) {
-                this.cg("PrimaryFillColor", b, this.cv);
+            var b = this.c2;
+            this.c2 = a;
+            if (b != this.c2) {
+                this.cl("PrimaryFillColor", b, this.c2);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(XIcon.prototype, "de", {
+    Object.defineProperty(XIcon.prototype, "dl", {
         get: function () {
-            return this.cw;
+            return this.c3;
         },
         set: function (a) {
-            var b = this.cw;
-            this.cw = a;
-            if (b != this.cw) {
-                this.cg("PrimaryStrokeColor", b, this.cw);
+            var b = this.c3;
+            this.c3 = a;
+            if (b != this.c3) {
+                this.cl("PrimaryStrokeColor", b, this.c3);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(XIcon.prototype, "df", {
+    Object.defineProperty(XIcon.prototype, "dm", {
         get: function () {
-            return this.cx;
+            return this.c4;
         },
         set: function (a) {
-            var b = this.cx;
-            this.cx = a;
-            if (b != this.cx) {
-                this.cg("SecondaryFillColor", b, this.cx);
+            var b = this.c4;
+            this.c4 = a;
+            if (b != this.c4) {
+                this.cl("SecondaryFillColor", b, this.c4);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(XIcon.prototype, "dg", {
+    Object.defineProperty(XIcon.prototype, "dn", {
         get: function () {
-            return this.cy;
+            return this.c5;
         },
         set: function (a) {
-            var b = this.cy;
-            this.cy = a;
-            if (b != this.cy) {
-                this.cg("SecondaryStrokeColor", b, this.cy);
+            var b = this.c5;
+            this.c5 = a;
+            if (b != this.c5) {
+                this.cl("SecondaryStrokeColor", b, this.c5);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(XIcon.prototype, "az", {
+    Object.defineProperty(XIcon.prototype, "a1", {
         get: function () {
-            return this.ax;
+            return this.ay;
         },
         set: function (a) {
-            var b = this.ax;
-            this.ax = a;
-            if (b != this.ax) {
-                this.cg("Source", b, a);
+            var b = this.ay;
+            this.ay = a;
+            if (b != this.ay) {
+                this.cl("Source", b, a);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(XIcon.prototype, "bc", {
+    Object.defineProperty(XIcon.prototype, "bg", {
         get: function () {
-            return this.a1;
+            return this.a3;
         },
         set: function (a) {
-            var b = this.a1;
-            this.a1 = a;
-            if (b != this.a1) {
-                this.cg("DataURL", b, a);
+            var b = this.a3;
+            this.a3 = a;
+            if (b != this.a3) {
+                this.cl("DataURL", b, a);
             }
         },
         enumerable: false,
@@ -9647,13 +9676,13 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
     });
     Object.defineProperty(XIcon.prototype, "svgPath", {
         get: function () {
-            return this.a4;
+            return this.a6;
         },
         set: function (a) {
-            var b = this.a4;
-            this.a4 = a;
-            if (b != this.a4) {
-                this.cg("SVGPath", b, a);
+            var b = this.a6;
+            this.a6 = a;
+            if (b != this.a6) {
+                this.cl("SVGPath", b, a);
             }
         },
         enumerable: false,
@@ -9661,13 +9690,13 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
     });
     Object.defineProperty(XIcon.prototype, "svg", {
         get: function () {
-            return this.a3;
+            return this.a5;
         },
         set: function (a) {
-            var b = this.a3;
-            this.a3 = a;
-            if (b != this.a3) {
-                this.cg("SVG", b, this.a3);
+            var b = this.a5;
+            this.a5 = a;
+            if (b != this.a5) {
+                this.cl("SVG", b, this.a5);
             }
         },
         enumerable: false,
@@ -9681,16 +9710,44 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.a;
             this.a = a;
             if (b != this.a) {
-                this.cg("SVGPaths", b, this.a);
+                this.cl("SVGPaths", b, this.a);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(XIcon.prototype, "cu", {
+        get: function () {
+            return this.ct;
+        },
+        set: function (a) {
+            var b = this.ct;
+            this.ct = a;
+            if (b != this.ct) {
+                this.cl("DataTemplate", b, this.ct);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(XIcon.prototype, "az", {
+        get: function () {
+            return this.ax;
+        },
+        set: function (a) {
+            var b = this.ax;
+            this.ax = a;
+            if (b != this.ax) {
+                this.cl("DataTemplateContext", b, this.ax);
             }
         },
         enumerable: false,
         configurable: true
     });
-    XIcon.prototype.ce = function () {
+    XIcon.prototype.cj = function () {
         this.v = true;
     };
-    XIcon.prototype.cf = function () {
+    XIcon.prototype.ck = function () {
         this.v = false;
     };
     Object.defineProperty(XIcon.prototype, "o", {
@@ -9701,21 +9758,21 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.n;
             this.n = a;
             if (b != this.n) {
-                this.cg("TextStyle", b, a);
+                this.cl("TextStyle", b, a);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(XIcon.prototype, "bm", {
+    Object.defineProperty(XIcon.prototype, "bq", {
         get: function () {
-            return this.a2;
+            return this.a4;
         },
         set: function (a) {
-            var b = this.a2;
-            this.a2 = a;
-            if (b != this.a2) {
-                this.cg("Id", b, a);
+            var b = this.a4;
+            this.a4 = a;
+            if (b != this.a4) {
+                this.cl("Id", b, a);
             }
         },
         enumerable: false,
@@ -9737,21 +9794,21 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             this.au = a;
             this.p = true;
             if (b != this.au) {
-                this.cg("TabIndex", b, a);
+                this.cl("TabIndex", b, a);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(XIcon.prototype, "a9", {
+    Object.defineProperty(XIcon.prototype, "bb", {
         get: function () {
-            return this.a0;
+            return this.a2;
         },
         set: function (a) {
-            var b = this.a0;
-            this.a0 = a;
-            if (b != this.a0) {
-                this.cg("AriaLabel", b, a);
+            var b = this.a2;
+            this.a2 = a;
+            if (b != this.a2) {
+                this.cl("AriaLabel", b, a);
             }
         },
         enumerable: false,
@@ -9765,7 +9822,7 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.r;
             this.r = a;
             if (b != this.r) {
-                this.cg("IsHover", b, a);
+                this.cl("IsHover", b, a);
             }
         },
         enumerable: false,
@@ -9779,7 +9836,7 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.q;
             this.q = a;
             if (b != this.q) {
-                this.cg("IsDisabled", b, a);
+                this.cl("IsDisabled", b, a);
             }
         },
         enumerable: false,
@@ -9793,7 +9850,7 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.ab;
             this.ab = a;
             if (b != this.ab) {
-                this.cg("Opacity", b, this.ab);
+                this.cl("Opacity", b, this.ab);
             }
         },
         enumerable: false,
@@ -9807,7 +9864,7 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.ae;
             this.ae = a;
             if (b != this.ae) {
-                this.cg("ViewBoxLeft", b, this.ae);
+                this.cl("ViewBoxLeft", b, this.ae);
             }
         },
         enumerable: false,
@@ -9821,7 +9878,7 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.af;
             this.af = a;
             if (b != this.af) {
-                this.cg("ViewBoxTop", b, this.af);
+                this.cl("ViewBoxTop", b, this.af);
             }
         },
         enumerable: false,
@@ -9835,7 +9892,7 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.ag;
             this.ag = a;
             if (b != this.ag) {
-                this.cg("ViewBoxWidth", b, this.ag);
+                this.cl("ViewBoxWidth", b, this.ag);
             }
         },
         enumerable: false,
@@ -9849,7 +9906,7 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.ad;
             this.ad = a;
             if (b != this.ad) {
-                this.cg("ViewBoxHeight", b, this.ad);
+                this.cl("ViewBoxHeight", b, this.ad);
             }
         },
         enumerable: false,
@@ -9863,7 +9920,7 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.ah;
             this.ah = a;
             if (b != this.ah) {
-                this.cg("Width", b, this.ah);
+                this.cl("Width", b, this.ah);
             }
         },
         enumerable: false,
@@ -9877,19 +9934,19 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.z;
             this.z = a;
             if (b != this.z) {
-                this.cg("Height", b, this.z);
+                this.cl("Height", b, this.z);
             }
         },
         enumerable: false,
         configurable: true
     });
-    XIcon.prototype.ch = function () {
+    XIcon.prototype.cm = function () {
     };
     XIcon.prototype.onDetachedFromUI = function () {
-        this.view.ak();
+        this.view.al();
     };
     XIcon.prototype.onAttachedToUI = function () {
-        this.view.ah();
+        this.view.ai();
     };
     XIcon.prototype.x = function () {
         if (this.disabled) {
@@ -9905,10 +9962,10 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
     XIcon.prototype.w = function () {
         return this.view.l();
     };
-    XIcon.prototype.ay = function () {
+    XIcon.prototype.a0 = function () {
         return this.g();
     };
-    XIcon.prototype.be = function () {
+    XIcon.prototype.bi = function () {
         var a = this.g();
         return a.l();
     };
@@ -9922,7 +9979,7 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
         a.a = this.view.a();
         a.svg = this.svg;
         a.svgPath = this.svgPath;
-        a.k = this.bc;
+        a.k = this.bg;
         if (this.o != null) {
             var c = this.o;
             if (this.view != null && c.q == null) {
@@ -9954,15 +10011,15 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
         return a;
     };
     XIcon.prototype.provideContainer = function (a) {
-        this.view.aj(a);
+        this.view.ak(a);
     };
     XIcon.$t = markType(XIcon, 'XIcon', Base.$, [INotifyPropertyChanged_$type, IIcon_$type]);
-    XIcon.c4 = null;
-    XIcon.c9 = null;
-    XIcon.c8 = null;
-    XIcon.c5 = null;
-    XIcon.c6 = null;
-    XIcon.c7 = null;
+    XIcon.db = null;
+    XIcon.dg = null;
+    XIcon.df = null;
+    XIcon.dc = null;
+    XIcon.dd = null;
+    XIcon.de = null;
     XIcon.ak = NaN;
     XIcon.aj = NaN;
     XIcon.aw = 0;
@@ -10197,11 +10254,11 @@ var IgcXIconComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets the fill color currently used by the icon.
         */
         get: function () {
-            return brushToString(this.i.c1);
+            return brushToString(this.i.c8);
         },
         set: function (v) {
-            this.i.c1 = stringToBrush(v);
-            this._a("actualFill", brushToString(this.i.c1));
+            this.i.c8 = stringToBrush(v);
+            this._a("actualFill", brushToString(this.i.c8));
         },
         enumerable: false,
         configurable: true
@@ -10211,11 +10268,11 @@ var IgcXIconComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets the stroke color currently used by the icon.
         */
         get: function () {
-            return brushToString(this.i.c2);
+            return brushToString(this.i.c9);
         },
         set: function (v) {
-            this.i.c2 = stringToBrush(v);
-            this._a("actualStroke", brushToString(this.i.c2));
+            this.i.c9 = stringToBrush(v);
+            this._a("actualStroke", brushToString(this.i.c9));
         },
         enumerable: false,
         configurable: true
@@ -10225,11 +10282,11 @@ var IgcXIconComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets the text color currently used by the icon.
         */
         get: function () {
-            return brushToString(this.i.c3);
+            return brushToString(this.i.da);
         },
         set: function (v) {
-            this.i.c3 = stringToBrush(v);
-            this._a("actualTextColor", brushToString(this.i.c3));
+            this.i.da = stringToBrush(v);
+            this._a("actualTextColor", brushToString(this.i.da));
         },
         enumerable: false,
         configurable: true
@@ -10267,11 +10324,11 @@ var IgcXIconComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the stroke color to use for the icon.
         */
         get: function () {
-            return brushToString(this.i.dh);
+            return brushToString(this.i.dp);
         },
         set: function (v) {
-            this.i.dh = stringToBrush(v);
-            this._a("stroke", brushToString(this.i.dh));
+            this.i.dp = stringToBrush(v);
+            this._a("stroke", brushToString(this.i.dp));
         },
         enumerable: false,
         configurable: true
@@ -10295,11 +10352,11 @@ var IgcXIconComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the text color to use for the icon.
         */
         get: function () {
-            return brushToString(this.i.di);
+            return brushToString(this.i.dq);
         },
         set: function (v) {
-            this.i.di = stringToBrush(v);
-            this._a("textColor", brushToString(this.i.di));
+            this.i.dq = stringToBrush(v);
+            this._a("textColor", brushToString(this.i.dq));
         },
         enumerable: false,
         configurable: true
@@ -10309,11 +10366,11 @@ var IgcXIconComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the fill color to use when the icon is hovered.
         */
         get: function () {
-            return brushToString(this.i.da);
+            return brushToString(this.i.dh);
         },
         set: function (v) {
-            this.i.da = stringToBrush(v);
-            this._a("hoverFill", brushToString(this.i.da));
+            this.i.dh = stringToBrush(v);
+            this._a("hoverFill", brushToString(this.i.dh));
         },
         enumerable: false,
         configurable: true
@@ -10323,11 +10380,11 @@ var IgcXIconComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the stroke color to use when the icon is hovered.
         */
         get: function () {
-            return brushToString(this.i.db);
+            return brushToString(this.i.di);
         },
         set: function (v) {
-            this.i.db = stringToBrush(v);
-            this._a("hoverStroke", brushToString(this.i.db));
+            this.i.di = stringToBrush(v);
+            this._a("hoverStroke", brushToString(this.i.di));
         },
         enumerable: false,
         configurable: true
@@ -10351,11 +10408,11 @@ var IgcXIconComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the text color to use when the icon is hovered.
         */
         get: function () {
-            return brushToString(this.i.dc);
+            return brushToString(this.i.dj);
         },
         set: function (v) {
-            this.i.dc = stringToBrush(v);
-            this._a("hoverTextColor", brushToString(this.i.dc));
+            this.i.dj = stringToBrush(v);
+            this._a("hoverTextColor", brushToString(this.i.dj));
         },
         enumerable: false,
         configurable: true
@@ -10403,11 +10460,11 @@ var IgcXIconComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * class.
         */
         get: function () {
-            return brushToString(this.i.dd);
+            return brushToString(this.i.dk);
         },
         set: function (v) {
-            this.i.dd = stringToBrush(v);
-            this._a("primaryFillColor", brushToString(this.i.dd));
+            this.i.dk = stringToBrush(v);
+            this._a("primaryFillColor", brushToString(this.i.dk));
         },
         enumerable: false,
         configurable: true
@@ -10421,11 +10478,11 @@ var IgcXIconComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * class.
         */
         get: function () {
-            return brushToString(this.i.de);
+            return brushToString(this.i.dl);
         },
         set: function (v) {
-            this.i.de = stringToBrush(v);
-            this._a("primaryStrokeColor", brushToString(this.i.de));
+            this.i.dl = stringToBrush(v);
+            this._a("primaryStrokeColor", brushToString(this.i.dl));
         },
         enumerable: false,
         configurable: true
@@ -10439,11 +10496,11 @@ var IgcXIconComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * class.
         */
         get: function () {
-            return brushToString(this.i.df);
+            return brushToString(this.i.dm);
         },
         set: function (v) {
-            this.i.df = stringToBrush(v);
-            this._a("secondaryFillColor", brushToString(this.i.df));
+            this.i.dm = stringToBrush(v);
+            this._a("secondaryFillColor", brushToString(this.i.dm));
         },
         enumerable: false,
         configurable: true
@@ -10457,11 +10514,11 @@ var IgcXIconComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * class.
         */
         get: function () {
-            return brushToString(this.i.dg);
+            return brushToString(this.i.dn);
         },
         set: function (v) {
-            this.i.dg = stringToBrush(v);
-            this._a("secondaryStrokeColor", brushToString(this.i.dg));
+            this.i.dn = stringToBrush(v);
+            this._a("secondaryStrokeColor", brushToString(this.i.dn));
         },
         enumerable: false,
         configurable: true
@@ -10471,10 +10528,10 @@ var IgcXIconComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the image source for the icon. Used if none of the other icon types are not used.
         */
         get: function () {
-            return this.i.az;
+            return this.i.a1;
         },
         set: function (v) {
-            this.i.az = v;
+            this.i.a1 = v;
         },
         enumerable: false,
         configurable: true
@@ -10484,10 +10541,10 @@ var IgcXIconComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets data url for the icon to use.
         */
         get: function () {
-            return this.i.bc;
+            return this.i.bg;
         },
         set: function (v) {
-            this.i.bc = v;
+            this.i.bg = v;
         },
         enumerable: false,
         configurable: true
@@ -10559,10 +10616,10 @@ var IgcXIconComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the id to use for the checkbox.
         */
         get: function () {
-            return this.i.bm;
+            return this.i.bq;
         },
         set: function (v) {
-            this.i.bm = v;
+            this.i.bq = v;
         },
         enumerable: false,
         configurable: true
@@ -10586,10 +10643,10 @@ var IgcXIconComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the value of the aria-label attribute.
         */
         get: function () {
-            return this.i.a9;
+            return this.i.bb;
         },
         set: function (v) {
-            this.i.a9 = v;
+            this.i.bb = v;
         },
         enumerable: false,
         configurable: true
@@ -10793,7 +10850,7 @@ var IgcXIconComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     
     */
     IgcXIconComponent.prototype.exportVisualModel = function () {
-        var iv = this.i.ay();
+        var iv = this.i.a0();
         return (iv);
     };
     /**
@@ -10801,7 +10858,7 @@ var IgcXIconComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     
     */
     IgcXIconComponent.prototype.exportSerializedVisualModel = function () {
-        var iv = this.i.be();
+        var iv = this.i.bi();
         return (iv);
     };
     IgcXIconComponent._observedAttributesIgcXIconComponent = null;
@@ -15575,7 +15632,7 @@ var InputGroupView = /** @class */ /*@__PURE__*/ (function (_super) {
     };
     InputGroupView.prototype.ac = function (a) {
         if (typeCast(XLabel.$, a) !== null) {
-            a.bd = "flex-start";
+            a.be = "flex-start";
         }
     };
     InputGroupView.prototype.ae = function (a) {
@@ -16199,21 +16256,21 @@ var LabelView = /** @class */ /*@__PURE__*/ (function (_super) {
         c.setStyleProperty("overflow", "hidden");
         c.setStyleProperty("height", "1.125rem");
         c.setStyleProperty("backface-visibility", "hidden");
-        NativeUI.q(this.m.rootWrapper, this.c.c2);
+        NativeUI.q(this.m.rootWrapper, this.c.c3);
         c.setStyleProperty("outline-style", "none");
         c.setStyleProperty("box-shadow", "none");
         c.setStyleProperty("font-family", "Verdana");
         c.setStyleProperty("font-size", "1rem");
         this.n = c;
         this.m.append(this.n);
-        this.c.ck();
+        this.c.cl();
     };
     LabelView.prototype.l = function () {
         return this.c.l == 0 ? (this.j() * 0.5) : 0;
     };
     LabelView.prototype.aj = function () {
         var _this = this;
-        this.c.bj = "block";
+        this.c.bk = "block";
         var a = new TransformGroup();
         a.j.add(((function () {
             var $ret = new TranslateTransform();
@@ -16260,8 +16317,8 @@ var LabelView = /** @class */ /*@__PURE__*/ (function (_super) {
     };
     LabelView.prototype.ab = function () {
         if (this.m != null) {
-            this.m.rootWrapper.setStyleProperty("display", this.c.bj);
-            this.n.setStyleProperty("display", this.c.bj);
+            this.m.rootWrapper.setStyleProperty("display", this.c.bk);
+            this.n.setStyleProperty("display", this.c.bk);
             var ext_ = this.m.getExternal(this.c, null, null);
             if (ext_ && ext_._onDisplayChanged) {
                 ext_._onDisplayChanged();
@@ -16271,8 +16328,8 @@ var LabelView = /** @class */ /*@__PURE__*/ (function (_super) {
     };
     LabelView.prototype.w = function () {
         if (this.m != null) {
-            this.m.rootWrapper.setStyleProperty("align-items", this.c.bb);
-            this.n.setStyleProperty("align-items", this.c.bb);
+            this.m.rootWrapper.setStyleProperty("align-items", this.c.bc);
+            this.n.setStyleProperty("align-items", this.c.bc);
             var ext_ = this.m.getExternal(this.c, null, null);
             if (ext_ && ext_._onAlignItemsChanged) {
                 ext_._onAlignItemsChanged();
@@ -16282,8 +16339,8 @@ var LabelView = /** @class */ /*@__PURE__*/ (function (_super) {
     };
     LabelView.prototype.x = function () {
         if (this.m != null) {
-            this.m.rootWrapper.setStyleProperty("align-self", this.c.bd);
-            this.n.setStyleProperty("align-self", this.c.bd);
+            this.m.rootWrapper.setStyleProperty("align-self", this.c.be);
+            this.n.setStyleProperty("align-self", this.c.be);
             var ext_ = this.m.getExternal(this.c, null, null);
             if (ext_ && ext_._onAlignSelfChanged) {
                 ext_._onAlignSelfChanged();
@@ -16293,8 +16350,8 @@ var LabelView = /** @class */ /*@__PURE__*/ (function (_super) {
     };
     LabelView.prototype.ac = function () {
         if (this.m != null) {
-            this.m.rootWrapper.setStyleProperty("flex-direction", this.c.bm);
-            this.n.setStyleProperty("flex-direction", this.c.bm);
+            this.m.rootWrapper.setStyleProperty("flex-direction", this.c.bn);
+            this.n.setStyleProperty("flex-direction", this.c.bn);
             var ext_ = this.m.getExternal(this.c, null, null);
             if (ext_ && ext_._onFlexDirectionChanged) {
                 ext_._onFlexDirectionChanged();
@@ -16304,8 +16361,8 @@ var LabelView = /** @class */ /*@__PURE__*/ (function (_super) {
     };
     LabelView.prototype.ad = function () {
         if (this.m != null) {
-            this.m.rootWrapper.setStyleProperty("flex-grow", this.c.bo);
-            this.n.setStyleProperty("flex-grow", this.c.bo);
+            this.m.rootWrapper.setStyleProperty("flex-grow", this.c.bp);
+            this.n.setStyleProperty("flex-grow", this.c.bp);
             var ext_ = this.m.getExternal(this.c, null, null);
             if (ext_ && ext_._onFlexGrowChanged) {
                 ext_._onFlexGrowChanged();
@@ -16374,10 +16431,10 @@ var LabelView = /** @class */ /*@__PURE__*/ (function (_super) {
         return parseFloat(stringReplace(a, "px", ""));
     };
     LabelView.prototype.t = function (a) {
-        this.c.cg();
+        this.c.ch();
     };
     LabelView.prototype.u = function (a) {
-        this.c.ch();
+        this.c.ci();
     };
     LabelView.prototype.y = function () {
         this.f = true;
@@ -17816,7 +17873,7 @@ var XInputGroup = /** @class */ /*@__PURE__*/ (function (_super) {
                     a.l = 2;
                     break;
             }
-            a.cn(_this.ai, false);
+            a.co(_this.ai, false);
         });
     };
     XInputGroup.prototype.kf = function () {
@@ -18161,11 +18218,11 @@ var XInputGroup = /** @class */ /*@__PURE__*/ (function (_super) {
         var _this = this;
         this.jp();
         if (this.ai) {
-            this.js(function (a) { return a.cn(true, !_this.aj); });
+            this.js(function (a) { return a.co(true, !_this.aj); });
             this.jr(function (a) { return a.dq(_this.ar, !_this.aj); });
         }
         else {
-            this.js(function (a) { return a.cn(false, !_this.aj); });
+            this.js(function (a) { return a.co(false, !_this.aj); });
             this.jr(function (a) { return a.dq(_this.ar, !_this.aj); });
         }
     };
@@ -18173,12 +18230,12 @@ var XInputGroup = /** @class */ /*@__PURE__*/ (function (_super) {
         this.jp();
         if (this.ao) {
             var a = 1;
-            this.js(function (b) { return b.am = true; });
+            this.js(function (b) { return b.an = true; });
             this.j4(a);
         }
         else {
             var b = -1;
-            this.js(function (c) { return c.am = false; });
+            this.js(function (c) { return c.an = false; });
             this.j4(b);
         }
     };
@@ -20015,7 +20072,7 @@ var XInputGroup = /** @class */ /*@__PURE__*/ (function (_super) {
                 if (this.inputs._inner[b].e == null) {
                     this.inputs._inner[b].e = "Label" + a.l.count.toString();
                 }
-                a.l.add1(this.inputs._inner[b].av());
+                a.l.add1(this.inputs._inner[b].aw());
             }
             else if (typeCast(XInput.$, this.inputs._inner[b]) !== null) {
                 if (this.inputs._inner[b].e == null) {
@@ -20525,41 +20582,42 @@ var XLabel = /** @class */ /*@__PURE__*/ (function (_super) {
         var _this = _super.call(this) || this;
         _this.n = 0;
         _this._view = null;
+        _this.ak = false;
         _this.aa = null;
         _this.z = null;
         _this.ab = false;
         _this.r = 0;
         _this.q = 1;
-        _this.cu = ThemeResolver.ah(XLabel.o, XLabel.dd, XLabel.c6);
-        _this.cr = ThemeResolver.ah(XLabel.o, XLabel.da, XLabel.c3);
+        _this.cv = ThemeResolver.ah(XLabel.o, XLabel.de, XLabel.c7);
         _this.cs = ThemeResolver.ah(XLabel.o, XLabel.db, XLabel.c4);
         _this.ct = ThemeResolver.ah(XLabel.o, XLabel.dc, XLabel.c5);
+        _this.cu = ThemeResolver.ah(XLabel.o, XLabel.dd, XLabel.c6);
         _this.u = null;
-        _this.cy = XLabel.de;
-        _this.cv = XLabel.c7;
+        _this.cz = XLabel.df;
         _this.cw = XLabel.c8;
+        _this.cx = XLabel.c9;
         _this.k = 0;
         _this.ag = false;
         _this.ae = false;
         _this.v = null;
-        _this.cx = null;
-        _this.a3 = "ig-label-" + XLabel.au++;
-        _this.az = "inline-block";
+        _this.cy = null;
+        _this.a4 = "ig-label-" + XLabel.av++;
         _this.a0 = "inline-block";
-        _this.a1 = null;
-        _this.aw = "center";
+        _this.a1 = "inline-block";
+        _this.a2 = null;
         _this.ax = "center";
-        _this.as = 0;
+        _this.ay = "center";
+        _this.at = 0;
         _this.ac = false;
-        _this.a2 = null;
-        _this.ay = null;
-        _this.a4 = null;
+        _this.a3 = null;
+        _this.az = null;
+        _this.a5 = null;
         _this.af = false;
         _this.aj = false;
         _this.ad = false;
         _this.ai = false;
         _this.ah = false;
-        _this.aq = false;
+        _this.ar = false;
         var a = new LabelView();
         a.c = _this;
         _this.view = a;
@@ -20603,7 +20661,7 @@ var XLabel = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    XLabel.prototype.ca = function () {
+    XLabel.prototype.cb = function () {
         var _this = this;
         this.view.v();
         var a = false;
@@ -20645,37 +20703,37 @@ var XLabel = /** @class */ /*@__PURE__*/ (function (_super) {
             this.aa = KeyFrameAnimationFactory.f.c(this.view.b(this.i).m(new AnimationKeyFrameProperty(14, b), new AnimationKeyFrameProperty(2, BrushUtil.h(0, 255, 255, 255))).m(new AnimationKeyFrameProperty(14, d), new AnimationKeyFrameProperty(2, BrushUtil.h(this.l == 2 ? 255 : 0, 255, 255, 255))));
         }
         if (this.z == null) {
-            this.z = KeyFrameAnimationFactory.f.c(this.view.a(this.i).m(new AnimationKeyFrameProperty(7, this.c2)).m(new AnimationKeyFrameProperty(7, this.cz)));
+            this.z = KeyFrameAnimationFactory.f.c(this.view.a(this.i).m(new AnimationKeyFrameProperty(7, this.c3)).m(new AnimationKeyFrameProperty(7, this.c0)));
         }
     };
-    XLabel.prototype.cl = function (a, b) {
+    XLabel.prototype.cm = function (a, b) {
         var _this = this;
         if ((b > 0 && a.playbackRate < 0) || (b < 0 && a.playbackRate > 0)) {
             a.reverse();
-            if (this.aq) {
+            if (this.ar) {
                 a.finish();
-                this.cb(a);
+                this.cc(a);
                 return;
             }
-            a.finished.f(function (c) { return _this.cb(a); });
+            a.finished.f(function (c) { return _this.cc(a); });
         }
         else {
             a.play();
-            if (this.aq) {
+            if (this.ar) {
                 a.finish();
-                this.cb(a);
+                this.cc(a);
                 return;
             }
-            a.finished.f(function (c) { return _this.cb(a); });
+            a.finished.f(function (c) { return _this.cc(a); });
         }
     };
-    XLabel.prototype.cb = function (a) {
+    XLabel.prototype.cc = function (a) {
         a.commitStyles();
         if (a == this.aa && this.ai) {
             this.aa = null;
             if (this.ab) {
                 this.ab = false;
-                this.cf();
+                this.cg();
             }
         }
         if (a == this.z && this.ah) {
@@ -20686,15 +20744,15 @@ var XLabel = /** @class */ /*@__PURE__*/ (function (_super) {
         _super.prototype.h.call(this, a, b, c);
         switch (a) {
             case "BaseTheme":
-                this.co(this.p);
-                this.cq();
+                this.cp(this.p);
+                this.cr();
                 break;
             case "TextColor":
             case "HoverTextColor":
             case "TextStyle":
             case "HighlightTextColor":
             case "HoverHighlightTextColor":
-                this.cq();
+                this.cr();
                 break;
             case "ActualTextColor":
             case "ActualHoverTextColor":
@@ -20717,7 +20775,7 @@ var XLabel = /** @class */ /*@__PURE__*/ (function (_super) {
                         this.ah = true;
                     }
                 }
-                this.cp();
+                this.cq();
                 break;
             case "Text":
                 this.view.ai();
@@ -20733,10 +20791,10 @@ var XLabel = /** @class */ /*@__PURE__*/ (function (_super) {
                 this.view.aj();
                 break;
             case "IsHighlighted":
-                this.ce();
+                this.cf();
                 break;
             case "IsShifted":
-                this.cf();
+                this.cg();
                 break;
             case "ShiftType":
                 if (this.aa != null) {
@@ -20747,7 +20805,7 @@ var XLabel = /** @class */ /*@__PURE__*/ (function (_super) {
                         this.ai = true;
                     }
                 }
-                this.ci();
+                this.cj();
                 break;
             case "Display":
                 this.view.ab();
@@ -20766,38 +20824,44 @@ var XLabel = /** @class */ /*@__PURE__*/ (function (_super) {
                 break;
         }
     };
-    XLabel.prototype.ci = function () {
+    XLabel.prototype.cj = function () {
         this.view.aj();
     };
-    XLabel.prototype.cf = function () {
+    XLabel.prototype.cg = function () {
         this.view.af();
-        this.ca();
+        if (this.ak) {
+            return;
+        }
+        this.cb();
         var a = 1;
-        var b = this.ao;
+        var b = this.ap;
         if (!b) {
             a = -1;
         }
-        this.cl(this.aa, a);
+        this.cm(this.aa, a);
     };
-    XLabel.prototype.ce = function () {
-        this.ca();
+    XLabel.prototype.cf = function () {
+        if (this.ak) {
+            return;
+        }
+        this.cb();
         var a = 1;
-        var b = this.am;
+        var b = this.an;
         if (!b) {
             a = -1;
         }
-        this.cl(this.z, a);
+        this.cm(this.z, a);
     };
     XLabel.prototype.onSizeReady = function () {
         if (this.aa != null) {
-            this.b9();
-            if (this.ao) {
+            this.ca();
+            if (this.ap) {
                 this.view.aj();
-                this.cf();
+                this.cg();
             }
         }
     };
-    XLabel.prototype.b9 = function () {
+    XLabel.prototype.ca = function () {
         if (this.aa != null && this.aa.playState == 3) {
             this.aa = null;
         }
@@ -20806,26 +20870,26 @@ var XLabel = /** @class */ /*@__PURE__*/ (function (_super) {
             this.ai = true;
         }
     };
-    XLabel.prototype.cq = function () {
-        this.c2 = this.di != null ? this.di : XLabel.de;
-        this.c1 = this.dh != null ? this.dh : XLabel.de;
-        this.cz = this.df != null ? this.df : XLabel.c7;
+    XLabel.prototype.cr = function () {
+        this.c3 = this.dj != null ? this.dj : XLabel.df;
+        this.c2 = this.di != null ? this.di : XLabel.df;
+        this.c0 = this.dg != null ? this.dg : XLabel.c8;
         this.w = this.y != null ? this.y : XLabel.x;
     };
-    XLabel.prototype.cp = function () {
+    XLabel.prototype.cq = function () {
         if (this.w != null) {
             this.view.am(this.w);
         }
         else {
             this.view.am(this.view.e());
         }
-        this.view.ah(this.c2);
+        this.view.ah(this.c3);
     };
-    XLabel.prototype.co = function (a) {
-        XLabel.de = ThemeResolver.ah(a, XLabel.dd, XLabel.c6);
-        XLabel.c7 = ThemeResolver.ah(a, XLabel.da, XLabel.c3);
-        XLabel.c9 = ThemeResolver.ah(a, XLabel.dc, XLabel.c5);
+    XLabel.prototype.cp = function (a) {
+        XLabel.df = ThemeResolver.ah(a, XLabel.de, XLabel.c7);
         XLabel.c8 = ThemeResolver.ah(a, XLabel.db, XLabel.c4);
+        XLabel.da = ThemeResolver.ah(a, XLabel.dd, XLabel.c6);
+        XLabel.c9 = ThemeResolver.ah(a, XLabel.dc, XLabel.c5);
     };
     Object.defineProperty(XLabel.prototype, "t", {
         get: function () {
@@ -20855,34 +20919,20 @@ var XLabel = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(XLabel.prototype, "c2", {
+    Object.defineProperty(XLabel.prototype, "c3", {
         get: function () {
-            return this.cu;
+            return this.cv;
         },
         set: function (a) {
-            var b = this.cu;
-            this.cu = a;
-            if (b != this.cu) {
+            var b = this.cv;
+            this.cv = a;
+            if (b != this.cv) {
                 this.g("ActualTextColor", b, a);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(XLabel.prototype, "cz", {
-        get: function () {
-            return this.cr;
-        },
-        set: function (a) {
-            var b = this.cr;
-            this.cr = a;
-            if (b != this.cr) {
-                this.g("ActualHighlightTextColor", b, a);
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
     Object.defineProperty(XLabel.prototype, "c0", {
         get: function () {
             return this.cs;
@@ -20891,7 +20941,7 @@ var XLabel = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.cs;
             this.cs = a;
             if (b != this.cs) {
-                this.g("ActualHoverHighlightTextColor", b, a);
+                this.g("ActualHighlightTextColor", b, a);
             }
         },
         enumerable: false,
@@ -20905,6 +20955,20 @@ var XLabel = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.ct;
             this.ct = a;
             if (b != this.ct) {
+                this.g("ActualHoverHighlightTextColor", b, a);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(XLabel.prototype, "c2", {
+        get: function () {
+            return this.cu;
+        },
+        set: function (a) {
+            var b = this.cu;
+            this.cu = a;
+            if (b != this.cu) {
                 this.g("ActualHoverTextColor", b, a);
             }
         },
@@ -20925,42 +20989,42 @@ var XLabel = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(XLabel.prototype, "di", {
+    Object.defineProperty(XLabel.prototype, "dj", {
         get: function () {
-            return this.cy;
+            return this.cz;
         },
         set: function (a) {
-            var b = this.cy;
-            this.cy = a;
-            if (b != this.cy) {
+            var b = this.cz;
+            this.cz = a;
+            if (b != this.cz) {
                 this.g("TextColor", b, a);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(XLabel.prototype, "df", {
+    Object.defineProperty(XLabel.prototype, "dg", {
         get: function () {
-            return this.cv;
+            return this.cw;
         },
         set: function (a) {
-            var b = this.cv;
-            this.cv = a;
-            if (b != this.cv) {
+            var b = this.cw;
+            this.cw = a;
+            if (b != this.cw) {
                 this.g("HighlightTextColor", b, a);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(XLabel.prototype, "dg", {
+    Object.defineProperty(XLabel.prototype, "dh", {
         get: function () {
-            return this.cw;
+            return this.cx;
         },
         set: function (a) {
-            var b = this.cw;
-            this.cw = a;
-            if (b != this.cw) {
+            var b = this.cx;
+            this.cx = a;
+            if (b != this.cx) {
                 this.g("HoverHighlightTextColor", b, a);
             }
         },
@@ -20981,7 +21045,7 @@ var XLabel = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(XLabel.prototype, "ao", {
+    Object.defineProperty(XLabel.prototype, "ap", {
         get: function () {
             return this.ag;
         },
@@ -20995,24 +21059,24 @@ var XLabel = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    XLabel.prototype.cn = function (a, b) {
+    XLabel.prototype.co = function (a, b) {
         if (b === void 0) {
             b = true;
         }
-        var c = this.aq;
+        var c = this.ar;
         if (!b) {
-            this.aq = true;
+            this.ar = true;
         }
         try {
-            this.ao = a;
+            this.ap = a;
         }
         finally {
             if (!b) {
-                this.aq = c;
+                this.ar = c;
             }
         }
     };
-    Object.defineProperty(XLabel.prototype, "am", {
+    Object.defineProperty(XLabel.prototype, "an", {
         get: function () {
             return this.ae;
         },
@@ -21026,11 +21090,11 @@ var XLabel = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    XLabel.prototype.cg = function () {
-        this.an = true;
-    };
     XLabel.prototype.ch = function () {
-        this.an = false;
+        this.ao = true;
+    };
+    XLabel.prototype.ci = function () {
+        this.ao = false;
     };
     Object.defineProperty(XLabel.prototype, "y", {
         get: function () {
@@ -21046,49 +21110,35 @@ var XLabel = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(XLabel.prototype, "dh", {
+    Object.defineProperty(XLabel.prototype, "di", {
         get: function () {
-            return this.cx;
+            return this.cy;
         },
         set: function (a) {
-            var b = this.cx;
-            this.cx = a;
-            if (b != this.cx) {
+            var b = this.cy;
+            this.cy = a;
+            if (b != this.cy) {
                 this.g("HoverTextColor", b, a);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(XLabel.prototype, "bv", {
+    Object.defineProperty(XLabel.prototype, "bw", {
         get: function () {
-            return this.a3;
+            return this.a4;
         },
         set: function (a) {
-            var b = this.a3;
-            this.a3 = a;
-            if (b != this.a3) {
+            var b = this.a4;
+            this.a4 = a;
+            if (b != this.a4) {
                 this.g("Id", b, a);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(XLabel.prototype, "bj", {
-        get: function () {
-            return this.az;
-        },
-        set: function (a) {
-            var b = this.az;
-            this.az = a;
-            if (b != this.az) {
-                this.g("Display", b, a);
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(XLabel.prototype, "bm", {
+    Object.defineProperty(XLabel.prototype, "bk", {
         get: function () {
             return this.a0;
         },
@@ -21096,13 +21146,13 @@ var XLabel = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.a0;
             this.a0 = a;
             if (b != this.a0) {
-                this.g("FlexDirection", b, a);
+                this.g("Display", b, a);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(XLabel.prototype, "bo", {
+    Object.defineProperty(XLabel.prototype, "bn", {
         get: function () {
             return this.a1;
         },
@@ -21110,27 +21160,27 @@ var XLabel = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.a1;
             this.a1 = a;
             if (b != this.a1) {
-                this.g("FlexGrow", b, a);
+                this.g("FlexDirection", b, a);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(XLabel.prototype, "bb", {
+    Object.defineProperty(XLabel.prototype, "bp", {
         get: function () {
-            return this.aw;
+            return this.a2;
         },
         set: function (a) {
-            var b = this.aw;
-            this.aw = a;
-            if (b != this.aw) {
-                this.g("AlignItems", b, a);
+            var b = this.a2;
+            this.a2 = a;
+            if (b != this.a2) {
+                this.g("FlexGrow", b, a);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(XLabel.prototype, "bd", {
+    Object.defineProperty(XLabel.prototype, "bc", {
         get: function () {
             return this.ax;
         },
@@ -21138,56 +21188,70 @@ var XLabel = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.ax;
             this.ax = a;
             if (b != this.ax) {
+                this.g("AlignItems", b, a);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(XLabel.prototype, "be", {
+        get: function () {
+            return this.ay;
+        },
+        set: function (a) {
+            var b = this.ay;
+            this.ay = a;
+            if (b != this.ay) {
                 this.g("AlignSelf", b, a);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(XLabel.prototype, "ak", {
+    Object.defineProperty(XLabel.prototype, "al", {
         get: function () {
             return this.ac;
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(XLabel.prototype, "at", {
+    Object.defineProperty(XLabel.prototype, "au", {
         get: function () {
-            return this.as;
+            return this.at;
         },
         set: function (a) {
-            var b = this.as;
-            this.as = a;
+            var b = this.at;
+            this.at = a;
             this.ac = true;
-            if (b != this.as) {
+            if (b != this.at) {
                 this.g("TabIndex", b, a);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(XLabel.prototype, "bq", {
+    Object.defineProperty(XLabel.prototype, "br", {
         get: function () {
-            return this.a2;
+            return this.a3;
         },
         set: function (a) {
-            var b = this.a2;
-            this.a2 = a;
-            if (b != this.a2) {
+            var b = this.a3;
+            this.a3 = a;
+            if (b != this.a3) {
                 this.g("TabIndex", b, a);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(XLabel.prototype, "bf", {
+    Object.defineProperty(XLabel.prototype, "bg", {
         get: function () {
-            return this.ay;
+            return this.az;
         },
         set: function (a) {
-            var b = this.ay;
-            this.ay = a;
-            if (b != this.ay) {
+            var b = this.az;
+            this.az = a;
+            if (b != this.az) {
                 this.g("AriaLabel", b, a);
             }
         },
@@ -21196,19 +21260,19 @@ var XLabel = /** @class */ /*@__PURE__*/ (function (_super) {
     });
     Object.defineProperty(XLabel.prototype, "text", {
         get: function () {
-            return this.a4;
+            return this.a5;
         },
         set: function (a) {
-            var b = this.a4;
-            this.a4 = a;
-            if (b != this.a4) {
+            var b = this.a5;
+            this.a5 = a;
+            if (b != this.a5) {
                 this.g("Text", b, a);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(XLabel.prototype, "an", {
+    Object.defineProperty(XLabel.prototype, "ao", {
         get: function () {
             return this.af;
         },
@@ -21222,7 +21286,7 @@ var XLabel = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(XLabel.prototype, "ar", {
+    Object.defineProperty(XLabel.prototype, "as", {
         get: function () {
             return this.aj;
         },
@@ -21250,7 +21314,7 @@ var XLabel = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    XLabel.prototype.ck = function () {
+    XLabel.prototype.cl = function () {
         this.view.ai();
     };
     XLabel.prototype.onDetachedFromUI = function () {
@@ -21259,13 +21323,13 @@ var XLabel = /** @class */ /*@__PURE__*/ (function (_super) {
     XLabel.prototype.onAttachedToUI = function () {
         this.view.y();
     };
-    XLabel.prototype.ap = function () {
+    XLabel.prototype.aq = function () {
         return this.view.g();
     };
-    XLabel.prototype.av = function () {
+    XLabel.prototype.aw = function () {
         return this.j();
     };
-    XLabel.prototype.bl = function () {
+    XLabel.prototype.bm = function () {
         var a = this.j();
         return a.q();
     };
@@ -21277,15 +21341,15 @@ var XLabel = /** @class */ /*@__PURE__*/ (function (_super) {
         a.d = this.s;
         a.a = AppearanceHelper.a(NativeUI.al(b));
         a.b = this.l;
-        a.i = this.ao;
-        a.g = this.am;
-        a.m = this.bj;
-        a.n = this.bm;
-        a.o = this.bo;
-        a.l = this.bb;
+        a.i = this.ap;
+        a.g = this.an;
+        a.m = this.bk;
+        a.n = this.bn;
+        a.o = this.bp;
+        a.l = this.bc;
         a.r = this.text;
-        a.h = this.an;
-        a.j = this.ar;
+        a.h = this.ao;
+        a.j = this.as;
         a.f = this.disabled;
         a.p = this.e;
         if (this.w != null) {
@@ -21322,21 +21386,21 @@ var XLabel = /** @class */ /*@__PURE__*/ (function (_super) {
         this.view.z(a);
     };
     XLabel.$t = markType(XLabel, 'XLabel', XInputGroupItem.$);
-    XLabel.dd = BrushUtil.h(221, 0, 0, 0);
-    XLabel.da = BrushUtil.h(255, 0, 153, 155);
-    XLabel.dc = BrushUtil.h(221, 0, 0, 0);
+    XLabel.de = BrushUtil.h(221, 0, 0, 0);
     XLabel.db = BrushUtil.h(255, 0, 153, 155);
-    XLabel.c6 = BrushUtil.h(255, 24, 29, 31);
-    XLabel.c3 = BrushUtil.h(255, 33, 150, 243);
-    XLabel.c5 = BrushUtil.h(255, 24, 29, 31);
+    XLabel.dd = BrushUtil.h(221, 0, 0, 0);
+    XLabel.dc = BrushUtil.h(255, 0, 153, 155);
+    XLabel.c7 = BrushUtil.h(255, 24, 29, 31);
     XLabel.c4 = BrushUtil.h(255, 33, 150, 243);
+    XLabel.c6 = BrushUtil.h(255, 24, 29, 31);
+    XLabel.c5 = BrushUtil.h(255, 33, 150, 243);
     XLabel.o = 2;
-    XLabel.de = ThemeResolver.ah(XLabel.o, XLabel.dd, XLabel.c6);
-    XLabel.c7 = ThemeResolver.ah(XLabel.o, XLabel.da, XLabel.c3);
-    XLabel.c9 = ThemeResolver.ah(XLabel.o, XLabel.dc, XLabel.c5);
+    XLabel.df = ThemeResolver.ah(XLabel.o, XLabel.de, XLabel.c7);
     XLabel.c8 = ThemeResolver.ah(XLabel.o, XLabel.db, XLabel.c4);
+    XLabel.da = ThemeResolver.ah(XLabel.o, XLabel.dd, XLabel.c6);
+    XLabel.c9 = ThemeResolver.ah(XLabel.o, XLabel.dc, XLabel.c5);
     XLabel.x = null;
-    XLabel.au = 0;
+    XLabel.av = 0;
     return XLabel;
 }(XInputGroupItem));
 /**
@@ -23526,11 +23590,11 @@ var IgcXLabelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets the actual color to use for the text color.
         */
         get: function () {
-            return brushToString(this.i.c2);
+            return brushToString(this.i.c3);
         },
         set: function (v) {
-            this.i.c2 = stringToBrush(v);
-            this._a("actualTextColor", brushToString(this.i.c2));
+            this.i.c3 = stringToBrush(v);
+            this._a("actualTextColor", brushToString(this.i.c3));
         },
         enumerable: false,
         configurable: true
@@ -23540,11 +23604,11 @@ var IgcXLabelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets the actual color to use for the text color.
         */
         get: function () {
-            return brushToString(this.i.cz);
+            return brushToString(this.i.c0);
         },
         set: function (v) {
-            this.i.cz = stringToBrush(v);
-            this._a("actualHighlightTextColor", brushToString(this.i.cz));
+            this.i.c0 = stringToBrush(v);
+            this._a("actualHighlightTextColor", brushToString(this.i.c0));
         },
         enumerable: false,
         configurable: true
@@ -23554,11 +23618,11 @@ var IgcXLabelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets the actual color to use for the text color when highlighted and hovered.
         */
         get: function () {
-            return brushToString(this.i.c0);
+            return brushToString(this.i.c1);
         },
         set: function (v) {
-            this.i.c0 = stringToBrush(v);
-            this._a("actualHoverHighlightTextColor", brushToString(this.i.c0));
+            this.i.c1 = stringToBrush(v);
+            this._a("actualHoverHighlightTextColor", brushToString(this.i.c1));
         },
         enumerable: false,
         configurable: true
@@ -23568,11 +23632,11 @@ var IgcXLabelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets the actual hover color to use for the text.
         */
         get: function () {
-            return brushToString(this.i.c1);
+            return brushToString(this.i.c2);
         },
         set: function (v) {
-            this.i.c1 = stringToBrush(v);
-            this._a("actualHoverTextColor", brushToString(this.i.c1));
+            this.i.c2 = stringToBrush(v);
+            this._a("actualHoverTextColor", brushToString(this.i.c2));
         },
         enumerable: false,
         configurable: true
@@ -23582,11 +23646,11 @@ var IgcXLabelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the color to use for the text.
         */
         get: function () {
-            return brushToString(this.i.di);
+            return brushToString(this.i.dj);
         },
         set: function (v) {
-            this.i.di = stringToBrush(v);
-            this._a("textColor", brushToString(this.i.di));
+            this.i.dj = stringToBrush(v);
+            this._a("textColor", brushToString(this.i.dj));
         },
         enumerable: false,
         configurable: true
@@ -23596,11 +23660,11 @@ var IgcXLabelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the color to use for the text.
         */
         get: function () {
-            return brushToString(this.i.df);
+            return brushToString(this.i.dg);
         },
         set: function (v) {
-            this.i.df = stringToBrush(v);
-            this._a("highlightTextColor", brushToString(this.i.df));
+            this.i.dg = stringToBrush(v);
+            this._a("highlightTextColor", brushToString(this.i.dg));
         },
         enumerable: false,
         configurable: true
@@ -23610,11 +23674,11 @@ var IgcXLabelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the color to use for the text.
         */
         get: function () {
-            return brushToString(this.i.dg);
+            return brushToString(this.i.dh);
         },
         set: function (v) {
-            this.i.dg = stringToBrush(v);
-            this._a("hoverHighlightTextColor", brushToString(this.i.dg));
+            this.i.dh = stringToBrush(v);
+            this._a("hoverHighlightTextColor", brushToString(this.i.dh));
         },
         enumerable: false,
         configurable: true
@@ -23643,11 +23707,11 @@ var IgcXLabelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the color to use for the hovered text of the button regardless of type.
         */
         get: function () {
-            return brushToString(this.i.dh);
+            return brushToString(this.i.di);
         },
         set: function (v) {
-            this.i.dh = stringToBrush(v);
-            this._a("hoverTextColor", brushToString(this.i.dh));
+            this.i.di = stringToBrush(v);
+            this._a("hoverTextColor", brushToString(this.i.di));
         },
         enumerable: false,
         configurable: true
@@ -23657,10 +23721,10 @@ var IgcXLabelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the id to use for the checkbox.
         */
         get: function () {
-            return this.i.bv;
+            return this.i.bw;
         },
         set: function (v) {
-            this.i.bv = v;
+            this.i.bw = v;
         },
         enumerable: false,
         configurable: true
@@ -23670,10 +23734,10 @@ var IgcXLabelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the id to use for the checkbox.
         */
         get: function () {
-            return this.i.bj;
+            return this.i.bk;
         },
         set: function (v) {
-            this.i.bj = v;
+            this.i.bk = v;
         },
         enumerable: false,
         configurable: true
@@ -23683,10 +23747,10 @@ var IgcXLabelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the id to use for the checkbox.
         */
         get: function () {
-            return this.i.bm;
+            return this.i.bn;
         },
         set: function (v) {
-            this.i.bm = v;
+            this.i.bn = v;
         },
         enumerable: false,
         configurable: true
@@ -23696,10 +23760,10 @@ var IgcXLabelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the flex-grow setting for the button.
         */
         get: function () {
-            return this.i.bo;
+            return this.i.bp;
         },
         set: function (v) {
-            this.i.bo = v;
+            this.i.bp = v;
         },
         enumerable: false,
         configurable: true
@@ -23709,10 +23773,10 @@ var IgcXLabelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the id to use for the checkbox.
         */
         get: function () {
-            return this.i.bb;
+            return this.i.bc;
         },
         set: function (v) {
-            this.i.bb = v;
+            this.i.bc = v;
         },
         enumerable: false,
         configurable: true
@@ -23722,10 +23786,10 @@ var IgcXLabelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the id to use for the checkbox.
         */
         get: function () {
-            return this.i.bd;
+            return this.i.be;
         },
         set: function (v) {
-            this.i.bd = v;
+            this.i.be = v;
         },
         enumerable: false,
         configurable: true
@@ -23735,11 +23799,11 @@ var IgcXLabelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets TabIndex to use for the checkbox.
         */
         get: function () {
-            return this.i.at;
+            return this.i.au;
         },
         set: function (v) {
-            this.i.at = +v;
-            this._a("tabIndex", this.i.at);
+            this.i.au = +v;
+            this._a("tabIndex", this.i.au);
         },
         enumerable: false,
         configurable: true
@@ -23749,10 +23813,10 @@ var IgcXLabelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the for attribute to use for the label.
         */
         get: function () {
-            return this.i.bq;
+            return this.i.br;
         },
         set: function (v) {
-            this.i.bq = v;
+            this.i.br = v;
         },
         enumerable: false,
         configurable: true
@@ -23762,10 +23826,10 @@ var IgcXLabelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the value of the aria-label attribute.
         */
         get: function () {
-            return this.i.bf;
+            return this.i.bg;
         },
         set: function (v) {
-            this.i.bf = v;
+            this.i.bg = v;
         },
         enumerable: false,
         configurable: true
@@ -23788,11 +23852,11 @@ var IgcXLabelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets whether the label is hovered.
         */
         get: function () {
-            return this.i.an;
+            return this.i.ao;
         },
         set: function (v) {
-            this.i.an = ensureBool(v);
-            this._a("isHover", this.i.an);
+            this.i.ao = ensureBool(v);
+            this._a("isHover", this.i.ao);
         },
         enumerable: false,
         configurable: true
@@ -23802,11 +23866,11 @@ var IgcXLabelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the value for the label.
         */
         get: function () {
-            return this.i.ar;
+            return this.i.as;
         },
         set: function (v) {
-            this.i.ar = ensureBool(v);
-            this._a("value", this.i.ar);
+            this.i.as = ensureBool(v);
+            this._a("value", this.i.as);
         },
         enumerable: false,
         configurable: true
@@ -23836,7 +23900,7 @@ var IgcXLabelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     
     */
     IgcXLabelComponent.prototype.exportVisualModel = function () {
-        var iv = this.i.av();
+        var iv = this.i.aw();
         return (iv);
     };
     /**
@@ -23844,7 +23908,7 @@ var IgcXLabelComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     
     */
     IgcXLabelComponent.prototype.exportSerializedVisualModel = function () {
-        var iv = this.i.bl();
+        var iv = this.i.bm();
         return (iv);
     };
     IgcXLabelComponent._observedAttributesIgcXLabelComponent = null;
@@ -27920,7 +27984,7 @@ var XDatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             this.n.fill = this.dw;
         }
         if (this.r != null) {
-            this.r.di = this.dx;
+            this.r.dj = this.dx;
             this.r.y = this.ac;
         }
     };
@@ -27941,7 +28005,7 @@ var XDatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         this.q.t = this.y;
         this.r = new XLabel();
         this.h.as(this.r);
-        this.r.di = this.dx;
+        this.r.dj = this.dx;
         this.r.y = this.ac;
         this.q.appendContentChild(this.h.v());
         if (this.b4 != null && this.b4 != "") {
@@ -29611,7 +29675,7 @@ var XComponentBridge = /** @class */ /*@__PURE__*/ (function (_super) {
     };
     XComponentBridge.prototype.getTargetForBuildInProperty = function (a, b) {
         switch (b) {
-            case 106: return a;
+            case 108: return a;
         }
         return this.s != null ? this.s : a;
     };
@@ -29660,12 +29724,12 @@ var XInputBridge = /** @class */ /*@__PURE__*/ (function (_super) {
                 this.ab = d;
                 this.ag = b;
                 break;
-            case 26:
+            case 27:
                 f.compositionEnd = delegateCombine(f.compositionEnd, runOn(this, this.ap));
                 this.ac = d;
                 this.ah = b;
                 break;
-            case 27:
+            case 28:
                 f.keyDown = delegateCombine(f.keyDown, runOn(this, this.ar));
                 this.ad = d;
                 this.aj = b;
@@ -29680,7 +29744,7 @@ var XInputBridge = /** @class */ /*@__PURE__*/ (function (_super) {
                 this.aa = d;
                 this.af = b;
                 break;
-            case 24:
+            case 25:
                 this.ao(a);
                 var g = this.w(a);
                 var h = this.u;
@@ -29759,12 +29823,12 @@ var XInputBridge = /** @class */ /*@__PURE__*/ (function (_super) {
                 this.ab = null;
                 this.ag = null;
                 break;
-            case 26:
+            case 27:
                 f.compositionEnd = delegateRemove(f.compositionEnd, runOn(this, this.ap));
                 this.ac = null;
                 this.ah = null;
                 break;
-            case 27:
+            case 28:
                 f.keyDown = delegateRemove(f.keyDown, runOn(this, this.ar));
                 this.ad = null;
                 this.aj = null;
@@ -29779,7 +29843,7 @@ var XInputBridge = /** @class */ /*@__PURE__*/ (function (_super) {
                 this.aa = null;
                 this.af = null;
                 break;
-            case 24:
+            case 25:
                 this.ao(a);
                 var g = this.w(a);
                 var h = this.u;
@@ -29870,20 +29934,20 @@ var XInputBridge = /** @class */ /*@__PURE__*/ (function (_super) {
         var c = a;
         var d = typeCast(XInput.$, c.inputs._inner[0]);
         switch (b) {
-            case 101: return a.mc;
+            case 103: return a.mc;
             case 3:
                 this.an(a);
                 var e = this.v(a);
                 return e.text;
-            case 98:
+            case 100:
                 this.ao(a);
                 return this.u.svgPath;
-            case 99:
+            case 101:
                 this.ao(a);
                 return this.u.fill;
-            case 100:
+            case 102:
                 this.ao(a);
-                return this.u.dh;
+                return this.u.dp;
             case 2: return d.cq;
             case 1:
                 switch (c.t) {
@@ -29919,9 +29983,9 @@ var XInputBridge = /** @class */ /*@__PURE__*/ (function (_super) {
             case 21: return d.a1;
             case 32: return d.disabled;
             case 33: return d.d8;
-            case 103: return d.selectionStart;
-            case 104: return d.selectionEnd;
-            case 105: return c.an;
+            case 105: return d.selectionStart;
+            case 106: return d.selectionEnd;
+            case 107: return c.an;
         }
         return null;
     };
@@ -29929,7 +29993,7 @@ var XInputBridge = /** @class */ /*@__PURE__*/ (function (_super) {
         var d = a;
         var e = typeCast(XInput.$, d.inputs._inner[0]);
         switch (b) {
-            case 101:
+            case 103:
                 a.mc = c;
                 break;
             case 3:
@@ -29937,17 +30001,17 @@ var XInputBridge = /** @class */ /*@__PURE__*/ (function (_super) {
                 var f = this.v(a);
                 f.text = c;
                 break;
-            case 98:
+            case 100:
                 this.ao(a);
                 this.u.svgPath = c;
                 break;
-            case 99:
+            case 101:
                 this.ao(a);
                 this.u.fill = c;
                 break;
-            case 100:
+            case 102:
                 this.ao(a);
-                this.u.dh = c;
+                this.u.dp = c;
                 break;
             case 2:
                 e.cq = c == null ? null : c.toString();
@@ -30022,13 +30086,13 @@ var XInputBridge = /** @class */ /*@__PURE__*/ (function (_super) {
             case 33:
                 e.d8 = c;
                 break;
-            case 103:
+            case 105:
                 e.selectionStart = typeGetValue(c);
                 break;
-            case 104:
+            case 106:
                 e.selectionEnd = typeGetValue(c);
                 break;
-            case 105:
+            case 107:
                 d.an = c;
                 break;
         }
@@ -30278,7 +30342,7 @@ var XButtonBridge = /** @class */ /*@__PURE__*/ (function (_super) {
             case 11:
                 d.aa = c;
                 break;
-            case 86:
+            case 88:
                 d.by = c;
                 break;
             case 59:
@@ -30320,7 +30384,7 @@ var XButtonBridge = /** @class */ /*@__PURE__*/ (function (_super) {
             case 56: return c.av;
             case 58: return c.at;
             case 17: return c.k1;
-            case 86: return c.by;
+            case 88: return c.by;
             case 59: return c.a5;
         }
         return null;
@@ -33548,15 +33612,15 @@ var MultiSliderBridge = /** @class */ /*@__PURE__*/ (function (_super) {
         switch (b) {
             case 12: return a.bg;
             case 13: return a.bf;
-            case 95: return a.bv;
-            case 96: return a.bf;
+            case 97: return a.bv;
+            case 98: return a.bf;
             case 14: return a.bl;
             case 2: return a.thumbs._inner[0].s;
-            case 90: return a.b0;
-            case 91: return a.ek;
-            case 92: return a.es;
-            case 94: return a.eu;
-            case 93: return a.et;
+            case 92: return a.b0;
+            case 93: return a.ek;
+            case 94: return a.es;
+            case 96: return a.eu;
+            case 95: return a.et;
             case 30:
                 var c = a.e;
                 switch (c) {
@@ -33596,10 +33660,10 @@ var MultiSliderBridge = /** @class */ /*@__PURE__*/ (function (_super) {
             case 13:
                 a.bf = c;
                 break;
-            case 95:
+            case 97:
                 a.bv = c;
                 break;
-            case 96:
+            case 98:
                 a.bu = c;
                 break;
             case 14:
@@ -33608,19 +33672,19 @@ var MultiSliderBridge = /** @class */ /*@__PURE__*/ (function (_super) {
             case 2:
                 a.thumbs._inner[0].s = c;
                 break;
-            case 90:
+            case 92:
                 a.b0 = c;
                 break;
-            case 91:
+            case 93:
                 a.ek = c;
                 break;
-            case 92:
+            case 94:
                 a.es = c;
                 break;
-            case 94:
+            case 96:
                 a.eu = c;
                 break;
-            case 93:
+            case 95:
                 a.et = c;
                 break;
             case 30:
@@ -35531,7 +35595,7 @@ var XButtonGroupBridge = /** @class */ /*@__PURE__*/ (function (_super) {
                 }
                 return enumGetBox(NativeUIDisplayDensity_$type, e);
             case 18: return enumGetBox(BaseControlTheme_$type, c.p);
-            case 85: return c.d;
+            case 87: return c.d;
             case 0:
                 switch (c.i) {
                     case 0: return enumGetBox(NativeUIButtonGroupDisplayType_$type, 0);
@@ -35571,7 +35635,7 @@ var XButtonGroupBridge = /** @class */ /*@__PURE__*/ (function (_super) {
             case 18:
                 d.p = EnumUtil.getEnumValue(BaseControlTheme_$type, c);
                 break;
-            case 85:
+            case 87:
                 d.d = c;
                 break;
             case 0:
@@ -37216,8 +37280,8 @@ var XIconBridge = /** @class */ /*@__PURE__*/ (function (_super) {
         a.svg = null;
         a.svgPath = null;
         a.b = null;
-        a.bc = null;
-        a.az = null;
+        a.bg = null;
+        a.a1 = null;
         var b = SvgIconRegistry.instance.getSvgPathString(this.u, this.v);
         if (b != null) {
             if (stringStartsWith(trimStart(b, ' ', '\n', '\r', '\t'), "<svg")) {
@@ -37235,16 +37299,16 @@ var XIconBridge = /** @class */ /*@__PURE__*/ (function (_super) {
         }
         var d = SvgIconRegistry.instance.getDataURLString(this.u, this.v);
         if (d != null) {
-            a.bc = d;
+            a.bg = d;
             return;
         }
         var e = SvgIconRegistry.instance.getIconSource(this.u, this.v);
         if (e != null) {
-            a.az = e;
+            a.a1 = e;
         }
     };
     XIconBridge.prototype.exportVisualData = function (a) {
-        return a.ay();
+        return a.a0();
     };
     XIconBridge.$t = markType(XIconBridge, 'XIconBridge', XComponentBridge.$);
     return XIconBridge;
@@ -37318,7 +37382,7 @@ var XPopupBridge = /** @class */ /*@__PURE__*/ (function (_super) {
                 this.y = d;
                 this.ah = b;
                 break;
-            case 28:
+            case 29:
                 e.measuringContentSize = delegateCombine(e.measuringContentSize, runOn(this, this.ar));
                 this.ac = d;
                 this.w = b;
@@ -37363,7 +37427,7 @@ var XPopupBridge = /** @class */ /*@__PURE__*/ (function (_super) {
                 this.y = null;
                 this.ah = null;
                 break;
-            case 28:
+            case 29:
                 e.measuringContentSize = delegateRemove(e.measuringContentSize, runOn(this, this.ar));
                 this.ac = null;
                 this.w = null;
@@ -37430,6 +37494,7 @@ var XPopupBridge = /** @class */ /*@__PURE__*/ (function (_super) {
             case 42: return c.c4;
             case 39: return c.ao;
             case 62: return c.a4;
+            case 110: return c.ay;
         }
         return _super.prototype.getValue.call(this, a, b);
     };
@@ -37489,12 +37554,19 @@ var XPopupBridge = /** @class */ /*@__PURE__*/ (function (_super) {
             case 62:
                 d.a4 = c;
                 break;
+            case 110:
+                d.ay = c;
+                break;
         }
         _super.prototype.setValue.call(this, a, b, c);
     };
     XPopupBridge.prototype.showRelativeToExclusionRect = function (a, b, c, d) {
         a.showRelativeToExclusionRect(b, this.v(c), this.u(d));
     };
+    XPopupBridge.prototype.showRelativeToTarget = function (a, b, c, d) {
+        var e = b.an.getNativeElement();
+        a.cr(e, this.v(c), this.u(d));
+    };
     XPopupBridge.prototype.close = function (a) {
         a.b6();
     };
@@ -37524,7 +37596,7 @@ var XPopupBridge = /** @class */ /*@__PURE__*/ (function (_super) {
         }
     };
     XPopupBridge.prototype.exportVisualData = function (a) {
-        return a.ay();
+        return a.a0();
     };
     XPopupBridge.prototype.addChild = function (a, b) {
         this.ae.add(b);
@@ -38828,7 +38900,7 @@ var ColorEditor = /** @class */ /*@__PURE__*/ (function (_super) {
     ColorEditor.prototype.b4 = function (a) {
         if (this.q != null) {
             var b = this.q.be();
-            this.r.cd(b);
+            this.r.ce(b);
         }
     };
     ColorEditor.prototype.bg = function () {
@@ -38843,10 +38915,10 @@ var ColorEditor = /** @class */ /*@__PURE__*/ (function (_super) {
             b.bn(d);
             d.bn(e);
             _this.g.l(c);
-            b.cf = BrushUtil.h(255, 255, 255, 255);
-            b.b9 = 150;
-            b.b7 = 8;
-            b.ca = 4;
+            b.ch = BrushUtil.h(255, 255, 255, 255);
+            b.ca = 150;
+            b.b8 = 8;
+            b.cb = 4;
             b.b1 = true;
             _this.q = c;
             _this.q.c = _this.i;
@@ -38946,13 +39018,13 @@ var ColorEditor = /** @class */ /*@__PURE__*/ (function (_super) {
     ColorEditor.prototype.cb = function (a, b) {
         {
             var c = this.g.r(true);
-            this.r.ce(c, a, b);
+            this.r.cf(c, a, b);
         }
     };
     ColorEditor.prototype.bf = function () {
         var _this = this;
         if (this.r != null) {
-            this.a.executeDelayed(function () { return _this.r.cb(); }, 0);
+            this.a.executeDelayed(function () { return _this.r.cc(); }, 0);
         }
         if (this.d != null) {
             this.d.bg();