igniteui-angular-inputs 18.0.0 → 18.1.0

package/fesm5/igniteui-angular-inputs.js

@@ -7,7 +7,7 @@
   
 import * as i0 from '@angular/core';
 import { EventEmitter, ɵɵngDeclareFactory, Renderer2, ViewContainerRef, NgZone, Injector, ComponentFactoryResolver, ɵɵFactoryTarget, ɵɵngDeclareComponent, ElementRef, ChangeDetectionStrategy, ɵɵngDeclareClassMetadata, Component, ViewChild, Input, Output, ɵɵngDeclareNgModule, ɵɵngDeclareInjector, NgModule, TemplateRef, HostBinding, ContentChildren } from '@angular/core';
-import { markEnum, markType, Base, StringBuilder, List$1, Delegate_$type, fromEnum, runOn, NativeUI, ScaleTransform, KeyFrameAnimationFactory, AnimationKeyFrameEffect, LinkedList$1, IKeyFrameAnimation_$type, PropertyChangedEventArgs, AnimationKeyFrameProperty, AnimationKeyFrameEffectTiming, AppearanceHelper, INotifyPropertyChanged_$type, BrushUtil, typeGetValue, EnumUtil, ElevationMode_$type, EventArgs, stringIsNullOrEmpty, isNaN_, enumGetBox, CornerRadius, MouseEventArgs, FocusEventArgs, Thickness, ControlDisplayDensity_$type, BaseControlTheme_$type, HorizontalAlignment_$type, VerticalAlignment_$type, UIElementPropertyAccessorFactory, FontUtil, Dictionary$2, String_$type, Brush, DomWrapper_$type, Tuple$2, SVGNode, FastIterationDictionary$2, stringStartsWith, trimStart, IIcon_$type, dateMinValue, dateGetMonth, parseBool, dateNow, dateMaxValue, dateAddYears, ObservableCollection$1, dateFromValues, delegateRemove, SRProvider, dateGetDate, stringIsNullOrWhiteSpace, delegateCombine, dateAddDays, Number_$type, dateAddMonths, truncate, timeSpanTotalDays, intDivide, NamePatcher, AngularRenderer, ensureEnum, brushToString, stringToBrush, ensureBool, FontInfo, toSpinal, initializePropertiesFromCss, TypeRegistrar, PortalManager, IgxFocusEventArgs, IgxChildContentModule, IgxChildContentDynamicModule, fromBrushCollection, toBrushCollection, Localization, HashSet$1, typeCast, stringReplace, TransformGroup, TranslateTransform, MouseButtonEventArgs, Point_$type, KeyEventArgs, toNullable, fromEn, DeviceUtils, Rect, stringContains, stringSplit, Popup, IgxKeyEventArgs, SyncableObservableCollection$2, IgCollection, CollectionAdapter, NotifyCollectionChangedAction, Size, RotateTransform, NativeUIElementBridge, NativeUIInputChangingEventArgs, NativeUIComponentHorizontalAlignment_$type, NativeUIInputType_$type, NativeUIInputDisplayType_$type, NativeUIDisplayDensity_$type, INativeUIInputBridge_$type, NativeUIButtonClickedEventArgs, NativeUIMouseEventArgs, NativeUIFocusEventArgs, NativeUIButtonDisplayType_$type, NativeUIComponent, NativeUICheckboxChangeEventArgs, SvgIconRegistry, NativeUIPopupOpenedEventArgs, NativeUIPopupClosedEventArgs, NativeUIPopupPointerPosition_$type, NativeUIPopupAnimationType_$type, INativeUIPopupBridge_$type, NativeUIInput, NativeUIButton, NativeUICheckbox, NativeUIIcon, NativeUIPopup, INativeUIElementFactory_$type } from 'igniteui-angular-core';
+import { markEnum, markType, Base, StringBuilder, List$1, Delegate_$type, fromEnum, runOn, NativeUI, ScaleTransform, KeyFrameAnimationFactory, AnimationKeyFrameEffect, LinkedList$1, IKeyFrameAnimation_$type, PropertyChangedEventArgs, AnimationKeyFrameProperty, AnimationKeyFrameEffectTiming, AppearanceHelper, INotifyPropertyChanged_$type, BrushUtil, typeGetValue, EnumUtil, ElevationMode_$type, EventArgs, stringIsNullOrEmpty, isNaN_, IVisualData_$type, enumGetBox, CornerRadius, MouseEventArgs, FocusEventArgs, Thickness, ControlDisplayDensity_$type, BaseControlTheme_$type, HorizontalAlignment_$type, VerticalAlignment_$type, FontUtil, Dictionary$2, String_$type, Brush, DomWrapper_$type, Tuple$2, SVGNode, FastIterationDictionary$2, PrimitiveVisualData, Ellipse, EllipseVisualData, Rectangle, RectangleVisualData, Line, LineVisualData, Path, PathVisualData, DoubleCollection, typeCast, stringStartsWith, trimStart, IIcon_$type, dateMinValue, dateGetMonth, parseBool, dateNow, dateMaxValue, dateAddYears, ObservableCollection$1, dateFromValues, delegateRemove, SRProvider, dateGetDate, stringIsNullOrWhiteSpace, delegateCombine, dateAddDays, Number_$type, dateAddMonths, truncate, timeSpanTotalDays, intDivide, NamePatcher, AngularRenderer, ensureEnum, brushToString, stringToBrush, ensureBool, FontInfo, toSpinal, initializePropertiesFromCss, TypeRegistrar, PortalManager, IgxFocusEventArgs, IgxChildContentModule, IgxChildContentDynamicModule, fromBrushCollection, toBrushCollection, Localization, HashSet$1, stringReplace, TransformGroup, TranslateTransform, MouseButtonEventArgs, Point_$type, KeyEventArgs, toNullable, fromEn, DeviceUtils, Rect, stringContains, stringSplit, Popup, IgxKeyEventArgs, SyncableObservableCollection$2, IgCollection, CollectionAdapter, NotifyCollectionChangedAction, Size, RotateTransform, NativeUIElementBridge, NativeUIInputChangingEventArgs, NativeUIComponentHorizontalAlignment_$type, NativeUIInputType_$type, NativeUIInputDisplayType_$type, NativeUIDisplayDensity_$type, INativeUIInputBridge_$type, NativeUIButtonClickedEventArgs, NativeUIMouseEventArgs, NativeUIFocusEventArgs, NativeUIButtonDisplayType_$type, NativeUIComponent, NativeUICheckboxChangeEventArgs, SvgIconRegistry, NativeUIPopupOpenedEventArgs, NativeUIPopupClosedEventArgs, NativeUIPopupPointerPosition_$type, NativeUIPopupAnimationType_$type, INativeUIPopupBridge_$type, NativeUIInput, NativeUIButton, NativeUICheckbox, NativeUIIcon, NativeUIPopup, INativeUIElementFactory_$type } from 'igniteui-angular-core';
 import { __extends, __values } from 'tslib';
 import { CommonModule } from '@angular/common';
 
