igniteui-angular-inputs 20.0.1 → 20.0.2-beta.1

package/fesm2015/igniteui-angular-inputs.js

@@ -4420,11 +4420,12 @@ let IconView = /*@__PURE__*/ (() => {
             this.u = null;
             this.e = null;
             this.f = null;
-            this.ab = null;
+            this.ac = null;
             this.n = new Dictionary$2(Brush.$, String_$type, 0);
             this.j = true;
             this.y = null;
             this.x = null;
+            this.z = null;
             this.w = null;
             this.p = new List$1(DomWrapper_$type, 0);
             this.q = new List$1(Tuple$2.$.specialize(SVGNode.$, Base.$), 0);
@@ -4435,15 +4436,15 @@ let IconView = /*@__PURE__*/ (() => {
             this.e = new FastIterationDictionary$2(String_$type, List$1.$.specialize(Tuple$2.$.specialize(SVGNode.$, Base.$)), 0);
             this.f = new FastIterationDictionary$2(String_$type, List$1.$.specialize(Tuple$2.$.specialize(SVGNode.$, Base.$)), 0);
         }
-        am() {
+        an() {
         }
         l() {
             return true;
         }
-        get z() {
+        get aa() {
             return this.y;
         }
-        get aa() {
+        get ab() {
             return null;
         }
         get c() {
@@ -4452,7 +4453,7 @@ let IconView = /*@__PURE__*/ (() => {
         get m() {
             return true;
         }
-        ak(a) {
+        al(a) {
             if (a == null) {
                 for (let b of fromEnum(this.o)) {
                     b();
@@ -4472,7 +4473,7 @@ let IconView = /*@__PURE__*/ (() => {
             this.v.rootWrapper.setStyleProperty("flex-wrap", "no-wrap");
             this.v.rootWrapper.setStyleProperty("align-items", "center");
             this.v.rootWrapper.setStyleProperty("justify-content", "center");
-            this.au();
+            this.av();
             let c = this.v.createElementNS("svg", "http://www.w3.org/2000/svg");
             c.setStyleProperty("position", "absolute");
             c.setStyleProperty("top", "0");
@@ -4485,14 +4486,15 @@ let IconView = /*@__PURE__*/ (() => {
             d.setStyleProperty("width", "100%");
             d.setStyleProperty("object-fit", "contain");
             this.x = d;
-            this.a0();
+            this.a1();
             this.w = a.createElementNS("defs", "http://www.w3.org/2000/svg");
             this.y.append(this.w);
             this.v.append(this.y);
-            this.o.add(c.listen("click", runOn(this, this.aj)));
-            this.d.cm();
+            this.o.add(c.listen("click", runOn(this, this.ak)));
+            this.d.c6();
         }
-        ax(a) {
+        ay(a) {
+            this.z = null;
             this.n.clear();
             this.v.rootWrapper.removeChildren();
             this.v.rootWrapper.append(this.y);
@@ -4507,7 +4509,8 @@ let IconView = /*@__PURE__*/ (() => {
                 this.p.add(b);
             }
         }
-        ay(a) {
+        az(a) {
+            this.z = null;
             this.n.clear();
             this.v.rootWrapper.removeChildren();
             this.v.rootWrapper.append(this.y);
@@ -4524,46 +4527,69 @@ let IconView = /*@__PURE__*/ (() => {
                 }
             }
         }
-        aw(a) {
+        ax(a) {
+            this.z = null;
             this.v.rootWrapper.removeChildren();
             if (a != null) {
                 let b = this.v.rootWrapper.getNativeElement();
                 b.innerHTML = a;
+                this.z = this.v.rootWrapper.getChildAt(0);
+                let c = this.z.getAttribute("viewbox");
+                if (c != null) {
+                    let d = c.split(' ');
+                    if (d.length == 1) {
+                        d = c.split(',');
+                    }
+                    if (d.length == 4) {
+                        let e = parseFloat(d[0].trim());
+                        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);
+                    }
+                }
+                else {
+                    this.d.dd(NaN, NaN, NaN, NaN);
+                }
             }
         }
-        as(a) {
-            if (this.ab != a) {
-                this.ab = a;
+        at(a) {
+            this.z = null;
+            if (this.ac != a) {
+                this.ac = a;
                 this.v.rootWrapper.removeChildren();
                 this.v.rootWrapper.append(this.x);
                 this.x.setAttribute("src", a);
             }
         }
-        av(a) {
+        aw(a) {
             if (typeof a === 'string') {
-                this.as(typeCast(String_$type, a));
+                this.at(typeCast(String_$type, a));
             }
         }
-        ah() {
+        ai() {
             if (this.d.k != 3 && this.d.k != 4) {
-                this.ab = null;
+                this.ac = null;
             }
         }
         k() {
             return this.d.svgPath != null || this.d.svg != null || this.d.b != null;
         }
-        au() {
-            this.v.rootWrapper.setStyleProperty("width", isNaN_(this.d.at) ? "1.5rem" : this.d.at + "px");
-            this.v.rootWrapper.setStyleProperty("height", isNaN_(this.d.al) ? "1.5rem" : this.d.al + "px");
+        av() {
+            this.v.rootWrapper.setStyleProperty("width", isNaN_(this.d.a9) ? "1.5rem" : this.d.a9 + "px");
+            this.v.rootWrapper.setStyleProperty("height", isNaN_(this.d.a1) ? "1.5rem" : this.d.a1 + "px");
         }
-        a0() {
-            let a = isNaN_(this.d.aq) ? 0 : this.d.aq;
-            let b = isNaN_(this.d.ar) ? 0 : this.d.ar;
-            let c = isNaN_(this.d.as) ? 24 : this.d.as;
-            let d = isNaN_(this.d.ap) ? 24 : this.d.ap;
+        a1() {
+            let a = this.d.as;
+            let b = this.d.at;
+            let c = this.d.au;
+            let d = this.d.ar;
             this.y.setAttribute("viewBox", a + " " + b + " " + c + " " + d);
+            if (this.z != null) {
+                this.z.setAttribute("viewBox", a + " " + b + " " + c + " " + d);
+            }
         }
-        ao(a, b) {
+        ap(a, b) {
             let c = a.color;
             if (!this.n.containsKey(a)) {
                 if (a.isGradient) {
@@ -4591,7 +4617,7 @@ let IconView = /*@__PURE__*/ (() => {
                 }
             }
         }
-        ap(a, b) {
+        aq(a, b) {
             let c = a;
             if (this.n.containsKey(b)) {
                 c.setAttribute("fill", "url(#" + this.n.item(b) + ")");
@@ -4602,7 +4628,7 @@ let IconView = /*@__PURE__*/ (() => {
                 NativeUI.r(a, b);
             }
         }
-        aq(a, b) {
+        ar(a, b) {
             let c = a;
             if (this.n.containsKey(b)) {
                 c.setAttribute("stroke", "url('#" + this.n.item(b) + "')");
@@ -4611,31 +4637,31 @@ let IconView = /*@__PURE__*/ (() => {
                 NativeUI.aa(a, b);
             }
         }
-        ac(a) {
+        ad(a) {
         }
-        an() {
+        ao() {
             if (this.l()) {
             }
         }
-        ad(a) {
-            this.d.cj();
-        }
         ae(a) {
-            this.d.ck();
+            this.d.c3();
         }
-        ai() {
+        af(a) {
+            this.d.c4();
+        }
+        aj() {
             this.j = true;
-            this.o.add(this.v.rootWrapper.listen("mouseenter", runOn(this, this.ad)));
-            this.o.add(this.v.rootWrapper.listen("mouseleave", runOn(this, this.ae)));
+            this.o.add(this.v.rootWrapper.listen("mouseenter", runOn(this, this.ae)));
+            this.o.add(this.v.rootWrapper.listen("mouseleave", runOn(this, this.af)));
         }
-        al() {
+        am() {
             this.j = false;
             for (let a of fromEnum(this.o)) {
                 a();
             }
             this.o.clear();
         }
-        az(a) {
+        a0(a) {
             if (a != null) {
                 this.v.rootWrapper.setStyleProperty("font", a.fontString);
             }
@@ -4649,7 +4675,7 @@ let IconView = /*@__PURE__*/ (() => {
             c[1] = b;
             return c;
         }
-        aj(a) {
+        ak(a) {
             if (this.d.x()) {
                 a.stopPropagation();
                 a.preventDefault();
@@ -4660,7 +4686,7 @@ let IconView = /*@__PURE__*/ (() => {
             let b = this.v.rootWrapper.getNativeElement();
             return a.toArray();
         }
-        ag(a, b) {
+        ah(a, b) {
             for (let c = 0; c < b.e.count; c++) {
                 let d = b.e._inner[c];
                 let e = this.h(d);
@@ -4668,7 +4694,7 @@ let IconView = /*@__PURE__*/ (() => {
                     a.add(e);
                 }
                 else {
-                    this.ag(a, d);
+                    this.ah(a, d);
                 }
             }
         }
@@ -4681,7 +4707,7 @@ let IconView = /*@__PURE__*/ (() => {
                         $ret.an = a.w;
                         return $ret;
                     })());
-                    this.at(c, a);
+                    this.au(c, a);
                     b = new PathVisualData(1, "path1", c);
                     break;
                 case 3:
@@ -4691,7 +4717,7 @@ let IconView = /*@__PURE__*/ (() => {
                     e.ao = d.x;
                     e.ap = d.y;
                     e.aq = d.z;
-                    this.at(e, a);
+                    this.au(e, a);
                     b = new LineVisualData(1, "line1", e);
                     break;
                 case 4:
@@ -4701,7 +4727,7 @@ let IconView = /*@__PURE__*/ (() => {
                     g.height = f.w;
                     g.ap = f.x;
                     g.aq = f.y;
-                    this.at(g, a);
+                    this.au(g, a);
                     b = new RectangleVisualData(1, "rect1", g);
                     break;
                 case 5:
@@ -4710,13 +4736,13 @@ let IconView = /*@__PURE__*/ (() => {
                     let i = new Ellipse();
                     i.width = h.y * 2;
                     i.height = h.z * 2;
-                    this.at(i, a);
+                    this.au(i, a);
                     b = new EllipseVisualData(1, "ellipse1", i);
                     break;
             }
             return b;
         }
-        at(a, b) {
+        au(a, b) {
             let c = b;
             a.ad = b.t;
             a.j = c.h;
@@ -4749,14 +4775,14 @@ let IconView = /*@__PURE__*/ (() => {
             }
             return null;
         }
-        ar(a, b) {
+        as(a, b) {
             this.v.rootWrapper.removeChildren();
             if (a == null) {
                 return;
             }
             LegendItemHelper.c(this.v, 0, 0, 24, 24, b, null, a, null);
         }
-        af() {
+        ag() {
             this.v.rootWrapper.removeChildren();
         }
     }
@@ -4773,51 +4799,59 @@ let XIcon = /*@__PURE__*/ (() => {
             this._view = null;
             this.k = 0;
             this.l = 0;
-            this.cv = XIcon.db;
-            this.cw = XIcon.df;
-            this.cx = XIcon.dg;
-            this.y = XIcon.ak;
-            this.cy = XIcon.db;
-            this.c6 = XIcon.df;
-            this.ac = XIcon.ak;
-            this.c7 = XIcon.dg;
-            this.cz = XIcon.dc;
-            this.c0 = XIcon.dd;
-            this.aa = XIcon.aj;
-            this.c1 = null;
+            this.dg = XIcon.dx;
+            this.dh = XIcon.d1;
+            this.di = XIcon.d2;
+            this.y = XIcon.aw;
+            this.dj = XIcon.dx;
+            this.ds = XIcon.d1;
+            this.ak = XIcon.aw;
+            this.dt = XIcon.d2;
+            this.dk = XIcon.dy;
+            this.dl = XIcon.dz;
+            this.ae = XIcon.av;
+            this.dm = null;
             this.c = null;
             this.d = null;
-            this.c2 = null;
-            this.c3 = null;
-            this.c4 = null;
-            this.c5 = null;
-            this.ay = null;
-            this.a3 = null;
-            this.a6 = null;
-            this.a5 = null;
+            this.dn = null;
+            this.dp = null;
+            this.dq = null;
+            this.dr = null;
+            this.be = null;
+            this.bj = null;
+            this.bm = null;
+            this.bl = null;
             this.a = null;
-            this.ct = null;
-            this.ax = null;
+            this.de = null;
+            this.bd = null;
             this.n = null;
-            this.a4 = "ig-icon-" + XIcon.aw++;
-            this.au = 0;
+            this.bk = "ig-icon-" + XIcon.bc++;
+            this.ba = 0;
             this.p = false;
-            this.a2 = null;
+            this.bi = null;
             this.r = false;
             this.q = false;
-            this.ab = 1;
-            this.ae = NaN;
-            this.af = NaN;
-            this.ag = NaN;
+            this.af = 1;
+            this.aa = 0;
+            this.am = NaN;
+            this.ab = 0;
+            this.an = NaN;
+            this.ac = 24;
+            this.ao = NaN;
+            this.z = 24;
+            this.al = NaN;
+            this.ap = NaN;
             this.ad = NaN;
-            this.ah = NaN;
-            this.z = NaN;
             this.clicked = null;
             this.propertyChanged = null;
+            this.ah = NaN;
+            this.ai = NaN;
+            this.aj = NaN;
+            this.ag = NaN;
             let a = new IconView();
             a.d = this;
             this.view = a;
-            this.view.am();
+            this.view.an();
         }
         get view() {
             return this._view;
@@ -4828,13 +4862,13 @@ let XIcon = /*@__PURE__*/ (() => {
         destroy() {
             this.provideContainer(null);
         }
-        cl(a, b, c) {
+        c5(a, b, c) {
             if (this.propertyChanged != null) {
                 this.propertyChanged(this, new PropertyChangedEventArgs(a));
             }
-            this.co(a, b, c);
+            this.c8(a, b, c);
         }
-        co(a, b, c) {
+        c8(a, b, c) {
             switch (a) {
                 case "Fill":
                 case "Stroke":
@@ -4843,139 +4877,151 @@ let XIcon = /*@__PURE__*/ (() => {
                 case "HoverStroke":
                 case "HoverStrokeThickness":
                 case "IsHover":
-                    this.cs();
+                    this.dc();
                     break;
                 case "FillColors":
                 case "StrokeColors":
                 case "ActualFill":
                 case "ActualStroke":
                 case "ActualStrokeWidth":
-                    this.cq();
+                    this.da();
                     break;
                 case "SVG":
-                    this.a6 = null;
+                    this.bm = null;
                     this.a = null;
-                    this.cq();
+                    this.da();
                     break;
                 case "SVGPath":
-                    this.a5 = null;
+                    this.bl = null;
                     this.a = null;
-                    this.cq();
+                    this.da();
                     break;
                 case "SVGPaths":
-                    this.a5 = null;
-                    this.a6 = null;
-                    this.cq();
+                    this.bl = null;
+                    this.bm = null;
+                    this.da();
                     break;
                 case "DataURL":
-                    this.a5 = null;
-                    this.a6 = null;
+                    this.bl = null;
+                    this.bm = null;
                     this.a = null;
-                    this.cq();
+                    this.da();
                     break;
                 case "Source":
-                    this.a5 = null;
-                    this.a6 = null;
+                    this.bl = null;
+                    this.bm = null;
                     this.a = null;
-                    this.cq();
+                    this.da();
                     break;
                 case "DataTemplate":
                 case "DataTemplateContext":
-                    this.a5 = null;
-                    this.a6 = null;
+                    this.bl = null;
+                    this.bm = null;
                     this.a = null;
-                    this.cq();
+                    this.da();
                     break;
                 case "Opacity":
-                    this.cr();
+                    this.db();
                     break;
                 case "ViewBoxLeft":
+                    this.as = !isNaN_(this.a6) ? this.a6 : !isNaN_(this.ah) ? this.ah : 0;
+                    break;
                 case "ViewBoxTop":
+                    this.at = !isNaN_(this.a7) ? this.a7 : !isNaN_(this.ai) ? this.ai : 0;
+                    break;
                 case "ViewBoxWidth":
+                    this.au = !isNaN_(this.a8) ? this.a8 : !isNaN_(this.aj) ? this.aj : 24;
+                    break;
                 case "ViewBoxHeight":
-                    this.view.a0();
+                    this.ar = !isNaN_(this.a5) ? this.a5 : !isNaN_(this.ag) ? this.ag : 24;
+                    break;
+                case "ActualViewBoxLeft":
+                case "ActualViewBoxTop":
+                case "ActualViewBoxWidth":
+                case "ActualViewBoxHeight":
+                    this.view.a1();
                     break;
                 case "Width":
                 case "Height":
-                    this.view.au();
+                    this.view.av();
                     break;
             }
         }
-        cs() {
-            let a = this.fill != null ? this.fill : XIcon.db;
-            let b = this.dp != null ? this.dp : XIcon.df;
-            let c = !isNaN_(this.ao) ? this.ao : XIcon.ak;
-            let d = this.dq != null ? this.dq : XIcon.dg;
+        dc() {
+            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;
+            let d = this.eb != null ? this.eb : XIcon.d2;
             if (this.v) {
-                this.c8 = this.dh != null ? this.dh : a;
-                this.c9 = this.di != null ? this.di : b;
-                this.ai = !isNaN_(this.am) ? this.am : c;
-                this.da = this.dj != null ? this.dj : d;
+                this.du = this.d3 != null ? this.d3 : a;
+                this.dv = this.d4 != null ? this.d4 : b;
+                this.aq = !isNaN_(this.a2) ? this.a2 : c;
+                this.dw = this.d5 != null ? this.d5 : d;
             }
             else {
-                this.c8 = a;
-                this.c9 = b;
-                this.ai = c;
-                this.da = d;
+                this.du = a;
+                this.dv = b;
+                this.aq = c;
+                this.dw = d;
             }
         }
         get t() {
             return this.svgPath != null && !this.view.m;
         }
-        cr() {
-            NativeUI.y(this.view.z, this.an);
+        db() {
+            NativeUI.y(this.view.aa, this.a3);
         }
-        cf() {
-            this.view.af();
+        cz() {
+            this.view.ag();
         }
-        cq() {
-            let a = this.view.z;
+        da() {
+            let a = this.view.aa;
             if (this.t) {
-                let b = this.view.aa;
-                NativeUI.r(b, this.c8);
-                NativeUI.aa(b, this.c9);
-                NativeUI.ad(b, this.ai);
+                let b = this.view.ab;
+                NativeUI.r(b, this.du);
+                NativeUI.aa(b, this.dv);
+                NativeUI.ad(b, this.aq);
             }
             else {
                 let c = this.j();
                 if (c != this.k) {
                     this.k = c;
-                    this.view.ah();
+                    this.view.ai();
                 }
                 let d = false;
-                if (this.cu != null) {
-                    this.view.ar(this.cu, this.az);
+                if (this.df != null) {
+                    this.view.as(this.df, this.bf);
                 }
                 else if (this.svgPath != null) {
                     if (stringStartsWith(trimStart(this.svgPath, ' ', '\n', '\r', '\t'), "<svg")) {
-                        this.view.aw(this.svgPath);
+                        this.view.ax(this.svgPath);
                         d = true;
                     }
                     else {
-                        this.view.ax(this.svgPath);
+                        this.view.ay(this.svgPath);
                     }
                 }
                 else if (this.b != null) {
-                    this.view.ay(this.b);
+                    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.cn();
-                        f = runOn(this.view, this.view.ap);
-                        g = runOn(this.view, this.view.aq);
+                        this.c7();
+                        f = runOn(this.view, this.view.aq);
+                        g = runOn(this.view, this.view.ar);
                         for (let h = 0; h < e.length; h++) {
-                            if (this.c8 != null) {
-                                f(e[h], this.c8);
+                            if (this.du != null) {
+                                f(e[h], this.du);
                             }
-                            if (this.c9 != null) {
-                                g(e[h], this.c9);
+                            if (this.dv != null) {
+                                g(e[h], this.dv);
                             }
-                            if (!isNaN_(this.ai)) {
-                                NativeUI.ad(e[h], this.ai);
+                            if (!isNaN_(this.aq)) {
+                                NativeUI.ad(e[h], this.aq);
                             }
-                            if (this.da != null) {
-                                NativeUI.q(e[h], this.da);
+                            if (this.dw != null) {
+                                NativeUI.q(e[h], this.dw);
                             }
                             if (this.e != null && this.e.count == e.length) {
                                 f(e[h], this.e.item(h));
@@ -4986,38 +5032,38 @@ let XIcon = /*@__PURE__*/ (() => {
                         }
                     }
                     if (this.o != null) {
-                        this.view.az(this.o);
+                        this.view.a0(this.o);
                     }
                     return;
                 }
                 else if (this.svg != null) {
-                    this.view.aw(this.svg);
+                    this.view.ax(this.svg);
                     d = true;
                 }
-                else if (this.bg != null) {
-                    this.view.as(this.bg);
+                else if (this.b0 != null) {
+                    this.view.at(this.b0);
                 }
-                else if (this.a1 != null) {
-                    this.view.av(this.a1);
+                else if (this.bh != null) {
+                    this.view.aw(this.bh);
                 }
                 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.dk));
+                        NativeUI.r(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.dl));
+                        NativeUI.aa(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.dm));
+                        NativeUI.r(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.dn));
+                        NativeUI.aa(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];
@@ -5043,43 +5089,43 @@ let XIcon = /*@__PURE__*/ (() => {
                     }
                     for (let ac = 0; ac < this.view.q.count; ac++) {
                         let ad = this.view.q._inner[ac].c;
-                        NativeUI.r(this.view.q._inner[ac].d, ad.l.f(this.c8));
-                        NativeUI.aa(this.view.q._inner[ac].d, ad.m.f(this.c9));
+                        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));
                     }
                 }
-                let ae = this.view.z;
-                if (this.c8 != null) {
-                    NativeUI.r(ae, this.c8);
+                let ae = this.view.aa;
+                if (this.du != null) {
+                    NativeUI.r(ae, this.du);
                 }
-                if (this.c9 != null) {
-                    NativeUI.aa(ae, this.c9);
+                if (this.dv != null) {
+                    NativeUI.aa(ae, this.dv);
                 }
-                if (!isNaN_(this.ai)) {
-                    NativeUI.ad(ae, this.ai);
+                if (!isNaN_(this.aq)) {
+                    NativeUI.ad(ae, this.aq);
                 }
             }
             if (this.o != null) {
-                this.view.az(this.o);
+                this.view.a0(this.o);
             }
-            if (this.da != null) {
-                NativeUI.q(this.view.z, this.da);
+            if (this.dw != null) {
+                NativeUI.q(this.view.aa, this.dw);
             }
         }
-        cn() {
-            if (this.c8 != null) {
-                this.view.ao(this.c8, "fill");
+        c7() {
+            if (this.du != null) {
+                this.view.ap(this.du, "fill");
             }
-            if (this.c9 != null) {
-                this.view.ao(this.c9, "stroke");
+            if (this.dv != null) {
+                this.view.ap(this.dv, "stroke");
             }
             if (this.e != null) {
                 for (let a of fromEnum(this.e)) {
-                    this.view.ao(a, "fills");
+                    this.view.ap(a, "fills");
                 }
             }
             if (this.f != null) {
                 for (let b of fromEnum(this.f)) {
-                    this.view.ao(b, "strokes");
+                    this.view.ap(b, "strokes");
                 }
             }
         }
@@ -5094,10 +5140,10 @@ let XIcon = /*@__PURE__*/ (() => {
             else if (this.svg != null) {
                 a = 0;
             }
-            else if (this.bg != null) {
+            else if (this.b0 != null) {
                 a = 3;
             }
-            else if (this.a1 != null) {
+            else if (this.bh != null) {
                 a = 4;
             }
             return a;
@@ -5109,127 +5155,127 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.l;
             this.l = a;
             if (b != this.l) {
-                this.cl("BaseTheme", enumGetBox(BaseControlTheme_$type, b), enumGetBox(BaseControlTheme_$type, a));
+                this.c5("BaseTheme", enumGetBox(BaseControlTheme_$type, b), enumGetBox(BaseControlTheme_$type, a));
             }
         }
-        get c8() {
-            return this.cv;
+        get du() {
+            return this.dg;
         }
-        set c8(a) {
-            let b = this.cv;
-            this.cv = a;
-            if (b != this.cv) {
-                this.cl("ActualFill", b, a);
+        set du(a) {
+            let b = this.dg;
+            this.dg = a;
+            if (b != this.dg) {
+                this.c5("ActualFill", b, a);
             }
         }
-        get c9() {
-            return this.cw;
+        get dv() {
+            return this.dh;
         }
-        set c9(a) {
-            let b = this.cw;
-            this.cw = a;
-            if (b != this.cw) {
-                this.cl("ActualStroke", b, a);
+        set dv(a) {
+            let b = this.dh;
+            this.dh = a;
+            if (b != this.dh) {
+                this.c5("ActualStroke", b, a);
             }
         }
-        get da() {
-            return this.cx;
+        get dw() {
+            return this.di;
         }
-        set da(a) {
-            let b = this.cx;
-            this.cx = a;
-            if (b != this.cx) {
-                this.cl("ActualTextColor", b, a);
+        set dw(a) {
+            let b = this.di;
+            this.di = a;
+            if (b != this.di) {
+                this.c5("ActualTextColor", b, a);
             }
         }
-        get ai() {
+        get aq() {
             return this.y;
         }
-        set ai(a) {
+        set aq(a) {
             let b = this.y;
             this.y = a;
             if (b != this.y) {
-                this.cl("ActualStrokeWidth", b, a);
+                this.c5("ActualStrokeWidth", b, a);
             }
         }
         get fill() {
-            return this.cy;
+            return this.dj;
         }
         set fill(a) {
-            let b = this.cy;
-            this.cy = a;
-            if (b != this.cy) {
-                this.cl("Fill", b, a);
+            let b = this.dj;
+            this.dj = a;
+            if (b != this.dj) {
+                this.c5("Fill", b, a);
             }
         }
-        get dp() {
-            return this.c6;
+        get ea() {
+            return this.ds;
         }
-        set dp(a) {
-            let b = this.c6;
-            this.c6 = a;
-            if (b != this.c6) {
-                this.cl("Stroke", b, a);
+        set ea(a) {
+            let b = this.ds;
+            this.ds = a;
+            if (b != this.ds) {
+                this.c5("Stroke", b, a);
             }
         }
-        get ao() {
-            return this.ac;
+        get a4() {
+            return this.ak;
         }
-        set ao(a) {
-            let b = this.ac;
-            this.ac = a;
-            if (b != this.ac) {
-                this.cl("StrokeWidth", b, a);
+        set a4(a) {
+            let b = this.ak;
+            this.ak = a;
+            if (b != this.ak) {
+                this.c5("StrokeWidth", b, a);
             }
         }
-        get dq() {
-            return this.c7;
+        get eb() {
+            return this.dt;
         }
-        set dq(a) {
-            let b = this.c7;
-            this.c7 = a;
-            if (b != this.c7) {
-                this.cl("TextColor", b, a);
+        set eb(a) {
+            let b = this.dt;
+            this.dt = a;
+            if (b != this.dt) {
+                this.c5("TextColor", b, a);
             }
         }
-        get dh() {
-            return this.cz;
+        get d3() {
+            return this.dk;
         }
-        set dh(a) {
-            let b = this.cz;
-            this.cz = a;
-            if (b != this.cz) {
-                this.cl("HoverFill", b, a);
+        set d3(a) {
+            let b = this.dk;
+            this.dk = a;
+            if (b != this.dk) {
+                this.c5("HoverFill", b, a);
             }
         }
-        get di() {
-            return this.c0;
+        get d4() {
+            return this.dl;
         }
-        set di(a) {
-            let b = this.c0;
-            this.c0 = a;
-            if (b != this.c0) {
-                this.cl("HoverStroke", b, a);
+        set d4(a) {
+            let b = this.dl;
+            this.dl = a;
+            if (b != this.dl) {
+                this.c5("HoverStroke", b, a);
             }
         }
-        get am() {
-            return this.aa;
+        get a2() {
+            return this.ae;
         }
-        set am(a) {
-            let b = this.aa;
-            this.aa = a;
-            if (b != this.aa) {
-                this.cl("HoverStrokeThickness", b, a);
+        set a2(a) {
+            let b = this.ae;
+            this.ae = a;
+            if (b != this.ae) {
+                this.c5("HoverStrokeThickness", b, a);
             }
         }
-        get dj() {
-            return this.c1;
+        get d5() {
+            return this.dm;
         }
-        set dj(a) {
-            let b = this.c1;
-            this.c1 = a;
-            if (b != this.c1) {
-                this.cl("HoverTextColor", b, a);
+        set d5(a) {
+            let b = this.dm;
+            this.dm = a;
+            if (b != this.dm) {
+                this.c5("HoverTextColor", b, a);
             }
         }
         get e() {
@@ -5239,7 +5285,7 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.c;
             this.c = a;
             if (b != this.c) {
-                this.cl("FillColors", b, this.c);
+                this.c5("FillColors", b, this.c);
             }
         }
         get f() {
@@ -5249,87 +5295,87 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.d;
             this.d = a;
             if (b != this.d) {
-                this.cl("StrokeColors", b, this.d);
+                this.c5("StrokeColors", b, this.d);
             }
         }
-        get dk() {
-            return this.c2;
+        get d6() {
+            return this.dn;
         }
-        set dk(a) {
-            let b = this.c2;
-            this.c2 = a;
-            if (b != this.c2) {
-                this.cl("PrimaryFillColor", b, this.c2);
+        set d6(a) {
+            let b = this.dn;
+            this.dn = a;
+            if (b != this.dn) {
+                this.c5("PrimaryFillColor", b, this.dn);
             }
         }
-        get dl() {
-            return this.c3;
+        get d7() {
+            return this.dp;
         }
-        set dl(a) {
-            let b = this.c3;
-            this.c3 = a;
-            if (b != this.c3) {
-                this.cl("PrimaryStrokeColor", b, this.c3);
+        set d7(a) {
+            let b = this.dp;
+            this.dp = a;
+            if (b != this.dp) {
+                this.c5("PrimaryStrokeColor", b, this.dp);
             }
         }
-        get dm() {
-            return this.c4;
+        get d8() {
+            return this.dq;
         }
-        set dm(a) {
-            let b = this.c4;
-            this.c4 = a;
-            if (b != this.c4) {
-                this.cl("SecondaryFillColor", b, this.c4);
+        set d8(a) {
+            let b = this.dq;
+            this.dq = a;
+            if (b != this.dq) {
+                this.c5("SecondaryFillColor", b, this.dq);
             }
         }
-        get dn() {
-            return this.c5;
+        get d9() {
+            return this.dr;
         }
-        set dn(a) {
-            let b = this.c5;
-            this.c5 = a;
-            if (b != this.c5) {
-                this.cl("SecondaryStrokeColor", b, this.c5);
+        set d9(a) {
+            let b = this.dr;
+            this.dr = a;
+            if (b != this.dr) {
+                this.c5("SecondaryStrokeColor", b, this.dr);
             }
         }
-        get a1() {
-            return this.ay;
+        get bh() {
+            return this.be;
         }
-        set a1(a) {
-            let b = this.ay;
-            this.ay = a;
-            if (b != this.ay) {
-                this.cl("Source", b, a);
+        set bh(a) {
+            let b = this.be;
+            this.be = a;
+            if (b != this.be) {
+                this.c5("Source", b, a);
             }
         }
-        get bg() {
-            return this.a3;
+        get b0() {
+            return this.bj;
         }
-        set bg(a) {
-            let b = this.a3;
-            this.a3 = a;
-            if (b != this.a3) {
-                this.cl("DataURL", b, a);
+        set b0(a) {
+            let b = this.bj;
+            this.bj = a;
+            if (b != this.bj) {
+                this.c5("DataURL", b, a);
             }
         }
         get svgPath() {
-            return this.a6;
+            return this.bm;
         }
         set svgPath(a) {
-            let b = this.a6;
-            this.a6 = a;
-            if (b != this.a6) {
-                this.cl("SVGPath", b, a);
+            let b = this.bm;
+            this.bm = a;
+            if (b != this.bm) {
+                this.c5("SVGPath", b, a);
             }
         }
         get svg() {
-            return this.a5;
+            return this.bl;
         }
         set svg(a) {
-            let b = this.a5;
-            this.a5 = a;
-            if (b != this.a5) {
-                this.cl("SVG", b, this.a5);
+            let b = this.bl;
+            this.bl = a;
+            if (b != this.bl) {
+                this.c5("SVG", b, this.bl);
             }
         }
         get b() {
@@ -5339,33 +5385,33 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.a;
             this.a = a;
             if (b != this.a) {
-                this.cl("SVGPaths", b, this.a);
+                this.c5("SVGPaths", b, this.a);
             }
         }
-        get cu() {
-            return this.ct;
+        get df() {
+            return this.de;
         }
-        set cu(a) {
-            let b = this.ct;
-            this.ct = a;
-            if (b != this.ct) {
-                this.cl("DataTemplate", b, this.ct);
+        set df(a) {
+            let b = this.de;
+            this.de = a;
+            if (b != this.de) {
+                this.c5("DataTemplate", b, this.de);
             }
         }
-        get az() {
-            return this.ax;
+        get bf() {
+            return this.bd;
         }
-        set az(a) {
-            let b = this.ax;
-            this.ax = a;
-            if (b != this.ax) {
-                this.cl("DataTemplateContext", b, this.ax);
+        set bf(a) {
+            let b = this.bd;
+            this.bd = a;
+            if (b != this.bd) {
+                this.c5("DataTemplateContext", b, this.bd);
             }
         }
-        cj() {
+        c3() {
             this.v = true;
         }
-        ck() {
+        c4() {
             this.v = false;
         }
         get o() {
@@ -5375,41 +5421,41 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.n;
             this.n = a;
             if (b != this.n) {
-                this.cl("TextStyle", b, a);
+                this.c5("TextStyle", b, a);
             }
         }
-        get bq() {
-            return this.a4;
+        get ca() {
+            return this.bk;
         }
-        set bq(a) {
-            let b = this.a4;
-            this.a4 = a;
-            if (b != this.a4) {
-                this.cl("Id", b, a);
+        set ca(a) {
+            let b = this.bk;
+            this.bk = a;
+            if (b != this.bk) {
+                this.c5("Id", b, a);
             }
         }
         get s() {
             return this.p;
         }
-        get av() {
-            return this.au;
+        get bb() {
+            return this.ba;
         }
-        set av(a) {
-            let b = this.au;
-            this.au = a;
+        set bb(a) {
+            let b = this.ba;
+            this.ba = a;
             this.p = true;
-            if (b != this.au) {
-                this.cl("TabIndex", b, a);
+            if (b != this.ba) {
+                this.c5("TabIndex", b, a);
             }
         }
-        get bb() {
-            return this.a2;
+        get bv() {
+            return this.bi;
         }
-        set bb(a) {
-            let b = this.a2;
-            this.a2 = a;
-            if (b != this.a2) {
-                this.cl("AriaLabel", b, a);
+        set bv(a) {
+            let b = this.bi;
+            this.bi = a;
+            if (b != this.bi) {
+                this.c5("AriaLabel", b, a);
             }
         }
         get v() {
@@ -5419,7 +5465,7 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.r;
             this.r = a;
             if (b != this.r) {
-                this.cl("IsHover", b, a);
+                this.c5("IsHover", b, a);
             }
         }
         get disabled() {
@@ -5429,86 +5475,126 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.q;
             this.q = a;
             if (b != this.q) {
-                this.cl("IsDisabled", b, a);
-            }
-        }
-        get an() {
-            return this.ab;
-        }
-        set an(a) {
-            let b = this.ab;
-            this.ab = a;
-            if (b != this.ab) {
-                this.cl("Opacity", b, this.ab);
-            }
-        }
-        get aq() {
-            return this.ae;
-        }
-        set aq(a) {
-            let b = this.ae;
-            this.ae = a;
-            if (b != this.ae) {
-                this.cl("ViewBoxLeft", b, this.ae);
+                this.c5("IsDisabled", b, a);
             }
         }
-        get ar() {
+        get a3() {
             return this.af;
         }
-        set ar(a) {
+        set a3(a) {
             let b = this.af;
             this.af = a;
             if (b != this.af) {
-                this.cl("ViewBoxTop", b, this.af);
+                this.c5("Opacity", b, this.af);
             }
         }
         get as() {
-            return this.ag;
+            return this.aa;
         }
         set as(a) {
-            let b = this.ag;
-            this.ag = a;
-            if (b != this.ag) {
-                this.cl("ViewBoxWidth", b, this.ag);
+            let b = this.aa;
+            this.aa = a;
+            if (b != this.aa) {
+                this.c5("ActualViewBoxLeft", b, this.aa);
             }
         }
-        get ap() {
-            return this.ad;
+        get a6() {
+            return this.am;
         }
-        set ap(a) {
-            let b = this.ad;
-            this.ad = a;
-            if (b != this.ad) {
-                this.cl("ViewBoxHeight", b, this.ad);
+        set a6(a) {
+            let b = this.am;
+            this.am = a;
+            if (b != this.am) {
+                this.c5("ViewBoxLeft", b, this.am);
             }
         }
         get at() {
-            return this.ah;
+            return this.ab;
         }
         set at(a) {
-            let b = this.ah;
-            this.ah = a;
-            if (b != this.ah) {
-                this.cl("Width", b, this.ah);
+            let b = this.ab;
+            this.ab = a;
+            if (b != this.ab) {
+                this.c5("ActualViewBoxTop", b, this.ab);
             }
         }
-        get al() {
+        get a7() {
+            return this.an;
+        }
+        set a7(a) {
+            let b = this.an;
+            this.an = a;
+            if (b != this.an) {
+                this.c5("ViewBoxTop", b, this.an);
+            }
+        }
+        get au() {
+            return this.ac;
+        }
+        set au(a) {
+            let b = this.ac;
+            this.ac = a;
+            if (b != this.ac) {
+                this.c5("ActualViewBoxWidth", b, this.ac);
+            }
+        }
+        get a8() {
+            return this.ao;
+        }
+        set a8(a) {
+            let b = this.ao;
+            this.ao = a;
+            if (b != this.ao) {
+                this.c5("ViewBoxWidth", b, this.ao);
+            }
+        }
+        get ar() {
             return this.z;
         }
-        set al(a) {
+        set ar(a) {
             let b = this.z;
             this.z = a;
             if (b != this.z) {
-                this.cl("Height", b, this.z);
+                this.c5("ActualViewBoxHeight", b, this.z);
+            }
+        }
+        get a5() {
+            return this.al;
+        }
+        set a5(a) {
+            let b = this.al;
+            this.al = a;
+            if (b != this.al) {
+                this.c5("ViewBoxHeight", b, this.al);
+            }
+        }
+        get a9() {
+            return this.ap;
+        }
+        set a9(a) {
+            let b = this.ap;
+            this.ap = a;
+            if (b != this.ap) {
+                this.c5("Width", b, this.ap);
+            }
+        }
+        get a1() {
+            return this.ad;
+        }
+        set a1(a) {
+            let b = this.ad;
+            this.ad = a;
+            if (b != this.ad) {
+                this.c5("Height", b, this.ad);
             }
         }
-        cm() {
+        c6() {
         }
         onDetachedFromUI() {
-            this.view.al();
+            this.view.am();
         }
         onAttachedToUI() {
-            this.view.ai();
+            this.view.aj();
         }
         x() {
             if (this.disabled) {
@@ -5524,10 +5610,10 @@ let XIcon = /*@__PURE__*/ (() => {
         w() {
             return this.view.l();
         }
-        a0() {
+        bg() {
             return this.g();
         }
-        bi() {
+        b2() {
             let a = this.g();
             return a.l();
         }
@@ -5536,12 +5622,12 @@ let XIcon = /*@__PURE__*/ (() => {
             let b = this.view.b();
             a.i = b[0];
             a.g = b[1];
-            a.f = NativeUI.d(this.view.z);
-            a.j = NativeUI.k(this.view.z);
+            a.f = NativeUI.d(this.view.aa);
+            a.j = NativeUI.k(this.view.aa);
             a.a = this.view.a();
             a.svg = this.svg;
             a.svgPath = this.svgPath;
-            a.k = this.bg;
+            a.k = this.b0;
             if (this.o != null) {
                 let c = this.o;
                 if (this.view != null && c.q == null) {
@@ -5573,19 +5659,30 @@ let XIcon = /*@__PURE__*/ (() => {
             return a;
         }
         provideContainer(a) {
-            this.view.ak(a);
+            this.view.al(a);
+        }
+        dd(a, b, c, d) {
+            this.ah = a;
+            this.ai = b;
+            this.aj = c;
+            this.ag = d;
+            this.aa = !isNaN_(this.a6) ? this.a6 : !isNaN_(this.ah) ? this.ah : 0;
+            this.ab = !isNaN_(this.a7) ? this.a7 : !isNaN_(this.ai) ? this.ai : 0;
+            this.ac = !isNaN_(this.a8) ? this.a8 : !isNaN_(this.aj) ? this.aj : 24;
+            this.z = !isNaN_(this.a5) ? this.a5 : !isNaN_(this.ag) ? this.ag : 24;
+            this.view.a1();
         }
     }
     XIcon.$t = markType(XIcon, 'XIcon', Base.$, [INotifyPropertyChanged_$type, IIcon_$type]);
-    XIcon.db = null;
-    XIcon.dg = null;
-    XIcon.df = null;
-    XIcon.dc = null;
-    XIcon.dd = null;
-    XIcon.de = null;
-    XIcon.ak = NaN;
-    XIcon.aj = NaN;
-    XIcon.aw = 0;
+    XIcon.dx = null;
+    XIcon.d2 = null;
+    XIcon.d1 = null;
+    XIcon.dy = null;
+    XIcon.dz = null;
+    XIcon.d0 = null;
+    XIcon.aw = NaN;
+    XIcon.av = NaN;
+    XIcon.bc = 0;
     return XIcon;
 })();
 
@@ -11934,37 +12031,37 @@ let IgxXIconComponent = /*@__PURE__*/ (() => {
          * Gets the fill color currently used by the icon.
         */
         get actualFill() {
-            return brushToString(this.i.c8);
+            return brushToString(this.i.du);
         }
         set actualFill(v) {
-            this.i.c8 = stringToBrush(v);
+            this.i.du = stringToBrush(v);
         }
         /**
          * Gets the stroke color currently used by the icon.
         */
         get actualStroke() {
-            return brushToString(this.i.c9);
+            return brushToString(this.i.dv);
         }
         set actualStroke(v) {
-            this.i.c9 = stringToBrush(v);
+            this.i.dv = stringToBrush(v);
         }
         /**
          * Gets the text color currently used by the icon.
         */
         get actualTextColor() {
-            return brushToString(this.i.da);
+            return brushToString(this.i.dw);
         }
         set actualTextColor(v) {
-            this.i.da = stringToBrush(v);
+            this.i.dw = stringToBrush(v);
         }
         /**
          * Gets the stroke width currently used by the icon.
         */
         get actualStrokeWidth() {
-            return this.i.ai;
+            return this.i.aq;
         }
         set actualStrokeWidth(v) {
-            this.i.ai = +v;
+            this.i.aq = +v;
         }
         /**
          * Gets or sets the fill color to use for the icon.
@@ -11979,64 +12076,64 @@ let IgxXIconComponent = /*@__PURE__*/ (() => {
          * Gets or sets the stroke color to use for the icon.
         */
         get stroke() {
-            return brushToString(this.i.dp);
+            return brushToString(this.i.ea);
         }
         set stroke(v) {
-            this.i.dp = stringToBrush(v);
+            this.i.ea = stringToBrush(v);
         }
         /**
          * Gets or sets the stroke thickness to use for the icon.
         */
         get strokeWidth() {
-            return this.i.ao;
+            return this.i.a4;
         }
         set strokeWidth(v) {
-            this.i.ao = +v;
+            this.i.a4 = +v;
         }
         /**
          * Gets or sets the text color to use for the icon.
         */
         get textColor() {
-            return brushToString(this.i.dq);
+            return brushToString(this.i.eb);
         }
         set textColor(v) {
-            this.i.dq = stringToBrush(v);
+            this.i.eb = stringToBrush(v);
         }
         /**
          * Gets or sets the fill color to use when the icon is hovered.
         */
         get hoverFill() {
-            return brushToString(this.i.dh);
+            return brushToString(this.i.d3);
         }
         set hoverFill(v) {
-            this.i.dh = stringToBrush(v);
+            this.i.d3 = stringToBrush(v);
         }
         /**
          * Gets or sets the stroke color to use when the icon is hovered.
         */
         get hoverStroke() {
-            return brushToString(this.i.di);
+            return brushToString(this.i.d4);
         }
         set hoverStroke(v) {
-            this.i.di = stringToBrush(v);
+            this.i.d4 = stringToBrush(v);
         }
         /**
          * Gets or sets the stroke thickness to use when the icon is hovered.
         */
         get hoverStrokeThickness() {
-            return this.i.am;
+            return this.i.a2;
         }
         set hoverStrokeThickness(v) {
-            this.i.am = +v;
+            this.i.a2 = +v;
         }
         /**
          * Gets or sets the text color to use when the icon is hovered.
         */
         get hoverTextColor() {
-            return brushToString(this.i.dj);
+            return brushToString(this.i.d5);
         }
         set hoverTextColor(v) {
-            this.i.dj = stringToBrush(v);
+            this.i.d5 = stringToBrush(v);
         }
         /**
          * Gets or sets a collection of fill colors to use in the icon.
@@ -12070,10 +12167,10 @@ let IgxXIconComponent = /*@__PURE__*/ (() => {
          * class.
         */
         get primaryFillColor() {
-            return brushToString(this.i.dk);
+            return brushToString(this.i.d6);
         }
         set primaryFillColor(v) {
-            this.i.dk = stringToBrush(v);
+            this.i.d6 = stringToBrush(v);
         }
         /**
          * Gets or sets a primary stroke color for the icon.
@@ -12083,10 +12180,10 @@ let IgxXIconComponent = /*@__PURE__*/ (() => {
          * class.
         */
         get primaryStrokeColor() {
-            return brushToString(this.i.dl);
+            return brushToString(this.i.d7);
         }
         set primaryStrokeColor(v) {
-            this.i.dl = stringToBrush(v);
+            this.i.d7 = stringToBrush(v);
         }
         /**
          * Gets or sets a secondary fill color for the icon.
@@ -12096,10 +12193,10 @@ let IgxXIconComponent = /*@__PURE__*/ (() => {
          * class.
         */
         get secondaryFillColor() {
-            return brushToString(this.i.dm);
+            return brushToString(this.i.d8);
         }
         set secondaryFillColor(v) {
-            this.i.dm = stringToBrush(v);
+            this.i.d8 = stringToBrush(v);
         }
         /**
          * Gets or sets a secondary stroke color for the icon.
@@ -12109,28 +12206,28 @@ let IgxXIconComponent = /*@__PURE__*/ (() => {
          * class.
         */
         get secondaryStrokeColor() {
-            return brushToString(this.i.dn);
+            return brushToString(this.i.d9);
         }
         set secondaryStrokeColor(v) {
-            this.i.dn = stringToBrush(v);
+            this.i.d9 = stringToBrush(v);
         }
         /**
          * 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.a1;
+            return this.i.bh;
         }
         set source(v) {
-            this.i.a1 = v;
+            this.i.bh = v;
         }
         /**
          * Gets or sets data url for the icon to use.
         */
         get dataURL() {
-            return this.i.bg;
+            return this.i.b0;
         }
         set dataURL(v) {
-            this.i.bg = v;
+            this.i.b0 = v;
         }
         /**
          * Gets or sets path data for the icon to use.
@@ -12181,28 +12278,28 @@ let IgxXIconComponent = /*@__PURE__*/ (() => {
          * Gets or sets the id to use for the checkbox.
         */
         get id() {
-            return this.i.bq;
+            return this.i.ca;
         }
         set id(v) {
-            this.i.bq = v;
+            this.i.ca = v;
         }
         /**
          * Gets or sets TabIndex to use for the checkbox.
         */
         get tabIndex() {
-            return this.i.av;
+            return this.i.bb;
         }
         set tabIndex(v) {
-            this.i.av = +v;
+            this.i.bb = +v;
         }
         /**
          * Gets or sets the value of the aria-label attribute.
         */
         get ariaLabel() {
-            return this.i.bb;
+            return this.i.bv;
         }
         set ariaLabel(v) {
-            this.i.bb = v;
+            this.i.bv = v;
         }
         /**
          * Gets or sets whether the icon is hovered.
@@ -12223,64 +12320,100 @@ let IgxXIconComponent = /*@__PURE__*/ (() => {
             this.i.disabled = ensureBool(v);
         }
         get opacity() {
-            return this.i.an;
+            return this.i.a3;
         }
         set opacity(v) {
-            this.i.an = +v;
+            this.i.a3 = +v;
+        }
+        /**
+         * Gets the actual viewbox left for the svg icon.
+        */
+        get actualViewBoxLeft() {
+            return this.i.as;
+        }
+        set actualViewBoxLeft(v) {
+            this.i.as = +v;
         }
         /**
          * Gets or sets the viewbox left for the svg icon.
         */
         get viewBoxLeft() {
-            return this.i.aq;
+            return this.i.a6;
         }
         set viewBoxLeft(v) {
-            this.i.aq = +v;
+            this.i.a6 = +v;
+        }
+        /**
+         * Gets the actual viewbox top for the svg icon.
+        */
+        get actualViewBoxTop() {
+            return this.i.at;
+        }
+        set actualViewBoxTop(v) {
+            this.i.at = +v;
         }
         /**
          * Gets or sets the viewbox top for the svg icon.
         */
         get viewBoxTop() {
-            return this.i.ar;
+            return this.i.a7;
         }
         set viewBoxTop(v) {
-            this.i.ar = +v;
+            this.i.a7 = +v;
+        }
+        /**
+         * Gets the actual viewbox width for the svg icon.
+        */
+        get actualViewBoxWidth() {
+            return this.i.au;
+        }
+        set actualViewBoxWidth(v) {
+            this.i.au = +v;
         }
         /**
          * Gets or sets the viewbox width for the svg icon.
         */
         get viewBoxWidth() {
-            return this.i.as;
+            return this.i.a8;
         }
         set viewBoxWidth(v) {
-            this.i.as = +v;
+            this.i.a8 = +v;
+        }
+        /**
+         * Gets the actual viewbox height for the svg icon.
+        */
+        get actualViewBoxHeight() {
+            return this.i.ar;
+        }
+        set actualViewBoxHeight(v) {
+            this.i.ar = +v;
         }
         /**
          * Gets or sets the viewbox height for the svg icon.
         */
         get viewBoxHeight() {
-            return this.i.ap;
+            return this.i.a5;
         }
         set viewBoxHeight(v) {
-            this.i.ap = +v;
+            this.i.a5 = +v;
         }
         /**
          * Gets or sets the width of the icon.
         */
         get width() {
-            return this.i.at;
+            return this.i.a9;
         }
         set width(v) {
-            this.i.at = +v;
+            this.i.a9 = +v;
         }
         /**
          * Gets or sets the height of the icon.
         */
         get height() {
-            return this.i.al;
+            return this.i.a1;
         }
         set height(v) {
-            this.i.al = +v;
+            this.i.a1 = +v;
         }
         findByName(name) {
             if (this.findEphemera) {
@@ -12354,7 +12487,7 @@ let IgxXIconComponent = /*@__PURE__*/ (() => {
         
         */
         exportVisualModel() {
-            let iv = this.i.a0();
+            let iv = this.i.bg();
             return (iv);
         }
         /**
@@ -12362,7 +12495,7 @@ let IgxXIconComponent = /*@__PURE__*/ (() => {
         
         */
         exportSerializedVisualModel() {
-            let iv = this.i.bi();
+            let iv = this.i.b2();
             return (iv);
         }
         _runInZone(act) {
@@ -12375,7 +12508,7 @@ let IgxXIconComponent = /*@__PURE__*/ (() => {
         }
     }
     IgxXIconComponent.ɵfac = ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxXIconComponent, deps: [{ token: Renderer2 }, { token: ViewContainerRef }, { token: NgZone }, { token: Injector }, { token: ComponentFactoryResolver }], target: ɵɵFactoryTarget.Component });
-    IgxXIconComponent.ɵcmp = ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: IgxXIconComponent, selector: "igx-x-icon", inputs: { baseTheme: "baseTheme", actualFill: "actualFill", actualStroke: "actualStroke", actualTextColor: "actualTextColor", actualStrokeWidth: "actualStrokeWidth", fill: "fill", stroke: "stroke", strokeWidth: "strokeWidth", textColor: "textColor", hoverFill: "hoverFill", hoverStroke: "hoverStroke", hoverStrokeThickness: "hoverStrokeThickness", hoverTextColor: "hoverTextColor", fillColors: "fillColors", strokeColors: "strokeColors", primaryFillColor: "primaryFillColor", primaryStrokeColor: "primaryStrokeColor", secondaryFillColor: "secondaryFillColor", secondaryStrokeColor: "secondaryStrokeColor", source: "source", dataURL: "dataURL", svgPath: "svgPath", svg: "svg", sVGPaths: "sVGPaths", textStyle: "textStyle", id: "id", tabIndex: ["tabindex", "tabIndex"], ariaLabel: ["aria-label", "ariaLabel"], isHover: "isHover", disabled: "disabled", opacity: "opacity", viewBoxLeft: "viewBoxLeft", viewBoxTop: "viewBoxTop", viewBoxWidth: "viewBoxWidth", viewBoxHeight: "viewBoxHeight", width: "width", height: "height" }, host: { properties: { "attr.id": "this.id" }, classAttribute: "ig-x-icon igx-x-icon" }, providers: [], viewQueries: [{ propertyName: "_dynamicContent", first: true, predicate: ["dynamicContent"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "_childTemplateRef", first: true, predicate: ["childContent"], descendants: true, read: TemplateRef }], ngImport: i0, template: `<ng-template #childContent><ng-content></ng-content></ng-template>
+    IgxXIconComponent.ɵcmp = ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: IgxXIconComponent, selector: "igx-x-icon", inputs: { baseTheme: "baseTheme", actualFill: "actualFill", actualStroke: "actualStroke", actualTextColor: "actualTextColor", actualStrokeWidth: "actualStrokeWidth", fill: "fill", stroke: "stroke", strokeWidth: "strokeWidth", textColor: "textColor", hoverFill: "hoverFill", hoverStroke: "hoverStroke", hoverStrokeThickness: "hoverStrokeThickness", hoverTextColor: "hoverTextColor", fillColors: "fillColors", strokeColors: "strokeColors", primaryFillColor: "primaryFillColor", primaryStrokeColor: "primaryStrokeColor", secondaryFillColor: "secondaryFillColor", secondaryStrokeColor: "secondaryStrokeColor", source: "source", dataURL: "dataURL", svgPath: "svgPath", svg: "svg", sVGPaths: "sVGPaths", textStyle: "textStyle", id: "id", tabIndex: ["tabindex", "tabIndex"], ariaLabel: ["aria-label", "ariaLabel"], isHover: "isHover", disabled: "disabled", opacity: "opacity", actualViewBoxLeft: "actualViewBoxLeft", viewBoxLeft: "viewBoxLeft", actualViewBoxTop: "actualViewBoxTop", viewBoxTop: "viewBoxTop", actualViewBoxWidth: "actualViewBoxWidth", viewBoxWidth: "viewBoxWidth", actualViewBoxHeight: "actualViewBoxHeight", viewBoxHeight: "viewBoxHeight", width: "width", height: "height" }, host: { properties: { "attr.id": "this.id" }, classAttribute: "ig-x-icon igx-x-icon" }, providers: [], viewQueries: [{ propertyName: "_dynamicContent", first: true, predicate: ["dynamicContent"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "_childTemplateRef", first: true, predicate: ["childContent"], descendants: true, read: TemplateRef }], ngImport: i0, template: `<ng-template #childContent><ng-content></ng-content></ng-template>
 <ng-container #dynamicContent></ng-container>`, isInline: true, styles: ["\n\t\t:host {\n\t\t\tdisplay: inline-block;  \n            vertical-align: middle;         \n\t\t}\n\t"], changeDetection: ChangeDetectionStrategy.OnPush });
     return IgxXIconComponent;
 })();
@@ -12468,12 +12601,20 @@ let IgxXIconComponent = /*@__PURE__*/ (() => {
                 type: Input
             }], opacity: [{
                 type: Input
+            }], actualViewBoxLeft: [{
+                type: Input
             }], viewBoxLeft: [{
                 type: Input
+            }], actualViewBoxTop: [{
+                type: Input
             }], viewBoxTop: [{
                 type: Input
+            }], actualViewBoxWidth: [{
+                type: Input
             }], viewBoxWidth: [{
                 type: Input
+            }], actualViewBoxHeight: [{
+                type: Input
             }], viewBoxHeight: [{
                 type: Input
             }], width: [{
@@ -25540,7 +25681,7 @@ let XInputBridge = /*@__PURE__*/ (() => {
                     return this.u.fill;
                 case 102:
                     this.ao(a);
-                    return this.u.dp;
+                    return this.u.ea;
                 case 2: return d.cq;
                 case 1:
                     switch (c.t) {
@@ -25604,7 +25745,7 @@ let XInputBridge = /*@__PURE__*/ (() => {
                     break;
                 case 102:
                     this.ao(a);
-                    this.u.dp = c;
+                    this.u.ea = c;
                     break;
                 case 2:
                     e.cq = c == null ? null : c.toString();
@@ -27218,7 +27359,7 @@ let MultiSliderView = /*@__PURE__*/ (() => {
             this.v = i;
             let j = this.u.get2DCanvasContext(this.v);
             this.l = new RenderingContext(new CanvasViewRenderer(), j);
-            this.l.ad(this.j);
+            this.l.ae(this.j);
             this.ab();
             this.a = new CanvasGestureDOMEventProxy(this.u.rootWrapper, this.u, false);
             this.a.bl = this.g.e0;
@@ -27293,7 +27434,7 @@ let MultiSliderView = /*@__PURE__*/ (() => {
                 this.i = c;
                 this.j = this.i;
                 this.s = FontUtil.getCurrentFontHeight(this.u, this.j);
-                this.l.ad(this.i);
+                this.l.ae(this.i);
                 this.g.trackDirty();
             }
         }
@@ -31859,15 +32000,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.aq;
-                case 45: return c.ar;
-                case 46: return c.as;
-                case 47: return c.ap;
-                case 48: return c.at;
-                case 49: return c.al;
+                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.ao;
+                case 65: return c.a4;
             }
             return super.getValue(a, b);
         }
@@ -31888,22 +32029,22 @@ let XIconBridge = /*@__PURE__*/ (() => {
                     }
                     break;
                 case 44:
-                    d.aq = c;
+                    d.a6 = c;
                     break;
                 case 45:
-                    d.ar = c;
+                    d.a7 = c;
                     break;
                 case 46:
-                    d.as = c;
+                    d.a8 = c;
                     break;
                 case 47:
-                    d.ap = c;
+                    d.a5 = c;
                     break;
                 case 48:
-                    d.at = c;
+                    d.a9 = c;
                     break;
                 case 49:
-                    d.al = c;
+                    d.a1 = c;
                     break;
                 case 63:
                     d.e = c;
@@ -31912,7 +32053,7 @@ let XIconBridge = /*@__PURE__*/ (() => {
                     d.f = c;
                     break;
                 case 65:
-                    d.ao = c;
+                    d.a4 = c;
                     break;
             }
         }
@@ -31926,8 +32067,8 @@ let XIconBridge = /*@__PURE__*/ (() => {
             a.svg = null;
             a.svgPath = null;
             a.b = null;
-            a.bg = null;
-            a.a1 = null;
+            a.b0 = null;
+            a.bh = null;
             let b = SvgIconRegistry.instance.getSvgPathString(this.u, this.v);
             if (b != null) {
                 if (stringStartsWith(trimStart(b, ' ', '\n', '\r', '\t'), "<svg")) {
@@ -31945,16 +32086,16 @@ let XIconBridge = /*@__PURE__*/ (() => {
             }
             let d = SvgIconRegistry.instance.getDataURLString(this.u, this.v);
             if (d != null) {
-                a.bg = d;
+                a.b0 = d;
                 return;
             }
             let e = SvgIconRegistry.instance.getIconSource(this.u, this.v);
             if (e != null) {
-                a.a1 = e;
+                a.bh = e;
             }
         }
         exportVisualData(a) {
-            return a.a0();
+            return a.bg();
         }
     }
     XIconBridge.$t = markType(XIconBridge, 'XIconBridge', XComponentBridge.$);
@@ -32242,7 +32383,7 @@ let XPopupBridge = /*@__PURE__*/ (() => {
             }
         }
         exportVisualData(a) {
-            return a.a0();
+            return a.bg();
         }
         addChild(a, b) {
             this.ae.add(b);