igniteui-webcomponents-inputs 4.8.1 → 5.0.0-beta.0

package/bundles/igniteui-webcomponents-inputs.umd.js

@@ -1353,17 +1353,17 @@
             _this.a = null;
             _this.u = 0;
             _this.e = null;
-            _this.ah = null;
+            _this.ag = null;
             _this.b = null;
             _this.j = 0;
             _this.f = null;
             _this.o = 0;
+            _this.ad = null;
             _this.ae = null;
             _this.af = null;
-            _this.ag = null;
             _this.r = 0;
+            _this.ab = null;
             _this.ac = null;
-            _this.ad = null;
             _this.x = null;
             _this.y = null;
             _this.z = null;
@@ -1376,7 +1376,7 @@
             _this.l = false;
             return _this;
         }
-        ButtonVisualModelExport.prototype.ab = function () {
+        ButtonVisualModelExport.prototype.serialize = function () {
             var a = new igniteuiWebcomponentsCore.StringBuilder(0);
             a.l("{");
             a.l("top : " + this.s + ", ");
@@ -1397,20 +1397,20 @@
             a.l("actualElevationMode : " + this.j + ", ");
             a.l("actualTextColor : " + this.f.serialize() + ", ");
             a.l("actualBorderWidth : " + this.o + ", ");
+            if (!igniteuiWebcomponentsCore.stringIsNullOrEmpty(this.ad)) {
+                a.l("textStyleFontStyle : \"" + this.ad + "\", ");
+            }
             if (!igniteuiWebcomponentsCore.stringIsNullOrEmpty(this.ae)) {
-                a.l("textStyleFontStyle : \"" + this.ae + "\", ");
+                a.l("textStyleFontVariant : \"" + this.ae + "\", ");
             }
             if (!igniteuiWebcomponentsCore.stringIsNullOrEmpty(this.af)) {
-                a.l("textStyleFontVariant : \"" + this.af + "\", ");
+                a.l("textStyleFontWeight : \"" + this.af + "\", ");
             }
-            if (!igniteuiWebcomponentsCore.stringIsNullOrEmpty(this.ag)) {
-                a.l("textStyleFontWeight : \"" + this.ag + "\", ");
+            if (!igniteuiWebcomponentsCore.stringIsNullOrEmpty(this.ab)) {
+                a.l("textStyleFontFamily : \"" + this.ab + "\", ");
             }
             if (!igniteuiWebcomponentsCore.stringIsNullOrEmpty(this.ac)) {
-                a.l("textStyleFontFamily : \"" + this.ac + "\", ");
-            }
-            if (!igniteuiWebcomponentsCore.stringIsNullOrEmpty(this.ad)) {
-                a.l("textStyleFontStretch : \"" + this.ad + "\", ");
+                a.l("textStyleFontStretch : \"" + this.ac + "\", ");
             }
             if (!igniteuiWebcomponentsCore.isNaN_(this.r)) {
                 a.l("textStyleFontSize : " + this.r + ", ");
@@ -1430,7 +1430,7 @@
             a.l("}");
             return a.toString();
         };
-        ButtonVisualModelExport.$t = igniteuiWebcomponentsCore.markType(ButtonVisualModelExport, 'ButtonVisualModelExport');
+        ButtonVisualModelExport.$t = igniteuiWebcomponentsCore.markType(ButtonVisualModelExport, 'ButtonVisualModelExport', igniteuiWebcomponentsCore.Base.$, [igniteuiWebcomponentsCore.IVisualData_$type]);
         return ButtonVisualModelExport;
     }(igniteuiWebcomponentsCore.Base));
 
@@ -1636,10 +1636,13 @@
                 this.n.setStyleProperty("height", h);
             }
             else {
+                this.n.setStyleProperty("width", "auto");
+                this.n.setStyleProperty("height", "auto");
                 this.n.setStyleProperty("min-width", i);
                 this.n.setStyleProperty("min-height", j);
                 this.n.setStyleProperty("padding", m);
             }
+            this.k.rootWrapper.setStyleProperty("height", "auto");
             if (!igniteuiWebcomponentsCore.isNaN_(this.b.bf) && this.b.bf > 0) {
                 this.n.setStyleProperty("border-style", "solid");
             }
@@ -1657,11 +1660,6 @@
                 this.n.setStyleProperty("height", "100%");
                 this.k.rootWrapper.setStyleProperty("height", "100%");
             }