@@ -956,17 +956,17 @@ var ButtonVisualModelExport = /** @class */ /*@__PURE__*/ (function (_super) {
         _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 @@ var ButtonVisualModelExport = /** @class */ /*@__PURE__*/ (function (_super) {
         _this.l = false;
         return _this;
     }
-    ButtonVisualModelExport.prototype.ab = function () {
+    ButtonVisualModelExport.prototype.serialize = function () {
         var a = new StringBuilder(0);
         a.l("{");
         a.l("top : " + this.s + ", ");
@@ -1000,20 +1000,20 @@ var ButtonVisualModelExport = /** @class */ /*@__PURE__*/ (function (_super) {
         a.l("actualElevationMode : " + this.j + ", ");
         a.l("actualTextColor : " + this.f.serialize() + ", ");
         a.l("actualBorderWidth : " + this.o + ", ");
+        if (!stringIsNullOrEmpty(this.ad)) {
+            a.l("textStyleFontStyle : \"" + this.ad + "\", ");
+        }
         if (!stringIsNullOrEmpty(this.ae)) {
-            a.l("textStyleFontStyle : \"" + this.ae + "\", ");
+            a.l("textStyleFontVariant : \"" + this.ae + "\", ");
         }
         if (!stringIsNullOrEmpty(this.af)) {
-            a.l("textStyleFontVariant : \"" + this.af + "\", ");
+            a.l("textStyleFontWeight : \"" + this.af + "\", ");
         }
-        if (!stringIsNullOrEmpty(this.ag)) {
-            a.l("textStyleFontWeight : \"" + this.ag + "\", ");
+        if (!stringIsNullOrEmpty(this.ab)) {
+            a.l("textStyleFontFamily : \"" + this.ab + "\", ");
         }
         if (!stringIsNullOrEmpty(this.ac)) {
-            a.l("textStyleFontFamily : \"" + this.ac + "\", ");
-        }
-        if (!stringIsNullOrEmpty(this.ad)) {
-            a.l("textStyleFontStretch : \"" + this.ad + "\", ");
+            a.l("textStyleFontStretch : \"" + this.ac + "\", ");
         }
         if (!isNaN_(this.r)) {
             a.l("textStyleFontSize : " + this.r + ", ");
@@ -1033,7 +1033,7 @@ var ButtonVisualModelExport = /** @class */ /*@__PURE__*/ (function (_super) {
         a.l("}");
         return a.toString();
     };
-    ButtonVisualModelExport.$t = markType(ButtonVisualModelExport, 'ButtonVisualModelExport');
+    ButtonVisualModelExport.$t = markType(ButtonVisualModelExport, 'ButtonVisualModelExport', Base.$, [IVisualData_$type]);
     return ButtonVisualModelExport;
 }(Base));
 
@@ -1239,10 +1239,13 @@ var ButtonView = /** @class */ /*@__PURE__*/ (function (_super) {
             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 (!isNaN_(this.b.bf) && this.b.bf > 0) {
             this.n.setStyleProperty("border-style", "solid");
         }
@@ -1260,11 +1263,6 @@ var ButtonView = /** @class */ /*@__PURE__*/ (function (_super) {
             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 @@ var XButton = /** @class */ /*@__PURE__*/ (function (_super) {
     };
     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 = 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 = NativeUI.d(a);
         c.t = NativeUI.k(a);
         c.h = this.n;
@@ -4583,7 +4579,7 @@ var XButton = /** @class */ /*@__PURE__*/ (function (_super) {
         c.a = AppearanceHelper.a(this.ne);
         c.u = this.ct;
         c.e = AppearanceHelper.a(this.np);
-        c.ah = this.kr;
+        c.ag = this.kr;
         c.b = AppearanceHelper.a(NativeUI.aj(a));
         c.j = this.u;
         c.f = AppearanceHelper.a(NativeUI.al(b));
@@ -4599,31 +4595,31 @@ var XButton = /** @class */ /*@__PURE__*/ (function (_super) {
         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 = 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 = 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 (!isNaN_(g.f)) {
-                c.r = g.f;
+            if (!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 @@ var IconVisualModelExport = /** @class */ /*@__PURE__*/ (function (_super) {
     __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 @@ var IconVisualModelExport = /** @class */ /*@__PURE__*/ (function (_super) {
         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 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 (!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 (!stringIsNullOrEmpty(this.q)) {
+            a.l("textStyleFontStyle : \"" + this.q + "\", ");
         }
-        if (!stringIsNullOrEmpty(this.p)) {
-            a.l("textStyleFontVariant : \"" + this.p + "\", ");
+        if (!stringIsNullOrEmpty(this.r)) {
+            a.l("textStyleFontVariant : \"" + this.r + "\", ");
         }
-        if (!stringIsNullOrEmpty(this.q)) {
-            a.l("textStyleFontWeight : \"" + this.q + "\", ");
+        if (!stringIsNullOrEmpty(this.s)) {
+            a.l("textStyleFontWeight : \"" + this.s + "\", ");
         }
-        if (!stringIsNullOrEmpty(this.m)) {
-            a.l("textStyleFontFamily : \"" + this.m + "\", ");
+        if (!stringIsNullOrEmpty(this.o)) {
+            a.l("textStyleFontFamily : \"" + this.o + "\", ");
         }
-        if (!stringIsNullOrEmpty(this.n)) {
-            a.l("textStyleFontStretch : \"" + this.n + "\", ");
+        if (!stringIsNullOrEmpty(this.p)) {
+            a.l("textStyleFontStretch : \"" + this.p + "\", ");
         }
-        if (!isNaN_(this.g)) {
-            a.l("textStyleFontSize : " + this.g + ", ");
+        if (!isNaN_(this.h)) {
+            a.l("textStyleFontSize : " + this.h + ", ");
         }
         a.l("}");
         return a.toString();
@@ -5110,71 +5123,71 @@ var IconView = /** @class */ /*@__PURE__*/ (function (_super) {
     __extends(IconView, _super);
     function IconView() {
         var _this = _super.call(this) || this;
-        _this.c = null;
-        _this.s = null;
-        _this.f = null;
-        _this.l = new List$1(Delegate_$type, 0);
-        _this.n = null;
-        _this.o = null;
-        _this.p = null;
+        _this.d = null;
+        _this.v = null;
+        _this.g = null;
+        _this.o = new List$1(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 Dictionary$2(Brush.$, String_$type, 0);
+        _this.j = true;
         _this.y = null;
-        _this.k = new Dictionary$2(Brush.$, String_$type, 0);
-        _this.g = true;
-        _this.v = null;
-        _this.u = null;
-        _this.t = null;
-        _this.m = new List$1(DomWrapper_$type, 0);
-        _this.n = new List$1(Tuple$2.$.specialize(SVGNode.$, Base.$), 0);
-        _this.o = new List$1(Tuple$2.$.specialize(SVGNode.$, Base.$), 0);
-        _this.p = new List$1(Tuple$2.$.specialize(SVGNode.$, Base.$), 0);
+        _this.x = null;
+        _this.w = null;
+        _this.p = new List$1(DomWrapper_$type, 0);
         _this.q = new List$1(Tuple$2.$.specialize(SVGNode.$, Base.$), 0);
         _this.r = new List$1(Tuple$2.$.specialize(SVGNode.$, Base.$), 0);
-        _this.d = new FastIterationDictionary$2(String_$type, List$1.$.specialize(Tuple$2.$.specialize(SVGNode.$, Base.$)), 0);
+        _this.s = new List$1(Tuple$2.$.specialize(SVGNode.$, Base.$), 0);
+        _this.t = new List$1(Tuple$2.$.specialize(SVGNode.$, Base.$), 0);
+        _this.u = new List$1(Tuple$2.$.specialize(SVGNode.$, Base.$), 0);
         _this.e = new FastIterationDictionary$2(String_$type, List$1.$.specialize(Tuple$2.$.specialize(SVGNode.$, Base.$)), 0);
+        _this.f = new FastIterationDictionary$2(String_$type, List$1.$.specialize(Tuple$2.$.specialize(SVGNode.$, Base.$)), 0);
         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 = __values(fromEnum(this.l)), _c = _b.next(); !_c.done; _c = _b.next()) {
+                for (var _b = __values(fromEnum(this.o)), _c = _b.next(); !_c.done; _c = _b.next()) {
                     var b = _c.value;
                     b();
                 }
@@ -5192,109 +5205,109 @@ var IconView = /** @class */ /*@__PURE__*/ (function (_super) {
                         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", 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", 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", isNaN_(this.c.aq) ? "1.5rem" : this.c.aq + "px");
-        this.s.rootWrapper.setStyleProperty("height", 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 = isNaN_(this.c.an) ? 0 : this.c.an;
-        var b = isNaN_(this.c.ao) ? 0 : this.c.ao;
-        var c = isNaN_(this.c.ap) ? 24 : this.c.ap;
-        var d = isNaN_(this.c.am) ? 24 : this.c.am;
-        this.v.setAttribute("viewBox", a + " " + b + " " + c + " " + d);
+        this.v.rootWrapper.setStyleProperty("width", isNaN_(this.d.aq) ? "1.5rem" : this.d.aq + "px");
+        this.v.rootWrapper.setStyleProperty("height", isNaN_(this.d.ai) ? "1.5rem" : this.d.ai + "px");
+    };
+    IconView.prototype.aw = function () {
+        var a = isNaN_(this.d.an) ? 0 : this.d.an;
+        var b = isNaN_(this.d.ao) ? 0 : this.d.ao;
+        var c = isNaN_(this.d.ap) ? 24 : this.d.ap;
+        var d = isNaN_(this.d.am) ? 24 : this.d.am;
+        this.y.setAttribute("viewBox", a + " " + b + " " + c + " " + d);
     };
-    IconView.prototype.ai = function (a, b) {
+    IconView.prototype.am = function (a, b) {
         var c = a.color;
-        if (!this.k.containsKey(a)) {
+        if (!this.n.containsKey(a)) {
             if (a.isGradient) {
-                var d = this.t.getChildCount();
+                var d = this.w.getChildCount();
                 var e = a;
-                var f = this.s.createElementNS("linearGradient", "http://www.w3.org/2000/svg");
+                var f = this.v.createElementNS("linearGradient", "http://www.w3.org/2000/svg");
                 var g = "ig_gradient_" + b + "_" + d;
                 f.setAttribute("id", g);
                 f.setAttribute("x1", e.startX.toString());
@@ -5304,60 +5317,60 @@ var IconView = /** @class */ /*@__PURE__*/ (function (_super) {
                 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 {
             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 {
             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", runOn(this, this.aa)));
-        this.l.add(this.s.rootWrapper.listen("mouseleave", runOn(this, this.ab)));
+    IconView.prototype.ag = function () {
+        this.j = true;
+        this.o.add(this.v.rootWrapper.listen("mouseenter", runOn(this, this.ad)));
+        this.o.add(this.v.rootWrapper.listen("mouseleave", runOn(this, this.ae)));
     };
-    IconView.prototype.af = function () {
+    IconView.prototype.aj = function () {
         var e_2, _a;
-        this.g = false;
+        this.j = false;
         try {
-            for (var _b = __values(fromEnum(this.l)), _c = _b.next(); !_c.done; _c = _b.next()) {
+            for (var _b = __values(fromEnum(this.o)), _c = _b.next(); !_c.done; _c = _b.next()) {
                 var a = _c.value;
                 a();
             }
@@ -5375,15 +5388,15 @@ var IconView = /** @class */ /*@__PURE__*/ (function (_super) {
                     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 @@ var IconView = /** @class */ /*@__PURE__*/ (function (_super) {
         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 List$1(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 Path();
+                    $ret.an = a.w;
+                    return $ret;
+                })());
+                this.aq(c, a);
+                b = new PathVisualData(1, "path1", c);
+                break;
+            case 3:
+                var d = a;
+                var e = new Line();
+                e.an = d.w;
+                e.ao = d.x;
+                e.ap = d.y;
+                e.aq = d.z;
+                this.aq(e, a);
+                b = new LineVisualData(1, "line1", e);
+                break;
+            case 4:
+                var f = a;
+                var g = new Rectangle();
+                g.width = f.z;
+                g.height = f.w;
+                g.ap = f.x;
+                g.aq = f.y;
+                this.aq(g, a);
+                b = new RectangleVisualData(1, "rect1", g);
+                break;
+            case 5:
+            case 6:
+                var h = a;
+                var i = new Ellipse();
+                i.width = h.y * 2;
+                i.height = h.z * 2;
+                this.aq(i, a);
+                b = new 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 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 (typeCast(Path.$, a) !== null) {
+            return new PathVisualData(1, "path1", a);
+        }
+        else if (typeCast(Line.$, a) !== null) {
+            return new LineVisualData(1, "line1", a);
+        }
+        else if (typeCast(Rectangle.$, a) !== null) {
+            return new RectangleVisualData(1, "rect1", a);
+        }
+        else if (typeCast(Ellipse.$, a) !== null) {
+            return new EllipseVisualData(1, "ellipse1", a);
+        }
+        return null;
     };
     IconView.$t = markType(IconView, 'IconView');
     return IconView;
@@ -5445,9 +5552,9 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
         _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 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             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 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
     };
     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 () {
-        NativeUI.y(this.view.w, this.ak);
+        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;
             NativeUI.r(b, this.cw);
             NativeUI.aa(b, this.cx);
             NativeUI.ad(b, this.af);
@@ -5563,22 +5670,22 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             var c = false;
             if (this.svgPath != null) {
                 if (stringStartsWith(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 = NativeUI.r;
                     var f = NativeUI.aa;
                     this.cd();
-                    e = runOn(this.view, this.view.aj);
-                    f = runOn(this.view, this.view.ak);
+                    e = runOn(this.view, this.view.an);
+                    f = 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 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
                     }
                 }
                 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;
-                    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;
+                    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;
-                    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;
+                    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;
-                    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;
+                    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;
-                    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;
+                    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;
-                            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;
+                            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;
-                            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;
+                            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;
-                    NativeUI.r(this.view.n._inner[ab].d, ac.l.f(this.cw));
-                    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;
+                    NativeUI.r(this.view.q._inner[ab].d, ac.l.f(this.cw));
+                    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) {
                 NativeUI.r(ad, this.cw);
             }
@@ -5669,25 +5776,25 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             }
         }
         if (this.m != null) {
-            this.view.aq(this.m);
+            this.view.av(this.m);
         }
         if (this.cy != null) {
-            NativeUI.q(this.view.w, this.cy);
+            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 = __values(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 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
             try {
                 for (var _e = __values(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 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
     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 @@ var XIcon = /** @class */ /*@__PURE__*/ (function (_super) {
         }
     };
     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 = AppearanceHelper.a(NativeUI.al(b));
-        a.c = AppearanceHelper.a(NativeUI.al(b));
-        a.b = AppearanceHelper.a(NativeUI.am(b));
-        a.d = this.af;
-        var c = this.view.a();
-        a.h = c[0];
-        a.f = c[1];
-        a.e = NativeUI.d(b);
-        a.i = NativeUI.k(b);
+        var b = this.view.b();
+        a.i = b[0];
+        a.g = b[1];
+        a.f = NativeUI.d(this.view.z);
+        a.j = NativeUI.k(this.view.z);
+        a.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 = 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 = 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 (!isNaN_(d.f)) {
-                a.g = d.f;
+            if (!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 = markType(XIcon, 'XIcon', Base.$, [INotifyPropertyChanged_$type, IIcon_$type]);
     XIcon.cz = null;
@@ -6478,7 +6582,7 @@ var CalendarVisualModelExport = /** @class */ /*@__PURE__*/ (function (_super) {
                 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: [");
@@ -22266,7 +22370,7 @@ var DatePickerView = /** @class */ /*@__PURE__*/ (function (_super) {
     });
     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 @@ var DatePickerView = /** @class */ /*@__PURE__*/ (function (_super) {
     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 @@ var DatePickerView = /** @class */ /*@__PURE__*/ (function (_super) {
             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 @@ var DatePickerView = /** @class */ /*@__PURE__*/ (function (_super) {
     };
     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 @@ var DatePickerView = /** @class */ /*@__PURE__*/ (function (_super) {
         }
     };
     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 @@ var DatePickerView = /** @class */ /*@__PURE__*/ (function (_super) {
             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 @@ var DatePickerView = /** @class */ /*@__PURE__*/ (function (_super) {
     };
     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 @@ var DatePickerView = /** @class */ /*@__PURE__*/ (function (_super) {
         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 @@ var DatePickerView = /** @class */ /*@__PURE__*/ (function (_super) {
 /**
  * @hidden
  */
-var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
-    __extends(DatePicker, _super);
-    function DatePicker() {
+var XDatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
+    __extends(XDatePicker, _super);
+    function XDatePicker() {
         var _this = _super.call(this) || this;
         _this.h = null;
         _this.u = null;
@@ -22563,32 +22667,32 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         _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 = dateMinValue();
+        _this.a6 = dateMinValue();
         _this.ai = false;
         _this.propertyChanged = null;
         _this.selectedValueChanged = null;
         _this.ae = null;
+        _this.a8 = dateMinValue();
         _this.a7 = dateMinValue();
-        _this.a6 = dateMinValue();
-        _this.bj = "";
-        _this.dt = BrushUtil.h(255, 24, 29, 31);
+        _this.bk = "";
+        _this.du = BrushUtil.h(255, 24, 29, 31);
         _this.z = null;
-        _this.bl = "";
-        _this.a4 = dateMinValue();
-        _this.a3 = dateMaxValue();
+        _this.bm = "";
+        _this.a5 = dateMinValue();
+        _this.a4 = dateMaxValue();
         _this.x = 2;
         _this.v = 1;
         _this.aa = null;
-        _this.du = BrushUtil.h(255, 24, 29, 31);
-        _this.ds = BrushUtil.h(255, 163, 172, 184);
+        _this.dv = BrushUtil.h(255, 24, 29, 31);
+        _this.dt = BrushUtil.h(255, 163, 172, 184);
         _this.ao = true;
         _this.ap = false;
         _this.ag = true;
@@ -22598,9 +22702,9 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         _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 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         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 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             })()));
         }
         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 = delegateRemove(a.selectedValueChanged, runOn(this, this.cn));
+            a.selectedValueChanged = delegateRemove(a.selectedValueChanged, runOn(this, this.co));
             var b = this.c;
-            b.close = delegateRemove(b.close, runOn(this, this.cm));
+            b.close = delegateRemove(b.close, 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 SRProvider(this.h.d);
@@ -22663,64 +22767,64 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         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 DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             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 DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.x;
             this.x = a;
             if (b != this.x) {
-                this.da("Density", enumGetBox(ControlDisplayDensity_$type, b), enumGetBox(ControlDisplayDensity_$type, this.x));
+                this.db("Density", enumGetBox(ControlDisplayDensity_$type, b), enumGetBox(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 DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.v;
             this.v = a;
             if (b != this.v) {
-                this.da("BaseTheme", enumGetBox(BaseControlTheme_$type, b), enumGetBox(BaseControlTheme_$type, this.v));
+                this.db("BaseTheme", enumGetBox(BaseControlTheme_$type, b), enumGetBox(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 DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             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 DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             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 DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             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 DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             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 DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             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 DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.i;
             this.i = a;
             if (b != this.i) {
-                this.da("FirstDayOfWeek", enumGetBox(DayOfWeek_$type, b), enumGetBox(DayOfWeek_$type, this.i));
+                this.db("FirstDayOfWeek", enumGetBox(DayOfWeek_$type, b), 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 DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.k;
             this.k = a;
             if (b != this.k) {
-                this.da("FirstWeekOfYear", enumGetBox(FirstWeek_$type, b), enumGetBox(FirstWeek_$type, this.k));
+                this.db("FirstWeekOfYear", enumGetBox(FirstWeek_$type, b), 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 DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             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 DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.d;
             this.d = a;
             if (this.d != b) {
-                this.da("DateFormat", enumGetBox(DateFormats_$type, b), enumGetBox(DateFormats_$type, this.d));
+                this.db("DateFormat", enumGetBox(DateFormats_$type, b), 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 DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             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 DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             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 DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             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 DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             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 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 (+(dateGetDate(this.value)) != +(dateGetDate(dateMinValue()))) {
-                    if (dateGetDate(this.value) < dateGetDate(this.a9) || dateGetDate(this.value) > dateGetDate(this.a8)) {
+                    if (dateGetDate(this.value) < dateGetDate(this.ba) || dateGetDate(this.value) > 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 (+(dateGetDate(this.value)) == +(dateGetDate(dateMinValue()))) {
                         this.c.value = dateMinValue();
@@ -23077,8 +23181,8 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
                 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 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
                 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 = Base.compareSimple(this.a9, this.a8);
+                    var d = Base.compareSimple(this.ba, this.a9);
                     if (d >= 0) {
-                        this.a8 = dateMaxValue();
+                        this.a9 = dateMaxValue();
                     }
-                    this.c.at = this.a3;
+                    this.c.at = this.a4;
                 }
-                if (dateGetDate(this.value) > dateGetDate(this.a8)) {
-                    this.a5 = dateMinValue();
+                if (dateGetDate(this.value) > dateGetDate(this.a9)) {
+                    this.a6 = dateMinValue();
                     this.ai = true;
                     this.value = dateMinValue();
                     this.ai = false;
@@ -23118,22 +23222,22 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
                 break;
             case "MinDate":
                 if (this.c != null) {
-                    this.c.au = this.a4;
-                    var e = Base.compareSimple(this.a9, this.a8);
+                    this.c.au = this.a5;
+                    var e = Base.compareSimple(this.ba, this.a9);
                     if (e >= 0) {
-                        this.a5 = dateMaxValue();
-                        this.c.at = this.a8;
+                        this.a6 = dateMaxValue();
+                        this.c.at = this.a9;
                     }
                 }
-                if (dateGetDate(this.value) < dateGetDate(this.a9)) {
-                    this.a5 = dateMinValue();
+                if (dateGetDate(this.value) < dateGetDate(this.ba)) {
+                    this.a6 = dateMinValue();
                     this.ai = true;
                     this.value = dateMinValue();
                     this.ai = false;
                 }
                 break;
             case "TextStyle":
-                this.dn();
+                this.dp();
                 break;
             case "ShowClearButton":
                 if (this.o != null) {
@@ -23146,27 +23250,27 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             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 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
                 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 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
                         this.q.disabled = this.av;
                     }
                     if (this.o != null) {
-                        this.o.disabled = this.av;
+                        this.o.disabled = this.az();
                     }
                 }
                 break;
@@ -23204,14 +23308,17 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
                 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 (stringContains(b, "/")) {
             a = '/';
         }
@@ -23227,7 +23334,7 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         else if (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 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
                     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 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
                     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 (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 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         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 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         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 = delegateCombine(a.change, runOn(this, this.cy));
+        a.change = delegateCombine(a.change, runOn(this, this.cz));
         var b = this.o;
-        b.changing = delegateCombine(b.changing, runOn(this, this.cz));
+        b.changing = delegateCombine(b.changing, runOn(this, this.c0));
         var c = this.o;
-        c.keyDown = delegateCombine(c.keyDown, runOn(this, this.c0));
+        c.keyDown = delegateCombine(c.keyDown, 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 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             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 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             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 = stringSplit(a, b, 1);
         var d = 0;
@@ -23437,17 +23544,17 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             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 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             }
             if (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 = !stringIsNullOrWhiteSpace(this.af.b1("January_Full")) ? this.af.b1("January_Full").toLowerCase() : "january";
@@ -23542,45 +23649,45 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         }
         if (g) {
             var ag = dateFromValues(f, e, d, 0, 0, 0, 0);
-            var ah = Base.compareSimple(ag, this.a9);
-            var ai = Base.compareSimple(ag, this.a8);
+            var ah = Base.compareSimple(ag, this.ba);
+            var ai = 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 (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 (+(dateGetDate(this.a7)) != +(dateGetDate(dateMinValue()))) {
+            if (+(dateGetDate(this.a8)) != +(dateGetDate(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 = !stringIsNullOrWhiteSpace(this.af.b1("Sunday_Short")) ? this.af.b1("Sunday_Short") : "Sun";
@@ -23605,7 +23712,7 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
                                 break;
                         }
                     }
-                    else if (this.bg == "dddd") {
+                    else if (this.bh == "dddd") {
                         switch (this.value.getDay()) {
                             case 0:
                                 b = !stringIsNullOrWhiteSpace(this.af.b1("Sunday_Full")) ? this.af.b1("Sunday_Full") : "Sunday";
@@ -23631,12 +23738,12 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
                         }
                     }
                     var d = dateGetMonth(this.value).toString();
-                    if (this.bk == "mm") {
+                    if (this.bl == "mm") {
                         if (dateGetMonth(this.value) < 10) {
                             d = "0" + d;
                         }
                     }
-                    else if (this.bk == "mmm") {
+                    else if (this.bl == "mmm") {
                         switch (dateGetMonth(this.value)) {
                             case 1:
                                 d = !stringIsNullOrWhiteSpace(this.af.b1("January_Short")) ? this.af.b1("January_Short") : "Jan";
@@ -23676,7 +23783,7 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
                                 break;
                         }
                     }
-                    else if (this.bk == "mmmm") {
+                    else if (this.bl == "mmmm") {
                         switch (dateGetMonth(this.value)) {
                             case 1:
                                 d = !stringIsNullOrWhiteSpace(this.af.b1("January_Full")) ? this.af.b1("January_Full") : "January";
@@ -23717,31 +23824,31 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
                         }
                     }
                     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 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             }
         }
     };
-    DatePicker.prototype.cp = function () {
+    XDatePicker.prototype.cq = function () {
         if (this.av == true) {
             return;
         }
@@ -23765,65 +23872,65 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         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 Popup();
         this.u.aq = this.aw;
-        this.u.ax = this.a2;
+        this.u.ax = this.a3;
         this.u.cy = 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) != +(dateMinValue())) {
-            this.c.au = this.a9;
+        if (+(this.ba) != +(dateMinValue())) {
+            this.c.au = this.ba;
         }
-        if (+(this.a8) != +(dateMaxValue())) {
-            this.c.at = this.a8;
+        if (+(this.a9) != +(dateMaxValue())) {
+            this.c.at = this.a9;
         }
-        if (+(this.ba) != +(dateMinValue())) {
-            this.c.av = this.ba;
+        if (+(this.bb) != +(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 = delegateCombine(a.selectedValueChanged, runOn(this, this.cn));
+        a.selectedValueChanged = delegateCombine(a.selectedValueChanged, runOn(this, this.co));
         var b = this.c;
-        b.close = delegateCombine(b.close, runOn(this, this.cm));
+        b.close = delegateCombine(b.close, 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 DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             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 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             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 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 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             }
         }
     };
-    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 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         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 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
                     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 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             }
         }
     };
-    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 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         }
         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 = markType(DatePicker, 'DatePicker', Base.$, [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 = markType(XDatePicker, 'XDatePicker', Base.$, [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;
 }(Base));
 
 /*
@@ -24154,8 +24261,8 @@ var IgxInputChangeEventArgs = /** @class */ /*@__PURE__*/ (function () {
 }());
 
 // 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 IgxDatePickerComponent = /** @class */ /*@__PURE__*/ (function () {
         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 @@ var IgxDatePickerComponent = /** @class */ /*@__PURE__*/ (function () {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(IgxDatePickerComponent.prototype, "width", {
+    Object.defineProperty(IgxXDatePickerComponent.prototype, "width", {
         get: function () {
             return this._width;
         },
@@ -24209,14 +24316,14 @@ var IgxDatePickerComponent = /** @class */ /*@__PURE__*/ (function () {
         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 @@ var IgxDatePickerComponent = /** @class */ /*@__PURE__*/ (function () {
         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 @@ var IgxDatePickerComponent = /** @class */ /*@__PURE__*/ (function () {
         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 brushToString(this.i.dw);
+            return brushToString(this.i.dx);
         },
         set: function (v) {
-            this.i.dw = stringToBrush(v);
+            this.i.dx = 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 @@ var IgxDatePickerComponent = /** @class */ /*@__PURE__*/ (function () {
         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 @@ var IgxDatePickerComponent = /** @class */ /*@__PURE__*/ (function () {
         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 @@ var IgxDatePickerComponent = /** @class */ /*@__PURE__*/ (function () {
         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 @@ var IgxDatePickerComponent = /** @class */ /*@__PURE__*/ (function () {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(IgxDatePickerComponent.prototype, "textColor", {
+    Object.defineProperty(IgxXDatePickerComponent.prototype, "textColor", {
         /**
          * Gets or Sets the text color
         */
         get: function () {
-            return brushToString(this.i.dx);
+            return brushToString(this.i.dy);
         },
         set: function (v) {
-            this.i.dx = stringToBrush(v);
+            this.i.dy = 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 brushToString(this.i.dv);
+            return brushToString(this.i.dw);
         },
         set: function (v) {
-            this.i.dv = stringToBrush(v);
+            this.i.dw = 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 = ensureBool(v);
+            this.i.a0 = 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 = ensureBool(v);
+            this.i.a1 = 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 @@ var IgxDatePickerComponent = /** @class */ /*@__PURE__*/ (function () {
         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 @@ var IgxDatePickerComponent = /** @class */ /*@__PURE__*/ (function () {
         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 @@ var IgxDatePickerComponent = /** @class */ /*@__PURE__*/ (function () {
         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 @@ var IgxDatePickerComponent = /** @class */ /*@__PURE__*/ (function () {
         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 = ensureBool(v);
+            this.i.a2 = 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 @@ var IgxDatePickerComponent = /** @class */ /*@__PURE__*/ (function () {
         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 @@ var IgxDatePickerComponent = /** @class */ /*@__PURE__*/ (function () {
         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 @@ var IgxDatePickerComponent = /** @class */ /*@__PURE__*/ (function () {
         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 @@ var IgxDatePickerComponent = /** @class */ /*@__PURE__*/ (function () {
         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 = ensureBool(v);
+            this.i.a3 = 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 @@ var IgxDatePickerComponent = /** @class */ /*@__PURE__*/ (function () {
         if (typeName.indexOf("Xam") === 0) {
             typeName = typeName.substring(3);
         }
-        genericPrefix = toSpinal("DatePickerComponent");
+        genericPrefix = toSpinal("XDatePickerComponent");
         var additionalPrefixes = [];
         var prefix = toSpinal(typeName);
         additionalPrefixes.push(prefix + "-");
@@ -24645,26 +24752,26 @@ var IgxDatePickerComponent = /** @class */ /*@__PURE__*/ (function () {
         }
         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 @@ var IgxDatePickerComponent = /** @class */ /*@__PURE__*/ (function () {
         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 @@ var IgxDatePickerComponent = /** @class */ /*@__PURE__*/ (function () {
         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 @@ var IgxDatePickerComponent = /** @class */ /*@__PURE__*/ (function () {
         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 @@ var IgxDatePickerComponent = /** @class */ /*@__PURE__*/ (function () {
         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 @@ var IgxDatePickerComponent = /** @class */ /*@__PURE__*/ (function () {
         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 @@ var IgxDatePickerComponent = /** @class */ /*@__PURE__*/ (function () {
         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 @@ var IgxDatePickerComponent = /** @class */ /*@__PURE__*/ (function () {
             act();
         }
     };
-    IgxDatePickerComponent.ɵfac = ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxDatePickerComponent, deps: [{ token: Renderer2 }, { token: ViewContainerRef }, { token: NgZone }, { token: Injector }, { token: ComponentFactoryResolver }], target: ɵɵFactoryTarget.Component });
-    IgxDatePickerComponent.ɵcmp = ɵɵ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: 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: ChangeDetectionStrategy.OnPush });
-    return IgxDatePickerComponent;
+    IgxXDatePickerComponent.ɵfac = ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxXDatePickerComponent, deps: [{ token: Renderer2 }, { token: ViewContainerRef }, { token: NgZone }, { token: Injector }, { token: ComponentFactoryResolver }], target: ɵɵFactoryTarget.Component });
+    IgxXDatePickerComponent.ɵcmp = ɵɵ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: 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: ChangeDetectionStrategy.OnPush });
+    return IgxXDatePickerComponent;
 }());
-ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxDatePickerComponent, decorators: [{
+ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxXDatePickerComponent, decorators: [{
             type: 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: 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: Renderer2 }, { type: ViewContainerRef }, { type: NgZone }, { type: Injector }, { type: ComponentFactoryResolver }]; }, propDecorators: { _datePickerContainer: [{
@@ -29205,21 +29312,21 @@ 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.
 */
-var IgxDatePickerModule = /** @class */ /*@__PURE__*/ (function () {
-    function IgxDatePickerModule() {
-        TypeRegistrar.registerCons('IgxDatePickerComponent', IgxDatePickerComponent);
-        TypeRegistrar.register('DatePicker', DatePicker.$type);
+var IgxXDatePickerModule = /** @class */ /*@__PURE__*/ (function () {
+    function IgxXDatePickerModule() {
+        TypeRegistrar.registerCons('IgxXDatePickerComponent', IgxXDatePickerComponent);
+        TypeRegistrar.register('XDatePicker', XDatePicker.$type);
     }
-    IgxDatePickerModule.ɵfac = ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxDatePickerModule, deps: [], target: ɵɵFactoryTarget.NgModule });
-    IgxDatePickerModule.ɵmod = ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxDatePickerModule, declarations: [IgxDatePickerComponent], imports: [CommonModule, IgxXCalendarModule,
+    IgxXDatePickerModule.ɵfac = ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxXDatePickerModule, deps: [], target: ɵɵFactoryTarget.NgModule });
+    IgxXDatePickerModule.ɵmod = ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxXDatePickerModule, declarations: [IgxXDatePickerComponent], imports: [CommonModule, IgxXCalendarModule,
             IgxXButtonModule,
             IgxXIconModule,
             IgxXInputGroupModule], exports: [IgxXCalendarModule,
             IgxXButtonModule,
             IgxXIconModule,
             IgxXInputGroupModule,
-            IgxDatePickerComponent] });
-    IgxDatePickerModule.ɵinj = ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxDatePickerModule, imports: [[CommonModule, IgxXCalendarModule,
+            IgxXDatePickerComponent] });
+    IgxXDatePickerModule.ɵinj = ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxXDatePickerModule, imports: [[CommonModule, IgxXCalendarModule,
                 IgxXButtonModule,
                 IgxXIconModule,
                 IgxXInputGroupModule
@@ -29227,17 +29334,17 @@ var IgxDatePickerModule = /** @class */ /*@__PURE__*/ (function () {
             IgxXButtonModule,
             IgxXIconModule,
             IgxXInputGroupModule] });
-    return IgxDatePickerModule;
+    return IgxXDatePickerModule;
 }());
-ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxDatePickerModule, decorators: [{
+ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxXDatePickerModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [IgxDatePickerComponent],
+                    declarations: [IgxXDatePickerComponent],
                     exports: [IgxXCalendarModule,
                         IgxXButtonModule,
                         IgxXIconModule,
                         IgxXInputGroupModule,
-                        IgxDatePickerComponent
+                        IgxXDatePickerComponent
                     ],
                     imports: [CommonModule, IgxXCalendarModule,
                         IgxXButtonModule,
@@ -29254,35 +29361,35 @@ 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.
 */
-var IgxDatePickerDynamicModule = /** @class */ /*@__PURE__*/ (function () {
-    function IgxDatePickerDynamicModule() {
-        TypeRegistrar.registerCons('DatePicker', DatePicker);
-        TypeRegistrar.registerCons('IgxDatePickerComponent', IgxDatePickerComponent);
-        TypeRegistrar.register('DatePicker', DatePicker.$type);
+var IgxXDatePickerDynamicModule = /** @class */ /*@__PURE__*/ (function () {
+    function IgxXDatePickerDynamicModule() {
+        TypeRegistrar.registerCons('XDatePicker', XDatePicker);
+        TypeRegistrar.registerCons('IgxXDatePickerComponent', IgxXDatePickerComponent);
+        TypeRegistrar.register('XDatePicker', XDatePicker.$type);
     }
-    IgxDatePickerDynamicModule.ɵfac = ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxDatePickerDynamicModule, deps: [], target: ɵɵFactoryTarget.NgModule });
-    IgxDatePickerDynamicModule.ɵmod = ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxDatePickerDynamicModule, imports: [CommonModule, IgxXCalendarDynamicModule,
+    IgxXDatePickerDynamicModule.ɵfac = ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxXDatePickerDynamicModule, deps: [], target: ɵɵFactoryTarget.NgModule });
+    IgxXDatePickerDynamicModule.ɵmod = ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxXDatePickerDynamicModule, imports: [CommonModule, IgxXCalendarDynamicModule,
             IgxXButtonDynamicModule,
             IgxXIconDynamicModule,
             IgxXInputGroupDynamicModule,
-            IgxDatePickerModule], exports: [IgxXCalendarDynamicModule,
+            IgxXDatePickerModule], exports: [IgxXCalendarDynamicModule,
             IgxXButtonDynamicModule,
             IgxXIconDynamicModule,
             IgxXInputGroupDynamicModule,
-            IgxDatePickerModule] });
-    IgxDatePickerDynamicModule.ɵinj = ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxDatePickerDynamicModule, imports: [[CommonModule, IgxXCalendarDynamicModule,
+            IgxXDatePickerModule] });
+    IgxXDatePickerDynamicModule.ɵinj = ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxXDatePickerDynamicModule, imports: [[CommonModule, IgxXCalendarDynamicModule,
                 IgxXButtonDynamicModule,
                 IgxXIconDynamicModule,
                 IgxXInputGroupDynamicModule,
-                IgxDatePickerModule
+                IgxXDatePickerModule
             ], IgxXCalendarDynamicModule,
             IgxXButtonDynamicModule,
             IgxXIconDynamicModule,
             IgxXInputGroupDynamicModule,
-            IgxDatePickerModule] });
-    return IgxDatePickerDynamicModule;
+            IgxXDatePickerModule] });
+    return IgxXDatePickerDynamicModule;
 }());
-ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxDatePickerDynamicModule, decorators: [{
+ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxXDatePickerDynamicModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],
@@ -29290,15 +29397,15 @@ var IgxDatePickerDynamicModule = /** @class */ /*@__PURE__*/ (function () {
                         IgxXButtonDynamicModule,
                         IgxXIconDynamicModule,
                         IgxXInputGroupDynamicModule,
-                        IgxDatePickerModule
+                        IgxXDatePickerModule
                     ],
                     imports: [CommonModule, IgxXCalendarDynamicModule,
                         IgxXButtonDynamicModule,
                         IgxXIconDynamicModule,
                         IgxXInputGroupDynamicModule,
-                        IgxDatePickerModule
+                        IgxXDatePickerModule
                     ],
-                    entryComponents: [IgxDatePickerComponent]
+                    entryComponents: [IgxXDatePickerComponent]
                 }]
         }], ctorParameters: function () { return []; } });
 
@@ -30675,7 +30782,7 @@ var XCheckbox = /** @class */ /*@__PURE__*/ (function (_super) {
         $ret.addItem("CheckedBackgroundColor", BrushUtil.h(255, 105, 136, 255));
         $ret.addItem("TickColor", 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 @@ var XCheckbox = /** @class */ /*@__PURE__*/ (function (_super) {
         $ret.addItem("CheckedBackgroundColor", BrushUtil.h(255, 105, 136, 255));
         $ret.addItem("TickColor", 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 @@ var ButtonGroupVisualModelExport = /** @class */ /*@__PURE__*/ (function (_super
             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 XInputBridge = /** @class */ /*@__PURE__*/ (function (_super) {
         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 = markType(XInputBridge, 'XInputBridge', XComponentBridge.$, [INativeUIInputBridge_$type]);
     return XInputBridge;
 }(XComponentBridge));
@@ -35518,12 +35628,12 @@ var XButtonBridge = /** @class */ /*@__PURE__*/ (function (_super) {
                 this.y = d;
                 this.af = b;
                 break;
-            case 12:
+            case 13:
                 e.gotFocus = delegateCombine(e.gotFocus, runOn(this, this.ah));
                 this.v = d;
                 this.ab = b;
                 break;
-            case 13:
+            case 14:
                 e.lostFocus = delegateCombine(e.lostFocus, runOn(this, this.ai));
                 this.w = d;
                 this.ad = b;
@@ -35589,7 +35699,7 @@ var XButtonBridge = /** @class */ /*@__PURE__*/ (function (_super) {
                 d.clearButtonContent();
                 if (typeCast(NativeUIComponent.$, c) !== null) {
                     this.ac = c;
-                    d.appendButtonContent(this.ac.al);
+                    d.appendButtonContent(this.ac.an);
                 }
                 else {
                     this.ac = c;
@@ -35620,7 +35730,7 @@ var XButtonBridge = /** @class */ /*@__PURE__*/ (function (_super) {
             case 54:
                 if (typeCast(NativeUIComponent.$, c) !== null) {
                     this.aa = c;
-                    d.appendButtonContent(this.aa.al);
+                    d.appendButtonContent(this.aa.an);
                 }
                 break;
             case 0:
@@ -35678,6 +35788,9 @@ var XButtonBridge = /** @class */ /*@__PURE__*/ (function (_super) {
             case 11:
                 d.aa = c;
                 break;
+            case 83:
+                d.bu = c;
+                break;
         }
     };
     XButtonBridge.prototype.getValue = function (a, b) {
@@ -35713,6 +35826,7 @@ var XButtonBridge = /** @class */ /*@__PURE__*/ (function (_super) {
             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 @@ var XButtonBridge = /** @class */ /*@__PURE__*/ (function (_super) {
             default: return 3;
         }
     };
+    XButtonBridge.prototype.exportVisualData = function (a) {
+        return a.d7();
+    };
     XButtonBridge.$t = markType(XButtonBridge, 'XButtonBridge', XComponentBridge.$);
     return XButtonBridge;
 }(XComponentBridge));
@@ -35819,6 +35936,10 @@ var XCheckboxBridge = /** @class */ /*@__PURE__*/ (function (_super) {
             case 7: return c.checked;
             case 18: return enumGetBox(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 @@ var XCheckboxBridge = /** @class */ /*@__PURE__*/ (function (_super) {
             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 = markType(XCheckboxBridge, 'XCheckboxBridge', XComponentBridge.$);
     return XCheckboxBridge;
 }(XComponentBridge));
@@ -35954,6 +36090,9 @@ var XIconBridge = /** @class */ /*@__PURE__*/ (function (_super) {
             return;
         }
     };
+    XIconBridge.prototype.exportVisualData = function (a) {
+        return a.au();
+    };
     XIconBridge.$t = markType(XIconBridge, 'XIconBridge', XComponentBridge.$);
     return XIconBridge;
 }(XComponentBridge));
@@ -36014,12 +36153,12 @@ var XPopupBridge = /** @class */ /*@__PURE__*/ (function (_super) {
                 this.z = d;
                 this.ah = b;
                 break;
-            case 12:
+            case 13:
                 e.popupGotFocus = delegateCombine(e.popupGotFocus, runOn(this, this.ak));
                 this.w = d;
                 this.ae = b;
                 break;
-            case 13:
+            case 14:
                 e.popupLostFocus = delegateCombine(e.popupLostFocus, runOn(this, this.al));
                 this.x = d;
                 this.af = b;
@@ -36049,12 +36188,12 @@ var XPopupBridge = /** @class */ /*@__PURE__*/ (function (_super) {
                 this.z = null;
                 this.ah = null;
                 break;
-            case 12:
+            case 13:
                 e.popupGotFocus = delegateRemove(e.popupGotFocus, runOn(this, this.ak));
                 this.w = null;
                 this.ae = null;
                 break;
-            case 13:
+            case 14:
                 e.popupLostFocus = delegateRemove(e.popupLostFocus, runOn(this, this.al));
                 this.x = null;
                 this.af = null;
@@ -36211,15 +36350,18 @@ var XPopupBridge = /** @class */ /*@__PURE__*/ (function (_super) {
             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 @@ var XPopupBridge = /** @class */ /*@__PURE__*/ (function (_super) {
     };
     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 = markType(XPopupBridge, 'XPopupBridge', XComponentBridge.$, [INativeUIPopupBridge_$type]);
@@ -36268,7 +36410,7 @@ var NativeUIXInputsFactory = /** @class */ /*@__PURE__*/ (function (_super) {
         configurable: true
     });
     NativeUIXInputsFactory.j = function () {
-        NativeUIComponent.ap(NativeUIXInputsFactory.b);
+        NativeUIComponent.ar(NativeUIXInputsFactory.b);
     };
     Object.defineProperty(NativeUIXInputsFactory.prototype, "flavor", {
         get: function () {
@@ -36330,7 +36472,7 @@ var NativeUIXInputsFactory = /** @class */ /*@__PURE__*/ (function (_super) {
         f.inputs.add(j);
         var l = new XInputBridge(f);
         var m = new NativeUIInput();
-        m.al = d;
+        m.an = d;
         m.d = l;
         b(m);
     };
@@ -36344,7 +36486,7 @@ var NativeUIXInputsFactory = /** @class */ /*@__PURE__*/ (function (_super) {
         var g = e.getExternal(f, e.rootWrapper, e.getExternal(f, null, null));
         var h = new XButtonBridge(f);
         var i = new NativeUIButton();
-        i.al = d;
+        i.an = d;
         i.d = h;
         b(i);
     };
@@ -36357,7 +36499,7 @@ var NativeUIXInputsFactory = /** @class */ /*@__PURE__*/ (function (_super) {
         var g = e.getExternal(f, e.rootWrapper, e.getExternal(f, null, null));
         var h = new XCheckboxBridge(f);
         var i = new NativeUICheckbox();
-        i.al = d;
+        i.an = d;
         i.d = h;
         b(i);
     };
@@ -36370,7 +36512,7 @@ var NativeUIXInputsFactory = /** @class */ /*@__PURE__*/ (function (_super) {
         var g = e.getExternal(f, e.rootWrapper, e.getExternal(f, null, null));
         var h = new XIconBridge(f);
         var i = new 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 NativeUIXInputsFactory = /** @class */ /*@__PURE__*/ (function (_super) {
         var m = k.getExternal(l, k.rootWrapper, k.getExternal(l, null, null));
         var n = new XButtonBridge(l);
         var o = new 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 NativeUIXInputsFactory = /** @class */ /*@__PURE__*/ (function (_super) {
         var g = e.getExternal(f, e.rootWrapper, e.getExternal(f, null, null));
         var h = new XIconBridge(f);
         var i = new NativeUIIcon();
-        i.al = d;
+        i.an = d;
         i.d = h;
         b(i);
     };
@@ -36407,7 +36549,7 @@ var NativeUIXInputsFactory = /** @class */ /*@__PURE__*/ (function (_super) {
         f.provideRenderer(e);
         var g = new XPopupBridge(f);
         var h = new NativeUIPopup();
-        h.al = d;
+        h.an = d;
         h.d = g;
         b(h);
     };
@@ -36450,7 +36592,7 @@ var XIconButtonBridge = /** @class */ /*@__PURE__*/ (function (_super) {
         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,8 +36720,69 @@ 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.
 */
 
+/*
+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) {
+    __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 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 (!stringIsNullOrEmpty(this.k)) {
+            a.l("textStyleFontStyle: \"" + this.k + "\", ");
+        }
+        if (!stringIsNullOrEmpty(this.l)) {
+            a.l("textStyleFontVariant: \"" + this.l + "\", ");
+        }
+        if (!stringIsNullOrEmpty(this.m)) {
+            a.l("textStyleFontWeight: \"" + this.m + "\", ");
+        }
+        if (!stringIsNullOrEmpty(this.i)) {
+            a.l("textStyleFontFamily: \"" + this.i + "\", ");
+        }
+        if (!stringIsNullOrEmpty(this.j)) {
+            a.l("textStyleFontStretch: \"" + this.j + "\", ");
+        }
+        if (!isNaN_(this.d)) {
+            a.l("textStyleFontSize: " + this.d + ", ");
+        }
+        a.l("}");
+        return a.toString();
+    };
+    TextBlockVisualModelExport.$t = markType(TextBlockVisualModelExport, 'TextBlockVisualModelExport');
+    return TextBlockVisualModelExport;
+}(Base));
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonClickEventArgs, ButtonDisplayStyle_$type, ButtonGroupDisplayStyle_$type, ButtonGroupOrientation, ButtonGroupOrientation_$type, ButtonGroupSelectionChangedEventArgs, ButtonGroupView, ButtonGroupVisualModelExport, ButtonView, ButtonVisualModelExport, CalendarView, CalendarVisualModelExport, CheckboxChangeEventArgs, CheckboxLabelPosition_$type, CheckboxView, CheckboxVisualModelExport, DateFormats, DateFormats_$type, DatePicker, DatePickerView, DatePickerVisualModelExport, DateTimeValueFormatter, DayInfo, DayOfWeek, DayOfWeek_$type, ElevationHelper, FirstWeek, FirstWeek_$type, GotFocusEventArgs, IconClickedEventArgs, IconView, IconVisualModelExport, IgxButtonClickEventArgs, IgxButtonGroupSelectionChangedEventArgs, IgxCheckboxChangeEventArgs, IgxDatePickerComponent, IgxDatePickerDynamicModule, IgxDatePickerModule, IgxGotFocusEventArgs, IgxInputChangeEventArgs, IgxLostFocusEventArgs, IgxSelectedValueChangedEventArgs, IgxXButtonComponent, IgxXButtonDynamicModule, IgxXButtonGroupButtonCollection, IgxXButtonGroupComponent, IgxXButtonGroupDynamicModule, IgxXButtonGroupModule, IgxXButtonModule, IgxXCalendarComponent, IgxXCalendarDynamicModule, IgxXCalendarLocaleEnModule, IgxXCalendarModule, IgxXCheckboxComponent, IgxXCheckboxDynamicModule, IgxXCheckboxModule, IgxXIconComponent, IgxXIconDynamicModule, IgxXIconModule, IgxXInputComponent, IgxXInputDynamicModule, IgxXInputGroupComponent, IgxXInputGroupDynamicModule, IgxXInputGroupInputCollection, IgxXInputGroupItemComponent, IgxXInputGroupModule, IgxXInputModule, IgxXLabelComponent, IgxXLabelDynamicModule, IgxXLabelModule, IgxXPrefixComponent, IgxXPrefixDynamicModule, IgxXPrefixModule, IgxXRippleComponent, IgxXRippleDynamicModule, IgxXRippleModule, IgxXSuffixComponent, InputChangeEventArgs, InputGroupDisplayType, InputGroupDisplayType_$type, InputGroupView, InputGroupVisualModelExport, InputShiftType, InputShiftType_$type, InputView, InputVisualModelExport, KEYCODES_$type, LabelShiftType, LabelShiftType_$type, LabelView, LabelVisualModelExport, LostFocusEventArgs, MaskOptions, MaskParsingService, NativeUIXInputsFactory, PrefixShiftType, PrefixShiftType_$type, PrefixView, PrefixVisualModelExport, Replaced, RippleView, RippleVisualModelExport, SelectedValueChangedEventArgs, SuffixShiftType, SuffixShiftType_$type, SuffixView, SuffixVisualModelExport, TextElementsVisualModelExport, Theme, ThemeResolver, XButton, XButtonBridge, XButtonGroup, XButtonGroupButtonCollection, XCalendar, XCalendarLocaleEn, XCheckbox, XCheckboxBridge, XComponentBridge, XIcon, XIconBridge, XIconButtonBridge, XInput, XInputBridge, XInputGroup, XInputGroupInputCollection, XInputGroupItem, XLabel, XPopupBridge, XPrefix, XRipple, XSuffix };
+export { ButtonClickEventArgs, ButtonDisplayStyle_$type, ButtonGroupDisplayStyle_$type, ButtonGroupOrientation, ButtonGroupOrientation_$type, ButtonGroupSelectionChangedEventArgs, ButtonGroupView, ButtonGroupVisualModelExport, ButtonView, ButtonVisualModelExport, CalendarView, CalendarVisualModelExport, CheckboxChangeEventArgs, CheckboxLabelPosition_$type, CheckboxView, CheckboxVisualModelExport, DateFormats, DateFormats_$type, DatePickerView, DatePickerVisualModelExport, DateTimeValueFormatter, DayInfo, DayOfWeek, DayOfWeek_$type, ElevationHelper, FirstWeek, FirstWeek_$type, GotFocusEventArgs, IconClickedEventArgs, IconView, IconVisualModelExport, IgxButtonClickEventArgs, IgxButtonGroupSelectionChangedEventArgs, IgxCheckboxChangeEventArgs, IgxGotFocusEventArgs, IgxInputChangeEventArgs, IgxLostFocusEventArgs, IgxSelectedValueChangedEventArgs, IgxXButtonComponent, IgxXButtonDynamicModule, IgxXButtonGroupButtonCollection, IgxXButtonGroupComponent, IgxXButtonGroupDynamicModule, IgxXButtonGroupModule, IgxXButtonModule, IgxXCalendarComponent, IgxXCalendarDynamicModule, IgxXCalendarLocaleEnModule, IgxXCalendarModule, IgxXCheckboxComponent, IgxXCheckboxDynamicModule, IgxXCheckboxModule, IgxXDatePickerComponent, IgxXDatePickerDynamicModule, IgxXDatePickerModule, IgxXIconComponent, IgxXIconDynamicModule, IgxXIconModule, IgxXInputComponent, IgxXInputDynamicModule, IgxXInputGroupComponent, IgxXInputGroupDynamicModule, IgxXInputGroupInputCollection, IgxXInputGroupItemComponent, IgxXInputGroupModule, IgxXInputModule, IgxXLabelComponent, IgxXLabelDynamicModule, IgxXLabelModule, IgxXPrefixComponent, IgxXPrefixDynamicModule, IgxXPrefixModule, IgxXRippleComponent, IgxXRippleDynamicModule, IgxXRippleModule, IgxXSuffixComponent, InputChangeEventArgs, InputGroupDisplayType, InputGroupDisplayType_$type, InputGroupView, InputGroupVisualModelExport, InputShiftType, InputShiftType_$type, InputView, InputVisualModelExport, KEYCODES_$type, LabelShiftType, LabelShiftType_$type, LabelView, LabelVisualModelExport, LostFocusEventArgs, MaskOptions, MaskParsingService, NativeUIXInputsFactory, PrefixShiftType, PrefixShiftType_$type, PrefixView, PrefixVisualModelExport, Replaced, RippleView, RippleVisualModelExport, SelectedValueChangedEventArgs, SuffixShiftType, SuffixShiftType_$type, SuffixView, SuffixVisualModelExport, TextBlockVisualModelExport, TextElementsVisualModelExport, Theme, ThemeResolver, XButton, XButtonBridge, XButtonGroup, XButtonGroupButtonCollection, XCalendar, XCalendarLocaleEn, XCheckbox, XCheckboxBridge, XComponentBridge, XDatePicker, XIcon, XIconBridge, XIconButtonBridge, XInput, XInputBridge, XInputGroup, XInputGroupInputCollection, XInputGroupItem, XLabel, XPopupBridge, XPrefix, XRipple, XSuffix };