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

package/fesm2015/igniteui-webcomponents-inputs.js

@@ -5,7 +5,7 @@
     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.
   */
   
-import { Base, StringBuilder, markType, List$1, Delegate_$type, fromEnum, runOn, NativeUI, ScaleTransform, KeyFrameAnimationFactory, AnimationKeyFrameEffect, LinkedList$1, IKeyFrameAnimation_$type, PropertyChangedEventArgs, AnimationKeyFrameProperty, AnimationKeyFrameEffectTiming, AppearanceHelper, INotifyPropertyChanged_$type, BrushUtil, IgcHTMLElement, NamePatcher, WebComponentRenderer, TypeRegistrar, toSpinal, getAllPropertyNames, fromSpinal, RegisterElementHelper, brushToString, stringToBrush, ensureBool, initializePropertiesFromCss, markEnum, 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, PortalManager, ensureEnum, enumToString, FontInfo, delegateRemove, delegateCombine, IgcFocusEventArgs, IgcChildContentModule, Brush, DomWrapper_$type, Tuple$2, SVGNode, FastIterationDictionary$2, stringStartsWith, trimStart, IIcon_$type, fromBrushCollection, toBrushCollection, brushCollectionToString, dateMinValue, dateGetMonth, parseBool, dateNow, dateMaxValue, dateAddYears, ObservableCollection$1, dateFromValues, SRProvider, dateGetDate, stringIsNullOrWhiteSpace, dateAddDays, Number_$type, dateAddMonths, truncate, timeSpanTotalDays, intDivide, Localization, HashSet$1, typeCast, stringReplace, TransformGroup, TranslateTransform, MouseButtonEventArgs, Point_$type, KeyEventArgs, toNullable, fromEn, DeviceUtils, IgcKeyEventArgs, IgCollection, SyncableObservableCollection$2, NotifyCollectionChangedAction, CollectionAdapter, Rect, stringContains, stringSplit, Popup, 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-webcomponents-core';
+import { Base, StringBuilder, markType, List$1, Delegate_$type, fromEnum, runOn, NativeUI, ScaleTransform, KeyFrameAnimationFactory, AnimationKeyFrameEffect, LinkedList$1, IKeyFrameAnimation_$type, PropertyChangedEventArgs, AnimationKeyFrameProperty, AnimationKeyFrameEffectTiming, AppearanceHelper, INotifyPropertyChanged_$type, BrushUtil, IgcHTMLElement, NamePatcher, WebComponentRenderer, TypeRegistrar, toSpinal, getAllPropertyNames, fromSpinal, RegisterElementHelper, brushToString, stringToBrush, ensureBool, initializePropertiesFromCss, markEnum, 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, PortalManager, ensureEnum, enumToString, FontInfo, delegateRemove, delegateCombine, IgcFocusEventArgs, IgcChildContentModule, Brush, DomWrapper_$type, Tuple$2, SVGNode, FastIterationDictionary$2, PrimitiveVisualData, Ellipse, EllipseVisualData, Rectangle, RectangleVisualData, Line, LineVisualData, Path, PathVisualData, DoubleCollection, typeCast, stringStartsWith, trimStart, IIcon_$type, fromBrushCollection, toBrushCollection, brushCollectionToString, dateMinValue, dateGetMonth, parseBool, dateNow, dateMaxValue, dateAddYears, ObservableCollection$1, dateFromValues, SRProvider, dateGetDate, stringIsNullOrWhiteSpace, dateAddDays, Number_$type, dateAddMonths, truncate, timeSpanTotalDays, intDivide, Localization, HashSet$1, stringReplace, TransformGroup, TranslateTransform, MouseButtonEventArgs, Point_$type, KeyEventArgs, toNullable, fromEn, DeviceUtils, IgcKeyEventArgs, IgCollection, SyncableObservableCollection$2, NotifyCollectionChangedAction, CollectionAdapter, Rect, stringContains, stringSplit, Popup, 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-webcomponents-core';
 
 /*
 THIS INFRAGISTICS ULTIMATE SOFTWARE LICENSE  AGREEMENT ("AGREEMENT") LOCATED HERE:
@@ -1170,17 +1170,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;
@@ -1192,7 +1192,7 @@ let ButtonVisualModelExport = /*@__PURE__*/ (() => {
             this.n = false;
             this.l = false;
         }
-        ab() {
+        serialize() {
             let a = new StringBuilder(0);
             a.l("{");
             a.l("top : " + this.s + ", ");
@@ -1213,20 +1213,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 + ", ");
@@ -1247,7 +1247,7 @@ let ButtonVisualModelExport = /*@__PURE__*/ (() => {
             return a.toString();
         }
     }
-    ButtonVisualModelExport.$t = /*@__PURE__*/ markType(ButtonVisualModelExport, 'ButtonVisualModelExport');
+    ButtonVisualModelExport.$t = /*@__PURE__*/ markType(ButtonVisualModelExport, 'ButtonVisualModelExport', Base.$, [IVisualData_$type]);
     return ButtonVisualModelExport;
 })();
 
@@ -1426,10 +1426,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");
             }
@@ -1447,11 +1450,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) {
@@ -4084,17 +4082,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;
@@ -4105,7 +4101,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));
@@ -4121,31 +4117,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;
@@ -6746,22 +6742,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;
@@ -6769,36 +6767,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();
@@ -6821,157 +6830,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());
@@ -6981,69 +6990,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);
@@ -7051,8 +7060,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 = /*@__PURE__*/ markType(IconView, 'IconView');
@@ -7106,9 +7209,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;
@@ -7171,11 +7274,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;
             }
         }
