igniteui-angular-inputs 18.0.0 → 18.1.0

package/fesm2015/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, Base, markType, 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, IgCollection, SyncableObservableCollection$2, 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, Base, markType, 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, IgCollection, SyncableObservableCollection$2, 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 { CommonModule } from '@angular/common';
 
 /*
@@ -847,17 +847,17 @@ let ButtonVisualModelExport = /*@__PURE__*/ (() => {
             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;
@@ -869,7 +869,7 @@ let ButtonVisualModelExport = /*@__PURE__*/ (() => {
             this.n = false;
             this.l = false;
         }
-        ab() {
+        serialize() {
             let a = new StringBuilder(0);
             a.l("{");
             a.l("top : " + this.s + ", ");
@@ -890,20 +890,20 @@ let ButtonVisualModelExport = /*@__PURE__*/ (() => {
             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 + ", ");
@@ -924,7 +924,7 @@ let ButtonVisualModelExport = /*@__PURE__*/ (() => {
             return a.toString();
         }
     }
-    ButtonVisualModelExport.$t = markType(ButtonVisualModelExport, 'ButtonVisualModelExport');
+    ButtonVisualModelExport.$t = markType(ButtonVisualModelExport, 'ButtonVisualModelExport', Base.$, [IVisualData_$type]);
     return ButtonVisualModelExport;
 })();
 
@@ -1103,10 +1103,13 @@ let ButtonView = /*@__PURE__*/ (() => {
                 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");
             }
@@ -1124,11 +1127,6 @@ let ButtonView = /*@__PURE__*/ (() => {
                 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");
-            }
         }
         as() {
             switch (this.b.k5) {
@@ -3761,17 +3759,15 @@ let XButton = /*@__PURE__*/ (() => {
         }
         f0() {
             let a = this.b();
-            return a.ab();
+            return a.serialize();
         }
         b() {
             let a = this.view.q;
             let b = this.view.s;
             let c = new ButtonVisualModelExport();
-            let d = UIElementPropertyAccessorFactory.c.a(12, 0);
-            let e = d.b(a);
-            let f = this.view.a();
-            c.s = f[0];
-            c.q = f[1];
+            let 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;
@@ -3782,7 +3778,7 @@ let XButton = /*@__PURE__*/ (() => {
             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));
@@ -3798,31 +3794,31 @@ let XButton = /*@__PURE__*/ (() => {
             c.n = this.a0;
             c.l = this.disabled;
             if (this.aa != null) {
-                let g = this.aa;
-                if (this.view != null && g.q == null) {
-                    let h = this.view.k;
-                    let 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;
+                let e = this.aa;
+                if (this.view != null && e.q == null) {
+                    let f = this.view.k;
+                    let 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;
@@ -4229,22 +4225,24 @@ let IconVisualModelExport = /*@__PURE__*/ (() => {
     class IconVisualModelExport extends Base {
         constructor() {
             super(...arguments);
-            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;
         }
         get svgPath() {
             return this._svgPath;
@@ -4252,36 +4250,47 @@ let IconVisualModelExport = /*@__PURE__*/ (() => {
         set svgPath(a) {
             this._svgPath = a;
         }
-        k() {
+        get svg() {
+            return this._svg;
+        }
+        set svg(a) {
+            this._svg = a;
+        }
+        l() {
             let 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 (let b = 0; b < this.a.length; b++) {
+                    let 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();
@@ -4304,157 +4313,157 @@ let IconView = /*@__PURE__*/ (() => {
     class IconView extends Base {
         constructor() {
             super();
-            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);
         }
-        ag() {
+        ak() {
         }
-        i() {
+        l() {
             return true;
         }
-        get w() {
-            return this.v;
+        get z() {
+            return this.y;
         }
-        get x() {
+        get aa() {
             return null;
         }
-        get b() {
-            return this.m.toArray();
+        get c() {
+            return this.p.toArray();
         }
-        get j() {
+        get m() {
             return true;
         }
-        ae(a) {
+        ai(a) {
             if (a == null) {
-                for (let b of fromEnum(this.l)) {
+                for (let b of fromEnum(this.o)) {
                     b();
                 }
-                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();
-            let 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();
+            let 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;
-            let d = this.s.createElement("img");
+            this.y = c;
+            let 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();
+            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();
         }
-        ao(a) {
-            this.k.clear();
-            this.s.rootWrapper.removeChildren();
-            this.s.rootWrapper.append(this.v);
-            this.v.removeChildren();
-            this.t.removeChildren();
-            this.m.clear();
+        at(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) {
-                let b = this.s.createElementNS("path", "http://www.w3.org/2000/svg");
+                let 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);
+                this.y.append(this.w);
+                this.y.append(b);
+                this.p.add(b);
             }
         }
-        ap(a) {
-            this.k.clear();
-            this.s.rootWrapper.removeChildren();
-            this.s.rootWrapper.append(this.v);
-            this.v.removeChildren();
-            this.t.removeChildren();
-            this.m.clear();
+        au(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 (let b = 0; b < a.length; b++) {
-                    let c = this.s.createElementNS("path", "http://www.w3.org/2000/svg");
+                    let 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);
                 }
             }
         }
-        an(a) {
-            this.s.rootWrapper.removeChildren();
+        as(a) {
+            this.v.rootWrapper.removeChildren();
             if (a != null) {
-                let b = this.s.rootWrapper.getNativeElement();
+                let b = this.v.rootWrapper.getNativeElement();
                 b.innerHTML = a;
             }
         }
-        al(a) {
-            if (this.y != a) {
-                this.y = a;
-                this.s.rootWrapper.removeChildren();
-                this.s.rootWrapper.append(this.u);
-                this.u.setAttribute("src", a);
+        ap(a) {
+            if (this.ab != a) {
+                this.ab = a;
+                this.v.rootWrapper.removeChildren();
+                this.v.rootWrapper.append(this.x);
+                this.x.setAttribute("src", a);
             }
         }
-        h() {
-            return this.c.svgPath != null || this.c.svg != null || this.c.b != null;
-        }
-        am() {
-            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");
+        k() {
+            return this.d.svgPath != null || this.d.svg != null || this.d.b != null;
         }
         ar() {
-            let a = isNaN_(this.c.an) ? 0 : this.c.an;
-            let b = isNaN_(this.c.ao) ? 0 : this.c.ao;
-            let c = isNaN_(this.c.ap) ? 24 : this.c.ap;
-            let 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");
         }
-        ai(a, b) {
+        aw() {
+            let a = isNaN_(this.d.an) ? 0 : this.d.an;
+            let b = isNaN_(this.d.ao) ? 0 : this.d.ao;
+            let c = isNaN_(this.d.ap) ? 24 : this.d.ap;
+            let d = isNaN_(this.d.am) ? 24 : this.d.am;
+            this.y.setAttribute("viewBox", a + " " + b + " " + c + " " + d);
+        }
+        am(a, b) {
             let c = a.color;
-            if (!this.k.containsKey(a)) {
+            if (!this.n.containsKey(a)) {
                 if (a.isGradient) {
-                    let d = this.t.getChildCount();
+                    let d = this.w.getChildCount();
                     let e = a;
-                    let f = this.s.createElementNS("linearGradient", "http://www.w3.org/2000/svg");
+                    let f = this.v.createElementNS("linearGradient", "http://www.w3.org/2000/svg");
                     let g = "ig_gradient_" + b + "_" + d;
                     f.setAttribute("id", g);
                     f.setAttribute("x1", e.startX.toString());
@@ -4464,69 +4473,69 @@ let IconView = /*@__PURE__*/ (() => {
                     let j = e.gradientStops;
                     for (let i = 0; i < j.length; i++) {
                         let h = j[i];
-                        let k = this.s.createElementNS("stop", "http://www.w3.org/2000/svg");
+                        let 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) {
                 }
             }
         }
-        aj(a, b) {
+        an(a, b) {
             let 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);
             }
         }
-        ak(a, b) {
+        ao(a, b) {
             let 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);
             }
         }
-        z(a) {
+        ac(a) {
         }
-        ah() {
-            if (this.i()) {
+        al() {
+            if (this.l()) {
             }
         }
-        aa(a) {
-            this.c.b9();
+        ad(a) {
+            this.d.b9();
         }
-        ab(a) {
-            this.c.ca();
+        ae(a) {
+            this.d.ca();
         }
-        ac() {
-            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)));
+        ag() {
+            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)));
         }
-        af() {
-            this.g = false;
-            for (let a of fromEnum(this.l)) {
+        aj() {
+            this.j = false;
+            for (let a of fromEnum(this.o)) {
                 a();
             }
-            this.l.clear();
+            this.o.clear();
         }
-        aq(a) {
+        av(a) {
             if (a != null) {
-                this.s.rootWrapper.setStyleProperty("font", a.fontString);
+                this.v.rootWrapper.setStyleProperty("font", a.fontString);
             }
         }
-        a() {
-            let rect_ = this.s.rootWrapper.getNativeElement().getBoundingClientRect();
+        b() {
+            let rect_ = this.v.rootWrapper.getNativeElement().getBoundingClientRect();
             let a = (rect_.top);
             let b = (rect_.left);
             let c = new Array(2);
@@ -4534,8 +4543,102 @@ let IconView = /*@__PURE__*/ (() => {
             c[1] = b;
             return c;
         }
-        ad(a) {
-            this.c.b7();
+        ah(a) {
+            this.d.b7();
+        }
+        a() {
+            let a = new List$1(PrimitiveVisualData.$, 0);
+            let b = this.v.rootWrapper.getNativeElement();
+            return a.toArray();
+        }
+        af(a, b) {
+            for (let c = 0; c < b.e.count; c++) {
+                let d = b.e._inner[c];
+                let e = this.h(d);
+                if (e != null) {
+                    a.add(e);
+                }
+                else {
+                    this.af(a, d);
+                }
+            }
+        }
+        h(a) {
+            let b = null;
+            switch (a.c) {
+                case 7:
+                    let c = ((() => {
+                        let $ret = new Path();
+                        $ret.an = a.w;
+                        return $ret;
+                    })());
+                    this.aq(c, a);
+                    b = new PathVisualData(1, "path1", c);
+                    break;
+                case 3:
+                    let d = a;
+                    let 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:
+                    let f = a;
+                    let 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:
+                    let h = a;
+                    let 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;
+        }
+        aq(a, b) {
+            let 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) {
+                let d = new DoubleCollection();
+                let g = c.i;
+                for (let f = 0; f < g.length; f++) {
+                    let e = g[f];
+                    d.add(e);
+                }
+                a.ai = d;
+            }
+        }
+        i(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');
@@ -4589,9 +4692,9 @@ let XIcon = /*@__PURE__*/ (() => {
             this.clicked = null;
             this.propertyChanged = null;
             let a = new IconView();
-            a.c = this;
+            a.d = this;
             this.view = a;
-            this.view.ag();
+            this.view.ak();
         }
         get view() {
             return this._view;
@@ -4654,11 +4757,11 @@ let XIcon = /*@__PURE__*/ (() => {
                 case "ViewBoxTop":
                 case "ViewBoxWidth":
                 case "ViewBoxHeight":
-                    this.view.ar();
+                    this.view.aw();
                     break;
                 case "Width":
                 case "Height":
-                    this.view.am();
+                    this.view.ar();
                     break;
             }
         }
@@ -4681,15 +4784,15 @@ let XIcon = /*@__PURE__*/ (() => {
             }
         }
         get r() {
-            return this.svgPath != null && !this.view.j;
+            return this.svgPath != null && !this.view.m;
         }
         ch() {
-            NativeUI.y(this.view.w, this.ak);
+            NativeUI.y(this.view.z, this.ak);
         }
         cg() {
-            let a = this.view.w;
+            let a = this.view.z;
             if (this.r) {
-                let b = this.view.x;
+                let b = this.view.aa;
                 NativeUI.r(b, this.cw);
                 NativeUI.aa(b, this.cx);
                 NativeUI.ad(b, this.af);
@@ -4698,22 +4801,22 @@ let XIcon = /*@__PURE__*/ (() => {
                 let 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);
-                    let d = this.view.b;
+                    this.view.au(this.b);
+                    let d = this.view.c;
                     if (d != null && d.length > 0) {
                         let e = NativeUI.r;
                         let 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 (let g = 0; g < d.length; g++) {
                             if (this.cw != null) {
                                 e(d[g], this.cw);
@@ -4736,63 +4839,63 @@ let XIcon = /*@__PURE__*/ (() => {
                         }
                     }
                     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 (let h = 0; h < this.view.o.count; h++) {
-                        let i = this.view.o._inner[h].c;
-                        NativeUI.r(this.view.o._inner[h].d, i.l.f(this.c8));
+                    for (let h = 0; h < this.view.r.count; h++) {
+                        let i = this.view.r._inner[h].c;
+                        NativeUI.r(this.view.r._inner[h].d, i.l.f(this.c8));
                     }
-                    for (let j = 0; j < this.view.p.count; j++) {
-                        let k = this.view.p._inner[j].c;
-                        NativeUI.aa(this.view.p._inner[j].d, k.m.f(this.c9));
+                    for (let j = 0; j < this.view.s.count; j++) {
+                        let k = this.view.s._inner[j].c;
+                        NativeUI.aa(this.view.s._inner[j].d, k.m.f(this.c9));
                     }
-                    for (let l = 0; l < this.view.q.count; l++) {
-                        let m = this.view.q._inner[l].c;
-                        NativeUI.r(this.view.q._inner[l].d, m.l.f(this.da));
+                    for (let l = 0; l < this.view.t.count; l++) {
+                        let m = this.view.t._inner[l].c;
+                        NativeUI.r(this.view.t._inner[l].d, m.l.f(this.da));
                     }
-                    for (let n = 0; n < this.view.r.count; n++) {
-                        let o = this.view.r._inner[n].c;
-                        NativeUI.aa(this.view.r._inner[n].d, o.m.f(this.db));
+                    for (let n = 0; n < this.view.u.count; n++) {
+                        let o = this.view.u._inner[n].c;
+                        NativeUI.aa(this.view.u._inner[n].d, o.m.f(this.db));
                     }
-                    for (let p = 0; p < this.view.d.o.count; p++) {
-                        let q = this.view.d.o._inner[p];
+                    for (let p = 0; p < this.view.e.o.count; p++) {
+                        let q = this.view.e.o._inner[p];
                         let r = q.split('-');
                         let s = parseInt(r[r.length - 1]);
                         if (s < this.e.count) {
-                            for (let t = 0; t < this.view.d.q._inner[p].count; t++) {
-                                let 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 (let t = 0; t < this.view.e.q._inner[p].count; t++) {
+                                let 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 (let v = 0; v < this.view.e.o.count; v++) {
-                        let w = this.view.e.o._inner[v];
+                    for (let v = 0; v < this.view.f.o.count; v++) {
+                        let w = this.view.f.o._inner[v];
                         let x = w.split('-');
                         let y = parseInt(x[x.length - 1]);
                         if (y < this.f.count) {
-                            for (let z = 0; z < this.view.e.q._inner[v].count; z++) {
-                                let 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 (let z = 0; z < this.view.f.q._inner[v].count; z++) {
+                                let 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 (let ab = 0; ab < this.view.n.count; ab++) {
-                        let 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 (let ab = 0; ab < this.view.q.count; ab++) {
+                        let 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));
                     }
                 }
-                let ad = this.view.w;
+                let ad = this.view.z;
                 if (this.cw != null) {
                     NativeUI.r(ad, this.cw);
                 }
@@ -4804,27 +4907,27 @@ let XIcon = /*@__PURE__*/ (() => {
                 }
             }
             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);
             }
         }
         cd() {
             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) {
                 for (let a of fromEnum(this.e)) {
-                    this.view.ai(a, "fills");
+                    this.view.am(a, "fills");
                 }
             }
             if (this.f != null) {
                 for (let b of fromEnum(this.f)) {
-                    this.view.ai(b, "strokes");
+                    this.view.am(b, "strokes");
                 }
             }
         }
@@ -5201,10 +5304,10 @@ let XIcon = /*@__PURE__*/ (() => {
         cc() {
         }
         onDetachedFromUI() {
-            this.view.af();
+            this.view.aj();
         }
         onAttachedToUI() {
-            this.view.ac();
+            this.view.ag();
         }
         b7() {
             if (this.disabled) {
@@ -5215,61 +5318,58 @@ let XIcon = /*@__PURE__*/ (() => {
             }
         }
         u() {
-            return this.view.i();
+            return this.view.l();
         }
         au() {
             return this.g();
         }
         a9() {
             let a = this.g();
-            return a.k();
+            return a.l();
         }
         g() {
             let a = new IconVisualModelExport();
-            let 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;
-            let c = this.view.a();
-            a.h = c[0];
-            a.f = c[1];
-            a.e = NativeUI.d(b);
-            a.i = NativeUI.k(b);
+            let b = this.view.b();
+            a.i = b[0];
+            a.g = b[1];
+            a.f = NativeUI.d(this.view.z);
+            a.j = NativeUI.k(this.view.z);
+            a.a = this.view.a();
+            a.svg = this.svg;
             a.svgPath = this.svgPath;
-            a.j = this.a7;
+            a.k = this.a7;
             if (this.m != null) {
-                let d = this.m;
-                if (this.view != null && d.q == null) {
-                    let e = this.view.s;
-                    let 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;
+                let c = this.m;
+                if (this.view != null && c.q == null) {
+                    let d = this.view.v;
+                    let 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;
         }
         provideContainer(a) {
-            this.view.ae(a);
+            this.view.ai(a);
         }
     }
     XIcon.$t = markType(XIcon, 'XIcon', Base.$, [INotifyPropertyChanged_$type, IIcon_$type]);
@@ -5424,7 +5524,7 @@ let CalendarVisualModelExport = /*@__PURE__*/ (() => {
                     a.l(",");
                 }
                 let 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: [");
@@ -18858,7 +18958,7 @@ let DatePickerView = /*@__PURE__*/ (() => {
         }
         ak(a) {
             if (a == null) {
-                this.b.cq();
+                this.b.cr();
                 if (this.d != null) {
                     let b = this.d.rootWrapper.getChildAt(0);
                     b.unlistenAll();
@@ -18884,7 +18984,7 @@ let DatePickerView = /*@__PURE__*/ (() => {
         ad() {
             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");
@@ -18897,7 +18997,7 @@ let DatePickerView = /*@__PURE__*/ (() => {
                 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");
@@ -18983,7 +19083,7 @@ let DatePickerView = /*@__PURE__*/ (() => {
         }
         av() {
             if (this.f != null) {
-                if (this.b.az == true) {
+                if (this.b.a0 == true) {
                     this.f.show();
                 }
                 else {
@@ -18997,7 +19097,7 @@ let DatePickerView = /*@__PURE__*/ (() => {
             }
         }
         ax() {
-            this.k.setAttribute("tabIndex", this.b.be.toString());
+            this.k.setAttribute("tabIndex", this.b.bf.toString());
         }
         an() {
             this.o.observe(document, { childList: true, subtree: true });
@@ -19012,9 +19112,9 @@ let DatePickerView = /*@__PURE__*/ (() => {
                 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 {
@@ -19024,7 +19124,7 @@ let DatePickerView = /*@__PURE__*/ (() => {
         }
         z() {
             if (this.d != null) {
-                if (this.b.a1 == true) {
+                if (this.b.a2 == true) {
                     this.e.parent().parent().setStyleProperty("max-width", "245px");
                 }
                 else {
@@ -19053,60 +19153,60 @@ let DatePickerView = /*@__PURE__*/ (() => {
             if (this.b.av == true) {
                 return;
             }
-            this.b.cp();
+            this.b.cq();
             if (this.f != null) {
                 this.f.hide();
             }
         }
         aa(a) {
-            this.b.c8();
+            this.b.c9();
         }
         ab(a) {
-            this.b.c9();
+            this.b.da();
         }
         ag(a) {
             a.stopPropagation();
-            this.b.cx();
+            this.b.cy();
         }
         y(a) {
             let b = a.which;
             if (b == 27) {
-                this.b.cq();
+                this.b.cr();
             }
         }
         w(a) {
             this.b.focus();
             let b = (a.originalEvent.relatedTarget);
             if (!this.c(b)) {
-                this.b.c3();
+                this.b.c4();
             }
         }
         x(a) {
             let b = (a.originalEvent.relatedTarget);
             if (!this.c(b)) {
-                this.b.cw();
-                this.b.c4();
+                this.b.cx();
+                this.b.c5();
             }
         }
         al(a, b) {
             if (this.d != null) {
                 let c = this.d.rootWrapper.getNativeElement();
                 if (!document.documentElement.contains(c)) {
-                    this.b.cq();
+                    this.b.cr();
                 }
             }
             else {
-                this.b.cq();
+                this.b.cr();
             }
         }
         document_Click(a) {
             let b = a.target;
             if (!this.c(b)) {
-                this.b.cq();
+                this.b.cr();
             }
         }
         window_Resize(a) {
-            this.b.dm();
+            this.b.dn();
         }
         a0(a) {
             if (this.d != null) {
@@ -19144,8 +19244,8 @@ let DatePickerView = /*@__PURE__*/ (() => {
 /**
  * @hidden
  */
-let DatePicker = /*@__PURE__*/ (() => {
-    class DatePicker extends Base {
+let XDatePicker = /*@__PURE__*/ (() => {
+    class XDatePicker extends Base {
         constructor() {
             super();
             this.h = null;
@@ -19156,32 +19256,32 @@ let DatePicker = /*@__PURE__*/ (() => {
             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;
@@ -19191,9 +19291,9 @@ let DatePicker = /*@__PURE__*/ (() => {
             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;
@@ -19206,14 +19306,14 @@ let DatePicker = /*@__PURE__*/ (() => {
             a.b = this;
             this.h = a;
             this.h.am();
-            this.co();
+            this.cp();
         }
-        db(a, b) {
+        dc(a, b) {
             if (this.u != null) {
                 this.ah = true;
-                this.cq();
+                this.cr();
             }
-            this.dl();
+            this.dm();
             if (this.selectedValueChanged != null) {
                 this.selectedValueChanged(this, ((() => {
                     let $ret = new SelectedValueChangedEventArgs();
@@ -19223,7 +19323,7 @@ let DatePicker = /*@__PURE__*/ (() => {
                 })()));
             }
             if (this.ai) {
-                this.df();
+                this.dg();
             }
         }
         notifySizeChanged() {
@@ -19232,9 +19332,9 @@ let DatePicker = /*@__PURE__*/ (() => {
         destroy() {
             if (this.c != null) {
                 let a = this.c;
-                a.selectedValueChanged = delegateRemove(a.selectedValueChanged, runOn(this, this.cn));
+                a.selectedValueChanged = delegateRemove(a.selectedValueChanged, runOn(this, this.co));
                 let b = this.c;
-                b.close = delegateRemove(b.close, runOn(this, this.cm));
+                b.close = delegateRemove(b.close, runOn(this, this.cn));
             }
             this.provideContainer(null);
         }
@@ -19252,44 +19352,44 @@ let DatePicker = /*@__PURE__*/ (() => {
             return this.ae;
         }
         get value() {
-            return this.a7;
+            return this.a8;
         }
         set value(a) {
+            let b = this.a8;
+            this.a6 = b;
+            this.a8 = a;
+            if (+b != +(this.a8)) {
+                this.db("Value", b, this.a8);
+            }
+        }
+        get bb() {
+            return this.a7;
+        }
+        set bb(a) {
             let b = this.a7;
-            this.a5 = b;
             this.a7 = a;
             if (+b != +(this.a7)) {
-                this.da("Value", b, this.a7);
+                this.db("Today", b, this.a7);
             }
         }
-        get ba() {
-            return this.a6;
+        get b4() {
+            return this.bk;
         }
-        set ba(a) {
-            let b = this.a6;
-            this.a6 = a;
-            if (+b != +(this.a6)) {
-                this.da("Today", b, this.a6);
+        set b4(a) {
+            let b = this.bk;
+            this.bk = a;
+            if (b != this.bk) {
+                this.db("Label", b, this.bk);
             }
         }
-        get b3() {
-            return this.bj;
-        }
-        set b3(a) {
-            let b = this.bj;
-            this.bj = a;
-            if (b != this.bj) {
-                this.da("Label", b, this.bj);
-            }
+        get dx() {
+            return this.du;
         }
-        get dw() {
-            return this.dt;
-        }
-        set dw(a) {
-            let b = this.dt;
-            this.dt = a;
-            if (b != this.dt) {
-                this.da("LabelTextColor", b, a);
+        set dx(a) {
+            let b = this.du;
+            this.du = a;
+            if (b != this.du) {
+                this.db("LabelTextColor", b, a);
             }
         }
         get ac() {
@@ -19299,17 +19399,27 @@ let DatePicker = /*@__PURE__*/ (() => {
             let b = this.z;
             this.z = a;
             if (b != this.z) {
-                this.da("LabelTextStyle", b, this.z);
+                this.db("LabelTextStyle", b, this.z);
             }
         }
-        get cb() {
-            return this.bl;
+        get cc() {
+            return this.bm;
         }
-        set cb(a) {
-            let b = this.bl;
-            this.bl = a;
-            if (b != this.bl) {
-                this.da("Placeholder", b, this.bl);
+        set cc(a) {
+            let b = this.bm;
+            this.bm = a;
+            if (b != this.bm) {
+                this.db("Placeholder", b, this.bm);
+            }
+        }
+        get ba() {
+            return this.a5;
+        }
+        set ba(a) {
+            let b = this.a5;
+            this.a5 = a;
+            if (+b != +(this.a5)) {
+                this.db("MinDate", b, this.a5);
             }
         }
         get a9() {
@@ -19319,17 +19429,7 @@ let DatePicker = /*@__PURE__*/ (() => {
             let b = this.a4;
             this.a4 = a;
             if (+b != +(this.a4)) {
-                this.da("MinDate", b, this.a4);
-            }
-        }
-        get a8() {
-            return this.a3;
-        }
-        set a8(a) {
-            let b = this.a3;
-            this.a3 = a;
-            if (+b != +(this.a3)) {
-                this.da("MaxDate", b, this.a3);
+                this.db("MaxDate", b, this.a4);
             }
         }
         get y() {
@@ -19339,7 +19439,7 @@ let DatePicker = /*@__PURE__*/ (() => {
             let 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));
             }
         }
         get w() {
@@ -19349,7 +19449,7 @@ let DatePicker = /*@__PURE__*/ (() => {
             let 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));
             }
         }
         get ad() {
@@ -19359,47 +19459,47 @@ let DatePicker = /*@__PURE__*/ (() => {
             let b = this.aa;
             this.aa = a;
             if (b != this.aa) {
-                this.da("TextStyle", b, this.aa);
+                this.db("TextStyle", b, this.aa);
             }
         }
-        get dx() {
-            return this.du;
+        get dy() {
+            return this.dv;
         }
-        set dx(a) {
-            let b = this.du;
-            this.du = a;
-            if (b != this.du) {
-                this.da("TextColor", b, this.du);
+        set dy(a) {
+            let b = this.dv;
+            this.dv = a;
+            if (b != this.dv) {
+                this.db("TextColor", b, this.dv);
             }
         }
-        get dv() {
-            return this.ds;
+        get dw() {
+            return this.dt;
         }
-        set dv(a) {
-            let b = this.ds;
-            this.ds = a;
-            if (b != this.ds) {
-                this.da("IconColor", b, this.ds);
+        set dw(a) {
+            let b = this.dt;
+            this.dt = a;
+            if (b != this.dt) {
+                this.db("IconColor", b, this.dt);
             }
         }
-        get az() {
+        get a0() {
             return this.ao;
         }
-        set az(a) {
+        set a0(a) {
             let b = this.ao;
             this.ao = a;
             if (b != this.ao) {
-                this.da("ShowClearButton", b, this.ao);
+                this.db("ShowClearButton", b, this.ao);
             }
         }
-        get a0() {
+        get a1() {
             return this.ap;
         }
-        set a0(a) {
+        set a1(a) {
             let b = this.ap;
             this.ap = a;
             if (b != this.ap) {
-                this.da("ShowTodayButton", b, this.ap);
+                this.db("ShowTodayButton", b, this.ap);
             }
         }
         get au() {
@@ -19409,7 +19509,7 @@ let DatePicker = /*@__PURE__*/ (() => {
             let b = this.ag;
             this.ag = a;
             if (b != this.ag) {
-                this.da("AllowTextInput", b, this.ag);
+                this.db("AllowTextInput", b, this.ag);
             }
         }
         get ay() {
@@ -19419,7 +19519,7 @@ let DatePicker = /*@__PURE__*/ (() => {
             let b = this.an;
             this.an = a;
             if (b != this.an) {
-                this.da("OpenOnFocus", b, this.an);
+                this.db("OpenOnFocus", b, this.an);
             }
         }
         get j() {
@@ -19429,7 +19529,7 @@ let DatePicker = /*@__PURE__*/ (() => {
             let 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));
             }
         }
         get l() {
@@ -19439,17 +19539,17 @@ let DatePicker = /*@__PURE__*/ (() => {
             let 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));
             }
         }
-        get a1() {
+        get a2() {
             return this.aq;
         }
-        set a1(a) {
+        set a2(a) {
             let b = this.aq;
             this.aq = a;
             if (b != this.aq) {
-                this.da("ShowWeekNumbers", b, this.aq);
+                this.db("ShowWeekNumbers", b, this.aq);
             }
         }
         get e() {
@@ -19459,17 +19559,17 @@ let DatePicker = /*@__PURE__*/ (() => {
             let 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));
             }
         }
-        get by() {
-            return this.bi;
+        get bz() {
+            return this.bj;
         }
-        set by(a) {
-            let b = this.bi;
-            this.bi = a;
-            if (b != this.bi) {
-                this.da("FormatString", b, this.bi);
+        set bz(a) {
+            let b = this.bj;
+            this.bj = a;
+            if (b != this.bj) {
+                this.db("FormatString", b, this.bj);
             }
         }
         get av() {
@@ -19479,17 +19579,17 @@ let DatePicker = /*@__PURE__*/ (() => {
             let b = this.aj;
             this.aj = a;
             if (b != this.aj) {
-                this.da("IsDisabled", b, this.aj);
+                this.db("IsDisabled", b, this.aj);
             }
         }
-        get be() {
-            return this.bd;
+        get bf() {
+            return this.be;
         }
-        set be(a) {
-            let b = this.bd;
-            this.bd = a;
-            if (b != this.bd) {
-                this.da("TabIndex", b, this.bd);
+        set bf(a) {
+            let b = this.be;
+            this.be = a;
+            if (b != this.be) {
+                this.db("TabIndex", b, this.be);
             }
         }
         get aw() {
@@ -19499,7 +19599,7 @@ let DatePicker = /*@__PURE__*/ (() => {
             let b = this.ak;
             this.ak = a;
             if (b != this.ak) {
-                this.da("IsFixed", b, this.ak);
+                this.db("IsFixed", b, this.ak);
             }
         }
         get ax() {
@@ -19509,43 +19609,43 @@ let DatePicker = /*@__PURE__*/ (() => {
             let b = this.am;
             this.am = a;
             if (b != this.am) {
-                this.da("OpenAsChild", b, this.am);
+                this.db("OpenAsChild", b, this.am);
             }
         }
-        get a2() {
+        get a3() {
             return this.as;
         }
-        set a2(a) {
+        set a3(a) {
             let b = this.as;
             this.as = a;
             if (b != this.as) {
-                this.da("UseTopLayer", b, this.as);
+                this.db("UseTopLayer", b, this.as);
             }
         }
-        da(a, b, c) {
+        db(a, b, c) {
             if (this.propertyChanged != null) {
                 this.propertyChanged(this, new PropertyChangedEventArgs(a));
             }
-            this.dd(a, b, c);
+            this.de(a, b, c);
         }
-        dd(a, b, c) {
+        de(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();
@@ -19557,8 +19657,8 @@ let DatePicker = /*@__PURE__*/ (() => {
                     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);
                             }
@@ -19572,25 +19672,25 @@ let DatePicker = /*@__PURE__*/ (() => {
                     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) {
-                        let d = Base.compareSimple(this.a9, this.a8);
+                        let 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;
@@ -19598,22 +19698,22 @@ let DatePicker = /*@__PURE__*/ (() => {
                     break;
                 case "MinDate":
                     if (this.c != null) {
-                        this.c.au = this.a4;
-                        let e = Base.compareSimple(this.a9, this.a8);
+                        this.c.au = this.a5;
+                        let 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) {
@@ -19626,27 +19726,27 @@ let DatePicker = /*@__PURE__*/ (() => {
                 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) {
@@ -19655,7 +19755,7 @@ let DatePicker = /*@__PURE__*/ (() => {
                     break;
                 case "ShowWeekNumbers":
                     if (this.c != null) {
-                        this.c.af = this.a1;
+                        this.c.af = this.a2;
                         this.h.z();
                     }
                     break;
@@ -19670,7 +19770,7 @@ let DatePicker = /*@__PURE__*/ (() => {
                             this.q.disabled = this.av;
                         }
                         if (this.o != null) {
-                            this.o.disabled = this.av;
+                            this.o.disabled = this.az();
                         }
                     }
                     break;
@@ -19684,14 +19784,17 @@ let DatePicker = /*@__PURE__*/ (() => {
                     break;
                 case "UseTopLayer":
                     if (this.u != null) {
-                        this.u.ax = this.a2;
+                        this.u.ax = this.a3;
                     }
                     break;
             }
         }
-        co() {
+        az() {
+            return this.av || !this.au;
+        }
+        cp() {
             let a = '/';
-            let b = this.by != null ? this.by.toLowerCase() : this.a.j();
+            let b = this.bz != null ? this.bz.toLowerCase() : this.a.j();
             if (stringContains(b, "/")) {
                 a = '/';
             }
@@ -19707,7 +19810,7 @@ let DatePicker = /*@__PURE__*/ (() => {
             else if (stringContains(b, ",")) {
                 a = ',';
             }
-            this.bm = a.toString();
+            this.bn = a.toString();
             let c = b.split(a);
             if (c.length == 3) {
                 let d = "";
@@ -19716,19 +19819,19 @@ let DatePicker = /*@__PURE__*/ (() => {
                         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;
                         }
                     }
@@ -19736,71 +19839,71 @@ let DatePicker = /*@__PURE__*/ (() => {
                         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";
                 }
             }
         }
-        dp() {
+        dq() {
             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;
             }
         }
-        dk() {
+        dl() {
             if (this.q != null) {
             }
         }
-        dn() {
+        dp() {
             if (this.aa != null) {
                 this.o.af = this.aa;
             }
         }
-        cr() {
+        cs() {
             this.q = new XInputGroup();
             this.h.aq(this.q);
             this.q.d = 0;
@@ -19808,11 +19911,11 @@ let DatePicker = /*@__PURE__*/ (() => {
             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();
@@ -19821,40 +19924,40 @@ let DatePicker = /*@__PURE__*/ (() => {
             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);
             let a = this.o;
-            a.change = delegateCombine(a.change, runOn(this, this.cy));
+            a.change = delegateCombine(a.change, runOn(this, this.cz));
             let b = this.o;
-            b.changing = delegateCombine(b.changing, runOn(this, this.cz));
+            b.changing = delegateCombine(b.changing, runOn(this, this.c0));
             let c = this.o;
-            c.keyDown = delegateCombine(c.keyDown, runOn(this, this.c0));
+            c.keyDown = delegateCombine(c.keyDown, runOn(this, this.c1));
             let 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();
             let 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);
         }
-        c0(a, b) {
-            this.c6(b);
+        c1(a, b) {
+            this.c7(b);
             if (b.defaultPrevented) {
                 return;
             }
@@ -19864,36 +19967,36 @@ let DatePicker = /*@__PURE__*/ (() => {
                 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;
             }
         }
-        cz(a, b) {
-            this.c2(b);
+        c0(a, b) {
+            this.c3(b);
             if (b.value.length > 0) {
                 this.h.av();
             }
@@ -19901,12 +20004,12 @@ let DatePicker = /*@__PURE__*/ (() => {
                 this.h.ah();
             }
         }
-        cy(a, b) {
+        cz(a, b) {
             this.at = true;
-            this.dr(b.value);
+            this.ds(b.value);
             this.at = false;
         }
-        dr(a) {
+        ds(a) {
             let b = ['/', '-', ' ', '.', ','];
             let c = stringSplit(a, b, 1);
             let d = 0;
@@ -19917,17 +20020,17 @@ let DatePicker = /*@__PURE__*/ (() => {
                 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]);
@@ -19940,13 +20043,13 @@ let DatePicker = /*@__PURE__*/ (() => {
                 }
                 if (isNaN_(e)) {
                     let 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();
                     }
                     let i = !stringIsNullOrWhiteSpace(this.af.b1("January_Full")) ? this.af.b1("January_Full").toLowerCase() : "january";
@@ -20022,45 +20125,45 @@ let DatePicker = /*@__PURE__*/ (() => {
             }
             if (g) {
                 let ag = dateFromValues(f, e, d, 0, 0, 0, 0);
-                let ah = Base.compareSimple(ag, this.a9);
-                let ai = Base.compareSimple(ag, this.a8);
+                let ah = Base.compareSimple(ag, this.ba);
+                let 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();
                 }
             }
         }
-        dq(a) {
+        dr(a) {
             let b = this.value;
             this.value = a;
         }
-        dl() {
+        dm() {
             if (this.o != null) {
-                if (+(dateGetDate(this.a7)) != +(dateGetDate(dateMinValue()))) {
+                if (+(dateGetDate(this.a8)) != +(dateGetDate(dateMinValue()))) {
                     let a = "";
-                    if (this.by == null) {
+                    if (this.bz == null) {
                         a = this.a.i(this.value);
                     }
                     else {
                         let b = this.value.getDate().toString();
                         let 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";
@@ -20085,7 +20188,7 @@ let DatePicker = /*@__PURE__*/ (() => {
                                     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";
@@ -20111,12 +20214,12 @@ let DatePicker = /*@__PURE__*/ (() => {
                             }
                         }
                         let 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";
@@ -20156,7 +20259,7 @@ let DatePicker = /*@__PURE__*/ (() => {
                                     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";
@@ -20197,31 +20300,31 @@ let DatePicker = /*@__PURE__*/ (() => {
                             }
                         }
                         let 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;
                             }
                         }
                     }
@@ -20234,7 +20337,7 @@ let DatePicker = /*@__PURE__*/ (() => {
                 }
             }
         }
-        cp() {
+        cq() {
             if (this.av == true) {
                 return;
             }
@@ -20245,65 +20348,65 @@ let DatePicker = /*@__PURE__*/ (() => {
             this.c.ch();
             this.al = false;
         }
-        c8() {
+        c9() {
             this.al = true;
         }
-        c9() {
+        da() {
             this.al = false;
         }
-        cs() {
+        ct() {
             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;
             let a = this.c;
-            a.selectedValueChanged = delegateCombine(a.selectedValueChanged, runOn(this, this.cn));
+            a.selectedValueChanged = delegateCombine(a.selectedValueChanged, runOn(this, this.co));
             let 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());
         }
-        cn(a, b) {
+        co(a, b) {
             this.ai = true;
             this.value = b.newValue;
             this.ai = false;
         }
-        cm(a) {
+        cn(a) {
             if (this.u.aw) {
                 this.ah = true;
-                this.cq();
+                this.cr();
             }
         }
-        cx() {
+        cy() {
             if (this.ah == false) {
                 if (this.u.aw) {
-                    this.cq();
+                    this.cr();
                 }
                 else {
-                    this.dc();
+                    this.dd();
                 }
             }
             else {
                 this.ah = false;
             }
         }
-        dc() {
+        dd() {
             if (this.av) {
                 return;
             }
@@ -20311,27 +20414,27 @@ let DatePicker = /*@__PURE__*/ (() => {
                 let a = this.h.a0(false);
                 let b = this.h.a()[1];
                 let c = 240;
-                if (this.a0 == true) {
+                if (this.a1 == true) {
                     c = 270;
                 }
                 let d = a.bottom + c;
                 if (b < d) {
                     let 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);
             }
         }
-        dj(a, b) {
+        dk(a, b) {
             if (this.ax) {
                 this.u.cp(this.h.d.rootWrapper.getNativeElement(), a, b);
             }
@@ -20340,13 +20443,13 @@ let DatePicker = /*@__PURE__*/ (() => {
                 this.u.showRelativeToExclusionRect(c, a, b);
             }
         }
-        dm() {
+        dn() {
             if (this.u.aw) {
                 let a = this.h.a0(false);
                 let b = new Rect(0, a.left + window.pageXOffset, a.top + window.pageYOffset, a.width, a.height);
                 let c = this.h.a()[1];
                 let d = 240;
-                if (this.a0 == true) {
+                if (this.a1 == true) {
                     d = 270;
                 }
                 let e = a.bottom + d;
@@ -20373,7 +20476,7 @@ let DatePicker = /*@__PURE__*/ (() => {
                 }
             }
         }
-        cq() {
+        cr() {
             if (this.u != null) {
                 window.setTimeout(() => this.u.b5(), 0);
             }
@@ -20394,15 +20497,15 @@ let DatePicker = /*@__PURE__*/ (() => {
                         return;
                     }
                     if (this.au == false) {
-                        this.dc();
+                        this.dd();
                         this.ah = true;
-                        window.setTimeout(() => this.cv(), 0);
+                        window.setTimeout(() => this.cw(), 0);
                     }
                     else {
                         if (this.ay == true && this.ar == false) {
-                            this.dc();
+                            this.dd();
                             this.ah = true;
-                            window.setTimeout(() => this.cv(), 0);
+                            window.setTimeout(() => this.cw(), 0);
                         }
                     }
                 }
@@ -20411,33 +20514,33 @@ let DatePicker = /*@__PURE__*/ (() => {
                 }
             }
         }
-        cw() {
+        cx() {
             this.ah = false;
         }
-        df() {
+        dg() {
             if (this.o != null) {
                 this.o.dp();
             }
         }
-        cv() {
+        cw() {
             this.c.cq();
         }
-        c3() {
+        c4() {
             let a = new GotFocusEventArgs();
-            this.c5(a);
+            this.c6(a);
         }
-        c4() {
+        c5() {
             let a = new LostFocusEventArgs();
-            this.c7(a);
+            this.c8(a);
         }
-        di() {
+        dj() {
         }
-        dg() {
+        dh() {
         }
-        bf() {
+        bg() {
             return this.b();
         }
-        bv() {
+        bw() {
             let a = this.b();
             return a.g();
         }
@@ -20478,32 +20581,32 @@ let DatePicker = /*@__PURE__*/ (() => {
             }
             return a;
         }
-        c5(a) {
+        c6(a) {
             if (null != this.gotFocus) {
                 this.gotFocus(this, a);
             }
         }
-        c7(a) {
+        c8(a) {
             if (null != this.lostFocus) {
                 this.lostFocus(this, a);
             }
         }
-        c6(a) {
+        c7(a) {
             if (null != this.keyDown) {
                 this.keyDown(this, a);
             }
         }
-        c2(a) {
+        c3(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;
 })();
 
 /*
@@ -20607,8 +20710,8 @@ class IgxInputChangeEventArgs {
 }
 
 // IgxDataGridModule.register();
-let IgxDatePickerComponent = /*@__PURE__*/ (() => {
-    class IgxDatePickerComponent {
+let IgxXDatePickerComponent = /*@__PURE__*/ (() => {
+    class IgxXDatePickerComponent {
         constructor(renderer, _elRef, ngZone, injector, componentFactoryResolver) {
             this.renderer = renderer;
             this._elRef = _elRef;
@@ -20679,7 +20782,7 @@ let IgxDatePickerComponent = /*@__PURE__*/ (() => {
             this.updateStyle();
         }
         createImplementation() {
-            return new DatePicker();
+            return new XDatePicker();
         }
         get i() {
             return this._implementation;
@@ -20697,28 +20800,28 @@ let IgxDatePickerComponent = /*@__PURE__*/ (() => {
          * Gets or Sets the property name that contains the values.
         */
         get today() {
-            return this.i.ba;
+            return this.i.bb;
         }
         set today(v) {
-            this.i.ba = v;
+            this.i.bb = v;
         }
         /**
          * Gets or Sets the property name that contains the label.
         */
         get label() {
-            return this.i.b3;
+            return this.i.b4;
         }
         set label(v) {
-            this.i.b3 = v;
+            this.i.b4 = v;
         }
         /**
          * Gets or sets the color to use for the text.
         */
         get labelTextColor() {
-            return brushToString(this.i.dw);
+            return brushToString(this.i.dx);
         }
         set labelTextColor(v) {
-            this.i.dw = stringToBrush(v);
+            this.i.dx = stringToBrush(v);
         }
         /**
          * Gets or sets the font to use for the combobox.
@@ -20738,28 +20841,28 @@ let IgxDatePickerComponent = /*@__PURE__*/ (() => {
          * Gets or Sets the property name that contains the placeholder.
         */
         get placeholder() {
-            return this.i.cb;
+            return this.i.cc;
         }
         set placeholder(v) {
-            this.i.cb = v;
+            this.i.cc = v;
         }
         /**
          * Gets or Sets the property name that contains the MinDate.
         */
         get minDate() {
-            return this.i.a9;
+            return this.i.ba;
         }
         set minDate(v) {
-            this.i.a9 = v;
+            this.i.ba = v;
         }
         /**
          * Gets or Sets the property name that contains the MaxDate.
         */
         get maxDate() {
-            return this.i.a8;
+            return this.i.a9;
         }
         set maxDate(v) {
-            this.i.a8 = v;
+            this.i.a9 = v;
         }
         /**
          * Gets or sets the display density to use for the date pcicker.
@@ -20797,37 +20900,37 @@ let IgxDatePickerComponent = /*@__PURE__*/ (() => {
          * Gets or Sets the text color
         */
         get textColor() {
-            return brushToString(this.i.dx);
+            return brushToString(this.i.dy);
         }
         set textColor(v) {
-            this.i.dx = stringToBrush(v);
+            this.i.dy = stringToBrush(v);
         }
         /**
          * Gets or Sets the text color
         */
         get iconColor() {
-            return brushToString(this.i.dv);
+            return brushToString(this.i.dw);
         }
         set iconColor(v) {
-            this.i.dv = stringToBrush(v);
+            this.i.dw = stringToBrush(v);
         }
         /**
          * Gets or sets the ShowClearButton property to detirmine if the clear button is shown
         */
         get showClearButton() {
-            return this.i.az;
+            return this.i.a0;
         }
         set showClearButton(v) {
-            this.i.az = ensureBool(v);
+            this.i.a0 = ensureBool(v);
         }
         /**
          * Gets or sets the ShowTodayButton property to detirmine if the today button is shown
         */
         get showTodayButton() {
-            return this.i.a0;
+            return this.i.a1;
         }
         set showTodayButton(v) {
-            this.i.a0 = ensureBool(v);
+            this.i.a1 = ensureBool(v);
         }
         /**
          * Gets or sets the AllowTextInput property to detirmine if entering text into the input is allowed
@@ -20869,10 +20972,10 @@ let IgxDatePickerComponent = /*@__PURE__*/ (() => {
          * Gets or sets the ShowWeekNumbers property to detirmine if the week numbers are shown
         */
         get showWeekNumbers() {
-            return this.i.a1;
+            return this.i.a2;
         }
         set showWeekNumbers(v) {
-            this.i.a1 = ensureBool(v);
+            this.i.a2 = ensureBool(v);
         }
         /**
          * Gets or sets the date time format to use for this column. If FormatString is specificied this value is ignored.
@@ -20887,10 +20990,10 @@ let IgxDatePickerComponent = /*@__PURE__*/ (() => {
          * Gets or sets the Format property to detirmine the format of the date in the input
         */
         get formatString() {
-            return this.i.by;
+            return this.i.bz;
         }
         set formatString(v) {
-            this.i.by = v;
+            this.i.bz = v;
         }
         get isDisabled() {
             return this.i.av;
@@ -20920,10 +21023,10 @@ let IgxDatePickerComponent = /*@__PURE__*/ (() => {
          * Indicates that the dropdown will place itself into the browser top layer.
         */
         get useTopLayer() {
-            return this.i.a2;
+            return this.i.a3;
         }
         set useTopLayer(v) {
-            this.i.a2 = ensureBool(v);
+            this.i.a3 = ensureBool(v);
         }
         get hasUserValues() {
             return this._hasUserValues;
@@ -20945,7 +21048,7 @@ let IgxDatePickerComponent = /*@__PURE__*/ (() => {
             if (typeName.indexOf("Xam") === 0) {
                 typeName = typeName.substring(3);
             }
-            genericPrefix = toSpinal("DatePickerComponent");
+            genericPrefix = toSpinal("XDatePickerComponent");
             let additionalPrefixes = [];
             let prefix = toSpinal(typeName);
             additionalPrefixes.push(prefix + "-");
@@ -20979,14 +21082,14 @@ let IgxDatePickerComponent = /*@__PURE__*/ (() => {
             this._inStyling = false;
         }
         select() {
-            this.i.df();
+            this.i.dg();
         }
         /**
          * Exports visual information about the current state of the grid.
         
         */
         exportVisualModel() {
-            let iv = this.i.bf();
+            let iv = this.i.bg();
             return (iv);
         }
         /**
@@ -20994,7 +21097,7 @@ let IgxDatePickerComponent = /*@__PURE__*/ (() => {
         
         */
         exportSerializedVisualModel() {
-            let iv = this.i.bv();
+            let iv = this.i.bw();
             return (iv);
         }
         /**
@@ -21118,19 +21221,19 @@ let IgxDatePickerComponent = /*@__PURE__*/ (() => {
             }
         }
     }
-    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>
+    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>
                 <div #inputcontainer>
                 </div>
                 <div #popupContainer>
                 </div>
                </div>`, isInline: true, styles: ["\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t}\n\t"], changeDetection: ChangeDetectionStrategy.OnPush });
-    return IgxDatePickerComponent;
+    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>
                 <div #inputcontainer>
                 </div>
@@ -21139,7 +21242,7 @@ let IgxDatePickerComponent = /*@__PURE__*/ (() => {
                </div>`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [],
-                    host: { 'class': 'ig-date-picker igx-date-picker' },
+                    host: { 'class': 'ig-x-date-picker igx-x-date-picker' },
                     styles: [`
 		:host {
 			display: block;
@@ -24645,23 +24748,23 @@ 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.
 */
-let IgxDatePickerModule = /*@__PURE__*/ (() => {
-    class IgxDatePickerModule {
+let IgxXDatePickerModule = /*@__PURE__*/ (() => {
+    class IgxXDatePickerModule {
         constructor() {
-            TypeRegistrar.registerCons('IgxDatePickerComponent', IgxDatePickerComponent);
-            TypeRegistrar.register('DatePicker', DatePicker.$type);
+            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
@@ -24669,17 +24772,17 @@ let IgxDatePickerModule = /*@__PURE__*/ (() => {
             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,
@@ -24696,37 +24799,37 @@ 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.
 */
-let IgxDatePickerDynamicModule = /*@__PURE__*/ (() => {
-    class IgxDatePickerDynamicModule {
+let IgxXDatePickerDynamicModule = /*@__PURE__*/ (() => {
+    class IgxXDatePickerDynamicModule {
         constructor() {
-            TypeRegistrar.registerCons('DatePicker', DatePicker);
-            TypeRegistrar.registerCons('IgxDatePickerComponent', IgxDatePickerComponent);
-            TypeRegistrar.register('DatePicker', DatePicker.$type);
+            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: [],
@@ -24734,15 +24837,15 @@ let IgxDatePickerDynamicModule = /*@__PURE__*/ (() => {
                         IgxXButtonDynamicModule,
                         IgxXIconDynamicModule,
                         IgxXInputGroupDynamicModule,
-                        IgxDatePickerModule
+                        IgxXDatePickerModule
                     ],
                     imports: [CommonModule, IgxXCalendarDynamicModule,
                         IgxXButtonDynamicModule,
                         IgxXIconDynamicModule,
                         IgxXInputGroupDynamicModule,
-                        IgxDatePickerModule
+                        IgxXDatePickerModule
                     ],
-                    entryComponents: [IgxDatePickerComponent]
+                    entryComponents: [IgxXDatePickerComponent]
                 }]
         }], ctorParameters: function () { return []; } });
 
@@ -25912,7 +26015,7 @@ let XCheckbox = /*@__PURE__*/ (() => {
         $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;
     })()));
@@ -25925,7 +26028,7 @@ let XCheckbox = /*@__PURE__*/ (() => {
         $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;
     })()));
@@ -26763,7 +26866,7 @@ let ButtonGroupVisualModelExport = /*@__PURE__*/ (() => {
                 if (b != 0) {
                     a.l(",");
                 }
-                a.l(this.i._inner[b].ab());
+                a.l(this.i._inner[b].serialize());
             }
             a.l("]");
             a.l("}");
@@ -29891,6 +29994,9 @@ let XInputBridge = /*@__PURE__*/ (() => {
             let e = d.inputs._inner[0];
             window.setTimeout(() => e.dr(b, c), 0);
         }
+        exportVisualData(a) {
+            return a.fe();
+        }
     }
     XInputBridge.$t = markType(XInputBridge, 'XInputBridge', XComponentBridge.$, [INativeUIInputBridge_$type]);
     return XInputBridge;
@@ -29940,12 +30046,12 @@ let XButtonBridge = /*@__PURE__*/ (() => {
                     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;
@@ -30011,7 +30117,7 @@ let XButtonBridge = /*@__PURE__*/ (() => {
                     d.clearButtonContent();
                     if (typeCast(NativeUIComponent.$, c) !== null) {
                         this.ac = c;
-                        d.appendButtonContent(this.ac.al);
+                        d.appendButtonContent(this.ac.an);
                     }
                     else {
                         this.ac = c;
@@ -30042,7 +30148,7 @@ let XButtonBridge = /*@__PURE__*/ (() => {
                 case 54:
                     if (typeCast(NativeUIComponent.$, c) !== null) {
                         this.aa = c;
-                        d.appendButtonContent(this.aa.al);
+                        d.appendButtonContent(this.aa.an);
                     }
                     break;
                 case 0:
@@ -30100,6 +30206,9 @@ let XButtonBridge = /*@__PURE__*/ (() => {
                 case 11:
                     d.aa = c;
                     break;
+                case 83:
+                    d.bu = c;
+                    break;
             }
         }
         getValue(a, b) {
@@ -30135,6 +30244,7 @@ let XButtonBridge = /*@__PURE__*/ (() => {
                 case 56: return c.as;
                 case 58: return c.aq;
                 case 17: return c.kt;
+                case 83: return c.bu;
             }
             return null;
         }
@@ -30186,6 +30296,9 @@ let XButtonBridge = /*@__PURE__*/ (() => {
                 default: return 3;
             }
         }
+        exportVisualData(a) {
+            return a.d7();
+        }
     }
     XButtonBridge.$t = markType(XButtonBridge, 'XButtonBridge', XComponentBridge.$);
     return XButtonBridge;
@@ -30241,6 +30354,10 @@ let XCheckboxBridge = /*@__PURE__*/ (() => {
                 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;
         }
@@ -30259,8 +30376,23 @@ let XCheckboxBridge = /*@__PURE__*/ (() => {
                 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;
             }
         }
+        exportVisualData(a) {
+            return a.a3();
+        }
     }
     XCheckboxBridge.$t = markType(XCheckboxBridge, 'XCheckboxBridge', XComponentBridge.$);
     return XCheckboxBridge;
@@ -30376,6 +30508,9 @@ let XIconBridge = /*@__PURE__*/ (() => {
                 return;
             }
         }
+        exportVisualData(a) {
+            return a.au();
+        }
     }
     XIconBridge.$t = markType(XIconBridge, 'XIconBridge', XComponentBridge.$);
     return XIconBridge;
@@ -30436,12 +30571,12 @@ let XPopupBridge = /*@__PURE__*/ (() => {
                     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;
@@ -30471,12 +30606,12 @@ let XPopupBridge = /*@__PURE__*/ (() => {
                     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;
@@ -30633,15 +30768,18 @@ let XPopupBridge = /*@__PURE__*/ (() => {
                 default: return 0;
             }
         }
+        exportVisualData(a) {
+            return a.au();
+        }
         addChild(a, b) {
             this.ac.add(b);
             let c = a;
-            c.appendPopupContent(b.al);
+            c.appendPopupContent(b.an);
         }
         insertChild(a, b, c) {
             this.ac.add(c);
             let d = a;
-            d.appendPopupContent(c.al);
+            d.appendPopupContent(c.an);
         }
         getChildAt(a, b) {
             return this.ac._inner[b];
@@ -30651,12 +30789,12 @@ let XPopupBridge = /*@__PURE__*/ (() => {
         }
         removeChild(a, b) {
             let c = a;
-            c.removePopupContent(b.al);
+            c.removePopupContent(b.an);
             this.ac.remove(b);
         }
         removeChildAt(a, b) {
             let c = a;
-            c.removePopupContent(this.ac._inner[b].al);
+            c.removePopupContent(this.ac._inner[b].an);
             this.ac.removeAt(b);
         }
     }
@@ -30686,7 +30824,7 @@ let NativeUIXInputsFactory = /*@__PURE__*/ (() => {
             return NativeUIXInputsFactory.a;
         }
         static j() {
-            NativeUIComponent.ap(NativeUIXInputsFactory.b);
+            NativeUIComponent.ar(NativeUIXInputsFactory.b);
         }
         get flavor() {
             return this.c;
@@ -30744,7 +30882,7 @@ let NativeUIXInputsFactory = /*@__PURE__*/ (() => {
             f.inputs.add(j);
             let l = new XInputBridge(f);
             let m = new NativeUIInput();
-            m.al = d;
+            m.an = d;
             m.d = l;
             b(m);
         }
@@ -30758,7 +30896,7 @@ let NativeUIXInputsFactory = /*@__PURE__*/ (() => {
             let g = e.getExternal(f, e.rootWrapper, e.getExternal(f, null, null));
             let h = new XButtonBridge(f);
             let i = new NativeUIButton();
-            i.al = d;
+            i.an = d;
             i.d = h;
             b(i);
         }
@@ -30771,7 +30909,7 @@ let NativeUIXInputsFactory = /*@__PURE__*/ (() => {
             let g = e.getExternal(f, e.rootWrapper, e.getExternal(f, null, null));
             let h = new XCheckboxBridge(f);
             let i = new NativeUICheckbox();
-            i.al = d;
+            i.an = d;
             i.d = h;
             b(i);
         }
@@ -30784,7 +30922,7 @@ let NativeUIXInputsFactory = /*@__PURE__*/ (() => {
             let g = e.getExternal(f, e.rootWrapper, e.getExternal(f, null, null));
             let h = new XIconBridge(f);
             let i = new NativeUIIcon();
-            i.al = d;
+            i.an = d;
             i.d = h;
             let j = c.createElement("div");
             let k = c.getSubRenderer(j);
@@ -30795,9 +30933,9 @@ let NativeUIXInputsFactory = /*@__PURE__*/ (() => {
             let m = k.getExternal(l, k.rootWrapper, k.getExternal(l, null, null));
             let n = new XButtonBridge(l);
             let o = new NativeUIButton();
-            o.al = j;
+            o.an = j;
             o.d = n;
-            o.bk = i;
+            o.bm = i;
             b(o);
         }
         f(a, b) {
@@ -30809,7 +30947,7 @@ let NativeUIXInputsFactory = /*@__PURE__*/ (() => {
             let g = e.getExternal(f, e.rootWrapper, e.getExternal(f, null, null));
             let h = new XIconBridge(f);
             let i = new NativeUIIcon();
-            i.al = d;
+            i.an = d;
             i.d = h;
             b(i);
         }
@@ -30821,7 +30959,7 @@ let NativeUIXInputsFactory = /*@__PURE__*/ (() => {
             f.provideRenderer(e);
             let g = new XPopupBridge(f);
             let h = new NativeUIPopup();
-            h.al = d;
+            h.an = d;
             h.d = g;
             b(h);
         }
@@ -30864,7 +31002,7 @@ let XIconButtonBridge = /*@__PURE__*/ (() => {
             switch (a) {
                 case 16:
                 case 15:
-                case 17: return this.al.t.view.s;
+                case 17: return this.al.t.view.v;
             }
             return super.getTargetForProperty(a, b);
         }
@@ -30993,8 +31131,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
+ */
+let TextBlockVisualModelExport = /*@__PURE__*/ (() => {
+    class TextBlockVisualModelExport extends Base {
+        constructor() {
+            super(...arguments);
+            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;
+        }
+        g() {
+            let 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;
+})();
+
 /**
  * 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 };