-            else {
-                this.n.setStyleProperty("width", "auto");
-                this.n.setStyleProperty("height", "auto");
-                this.k.rootWrapper.setStyleProperty("height", "auto");
-            }
         };
         ButtonView.prototype.as = function () {
             switch (this.b.k5) {
@@ -4959,17 +4957,15 @@
         };
         XButton.prototype.f0 = function () {
             var a = this.b();
-            return a.ab();
+            return a.serialize();
         };
         XButton.prototype.b = function () {
             var a = this.view.q;
             var b = this.view.s;
             var c = new ButtonVisualModelExport();
-            var d = igniteuiWebcomponentsCore.UIElementPropertyAccessorFactory.c.a(12, 0);
-            var e = d.b(a);
-            var f = this.view.a();
-            c.s = f[0];
-            c.q = f[1];
+            var d = this.view.a();
+            c.s = d[0];
+            c.q = d[1];
             c.p = igniteuiWebcomponentsCore.NativeUI.d(a);
             c.t = igniteuiWebcomponentsCore.NativeUI.k(a);
             c.h = this.n;
@@ -4980,7 +4976,7 @@
             c.a = igniteuiWebcomponentsCore.AppearanceHelper.a(this.ne);
             c.u = this.ct;
             c.e = igniteuiWebcomponentsCore.AppearanceHelper.a(this.np);
-            c.ah = this.kr;
+            c.ag = this.kr;
             c.b = igniteuiWebcomponentsCore.AppearanceHelper.a(igniteuiWebcomponentsCore.NativeUI.aj(a));
             c.j = this.u;
             c.f = igniteuiWebcomponentsCore.AppearanceHelper.a(igniteuiWebcomponentsCore.NativeUI.al(b));
@@ -4996,31 +4992,31 @@
             c.n = this.a0;
             c.l = this.disabled;
             if (this.aa != null) {
-                var g = this.aa;
-                if (this.view != null && g.q == null) {
-                    var h = this.view.k;
-                    var i = igniteuiWebcomponentsCore.FontUtil.getFontInfoFromString(h, g.fontString);
-                    g.q = i.q;
-                    g.f = i.f;
-                    g.r = i.r;
-                    g.t = i.t;
-                    g.u = i.u;
-                    g.v = i.v;
+                var e = this.aa;
+                if (this.view != null && e.q == null) {
+                    var f = this.view.k;
+                    var g = igniteuiWebcomponentsCore.FontUtil.getFontInfoFromString(f, e.fontString);
+                    e.q = g.q;
+                    e.f = g.f;
+                    e.r = g.r;
+                    e.t = g.t;
+                    e.u = g.u;
+                    e.v = g.v;
                 }
-                if (g.q != null) {
-                    c.ac = g.q;
+                if (e.q != null) {
+                    c.ab = e.q;
                 }
-                if (!igniteuiWebcomponentsCore.isNaN_(g.f)) {
-                    c.r = g.f;
+                if (!igniteuiWebcomponentsCore.isNaN_(e.f)) {
+                    c.r = e.f;
                 }
-                if (g.v != null) {
-                    c.ag = g.v;
+                if (e.v != null) {
+                    c.af = e.v;
                 }
-                if (g.t != null) {
-                    c.ae = g.t;
+                if (e.t != null) {
+                    c.ad = e.t;
                 }
-                if (g.r != null) {
-                    c.ad = g.t;
+                if (e.r != null) {
+                    c.ac = e.t;
                 }
             }
             return c;
@@ -8390,22 +8386,24 @@
         tslib.__extends(IconVisualModelExport, _super);
         function IconVisualModelExport() {
             var _this = _super !== null && _super.apply(this, arguments) || this;
-            _this.h = 0;
-            _this.f = 0;
-            _this.e = 0;
             _this.i = 0;
+            _this.g = 0;
+            _this.f = 0;
+            _this.j = 0;
             _this.a = null;
-            _this.c = null;
             _this.b = null;
-            _this.d = 0;
+            _this.d = null;
+            _this.c = null;
+            _this.e = 0;
             _this._svgPath = null;
-            _this.j = null;
+            _this._svg = null;
+            _this.k = null;
+            _this.q = null;
+            _this.r = null;
+            _this.s = null;
+            _this.h = 0;
             _this.o = null;
             _this.p = null;
-            _this.q = null;
-            _this.g = 0;
-            _this.m = null;
-            _this.n = null;
             return _this;
         }
         Object.defineProperty(IconVisualModelExport.prototype, "svgPath", {
@@ -8418,36 +8416,51 @@
             enumerable: false,
             configurable: true
         });
-        IconVisualModelExport.prototype.k = function () {
+        Object.defineProperty(IconVisualModelExport.prototype, "svg", {
+            get: function () {
+                return this._svg;
+            },
+            set: function (a) {
+                this._svg = a;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        IconVisualModelExport.prototype.l = function () {
             var a = new igniteuiWebcomponentsCore.StringBuilder(0);
             a.l("{");
-            a.l("actualFill : " + this.a.serialize() + ", ");
-            a.l("actualTextColor : " + this.c.serialize() + ", ");
-            a.l("actualStroke : " + this.b.serialize() + ", ");
-            a.l("actualStrokeThickness : " + this.d + ", ");
-            a.l("top : " + this.h + ", ");
-            a.l("left : " + this.f + ", ");
-            a.l("height : " + this.e + ", ");
-            a.l("width : " + this.i + ", ");
-            a.l("svgPath : '" + this.svgPath + "', ");
-            a.l("dataURL : '" + this.j + "', ");
-            if (!igniteuiWebcomponentsCore.stringIsNullOrEmpty(this.o)) {
-                a.l("textStyleFontStyle : \"" + this.o + "\", ");
+            a.l("shapes: [");
+            if (this.a != null && this.a.length > 0) {
+                for (var b = 0; b < this.a.length; b++) {
+                    var c = this.a[b].serialize();
+                    a = b < this.a.length - 1 ? a.l(c + ", ") : a.l(c);
+                }
+            }
+            a.u("], ");
+            a.l("top : " + this.i + ", ");
+            a.l("left : " + this.g + ", ");
+            a.l("height : " + this.f + ", ");
+            a.l("width : " + this.j + ", ");
+            a.l("svg : \"" + this.svg + "\", ");
+            a.l("svgPath : \"" + this.svgPath + "\", ");
+            a.l("dataURL : \"" + this.k + "\", ");
+            if (!igniteuiWebcomponentsCore.stringIsNullOrEmpty(this.q)) {
+                a.l("textStyleFontStyle : \"" + this.q + "\", ");
             }
-            if (!igniteuiWebcomponentsCore.stringIsNullOrEmpty(this.p)) {
-                a.l("textStyleFontVariant : \"" + this.p + "\", ");
+            if (!igniteuiWebcomponentsCore.stringIsNullOrEmpty(this.r)) {
+                a.l("textStyleFontVariant : \"" + this.r + "\", ");
             }
-            if (!igniteuiWebcomponentsCore.stringIsNullOrEmpty(this.q)) {
-                a.l("textStyleFontWeight : \"" + this.q + "\", ");
+            if (!igniteuiWebcomponentsCore.stringIsNullOrEmpty(this.s)) {
+                a.l("textStyleFontWeight : \"" + this.s + "\", ");
             }
-            if (!igniteuiWebcomponentsCore.stringIsNullOrEmpty(this.m)) {
-                a.l("textStyleFontFamily : \"" + this.m + "\", ");
+            if (!igniteuiWebcomponentsCore.stringIsNullOrEmpty(this.o)) {
+                a.l("textStyleFontFamily : \"" + this.o + "\", ");
             }
-            if (!igniteuiWebcomponentsCore.stringIsNullOrEmpty(this.n)) {
-                a.l("textStyleFontStretch : \"" + this.n + "\", ");
+            if (!igniteuiWebcomponentsCore.stringIsNullOrEmpty(this.p)) {
+                a.l("textStyleFontStretch : \"" + this.p + "\", ");
             }
-            if (!igniteuiWebcomponentsCore.isNaN_(this.g)) {
-                a.l("textStyleFontSize : " + this.g + ", ");
+            if (!igniteuiWebcomponentsCore.isNaN_(this.h)) {
+                a.l("textStyleFontSize : " + this.h + ", ");
             }
             a.l("}");
             return a.toString();
@@ -8469,71 +8482,71 @@
         tslib.__extends(IconView, _super);
         function IconView() {
             var _this = _super.call(this) || this;
-            _this.c = null;
-            _this.s = null;
-            _this.f = null;
-            _this.l = new igniteuiWebcomponentsCore.List$1(igniteuiWebcomponentsCore.Delegate_$type, 0);
-            _this.n = null;
-            _this.o = null;
-            _this.p = null;
+            _this.d = null;
+            _this.v = null;
+            _this.g = null;
+            _this.o = new igniteuiWebcomponentsCore.List$1(igniteuiWebcomponentsCore.Delegate_$type, 0);
             _this.q = null;
             _this.r = null;
-            _this.d = null;
+            _this.s = null;
+            _this.t = null;
+            _this.u = null;
             _this.e = null;
+            _this.f = null;
+            _this.ab = null;
+            _this.n = new igniteuiWebcomponentsCore.Dictionary$2(igniteuiWebcomponentsCore.Brush.$, igniteuiWebcomponentsCore.String_$type, 0);
+            _this.j = true;
             _this.y = null;
-            _this.k = new igniteuiWebcomponentsCore.Dictionary$2(igniteuiWebcomponentsCore.Brush.$, igniteuiWebcomponentsCore.String_$type, 0);
-            _this.g = true;
-            _this.v = null;
-            _this.u = null;
-            _this.t = null;
-            _this.m = new igniteuiWebcomponentsCore.List$1(igniteuiWebcomponentsCore.DomWrapper_$type, 0);
-            _this.n = new igniteuiWebcomponentsCore.List$1(igniteuiWebcomponentsCore.Tuple$2.$.specialize(igniteuiWebcomponentsCore.SVGNode.$, igniteuiWebcomponentsCore.Base.$), 0);
-            _this.o = new igniteuiWebcomponentsCore.List$1(igniteuiWebcomponentsCore.Tuple$2.$.specialize(igniteuiWebcomponentsCore.SVGNode.$, igniteuiWebcomponentsCore.Base.$), 0);
-            _this.p = new igniteuiWebcomponentsCore.List$1(igniteuiWebcomponentsCore.Tuple$2.$.specialize(igniteuiWebcomponentsCore.SVGNode.$, igniteuiWebcomponentsCore.Base.$), 0);
+            _this.x = null;
+            _this.w = null;
+            _this.p = new igniteuiWebcomponentsCore.List$1(igniteuiWebcomponentsCore.DomWrapper_$type, 0);
             _this.q = new igniteuiWebcomponentsCore.List$1(igniteuiWebcomponentsCore.Tuple$2.$.specialize(igniteuiWebcomponentsCore.SVGNode.$, igniteuiWebcomponentsCore.Base.$), 0);
             _this.r = new igniteuiWebcomponentsCore.List$1(igniteuiWebcomponentsCore.Tuple$2.$.specialize(igniteuiWebcomponentsCore.SVGNode.$, igniteuiWebcomponentsCore.Base.$), 0);
-            _this.d = new igniteuiWebcomponentsCore.FastIterationDictionary$2(igniteuiWebcomponentsCore.String_$type, igniteuiWebcomponentsCore.List$1.$.specialize(igniteuiWebcomponentsCore.Tuple$2.$.specialize(igniteuiWebcomponentsCore.SVGNode.$, igniteuiWebcomponentsCore.Base.$)), 0);
+            _this.s = new igniteuiWebcomponentsCore.List$1(igniteuiWebcomponentsCore.Tuple$2.$.specialize(igniteuiWebcomponentsCore.SVGNode.$, igniteuiWebcomponentsCore.Base.$), 0);
+            _this.t = new igniteuiWebcomponentsCore.List$1(igniteuiWebcomponentsCore.Tuple$2.$.specialize(igniteuiWebcomponentsCore.SVGNode.$, igniteuiWebcomponentsCore.Base.$), 0);
+            _this.u = new igniteuiWebcomponentsCore.List$1(igniteuiWebcomponentsCore.Tuple$2.$.specialize(igniteuiWebcomponentsCore.SVGNode.$, igniteuiWebcomponentsCore.Base.$), 0);
             _this.e = new igniteuiWebcomponentsCore.FastIterationDictionary$2(igniteuiWebcomponentsCore.String_$type, igniteuiWebcomponentsCore.List$1.$.specialize(igniteuiWebcomponentsCore.Tuple$2.$.specialize(igniteuiWebcomponentsCore.SVGNode.$, igniteuiWebcomponentsCore.Base.$)), 0);
+            _this.f = new igniteuiWebcomponentsCore.FastIterationDictionary$2(igniteuiWebcomponentsCore.String_$type, igniteuiWebcomponentsCore.List$1.$.specialize(igniteuiWebcomponentsCore.Tuple$2.$.specialize(igniteuiWebcomponentsCore.SVGNode.$, igniteuiWebcomponentsCore.Base.$)), 0);
             return _this;
         }
-        IconView.prototype.ag = function () {
+        IconView.prototype.ak = function () {
         };
-        IconView.prototype.i = function () {
+        IconView.prototype.l = function () {
             return true;
         };
-        Object.defineProperty(IconView.prototype, "w", {
+        Object.defineProperty(IconView.prototype, "z", {
             get: function () {
-                return this.v;
+                return this.y;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IconView.prototype, "x", {
+        Object.defineProperty(IconView.prototype, "aa", {
             get: function () {
                 return null;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IconView.prototype, "b", {
+        Object.defineProperty(IconView.prototype, "c", {
             get: function () {
-                return this.m.toArray();
+                return this.p.toArray();
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IconView.prototype, "j", {
+        Object.defineProperty(IconView.prototype, "m", {
             get: function () {
                 return true;
             },
             enumerable: false,
             configurable: true
         });
-        IconView.prototype.ae = function (a) {
+        IconView.prototype.ai = function (a) {
             var e_1, _a;
             if (a == null) {
                 try {
-                    for (var _b = tslib.__values(igniteuiWebcomponentsCore.fromEnum(this.l)), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    for (var _b = tslib.__values(igniteuiWebcomponentsCore.fromEnum(this.o)), _c = _b.next(); !_c.done; _c = _b.next()) {
                         var b = _c.value;
                         b();
                     }
@@ -8551,109 +8564,109 @@
                             throw e_1.error;
                     }
                 }
-                this.l.clear();
-                if (this.v != null) {
-                    this.v.unlistenAll();
+                this.o.clear();
+                if (this.y != null) {
+                    this.y.unlistenAll();
                 }
-                if (this.u != null) {
-                    this.u.unlistenAll();
+                if (this.x != null) {
+                    this.x.unlistenAll();
                 }
             }
-            this.s = a;
+            this.v = a;
             a.rootWrapper.setStyleProperty("position", "relative");
-            this.s.rootWrapper.setStyleProperty("display", "flex");
-            this.s.rootWrapper.setStyleProperty("flex-direction", "row");
-            this.s.rootWrapper.setStyleProperty("flex-wrap", "no-wrap");
-            this.s.rootWrapper.setStyleProperty("align-items", "center");
-            this.s.rootWrapper.setStyleProperty("justify-content", "center");
-            this.am();
-            var c = this.s.createElementNS("svg", "http://www.w3.org/2000/svg");
+            this.v.rootWrapper.setStyleProperty("display", "flex");
+            this.v.rootWrapper.setStyleProperty("flex-direction", "row");
+            this.v.rootWrapper.setStyleProperty("flex-wrap", "no-wrap");
+            this.v.rootWrapper.setStyleProperty("align-items", "center");
+            this.v.rootWrapper.setStyleProperty("justify-content", "center");
+            this.ar();
+            var c = this.v.createElementNS("svg", "http://www.w3.org/2000/svg");
             c.setStyleProperty("position", "absolute");
             c.setStyleProperty("top", "0");
             c.setStyleProperty("left", "0");
             c.setStyleProperty("right", "0");
             c.setStyleProperty("bottom", "0");
-            this.v = c;
-            var d = this.s.createElement("img");
+            this.y = c;
+            var d = this.v.createElement("img");
             d.setStyleProperty("height", "100%");
             d.setStyleProperty("width", "100%");
             d.setStyleProperty("object-fit", "contain");
-            this.u = d;
-            this.ar();
-            this.t = a.createElementNS("defs", "http://www.w3.org/2000/svg");
-            this.v.append(this.t);
-            this.s.append(this.v);
-            this.l.add(c.listen("click", igniteuiWebcomponentsCore.runOn(this, this.ad)));
-            this.c.cc();
-        };
-        IconView.prototype.ao = function (a) {
-            this.k.clear();
-            this.s.rootWrapper.removeChildren();
-            this.s.rootWrapper.append(this.v);
-            this.v.removeChildren();
-            this.t.removeChildren();
-            this.m.clear();
+            this.x = d;
+            this.aw();
+            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", igniteuiWebcomponentsCore.runOn(this, this.ah)));
+            this.d.cc();
+        };
+        IconView.prototype.at = function (a) {
+            this.n.clear();
+            this.v.rootWrapper.removeChildren();
+            this.v.rootWrapper.append(this.y);
+            this.y.removeChildren();
+            this.w.removeChildren();
+            this.p.clear();
             if (a != null) {
-                var b = this.s.createElementNS("path", "http://www.w3.org/2000/svg");
+                var b = this.v.createElementNS("path", "http://www.w3.org/2000/svg");
                 b.setAttribute("d", a);
-                this.v.append(this.t);
-                this.v.append(b);
-                this.m.add(b);
-            }
-        };
-        IconView.prototype.ap = function (a) {
-            this.k.clear();
-            this.s.rootWrapper.removeChildren();
-            this.s.rootWrapper.append(this.v);
-            this.v.removeChildren();
-            this.t.removeChildren();
-            this.m.clear();
+                this.y.append(this.w);
+                this.y.append(b);
+                this.p.add(b);
+            }
+        };
+        IconView.prototype.au = function (a) {
+            this.n.clear();
+            this.v.rootWrapper.removeChildren();
+            this.v.rootWrapper.append(this.y);
+            this.y.removeChildren();
+            this.w.removeChildren();
+            this.p.clear();
             if (a != null && a.length > 0) {
-                this.v.append(this.t);
+                this.y.append(this.w);
                 for (var b = 0; b < a.length; b++) {
-                    var c = this.s.createElementNS("path", "http://www.w3.org/2000/svg");
+                    var c = this.v.createElementNS("path", "http://www.w3.org/2000/svg");
                     c.setAttribute("d", a[b]);
-                    this.v.append(c);
-                    this.m.add(c);
+                    this.y.append(c);
+                    this.p.add(c);
                 }
             }
         };
-        IconView.prototype.an = function (a) {
-            this.s.rootWrapper.removeChildren();
+        IconView.prototype.as = function (a) {
+            this.v.rootWrapper.removeChildren();
             if (a != null) {
-                var b = this.s.rootWrapper.getNativeElement();
+                var b = this.v.rootWrapper.getNativeElement();
                 b.innerHTML = a;
             }
         };
-        IconView.prototype.al = function (a) {
-            if (this.y != a) {
-                this.y = a;
-                this.s.rootWrapper.removeChildren();
-                this.s.rootWrapper.append(this.u);
-                this.u.setAttribute("src", a);
+        IconView.prototype.ap = function (a) {
+            if (this.ab != a) {
+                this.ab = a;
+                this.v.rootWrapper.removeChildren();
+                this.v.rootWrapper.append(this.x);
+                this.x.setAttribute("src", a);
             }
         };
-        IconView.prototype.h = function () {
-            return this.c.svgPath != null || this.c.svg != null || this.c.b != null;
-        };
-        IconView.prototype.am = function () {
-            this.s.rootWrapper.setStyleProperty("width", igniteuiWebcomponentsCore.isNaN_(this.c.aq) ? "1.5rem" : this.c.aq + "px");
-            this.s.rootWrapper.setStyleProperty("height", igniteuiWebcomponentsCore.isNaN_(this.c.ai) ? "1.5rem" : this.c.ai + "px");
+        IconView.prototype.k = function () {
+            return this.d.svgPath != null || this.d.svg != null || this.d.b != null;
         };
         IconView.prototype.ar = function () {
-            var a = igniteuiWebcomponentsCore.isNaN_(this.c.an) ? 0 : this.c.an;
-            var b = igniteuiWebcomponentsCore.isNaN_(this.c.ao) ? 0 : this.c.ao;
-            var c = igniteuiWebcomponentsCore.isNaN_(this.c.ap) ? 24 : this.c.ap;
-            var d = igniteuiWebcomponentsCore.isNaN_(this.c.am) ? 24 : this.c.am;
-            this.v.setAttribute("viewBox", a + " " + b + " " + c + " " + d);
+            this.v.rootWrapper.setStyleProperty("width", igniteuiWebcomponentsCore.isNaN_(this.d.aq) ? "1.5rem" : this.d.aq + "px");
+            this.v.rootWrapper.setStyleProperty("height", igniteuiWebcomponentsCore.isNaN_(this.d.ai) ? "1.5rem" : this.d.ai + "px");
+        };
+        IconView.prototype.aw = function () {
+            var a = igniteuiWebcomponentsCore.isNaN_(this.d.an) ? 0 : this.d.an;
+            var b = igniteuiWebcomponentsCore.isNaN_(this.d.ao) ? 0 : this.d.ao;
+            var c = igniteuiWebcomponentsCore.isNaN_(this.d.ap) ? 24 : this.d.ap;
+            var d = igniteuiWebcomponentsCore.isNaN_(this.d.am) ? 24 : this.d.am;
+            this.y.setAttribute("viewBox", a + " " + b + " " + c + " " + d);
         };
-        IconView.prototype.ai = function (a, b) {
+        IconView.prototype.am = function (a, b) {
             var c = a.color;
-            if (!this.k.containsKey(a)) {
+            if (!this.n.containsKey(a)) {
                 if (a.isGradient) {
-                    var d = this.t.getChildCount();
+                    var d = this.w.getChildCount();
                     var e = a;
-                    var f = this.s.createElementNS("linearGradient", "http://www.w3.org/2000/svg");
+                    var f = this.v.createElementNS("linearGradient", "http://www.w3.org/2000/svg");
                     var g = "ig_gradient_" + b + "_" + d;
                     f.setAttribute("id", g);
                     f.setAttribute("x1", e.startX.toString());
@@ -8663,60 +8676,60 @@
                     var j = e.gradientStops;
                     for (var i = 0; i < j.length; i++) {
                         var h = j[i];
-                        var k = this.s.createElementNS("stop", "http://www.w3.org/2000/svg");
+                        var k = this.v.createElementNS("stop", "http://www.w3.org/2000/svg");
                         k.setAttribute("offset", h.offset * 100 + "%");
                         k.setAttribute("stop-color", h._fill);
                         f.append(k);
                     }
-                    this.t.append(f);
-                    this.k.addItem(a, g);
+                    this.w.append(f);
+                    this.n.addItem(a, g);
                 }
                 else if (a.isRadialGradient) {
                 }
             }
         };
-        IconView.prototype.aj = function (a, b) {
+        IconView.prototype.an = function (a, b) {
             var c = a;
-            if (this.k.containsKey(b)) {
-                c.setAttribute("fill", "url(#" + this.k.item(b) + ")");
-                this.s.rootWrapper.removeChildren();
-                this.s.rootWrapper.append(this.v);
+            if (this.n.containsKey(b)) {
+                c.setAttribute("fill", "url(#" + this.n.item(b) + ")");
+                this.v.rootWrapper.removeChildren();
+                this.v.rootWrapper.append(this.y);
             }
             else {
                 igniteuiWebcomponentsCore.NativeUI.r(a, b);
             }
         };
-        IconView.prototype.ak = function (a, b) {
+        IconView.prototype.ao = function (a, b) {
             var c = a;
-            if (this.k.containsKey(b)) {
-                c.setAttribute("stroke", "url('#" + this.k.item(b) + "')");
+            if (this.n.containsKey(b)) {
+                c.setAttribute("stroke", "url('#" + this.n.item(b) + "')");
             }
             else {
                 igniteuiWebcomponentsCore.NativeUI.aa(a, b);
             }
         };
-        IconView.prototype.z = function (a) {
+        IconView.prototype.ac = function (a) {
         };
-        IconView.prototype.ah = function () {
-            if (this.i()) {
+        IconView.prototype.al = function () {
+            if (this.l()) {
             }
         };
-        IconView.prototype.aa = function (a) {
-            this.c.b9();
+        IconView.prototype.ad = function (a) {
+            this.d.b9();
         };
-        IconView.prototype.ab = function (a) {
-            this.c.ca();
+        IconView.prototype.ae = function (a) {
+            this.d.ca();
         };
-        IconView.prototype.ac = function () {
-            this.g = true;
-            this.l.add(this.s.rootWrapper.listen("mouseenter", igniteuiWebcomponentsCore.runOn(this, this.aa)));
-            this.l.add(this.s.rootWrapper.listen("mouseleave", igniteuiWebcomponentsCore.runOn(this, this.ab)));
+        IconView.prototype.ag = function () {
+            this.j = true;
+            this.o.add(this.v.rootWrapper.listen("mouseenter", igniteuiWebcomponentsCore.runOn(this, this.ad)));
+            this.o.add(this.v.rootWrapper.listen("mouseleave", igniteuiWebcomponentsCore.runOn(this, this.ae)));
         };
-        IconView.prototype.af = function () {
+        IconView.prototype.aj = function () {
             var e_2, _a;
-            this.g = false;
+            this.j = false;
             try {
-                for (var _b = tslib.__values(igniteuiWebcomponentsCore.fromEnum(this.l)), _c = _b.next(); !_c.done; _c = _b.next()) {
+                for (var _b = tslib.__values(igniteuiWebcomponentsCore.fromEnum(this.o)), _c = _b.next(); !_c.done; _c = _b.next()) {
                     var a = _c.value;
                     a();
                 }
@@ -8734,15 +8747,15 @@
                         throw e_2.error;
                 }
             }
-            this.l.clear();
+            this.o.clear();
         };
-        IconView.prototype.aq = function (a) {
+        IconView.prototype.av = function (a) {
             if (a != null) {
-                this.s.rootWrapper.setStyleProperty("font", a.fontString);
+                this.v.rootWrapper.setStyleProperty("font", a.fontString);
             }
         };
-        IconView.prototype.a = function () {
-            var rect_ = this.s.rootWrapper.getNativeElement().getBoundingClientRect();
+        IconView.prototype.b = function () {
+            var rect_ = this.v.rootWrapper.getNativeElement().getBoundingClientRect();
             var a = (rect_.top);
             var b = (rect_.left);
             var c = new Array(2);
@@ -8750,8 +8763,102 @@
             c[1] = b;
             return c;
         };
-        IconView.prototype.ad = function (a) {
-            this.c.b7();
+        IconView.prototype.ah = function (a) {
+            this.d.b7();
+        };
+        IconView.prototype.a = function () {
+            var a = new igniteuiWebcomponentsCore.List$1(igniteuiWebcomponentsCore.PrimitiveVisualData.$, 0);
+            var b = this.v.rootWrapper.getNativeElement();
+            return a.toArray();
+        };
+        IconView.prototype.af = function (a, b) {
+            for (var c = 0; c < b.e.count; c++) {
+                var d = b.e._inner[c];
+                var e = this.h(d);
+                if (e != null) {
+                    a.add(e);
+                }
+                else {
+                    this.af(a, d);
+                }
+            }
+        };
+        IconView.prototype.h = function (a) {
+            var b = null;
+            switch (a.c) {
+                case 7:
+                    var c = ((function () {
+                        var $ret = new igniteuiWebcomponentsCore.Path();
+                        $ret.an = a.w;
+                        return $ret;
+                    })());
+                    this.aq(c, a);
+                    b = new igniteuiWebcomponentsCore.PathVisualData(1, "path1", c);
+                    break;
+                case 3:
+                    var d = a;
+                    var e = new igniteuiWebcomponentsCore.Line();
+                    e.an = d.w;
+                    e.ao = d.x;
+                    e.ap = d.y;
+                    e.aq = d.z;
+                    this.aq(e, a);
+                    b = new igniteuiWebcomponentsCore.LineVisualData(1, "line1", e);
+                    break;
+                case 4:
+                    var f = a;
+                    var g = new igniteuiWebcomponentsCore.Rectangle();
+                    g.width = f.z;
+                    g.height = f.w;
+                    g.ap = f.x;
+                    g.aq = f.y;
+                    this.aq(g, a);
+                    b = new igniteuiWebcomponentsCore.RectangleVisualData(1, "rect1", g);
+                    break;
+                case 5:
+                case 6:
+                    var h = a;
+                    var i = new igniteuiWebcomponentsCore.Ellipse();
+                    i.width = h.y * 2;
+                    i.height = h.z * 2;
+                    this.aq(i, a);
+                    b = new igniteuiWebcomponentsCore.EllipseVisualData(1, "ellipse1", i);
+                    break;
+            }
+            return b;
+        };
+        IconView.prototype.aq = function (a, b) {
+            var c = b;
+            a.ad = b.t;
+            a.j = c.h;
+            a.am = c.v;
+            a.al = c.u;
+            a.ak = c.u;
+            a._opacity = c.q;
+            if (c.i != null) {
+                var d = new igniteuiWebcomponentsCore.DoubleCollection();
+                var g = c.i;
+                for (var f = 0; f < g.length; f++) {
+                    var e = g[f];
+                    d.add(e);
+                }
+                a.ai = d;
+            }
+        };
+        IconView.prototype.i = function (a) {
+            if (igniteuiWebcomponentsCore.typeCast(igniteuiWebcomponentsCore.Path.$, a) !== null) {
+                return new igniteuiWebcomponentsCore.PathVisualData(1, "path1", a);
+            }
+            else if (igniteuiWebcomponentsCore.typeCast(igniteuiWebcomponentsCore.Line.$, a) !== null) {
+                return new igniteuiWebcomponentsCore.LineVisualData(1, "line1", a);
+            }
+            else if (igniteuiWebcomponentsCore.typeCast(igniteuiWebcomponentsCore.Rectangle.$, a) !== null) {
+                return new igniteuiWebcomponentsCore.RectangleVisualData(1, "rect1", a);
+            }
+            else if (igniteuiWebcomponentsCore.typeCast(igniteuiWebcomponentsCore.Ellipse.$, a) !== null) {
+                return new igniteuiWebcomponentsCore.EllipseVisualData(1, "ellipse1", a);
+            }
+            return null;
         };
         IconView.$t = igniteuiWebcomponentsCore.markType(IconView, 'IconView');
         return IconView;
@@ -8804,9 +8911,9 @@
             _this.clicked = null;
             _this.propertyChanged = null;
             var a = new IconView();
-            a.c = _this;
+            a.d = _this;
             _this.view = a;
-            _this.view.ag();
+            _this.view.ak();
             return _this;
         }
         Object.defineProperty(XIcon.prototype, "view", {
@@ -8874,11 +8981,11 @@
                 case "ViewBoxTop":
                 case "ViewBoxWidth":
                 case "ViewBoxHeight":
-                    this.view.ar();
+                    this.view.aw();
                     break;
                 case "Width":
                 case "Height":
-                    this.view.am();
+                    this.view.ar();
                     break;
             }
         };
@@ -8902,18 +9009,18 @@
         };
         Object.defineProperty(XIcon.prototype, "r", {
             get: function () {
-                return this.svgPath != null && !this.view.j;
+                return this.svgPath != null && !this.view.m;
             },
             enumerable: false,
             configurable: true
         });
         XIcon.prototype.ch = function () {
-            igniteuiWebcomponentsCore.NativeUI.y(this.view.w, this.ak);
+            igniteuiWebcomponentsCore.NativeUI.y(this.view.z, this.ak);
         };
         XIcon.prototype.cg = function () {
-            var a = this.view.w;
+            var a = this.view.z;
             if (this.r) {
-                var b = this.view.x;
+                var b = this.view.aa;
                 igniteuiWebcomponentsCore.NativeUI.r(b, this.cw);
                 igniteuiWebcomponentsCore.NativeUI.aa(b, this.cx);
                 igniteuiWebcomponentsCore.NativeUI.ad(b, this.af);
@@ -8922,22 +9029,22 @@
                 var c = false;
                 if (this.svgPath != null) {
                     if (igniteuiWebcomponentsCore.stringStartsWith(igniteuiWebcomponentsCore.trimStart(this.svgPath, ' ', '\n', '\r', '\t'), "<svg")) {
-                        this.view.an(this.svgPath);
+                        this.view.as(this.svgPath);
                         c = true;
                     }
                     else {
-                        this.view.ao(this.svgPath);
+                        this.view.at(this.svgPath);
                     }
                 }
                 else if (this.b != null) {
-                    this.view.ap(this.b);
-                    var d = this.view.b;
+                    this.view.au(this.b);
+                    var d = this.view.c;
                     if (d != null && d.length > 0) {
                         var e = igniteuiWebcomponentsCore.NativeUI.r;
                         var f = igniteuiWebcomponentsCore.NativeUI.aa;
                         this.cd();
-                        e = igniteuiWebcomponentsCore.runOn(this.view, this.view.aj);
-                        f = igniteuiWebcomponentsCore.runOn(this.view, this.view.ak);
+                        e = igniteuiWebcomponentsCore.runOn(this.view, this.view.an);
+                        f = igniteuiWebcomponentsCore.runOn(this.view, this.view.ao);
                         for (var g = 0; g < d.length; g++) {
                             if (this.cw != null) {
                                 e(d[g], this.cw);
@@ -8960,63 +9067,63 @@
                         }
                     }
                     if (this.m != null) {
-                        this.view.aq(this.m);
+                        this.view.av(this.m);
                     }
                     return;
                 }
                 else if (this.svg != null) {
-                    this.view.an(this.svg);
+                    this.view.as(this.svg);
                     c = true;
                 }
                 else if (this.a7 != null) {
-                    this.view.al(this.a7);
+                    this.view.ap(this.a7);
                 }
                 if (c) {
-                    for (var h = 0; h < this.view.o.count; h++) {
-                        var i = this.view.o._inner[h].c;
-                        igniteuiWebcomponentsCore.NativeUI.r(this.view.o._inner[h].d, i.l.f(this.c8));
+                    for (var h = 0; h < this.view.r.count; h++) {
+                        var i = this.view.r._inner[h].c;
+                        igniteuiWebcomponentsCore.NativeUI.r(this.view.r._inner[h].d, i.l.f(this.c8));
                     }
-                    for (var j = 0; j < this.view.p.count; j++) {
-                        var k = this.view.p._inner[j].c;
-                        igniteuiWebcomponentsCore.NativeUI.aa(this.view.p._inner[j].d, k.m.f(this.c9));
+                    for (var j = 0; j < this.view.s.count; j++) {
+                        var k = this.view.s._inner[j].c;
+                        igniteuiWebcomponentsCore.NativeUI.aa(this.view.s._inner[j].d, k.m.f(this.c9));
                     }
-                    for (var l = 0; l < this.view.q.count; l++) {
-                        var m = this.view.q._inner[l].c;
-                        igniteuiWebcomponentsCore.NativeUI.r(this.view.q._inner[l].d, m.l.f(this.da));
+                    for (var l = 0; l < this.view.t.count; l++) {
+                        var m = this.view.t._inner[l].c;
+                        igniteuiWebcomponentsCore.NativeUI.r(this.view.t._inner[l].d, m.l.f(this.da));
                     }
-                    for (var n = 0; n < this.view.r.count; n++) {
-                        var o = this.view.r._inner[n].c;
-                        igniteuiWebcomponentsCore.NativeUI.aa(this.view.r._inner[n].d, o.m.f(this.db));
+                    for (var n = 0; n < this.view.u.count; n++) {
+                        var o = this.view.u._inner[n].c;
+                        igniteuiWebcomponentsCore.NativeUI.aa(this.view.u._inner[n].d, o.m.f(this.db));
                     }
-                    for (var p = 0; p < this.view.d.o.count; p++) {
-                        var q = this.view.d.o._inner[p];
+                    for (var p = 0; p < this.view.e.o.count; p++) {
+                        var q = this.view.e.o._inner[p];
                         var r = q.split('-');
                         var s = parseInt(r[r.length - 1]);
                         if (s < this.e.count) {
-                            for (var t = 0; t < this.view.d.q._inner[p].count; t++) {
-                                var u = this.view.d.q._inner[p]._inner[t].c;
-                                igniteuiWebcomponentsCore.NativeUI.r(this.view.d.q._inner[p]._inner[t].d, u.l.f(this.e.item(s)));
+                            for (var t = 0; t < this.view.e.q._inner[p].count; t++) {
+                                var u = this.view.e.q._inner[p]._inner[t].c;
+                                igniteuiWebcomponentsCore.NativeUI.r(this.view.e.q._inner[p]._inner[t].d, u.l.f(this.e.item(s)));
                             }
                         }
                     }
-                    for (var v = 0; v < this.view.e.o.count; v++) {
-                        var w = this.view.e.o._inner[v];
+                    for (var v = 0; v < this.view.f.o.count; v++) {
+                        var w = this.view.f.o._inner[v];
                         var x = w.split('-');
                         var y = parseInt(x[x.length - 1]);
                         if (y < this.f.count) {
-                            for (var z = 0; z < this.view.e.q._inner[v].count; z++) {
-                                var aa = this.view.e.q._inner[v]._inner[z].c;
-                                igniteuiWebcomponentsCore.NativeUI.aa(this.view.e.q._inner[v]._inner[z].d, aa.m.f(this.f.item(y)));
+                            for (var z = 0; z < this.view.f.q._inner[v].count; z++) {
+                                var aa = this.view.f.q._inner[v]._inner[z].c;
+                                igniteuiWebcomponentsCore.NativeUI.aa(this.view.f.q._inner[v]._inner[z].d, aa.m.f(this.f.item(y)));
                             }
                         }
                     }
-                    for (var ab = 0; ab < this.view.n.count; ab++) {
-                        var ac = this.view.n._inner[ab].c;
-                        igniteuiWebcomponentsCore.NativeUI.r(this.view.n._inner[ab].d, ac.l.f(this.cw));
-                        igniteuiWebcomponentsCore.NativeUI.aa(this.view.n._inner[ab].d, ac.m.f(this.cx));
+                    for (var ab = 0; ab < this.view.q.count; ab++) {
+                        var ac = this.view.q._inner[ab].c;
+                        igniteuiWebcomponentsCore.NativeUI.r(this.view.q._inner[ab].d, ac.l.f(this.cw));
+                        igniteuiWebcomponentsCore.NativeUI.aa(this.view.q._inner[ab].d, ac.m.f(this.cx));
                     }
                 }
-                var ad = this.view.w;
+                var ad = this.view.z;
                 if (this.cw != null) {
                     igniteuiWebcomponentsCore.NativeUI.r(ad, this.cw);
                 }
@@ -9028,25 +9135,25 @@
                 }
             }
             if (this.m != null) {
-                this.view.aq(this.m);
+                this.view.av(this.m);
             }
             if (this.cy != null) {
-                igniteuiWebcomponentsCore.NativeUI.q(this.view.w, this.cy);
+                igniteuiWebcomponentsCore.NativeUI.q(this.view.z, this.cy);
             }
         };
         XIcon.prototype.cd = function () {
             var e_3, _a, e_4, _b;
             if (this.cw != null) {
-                this.view.ai(this.cw, "fill");
+                this.view.am(this.cw, "fill");
             }
             if (this.cx != null) {
-                this.view.ai(this.cx, "stroke");
+                this.view.am(this.cx, "stroke");
             }
             if (this.e != null) {
                 try {
                     for (var _c = tslib.__values(igniteuiWebcomponentsCore.fromEnum(this.e)), _d = _c.next(); !_d.done; _d = _c.next()) {
                         var a = _d.value;
-                        this.view.ai(a, "fills");
+                        this.view.am(a, "fills");
                     }
                 }
                 catch (e_3_1) {
@@ -9067,7 +9174,7 @@
                 try {
                     for (var _e = tslib.__values(igniteuiWebcomponentsCore.fromEnum(this.f)), _f = _e.next(); !_f.done; _f = _e.next()) {
                         var b = _f.value;
-                        this.view.ai(b, "strokes");
+                        this.view.am(b, "strokes");
                     }
                 }
                 catch (e_4_1) {
@@ -9606,10 +9713,10 @@
         XIcon.prototype.cc = function () {
         };
         XIcon.prototype.onDetachedFromUI = function () {
-            this.view.af();
+            this.view.aj();
         };
         XIcon.prototype.onAttachedToUI = function () {
-            this.view.ac();
+            this.view.ag();
         };
         XIcon.prototype.b7 = function () {
             if (this.disabled) {
@@ -9620,61 +9727,58 @@
             }
         };
         XIcon.prototype.u = function () {
-            return this.view.i();
+            return this.view.l();
         };
         XIcon.prototype.au = function () {
             return this.g();
         };
         XIcon.prototype.a9 = function () {
             var a = this.g();
-            return a.k();
+            return a.l();
         };
         XIcon.prototype.g = function () {
             var a = new IconVisualModelExport();
-            var b = this.view.w;
-            a.a = igniteuiWebcomponentsCore.AppearanceHelper.a(igniteuiWebcomponentsCore.NativeUI.al(b));
-            a.c = igniteuiWebcomponentsCore.AppearanceHelper.a(igniteuiWebcomponentsCore.NativeUI.al(b));
-            a.b = igniteuiWebcomponentsCore.AppearanceHelper.a(igniteuiWebcomponentsCore.NativeUI.am(b));
-            a.d = this.af;
-            var c = this.view.a();
-            a.h = c[0];
-            a.f = c[1];
-            a.e = igniteuiWebcomponentsCore.NativeUI.d(b);
-            a.i = igniteuiWebcomponentsCore.NativeUI.k(b);
+            var b = this.view.b();
+            a.i = b[0];
+            a.g = b[1];
+            a.f = igniteuiWebcomponentsCore.NativeUI.d(this.view.z);
+            a.j = igniteuiWebcomponentsCore.NativeUI.k(this.view.z);
+            a.a = this.view.a();
+            a.svg = this.svg;
             a.svgPath = this.svgPath;
-            a.j = this.a7;
+            a.k = this.a7;
             if (this.m != null) {
-                var d = this.m;
-                if (this.view != null && d.q == null) {
-                    var e = this.view.s;
-                    var f = igniteuiWebcomponentsCore.FontUtil.getFontInfoFromString(e, d.fontString);
-                    d.q = f.q;
-                    d.f = f.f;
-                    d.r = f.r;
-                    d.t = f.t;
-                    d.u = f.u;
-                    d.v = f.v;
+                var c = this.m;
+                if (this.view != null && c.q == null) {
+                    var d = this.view.v;
+                    var e = igniteuiWebcomponentsCore.FontUtil.getFontInfoFromString(d, c.fontString);
+                    c.q = e.q;
+                    c.f = e.f;
+                    c.r = e.r;
+                    c.t = e.t;
+                    c.u = e.u;
+                    c.v = e.v;
                 }
-                if (d.q != null) {
-                    a.m = d.q;
+                if (c.q != null) {
+                    a.o = c.q;
                 }
-                if (!igniteuiWebcomponentsCore.isNaN_(d.f)) {
-                    a.g = d.f;
+                if (!igniteuiWebcomponentsCore.isNaN_(c.f)) {
+                    a.h = c.f;
                 }
-                if (d.v != null) {
-                    a.q = d.v;
+                if (c.v != null) {
+                    a.s = c.v;
                 }
-                if (d.t != null) {
-                    a.o = d.t;
+                if (c.t != null) {
+                    a.q = c.t;
                 }
-                if (d.r != null) {
-                    a.n = d.t;
+                if (c.r != null) {
+                    a.p = c.t;
                 }
             }
             return a;
         };
         XIcon.prototype.provideContainer = function (a) {
-            this.view.ae(a);
+            this.view.ai(a);
         };
         XIcon.$t = igniteuiWebcomponentsCore.markType(XIcon, 'XIcon', igniteuiWebcomponentsCore.Base.$, [igniteuiWebcomponentsCore.INotifyPropertyChanged_$type, igniteuiWebcomponentsCore.IIcon_$type]);
         XIcon.cz = null;
@@ -10745,7 +10849,7 @@
                     a.l(",");
                 }
                 var c = this.j._inner[b].aa.charAt(0).toString().toLowerCase() + this.j._inner[b].aa.substr(1);
-                a.l(this.j._inner[b].ab());
+                a.l(this.j._inner[b].serialize());
             }
             a.l("],");
             a.l("dayNamesModels: [");
@@ -26445,7 +26549,7 @@
         });
         DatePickerView.prototype.ak = function (a) {
             if (a == null) {
-                this.b.cq();
+                this.b.cr();
                 if (this.d != null) {
                     var b = this.d.rootWrapper.getChildAt(0);
                     b.unlistenAll();
@@ -26471,7 +26575,7 @@
         DatePickerView.prototype.ad = function () {
             if (this.d != null) {
                 this.k = this.d.rootWrapper.getChildAt(0);
-                this.k.setAttribute("tabIndex", this.b.be.toString());
+                this.k.setAttribute("tabIndex", this.b.bf.toString());
                 this.k.setStyleProperty("display", "flex");
                 this.k.setStyleProperty("height", "100%");
                 this.l = this.d.createElement("div");
@@ -26484,7 +26588,7 @@
                 this.i = this.d.createElement("div");
                 this.i.setAttribute("aria-hidden", "true");
                 this.h = this.d.createElement("div");
-                this.b.cr();
+                this.b.cs();
                 this.j.getChildAt(0).setAttribute("aria-expanded", "fasle");
                 this.j.getChildAt(0).setAttribute("aria-invalid", "false");
                 this.f.setStyleProperty("height", "16px");
@@ -26570,7 +26674,7 @@
         };
         DatePickerView.prototype.av = function () {
             if (this.f != null) {
-                if (this.b.az == true) {
+                if (this.b.a0 == true) {
                     this.f.show();
                 }
                 else {
@@ -26584,7 +26688,7 @@
             }
         };
         DatePickerView.prototype.ax = function () {
-            this.k.setAttribute("tabIndex", this.b.be.toString());
+            this.k.setAttribute("tabIndex", this.b.bf.toString());
         };
         DatePickerView.prototype.an = function () {
             this.o.observe(document, { childList: true, subtree: true });
@@ -26599,9 +26703,9 @@
                 this.e.setStyleProperty("width", "100%");
                 this.e.setStyleProperty("height", "100%");
                 this.e.setStyleProperty("display", "flex");
-                this.b.cs();
+                this.b.ct();
                 this.e.parent().setStyleProperty("height", "100%");
-                if (this.b.a1 == true) {
+                if (this.b.a2 == true) {
                     this.e.parent().parent().setStyleProperty("max-width", "245px");
                 }
                 else {
@@ -26611,7 +26715,7 @@
         };
         DatePickerView.prototype.z = function () {
             if (this.d != null) {
-                if (this.b.a1 == true) {
+                if (this.b.a2 == true) {
                     this.e.parent().parent().setStyleProperty("max-width", "245px");
                 }
                 else {
@@ -26640,60 +26744,60 @@
             if (this.b.av == true) {
                 return;
             }
-            this.b.cp();
+            this.b.cq();
             if (this.f != null) {
                 this.f.hide();
             }
         };
         DatePickerView.prototype.aa = function (a) {
-            this.b.c8();
+            this.b.c9();
         };
         DatePickerView.prototype.ab = function (a) {
-            this.b.c9();
+            this.b.da();
         };
         DatePickerView.prototype.ag = function (a) {
             a.stopPropagation();
-            this.b.cx();
+            this.b.cy();
         };
         DatePickerView.prototype.y = function (a) {
             var b = a.which;
             if (b == 27) {
-                this.b.cq();
+                this.b.cr();
             }
         };
         DatePickerView.prototype.w = function (a) {
             this.b.focus();
             var b = (a.originalEvent.relatedTarget);
             if (!this.c(b)) {
-                this.b.c3();
+                this.b.c4();
             }
         };
         DatePickerView.prototype.x = function (a) {
             var b = (a.originalEvent.relatedTarget);
             if (!this.c(b)) {
-                this.b.cw();
-                this.b.c4();
+                this.b.cx();
+                this.b.c5();
             }
         };
         DatePickerView.prototype.al = function (a, b) {
             if (this.d != null) {
                 var c = this.d.rootWrapper.getNativeElement();
                 if (!document.documentElement.contains(c)) {
-                    this.b.cq();
+                    this.b.cr();
                 }
             }
             else {
-                this.b.cq();
+                this.b.cr();
             }
         };
         DatePickerView.prototype.document_Click = function (a) {
             var b = a.target;
             if (!this.c(b)) {
-                this.b.cq();
+                this.b.cr();
             }
         };
         DatePickerView.prototype.window_Resize = function (a) {
-            this.b.dm();
+            this.b.dn();
         };
         DatePickerView.prototype.a0 = function (a) {
             if (this.d != null) {
@@ -26730,9 +26834,9 @@
     /**
      * @hidden
      */
-    var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
-        tslib.__extends(DatePicker, _super);
-        function DatePicker() {
+    var XDatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
+        tslib.__extends(XDatePicker, _super);
+        function XDatePicker() {
             var _this = _super.call(this) || this;
             _this.h = null;
             _this.u = null;
@@ -26742,32 +26846,32 @@
             _this.m = null;
             _this.n = null;
             _this.c = null;
-            _this.bg = "dd";
-            _this.bk = "mm";
-            _this.bn = "yyyy";
-            _this.bh = "mdy";
-            _this.bm = "/";
+            _this.bh = "dd";
+            _this.bl = "mm";
+            _this.bo = "yyyy";
+            _this.bi = "mdy";
+            _this.bn = "/";
             _this.ah = false;
             _this.at = false;
             _this.ar = false;
-            _this.a5 = igniteuiWebcomponentsCore.dateMinValue();
+            _this.a6 = igniteuiWebcomponentsCore.dateMinValue();
             _this.ai = false;
             _this.propertyChanged = null;
             _this.selectedValueChanged = null;
             _this.ae = null;
+            _this.a8 = igniteuiWebcomponentsCore.dateMinValue();
             _this.a7 = igniteuiWebcomponentsCore.dateMinValue();
-            _this.a6 = igniteuiWebcomponentsCore.dateMinValue();
-            _this.bj = "";
-            _this.dt = igniteuiWebcomponentsCore.BrushUtil.h(255, 24, 29, 31);
+            _this.bk = "";
+            _this.du = igniteuiWebcomponentsCore.BrushUtil.h(255, 24, 29, 31);
             _this.z = null;
-            _this.bl = "";
-            _this.a4 = igniteuiWebcomponentsCore.dateMinValue();
-            _this.a3 = igniteuiWebcomponentsCore.dateMaxValue();
+            _this.bm = "";
+            _this.a5 = igniteuiWebcomponentsCore.dateMinValue();
+            _this.a4 = igniteuiWebcomponentsCore.dateMaxValue();
             _this.x = 2;
             _this.v = 1;
             _this.aa = null;
-            _this.du = igniteuiWebcomponentsCore.BrushUtil.h(255, 24, 29, 31);
-            _this.ds = igniteuiWebcomponentsCore.BrushUtil.h(255, 163, 172, 184);
+            _this.dv = igniteuiWebcomponentsCore.BrushUtil.h(255, 24, 29, 31);
+            _this.dt = igniteuiWebcomponentsCore.BrushUtil.h(255, 163, 172, 184);
             _this.ao = true;
             _this.ap = false;
             _this.ag = true;
@@ -26777,9 +26881,9 @@
             _this.aq = false;
             _this.a = new DateTimeValueFormatter();
             _this.d = 0;
-            _this.bi = null;
+            _this.bj = null;
             _this.aj = false;
-            _this.bd = 0;
+            _this.be = 0;
             _this.ak = false;
             _this.am = false;
             _this.as = false;
@@ -26792,15 +26896,15 @@
             a.b = _this;
             _this.h = a;
             _this.h.am();
-            _this.co();
+            _this.cp();
             return _this;
         }
-        DatePicker.prototype.db = function (a, b) {
+        XDatePicker.prototype.dc = function (a, b) {
             if (this.u != null) {
                 this.ah = true;
-                this.cq();
+                this.cr();
             }
-            this.dl();
+            this.dm();
             if (this.selectedValueChanged != null) {
                 this.selectedValueChanged(this, ((function () {
                     var $ret = new SelectedValueChangedEventArgs();
@@ -26810,28 +26914,28 @@
                 })()));
             }
             if (this.ai) {
-                this.df();
+                this.dg();
             }
         };
-        DatePicker.prototype.notifySizeChanged = function () {
+        XDatePicker.prototype.notifySizeChanged = function () {
             this.h.ai();
         };
-        DatePicker.prototype.destroy = function () {
+        XDatePicker.prototype.destroy = function () {
             if (this.c != null) {
                 var a = this.c;
-                a.selectedValueChanged = igniteuiWebcomponentsCore.delegateRemove(a.selectedValueChanged, igniteuiWebcomponentsCore.runOn(this, this.cn));
+                a.selectedValueChanged = igniteuiWebcomponentsCore.delegateRemove(a.selectedValueChanged, igniteuiWebcomponentsCore.runOn(this, this.co));
                 var b = this.c;
-                b.close = igniteuiWebcomponentsCore.delegateRemove(b.close, igniteuiWebcomponentsCore.runOn(this, this.cm));
+                b.close = igniteuiWebcomponentsCore.delegateRemove(b.close, igniteuiWebcomponentsCore.runOn(this, this.cn));
             }
             this.provideContainer(null);
         };
-        DatePicker.prototype.provideContainer = function (a) {
+        XDatePicker.prototype.provideContainer = function (a) {
             this.h.ak(a);
         };
-        DatePicker.prototype.setName = function (a) {
+        XDatePicker.prototype.setName = function (a) {
             this.o.e = a;
         };
-        Object.defineProperty(DatePicker.prototype, "af", {
+        Object.defineProperty(XDatePicker.prototype, "af", {
             get: function () {
                 if (this.ae == null) {
                     this.ae = new igniteuiWebcomponentsCore.SRProvider(this.h.d);
@@ -26842,64 +26946,64 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(DatePicker.prototype, "value", {
+        Object.defineProperty(XDatePicker.prototype, "value", {
             get: function () {
-                return this.a7;
+                return this.a8;
             },
             set: function (a) {
-                var b = this.a7;
-                this.a5 = b;
-                this.a7 = a;
-                if (+b != +(this.a7)) {
-                    this.da("Value", b, this.a7);
+                var b = this.a8;
+                this.a6 = b;
+                this.a8 = a;
+                if (+b != +(this.a8)) {
+                    this.db("Value", b, this.a8);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(DatePicker.prototype, "ba", {
+        Object.defineProperty(XDatePicker.prototype, "bb", {
             get: function () {
-                return this.a6;
+                return this.a7;
             },
             set: function (a) {
-                var b = this.a6;
-                this.a6 = a;
-                if (+b != +(this.a6)) {
-                    this.da("Today", b, this.a6);
+                var b = this.a7;
+                this.a7 = a;
+                if (+b != +(this.a7)) {
+                    this.db("Today", b, this.a7);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(DatePicker.prototype, "b3", {
+        Object.defineProperty(XDatePicker.prototype, "b4", {
             get: function () {
-                return this.bj;
+                return this.bk;
             },
             set: function (a) {
-                var b = this.bj;
-                this.bj = a;
-                if (b != this.bj) {
-                    this.da("Label", b, this.bj);
+                var b = this.bk;
+                this.bk = a;
+                if (b != this.bk) {
+                    this.db("Label", b, this.bk);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(DatePicker.prototype, "dw", {
+        Object.defineProperty(XDatePicker.prototype, "dx", {
             get: function () {
-                return this.dt;
+                return this.du;
             },
             set: function (a) {
-                var b = this.dt;
-                this.dt = a;
-                if (b != this.dt) {
-                    this.da("LabelTextColor", b, a);
+                var b = this.du;
+                this.du = a;
+                if (b != this.du) {
+                    this.db("LabelTextColor", b, a);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(DatePicker.prototype, "ac", {
+        Object.defineProperty(XDatePicker.prototype, "ac", {
             get: function () {
                 return this.z;
             },
@@ -26907,55 +27011,55 @@
                 var b = this.z;
                 this.z = a;
                 if (b != this.z) {
-                    this.da("LabelTextStyle", b, this.z);
+                    this.db("LabelTextStyle", b, this.z);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(DatePicker.prototype, "cb", {
+        Object.defineProperty(XDatePicker.prototype, "cc", {
             get: function () {
-                return this.bl;
+                return this.bm;
             },
             set: function (a) {
-                var b = this.bl;
-                this.bl = a;
-                if (b != this.bl) {
-                    this.da("Placeholder", b, this.bl);
+                var b = this.bm;
+                this.bm = a;
+                if (b != this.bm) {
+                    this.db("Placeholder", b, this.bm);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(DatePicker.prototype, "a9", {
+        Object.defineProperty(XDatePicker.prototype, "ba", {
             get: function () {
-                return this.a4;
+                return this.a5;
             },
             set: function (a) {
-                var b = this.a4;
-                this.a4 = a;
-                if (+b != +(this.a4)) {
-                    this.da("MinDate", b, this.a4);
+                var b = this.a5;
+                this.a5 = a;
+                if (+b != +(this.a5)) {
+                    this.db("MinDate", b, this.a5);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(DatePicker.prototype, "a8", {
+        Object.defineProperty(XDatePicker.prototype, "a9", {
             get: function () {
-                return this.a3;
+                return this.a4;
             },
             set: function (a) {
-                var b = this.a3;
-                this.a3 = a;
-                if (+b != +(this.a3)) {
-                    this.da("MaxDate", b, this.a3);
+                var b = this.a4;
+                this.a4 = a;
+                if (+b != +(this.a4)) {
+                    this.db("MaxDate", b, this.a4);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(DatePicker.prototype, "y", {
+        Object.defineProperty(XDatePicker.prototype, "y", {
             get: function () {
                 return this.x;
             },
@@ -26963,13 +27067,13 @@
                 var b = this.x;
                 this.x = a;
                 if (b != this.x) {
-                    this.da("Density", igniteuiWebcomponentsCore.enumGetBox(igniteuiWebcomponentsCore.ControlDisplayDensity_$type, b), igniteuiWebcomponentsCore.enumGetBox(igniteuiWebcomponentsCore.ControlDisplayDensity_$type, this.x));
+                    this.db("Density", igniteuiWebcomponentsCore.enumGetBox(igniteuiWebcomponentsCore.ControlDisplayDensity_$type, b), igniteuiWebcomponentsCore.enumGetBox(igniteuiWebcomponentsCore.ControlDisplayDensity_$type, this.x));
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(DatePicker.prototype, "w", {
+        Object.defineProperty(XDatePicker.prototype, "w", {
             get: function () {
                 return this.v;
             },
@@ -26977,13 +27081,13 @@
                 var b = this.v;
                 this.v = a;
                 if (b != this.v) {
-                    this.da("BaseTheme", igniteuiWebcomponentsCore.enumGetBox(igniteuiWebcomponentsCore.BaseControlTheme_$type, b), igniteuiWebcomponentsCore.enumGetBox(igniteuiWebcomponentsCore.BaseControlTheme_$type, this.v));
+                    this.db("BaseTheme", igniteuiWebcomponentsCore.enumGetBox(igniteuiWebcomponentsCore.BaseControlTheme_$type, b), igniteuiWebcomponentsCore.enumGetBox(igniteuiWebcomponentsCore.BaseControlTheme_$type, this.v));
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(DatePicker.prototype, "ad", {
+        Object.defineProperty(XDatePicker.prototype, "ad", {
             get: function () {
                 return this.aa;
             },
@@ -26991,41 +27095,41 @@
                 var b = this.aa;
                 this.aa = a;
                 if (b != this.aa) {
-                    this.da("TextStyle", b, this.aa);
+                    this.db("TextStyle", b, this.aa);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(DatePicker.prototype, "dx", {
+        Object.defineProperty(XDatePicker.prototype, "dy", {
             get: function () {
-                return this.du;
+                return this.dv;
             },
             set: function (a) {
-                var b = this.du;
-                this.du = a;
-                if (b != this.du) {
-                    this.da("TextColor", b, this.du);
+                var b = this.dv;
+                this.dv = a;
+                if (b != this.dv) {
+                    this.db("TextColor", b, this.dv);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(DatePicker.prototype, "dv", {
+        Object.defineProperty(XDatePicker.prototype, "dw", {
             get: function () {
-                return this.ds;
+                return this.dt;
             },
             set: function (a) {
-                var b = this.ds;
-                this.ds = a;
-                if (b != this.ds) {
-                    this.da("IconColor", b, this.ds);
+                var b = this.dt;
+                this.dt = a;
+                if (b != this.dt) {
+                    this.db("IconColor", b, this.dt);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(DatePicker.prototype, "az", {
+        Object.defineProperty(XDatePicker.prototype, "a0", {
             get: function () {
                 return this.ao;
             },
@@ -27033,13 +27137,13 @@
                 var b = this.ao;
                 this.ao = a;
                 if (b != this.ao) {
-                    this.da("ShowClearButton", b, this.ao);
+                    this.db("ShowClearButton", b, this.ao);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(DatePicker.prototype, "a0", {
+        Object.defineProperty(XDatePicker.prototype, "a1", {
             get: function () {
                 return this.ap;
             },
@@ -27047,13 +27151,13 @@
                 var b = this.ap;
                 this.ap = a;
                 if (b != this.ap) {
-                    this.da("ShowTodayButton", b, this.ap);
+                    this.db("ShowTodayButton", b, this.ap);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(DatePicker.prototype, "au", {
+        Object.defineProperty(XDatePicker.prototype, "au", {
             get: function () {
                 return this.ag;
             },
@@ -27061,13 +27165,13 @@
                 var b = this.ag;
                 this.ag = a;
                 if (b != this.ag) {
-                    this.da("AllowTextInput", b, this.ag);
+                    this.db("AllowTextInput", b, this.ag);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(DatePicker.prototype, "ay", {
+        Object.defineProperty(XDatePicker.prototype, "ay", {
             get: function () {
                 return this.an;
             },
@@ -27075,13 +27179,13 @@
                 var b = this.an;
                 this.an = a;
                 if (b != this.an) {
-                    this.da("OpenOnFocus", b, this.an);
+                    this.db("OpenOnFocus", b, this.an);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(DatePicker.prototype, "j", {
+        Object.defineProperty(XDatePicker.prototype, "j", {
             get: function () {
                 return this.i;
             },
@@ -27089,13 +27193,13 @@
                 var b = this.i;
                 this.i = a;
                 if (b != this.i) {
-                    this.da("FirstDayOfWeek", igniteuiWebcomponentsCore.enumGetBox(DayOfWeek_$type, b), igniteuiWebcomponentsCore.enumGetBox(DayOfWeek_$type, this.i));
+                    this.db("FirstDayOfWeek", igniteuiWebcomponentsCore.enumGetBox(DayOfWeek_$type, b), igniteuiWebcomponentsCore.enumGetBox(DayOfWeek_$type, this.i));
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(DatePicker.prototype, "l", {
+        Object.defineProperty(XDatePicker.prototype, "l", {
             get: function () {
                 return this.k;
             },
@@ -27103,13 +27207,13 @@
                 var b = this.k;
                 this.k = a;
                 if (b != this.k) {
-                    this.da("FirstWeekOfYear", igniteuiWebcomponentsCore.enumGetBox(FirstWeek_$type, b), igniteuiWebcomponentsCore.enumGetBox(FirstWeek_$type, this.k));
+                    this.db("FirstWeekOfYear", igniteuiWebcomponentsCore.enumGetBox(FirstWeek_$type, b), igniteuiWebcomponentsCore.enumGetBox(FirstWeek_$type, this.k));
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(DatePicker.prototype, "a1", {
+        Object.defineProperty(XDatePicker.prototype, "a2", {
             get: function () {
                 return this.aq;
             },
@@ -27117,13 +27221,13 @@
                 var b = this.aq;
                 this.aq = a;
                 if (b != this.aq) {
-                    this.da("ShowWeekNumbers", b, this.aq);
+                    this.db("ShowWeekNumbers", b, this.aq);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(DatePicker.prototype, "e", {
+        Object.defineProperty(XDatePicker.prototype, "e", {
             get: function () {
                 return this.d;
             },
@@ -27131,27 +27235,27 @@
                 var b = this.d;
                 this.d = a;
                 if (this.d != b) {
-                    this.da("DateFormat", igniteuiWebcomponentsCore.enumGetBox(DateFormats_$type, b), igniteuiWebcomponentsCore.enumGetBox(DateFormats_$type, this.d));
+                    this.db("DateFormat", igniteuiWebcomponentsCore.enumGetBox(DateFormats_$type, b), igniteuiWebcomponentsCore.enumGetBox(DateFormats_$type, this.d));
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(DatePicker.prototype, "by", {
+        Object.defineProperty(XDatePicker.prototype, "bz", {
             get: function () {
-                return this.bi;
+                return this.bj;
             },
             set: function (a) {
-                var b = this.bi;
-                this.bi = a;
-                if (b != this.bi) {
-                    this.da("FormatString", b, this.bi);
+                var b = this.bj;
+                this.bj = a;
+                if (b != this.bj) {
+                    this.db("FormatString", b, this.bj);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(DatePicker.prototype, "av", {
+        Object.defineProperty(XDatePicker.prototype, "av", {
             get: function () {
                 return this.aj;
             },
@@ -27159,27 +27263,27 @@
                 var b = this.aj;
                 this.aj = a;
                 if (b != this.aj) {
-                    this.da("IsDisabled", b, this.aj);
+                    this.db("IsDisabled", b, this.aj);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(DatePicker.prototype, "be", {
+        Object.defineProperty(XDatePicker.prototype, "bf", {
             get: function () {
-                return this.bd;
+                return this.be;
             },
             set: function (a) {
-                var b = this.bd;
-                this.bd = a;
-                if (b != this.bd) {
-                    this.da("TabIndex", b, this.bd);
+                var b = this.be;
+                this.be = a;
+                if (b != this.be) {
+                    this.db("TabIndex", b, this.be);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(DatePicker.prototype, "aw", {
+        Object.defineProperty(XDatePicker.prototype, "aw", {
             get: function () {
                 return this.ak;
             },
@@ -27187,13 +27291,13 @@
                 var b = this.ak;
                 this.ak = a;
                 if (b != this.ak) {
-                    this.da("IsFixed", b, this.ak);
+                    this.db("IsFixed", b, this.ak);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(DatePicker.prototype, "ax", {
+        Object.defineProperty(XDatePicker.prototype, "ax", {
             get: function () {
                 return this.am;
             },
@@ -27201,13 +27305,13 @@
                 var b = this.am;
                 this.am = a;
                 if (b != this.am) {
-                    this.da("OpenAsChild", b, this.am);
+                    this.db("OpenAsChild", b, this.am);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(DatePicker.prototype, "a2", {
+        Object.defineProperty(XDatePicker.prototype, "a3", {
             get: function () {
                 return this.as;
             },
@@ -27215,36 +27319,36 @@
                 var b = this.as;
                 this.as = a;
                 if (b != this.as) {
-                    this.da("UseTopLayer", b, this.as);
+                    this.db("UseTopLayer", b, this.as);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        DatePicker.prototype.da = function (a, b, c) {
+        XDatePicker.prototype.db = function (a, b, c) {
             if (this.propertyChanged != null) {
                 this.propertyChanged(this, new igniteuiWebcomponentsCore.PropertyChangedEventArgs(a));
             }
-            this.dd(a, b, c);
+            this.de(a, b, c);
         };
-        DatePicker.prototype.dd = function (a, b, c) {
+        XDatePicker.prototype.de = function (a, b, c) {
             switch (a) {
                 case "Density":
-                    this.dg();
+                    this.dh();
                     break;
                 case "BaseTheme":
-                    this.di();
+                    this.dj();
                     break;
                 case "Value":
                     if (+(igniteuiWebcomponentsCore.dateGetDate(this.value)) != +(igniteuiWebcomponentsCore.dateGetDate(igniteuiWebcomponentsCore.dateMinValue()))) {
-                        if (igniteuiWebcomponentsCore.dateGetDate(this.value) < igniteuiWebcomponentsCore.dateGetDate(this.a9) || igniteuiWebcomponentsCore.dateGetDate(this.value) > igniteuiWebcomponentsCore.dateGetDate(this.a8)) {
+                        if (igniteuiWebcomponentsCore.dateGetDate(this.value) < igniteuiWebcomponentsCore.dateGetDate(this.ba) || igniteuiWebcomponentsCore.dateGetDate(this.value) > igniteuiWebcomponentsCore.dateGetDate(this.a9)) {
                             this.ai = true;
-                            this.value = this.a5;
+                            this.value = this.a6;
                             this.ai = false;
                         }
                     }
-                    this.db(this.a5, this.value);
-                    this.a5 = this.value;
+                    this.dc(this.a6, this.value);
+                    this.a6 = this.value;
                     if (this.c != null) {
                         if (+(igniteuiWebcomponentsCore.dateGetDate(this.value)) == +(igniteuiWebcomponentsCore.dateGetDate(igniteuiWebcomponentsCore.dateMinValue()))) {
                             this.c.value = igniteuiWebcomponentsCore.dateMinValue();
@@ -27256,8 +27360,8 @@
                     break;
                 case "Label":
                     if (this.r != null) {
-                        this.r.text = this.b3;
-                        if (this.b3 != null && this.b3 != "") {
+                        this.r.text = this.b4;
+                        if (this.b4 != null && this.b4 != "") {
                             if (!this.q.inputs.contains(this.r)) {
                                 this.q.inputs.insert(0, this.r);
                             }
@@ -27271,25 +27375,25 @@
                     break;
                 case "Placeholder":
                     if (this.o != null) {
-                        this.o.cg = this.cb;
-                        this.h.ay(this.cb);
+                        this.o.cg = this.cc;
+                        this.h.ay(this.cc);
                     }
                     break;
                 case "Today":
                     if (this.c != null) {
-                        this.c.av = this.ba;
+                        this.c.av = this.bb;
                     }
                     break;
                 case "MaxDate":
                     if (this.c != null) {
-                        var d = igniteuiWebcomponentsCore.Base.compareSimple(this.a9, this.a8);
+                        var d = igniteuiWebcomponentsCore.Base.compareSimple(this.ba, this.a9);
                         if (d >= 0) {
-                            this.a8 = igniteuiWebcomponentsCore.dateMaxValue();
+                            this.a9 = igniteuiWebcomponentsCore.dateMaxValue();
                         }
-                        this.c.at = this.a3;
+                        this.c.at = this.a4;
                     }
-                    if (igniteuiWebcomponentsCore.dateGetDate(this.value) > igniteuiWebcomponentsCore.dateGetDate(this.a8)) {
-                        this.a5 = igniteuiWebcomponentsCore.dateMinValue();
+                    if (igniteuiWebcomponentsCore.dateGetDate(this.value) > igniteuiWebcomponentsCore.dateGetDate(this.a9)) {
+                        this.a6 = igniteuiWebcomponentsCore.dateMinValue();
                         this.ai = true;
                         this.value = igniteuiWebcomponentsCore.dateMinValue();
                         this.ai = false;
@@ -27297,22 +27401,22 @@
                     break;
                 case "MinDate":
                     if (this.c != null) {
-                        this.c.au = this.a4;
-                        var e = igniteuiWebcomponentsCore.Base.compareSimple(this.a9, this.a8);
+                        this.c.au = this.a5;
+                        var e = igniteuiWebcomponentsCore.Base.compareSimple(this.ba, this.a9);
                         if (e >= 0) {
-                            this.a5 = igniteuiWebcomponentsCore.dateMaxValue();
-                            this.c.at = this.a8;
+                            this.a6 = igniteuiWebcomponentsCore.dateMaxValue();
+                            this.c.at = this.a9;
                         }
                     }
-                    if (igniteuiWebcomponentsCore.dateGetDate(this.value) < igniteuiWebcomponentsCore.dateGetDate(this.a9)) {
-                        this.a5 = igniteuiWebcomponentsCore.dateMinValue();
+                    if (igniteuiWebcomponentsCore.dateGetDate(this.value) < igniteuiWebcomponentsCore.dateGetDate(this.ba)) {
+                        this.a6 = igniteuiWebcomponentsCore.dateMinValue();
                         this.ai = true;
                         this.value = igniteuiWebcomponentsCore.dateMinValue();
                         this.ai = false;
                     }
                     break;
                 case "TextStyle":
-                    this.dn();
+                    this.dp();
                     break;
                 case "ShowClearButton":
                     if (this.o != null) {
@@ -27325,27 +27429,27 @@
                 case "LabelTextStyle":
                 case "TextColor":
                 case "IconColor":
-                    this.dp();
+                    this.dq();
                     break;
                 case "ShowTodayButton":
                     if (this.c != null) {
-                        this.c.ae = this.a0;
+                        this.c.ae = this.a1;
                         this.h.z();
                     }
                     break;
                 case "AllowTextInput":
                     if (this.o != null) {
-                        this.o.disabled = !this.au;
+                        this.o.disabled = this.az();
                     }
                     break;
                 case "OpenOnFocus": break;
                 case "DateFormat":
                     this.a.k(this.e);
-                    this.dl();
+                    this.dm();
                     break;
                 case "FormatString":
-                    this.co();
-                    this.dl();
+                    this.cp();
+                    this.dm();
                     break;
                 case "FirstDayOfWeek":
                     if (this.c != null) {
@@ -27354,7 +27458,7 @@
                     break;
                 case "ShowWeekNumbers":
                     if (this.c != null) {
-                        this.c.af = this.a1;
+                        this.c.af = this.a2;
                         this.h.z();
                     }
                     break;
@@ -27369,7 +27473,7 @@
                             this.q.disabled = this.av;
                         }
                         if (this.o != null) {
-                            this.o.disabled = this.av;
+                            this.o.disabled = this.az();
                         }
                     }
                     break;
@@ -27383,14 +27487,17 @@
                     break;
                 case "UseTopLayer":
                     if (this.u != null) {
-                        this.u.ax = this.a2;
+                        this.u.ax = this.a3;
                     }
                     break;
             }
         };
-        DatePicker.prototype.co = function () {
+        XDatePicker.prototype.az = function () {
+            return this.av || !this.au;
+        };
+        XDatePicker.prototype.cp = function () {
             var a = '/';
-            var b = this.by != null ? this.by.toLowerCase() : this.a.j();
+            var b = this.bz != null ? this.bz.toLowerCase() : this.a.j();
             if (igniteuiWebcomponentsCore.stringContains(b, "/")) {
                 a = '/';
             }
@@ -27406,7 +27513,7 @@
             else if (igniteuiWebcomponentsCore.stringContains(b, ",")) {
                 a = ',';
             }
-            this.bm = a.toString();
+            this.bn = a.toString();
             var c = b.split(a);
             if (c.length == 3) {
                 var d = "";
@@ -27415,19 +27522,19 @@
                         d += "d";
                         switch (c[e]) {
                             case "d":
-                                this.bg = c[e];
+                                this.bh = c[e];
                                 break;
                             case "dd":
-                                this.bg = c[e];
+                                this.bh = c[e];
                                 break;
                             case "ddd":
-                                this.bg = c[e];
+                                this.bh = c[e];
                                 break;
                             case "dddd":
-                                this.bg = c[e];
+                                this.bh = c[e];
                                 break;
                             default:
-                                this.bg = "dd";
+                                this.bh = "dd";
                                 break;
                         }
                     }
@@ -27435,71 +27542,71 @@
                         d += "m";
                         switch (c[e]) {
                             case "m":
-                                this.bk = c[e];
+                                this.bl = c[e];
                                 break;
                             case "mm":
-                                this.bk = c[e];
+                                this.bl = c[e];
                                 break;
                             case "mmm":
-                                this.bk = c[e];
+                                this.bl = c[e];
                                 break;
                             case "mmmm":
-                                this.bk = c[e];
+                                this.bl = c[e];
                                 break;
                             default:
-                                this.bk = "mm";
+                                this.bl = "mm";
                                 break;
                         }
-                        this.bk = c[e];
+                        this.bl = c[e];
                     }
                     else if (igniteuiWebcomponentsCore.stringContains(c[e], "y")) {
                         d += "y";
                         switch (c[e]) {
                             case "yy":
-                                this.bn = c[e];
+                                this.bo = c[e];
                                 break;
                             case "yyyy":
-                                this.bn = c[e];
+                                this.bo = c[e];
                                 break;
                             default:
-                                this.bn = "yyyy";
+                                this.bo = "yyyy";
                                 break;
                         }
                     }
                 }
                 if (d == "dmy" || d == "mdy" || d == "ymd") {
-                    this.bh = d;
+                    this.bi = d;
                 }
                 else {
-                    this.bh = "mdy";
+                    this.bi = "mdy";
                 }
             }
         };
-        DatePicker.prototype.dp = function () {
+        XDatePicker.prototype.dq = function () {
             if (this.o != null) {
-                this.o.d8 = this.dx;
+                this.o.d8 = this.dy;
             }
             if (this.m != null) {
-                this.m.fill = this.dv;
+                this.m.fill = this.dw;
             }
             if (this.n != null) {
-                this.n.fill = this.dv;
+                this.n.fill = this.dw;
             }
             if (this.r != null) {
-                this.r.df = this.dw;
+                this.r.df = this.dx;
                 this.r.y = this.ac;
             }
         };
-        DatePicker.prototype.dk = function () {
+        XDatePicker.prototype.dl = function () {
             if (this.q != null) {
             }
         };
-        DatePicker.prototype.dn = function () {
+        XDatePicker.prototype.dp = function () {
             if (this.aa != null) {
                 this.o.af = this.aa;
             }
         };
-        DatePicker.prototype.cr = function () {
+        XDatePicker.prototype.cs = function () {
             this.q = new XInputGroup();
             this.h.aq(this.q);
             this.q.d = 0;
@@ -27507,11 +27614,11 @@
             this.q.t = this.y;
             this.r = new XLabel();
             this.h.as(this.r);
-            this.r.df = this.dw;
+            this.r.df = this.dx;
             this.r.y = this.ac;
             this.q.appendContentChild(this.h.v());
-            if (this.b3 != null && this.b3 != "") {
-                this.r.text = this.b3;
+            if (this.b4 != null && this.b4 != "") {
+                this.r.text = this.b4;
                 this.q.inputs.add(this.r);
             }
             this.o = new XInput();
@@ -27520,40 +27627,40 @@
             if (this.aa != null) {
                 this.o.af = this.aa;
             }
-            this.o.disabled = !this.au;
-            this.o.d8 = this.dx;
+            this.o.disabled = this.az();
+            this.o.d8 = this.dy;
             this.q.appendContentChild(this.h.u());
             this.q.inputs.add(this.o);
-            this.o.cg = this.cb;
-            this.h.ay(this.cb);
+            this.o.cg = this.cc;
+            this.h.ay(this.cc);
             var a = this.o;
-            a.change = igniteuiWebcomponentsCore.delegateCombine(a.change, igniteuiWebcomponentsCore.runOn(this, this.cy));
+            a.change = igniteuiWebcomponentsCore.delegateCombine(a.change, igniteuiWebcomponentsCore.runOn(this, this.cz));
             var b = this.o;
-            b.changing = igniteuiWebcomponentsCore.delegateCombine(b.changing, igniteuiWebcomponentsCore.runOn(this, this.cz));
+            b.changing = igniteuiWebcomponentsCore.delegateCombine(b.changing, igniteuiWebcomponentsCore.runOn(this, this.c0));
             var c = this.o;
-            c.keyDown = igniteuiWebcomponentsCore.delegateCombine(c.keyDown, igniteuiWebcomponentsCore.runOn(this, this.c0));
+            c.keyDown = igniteuiWebcomponentsCore.delegateCombine(c.keyDown, igniteuiWebcomponentsCore.runOn(this, this.c1));
             var d = new XSuffix();
             this.h.au(d, this.h.r());
             this.m = new XIcon();
             this.h.ap(this.m, this.h.q());
-            this.m.svgPath = DatePicker.br;
-            this.m.fill = this.dv;
+            this.m.svgPath = XDatePicker.bs;
+            this.m.fill = this.dw;
             d.appendContentChild(this.h.q());
             this.q.appendContentChild(this.h.r());
             this.q.inputs.add(d);
-            this.dl();
+            this.dm();
             var e = new XSuffix();
             this.h.au(e, this.h.t());
             this.n = new XIcon();
             this.h.ap(this.n, this.h.s());
-            this.n.svgPath = DatePicker.bq;
-            this.n.fill = this.dv;
+            this.n.svgPath = XDatePicker.br;
+            this.n.fill = this.dw;
             e.appendContentChild(this.h.s());
             this.q.appendContentChild(this.h.t());
             this.q.inputs.add(e);
         };
-        DatePicker.prototype.c0 = function (a, b) {
-            this.c6(b);
+        XDatePicker.prototype.c1 = function (a, b) {
+            this.c7(b);
             if (b.defaultPrevented) {
                 return;
             }
@@ -27563,36 +27670,36 @@
                 case 9:
                     this.ar = true;
                     if (!this.at) {
-                        this.dr(this.o.cq);
+                        this.ds(this.o.cq);
                     }
                     this.ah = true;
-                    this.cq();
+                    this.cr();
                     this.ar = false;
                     break;
                 case 13:
                     this.ar = true;
                     if (!this.at) {
-                        this.dr(this.o.cq);
+                        this.ds(this.o.cq);
                     }
                     this.ah = true;
-                    this.cq();
+                    this.cr();
                     this.ar = false;
                     break;
                 case 40:
                     if (d == 1) {
-                        this.dc();
-                        this.cv();
+                        this.dd();
+                        this.cw();
                     }
                     break;
                 case 38:
                     if (d == 1) {
-                        this.cq();
+                        this.cr();
                     }
                     break;
             }
         };
-        DatePicker.prototype.cz = function (a, b) {
-            this.c2(b);
+        XDatePicker.prototype.c0 = function (a, b) {
+            this.c3(b);
             if (b.value.length > 0) {
                 this.h.av();
             }
@@ -27600,12 +27707,12 @@
                 this.h.ah();
             }
         };
-        DatePicker.prototype.cy = function (a, b) {
+        XDatePicker.prototype.cz = function (a, b) {
             this.at = true;
-            this.dr(b.value);
+            this.ds(b.value);
             this.at = false;
         };
-        DatePicker.prototype.dr = function (a) {
+        XDatePicker.prototype.ds = function (a) {
             var b = ['/', '-', ' ', '.', ','];
             var c = igniteuiWebcomponentsCore.stringSplit(a, b, 1);
             var d = 0;
@@ -27616,17 +27723,17 @@
                 if (c[0].length == 0 || c[1].length == 0 || c[2].length == 0) {
                     g = false;
                 }
-                if (this.bh == "dmy") {
+                if (this.bi == "dmy") {
                     d = parseInt(c[0]);
                     e = parseInt(c[1]);
                     f = parseInt(c[2]);
                 }
-                else if (this.bh == "mdy") {
+                else if (this.bi == "mdy") {
                     e = parseInt(c[0]);
                     d = parseInt(c[1]);
                     f = parseInt(c[2]);
                 }
-                else if (this.bh == "ymd") {
+                else if (this.bi == "ymd") {
                     f = parseInt(c[0]);
                     e = parseInt(c[1]);
                     d = parseInt(c[2]);
@@ -27639,13 +27746,13 @@
                 }
                 if (igniteuiWebcomponentsCore.isNaN_(e)) {
                     var h = "";
-                    if (this.bh == "dmy") {
+                    if (this.bi == "dmy") {
                         h = c[1].toLowerCase();
                     }
-                    else if (this.bh == "mdy") {
+                    else if (this.bi == "mdy") {
                         h = c[0].toLowerCase();
                     }
-                    else if (this.bh == "ymd") {
+                    else if (this.bi == "ymd") {
                         h = c[1].toLowerCase();
                     }
                     var i = !igniteuiWebcomponentsCore.stringIsNullOrWhiteSpace(this.af.b1("January_Full")) ? this.af.b1("January_Full").toLowerCase() : "january";
@@ -27721,45 +27828,45 @@
             }
             if (g) {
                 var ag = igniteuiWebcomponentsCore.dateFromValues(f, e, d, 0, 0, 0, 0);
-                var ah = igniteuiWebcomponentsCore.Base.compareSimple(ag, this.a9);
-                var ai = igniteuiWebcomponentsCore.Base.compareSimple(ag, this.a8);
+                var ah = igniteuiWebcomponentsCore.Base.compareSimple(ag, this.ba);
+                var ai = igniteuiWebcomponentsCore.Base.compareSimple(ag, this.a9);
                 if (ah < 0 || ai > 0) {
-                    this.dl();
+                    this.dm();
                 }
                 else {
-                    this.dq(ag);
+                    this.dr(ag);
                     this.h.av();
                 }
             }
             else {
                 if (igniteuiWebcomponentsCore.stringIsNullOrEmpty(a)) {
-                    this.cp();
+                    this.cq();
                 }
                 else {
-                    this.dl();
+                    this.dm();
                 }
             }
         };
-        DatePicker.prototype.dq = function (a) {
+        XDatePicker.prototype.dr = function (a) {
             var b = this.value;
             this.value = a;
         };
-        DatePicker.prototype.dl = function () {
+        XDatePicker.prototype.dm = function () {
             if (this.o != null) {
-                if (+(igniteuiWebcomponentsCore.dateGetDate(this.a7)) != +(igniteuiWebcomponentsCore.dateGetDate(igniteuiWebcomponentsCore.dateMinValue()))) {
+                if (+(igniteuiWebcomponentsCore.dateGetDate(this.a8)) != +(igniteuiWebcomponentsCore.dateGetDate(igniteuiWebcomponentsCore.dateMinValue()))) {
                     var a = "";
-                    if (this.by == null) {
+                    if (this.bz == null) {
                         a = this.a.i(this.value);
                     }
                     else {
                         var b = this.value.getDate().toString();
                         var c = b;
-                        if (this.bg == "dd") {
+                        if (this.bh == "dd") {
                             if (this.value.getDate() < 10) {
                                 b = "0" + b;
                             }
                         }
-                        else if (this.bg == "ddd") {
+                        else if (this.bh == "ddd") {
                             switch (this.value.getDay()) {
                                 case 0:
                                     b = !igniteuiWebcomponentsCore.stringIsNullOrWhiteSpace(this.af.b1("Sunday_Short")) ? this.af.b1("Sunday_Short") : "Sun";
@@ -27784,7 +27891,7 @@
                                     break;
                             }
                         }
-                        else if (this.bg == "dddd") {
+                        else if (this.bh == "dddd") {
                             switch (this.value.getDay()) {
                                 case 0:
                                     b = !igniteuiWebcomponentsCore.stringIsNullOrWhiteSpace(this.af.b1("Sunday_Full")) ? this.af.b1("Sunday_Full") : "Sunday";
@@ -27810,12 +27917,12 @@
                             }
                         }
                         var d = igniteuiWebcomponentsCore.dateGetMonth(this.value).toString();
-                        if (this.bk == "mm") {
+                        if (this.bl == "mm") {
                             if (igniteuiWebcomponentsCore.dateGetMonth(this.value) < 10) {
                                 d = "0" + d;
                             }
                         }
-                        else if (this.bk == "mmm") {
+                        else if (this.bl == "mmm") {
                             switch (igniteuiWebcomponentsCore.dateGetMonth(this.value)) {
                                 case 1:
                                     d = !igniteuiWebcomponentsCore.stringIsNullOrWhiteSpace(this.af.b1("January_Short")) ? this.af.b1("January_Short") : "Jan";
@@ -27855,7 +27962,7 @@
                                     break;
                             }
                         }
-                        else if (this.bk == "mmmm") {
+                        else if (this.bl == "mmmm") {
                             switch (igniteuiWebcomponentsCore.dateGetMonth(this.value)) {
                                 case 1:
                                     d = !igniteuiWebcomponentsCore.stringIsNullOrWhiteSpace(this.af.b1("January_Full")) ? this.af.b1("January_Full") : "January";
@@ -27896,31 +28003,31 @@
                             }
                         }
                         var e = this.value.getFullYear().toString();
-                        if (this.bn == "yy") {
+                        if (this.bo == "yy") {
                             e = e.substr(2);
                         }
-                        if (this.bh == "dmy") {
-                            if (this.bg == "ddd" || this.bg == "dddd") {
-                                a = b + this.bm + d + " " + c + this.bm + e;
+                        if (this.bi == "dmy") {
+                            if (this.bh == "ddd" || this.bh == "dddd") {
+                                a = b + this.bn + d + " " + c + this.bn + e;
                             }
                             else {
-                                a = b + this.bm + d + this.bm + e;
+                                a = b + this.bn + d + this.bn + e;
                             }
                         }
-                        else if (this.bh == "mdy") {
-                            if (this.bg == "ddd" || this.bg == "dddd") {
-                                a = d + " " + c + this.bm + b + this.bm + e;
+                        else if (this.bi == "mdy") {
+                            if (this.bh == "ddd" || this.bh == "dddd") {
+                                a = d + " " + c + this.bn + b + this.bn + e;
                             }
                             else {
-                                a = d + this.bm + b + this.bm + e;
+                                a = d + this.bn + b + this.bn + e;
                             }
                         }
-                        else if (this.bh == "ymd") {
-                            if (this.bg == "ddd" || this.bg == "dddd") {
-                                a = e + this.bm + d + " " + c + this.bm + b;
+                        else if (this.bi == "ymd") {
+                            if (this.bh == "ddd" || this.bh == "dddd") {
+                                a = e + this.bn + d + " " + c + this.bn + b;
                             }
                             else {
-                                a = e + this.bm + d + this.bm + b;
+                                a = e + this.bn + d + this.bn + b;
                             }
                         }
                     }
@@ -27933,7 +28040,7 @@
                 }
             }
         };
-        DatePicker.prototype.cp = function () {
+        XDatePicker.prototype.cq = function () {
             if (this.av == true) {
                 return;
             }
@@ -27944,65 +28051,65 @@
             this.c.ch();
             this.al = false;
         };
-        DatePicker.prototype.c8 = function () {
+        XDatePicker.prototype.c9 = function () {
             this.al = true;
         };
-        DatePicker.prototype.c9 = function () {
+        XDatePicker.prototype.da = function () {
             this.al = false;
         };
-        DatePicker.prototype.cs = function () {
+        XDatePicker.prototype.ct = function () {
             this.u = new igniteuiWebcomponentsCore.Popup();
             this.u.aq = this.aw;
-            this.u.ax = this.a2;
+            this.u.ax = this.a3;
             this.u.cy = igniteuiWebcomponentsCore.BrushUtil.h(255, 255, 255, 255);
             this.u.a8 = 150;
             this.h.at(this.u);
             this.c = new XCalendar();
             this.h.ao(this.c);
-            if (+(this.a9) != +(igniteuiWebcomponentsCore.dateMinValue())) {
-                this.c.au = this.a9;
+            if (+(this.ba) != +(igniteuiWebcomponentsCore.dateMinValue())) {
+                this.c.au = this.ba;
             }
-            if (+(this.a8) != +(igniteuiWebcomponentsCore.dateMaxValue())) {
-                this.c.at = this.a8;
+            if (+(this.a9) != +(igniteuiWebcomponentsCore.dateMaxValue())) {
+                this.c.at = this.a9;
             }
-            if (+(this.ba) != +(igniteuiWebcomponentsCore.dateMinValue())) {
-                this.c.av = this.ba;
+            if (+(this.bb) != +(igniteuiWebcomponentsCore.dateMinValue())) {
+                this.c.av = this.bb;
             }
-            this.c.ae = this.a0;
+            this.c.ae = this.a1;
             this.c.l = this.j;
-            this.c.af = this.a1;
+            this.c.af = this.a2;
             this.c.o = this.l;
             var a = this.c;
-            a.selectedValueChanged = igniteuiWebcomponentsCore.delegateCombine(a.selectedValueChanged, igniteuiWebcomponentsCore.runOn(this, this.cn));
+            a.selectedValueChanged = igniteuiWebcomponentsCore.delegateCombine(a.selectedValueChanged, igniteuiWebcomponentsCore.runOn(this, this.co));
             var b = this.c;
-            b.close = igniteuiWebcomponentsCore.delegateCombine(b.close, igniteuiWebcomponentsCore.runOn(this, this.cm));
+            b.close = igniteuiWebcomponentsCore.delegateCombine(b.close, igniteuiWebcomponentsCore.runOn(this, this.cn));
             this.u.appendPopupContent(this.h.p());
         };
-        DatePicker.prototype.cn = function (a, b) {
+        XDatePicker.prototype.co = function (a, b) {
             this.ai = true;
             this.value = b.newValue;
             this.ai = false;
         };
-        DatePicker.prototype.cm = function (a) {
+        XDatePicker.prototype.cn = function (a) {
             if (this.u.aw) {
                 this.ah = true;
-                this.cq();
+                this.cr();
             }
         };
-        DatePicker.prototype.cx = function () {
+        XDatePicker.prototype.cy = function () {
             if (this.ah == false) {
                 if (this.u.aw) {
-                    this.cq();
+                    this.cr();
                 }
                 else {
-                    this.dc();
+                    this.dd();
                 }
             }
             else {
                 this.ah = false;
             }
         };
-        DatePicker.prototype.dc = function () {
+        XDatePicker.prototype.dd = function () {
             if (this.av) {
                 return;
             }
@@ -28010,27 +28117,27 @@
                 var a = this.h.a0(false);
                 var b = this.h.a()[1];
                 var c = 240;
-                if (this.a0 == true) {
+                if (this.a1 == true) {
                     c = 270;
                 }
                 var d = a.bottom + c;
                 if (b < d) {
                     var e = a.top - c;
                     if (e < 0) {
-                        this.dj(1, 0);
+                        this.dk(1, 0);
                     }
                     else {
-                        this.dj(2, 0);
+                        this.dk(2, 0);
                     }
                 }
                 else {
-                    this.dj(1, 0);
+                    this.dk(1, 0);
                 }
                 this.h.an();
                 this.h.aw(true);
             }
         };
-        DatePicker.prototype.dj = function (a, b) {
+        XDatePicker.prototype.dk = function (a, b) {
             if (this.ax) {
                 this.u.cp(this.h.d.rootWrapper.getNativeElement(), a, b);
             }
@@ -28039,13 +28146,13 @@
                 this.u.showRelativeToExclusionRect(c, a, b);
             }
         };
-        DatePicker.prototype.dm = function () {
+        XDatePicker.prototype.dn = function () {
             if (this.u.aw) {
                 var a = this.h.a0(false);
                 var b = new igniteuiWebcomponentsCore.Rect(0, a.left + window.pageXOffset, a.top + window.pageYOffset, a.width, a.height);
                 var c = this.h.a()[1];
                 var d = 240;
-                if (this.a0 == true) {
+                if (this.a1 == true) {
                     d = 270;
                 }
                 var e = a.bottom + d;
@@ -28072,7 +28179,7 @@
                 }
             }
         };
-        DatePicker.prototype.cq = function () {
+        XDatePicker.prototype.cr = function () {
             var _this = this;
             if (this.u != null) {
                 window.setTimeout(function () { return _this.u.b5(); }, 0);
@@ -28084,7 +28191,7 @@
             this.ah = false;
             this.h.aj();
         };
-        DatePicker.prototype.focus = function (a) {
+        XDatePicker.prototype.focus = function (a) {
             var _this = this;
             if (a === void 0) {
                 a = false;
@@ -28098,15 +28205,15 @@
                         return;
                     }
                     if (this.au == false) {
-                        this.dc();
+                        this.dd();
                         this.ah = true;
-                        window.setTimeout(function () { return _this.cv(); }, 0);
+                        window.setTimeout(function () { return _this.cw(); }, 0);
                     }
                     else {
                         if (this.ay == true && this.ar == false) {
-                            this.dc();
+                            this.dd();
                             this.ah = true;
-                            window.setTimeout(function () { return _this.cv(); }, 0);
+                            window.setTimeout(function () { return _this.cw(); }, 0);
                         }
                     }
                 }
@@ -28115,37 +28222,37 @@
                 }
             }
         };
-        DatePicker.prototype.cw = function () {
+        XDatePicker.prototype.cx = function () {
             this.ah = false;
         };
-        DatePicker.prototype.df = function () {
+        XDatePicker.prototype.dg = function () {
             if (this.o != null) {
                 this.o.dp();
             }
         };
-        DatePicker.prototype.cv = function () {
+        XDatePicker.prototype.cw = function () {
             this.c.cq();
         };
-        DatePicker.prototype.c3 = function () {
+        XDatePicker.prototype.c4 = function () {
             var a = new GotFocusEventArgs();
-            this.c5(a);
+            this.c6(a);
         };
-        DatePicker.prototype.c4 = function () {
+        XDatePicker.prototype.c5 = function () {
             var a = new LostFocusEventArgs();
-            this.c7(a);
+            this.c8(a);
         };
-        DatePicker.prototype.di = function () {
+        XDatePicker.prototype.dj = function () {
         };
-        DatePicker.prototype.dg = function () {
+        XDatePicker.prototype.dh = function () {
         };
-        DatePicker.prototype.bf = function () {
+        XDatePicker.prototype.bg = function () {
             return this.b();
         };
-        DatePicker.prototype.bv = function () {
+        XDatePicker.prototype.bw = function () {
             var a = this.b();
             return a.g();
         };
-        DatePicker.prototype.b = function () {
+        XDatePicker.prototype.b = function () {
             var a = new DatePickerVisualModelExport();
             a.e = this.y;
             a.d = this.w;
@@ -28182,31 +28289,31 @@
             }
             return a;
         };
-        DatePicker.prototype.c5 = function (a) {
+        XDatePicker.prototype.c6 = function (a) {
             if (null != this.gotFocus) {
                 this.gotFocus(this, a);
             }
         };
-        DatePicker.prototype.c7 = function (a) {
+        XDatePicker.prototype.c8 = function (a) {
             if (null != this.lostFocus) {
                 this.lostFocus(this, a);
             }
         };
-        DatePicker.prototype.c6 = function (a) {
+        XDatePicker.prototype.c7 = function (a) {
             if (null != this.keyDown) {
                 this.keyDown(this, a);
             }
         };
-        DatePicker.prototype.c2 = function (a) {
+        XDatePicker.prototype.c3 = function (a) {
             if (null != this.changing) {
                 this.changing(this, a);
             }
         };
-        DatePicker.$t = igniteuiWebcomponentsCore.markType(DatePicker, 'DatePicker', igniteuiWebcomponentsCore.Base.$, [igniteuiWebcomponentsCore.INotifyPropertyChanged_$type]);
-        DatePicker.bq = "M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z";
-        DatePicker.br = "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z";
-        DatePicker.ab = null;
-        return DatePicker;
+        XDatePicker.$t = igniteuiWebcomponentsCore.markType(XDatePicker, 'XDatePicker', igniteuiWebcomponentsCore.Base.$, [igniteuiWebcomponentsCore.INotifyPropertyChanged_$type]);
+        XDatePicker.br = "M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z";
+        XDatePicker.bs = "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z";
+        XDatePicker.ab = null;
+        return XDatePicker;
     }(igniteuiWebcomponentsCore.Base));
 
     /*
@@ -28286,9 +28393,9 @@
         return IgcLostFocusEventArgs;
     }());
 
-    var IgcDatePickerComponent = /** @class */ /*@__PURE__*/ (function (_super) {
-        tslib.__extends(IgcDatePickerComponent, _super);
-        function IgcDatePickerComponent() {
+    var IgcXDatePickerComponent = /** @class */ /*@__PURE__*/ (function (_super) {
+        tslib.__extends(IgcXDatePickerComponent, _super);
+        function IgcXDatePickerComponent() {
             var _this = _super.call(this) || this;
             _this._disconnected = false;
             _this._settingAttributes = false;
@@ -28330,7 +28437,7 @@
             });
             return _this;
         }
-        Object.defineProperty(IgcDatePickerComponent.prototype, "height", {
+        Object.defineProperty(IgcXDatePickerComponent.prototype, "height", {
             get: function () {
                 return this._height;
             },
@@ -28342,7 +28449,7 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgcDatePickerComponent.prototype, "width", {
+        Object.defineProperty(IgcXDatePickerComponent.prototype, "width", {
             get: function () {
                 return this._width;
             },
@@ -28355,26 +28462,26 @@
             configurable: true
         });
         // supports angular themes or custom properties set in CSS
-        IgcDatePickerComponent.prototype.updateStyle = function () {
+        IgcXDatePickerComponent.prototype.updateStyle = function () {
             this._styling(this, this);
         };
-        IgcDatePickerComponent.prototype.destroy = function () {
+        IgcXDatePickerComponent.prototype.destroy = function () {
             this._datePicker.destroy();
         };
-        IgcDatePickerComponent.prototype.createImplementation = function () {
-            return new DatePicker();
+        IgcXDatePickerComponent.prototype.createImplementation = function () {
+            return new XDatePicker();
         };
-        IgcDatePickerComponent.prototype.disconnectedCallback = function () {
+        IgcXDatePickerComponent.prototype.disconnectedCallback = function () {
             this._disconnected = true;
             this._datePicker.provideContainer(null);
         };
-        IgcDatePickerComponent.prototype.connectedCallback = function () {
+        IgcXDatePickerComponent.prototype.connectedCallback = function () {
             if (this._disconnected) {
                 this._disconnected = false;
                 return;
             }
-            this.classList.add("ig-date-picker");
-            this.classList.add("igc-date-picker");
+            this.classList.add("ig-x-date-picker");
+            this.classList.add("igc-x-date-picker");
             var rootWrapper = this._renderer.rootWrapper;
             var rootElement = rootWrapper.getNativeElement();
             this.appendChild(rootElement);
@@ -28393,16 +28500,16 @@
             this._styling(this, this);
             this.afterContentInit();
         };
-        IgcDatePickerComponent.prototype.afterContentInit = function () {
+        IgcXDatePickerComponent.prototype.afterContentInit = function () {
             this.i.notifySizeChanged();
         };
-        IgcDatePickerComponent.prototype.attributeSynced = function (name, value) {
+        IgcXDatePickerComponent.prototype.attributeSynced = function (name, value) {
             // an attribute was set by the component renderer.
             if (name === 'name') {
                 this.i.setName(value);
             }
         };
-        Object.defineProperty(IgcDatePickerComponent.prototype, "i", {
+        Object.defineProperty(IgcXDatePickerComponent.prototype, "i", {
             /**
              * @hidden
              */
@@ -28414,7 +28521,7 @@
             enumerable: false,
             configurable: true
         });
-        IgcDatePickerComponent._createFromInternal = function (internal) {
+        IgcXDatePickerComponent._createFromInternal = function (internal) {
             if (!internal) {
                 return null;
             }
@@ -28428,10 +28535,10 @@
             }
             return igniteuiWebcomponentsCore.TypeRegistrar.create(externalName);
         };
-        IgcDatePickerComponent.prototype._enqueueSetAttribute = function (attrName, attrValue) {
+        IgcXDatePickerComponent.prototype._enqueueSetAttribute = function (attrName, attrValue) {
             this._queuedSetAttributes.push({ attrName: attrName, attrValue: attrValue });
         };
-        IgcDatePickerComponent.prototype._flushQueuedAttributes = function () {
+        IgcXDatePickerComponent.prototype._flushQueuedAttributes = function () {
             this._settingAttributes = true;
             for (var i = 0; i < this._queuedSetAttributes.length; i++) {
                 this.setAttribute(this._queuedSetAttributes[i].attrName, this._queuedSetAttributes[i].attrValue);
@@ -28439,7 +28546,7 @@
             this._settingAttributes = false;
             this._queuedSetAttributes.length = 0;
         };
-        IgcDatePickerComponent.prototype._a = function (attrName, attrValue) {
+        IgcXDatePickerComponent.prototype._a = function (attrName, attrValue) {
             if (this._updatingFromAttribute) {
                 return;
             }
@@ -28456,21 +28563,21 @@
             }
             this._settingAttributes = false;
         };
-        Object.defineProperty(IgcDatePickerComponent, "observedAttributes", {
+        Object.defineProperty(IgcXDatePickerComponent, "observedAttributes", {
             get: function () {
-                if (IgcDatePickerComponent._observedAttributesIgcDatePickerComponent == null) {
-                    var names = igniteuiWebcomponentsCore.getAllPropertyNames(IgcDatePickerComponent);
+                if (IgcXDatePickerComponent._observedAttributesIgcXDatePickerComponent == null) {
+                    var names = igniteuiWebcomponentsCore.getAllPropertyNames(IgcXDatePickerComponent);
                     for (var i = 0; i < names.length; i++) {
                         names[i] = igniteuiWebcomponentsCore.toSpinal(names[i]);
                     }
-                    IgcDatePickerComponent._observedAttributesIgcDatePickerComponent = names;
+                    IgcXDatePickerComponent._observedAttributesIgcXDatePickerComponent = names;
                 }
-                return IgcDatePickerComponent._observedAttributesIgcDatePickerComponent;
+                return IgcXDatePickerComponent._observedAttributesIgcXDatePickerComponent;
             },
             enumerable: false,
             configurable: true
         });
-        IgcDatePickerComponent.prototype.attributeChangedCallback = function (name, oldValue, newValue) {
+        IgcXDatePickerComponent.prototype.attributeChangedCallback = function (name, oldValue, newValue) {
             if (this._settingAttributes) {
                 return;
             }
@@ -28479,13 +28586,13 @@
             this[setName] = newValue;
             this._updatingFromAttribute = false;
         };
-        IgcDatePickerComponent.register = function () {
-            if (!IgcDatePickerComponent._isElementRegistered) {
-                IgcDatePickerComponent._isElementRegistered = true;
-                igniteuiWebcomponentsCore.RegisterElementHelper.registerElement(IgcDatePickerComponent.htmlTagName, IgcDatePickerComponent);
+        IgcXDatePickerComponent.register = function () {
+            if (!IgcXDatePickerComponent._isElementRegistered) {
+                IgcXDatePickerComponent._isElementRegistered = true;
+                igniteuiWebcomponentsCore.RegisterElementHelper.registerElement(IgcXDatePickerComponent.htmlTagName, IgcXDatePickerComponent);
             }
         };
-        Object.defineProperty(IgcDatePickerComponent.prototype, "value", {
+        Object.defineProperty(IgcXDatePickerComponent.prototype, "value", {
             /**
          * Gets or Sets the property name that contains the values.
         */
@@ -28498,47 +28605,47 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgcDatePickerComponent.prototype, "today", {
+        Object.defineProperty(IgcXDatePickerComponent.prototype, "today", {
             /**
              * Gets or Sets the property name that contains the values.
             */
             get: function () {
-                return this.i.ba;
+                return this.i.bb;
             },
             set: function (v) {
-                this.i.ba = v;
+                this.i.bb = v;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgcDatePickerComponent.prototype, "label", {
+        Object.defineProperty(IgcXDatePickerComponent.prototype, "label", {
             /**
              * Gets or Sets the property name that contains the label.
             */
             get: function () {
-                return this.i.b3;
+                return this.i.b4;
             },
             set: function (v) {
-                this.i.b3 = v;
+                this.i.b4 = v;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgcDatePickerComponent.prototype, "labelTextColor", {
+        Object.defineProperty(IgcXDatePickerComponent.prototype, "labelTextColor", {
             /**
              * Gets or sets the color to use for the text.
             */
             get: function () {
-                return igniteuiWebcomponentsCore.brushToString(this.i.dw);
+                return igniteuiWebcomponentsCore.brushToString(this.i.dx);
             },
             set: function (v) {
-                this.i.dw = igniteuiWebcomponentsCore.stringToBrush(v);
-                this._a("labelTextColor", igniteuiWebcomponentsCore.brushToString(this.i.dw));
+                this.i.dx = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("labelTextColor", igniteuiWebcomponentsCore.brushToString(this.i.dx));
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgcDatePickerComponent.prototype, "labelTextStyle", {
+        Object.defineProperty(IgcXDatePickerComponent.prototype, "labelTextStyle", {
             /**
              * Gets or sets the font to use for the combobox.
             */
@@ -28557,46 +28664,46 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgcDatePickerComponent.prototype, "placeholder", {
+        Object.defineProperty(IgcXDatePickerComponent.prototype, "placeholder", {
             /**
              * Gets or Sets the property name that contains the placeholder.
             */
             get: function () {
-                return this.i.cb;
+                return this.i.cc;
             },
             set: function (v) {
-                this.i.cb = v;
+                this.i.cc = v;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgcDatePickerComponent.prototype, "minDate", {
+        Object.defineProperty(IgcXDatePickerComponent.prototype, "minDate", {
             /**
              * Gets or Sets the property name that contains the MinDate.
             */
             get: function () {
-                return this.i.a9;
+                return this.i.ba;
             },
             set: function (v) {
-                this.i.a9 = v;
+                this.i.ba = v;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgcDatePickerComponent.prototype, "maxDate", {
+        Object.defineProperty(IgcXDatePickerComponent.prototype, "maxDate", {
             /**
              * Gets or Sets the property name that contains the MaxDate.
             */
             get: function () {
-                return this.i.a8;
+                return this.i.a9;
             },
             set: function (v) {
-                this.i.a8 = v;
+                this.i.a9 = v;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgcDatePickerComponent.prototype, "density", {
+        Object.defineProperty(IgcXDatePickerComponent.prototype, "density", {
             /**
              * Gets or sets the display density to use for the date pcicker.
             */
@@ -28610,7 +28717,7 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgcDatePickerComponent.prototype, "baseTheme", {
+        Object.defineProperty(IgcXDatePickerComponent.prototype, "baseTheme", {
             /**
              * Gets or sets the base built in theme to use for the date picker.
             */
@@ -28624,7 +28731,7 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgcDatePickerComponent.prototype, "textStyle", {
+        Object.defineProperty(IgcXDatePickerComponent.prototype, "textStyle", {
             /**
              * Gets or sets the font to use for the combobox.
             */
@@ -28643,63 +28750,63 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgcDatePickerComponent.prototype, "textColor", {
+        Object.defineProperty(IgcXDatePickerComponent.prototype, "textColor", {
             /**
              * Gets or Sets the text color
             */
             get: function () {
-                return igniteuiWebcomponentsCore.brushToString(this.i.dx);
+                return igniteuiWebcomponentsCore.brushToString(this.i.dy);
             },
             set: function (v) {
-                this.i.dx = igniteuiWebcomponentsCore.stringToBrush(v);
-                this._a("textColor", igniteuiWebcomponentsCore.brushToString(this.i.dx));
+                this.i.dy = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("textColor", igniteuiWebcomponentsCore.brushToString(this.i.dy));
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgcDatePickerComponent.prototype, "iconColor", {
+        Object.defineProperty(IgcXDatePickerComponent.prototype, "iconColor", {
             /**
              * Gets or Sets the text color
             */
             get: function () {
-                return igniteuiWebcomponentsCore.brushToString(this.i.dv);
+                return igniteuiWebcomponentsCore.brushToString(this.i.dw);
             },
             set: function (v) {
-                this.i.dv = igniteuiWebcomponentsCore.stringToBrush(v);
-                this._a("iconColor", igniteuiWebcomponentsCore.brushToString(this.i.dv));
+                this.i.dw = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("iconColor", igniteuiWebcomponentsCore.brushToString(this.i.dw));
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgcDatePickerComponent.prototype, "showClearButton", {
+        Object.defineProperty(IgcXDatePickerComponent.prototype, "showClearButton", {
             /**
              * Gets or sets the ShowClearButton property to detirmine if the clear button is shown
             */
             get: function () {
-                return this.i.az;
+                return this.i.a0;
             },
             set: function (v) {
-                this.i.az = igniteuiWebcomponentsCore.ensureBool(v);
-                this._a("showClearButton", this.i.az);
+                this.i.a0 = igniteuiWebcomponentsCore.ensureBool(v);
+                this._a("showClearButton", this.i.a0);
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgcDatePickerComponent.prototype, "showTodayButton", {
+        Object.defineProperty(IgcXDatePickerComponent.prototype, "showTodayButton", {
             /**
              * Gets or sets the ShowTodayButton property to detirmine if the today button is shown
             */
             get: function () {
-                return this.i.a0;
+                return this.i.a1;
             },
             set: function (v) {
-                this.i.a0 = igniteuiWebcomponentsCore.ensureBool(v);
-                this._a("showTodayButton", this.i.a0);
+                this.i.a1 = igniteuiWebcomponentsCore.ensureBool(v);
+                this._a("showTodayButton", this.i.a1);
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgcDatePickerComponent.prototype, "allowTextInput", {
+        Object.defineProperty(IgcXDatePickerComponent.prototype, "allowTextInput", {
             /**
              * Gets or sets the AllowTextInput property to detirmine if entering text into the input is allowed
             */
@@ -28713,7 +28820,7 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgcDatePickerComponent.prototype, "openOnFocus", {
+        Object.defineProperty(IgcXDatePickerComponent.prototype, "openOnFocus", {
             /**
              * Gets or sets the AllowTextInput property to detirmine if entering text into the input is allowed
             */
@@ -28727,7 +28834,7 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgcDatePickerComponent.prototype, "firstDayOfWeek", {
+        Object.defineProperty(IgcXDatePickerComponent.prototype, "firstDayOfWeek", {
             /**
              * Gets or sets the FirstDayOfWeek property to detirmine first day of the week
             */
@@ -28741,7 +28848,7 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgcDatePickerComponent.prototype, "firstWeekOfYear", {
+        Object.defineProperty(IgcXDatePickerComponent.prototype, "firstWeekOfYear", {
             /**
              * Gets or sets the FirstWeekOfYear property to detirmine first week of the year
             */
@@ -28755,21 +28862,21 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgcDatePickerComponent.prototype, "showWeekNumbers", {
+        Object.defineProperty(IgcXDatePickerComponent.prototype, "showWeekNumbers", {
             /**
              * Gets or sets the ShowWeekNumbers property to detirmine if the week numbers are shown
             */
             get: function () {
-                return this.i.a1;
+                return this.i.a2;
             },
             set: function (v) {
-                this.i.a1 = igniteuiWebcomponentsCore.ensureBool(v);
-                this._a("showWeekNumbers", this.i.a1);
+                this.i.a2 = igniteuiWebcomponentsCore.ensureBool(v);
+                this._a("showWeekNumbers", this.i.a2);
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgcDatePickerComponent.prototype, "dateFormat", {
+        Object.defineProperty(IgcXDatePickerComponent.prototype, "dateFormat", {
             /**
              * Gets or sets the date time format to use for this column. If FormatString is specificied this value is ignored.
             */
@@ -28783,20 +28890,20 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgcDatePickerComponent.prototype, "formatString", {
+        Object.defineProperty(IgcXDatePickerComponent.prototype, "formatString", {
             /**
              * Gets or sets the Format property to detirmine the format of the date in the input
             */
             get: function () {
-                return this.i.by;
+                return this.i.bz;
             },
             set: function (v) {
-                this.i.by = v;
+                this.i.bz = v;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgcDatePickerComponent.prototype, "isDisabled", {
+        Object.defineProperty(IgcXDatePickerComponent.prototype, "isDisabled", {
             get: function () {
                 return this.i.av;
             },
@@ -28807,7 +28914,7 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgcDatePickerComponent.prototype, "isFixed", {
+        Object.defineProperty(IgcXDatePickerComponent.prototype, "isFixed", {
             /**
              * Indicates that the calendar dropdown will position itself relative to the window instead of the document.
             */
@@ -28821,7 +28928,7 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgcDatePickerComponent.prototype, "openAsChild", {
+        Object.defineProperty(IgcXDatePickerComponent.prototype, "openAsChild", {
             /**
              * Indicates that the dropdown should open as a child of the date picker.
             */
@@ -28835,33 +28942,33 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgcDatePickerComponent.prototype, "useTopLayer", {
+        Object.defineProperty(IgcXDatePickerComponent.prototype, "useTopLayer", {
             /**
              * Indicates that the dropdown will place itself into the browser top layer.
             */
             get: function () {
-                return this.i.a2;
+                return this.i.a3;
             },
             set: function (v) {
-                this.i.a2 = igniteuiWebcomponentsCore.ensureBool(v);
-                this._a("useTopLayer", this.i.a2);
+                this.i.a3 = igniteuiWebcomponentsCore.ensureBool(v);
+                this._a("useTopLayer", this.i.a3);
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgcDatePickerComponent.prototype, "hasUserValues", {
+        Object.defineProperty(IgcXDatePickerComponent.prototype, "hasUserValues", {
             get: function () {
                 return this._hasUserValues;
             },
             enumerable: false,
             configurable: true
         });
-        IgcDatePickerComponent.prototype.__m = function (propertyName) {
+        IgcXDatePickerComponent.prototype.__m = function (propertyName) {
             if (!this._inStyling) {
                 this._hasUserValues.add(propertyName);
             }
         };
-        IgcDatePickerComponent.prototype._styling = function (container, component, parent) {
+        IgcXDatePickerComponent.prototype._styling = function (container, component, parent) {
             if (this._inStyling) {
                 return;
             }
@@ -28873,7 +28980,7 @@
             if (typeName.indexOf("Xam") === 0) {
                 typeName = typeName.substring(3);
             }
-            genericPrefix = igniteuiWebcomponentsCore.toSpinal("DatePickerComponent");
+            genericPrefix = igniteuiWebcomponentsCore.toSpinal("XDatePickerComponent");
             var additionalPrefixes = [];
             var prefix = igniteuiWebcomponentsCore.toSpinal(typeName);
             additionalPrefixes.push(prefix + "-");
@@ -28906,26 +29013,26 @@
             }
             this._inStyling = false;
         };
-        IgcDatePickerComponent.prototype.select = function () {
-            this.i.df();
+        IgcXDatePickerComponent.prototype.select = function () {
+            this.i.dg();
         };
         /**
          * Exports visual information about the current state of the grid.
         
         */
-        IgcDatePickerComponent.prototype.exportVisualModel = function () {
-            var iv = this.i.bf();
+        IgcXDatePickerComponent.prototype.exportVisualModel = function () {
+            var iv = this.i.bg();
             return (iv);
         };
         /**
          * Returns a serialized copy of the exported visual model
         
         */
-        IgcDatePickerComponent.prototype.exportSerializedVisualModel = function () {
-            var iv = this.i.bv();
+        IgcXDatePickerComponent.prototype.exportSerializedVisualModel = function () {
+            var iv = this.i.bw();
             return (iv);
         };
-        Object.defineProperty(IgcDatePickerComponent.prototype, "selectedValueChanged", {
+        Object.defineProperty(IgcXDatePickerComponent.prototype, "selectedValueChanged", {
             /**
              * Called when date is selected.
             */
@@ -28956,7 +29063,7 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgcDatePickerComponent.prototype, "gotFocus", {
+        Object.defineProperty(IgcXDatePickerComponent.prototype, "gotFocus", {
             get: function () {
                 return this._gotFocus;
             },
@@ -28984,7 +29091,7 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgcDatePickerComponent.prototype, "lostFocus", {
+        Object.defineProperty(IgcXDatePickerComponent.prototype, "lostFocus", {
             get: function () {
                 return this._lostFocus;
             },
@@ -29012,7 +29119,7 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgcDatePickerComponent.prototype, "keyDown", {
+        Object.defineProperty(IgcXDatePickerComponent.prototype, "keyDown", {
             get: function () {
                 return this._keyDown;
             },
@@ -29040,7 +29147,7 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgcDatePickerComponent.prototype, "changing", {
+        Object.defineProperty(IgcXDatePickerComponent.prototype, "changing", {
             get: function () {
                 return this._changing;
             },
@@ -29068,7 +29175,7 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgcDatePickerComponent.prototype, "valueChange", {
+        Object.defineProperty(IgcXDatePickerComponent.prototype, "valueChange", {
             get: function () {
                 return this._valueChange;
             },
@@ -29096,10 +29203,10 @@
             enumerable: false,
             configurable: true
         });
-        IgcDatePickerComponent._observedAttributesIgcDatePickerComponent = null;
-        IgcDatePickerComponent.htmlTagName = "igc-date-picker";
-        IgcDatePickerComponent._isElementRegistered = false;
-        return IgcDatePickerComponent;
+        IgcXDatePickerComponent._observedAttributesIgcXDatePickerComponent = null;
+        IgcXDatePickerComponent.htmlTagName = "igc-x-date-picker";
+        IgcXDatePickerComponent._isElementRegistered = false;
+        return IgcXDatePickerComponent;
     }(igniteuiWebcomponentsCore.IgcHTMLElement));
 
     /*
@@ -29108,20 +29215,20 @@
     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.
     */
-    var IgcDatePickerModule = /** @class */ /*@__PURE__*/ (function () {
-        function IgcDatePickerModule() {
+    var IgcXDatePickerModule = /** @class */ /*@__PURE__*/ (function () {
+        function IgcXDatePickerModule() {
         }
-        IgcDatePickerModule.register = function () {
+        IgcXDatePickerModule.register = function () {
             IgcXCalendarModule.register();
             IgcXButtonModule.register();
             IgcXIconModule.register();
             IgcXInputGroupModule.register();
-            IgcDatePickerComponent.register();
-            igniteuiWebcomponentsCore.TypeRegistrar.registerCons('IgcDatePickerComponent', IgcDatePickerComponent);
-            igniteuiWebcomponentsCore.TypeRegistrar.registerCons('IgcDatePickerComponent', IgcDatePickerComponent);
-            igniteuiWebcomponentsCore.TypeRegistrar.register('DatePicker', DatePicker.$type);
+            IgcXDatePickerComponent.register();
+            igniteuiWebcomponentsCore.TypeRegistrar.registerCons('IgcXDatePickerComponent', IgcXDatePickerComponent);
+            igniteuiWebcomponentsCore.TypeRegistrar.registerCons('IgcXDatePickerComponent', IgcXDatePickerComponent);
+            igniteuiWebcomponentsCore.TypeRegistrar.register('XDatePicker', XDatePicker.$type);
         };
-        return IgcDatePickerModule;
+        return IgcXDatePickerModule;
     }());
 
     /*
@@ -30497,7 +30604,7 @@
             $ret.addItem("CheckedBackgroundColor", igniteuiWebcomponentsCore.BrushUtil.h(255, 105, 136, 255));
             $ret.addItem("TickColor", igniteuiWebcomponentsCore.BrushUtil.h(255, 255, 255, 255));
             $ret.addItem("TickStrokeWidth", 3);
-            $ret.addItem("BorderWidth", NaN);
+            $ret.addItem("BorderWidth", 1);
             $ret.addItem("CornerRadius", 2);
             return $ret;
         })()));
@@ -30510,7 +30617,7 @@
             $ret.addItem("CheckedBackgroundColor", igniteuiWebcomponentsCore.BrushUtil.h(255, 105, 136, 255));
             $ret.addItem("TickColor", igniteuiWebcomponentsCore.BrushUtil.h(255, 255, 255, 255));
             $ret.addItem("TickStrokeWidth", 3);
-            $ret.addItem("BorderWidth", NaN);
+            $ret.addItem("BorderWidth", 1);
             $ret.addItem("CornerRadius", 2);
             return $ret;
         })()));
@@ -31508,7 +31615,7 @@
                 if (b != 0) {
                     a.l(",");
                 }
-                a.l(this.i._inner[b].ab());
+                a.l(this.i._inner[b].serialize());
             }
             a.l("]");
             a.l("}");
@@ -35345,6 +35452,9 @@
             var e = d.inputs._inner[0];
             window.setTimeout(function () { return e.dr(b, c); }, 0);
         };
+        XInputBridge.prototype.exportVisualData = function (a) {
+            return a.fe();
+        };
         XInputBridge.$t = igniteuiWebcomponentsCore.markType(XInputBridge, 'XInputBridge', XComponentBridge.$, [igniteuiWebcomponentsCore.INativeUIInputBridge_$type]);
         return XInputBridge;
     }(XComponentBridge));
@@ -35394,12 +35504,12 @@
                     this.y = d;
                     this.af = b;
                     break;
-                case 12:
+                case 13:
                     e.gotFocus = igniteuiWebcomponentsCore.delegateCombine(e.gotFocus, igniteuiWebcomponentsCore.runOn(this, this.ah));
                     this.v = d;
                     this.ab = b;
                     break;
-                case 13:
+                case 14:
                     e.lostFocus = igniteuiWebcomponentsCore.delegateCombine(e.lostFocus, igniteuiWebcomponentsCore.runOn(this, this.ai));
                     this.w = d;
                     this.ad = b;
@@ -35465,7 +35575,7 @@
                     d.clearButtonContent();
                     if (igniteuiWebcomponentsCore.typeCast(igniteuiWebcomponentsCore.NativeUIComponent.$, c) !== null) {
                         this.ac = c;
-                        d.appendButtonContent(this.ac.al);
+                        d.appendButtonContent(this.ac.an);
                     }
                     else {
                         this.ac = c;
@@ -35496,7 +35606,7 @@
                 case 54:
                     if (igniteuiWebcomponentsCore.typeCast(igniteuiWebcomponentsCore.NativeUIComponent.$, c) !== null) {
                         this.aa = c;
-                        d.appendButtonContent(this.aa.al);
+                        d.appendButtonContent(this.aa.an);
                     }
                     break;
                 case 0:
@@ -35554,6 +35664,9 @@
                 case 11:
                     d.aa = c;
                     break;
+                case 83:
+                    d.bu = c;
+                    break;
             }
         };
         XButtonBridge.prototype.getValue = function (a, b) {
@@ -35589,6 +35702,7 @@
                 case 56: return c.as;
                 case 58: return c.aq;
                 case 17: return c.kt;
+                case 83: return c.bu;
             }
             return null;
         };
@@ -35640,6 +35754,9 @@
                 default: return 3;
             }
         };
+        XButtonBridge.prototype.exportVisualData = function (a) {
+            return a.d7();
+        };
         XButtonBridge.$t = igniteuiWebcomponentsCore.markType(XButtonBridge, 'XButtonBridge', XComponentBridge.$);
         return XButtonBridge;
     }(XComponentBridge));
@@ -35731,6 +35848,9 @@
                     break;
             }
         };
+        XCheckboxBridge.prototype.exportVisualData = function (a) {
+            return a.a3();
+        };
         XCheckboxBridge.$t = igniteuiWebcomponentsCore.markType(XCheckboxBridge, 'XCheckboxBridge', XComponentBridge.$);
         return XCheckboxBridge;
     }(XComponentBridge));
@@ -35846,6 +35966,9 @@
                 return;
             }
         };
+        XIconBridge.prototype.exportVisualData = function (a) {
+            return a.au();
+        };
         XIconBridge.$t = igniteuiWebcomponentsCore.markType(XIconBridge, 'XIconBridge', XComponentBridge.$);
         return XIconBridge;
     }(XComponentBridge));
@@ -35906,12 +36029,12 @@
                     this.z = d;
                     this.ah = b;
                     break;
-                case 12:
+                case 13:
                     e.popupGotFocus = igniteuiWebcomponentsCore.delegateCombine(e.popupGotFocus, igniteuiWebcomponentsCore.runOn(this, this.ak));
                     this.w = d;
                     this.ae = b;
                     break;
-                case 13:
+                case 14:
                     e.popupLostFocus = igniteuiWebcomponentsCore.delegateCombine(e.popupLostFocus, igniteuiWebcomponentsCore.runOn(this, this.al));
                     this.x = d;
                     this.af = b;
@@ -35941,12 +36064,12 @@
                     this.z = null;
                     this.ah = null;
                     break;
-                case 12:
+                case 13:
                     e.popupGotFocus = igniteuiWebcomponentsCore.delegateRemove(e.popupGotFocus, igniteuiWebcomponentsCore.runOn(this, this.ak));
                     this.w = null;
                     this.ae = null;
                     break;
-                case 13:
+                case 14:
                     e.popupLostFocus = igniteuiWebcomponentsCore.delegateRemove(e.popupLostFocus, igniteuiWebcomponentsCore.runOn(this, this.al));
                     this.x = null;
                     this.af = null;
@@ -36103,15 +36226,18 @@
                 default: return 0;
             }
         };
+        XPopupBridge.prototype.exportVisualData = function (a) {
+            return a.au();
+        };
         XPopupBridge.prototype.addChild = function (a, b) {
             this.ac.add(b);
             var c = a;
-            c.appendPopupContent(b.al);
+            c.appendPopupContent(b.an);
         };
         XPopupBridge.prototype.insertChild = function (a, b, c) {
             this.ac.add(c);
             var d = a;
-            d.appendPopupContent(c.al);
+            d.appendPopupContent(c.an);
         };
         XPopupBridge.prototype.getChildAt = function (a, b) {
             return this.ac._inner[b];
@@ -36121,12 +36247,12 @@
         };
         XPopupBridge.prototype.removeChild = function (a, b) {
             var c = a;
-            c.removePopupContent(b.al);
+            c.removePopupContent(b.an);
             this.ac.remove(b);
         };
         XPopupBridge.prototype.removeChildAt = function (a, b) {
             var c = a;
-            c.removePopupContent(this.ac._inner[b].al);
+            c.removePopupContent(this.ac._inner[b].an);
             this.ac.removeAt(b);
         };
         XPopupBridge.$t = igniteuiWebcomponentsCore.markType(XPopupBridge, 'XPopupBridge', XComponentBridge.$, [igniteuiWebcomponentsCore.INativeUIPopupBridge_$type]);
@@ -36160,7 +36286,7 @@
             configurable: true
         });
         NativeUIXInputsFactory.j = function () {
-            igniteuiWebcomponentsCore.NativeUIComponent.ap(NativeUIXInputsFactory.b);
+            igniteuiWebcomponentsCore.NativeUIComponent.ar(NativeUIXInputsFactory.b);
         };
         Object.defineProperty(NativeUIXInputsFactory.prototype, "flavor", {
             get: function () {
@@ -36222,7 +36348,7 @@
             f.inputs.add(j);
             var l = new XInputBridge(f);
             var m = new igniteuiWebcomponentsCore.NativeUIInput();
-            m.al = d;
+            m.an = d;
             m.d = l;
             b(m);
         };
@@ -36236,7 +36362,7 @@
             var g = e.getExternal(f, e.rootWrapper, e.getExternal(f, null, null));
             var h = new XButtonBridge(f);
             var i = new igniteuiWebcomponentsCore.NativeUIButton();
-            i.al = d;
+            i.an = d;
             i.d = h;
             b(i);
         };
@@ -36249,7 +36375,7 @@
             var g = e.getExternal(f, e.rootWrapper, e.getExternal(f, null, null));
             var h = new XCheckboxBridge(f);
             var i = new igniteuiWebcomponentsCore.NativeUICheckbox();
-            i.al = d;
+            i.an = d;
             i.d = h;
             b(i);
         };
@@ -36262,7 +36388,7 @@
             var g = e.getExternal(f, e.rootWrapper, e.getExternal(f, null, null));
             var h = new XIconBridge(f);
             var i = new igniteuiWebcomponentsCore.NativeUIIcon();
-            i.al = d;
+            i.an = d;
             i.d = h;
             var j = c.createElement("div");
             var k = c.getSubRenderer(j);
@@ -36273,9 +36399,9 @@
             var m = k.getExternal(l, k.rootWrapper, k.getExternal(l, null, null));
             var n = new XButtonBridge(l);
             var o = new igniteuiWebcomponentsCore.NativeUIButton();
-            o.al = j;
+            o.an = j;
             o.d = n;
-            o.bk = i;
+            o.bm = i;
             b(o);
         };
         NativeUIXInputsFactory.prototype.f = function (a, b) {
@@ -36287,7 +36413,7 @@
             var g = e.getExternal(f, e.rootWrapper, e.getExternal(f, null, null));
             var h = new XIconBridge(f);
             var i = new igniteuiWebcomponentsCore.NativeUIIcon();
-            i.al = d;
+            i.an = d;
             i.d = h;
             b(i);
         };
@@ -36299,7 +36425,7 @@
             f.provideRenderer(e);
             var g = new XPopupBridge(f);
             var h = new igniteuiWebcomponentsCore.NativeUIPopup();
-            h.al = d;
+            h.an = d;
             h.d = g;
             b(h);
         };
@@ -36342,7 +36468,7 @@
             switch (a) {
                 case 16:
                 case 15:
-                case 17: return this.al.t.view.s;
+                case 17: return this.al.t.view.v;
             }
             return _super.prototype.getTargetForProperty.call(this, a, b);
         };
@@ -36470,6 +36596,67 @@
     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.
     */
 
+    /*
+    THIS INFRAGISTICS ULTIMATE SOFTWARE LICENSE  AGREEMENT ("AGREEMENT") LOCATED HERE:
+    https://www.infragistics.com/legal/license/igultimate-la
+    https://www.infragistics.com/legal/license/igultimate-eula
+    GOVERNS THE LICENSING, INSTALLATION AND USE OF INFRAGISTICS SOFTWARE. BY DOWNLOADING AND/OR INSTALLING AND USING INFRAGISTICS SOFTWARE:  you are indicating that you have read and understand this Agreement, and agree to be legally bound by it on behalf of the yourself and your company.
+    */
+    /**
+     * @hidden
+     */
+    var TextBlockVisualModelExport = /** @class */ /*@__PURE__*/ (function (_super) {
+        tslib.__extends(TextBlockVisualModelExport, _super);
+        function TextBlockVisualModelExport() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.c = 0;
+            _this.e = 0;
+            _this.f = 0;
+            _this.b = 0;
+            _this.a = null;
+            _this.k = null;
+            _this.l = null;
+            _this.m = null;
+            _this.d = 0;
+            _this.i = null;
+            _this.j = null;
+            _this.h = null;
+            return _this;
+        }
+        TextBlockVisualModelExport.prototype.g = function () {
+            var a = new igniteuiWebcomponentsCore.StringBuilder(0);
+            a.l("{");
+            a.l("left: " + this.c + ", ");
+            a.l("top: " + this.e + ", ");
+            a.l("width: " + this.f + ", ");
+            a.l("height: " + this.b + ", ");
+            a.l("text : \"" + this.h + "\", ");
+            a.l("actualTextColor: " + this.a.serialize() + ", ");
+            if (!igniteuiWebcomponentsCore.stringIsNullOrEmpty(this.k)) {
+                a.l("textStyleFontStyle: \"" + this.k + "\", ");
+            }
+            if (!igniteuiWebcomponentsCore.stringIsNullOrEmpty(this.l)) {
+                a.l("textStyleFontVariant: \"" + this.l + "\", ");
+            }
+            if (!igniteuiWebcomponentsCore.stringIsNullOrEmpty(this.m)) {
+                a.l("textStyleFontWeight: \"" + this.m + "\", ");
+            }
+            if (!igniteuiWebcomponentsCore.stringIsNullOrEmpty(this.i)) {
+                a.l("textStyleFontFamily: \"" + this.i + "\", ");
+            }
+            if (!igniteuiWebcomponentsCore.stringIsNullOrEmpty(this.j)) {
+                a.l("textStyleFontStretch: \"" + this.j + "\", ");
+            }
+            if (!igniteuiWebcomponentsCore.isNaN_(this.d)) {
+                a.l("textStyleFontSize: " + this.d + ", ");
+            }
+            a.l("}");
+            return a.toString();
+        };
+        TextBlockVisualModelExport.$t = igniteuiWebcomponentsCore.markType(TextBlockVisualModelExport, 'TextBlockVisualModelExport');
+        return TextBlockVisualModelExport;
+    }(igniteuiWebcomponentsCore.Base));
+
     exports.ButtonClickEventArgs = ButtonClickEventArgs;
     exports.ButtonDisplayStyle_$type = ButtonDisplayStyle_$type;
     exports.ButtonGroupDisplayStyle_$type = ButtonGroupDisplayStyle_$type;
@@ -36488,7 +36675,6 @@
     exports.CheckboxVisualModelExport = CheckboxVisualModelExport;
     exports.DateFormats = DateFormats;
     exports.DateFormats_$type = DateFormats_$type;
-    exports.DatePicker = DatePicker;
     exports.DatePickerView = DatePickerView;
     exports.DatePickerVisualModelExport = DatePickerVisualModelExport;
     exports.DateTimeValueFormatter = DateTimeValueFormatter;
@@ -36505,8 +36691,6 @@
     exports.IgcButtonClickEventArgs = IgcButtonClickEventArgs;
     exports.IgcButtonGroupSelectionChangedEventArgs = IgcButtonGroupSelectionChangedEventArgs;
     exports.IgcCheckboxChangeEventArgs = IgcCheckboxChangeEventArgs;
-    exports.IgcDatePickerComponent = IgcDatePickerComponent;
-    exports.IgcDatePickerModule = IgcDatePickerModule;
     exports.IgcGotFocusEventArgs = IgcGotFocusEventArgs;
     exports.IgcInputChangeEventArgs = IgcInputChangeEventArgs;
     exports.IgcLostFocusEventArgs = IgcLostFocusEventArgs;
@@ -36521,6 +36705,8 @@
     exports.IgcXCalendarModule = IgcXCalendarModule;
     exports.IgcXCheckboxComponent = IgcXCheckboxComponent;
     exports.IgcXCheckboxModule = IgcXCheckboxModule;
+    exports.IgcXDatePickerComponent = IgcXDatePickerComponent;
+    exports.IgcXDatePickerModule = IgcXDatePickerModule;
     exports.IgcXIconComponent = IgcXIconComponent;
     exports.IgcXIconModule = IgcXIconModule;
     exports.IgcXInputComponent = IgcXInputComponent;
@@ -36566,6 +36752,7 @@
     exports.SuffixShiftType_$type = SuffixShiftType_$type;
     exports.SuffixView = SuffixView;
     exports.SuffixVisualModelExport = SuffixVisualModelExport;
+    exports.TextBlockVisualModelExport = TextBlockVisualModelExport;
     exports.TextElementsVisualModelExport = TextElementsVisualModelExport;
     exports.Theme = Theme;
     exports.ThemeResolver = ThemeResolver;
@@ -36578,6 +36765,7 @@
     exports.XCheckbox = XCheckbox;
     exports.XCheckboxBridge = XCheckboxBridge;
     exports.XComponentBridge = XComponentBridge;
+    exports.XDatePicker = XDatePicker;
     exports.XIcon = XIcon;
     exports.XIconBridge = XIconBridge;
     exports.XIconButtonBridge = XIconButtonBridge;