igniteui-angular-inputs 18.0.0 → 18.1.1

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

@@ -956,17 +956,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;
@@ -979,7 +979,7 @@
             _this.l = false;
             return _this;
         }
-        ButtonVisualModelExport.prototype.ab = function () {
+        ButtonVisualModelExport.prototype.serialize = function () {
             var a = new igniteuiAngularCore.StringBuilder(0);
             a.l("{");
             a.l("top : " + this.s + ", ");
@@ -1000,20 +1000,20 @@
             a.l("actualElevationMode : " + this.j + ", ");
             a.l("actualTextColor : " + this.f.serialize() + ", ");
             a.l("actualBorderWidth : " + this.o + ", ");
+            if (!igniteuiAngularCore.stringIsNullOrEmpty(this.ad)) {
+                a.l("textStyleFontStyle : \"" + this.ad + "\", ");
+            }
             if (!igniteuiAngularCore.stringIsNullOrEmpty(this.ae)) {
-                a.l("textStyleFontStyle : \"" + this.ae + "\", ");
+                a.l("textStyleFontVariant : \"" + this.ae + "\", ");
             }
             if (!igniteuiAngularCore.stringIsNullOrEmpty(this.af)) {
-                a.l("textStyleFontVariant : \"" + this.af + "\", ");
+                a.l("textStyleFontWeight : \"" + this.af + "\", ");
             }
-            if (!igniteuiAngularCore.stringIsNullOrEmpty(this.ag)) {
-                a.l("textStyleFontWeight : \"" + this.ag + "\", ");
+            if (!igniteuiAngularCore.stringIsNullOrEmpty(this.ab)) {
+                a.l("textStyleFontFamily : \"" + this.ab + "\", ");
             }
             if (!igniteuiAngularCore.stringIsNullOrEmpty(this.ac)) {
-                a.l("textStyleFontFamily : \"" + this.ac + "\", ");
-            }
-            if (!igniteuiAngularCore.stringIsNullOrEmpty(this.ad)) {
-                a.l("textStyleFontStretch : \"" + this.ad + "\", ");
+                a.l("textStyleFontStretch : \"" + this.ac + "\", ");
             }
             if (!igniteuiAngularCore.isNaN_(this.r)) {
                 a.l("textStyleFontSize : " + this.r + ", ");
@@ -1033,7 +1033,7 @@
             a.l("}");
             return a.toString();
         };
-        ButtonVisualModelExport.$t = igniteuiAngularCore.markType(ButtonVisualModelExport, 'ButtonVisualModelExport');
+        ButtonVisualModelExport.$t = igniteuiAngularCore.markType(ButtonVisualModelExport, 'ButtonVisualModelExport', igniteuiAngularCore.Base.$, [igniteuiAngularCore.IVisualData_$type]);
         return ButtonVisualModelExport;
     }(igniteuiAngularCore.Base));
 
@@ -1239,10 +1239,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 (!igniteuiAngularCore.isNaN_(this.b.bf) && this.b.bf > 0) {
                 this.n.setStyleProperty("border-style", "solid");
             }
@@ -1260,11 +1263,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) {
@@ -4562,17 +4560,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 = igniteuiAngularCore.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 = igniteuiAngularCore.NativeUI.d(a);
             c.t = igniteuiAngularCore.NativeUI.k(a);
             c.h = this.n;
@@ -4583,7 +4579,7 @@
             c.a = igniteuiAngularCore.AppearanceHelper.a(this.ne);
             c.u = this.ct;
             c.e = igniteuiAngularCore.AppearanceHelper.a(this.np);
-            c.ah = this.kr;
+            c.ag = this.kr;
             c.b = igniteuiAngularCore.AppearanceHelper.a(igniteuiAngularCore.NativeUI.aj(a));
             c.j = this.u;
             c.f = igniteuiAngularCore.AppearanceHelper.a(igniteuiAngularCore.NativeUI.al(b));
@@ -4599,31 +4595,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 = igniteuiAngularCore.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 = igniteuiAngularCore.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 (!igniteuiAngularCore.isNaN_(g.f)) {
-                    c.r = g.f;
+                if (!igniteuiAngularCore.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;
@@ -5031,22 +5027,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", {
@@ -5059,36 +5057,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 igniteuiAngularCore.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 (!igniteuiAngularCore.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 (!igniteuiAngularCore.stringIsNullOrEmpty(this.q)) {
+                a.l("textStyleFontStyle : \"" + this.q + "\", ");
             }
-            if (!igniteuiAngularCore.stringIsNullOrEmpty(this.p)) {
-                a.l("textStyleFontVariant : \"" + this.p + "\", ");
+            if (!igniteuiAngularCore.stringIsNullOrEmpty(this.r)) {
+                a.l("textStyleFontVariant : \"" + this.r + "\", ");
             }
-            if (!igniteuiAngularCore.stringIsNullOrEmpty(this.q)) {
-                a.l("textStyleFontWeight : \"" + this.q + "\", ");
+            if (!igniteuiAngularCore.stringIsNullOrEmpty(this.s)) {
+                a.l("textStyleFontWeight : \"" + this.s + "\", ");
             }
-            if (!igniteuiAngularCore.stringIsNullOrEmpty(this.m)) {
-                a.l("textStyleFontFamily : \"" + this.m + "\", ");
+            if (!igniteuiAngularCore.stringIsNullOrEmpty(this.o)) {
+                a.l("textStyleFontFamily : \"" + this.o + "\", ");
             }
-            if (!igniteuiAngularCore.stringIsNullOrEmpty(this.n)) {
-                a.l("textStyleFontStretch : \"" + this.n + "\", ");
+            if (!igniteuiAngularCore.stringIsNullOrEmpty(this.p)) {
+                a.l("textStyleFontStretch : \"" + this.p + "\", ");
             }
-            if (!igniteuiAngularCore.isNaN_(this.g)) {
-                a.l("textStyleFontSize : " + this.g + ", ");
+            if (!igniteuiAngularCore.isNaN_(this.h)) {
+                a.l("textStyleFontSize : " + this.h + ", ");
             }
             a.l("}");
             return a.toString();
@@ -5110,71 +5123,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 igniteuiAngularCore.List$1(igniteuiAngularCore.Delegate_$type, 0);
-            _this.n = null;
-            _this.o = null;
-            _this.p = null;
+            _this.d = null;
+            _this.v = null;
+            _this.g = null;
+            _this.o = new igniteuiAngularCore.List$1(igniteuiAngularCore.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 igniteuiAngularCore.Dictionary$2(igniteuiAngularCore.Brush.$, igniteuiAngularCore.String_$type, 0);
+            _this.j = true;
             _this.y = null;
-            _this.k = new igniteuiAngularCore.Dictionary$2(igniteuiAngularCore.Brush.$, igniteuiAngularCore.String_$type, 0);
-            _this.g = true;
-            _this.v = null;
-            _this.u = null;
-            _this.t = null;
-            _this.m = new igniteuiAngularCore.List$1(igniteuiAngularCore.DomWrapper_$type, 0);
-            _this.n = new igniteuiAngularCore.List$1(igniteuiAngularCore.Tuple$2.$.specialize(igniteuiAngularCore.SVGNode.$, igniteuiAngularCore.Base.$), 0);
-            _this.o = new igniteuiAngularCore.List$1(igniteuiAngularCore.Tuple$2.$.specialize(igniteuiAngularCore.SVGNode.$, igniteuiAngularCore.Base.$), 0);
-            _this.p = new igniteuiAngularCore.List$1(igniteuiAngularCore.Tuple$2.$.specialize(igniteuiAngularCore.SVGNode.$, igniteuiAngularCore.Base.$), 0);
+            _this.x = null;
+            _this.w = null;
+            _this.p = new igniteuiAngularCore.List$1(igniteuiAngularCore.DomWrapper_$type, 0);
             _this.q = new igniteuiAngularCore.List$1(igniteuiAngularCore.Tuple$2.$.specialize(igniteuiAngularCore.SVGNode.$, igniteuiAngularCore.Base.$), 0);
             _this.r = new igniteuiAngularCore.List$1(igniteuiAngularCore.Tuple$2.$.specialize(igniteuiAngularCore.SVGNode.$, igniteuiAngularCore.Base.$), 0);
-            _this.d = new igniteuiAngularCore.FastIterationDictionary$2(igniteuiAngularCore.String_$type, igniteuiAngularCore.List$1.$.specialize(igniteuiAngularCore.Tuple$2.$.specialize(igniteuiAngularCore.SVGNode.$, igniteuiAngularCore.Base.$)), 0);
+            _this.s = new igniteuiAngularCore.List$1(igniteuiAngularCore.Tuple$2.$.specialize(igniteuiAngularCore.SVGNode.$, igniteuiAngularCore.Base.$), 0);
+            _this.t = new igniteuiAngularCore.List$1(igniteuiAngularCore.Tuple$2.$.specialize(igniteuiAngularCore.SVGNode.$, igniteuiAngularCore.Base.$), 0);
+            _this.u = new igniteuiAngularCore.List$1(igniteuiAngularCore.Tuple$2.$.specialize(igniteuiAngularCore.SVGNode.$, igniteuiAngularCore.Base.$), 0);
             _this.e = new igniteuiAngularCore.FastIterationDictionary$2(igniteuiAngularCore.String_$type, igniteuiAngularCore.List$1.$.specialize(igniteuiAngularCore.Tuple$2.$.specialize(igniteuiAngularCore.SVGNode.$, igniteuiAngularCore.Base.$)), 0);
+            _this.f = new igniteuiAngularCore.FastIterationDictionary$2(igniteuiAngularCore.String_$type, igniteuiAngularCore.List$1.$.specialize(igniteuiAngularCore.Tuple$2.$.specialize(igniteuiAngularCore.SVGNode.$, igniteuiAngularCore.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(igniteuiAngularCore.fromEnum(this.l)), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    for (var _b = tslib.__values(igniteuiAngularCore.fromEnum(this.o)), _c = _b.next(); !_c.done; _c = _b.next()) {
                         var b = _c.value;
                         b();
                     }
@@ -5192,109 +5205,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", igniteuiAngularCore.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", igniteuiAngularCore.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", igniteuiAngularCore.isNaN_(this.c.aq) ? "1.5rem" : this.c.aq + "px");
-            this.s.rootWrapper.setStyleProperty("height", igniteuiAngularCore.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 = igniteuiAngularCore.isNaN_(this.c.an) ? 0 : this.c.an;
-            var b = igniteuiAngularCore.isNaN_(this.c.ao) ? 0 : this.c.ao;
-            var c = igniteuiAngularCore.isNaN_(this.c.ap) ? 24 : this.c.ap;
-            var d = igniteuiAngularCore.isNaN_(this.c.am) ? 24 : this.c.am;
-            this.v.setAttribute("viewBox", a + " " + b + " " + c + " " + d);
+            this.v.rootWrapper.setStyleProperty("width", igniteuiAngularCore.isNaN_(this.d.aq) ? "1.5rem" : this.d.aq + "px");
+            this.v.rootWrapper.setStyleProperty("height", igniteuiAngularCore.isNaN_(this.d.ai) ? "1.5rem" : this.d.ai + "px");
         };
-        IconView.prototype.ai = function (a, b) {
+        IconView.prototype.aw = function () {
+            var a = igniteuiAngularCore.isNaN_(this.d.an) ? 0 : this.d.an;
+            var b = igniteuiAngularCore.isNaN_(this.d.ao) ? 0 : this.d.ao;
+            var c = igniteuiAngularCore.isNaN_(this.d.ap) ? 24 : this.d.ap;
+            var d = igniteuiAngularCore.isNaN_(this.d.am) ? 24 : this.d.am;
+            this.y.setAttribute("viewBox", a + " " + b + " " + c + " " + d);
+        };
+        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());
@@ -5304,60 +5317,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 {
                 igniteuiAngularCore.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 {
                 igniteuiAngularCore.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", igniteuiAngularCore.runOn(this, this.aa)));
-            this.l.add(this.s.rootWrapper.listen("mouseleave", igniteuiAngularCore.runOn(this, this.ab)));
+        IconView.prototype.ag = function () {
+            this.j = true;
+            this.o.add(this.v.rootWrapper.listen("mouseenter", igniteuiAngularCore.runOn(this, this.ad)));
+            this.o.add(this.v.rootWrapper.listen("mouseleave", igniteuiAngularCore.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(igniteuiAngularCore.fromEnum(this.l)), _c = _b.next(); !_c.done; _c = _b.next()) {
+                for (var _b = tslib.__values(igniteuiAngularCore.fromEnum(this.o)), _c = _b.next(); !_c.done; _c = _b.next()) {
                     var a = _c.value;
                     a();
                 }
@@ -5375,15 +5388,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);
@@ -5391,8 +5404,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 igniteuiAngularCore.List$1(igniteuiAngularCore.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 igniteuiAngularCore.Path();
+                        $ret.an = a.w;
+                        return $ret;
+                    })());
+                    this.aq(c, a);
+                    b = new igniteuiAngularCore.PathVisualData(1, "path1", c);
+                    break;
+                case 3:
+                    var d = a;
+                    var e = new igniteuiAngularCore.Line();
+                    e.an = d.w;
+                    e.ao = d.x;
+                    e.ap = d.y;
+                    e.aq = d.z;
+                    this.aq(e, a);
+                    b = new igniteuiAngularCore.LineVisualData(1, "line1", e);
+                    break;
+                case 4:
+                    var f = a;
+                    var g = new igniteuiAngularCore.Rectangle();
+                    g.width = f.z;
+                    g.height = f.w;
+                    g.ap = f.x;
+                    g.aq = f.y;
+                    this.aq(g, a);
+                    b = new igniteuiAngularCore.RectangleVisualData(1, "rect1", g);
+                    break;
+                case 5:
+                case 6:
+                    var h = a;
+                    var i = new igniteuiAngularCore.Ellipse();
+                    i.width = h.y * 2;
+                    i.height = h.z * 2;
+                    this.aq(i, a);
+                    b = new igniteuiAngularCore.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 igniteuiAngularCore.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 (igniteuiAngularCore.typeCast(igniteuiAngularCore.Path.$, a) !== null) {
+                return new igniteuiAngularCore.PathVisualData(1, "path1", a);
+            }
+            else if (igniteuiAngularCore.typeCast(igniteuiAngularCore.Line.$, a) !== null) {
+                return new igniteuiAngularCore.LineVisualData(1, "line1", a);
+            }
+            else if (igniteuiAngularCore.typeCast(igniteuiAngularCore.Rectangle.$, a) !== null) {
+                return new igniteuiAngularCore.RectangleVisualData(1, "rect1", a);
+            }
+            else if (igniteuiAngularCore.typeCast(igniteuiAngularCore.Ellipse.$, a) !== null) {
+                return new igniteuiAngularCore.EllipseVisualData(1, "ellipse1", a);
+            }
+            return null;
         };
         IconView.$t = igniteuiAngularCore.markType(IconView, 'IconView');
         return IconView;
@@ -5445,9 +5552,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", {
@@ -5515,11 +5622,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;
             }
         };
@@ -5543,18 +5650,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 () {
-            igniteuiAngularCore.NativeUI.y(this.view.w, this.ak);
+            igniteuiAngularCore.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;
                 igniteuiAngularCore.NativeUI.r(b, this.cw);
                 igniteuiAngularCore.NativeUI.aa(b, this.cx);
                 igniteuiAngularCore.NativeUI.ad(b, this.af);
@@ -5563,22 +5670,22 @@
                 var c = false;
                 if (this.svgPath != null) {
                     if (igniteuiAngularCore.stringStartsWith(igniteuiAngularCore.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 = igniteuiAngularCore.NativeUI.r;
                         var f = igniteuiAngularCore.NativeUI.aa;
                         this.cd();
-                        e = igniteuiAngularCore.runOn(this.view, this.view.aj);
-                        f = igniteuiAngularCore.runOn(this.view, this.view.ak);
+                        e = igniteuiAngularCore.runOn(this.view, this.view.an);
+                        f = igniteuiAngularCore.runOn(this.view, this.view.ao);
                         for (var g = 0; g < d.length; g++) {
                             if (this.cw != null) {
                                 e(d[g], this.cw);
@@ -5601,63 +5708,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;
-                        igniteuiAngularCore.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;
+                        igniteuiAngularCore.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;
-                        igniteuiAngularCore.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;
+                        igniteuiAngularCore.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;
-                        igniteuiAngularCore.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;
+                        igniteuiAngularCore.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;
-                        igniteuiAngularCore.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;
+                        igniteuiAngularCore.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;
-                                igniteuiAngularCore.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;
+                                igniteuiAngularCore.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;
-                                igniteuiAngularCore.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;
+                                igniteuiAngularCore.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;
-                        igniteuiAngularCore.NativeUI.r(this.view.n._inner[ab].d, ac.l.f(this.cw));
-                        igniteuiAngularCore.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;
+                        igniteuiAngularCore.NativeUI.r(this.view.q._inner[ab].d, ac.l.f(this.cw));
+                        igniteuiAngularCore.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) {
                     igniteuiAngularCore.NativeUI.r(ad, this.cw);
                 }
@@ -5669,25 +5776,25 @@
                 }
             }
             if (this.m != null) {
-                this.view.aq(this.m);
+                this.view.av(this.m);
             }
             if (this.cy != null) {
-                igniteuiAngularCore.NativeUI.q(this.view.w, this.cy);
+                igniteuiAngularCore.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(igniteuiAngularCore.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) {
@@ -5708,7 +5815,7 @@
                 try {
                     for (var _e = tslib.__values(igniteuiAngularCore.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) {
@@ -6247,10 +6354,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) {
@@ -6261,61 +6368,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 = igniteuiAngularCore.AppearanceHelper.a(igniteuiAngularCore.NativeUI.al(b));
-            a.c = igniteuiAngularCore.AppearanceHelper.a(igniteuiAngularCore.NativeUI.al(b));
-            a.b = igniteuiAngularCore.AppearanceHelper.a(igniteuiAngularCore.NativeUI.am(b));
-            a.d = this.af;
-            var c = this.view.a();
-            a.h = c[0];
-            a.f = c[1];
-            a.e = igniteuiAngularCore.NativeUI.d(b);
-            a.i = igniteuiAngularCore.NativeUI.k(b);
+            var b = this.view.b();
+            a.i = b[0];
+            a.g = b[1];
+            a.f = igniteuiAngularCore.NativeUI.d(this.view.z);
+            a.j = igniteuiAngularCore.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 = igniteuiAngularCore.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 = igniteuiAngularCore.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 (!igniteuiAngularCore.isNaN_(d.f)) {
-                    a.g = d.f;
+                if (!igniteuiAngularCore.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 = igniteuiAngularCore.markType(XIcon, 'XIcon', igniteuiAngularCore.Base.$, [igniteuiAngularCore.INotifyPropertyChanged_$type, igniteuiAngularCore.IIcon_$type]);
         XIcon.cz = null;
@@ -6478,7 +6582,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: [");
@@ -7812,7 +7916,7 @@
         };
         CalendarView.prototype.ag = function (e_) {
             var a = (e_.originalEvent.currentTarget);
-            var b = a.innerText;
+            var b = (a.textContent);
             if (b != "") {
                 var c = a.lastChild.lastChild.lastChild;
                 var d = igniteuiAngularCore.parseBool(c.getAttribute("data-disabled").toString());
@@ -22266,7 +22370,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();
@@ -22292,7 +22396,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");
@@ -22305,7 +22409,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");
@@ -22391,7 +22495,7 @@
         };
         DatePickerView.prototype.av = function () {
             if (this.f != null) {
-                if (this.b.az == true) {
+                if (this.b.a0 == true) {
                     this.f.show();
                 }
                 else {
@@ -22405,7 +22509,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 });
@@ -22420,9 +22524,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 {
@@ -22432,7 +22536,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 {
@@ -22461,60 +22565,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) {
@@ -22551,9 +22655,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;
@@ -22563,32 +22667,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 = igniteuiAngularCore.dateMinValue();
+            _this.a6 = igniteuiAngularCore.dateMinValue();
             _this.ai = false;
             _this.propertyChanged = null;
             _this.selectedValueChanged = null;
             _this.ae = null;
+            _this.a8 = igniteuiAngularCore.dateMinValue();
             _this.a7 = igniteuiAngularCore.dateMinValue();
-            _this.a6 = igniteuiAngularCore.dateMinValue();
-            _this.bj = "";
-            _this.dt = igniteuiAngularCore.BrushUtil.h(255, 24, 29, 31);
+            _this.bk = "";
+            _this.du = igniteuiAngularCore.BrushUtil.h(255, 24, 29, 31);
             _this.z = null;
-            _this.bl = "";
-            _this.a4 = igniteuiAngularCore.dateMinValue();
-            _this.a3 = igniteuiAngularCore.dateMaxValue();
+            _this.bm = "";
+            _this.a5 = igniteuiAngularCore.dateMinValue();
+            _this.a4 = igniteuiAngularCore.dateMaxValue();
             _this.x = 2;
             _this.v = 1;
             _this.aa = null;
-            _this.du = igniteuiAngularCore.BrushUtil.h(255, 24, 29, 31);
-            _this.ds = igniteuiAngularCore.BrushUtil.h(255, 163, 172, 184);
+            _this.dv = igniteuiAngularCore.BrushUtil.h(255, 24, 29, 31);
+            _this.dt = igniteuiAngularCore.BrushUtil.h(255, 163, 172, 184);
             _this.ao = true;
             _this.ap = false;
             _this.ag = true;
@@ -22598,9 +22702,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;
@@ -22613,15 +22717,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();
@@ -22631,28 +22735,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 = igniteuiAngularCore.delegateRemove(a.selectedValueChanged, igniteuiAngularCore.runOn(this, this.cn));
+                a.selectedValueChanged = igniteuiAngularCore.delegateRemove(a.selectedValueChanged, igniteuiAngularCore.runOn(this, this.co));
                 var b = this.c;
-                b.close = igniteuiAngularCore.delegateRemove(b.close, igniteuiAngularCore.runOn(this, this.cm));
+                b.close = igniteuiAngularCore.delegateRemove(b.close, igniteuiAngularCore.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 igniteuiAngularCore.SRProvider(this.h.d);
@@ -22663,64 +22767,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;
             },
@@ -22728,55 +22832,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;
             },
@@ -22784,13 +22888,13 @@
                 var b = this.x;
                 this.x = a;
                 if (b != this.x) {
-                    this.da("Density", igniteuiAngularCore.enumGetBox(igniteuiAngularCore.ControlDisplayDensity_$type, b), igniteuiAngularCore.enumGetBox(igniteuiAngularCore.ControlDisplayDensity_$type, this.x));
+                    this.db("Density", igniteuiAngularCore.enumGetBox(igniteuiAngularCore.ControlDisplayDensity_$type, b), igniteuiAngularCore.enumGetBox(igniteuiAngularCore.ControlDisplayDensity_$type, this.x));
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(DatePicker.prototype, "w", {
+        Object.defineProperty(XDatePicker.prototype, "w", {
             get: function () {
                 return this.v;
             },
@@ -22798,13 +22902,13 @@
                 var b = this.v;
                 this.v = a;
                 if (b != this.v) {
-                    this.da("BaseTheme", igniteuiAngularCore.enumGetBox(igniteuiAngularCore.BaseControlTheme_$type, b), igniteuiAngularCore.enumGetBox(igniteuiAngularCore.BaseControlTheme_$type, this.v));
+                    this.db("BaseTheme", igniteuiAngularCore.enumGetBox(igniteuiAngularCore.BaseControlTheme_$type, b), igniteuiAngularCore.enumGetBox(igniteuiAngularCore.BaseControlTheme_$type, this.v));
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(DatePicker.prototype, "ad", {
+        Object.defineProperty(XDatePicker.prototype, "ad", {
             get: function () {
                 return this.aa;
             },
@@ -22812,41 +22916,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;
             },
@@ -22854,13 +22958,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;
             },
@@ -22868,13 +22972,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;
             },
@@ -22882,13 +22986,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;
             },
@@ -22896,13 +23000,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;
             },
@@ -22910,13 +23014,13 @@
                 var b = this.i;
                 this.i = a;
                 if (b != this.i) {
-                    this.da("FirstDayOfWeek", igniteuiAngularCore.enumGetBox(DayOfWeek_$type, b), igniteuiAngularCore.enumGetBox(DayOfWeek_$type, this.i));
+                    this.db("FirstDayOfWeek", igniteuiAngularCore.enumGetBox(DayOfWeek_$type, b), igniteuiAngularCore.enumGetBox(DayOfWeek_$type, this.i));
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(DatePicker.prototype, "l", {
+        Object.defineProperty(XDatePicker.prototype, "l", {
             get: function () {
                 return this.k;
             },
@@ -22924,13 +23028,13 @@
                 var b = this.k;
                 this.k = a;
                 if (b != this.k) {
-                    this.da("FirstWeekOfYear", igniteuiAngularCore.enumGetBox(FirstWeek_$type, b), igniteuiAngularCore.enumGetBox(FirstWeek_$type, this.k));
+                    this.db("FirstWeekOfYear", igniteuiAngularCore.enumGetBox(FirstWeek_$type, b), igniteuiAngularCore.enumGetBox(FirstWeek_$type, this.k));
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(DatePicker.prototype, "a1", {
+        Object.defineProperty(XDatePicker.prototype, "a2", {
             get: function () {
                 return this.aq;
             },
@@ -22938,13 +23042,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;
             },
@@ -22952,27 +23056,27 @@
                 var b = this.d;
                 this.d = a;
                 if (this.d != b) {
-                    this.da("DateFormat", igniteuiAngularCore.enumGetBox(DateFormats_$type, b), igniteuiAngularCore.enumGetBox(DateFormats_$type, this.d));
+                    this.db("DateFormat", igniteuiAngularCore.enumGetBox(DateFormats_$type, b), igniteuiAngularCore.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;
             },
@@ -22980,27 +23084,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;
             },
@@ -23008,13 +23112,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;
             },
@@ -23022,13 +23126,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;
             },
@@ -23036,36 +23140,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 igniteuiAngularCore.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 (+(igniteuiAngularCore.dateGetDate(this.value)) != +(igniteuiAngularCore.dateGetDate(igniteuiAngularCore.dateMinValue()))) {
-                        if (igniteuiAngularCore.dateGetDate(this.value) < igniteuiAngularCore.dateGetDate(this.a9) || igniteuiAngularCore.dateGetDate(this.value) > igniteuiAngularCore.dateGetDate(this.a8)) {
+                        if (igniteuiAngularCore.dateGetDate(this.value) < igniteuiAngularCore.dateGetDate(this.ba) || igniteuiAngularCore.dateGetDate(this.value) > igniteuiAngularCore.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 (+(igniteuiAngularCore.dateGetDate(this.value)) == +(igniteuiAngularCore.dateGetDate(igniteuiAngularCore.dateMinValue()))) {
                             this.c.value = igniteuiAngularCore.dateMinValue();
@@ -23077,8 +23181,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);
                             }
@@ -23092,25 +23196,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 = igniteuiAngularCore.Base.compareSimple(this.a9, this.a8);
+                        var d = igniteuiAngularCore.Base.compareSimple(this.ba, this.a9);
                         if (d >= 0) {
-                            this.a8 = igniteuiAngularCore.dateMaxValue();
+                            this.a9 = igniteuiAngularCore.dateMaxValue();
                         }
-                        this.c.at = this.a3;
+                        this.c.at = this.a4;
                     }
-                    if (igniteuiAngularCore.dateGetDate(this.value) > igniteuiAngularCore.dateGetDate(this.a8)) {
-                        this.a5 = igniteuiAngularCore.dateMinValue();
+                    if (igniteuiAngularCore.dateGetDate(this.value) > igniteuiAngularCore.dateGetDate(this.a9)) {
+                        this.a6 = igniteuiAngularCore.dateMinValue();
                         this.ai = true;
                         this.value = igniteuiAngularCore.dateMinValue();
                         this.ai = false;
@@ -23118,22 +23222,22 @@
                     break;
                 case "MinDate":
                     if (this.c != null) {
-                        this.c.au = this.a4;
-                        var e = igniteuiAngularCore.Base.compareSimple(this.a9, this.a8);
+                        this.c.au = this.a5;
+                        var e = igniteuiAngularCore.Base.compareSimple(this.ba, this.a9);
                         if (e >= 0) {
-                            this.a5 = igniteuiAngularCore.dateMaxValue();
-                            this.c.at = this.a8;
+                            this.a6 = igniteuiAngularCore.dateMaxValue();
+                            this.c.at = this.a9;
                         }
                     }
-                    if (igniteuiAngularCore.dateGetDate(this.value) < igniteuiAngularCore.dateGetDate(this.a9)) {
-                        this.a5 = igniteuiAngularCore.dateMinValue();
+                    if (igniteuiAngularCore.dateGetDate(this.value) < igniteuiAngularCore.dateGetDate(this.ba)) {
+                        this.a6 = igniteuiAngularCore.dateMinValue();
                         this.ai = true;
                         this.value = igniteuiAngularCore.dateMinValue();
                         this.ai = false;
                     }
                     break;
                 case "TextStyle":
-                    this.dn();
+                    this.dp();
                     break;
                 case "ShowClearButton":
                     if (this.o != null) {
@@ -23146,27 +23250,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) {
@@ -23175,7 +23279,7 @@
                     break;
                 case "ShowWeekNumbers":
                     if (this.c != null) {
-                        this.c.af = this.a1;
+                        this.c.af = this.a2;
                         this.h.z();
                     }
                     break;
@@ -23190,7 +23294,7 @@
                             this.q.disabled = this.av;
                         }
                         if (this.o != null) {
-                            this.o.disabled = this.av;
+                            this.o.disabled = this.az();
                         }
                     }
                     break;
@@ -23204,14 +23308,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 (igniteuiAngularCore.stringContains(b, "/")) {
                 a = '/';
             }
@@ -23227,7 +23334,7 @@
             else if (igniteuiAngularCore.stringContains(b, ",")) {
                 a = ',';
             }
-            this.bm = a.toString();
+            this.bn = a.toString();
             var c = b.split(a);
             if (c.length == 3) {
                 var d = "";
@@ -23236,19 +23343,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;
                         }
                     }
@@ -23256,71 +23363,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 (igniteuiAngularCore.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;
@@ -23328,11 +23435,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();
@@ -23341,40 +23448,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 = igniteuiAngularCore.delegateCombine(a.change, igniteuiAngularCore.runOn(this, this.cy));
+            a.change = igniteuiAngularCore.delegateCombine(a.change, igniteuiAngularCore.runOn(this, this.cz));
             var b = this.o;
-            b.changing = igniteuiAngularCore.delegateCombine(b.changing, igniteuiAngularCore.runOn(this, this.cz));
+            b.changing = igniteuiAngularCore.delegateCombine(b.changing, igniteuiAngularCore.runOn(this, this.c0));
             var c = this.o;
-            c.keyDown = igniteuiAngularCore.delegateCombine(c.keyDown, igniteuiAngularCore.runOn(this, this.c0));
+            c.keyDown = igniteuiAngularCore.delegateCombine(c.keyDown, igniteuiAngularCore.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;
             }
@@ -23384,36 +23491,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();
             }
@@ -23421,12 +23528,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 = igniteuiAngularCore.stringSplit(a, b, 1);
             var d = 0;
@@ -23437,17 +23544,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]);
@@ -23460,13 +23567,13 @@
                 }
                 if (igniteuiAngularCore.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 = !igniteuiAngularCore.stringIsNullOrWhiteSpace(this.af.b1("January_Full")) ? this.af.b1("January_Full").toLowerCase() : "january";
@@ -23542,45 +23649,45 @@
             }
             if (g) {
                 var ag = igniteuiAngularCore.dateFromValues(f, e, d, 0, 0, 0, 0);
-                var ah = igniteuiAngularCore.Base.compareSimple(ag, this.a9);
-                var ai = igniteuiAngularCore.Base.compareSimple(ag, this.a8);
+                var ah = igniteuiAngularCore.Base.compareSimple(ag, this.ba);
+                var ai = igniteuiAngularCore.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 (igniteuiAngularCore.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 (+(igniteuiAngularCore.dateGetDate(this.a7)) != +(igniteuiAngularCore.dateGetDate(igniteuiAngularCore.dateMinValue()))) {
+                if (+(igniteuiAngularCore.dateGetDate(this.a8)) != +(igniteuiAngularCore.dateGetDate(igniteuiAngularCore.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 = !igniteuiAngularCore.stringIsNullOrWhiteSpace(this.af.b1("Sunday_Short")) ? this.af.b1("Sunday_Short") : "Sun";
@@ -23605,7 +23712,7 @@
                                     break;
                             }
                         }
-                        else if (this.bg == "dddd") {
+                        else if (this.bh == "dddd") {
                             switch (this.value.getDay()) {
                                 case 0:
                                     b = !igniteuiAngularCore.stringIsNullOrWhiteSpace(this.af.b1("Sunday_Full")) ? this.af.b1("Sunday_Full") : "Sunday";
@@ -23631,12 +23738,12 @@
                             }
                         }
                         var d = igniteuiAngularCore.dateGetMonth(this.value).toString();
-                        if (this.bk == "mm") {
+                        if (this.bl == "mm") {
                             if (igniteuiAngularCore.dateGetMonth(this.value) < 10) {
                                 d = "0" + d;
                             }
                         }
-                        else if (this.bk == "mmm") {
+                        else if (this.bl == "mmm") {
                             switch (igniteuiAngularCore.dateGetMonth(this.value)) {
                                 case 1:
                                     d = !igniteuiAngularCore.stringIsNullOrWhiteSpace(this.af.b1("January_Short")) ? this.af.b1("January_Short") : "Jan";
@@ -23676,7 +23783,7 @@
                                     break;
                             }
                         }
-                        else if (this.bk == "mmmm") {
+                        else if (this.bl == "mmmm") {
                             switch (igniteuiAngularCore.dateGetMonth(this.value)) {
                                 case 1:
                                     d = !igniteuiAngularCore.stringIsNullOrWhiteSpace(this.af.b1("January_Full")) ? this.af.b1("January_Full") : "January";
@@ -23717,31 +23824,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;
                             }
                         }
                     }
@@ -23754,7 +23861,7 @@
                 }
             }
         };
-        DatePicker.prototype.cp = function () {
+        XDatePicker.prototype.cq = function () {
             if (this.av == true) {
                 return;
             }
@@ -23765,65 +23872,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 igniteuiAngularCore.Popup();
             this.u.aq = this.aw;
-            this.u.ax = this.a2;
+            this.u.ax = this.a3;
             this.u.cy = igniteuiAngularCore.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) != +(igniteuiAngularCore.dateMinValue())) {
-                this.c.au = this.a9;
+            if (+(this.ba) != +(igniteuiAngularCore.dateMinValue())) {
+                this.c.au = this.ba;
             }
-            if (+(this.a8) != +(igniteuiAngularCore.dateMaxValue())) {
-                this.c.at = this.a8;
+            if (+(this.a9) != +(igniteuiAngularCore.dateMaxValue())) {
+                this.c.at = this.a9;
             }
-            if (+(this.ba) != +(igniteuiAngularCore.dateMinValue())) {
-                this.c.av = this.ba;
+            if (+(this.bb) != +(igniteuiAngularCore.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 = igniteuiAngularCore.delegateCombine(a.selectedValueChanged, igniteuiAngularCore.runOn(this, this.cn));
+            a.selectedValueChanged = igniteuiAngularCore.delegateCombine(a.selectedValueChanged, igniteuiAngularCore.runOn(this, this.co));
             var b = this.c;
-            b.close = igniteuiAngularCore.delegateCombine(b.close, igniteuiAngularCore.runOn(this, this.cm));
+            b.close = igniteuiAngularCore.delegateCombine(b.close, igniteuiAngularCore.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;
             }
@@ -23831,27 +23938,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);
             }
@@ -23860,13 +23967,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 igniteuiAngularCore.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;
@@ -23893,7 +24000,7 @@
                 }
             }
         };
-        DatePicker.prototype.cq = function () {
+        XDatePicker.prototype.cr = function () {
             var _this = this;
             if (this.u != null) {
                 window.setTimeout(function () { return _this.u.b5(); }, 0);
@@ -23905,7 +24012,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;
@@ -23919,15 +24026,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);
                         }
                     }
                 }
@@ -23936,37 +24043,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;
@@ -24003,31 +24110,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 = igniteuiAngularCore.markType(DatePicker, 'DatePicker', igniteuiAngularCore.Base.$, [igniteuiAngularCore.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 = igniteuiAngularCore.markType(XDatePicker, 'XDatePicker', igniteuiAngularCore.Base.$, [igniteuiAngularCore.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;
     }(igniteuiAngularCore.Base));
 
     /*
@@ -24154,8 +24261,8 @@
     }());
 
     // IgxDataGridModule.register();
-    var IgxDatePickerComponent = /** @class */ /*@__PURE__*/ (function () {
-        function IgxDatePickerComponent(renderer, _elRef, ngZone, injector, componentFactoryResolver) {
+    var IgxXDatePickerComponent = /** @class */ /*@__PURE__*/ (function () {
+        function IgxXDatePickerComponent(renderer, _elRef, ngZone, injector, componentFactoryResolver) {
             this.renderer = renderer;
             this._elRef = _elRef;
             this.ngZone = ngZone;
@@ -24184,7 +24291,7 @@
             var datePicker = this.i;
             this._datePicker = datePicker;
         }
-        Object.defineProperty(IgxDatePickerComponent.prototype, "height", {
+        Object.defineProperty(IgxXDatePickerComponent.prototype, "height", {
             get: function () {
                 return this._height;
             },
@@ -24196,7 +24303,7 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgxDatePickerComponent.prototype, "width", {
+        Object.defineProperty(IgxXDatePickerComponent.prototype, "width", {
             get: function () {
                 return this._width;
             },
@@ -24209,14 +24316,14 @@
             configurable: true
         });
         // supports angular themes or custom properties set in CSS
-        IgxDatePickerComponent.prototype.updateStyle = function () {
+        IgxXDatePickerComponent.prototype.updateStyle = function () {
             this._styling(this._root, this);
         };
-        IgxDatePickerComponent.prototype.ngOnDestroy = function () {
+        IgxXDatePickerComponent.prototype.ngOnDestroy = function () {
             this._datePicker.destroy();
             this._wrapper.destroy();
         };
-        IgxDatePickerComponent.prototype.ngAfterViewInit = function () {
+        IgxXDatePickerComponent.prototype.ngAfterViewInit = function () {
             var _this = this;
             if (this.renderer && this._datePickerContainer != null) {
                 this.container = this._datePickerContainer.nativeElement;
@@ -24233,17 +24340,17 @@
             this.i.notifySizeChanged();
             this.updateStyle();
         };
-        IgxDatePickerComponent.prototype.createImplementation = function () {
-            return new DatePicker();
+        IgxXDatePickerComponent.prototype.createImplementation = function () {
+            return new XDatePicker();
         };
-        Object.defineProperty(IgxDatePickerComponent.prototype, "i", {
+        Object.defineProperty(IgxXDatePickerComponent.prototype, "i", {
             get: function () {
                 return this._implementation;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgxDatePickerComponent.prototype, "value", {
+        Object.defineProperty(IgxXDatePickerComponent.prototype, "value", {
             /**
          * Gets or Sets the property name that contains the values.
         */
@@ -24256,46 +24363,46 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgxDatePickerComponent.prototype, "today", {
+        Object.defineProperty(IgxXDatePickerComponent.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(IgxDatePickerComponent.prototype, "label", {
+        Object.defineProperty(IgxXDatePickerComponent.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(IgxDatePickerComponent.prototype, "labelTextColor", {
+        Object.defineProperty(IgxXDatePickerComponent.prototype, "labelTextColor", {
             /**
              * Gets or sets the color to use for the text.
             */
             get: function () {
-                return igniteuiAngularCore.brushToString(this.i.dw);
+                return igniteuiAngularCore.brushToString(this.i.dx);
             },
             set: function (v) {
-                this.i.dw = igniteuiAngularCore.stringToBrush(v);
+                this.i.dx = igniteuiAngularCore.stringToBrush(v);
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgxDatePickerComponent.prototype, "labelTextStyle", {
+        Object.defineProperty(IgxXDatePickerComponent.prototype, "labelTextStyle", {
             /**
              * Gets or sets the font to use for the combobox.
             */
@@ -24313,46 +24420,46 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgxDatePickerComponent.prototype, "placeholder", {
+        Object.defineProperty(IgxXDatePickerComponent.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(IgxDatePickerComponent.prototype, "minDate", {
+        Object.defineProperty(IgxXDatePickerComponent.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(IgxDatePickerComponent.prototype, "maxDate", {
+        Object.defineProperty(IgxXDatePickerComponent.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(IgxDatePickerComponent.prototype, "density", {
+        Object.defineProperty(IgxXDatePickerComponent.prototype, "density", {
             /**
              * Gets or sets the display density to use for the date pcicker.
             */
@@ -24365,7 +24472,7 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgxDatePickerComponent.prototype, "baseTheme", {
+        Object.defineProperty(IgxXDatePickerComponent.prototype, "baseTheme", {
             /**
              * Gets or sets the base built in theme to use for the date picker.
             */
@@ -24378,7 +24485,7 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgxDatePickerComponent.prototype, "textStyle", {
+        Object.defineProperty(IgxXDatePickerComponent.prototype, "textStyle", {
             /**
              * Gets or sets the font to use for the combobox.
             */
@@ -24396,59 +24503,59 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgxDatePickerComponent.prototype, "textColor", {
+        Object.defineProperty(IgxXDatePickerComponent.prototype, "textColor", {
             /**
              * Gets or Sets the text color
             */
             get: function () {
-                return igniteuiAngularCore.brushToString(this.i.dx);
+                return igniteuiAngularCore.brushToString(this.i.dy);
             },
             set: function (v) {
-                this.i.dx = igniteuiAngularCore.stringToBrush(v);
+                this.i.dy = igniteuiAngularCore.stringToBrush(v);
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgxDatePickerComponent.prototype, "iconColor", {
+        Object.defineProperty(IgxXDatePickerComponent.prototype, "iconColor", {
             /**
              * Gets or Sets the text color
             */
             get: function () {
-                return igniteuiAngularCore.brushToString(this.i.dv);
+                return igniteuiAngularCore.brushToString(this.i.dw);
             },
             set: function (v) {
-                this.i.dv = igniteuiAngularCore.stringToBrush(v);
+                this.i.dw = igniteuiAngularCore.stringToBrush(v);
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgxDatePickerComponent.prototype, "showClearButton", {
+        Object.defineProperty(IgxXDatePickerComponent.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 = igniteuiAngularCore.ensureBool(v);
+                this.i.a0 = igniteuiAngularCore.ensureBool(v);
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgxDatePickerComponent.prototype, "showTodayButton", {
+        Object.defineProperty(IgxXDatePickerComponent.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 = igniteuiAngularCore.ensureBool(v);
+                this.i.a1 = igniteuiAngularCore.ensureBool(v);
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgxDatePickerComponent.prototype, "allowTextInput", {
+        Object.defineProperty(IgxXDatePickerComponent.prototype, "allowTextInput", {
             /**
              * Gets or sets the AllowTextInput property to detirmine if entering text into the input is allowed
             */
@@ -24461,7 +24568,7 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgxDatePickerComponent.prototype, "openOnFocus", {
+        Object.defineProperty(IgxXDatePickerComponent.prototype, "openOnFocus", {
             /**
              * Gets or sets the AllowTextInput property to detirmine if entering text into the input is allowed
             */
@@ -24474,7 +24581,7 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgxDatePickerComponent.prototype, "firstDayOfWeek", {
+        Object.defineProperty(IgxXDatePickerComponent.prototype, "firstDayOfWeek", {
             /**
              * Gets or sets the FirstDayOfWeek property to detirmine first day of the week
             */
@@ -24487,7 +24594,7 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgxDatePickerComponent.prototype, "firstWeekOfYear", {
+        Object.defineProperty(IgxXDatePickerComponent.prototype, "firstWeekOfYear", {
             /**
              * Gets or sets the FirstWeekOfYear property to detirmine first week of the year
             */
@@ -24500,20 +24607,20 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgxDatePickerComponent.prototype, "showWeekNumbers", {
+        Object.defineProperty(IgxXDatePickerComponent.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 = igniteuiAngularCore.ensureBool(v);
+                this.i.a2 = igniteuiAngularCore.ensureBool(v);
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgxDatePickerComponent.prototype, "dateFormat", {
+        Object.defineProperty(IgxXDatePickerComponent.prototype, "dateFormat", {
             /**
              * Gets or sets the date time format to use for this column. If FormatString is specificied this value is ignored.
             */
@@ -24526,20 +24633,20 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgxDatePickerComponent.prototype, "formatString", {
+        Object.defineProperty(IgxXDatePickerComponent.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(IgxDatePickerComponent.prototype, "isDisabled", {
+        Object.defineProperty(IgxXDatePickerComponent.prototype, "isDisabled", {
             get: function () {
                 return this.i.av;
             },
@@ -24549,7 +24656,7 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgxDatePickerComponent.prototype, "isFixed", {
+        Object.defineProperty(IgxXDatePickerComponent.prototype, "isFixed", {
             /**
              * Indicates that the calendar dropdown will position itself relative to the window instead of the document.
             */
@@ -24562,7 +24669,7 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgxDatePickerComponent.prototype, "openAsChild", {
+        Object.defineProperty(IgxXDatePickerComponent.prototype, "openAsChild", {
             /**
              * Indicates that the dropdown should open as a child of the date picker.
             */
@@ -24575,32 +24682,32 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgxDatePickerComponent.prototype, "useTopLayer", {
+        Object.defineProperty(IgxXDatePickerComponent.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 = igniteuiAngularCore.ensureBool(v);
+                this.i.a3 = igniteuiAngularCore.ensureBool(v);
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgxDatePickerComponent.prototype, "hasUserValues", {
+        Object.defineProperty(IgxXDatePickerComponent.prototype, "hasUserValues", {
             get: function () {
                 return this._hasUserValues;
             },
             enumerable: false,
             configurable: true
         });
-        IgxDatePickerComponent.prototype.__m = function (propertyName) {
+        IgxXDatePickerComponent.prototype.__m = function (propertyName) {
             if (!this._inStyling) {
                 this._hasUserValues.add(propertyName);
             }
         };
-        IgxDatePickerComponent.prototype._styling = function (container, component, parent) {
+        IgxXDatePickerComponent.prototype._styling = function (container, component, parent) {
             if (this._inStyling) {
                 return;
             }
@@ -24612,7 +24719,7 @@
             if (typeName.indexOf("Xam") === 0) {
                 typeName = typeName.substring(3);
             }
-            genericPrefix = igniteuiAngularCore.toSpinal("DatePickerComponent");
+            genericPrefix = igniteuiAngularCore.toSpinal("XDatePickerComponent");
             var additionalPrefixes = [];
             var prefix = igniteuiAngularCore.toSpinal(typeName);
             additionalPrefixes.push(prefix + "-");
@@ -24645,26 +24752,26 @@
             }
             this._inStyling = false;
         };
-        IgxDatePickerComponent.prototype.select = function () {
-            this.i.df();
+        IgxXDatePickerComponent.prototype.select = function () {
+            this.i.dg();
         };
         /**
          * Exports visual information about the current state of the grid.
         
         */
-        IgxDatePickerComponent.prototype.exportVisualModel = function () {
-            var iv = this.i.bf();
+        IgxXDatePickerComponent.prototype.exportVisualModel = function () {
+            var iv = this.i.bg();
             return (iv);
         };
         /**
          * Returns a serialized copy of the exported visual model
         
         */
-        IgxDatePickerComponent.prototype.exportSerializedVisualModel = function () {
-            var iv = this.i.bv();
+        IgxXDatePickerComponent.prototype.exportSerializedVisualModel = function () {
+            var iv = this.i.bw();
             return (iv);
         };
-        Object.defineProperty(IgxDatePickerComponent.prototype, "selectedValueChanged", {
+        Object.defineProperty(IgxXDatePickerComponent.prototype, "selectedValueChanged", {
             /**
              * Called when date is selected.
             */
@@ -24689,7 +24796,7 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgxDatePickerComponent.prototype, "gotFocus", {
+        Object.defineProperty(IgxXDatePickerComponent.prototype, "gotFocus", {
             get: function () {
                 var _this = this;
                 if (this._gotFocus == null) {
@@ -24713,7 +24820,7 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgxDatePickerComponent.prototype, "lostFocus", {
+        Object.defineProperty(IgxXDatePickerComponent.prototype, "lostFocus", {
             get: function () {
                 var _this = this;
                 if (this._lostFocus == null) {
@@ -24737,7 +24844,7 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgxDatePickerComponent.prototype, "keyDown", {
+        Object.defineProperty(IgxXDatePickerComponent.prototype, "keyDown", {
             get: function () {
                 var _this = this;
                 if (this._keyDown == null) {
@@ -24761,7 +24868,7 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgxDatePickerComponent.prototype, "changing", {
+        Object.defineProperty(IgxXDatePickerComponent.prototype, "changing", {
             get: function () {
                 var _this = this;
                 if (this._changing == null) {
@@ -24785,7 +24892,7 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgxDatePickerComponent.prototype, "valueChange", {
+        Object.defineProperty(IgxXDatePickerComponent.prototype, "valueChange", {
             get: function () {
                 var _this = this;
                 if (this._valueChange == null) {
@@ -24806,7 +24913,7 @@
             enumerable: false,
             configurable: true
         });
-        IgxDatePickerComponent.prototype._runInZone = function (act) {
+        IgxXDatePickerComponent.prototype._runInZone = function (act) {
             if (this._zoneRunner != null) {
                 this._zoneRunner(act);
             }
@@ -24814,18 +24921,18 @@
                 act();
             }
         };
-        IgxDatePickerComponent.ɵfac = i0["ɵɵngDeclareFactory"]({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxDatePickerComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i0.ComponentFactoryResolver }], target: i0["ɵɵFactoryTarget"].Component });
-        IgxDatePickerComponent.ɵcmp = i0["ɵɵngDeclareComponent"]({ minVersion: "12.0.0", version: "12.2.17", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: { height: "height", width: "width", value: "value", today: "today", label: "label", labelTextColor: "labelTextColor", labelTextStyle: "labelTextStyle", placeholder: "placeholder", minDate: "minDate", maxDate: "maxDate", density: "density", baseTheme: "baseTheme", textStyle: "textStyle", textColor: "textColor", iconColor: "iconColor", showClearButton: "showClearButton", showTodayButton: "showTodayButton", allowTextInput: "allowTextInput", openOnFocus: "openOnFocus", firstDayOfWeek: "firstDayOfWeek", firstWeekOfYear: "firstWeekOfYear", showWeekNumbers: "showWeekNumbers", dateFormat: "dateFormat", formatString: "formatString", isDisabled: "isDisabled", isFixed: "isFixed", openAsChild: "openAsChild", useTopLayer: "useTopLayer" }, outputs: { selectedValueChanged: "selectedValueChanged", gotFocus: "gotFocus", lostFocus: "lostFocus", keyDown: "keyDown", changing: "changing", valueChange: "valueChange" }, host: { classAttribute: "ig-date-picker igx-date-picker" }, providers: [], viewQueries: [{ propertyName: "_datePickerContainer", first: true, predicate: ["datePickerContainer"], descendants: true, read: i0.ElementRef, static: true }], ngImport: i0, template: "<div #datePickerContainer>\n                <div #inputcontainer>\n                </div>\n                <div #popupContainer>\n                </div>\n               </div>", isInline: true, styles: ["\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t}\n\t"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-        return IgxDatePickerComponent;
+        IgxXDatePickerComponent.ɵfac = i0["ɵɵngDeclareFactory"]({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxXDatePickerComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i0.ComponentFactoryResolver }], target: i0["ɵɵFactoryTarget"].Component });
+        IgxXDatePickerComponent.ɵcmp = i0["ɵɵngDeclareComponent"]({ minVersion: "12.0.0", version: "12.2.17", type: IgxXDatePickerComponent, selector: "igx-x-date-picker", inputs: { height: "height", width: "width", value: "value", today: "today", label: "label", labelTextColor: "labelTextColor", labelTextStyle: "labelTextStyle", placeholder: "placeholder", minDate: "minDate", maxDate: "maxDate", density: "density", baseTheme: "baseTheme", textStyle: "textStyle", textColor: "textColor", iconColor: "iconColor", showClearButton: "showClearButton", showTodayButton: "showTodayButton", allowTextInput: "allowTextInput", openOnFocus: "openOnFocus", firstDayOfWeek: "firstDayOfWeek", firstWeekOfYear: "firstWeekOfYear", showWeekNumbers: "showWeekNumbers", dateFormat: "dateFormat", formatString: "formatString", isDisabled: "isDisabled", isFixed: "isFixed", openAsChild: "openAsChild", useTopLayer: "useTopLayer" }, outputs: { selectedValueChanged: "selectedValueChanged", gotFocus: "gotFocus", lostFocus: "lostFocus", keyDown: "keyDown", changing: "changing", valueChange: "valueChange" }, host: { classAttribute: "ig-x-date-picker igx-x-date-picker" }, providers: [], viewQueries: [{ propertyName: "_datePickerContainer", first: true, predicate: ["datePickerContainer"], descendants: true, read: i0.ElementRef, static: true }], ngImport: i0, template: "<div #datePickerContainer>\n                <div #inputcontainer>\n                </div>\n                <div #popupContainer>\n                </div>\n               </div>", isInline: true, styles: ["\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t}\n\t"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        return IgxXDatePickerComponent;
     }());
-    i0["ɵɵngDeclareClassMetadata"]({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxDatePickerComponent, decorators: [{
+    i0["ɵɵngDeclareClassMetadata"]({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxXDatePickerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'igx-date-picker',
+                        selector: 'igx-x-date-picker',
                         template: "<div #datePickerContainer>\n                <div #inputcontainer>\n                </div>\n                <div #popupContainer>\n                </div>\n               </div>",
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                         providers: [],
-                        host: { 'class': 'ig-date-picker igx-date-picker' },
+                        host: { 'class': 'ig-x-date-picker igx-x-date-picker' },
                         styles: ["\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t}\n\t"]
                     }]
             }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i0.NgZone }, { type: i0.Injector }, { type: i0.ComponentFactoryResolver }]; }, propDecorators: { _datePickerContainer: [{
@@ -29205,21 +29312,21 @@
     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 IgxDatePickerModule = /** @class */ /*@__PURE__*/ (function () {
-        function IgxDatePickerModule() {
-            igniteuiAngularCore.TypeRegistrar.registerCons('IgxDatePickerComponent', IgxDatePickerComponent);
-            igniteuiAngularCore.TypeRegistrar.register('DatePicker', DatePicker.$type);
+    var IgxXDatePickerModule = /** @class */ /*@__PURE__*/ (function () {
+        function IgxXDatePickerModule() {
+            igniteuiAngularCore.TypeRegistrar.registerCons('IgxXDatePickerComponent', IgxXDatePickerComponent);
+            igniteuiAngularCore.TypeRegistrar.register('XDatePicker', XDatePicker.$type);
         }
-        IgxDatePickerModule.ɵfac = i0["ɵɵngDeclareFactory"]({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxDatePickerModule, deps: [], target: i0["ɵɵFactoryTarget"].NgModule });
-        IgxDatePickerModule.ɵmod = i0["ɵɵngDeclareNgModule"]({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxDatePickerModule, declarations: [IgxDatePickerComponent], imports: [common.CommonModule, IgxXCalendarModule,
+        IgxXDatePickerModule.ɵfac = i0["ɵɵngDeclareFactory"]({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxXDatePickerModule, deps: [], target: i0["ɵɵFactoryTarget"].NgModule });
+        IgxXDatePickerModule.ɵmod = i0["ɵɵngDeclareNgModule"]({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxXDatePickerModule, declarations: [IgxXDatePickerComponent], imports: [common.CommonModule, IgxXCalendarModule,
                 IgxXButtonModule,
                 IgxXIconModule,
                 IgxXInputGroupModule], exports: [IgxXCalendarModule,
                 IgxXButtonModule,
                 IgxXIconModule,
                 IgxXInputGroupModule,
-                IgxDatePickerComponent] });
-        IgxDatePickerModule.ɵinj = i0["ɵɵngDeclareInjector"]({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxDatePickerModule, imports: [[common.CommonModule, IgxXCalendarModule,
+                IgxXDatePickerComponent] });
+        IgxXDatePickerModule.ɵinj = i0["ɵɵngDeclareInjector"]({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxXDatePickerModule, imports: [[common.CommonModule, IgxXCalendarModule,
                     IgxXButtonModule,
                     IgxXIconModule,
                     IgxXInputGroupModule
@@ -29227,17 +29334,17 @@
                 IgxXButtonModule,
                 IgxXIconModule,
                 IgxXInputGroupModule] });
-        return IgxDatePickerModule;
+        return IgxXDatePickerModule;
     }());
-    i0["ɵɵngDeclareClassMetadata"]({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxDatePickerModule, decorators: [{
+    i0["ɵɵngDeclareClassMetadata"]({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxXDatePickerModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        declarations: [IgxDatePickerComponent],
+                        declarations: [IgxXDatePickerComponent],
                         exports: [IgxXCalendarModule,
                             IgxXButtonModule,
                             IgxXIconModule,
                             IgxXInputGroupModule,
-                            IgxDatePickerComponent
+                            IgxXDatePickerComponent
                         ],
                         imports: [common.CommonModule, IgxXCalendarModule,
                             IgxXButtonModule,
@@ -29254,35 +29361,35 @@
     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 IgxDatePickerDynamicModule = /** @class */ /*@__PURE__*/ (function () {
-        function IgxDatePickerDynamicModule() {
-            igniteuiAngularCore.TypeRegistrar.registerCons('DatePicker', DatePicker);
-            igniteuiAngularCore.TypeRegistrar.registerCons('IgxDatePickerComponent', IgxDatePickerComponent);
-            igniteuiAngularCore.TypeRegistrar.register('DatePicker', DatePicker.$type);
+    var IgxXDatePickerDynamicModule = /** @class */ /*@__PURE__*/ (function () {
+        function IgxXDatePickerDynamicModule() {
+            igniteuiAngularCore.TypeRegistrar.registerCons('XDatePicker', XDatePicker);
+            igniteuiAngularCore.TypeRegistrar.registerCons('IgxXDatePickerComponent', IgxXDatePickerComponent);
+            igniteuiAngularCore.TypeRegistrar.register('XDatePicker', XDatePicker.$type);
         }
-        IgxDatePickerDynamicModule.ɵfac = i0["ɵɵngDeclareFactory"]({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxDatePickerDynamicModule, deps: [], target: i0["ɵɵFactoryTarget"].NgModule });
-        IgxDatePickerDynamicModule.ɵmod = i0["ɵɵngDeclareNgModule"]({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxDatePickerDynamicModule, imports: [common.CommonModule, IgxXCalendarDynamicModule,
+        IgxXDatePickerDynamicModule.ɵfac = i0["ɵɵngDeclareFactory"]({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxXDatePickerDynamicModule, deps: [], target: i0["ɵɵFactoryTarget"].NgModule });
+        IgxXDatePickerDynamicModule.ɵmod = i0["ɵɵngDeclareNgModule"]({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxXDatePickerDynamicModule, imports: [common.CommonModule, IgxXCalendarDynamicModule,
                 IgxXButtonDynamicModule,
                 IgxXIconDynamicModule,
                 IgxXInputGroupDynamicModule,
-                IgxDatePickerModule], exports: [IgxXCalendarDynamicModule,
+                IgxXDatePickerModule], exports: [IgxXCalendarDynamicModule,
                 IgxXButtonDynamicModule,
                 IgxXIconDynamicModule,
                 IgxXInputGroupDynamicModule,
-                IgxDatePickerModule] });
-        IgxDatePickerDynamicModule.ɵinj = i0["ɵɵngDeclareInjector"]({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxDatePickerDynamicModule, imports: [[common.CommonModule, IgxXCalendarDynamicModule,
+                IgxXDatePickerModule] });
+        IgxXDatePickerDynamicModule.ɵinj = i0["ɵɵngDeclareInjector"]({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxXDatePickerDynamicModule, imports: [[common.CommonModule, IgxXCalendarDynamicModule,
                     IgxXButtonDynamicModule,
                     IgxXIconDynamicModule,
                     IgxXInputGroupDynamicModule,
-                    IgxDatePickerModule
+                    IgxXDatePickerModule
                 ], IgxXCalendarDynamicModule,
                 IgxXButtonDynamicModule,
                 IgxXIconDynamicModule,
                 IgxXInputGroupDynamicModule,
-                IgxDatePickerModule] });
-        return IgxDatePickerDynamicModule;
+                IgxXDatePickerModule] });
+        return IgxXDatePickerDynamicModule;
     }());
-    i0["ɵɵngDeclareClassMetadata"]({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxDatePickerDynamicModule, decorators: [{
+    i0["ɵɵngDeclareClassMetadata"]({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxXDatePickerDynamicModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [],
@@ -29290,15 +29397,15 @@
                             IgxXButtonDynamicModule,
                             IgxXIconDynamicModule,
                             IgxXInputGroupDynamicModule,
-                            IgxDatePickerModule
+                            IgxXDatePickerModule
                         ],
                         imports: [common.CommonModule, IgxXCalendarDynamicModule,
                             IgxXButtonDynamicModule,
                             IgxXIconDynamicModule,
                             IgxXInputGroupDynamicModule,
-                            IgxDatePickerModule
+                            IgxXDatePickerModule
                         ],
-                        entryComponents: [IgxDatePickerComponent]
+                        entryComponents: [IgxXDatePickerComponent]
                     }]
             }], ctorParameters: function () { return []; } });
 
@@ -30675,7 +30782,7 @@
             $ret.addItem("CheckedBackgroundColor", igniteuiAngularCore.BrushUtil.h(255, 105, 136, 255));
             $ret.addItem("TickColor", igniteuiAngularCore.BrushUtil.h(255, 255, 255, 255));
             $ret.addItem("TickStrokeWidth", 3);
-            $ret.addItem("BorderWidth", NaN);
+            $ret.addItem("BorderWidth", 1);
             $ret.addItem("CornerRadius", 2);
             return $ret;
         })()));
@@ -30688,7 +30795,7 @@
             $ret.addItem("CheckedBackgroundColor", igniteuiAngularCore.BrushUtil.h(255, 105, 136, 255));
             $ret.addItem("TickColor", igniteuiAngularCore.BrushUtil.h(255, 255, 255, 255));
             $ret.addItem("TickStrokeWidth", 3);
-            $ret.addItem("BorderWidth", NaN);
+            $ret.addItem("BorderWidth", 1);
             $ret.addItem("CornerRadius", 2);
             return $ret;
         })()));
@@ -31675,7 +31782,7 @@
                 if (b != 0) {
                     a.l(",");
                 }
-                a.l(this.i._inner[b].ab());
+                a.l(this.i._inner[b].serialize());
             }
             a.l("]");
             a.l("}");
@@ -35469,6 +35576,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 = igniteuiAngularCore.markType(XInputBridge, 'XInputBridge', XComponentBridge.$, [igniteuiAngularCore.INativeUIInputBridge_$type]);
         return XInputBridge;
     }(XComponentBridge));
@@ -35518,12 +35628,12 @@
                     this.y = d;
                     this.af = b;
                     break;
-                case 12:
+                case 13:
                     e.gotFocus = igniteuiAngularCore.delegateCombine(e.gotFocus, igniteuiAngularCore.runOn(this, this.ah));
                     this.v = d;
                     this.ab = b;
                     break;
-                case 13:
+                case 14:
                     e.lostFocus = igniteuiAngularCore.delegateCombine(e.lostFocus, igniteuiAngularCore.runOn(this, this.ai));
                     this.w = d;
                     this.ad = b;
@@ -35589,7 +35699,7 @@
                     d.clearButtonContent();
                     if (igniteuiAngularCore.typeCast(igniteuiAngularCore.NativeUIComponent.$, c) !== null) {
                         this.ac = c;
-                        d.appendButtonContent(this.ac.al);
+                        d.appendButtonContent(this.ac.an);
                     }
                     else {
                         this.ac = c;
@@ -35620,7 +35730,7 @@
                 case 54:
                     if (igniteuiAngularCore.typeCast(igniteuiAngularCore.NativeUIComponent.$, c) !== null) {
                         this.aa = c;
-                        d.appendButtonContent(this.aa.al);
+                        d.appendButtonContent(this.aa.an);
                     }
                     break;
                 case 0:
@@ -35678,6 +35788,9 @@
                 case 11:
                     d.aa = c;
                     break;
+                case 83:
+                    d.bu = c;
+                    break;
             }
         };
         XButtonBridge.prototype.getValue = function (a, b) {
@@ -35713,6 +35826,7 @@
                 case 56: return c.as;
                 case 58: return c.aq;
                 case 17: return c.kt;
+                case 83: return c.bu;
             }
             return null;
         };
@@ -35764,6 +35878,9 @@
                 default: return 3;
             }
         };
+        XButtonBridge.prototype.exportVisualData = function (a) {
+            return a.d7();
+        };
         XButtonBridge.$t = igniteuiAngularCore.markType(XButtonBridge, 'XButtonBridge', XComponentBridge.$);
         return XButtonBridge;
     }(XComponentBridge));
@@ -35819,6 +35936,10 @@
                 case 7: return c.checked;
                 case 18: return igniteuiAngularCore.enumGetBox(igniteuiAngularCore.BaseControlTheme_$type, c.n);
                 case 17: return c.ar;
+                case 65: return c.dl;
+                case 67: return c.dm;
+                case 66: return c.dd;
+                case 68: return c.de;
             }
             return null;
         };
@@ -35837,8 +35958,23 @@
                 case 17:
                     d.ar = c;
                     break;
+                case 65:
+                    d.dl = c;
+                    break;
+                case 67:
+                    d.dm = c;
+                    break;
+                case 66:
+                    d.dd = c;
+                    break;
+                case 68:
+                    d.de = c;
+                    break;
             }
         };
+        XCheckboxBridge.prototype.exportVisualData = function (a) {
+            return a.a3();
+        };
         XCheckboxBridge.$t = igniteuiAngularCore.markType(XCheckboxBridge, 'XCheckboxBridge', XComponentBridge.$);
         return XCheckboxBridge;
     }(XComponentBridge));
@@ -35954,6 +36090,9 @@
                 return;
             }
         };
+        XIconBridge.prototype.exportVisualData = function (a) {
+            return a.au();
+        };
         XIconBridge.$t = igniteuiAngularCore.markType(XIconBridge, 'XIconBridge', XComponentBridge.$);
         return XIconBridge;
     }(XComponentBridge));
@@ -36014,12 +36153,12 @@
                     this.z = d;
                     this.ah = b;
                     break;
-                case 12:
+                case 13:
                     e.popupGotFocus = igniteuiAngularCore.delegateCombine(e.popupGotFocus, igniteuiAngularCore.runOn(this, this.ak));
                     this.w = d;
                     this.ae = b;
                     break;
-                case 13:
+                case 14:
                     e.popupLostFocus = igniteuiAngularCore.delegateCombine(e.popupLostFocus, igniteuiAngularCore.runOn(this, this.al));
                     this.x = d;
                     this.af = b;
@@ -36049,12 +36188,12 @@
                     this.z = null;
                     this.ah = null;
                     break;
-                case 12:
+                case 13:
                     e.popupGotFocus = igniteuiAngularCore.delegateRemove(e.popupGotFocus, igniteuiAngularCore.runOn(this, this.ak));
                     this.w = null;
                     this.ae = null;
                     break;
-                case 13:
+                case 14:
                     e.popupLostFocus = igniteuiAngularCore.delegateRemove(e.popupLostFocus, igniteuiAngularCore.runOn(this, this.al));
                     this.x = null;
                     this.af = null;
@@ -36211,15 +36350,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];
@@ -36229,12 +36371,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 = igniteuiAngularCore.markType(XPopupBridge, 'XPopupBridge', XComponentBridge.$, [igniteuiAngularCore.INativeUIPopupBridge_$type]);
@@ -36268,7 +36410,7 @@
             configurable: true
         });
         NativeUIXInputsFactory.j = function () {
-            igniteuiAngularCore.NativeUIComponent.ap(NativeUIXInputsFactory.b);
+            igniteuiAngularCore.NativeUIComponent.ar(NativeUIXInputsFactory.b);
         };
         Object.defineProperty(NativeUIXInputsFactory.prototype, "flavor", {
             get: function () {
@@ -36330,7 +36472,7 @@
             f.inputs.add(j);
             var l = new XInputBridge(f);
             var m = new igniteuiAngularCore.NativeUIInput();
-            m.al = d;
+            m.an = d;
             m.d = l;
             b(m);
         };
@@ -36344,7 +36486,7 @@
             var g = e.getExternal(f, e.rootWrapper, e.getExternal(f, null, null));
             var h = new XButtonBridge(f);
             var i = new igniteuiAngularCore.NativeUIButton();
-            i.al = d;
+            i.an = d;
             i.d = h;
             b(i);
         };
@@ -36357,7 +36499,7 @@
             var g = e.getExternal(f, e.rootWrapper, e.getExternal(f, null, null));
             var h = new XCheckboxBridge(f);
             var i = new igniteuiAngularCore.NativeUICheckbox();
-            i.al = d;
+            i.an = d;
             i.d = h;
             b(i);
         };
@@ -36370,7 +36512,7 @@
             var g = e.getExternal(f, e.rootWrapper, e.getExternal(f, null, null));
             var h = new XIconBridge(f);
             var i = new igniteuiAngularCore.NativeUIIcon();
-            i.al = d;
+            i.an = d;
             i.d = h;
             var j = c.createElement("div");
             var k = c.getSubRenderer(j);
@@ -36381,9 +36523,9 @@
             var m = k.getExternal(l, k.rootWrapper, k.getExternal(l, null, null));
             var n = new XButtonBridge(l);
             var o = new igniteuiAngularCore.NativeUIButton();
-            o.al = j;
+            o.an = j;
             o.d = n;
-            o.bk = i;
+            o.bm = i;
             b(o);
         };
         NativeUIXInputsFactory.prototype.f = function (a, b) {
@@ -36395,7 +36537,7 @@
             var g = e.getExternal(f, e.rootWrapper, e.getExternal(f, null, null));
             var h = new XIconBridge(f);
             var i = new igniteuiAngularCore.NativeUIIcon();
-            i.al = d;
+            i.an = d;
             i.d = h;
             b(i);
         };
@@ -36407,7 +36549,7 @@
             f.provideRenderer(e);
             var g = new XPopupBridge(f);
             var h = new igniteuiAngularCore.NativeUIPopup();
-            h.al = d;
+            h.an = d;
             h.d = g;
             b(h);
         };
@@ -36450,7 +36592,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);
         };
@@ -36578,6 +36720,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 igniteuiAngularCore.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 (!igniteuiAngularCore.stringIsNullOrEmpty(this.k)) {
+                a.l("textStyleFontStyle: \"" + this.k + "\", ");
+            }
+            if (!igniteuiAngularCore.stringIsNullOrEmpty(this.l)) {
+                a.l("textStyleFontVariant: \"" + this.l + "\", ");
+            }
+            if (!igniteuiAngularCore.stringIsNullOrEmpty(this.m)) {
+                a.l("textStyleFontWeight: \"" + this.m + "\", ");
+            }
+            if (!igniteuiAngularCore.stringIsNullOrEmpty(this.i)) {
+                a.l("textStyleFontFamily: \"" + this.i + "\", ");
+            }
+            if (!igniteuiAngularCore.stringIsNullOrEmpty(this.j)) {
+                a.l("textStyleFontStretch: \"" + this.j + "\", ");
+            }
+            if (!igniteuiAngularCore.isNaN_(this.d)) {
+                a.l("textStyleFontSize: " + this.d + ", ");
+            }
+            a.l("}");
+            return a.toString();
+        };
+        TextBlockVisualModelExport.$t = igniteuiAngularCore.markType(TextBlockVisualModelExport, 'TextBlockVisualModelExport');
+        return TextBlockVisualModelExport;
+    }(igniteuiAngularCore.Base));
+
     /**
      * Generated bundle index. Do not edit.
      */
@@ -36600,7 +36803,6 @@
     exports.CheckboxVisualModelExport = CheckboxVisualModelExport;
     exports.DateFormats = DateFormats;
     exports.DateFormats_$type = DateFormats_$type;
-    exports.DatePicker = DatePicker;
     exports.DatePickerView = DatePickerView;
     exports.DatePickerVisualModelExport = DatePickerVisualModelExport;
     exports.DateTimeValueFormatter = DateTimeValueFormatter;
@@ -36617,9 +36819,6 @@
     exports.IgxButtonClickEventArgs = IgxButtonClickEventArgs;
     exports.IgxButtonGroupSelectionChangedEventArgs = IgxButtonGroupSelectionChangedEventArgs;
     exports.IgxCheckboxChangeEventArgs = IgxCheckboxChangeEventArgs;
-    exports.IgxDatePickerComponent = IgxDatePickerComponent;
-    exports.IgxDatePickerDynamicModule = IgxDatePickerDynamicModule;
-    exports.IgxDatePickerModule = IgxDatePickerModule;
     exports.IgxGotFocusEventArgs = IgxGotFocusEventArgs;
     exports.IgxInputChangeEventArgs = IgxInputChangeEventArgs;
     exports.IgxLostFocusEventArgs = IgxLostFocusEventArgs;
@@ -36638,6 +36837,9 @@
     exports.IgxXCheckboxComponent = IgxXCheckboxComponent;
     exports.IgxXCheckboxDynamicModule = IgxXCheckboxDynamicModule;
     exports.IgxXCheckboxModule = IgxXCheckboxModule;
+    exports.IgxXDatePickerComponent = IgxXDatePickerComponent;
+    exports.IgxXDatePickerDynamicModule = IgxXDatePickerDynamicModule;
+    exports.IgxXDatePickerModule = IgxXDatePickerModule;
     exports.IgxXIconComponent = IgxXIconComponent;
     exports.IgxXIconDynamicModule = IgxXIconDynamicModule;
     exports.IgxXIconModule = IgxXIconModule;
@@ -36689,6 +36891,7 @@
     exports.SuffixShiftType_$type = SuffixShiftType_$type;
     exports.SuffixView = SuffixView;
     exports.SuffixVisualModelExport = SuffixVisualModelExport;
+    exports.TextBlockVisualModelExport = TextBlockVisualModelExport;
     exports.TextElementsVisualModelExport = TextElementsVisualModelExport;
     exports.Theme = Theme;
     exports.ThemeResolver = ThemeResolver;
@@ -36701,6 +36904,7 @@
     exports.XCheckbox = XCheckbox;
     exports.XCheckboxBridge = XCheckboxBridge;
     exports.XComponentBridge = XComponentBridge;
+    exports.XDatePicker = XDatePicker;
     exports.XIcon = XIcon;
     exports.XIconBridge = XIconBridge;
     exports.XIconButtonBridge = XIconButtonBridge;