@@ -7198,15 +7301,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);
@@ -7215,22 +7318,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);
@@ -7253,63 +7356,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);
                 }
@@ -7321,27 +7424,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");
                 }
             }
         }
@@ -7718,10 +7821,10 @@ let XIcon = /*@__PURE__*/ (() => {
         cc() {
         }
         onDetachedFromUI() {
-            this.view.af();
+            this.view.aj();
         }
         onAttachedToUI() {
-            this.view.ac();
+            this.view.ag();
         }
         b7() {
             if (this.disabled) {
@@ -7732,61 +7835,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 = /*@__PURE__*/ markType(XIcon, 'XIcon', Base.$, [INotifyPropertyChanged_$type, IIcon_$type]);
@@ -8673,7 +8773,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: [");
@@ -21917,7 +22017,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();
@@ -21943,7 +22043,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");
@@ -21956,7 +22056,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");
@@ -22042,7 +22142,7 @@ let DatePickerView = /*@__PURE__*/ (() => {
         }
         av() {
             if (this.f != null) {
-                if (this.b.az == true) {
+                if (this.b.a0 == true) {
                     this.f.show();
                 }
                 else {
@@ -22056,7 +22156,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 });
@@ -22071,9 +22171,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 {
@@ -22083,7 +22183,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 {
@@ -22112,60 +22212,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) {
@@ -22203,8 +22303,8 @@ let DatePickerView = /*@__PURE__*/ (() => {
 /**
  * @hidden
  */
-let DatePicker = /*@__PURE__*/ (() => {
-    class DatePicker extends Base {
+let XDatePicker = /*@__PURE__*/ (() => {
+    class XDatePicker extends Base {
         constructor() {
             super();
             this.h = null;
@@ -22215,32 +22315,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;
@@ -22250,9 +22350,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;
@@ -22265,14 +22365,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();
@@ -22282,7 +22382,7 @@ let DatePicker = /*@__PURE__*/ (() => {
                 })()));
             }
             if (this.ai) {
-                this.df();
+                this.dg();
             }
         }
         notifySizeChanged() {
@@ -22291,9 +22391,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);
         }
@@ -22311,44 +22411,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() {
@@ -22358,17 +22458,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() {
@@ -22378,17 +22488,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() {
@@ -22398,7 +22498,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() {
@@ -22408,7 +22508,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() {
@@ -22418,47 +22518,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() {
@@ -22468,7 +22568,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() {
@@ -22478,7 +22578,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() {
@@ -22488,7 +22588,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() {
@@ -22498,17 +22598,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() {
@@ -22518,17 +22618,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() {
@@ -22538,17 +22638,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() {
@@ -22558,7 +22658,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() {
@@ -22568,43 +22668,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();
@@ -22616,8 +22716,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);
                             }
@@ -22631,25 +22731,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;
@@ -22657,22 +22757,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) {
@@ -22685,27 +22785,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) {
@@ -22714,7 +22814,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;
@@ -22729,7 +22829,7 @@ let DatePicker = /*@__PURE__*/ (() => {
                             this.q.disabled = this.av;
                         }
                         if (this.o != null) {
-                            this.o.disabled = this.av;
+                            this.o.disabled = this.az();
                         }
                     }
                     break;
@@ -22743,14 +22843,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 = '/';
             }
@@ -22766,7 +22869,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 = "";
@@ -22775,19 +22878,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;
                         }
                     }
@@ -22795,71 +22898,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;
@@ -22867,11 +22970,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();
@@ -22880,40 +22983,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;
             }
@@ -22923,36 +23026,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();
             }
@@ -22960,12 +23063,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;
@@ -22976,17 +23079,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]);
@@ -22999,13 +23102,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";
@@ -23081,45 +23184,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";
@@ -23144,7 +23247,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";
@@ -23170,12 +23273,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";
@@ -23215,7 +23318,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";
@@ -23256,31 +23359,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;
                             }
                         }
                     }
@@ -23293,7 +23396,7 @@ let DatePicker = /*@__PURE__*/ (() => {
                 }
             }
         }
-        cp() {
+        cq() {
             if (this.av == true) {
                 return;
             }
@@ -23304,65 +23407,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;
             }
@@ -23370,27 +23473,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);
             }
@@ -23399,13 +23502,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;
@@ -23432,7 +23535,7 @@ let DatePicker = /*@__PURE__*/ (() => {
                 }
             }
         }
-        cq() {
+        cr() {
             if (this.u != null) {
                 window.setTimeout(() => this.u.b5(), 0);
             }
@@ -23453,15 +23556,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);
                         }
                     }
                 }
@@ -23470,33 +23573,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();
         }
@@ -23537,32 +23640,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 = /*@__PURE__*/ 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 = /*@__PURE__*/ 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;
 })();
 
 /*
@@ -23632,8 +23735,8 @@ class IgcLostFocusEventArgs {
     }
 }
 
-let IgcDatePickerComponent = /*@__PURE__*/ (() => {
-    class IgcDatePickerComponent extends IgcHTMLElement {
+let IgcXDatePickerComponent = /*@__PURE__*/ (() => {
+    class IgcXDatePickerComponent extends IgcHTMLElement {
         set height(value) {
             this._height = value;
             this.style.height = value;
@@ -23699,7 +23802,7 @@ let IgcDatePickerComponent = /*@__PURE__*/ (() => {
             this._datePicker.destroy();
         }
         createImplementation() {
-            return new DatePicker();
+            return new XDatePicker();
         }
         disconnectedCallback() {
             this._disconnected = true;
@@ -23710,8 +23813,8 @@ let IgcDatePickerComponent = /*@__PURE__*/ (() => {
                 this._disconnected = false;
                 return;
             }
-            this.classList.add("ig-date-picker");
-            this.classList.add("igc-date-picker");
+            this.classList.add("ig-x-date-picker");
+            this.classList.add("igc-x-date-picker");
             var rootWrapper = this._renderer.rootWrapper;
             var rootElement = rootWrapper.getNativeElement();
             this.appendChild(rootElement);
@@ -23790,14 +23893,14 @@ let IgcDatePickerComponent = /*@__PURE__*/ (() => {
             this._settingAttributes = false;
         }
         static get observedAttributes() {
-            if (IgcDatePickerComponent._observedAttributesIgcDatePickerComponent == null) {
-                let names = getAllPropertyNames(IgcDatePickerComponent);
+            if (IgcXDatePickerComponent._observedAttributesIgcXDatePickerComponent == null) {
+                let names = getAllPropertyNames(IgcXDatePickerComponent);
                 for (let i = 0; i < names.length; i++) {
                     names[i] = toSpinal(names[i]);
                 }
-                IgcDatePickerComponent._observedAttributesIgcDatePickerComponent = names;
+                IgcXDatePickerComponent._observedAttributesIgcXDatePickerComponent = names;
             }
-            return IgcDatePickerComponent._observedAttributesIgcDatePickerComponent;
+            return IgcXDatePickerComponent._observedAttributesIgcXDatePickerComponent;
         }
         attributeChangedCallback(name, oldValue, newValue) {
             if (this._settingAttributes) {
@@ -23809,9 +23912,9 @@ let IgcDatePickerComponent = /*@__PURE__*/ (() => {
             this._updatingFromAttribute = false;
         }
         static register() {
-            if (!IgcDatePickerComponent._isElementRegistered) {
-                IgcDatePickerComponent._isElementRegistered = true;
-                RegisterElementHelper.registerElement(IgcDatePickerComponent.htmlTagName, IgcDatePickerComponent);
+            if (!IgcXDatePickerComponent._isElementRegistered) {
+                IgcXDatePickerComponent._isElementRegistered = true;
+                RegisterElementHelper.registerElement(IgcXDatePickerComponent.htmlTagName, IgcXDatePickerComponent);
             }
         }
         /**
@@ -23827,29 +23930,29 @@ let IgcDatePickerComponent = /*@__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._a("labelTextColor", brushToString(this.i.dw));
+            this.i.dx = stringToBrush(v);
+            this._a("labelTextColor", brushToString(this.i.dx));
         }
         /**
          * Gets or sets the font to use for the combobox.
@@ -23870,28 +23973,28 @@ let IgcDatePickerComponent = /*@__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.
@@ -23932,41 +24035,41 @@ let IgcDatePickerComponent = /*@__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._a("textColor", brushToString(this.i.dx));
+            this.i.dy = stringToBrush(v);
+            this._a("textColor", brushToString(this.i.dy));
         }
         /**
          * 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._a("iconColor", brushToString(this.i.dv));
+            this.i.dw = stringToBrush(v);
+            this._a("iconColor", brushToString(this.i.dw));
         }
         /**
          * 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._a("showClearButton", this.i.az);
+            this.i.a0 = ensureBool(v);
+            this._a("showClearButton", this.i.a0);
         }
         /**
          * 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._a("showTodayButton", this.i.a0);
+            this.i.a1 = ensureBool(v);
+            this._a("showTodayButton", this.i.a1);
         }
         /**
          * Gets or sets the AllowTextInput property to detirmine if entering text into the input is allowed
@@ -24012,11 +24115,11 @@ let IgcDatePickerComponent = /*@__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._a("showWeekNumbers", this.i.a1);
+            this.i.a2 = ensureBool(v);
+            this._a("showWeekNumbers", this.i.a2);
         }
         /**
          * Gets or sets the date time format to use for this column. If FormatString is specificied this value is ignored.
@@ -24032,10 +24135,10 @@ let IgcDatePickerComponent = /*@__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;
@@ -24068,11 +24171,11 @@ let IgcDatePickerComponent = /*@__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._a("useTopLayer", this.i.a2);
+            this.i.a3 = ensureBool(v);
+            this._a("useTopLayer", this.i.a3);
         }
         get hasUserValues() {
             return this._hasUserValues;
@@ -24094,7 +24197,7 @@ let IgcDatePickerComponent = /*@__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 + "-");
@@ -24128,14 +24231,14 @@ let IgcDatePickerComponent = /*@__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);
         }
         /**
@@ -24143,7 +24246,7 @@ let IgcDatePickerComponent = /*@__PURE__*/ (() => {
         
         */
         exportSerializedVisualModel() {
-            let iv = this.i.bv();
+            let iv = this.i.bw();
             return (iv);
         }
         /**
@@ -24288,10 +24391,10 @@ let IgcDatePickerComponent = /*@__PURE__*/ (() => {
             this.i.propertyChanged = delegateCombine(this.i.propertyChanged, this._valueChange_wrapped);
         }
     }
-    IgcDatePickerComponent._observedAttributesIgcDatePickerComponent = null;
-    IgcDatePickerComponent.htmlTagName = "igc-date-picker";
-    IgcDatePickerComponent._isElementRegistered = false;
-    return IgcDatePickerComponent;
+    IgcXDatePickerComponent._observedAttributesIgcXDatePickerComponent = null;
+    IgcXDatePickerComponent.htmlTagName = "igc-x-date-picker";
+    IgcXDatePickerComponent._isElementRegistered = false;
+    return IgcXDatePickerComponent;
 })();
 
 /*
@@ -24300,16 +24403,16 @@ 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.
 */
-class IgcDatePickerModule {
+class IgcXDatePickerModule {
     static register() {
         IgcXCalendarModule.register();
         IgcXButtonModule.register();
         IgcXIconModule.register();
         IgcXInputGroupModule.register();
-        IgcDatePickerComponent.register();
-        TypeRegistrar.registerCons('IgcDatePickerComponent', IgcDatePickerComponent);
-        TypeRegistrar.registerCons('IgcDatePickerComponent', IgcDatePickerComponent);
-        TypeRegistrar.register('DatePicker', DatePicker.$type);
+        IgcXDatePickerComponent.register();
+        TypeRegistrar.registerCons('IgcXDatePickerComponent', IgcXDatePickerComponent);
+        TypeRegistrar.registerCons('IgcXDatePickerComponent', IgcXDatePickerComponent);
+        TypeRegistrar.register('XDatePicker', XDatePicker.$type);
     }
 }
 
@@ -25479,7 +25582,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;
     })()));
@@ -25492,7 +25595,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;
     })()));
@@ -26305,7 +26408,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("}");
@@ -29378,6 +29481,9 @@ let XInputBridge = /*@__PURE__*/ (() => {
             let e = d.inputs._inner[0];
             window.setTimeout(() => e.dr(b, c), 0);
         }
+        exportVisualData(a) {
+            return a.fe();
+        }
     }
     XInputBridge.$t = /*@__PURE__*/ markType(XInputBridge, 'XInputBridge', XComponentBridge.$, [INativeUIInputBridge_$type]);
     return XInputBridge;
@@ -29427,12 +29533,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;
@@ -29498,7 +29604,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;
@@ -29529,7 +29635,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:
@@ -29587,6 +29693,9 @@ let XButtonBridge = /*@__PURE__*/ (() => {
                 case 11:
                     d.aa = c;
                     break;
+                case 83:
+                    d.bu = c;
+                    break;
             }
         }
         getValue(a, b) {
@@ -29622,6 +29731,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;
         }
@@ -29673,6 +29783,9 @@ let XButtonBridge = /*@__PURE__*/ (() => {
                 default: return 3;
             }
         }
+        exportVisualData(a) {
+            return a.d7();
+        }
     }
     XButtonBridge.$t = /*@__PURE__*/ markType(XButtonBridge, 'XButtonBridge', XComponentBridge.$);
     return XButtonBridge;
@@ -29764,6 +29877,9 @@ let XCheckboxBridge = /*@__PURE__*/ (() => {
                     break;
             }
         }
+        exportVisualData(a) {
+            return a.a3();
+        }
     }
     XCheckboxBridge.$t = /*@__PURE__*/ markType(XCheckboxBridge, 'XCheckboxBridge', XComponentBridge.$);
     return XCheckboxBridge;
@@ -29879,6 +29995,9 @@ let XIconBridge = /*@__PURE__*/ (() => {
                 return;
             }
         }
+        exportVisualData(a) {
+            return a.au();
+        }
     }
     XIconBridge.$t = /*@__PURE__*/ markType(XIconBridge, 'XIconBridge', XComponentBridge.$);
     return XIconBridge;
@@ -29939,12 +30058,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;
@@ -29974,12 +30093,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;
@@ -30136,15 +30255,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];
@@ -30154,12 +30276,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);
         }
     }
@@ -30189,7 +30311,7 @@ let NativeUIXInputsFactory = /*@__PURE__*/ (() => {
             return NativeUIXInputsFactory.a;
         }
         static j() {
-            NativeUIComponent.ap(NativeUIXInputsFactory.b);
+            NativeUIComponent.ar(NativeUIXInputsFactory.b);
         }
         get flavor() {
             return this.c;
@@ -30247,7 +30369,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);
         }
@@ -30261,7 +30383,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);
         }
@@ -30274,7 +30396,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);
         }
@@ -30287,7 +30409,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);
@@ -30298,9 +30420,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) {
@@ -30312,7 +30434,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);
         }
@@ -30324,7 +30446,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);
         }
