igniteui-webcomponents-inputs 4.3.2 → 4.3.3-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, Tuple$2, SVGNode, FastIterationDictionary$2, stringStartsWith, trimStart, IIcon_$type, fromBrushCollection, toBrushCollection, brushCollectionToString, DomWrapper_$type, 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, stringContains, stringSplit, Popup, Rect, 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_, 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, Tuple$2, SVGNode, FastIterationDictionary$2, stringStartsWith, trimStart, IIcon_$type, fromBrushCollection, toBrushCollection, brushCollectionToString, DomWrapper_$type, 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';
 
 /*
 THIS INFRAGISTICS ULTIMATE SOFTWARE LICENSE  AGREEMENT ("AGREEMENT") LOCATED HERE:
@@ -137,7 +137,7 @@ let RippleView = /*@__PURE__*/ (() => {
             d.setStyleProperty("pointer-events", "none");
             d.setStyleProperty("border-radius", c + "px");
             d.setStyleProperty("opacity", ".5");
-            NativeUI.ad(d, ((() => {
+            NativeUI.af(d, ((() => {
                 let $ret = new ScaleTransform();
                 $ret.l = 0.3;
                 $ret.m = 0.3;
@@ -1318,7 +1318,7 @@ let ButtonView = /*@__PURE__*/ (() => {
             this.n.setStyleProperty("white-space", "no-wrap");
             this.n.setStyleProperty("color", "#000");
             this.n.setStyleProperty("background", this.b.nf._fill);
-            NativeUI.n(this.n, this.b.kr);
+            NativeUI.o(this.n, this.b.kr);
             this.n.setAttribute("id", this.b.hu);
             this.av();
             this.h.add(c.listen("change", runOn(this, this.x)));
@@ -2306,10 +2306,10 @@ let XButton = /*@__PURE__*/ (() => {
             if (a == null) {
                 return;
             }
-            NativeUI.n(a, this.kr);
-            NativeUI.m(a, this.ng);
+            NativeUI.o(a, this.kr);
+            NativeUI.n(a, this.ng);
             if (!isNaN_(this.bf)) {
-                NativeUI.o(a, new Thickness(0, this.bf));
+                NativeUI.p(a, new Thickness(0, this.bf));
             }
             if (this.disabled) {
                 this.view.ax(this.cq, this.u);
@@ -2326,17 +2326,17 @@ let XButton = /*@__PURE__*/ (() => {
                 }
             }
             if (this.disabled) {
-                NativeUI.l(a, this.nh);
+                NativeUI.m(a, this.nh);
             }
             else if (this.focused && this.az) {
-                NativeUI.l(a, this.nk);
+                NativeUI.m(a, this.nk);
             }
             else {
                 if (this.a0 && !this.ar) {
-                    NativeUI.l(a, this.nm);
+                    NativeUI.m(a, this.nm);
                 }
                 else {
-                    NativeUI.l(a, this.nf);
+                    NativeUI.m(a, this.nf);
                 }
             }
             this.view.aw(this.np, BrushUtil.g(0, 0, 0, 0));
@@ -2344,21 +2344,21 @@ let XButton = /*@__PURE__*/ (() => {
                 this.view.az(this.aa);
             }
             if (this.disabled) {
-                NativeUI.p(this.view.s, this.nj);
                 NativeUI.q(this.view.s, this.nj);
+                NativeUI.r(this.view.s, this.nj);
             }
             else if (this.focused && this.az) {
-                NativeUI.p(this.view.s, this.nl);
                 NativeUI.q(this.view.s, this.nl);
+                NativeUI.r(this.view.s, this.nl);
             }
             else {
                 if (this.a0 && !this.ar) {
-                    NativeUI.p(this.view.s, this.nn);
                     NativeUI.q(this.view.s, this.nn);
+                    NativeUI.r(this.view.s, this.nn);
                 }
                 else {
-                    NativeUI.p(this.view.s, this.nq);
                     NativeUI.q(this.view.s, this.nq);
+                    NativeUI.r(this.view.s, this.nq);
                 }
             }
         }
@@ -4096,19 +4096,19 @@ let XButton = /*@__PURE__*/ (() => {
             c.s = f[0];
             c.q = f[1];
             c.p = NativeUI.d(a);
-            c.t = NativeUI.j(a);
+            c.t = NativeUI.k(a);
             c.h = this.n;
             c.i = this.q;
-            c.c = AppearanceHelper.a(NativeUI.ai(a));
+            c.c = AppearanceHelper.a(NativeUI.ak(a));
             c.g = AppearanceHelper.a(this.nr);
             c.d = AppearanceHelper.a(this.no);
             c.a = AppearanceHelper.a(this.ne);
             c.u = this.ct;
             c.e = AppearanceHelper.a(this.np);
             c.ah = this.kr;
-            c.b = AppearanceHelper.a(NativeUI.ah(a));
+            c.b = AppearanceHelper.a(NativeUI.aj(a));
             c.j = this.u;
-            c.f = AppearanceHelper.a(NativeUI.aj(b));
+            c.f = AppearanceHelper.a(NativeUI.al(b));
             c.o = this.bf;
             c.x = this.fw;
             c.y = this.g0;
@@ -4539,11 +4539,17 @@ class IgcButtonClickEventArgs {
         this._implementation = this.createImplementation();
         this._implementation.externalObject = this;
         this.onImplementationCreated();
+        if (this._initializeAdapters) {
+            this._initializeAdapters();
+        }
     }
     _provideImplementation(i) {
         this._implementation = i;
         this._implementation.externalObject = this;
         this.onImplementationCreated();
+        if (this._initializeAdapters) {
+            this._initializeAdapters();
+        }
     }
 }
 
@@ -7077,15 +7083,15 @@ let XIcon = /*@__PURE__*/ (() => {
             return this.svgPath != null && !this.view.h;
         }
         ca() {
-            NativeUI.w(this.view.r, this.ai);
+            NativeUI.y(this.view.r, this.ai);
         }
         b9() {
             let a = this.view.r;
             if (this.p) {
                 let b = this.view.s;
-                NativeUI.q(b, this.cp);
-                NativeUI.y(b, this.cq);
-                NativeUI.ab(b, this.ad);
+                NativeUI.r(b, this.cp);
+                NativeUI.aa(b, this.cq);
+                NativeUI.ad(b, this.ad);
             }
             else {
                 let c = false;
@@ -7105,19 +7111,19 @@ let XIcon = /*@__PURE__*/ (() => {
                 if (c) {
                     for (let d = 0; d < this.view.k.count; d++) {
                         let e = this.view.k._inner[d].c;
-                        NativeUI.q(this.view.k._inner[d].d, e.l.f(this.c1));
+                        NativeUI.r(this.view.k._inner[d].d, e.l.f(this.c1));
                     }
                     for (let f = 0; f < this.view.l.count; f++) {
                         let g = this.view.l._inner[f].c;
-                        NativeUI.y(this.view.l._inner[f].d, g.m.f(this.c2));
+                        NativeUI.aa(this.view.l._inner[f].d, g.m.f(this.c2));
                     }
                     for (let h = 0; h < this.view.m.count; h++) {
                         let i = this.view.m._inner[h].c;
-                        NativeUI.q(this.view.m._inner[h].d, i.l.f(this.c3));
+                        NativeUI.r(this.view.m._inner[h].d, i.l.f(this.c3));
                     }
                     for (let j = 0; j < this.view.n.count; j++) {
                         let k = this.view.n._inner[j].c;
-                        NativeUI.y(this.view.n._inner[j].d, k.m.f(this.c4));
+                        NativeUI.aa(this.view.n._inner[j].d, k.m.f(this.c4));
                     }
                     for (let l = 0; l < this.view.c.o.count; l++) {
                         let m = this.view.c.o._inner[l];
@@ -7126,7 +7132,7 @@ let XIcon = /*@__PURE__*/ (() => {
                         if (o < this.c.count) {
                             for (let p = 0; p < this.view.c.q._inner[l].count; p++) {
                                 let q = this.view.c.q._inner[l]._inner[p].c;
-                                NativeUI.q(this.view.c.q._inner[l]._inner[p].d, q.l.f(this.c.item(o)));
+                                NativeUI.r(this.view.c.q._inner[l]._inner[p].d, q.l.f(this.c.item(o)));
                             }
                         }
                     }
@@ -7137,32 +7143,32 @@ let XIcon = /*@__PURE__*/ (() => {
                         if (u < this.d.count) {
                             for (let v = 0; v < this.view.d.q._inner[r].count; v++) {
                                 let w = this.view.d.q._inner[r]._inner[v].c;
-                                NativeUI.y(this.view.d.q._inner[r]._inner[v].d, w.m.f(this.d.item(u)));
+                                NativeUI.aa(this.view.d.q._inner[r]._inner[v].d, w.m.f(this.d.item(u)));
                             }
                         }
                     }
                     for (let x = 0; x < this.view.j.count; x++) {
                         let y = this.view.j._inner[x].c;
-                        NativeUI.q(this.view.j._inner[x].d, y.l.f(this.cp));
-                        NativeUI.y(this.view.j._inner[x].d, y.m.f(this.cq));
+                        NativeUI.r(this.view.j._inner[x].d, y.l.f(this.cp));
+                        NativeUI.aa(this.view.j._inner[x].d, y.m.f(this.cq));
                     }
                 }
                 let z = this.view.r;
                 if (this.cp != null) {
-                    NativeUI.q(z, this.cp);
+                    NativeUI.r(z, this.cp);
                 }
                 if (this.cq != null) {
-                    NativeUI.y(z, this.cq);
+                    NativeUI.aa(z, this.cq);
                 }
                 if (!isNaN_(this.ad)) {
-                    NativeUI.ab(z, this.ad);
+                    NativeUI.ad(z, this.ad);
                 }
             }
             if (this.k != null) {
                 this.view.ah(this.k);
             }
             if (this.cr != null) {
-                NativeUI.p(this.view.r, this.cr);
+                NativeUI.q(this.view.r, this.cr);
             }
         }
         get i() {
@@ -7544,15 +7550,15 @@ let XIcon = /*@__PURE__*/ (() => {
         e() {
             let a = new IconVisualModelExport();
             let b = this.view.r;
-            a.a = AppearanceHelper.a(NativeUI.aj(b));
-            a.c = AppearanceHelper.a(NativeUI.aj(b));
-            a.b = AppearanceHelper.a(NativeUI.ak(b));
+            a.a = AppearanceHelper.a(NativeUI.al(b));
+            a.c = AppearanceHelper.a(NativeUI.al(b));
+            a.b = AppearanceHelper.a(NativeUI.am(b));
             a.d = this.ad;
             let c = this.view.a();
             a.h = c[0];
             a.f = c[1];
             a.e = NativeUI.d(b);
-            a.i = NativeUI.j(b);
+            a.i = NativeUI.k(b);
             a.svgPath = this.svgPath;
             if (this.k != null) {
                 let d = this.k;
@@ -9375,7 +9381,7 @@ let CalendarView = /*@__PURE__*/ (() => {
         }
         ah() {
             if (this.p != null) {
-                this.p.parent().parent().focus(false);
+                this.p.parent().parent().focus(true);
             }
         }
         aq(a = true, b = false) {
@@ -11204,8 +11210,8 @@ let XCalendar = /*@__PURE__*/ (() => {
                     m.e = n[0] - d;
                     m.d = n[1] - e;
                     m.c = NativeUI.d(k._inner[l].parent());
-                    m.f = NativeUI.j(k._inner[l].parent());
-                    m.b = AppearanceHelper.a(NativeUI.aj(k._inner[l]));
+                    m.f = NativeUI.k(k._inner[l].parent());
+                    m.b = AppearanceHelper.a(NativeUI.al(k._inner[l]));
                     m.g = k._inner[l].getText();
                     a.k.add(m);
                 }
@@ -11217,9 +11223,9 @@ let XCalendar = /*@__PURE__*/ (() => {
                         q.e = r[0] - d;
                         q.d = r[1] - e;
                         q.c = NativeUI.d(o._inner[p].parent());
-                        q.f = NativeUI.j(o._inner[p].parent());
-                        q.b = AppearanceHelper.a(NativeUI.aj(o._inner[p]));
-                        q.a = AppearanceHelper.a(NativeUI.ai(o._inner[p]));
+                        q.f = NativeUI.k(o._inner[p].parent());
+                        q.b = AppearanceHelper.a(NativeUI.al(o._inner[p]));
+                        q.a = AppearanceHelper.a(NativeUI.ak(o._inner[p]));
                         q.g = o._inner[p].getText();
                         a.l.add(q);
                     }
@@ -11309,11 +11315,17 @@ class IgcSelectedValueChangedEventArgs {
         this._implementation = this.createImplementation();
         this._implementation.externalObject = this;
         this.onImplementationCreated();
+        if (this._initializeAdapters) {
+            this._initializeAdapters();
+        }
     }
     _provideImplementation(i) {
         this._implementation = i;
         this._implementation.externalObject = this;
         this.onImplementationCreated();
+        if (this._initializeAdapters) {
+            this._initializeAdapters();
+        }
     }
     get oldValue() {
         return this.i.oldValue;
@@ -12727,7 +12739,7 @@ let InputGroupView = /*@__PURE__*/ (() => {
             g.setStyleProperty("height", "2px");
             g.setStyleProperty("display", "block");
             g.setStyleProperty("pointer-events", "none");
-            NativeUI.ad(g, ((() => {
+            NativeUI.af(g, ((() => {
                 let $ret = new ScaleTransform();
                 $ret.l = 0.5;
                 $ret.m = 1;
@@ -12889,7 +12901,7 @@ let SuffixView = /*@__PURE__*/ (() => {
                 $ret.m = 1;
                 return $ret;
             })()));
-            NativeUI.ad(this.g.rootWrapper, a);
+            NativeUI.af(this.g.rootWrapper, a);
             this.g.rootWrapper.setStyleProperty("transform-origin", "0px 0px");
         }
         f() {
@@ -12978,7 +12990,7 @@ let PrefixView = /*@__PURE__*/ (() => {
                 $ret.m = 1;
                 return $ret;
             })()));
-            NativeUI.ad(this.g.rootWrapper, a);
+            NativeUI.af(this.g.rootWrapper, a);
             this.g.rootWrapper.setStyleProperty("transform-origin", "0px 0px");
         }
         f() {
@@ -13074,7 +13086,7 @@ let LabelView = /*@__PURE__*/ (() => {
             c.setStyleProperty("overflow", "hidden");
             c.setStyleProperty("height", "1.125rem");
             c.setStyleProperty("backface-visibility", "hidden");
-            NativeUI.p(this.k.rootWrapper, this.c.cz);
+            NativeUI.q(this.k.rootWrapper, this.c.cz);
             c.setStyleProperty("outline-style", "none");
             c.setStyleProperty("box-shadow", "none");
             c.setStyleProperty("font-family", "Verdana");
@@ -13100,7 +13112,7 @@ let LabelView = /*@__PURE__*/ (() => {
                 $ret.m = 1;
                 return $ret;
             })()));
-            NativeUI.ad(this.k.rootWrapper, a);
+            NativeUI.af(this.k.rootWrapper, a);
             this.l.setStyleProperty("height", "1.125rem");
             this.k.rootWrapper.setStyleProperty("position", "absolute");
             this.k.rootWrapper.setStyleProperty("transform-origin", "0px 0px");
@@ -13218,7 +13230,7 @@ let LabelView = /*@__PURE__*/ (() => {
             }
         }
         ad(a) {
-            NativeUI.p(this.l, a);
+            NativeUI.q(this.l, a);
         }
     }
     LabelView.$t = /*@__PURE__*/ markType(LabelView, 'LabelView');
@@ -13286,7 +13298,7 @@ let InputView = /*@__PURE__*/ (() => {
             c.setStyleProperty("background-attachment", "initial");
             c.setStyleProperty("background-origin", "initial");
             c.setStyleProperty("background-color", "transparent");
-            NativeUI.p(c, this.b.d4);
+            NativeUI.q(c, this.b.d4);
             c.setStyleProperty("outline-style", "none");
             c.setStyleProperty("box-shadow", "none");
             c.setStyleProperty("border-top", "0.1875rem solid transparent");
@@ -13413,7 +13425,7 @@ let InputView = /*@__PURE__*/ (() => {
                 $ret.m = 1;
                 return $ret;
             })()));
-            NativeUI.ad(this.l.rootWrapper, b);
+            NativeUI.af(this.l.rootWrapper, b);
             this.l.rootWrapper.setStyleProperty("transform-origin", "0px 0px");
         }
         k() {
@@ -14422,7 +14434,7 @@ let XInputGroup = /*@__PURE__*/ (() => {
                     this.jv();
                     break;
                 case "IsDisabled":
-                    NativeUI.t(this.view.v, !this.disabled);
+                    NativeUI.u(this.view.v, !this.disabled);
                     break;
             }
         }
@@ -14605,44 +14617,44 @@ let XInputGroup = /*@__PURE__*/ (() => {
             let e = this.v != null && this.v.playState == 1;
             let f = this.w != null && this.w.playState == 1;
             let g = this.u != null && this.u.playState == 1;
-            NativeUI.n(a, this.ko);
-            NativeUI.n(b, this.ko);
-            NativeUI.l(a, this.l5);
-            NativeUI.x(a, this.oe);
+            NativeUI.o(a, this.ko);
+            NativeUI.o(b, this.ko);
+            NativeUI.m(a, this.l5);
+            NativeUI.z(a, this.oe);
             if (this.ao) {
                 if (!g) {
-                    NativeUI.m(b, this.l7);
-                    NativeUI.o(b, new Thickness(0, this.ch));
+                    NativeUI.n(b, this.l7);
+                    NativeUI.p(b, new Thickness(0, this.ch));
                 }
                 if (!f) {
-                    NativeUI.l(c, this.l8);
+                    NativeUI.m(c, this.l8);
                 }
             }
             else {
                 if (!f) {
                     if (this.ap) {
-                        NativeUI.l(c, this.l9);
-                        NativeUI.w(c, this.ck);
-                        NativeUI.s(c, this.cl);
+                        NativeUI.m(c, this.l9);
+                        NativeUI.y(c, this.ck);
+                        NativeUI.t(c, this.cl);
                     }
                     else {
-                        NativeUI.l(c, this.ma);
-                        NativeUI.w(c, this.cm);
-                        NativeUI.s(c, this.cp);
+                        NativeUI.m(c, this.ma);
+                        NativeUI.y(c, this.cm);
+                        NativeUI.t(c, this.cp);
                     }
                 }
                 if (!g) {
-                    NativeUI.m(b, this.l6);
-                    NativeUI.o(b, new Thickness(0, this.cg));
+                    NativeUI.n(b, this.l6);
+                    NativeUI.p(b, new Thickness(0, this.cg));
                 }
                 if (!f) {
-                    NativeUI.l(a, this.l5);
+                    NativeUI.m(a, this.l5);
                 }
             }
             if (!e) {
-                NativeUI.l(d, this.mb);
-                NativeUI.s(d, this.co);
-                NativeUI.w(d, this.cn);
+                NativeUI.m(d, this.mb);
+                NativeUI.t(d, this.co);
+                NativeUI.y(d, this.cn);
             }
         }
         get a() {
@@ -17235,7 +17247,7 @@ let XLabel = /*@__PURE__*/ (() => {
             a.c = this.p;
             a.e = this.t;
             a.d = this.s;
-            a.a = AppearanceHelper.a(NativeUI.aj(b));
+            a.a = AppearanceHelper.a(NativeUI.al(b));
             a.b = this.l;
             a.i = this.an;
             a.g = this.al;
@@ -17549,7 +17561,7 @@ let XInput = /*@__PURE__*/ (() => {
             if (this.ad != null) {
                 this.view.bb(this.ad);
             }
-            NativeUI.p(this.view.q, this.d4);
+            NativeUI.q(this.view.q, this.d4);
             this.view.a6();
         }
         get d4() {
@@ -17916,7 +17928,7 @@ let XInput = /*@__PURE__*/ (() => {
             a.j = this.ce;
             a.m = this.ci;
             a.d = this.au;
-            a.a = AppearanceHelper.a(NativeUI.aj(b));
+            a.a = AppearanceHelper.a(NativeUI.al(b));
             a.i = this.b8;
             a.l = this.cg;
             a.e = this.aw;
@@ -18150,6 +18162,9 @@ let IgcXInputGroupItemComponent = /*@__PURE__*/ (() => {
             this._implementation = this.createImplementation();
             this._implementation.externalObject = this;
             this.onImplementationCreated();
+            if (this._initializeAdapters) {
+                this._initializeAdapters();
+            }
         }
         _enqueueSetAttribute(attrName, attrValue) {
             this._queuedSetAttributes.push({ attrName: attrName, attrValue: attrValue });
@@ -18312,11 +18327,17 @@ class IgcInputChangeEventArgs {
         this._implementation = this.createImplementation();
         this._implementation.externalObject = this;
         this.onImplementationCreated();
+        if (this._initializeAdapters) {
+            this._initializeAdapters();
+        }
     }
     _provideImplementation(i) {
         this._implementation = i;
         this._implementation.externalObject = this;
         this.onImplementationCreated();
+        if (this._initializeAdapters) {
+            this._initializeAdapters();
+        }
     }
     get value() {
         return this.i.value;
@@ -21661,15 +21682,17 @@ let DatePickerView = /*@__PURE__*/ (() => {
             this.f = null;
             this.i = null;
             this.h = null;
+            this.o = null;
             this.document_Click = this.document_Click.bind(this);
         }
-        ah() {
+        am() {
         }
         get n() {
             return this.e;
         }
-        ag(a) {
+        ak(a) {
             if (a == null) {
+                this.b.cq();
                 if (this.d != null) {
                     let b = this.d.rootWrapper.getChildAt(0);
                     b.unlistenAll();
@@ -21681,18 +21704,19 @@ let DatePickerView = /*@__PURE__*/ (() => {
             this.d = a;
             let c = Math.round(a.rootWrapper.width());
             let d = Math.round(a.rootWrapper.height());
-            this.aa();
-            this.ab();
+            this.ad();
+            this.ae();
             let e = this.d.rootWrapper.getChildAt(0);
-            e.listen("keydown", runOn(this, this.x));
-            e.listen("focusin", runOn(this, this.v));
-            e.listen("focusout", runOn(this, this.w));
+            e.listen("keydown", runOn(this, this.y));
+            e.listen("focusin", runOn(this, this.w));
+            e.listen("focusout", runOn(this, this.x));
             document.addEventListener("click", this.document_Click, false);
+            this.o = new MutationObserver(runOn(this, this.al));
         }
-        aa() {
+        ad() {
             if (this.d != null) {
                 this.k = this.d.rootWrapper.getChildAt(0);
-                this.k.setAttribute("tabIndex", this.b.a7.toString());
+                this.k.setAttribute("tabIndex", this.b.be.toString());
                 this.k.setStyleProperty("display", "flex");
                 this.k.setStyleProperty("height", "100%");
                 this.l = this.d.createElement("div");
@@ -21705,71 +21729,73 @@ let DatePickerView = /*@__PURE__*/ (() => {
                 this.i = this.d.createElement("div");
                 this.i.setAttribute("aria-hidden", "true");
                 this.h = this.d.createElement("div");
-                this.b.ch();
+                this.b.cr();
                 this.j.getChildAt(0).setAttribute("aria-expanded", "fasle");
                 this.j.getChildAt(0).setAttribute("aria-invalid", "false");
                 this.f.setStyleProperty("height", "16px");
                 this.f.setStyleProperty("width", "16px");
                 this.h.setStyleProperty("height", "16px");
                 this.h.setStyleProperty("width", "16px");
-                this.f.listen("click", runOn(this, this.z));
-                this.h.listen("click", runOn(this, this.ad));
+                this.f.listen("click", runOn(this, this.ac));
+                this.f.listen("mousedown", runOn(this, this.aa));
+                this.f.listen("mouseleave", runOn(this, this.ab));
+                this.h.listen("click", runOn(this, this.ag));
             }
         }
-        ak(a) {
+        aq(a) {
             if (this.d != null) {
                 let b = this.d.getSubRenderer(this.k);
                 a.provideContainer(b);
                 let c = b.getExternal(a, b.rootWrapper, this.d.getExternal(this.b, null, null));
             }
         }
-        am(a) {
+        as(a) {
             if (this.d != null) {
                 let b = this.d.getSubRenderer(this.l);
                 a.provideContainer(b);
                 let c = b.getExternal(a, b.rootWrapper, this.d.getExternal(this.b, null, null));
             }
         }
-        al(a) {
+        ar(a) {
             if (this.d != null) {
                 let b = this.d.getSubRenderer(this.j);
                 a.provideContainer(b);
                 let c = b.getExternal(a, b.rootWrapper, this.d.getExternal(this.b, null, null));
             }
         }
-        ao(a, b) {
+        au(a, b) {
             if (this.d != null) {
                 let c = this.d.getSubRenderer(b);
                 a.provideContainer(c);
                 let d = c.getExternal(a, c.rootWrapper, this.d.getExternal(this.b, null, null));
             }
         }
-        aj(a, b) {
+        ap(a, b) {
             if (this.d != null) {
                 let c = this.d.getSubRenderer(b);
                 a.provideContainer(c);
                 let d = c.getExternal(a, c.rootWrapper, this.d.getExternal(this.b, null, null));
             }
         }
-        u() {
+        v() {
             return this.l;
         }
-        t() {
+        u() {
             return this.j;
         }
-        q() {
+        r() {
             return this.g;
         }
-        p() {
+        q() {
             return this.f;
         }
-        s() {
+        t() {
             return this.i;
         }
-        r() {
+        s() {
             return this.h;
         }
-        aq(a) {
+        aw(a) {
             if (this.j != null) {
                 if (a) {
                     this.j.getChildAt(0).setAttribute("aria-expanded", "true");
@@ -21779,7 +21805,7 @@ let DatePickerView = /*@__PURE__*/ (() => {
                 }
             }
         }
-        as(a) {
+        ay(a) {
             if (a != null && a != "") {
                 this.j.getChildAt(0).setAttribute("aria-label", a);
             }
@@ -21787,9 +21813,9 @@ let DatePickerView = /*@__PURE__*/ (() => {
                 this.j.getChildAt(0).setAttribute("aria-label", "Select a date");
             }
         }
-        ap() {
+        av() {
             if (this.f != null) {
-                if (this.b.at == true) {
+                if (this.b.az == true) {
                     this.f.show();
                 }
                 else {
@@ -21797,115 +21823,128 @@ let DatePickerView = /*@__PURE__*/ (() => {
                 }
             }
         }
-        ae() {
+        ah() {
             if (this.f != null) {
                 this.f.hide();
             }
         }
-        ar() {
-            this.k.setAttribute("tabIndex", this.b.a7.toString());
+        ax() {
+            this.k.setAttribute("tabIndex", this.b.be.toString());
         }
-        ab() {
+        an() {
+            this.o.observe(document, { childList: true, subtree: true });
+        }
+        aj() {
+            this.o.disconnect();
+        }
+        ae() {
             if (this.d != null) {
                 this.m = this.d.rootWrapper.getChildAt(1);
                 this.e = this.d.createElement("div");
                 this.e.setStyleProperty("width", "100%");
                 this.e.setStyleProperty("height", "100%");
                 this.e.setStyleProperty("display", "flex");
-                this.b.ci();
+                this.b.cs();
                 this.e.parent().setStyleProperty("height", "100%");
-                if (this.b.av == true) {
+                if (this.b.a1 == true) {
                     this.e.parent().parent().setStyleProperty("max-width", "245px");
                 }
                 else {
                     this.e.parent().parent().setStyleProperty("max-width", "232px");
                 }
-                if (this.b.au == true) {
-                    this.e.parent().parent().setStyleProperty("min-height", "270px");
-                }
-                else {
-                    this.e.parent().parent().setStyleProperty("min-height", "234px");
-                }
             }
         }
-        y() {
+        z() {
             if (this.d != null) {
-                if (this.b.av == true) {
+                if (this.b.a1 == true) {
                     this.e.parent().parent().setStyleProperty("max-width", "245px");
                 }
                 else {
                     this.e.parent().parent().setStyleProperty("max-width", "232px");
                 }
-                if (this.b.au == true) {
-                    this.e.parent().parent().setStyleProperty("min-height", "270px");
-                }
-                else {
-                    this.e.parent().parent().setStyleProperty("min-height", "234px");
-                }
             }
         }
-        an(a) {
+        at(a) {
             if (this.d != null) {
                 let b = this.d.getSubRenderer(this.m);
                 a.provideRenderer(b);
                 let c = b.getExternal(a, b.rootWrapper, this.d.getExternal(this.b, null, null));
             }
         }
-        ai(a) {
+        ao(a) {
             if (this.d != null) {
                 let b = this.d.getSubRenderer(this.e);
                 a.provideContainer(b);
                 let c = b.getExternal(a, b.rootWrapper, this.d.getExternal(this.b, null, null));
             }
         }
-        o() {
+        p() {
             return this.e;
         }
-        z(a) {
-            if (this.b.ar == true) {
+        ac(a) {
+            if (this.b.av == true) {
                 return;
             }
-            this.b.cf();
+            this.b.cp();
             if (this.f != null) {
                 this.f.hide();
             }
         }
-        ad(a) {
+        aa(a) {
+            this.b.c8();
+        }
+        ab(a) {
+            this.b.c9();
+        }
+        ag(a) {
             a.stopPropagation();
-            this.b.cn();
+            this.b.cx();
         }
-        x(a) {
+        y(a) {
             let b = a.which;
             if (b == 27) {
-                this.b.cg();
+                this.b.cq();
             }
         }
-        v(a) {
+        w(a) {
             this.b.focus();
             let b = (a.originalEvent.relatedTarget);
             if (!this.c(b)) {
-                this.b.ct();
+                this.b.c3();
             }
         }
-        w(a) {
+        x(a) {
             let b = (a.originalEvent.relatedTarget);
             if (!this.c(b)) {
-                this.b.cm();
-                this.b.cu();
+                this.b.cw();
+                this.b.c4();
+            }
+        }
+        al(a, b) {
+            if (this.d != null) {
+                let c = this.d.rootWrapper.getNativeElement();
+                if (!document.documentElement.contains(c)) {
+                    this.b.cq();
+                }
+            }
+            else {
+                this.b.cq();
             }
         }
         document_Click(a) {
             let b = a.target;
             if (!this.c(b)) {
-                this.b.cg();
+                this.b.cq();
             }
         }
-        at() {
+        az(a) {
             if (this.d != null) {
-                let a = this.d.rootWrapper.getNativeElement();
-                let b = a.getBoundingClientRect();
-                ;
-                return b;
+                let b = this.d.rootWrapper.getNativeElement();
+                let c = (b.getBoundingClientRect());
+                if (a) {
+                    c = new Rect(0, c.left + window.pageXOffset, c.top + window.pageYOffset, c.width, c.height);
+                }
+                return c;
             }
             return null;
         }
@@ -21921,11 +21960,11 @@ let DatePickerView = /*@__PURE__*/ (() => {
             if (null == a) {
                 return false;
             }
-            let b = this.j.getNativeElement();
+            let b = this.d.rootWrapper.getNativeElement();
             let c = this.e.getNativeElement();
             return b.contains(a) || c.contains(a);
         }
-        af() {
+        ai() {
         }
     }
     DatePickerView.$t = /*@__PURE__*/ markType(DatePickerView, 'DatePickerView');
@@ -21946,44 +21985,48 @@ let DatePicker = /*@__PURE__*/ (() => {
             this.m = null;
             this.n = null;
             this.c = null;
-            this.a9 = "dd";
-            this.bd = "mm";
-            this.bg = "yyyy";
-            this.ba = "mdy";
-            this.bf = "/";
+            this.bg = "dd";
+            this.bk = "mm";
+            this.bn = "yyyy";
+            this.bh = "mdy";
+            this.bm = "/";
             this.ah = false;
-            this.ap = false;
-            this.ao = false;
-            this.ay = dateMinValue();
+            this.at = false;
+            this.ar = false;
+            this.a5 = dateMinValue();
             this.ai = false;
             this.propertyChanged = null;
             this.selectedValueChanged = null;
             this.ae = null;
-            this.a0 = dateMinValue();
-            this.az = dateMinValue();
-            this.bc = "";
-            this.de = BrushUtil.g(255, 24, 29, 31);
+            this.a7 = dateMinValue();
+            this.a6 = dateMinValue();
+            this.bj = "";
+            this.ds = BrushUtil.g(255, 24, 29, 31);
             this.z = null;
-            this.be = "";
-            this.ax = dateMinValue();
-            this.aw = dateMaxValue();
+            this.bl = "";
+            this.a4 = dateMinValue();
+            this.a3 = dateMaxValue();
             this.x = 2;
             this.v = 1;
             this.aa = null;
-            this.df = BrushUtil.g(255, 24, 29, 31);
-            this.dd = BrushUtil.g(255, 163, 172, 184);
-            this.al = true;
-            this.am = false;
+            this.dt = BrushUtil.g(255, 24, 29, 31);
+            this.dr = BrushUtil.g(255, 163, 172, 184);
+            this.ao = true;
+            this.ap = false;
             this.ag = true;
-            this.ak = true;
+            this.an = true;
             this.i = 0;
             this.k = 0;
-            this.an = false;
+            this.aq = false;
             this.a = new DateTimeValueFormatter();
             this.d = 0;
-            this.bb = null;
+            this.bi = null;
             this.aj = false;
-            this.a6 = 0;
+            this.bd = 0;
+            this.ak = false;
+            this.am = false;
+            this.as = false;
+            this.al = false;
             this.gotFocus = null;
             this.lostFocus = null;
             this.keyDown = null;
@@ -21991,15 +22034,15 @@ let DatePicker = /*@__PURE__*/ (() => {
             let a = new DatePickerView();
             a.b = this;
             this.h = a;
-            this.h.ah();
-            this.ce();
+            this.h.am();
+            this.co();
         }
-        cz(a, b) {
+        db(a, b) {
             if (this.u != null) {
                 this.ah = true;
-                this.cg();
+                this.cq();
             }
-            this.c8();
+            this.dl();
             if (this.selectedValueChanged != null) {
                 this.selectedValueChanged(this, ((() => {
                     let $ret = new SelectedValueChangedEventArgs();
@@ -22009,23 +22052,23 @@ let DatePicker = /*@__PURE__*/ (() => {
                 })()));
             }
             if (this.ai) {
-                this.c3();
+                this.df();
             }
         }
         notifySizeChanged() {
-            this.h.af();
+            this.h.ai();
         }
         destroy() {
             if (this.c != null) {
                 let a = this.c;
-                a.selectedValueChanged = delegateRemove(a.selectedValueChanged, runOn(this, this.cd));
+                a.selectedValueChanged = delegateRemove(a.selectedValueChanged, runOn(this, this.cn));
                 let b = this.c;
-                b.close = delegateRemove(b.close, runOn(this, this.cc));
+                b.close = delegateRemove(b.close, runOn(this, this.cm));
             }
             this.provideContainer(null);
         }
         provideContainer(a) {
-            this.h.ag(a);
+            this.h.ak(a);
         }
         setName(a) {
             this.o.e = a;
@@ -22038,44 +22081,44 @@ let DatePicker = /*@__PURE__*/ (() => {
             return this.ae;
         }
         get value() {
-            return this.a0;
+            return this.a7;
         }
         set value(a) {
-            let b = this.a0;
-            this.ay = b;
-            this.a0 = a;
-            if (+b != +(this.a0)) {
-                this.cy("Value", b, this.a0);
+            let b = this.a7;
+            this.a5 = b;
+            this.a7 = a;
+            if (+b != +(this.a7)) {
+                this.da("Value", b, this.a7);
             }
         }
-        get a3() {
-            return this.az;
+        get ba() {
+            return this.a6;
         }
-        set a3(a) {
-            let b = this.az;
-            this.az = a;
-            if (+b != +(this.az)) {
-                this.cy("Today", b, this.az);
+        set ba(a) {
+            let b = this.a6;
+            this.a6 = a;
+            if (+b != +(this.a6)) {
+                this.da("Today", b, this.a6);
             }
         }
-        get bv() {
-            return this.bc;
+        get b3() {
+            return this.bj;
         }
-        set bv(a) {
-            let b = this.bc;
-            this.bc = a;
-            if (b != this.bc) {
-                this.cy("Label", b, this.bc);
+        set b3(a) {
+            let b = this.bj;
+            this.bj = a;
+            if (b != this.bj) {
+                this.da("Label", b, this.bj);
             }
         }
-        get dh() {
-            return this.de;
+        get dv() {
+            return this.ds;
         }
-        set dh(a) {
-            let b = this.de;
-            this.de = a;
-            if (b != this.de) {
-                this.cy("LabelTextColor", b, a);
+        set dv(a) {
+            let b = this.ds;
+            this.ds = a;
+            if (b != this.ds) {
+                this.da("LabelTextColor", b, a);
             }
         }
         get ac() {
@@ -22085,37 +22128,37 @@ let DatePicker = /*@__PURE__*/ (() => {
             let b = this.z;
             this.z = a;
             if (b != this.z) {
-                this.cy("LabelTextStyle", b, this.z);
+                this.da("LabelTextStyle", b, this.z);
             }
         }
-        get b2() {
-            return this.be;
+        get cb() {
+            return this.bl;
         }
-        set b2(a) {
-            let b = this.be;
-            this.be = a;
-            if (b != this.be) {
-                this.cy("Placeholder", b, this.be);
+        set cb(a) {
+            let b = this.bl;
+            this.bl = a;
+            if (b != this.bl) {
+                this.da("Placeholder", b, this.bl);
             }
         }
-        get a2() {
-            return this.ax;
+        get a9() {
+            return this.a4;
         }
-        set a2(a) {
-            let b = this.ax;
-            this.ax = a;
-            if (+b != +(this.ax)) {
-                this.cy("MinDate", b, this.ax);
+        set a9(a) {
+            let b = this.a4;
+            this.a4 = a;
+            if (+b != +(this.a4)) {
+                this.da("MinDate", b, this.a4);
             }
         }
-        get a1() {
-            return this.aw;
+        get a8() {
+            return this.a3;
         }
-        set a1(a) {
-            let b = this.aw;
-            this.aw = a;
-            if (+b != +(this.aw)) {
-                this.cy("MaxDate", b, this.aw);
+        set a8(a) {
+            let b = this.a3;
+            this.a3 = a;
+            if (+b != +(this.a3)) {
+                this.da("MaxDate", b, this.a3);
             }
         }
         get y() {
@@ -22125,7 +22168,7 @@ let DatePicker = /*@__PURE__*/ (() => {
             let b = this.x;
             this.x = a;
             if (b != this.x) {
-                this.cy("Density", enumGetBox(ControlDisplayDensity_$type, b), enumGetBox(ControlDisplayDensity_$type, this.x));
+                this.da("Density", enumGetBox(ControlDisplayDensity_$type, b), enumGetBox(ControlDisplayDensity_$type, this.x));
             }
         }
         get w() {
@@ -22135,7 +22178,7 @@ let DatePicker = /*@__PURE__*/ (() => {
             let b = this.v;
             this.v = a;
             if (b != this.v) {
-                this.cy("BaseTheme", enumGetBox(BaseControlTheme_$type, b), enumGetBox(BaseControlTheme_$type, this.v));
+                this.da("BaseTheme", enumGetBox(BaseControlTheme_$type, b), enumGetBox(BaseControlTheme_$type, this.v));
             }
         }
         get ad() {
@@ -22145,67 +22188,67 @@ let DatePicker = /*@__PURE__*/ (() => {
             let b = this.aa;
             this.aa = a;
             if (b != this.aa) {
-                this.cy("TextStyle", b, this.aa);
+                this.da("TextStyle", b, this.aa);
             }
         }
-        get di() {
-            return this.df;
+        get dw() {
+            return this.dt;
         }
-        set di(a) {
-            let b = this.df;
-            this.df = a;
-            if (b != this.df) {
-                this.cy("TextColor", b, this.df);
+        set dw(a) {
+            let b = this.dt;
+            this.dt = a;
+            if (b != this.dt) {
+                this.da("TextColor", b, this.dt);
             }
         }
-        get dg() {
-            return this.dd;
+        get du() {
+            return this.dr;
         }
-        set dg(a) {
-            let b = this.dd;
-            this.dd = a;
-            if (b != this.dd) {
-                this.cy("IconColor", b, this.dd);
+        set du(a) {
+            let b = this.dr;
+            this.dr = a;
+            if (b != this.dr) {
+                this.da("IconColor", b, this.dr);
             }
         }
-        get at() {
-            return this.al;
+        get az() {
+            return this.ao;
         }
-        set at(a) {
-            let b = this.al;
-            this.al = a;
-            if (b != this.al) {
-                this.cy("ShowClearButton", b, this.al);
+        set az(a) {
+            let b = this.ao;
+            this.ao = a;
+            if (b != this.ao) {
+                this.da("ShowClearButton", b, this.ao);
             }
         }
-        get au() {
-            return this.am;
+        get a0() {
+            return this.ap;
         }
-        set au(a) {
-            let b = this.am;
-            this.am = a;
-            if (b != this.am) {
-                this.cy("ShowTodayButton", b, this.am);
+        set a0(a) {
+            let b = this.ap;
+            this.ap = a;
+            if (b != this.ap) {
+                this.da("ShowTodayButton", b, this.ap);
             }
         }
-        get aq() {
+        get au() {
             return this.ag;
         }
-        set aq(a) {
+        set au(a) {
             let b = this.ag;
             this.ag = a;
             if (b != this.ag) {
-                this.cy("AllowTextInput", b, this.ag);
+                this.da("AllowTextInput", b, this.ag);
             }
         }
-        get as() {
-            return this.ak;
+        get ay() {
+            return this.an;
         }
-        set as(a) {
-            let b = this.ak;
-            this.ak = a;
-            if (b != this.ak) {
-                this.cy("OpenOnFocus", b, this.ak);
+        set ay(a) {
+            let b = this.an;
+            this.an = a;
+            if (b != this.an) {
+                this.da("OpenOnFocus", b, this.an);
             }
         }
         get j() {
@@ -22215,7 +22258,7 @@ let DatePicker = /*@__PURE__*/ (() => {
             let b = this.i;
             this.i = a;
             if (b != this.i) {
-                this.cy("FirstDayOfWeek", enumGetBox(DayOfWeek_$type, b), enumGetBox(DayOfWeek_$type, this.i));
+                this.da("FirstDayOfWeek", enumGetBox(DayOfWeek_$type, b), enumGetBox(DayOfWeek_$type, this.i));
             }
         }
         get l() {
@@ -22225,17 +22268,17 @@ let DatePicker = /*@__PURE__*/ (() => {
             let b = this.k;
             this.k = a;
             if (b != this.k) {
-                this.cy("FirstWeekOfYear", enumGetBox(FirstWeek_$type, b), enumGetBox(FirstWeek_$type, this.k));
+                this.da("FirstWeekOfYear", enumGetBox(FirstWeek_$type, b), enumGetBox(FirstWeek_$type, this.k));
             }
         }
-        get av() {
-            return this.an;
+        get a1() {
+            return this.aq;
         }
-        set av(a) {
-            let b = this.an;
-            this.an = a;
-            if (b != this.an) {
-                this.cy("ShowWeekNumbers", b, this.an);
+        set a1(a) {
+            let b = this.aq;
+            this.aq = a;
+            if (b != this.aq) {
+                this.da("ShowWeekNumbers", b, this.aq);
             }
         }
         get e() {
@@ -22245,71 +22288,101 @@ let DatePicker = /*@__PURE__*/ (() => {
             let b = this.d;
             this.d = a;
             if (this.d != b) {
-                this.cy("DateFormat", enumGetBox(DateFormats_$type, b), enumGetBox(DateFormats_$type, this.d));
+                this.da("DateFormat", enumGetBox(DateFormats_$type, b), enumGetBox(DateFormats_$type, this.d));
             }
         }
-        get br() {
-            return this.bb;
+        get by() {
+            return this.bi;
         }
-        set br(a) {
-            let b = this.bb;
-            this.bb = a;
-            if (b != this.bb) {
-                this.cy("FormatString", b, this.bb);
+        set by(a) {
+            let b = this.bi;
+            this.bi = a;
+            if (b != this.bi) {
+                this.da("FormatString", b, this.bi);
             }
         }
-        get ar() {
+        get av() {
             return this.aj;
         }
-        set ar(a) {
+        set av(a) {
             let b = this.aj;
             this.aj = a;
             if (b != this.aj) {
-                this.cy("IsDisabled", b, this.aj);
+                this.da("IsDisabled", b, this.aj);
             }
         }
-        get a7() {
-            return this.a6;
+        get be() {
+            return this.bd;
         }
-        set a7(a) {
-            let b = this.a6;
-            this.a6 = a;
-            if (b != this.a6) {
-                this.cy("TabIndex", b, this.a6);
+        set be(a) {
+            let b = this.bd;
+            this.bd = a;
+            if (b != this.bd) {
+                this.da("TabIndex", b, this.bd);
+            }
+        }
+        get aw() {
+            return this.ak;
+        }
+        set aw(a) {
+            let b = this.ak;
+            this.ak = a;
+            if (b != this.ak) {
+                this.da("IsFixed", b, this.ak);
             }
         }
-        cy(a, b, c) {
+        get ax() {
+            return this.am;
+        }
+        set ax(a) {
+            let b = this.am;
+            this.am = a;
+            if (b != this.am) {
+                this.da("OpenAsChild", b, this.am);
+            }
+        }
+        get a2() {
+            return this.as;
+        }
+        set a2(a) {
+            let b = this.as;
+            this.as = a;
+            if (b != this.as) {
+                this.da("UseTopLayer", b, this.as);
+            }
+        }
+        da(a, b, c) {
             if (this.propertyChanged != null) {
                 this.propertyChanged(this, new PropertyChangedEventArgs(a));
             }
-            this.c1(a, b, c);
+            this.dd(a, b, c);
         }
-        c1(a, b, c) {
+        dd(a, b, c) {
             switch (a) {
                 case "Density":
-                    this.c4();
+                    this.dg();
                     break;
                 case "BaseTheme":
-                    this.c6();
+                    this.di();
                     break;
                 case "Value":
                     if (+(this.value) != +(dateMinValue())) {
-                        if (dateGetDate(this.value) < dateGetDate(this.a2) || dateGetDate(this.value) > dateGetDate(this.a1)) {
+                        if (dateGetDate(this.value) < dateGetDate(this.a9) || dateGetDate(this.value) > dateGetDate(this.a8)) {
                             this.ai = true;
-                            this.value = this.ay;
+                            this.value = this.a5;
                             this.ai = false;
                         }
                     }
-                    this.cz(this.ay, this.value);
-                    this.ay = this.value;
+                    this.db(this.a5, this.value);
+                    this.a5 = this.value;
                     if (this.c != null) {
                         this.c.value = this.value;
                     }
                     break;
                 case "Label":
                     if (this.r != null) {
-                        this.r.text = this.bv;
-                        if (this.bv != null && this.bv != "") {
+                        this.r.text = this.b3;
+                        if (this.b3 != null && this.b3 != "") {
                             if (!this.q.inputs.contains(this.r)) {
                                 this.q.inputs.insert(0, this.r);
                             }
@@ -22323,25 +22396,25 @@ let DatePicker = /*@__PURE__*/ (() => {
                     break;
                 case "Placeholder":
                     if (this.o != null) {
-                        this.o.cg = this.b2;
-                        this.h.as(this.b2);
+                        this.o.cg = this.cb;
+                        this.h.ay(this.cb);
                     }
                     break;
                 case "Today":
                     if (this.c != null) {
-                        this.c.av = this.a3;
+                        this.c.av = this.ba;
                     }
                     break;
                 case "MaxDate":
                     if (this.c != null) {
-                        let d = Base.compareSimple(this.a2, this.a1);
+                        let d = Base.compareSimple(this.a9, this.a8);
                         if (d >= 0) {
-                            this.a1 = dateMaxValue();
+                            this.a8 = dateMaxValue();
                         }
-                        this.c.at = this.aw;
+                        this.c.at = this.a3;
                     }
-                    if (dateGetDate(this.value) > dateGetDate(this.a1)) {
-                        this.ay = dateMinValue();
+                    if (dateGetDate(this.value) > dateGetDate(this.a8)) {
+                        this.a5 = dateMinValue();
                         this.ai = true;
                         this.value = dateMinValue();
                         this.ai = false;
@@ -22349,27 +22422,27 @@ let DatePicker = /*@__PURE__*/ (() => {
                     break;
                 case "MinDate":
                     if (this.c != null) {
-                        this.c.au = this.ax;
-                        let e = Base.compareSimple(this.a2, this.a1);
+                        this.c.au = this.a4;
+                        let e = Base.compareSimple(this.a9, this.a8);
                         if (e >= 0) {
-                            this.ay = dateMaxValue();
-                            this.c.at = this.a1;
+                            this.a5 = dateMaxValue();
+                            this.c.at = this.a8;
                         }
                     }
-                    if (dateGetDate(this.value) < dateGetDate(this.a2)) {
-                        this.ay = dateMinValue();
+                    if (dateGetDate(this.value) < dateGetDate(this.a9)) {
+                        this.a5 = dateMinValue();
                         this.ai = true;
                         this.value = dateMinValue();
                         this.ai = false;
                     }
                     break;
                 case "TextStyle":
-                    this.c9();
+                    this.dm();
                     break;
                 case "ShowClearButton":
                     if (this.o != null) {
                         if (this.o.cq != "") {
-                            this.h.ap();
+                            this.h.av();
                         }
                     }
                     break;
@@ -22377,27 +22450,27 @@ let DatePicker = /*@__PURE__*/ (() => {
                 case "LabelTextStyle":
                 case "TextColor":
                 case "IconColor":
-                    this.da();
+                    this.dn();
                     break;
                 case "ShowTodayButton":
                     if (this.c != null) {
-                        this.c.ae = this.au;
-                        this.h.y();
+                        this.c.ae = this.a0;
+                        this.h.z();
                     }
                     break;
                 case "AllowTextInput":
                     if (this.o != null) {
-                        this.o.disabled = !this.aq;
+                        this.o.disabled = !this.au;
                     }
                     break;
                 case "OpenOnFocus": break;
                 case "DateFormat":
                     this.a.k(this.e);
-                    this.c8();
+                    this.dl();
                     break;
                 case "FormatString":
-                    this.ce();
-                    this.c8();
+                    this.co();
+                    this.dl();
                     break;
                 case "FirstDayOfWeek":
                     if (this.c != null) {
@@ -22406,8 +22479,8 @@ let DatePicker = /*@__PURE__*/ (() => {
                     break;
                 case "ShowWeekNumbers":
                     if (this.c != null) {
-                        this.c.af = this.av;
-                        this.h.y();
+                        this.c.af = this.a1;
+                        this.h.z();
                     }
                     break;
                 case "FirstWeekOfYear":
@@ -22418,21 +22491,31 @@ let DatePicker = /*@__PURE__*/ (() => {
                 case "IsDisabled":
                     {
                         if (this.q != null) {
-                            this.q.disabled = this.ar;
+                            this.q.disabled = this.av;
                         }
                         if (this.o != null) {
-                            this.o.disabled = this.ar;
+                            this.o.disabled = this.av;
                         }
                     }
                     break;
                 case "TabIndex":
-                    this.h.ar();
+                    this.h.ax();
+                    break;
+                case "IsFixed":
+                    if (this.u != null) {
+                        this.u.aq = this.aw;
+                    }
+                    break;
+                case "UseTopLayer":
+                    if (this.u != null) {
+                        this.u.ax = this.a2;
+                    }
                     break;
             }
         }
-        ce() {
+        co() {
             let a = '/';
-            let b = this.br != null ? this.br.toLowerCase() : this.a.j();
+            let b = this.by != null ? this.by.toLowerCase() : this.a.j();
             if (stringContains(b, "/")) {
                 a = '/';
             }
@@ -22448,7 +22531,7 @@ let DatePicker = /*@__PURE__*/ (() => {
             else if (stringContains(b, ",")) {
                 a = ',';
             }
-            this.bf = a.toString();
+            this.bm = a.toString();
             let c = b.split(a);
             if (c.length == 3) {
                 let d = "";
@@ -22457,19 +22540,19 @@ let DatePicker = /*@__PURE__*/ (() => {
                         d += "d";
                         switch (c[e]) {
                             case "d":
-                                this.a9 = c[e];
+                                this.bg = c[e];
                                 break;
                             case "dd":
-                                this.a9 = c[e];
+                                this.bg = c[e];
                                 break;
                             case "ddd":
-                                this.a9 = c[e];
+                                this.bg = c[e];
                                 break;
                             case "dddd":
-                                this.a9 = c[e];
+                                this.bg = c[e];
                                 break;
                             default:
-                                this.a9 = "dd";
+                                this.bg = "dd";
                                 break;
                         }
                     }
@@ -22477,125 +22560,125 @@ let DatePicker = /*@__PURE__*/ (() => {
                         d += "m";
                         switch (c[e]) {
                             case "m":
-                                this.bd = c[e];
+                                this.bk = c[e];
                                 break;
                             case "mm":
-                                this.bd = c[e];
+                                this.bk = c[e];
                                 break;
                             case "mmm":
-                                this.bd = c[e];
+                                this.bk = c[e];
                                 break;
                             case "mmmm":
-                                this.bd = c[e];
+                                this.bk = c[e];
                                 break;
                             default:
-                                this.bd = "mm";
+                                this.bk = "mm";
                                 break;
                         }
-                        this.bd = c[e];
+                        this.bk = c[e];
                     }
                     else if (stringContains(c[e], "y")) {
                         d += "y";
                         switch (c[e]) {
                             case "yy":
-                                this.bg = c[e];
+                                this.bn = c[e];
                                 break;
                             case "yyyy":
-                                this.bg = c[e];
+                                this.bn = c[e];
                                 break;
                             default:
-                                this.bg = "yyyy";
+                                this.bn = "yyyy";
                                 break;
                         }
                     }
                 }
                 if (d == "dmy" || d == "mdy" || d == "ymd") {
-                    this.ba = d;
+                    this.bh = d;
                 }
                 else {
-                    this.ba = "mdy";
+                    this.bh = "mdy";
                 }
             }
         }
-        da() {
+        dn() {
             if (this.o != null) {
-                this.o.d8 = this.di;
+                this.o.d8 = this.dw;
             }
             if (this.m != null) {
-                this.m.fill = this.dg;
+                this.m.fill = this.du;
             }
             if (this.n != null) {
-                this.n.fill = this.dg;
+                this.n.fill = this.du;
             }
             if (this.r != null) {
-                this.r.df = this.dh;
+                this.r.df = this.dv;
                 this.r.y = this.ac;
             }
         }
-        c7() {
+        dk() {
             if (this.q != null) {
             }
         }
-        c9() {
+        dm() {
             if (this.aa != null) {
                 this.o.af = this.aa;
             }
         }
-        ch() {
+        cr() {
             this.q = new XInputGroup();
-            this.h.ak(this.q);
+            this.h.aq(this.q);
             this.q.d = 0;
             this.q.p = this.w;
             this.q.t = this.y;
             this.r = new XLabel();
-            this.h.am(this.r);
-            this.r.df = this.dh;
+            this.h.as(this.r);
+            this.r.df = this.dv;
             this.r.y = this.ac;
-            this.q.appendContentChild(this.h.u());
-            if (this.bv != null && this.bv != "") {
-                this.r.text = this.bv;
+            this.q.appendContentChild(this.h.v());
+            if (this.b3 != null && this.b3 != "") {
+                this.r.text = this.b3;
                 this.q.inputs.add(this.r);
             }
             this.o = new XInput();
-            this.h.al(this.o);
+            this.h.ar(this.o);
             this.o.b8 = "text";
             if (this.aa != null) {
                 this.o.af = this.aa;
             }
-            this.o.disabled = !this.aq;
-            this.o.d8 = this.di;
-            this.q.appendContentChild(this.h.t());
+            this.o.disabled = !this.au;
+            this.o.d8 = this.dw;
+            this.q.appendContentChild(this.h.u());
             this.q.inputs.add(this.o);
-            this.o.cg = this.b2;
-            this.h.as(this.b2);
+            this.o.cg = this.cb;
+            this.h.ay(this.cb);
             let a = this.o;
-            a.change = delegateCombine(a.change, runOn(this, this.co));
+            a.change = delegateCombine(a.change, runOn(this, this.cy));
             let b = this.o;
-            b.changing = delegateCombine(b.changing, runOn(this, this.cp));
+            b.changing = delegateCombine(b.changing, runOn(this, this.cz));
             let c = this.o;
-            c.keyDown = delegateCombine(c.keyDown, runOn(this, this.cq));
+            c.keyDown = delegateCombine(c.keyDown, runOn(this, this.c0));
             let d = new XSuffix();
-            this.h.ao(d, this.h.q());
+            this.h.au(d, this.h.r());
             this.m = new XIcon();
-            this.h.aj(this.m, this.h.p());
-            this.m.svgPath = DatePicker.bk;
-            this.m.fill = this.dg;
-            d.appendContentChild(this.h.p());
-            this.q.appendContentChild(this.h.q());
+            this.h.ap(this.m, this.h.q());
+            this.m.svgPath = DatePicker.br;
+            this.m.fill = this.du;
+            d.appendContentChild(this.h.q());
+            this.q.appendContentChild(this.h.r());
             this.q.inputs.add(d);
-            this.c8();
+            this.dl();
             let e = new XSuffix();
-            this.h.ao(e, this.h.s());
+            this.h.au(e, this.h.t());
             this.n = new XIcon();
-            this.h.aj(this.n, this.h.r());
-            this.n.svgPath = DatePicker.bj;
-            this.n.fill = this.dg;
-            e.appendContentChild(this.h.r());
-            this.q.appendContentChild(this.h.s());
+            this.h.ap(this.n, this.h.s());
+            this.n.svgPath = DatePicker.bq;
+            this.n.fill = this.du;
+            e.appendContentChild(this.h.s());
+            this.q.appendContentChild(this.h.t());
             this.q.inputs.add(e);
         }
-        cq(a, b) {
-            this.cw(b);
+        c0(a, b) {
+            this.c6(b);
             if (b.defaultPrevented) {
                 return;
             }
@@ -22603,51 +22686,51 @@ let DatePicker = /*@__PURE__*/ (() => {
             let d = b.modifiers;
             switch (c) {
                 case 9:
-                    this.ao = true;
-                    if (!this.ap) {
-                        this.dc(this.o.cq);
+                    this.ar = true;
+                    if (!this.at) {
+                        this.dq(this.o.cq);
                     }
                     this.ah = true;
-                    this.cg();
-                    this.ao = false;
+                    this.cq();
+                    this.ar = false;
                     break;
                 case 13:
-                    this.ao = true;
-                    if (!this.ap) {
-                        this.dc(this.o.cq);
+                    this.ar = true;
+                    if (!this.at) {
+                        this.dq(this.o.cq);
                     }
                     this.ah = true;
-                    this.cg();
-                    this.ao = false;
+                    this.cq();
+                    this.ar = false;
                     break;
                 case 40:
                     if (d == 1) {
-                        this.c0();
-                        this.cl();
+                        this.dc();
+                        this.cv();
                     }
                     break;
                 case 38:
                     if (d == 1) {
-                        this.cg();
+                        this.cq();
                     }
                     break;
             }
         }
-        cp(a, b) {
-            this.cs(b);
+        cz(a, b) {
+            this.c2(b);
             if (b.value.length > 0) {
-                this.h.ap();
+                this.h.av();
             }
             else {
-                this.h.ae();
+                this.h.ah();
             }
         }
-        co(a, b) {
-            this.ap = true;
-            this.dc(b.value);
-            this.ap = false;
+        cy(a, b) {
+            this.at = true;
+            this.dq(b.value);
+            this.at = false;
         }
-        dc(a) {
+        dq(a) {
             let b = ['/', '-', ' ', '.', ','];
             let c = stringSplit(a, b, 1);
             let d = 0;
@@ -22658,17 +22741,17 @@ let DatePicker = /*@__PURE__*/ (() => {
                 if (c[0].length == 0 || c[1].length == 0 || c[2].length == 0) {
                     g = false;
                 }
-                if (this.ba == "dmy") {
+                if (this.bh == "dmy") {
                     d = parseInt(c[0]);
                     e = parseInt(c[1]);
                     f = parseInt(c[2]);
                 }
-                else if (this.ba == "mdy") {
+                else if (this.bh == "mdy") {
                     e = parseInt(c[0]);
                     d = parseInt(c[1]);
                     f = parseInt(c[2]);
                 }
-                else if (this.ba == "ymd") {
+                else if (this.bh == "ymd") {
                     f = parseInt(c[0]);
                     e = parseInt(c[1]);
                     d = parseInt(c[2]);
@@ -22681,13 +22764,13 @@ let DatePicker = /*@__PURE__*/ (() => {
                 }
                 if (isNaN_(e)) {
                     let h = "";
-                    if (this.ba == "dmy") {
+                    if (this.bh == "dmy") {
                         h = c[1].toLowerCase();
                     }
-                    else if (this.ba == "mdy") {
+                    else if (this.bh == "mdy") {
                         h = c[0].toLowerCase();
                     }
-                    else if (this.ba == "ymd") {
+                    else if (this.bh == "ymd") {
                         h = c[1].toLowerCase();
                     }
                     let i = !stringIsNullOrWhiteSpace(this.af.b1("January_Full")) ? this.af.b1("January_Full").toLowerCase() : "january";
@@ -22763,45 +22846,45 @@ let DatePicker = /*@__PURE__*/ (() => {
             }
             if (g) {
                 let ag = dateFromValues(f, e, d, 0, 0, 0, 0);
-                let ah = Base.compareSimple(ag, this.a2);
-                let ai = Base.compareSimple(ag, this.a1);
+                let ah = Base.compareSimple(ag, this.a9);
+                let ai = Base.compareSimple(ag, this.a8);
                 if (ah < 0 || ai > 0) {
-                    this.c8();
+                    this.dl();
                 }
                 else {
-                    this.db(ag);
-                    this.h.ap();
+                    this.dp(ag);
+                    this.h.av();
                 }
             }
             else {
                 if (stringIsNullOrEmpty(a)) {
-                    this.cf();
+                    this.cp();
                 }
                 else {
-                    this.c8();
+                    this.dl();
                 }
             }
         }
-        db(a) {
+        dp(a) {
             let b = this.value;
             this.value = a;
         }
-        c8() {
+        dl() {
             if (this.o != null) {
-                if (+(this.a0) != +(dateMinValue())) {
+                if (+(this.a7) != +(dateMinValue())) {
                     let a = "";
-                    if (this.br == null) {
+                    if (this.by == null) {
                         a = this.a.i(this.value);
                     }
                     else {
                         let b = this.value.getDate().toString();
                         let c = b;
-                        if (this.a9 == "dd") {
+                        if (this.bg == "dd") {
                             if (this.value.getDate() < 10) {
                                 b = "0" + b;
                             }
                         }
-                        else if (this.a9 == "ddd") {
+                        else if (this.bg == "ddd") {
                             switch (this.value.getDay()) {
                                 case 0:
                                     b = !stringIsNullOrWhiteSpace(this.af.b1("Sunday_Short")) ? this.af.b1("Sunday_Short") : "Sun";
@@ -22826,7 +22909,7 @@ let DatePicker = /*@__PURE__*/ (() => {
                                     break;
                             }
                         }
-                        else if (this.a9 == "dddd") {
+                        else if (this.bg == "dddd") {
                             switch (this.value.getDay()) {
                                 case 0:
                                     b = !stringIsNullOrWhiteSpace(this.af.b1("Sunday_Full")) ? this.af.b1("Sunday_Full") : "Sunday";
@@ -22852,12 +22935,12 @@ let DatePicker = /*@__PURE__*/ (() => {
                             }
                         }
                         let d = dateGetMonth(this.value).toString();
-                        if (this.bd == "mm") {
+                        if (this.bk == "mm") {
                             if (dateGetMonth(this.value) < 10) {
                                 d = "0" + d;
                             }
                         }
-                        else if (this.bd == "mmm") {
+                        else if (this.bk == "mmm") {
                             switch (dateGetMonth(this.value)) {
                                 case 1:
                                     d = !stringIsNullOrWhiteSpace(this.af.b1("January_Short")) ? this.af.b1("January_Short") : "Jan";
@@ -22897,7 +22980,7 @@ let DatePicker = /*@__PURE__*/ (() => {
                                     break;
                             }
                         }
-                        else if (this.bd == "mmmm") {
+                        else if (this.bk == "mmmm") {
                             switch (dateGetMonth(this.value)) {
                                 case 1:
                                     d = !stringIsNullOrWhiteSpace(this.af.b1("January_Full")) ? this.af.b1("January_Full") : "January";
@@ -22938,45 +23021,45 @@ let DatePicker = /*@__PURE__*/ (() => {
                             }
                         }
                         let e = this.value.getFullYear().toString();
-                        if (this.bg == "yy") {
+                        if (this.bn == "yy") {
                             e = e.substr(2);
                         }
-                        if (this.ba == "dmy") {
-                            if (this.a9 == "ddd" || this.a9 == "dddd") {
-                                a = b + this.bf + d + " " + c + this.bf + e;
+                        if (this.bh == "dmy") {
+                            if (this.bg == "ddd" || this.bg == "dddd") {
+                                a = b + this.bm + d + " " + c + this.bm + e;
                             }
                             else {
-                                a = b + this.bf + d + this.bf + e;
+                                a = b + this.bm + d + this.bm + e;
                             }
                         }
-                        else if (this.ba == "mdy") {
-                            if (this.a9 == "ddd" || this.a9 == "dddd") {
-                                a = d + " " + c + this.bf + b + this.bf + e;
+                        else if (this.bh == "mdy") {
+                            if (this.bg == "ddd" || this.bg == "dddd") {
+                                a = d + " " + c + this.bm + b + this.bm + e;
                             }
                             else {
-                                a = d + this.bf + b + this.bf + e;
+                                a = d + this.bm + b + this.bm + e;
                             }
                         }
-                        else if (this.ba == "ymd") {
-                            if (this.a9 == "ddd" || this.a9 == "dddd") {
-                                a = e + this.bf + d + " " + c + this.bf + b;
+                        else if (this.bh == "ymd") {
+                            if (this.bg == "ddd" || this.bg == "dddd") {
+                                a = e + this.bm + d + " " + c + this.bm + b;
                             }
                             else {
-                                a = e + this.bf + d + this.bf + b;
+                                a = e + this.bm + d + this.bm + b;
                             }
                         }
                     }
                     this.o.cq = a;
-                    this.h.ap();
+                    this.h.av();
                 }
                 else {
                     this.o.cq = "";
-                    this.h.ae();
+                    this.h.ah();
                 }
             }
         }
-        cf() {
-            if (this.ar == true) {
+        cp() {
+            if (this.av == true) {
                 return;
             }
             if (this.o != null) {
@@ -22984,109 +23067,133 @@ let DatePicker = /*@__PURE__*/ (() => {
             }
             this.value = dateMinValue();
             this.c.ch();
+            this.al = false;
         }
-        ci() {
+        c8() {
+            this.al = true;
+        }
+        c9() {
+            this.al = false;
+        }
+        cs() {
             this.u = new Popup();
-            this.h.an(this.u);
+            this.u.aq = this.aw;
+            this.u.ax = this.a2;
+            this.u.cw = BrushUtil.g(255, 255, 255, 255);
+            this.u.a8 = 150;
+            this.h.at(this.u);
             this.c = new XCalendar();
-            this.h.ai(this.c);
-            if (+(this.a2) != +(dateMinValue())) {
-                this.c.au = this.a2;
+            this.h.ao(this.c);
+            if (+(this.a9) != +(dateMinValue())) {
+                this.c.au = this.a9;
             }
-            if (+(this.a1) != +(dateMaxValue())) {
-                this.c.at = this.a1;
+            if (+(this.a8) != +(dateMaxValue())) {
+                this.c.at = this.a8;
             }
-            if (+(this.a3) != +(dateMinValue())) {
-                this.c.av = this.a3;
+            if (+(this.ba) != +(dateMinValue())) {
+                this.c.av = this.ba;
             }
-            this.c.ae = this.au;
+            this.c.ae = this.a0;
             this.c.l = this.j;
-            this.c.af = this.av;
+            this.c.af = this.a1;
             this.c.o = this.l;
             let a = this.c;
-            a.selectedValueChanged = delegateCombine(a.selectedValueChanged, runOn(this, this.cd));
+            a.selectedValueChanged = delegateCombine(a.selectedValueChanged, runOn(this, this.cn));
             let b = this.c;
-            b.close = delegateCombine(b.close, runOn(this, this.cc));
-            this.u.appendPopupContent(this.h.o());
+            b.close = delegateCombine(b.close, runOn(this, this.cm));
+            this.u.appendPopupContent(this.h.p());
         }
-        cd(a, b) {
+        cn(a, b) {
             this.ai = true;
             this.value = b.newValue;
             this.ai = false;
         }
-        cc(a) {
-            if (this.u.ao) {
+        cm(a) {
+            if (this.u.aw) {
                 this.ah = true;
-                this.cg();
+                this.cq();
             }
         }
-        cn() {
+        cx() {
             if (this.ah == false) {
-                if (this.u.ao) {
-                    this.cg();
+                if (this.u.aw) {
+                    this.cq();
                 }
                 else {
-                    this.c0();
+                    this.dc();
                 }
             }
             else {
                 this.ah = false;
             }
         }
-        c0() {
-            if (this.ar) {
+        dc() {
+            if (this.av) {
                 return;
             }
             if (this.u != null) {
-                let a = this.h.at();
-                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.au == true) {
-                    d = 270;
-                }
-                let e = a.bottom + d;
-                if (c < e) {
-                    let f = a.top - d;
-                    if (f < 0) {
-                        this.u.showRelativeToExclusionRect(b, 1, 0);
+                let a = this.h.az(false);
+                let b = this.h.a()[1];
+                let c = 240;
+                if (this.a0 == true) {
+                    c = 270;
+                }
+                let d = a.bottom + c;
+                if (b < d) {
+                    let e = a.top - c;
+                    if (e < 0) {
+                        this.dj(1, 0);
                     }
                     else {
-                        this.u.showRelativeToExclusionRect(b, 2, 0);
+                        this.dj(2, 0);
                     }
                 }
                 else {
-                    this.u.showRelativeToExclusionRect(b, 1, 0);
+                    this.dj(1, 0);
                 }
-                this.h.aq(true);
+                this.h.an();
+                this.h.aw(true);
             }
         }
-        cg() {
+        dj(a, b) {
+            if (this.ax) {
+                this.u.cn(this.h.d.rootWrapper.getNativeElement(), a, b);
+            }
+            else {
+                let c = this.h.az(true);
+                this.u.showRelativeToExclusionRect(c, a, b);
+            }
+        }
+        cq() {
             if (this.u != null) {
-                window.setTimeout(() => this.u.bj(), 0);
+                window.setTimeout(() => this.u.b3(), 0);
             }
             if (this.c != null) {
                 this.c.cy();
             }
-            this.h.aq(false);
+            this.h.aw(false);
             this.ah = false;
+            this.h.aj();
         }
         focus(a = false) {
             if (this.o != null) {
                 this.o.focus(a);
             }
-            if (!this.u.ao && this.as == true) {
+            if (!this.u.aw && this.ay == true) {
                 if (this.ah == false) {
-                    if (this.aq == false) {
-                        this.c0();
+                    if (this.al) {
+                        return;
+                    }
+                    if (this.au == false) {
+                        this.dc();
                         this.ah = true;
-                        window.setTimeout(() => this.cl(), 0);
+                        window.setTimeout(() => this.cv(), 0);
                     }
                     else {
-                        if (this.as == true && this.ao == false) {
-                            this.c0();
+                        if (this.ay == true && this.ar == false) {
+                            this.dc();
                             this.ah = true;
-                            window.setTimeout(() => this.cl(), 0);
+                            window.setTimeout(() => this.cv(), 0);
                         }
                     }
                 }
@@ -23095,33 +23202,33 @@ let DatePicker = /*@__PURE__*/ (() => {
                 }
             }
         }
-        cm() {
+        cw() {
             this.ah = false;
         }
-        c3() {
+        df() {
             if (this.o != null) {
                 this.o.dp();
             }
         }
-        cl() {
+        cv() {
             this.c.cq();
         }
-        ct() {
+        c3() {
             let a = new GotFocusEventArgs();
-            this.cv(a);
+            this.c5(a);
         }
-        cu() {
+        c4() {
             let a = new LostFocusEventArgs();
-            this.cx(a);
+            this.c7(a);
         }
-        c6() {
+        di() {
         }
-        c4() {
+        dg() {
         }
-        a8() {
+        bf() {
             return this.b();
         }
-        bo() {
+        bv() {
             let a = this.b();
             return a.g();
         }
@@ -23129,7 +23236,7 @@ let DatePicker = /*@__PURE__*/ (() => {
             let a = new DatePickerVisualModelExport();
             a.e = this.y;
             a.d = this.w;
-            a.c = this.u.ay();
+            a.c = this.u.bc();
             a.b = this.q.fe();
             a.a = this.c.bj();
             if (this.ad != null) {
@@ -23162,30 +23269,30 @@ let DatePicker = /*@__PURE__*/ (() => {
             }
             return a;
         }
-        cv(a) {
+        c5(a) {
             if (null != this.gotFocus) {
                 this.gotFocus(this, a);
             }
         }
-        cx(a) {
+        c7(a) {
             if (null != this.lostFocus) {
                 this.lostFocus(this, a);
             }
         }
-        cw(a) {
+        c6(a) {
             if (null != this.keyDown) {
                 this.keyDown(this, a);
             }
         }
-        cs(a) {
+        c2(a) {
             if (null != this.changing) {
                 this.changing(this, a);
             }
         }
     }
     DatePicker.$t = /*@__PURE__*/ markType(DatePicker, 'DatePicker', Base.$, [INotifyPropertyChanged_$type]);
-    DatePicker.bj = "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.bk = "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.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;
 })();
@@ -23213,11 +23320,17 @@ class IgcGotFocusEventArgs {
         this._implementation = this.createImplementation();
         this._implementation.externalObject = this;
         this.onImplementationCreated();
+        if (this._initializeAdapters) {
+            this._initializeAdapters();
+        }
     }
     _provideImplementation(i) {
         this._implementation = i;
         this._implementation.externalObject = this;
         this.onImplementationCreated();
+        if (this._initializeAdapters) {
+            this._initializeAdapters();
+        }
     }
 }
 
@@ -23237,11 +23350,17 @@ class IgcLostFocusEventArgs {
         this._implementation = this.createImplementation();
         this._implementation.externalObject = this;
         this.onImplementationCreated();
+        if (this._initializeAdapters) {
+            this._initializeAdapters();
+        }
     }
     _provideImplementation(i) {
         this._implementation = i;
         this._implementation.externalObject = this;
         this.onImplementationCreated();
+        if (this._initializeAdapters) {
+            this._initializeAdapters();
+        }
     }
 }
 
@@ -23440,29 +23559,29 @@ let IgcDatePickerComponent = /*@__PURE__*/ (() => {
          * Gets or Sets the property name that contains the values.
         */
         get today() {
-            return this.i.a3;
+            return this.i.ba;
         }
         set today(v) {
-            this.i.a3 = v;
+            this.i.ba = v;
         }
         /**
          * Gets or Sets the property name that contains the label.
         */
         get label() {
-            return this.i.bv;
+            return this.i.b3;
         }
         set label(v) {
-            this.i.bv = v;
+            this.i.b3 = v;
         }
         /**
          * Gets or sets the color to use for the text.
         */
         get labelTextColor() {
-            return brushToString(this.i.dh);
+            return brushToString(this.i.dv);
         }
         set labelTextColor(v) {
-            this.i.dh = stringToBrush(v);
-            this._a("labelTextColor", brushToString(this.i.dh));
+            this.i.dv = stringToBrush(v);
+            this._a("labelTextColor", brushToString(this.i.dv));
         }
         /**
          * Gets or sets the font to use for the combobox.
@@ -23483,28 +23602,28 @@ let IgcDatePickerComponent = /*@__PURE__*/ (() => {
          * Gets or Sets the property name that contains the placeholder.
         */
         get placeholder() {
-            return this.i.b2;
+            return this.i.cb;
         }
         set placeholder(v) {
-            this.i.b2 = v;
+            this.i.cb = v;
         }
         /**
          * Gets or Sets the property name that contains the MinDate.
         */
         get minDate() {
-            return this.i.a2;
+            return this.i.a9;
         }
         set minDate(v) {
-            this.i.a2 = v;
+            this.i.a9 = v;
         }
         /**
          * Gets or Sets the property name that contains the MaxDate.
         */
         get maxDate() {
-            return this.i.a1;
+            return this.i.a8;
         }
         set maxDate(v) {
-            this.i.a1 = v;
+            this.i.a8 = v;
         }
         /**
          * Gets or sets the display density to use for the date pcicker.
@@ -23545,61 +23664,61 @@ let IgcDatePickerComponent = /*@__PURE__*/ (() => {
          * Gets or Sets the text color
         */
         get textColor() {
-            return brushToString(this.i.di);
+            return brushToString(this.i.dw);
         }
         set textColor(v) {
-            this.i.di = stringToBrush(v);
-            this._a("textColor", brushToString(this.i.di));
+            this.i.dw = stringToBrush(v);
+            this._a("textColor", brushToString(this.i.dw));
         }
         /**
          * Gets or Sets the text color
         */
         get iconColor() {
-            return brushToString(this.i.dg);
+            return brushToString(this.i.du);
         }
         set iconColor(v) {
-            this.i.dg = stringToBrush(v);
-            this._a("iconColor", brushToString(this.i.dg));
+            this.i.du = stringToBrush(v);
+            this._a("iconColor", brushToString(this.i.du));
         }
         /**
          * Gets or sets the ShowClearButton property to detirmine if the clear button is shown
         */
         get showClearButton() {
-            return this.i.at;
+            return this.i.az;
         }
         set showClearButton(v) {
-            this.i.at = ensureBool(v);
-            this._a("showClearButton", this.i.at);
+            this.i.az = ensureBool(v);
+            this._a("showClearButton", this.i.az);
         }
         /**
          * Gets or sets the ShowTodayButton property to detirmine if the today button is shown
         */
         get showTodayButton() {
-            return this.i.au;
+            return this.i.a0;
         }
         set showTodayButton(v) {
-            this.i.au = ensureBool(v);
-            this._a("showTodayButton", this.i.au);
+            this.i.a0 = ensureBool(v);
+            this._a("showTodayButton", this.i.a0);
         }
         /**
          * Gets or sets the AllowTextInput property to detirmine if entering text into the input is allowed
         */
         get allowTextInput() {
-            return this.i.aq;
+            return this.i.au;
         }
         set allowTextInput(v) {
-            this.i.aq = ensureBool(v);
-            this._a("allowTextInput", this.i.aq);
+            this.i.au = ensureBool(v);
+            this._a("allowTextInput", this.i.au);
         }
         /**
          * Gets or sets the AllowTextInput property to detirmine if entering text into the input is allowed
         */
         get openOnFocus() {
-            return this.i.as;
+            return this.i.ay;
         }
         set openOnFocus(v) {
-            this.i.as = ensureBool(v);
-            this._a("openOnFocus", this.i.as);
+            this.i.ay = ensureBool(v);
+            this._a("openOnFocus", this.i.ay);
         }
         /**
          * Gets or sets the FirstDayOfWeek property to detirmine first day of the week
@@ -23625,11 +23744,11 @@ let IgcDatePickerComponent = /*@__PURE__*/ (() => {
          * Gets or sets the ShowWeekNumbers property to detirmine if the week numbers are shown
         */
         get showWeekNumbers() {
-            return this.i.av;
+            return this.i.a1;
         }
         set showWeekNumbers(v) {
-            this.i.av = ensureBool(v);
-            this._a("showWeekNumbers", this.i.av);
+            this.i.a1 = ensureBool(v);
+            this._a("showWeekNumbers", this.i.a1);
         }
         /**
          * Gets or sets the date time format to use for this column. If FormatString is specificied this value is ignored.
@@ -23645,17 +23764,47 @@ let IgcDatePickerComponent = /*@__PURE__*/ (() => {
          * Gets or sets the Format property to detirmine the format of the date in the input
         */
         get formatString() {
-            return this.i.br;
+            return this.i.by;
         }
         set formatString(v) {
-            this.i.br = v;
+            this.i.by = v;
         }
         get isDisabled() {
-            return this.i.ar;
+            return this.i.av;
         }
         set isDisabled(v) {
-            this.i.ar = ensureBool(v);
-            this._a("isDisabled", this.i.ar);
+            this.i.av = ensureBool(v);
+            this._a("isDisabled", this.i.av);
+        }
+        /**
+         * Indicates that the calendar dropdown will position itself relative to the window instead of the document.
+        */
+        get isFixed() {
+            return this.i.aw;
+        }
+        set isFixed(v) {
+            this.i.aw = ensureBool(v);
+            this._a("isFixed", this.i.aw);
+        }
+        /**
+         * Indicates that the dropdown should open as a child of the date picker.
+        */
+        get openAsChild() {
+            return this.i.ax;
+        }
+        set openAsChild(v) {
+            this.i.ax = ensureBool(v);
+            this._a("openAsChild", this.i.ax);
+        }
+        /**
+         * Indicates that the dropdown will place itself into the browser top layer.
+        */
+        get useTopLayer() {
+            return this.i.a2;
+        }
+        set useTopLayer(v) {
+            this.i.a2 = ensureBool(v);
+            this._a("useTopLayer", this.i.a2);
         }
         get hasUserValues() {
             return this._hasUserValues;
@@ -23711,14 +23860,14 @@ let IgcDatePickerComponent = /*@__PURE__*/ (() => {
             this._inStyling = false;
         }
         select() {
-            this.i.c3();
+            this.i.df();
         }
         /**
          * Exports visual information about the current state of the grid.
         
         */
         exportVisualModel() {
-            let iv = this.i.a8();
+            let iv = this.i.bf();
             return (iv);
         }
         /**
@@ -23726,7 +23875,7 @@ let IgcDatePickerComponent = /*@__PURE__*/ (() => {
         
         */
         exportSerializedVisualModel() {
-            let iv = this.i.bo();
+            let iv = this.i.bv();
             return (iv);
         }
         /**
@@ -24468,17 +24617,17 @@ let XCheckbox = /*@__PURE__*/ (() => {
             if (a == null) {
                 return;
             }
-            NativeUI.n(a, new CornerRadius(0, this.ao));
+            NativeUI.o(a, new CornerRadius(0, this.ao));
             if (!isNaN_(this.an)) {
-                NativeUI.o(a, new Thickness(0, this.an));
+                NativeUI.p(a, new Thickness(0, this.an));
             }
             if (this.checked) {
-                NativeUI.l(a, this.c8);
-                NativeUI.m(a, this.c9);
+                NativeUI.m(a, this.c8);
+                NativeUI.n(a, this.c9);
             }
             else {
-                NativeUI.l(a, this.db);
-                NativeUI.m(a, this.dc);
+                NativeUI.m(a, this.db);
+                NativeUI.n(a, this.dc);
             }
         }
         cw() {
@@ -24486,8 +24635,8 @@ let XCheckbox = /*@__PURE__*/ (() => {
             if (a == null) {
                 return;
             }
-            NativeUI.y(a, this.da);
-            NativeUI.ab(a, this.ap);
+            NativeUI.aa(a, this.da);
+            NativeUI.ad(a, this.ap);
         }
         get dl() {
             return this.c6;
@@ -24901,7 +25050,7 @@ let XCheckbox = /*@__PURE__*/ (() => {
                 this.view.aj(BrushUtil.p(this.c8, 0.6), BrushUtil.p(this.dc, 0.1));
             }
             if (!this.indeterminate) {
-                NativeUI.ad(this.view.t, null);
+                NativeUI.af(this.view.t, null);
             }
             if (this.z || this.indeterminate || a) {
                 let d = this.view.s;
@@ -24918,23 +25067,23 @@ let XCheckbox = /*@__PURE__*/ (() => {
                         $ret.j = -this.view.k();
                         return $ret;
                     })()));
-                    NativeUI.l(d, this.c8);
-                    NativeUI.m(d, this.c9);
-                    NativeUI.w(e, 1);
-                    NativeUI.aa(e, 41);
-                    NativeUI.ad(e, f);
+                    NativeUI.m(d, this.c8);
+                    NativeUI.n(d, this.c9);
+                    NativeUI.y(e, 1);
+                    NativeUI.ac(e, 41);
+                    NativeUI.af(e, f);
                 }
                 else if (b) {
-                    NativeUI.l(d, this.c8);
-                    NativeUI.m(d, this.c9);
-                    NativeUI.w(e, 1);
-                    NativeUI.aa(e, 0);
+                    NativeUI.m(d, this.c8);
+                    NativeUI.n(d, this.c9);
+                    NativeUI.y(e, 1);
+                    NativeUI.ac(e, 0);
                 }
                 else {
-                    NativeUI.l(d, this.db);
-                    NativeUI.m(d, this.dc);
-                    NativeUI.w(e, 0);
-                    NativeUI.aa(e, 24);
+                    NativeUI.m(d, this.db);
+                    NativeUI.n(d, this.dc);
+                    NativeUI.y(e, 0);
+                    NativeUI.ac(e, 24);
                 }
                 if (this.o.playState == 1) {
                     this.o.cancel();
@@ -25112,11 +25261,17 @@ class IgcCheckboxChangeEventArgs {
         this._implementation = this.createImplementation();
         this._implementation.externalObject = this;
         this.onImplementationCreated();
+        if (this._initializeAdapters) {
+            this._initializeAdapters();
+        }
     }
     _provideImplementation(i) {
         this._implementation = i;
         this._implementation.externalObject = this;
         this.onImplementationCreated();
+        if (this._initializeAdapters) {
+            this._initializeAdapters();
+        }
     }
     get isChecked() {
         return this.i.isChecked;
@@ -27273,11 +27428,17 @@ class IgcButtonGroupSelectionChangedEventArgs {
         this._implementation = this.createImplementation();
         this._implementation.externalObject = this;
         this.onImplementationCreated();
+        if (this._initializeAdapters) {
+            this._initializeAdapters();
+        }
     }
     _provideImplementation(i) {
         this._implementation = i;
         this._implementation.externalObject = this;
         this.onImplementationCreated();
+        if (this._initializeAdapters) {
+            this._initializeAdapters();
+        }
     }
 }
 
@@ -29533,25 +29694,26 @@ let XPopupBridge = /*@__PURE__*/ (() => {
         getValue(a, b) {
             let c = a;
             switch (b) {
-                case 22: return c.ao;
-                case 25: return c.ag;
-                case 26: return c.av;
-                case 17: return c.aq;
-                case 23: return c.b9;
-                case 35: switch (c.n) {
+                case 22: return c.aw;
+                case 25: return c.al;
+                case 26: return c.a8;
+                case 17: return c.a0;
+                case 23: return c.cw;
+                case 35: switch (c.p) {
                     case 1: return enumGetBox(NativeUIPopupAnimationType_$type, 1);
                     default: return enumGetBox(NativeUIPopupAnimationType_$type, 0);
                 }
-                case 36: return c.al;
-                case 37: return c.ak;
-                case 40: return c.ax;
-                case 41: return c.am;
-                case 43: switch (c.q) {
-                    case 0: return enumGetBox(NativeUIPopupPointerPosition_$type, 0);
-                    default: return enumGetBox(NativeUIPopupPointerPosition_$type, 1);
+                case 36: return c.as;
+                case 37: return c.ar;
+                case 40: return c.ba;
+                case 41: return c.at;
+                case 43: switch (c.u) {
+                    case 1: return enumGetBox(NativeUIPopupPointerPosition_$type, 1);
+                    default: return enumGetBox(NativeUIPopupPointerPosition_$type, 2);
                 }
-                case 42: return c.cd;
-                case 39: return c.ai;
+                case 42: return c.c0;
+                case 39: return c.an;
+                case 61: return c.a3;
             }
             return super.getValue(a, b);
         }
@@ -29559,54 +29721,57 @@ let XPopupBridge = /*@__PURE__*/ (() => {
             let d = a;
             switch (b) {
                 case 25:
-                    d.ag = c;
+                    d.al = c;
                     break;
                 case 26:
-                    d.av = typeGetValue(c);
+                    d.a8 = typeGetValue(c);
                     break;
                 case 17:
-                    d.aq = c;
+                    d.a0 = c;
                     break;
                 case 23:
-                    d.b9 = c;
+                    d.cw = c;
                     break;
                 case 35:
                     switch (EnumUtil.getEnumValue(NativeUIPopupAnimationType_$type, c)) {
                         case 1:
-                            d.n = 1;
+                            d.p = 1;
                             break;
                         default:
-                            d.n = 0;
+                            d.p = 0;
                             break;
                     }
                     break;
                 case 36:
-                    d.al = c;
+                    d.as = c;
                     break;
                 case 37:
-                    d.ak = c;
+                    d.ar = c;
                     break;
                 case 40:
-                    d.ax = typeGetValue(c);
+                    d.ba = typeGetValue(c);
                     break;
                 case 41:
-                    d.am = c;
+                    d.at = c;
                     break;
                 case 42:
-                    d.cd = c;
+                    d.c0 = c;
                     break;
                 case 43:
                     switch (EnumUtil.getEnumValue(NativeUIPopupPointerPosition_$type, c)) {
-                        case 0:
-                            d.q = 0;
-                            break;
                         case 1:
-                            d.q = 1;
+                            d.u = 1;
+                            break;
+                        case 2:
+                            d.u = 2;
                             break;
                     }
                     break;
                 case 39:
-                    d.ai = c;
+                    d.an = c;
+                    break;
+                case 61:
+                    d.a3 = c;
                     break;
             }
             super.setValue(a, b, c);
@@ -29615,19 +29780,21 @@ let XPopupBridge = /*@__PURE__*/ (() => {
             a.showRelativeToExclusionRect(b, this.v(c), this.u(d));
         }
         close(a) {
-            a.bj();
+            a.b3();
         }
         notifyContentSizeChanged(a) {
-            a.bm();
+            a.b6();
         }
         notifyExclusionRectChanged(a, b) {
-            a.bn(b);
+            a.b7(b);
         }
         v(a) {
             switch (a) {
                 case 0: return 0;
                 case 1: return 1;
                 case 2: return 2;
+                case 3: return 3;
+                case 4: return 4;
                 default: return 0;
             }
         }