igniteui-angular-inputs 17.0.0-beta.0 → 17.1.0

package/fesm5/igniteui-angular-inputs.js

@@ -7,7 +7,7 @@
   
 import * as i0 from '@angular/core';
 import { EventEmitter, ɵɵngDeclareFactory, Renderer2, ViewContainerRef, NgZone, Injector, ComponentFactoryResolver, ɵɵFactoryTarget, ɵɵngDeclareComponent, ElementRef, ChangeDetectionStrategy, ɵɵngDeclareClassMetadata, Component, ViewChild, Input, Output, ɵɵngDeclareNgModule, ɵɵngDeclareInjector, NgModule, TemplateRef, HostBinding, ContentChildren } from '@angular/core';
-import { markEnum, markType, Base, StringBuilder, List$1, Delegate_$type, fromEnum, runOn, NativeUI, ScaleTransform, KeyFrameAnimationFactory, AnimationKeyFrameEffect, LinkedList$1, IKeyFrameAnimation_$type, PropertyChangedEventArgs, AnimationKeyFrameProperty, AnimationKeyFrameEffectTiming, AppearanceHelper, INotifyPropertyChanged_$type, BrushUtil, typeGetValue, EnumUtil, ElevationMode_$type, EventArgs, stringIsNullOrEmpty, isNaN_, enumGetBox, CornerRadius, MouseEventArgs, FocusEventArgs, Thickness, ControlDisplayDensity_$type, BaseControlTheme_$type, HorizontalAlignment_$type, VerticalAlignment_$type, UIElementPropertyAccessorFactory, FontUtil, Dictionary$2, String_$type, Tuple$2, SVGNode, FastIterationDictionary$2, stringStartsWith, trimStart, IIcon_$type, DomWrapper_$type, dateMinValue, dateGetMonth, parseBool, dateNow, dateMaxValue, dateAddYears, ObservableCollection$1, dateFromValues, delegateRemove, SRProvider, dateGetDate, stringIsNullOrWhiteSpace, delegateCombine, dateAddDays, Number_$type, dateAddMonths, truncate, timeSpanTotalDays, intDivide, NamePatcher, AngularRenderer, ensureEnum, brushToString, stringToBrush, ensureBool, FontInfo, toSpinal, initializePropertiesFromCss, TypeRegistrar, PortalManager, IgxFocusEventArgs, IgxChildContentModule, IgxChildContentDynamicModule, fromBrushCollection, toBrushCollection, Localization, HashSet$1, typeCast, stringReplace, TransformGroup, TranslateTransform, MouseButtonEventArgs, Point_$type, KeyEventArgs, toNullable, fromEn, DeviceUtils, stringContains, stringSplit, Popup, Rect, IgxKeyEventArgs, SyncableObservableCollection$2, IgCollection, CollectionAdapter, NotifyCollectionChangedAction, Size, RotateTransform, NativeUIElementBridge, NativeUIInputChangingEventArgs, NativeUIComponentHorizontalAlignment_$type, NativeUIInputType_$type, NativeUIInputDisplayType_$type, NativeUIDisplayDensity_$type, INativeUIInputBridge_$type, NativeUIButtonClickedEventArgs, NativeUIMouseEventArgs, NativeUIFocusEventArgs, NativeUIButtonDisplayType_$type, NativeUIComponent, NativeUICheckboxChangeEventArgs, SvgIconRegistry, NativeUIPopupOpenedEventArgs, NativeUIPopupClosedEventArgs, NativeUIPopupPointerPosition_$type, NativeUIPopupAnimationType_$type, INativeUIPopupBridge_$type, NativeUIInput, NativeUIButton, NativeUICheckbox, NativeUIIcon, NativeUIPopup, INativeUIElementFactory_$type } from 'igniteui-angular-core';
+import { markEnum, markType, Base, StringBuilder, List$1, Delegate_$type, fromEnum, runOn, NativeUI, ScaleTransform, KeyFrameAnimationFactory, AnimationKeyFrameEffect, LinkedList$1, IKeyFrameAnimation_$type, PropertyChangedEventArgs, AnimationKeyFrameProperty, AnimationKeyFrameEffectTiming, AppearanceHelper, INotifyPropertyChanged_$type, BrushUtil, typeGetValue, EnumUtil, ElevationMode_$type, EventArgs, stringIsNullOrEmpty, isNaN_, enumGetBox, CornerRadius, MouseEventArgs, FocusEventArgs, Thickness, ControlDisplayDensity_$type, BaseControlTheme_$type, HorizontalAlignment_$type, VerticalAlignment_$type, UIElementPropertyAccessorFactory, FontUtil, Dictionary$2, String_$type, Tuple$2, SVGNode, FastIterationDictionary$2, stringStartsWith, trimStart, IIcon_$type, DomWrapper_$type, dateMinValue, dateGetMonth, parseBool, dateNow, dateMaxValue, dateAddYears, ObservableCollection$1, dateFromValues, delegateRemove, SRProvider, dateGetDate, stringIsNullOrWhiteSpace, delegateCombine, dateAddDays, Number_$type, dateAddMonths, truncate, timeSpanTotalDays, intDivide, NamePatcher, AngularRenderer, ensureEnum, brushToString, stringToBrush, ensureBool, FontInfo, toSpinal, initializePropertiesFromCss, TypeRegistrar, PortalManager, IgxFocusEventArgs, IgxChildContentModule, IgxChildContentDynamicModule, fromBrushCollection, toBrushCollection, Localization, HashSet$1, typeCast, stringReplace, TransformGroup, TranslateTransform, MouseButtonEventArgs, Point_$type, KeyEventArgs, toNullable, fromEn, DeviceUtils, Rect, stringContains, stringSplit, Popup, IgxKeyEventArgs, SyncableObservableCollection$2, IgCollection, CollectionAdapter, NotifyCollectionChangedAction, Size, RotateTransform, NativeUIElementBridge, NativeUIInputChangingEventArgs, NativeUIComponentHorizontalAlignment_$type, NativeUIInputType_$type, NativeUIInputDisplayType_$type, NativeUIDisplayDensity_$type, INativeUIInputBridge_$type, NativeUIButtonClickedEventArgs, NativeUIMouseEventArgs, NativeUIFocusEventArgs, NativeUIButtonDisplayType_$type, NativeUIComponent, NativeUICheckboxChangeEventArgs, SvgIconRegistry, NativeUIPopupOpenedEventArgs, NativeUIPopupClosedEventArgs, NativeUIPopupPointerPosition_$type, NativeUIPopupAnimationType_$type, INativeUIPopupBridge_$type, NativeUIInput, NativeUIButton, NativeUICheckbox, NativeUIIcon, NativeUIPopup, INativeUIElementFactory_$type } from 'igniteui-angular-core';
 import { __extends, __values } from 'tslib';
 import { CommonModule } from '@angular/common';
 
