igniteui-webcomponents-inputs 7.1.0-alpha.1 → 7.1.0-alpha.2

package/fesm2015/igniteui-webcomponents-inputs.js

@@ -131,7 +131,7 @@ let RippleView = /*@__PURE__*/ (() => {
             d.setStyleProperty("pointer-events", "none");
             d.setStyleProperty("border-radius", c + "px");
             d.setStyleProperty("opacity", ".5");
-            NativeUI.af(d, ((() => {
+            NativeUI.ai(d, ((() => {
                 let $ret = new ScaleTransform();
                 $ret.l = 0.3;
                 $ret.m = 0.3;
@@ -1305,7 +1305,7 @@ let ButtonView = /*@__PURE__*/ (() => {
             this.o.setStyleProperty("white-space", "no-wrap");
             this.o.setStyleProperty("color", "#000");
             this.o.setStyleProperty("background", this.c.nt._fill);
-            NativeUI.o(this.o, this.c.k4);
+            NativeUI.p(this.o, this.c.k4);
             this.o.setAttribute("id", this.c.hz);
             this.ay();
             this.i.add(c.listen("change", runOn(this, this.aa)));
@@ -2372,10 +2372,10 @@ let XButton = /*@__PURE__*/ (() => {
             if (a == null) {
                 return;
             }
-            NativeUI.o(a, this.k4);
-            NativeUI.n(a, this.nu);
+            NativeUI.p(a, this.k4);
+            NativeUI.o(a, this.nu);
             if (!isNaN_(this.bk)) {
-                NativeUI.p(a, new Thickness(0, this.bk));
+                NativeUI.q(a, new Thickness(0, this.bk));
             }
             if (this.disabled) {
                 this.view.a0(this.cv, this.v);
@@ -2392,17 +2392,17 @@ let XButton = /*@__PURE__*/ (() => {
                 }
             }
             if (this.disabled) {
-                NativeUI.m(a, this.nv);
+                NativeUI.n(a, this.nv);
             }
             else if (this.focused && this.a3) {
-                NativeUI.m(a, this.ny);
+                NativeUI.n(a, this.ny);
             }
             else {
                 if (this.a4 && !this.av) {
-                    NativeUI.m(a, this.n0);
+                    NativeUI.n(a, this.n0);
                 }
                 else {
-                    NativeUI.m(a, this.nt);
+                    NativeUI.n(a, this.nt);
                 }
             }
             this.view.az(this.n3, BrushUtil.l(0, 0, 0, 0));
@@ -2410,21 +2410,21 @@ let XButton = /*@__PURE__*/ (() => {
                 this.view.a2(this.ab);
             }
             if (this.disabled) {
-                NativeUI.q(this.view.t, this.nx);
                 NativeUI.r(this.view.t, this.nx);
+                NativeUI.t(this.view.t, this.nx);
             }
             else if (this.focused && this.a3) {
-                NativeUI.q(this.view.t, this.nz);
                 NativeUI.r(this.view.t, this.nz);
+                NativeUI.t(this.view.t, this.nz);
             }
             else {
                 if (this.a4 && !this.av) {
-                    NativeUI.q(this.view.t, this.n1);
                     NativeUI.r(this.view.t, this.n1);
+                    NativeUI.t(this.view.t, this.n1);
                 }
                 else {
-                    NativeUI.q(this.view.t, this.n4);
                     NativeUI.r(this.view.t, this.n4);
+                    NativeUI.t(this.view.t, this.n4);
                 }
             }
         }
@@ -4174,16 +4174,16 @@ let XButton = /*@__PURE__*/ (() => {
             c.p = e[1];
             c.h = this.o;
             c.i = this.r;
-            c.c = AppearanceHelper.a(NativeUI.ak(a));
+            c.c = AppearanceHelper.a(NativeUI.an(a));
             c.g = AppearanceHelper.a(this.n5);
             c.d = AppearanceHelper.a(this.n2);
             c.a = AppearanceHelper.a(this.ns);
             c.u = this.cy;
             c.e = AppearanceHelper.a(this.n3);
             c.ag = this.k4;
-            c.b = AppearanceHelper.a(NativeUI.aj(a));
+            c.b = AppearanceHelper.a(NativeUI.am(a));
             c.j = this.v;
-            c.f = AppearanceHelper.a(NativeUI.al(b));
+            c.f = AppearanceHelper.a(NativeUI.ao(b));
             c.o = this.bk;
             c.x = this.f1;
             c.y = this.g5;
@@ -4553,9 +4553,9 @@ let XButton = /*@__PURE__*/ (() => {
     })()));
     XButton.k = /*@__PURE__*/ new Theme(1, /*@__PURE__*/ ((() => {
         let $ret = new Dictionary$2(String_$type, Base.$, 0);
-        $ret.addItem("UmbraShadowColor", BrushUtil.l(100, 33, 150, 243));
-        $ret.addItem("PenumbraShadowColor", BrushUtil.l(70, 33, 150, 243));
-        $ret.addItem("AmbientShadowColor", BrushUtil.l(40, 33, 150, 243));
+        $ret.addItem("UmbraShadowColor", BrushUtil.l(0, 0, 0, 0));
+        $ret.addItem("PenumbraShadowColor", BrushUtil.l(0, 0, 0, 0));
+        $ret.addItem("AmbientShadowColor", BrushUtil.l(0, 0, 0, 0));
         $ret.addItem("ElevationMode", enumGetBox(ElevationMode_$type, 2));
         return $ret;
     })()), /*@__PURE__*/ ((() => {
@@ -4712,9 +4712,9 @@ let XButton = /*@__PURE__*/ (() => {
     })()));
     XButton.j = /*@__PURE__*/ new Theme(1, /*@__PURE__*/ ((() => {
         let $ret = new Dictionary$2(String_$type, Base.$, 0);
-        $ret.addItem("UmbraShadowColor", BrushUtil.l(100, 33, 150, 243));
-        $ret.addItem("PenumbraShadowColor", BrushUtil.l(70, 33, 150, 243));
-        $ret.addItem("AmbientShadowColor", BrushUtil.l(40, 33, 150, 243));
+        $ret.addItem("UmbraShadowColor", BrushUtil.l(0, 0, 0, 0));
+        $ret.addItem("PenumbraShadowColor", BrushUtil.l(0, 0, 0, 0));
+        $ret.addItem("AmbientShadowColor", BrushUtil.l(0, 0, 0, 0));
         $ret.addItem("ElevationMode", enumGetBox(ElevationMode_$type, 2));
         return $ret;
     })()), /*@__PURE__*/ ((() => {
@@ -7293,7 +7293,7 @@ let IconView = /*@__PURE__*/ (() => {
             this.y.append(this.w);
             this.v.append(this.y);
             this.o.add(c.listen("click", runOn(this, this.ak)));
-            this.d.c6();
+            this.d.c8();
         }
         ay(a) {
             this.z = null;
@@ -7336,7 +7336,7 @@ let IconView = /*@__PURE__*/ (() => {
                 let b = this.v.rootWrapper.getNativeElement();
                 b.innerHTML = a;
                 this.z = this.v.rootWrapper.getChildAt(0);
-                let c = this.z.getAttribute("viewbox");
+                let c = this.z.getAttribute("viewBox");
                 if (c != null) {
                     let d = c.split(' ');
                     if (d.length == 1) {
@@ -7347,11 +7347,11 @@ let IconView = /*@__PURE__*/ (() => {
                         let f = parseFloat(d[1].trim());
                         let g = parseFloat(d[2].trim());
                         let h = parseFloat(d[3].trim());
-                        this.d.dd(e, f, g, h);
+                        this.d.df(e, f, g, h);
                     }
                 }
                 else {
-                    this.d.dd(NaN, NaN, NaN, NaN);
+                    this.d.df(NaN, NaN, NaN, NaN);
                 }
             }
         }
@@ -7427,7 +7427,7 @@ let IconView = /*@__PURE__*/ (() => {
                 this.v.rootWrapper.append(this.y);
             }
             else {
-                NativeUI.r(a, b);
+                NativeUI.t(a, b);
             }
         }
         ar(a, b) {
@@ -7436,7 +7436,7 @@ let IconView = /*@__PURE__*/ (() => {
                 c.setAttribute("stroke", "url('#" + this.n.item(b) + "')");
             }
             else {
-                NativeUI.aa(a, b);
+                NativeUI.ad(a, b);
             }
         }
         ad(a) {
@@ -7446,10 +7446,10 @@ let IconView = /*@__PURE__*/ (() => {
             }
         }
         ae(a) {
-            this.d.c3();
+            this.d.c5();
         }
         af(a) {
-            this.d.c4();
+            this.d.c6();
         }
         aj() {
             this.j = true;
@@ -7619,18 +7619,18 @@ let XIcon = /*@__PURE__*/ (() => {
             this.dp = null;
             this.dq = null;
             this.dr = null;
-            this.be = null;
-            this.bj = null;
-            this.bm = null;
+            this.bf = null;
             this.bl = null;
+            this.bo = null;
+            this.bn = null;
             this.a = null;
-            this.de = null;
             this.bd = null;
+            this.be = null;
             this.n = null;
-            this.bk = "ig-icon-" + XIcon.bc++;
+            this.bm = "ig-icon-" + XIcon.bc++;
             this.ba = 0;
             this.p = false;
-            this.bi = null;
+            this.bk = null;
             this.r = false;
             this.q = false;
             this.af = 1;
@@ -7664,13 +7664,13 @@ let XIcon = /*@__PURE__*/ (() => {
         destroy() {
             this.provideContainer(null);
         }
-        c5(a, b, c) {
+        c7(a, b, c) {
             if (this.propertyChanged != null) {
                 this.propertyChanged(this, new PropertyChangedEventArgs(a));
             }
-            this.c8(a, b, c);
+            this.da(a, b, c);
         }
-        c8(a, b, c) {
+        da(a, b, c) {
             switch (a) {
                 case "Fill":
                 case "Stroke":
@@ -7679,51 +7679,51 @@ let XIcon = /*@__PURE__*/ (() => {
                 case "HoverStroke":
                 case "HoverStrokeThickness":
                 case "IsHover":
-                    this.dc();
+                    this.de();
                     break;
                 case "FillColors":
                 case "StrokeColors":
                 case "ActualFill":
                 case "ActualStroke":
                 case "ActualStrokeWidth":
-                    this.da();
+                    this.dc();
                     break;
                 case "SVG":
-                    this.bm = null;
+                    this.bo = null;
                     this.a = null;
-                    this.da();
+                    this.dc();
                     break;
                 case "SVGPath":
-                    this.bl = null;
+                    this.bn = null;
                     this.a = null;
-                    this.da();
+                    this.dc();
                     break;
                 case "SVGPaths":
-                    this.bl = null;
-                    this.bm = null;
-                    this.da();
+                    this.bn = null;
+                    this.bo = null;
+                    this.dc();
                     break;
                 case "DataURL":
-                    this.bl = null;
-                    this.bm = null;
+                    this.bn = null;
+                    this.bo = null;
                     this.a = null;
-                    this.da();
+                    this.dc();
                     break;
                 case "Source":
-                    this.bl = null;
-                    this.bm = null;
+                    this.bn = null;
+                    this.bo = null;
                     this.a = null;
-                    this.da();
+                    this.dc();
                     break;
                 case "DataTemplate":
                 case "DataTemplateContext":
-                    this.bl = null;
-                    this.bm = null;
+                    this.bn = null;
+                    this.bo = null;
                     this.a = null;
-                    this.da();
+                    this.dc();
                     break;
                 case "Opacity":
-                    this.db();
+                    this.dd();
                     break;
                 case "ViewBoxLeft":
                     this.as = !isNaN_(this.a6) ? this.a6 : !isNaN_(this.ah) ? this.ah : 0;
@@ -7749,7 +7749,7 @@ let XIcon = /*@__PURE__*/ (() => {
                     break;
             }
         }
-        dc() {
+        de() {
             let a = this.fill != null ? this.fill : XIcon.dx;
             let b = this.ea != null ? this.ea : XIcon.d1;
             let c = !isNaN_(this.a4) ? this.a4 : XIcon.aw;
@@ -7770,19 +7770,19 @@ let XIcon = /*@__PURE__*/ (() => {
         get t() {
             return this.svgPath != null && !this.view.m;
         }
-        db() {
-            NativeUI.y(this.view.aa, this.a3);
+        dd() {
+            NativeUI.ab(this.view.aa, this.a3);
         }
-        cz() {
+        c1() {
             this.view.ag();
         }
-        da() {
+        dc() {
             let a = this.view.aa;
             if (this.t) {
                 let b = this.view.ab;
-                NativeUI.r(b, this.du);
-                NativeUI.aa(b, this.dv);
-                NativeUI.ad(b, this.aq);
+                NativeUI.t(b, this.du);
+                NativeUI.ad(b, this.dv);
+                NativeUI.ag(b, this.aq);
             }
             else {
                 let c = this.j();
@@ -7791,8 +7791,8 @@ let XIcon = /*@__PURE__*/ (() => {
                     this.view.ai();
                 }
                 let d = false;
-                if (this.df != null) {
-                    this.view.as(this.df, this.bf);
+                if (this.bg != null) {
+                    this.view.as(this.bg, this.bh);
                 }
                 else if (this.svgPath != null) {
                     if (stringStartsWith(trimStart(this.svgPath, ' ', '\n', '\r', '\t'), "<svg")) {
@@ -7807,9 +7807,9 @@ let XIcon = /*@__PURE__*/ (() => {
                     this.view.az(this.b);
                     let e = this.view.c;
                     if (e != null && e.length > 0) {
-                        let f = NativeUI.r;
-                        let g = NativeUI.aa;
-                        this.c7();
+                        let f = NativeUI.t;
+                        let g = NativeUI.ad;
+                        this.c9();
                         f = runOn(this.view, this.view.aq);
                         g = runOn(this.view, this.view.ar);
                         for (let h = 0; h < e.length; h++) {
@@ -7820,10 +7820,10 @@ let XIcon = /*@__PURE__*/ (() => {
                                 g(e[h], this.dv);
                             }
                             if (!isNaN_(this.aq)) {
-                                NativeUI.ad(e[h], this.aq);
+                                NativeUI.ag(e[h], this.aq);
                             }
                             if (this.dw != null) {
-                                NativeUI.q(e[h], this.dw);
+                                NativeUI.r(e[h], this.dw);
                             }
                             if (this.e != null && this.e.count == e.length) {
                                 f(e[h], this.e.item(h));
@@ -7842,30 +7842,30 @@ let XIcon = /*@__PURE__*/ (() => {
                     this.view.ax(this.svg);
                     d = true;
                 }
-                else if (this.b0 != null) {
-                    this.view.at(this.b0);
+                else if (this.b2 != null) {
+                    this.view.at(this.b2);
                 }
-                else if (this.bh != null) {
-                    this.view.aw(this.bh);
+                else if (this.bj != null) {
+                    this.view.aw(this.bj);
                 }
                 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.d6));
+                        NativeUI.t(this.view.r._inner[i].d, j.l.f(this.d6));
                     }
                     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.d7));
+                        NativeUI.ad(this.view.s._inner[k].d, l.m.f(this.d7));
                     }
                     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.d8));
+                        NativeUI.t(this.view.t._inner[m].d, n.l.f(this.d8));
                     }
                     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.d9));
+                        NativeUI.ad(this.view.u._inner[o].d, p.m.f(this.d9));
                     }
                     for (let q = 0; q < this.view.e.o.count; q++) {
                         let r = this.view.e.o._inner[q];
@@ -7874,7 +7874,7 @@ let XIcon = /*@__PURE__*/ (() => {
                         if (t < this.e.count) {
                             for (let u = 0; u < this.view.e.q._inner[q].count; u++) {
                                 let v = this.view.e.q._inner[q]._inner[u].c;
-                                NativeUI.r(this.view.e.q._inner[q]._inner[u].d, v.l.f(this.e.item(t)));
+                                NativeUI.t(this.view.e.q._inner[q]._inner[u].d, v.l.f(this.e.item(t)));
                             }
                         }
                     }
@@ -7885,35 +7885,35 @@ let XIcon = /*@__PURE__*/ (() => {
                         if (z < this.f.count) {
                             for (let aa = 0; aa < this.view.f.q._inner[w].count; aa++) {
                                 let ab = this.view.f.q._inner[w]._inner[aa].c;
-                                NativeUI.aa(this.view.f.q._inner[w]._inner[aa].d, ab.m.f(this.f.item(z)));
+                                NativeUI.ad(this.view.f.q._inner[w]._inner[aa].d, ab.m.f(this.f.item(z)));
                             }
                         }
                     }
                     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.du));
-                        NativeUI.aa(this.view.q._inner[ac].d, ad.m.f(this.dv));
+                        NativeUI.t(this.view.q._inner[ac].d, ad.l.f(this.du));
+                        NativeUI.ad(this.view.q._inner[ac].d, ad.m.f(this.dv));
                     }
                 }
                 let ae = this.view.aa;
                 if (this.du != null) {
-                    NativeUI.r(ae, this.du);
+                    NativeUI.t(ae, this.du);
                 }
                 if (this.dv != null) {
-                    NativeUI.aa(ae, this.dv);
+                    NativeUI.ad(ae, this.dv);
                 }
                 if (!isNaN_(this.aq)) {
-                    NativeUI.ad(ae, this.aq);
+                    NativeUI.ag(ae, this.aq);
                 }
             }
             if (this.o != null) {
                 this.view.a0(this.o);
             }
             if (this.dw != null) {
-                NativeUI.q(this.view.aa, this.dw);
+                NativeUI.r(this.view.aa, this.dw);
             }
         }
-        c7() {
+        c9() {
             if (this.du != null) {
                 this.view.ap(this.du, "fill");
             }
@@ -7942,10 +7942,10 @@ let XIcon = /*@__PURE__*/ (() => {
             else if (this.svg != null) {
                 a = 0;
             }
-            else if (this.b0 != null) {
+            else if (this.b2 != null) {
                 a = 3;
             }
-            else if (this.bh != null) {
+            else if (this.bj != null) {
                 a = 4;
             }
             return a;
@@ -7957,7 +7957,7 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.l;
             this.l = a;
             if (b != this.l) {
-                this.c5("BaseTheme", enumGetBox(BaseControlTheme_$type, b), enumGetBox(BaseControlTheme_$type, a));
+                this.c7("BaseTheme", enumGetBox(BaseControlTheme_$type, b), enumGetBox(BaseControlTheme_$type, a));
             }
         }
         get du() {
@@ -7967,7 +7967,7 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.dg;
             this.dg = a;
             if (b != this.dg) {
-                this.c5("ActualFill", b, a);
+                this.c7("ActualFill", b, a);
             }
         }
         get dv() {
@@ -7977,7 +7977,7 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.dh;
             this.dh = a;
             if (b != this.dh) {
-                this.c5("ActualStroke", b, a);
+                this.c7("ActualStroke", b, a);
             }
         }
         get dw() {
@@ -7987,7 +7987,7 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.di;
             this.di = a;
             if (b != this.di) {
-                this.c5("ActualTextColor", b, a);
+                this.c7("ActualTextColor", b, a);
             }
         }
         get aq() {
@@ -7997,7 +7997,7 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.y;
             this.y = a;
             if (b != this.y) {
-                this.c5("ActualStrokeWidth", b, a);
+                this.c7("ActualStrokeWidth", b, a);
             }
         }
         get fill() {
@@ -8007,7 +8007,7 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.dj;
             this.dj = a;
             if (b != this.dj) {
-                this.c5("Fill", b, a);
+                this.c7("Fill", b, a);
             }
         }
         get ea() {
@@ -8017,7 +8017,7 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.ds;
             this.ds = a;
             if (b != this.ds) {
-                this.c5("Stroke", b, a);
+                this.c7("Stroke", b, a);
             }
         }
         get a4() {
@@ -8027,7 +8027,7 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.ak;
             this.ak = a;
             if (b != this.ak) {
-                this.c5("StrokeWidth", b, a);
+                this.c7("StrokeWidth", b, a);
             }
         }
         get eb() {
@@ -8037,7 +8037,7 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.dt;
             this.dt = a;
             if (b != this.dt) {
-                this.c5("TextColor", b, a);
+                this.c7("TextColor", b, a);
             }
         }
         get d3() {
@@ -8047,7 +8047,7 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.dk;
             this.dk = a;
             if (b != this.dk) {
-                this.c5("HoverFill", b, a);
+                this.c7("HoverFill", b, a);
             }
         }
         get d4() {
@@ -8057,7 +8057,7 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.dl;
             this.dl = a;
             if (b != this.dl) {
-                this.c5("HoverStroke", b, a);
+                this.c7("HoverStroke", b, a);
             }
         }
         get a2() {
@@ -8067,7 +8067,7 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.ae;
             this.ae = a;
             if (b != this.ae) {
-                this.c5("HoverStrokeThickness", b, a);
+                this.c7("HoverStrokeThickness", b, a);
             }
         }
         get d5() {
@@ -8077,7 +8077,7 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.dm;
             this.dm = a;
             if (b != this.dm) {
-                this.c5("HoverTextColor", b, a);
+                this.c7("HoverTextColor", b, a);
             }
         }
         get e() {
@@ -8087,7 +8087,7 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.c;
             this.c = a;
             if (b != this.c) {
-                this.c5("FillColors", b, this.c);
+                this.c7("FillColors", b, this.c);
             }
         }
         get f() {
@@ -8097,7 +8097,7 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.d;
             this.d = a;
             if (b != this.d) {
-                this.c5("StrokeColors", b, this.d);
+                this.c7("StrokeColors", b, this.d);
             }
         }
         get d6() {
@@ -8107,7 +8107,7 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.dn;
             this.dn = a;
             if (b != this.dn) {
-                this.c5("PrimaryFillColor", b, this.dn);
+                this.c7("PrimaryFillColor", b, this.dn);
             }
         }
         get d7() {
@@ -8117,7 +8117,7 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.dp;
             this.dp = a;
             if (b != this.dp) {
-                this.c5("PrimaryStrokeColor", b, this.dp);
+                this.c7("PrimaryStrokeColor", b, this.dp);
             }
         }
         get d8() {
@@ -8127,7 +8127,7 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.dq;
             this.dq = a;
             if (b != this.dq) {
-                this.c5("SecondaryFillColor", b, this.dq);
+                this.c7("SecondaryFillColor", b, this.dq);
             }
         }
         get d9() {
@@ -8137,47 +8137,47 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.dr;
             this.dr = a;
             if (b != this.dr) {
-                this.c5("SecondaryStrokeColor", b, this.dr);
+                this.c7("SecondaryStrokeColor", b, this.dr);
             }
         }
-        get bh() {
-            return this.be;
+        get bj() {
+            return this.bf;
         }
-        set bh(a) {
-            let b = this.be;
-            this.be = a;
-            if (b != this.be) {
-                this.c5("Source", b, a);
+        set bj(a) {
+            let b = this.bf;
+            this.bf = a;
+            if (b != this.bf) {
+                this.c7("Source", b, a);
             }
         }
-        get b0() {
-            return this.bj;
+        get b2() {
+            return this.bl;
         }
-        set b0(a) {
-            let b = this.bj;
-            this.bj = a;
-            if (b != this.bj) {
-                this.c5("DataURL", b, a);
+        set b2(a) {
+            let b = this.bl;
+            this.bl = a;
+            if (b != this.bl) {
+                this.c7("DataURL", b, a);
             }
         }
         get svgPath() {
-            return this.bm;
+            return this.bo;
         }
         set svgPath(a) {
-            let b = this.bm;
-            this.bm = a;
-            if (b != this.bm) {
-                this.c5("SVGPath", b, a);
+            let b = this.bo;
+            this.bo = a;
+            if (b != this.bo) {
+                this.c7("SVGPath", b, a);
             }
         }
         get svg() {
-            return this.bl;
+            return this.bn;
         }
         set svg(a) {
-            let b = this.bl;
-            this.bl = a;
-            if (b != this.bl) {
-                this.c5("SVG", b, this.bl);
+            let b = this.bn;
+            this.bn = a;
+            if (b != this.bn) {
+                this.c7("SVG", b, this.bn);
             }
         }
         get b() {
@@ -8187,33 +8187,33 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.a;
             this.a = a;
             if (b != this.a) {
-                this.c5("SVGPaths", b, this.a);
+                this.c7("SVGPaths", b, this.a);
             }
         }
-        get df() {
-            return this.de;
-        }
-        set df(a) {
-            let b = this.de;
-            this.de = a;
-            if (b != this.de) {
-                this.c5("DataTemplate", b, this.de);
-            }
-        }
-        get bf() {
+        get bg() {
             return this.bd;
         }
-        set bf(a) {
+        set bg(a) {
             let b = this.bd;
             this.bd = a;
             if (b != this.bd) {
-                this.c5("DataTemplateContext", b, this.bd);
+                this.c7("DataTemplate", b, this.bd);
             }
         }
-        c3() {
+        get bh() {
+            return this.be;
+        }
+        set bh(a) {
+            let b = this.be;
+            this.be = a;
+            if (b != this.be) {
+                this.c7("DataTemplateContext", b, this.be);
+            }
+        }
+        c5() {
             this.v = true;
         }
-        c4() {
+        c6() {
             this.v = false;
         }
         get o() {
@@ -8223,17 +8223,17 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.n;
             this.n = a;
             if (b != this.n) {
-                this.c5("TextStyle", b, a);
+                this.c7("TextStyle", b, a);
             }
         }
-        get ca() {
-            return this.bk;
+        get cc() {
+            return this.bm;
         }
-        set ca(a) {
-            let b = this.bk;
-            this.bk = a;
-            if (b != this.bk) {
-                this.c5("Id", b, a);
+        set cc(a) {
+            let b = this.bm;
+            this.bm = a;
+            if (b != this.bm) {
+                this.c7("Id", b, a);
             }
         }
         get s() {
@@ -8247,17 +8247,17 @@ let XIcon = /*@__PURE__*/ (() => {
             this.ba = a;
             this.p = true;
             if (b != this.ba) {
-                this.c5("TabIndex", b, a);
+                this.c7("TabIndex", b, a);
             }
         }
-        get bv() {
-            return this.bi;
+        get bx() {
+            return this.bk;
         }
-        set bv(a) {
-            let b = this.bi;
-            this.bi = a;
-            if (b != this.bi) {
-                this.c5("AriaLabel", b, a);
+        set bx(a) {
+            let b = this.bk;
+            this.bk = a;
+            if (b != this.bk) {
+                this.c7("AriaLabel", b, a);
             }
         }
         get v() {
@@ -8267,7 +8267,7 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.r;
             this.r = a;
             if (b != this.r) {
-                this.c5("IsHover", b, a);
+                this.c7("IsHover", b, a);
             }
         }
         get disabled() {
@@ -8277,7 +8277,7 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.q;
             this.q = a;
             if (b != this.q) {
-                this.c5("IsDisabled", b, a);
+                this.c7("IsDisabled", b, a);
             }
         }
         get a3() {
@@ -8287,7 +8287,7 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.af;
             this.af = a;
             if (b != this.af) {
-                this.c5("Opacity", b, this.af);
+                this.c7("Opacity", b, this.af);
             }
         }
         get as() {
@@ -8297,7 +8297,7 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.aa;
             this.aa = a;
             if (b != this.aa) {
-                this.c5("ActualViewBoxLeft", b, this.aa);
+                this.c7("ActualViewBoxLeft", b, this.aa);
             }
         }
         get a6() {
@@ -8307,7 +8307,7 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.am;
             this.am = a;
             if (b != this.am) {
-                this.c5("ViewBoxLeft", b, this.am);
+                this.c7("ViewBoxLeft", b, this.am);
             }
         }
         get at() {
@@ -8317,7 +8317,7 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.ab;
             this.ab = a;
             if (b != this.ab) {
-                this.c5("ActualViewBoxTop", b, this.ab);
+                this.c7("ActualViewBoxTop", b, this.ab);
             }
         }
         get a7() {
@@ -8327,7 +8327,7 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.an;
             this.an = a;
             if (b != this.an) {
-                this.c5("ViewBoxTop", b, this.an);
+                this.c7("ViewBoxTop", b, this.an);
             }
         }
         get au() {
@@ -8337,7 +8337,7 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.ac;
             this.ac = a;
             if (b != this.ac) {
-                this.c5("ActualViewBoxWidth", b, this.ac);
+                this.c7("ActualViewBoxWidth", b, this.ac);
             }
         }
         get a8() {
@@ -8347,7 +8347,7 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.ao;
             this.ao = a;
             if (b != this.ao) {
-                this.c5("ViewBoxWidth", b, this.ao);
+                this.c7("ViewBoxWidth", b, this.ao);
             }
         }
         get ar() {
@@ -8357,7 +8357,7 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.z;
             this.z = a;
             if (b != this.z) {
-                this.c5("ActualViewBoxHeight", b, this.z);
+                this.c7("ActualViewBoxHeight", b, this.z);
             }
         }
         get a5() {
@@ -8367,7 +8367,7 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.al;
             this.al = a;
             if (b != this.al) {
-                this.c5("ViewBoxHeight", b, this.al);
+                this.c7("ViewBoxHeight", b, this.al);
             }
         }
         get a9() {
@@ -8377,7 +8377,7 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.ap;
             this.ap = a;
             if (b != this.ap) {
-                this.c5("Width", b, this.ap);
+                this.c7("Width", b, this.ap);
             }
         }
         get a1() {
@@ -8387,10 +8387,10 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.ad;
             this.ad = a;
             if (b != this.ad) {
-                this.c5("Height", b, this.ad);
+                this.c7("Height", b, this.ad);
             }
         }
-        c6() {
+        c8() {
         }
         onDetachedFromUI() {
             this.view.am();
@@ -8412,10 +8412,10 @@ let XIcon = /*@__PURE__*/ (() => {
         w() {
             return this.view.l();
         }
-        bg() {
+        bi() {
             return this.g();
         }
-        b2() {
+        b4() {
             let a = this.g();
             return a.l();
         }
@@ -8430,7 +8430,7 @@ let XIcon = /*@__PURE__*/ (() => {
             a.a = this.view.a();
             a.svg = this.svg;
             a.svgPath = this.svgPath;
-            a.k = this.b0;
+            a.k = this.b2;
             if (this.o != null) {
                 let d = this.o;
                 if (this.view != null && d.q == null) {
@@ -8464,7 +8464,7 @@ let XIcon = /*@__PURE__*/ (() => {
         provideContainer(a) {
             this.view.al(a);
         }
-        dd(a, b, c, d) {
+        df(a, b, c, d) {
             this.ah = a;
             this.ai = b;
             this.aj = c;
@@ -8888,19 +8888,19 @@ let IgcXIconComponent = /*@__PURE__*/ (() => {
          * 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.bh;
+            return this.i.bj;
         }
         set source(v) {
-            this.i.bh = v;
+            this.i.bj = v;
         }
         /**
          * Gets or sets data url for the icon to use.
         */
         get dataURL() {
-            return this.i.b0;
+            return this.i.b2;
         }
         set dataURL(v) {
-            this.i.b0 = v;
+            this.i.b2 = v;
         }
         /**
          * Gets or sets path data for the icon to use.
@@ -8952,10 +8952,10 @@ let IgcXIconComponent = /*@__PURE__*/ (() => {
          * Gets or sets the id to use for the checkbox.
         */
         get id() {
-            return this.i.ca;
+            return this.i.cc;
         }
         set id(v) {
-            this.i.ca = v;
+            this.i.cc = v;
         }
         /**
          * Gets or sets TabIndex to use for the checkbox.
@@ -8971,10 +8971,10 @@ let IgcXIconComponent = /*@__PURE__*/ (() => {
          * Gets or sets the value of the aria-label attribute.
         */
         get ariaLabel() {
-            return this.i.bv;
+            return this.i.bx;
         }
         set ariaLabel(v) {
-            this.i.bv = v;
+            this.i.bx = v;
         }
         /**
          * Gets or sets whether the icon is hovered.
@@ -9175,7 +9175,7 @@ let IgcXIconComponent = /*@__PURE__*/ (() => {
         
         */
         exportVisualModel() {
-            let iv = this.i.bg();
+            let iv = this.i.bi();
             return (iv);
         }
         /**
@@ -9183,7 +9183,7 @@ let IgcXIconComponent = /*@__PURE__*/ (() => {
         
         */
         exportSerializedVisualModel() {
-            let iv = this.i.b2();
+            let iv = this.i.b4();
             return (iv);
         }
     }
@@ -12162,7 +12162,7 @@ let XCalendar = /*@__PURE__*/ (() => {
                     m.d = n[1] - e;
                     m.c = NativeUI.d(k._inner[l].parent());
                     m.f = NativeUI.k(k._inner[l].parent());
-                    m.b = AppearanceHelper.a(NativeUI.al(k._inner[l]));
+                    m.b = AppearanceHelper.a(NativeUI.ao(k._inner[l]));
                     m.g = k._inner[l].getText();
                     a.k.add(m);
                 }
@@ -12175,8 +12175,8 @@ let XCalendar = /*@__PURE__*/ (() => {
                         q.d = r[1] - e;
                         q.c = NativeUI.d(o._inner[p].parent());
                         q.f = NativeUI.k(o._inner[p].parent());
-                        q.b = AppearanceHelper.a(NativeUI.al(o._inner[p]));
-                        q.a = AppearanceHelper.a(NativeUI.ak(o._inner[p]));
+                        q.b = AppearanceHelper.a(NativeUI.ao(o._inner[p]));
+                        q.a = AppearanceHelper.a(NativeUI.an(o._inner[p]));
                         q.g = o._inner[p].getText();
                         a.l.add(q);
                     }
@@ -13662,7 +13662,7 @@ let InputGroupView = /*@__PURE__*/ (() => {
             g.setStyleProperty("height", "2px");
             g.setStyleProperty("display", "block");
             g.setStyleProperty("pointer-events", "none");
-            NativeUI.af(g, ((() => {
+            NativeUI.ai(g, ((() => {
                 let $ret = new ScaleTransform();
                 $ret.l = 0.5;
                 $ret.m = 1;
@@ -13835,7 +13835,7 @@ let SuffixView = /*@__PURE__*/ (() => {
                 $ret.m = 1;
                 return $ret;
             })()));
-            NativeUI.af(this.h.rootWrapper, b);
+            NativeUI.ai(this.h.rootWrapper, b);
             this.h.rootWrapper.setStyleProperty("transform-origin", "0px 0px");
         }
         g() {
@@ -13932,7 +13932,7 @@ let PrefixView = /*@__PURE__*/ (() => {
                 $ret.m = 1;
                 return $ret;
             })()));
-            NativeUI.af(this.h.rootWrapper, b);
+            NativeUI.ai(this.h.rootWrapper, b);
             this.h.rootWrapper.setStyleProperty("transform-origin", "0px 0px");
         }
         g() {
@@ -14026,7 +14026,7 @@ let LabelView = /*@__PURE__*/ (() => {
             c.setStyleProperty("overflow", "hidden");
             c.setStyleProperty("height", "1.125rem");
             c.setStyleProperty("backface-visibility", "hidden");
-            NativeUI.q(this.m.rootWrapper, this.c.c3);
+            NativeUI.r(this.m.rootWrapper, this.c.c3);
             c.setStyleProperty("outline-style", "none");
             c.setStyleProperty("box-shadow", "none");
             c.setStyleProperty("font-family", "Verdana");
@@ -14052,7 +14052,7 @@ let LabelView = /*@__PURE__*/ (() => {
                 $ret.m = 1;
                 return $ret;
             })()));
-            NativeUI.af(this.m.rootWrapper, a);
+            NativeUI.ai(this.m.rootWrapper, a);
             this.n.setStyleProperty("height", "1.125rem");
             this.m.rootWrapper.setStyleProperty("position", "absolute");
             this.m.rootWrapper.setStyleProperty("transform-origin", "0px 0px");
@@ -14223,7 +14223,7 @@ let LabelView = /*@__PURE__*/ (() => {
             }
         }
         ah(a) {
-            NativeUI.q(this.n, a);
+            NativeUI.r(this.n, a);
         }
         e() {
             return ((() => {
@@ -14298,7 +14298,7 @@ let InputView = /*@__PURE__*/ (() => {
             c.setStyleProperty("background-attachment", "initial");
             c.setStyleProperty("background-origin", "initial");
             c.setStyleProperty("background-color", "transparent");
-            NativeUI.q(c, this.c.d4);
+            NativeUI.r(c, this.c.d4);
             c.setStyleProperty("outline-style", "none");
             c.setStyleProperty("box-shadow", "none");
             c.setStyleProperty("border-top", "0.1875rem solid transparent");
@@ -14429,7 +14429,7 @@ let InputView = /*@__PURE__*/ (() => {
                 $ret.m = 1;
                 return $ret;
             })()));
-            NativeUI.af(this.m.rootWrapper, b);
+            NativeUI.ai(this.m.rootWrapper, b);
             this.m.rootWrapper.setStyleProperty("transform-origin", "0px 0px");
         }
         l() {
@@ -15435,7 +15435,7 @@ let XInputGroup = /*@__PURE__*/ (() => {
                     this.jv();
                     break;
                 case "IsDisabled":
-                    NativeUI.u(this.view.v, !this.disabled);
+                    NativeUI.w(this.view.v, !this.disabled);
                     break;
             }
         }
@@ -15618,44 +15618,44 @@ let XInputGroup = /*@__PURE__*/ (() => {
             let e = this.v != null && this.v.playState == 1;
             let f = this.w != null && this.w.playState == 1;
             let g = this.u != null && this.u.playState == 1;
-            NativeUI.o(a, this.ko);
-            NativeUI.o(b, this.ko);
-            NativeUI.m(a, this.l5);
-            NativeUI.z(a, this.oe);
+            NativeUI.p(a, this.ko);
+            NativeUI.p(b, this.ko);
+            NativeUI.n(a, this.l5);
+            NativeUI.ac(a, this.oe);
             if (this.ao) {
                 if (!g) {
-                    NativeUI.n(b, this.l7);
-                    NativeUI.p(b, new Thickness(0, this.ch));
+                    NativeUI.o(b, this.l7);
+                    NativeUI.q(b, new Thickness(0, this.ch));
                 }
                 if (!f) {
-                    NativeUI.m(c, this.l8);
+                    NativeUI.n(c, this.l8);
                 }
             }
             else {
                 if (!f) {
                     if (this.ap) {
-                        NativeUI.m(c, this.l9);
-                        NativeUI.y(c, this.ck);
-                        NativeUI.t(c, this.cl);
+                        NativeUI.n(c, this.l9);
+                        NativeUI.ab(c, this.ck);
+                        NativeUI.v(c, this.cl);
                     }
                     else {
-                        NativeUI.m(c, this.ma);
-                        NativeUI.y(c, this.cm);
-                        NativeUI.t(c, this.cp);
+                        NativeUI.n(c, this.ma);
+                        NativeUI.ab(c, this.cm);
+                        NativeUI.v(c, this.cp);
                     }
                 }
                 if (!g) {
-                    NativeUI.n(b, this.l6);
-                    NativeUI.p(b, new Thickness(0, this.cg));
+                    NativeUI.o(b, this.l6);
+                    NativeUI.q(b, new Thickness(0, this.cg));
                 }
                 if (!f) {
-                    NativeUI.m(a, this.l5);
+                    NativeUI.n(a, this.l5);
                 }
             }
             if (!e) {
-                NativeUI.m(d, this.mb);
-                NativeUI.t(d, this.co);
-                NativeUI.y(d, this.cn);
+                NativeUI.n(d, this.mb);
+                NativeUI.v(d, this.co);
+                NativeUI.ab(d, this.cn);
             }
         }
         get a() {
@@ -18279,7 +18279,7 @@ let XLabel = /*@__PURE__*/ (() => {
             a.c = this.p;
             a.e = this.t;
             a.d = this.s;
-            a.a = AppearanceHelper.a(NativeUI.al(b));
+            a.a = AppearanceHelper.a(NativeUI.ao(b));
             a.b = this.l;
             a.i = this.ap;
             a.g = this.an;
@@ -18590,7 +18590,7 @@ let XInput = /*@__PURE__*/ (() => {
             if (this.ad != null) {
                 this.view.bc(this.ad);
             }
-            NativeUI.q(this.view.r, this.d4);
+            NativeUI.r(this.view.r, this.d4);
             this.view.a7();
         }
         get d4() {
@@ -18960,7 +18960,7 @@ let XInput = /*@__PURE__*/ (() => {
             a.l = this.ce;
             a.o = this.ci;
             a.d = this.au;
-            a.a = AppearanceHelper.a(NativeUI.al(b));
+            a.a = AppearanceHelper.a(NativeUI.ao(b));
             a.k = this.b8;
             a.n = this.cg;
             a.e = this.aw;
@@ -25145,7 +25145,8 @@ let XComponentBridge = /*@__PURE__*/ (() => {
                 case 15:
                 case 17:
                 case 7:
-                case 21: return b;
+                case 21:
+                case 1: return b;
             }
             return this.s != null ? this.s : b;
         }
@@ -25157,8 +25158,8 @@ let XComponentBridge = /*@__PURE__*/ (() => {
         }
         getTargetForBuildInProperty(a, b) {
             switch (b) {
-                case 108:
-                case 121: return a;
+                case 109:
+                case 122: return a;
             }
             return this.s != null ? this.s : a;
         }
@@ -25414,18 +25415,18 @@ let XInputBridge = /*@__PURE__*/ (() => {
             let c = a;
             let d = typeCast(XInput.$, c.inputs._inner[0]);
             switch (b) {
-                case 103: return a.mc;
+                case 104: return a.mc;
                 case 3:
                     this.an(a);
                     let e = this.v(a);
                     return e.text;
-                case 100:
+                case 101:
                     this.ao(a);
                     return this.u.svgPath;
-                case 101:
+                case 102:
                     this.ao(a);
                     return this.u.fill;
-                case 102:
+                case 103:
                     this.ao(a);
                     return this.u.ea;
                 case 2: return d.cq;
@@ -25461,11 +25462,11 @@ let XInputBridge = /*@__PURE__*/ (() => {
                     }
                     break;
                 case 21: return d.a1;
-                case 32: return d.disabled;
-                case 33: return d.d8;
-                case 105: return d.selectionStart;
-                case 106: return d.selectionEnd;
-                case 107: return c.an;
+                case 33: return d.disabled;
+                case 34: return d.d8;
+                case 106: return d.selectionStart;
+                case 107: return d.selectionEnd;
+                case 108: return c.an;
             }
             return null;
         }
@@ -25473,7 +25474,7 @@ let XInputBridge = /*@__PURE__*/ (() => {
             let d = a;
             let e = typeCast(XInput.$, d.inputs._inner[0]);
             switch (b) {
-                case 103:
+                case 104:
                     a.mc = c;
                     break;
                 case 3:
@@ -25481,15 +25482,15 @@ let XInputBridge = /*@__PURE__*/ (() => {
                     let f = this.v(a);
                     f.text = c;
                     break;
-                case 100:
+                case 101:
                     this.ao(a);
                     this.u.svgPath = c;
                     break;
-                case 101:
+                case 102:
                     this.ao(a);
                     this.u.fill = c;
                     break;
-                case 102:
+                case 103:
                     this.ao(a);
                     this.u.ea = c;
                     break;
@@ -25560,19 +25561,19 @@ let XInputBridge = /*@__PURE__*/ (() => {
                 case 21:
                     e.a1 = c;
                     break;
-                case 32:
+                case 33:
                     e.disabled = c;
                     break;
-                case 33:
+                case 34:
                     e.d8 = c;
                     break;
-                case 105:
+                case 106:
                     e.selectionStart = typeGetValue(c);
                     break;
-                case 106:
+                case 107:
                     e.selectionEnd = typeGetValue(c);
                     break;
-                case 107:
+                case 108:
                     d.an = c;
                     break;
             }
@@ -25767,7 +25768,7 @@ let XButtonBridge = /*@__PURE__*/ (() => {
                 case 18:
                     d.o = EnumUtil.getEnumValue(BaseControlTheme_$type, c);
                     break;
-                case 54:
+                case 55:
                     if (typeCast(NativeUIComponent.$, c) !== null) {
                         this.aa = c;
                         d.appendButtonContent(this.aa.ao);
@@ -25795,7 +25796,7 @@ let XButtonBridge = /*@__PURE__*/ (() => {
                 case 4:
                     d.ax = c;
                     break;
-                case 32:
+                case 33:
                     d.disabled = c;
                     break;
                 case 5:
@@ -25807,19 +25808,19 @@ let XButtonBridge = /*@__PURE__*/ (() => {
                 case 24:
                     d.ql = c;
                     break;
-                case 55:
+                case 56:
                     d.bn = c.left;
                     d.bp = c.top;
                     d.bo = c.right;
                     d.bm = c.bottom;
                     break;
-                case 57:
+                case 58:
                     d.az = c;
                     break;
-                case 56:
+                case 57:
                     d.aw = c;
                     break;
-                case 58:
+                case 59:
                     d.au = c;
                     break;
                 case 17:
@@ -25828,13 +25829,13 @@ let XButtonBridge = /*@__PURE__*/ (() => {
                 case 11:
                     d.ab = c;
                     break;
-                case 88:
+                case 89:
                     d.bz = c;
                     break;
-                case 59:
+                case 60:
                     d.a6 = c;
                     break;
-                case 118:
+                case 119:
                     d.n7 = c;
                     break;
                 case 23:
@@ -25846,7 +25847,7 @@ let XButtonBridge = /*@__PURE__*/ (() => {
             let c = a;
             switch (b) {
                 case 3: return this.ac;
-                case 54: return this.aa;
+                case 55: return this.aa;
                 case 1:
                     switch (c.s) {
                         case 0: return enumGetBox(NativeUIDisplayDensity_$type, 0);
@@ -25867,18 +25868,18 @@ let XButtonBridge = /*@__PURE__*/ (() => {
                     }
                     return enumGetBox(NativeUIButtonDisplayType_$type, 0);
                 case 4: return c.ax;
-                case 32: return c.disabled;
+                case 33: return c.disabled;
                 case 5: return c.av;
                 case 6: return !c.a3;
                 case 24: return c.ql;
-                case 55: return new Thickness(1, c.bn, c.bp, c.bo, c.bm);
-                case 57: return c.az;
-                case 56: return c.aw;
-                case 58: return c.au;
+                case 56: return new Thickness(1, c.bn, c.bp, c.bo, c.bm);
+                case 58: return c.az;
+                case 57: return c.aw;
+                case 59: return c.au;
                 case 17: return c.k6;
-                case 88: return c.bz;
-                case 59: return c.a6;
-                case 118: return c.n7;
+                case 89: return c.bz;
+                case 60: return c.a6;
+                case 119: return c.n7;
                 case 23: return c.n6;
             }
             return null;
@@ -26966,8 +26967,8 @@ let MultiSliderView = /*@__PURE__*/ (() => {
                 this.w = truncate(Math.round(d));
             }
             if (this.l.d && this.t != 1) {
-                this.l.aa();
-                this.l.ab(this.t, this.t);
+                this.l.ac();
+                this.l.ad(this.t, this.t);
             }
             this.l.l(this.g.e0.left, this.g.e0.top, this.g.e0.width, this.g.e0.height);
             for (let e = 0; e < this.r.count; e++) {
@@ -26989,29 +26990,29 @@ let MultiSliderView = /*@__PURE__*/ (() => {
                 this.a1(this.r._inner[i].allPaths);
             }
             if (this.l.d && this.t != 1) {
-                this.l.z();
+                this.l.ab();
             }
         }
         a2(a) {
             if (a.j != null) {
-                this.l.aa();
+                this.l.ac();
             }
             this.l.k(a.j);
-            this.l.x(a);
+            this.l.y(a);
             if (a.j != null) {
-                this.l.z();
+                this.l.ab();
             }
         }
         a1(a) {
             for (let b = 0; b < a.count; b++) {
                 let c = a.item(b);
                 if (c.j != null) {
-                    this.l.aa();
+                    this.l.ac();
                 }
                 this.l.k(c.j);
                 this.l.t(c);
                 if (c.j != null) {
-                    this.l.z();
+                    this.l.ab();
                 }
             }
         }
@@ -27083,7 +27084,7 @@ let MultiSliderView = /*@__PURE__*/ (() => {
             this.v = i;
             let j = this.u.get2DCanvasContext(this.v);
             this.l = new RenderingContext(new CanvasViewRenderer(), j);
-            this.l.af(this.j);
+            this.l.ah(this.j);
             this.ab();
             this.a = new CanvasGestureDOMEventProxy(this.u.rootWrapper, this.u, false);
             this.a.bo = this.g.e0;
@@ -27158,7 +27159,7 @@ let MultiSliderView = /*@__PURE__*/ (() => {
                 this.i = c;
                 this.j = this.i;
                 this.s = FontUtil.getCurrentFontHeight(this.u, this.j);
-                this.l.af(this.i);
+                this.l.ah(this.i);
                 this.g.trackDirty();
             }
         }
@@ -28691,15 +28692,15 @@ let MultiSliderBridge = /*@__PURE__*/ (() => {
             switch (b) {
                 case 12: return a.bg;
                 case 13: return a.bf;
-                case 97: return a.bv;
-                case 98: return a.bf;
+                case 98: return a.bv;
+                case 99: return a.bf;
                 case 14: return a.bl;
                 case 2: return a.thumbs._inner[0].s;
-                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 93: return a.b0;
+                case 94: return a.ek;
+                case 95: return a.es;
+                case 97: return a.eu;
+                case 96: return a.et;
                 case 30:
                     let c = a.e;
                     switch (c) {
@@ -28739,10 +28740,10 @@ let MultiSliderBridge = /*@__PURE__*/ (() => {
                 case 13:
                     a.bf = c;
                     break;
-                case 97:
+                case 98:
                     a.bv = c;
                     break;
-                case 98:
+                case 99:
                     a.bu = c;
                     break;
                 case 14:
@@ -28751,19 +28752,19 @@ let MultiSliderBridge = /*@__PURE__*/ (() => {
                 case 2:
                     a.thumbs._inner[0].s = c;
                     break;
-                case 92:
+                case 93:
                     a.b0 = c;
                     break;
-                case 93:
+                case 94:
                     a.ek = c;
                     break;
-                case 94:
+                case 95:
                     a.es = c;
                     break;
-                case 96:
+                case 97:
                     a.eu = c;
                     break;
-                case 95:
+                case 96:
                     a.et = c;
                     break;
                 case 30:
@@ -30307,17 +30308,17 @@ let XButtonGroupBridge = /*@__PURE__*/ (() => {
                     }
                     return enumGetBox(NativeUIDisplayDensity_$type, e);
                 case 18: return enumGetBox(BaseControlTheme_$type, c.q);
-                case 87: return c.d;
+                case 88: return c.d;
                 case 0:
                     switch (c.i) {
                         case 0: return enumGetBox(NativeUIButtonGroupDisplayType_$type, 0);
                         case 1: return enumGetBox(NativeUIButtonGroupDisplayType_$type, 1);
                     }
                     return enumGetBox(NativeUIButtonDisplayType_$type, 0);
-                case 32: return c.disabled;
+                case 33: return c.disabled;
                 case 24: return c.ht;
                 case 17: return c.a2;
-                case 119: return c.hp;
+                case 120: return c.hp;
             }
             return null;
         }
@@ -30348,7 +30349,7 @@ let XButtonGroupBridge = /*@__PURE__*/ (() => {
                 case 18:
                     d.q = EnumUtil.getEnumValue(BaseControlTheme_$type, c);
                     break;
-                case 87:
+                case 88:
                     d.d = c;
                     break;
                 case 0:
@@ -30361,7 +30362,7 @@ let XButtonGroupBridge = /*@__PURE__*/ (() => {
                             break;
                     }
                     break;
-                case 32:
+                case 33:
                     d.disabled = c;
                     break;
                 case 24:
@@ -30370,7 +30371,7 @@ let XButtonGroupBridge = /*@__PURE__*/ (() => {
                 case 17:
                     d.a2 = c.e;
                     break;
-                case 119:
+                case 120:
                     d.hp = c;
                     break;
             }
@@ -30987,18 +30988,18 @@ let XCheckbox = /*@__PURE__*/ (() => {
             if (a == null || b == null) {
                 return;
             }
-            NativeUI.o(a, new CornerRadius(0, this.ao));
-            NativeUI.o(b, new CornerRadius(0, this.ao));
+            NativeUI.p(a, new CornerRadius(0, this.ao));
+            NativeUI.p(b, new CornerRadius(0, this.ao));
             if (!isNaN_(this.an)) {
-                NativeUI.p(b, new Thickness(0, this.an));
+                NativeUI.q(b, new Thickness(0, this.an));
             }
             if (this.checked) {
-                NativeUI.m(a, this.c8);
-                NativeUI.n(b, this.c9);
+                NativeUI.n(a, this.c8);
+                NativeUI.o(b, this.c9);
             }
             else {
-                NativeUI.m(a, this.db);
-                NativeUI.n(b, this.dc);
+                NativeUI.n(a, this.db);
+                NativeUI.o(b, this.dc);
             }
         }
         cw() {
@@ -31006,8 +31007,8 @@ let XCheckbox = /*@__PURE__*/ (() => {
             if (a == null) {
                 return;
             }
-            NativeUI.aa(a, this.da);
-            NativeUI.ad(a, this.ap);
+            NativeUI.ad(a, this.da);
+            NativeUI.ag(a, this.ap);
         }
         get dl() {
             return this.c6;
@@ -31421,7 +31422,7 @@ let XCheckbox = /*@__PURE__*/ (() => {
                 this.view.al(BrushUtil.u(this.c8, 0.6), BrushUtil.u(this.dc, 0.1));
             }
             if (!this.indeterminate) {
-                NativeUI.af(this.view.v, null);
+                NativeUI.ai(this.view.v, null);
             }
             if (this.z || this.indeterminate || a) {
                 let d = this.view.u;
@@ -31440,23 +31441,23 @@ let XCheckbox = /*@__PURE__*/ (() => {
                         $ret.j = -this.view.l();
                         return $ret;
                     })()));
-                    NativeUI.m(d, this.c8);
-                    NativeUI.n(e, this.c9);
-                    NativeUI.y(f, 1);
-                    NativeUI.ac(f, 41);
-                    NativeUI.af(f, g);
+                    NativeUI.n(d, this.c8);
+                    NativeUI.o(e, this.c9);
+                    NativeUI.ab(f, 1);
+                    NativeUI.af(f, 41);
+                    NativeUI.ai(f, g);
                 }
                 else if (b) {
-                    NativeUI.m(d, this.c8);
-                    NativeUI.n(e, this.c9);
-                    NativeUI.y(f, 1);
-                    NativeUI.ac(f, 0);
+                    NativeUI.n(d, this.c8);
+                    NativeUI.o(e, this.c9);
+                    NativeUI.ab(f, 1);
+                    NativeUI.af(f, 0);
                 }
                 else {
-                    NativeUI.m(d, this.db);
-                    NativeUI.n(e, this.dc);
-                    NativeUI.y(f, 0);
-                    NativeUI.ac(f, 24);
+                    NativeUI.n(d, this.db);
+                    NativeUI.o(e, this.dc);
+                    NativeUI.ab(f, 0);
+                    NativeUI.af(f, 24);
                 }
                 if (this.o.playState == 1) {
                     this.o.cancel();
@@ -31671,10 +31672,10 @@ let XCheckboxBridge = /*@__PURE__*/ (() => {
                 case 7: return c.checked;
                 case 18: return enumGetBox(BaseControlTheme_$type, c.n);
                 case 17: return c.ar;
-                case 66: return c.dl;
-                case 68: return c.dm;
-                case 67: return c.dd;
-                case 69: return c.de;
+                case 67: return c.dl;
+                case 69: return c.dm;
+                case 68: return c.dd;
+                case 70: return c.de;
             }
             return null;
         }
@@ -31693,16 +31694,16 @@ let XCheckboxBridge = /*@__PURE__*/ (() => {
                 case 17:
                     d.ar = c;
                     break;
-                case 66:
+                case 67:
                     d.dl = c;
                     break;
-                case 68:
+                case 69:
                     d.dm = c;
                     break;
-                case 67:
+                case 68:
                     d.dd = c;
                     break;
-                case 69:
+                case 70:
                     d.de = c;
                     break;
             }
@@ -31735,15 +31736,15 @@ let XIconBridge = /*@__PURE__*/ (() => {
                 case 16: return this.v;
                 case 15: return this.u;
                 case 18: return enumGetBox(BaseControlTheme_$type, c.m);
-                case 44: return c.a6;
-                case 45: return c.a7;
-                case 46: return c.a8;
-                case 47: return c.a5;
-                case 48: return c.a9;
-                case 49: return c.a1;
-                case 63: return c.e;
-                case 64: return c.f;
-                case 65: return c.a4;
+                case 45: return c.a6;
+                case 46: return c.a7;
+                case 47: return c.a8;
+                case 48: return c.a5;
+                case 49: return c.a9;
+                case 50: return c.a1;
+                case 64: return c.e;
+                case 65: return c.f;
+                case 66: return c.a4;
             }
             return super.getValue(a, b);
         }
@@ -31763,31 +31764,31 @@ let XIconBridge = /*@__PURE__*/ (() => {
                         this.w(d);
                     }
                     break;
-                case 44:
+                case 45:
                     d.a6 = c;
                     break;
-                case 45:
+                case 46:
                     d.a7 = c;
                     break;
-                case 46:
+                case 47:
                     d.a8 = c;
                     break;
-                case 47:
+                case 48:
                     d.a5 = c;
                     break;
-                case 48:
+                case 49:
                     d.a9 = c;
                     break;
-                case 49:
+                case 50:
                     d.a1 = c;
                     break;
-                case 63:
+                case 64:
                     d.e = c;
                     break;
-                case 64:
+                case 65:
                     d.f = c;
                     break;
-                case 65:
+                case 66:
                     d.a4 = c;
                     break;
             }
@@ -31802,8 +31803,8 @@ let XIconBridge = /*@__PURE__*/ (() => {
             a.svg = null;
             a.svgPath = null;
             a.b = null;
-            a.b0 = null;
-            a.bh = null;
+            a.b2 = null;
+            a.bj = null;
             let b = SvgIconRegistry.instance.getSvgPathString(this.u, this.v);
             if (b != null) {
                 if (stringStartsWith(trimStart(b, ' ', '\n', '\r', '\t'), "<svg")) {
@@ -31821,16 +31822,16 @@ let XIconBridge = /*@__PURE__*/ (() => {
             }
             let d = SvgIconRegistry.instance.getDataURLString(this.u, this.v);
             if (d != null) {
-                a.b0 = d;
+                a.b2 = d;
                 return;
             }
             let e = SvgIconRegistry.instance.getIconSource(this.u, this.v);
             if (e != null) {
-                a.bh = e;
+                a.bj = e;
             }
         }
         exportVisualData(a) {
-            let b = a.bg();
+            let b = a.bi();
             return b;
         }
     }
@@ -31993,28 +31994,28 @@ let XPopupBridge = /*@__PURE__*/ (() => {
             let c = a;
             switch (b) {
                 case 22: return c.ax;
-                case 60: return c.av;
-                case 61: return c.aq;
+                case 61: return c.av;
+                case 62: return c.aq;
                 case 25: return c.am;
                 case 26: return c.a9;
                 case 17: return c.a1;
                 case 23: return c.c0;
-                case 35: switch (c.p) {
+                case 36: switch (c.p) {
                     case 1: return enumGetBox(NativeUIPopupAnimationType_$type, 1);
                     default: return enumGetBox(NativeUIPopupAnimationType_$type, 0);
                 }
-                case 36: return c.at;
-                case 37: return c.as;
-                case 40: return c.bb;
-                case 41: return c.au;
-                case 43: switch (c.v) {
+                case 37: return c.at;
+                case 38: return c.as;
+                case 41: return c.bb;
+                case 42: return c.au;
+                case 44: switch (c.v) {
                     case 1: return enumGetBox(NativeUIPopupPointerPosition_$type, 1);
                     default: return enumGetBox(NativeUIPopupPointerPosition_$type, 2);
                 }
-                case 42: return c.c4;
-                case 39: return c.ao;
-                case 62: return c.a4;
-                case 110: return c.ay;
+                case 43: return c.c4;
+                case 40: return c.ao;
+                case 63: return c.a4;
+                case 111: return c.ay;
             }
             return super.getValue(a, b);
         }
@@ -32033,7 +32034,7 @@ let XPopupBridge = /*@__PURE__*/ (() => {
                 case 23:
                     d.c0 = c;
                     break;
-                case 35:
+                case 36:
                     switch (EnumUtil.getEnumValue(NativeUIPopupAnimationType_$type, c)) {
                         case 1:
                             d.p = 1;
@@ -32043,22 +32044,22 @@ let XPopupBridge = /*@__PURE__*/ (() => {
                             break;
                     }
                     break;
-                case 36:
+                case 37:
                     d.at = c;
                     break;
-                case 37:
+                case 38:
                     d.as = c;
                     break;
-                case 40:
+                case 41:
                     d.bb = typeGetValue(c);
                     break;
-                case 41:
+                case 42:
                     d.au = c;
                     break;
-                case 42:
+                case 43:
                     d.c4 = c;
                     break;
-                case 43:
+                case 44:
                     switch (EnumUtil.getEnumValue(NativeUIPopupPointerPosition_$type, c)) {
                         case 1:
                             d.v = 1;
@@ -32068,13 +32069,13 @@ let XPopupBridge = /*@__PURE__*/ (() => {
                             break;
                     }
                     break;
-                case 39:
+                case 40:
                     d.ao = c;
                     break;
-                case 62:
+                case 63:
                     d.a4 = c;
                     break;
-                case 110:
+                case 111:
                     d.ay = c;
                     break;
             }
@@ -32116,7 +32117,7 @@ let XPopupBridge = /*@__PURE__*/ (() => {
             }
         }
         exportVisualData(a) {
-            return a.bg();
+            return a.bi();
         }
         addChild(a, b) {
             this.ae.add(b);
@@ -33803,13 +33804,13 @@ let ColorEditorPanel = /*@__PURE__*/ (() => {
                 d.bi = new Thickness(1, 5, 5, 5, 0);
                 p.bi = new Thickness(1, 5, 16, 0, 11);
                 p.a9 = BrushUtil.l(255, 255, 0, 0);
+                c.cf(p, 0);
                 c.cd(p, 0);
-                c.cb(p, 0);
                 c.bo(p);
-                n.b3(0, 2, 1);
-                n.b3(1, 2, 1);
+                n.b5(0, 2, 1);
+                n.b5(1, 2, 1);
                 n.bi = new Thickness(1, 5, 2, 5, 2);
-                n.cb(j, 0);
+                n.cd(j, 0);
                 j.bi = new Thickness(1, 0, 0, 2, 0);
                 j.bv = 1;
                 j.bq = this.h;
@@ -33820,7 +33821,7 @@ let ColorEditorPanel = /*@__PURE__*/ (() => {
                 o.bq = this.h;
                 o.c = this.f;
                 o.b6 = "hex";
-                n.cb(o, 1);
+                n.cd(o, 1);
                 n.bo(j);
                 n.bo(o);
                 l.bi = new Thickness(1, 5, 2, 5, 2);
@@ -33829,39 +33830,39 @@ let ColorEditorPanel = /*@__PURE__*/ (() => {
                 m.bq = this.h;
                 l.bn = runOn(this, this.a6);
                 m.bn = runOn(this, this.bh);
-                b.b5(0, 1, 175);
-                b.b5(1, 0, 0);
-                b.b5(2, 0, 0);
-                b.b5(3, 0, 0);
-                b.b3(0, 1, 90);
-                b.b3(1, 1, 175);
-                b.b3(2, 1, 25);
+                b.b7(0, 1, 175);
+                b.b7(1, 0, 0);
+                b.b7(2, 0, 0);
+                b.b7(3, 0, 0);
+                b.b5(0, 1, 90);
+                b.b5(1, 1, 175);
+                b.b5(2, 1, 25);
+                b.cf(c, 0);
                 b.cd(c, 0);
-                b.cb(c, 0);
-                b.cd(d, 0);
-                b.cb(d, 1);
-                b.cd(e, 0);
-                b.cb(e, 1);
-                b.cd(f, 0);
-                b.cb(f, 3);
-                b.cd(g, 0);
-                b.cb(g, 3);
-                b.cd(h, 1);
-                b.cb(h, 0);
-                b.cc(h, 3);
-                b.cd(i, 1);
-                b.cb(i, 0);
-                b.cc(i, 3);
-                b.cd(n, 2);
-                b.cb(n, 0);
-                b.cc(n, 3);
-                b.cd(k, 3);
-                b.cb(k, 0);
-                b.cc(k, 3);
-                k.b3(0, 2, 1);
-                k.b3(1, 2, 1);
-                k.cb(l, 0);
-                k.cb(m, 1);
+                b.cf(d, 0);
+                b.cd(d, 1);
+                b.cf(e, 0);
+                b.cd(e, 1);
+                b.cf(f, 0);
+                b.cd(f, 3);
+                b.cf(g, 0);
+                b.cd(g, 3);
+                b.cf(h, 1);
+                b.cd(h, 0);
+                b.ce(h, 3);
+                b.cf(i, 1);
+                b.cd(i, 0);
+                b.ce(i, 3);
+                b.cf(n, 2);
+                b.cd(n, 0);
+                b.ce(n, 3);
+                b.cf(k, 3);
+                b.cd(k, 0);
+                b.ce(k, 3);
+                k.b5(0, 2, 1);
+                k.b5(1, 2, 1);
+                k.cd(l, 0);
+                k.cd(m, 1);
                 k.bo(l);
                 k.bo(m);
                 b.bo(c);
@@ -33875,7 +33876,7 @@ let ColorEditorPanel = /*@__PURE__*/ (() => {
                 b.bo(k);
                 this.d.a8(b);
                 this.n = b;
-                this.n.bx = true;
+                this.n.by = true;
                 this.s = i;
                 this.u = g;
                 this.m = f;
@@ -35455,15 +35456,10 @@ class IgcMultiSliderTrackThumbRange {
             return null;
         }
         if (!r.externalObject) {
-            let e = new IgcMultiSliderThumb();
-            if (r.$type) {
+            let e = IgcMultiSliderThumbComponent._createFromInternal(r);
+            if (e) {
                 e._implementation = r;
             }
-            else {
-                if (e.i.setNativeElement) {
-                    e.i.setNativeElement(r);
-                }
-            }
             r.externalObject = e;
         }
         return r.externalObject;
@@ -35477,15 +35473,10 @@ class IgcMultiSliderTrackThumbRange {
             return null;
         }
         if (!r.externalObject) {
-            let e = new IgcMultiSliderThumb();
-            if (r.$type) {
+            let e = IgcMultiSliderThumbComponent._createFromInternal(r);
+            if (e) {
                 e._implementation = r;
             }
-            else {
-                if (e.i.setNativeElement) {
-                    e.i.setNativeElement(r);
-                }
-            }
             r.externalObject = e;
         }
         return r.externalObject;
@@ -35509,115 +35500,273 @@ class IgcMultiSliderTrackThumbRange {
     }
 }
 
-class IgcMultiSliderThumb {
-    createImplementation() {
-        return new MultiSliderThumb();
-    }
-    /**
-     * @hidden
-     */
-    get i() {
-        return this._implementation;
-    }
-    onImplementationCreated() {
-    }
-    constructor() {
-        this._propertyUpdated = null;
-        this._propertyUpdated_wrapped = null;
-        this._implementation = this.createImplementation();
-        this._implementation.externalObject = this;
-        this.onImplementationCreated();
-        if (this._initializeAdapters) {
-            this._initializeAdapters();
+let IgcMultiSliderThumbComponent = /*@__PURE__*/ (() => {
+    class IgcMultiSliderThumbComponent extends IgcHTMLElement {
+        createImplementation() {
+            return new MultiSliderThumb();
         }
-    }
-    _provideImplementation(i) {
-        this._implementation = i;
-        this._implementation.externalObject = this;
-        this.onImplementationCreated();
-        if (this._initializeAdapters) {
-            this._initializeAdapters();
+        /**
+         * @hidden
+         */
+        get i() {
+            return this._implementation;
+        } /**
+                                     * @hidden
+                                     */
+        static _createFromInternal(internal) {
+            if (!internal) {
+                return null;
+            }
+            if (!internal.$type) {
+                return null;
+            }
+            let name = internal.$type.name;
+            let externalName = "Igc" + name + "Component";
+            if (!TypeRegistrar.isRegistered(externalName)) {
+                return null;
+            }
+            return TypeRegistrar.create(externalName);
         }
-    }
-    get value() {
-        return this.i.s;
-    }
-    set value(v) {
-        this.i.s = +v;
-    }
-    get rangePosition() {
-        return this.i.g;
-    }
-    set rangePosition(v) {
-        this.i.g = ensureEnum(MultiSliderThumbRangePosition_$type, v);
-    }
-    get range() {
-        const r = this.i.i;
-        if (r == null) {
-            return null;
+        onImplementationCreated() {
         }
-        if (!r.externalObject) {
-            let e = new IgcMultiSliderTrackThumbRange();
-            if (r.$type) {
-                e._implementation = r;
+        constructor() {
+            super();
+            this._settingAttributes = false;
+            this._attached = false;
+            this._queuedSetAttributes = [];
+            this._updatingFromAttribute = false;
+            this.__p = null;
+            this._hasUserValues = new Set();
+            this._stylingContainer = null;
+            this._stylingParent = null;
+            this._inStyling = false;
+            this._propertyUpdated = null;
+            this._propertyUpdated_wrapped = null;
+            if (this._styling) {
+                NamePatcher.ensureStylablePatched(Object.getPrototypeOf(this));
+            }
+            this._implementation = this.createImplementation();
+            this._implementation.externalObject = this;
+            this.onImplementationCreated();
+            if (this._initializeAdapters) {
+                this._initializeAdapters();
+            }
+        }
+        _enqueueSetAttribute(attrName, attrValue) {
+            this._queuedSetAttributes.push({ attrName: attrName, attrValue: attrValue });
+        }
+        _flushQueuedAttributes() {
+            this._settingAttributes = true;
+            for (let i = 0; i < this._queuedSetAttributes.length; i++) {
+                this.setAttribute(this._queuedSetAttributes[i].attrName, this._queuedSetAttributes[i].attrValue);
+            }
+            this._settingAttributes = false;
+            this._queuedSetAttributes.length = 0;
+        }
+        _a(attrName, attrValue) {
+            if (this._updatingFromAttribute) {
+                return;
+            }
+            if (attrValue) {
+                attrValue = attrValue.toString();
+            }
+            this._settingAttributes = true;
+            attrName = toSpinal(attrName);
+            if (this._attached) {
+                this.setAttribute(attrName, attrValue);
             }
             else {
-                if (e.i.setNativeElement) {
-                    e.i.setNativeElement(r);
+                this._enqueueSetAttribute(attrName, attrValue);
+            }
+            this._settingAttributes = false;
+        }
+        connectedCallback() {
+            if (super["connectedCallback"]) {
+                super["connectedCallback"]();
+            }
+            if (this.i.connectedCallback) {
+                this.i.connectedCallback();
+            }
+            if (!this._attached) {
+                this._attached = true;
+                this._flushQueuedAttributes();
+            }
+        }
+        disconnectedCallback() {
+            if (super["disconnectedCallback"]) {
+                super["disconnectedCallback"]();
+            }
+            if (this.i.disconnectedCallback) {
+                this.i.disconnectedCallback();
+            }
+            if (this._attached) {
+                this._attached = false;
+            }
+        }
+        static get observedAttributes() {
+            if (IgcMultiSliderThumbComponent._observedAttributesIgcMultiSliderThumbComponent == null) {
+                let names = getAllPropertyNames(IgcMultiSliderThumbComponent);
+                for (let i = 0; i < names.length; i++) {
+                    names[i] = toSpinal(names[i]);
                 }
+                IgcMultiSliderThumbComponent._observedAttributesIgcMultiSliderThumbComponent = names;
             }
-            r.externalObject = e;
+            return IgcMultiSliderThumbComponent._observedAttributesIgcMultiSliderThumbComponent;
         }
-        return r.externalObject;
-    }
-    set range(v) {
-        v == null ? this.i.i = null : this.i.i = v.i;
-    }
-    findByName(name) {
-        if (this.findEphemera) {
-            if (name && name.indexOf("@@e:") == 0) {
-                return this.findEphemera(name);
+        attributeChangedCallback(name, oldValue, newValue) {
+            if (this._settingAttributes) {
+                return;
             }
+            let setName = fromSpinal(name);
+            this._updatingFromAttribute = true;
+            this[setName] = newValue;
+            this._updatingFromAttribute = false;
         }
-        if (this.range && this.range.name && this.range.name == name) {
-            return this.range;
+        static register() {
+            if (!IgcMultiSliderThumbComponent._isElementRegistered) {
+                IgcMultiSliderThumbComponent._isElementRegistered = true;
+                RegisterElementHelper.registerElement(IgcMultiSliderThumbComponent.htmlTagName, IgcMultiSliderThumbComponent);
+            }
         }
-        return null;
-    }
-    push(amount) {
-        let iv = this.i.r(amount);
-        return (iv);
-    }
-    get propertyUpdated() {
-        return this._propertyUpdated;
-    }
-    set propertyUpdated(ev) {
-        if (this._propertyUpdated_wrapped !== null) {
-            this.i.propertyUpdated = delegateRemove(this.i.propertyUpdated, this._propertyUpdated_wrapped);
-            this._propertyUpdated_wrapped = null;
-            this._propertyUpdated = null;
+        get value() {
+            return this.i.s;
+        }
+        set value(v) {
+            this.i.s = +v;
+            this._a("value", this.i.s);
+        }
+        get rangePosition() {
+            return this.i.g;
+        }
+        set rangePosition(v) {
+            this.i.g = ensureEnum(MultiSliderThumbRangePosition_$type, v);
+            this._a("rangePosition", enumToString(MultiSliderThumbRangePosition_$type, this.i.g));
         }
-        this._propertyUpdated = ev;
-        this._propertyUpdated_wrapped = (o, e) => {
-            let outerArgs = new IgcPropertyUpdatedEventArgs();
-            outerArgs._provideImplementation(e);
-            if (this.beforePropertyUpdated) {
-                this.beforePropertyUpdated(this, outerArgs);
+        get range() {
+            const r = this.i.i;
+            if (r == null) {
+                return null;
             }
-            if (this._propertyUpdated) {
-                this._propertyUpdated(this, outerArgs);
+            if (!r.externalObject) {
+                let e = new IgcMultiSliderTrackThumbRange();
+                if (r.$type) {
+                    e._implementation = r;
+                }
+                else {
+                    if (e.i.setNativeElement) {
+                        e.i.setNativeElement(r);
+                    }
+                }
+                r.externalObject = e;
             }
-        };
-        this.i.propertyUpdated = delegateCombine(this.i.propertyUpdated, this._propertyUpdated_wrapped);
-        ;
+            return r.externalObject;
+        }
+        set range(v) {
+            v == null ? this.i.i = null : this.i.i = v.i;
+        }
+        findByName(name) {
+            if (this.findEphemera) {
+                if (name && name.indexOf("@@e:") == 0) {
+                    return this.findEphemera(name);
+                }
+            }
+            if (this.range && this.range.name && this.range.name == name) {
+                return this.range;
+            }
+            return null;
+        }
+        get hasUserValues() {
+            return this._hasUserValues;
+        }
+        __m(propertyName) {
+            if (!this._inStyling) {
+                this._hasUserValues.add(propertyName);
+            }
+        }
+        _styling(container, component, parent) {
+            if (this._inStyling) {
+                return;
+            }
+            this._inStyling = true;
+            this._stylingContainer = container;
+            this._stylingParent = component;
+            let genericPrefix = "";
+            let typeName = this.i.$type.name;
+            if (typeName.indexOf("Xam") === 0) {
+                typeName = typeName.substring(3);
+            }
+            genericPrefix = toSpinal("MultiSliderThumbComponent");
+            let additionalPrefixes = [];
+            let prefix = toSpinal(typeName);
+            additionalPrefixes.push(prefix + "-");
+            let b = this.i.$type.baseType;
+            while (b && b.name != "Object" &&
+                b.name != "Base" &&
+                b.name != "Control" &&
+                b.Name != "DependencyObject" &&
+                b.Name != "FrameworkElement") {
+                typeName = b.name;
+                if (typeName.indexOf("Xam") === 0) {
+                    typeName = typeName.substring(3);
+                }
+                let basePrefix = toSpinal(typeName);
+                additionalPrefixes.push(basePrefix + "-");
+                b = b.baseType;
+            }
+            if (parent) {
+                let parentTypeName = parent.i.$type.name;
+                if (parentTypeName.indexOf("Xam") === 0) {
+                    parentTypeName = parentTypeName.substring(3);
+                }
+                let parentPrefix = toSpinal(parentTypeName);
+                additionalPrefixes.push(parentPrefix + "-" + genericPrefix + "-");
+                additionalPrefixes.push(parentPrefix + "-" + prefix + "-");
+            }
+            initializePropertiesFromCss(container, this, genericPrefix + "-", this.hasUserValues, false, additionalPrefixes);
+            if (this._otherStyling) {
+                this._otherStyling(container, component, parent);
+            }
+            this._inStyling = false;
+        }
+        push(amount) {
+            let iv = this.i.r(amount);
+            return (iv);
+        }
+        get propertyUpdated() {
+            return this._propertyUpdated;
+        }
+        set propertyUpdated(ev) {
+            if (this._propertyUpdated_wrapped !== null) {
+                this.i.propertyUpdated = delegateRemove(this.i.propertyUpdated, this._propertyUpdated_wrapped);
+                this._propertyUpdated_wrapped = null;
+                this._propertyUpdated = null;
+            }
+            this._propertyUpdated = ev;
+            this._propertyUpdated_wrapped = (o, e) => {
+                let outerArgs = new IgcPropertyUpdatedEventArgs();
+                outerArgs._provideImplementation(e);
+                if (this.beforePropertyUpdated) {
+                    this.beforePropertyUpdated(this, outerArgs);
+                }
+                if (this._propertyUpdated) {
+                    this._propertyUpdated(this, outerArgs);
+                }
+            };
+            this.i.propertyUpdated = delegateCombine(this.i.propertyUpdated, this._propertyUpdated_wrapped);
+            ;
+        }
     }
-}
+    IgcMultiSliderThumbComponent._observedAttributesIgcMultiSliderThumbComponent = null;
+    IgcMultiSliderThumbComponent.htmlTagName = "igc-multi-slider-thumb";
+    IgcMultiSliderThumbComponent._isElementRegistered = false;
+    return IgcMultiSliderThumbComponent;
+})();
 
 class IgcMultiSliderThumbCollection extends IgCollection {
     constructor(list) {
         super();
-        if (!IgcMultiSliderThumb.$type) {
-            IgcMultiSliderThumb.$type = markType(IgcMultiSliderThumb, "IgcMultiSliderThumb");
+        if (!IgcMultiSliderThumbComponent.$type) {
+            IgcMultiSliderThumbComponent.$type = markType(IgcMultiSliderThumbComponent, "IgcMultiSliderThumbComponent");
         }
         if (list) {
             for (let i = 0; i < list.length; i++) {
@@ -35626,10 +35775,10 @@ class IgcMultiSliderThumbCollection extends IgCollection {
         }
     }
     _createInnerColl() {
-        if (!IgcMultiSliderThumb.$type) {
-            IgcMultiSliderThumb.$type = markType(IgcMultiSliderThumb, "IgcMultiSliderThumb");
+        if (!IgcMultiSliderThumbComponent.$type) {
+            IgcMultiSliderThumbComponent.$type = markType(IgcMultiSliderThumbComponent, "IgcMultiSliderThumbComponent");
         }
-        let coll = new SyncableObservableCollection$2(IgcMultiSliderThumb.$type, MultiSliderThumb.$type, 0);
+        let coll = new SyncableObservableCollection$2(IgcMultiSliderThumbComponent.$type, MultiSliderThumb.$type, 0);
         coll.compare = (ext, int) => {
             let comp = ext;
             if (comp._implementation) {
@@ -35646,7 +35795,7 @@ class IgcMultiSliderThumbCollection extends IgCollection {
         coll.createFrom = (int) => {
             let ext = int.externalObject;
             if (!ext) {
-                ext = new IgcMultiSliderThumb();
+                ext = new IgcMultiSliderThumbComponent();
                 if (ext) {
                     if (!int.$type && ext._implementation.setNativeElement) {
                         ext._implementation.setNativeElement(int);
@@ -35744,15 +35893,10 @@ class IgcMultiSliderThumbValueChangingEventArgs {
             return null;
         }
         if (!r.externalObject) {
-            let e = new IgcMultiSliderThumb();
-            if (r.$type) {
+            let e = IgcMultiSliderThumbComponent._createFromInternal(r);
+            if (e) {
                 e._implementation = r;
             }
-            else {
-                if (e.i.setNativeElement) {
-                    e.i.setNativeElement(r);
-                }
-            }
             r.externalObject = e;
         }
         return r.externalObject;
@@ -38710,12 +38854,12 @@ let XIconButtonBridge = /*@__PURE__*/ (() => {
             switch (b) {
                 case 15:
                 case 16:
-                case 44:
                 case 45:
                 case 46:
                 case 47:
                 case 48:
-                case 49: return this.al.t;
+                case 49:
+                case 50: return this.al.t;
             }
             return super.getTargetForBuildInProperty(a, b);
         }
@@ -38731,12 +38875,12 @@ let XIconButtonBridge = /*@__PURE__*/ (() => {
             switch (b) {
                 case 16:
                 case 15:
-                case 44:
                 case 45:
                 case 46:
                 case 47:
                 case 48:
-                case 49: return this.al.getValue(a, b);
+                case 49:
+                case 50: return this.al.getValue(a, b);
                 case 18: return enumGetBox(BaseControlTheme_$type, a.o);
             }
             return super.getValue(a, b);
@@ -38746,12 +38890,12 @@ let XIconButtonBridge = /*@__PURE__*/ (() => {
             switch (b) {
                 case 16:
                 case 15:
-                case 44:
                 case 45:
                 case 46:
                 case 47:
                 case 48:
                 case 49:
+                case 50:
                     this.al.setValue(a, b, c);
                     break;
                 case 18:
@@ -39286,6 +39430,20 @@ let DefaultMultiTrackShadeVisual = /*@__PURE__*/ (() => {
     return DefaultMultiTrackShadeVisual;
 })();
 
+/*
+THIS INFRAGISTICS ULTIMATE SOFTWARE LICENSE  AGREEMENT ("AGREEMENT") LOCATED HERE:
+https://www.infragistics.com/legal/license/igultimate-la
+https://www.infragistics.com/legal/license/igultimate-eula
+GOVERNS THE LICENSING, INSTALLATION AND USE OF INFRAGISTICS SOFTWARE. BY DOWNLOADING AND/OR INSTALLING AND USING INFRAGISTICS SOFTWARE: you are indicating that you have read and understand this Agreement, and agree to be legally bound by it on behalf of the yourself and your company.
+*/
+class IgcMultiSliderThumbModule {
+    static register() {
+        IgcMultiSliderThumbComponent.register();
+        TypeRegistrar.registerCons("IgcMultiSliderThumbComponent", IgcMultiSliderThumbComponent);
+        TypeRegistrar.register("MultiSliderThumb", MultiSliderThumb.$type);
+    }
+}
+
 /*
 THIS INFRAGISTICS ULTIMATE SOFTWARE LICENSE  AGREEMENT ("AGREEMENT") LOCATED HERE:
 https://www.infragistics.com/legal/license/igultimate-la
@@ -39411,4 +39569,4 @@ let TextBlockVisualModelExport = /*@__PURE__*/ (() => {
     return TextBlockVisualModelExport;
 })();
 
-export { ButtonClickEventArgs, ButtonDisplayStyle_$type, ButtonGroupDisplayStyle_$type, ButtonGroupOrientation, ButtonGroupOrientation_$type, ButtonGroupSelectionChangedEventArgs, ButtonGroupView, ButtonGroupVisualModelExport, ButtonView, ButtonVisualModelExport, CalendarView, CalendarVisualModelExport, CheckboxChangeEventArgs, CheckboxLabelPosition_$type, CheckboxListVisualModelExport, CheckboxView, CheckboxVisualModelExport, ColorEditor, ColorEditorBridge, ColorEditorGotFocusEventArgs, ColorEditorLostFocusEventArgs, ColorEditorPanel, ColorEditorPanelClosedEventArgs, ColorEditorPanelSelectedValueChangedEventArgs, ColorEditorPanelView, ColorEditorView, ColorEditorVisualModelExport, DateFormats, DateFormats_$type, DatePickerView, DatePickerVisualModelExport, DateTimeValueFormatter, DayInfo, DayOfWeek, DayOfWeek_$type, DefaultMultiSliderTrackBarVisual, DefaultMultiSliderTrackRangeVisual, DefaultMultiSliderTrackThumbCalloutVisual, DefaultMultiSliderTrackThumbVisual, DefaultMultiTrackShadeVisual, ElevationHelper, FirstWeek, FirstWeek_$type, GotFocusEventArgs, IMultiSliderTrackBarVisual_$type, IMultiSliderTrackRangeVisual_$type, IMultiSliderTrackShadeVisual_$type, IMultiSliderTrackThumbCalloutVisual_$type, IMultiSliderTrackThumbVisual_$type, ISliderTrackOwner_$type, IconClickedEventArgs, IconView, IconViewType_$type, IconVisualModelExport, IgcButtonClickEventArgs, IgcButtonGroupSelectionChangedEventArgs, IgcCheckboxChangeEventArgs, IgcColorEditorComponent, IgcColorEditorGotFocusEventArgs, IgcColorEditorLostFocusEventArgs, IgcColorEditorModule, IgcColorEditorPanelClosedEventArgs, IgcColorEditorPanelComponent, IgcColorEditorPanelModule, IgcColorEditorPanelSelectedValueChangedEventArgs, IgcGotFocusEventArgs, IgcInputChangeEventArgs, IgcLostFocusEventArgs, IgcMultiSliderComponent, IgcMultiSliderModule, IgcMultiSliderResolvingToolTipValueEventArgs, IgcMultiSliderThumb, IgcMultiSliderThumbCollection, IgcMultiSliderThumbValueChangingEventArgs, IgcMultiSliderTrackThumbRange, IgcMultiSliderYValueChangingEventArgs, IgcSelectedValueChangedEventArgs, IgcXButtonComponent, IgcXButtonGroupButtonCollection, IgcXButtonGroupComponent, IgcXButtonGroupModule, IgcXButtonModule, IgcXCalendarComponent, IgcXCalendarLocaleEnModule, IgcXCalendarModule, IgcXCheckboxComponent, IgcXCheckboxModule, IgcXDatePickerComponent, IgcXDatePickerModule, IgcXIconComponent, IgcXIconModule, IgcXInputComponent, IgcXInputGroupComponent, IgcXInputGroupInputCollection, IgcXInputGroupItemComponent, IgcXInputGroupModule, IgcXInputModule, IgcXLabelComponent, IgcXLabelModule, IgcXPrefixComponent, IgcXPrefixModule, IgcXRippleComponent, IgcXRippleModule, IgcXSuffixComponent, InputChangeEventArgs, InputGroupDisplayType, InputGroupDisplayType_$type, InputGroupView, InputGroupVisualModelExport, InputShiftType, InputShiftType_$type, InputView, InputVisualModelExport, KEYCODES_$type, LabelShiftType, LabelShiftType_$type, LabelView, LabelVisualModelExport, LostFocusEventArgs, MaskOptions, MaskParsingService, MultiSlider, MultiSliderBridge, MultiSliderCursor_$type, MultiSliderHitInfo, MultiSliderOrientation, MultiSliderOrientation_$type, MultiSliderResolvingToolTipValueEventArgs, MultiSliderThumb, MultiSliderThumbCollection, MultiSliderThumbRangePosition, MultiSliderThumbRangePosition_$type, MultiSliderThumbValueChangingEventArgs, MultiSliderTrackShadeOrientation_$type, MultiSliderTrackThumbRange, MultiSliderView, MultiSliderVisualArea_$type, MultiSliderYValueChangingEventArgs, NativeUIXInputsFactory, PrefixShiftType, PrefixShiftType_$type, PrefixView, PrefixVisualModelExport, Replaced, RippleView, RippleVisualModelExport, SelectedValueChangedEventArgs, SuffixShiftType, SuffixShiftType_$type, SuffixView, SuffixVisualModelExport, TextBlockVisualModelExport, TextElementsVisualModelExport, Theme, ThemeResolver, XButton, XButtonBridge, XButtonGroup, XButtonGroupBridge, XButtonGroupButtonCollection, XCalendar, XCalendarLocaleEn, XCheckbox, XCheckboxBridge, XComponentBridge, XDatePicker, XIcon, XIconBridge, XIconButtonBridge, XInput, XInputBridge, XInputGroup, XInputGroupInputCollection, XInputGroupItem, XLabel, XPopupBridge, XPrefix, XRipple, XSuffix };
+export { ButtonClickEventArgs, ButtonDisplayStyle_$type, ButtonGroupDisplayStyle_$type, ButtonGroupOrientation, ButtonGroupOrientation_$type, ButtonGroupSelectionChangedEventArgs, ButtonGroupView, ButtonGroupVisualModelExport, ButtonView, ButtonVisualModelExport, CalendarView, CalendarVisualModelExport, CheckboxChangeEventArgs, CheckboxLabelPosition_$type, CheckboxListVisualModelExport, CheckboxView, CheckboxVisualModelExport, ColorEditor, ColorEditorBridge, ColorEditorGotFocusEventArgs, ColorEditorLostFocusEventArgs, ColorEditorPanel, ColorEditorPanelClosedEventArgs, ColorEditorPanelSelectedValueChangedEventArgs, ColorEditorPanelView, ColorEditorView, ColorEditorVisualModelExport, DateFormats, DateFormats_$type, DatePickerView, DatePickerVisualModelExport, DateTimeValueFormatter, DayInfo, DayOfWeek, DayOfWeek_$type, DefaultMultiSliderTrackBarVisual, DefaultMultiSliderTrackRangeVisual, DefaultMultiSliderTrackThumbCalloutVisual, DefaultMultiSliderTrackThumbVisual, DefaultMultiTrackShadeVisual, ElevationHelper, FirstWeek, FirstWeek_$type, GotFocusEventArgs, IMultiSliderTrackBarVisual_$type, IMultiSliderTrackRangeVisual_$type, IMultiSliderTrackShadeVisual_$type, IMultiSliderTrackThumbCalloutVisual_$type, IMultiSliderTrackThumbVisual_$type, ISliderTrackOwner_$type, IconClickedEventArgs, IconView, IconViewType_$type, IconVisualModelExport, IgcButtonClickEventArgs, IgcButtonGroupSelectionChangedEventArgs, IgcCheckboxChangeEventArgs, IgcColorEditorComponent, IgcColorEditorGotFocusEventArgs, IgcColorEditorLostFocusEventArgs, IgcColorEditorModule, IgcColorEditorPanelClosedEventArgs, IgcColorEditorPanelComponent, IgcColorEditorPanelModule, IgcColorEditorPanelSelectedValueChangedEventArgs, IgcGotFocusEventArgs, IgcInputChangeEventArgs, IgcLostFocusEventArgs, IgcMultiSliderComponent, IgcMultiSliderModule, IgcMultiSliderResolvingToolTipValueEventArgs, IgcMultiSliderThumbCollection, IgcMultiSliderThumbComponent, IgcMultiSliderThumbModule, IgcMultiSliderThumbValueChangingEventArgs, IgcMultiSliderTrackThumbRange, IgcMultiSliderYValueChangingEventArgs, IgcSelectedValueChangedEventArgs, IgcXButtonComponent, IgcXButtonGroupButtonCollection, IgcXButtonGroupComponent, IgcXButtonGroupModule, IgcXButtonModule, IgcXCalendarComponent, IgcXCalendarLocaleEnModule, IgcXCalendarModule, IgcXCheckboxComponent, IgcXCheckboxModule, IgcXDatePickerComponent, IgcXDatePickerModule, IgcXIconComponent, IgcXIconModule, IgcXInputComponent, IgcXInputGroupComponent, IgcXInputGroupInputCollection, IgcXInputGroupItemComponent, IgcXInputGroupModule, IgcXInputModule, IgcXLabelComponent, IgcXLabelModule, IgcXPrefixComponent, IgcXPrefixModule, IgcXRippleComponent, IgcXRippleModule, IgcXSuffixComponent, InputChangeEventArgs, InputGroupDisplayType, InputGroupDisplayType_$type, InputGroupView, InputGroupVisualModelExport, InputShiftType, InputShiftType_$type, InputView, InputVisualModelExport, KEYCODES_$type, LabelShiftType, LabelShiftType_$type, LabelView, LabelVisualModelExport, LostFocusEventArgs, MaskOptions, MaskParsingService, MultiSlider, MultiSliderBridge, MultiSliderCursor_$type, MultiSliderHitInfo, MultiSliderOrientation, MultiSliderOrientation_$type, MultiSliderResolvingToolTipValueEventArgs, MultiSliderThumb, MultiSliderThumbCollection, MultiSliderThumbRangePosition, MultiSliderThumbRangePosition_$type, MultiSliderThumbValueChangingEventArgs, MultiSliderTrackShadeOrientation_$type, MultiSliderTrackThumbRange, MultiSliderView, MultiSliderVisualArea_$type, MultiSliderYValueChangingEventArgs, NativeUIXInputsFactory, PrefixShiftType, PrefixShiftType_$type, PrefixView, PrefixVisualModelExport, Replaced, RippleView, RippleVisualModelExport, SelectedValueChangedEventArgs, SuffixShiftType, SuffixShiftType_$type, SuffixView, SuffixVisualModelExport, TextBlockVisualModelExport, TextElementsVisualModelExport, Theme, ThemeResolver, XButton, XButtonBridge, XButtonGroup, XButtonGroupBridge, XButtonGroupButtonCollection, XCalendar, XCalendarLocaleEn, XCheckbox, XCheckboxBridge, XComponentBridge, XDatePicker, XIcon, XIconBridge, XIconButtonBridge, XInput, XInputBridge, XInputGroup, XInputGroupInputCollection, XInputGroupItem, XLabel, XPopupBridge, XPrefix, XRipple, XSuffix };