igniteui-webcomponents-inputs 5.4.0-beta.0 → 5.4.0

package/fesm2015/igniteui-webcomponents-inputs.js

@@ -5,7 +5,7 @@
     GOVERNS THE LICENSING, INSTALLATION AND USE OF INFRAGISTICS SOFTWARE. BY DOWNLOADING AND/OR INSTALLING AND USING INFRAGISTICS SOFTWARE:  you are indicating that you have read and understand this Agreement, and agree to be legally bound by it on behalf of the yourself and your company.
   */
   
-import { Base, StringBuilder, markType, List$1, Delegate_$type, fromEnum, runOn, NativeUI, ScaleTransform, KeyFrameAnimationFactory, AnimationKeyFrameEffect, LinkedList$1, IKeyFrameAnimation_$type, PropertyChangedEventArgs, AnimationKeyFrameProperty, AnimationKeyFrameEffectTiming, AppearanceHelper, INotifyPropertyChanged_$type, BrushUtil, IgcHTMLElement, NamePatcher, WebComponentRenderer, TypeRegistrar, toSpinal, getAllPropertyNames, fromSpinal, RegisterElementHelper, brushToString, stringToBrush, ensureBool, initializePropertiesFromCss, markEnum, typeGetValue, EnumUtil, ElevationMode_$type, EventArgs, stringIsNullOrEmpty, isNaN_, IVisualData_$type, enumGetBox, CornerRadius, MouseEventArgs, FocusEventArgs, Thickness, ControlDisplayDensity_$type, BaseControlTheme_$type, HorizontalAlignment_$type, VerticalAlignment_$type, FontUtil, Dictionary$2, String_$type, PortalManager, ensureEnum, enumToString, FontInfo, delegateRemove, delegateCombine, IgcFocusEventArgs, IgcChildContentModule, Brush, DomWrapper_$type, Tuple$2, SVGNode, FastIterationDictionary$2, typeCast, PrimitiveVisualData, Ellipse, EllipseVisualData, Rectangle, RectangleVisualData, Line, LineVisualData, Path, PathVisualData, DoubleCollection, stringStartsWith, trimStart, IIcon_$type, fromBrushCollection, toBrushCollection, brushCollectionToString, dateMinValue, dateGetMonth, parseBool, truncate, dateNow, dateMaxValue, dateAddYears, ObservableCollection$1, dateFromValues, SRProvider, dateGetDate, stringIsNullOrWhiteSpace, dateAddDays, Number_$type, dateAddMonths, timeSpanTotalDays, intDivide, Localization, HashSet$1, stringReplace, TransformGroup, TranslateTransform, MouseButtonEventArgs, Point_$type, KeyEventArgs, toNullable, fromEn, DeviceUtils, IgcKeyEventArgs, IgCollection, SyncableObservableCollection$2, NotifyCollectionChangedAction, CollectionAdapter, Rect, stringContains, stringSplit, Popup, NativeUIElementBridge, NativeUIMouseEventArgs, NativeUIKeyEventArgs, NativeUIInputChangingEventArgs, NativeUIFocusEventArgs, NativeUIClickedEventArgs, NativeUIComponentHorizontalAlignment_$type, NativeUIInputType_$type, NativeUIInputDisplayType_$type, NativeUIDisplayDensity_$type, INativeUIInputBridge_$type, NativeUIButtonClickedEventArgs, NativeUIButtonDisplayType_$type, NativeUIComponent, Type, Color, PathGeometry, PathFigure, PolyLineSegment, LineSegment, EllipseGeometry, PropertyUpdatedEventArgs, TextBlock, RenderingContext, CanvasViewRenderer, CanvasGestureDOMEventProxy, Size, NotImplementedException, NativeUISliderValueChangedEventArgs, NativeUISliderOrientation_$type, NativeUIButton, NativeUIButtonGroupSelectionChangedEventArgs, NativeUIButtonGroupDisplayType_$type, INativeUIButtonGroupBridge_$type, RotateTransform, NativeUICheckboxChangeEventArgs, SvgIconRegistry, NativeUIPopupMeasuringContentEventArgs, NativeUIPopupOpenedEventArgs, NativeUIPopupClosedEventArgs, NativeUIPopupPointerPosition_$type, NativeUIPopupAnimationType_$type, INativeUIPopupBridge_$type, NativeUIInput, NativeUISlider, NativeUIButtonGroup, NativeUIColorEditor, NativeUICheckbox, NativeUIIcon, NativeUIPopup, INativeUIElementFactory_$type, NativeUIColorEditorValueChangedEventArgs, DOMExecutionContext, NativeUIInputsFactory, NativeUIWindow, NativeUIContent, ColorUtil, IgcPropertyUpdatedEventArgs, SyncableObservableCollection$1, fromRect, toRect, rectToString } from 'igniteui-webcomponents-core';
+import { Base, StringBuilder, markType, List$1, Delegate_$type, fromEnum, runOn, NativeUI, ScaleTransform, KeyFrameAnimationFactory, AnimationKeyFrameEffect, LinkedList$1, IKeyFrameAnimation_$type, PropertyChangedEventArgs, AnimationKeyFrameProperty, AnimationKeyFrameEffectTiming, AppearanceHelper, INotifyPropertyChanged_$type, BrushUtil, IgcHTMLElement, NamePatcher, WebComponentRenderer, TypeRegistrar, toSpinal, getAllPropertyNames, fromSpinal, RegisterElementHelper, brushToString, stringToBrush, ensureBool, initializePropertiesFromCss, markEnum, typeGetValue, EnumUtil, ElevationMode_$type, EventArgs, stringIsNullOrEmpty, isNaN_, IVisualData_$type, enumGetBox, CornerRadius, MouseEventArgs, FocusEventArgs, Thickness, ControlDisplayDensity_$type, BaseControlTheme_$type, HorizontalAlignment_$type, VerticalAlignment_$type, FontUtil, Dictionary$2, String_$type, PortalManager, ensureEnum, enumToString, FontInfo, delegateRemove, delegateCombine, IgcFocusEventArgs, IgcChildContentModule, Brush, DomWrapper_$type, Tuple$2, SVGNode, FastIterationDictionary$2, typeCast, PrimitiveVisualData, Ellipse, EllipseVisualData, Rectangle, RectangleVisualData, Line, LineVisualData, Path, PathVisualData, DoubleCollection, LegendItemHelper, stringStartsWith, trimStart, IIcon_$type, fromBrushCollection, toBrushCollection, brushCollectionToString, dateMinValue, dateGetMonth, parseBool, truncate, dateNow, dateMaxValue, dateAddYears, ObservableCollection$1, dateFromValues, SRProvider, dateGetDate, stringIsNullOrWhiteSpace, dateAddDays, Number_$type, dateAddMonths, timeSpanTotalDays, intDivide, Localization, HashSet$1, stringReplace, TransformGroup, TranslateTransform, MouseButtonEventArgs, Point_$type, KeyEventArgs, toNullable, fromEn, DeviceUtils, IgcKeyEventArgs, IgCollection, SyncableObservableCollection$2, NotifyCollectionChangedAction, CollectionAdapter, Rect, stringContains, stringSplit, Popup, NativeUIElementBridge, NativeUIMouseEventArgs, NativeUIKeyEventArgs, NativeUIInputChangingEventArgs, NativeUIFocusEventArgs, NativeUIClickedEventArgs, NativeUIComponentHorizontalAlignment_$type, NativeUIInputType_$type, NativeUIInputDisplayType_$type, NativeUIDisplayDensity_$type, INativeUIInputBridge_$type, NativeUIButtonClickedEventArgs, NativeUIButtonDisplayType_$type, NativeUIComponent, Type, Color, PathGeometry, PathFigure, PolyLineSegment, LineSegment, EllipseGeometry, PropertyUpdatedEventArgs, TextBlock, RenderingContext, CanvasViewRenderer, CanvasGestureDOMEventProxy, Size, NotImplementedException, NativeUISliderValueChangedEventArgs, NativeUISliderOrientation_$type, NativeUIButton, NativeUIButtonGroupSelectionChangedEventArgs, NativeUIButtonGroupDisplayType_$type, INativeUIButtonGroupBridge_$type, RotateTransform, NativeUICheckboxChangeEventArgs, SvgIconRegistry, NativeUIPopupMeasuringContentEventArgs, NativeUIPopupOpenedEventArgs, NativeUIPopupClosedEventArgs, NativeUIPopupPointerPosition_$type, NativeUIPopupAnimationType_$type, INativeUIPopupBridge_$type, NativeUIInput, NativeUISlider, NativeUIButtonGroup, NativeUIColorEditor, NativeUICheckbox, NativeUIIcon, NativeUIPopup, INativeUIElementFactory_$type, NativeUIColorEditorValueChangedEventArgs, DOMExecutionContext, NativeUIInputsFactory, NativeUIWindow, NativeUIContent, ColorUtil, IgcPropertyUpdatedEventArgs, SyncableObservableCollection$1, fromRect, toRect, rectToString } from 'igniteui-webcomponents-core';
 
 /*
 THIS INFRAGISTICS ULTIMATE SOFTWARE LICENSE  AGREEMENT ("AGREEMENT") LOCATED HERE:
@@ -6962,7 +6962,7 @@ let IconView = /*@__PURE__*/ (() => {
             this.e = new FastIterationDictionary$2(String_$type, List$1.$.specialize(Tuple$2.$.specialize(SVGNode.$, Base.$)), 0);
             this.f = new FastIterationDictionary$2(String_$type, List$1.$.specialize(Tuple$2.$.specialize(SVGNode.$, Base.$)), 0);
         }
-        al() {
+        am() {
         }
         l() {
             return true;
@@ -6979,7 +6979,7 @@ let IconView = /*@__PURE__*/ (() => {
         get m() {
             return true;
         }
-        aj(a) {
+        ak(a) {
             if (a == null) {
                 for (let b of fromEnum(this.o)) {
                     b();
@@ -6999,7 +6999,7 @@ let IconView = /*@__PURE__*/ (() => {
             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();
             let c = this.v.createElementNS("svg", "http://www.w3.org/2000/svg");
             c.setStyleProperty("position", "absolute");
             c.setStyleProperty("top", "0");
@@ -7012,14 +7012,14 @@ let IconView = /*@__PURE__*/ (() => {
             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();
         }
-        av(a) {
+        ax(a) {
             this.n.clear();
             this.v.rootWrapper.removeChildren();
             this.v.rootWrapper.append(this.y);
@@ -7034,7 +7034,7 @@ let IconView = /*@__PURE__*/ (() => {
                 this.p.add(b);
             }
         }
-        aw(a) {
+        ay(a) {
             this.n.clear();
             this.v.rootWrapper.removeChildren();
             this.v.rootWrapper.append(this.y);
@@ -7051,14 +7051,14 @@ let IconView = /*@__PURE__*/ (() => {
                 }
             }
         }
-        au(a) {
+        aw(a) {
             this.v.rootWrapper.removeChildren();
             if (a != null) {
                 let b = this.v.rootWrapper.getNativeElement();
                 b.innerHTML = a;
             }
         }
-        aq(a) {
+        as(a) {
             if (this.ab != a) {
                 this.ab = a;
                 this.v.rootWrapper.removeChildren();
@@ -7066,12 +7066,12 @@ let IconView = /*@__PURE__*/ (() => {
                 this.x.setAttribute("src", a);
             }
         }
-        at(a) {
+        av(a) {
             if (typeof a === 'string') {
-                this.aq(typeCast(String_$type, a));
+                this.as(typeCast(String_$type, a));
             }
         }
-        ag() {
+        ah() {
             if (this.d.k != 3 && this.d.k != 4) {
                 this.ab = null;
             }
@@ -7079,18 +7079,18 @@ let IconView = /*@__PURE__*/ (() => {
         k() {
             return this.d.svgPath != null || this.d.svg != null || this.d.b != null;
         }
-        as() {
+        au() {
             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");
         }
-        ay() {
+        a0() {
             let a = isNaN_(this.d.aq) ? 0 : this.d.aq;
             let b = isNaN_(this.d.ar) ? 0 : this.d.ar;
             let c = isNaN_(this.d.as) ? 24 : this.d.as;
             let d = isNaN_(this.d.ap) ? 24 : this.d.ap;
             this.y.setAttribute("viewBox", a + " " + b + " " + c + " " + d);
         }
-        an(a, b) {
+        ao(a, b) {
             let c = a.color;
             if (!this.n.containsKey(a)) {
                 if (a.isGradient) {
@@ -7118,7 +7118,7 @@ let IconView = /*@__PURE__*/ (() => {
                 }
             }
         }
-        ao(a, b) {
+        ap(a, b) {
             let c = a;
             if (this.n.containsKey(b)) {
                 c.setAttribute("fill", "url(#" + this.n.item(b) + ")");
@@ -7129,7 +7129,7 @@ let IconView = /*@__PURE__*/ (() => {
                 NativeUI.r(a, b);
             }
         }
-        ap(a, b) {
+        aq(a, b) {
             let c = a;
             if (this.n.containsKey(b)) {
                 c.setAttribute("stroke", "url('#" + this.n.item(b) + "')");
@@ -7140,29 +7140,29 @@ let IconView = /*@__PURE__*/ (() => {
         }
         ac(a) {
         }
-        am() {
+        an() {
             if (this.l()) {
             }
         }
         ad(a) {
-            this.d.ce();
+            this.d.cj();
         }
         ae(a) {
-            this.d.cf();
+            this.d.ck();
         }
-        ah() {
+        ai() {
             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)));
         }
-        ak() {
+        al() {
             this.j = false;
             for (let a of fromEnum(this.o)) {
                 a();
             }
             this.o.clear();
         }
-        ax(a) {
+        az(a) {
             if (a != null) {
                 this.v.rootWrapper.setStyleProperty("font", a.fontString);
             }
@@ -7176,7 +7176,7 @@ let IconView = /*@__PURE__*/ (() => {
             c[1] = b;
             return c;
         }
-        ai(a) {
+        aj(a) {
             if (this.d.x()) {
                 a.stopPropagation();
                 a.preventDefault();
@@ -7187,7 +7187,7 @@ let IconView = /*@__PURE__*/ (() => {
             let b = this.v.rootWrapper.getNativeElement();
             return a.toArray();
         }
-        af(a, b) {
+        ag(a, b) {
             for (let c = 0; c < b.e.count; c++) {
                 let d = b.e._inner[c];
                 let e = this.h(d);
@@ -7195,7 +7195,7 @@ let IconView = /*@__PURE__*/ (() => {
                     a.add(e);
                 }
                 else {
-                    this.af(a, d);
+                    this.ag(a, d);
                 }
             }
         }
@@ -7208,7 +7208,7 @@ let IconView = /*@__PURE__*/ (() => {
                         $ret.an = a.w;
                         return $ret;
                     })());
-                    this.ar(c, a);
+                    this.at(c, a);
                     b = new PathVisualData(1, "path1", c);
                     break;
                 case 3:
@@ -7218,7 +7218,7 @@ let IconView = /*@__PURE__*/ (() => {
                     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:
@@ -7228,7 +7228,7 @@ let IconView = /*@__PURE__*/ (() => {
                     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:
@@ -7237,13 +7237,13 @@ let IconView = /*@__PURE__*/ (() => {
                     let 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;
         }
-        ar(a, b) {
+        at(a, b) {
             let c = b;
             a.ad = b.t;
             a.j = c.h;
@@ -7276,6 +7276,16 @@ let IconView = /*@__PURE__*/ (() => {
             }
             return null;
         }
+        ar(a, b) {
+            this.v.rootWrapper.removeChildren();
+            if (a == null) {
+                return;
+            }
+            LegendItemHelper.c(this.v, 0, 0, 24, 24, b, null, a, null);
+        }
+        af() {
+            this.v.rootWrapper.removeChildren();
+        }
     }
     IconView.$t = /*@__PURE__*/ markType(IconView, 'IconView');
     return IconView;
@@ -7290,34 +7300,36 @@ let XIcon = /*@__PURE__*/ (() => {
             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;
@@ -7332,7 +7344,7 @@ let XIcon = /*@__PURE__*/ (() => {
             let a = new IconView();
             a.d = this;
             this.view = a;
-            this.view.al();
+            this.view.am();
         }
         get view() {
             return this._view;
@@ -7343,13 +7355,13 @@ let XIcon = /*@__PURE__*/ (() => {
         destroy() {
             this.provideContainer(null);
         }
-        cg(a, b, c) {
+        cl(a, b, c) {
             if (this.propertyChanged != null) {
                 this.propertyChanged(this, new PropertyChangedEventArgs(a));
             }
-            this.cj(a, b, c);
+            this.co(a, b, c);
         }
-        cj(a, b, c) {
+        co(a, b, c) {
             switch (a) {
                 case "Fill":
                 case "Stroke":
@@ -7358,126 +7370,139 @@ let XIcon = /*@__PURE__*/ (() => {
                 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;
             }
         }
-        cn() {
-            let a = this.fill != null ? this.fill : XIcon.c4;
-            let b = this.dh != null ? this.dh : XIcon.c8;
+        cs() {
+            let a = this.fill != null ? this.fill : XIcon.db;
+            let b = this.dp != null ? this.dp : XIcon.df;
             let c = !isNaN_(this.ao) ? this.ao : XIcon.ak;
-            let d = this.di != null ? this.di : XIcon.c9;
+            let 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;
             }
         }
         get t() {
             return this.svgPath != null && !this.view.m;
         }
-        cm() {
+        cr() {
             NativeUI.y(this.view.z, this.an);
         }
-        cl() {
+        cf() {
+            this.view.af();
+        }
+        cq() {
             let a = this.view.z;
             if (this.t) {
                 let 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 {
                 let c = this.j();
                 if (c != this.k) {
                     this.k = c;
-                    this.view.ag();
+                    this.view.ah();
                 }
                 let 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);
                     let e = this.view.c;
                     if (e != null && e.length > 0) {
                         let f = NativeUI.r;
                         let 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 (let 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));
@@ -7488,36 +7513,38 @@ let XIcon = /*@__PURE__*/ (() => {
                         }
                     }
                     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.a1 != null) {
+                    this.view.av(this.a1);
                 }
-                else if (this.az != null) {
-                    this.view.at(this.az);
+                else {
                 }
                 if (d) {
                     for (let i = 0; i < this.view.r.count; i++) {
                         let 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 (let k = 0; k < this.view.s.count; k++) {
                         let 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 (let m = 0; m < this.view.t.count; m++) {
                         let 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 (let o = 0; o < this.view.u.count; o++) {
                         let 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 (let q = 0; q < this.view.e.o.count; q++) {
                         let r = this.view.e.o._inner[q];
@@ -7543,43 +7570,43 @@ let XIcon = /*@__PURE__*/ (() => {
                     }
                     for (let ac = 0; ac < this.view.q.count; ac++) {
                         let 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));
                     }
                 }
                 let 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);
             }
         }
-        ci() {
-            if (this.c1 != null) {
-                this.view.an(this.c1, "fill");
+        cn() {
+            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) {
                 for (let a of fromEnum(this.e)) {
-                    this.view.an(a, "fills");
+                    this.view.ao(a, "fills");
                 }
             }
             if (this.f != null) {
                 for (let b of fromEnum(this.f)) {
-                    this.view.an(b, "strokes");
+                    this.view.ao(b, "strokes");
                 }
             }
         }
@@ -7594,10 +7621,10 @@ let XIcon = /*@__PURE__*/ (() => {
             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;
@@ -7609,37 +7636,37 @@ let XIcon = /*@__PURE__*/ (() => {
             let 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));
             }
         }
-        get c1() {
-            return this.co;
+        get c8() {
+            return this.cv;
         }
-        set c1(a) {
-            let b = this.co;
-            this.co = a;
-            if (b != this.co) {
-                this.cg("ActualFill", b, a);
+        set c8(a) {
+            let b = this.cv;
+            this.cv = a;
+            if (b != this.cv) {
+                this.cl("ActualFill", b, a);
             }
         }
-        get c2() {
-            return this.cp;
+        get c9() {
+            return this.cw;
         }
-        set c2(a) {
-            let b = this.cp;
-            this.cp = a;
-            if (b != this.cp) {
-                this.cg("ActualStroke", b, a);
+        set c9(a) {
+            let b = this.cw;
+            this.cw = a;
+            if (b != this.cw) {
+                this.cl("ActualStroke", b, a);
             }
         }
-        get c3() {
-            return this.cq;
+        get da() {
+            return this.cx;
         }
-        set c3(a) {
-            let b = this.cq;
-            this.cq = a;
-            if (b != this.cq) {
-                this.cg("ActualTextColor", b, a);
+        set da(a) {
+            let b = this.cx;
+            this.cx = a;
+            if (b != this.cx) {
+                this.cl("ActualTextColor", b, a);
             }
         }
         get ai() {
@@ -7649,27 +7676,27 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.y;
             this.y = a;
             if (b != this.y) {
-                this.cg("ActualStrokeWidth", b, a);
+                this.cl("ActualStrokeWidth", b, a);
             }
         }
         get fill() {
-            return this.cr;
+            return this.cy;
         }
         set fill(a) {
-            let b = this.cr;
-            this.cr = a;
-            if (b != this.cr) {
-                this.cg("Fill", b, a);
+            let b = this.cy;
+            this.cy = a;
+            if (b != this.cy) {
+                this.cl("Fill", b, a);
             }
         }
-        get dh() {
-            return this.cz;
+        get dp() {
+            return this.c6;
         }
-        set dh(a) {
-            let b = this.cz;
-            this.cz = a;
-            if (b != this.cz) {
-                this.cg("Stroke", b, a);
+        set dp(a) {
+            let b = this.c6;
+            this.c6 = a;
+            if (b != this.c6) {
+                this.cl("Stroke", b, a);
             }
         }
         get ao() {
@@ -7679,37 +7706,37 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.ac;
             this.ac = a;
             if (b != this.ac) {
-                this.cg("StrokeWidth", b, a);
+                this.cl("StrokeWidth", b, a);
             }
         }
-        get di() {
-            return this.c0;
+        get dq() {
+            return this.c7;
         }
-        set di(a) {
-            let b = this.c0;
-            this.c0 = a;
-            if (b != this.c0) {
-                this.cg("TextColor", b, a);
+        set dq(a) {
+            let b = this.c7;
+            this.c7 = a;
+            if (b != this.c7) {
+                this.cl("TextColor", b, a);
             }
         }
-        get da() {
-            return this.cs;
+        get dh() {
+            return this.cz;
         }
-        set da(a) {
-            let b = this.cs;
-            this.cs = a;
-            if (b != this.cs) {
-                this.cg("HoverFill", b, a);
+        set dh(a) {
+            let b = this.cz;
+            this.cz = a;
+            if (b != this.cz) {
+                this.cl("HoverFill", b, a);
             }
         }
-        get db() {
-            return this.ct;
+        get di() {
+            return this.c0;
         }
-        set db(a) {
-            let b = this.ct;
-            this.ct = a;
-            if (b != this.ct) {
-                this.cg("HoverStroke", b, a);
+        set di(a) {
+            let b = this.c0;
+            this.c0 = a;
+            if (b != this.c0) {
+                this.cl("HoverStroke", b, a);
             }
         }
         get am() {
@@ -7719,17 +7746,17 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.aa;
             this.aa = a;
             if (b != this.aa) {
-                this.cg("HoverStrokeThickness", b, a);
+                this.cl("HoverStrokeThickness", b, a);
             }
         }
-        get dc() {
-            return this.cu;
+        get dj() {
+            return this.c1;
         }
-        set dc(a) {
-            let b = this.cu;
-            this.cu = a;
-            if (b != this.cu) {
-                this.cg("HoverTextColor", b, a);
+        set dj(a) {
+            let b = this.c1;
+            this.c1 = a;
+            if (b != this.c1) {
+                this.cl("HoverTextColor", b, a);
             }
         }
         get e() {
@@ -7739,7 +7766,7 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.c;
             this.c = a;
             if (b != this.c) {
-                this.cg("FillColors", b, this.c);
+                this.cl("FillColors", b, this.c);
             }
         }
         get f() {
@@ -7749,87 +7776,87 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.d;
             this.d = a;
             if (b != this.d) {
-                this.cg("StrokeColors", b, this.d);
+                this.cl("StrokeColors", b, this.d);
             }
         }
-        get dd() {
-            return this.cv;
+        get dk() {
+            return this.c2;
         }
-        set dd(a) {
-            let b = this.cv;
-            this.cv = a;
-            if (b != this.cv) {
-                this.cg("PrimaryFillColor", b, this.cv);
+        set dk(a) {
+            let b = this.c2;
+            this.c2 = a;
+            if (b != this.c2) {
+                this.cl("PrimaryFillColor", b, this.c2);
             }
         }
-        get de() {
-            return this.cw;
+        get dl() {
+            return this.c3;
         }
-        set de(a) {
-            let b = this.cw;
-            this.cw = a;
-            if (b != this.cw) {
-                this.cg("PrimaryStrokeColor", b, this.cw);
+        set dl(a) {
+            let b = this.c3;
+            this.c3 = a;
+            if (b != this.c3) {
+                this.cl("PrimaryStrokeColor", b, this.c3);
             }
         }
-        get df() {
-            return this.cx;
+        get dm() {
+            return this.c4;
         }
-        set df(a) {
-            let b = this.cx;
-            this.cx = a;
-            if (b != this.cx) {
-                this.cg("SecondaryFillColor", b, this.cx);
+        set dm(a) {
+            let b = this.c4;
+            this.c4 = a;
+            if (b != this.c4) {
+                this.cl("SecondaryFillColor", b, this.c4);
             }
         }
-        get dg() {
-            return this.cy;
+        get dn() {
+            return this.c5;
         }
-        set dg(a) {
-            let b = this.cy;
-            this.cy = a;
-            if (b != this.cy) {
-                this.cg("SecondaryStrokeColor", b, this.cy);
+        set dn(a) {
+            let b = this.c5;
+            this.c5 = a;
+            if (b != this.c5) {
+                this.cl("SecondaryStrokeColor", b, this.c5);
             }
         }
-        get az() {
-            return this.ax;
+        get a1() {
+            return this.ay;
         }
-        set az(a) {
-            let b = this.ax;
-            this.ax = a;
-            if (b != this.ax) {
-                this.cg("Source", b, a);
+        set a1(a) {
+            let b = this.ay;
+            this.ay = a;
+            if (b != this.ay) {
+                this.cl("Source", b, a);
             }
         }
-        get bc() {
-            return this.a1;
-        }
-        set bc(a) {
-            let b = this.a1;
-            this.a1 = a;
-            if (b != this.a1) {
-                this.cg("DataURL", b, a);
+        get bg() {
+            return this.a3;
+        }
+        set bg(a) {
+            let b = this.a3;
+            this.a3 = a;
+            if (b != this.a3) {
+                this.cl("DataURL", b, a);
             }
         }
         get svgPath() {
-            return this.a4;
+            return this.a6;
         }
         set svgPath(a) {
-            let b = this.a4;
-            this.a4 = a;
-            if (b != this.a4) {
-                this.cg("SVGPath", b, a);
+            let b = this.a6;
+            this.a6 = a;
+            if (b != this.a6) {
+                this.cl("SVGPath", b, a);
             }
         }
         get svg() {
-            return this.a3;
+            return this.a5;
         }
         set svg(a) {
-            let b = this.a3;
-            this.a3 = a;
-            if (b != this.a3) {
-                this.cg("SVG", b, this.a3);
+            let b = this.a5;
+            this.a5 = a;
+            if (b != this.a5) {
+                this.cl("SVG", b, this.a5);
             }
         }
         get b() {
@@ -7839,13 +7866,33 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.a;
             this.a = a;
             if (b != this.a) {
-                this.cg("SVGPaths", b, this.a);
+                this.cl("SVGPaths", b, this.a);
             }
         }
-        ce() {
+        get cu() {
+            return this.ct;
+        }
+        set cu(a) {
+            let b = this.ct;
+            this.ct = a;
+            if (b != this.ct) {
+                this.cl("DataTemplate", b, this.ct);
+            }
+        }
+        get az() {
+            return this.ax;
+        }
+        set az(a) {
+            let b = this.ax;
+            this.ax = a;
+            if (b != this.ax) {
+                this.cl("DataTemplateContext", b, this.ax);
+            }
+        }
+        cj() {
             this.v = true;
         }
-        cf() {
+        ck() {
             this.v = false;
         }
         get o() {
@@ -7855,17 +7902,17 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.n;
             this.n = a;
             if (b != this.n) {
-                this.cg("TextStyle", b, a);
+                this.cl("TextStyle", b, a);
             }
         }
-        get bm() {
-            return this.a2;
+        get bq() {
+            return this.a4;
         }
-        set bm(a) {
-            let b = this.a2;
-            this.a2 = a;
-            if (b != this.a2) {
-                this.cg("Id", b, a);
+        set bq(a) {
+            let b = this.a4;
+            this.a4 = a;
+            if (b != this.a4) {
+                this.cl("Id", b, a);
             }
         }
         get s() {
@@ -7879,17 +7926,17 @@ let XIcon = /*@__PURE__*/ (() => {
             this.au = a;
             this.p = true;
             if (b != this.au) {
-                this.cg("TabIndex", b, a);
+                this.cl("TabIndex", b, a);
             }
         }
-        get a9() {
-            return this.a0;
+        get bb() {
+            return this.a2;
         }
-        set a9(a) {
-            let b = this.a0;
-            this.a0 = a;
-            if (b != this.a0) {
-                this.cg("AriaLabel", b, a);
+        set bb(a) {
+            let b = this.a2;
+            this.a2 = a;
+            if (b != this.a2) {
+                this.cl("AriaLabel", b, a);
             }
         }
         get v() {
@@ -7899,7 +7946,7 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.r;
             this.r = a;
             if (b != this.r) {
-                this.cg("IsHover", b, a);
+                this.cl("IsHover", b, a);
             }
         }
         get disabled() {
@@ -7909,7 +7956,7 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.q;
             this.q = a;
             if (b != this.q) {
-                this.cg("IsDisabled", b, a);
+                this.cl("IsDisabled", b, a);
             }
         }
         get an() {
@@ -7919,7 +7966,7 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.ab;
             this.ab = a;
             if (b != this.ab) {
-                this.cg("Opacity", b, this.ab);
+                this.cl("Opacity", b, this.ab);
             }
         }
         get aq() {
@@ -7929,7 +7976,7 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.ae;
             this.ae = a;
             if (b != this.ae) {
-                this.cg("ViewBoxLeft", b, this.ae);
+                this.cl("ViewBoxLeft", b, this.ae);
             }
         }
         get ar() {
@@ -7939,7 +7986,7 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.af;
             this.af = a;
             if (b != this.af) {
-                this.cg("ViewBoxTop", b, this.af);
+                this.cl("ViewBoxTop", b, this.af);
             }
         }
         get as() {
@@ -7949,7 +7996,7 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.ag;
             this.ag = a;
             if (b != this.ag) {
-                this.cg("ViewBoxWidth", b, this.ag);
+                this.cl("ViewBoxWidth", b, this.ag);
             }
         }
         get ap() {
@@ -7959,7 +8006,7 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.ad;
             this.ad = a;
             if (b != this.ad) {
-                this.cg("ViewBoxHeight", b, this.ad);
+                this.cl("ViewBoxHeight", b, this.ad);
             }
         }
         get at() {
@@ -7969,7 +8016,7 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.ah;
             this.ah = a;
             if (b != this.ah) {
-                this.cg("Width", b, this.ah);
+                this.cl("Width", b, this.ah);
             }
         }
         get al() {
@@ -7979,16 +8026,16 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.z;
             this.z = a;
             if (b != this.z) {
-                this.cg("Height", b, this.z);
+                this.cl("Height", b, this.z);
             }
         }
-        ch() {
+        cm() {
         }
         onDetachedFromUI() {
-            this.view.ak();
+            this.view.al();
         }
         onAttachedToUI() {
-            this.view.ah();
+            this.view.ai();
         }
         x() {
             if (this.disabled) {
@@ -8004,10 +8051,10 @@ let XIcon = /*@__PURE__*/ (() => {
         w() {
             return this.view.l();
         }
-        ay() {
+        a0() {
             return this.g();
         }
-        be() {
+        bi() {
             let a = this.g();
             return a.l();
         }
@@ -8021,7 +8068,7 @@ let XIcon = /*@__PURE__*/ (() => {
             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) {
                 let c = this.o;
                 if (this.view != null && c.q == null) {
@@ -8053,16 +8100,16 @@ let XIcon = /*@__PURE__*/ (() => {
             return a;
         }
         provideContainer(a) {
-            this.view.aj(a);
+            this.view.ak(a);
         }
     }
     XIcon.$t = /*@__PURE__*/ 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;
@@ -8266,31 +8313,31 @@ let IgcXIconComponent = /*@__PURE__*/ (() => {
          * Gets the fill color currently used by the icon.
         */
         get actualFill() {
-            return brushToString(this.i.c1);
+            return brushToString(this.i.c8);
         }
         set actualFill(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));
         }
         /**
          * Gets the stroke color currently used by the icon.
         */
         get actualStroke() {
-            return brushToString(this.i.c2);
+            return brushToString(this.i.c9);
         }
         set actualStroke(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));
         }
         /**
          * Gets the text color currently used by the icon.
         */
         get actualTextColor() {
-            return brushToString(this.i.c3);
+            return brushToString(this.i.da);
         }
         set actualTextColor(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));
         }
         /**
          * Gets the stroke width currently used by the icon.
@@ -8316,11 +8363,11 @@ let IgcXIconComponent = /*@__PURE__*/ (() => {
          * Gets or sets the stroke color to use for the icon.
         */
         get stroke() {
-            return brushToString(this.i.dh);
+            return brushToString(this.i.dp);
         }
         set stroke(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));
         }
         /**
          * Gets or sets the stroke thickness to use for the icon.
@@ -8336,31 +8383,31 @@ let IgcXIconComponent = /*@__PURE__*/ (() => {
          * Gets or sets the text color to use for the icon.
         */
         get textColor() {
-            return brushToString(this.i.di);
+            return brushToString(this.i.dq);
         }
         set textColor(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));
         }
         /**
          * Gets or sets the fill color to use when the icon is hovered.
         */
         get hoverFill() {
-            return brushToString(this.i.da);
+            return brushToString(this.i.dh);
         }
         set hoverFill(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));
         }
         /**
          * Gets or sets the stroke color to use when the icon is hovered.
         */
         get hoverStroke() {
-            return brushToString(this.i.db);
+            return brushToString(this.i.di);
         }
         set hoverStroke(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));
         }
         /**
          * Gets or sets the stroke thickness to use when the icon is hovered.
@@ -8376,11 +8423,11 @@ let IgcXIconComponent = /*@__PURE__*/ (() => {
          * Gets or sets the text color to use when the icon is hovered.
         */
         get hoverTextColor() {
-            return brushToString(this.i.dc);
+            return brushToString(this.i.dj);
         }
         set hoverTextColor(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));
         }
         /**
          * Gets or sets a collection of fill colors to use in the icon.
@@ -8416,11 +8463,11 @@ let IgcXIconComponent = /*@__PURE__*/ (() => {
          * class.
         */
         get primaryFillColor() {
-            return brushToString(this.i.dd);
+            return brushToString(this.i.dk);
         }
         set primaryFillColor(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));
         }
         /**
          * Gets or sets a primary stroke color for the icon.
@@ -8430,11 +8477,11 @@ let IgcXIconComponent = /*@__PURE__*/ (() => {
          * class.
         */
         get primaryStrokeColor() {
-            return brushToString(this.i.de);
+            return brushToString(this.i.dl);
         }
         set primaryStrokeColor(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));
         }
         /**
          * Gets or sets a secondary fill color for the icon.
@@ -8444,11 +8491,11 @@ let IgcXIconComponent = /*@__PURE__*/ (() => {
          * class.
         */
         get secondaryFillColor() {
-            return brushToString(this.i.df);
+            return brushToString(this.i.dm);
         }
         set secondaryFillColor(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));
         }
         /**
          * Gets or sets a secondary stroke color for the icon.
@@ -8458,29 +8505,29 @@ let IgcXIconComponent = /*@__PURE__*/ (() => {
          * class.
         */
         get secondaryStrokeColor() {
-            return brushToString(this.i.dg);
+            return brushToString(this.i.dn);
         }
         set secondaryStrokeColor(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));
         }
         /**
          * Gets or sets the image source for the icon. Used if none of the other icon types are not used.
         */
         get source() {
-            return this.i.az;
+            return this.i.a1;
         }
         set source(v) {
-            this.i.az = v;
+            this.i.a1 = v;
         }
         /**
          * Gets or sets data url for the icon to use.
         */
         get dataURL() {
-            return this.i.bc;
+            return this.i.bg;
         }
         set dataURL(v) {
-            this.i.bc = v;
+            this.i.bg = v;
         }
         /**
          * Gets or sets path data for the icon to use.
@@ -8532,10 +8579,10 @@ let IgcXIconComponent = /*@__PURE__*/ (() => {
          * Gets or sets the id to use for the checkbox.
         */
         get id() {
-            return this.i.bm;
+            return this.i.bq;
         }
         set id(v) {
-            this.i.bm = v;
+            this.i.bq = v;
         }
         /**
          * Gets or sets TabIndex to use for the checkbox.
@@ -8551,10 +8598,10 @@ let IgcXIconComponent = /*@__PURE__*/ (() => {
          * Gets or sets the value of the aria-label attribute.
         */
         get ariaLabel() {
-            return this.i.a9;
+            return this.i.bb;
         }
         set ariaLabel(v) {
-            this.i.a9 = v;
+            this.i.bb = v;
         }
         /**
          * Gets or sets whether the icon is hovered.
@@ -8715,7 +8762,7 @@ let IgcXIconComponent = /*@__PURE__*/ (() => {
         
         */
         exportVisualModel() {
-            let iv = this.i.ay();
+            let iv = this.i.a0();
             return (iv);
         }
         /**
@@ -8723,7 +8770,7 @@ let IgcXIconComponent = /*@__PURE__*/ (() => {
         
         */
         exportSerializedVisualModel() {
-            let iv = this.i.be();
+            let iv = this.i.bi();
             return (iv);
         }
     }
@@ -13171,7 +13218,7 @@ let InputGroupView = /*@__PURE__*/ (() => {
         }
         ac(a) {
             if (typeCast(XLabel.$, a) !== null) {
-                a.bd = "flex-start";
+                a.be = "flex-start";
             }
         }
         ae(a) {
@@ -13621,20 +13668,20 @@ let LabelView = /*@__PURE__*/ (() => {
             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();
         }
         l() {
             return this.c.l == 0 ? (this.j() * 0.5) : 0;
         }
         aj() {
-            this.c.bj = "block";
+            this.c.bk = "block";
             let a = new TransformGroup();
             a.j.add(((() => {
                 let $ret = new TranslateTransform();
@@ -13681,8 +13728,8 @@ let LabelView = /*@__PURE__*/ (() => {
         }
         ab() {
             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);
                 let ext_ = this.m.getExternal(this.c, null, null);
                 if (ext_ && ext_._onDisplayChanged) {
                     ext_._onDisplayChanged();
@@ -13692,8 +13739,8 @@ let LabelView = /*@__PURE__*/ (() => {
         }
         w() {
             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);
                 let ext_ = this.m.getExternal(this.c, null, null);
                 if (ext_ && ext_._onAlignItemsChanged) {
                     ext_._onAlignItemsChanged();
@@ -13703,8 +13750,8 @@ let LabelView = /*@__PURE__*/ (() => {
         }
         x() {
             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);
                 let ext_ = this.m.getExternal(this.c, null, null);
                 if (ext_ && ext_._onAlignSelfChanged) {
                     ext_._onAlignSelfChanged();
@@ -13714,8 +13761,8 @@ let LabelView = /*@__PURE__*/ (() => {
         }
         ac() {
             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);
                 let ext_ = this.m.getExternal(this.c, null, null);
                 if (ext_ && ext_._onFlexDirectionChanged) {
                     ext_._onFlexDirectionChanged();
@@ -13725,8 +13772,8 @@ let LabelView = /*@__PURE__*/ (() => {
         }
         ad() {
             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);
                 let ext_ = this.m.getExternal(this.c, null, null);
                 if (ext_ && ext_._onFlexGrowChanged) {
                     ext_._onFlexGrowChanged();
@@ -13795,10 +13842,10 @@ let LabelView = /*@__PURE__*/ (() => {
             return parseFloat(stringReplace(a, "px", ""));
         }
         t(a) {
-            this.c.cg();
+            this.c.ch();
         }
         u(a) {
-            this.c.ch();
+            this.c.ci();
         }
         y() {
             this.f = true;
@@ -15062,7 +15109,7 @@ let XInputGroup = /*@__PURE__*/ (() => {
                         a.l = 2;
                         break;
                 }
-                a.cn(this.ai, false);
+                a.co(this.ai, false);
             });
         }
         kf() {
@@ -15395,11 +15442,11 @@ let XInputGroup = /*@__PURE__*/ (() => {
         jv() {
             this.jp();
             if (this.ai) {
-                this.js((a) => a.cn(true, !this.aj));
+                this.js((a) => a.co(true, !this.aj));
                 this.jr((a) => a.dq(this.ar, !this.aj));
             }
             else {
-                this.js((a) => a.cn(false, !this.aj));
+                this.js((a) => a.co(false, !this.aj));
                 this.jr((a) => a.dq(this.ar, !this.aj));
             }
         }
@@ -15407,12 +15454,12 @@ let XInputGroup = /*@__PURE__*/ (() => {
             this.jp();
             if (this.ao) {
                 let a = 1;
-                this.js((b) => b.am = true);
+                this.js((b) => b.an = true);
                 this.j4(a);
             }
             else {
                 let b = -1;
-                this.js((c) => c.am = false);
+                this.js((c) => c.an = false);
                 this.j4(b);
             }
         }
@@ -16768,7 +16815,7 @@ let XInputGroup = /*@__PURE__*/ (() => {
                     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) {
@@ -17263,41 +17310,42 @@ let XLabel = /*@__PURE__*/ (() => {
             super();
             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;
             let a = new LabelView();
             a.c = this;
             this.view = a;
@@ -17328,7 +17376,7 @@ let XLabel = /*@__PURE__*/ (() => {
             a.b = 0;
             return a;
         }
-        ca() {
+        cb() {
             this.view.v();
             let a = false;
             if (this.aa == null) {
@@ -17369,36 +17417,36 @@ let XLabel = /*@__PURE__*/ (() => {
                 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)));
             }
         }
-        cl(a, b) {
+        cm(a, b) {
             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((c) => this.cb(a));
+                a.finished.f((c) => this.cc(a));
             }
             else {
                 a.play();
-                if (this.aq) {
+                if (this.ar) {
                     a.finish();
-                    this.cb(a);
+                    this.cc(a);
                     return;
                 }
-                a.finished.f((c) => this.cb(a));
+                a.finished.f((c) => this.cc(a));
             }
         }
-        cb(a) {
+        cc(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) {
@@ -17409,15 +17457,15 @@ let XLabel = /*@__PURE__*/ (() => {
             super.h(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":
@@ -17440,7 +17488,7 @@ let XLabel = /*@__PURE__*/ (() => {
                             this.ah = true;
                         }
                     }
-                    this.cp();
+                    this.cq();
                     break;
                 case "Text":
                     this.view.ai();
@@ -17456,10 +17504,10 @@ let XLabel = /*@__PURE__*/ (() => {
                     this.view.aj();
                     break;
                 case "IsHighlighted":
-                    this.ce();
+                    this.cf();
                     break;
                 case "IsShifted":
-                    this.cf();
+                    this.cg();
                     break;
                 case "ShiftType":
                     if (this.aa != null) {
@@ -17470,7 +17518,7 @@ let XLabel = /*@__PURE__*/ (() => {
                             this.ai = true;
                         }
                     }
-                    this.ci();
+                    this.cj();
                     break;
                 case "Display":
                     this.view.ab();
@@ -17489,38 +17537,44 @@ let XLabel = /*@__PURE__*/ (() => {
                     break;
             }
         }
-        ci() {
+        cj() {
             this.view.aj();
         }
-        cf() {
+        cg() {
             this.view.af();
-            this.ca();
+            if (this.ak) {
+                return;
+            }
+            this.cb();
             let a = 1;
-            let b = this.ao;
+            let b = this.ap;
             if (!b) {
                 a = -1;
             }
-            this.cl(this.aa, a);
+            this.cm(this.aa, a);
         }
-        ce() {
-            this.ca();
+        cf() {
+            if (this.ak) {
+                return;
+            }
+            this.cb();
             let a = 1;
-            let b = this.am;
+            let b = this.an;
             if (!b) {
                 a = -1;
             }
-            this.cl(this.z, a);
+            this.cm(this.z, a);
         }
         onSizeReady() {
             if (this.aa != null) {
-                this.b9();
-                if (this.ao) {
+                this.ca();
+                if (this.ap) {
                     this.view.aj();
-                    this.cf();
+                    this.cg();
                 }
             }
         }
-        b9() {
+        ca() {
             if (this.aa != null && this.aa.playState == 3) {
                 this.aa = null;
             }
@@ -17529,26 +17583,26 @@ let XLabel = /*@__PURE__*/ (() => {
                 this.ai = true;
             }
         }
-        cq() {
-            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;
+        cr() {
+            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;
         }
-        cp() {
+        cq() {
             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);
         }
-        co(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);
+        cp(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);
         }
         get t() {
             return this.r;
@@ -17570,26 +17624,16 @@ let XLabel = /*@__PURE__*/ (() => {
                 this.g("ActualDensity", enumGetBox(ControlDisplayDensity_$type, b), enumGetBox(ControlDisplayDensity_$type, a));
             }
         }
-        get c2() {
-            return this.cu;
+        get c3() {
+            return this.cv;
         }
-        set c2(a) {
-            let b = this.cu;
-            this.cu = a;
-            if (b != this.cu) {
+        set c3(a) {
+            let b = this.cv;
+            this.cv = a;
+            if (b != this.cv) {
                 this.g("ActualTextColor", b, a);
             }
         }
-        get cz() {
-            return this.cr;
-        }
-        set cz(a) {
-            let b = this.cr;
-            this.cr = a;
-            if (b != this.cr) {
-                this.g("ActualHighlightTextColor", b, a);
-            }
-        }
         get c0() {
             return this.cs;
         }
@@ -17597,7 +17641,7 @@ let XLabel = /*@__PURE__*/ (() => {
             let b = this.cs;
             this.cs = a;
             if (b != this.cs) {
-                this.g("ActualHoverHighlightTextColor", b, a);
+                this.g("ActualHighlightTextColor", b, a);
             }
         }
         get c1() {
@@ -17607,6 +17651,16 @@ let XLabel = /*@__PURE__*/ (() => {
             let b = this.ct;
             this.ct = a;
             if (b != this.ct) {
+                this.g("ActualHoverHighlightTextColor", b, a);
+            }
+        }
+        get c2() {
+            return this.cu;
+        }
+        set c2(a) {
+            let b = this.cu;
+            this.cu = a;
+            if (b != this.cu) {
                 this.g("ActualHoverTextColor", b, a);
             }
         }
@@ -17620,26 +17674,16 @@ let XLabel = /*@__PURE__*/ (() => {
                 this.g("ActualTextStyle", b, a);
             }
         }
-        get di() {
-            return this.cy;
+        get dj() {
+            return this.cz;
         }
-        set di(a) {
-            let b = this.cy;
-            this.cy = a;
-            if (b != this.cy) {
+        set dj(a) {
+            let b = this.cz;
+            this.cz = a;
+            if (b != this.cz) {
                 this.g("TextColor", b, a);
             }
         }
-        get df() {
-            return this.cv;
-        }
-        set df(a) {
-            let b = this.cv;
-            this.cv = a;
-            if (b != this.cv) {
-                this.g("HighlightTextColor", b, a);
-            }
-        }
         get dg() {
             return this.cw;
         }
@@ -17647,6 +17691,16 @@ let XLabel = /*@__PURE__*/ (() => {
             let b = this.cw;
             this.cw = a;
             if (b != this.cw) {
+                this.g("HighlightTextColor", b, a);
+            }
+        }
+        get dh() {
+            return this.cx;
+        }
+        set dh(a) {
+            let b = this.cx;
+            this.cx = a;
+            if (b != this.cx) {
                 this.g("HoverHighlightTextColor", b, a);
             }
         }
@@ -17660,45 +17714,45 @@ let XLabel = /*@__PURE__*/ (() => {
                 this.g("ShiftType", enumGetBox(LabelShiftType_$type, b), enumGetBox(LabelShiftType_$type, a));
             }
         }
-        get ao() {
+        get ap() {
             return this.ag;
         }
-        set ao(a) {
+        set ap(a) {
             let b = this.ag;
             this.ag = a;
             if (b != this.ag) {
                 this.g("IsShifted", b, a);
             }
         }
-        cn(a, b = true) {
-            let c = this.aq;
+        co(a, b = true) {
+            let 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;
                 }
             }
         }
-        get am() {
+        get an() {
             return this.ae;
         }
-        set am(a) {
+        set an(a) {
             let b = this.ae;
             this.ae = a;
             if (b != this.ae) {
                 this.g("IsHighlighted", b, a);
             }
         }
-        cg() {
-            this.an = true;
-        }
         ch() {
-            this.an = false;
+            this.ao = true;
+        }
+        ci() {
+            this.ao = false;
         }
         get y() {
             return this.v;
@@ -17710,134 +17764,134 @@ let XLabel = /*@__PURE__*/ (() => {
                 this.g("TextStyle", b, a);
             }
         }
-        get dh() {
-            return this.cx;
+        get di() {
+            return this.cy;
         }
-        set dh(a) {
-            let b = this.cx;
-            this.cx = a;
-            if (b != this.cx) {
+        set di(a) {
+            let b = this.cy;
+            this.cy = a;
+            if (b != this.cy) {
                 this.g("HoverTextColor", b, a);
             }
         }
-        get bv() {
-            return this.a3;
+        get bw() {
+            return this.a4;
         }
-        set bv(a) {
-            let b = this.a3;
-            this.a3 = a;
-            if (b != this.a3) {
+        set bw(a) {
+            let b = this.a4;
+            this.a4 = a;
+            if (b != this.a4) {
                 this.g("Id", b, a);
             }
         }
-        get bj() {
-            return this.az;
-        }
-        set bj(a) {
-            let b = this.az;
-            this.az = a;
-            if (b != this.az) {
-                this.g("Display", b, a);
-            }
-        }
-        get bm() {
+        get bk() {
             return this.a0;
         }
-        set bm(a) {
+        set bk(a) {
             let b = this.a0;
             this.a0 = a;
             if (b != this.a0) {
-                this.g("FlexDirection", b, a);
+                this.g("Display", b, a);
             }
         }
-        get bo() {
+        get bn() {
             return this.a1;
         }
-        set bo(a) {
+        set bn(a) {
             let b = this.a1;
             this.a1 = a;
             if (b != this.a1) {
-                this.g("FlexGrow", b, a);
+                this.g("FlexDirection", b, a);
             }
         }
-        get bb() {
-            return this.aw;
+        get bp() {
+            return this.a2;
         }
-        set bb(a) {
-            let b = this.aw;
-            this.aw = a;
-            if (b != this.aw) {
-                this.g("AlignItems", b, a);
+        set bp(a) {
+            let b = this.a2;
+            this.a2 = a;
+            if (b != this.a2) {
+                this.g("FlexGrow", b, a);
             }
         }
-        get bd() {
+        get bc() {
             return this.ax;
         }
-        set bd(a) {
+        set bc(a) {
             let b = this.ax;
             this.ax = a;
             if (b != this.ax) {
+                this.g("AlignItems", b, a);
+            }
+        }
+        get be() {
+            return this.ay;
+        }
+        set be(a) {
+            let b = this.ay;
+            this.ay = a;
+            if (b != this.ay) {
                 this.g("AlignSelf", b, a);
             }
         }
-        get ak() {
+        get al() {
             return this.ac;
         }
-        get at() {
-            return this.as;
+        get au() {
+            return this.at;
         }
-        set at(a) {
-            let b = this.as;
-            this.as = a;
+        set au(a) {
+            let b = this.at;
+            this.at = a;
             this.ac = true;
-            if (b != this.as) {
+            if (b != this.at) {
                 this.g("TabIndex", b, a);
             }
         }
-        get bq() {
-            return this.a2;
+        get br() {
+            return this.a3;
         }
-        set bq(a) {
-            let b = this.a2;
-            this.a2 = a;
-            if (b != this.a2) {
+        set br(a) {
+            let b = this.a3;
+            this.a3 = a;
+            if (b != this.a3) {
                 this.g("TabIndex", b, a);
             }
         }
-        get bf() {
-            return this.ay;
+        get bg() {
+            return this.az;
         }
-        set bf(a) {
-            let b = this.ay;
-            this.ay = a;
-            if (b != this.ay) {
+        set bg(a) {
+            let b = this.az;
+            this.az = a;
+            if (b != this.az) {
                 this.g("AriaLabel", b, a);
             }
         }
         get text() {
-            return this.a4;
+            return this.a5;
         }
         set text(a) {
-            let b = this.a4;
-            this.a4 = a;
-            if (b != this.a4) {
+            let b = this.a5;
+            this.a5 = a;
+            if (b != this.a5) {
                 this.g("Text", b, a);
             }
         }
-        get an() {
+        get ao() {
             return this.af;
         }
-        set an(a) {
+        set ao(a) {
             let b = this.af;
             this.af = a;
             if (b != this.af) {
                 this.g("IsHover", b, a);
             }
         }
-        get ar() {
+        get as() {
             return this.aj;
         }
-        set ar(a) {
+        set as(a) {
             let b = this.aj;
             this.aj = a;
             if (b != this.aj) {
@@ -17854,7 +17908,7 @@ let XLabel = /*@__PURE__*/ (() => {
                 this.g("IsDisabled", b, a);
             }
         }
-        ck() {
+        cl() {
             this.view.ai();
         }
         onDetachedFromUI() {
@@ -17863,13 +17917,13 @@ let XLabel = /*@__PURE__*/ (() => {
         onAttachedToUI() {
             this.view.y();
         }
-        ap() {
+        aq() {
             return this.view.g();
         }
-        av() {
+        aw() {
             return this.j();
         }
-        bl() {
+        bm() {
             let a = this.j();
             return a.q();
         }
@@ -17881,15 +17935,15 @@ let XLabel = /*@__PURE__*/ (() => {
             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) {
@@ -17927,21 +17981,21 @@ let XLabel = /*@__PURE__*/ (() => {
         }
     }
     XLabel.$t = /*@__PURE__*/ markType(XLabel, 'XLabel', XInputGroupItem.$);
-    XLabel.dd = /*@__PURE__*/ BrushUtil.h(221, 0, 0, 0);
-    XLabel.da = /*@__PURE__*/ BrushUtil.h(255, 0, 153, 155);
-    XLabel.dc = /*@__PURE__*/ BrushUtil.h(221, 0, 0, 0);
+    XLabel.de = /*@__PURE__*/ BrushUtil.h(221, 0, 0, 0);
     XLabel.db = /*@__PURE__*/ BrushUtil.h(255, 0, 153, 155);
-    XLabel.c6 = /*@__PURE__*/ BrushUtil.h(255, 24, 29, 31);
-    XLabel.c3 = /*@__PURE__*/ BrushUtil.h(255, 33, 150, 243);
-    XLabel.c5 = /*@__PURE__*/ BrushUtil.h(255, 24, 29, 31);
+    XLabel.dd = /*@__PURE__*/ BrushUtil.h(221, 0, 0, 0);
+    XLabel.dc = /*@__PURE__*/ BrushUtil.h(255, 0, 153, 155);
+    XLabel.c7 = /*@__PURE__*/ BrushUtil.h(255, 24, 29, 31);
     XLabel.c4 = /*@__PURE__*/ BrushUtil.h(255, 33, 150, 243);
+    XLabel.c6 = /*@__PURE__*/ BrushUtil.h(255, 24, 29, 31);
+    XLabel.c5 = /*@__PURE__*/ BrushUtil.h(255, 33, 150, 243);
     XLabel.o = 2;
-    XLabel.de = /*@__PURE__*/ ThemeResolver.ah(XLabel.o, XLabel.dd, XLabel.c6);
-    XLabel.c7 = /*@__PURE__*/ ThemeResolver.ah(XLabel.o, XLabel.da, XLabel.c3);
-    XLabel.c9 = /*@__PURE__*/ ThemeResolver.ah(XLabel.o, XLabel.dc, XLabel.c5);
+    XLabel.df = /*@__PURE__*/ ThemeResolver.ah(XLabel.o, XLabel.de, XLabel.c7);
     XLabel.c8 = /*@__PURE__*/ ThemeResolver.ah(XLabel.o, XLabel.db, XLabel.c4);
+    XLabel.da = /*@__PURE__*/ ThemeResolver.ah(XLabel.o, XLabel.dd, XLabel.c6);
+    XLabel.c9 = /*@__PURE__*/ ThemeResolver.ah(XLabel.o, XLabel.dc, XLabel.c5);
     XLabel.x = null;
-    XLabel.au = 0;
+    XLabel.av = 0;
     return XLabel;
 })();
 /**
@@ -19763,71 +19817,71 @@ let IgcXLabelComponent = /*@__PURE__*/ (() => {
          * Gets the actual color to use for the text color.
         */
         get actualTextColor() {
-            return brushToString(this.i.c2);
+            return brushToString(this.i.c3);
         }
         set actualTextColor(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));
         }
         /**
          * Gets the actual color to use for the text color.
         */
         get actualHighlightTextColor() {
-            return brushToString(this.i.cz);
+            return brushToString(this.i.c0);
         }
         set actualHighlightTextColor(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));
         }
         /**
          * Gets the actual color to use for the text color when highlighted and hovered.
         */
         get actualHoverHighlightTextColor() {
-            return brushToString(this.i.c0);
+            return brushToString(this.i.c1);
         }
         set actualHoverHighlightTextColor(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));
         }
         /**
          * Gets the actual hover color to use for the text.
         */
         get actualHoverTextColor() {
-            return brushToString(this.i.c1);
+            return brushToString(this.i.c2);
         }
         set actualHoverTextColor(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));
         }
         /**
          * Gets or sets the color to use for the text.
         */
         get textColor() {
-            return brushToString(this.i.di);
+            return brushToString(this.i.dj);
         }
         set textColor(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));
         }
         /**
          * Gets or sets the color to use for the text.
         */
         get highlightTextColor() {
-            return brushToString(this.i.df);
+            return brushToString(this.i.dg);
         }
         set highlightTextColor(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));
         }
         /**
          * Gets or sets the color to use for the text.
         */
         get hoverHighlightTextColor() {
-            return brushToString(this.i.dg);
+            return brushToString(this.i.dh);
         }
         set hoverHighlightTextColor(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));
         }
         /**
          * Gets or sets the use for the button.
@@ -19848,93 +19902,93 @@ let IgcXLabelComponent = /*@__PURE__*/ (() => {
          * Gets or sets the color to use for the hovered text of the button regardless of type.
         */
         get hoverTextColor() {
-            return brushToString(this.i.dh);
+            return brushToString(this.i.di);
         }
         set hoverTextColor(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));
         }
         /**
          * Gets or sets the id to use for the checkbox.
         */
         get id() {
-            return this.i.bv;
+            return this.i.bw;
         }
         set id(v) {
-            this.i.bv = v;
+            this.i.bw = v;
         }
         /**
          * Gets or sets the id to use for the checkbox.
         */
         get display() {
-            return this.i.bj;
+            return this.i.bk;
         }
         set display(v) {
-            this.i.bj = v;
+            this.i.bk = v;
         }
         /**
          * Gets or sets the id to use for the checkbox.
         */
         get flexDirection() {
-            return this.i.bm;
+            return this.i.bn;
         }
         set flexDirection(v) {
-            this.i.bm = v;
+            this.i.bn = v;
         }
         /**
          * Gets or sets the flex-grow setting for the button.
         */
         get flexGrow() {
-            return this.i.bo;
+            return this.i.bp;
         }
         set flexGrow(v) {
-            this.i.bo = v;
+            this.i.bp = v;
         }
         /**
          * Gets or sets the id to use for the checkbox.
         */
         get alignItems() {
-            return this.i.bb;
+            return this.i.bc;
         }
         set alignItems(v) {
-            this.i.bb = v;
+            this.i.bc = v;
         }
         /**
          * Gets or sets the id to use for the checkbox.
         */
         get alignSelf() {
-            return this.i.bd;
+            return this.i.be;
         }
         set alignSelf(v) {
-            this.i.bd = v;
+            this.i.be = v;
         }
         /**
          * Gets or sets TabIndex to use for the checkbox.
         */
         get tabIndex() {
-            return this.i.at;
+            return this.i.au;
         }
         set tabIndex(v) {
-            this.i.at = +v;
-            this._a("tabIndex", this.i.at);
+            this.i.au = +v;
+            this._a("tabIndex", this.i.au);
         }
         /**
          * Gets or sets the for attribute to use for the label.
         */
         get for() {
-            return this.i.bq;
+            return this.i.br;
         }
         set for(v) {
-            this.i.bq = v;
+            this.i.br = v;
         }
         /**
          * Gets or sets the value of the aria-label attribute.
         */
         get ariaLabel() {
-            return this.i.bf;
+            return this.i.bg;
         }
         set ariaLabel(v) {
-            this.i.bf = v;
+            this.i.bg = v;
         }
         /**
          * Gets or sets the text for the label.
@@ -19949,21 +20003,21 @@ let IgcXLabelComponent = /*@__PURE__*/ (() => {
          * Gets or sets whether the label is hovered.
         */
         get isHover() {
-            return this.i.an;
+            return this.i.ao;
         }
         set isHover(v) {
-            this.i.an = ensureBool(v);
-            this._a("isHover", this.i.an);
+            this.i.ao = ensureBool(v);
+            this._a("isHover", this.i.ao);
         }
         /**
          * Gets or sets the value for the label.
         */
         get value() {
-            return this.i.ar;
+            return this.i.as;
         }
         set value(v) {
-            this.i.ar = ensureBool(v);
-            this._a("value", this.i.ar);
+            this.i.as = ensureBool(v);
+            this._a("value", this.i.as);
         }
         /**
          * Gets or sets whether the checkbox is disabled.
@@ -19986,7 +20040,7 @@ let IgcXLabelComponent = /*@__PURE__*/ (() => {
         
         */
         exportVisualModel() {
-            let iv = this.i.av();
+            let iv = this.i.aw();
             return (iv);
         }
         /**
@@ -19994,7 +20048,7 @@ let IgcXLabelComponent = /*@__PURE__*/ (() => {
         
         */
         exportSerializedVisualModel() {
-            let iv = this.i.bl();
+            let iv = this.i.bm();
             return (iv);
         }
     }
@@ -23263,7 +23317,7 @@ let XDatePicker = /*@__PURE__*/ (() => {
                 this.n.fill = this.dw;
             }
             if (this.r != null) {
-                this.r.di = this.dx;
+                this.r.dj = this.dx;
                 this.r.y = this.ac;
             }
         }
@@ -23284,7 +23338,7 @@ let XDatePicker = /*@__PURE__*/ (() => {
             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 != "") {
@@ -24778,7 +24832,7 @@ let XComponentBridge = /*@__PURE__*/ (() => {
         }
         getTargetForBuildInProperty(a, b) {
             switch (b) {
-                case 106: return a;
+                case 108: return a;
             }
             return this.s != null ? this.s : a;
         }
@@ -24827,12 +24881,12 @@ let XInputBridge = /*@__PURE__*/ (() => {
                     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;
@@ -24847,7 +24901,7 @@ let XInputBridge = /*@__PURE__*/ (() => {
                     this.aa = d;
                     this.af = b;
                     break;
-                case 24:
+                case 25:
                     this.ao(a);
                     let g = this.w(a);
                     let h = this.u;
@@ -24926,12 +24980,12 @@ let XInputBridge = /*@__PURE__*/ (() => {
                     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;
@@ -24946,7 +25000,7 @@ let XInputBridge = /*@__PURE__*/ (() => {
                     this.aa = null;
                     this.af = null;
                     break;
-                case 24:
+                case 25:
                     this.ao(a);
                     let g = this.w(a);
                     let h = this.u;
@@ -25037,20 +25091,20 @@ let XInputBridge = /*@__PURE__*/ (() => {
             let c = a;
             let d = typeCast(XInput.$, c.inputs._inner[0]);
             switch (b) {
-                case 101: return a.mc;
+                case 103: return a.mc;
                 case 3:
                     this.an(a);
                     let 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) {
@@ -25086,9 +25140,9 @@ let XInputBridge = /*@__PURE__*/ (() => {
                 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;
         }
@@ -25096,7 +25150,7 @@ let XInputBridge = /*@__PURE__*/ (() => {
             let d = a;
             let e = typeCast(XInput.$, d.inputs._inner[0]);
             switch (b) {
-                case 101:
+                case 103:
                     a.mc = c;
                     break;
                 case 3:
@@ -25104,17 +25158,17 @@ let XInputBridge = /*@__PURE__*/ (() => {
                     let 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();
@@ -25189,13 +25243,13 @@ let XInputBridge = /*@__PURE__*/ (() => {
                 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;
             }
@@ -25445,7 +25499,7 @@ let XButtonBridge = /*@__PURE__*/ (() => {
                 case 11:
                     d.aa = c;
                     break;
-                case 86:
+                case 88:
                     d.by = c;
                     break;
                 case 59:
@@ -25487,7 +25541,7 @@ let XButtonBridge = /*@__PURE__*/ (() => {
                 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;
@@ -28342,15 +28396,15 @@ let MultiSliderBridge = /*@__PURE__*/ (() => {
             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:
                     let c = a.e;
                     switch (c) {
@@ -28390,10 +28444,10 @@ let MultiSliderBridge = /*@__PURE__*/ (() => {
                 case 13:
                     a.bf = c;
                     break;
-                case 95:
+                case 97:
                     a.bv = c;
                     break;
-                case 96:
+                case 98:
                     a.bu = c;
                     break;
                 case 14:
@@ -28402,19 +28456,19 @@ let MultiSliderBridge = /*@__PURE__*/ (() => {
                 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:
@@ -29958,7 +30012,7 @@ let XButtonGroupBridge = /*@__PURE__*/ (() => {
                     }
                     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);
@@ -29998,7 +30052,7 @@ let XButtonGroupBridge = /*@__PURE__*/ (() => {
                 case 18:
                     d.p = EnumUtil.getEnumValue(BaseControlTheme_$type, c);
                     break;
-                case 85:
+                case 87:
                     d.d = c;
                     break;
                 case 0:
@@ -31436,8 +31490,8 @@ let XIconBridge = /*@__PURE__*/ (() => {
             a.svg = null;
             a.svgPath = null;
             a.b = null;
-            a.bc = null;
-            a.az = null;
+            a.bg = null;
+            a.a1 = null;
             let b = SvgIconRegistry.instance.getSvgPathString(this.u, this.v);
             if (b != null) {
                 if (stringStartsWith(trimStart(b, ' ', '\n', '\r', '\t'), "<svg")) {
@@ -31455,16 +31509,16 @@ let XIconBridge = /*@__PURE__*/ (() => {
             }
             let d = SvgIconRegistry.instance.getDataURLString(this.u, this.v);
             if (d != null) {
-                a.bc = d;
+                a.bg = d;
                 return;
             }
             let e = SvgIconRegistry.instance.getIconSource(this.u, this.v);
             if (e != null) {
-                a.az = e;
+                a.a1 = e;
             }
         }
         exportVisualData(a) {
-            return a.ay();
+            return a.a0();
         }
     }
     XIconBridge.$t = /*@__PURE__*/ markType(XIconBridge, 'XIconBridge', XComponentBridge.$);
@@ -31538,7 +31592,7 @@ let XPopupBridge = /*@__PURE__*/ (() => {
                     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;
@@ -31583,7 +31637,7 @@ let XPopupBridge = /*@__PURE__*/ (() => {
                     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;
@@ -31650,7 +31704,7 @@ let XPopupBridge = /*@__PURE__*/ (() => {
                 case 42: return c.c4;
                 case 39: return c.ao;
                 case 62: return c.a4;
-                case 108: return c.ay;
+                case 110: return c.ay;
             }
             return super.getValue(a, b);
         }
@@ -31710,7 +31764,7 @@ let XPopupBridge = /*@__PURE__*/ (() => {
                 case 62:
                     d.a4 = c;
                     break;
-                case 108:
+                case 110:
                     d.ay = c;
                     break;
             }
@@ -31752,7 +31806,7 @@ let XPopupBridge = /*@__PURE__*/ (() => {
             }
         }
         exportVisualData(a) {
-            return a.ay();
+            return a.a0();
         }
         addChild(a, b) {
             this.ae.add(b);