@@ -7184,7 +7184,7 @@ var CalendarView = /** @class */ /*@__PURE__*/ (function (_super) {
     };
     CalendarView.prototype.ah = function () {
         if (this.p != null) {
-            this.p.parent().parent().focus(false);
+            this.p.parent().parent().focus(true);
         }
     };
     CalendarView.prototype.aq = function (a, b) {
@@ -21974,10 +21974,12 @@ var DatePickerView = /** @class */ /*@__PURE__*/ (function (_super) {
         _this.f = null;
         _this.i = null;
         _this.h = null;
+        _this.o = null;
         _this.document_Click = _this.document_Click.bind(_this);
+        _this.window_Resize = _this.window_Resize.bind(_this);
         return _this;
     }
-    DatePickerView.prototype.ah = function () {
+    DatePickerView.prototype.am = function () {
     };
     Object.defineProperty(DatePickerView.prototype, "n", {
         get: function () {
@@ -21986,12 +21988,14 @@ var DatePickerView = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    DatePickerView.prototype.ag = function (a) {
+    DatePickerView.prototype.ak = function (a) {
         if (a == null) {
+            this.b.cq();
             if (this.d != null) {
                 var b = this.d.rootWrapper.getChildAt(0);
                 b.unlistenAll();
                 document.removeEventListener("click", this.document_Click, false);
+                window.removeEventListener("resize", this.window_Resize, false);
             }
             this.d = null;
             return;
@@ -21999,18 +22003,20 @@ var DatePickerView = /** @class */ /*@__PURE__*/ (function (_super) {
         this.d = a;
         var c = Math.round(a.rootWrapper.width());
         var d = Math.round(a.rootWrapper.height());
-        this.aa();
-        this.ab();
+        this.ad();
+        this.ae();
         var 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);
+        window.addEventListener("resize", this.window_Resize, false);
+        this.o = new MutationObserver(runOn(this, this.al));
     };
-    DatePickerView.prototype.aa = function () {
+    DatePickerView.prototype.ad = function () {
         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");
@@ -22023,71 +22029,73 @@ var DatePickerView = /** @class */ /*@__PURE__*/ (function (_super) {
             this.i = this.d.createElement("div");
             this.i.setAttribute("aria-hidden", "true");
             this.h = this.d.createElement("div");
-            this.b.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));
         }
     };
-    DatePickerView.prototype.ak = function (a) {
+    DatePickerView.prototype.aq = function (a) {
         if (this.d != null) {
             var b = this.d.getSubRenderer(this.k);
             a.provideContainer(b);
             var c = b.getExternal(a, b.rootWrapper, this.d.getExternal(this.b, null, null));
         }
     };
-    DatePickerView.prototype.am = function (a) {
+    DatePickerView.prototype.as = function (a) {
         if (this.d != null) {
             var b = this.d.getSubRenderer(this.l);
             a.provideContainer(b);
             var c = b.getExternal(a, b.rootWrapper, this.d.getExternal(this.b, null, null));
         }
     };
-    DatePickerView.prototype.al = function (a) {
+    DatePickerView.prototype.ar = function (a) {
         if (this.d != null) {
             var b = this.d.getSubRenderer(this.j);
             a.provideContainer(b);
             var c = b.getExternal(a, b.rootWrapper, this.d.getExternal(this.b, null, null));
         }
     };
-    DatePickerView.prototype.ao = function (a, b) {
+    DatePickerView.prototype.au = function (a, b) {
         if (this.d != null) {
             var c = this.d.getSubRenderer(b);
             a.provideContainer(c);
             var d = c.getExternal(a, c.rootWrapper, this.d.getExternal(this.b, null, null));
         }
     };
-    DatePickerView.prototype.aj = function (a, b) {
+    DatePickerView.prototype.ap = function (a, b) {
         if (this.d != null) {
             var c = this.d.getSubRenderer(b);
             a.provideContainer(c);
             var d = c.getExternal(a, c.rootWrapper, this.d.getExternal(this.b, null, null));
         }
     };
-    DatePickerView.prototype.u = function () {
+    DatePickerView.prototype.v = function () {
         return this.l;
     };
-    DatePickerView.prototype.t = function () {
+    DatePickerView.prototype.u = function () {
         return this.j;
     };
-    DatePickerView.prototype.q = function () {
+    DatePickerView.prototype.r = function () {
         return this.g;
     };
-    DatePickerView.prototype.p = function () {
+    DatePickerView.prototype.q = function () {
         return this.f;
     };
-    DatePickerView.prototype.s = function () {
+    DatePickerView.prototype.t = function () {
         return this.i;
     };
-    DatePickerView.prototype.r = function () {
+    DatePickerView.prototype.s = function () {
         return this.h;
     };
-    DatePickerView.prototype.aq = function (a) {
+    DatePickerView.prototype.aw = function (a) {
         if (this.j != null) {
             if (a) {
                 this.j.getChildAt(0).setAttribute("aria-expanded", "true");
@@ -22097,7 +22105,7 @@ var DatePickerView = /** @class */ /*@__PURE__*/ (function (_super) {
             }
         }
     };
-    DatePickerView.prototype.as = function (a) {
+    DatePickerView.prototype.ay = function (a) {
         if (a != null && a != "") {
             this.j.getChildAt(0).setAttribute("aria-label", a);
         }
@@ -22105,9 +22113,9 @@ var DatePickerView = /** @class */ /*@__PURE__*/ (function (_super) {
             this.j.getChildAt(0).setAttribute("aria-label", "Select a date");
         }
     };
-    DatePickerView.prototype.ap = function () {
+    DatePickerView.prototype.av = function () {
         if (this.f != null) {
-            if (this.b.at == true) {
+            if (this.b.az == true) {
                 this.f.show();
             }
             else {
@@ -22115,115 +22123,131 @@ var DatePickerView = /** @class */ /*@__PURE__*/ (function (_super) {
             }
         }
     };
-    DatePickerView.prototype.ae = function () {
+    DatePickerView.prototype.ah = function () {
         if (this.f != null) {
             this.f.hide();
         }
     };
-    DatePickerView.prototype.ar = function () {
-        this.k.setAttribute("tabIndex", this.b.a7.toString());
+    DatePickerView.prototype.ax = function () {
+        this.k.setAttribute("tabIndex", this.b.be.toString());
+    };
+    DatePickerView.prototype.an = function () {
+        this.o.observe(document, { childList: true, subtree: true });
+    };
+    DatePickerView.prototype.aj = function () {
+        this.o.disconnect();
     };
-    DatePickerView.prototype.ab = function () {
+    DatePickerView.prototype.ae = function () {
         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");
-            }
         }
     };
-    DatePickerView.prototype.y = function () {
+    DatePickerView.prototype.z = function () {
         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");
-            }
         }
     };
-    DatePickerView.prototype.an = function (a) {
+    DatePickerView.prototype.at = function (a) {
         if (this.d != null) {
             var b = this.d.getSubRenderer(this.m);
             a.provideRenderer(b);
             var c = b.getExternal(a, b.rootWrapper, this.d.getExternal(this.b, null, null));
         }
     };
-    DatePickerView.prototype.ai = function (a) {
+    DatePickerView.prototype.ao = function (a) {
         if (this.d != null) {
             var b = this.d.getSubRenderer(this.e);
             a.provideContainer(b);
             var c = b.getExternal(a, b.rootWrapper, this.d.getExternal(this.b, null, null));
         }
     };
-    DatePickerView.prototype.o = function () {
+    DatePickerView.prototype.p = function () {
         return this.e;
     };
-    DatePickerView.prototype.z = function (a) {
-        if (this.b.ar == true) {
+    DatePickerView.prototype.ac = function (a) {
+        if (this.b.av == true) {
             return;
         }
-        this.b.cf();
+        this.b.cp();
         if (this.f != null) {
             this.f.hide();
         }
     };
-    DatePickerView.prototype.ad = function (a) {
+    DatePickerView.prototype.aa = function (a) {
+        this.b.c8();
+    };
+    DatePickerView.prototype.ab = function (a) {
+        this.b.c9();
+    };
+    DatePickerView.prototype.ag = function (a) {
         a.stopPropagation();
-        this.b.cn();
+        this.b.cx();
     };
-    DatePickerView.prototype.x = function (a) {
+    DatePickerView.prototype.y = function (a) {
         var b = a.which;
         if (b == 27) {
-            this.b.cg();
+            this.b.cq();
         }
     };
-    DatePickerView.prototype.v = function (a) {
+    DatePickerView.prototype.w = function (a) {
         this.b.focus();
         var b = (a.originalEvent.relatedTarget);
         if (!this.c(b)) {
-            this.b.ct();
+            this.b.c3();
         }
     };
-    DatePickerView.prototype.w = function (a) {
+    DatePickerView.prototype.x = function (a) {
         var b = (a.originalEvent.relatedTarget);
         if (!this.c(b)) {
-            this.b.cm();
-            this.b.cu();
+            this.b.cw();
+            this.b.c4();
+        }
+    };
+    DatePickerView.prototype.al = function (a, b) {
+        if (this.d != null) {
+            var c = this.d.rootWrapper.getNativeElement();
+            if (!document.documentElement.contains(c)) {
+                this.b.cq();
+            }
+        }
+        else {
+            this.b.cq();
         }
     };
     DatePickerView.prototype.document_Click = function (a) {
         var b = a.target;
         if (!this.c(b)) {
-            this.b.cg();
+            this.b.cq();
         }
     };
-    DatePickerView.prototype.at = function () {
+    DatePickerView.prototype.window_Resize = function (a) {
+        this.b.dm();
+    };
+    DatePickerView.prototype.a0 = function (a) {
         if (this.d != null) {
-            var a = this.d.rootWrapper.getNativeElement();
-            var b = a.getBoundingClientRect();
-            ;
-            return b;
+            var b = this.d.rootWrapper.getNativeElement();
+            var 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;
     };
@@ -22239,11 +22263,11 @@ var DatePickerView = /** @class */ /*@__PURE__*/ (function (_super) {
         if (null == a) {
             return false;
         }
-        var b = this.j.getNativeElement();
+        var b = this.d.rootWrapper.getNativeElement();
         var c = this.e.getNativeElement();
         return b.contains(a) || c.contains(a);
     };
-    DatePickerView.prototype.af = function () {
+    DatePickerView.prototype.ai = function () {
     };
     DatePickerView.$t = markType(DatePickerView, 'DatePickerView');
     return DatePickerView;
@@ -22263,44 +22287,48 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         _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.dt = 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.du = BrushUtil.g(255, 24, 29, 31);
+        _this.ds = 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;
@@ -22308,16 +22336,16 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         var a = new DatePickerView();
         a.b = _this;
         _this.h = a;
-        _this.h.ah();
-        _this.ce();
+        _this.h.am();
+        _this.co();
         return _this;
     }
-    DatePicker.prototype.cz = function (a, b) {
+    DatePicker.prototype.db = function (a, b) {
         if (this.u != null) {
             this.ah = true;
-            this.cg();
+            this.cq();
         }
-        this.c8();
+        this.dl();
         if (this.selectedValueChanged != null) {
             this.selectedValueChanged(this, ((function () {
                 var $ret = new SelectedValueChangedEventArgs();
@@ -22327,23 +22355,23 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             })()));
         }
         if (this.ai) {
-            this.c3();
+            this.df();
         }
     };
     DatePicker.prototype.notifySizeChanged = function () {
-        this.h.af();
+        this.h.ai();
     };
     DatePicker.prototype.destroy = function () {
         if (this.c != null) {
             var a = this.c;
-            a.selectedValueChanged = delegateRemove(a.selectedValueChanged, runOn(this, this.cd));
+            a.selectedValueChanged = delegateRemove(a.selectedValueChanged, runOn(this, this.cn));
             var b = this.c;
-            b.close = delegateRemove(b.close, runOn(this, this.cc));
+            b.close = delegateRemove(b.close, runOn(this, this.cm));
         }
         this.provideContainer(null);
     };
     DatePicker.prototype.provideContainer = function (a) {
-        this.h.ag(a);
+        this.h.ak(a);
     };
     DatePicker.prototype.setName = function (a) {
         this.o.e = a;
@@ -22361,56 +22389,56 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
     });
     Object.defineProperty(DatePicker.prototype, "value", {
         get: function () {
-            return this.a0;
+            return this.a7;
         },
         set: function (a) {
-            var b = this.a0;
-            this.ay = b;
-            this.a0 = a;
-            if (+b != +(this.a0)) {
-                this.cy("Value", b, this.a0);
+            var b = this.a7;
+            this.a5 = b;
+            this.a7 = a;
+            if (+b != +(this.a7)) {
+                this.da("Value", b, this.a7);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(DatePicker.prototype, "a3", {
+    Object.defineProperty(DatePicker.prototype, "ba", {
         get: function () {
-            return this.az;
+            return this.a6;
         },
         set: function (a) {
-            var b = this.az;
-            this.az = a;
-            if (+b != +(this.az)) {
-                this.cy("Today", b, this.az);
+            var b = this.a6;
+            this.a6 = a;
+            if (+b != +(this.a6)) {
+                this.da("Today", b, this.a6);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(DatePicker.prototype, "bv", {
+    Object.defineProperty(DatePicker.prototype, "b3", {
         get: function () {
-            return this.bc;
+            return this.bj;
         },
         set: function (a) {
-            var b = this.bc;
-            this.bc = a;
-            if (b != this.bc) {
-                this.cy("Label", b, this.bc);
+            var b = this.bj;
+            this.bj = a;
+            if (b != this.bj) {
+                this.da("Label", b, this.bj);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(DatePicker.prototype, "dh", {
+    Object.defineProperty(DatePicker.prototype, "dw", {
         get: function () {
-            return this.de;
+            return this.dt;
         },
         set: function (a) {
-            var b = this.de;
-            this.de = a;
-            if (b != this.de) {
-                this.cy("LabelTextColor", b, a);
+            var b = this.dt;
+            this.dt = a;
+            if (b != this.dt) {
+                this.da("LabelTextColor", b, a);
             }
         },
         enumerable: false,
@@ -22424,49 +22452,49 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.z;
             this.z = a;
             if (b != this.z) {
-                this.cy("LabelTextStyle", b, this.z);
+                this.da("LabelTextStyle", b, this.z);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(DatePicker.prototype, "b2", {
+    Object.defineProperty(DatePicker.prototype, "cb", {
         get: function () {
-            return this.be;
+            return this.bl;
         },
         set: function (a) {
-            var b = this.be;
-            this.be = a;
-            if (b != this.be) {
-                this.cy("Placeholder", b, this.be);
+            var b = this.bl;
+            this.bl = a;
+            if (b != this.bl) {
+                this.da("Placeholder", b, this.bl);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(DatePicker.prototype, "a2", {
+    Object.defineProperty(DatePicker.prototype, "a9", {
         get: function () {
-            return this.ax;
+            return this.a4;
         },
         set: function (a) {
-            var b = this.ax;
-            this.ax = a;
-            if (+b != +(this.ax)) {
-                this.cy("MinDate", b, this.ax);
+            var b = this.a4;
+            this.a4 = a;
+            if (+b != +(this.a4)) {
+                this.da("MinDate", b, this.a4);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(DatePicker.prototype, "a1", {
+    Object.defineProperty(DatePicker.prototype, "a8", {
         get: function () {
-            return this.aw;
+            return this.a3;
         },
         set: function (a) {
-            var b = this.aw;
-            this.aw = a;
-            if (+b != +(this.aw)) {
-                this.cy("MaxDate", b, this.aw);
+            var b = this.a3;
+            this.a3 = a;
+            if (+b != +(this.a3)) {
+                this.da("MaxDate", b, this.a3);
             }
         },
         enumerable: false,
@@ -22480,7 +22508,7 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             var 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));
             }
         },
         enumerable: false,
@@ -22494,7 +22522,7 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             var 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));
             }
         },
         enumerable: false,
@@ -22508,69 +22536,69 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.aa;
             this.aa = a;
             if (b != this.aa) {
-                this.cy("TextStyle", b, this.aa);
+                this.da("TextStyle", b, this.aa);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(DatePicker.prototype, "di", {
+    Object.defineProperty(DatePicker.prototype, "dx", {
         get: function () {
-            return this.df;
+            return this.du;
         },
         set: function (a) {
-            var b = this.df;
-            this.df = a;
-            if (b != this.df) {
-                this.cy("TextColor", b, this.df);
+            var b = this.du;
+            this.du = a;
+            if (b != this.du) {
+                this.da("TextColor", b, this.du);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(DatePicker.prototype, "dg", {
+    Object.defineProperty(DatePicker.prototype, "dv", {
         get: function () {
-            return this.dd;
+            return this.ds;
         },
         set: function (a) {
-            var b = this.dd;
-            this.dd = a;
-            if (b != this.dd) {
-                this.cy("IconColor", b, this.dd);
+            var b = this.ds;
+            this.ds = a;
+            if (b != this.ds) {
+                this.da("IconColor", b, this.ds);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(DatePicker.prototype, "at", {
+    Object.defineProperty(DatePicker.prototype, "az", {
         get: function () {
-            return this.al;
+            return this.ao;
         },
         set: function (a) {
-            var b = this.al;
-            this.al = a;
-            if (b != this.al) {
-                this.cy("ShowClearButton", b, this.al);
+            var b = this.ao;
+            this.ao = a;
+            if (b != this.ao) {
+                this.da("ShowClearButton", b, this.ao);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(DatePicker.prototype, "au", {
+    Object.defineProperty(DatePicker.prototype, "a0", {
         get: function () {
-            return this.am;
+            return this.ap;
         },
         set: function (a) {
-            var b = this.am;
-            this.am = a;
-            if (b != this.am) {
-                this.cy("ShowTodayButton", b, this.am);
+            var b = this.ap;
+            this.ap = a;
+            if (b != this.ap) {
+                this.da("ShowTodayButton", b, this.ap);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(DatePicker.prototype, "aq", {
+    Object.defineProperty(DatePicker.prototype, "au", {
         get: function () {
             return this.ag;
         },
@@ -22578,21 +22606,21 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.ag;
             this.ag = a;
             if (b != this.ag) {
-                this.cy("AllowTextInput", b, this.ag);
+                this.da("AllowTextInput", b, this.ag);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(DatePicker.prototype, "as", {
+    Object.defineProperty(DatePicker.prototype, "ay", {
         get: function () {
-            return this.ak;
+            return this.an;
         },
         set: function (a) {
-            var b = this.ak;
-            this.ak = a;
-            if (b != this.ak) {
-                this.cy("OpenOnFocus", b, this.ak);
+            var b = this.an;
+            this.an = a;
+            if (b != this.an) {
+                this.da("OpenOnFocus", b, this.an);
             }
         },
         enumerable: false,
@@ -22606,7 +22634,7 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             var 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));
             }
         },
         enumerable: false,
@@ -22620,21 +22648,21 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             var 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));
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(DatePicker.prototype, "av", {
+    Object.defineProperty(DatePicker.prototype, "a1", {
         get: function () {
-            return this.an;
+            return this.aq;
         },
         set: function (a) {
-            var b = this.an;
-            this.an = a;
-            if (b != this.an) {
-                this.cy("ShowWeekNumbers", b, this.an);
+            var b = this.aq;
+            this.aq = a;
+            if (b != this.aq) {
+                this.da("ShowWeekNumbers", b, this.aq);
             }
         },
         enumerable: false,
@@ -22648,27 +22676,27 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             var 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));
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(DatePicker.prototype, "br", {
+    Object.defineProperty(DatePicker.prototype, "by", {
         get: function () {
-            return this.bb;
+            return this.bi;
         },
         set: function (a) {
-            var b = this.bb;
-            this.bb = a;
-            if (b != this.bb) {
-                this.cy("FormatString", b, this.bb);
+            var b = this.bi;
+            this.bi = a;
+            if (b != this.bi) {
+                this.da("FormatString", b, this.bi);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(DatePicker.prototype, "ar", {
+    Object.defineProperty(DatePicker.prototype, "av", {
         get: function () {
             return this.aj;
         },
@@ -22676,58 +22704,100 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             var b = this.aj;
             this.aj = a;
             if (b != this.aj) {
-                this.cy("IsDisabled", b, this.aj);
+                this.da("IsDisabled", b, this.aj);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(DatePicker.prototype, "a7", {
+    Object.defineProperty(DatePicker.prototype, "be", {
         get: function () {
-            return this.a6;
+            return this.bd;
         },
         set: function (a) {
-            var b = this.a6;
-            this.a6 = a;
-            if (b != this.a6) {
-                this.cy("TabIndex", b, this.a6);
+            var b = this.bd;
+            this.bd = a;
+            if (b != this.bd) {
+                this.da("TabIndex", b, this.bd);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DatePicker.prototype, "aw", {
+        get: function () {
+            return this.ak;
+        },
+        set: function (a) {
+            var b = this.ak;
+            this.ak = a;
+            if (b != this.ak) {
+                this.da("IsFixed", b, this.ak);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DatePicker.prototype, "ax", {
+        get: function () {
+            return this.am;
+        },
+        set: function (a) {
+            var b = this.am;
+            this.am = a;
+            if (b != this.am) {
+                this.da("OpenAsChild", b, this.am);
             }
         },
         enumerable: false,
         configurable: true
     });
-    DatePicker.prototype.cy = function (a, b, c) {
+    Object.defineProperty(DatePicker.prototype, "a2", {
+        get: function () {
+            return this.as;
+        },
+        set: function (a) {
+            var b = this.as;
+            this.as = a;
+            if (b != this.as) {
+                this.da("UseTopLayer", b, this.as);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DatePicker.prototype.da = function (a, b, c) {
         if (this.propertyChanged != null) {
             this.propertyChanged(this, new PropertyChangedEventArgs(a));
         }
-        this.c1(a, b, c);
+        this.dd(a, b, c);
     };
-    DatePicker.prototype.c1 = function (a, b, c) {
+    DatePicker.prototype.dd = function (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);
                         }
@@ -22741,25 +22811,25 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
                 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) {
-                    var d = Base.compareSimple(this.a2, this.a1);
+                    var 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;
@@ -22767,27 +22837,27 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
                 break;
             case "MinDate":
                 if (this.c != null) {
-                    this.c.au = this.ax;
-                    var e = Base.compareSimple(this.a2, this.a1);
+                    this.c.au = this.a4;
+                    var 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.dn();
                 break;
             case "ShowClearButton":
                 if (this.o != null) {
                     if (this.o.cq != "") {
-                        this.h.ap();
+                        this.h.av();
                     }
                 }
                 break;
@@ -22795,27 +22865,27 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             case "LabelTextStyle":
             case "TextColor":
             case "IconColor":
-                this.da();
+                this.dp();
                 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) {
@@ -22824,8 +22894,8 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
                 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":
@@ -22836,21 +22906,31 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             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;
         }
     };
-    DatePicker.prototype.ce = function () {
+    DatePicker.prototype.co = function () {
         var a = '/';
-        var b = this.br != null ? this.br.toLowerCase() : this.a.j();
+        var b = this.by != null ? this.by.toLowerCase() : this.a.j();
         if (stringContains(b, "/")) {
             a = '/';
         }
@@ -22866,7 +22946,7 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         else if (stringContains(b, ",")) {
             a = ',';
         }
-        this.bf = a.toString();
+        this.bm = a.toString();
         var c = b.split(a);
         if (c.length == 3) {
             var d = "";
@@ -22875,19 +22955,19 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
                     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;
                     }
                 }
@@ -22895,125 +22975,125 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
                     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";
             }
         }
     };
-    DatePicker.prototype.da = function () {
+    DatePicker.prototype.dp = function () {
         if (this.o != null) {
-            this.o.d8 = this.di;
+            this.o.d8 = this.dx;
         }
         if (this.m != null) {
-            this.m.fill = this.dg;
+            this.m.fill = this.dv;
         }
         if (this.n != null) {
-            this.n.fill = this.dg;
+            this.n.fill = this.dv;
         }
         if (this.r != null) {
-            this.r.df = this.dh;
+            this.r.df = this.dw;
             this.r.y = this.ac;
         }
     };
-    DatePicker.prototype.c7 = function () {
+    DatePicker.prototype.dk = function () {
         if (this.q != null) {
         }
     };
-    DatePicker.prototype.c9 = function () {
+    DatePicker.prototype.dn = function () {
         if (this.aa != null) {
             this.o.af = this.aa;
         }
     };
-    DatePicker.prototype.ch = function () {
+    DatePicker.prototype.cr = function () {
         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.dw;
         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.dx;
+        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);
         var a = this.o;
-        a.change = delegateCombine(a.change, runOn(this, this.co));
+        a.change = delegateCombine(a.change, runOn(this, this.cy));
         var b = this.o;
-        b.changing = delegateCombine(b.changing, runOn(this, this.cp));
+        b.changing = delegateCombine(b.changing, runOn(this, this.cz));
         var c = this.o;
-        c.keyDown = delegateCombine(c.keyDown, runOn(this, this.cq));
+        c.keyDown = delegateCombine(c.keyDown, runOn(this, this.c0));
         var 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.dv;
+        d.appendContentChild(this.h.q());
+        this.q.appendContentChild(this.h.r());
         this.q.inputs.add(d);
-        this.c8();
+        this.dl();
         var 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.dv;
+        e.appendContentChild(this.h.s());
+        this.q.appendContentChild(this.h.t());
         this.q.inputs.add(e);
     };
-    DatePicker.prototype.cq = function (a, b) {
-        this.cw(b);
+    DatePicker.prototype.c0 = function (a, b) {
+        this.c6(b);
         if (b.defaultPrevented) {
             return;
         }
@@ -23021,51 +23101,51 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         var 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.dr(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.dr(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;
         }
     };
-    DatePicker.prototype.cp = function (a, b) {
-        this.cs(b);
+    DatePicker.prototype.cz = function (a, b) {
+        this.c2(b);
         if (b.value.length > 0) {
-            this.h.ap();
+            this.h.av();
         }
         else {
-            this.h.ae();
+            this.h.ah();
         }
     };
-    DatePicker.prototype.co = function (a, b) {
-        this.ap = true;
-        this.dc(b.value);
-        this.ap = false;
+    DatePicker.prototype.cy = function (a, b) {
+        this.at = true;
+        this.dr(b.value);
+        this.at = false;
     };
-    DatePicker.prototype.dc = function (a) {
+    DatePicker.prototype.dr = function (a) {
         var b = ['/', '-', ' ', '.', ','];
         var c = stringSplit(a, b, 1);
         var d = 0;
@@ -23076,17 +23156,17 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             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]);
@@ -23099,13 +23179,13 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             }
             if (isNaN_(e)) {
                 var 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();
                 }
                 var i = !stringIsNullOrWhiteSpace(this.af.b1("January_Full")) ? this.af.b1("January_Full").toLowerCase() : "january";
@@ -23181,45 +23261,45 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         }
         if (g) {
             var ag = dateFromValues(f, e, d, 0, 0, 0, 0);
-            var ah = Base.compareSimple(ag, this.a2);
-            var ai = Base.compareSimple(ag, this.a1);
+            var ah = Base.compareSimple(ag, this.a9);
+            var ai = Base.compareSimple(ag, this.a8);
             if (ah < 0 || ai > 0) {
-                this.c8();
+                this.dl();
             }
             else {
-                this.db(ag);
-                this.h.ap();
+                this.dq(ag);
+                this.h.av();
             }
         }
         else {
             if (stringIsNullOrEmpty(a)) {
-                this.cf();
+                this.cp();
             }
             else {
-                this.c8();
+                this.dl();
             }
         }
     };
-    DatePicker.prototype.db = function (a) {
+    DatePicker.prototype.dq = function (a) {
         var b = this.value;
         this.value = a;
     };
-    DatePicker.prototype.c8 = function () {
+    DatePicker.prototype.dl = function () {
         if (this.o != null) {
-            if (+(this.a0) != +(dateMinValue())) {
+            if (+(this.a7) != +(dateMinValue())) {
                 var a = "";
-                if (this.br == null) {
+                if (this.by == null) {
                     a = this.a.i(this.value);
                 }
                 else {
                     var b = this.value.getDate().toString();
                     var 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";
@@ -23244,7 +23324,7 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
                                 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";
@@ -23270,12 +23350,12 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
                         }
                     }
                     var 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";
@@ -23315,7 +23395,7 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
                                 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";
@@ -23356,45 +23436,45 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
                         }
                     }
                     var 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();
             }
         }
     };
-    DatePicker.prototype.cf = function () {
-        if (this.ar == true) {
+    DatePicker.prototype.cp = function () {
+        if (this.av == true) {
             return;
         }
         if (this.o != null) {
@@ -23402,93 +23482,147 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         }
         this.value = dateMinValue();
         this.c.ch();
+        this.al = false;
+    };
+    DatePicker.prototype.c8 = function () {
+        this.al = true;
     };
-    DatePicker.prototype.ci = function () {
+    DatePicker.prototype.c9 = function () {
+        this.al = false;
+    };
+    DatePicker.prototype.cs = function () {
         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;
         var a = this.c;
-        a.selectedValueChanged = delegateCombine(a.selectedValueChanged, runOn(this, this.cd));
+        a.selectedValueChanged = delegateCombine(a.selectedValueChanged, runOn(this, this.cn));
         var 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());
     };
-    DatePicker.prototype.cd = function (a, b) {
+    DatePicker.prototype.cn = function (a, b) {
         this.ai = true;
         this.value = b.newValue;
         this.ai = false;
     };
-    DatePicker.prototype.cc = function (a) {
-        if (this.u.av) {
+    DatePicker.prototype.cm = function (a) {
+        if (this.u.aw) {
             this.ah = true;
-            this.cg();
+            this.cq();
         }
     };
-    DatePicker.prototype.cn = function () {
+    DatePicker.prototype.cx = function () {
         if (this.ah == false) {
-            if (this.u.av) {
-                this.cg();
+            if (this.u.aw) {
+                this.cq();
             }
             else {
-                this.c0();
+                this.dc();
             }
         }
         else {
             this.ah = false;
         }
     };
-    DatePicker.prototype.c0 = function () {
-        if (this.ar) {
+    DatePicker.prototype.dc = function () {
+        if (this.av) {
             return;
         }
         if (this.u != null) {
-            var a = this.h.at();
+            var a = this.h.a0(false);
+            var b = this.h.a()[1];
+            var c = 240;
+            if (this.a0 == true) {
+                c = 270;
+            }
+            var d = a.bottom + c;
+            if (b < d) {
+                var e = a.top - c;
+                if (e < 0) {
+                    this.dj(1, 0);
+                }
+                else {
+                    this.dj(2, 0);
+                }
+            }
+            else {
+                this.dj(1, 0);
+            }
+            this.h.an();
+            this.h.aw(true);
+        }
+    };
+    DatePicker.prototype.dj = function (a, b) {
+        if (this.ax) {
+            this.u.cn(this.h.d.rootWrapper.getNativeElement(), a, b);
+        }
+        else {
+            var c = this.h.a0(true);
+            this.u.showRelativeToExclusionRect(c, a, b);
+        }
+    };
+    DatePicker.prototype.dm = function () {
+        if (this.u.aw) {
+            var a = this.h.a0(false);
             var b = new Rect(0, a.left + window.pageXOffset, a.top + window.pageYOffset, a.width, a.height);
             var c = this.h.a()[1];
             var d = 240;
-            if (this.au == true) {
+            if (this.a0 == true) {
                 d = 270;
             }
             var e = a.bottom + d;
             if (c < e) {
                 var f = a.top - d;
                 if (f < 0) {
-                    this.u.showRelativeToExclusionRect(b, 1, 0);
+                    if (this.u.r != 1) {
+                        this.u.r = 1;
+                        this.u.b7(b);
+                    }
                 }
                 else {
-                    this.u.showRelativeToExclusionRect(b, 2, 0);
+                    if (this.u.r != 2) {
+                        this.u.r = 2;
+                        this.u.b7(b);
+                    }
                 }
             }
             else {
-                this.u.showRelativeToExclusionRect(b, 1, 0);
+                if (this.u.r != 1) {
+                    this.u.r = 1;
+                    this.u.b7(b);
+                }
             }
-            this.h.aq(true);
         }
     };
-    DatePicker.prototype.cg = function () {
+    DatePicker.prototype.cq = function () {
         var _this = this;
         if (this.u != null) {
-            window.setTimeout(function () { return _this.u.bx(); }, 0);
+            window.setTimeout(function () { return _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();
     };
     DatePicker.prototype.focus = function (a) {
         var _this = this;
@@ -23498,18 +23632,21 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         if (this.o != null) {
             this.o.focus(a);
         }
-        if (!this.u.av && 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(function () { return _this.cl(); }, 0);
+                    window.setTimeout(function () { return _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(function () { return _this.cl(); }, 0);
+                        window.setTimeout(function () { return _this.cv(); }, 0);
                     }
                 }
             }
@@ -23518,33 +23655,33 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             }
         }
     };
-    DatePicker.prototype.cm = function () {
+    DatePicker.prototype.cw = function () {
         this.ah = false;
     };
-    DatePicker.prototype.c3 = function () {
+    DatePicker.prototype.df = function () {
         if (this.o != null) {
             this.o.dp();
         }
     };
-    DatePicker.prototype.cl = function () {
+    DatePicker.prototype.cv = function () {
         this.c.cq();
     };
-    DatePicker.prototype.ct = function () {
+    DatePicker.prototype.c3 = function () {
         var a = new GotFocusEventArgs();
-        this.cv(a);
+        this.c5(a);
     };
-    DatePicker.prototype.cu = function () {
+    DatePicker.prototype.c4 = function () {
         var a = new LostFocusEventArgs();
-        this.cx(a);
+        this.c7(a);
     };
-    DatePicker.prototype.c6 = function () {
+    DatePicker.prototype.di = function () {
     };
-    DatePicker.prototype.c4 = function () {
+    DatePicker.prototype.dg = function () {
     };
-    DatePicker.prototype.a8 = function () {
+    DatePicker.prototype.bf = function () {
         return this.b();
     };
-    DatePicker.prototype.bo = function () {
+    DatePicker.prototype.bv = function () {
         var a = this.b();
         return a.g();
     };
@@ -23552,7 +23689,7 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         var a = new DatePickerVisualModelExport();
         a.e = this.y;
         a.d = this.w;
-        a.c = this.u.a9();
+        a.c = this.u.bc();
         a.b = this.q.fe();
         a.a = this.c.bj();
         if (this.ad != null) {
@@ -23585,29 +23722,29 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         }
         return a;
     };
-    DatePicker.prototype.cv = function (a) {
+    DatePicker.prototype.c5 = function (a) {
         if (null != this.gotFocus) {
             this.gotFocus(this, a);
         }
     };
-    DatePicker.prototype.cx = function (a) {
+    DatePicker.prototype.c7 = function (a) {
         if (null != this.lostFocus) {
             this.lostFocus(this, a);
         }
     };
-    DatePicker.prototype.cw = function (a) {
+    DatePicker.prototype.c6 = function (a) {
         if (null != this.keyDown) {
             this.keyDown(this, a);
         }
     };
-    DatePicker.prototype.cs = function (a) {
+    DatePicker.prototype.c2 = function (a) {
         if (null != this.changing) {
             this.changing(this, a);
         }
     };
     DatePicker.$t = 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;
 }(Base));
@@ -23843,10 +23980,10 @@ var IgxDatePickerComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or Sets the property name that contains the values.
         */
         get: function () {
-            return this.i.a3;
+            return this.i.ba;
         },
         set: function (v) {
-            this.i.a3 = v;
+            this.i.ba = v;
         },
         enumerable: false,
         configurable: true
@@ -23856,10 +23993,10 @@ var IgxDatePickerComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or Sets the property name that contains the label.
         */
         get: function () {
-            return this.i.bv;
+            return this.i.b3;
         },
         set: function (v) {
-            this.i.bv = v;
+            this.i.b3 = v;
         },
         enumerable: false,
         configurable: true
@@ -23869,10 +24006,10 @@ var IgxDatePickerComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the text.
         */
         get: function () {
-            return brushToString(this.i.dh);
+            return brushToString(this.i.dw);
         },
         set: function (v) {
-            this.i.dh = stringToBrush(v);
+            this.i.dw = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -23900,10 +24037,10 @@ var IgxDatePickerComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or Sets the property name that contains the placeholder.
         */
         get: function () {
-            return this.i.b2;
+            return this.i.cb;
         },
         set: function (v) {
-            this.i.b2 = v;
+            this.i.cb = v;
         },
         enumerable: false,
         configurable: true
@@ -23913,10 +24050,10 @@ var IgxDatePickerComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or Sets the property name that contains the MinDate.
         */
         get: function () {
-            return this.i.a2;
+            return this.i.a9;
         },
         set: function (v) {
-            this.i.a2 = v;
+            this.i.a9 = v;
         },
         enumerable: false,
         configurable: true
@@ -23926,10 +24063,10 @@ var IgxDatePickerComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or Sets the property name that contains the MaxDate.
         */
         get: function () {
-            return this.i.a1;
+            return this.i.a8;
         },
         set: function (v) {
-            this.i.a1 = v;
+            this.i.a8 = v;
         },
         enumerable: false,
         configurable: true
@@ -23983,10 +24120,10 @@ var IgxDatePickerComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or Sets the text color
         */
         get: function () {
-            return brushToString(this.i.di);
+            return brushToString(this.i.dx);
         },
         set: function (v) {
-            this.i.di = stringToBrush(v);
+            this.i.dx = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -23996,10 +24133,10 @@ var IgxDatePickerComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or Sets the text color
         */
         get: function () {
-            return brushToString(this.i.dg);
+            return brushToString(this.i.dv);
         },
         set: function (v) {
-            this.i.dg = stringToBrush(v);
+            this.i.dv = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -24009,10 +24146,10 @@ var IgxDatePickerComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the ShowClearButton property to detirmine if the clear button is shown
         */
         get: function () {
-            return this.i.at;
+            return this.i.az;
         },
         set: function (v) {
-            this.i.at = ensureBool(v);
+            this.i.az = ensureBool(v);
         },
         enumerable: false,
         configurable: true
@@ -24022,10 +24159,10 @@ var IgxDatePickerComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the ShowTodayButton property to detirmine if the today button is shown
         */
         get: function () {
-            return this.i.au;
+            return this.i.a0;
         },
         set: function (v) {
-            this.i.au = ensureBool(v);
+            this.i.a0 = ensureBool(v);
         },
         enumerable: false,
         configurable: true
@@ -24035,10 +24172,10 @@ var IgxDatePickerComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the AllowTextInput property to detirmine if entering text into the input is allowed
         */
         get: function () {
-            return this.i.aq;
+            return this.i.au;
         },
         set: function (v) {
-            this.i.aq = ensureBool(v);
+            this.i.au = ensureBool(v);
         },
         enumerable: false,
         configurable: true
@@ -24048,10 +24185,10 @@ var IgxDatePickerComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the AllowTextInput property to detirmine if entering text into the input is allowed
         */
         get: function () {
-            return this.i.as;
+            return this.i.ay;
         },
         set: function (v) {
-            this.i.as = ensureBool(v);
+            this.i.ay = ensureBool(v);
         },
         enumerable: false,
         configurable: true
@@ -24087,10 +24224,10 @@ var IgxDatePickerComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the ShowWeekNumbers property to detirmine if the week numbers are shown
         */
         get: function () {
-            return this.i.av;
+            return this.i.a1;
         },
         set: function (v) {
-            this.i.av = ensureBool(v);
+            this.i.a1 = ensureBool(v);
         },
         enumerable: false,
         configurable: true
@@ -24113,20 +24250,59 @@ var IgxDatePickerComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the Format property to detirmine the format of the date in the input
         */
         get: function () {
-            return this.i.br;
+            return this.i.by;
         },
         set: function (v) {
-            this.i.br = v;
+            this.i.by = v;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxDatePickerComponent.prototype, "isDisabled", {
         get: function () {
-            return this.i.ar;
+            return this.i.av;
         },
         set: function (v) {
-            this.i.ar = ensureBool(v);
+            this.i.av = ensureBool(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxDatePickerComponent.prototype, "isFixed", {
+        /**
+         * Indicates that the calendar dropdown will position itself relative to the window instead of the document.
+        */
+        get: function () {
+            return this.i.aw;
+        },
+        set: function (v) {
+            this.i.aw = ensureBool(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxDatePickerComponent.prototype, "openAsChild", {
+        /**
+         * Indicates that the dropdown should open as a child of the date picker.
+        */
+        get: function () {
+            return this.i.ax;
+        },
+        set: function (v) {
+            this.i.ax = ensureBool(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxDatePickerComponent.prototype, "useTopLayer", {
+        /**
+         * Indicates that the dropdown will place itself into the browser top layer.
+        */
+        get: function () {
+            return this.i.a2;
+        },
+        set: function (v) {
+            this.i.a2 = ensureBool(v);
         },
         enumerable: false,
         configurable: true
@@ -24189,14 +24365,14 @@ var IgxDatePickerComponent = /** @class */ /*@__PURE__*/ (function () {
         this._inStyling = false;
     };
     IgxDatePickerComponent.prototype.select = function () {
-        this.i.c3();
+        this.i.df();
     };
     /**
      * Exports visual information about the current state of the grid.
     
     */
     IgxDatePickerComponent.prototype.exportVisualModel = function () {
-        var iv = this.i.a8();
+        var iv = this.i.bf();
         return (iv);
     };
     /**
@@ -24204,7 +24380,7 @@ var IgxDatePickerComponent = /** @class */ /*@__PURE__*/ (function () {
     
     */
     IgxDatePickerComponent.prototype.exportSerializedVisualModel = function () {
-        var iv = this.i.bo();
+        var iv = this.i.bv();
         return (iv);
     };
     Object.defineProperty(IgxDatePickerComponent.prototype, "selectedValueChanged", {
@@ -24358,7 +24534,7 @@ var IgxDatePickerComponent = /** @class */ /*@__PURE__*/ (function () {
         }
     };
     IgxDatePickerComponent.ɵfac = ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxDatePickerComponent, deps: [{ token: Renderer2 }, { token: ViewContainerRef }, { token: NgZone }, { token: Injector }, { token: ComponentFactoryResolver }], target: ɵɵFactoryTarget.Component });
-    IgxDatePickerComponent.ɵcmp = ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: { height: "height", width: "width", value: "value", today: "today", label: "label", labelTextColor: "labelTextColor", labelTextStyle: "labelTextStyle", placeholder: "placeholder", minDate: "minDate", maxDate: "maxDate", density: "density", baseTheme: "baseTheme", textStyle: "textStyle", textColor: "textColor", iconColor: "iconColor", showClearButton: "showClearButton", showTodayButton: "showTodayButton", allowTextInput: "allowTextInput", openOnFocus: "openOnFocus", firstDayOfWeek: "firstDayOfWeek", firstWeekOfYear: "firstWeekOfYear", showWeekNumbers: "showWeekNumbers", dateFormat: "dateFormat", formatString: "formatString", isDisabled: "isDisabled" }, outputs: { selectedValueChanged: "selectedValueChanged", gotFocus: "gotFocus", lostFocus: "lostFocus", keyDown: "keyDown", changing: "changing", valueChange: "valueChange" }, host: { classAttribute: "ig-date-picker igx-date-picker" }, providers: [], viewQueries: [{ propertyName: "_datePickerContainer", first: true, predicate: ["datePickerContainer"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div #datePickerContainer>\n                <div #inputcontainer>\n                </div>\n                <div #popupContainer>\n                </div>\n               </div>", isInline: true, styles: ["\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t}\n\t"], changeDetection: ChangeDetectionStrategy.OnPush });
+    IgxDatePickerComponent.ɵcmp = ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: { height: "height", width: "width", value: "value", today: "today", label: "label", labelTextColor: "labelTextColor", labelTextStyle: "labelTextStyle", placeholder: "placeholder", minDate: "minDate", maxDate: "maxDate", density: "density", baseTheme: "baseTheme", textStyle: "textStyle", textColor: "textColor", iconColor: "iconColor", showClearButton: "showClearButton", showTodayButton: "showTodayButton", allowTextInput: "allowTextInput", openOnFocus: "openOnFocus", firstDayOfWeek: "firstDayOfWeek", firstWeekOfYear: "firstWeekOfYear", showWeekNumbers: "showWeekNumbers", dateFormat: "dateFormat", formatString: "formatString", isDisabled: "isDisabled", isFixed: "isFixed", openAsChild: "openAsChild", useTopLayer: "useTopLayer" }, outputs: { selectedValueChanged: "selectedValueChanged", gotFocus: "gotFocus", lostFocus: "lostFocus", keyDown: "keyDown", changing: "changing", valueChange: "valueChange" }, host: { classAttribute: "ig-date-picker igx-date-picker" }, providers: [], viewQueries: [{ propertyName: "_datePickerContainer", first: true, predicate: ["datePickerContainer"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div #datePickerContainer>\n                <div #inputcontainer>\n                </div>\n                <div #popupContainer>\n                </div>\n               </div>", isInline: true, styles: ["\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t}\n\t"], changeDetection: ChangeDetectionStrategy.OnPush });
     return IgxDatePickerComponent;
 }());
 ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxDatePickerComponent, decorators: [{
@@ -24424,6 +24600,12 @@ var IgxDatePickerComponent = /** @class */ /*@__PURE__*/ (function () {
                 type: Input
             }], isDisabled: [{
                 type: Input
+            }], isFixed: [{
+                type: Input
+            }], openAsChild: [{
+                type: Input
+            }], useTopLayer: [{
+                type: Input
             }], selectedValueChanged: [{
                 type: Output
             }], gotFocus: [{
@@ -35581,26 +35763,26 @@ var XPopupBridge = /** @class */ /*@__PURE__*/ (function (_super) {
     XPopupBridge.prototype.getValue = function (a, b) {
         var c = a;
         switch (b) {
-            case 22: return c.av;
+            case 22: return c.aw;
             case 25: return c.al;
-            case 26: return c.a6;
-            case 17: return c.ay;
-            case 23: return c.cn;
-            case 35: switch (c.o) {
+            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.ar;
-            case 37: return c.aq;
-            case 40: return c.a8;
-            case 41: return c.as;
-            case 43: switch (c.t) {
+            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.cr;
+            case 42: return c.c0;
             case 39: return c.an;
-            case 61: return c.a1;
+            case 61: return c.a3;
         }
         return _super.prototype.getValue.call(this, a, b);
     };
@@ -35611,46 +35793,46 @@ var XPopupBridge = /** @class */ /*@__PURE__*/ (function (_super) {
                 d.al = c;
                 break;
             case 26:
-                d.a6 = typeGetValue(c);
+                d.a8 = typeGetValue(c);
                 break;
             case 17:
-                d.ay = c;
+                d.a0 = c;
                 break;
             case 23:
-                d.cn = c;
+                d.cw = c;
                 break;
             case 35:
                 switch (EnumUtil.getEnumValue(NativeUIPopupAnimationType_$type, c)) {
                     case 1:
-                        d.o = 1;
+                        d.p = 1;
                         break;
                     default:
-                        d.o = 0;
+                        d.p = 0;
                         break;
                 }
                 break;
             case 36:
-                d.ar = c;
+                d.as = c;
                 break;
             case 37:
-                d.aq = c;
+                d.ar = c;
                 break;
             case 40:
-                d.a8 = typeGetValue(c);
+                d.ba = typeGetValue(c);
                 break;
             case 41:
-                d.as = c;
+                d.at = c;
                 break;
             case 42:
-                d.cr = c;
+                d.c0 = c;
                 break;
             case 43:
                 switch (EnumUtil.getEnumValue(NativeUIPopupPointerPosition_$type, c)) {
                     case 1:
-                        d.t = 1;
+                        d.u = 1;
                         break;
                     case 2:
-                        d.t = 2;
+                        d.u = 2;
                         break;
                 }
                 break;
@@ -35658,7 +35840,7 @@ var XPopupBridge = /** @class */ /*@__PURE__*/ (function (_super) {
                 d.an = c;
                 break;
             case 61:
-                d.a1 = c;
+                d.a3 = c;
                 break;
         }
         _super.prototype.setValue.call(this, a, b, c);
@@ -35667,13 +35849,13 @@ var XPopupBridge = /** @class */ /*@__PURE__*/ (function (_super) {
         a.showRelativeToExclusionRect(b, this.v(c), this.u(d));
     };
     XPopupBridge.prototype.close = function (a) {
-        a.bx();
+        a.b3();
     };
     XPopupBridge.prototype.notifyContentSizeChanged = function (a) {
-        a.b0();
+        a.b6();
     };
     XPopupBridge.prototype.notifyExclusionRectChanged = function (a, b) {
-        a.b1(b);
+        a.b7(b);
     };
     XPopupBridge.prototype.v = function (a) {
         switch (a) {