@@ -30367,7 +30489,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);
         }
@@ -30496,4 +30618,65 @@ 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.
 */
 
-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, IgcButtonClickEventArgs, IgcButtonGroupSelectionChangedEventArgs, IgcCheckboxChangeEventArgs, IgcDatePickerComponent, IgcDatePickerModule, IgcGotFocusEventArgs, IgcInputChangeEventArgs, IgcLostFocusEventArgs, IgcSelectedValueChangedEventArgs, IgcXButtonComponent, IgcXButtonGroupButtonCollection, IgcXButtonGroupComponent, IgcXButtonGroupModule, IgcXButtonModule, IgcXCalendarComponent, IgcXCalendarLocaleEnModule, IgcXCalendarModule, IgcXCheckboxComponent, IgcXCheckboxModule, IgcXIconComponent, IgcXIconModule, IgcXInputComponent, IgcXInputGroupComponent, IgcXInputGroupInputCollection, IgcXInputGroupItemComponent, IgcXInputGroupModule, IgcXInputModule, IgcXLabelComponent, IgcXLabelModule, IgcXPrefixComponent, IgcXPrefixModule, IgcXRippleComponent, IgcXRippleModule, IgcXSuffixComponent, 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 };
+/*
+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 = /*@__PURE__*/ markType(TextBlockVisualModelExport, 'TextBlockVisualModelExport');
+    return TextBlockVisualModelExport;
+})();
+
+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, IgcButtonClickEventArgs, IgcButtonGroupSelectionChangedEventArgs, IgcCheckboxChangeEventArgs, IgcGotFocusEventArgs, IgcInputChangeEventArgs, IgcLostFocusEventArgs, IgcSelectedValueChangedEventArgs, IgcXButtonComponent, IgcXButtonGroupButtonCollection, IgcXButtonGroupComponent, IgcXButtonGroupModule, IgcXButtonModule, IgcXCalendarComponent, IgcXCalendarLocaleEnModule, IgcXCalendarModule, IgcXCheckboxComponent, IgcXCheckboxModule, IgcXDatePickerComponent, IgcXDatePickerModule, IgcXIconComponent, IgcXIconModule, IgcXInputComponent, IgcXInputGroupComponent, IgcXInputGroupInputCollection, IgcXInputGroupItemComponent, IgcXInputGroupModule, IgcXInputModule, IgcXLabelComponent, IgcXLabelModule, IgcXPrefixComponent, IgcXPrefixModule, IgcXRippleComponent, IgcXRippleModule, IgcXSuffixComponent, 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 };