igniteui-webcomponents-inputs 1.4.1 → 3.2.1

package/esm5/lib/DatePickerView_combined.js

@@ -13,6 +13,7 @@ import { XSuffix } from "./XSuffix";
 import { XIcon } from "./XIcon";
 import { Popup } from "igniteui-webcomponents-layouts";
 import { XCalendar } from "./XCalendar";
+import { Rect } from "igniteui-webcomponents-core";
 import { SRProvider } from "igniteui-webcomponents-core";
 import { ControlDisplayDensity_$type } from "igniteui-webcomponents-core";
 import { BaseControlTheme_$type } from "igniteui-webcomponents-core";
@@ -21,13 +22,13 @@ import { FirstWeek_$type } from "./FirstWeek";
 import { DateFormats_$type } from "./DateFormats";
 import { BrushUtil } from "igniteui-webcomponents-core";
 import { DateTimeValueFormatter } from "./DateTimeValueFormatter";
-import { ValueChangedEventArgs } from "./ValueChangedEventArgs";
+import { SelectedValueChangedEventArgs } from "./SelectedValueChangedEventArgs";
 import { GotFocusEventArgs } from "./GotFocusEventArgs";
 import { LostFocusEventArgs } from "./LostFocusEventArgs";
 import { DatePickerVisualModelExport } from "./DatePickerVisualModelExport";
 import { FontUtil } from "igniteui-webcomponents-core";
 import { dateMinValue, dateMaxValue, dateGetDate, dateFromValues, dateGetMonth } from "igniteui-webcomponents-core";
-import { stringContains, stringIsNullOrWhiteSpace } from "igniteui-webcomponents-core";
+import { stringContains, stringIsNullOrWhiteSpace, stringIsNullOrEmpty } from "igniteui-webcomponents-core";
 import { stringSplit } from "igniteui-webcomponents-core";
 import { isNaN_ } from "igniteui-webcomponents-core";
 /**
@@ -37,231 +38,256 @@ var DatePickerView = /** @class */ /*@__PURE__*/ (function (_super) {
     tslib_1.__extends(DatePickerView, _super);
     function DatePickerView() {
         var _this = _super.call(this) || this;
-        _this.a = null;
-        _this.c = null;
-        _this.j = null;
+        _this.b = null;
         _this.d = null;
-        _this.l = null;
         _this.k = null;
-        _this.i = null;
-        _this.f = null;
         _this.e = null;
-        _this.h = null;
+        _this.m = null;
+        _this.l = null;
+        _this.j = null;
         _this.g = null;
+        _this.f = null;
+        _this.i = null;
+        _this.h = null;
         return _this;
     }
-    DatePickerView.prototype.ae = function () {
+    DatePickerView.prototype.ag = function () {
     };
-    DatePickerView.prototype.ad = function (a) {
+    Object.defineProperty(DatePickerView.prototype, "n", {
+        get: function () {
+            return this.e;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    DatePickerView.prototype.af = function (a) {
         if (a == null) {
-            this.c = null;
+            this.d = null;
             return;
         }
-        this.c = a;
+        this.d = a;
         var b = Math.round(a.rootWrapper.width());
         var c = Math.round(a.rootWrapper.height());
-        this.x();
-        this.y();
-        var d = this.c.rootWrapper.getChildAt(0);
-        d.listen("keydown", runOn(this, this.v));
-        d.listen("focusin", runOn(this, this.t));
-        d.listen("focusout", runOn(this, this.u));
-        document.addEventListener("click", runOn(this, this.z), false);
-    };
-    DatePickerView.prototype.x = function () {
-        if (this.c != null) {
-            this.j = this.c.rootWrapper.getChildAt(0);
-            this.j.setAttribute("tabIndex", "0");
-            this.j.setStyleProperty("display", "flex");
-            this.j.setStyleProperty("height", "100%");
-            this.k = this.c.createElement("div");
-            this.i = this.c.createElement("div");
-            this.i.setRawStyleProperty("flex-grow", "1");
-            this.f = this.c.createElement("div");
-            this.f.setAttribute("aria-hidden", "true");
-            this.e = this.c.createElement("div");
-            this.h = this.c.createElement("div");
-            this.h.setAttribute("aria-hidden", "true");
-            this.g = this.c.createElement("div");
-            this.a.cd();
-            this.i.getChildAt(0).setAttribute("aria-expanded", "fasle");
-            this.i.getChildAt(0).setAttribute("aria-invalid", "false");
-            this.e.setStyleProperty("height", "16px");
-            this.e.setStyleProperty("width", "16px");
-            this.g.setStyleProperty("height", "16px");
-            this.g.setStyleProperty("width", "16px");
-            this.e.listen("click", runOn(this, this.w));
-            this.g.listen("click", runOn(this, this.aa));
+        this.z();
+        this.aa();
+        var d = this.d.rootWrapper.getChildAt(0);
+        d.listen("keydown", runOn(this, this.x));
+        d.listen("focusin", runOn(this, this.v));
+        d.listen("focusout", runOn(this, this.w));
+        document.addEventListener("click", runOn(this, this.ab), false);
+    };
+    DatePickerView.prototype.z = function () {
+        if (this.d != null) {
+            this.k = this.d.rootWrapper.getChildAt(0);
+            this.k.setAttribute("tabIndex", "0");
+            this.k.setStyleProperty("display", "flex");
+            this.k.setStyleProperty("height", "100%");
+            this.l = this.d.createElement("div");
+            this.j = this.d.createElement("div");
+            this.j.setRawStyleProperty("flex-grow", "1");
+            this.g = this.d.createElement("div");
+            this.g.setAttribute("aria-hidden", "true");
+            this.f = this.d.createElement("div");
+            this.g.setStyleProperty("padding-right", "2px");
+            this.i = this.d.createElement("div");
+            this.i.setAttribute("aria-hidden", "true");
+            this.h = this.d.createElement("div");
+            this.b.cd();
+            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.y));
+            this.h.listen("click", runOn(this, this.ac));
         }
     };
-    DatePickerView.prototype.ah = function (a) {
-        if (this.c != null) {
-            var b = this.c.getSubRenderer(this.j);
+    DatePickerView.prototype.aj = function (a) {
+        if (this.d != null) {
+            var b = this.d.getSubRenderer(this.k);
             a.provideContainer(b);
-            var c = this.c.getExternal(a, b.rootWrapper, this.c.getExternal(this.a, null, null));
+            var c = this.d.getExternal(a, b.rootWrapper, this.d.getExternal(this.b, null, null));
         }
     };
-    DatePickerView.prototype.aj = function (a) {
-        if (this.c != null) {
-            var b = this.c.getSubRenderer(this.k);
+    DatePickerView.prototype.al = function (a) {
+        if (this.d != null) {
+            var b = this.d.getSubRenderer(this.l);
             a.provideContainer(b);
-            var c = this.c.getExternal(a, b.rootWrapper, this.c.getExternal(this.a, null, null));
+            var c = this.d.getExternal(a, b.rootWrapper, this.d.getExternal(this.b, null, null));
         }
     };
-    DatePickerView.prototype.ai = function (a) {
-        if (this.c != null) {
-            var b = this.c.getSubRenderer(this.i);
+    DatePickerView.prototype.ak = function (a) {
+        if (this.d != null) {
+            var b = this.d.getSubRenderer(this.j);
             a.provideContainer(b);
-            var c = this.c.getExternal(a, b.rootWrapper, this.c.getExternal(this.a, null, null));
+            var c = this.d.getExternal(a, b.rootWrapper, this.d.getExternal(this.b, null, null));
         }
     };
-    DatePickerView.prototype.al = function (a, b) {
-        if (this.c != null) {
-            var c = this.c.getSubRenderer(b);
+    DatePickerView.prototype.an = function (a, b) {
+        if (this.d != null) {
+            var c = this.d.getSubRenderer(b);
             a.provideContainer(c);
-            var d = this.c.getExternal(a, c.rootWrapper, this.c.getExternal(this.a, null, null));
+            var d = this.d.getExternal(a, c.rootWrapper, this.d.getExternal(this.b, null, null));
         }
     };
-    DatePickerView.prototype.ag = function (a, b) {
-        if (this.c != null) {
-            var c = this.c.getSubRenderer(b);
+    DatePickerView.prototype.ai = function (a, b) {
+        if (this.d != null) {
+            var c = this.d.getSubRenderer(b);
             a.provideContainer(c);
-            var d = this.c.getExternal(a, c.rootWrapper, this.c.getExternal(this.a, null, null));
+            var d = this.d.getExternal(a, c.rootWrapper, this.d.getExternal(this.b, null, null));
         }
     };
-    DatePickerView.prototype.s = function () {
-        return this.k;
+    DatePickerView.prototype.u = function () {
+        return this.l;
     };
-    DatePickerView.prototype.r = function () {
-        return this.i;
+    DatePickerView.prototype.t = function () {
+        return this.j;
     };
-    DatePickerView.prototype.o = function () {
+    DatePickerView.prototype.q = function () {
+        return this.g;
+    };
+    DatePickerView.prototype.p = function () {
         return this.f;
     };
-    DatePickerView.prototype.n = function () {
-        return this.e;
+    DatePickerView.prototype.s = function () {
+        return this.i;
     };
-    DatePickerView.prototype.q = function () {
+    DatePickerView.prototype.r = function () {
         return this.h;
     };
-    DatePickerView.prototype.p = function () {
-        return this.g;
-    };
-    DatePickerView.prototype.an = function (a) {
-        if (this.i != null) {
+    DatePickerView.prototype.ap = function (a) {
+        if (this.j != null) {
             if (a) {
-                this.i.getChildAt(0).setAttribute("aria-expanded", "true");
+                this.j.getChildAt(0).setAttribute("aria-expanded", "true");
             }
             else {
-                this.i.getChildAt(0).setAttribute("aria-expanded", "false");
+                this.j.getChildAt(0).setAttribute("aria-expanded", "false");
             }
         }
     };
-    DatePickerView.prototype.ao = function (a) {
+    DatePickerView.prototype.aq = function (a) {
         if (a != null && a != "") {
-            this.i.getChildAt(0).setAttribute("aria-label", a);
+            this.j.getChildAt(0).setAttribute("aria-label", a);
         }
         else {
-            this.i.getChildAt(0).setAttribute("aria-label", "Select a date");
+            this.j.getChildAt(0).setAttribute("aria-label", "Select a date");
         }
     };
-    DatePickerView.prototype.am = function () {
-        if (this.e != null) {
-            if (this.a.as == true) {
-                this.e.show();
+    DatePickerView.prototype.ao = function () {
+        if (this.f != null) {
+            if (this.b.as == true) {
+                this.f.show();
             }
             else {
-                this.e.hide();
+                this.f.hide();
             }
         }
     };
-    DatePickerView.prototype.ab = function () {
-        if (this.e != null) {
-            this.e.hide();
+    DatePickerView.prototype.ad = function () {
+        if (this.f != null) {
+            this.f.hide();
         }
     };
-    DatePickerView.prototype.y = function () {
-        if (this.c != null) {
-            this.l = this.c.rootWrapper.getChildAt(1);
-            this.d = this.c.createElement("div");
-            this.d.setStyleProperty("width", "100%");
-            this.d.setStyleProperty("height", "100%");
-            this.d.setStyleProperty("display", "flex");
-            this.a.ce();
-            this.d.parent().setStyleProperty("height", "100%");
+    DatePickerView.prototype.aa = 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.ce();
+            this.e.parent().setStyleProperty("height", "100%");
+            if (this.b.au == true) {
+                this.e.parent().parent().setStyleProperty("max-width", "245px");
+            }
+            else {
+                this.e.parent().parent().setStyleProperty("max-width", "232px");
+            }
         }
     };
-    DatePickerView.prototype.ak = function (a) {
-        if (this.c != null) {
-            var b = this.c.getSubRenderer(this.l);
+    DatePickerView.prototype.am = function (a) {
+        if (this.d != null) {
+            var b = this.d.getSubRenderer(this.m);
             a.provideRenderer(b);
-            var c = b.getExternal(a, b.rootWrapper, b.getExternal(this.a, null, null));
+            var c = b.getExternal(a, b.rootWrapper, b.getExternal(this.b, null, null));
         }
     };
-    DatePickerView.prototype.af = function (a) {
-        if (this.c != null) {
-            var b = this.c.getSubRenderer(this.d);
+    DatePickerView.prototype.ah = function (a) {
+        if (this.d != null) {
+            var b = this.d.getSubRenderer(this.e);
             a.provideContainer(b);
-            var c = this.c.getExternal(a, b.rootWrapper, this.c.getExternal(this.a, null, null));
+            var c = this.d.getExternal(a, b.rootWrapper, this.d.getExternal(this.b, null, null));
         }
     };
-    DatePickerView.prototype.m = function () {
-        return this.d;
+    DatePickerView.prototype.o = function () {
+        return this.e;
     };
-    DatePickerView.prototype.w = function (a) {
-        this.a.cb();
-        if (this.e != null) {
-            this.e.hide();
+    DatePickerView.prototype.y = function (a) {
+        if (this.b.aq == true) {
+            return;
+        }
+        this.b.cb();
+        if (this.f != null) {
+            this.f.hide();
         }
     };
-    DatePickerView.prototype.aa = function (a) {
+    DatePickerView.prototype.ac = function (a) {
         a.stopPropagation();
-        this.a.cj();
+        this.b.cj();
     };
-    DatePickerView.prototype.v = function (a) {
+    DatePickerView.prototype.x = function (a) {
         var b = a.which;
         if (b == 27) {
-            this.a.cc();
+            this.b.cc();
         }
     };
-    DatePickerView.prototype.t = function (a) {
-        this.a.focus();
+    DatePickerView.prototype.v = function (a) {
+        this.b.focus();
         var b = (a.originalEvent.relatedTarget);
-        if (!this.b(b)) {
-            this.a.cp();
+        if (!this.c(b)) {
+            this.b.cp();
         }
     };
-    DatePickerView.prototype.u = function (a) {
+    DatePickerView.prototype.w = function (a) {
         var b = (a.originalEvent.relatedTarget);
-        if (!this.b(b)) {
-            this.a.ci();
-            this.a.cq();
+        if (!this.c(b)) {
+            this.b.ci();
+            this.b.cq();
         }
     };
-    DatePickerView.prototype.z = function (a) {
+    DatePickerView.prototype.ab = function (a) {
         var b = a.target;
-        if (!this.b(b)) {
-            this.a.cc();
+        if (!this.c(b)) {
+            this.b.cc();
         }
     };
-    DatePickerView.prototype.ap = function () {
-        if (this.c != null) {
-            var a = this.c.rootWrapper.getNativeElement();
+    DatePickerView.prototype.ar = function () {
+        if (this.d != null) {
+            var a = this.d.rootWrapper.getNativeElement();
             var b = a.getBoundingClientRect();
             ;
             return b;
         }
         return null;
     };
-    DatePickerView.prototype.b = function (a) {
+    DatePickerView.prototype.a = function () {
+        var a = (window.innerWidth);
+        var b = (window.innerHeight);
+        var c = new Array(2);
+        c[0] = a;
+        c[1] = b;
+        return c;
+    };
+    DatePickerView.prototype.c = function (a) {
         if (null == a) {
             return false;
         }
-        var b = this.i.getNativeElement();
-        var c = this.d.getNativeElement();
+        var b = this.j.getNativeElement();
+        var c = this.e.getNativeElement();
         return b.contains(a) || c.contains(a);
     };
-    DatePickerView.prototype.ac = function () {
+    DatePickerView.prototype.ae = function () {
     };
     DatePickerView.$t = markType(DatePickerView, 'DatePickerView');
     return DatePickerView;
@@ -274,14 +300,14 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
     tslib_1.__extends(DatePicker, _super);
     function DatePicker() {
         var _this = _super.call(this) || this;
-        _this.l = null;
-        _this.y = null;
+        _this.h = null;
         _this.u = null;
-        _this.s = null;
-        _this.v = null;
         _this.q = null;
+        _this.o = null;
         _this.r = null;
-        _this.g = null;
+        _this.m = null;
+        _this.n = null;
+        _this.c = null;
         _this.a6 = "dd";
         _this.ba = "mm";
         _this.bd = "yyyy";
@@ -292,30 +318,30 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         _this.an = false;
         _this.ax = dateMinValue();
         _this.propertyChanged = null;
-        _this.valueChanged = null;
+        _this.selectedValueChanged = null;
         _this.ae = null;
         _this.az = dateMinValue();
         _this.ay = dateMinValue();
         _this.a9 = "";
-        _this.c9 = BrushUtil.g(255, 24, 29, 31);
+        _this.da = BrushUtil.g(255, 24, 29, 31);
         _this.z = null;
         _this.bb = "";
         _this.aw = dateMinValue();
         _this.av = dateMaxValue();
-        _this.c = 2;
-        _this.a = 1;
+        _this.x = 2;
+        _this.v = 1;
         _this.aa = null;
-        _this.da = BrushUtil.g(255, 24, 29, 31);
-        _this.c8 = BrushUtil.g(255, 163, 172, 184);
+        _this.db = BrushUtil.g(255, 24, 29, 31);
+        _this.c9 = BrushUtil.g(255, 163, 172, 184);
         _this.ak = true;
         _this.al = false;
         _this.ag = true;
         _this.aj = true;
-        _this.m = 0;
-        _this.o = 0;
+        _this.i = 0;
+        _this.k = 0;
         _this.am = false;
-        _this.e = new DateTimeValueFormatter();
-        _this.h = 0;
+        _this.a = new DateTimeValueFormatter();
+        _this.d = 0;
         _this.a8 = null;
         _this.ai = false;
         _this.gotFocus = null;
@@ -323,21 +349,21 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         _this.keyDown = null;
         _this.changing = null;
         var a = new DatePickerView();
-        a.a = _this;
-        _this.l = a;
-        _this.l.ae();
+        a.b = _this;
+        _this.h = a;
+        _this.h.ag();
         _this.ca();
         return _this;
     }
     DatePicker.prototype.cv = function (a, b) {
-        if (this.y != null) {
+        if (this.u != null) {
             this.ah = true;
             this.cc();
         }
-        this.c3();
-        if (this.valueChanged != null) {
-            this.valueChanged(this, ((function () {
-                var $ret = new ValueChangedEventArgs();
+        this.c4();
+        if (this.selectedValueChanged != null) {
+            this.selectedValueChanged(this, ((function () {
+                var $ret = new SelectedValueChangedEventArgs();
                 $ret.oldValue = a;
                 $ret.newValue = b;
                 return $ret;
@@ -346,24 +372,27 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         this.cz();
     };
     DatePicker.prototype.notifySizeChanged = function () {
-        this.l.ac();
+        this.h.ae();
     };
     DatePicker.prototype.destroy = function () {
-        if (this.g != null) {
-            var a = this.g;
-            a.valueChanged = delegateRemove(a.valueChanged, runOn(this, this.b9));
-            var b = this.g;
+        if (this.c != null) {
+            var a = this.c;
+            a.selectedValueChanged = delegateRemove(a.selectedValueChanged, runOn(this, this.b9));
+            var b = this.c;
             b.close = delegateRemove(b.close, runOn(this, this.b8));
         }
         this.provideContainer(null);
     };
     DatePicker.prototype.provideContainer = function (a) {
-        this.l.ad(a);
+        this.h.af(a);
+    };
+    DatePicker.prototype.setName = function (a) {
+        this.o.e = a;
     };
     Object.defineProperty(DatePicker.prototype, "af", {
         get: function () {
             if (this.ae == null) {
-                this.ae = new SRProvider(this.l.c);
+                this.ae = new SRProvider(this.h.d);
                 this.ae.cb("Calendar");
             }
             return this.ae;
@@ -371,7 +400,7 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DatePicker.prototype, "a3", {
+    Object.defineProperty(DatePicker.prototype, "value", {
         get: function () {
             return this.az;
         },
@@ -414,14 +443,14 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DatePicker.prototype, "dc", {
+    Object.defineProperty(DatePicker.prototype, "dd", {
         get: function () {
-            return this.c9;
+            return this.da;
         },
         set: function (a) {
-            var b = this.c9;
-            this.c9 = a;
-            if (b != this.c9) {
+            var b = this.da;
+            this.da = a;
+            if (b != this.da) {
                 this.cu("LabelTextColor", b, a);
             }
         },
@@ -484,29 +513,29 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DatePicker.prototype, "d", {
+    Object.defineProperty(DatePicker.prototype, "y", {
         get: function () {
-            return this.c;
+            return this.x;
         },
         set: function (a) {
-            var b = this.c;
-            this.c = a;
-            if (b != this.c) {
-                this.cu("Density", enumGetBox(ControlDisplayDensity_$type, b), enumGetBox(ControlDisplayDensity_$type, this.c));
+            var b = this.x;
+            this.x = a;
+            if (b != this.x) {
+                this.cu("Density", enumGetBox(ControlDisplayDensity_$type, b), enumGetBox(ControlDisplayDensity_$type, this.x));
             }
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DatePicker.prototype, "b", {
+    Object.defineProperty(DatePicker.prototype, "w", {
         get: function () {
-            return this.a;
+            return this.v;
         },
         set: function (a) {
-            var b = this.a;
-            this.a = a;
-            if (b != this.a) {
-                this.cu("BaseTheme", enumGetBox(BaseControlTheme_$type, b), enumGetBox(BaseControlTheme_$type, this.a));
+            var b = this.v;
+            this.v = a;
+            if (b != this.v) {
+                this.cu("BaseTheme", enumGetBox(BaseControlTheme_$type, b), enumGetBox(BaseControlTheme_$type, this.v));
             }
         },
         enumerable: true,
@@ -526,29 +555,29 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DatePicker.prototype, "dd", {
+    Object.defineProperty(DatePicker.prototype, "de", {
         get: function () {
-            return this.da;
+            return this.db;
         },
         set: function (a) {
-            var b = this.da;
-            this.da = a;
-            if (b != this.da) {
-                this.cu("TextColor", b, this.da);
+            var b = this.db;
+            this.db = a;
+            if (b != this.db) {
+                this.cu("TextColor", b, this.db);
             }
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DatePicker.prototype, "db", {
+    Object.defineProperty(DatePicker.prototype, "dc", {
         get: function () {
-            return this.c8;
+            return this.c9;
         },
         set: function (a) {
-            var b = this.c8;
-            this.c8 = a;
-            if (b != this.c8) {
-                this.cu("IconColor", b, this.c8);
+            var b = this.c9;
+            this.c9 = a;
+            if (b != this.c9) {
+                this.cu("IconColor", b, this.c9);
             }
         },
         enumerable: true,
@@ -610,29 +639,29 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DatePicker.prototype, "n", {
+    Object.defineProperty(DatePicker.prototype, "j", {
         get: function () {
-            return this.m;
+            return this.i;
         },
         set: function (a) {
-            var b = this.m;
-            this.m = a;
-            if (b != this.m) {
-                this.cu("FirstDayOfWeek", enumGetBox(DayOfWeek_$type, b), enumGetBox(DayOfWeek_$type, this.m));
+            var b = this.i;
+            this.i = a;
+            if (b != this.i) {
+                this.cu("FirstDayOfWeek", enumGetBox(DayOfWeek_$type, b), enumGetBox(DayOfWeek_$type, this.i));
             }
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DatePicker.prototype, "p", {
+    Object.defineProperty(DatePicker.prototype, "l", {
         get: function () {
-            return this.o;
+            return this.k;
         },
         set: function (a) {
-            var b = this.o;
-            this.o = a;
-            if (b != this.o) {
-                this.cu("FirstWeekOfYear", enumGetBox(FirstWeek_$type, b), enumGetBox(FirstWeek_$type, this.o));
+            var b = this.k;
+            this.k = a;
+            if (b != this.k) {
+                this.cu("FirstWeekOfYear", enumGetBox(FirstWeek_$type, b), enumGetBox(FirstWeek_$type, this.k));
             }
         },
         enumerable: true,
@@ -652,15 +681,15 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DatePicker.prototype, "i", {
+    Object.defineProperty(DatePicker.prototype, "e", {
         get: function () {
-            return this.h;
+            return this.d;
         },
         set: function (a) {
-            var b = this.h;
-            this.h = a;
-            if (this.h != b) {
-                this.cu("DateFormat", enumGetBox(DateFormats_$type, b), enumGetBox(DateFormats_$type, this.h));
+            var b = this.d;
+            this.d = a;
+            if (this.d != b) {
+                this.cu("DateFormat", enumGetBox(DateFormats_$type, b), enumGetBox(DateFormats_$type, this.d));
             }
         },
         enumerable: true,
@@ -706,80 +735,80 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
                 this.c0();
                 break;
             case "BaseTheme":
-                this.c1();
+                this.c2();
                 break;
             case "Value":
-                if (+(this.a3) != +(dateMinValue())) {
-                    if (dateGetDate(this.a3) < dateGetDate(this.a1) || dateGetDate(this.a3) > dateGetDate(this.a0)) {
-                        this.a3 = this.ax;
+                if (+(this.value) != +(dateMinValue())) {
+                    if (dateGetDate(this.value) < dateGetDate(this.a1) || dateGetDate(this.value) > dateGetDate(this.a0)) {
+                        this.value = this.ax;
                     }
                 }
-                this.cv(this.ax, this.a3);
-                this.ax = this.a3;
-                if (this.g != null) {
-                    this.g.aw = this.a3;
+                this.cv(this.ax, this.value);
+                this.ax = this.value;
+                if (this.c != null) {
+                    this.c.value = this.value;
                 }
                 break;
             case "Label":
-                if (this.v != null) {
-                    this.v.text = this.bs;
+                if (this.r != null) {
+                    this.r.text = this.bs;
                     if (this.bs != null && this.bs != "") {
-                        if (!this.u.inputs.contains(this.v)) {
-                            this.u.inputs.insert(0, this.v);
+                        if (!this.q.inputs.contains(this.r)) {
+                            this.q.inputs.insert(0, this.r);
                         }
                     }
                     else {
-                        if (this.u.inputs.contains(this.v)) {
-                            this.u.inputs.remove(this.v);
+                        if (this.q.inputs.contains(this.r)) {
+                            this.q.inputs.remove(this.r);
                         }
                     }
                 }
                 break;
             case "Placeholder":
-                if (this.s != null) {
-                    this.s.cb = this.bz;
-                    this.l.ao(this.bz);
+                if (this.o != null) {
+                    this.o.cb = this.bz;
+                    this.h.aq(this.bz);
                 }
                 break;
             case "Today":
-                if (this.g != null) {
-                    this.g.av = this.a2;
+                if (this.c != null) {
+                    this.c.av = this.a2;
                 }
                 break;
             case "MaxDate":
-                if (this.g != null) {
+                if (this.c != null) {
                     var d = Base.compareSimple(this.a1, this.a0);
                     if (d >= 0) {
                         this.a0 = dateMaxValue();
                     }
-                    this.g.at = this.av;
+                    this.c.at = this.av;
                 }
-                if (dateGetDate(this.a3) > dateGetDate(this.a0)) {
+                if (dateGetDate(this.value) > dateGetDate(this.a0)) {
                     this.ax = dateMinValue();
-                    this.a3 = dateMinValue();
+                    this.value = dateMinValue();
                 }
                 break;
             case "MinDate":
-                if (this.g != null) {
-                    this.g.au = this.aw;
+                if (this.c != null) {
+                    this.c.au = this.aw;
                     var e = Base.compareSimple(this.a1, this.a0);
                     if (e >= 0) {
                         this.ax = dateMaxValue();
-                        this.g.at = this.a0;
+                        this.c.at = this.a0;
                     }
                 }
-                if (dateGetDate(this.a3) < dateGetDate(this.a1)) {
+                if (dateGetDate(this.value) < dateGetDate(this.a1)) {
                     this.ax = dateMinValue();
-                    this.a3 = dateMinValue();
+                    this.value = dateMinValue();
                 }
                 break;
             case "TextStyle":
-                this.c4();
+                this.c5();
                 break;
             case "ShowClearButton":
-                if (this.s != null) {
-                    if (this.s.cj != "") {
-                        this.l.am();
+                if (this.o != null) {
+                    if (this.o.cj != "") {
+                        this.h.ao();
                     }
                 }
                 break;
@@ -787,49 +816,49 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             case "LabelTextStyle":
             case "TextColor":
             case "IconColor":
-                this.c5();
+                this.c6();
                 break;
             case "ShowTodayButton":
-                if (this.g != null) {
-                    this.g.ae = this.at;
+                if (this.c != null) {
+                    this.c.ae = this.at;
                 }
                 break;
             case "AllowTextInput":
-                if (this.s != null) {
-                    this.s.disabled = !this.ap;
+                if (this.o != null) {
+                    this.o.disabled = !this.ap;
                 }
                 break;
             case "OpenOnFocus": break;
             case "DateFormat":
-                this.e.k(this.i);
-                this.c3();
+                this.a.k(this.e);
+                this.c4();
                 break;
             case "FormatString":
                 this.ca();
-                this.c3();
+                this.c4();
                 break;
             case "FirstDayOfWeek":
-                if (this.g != null) {
-                    this.g.p = this.n;
+                if (this.c != null) {
+                    this.c.l = this.j;
                 }
                 break;
             case "ShowWeekNumbers":
-                if (this.g != null) {
-                    this.g.af = this.au;
+                if (this.c != null) {
+                    this.c.af = this.au;
                 }
                 break;
             case "FirstWeekOfYear":
-                if (this.g != null) {
-                    this.g.s = this.p;
+                if (this.c != null) {
+                    this.c.o = this.l;
                 }
                 break;
             case "IsDisabled":
                 {
-                    if (this.u != null) {
-                        this.u.disabled = this.aq;
+                    if (this.q != null) {
+                        this.q.disabled = this.aq;
                     }
-                    if (this.s != null) {
-                        this.s.disabled = this.aq;
+                    if (this.o != null) {
+                        this.o.disabled = this.aq;
                     }
                 }
                 break;
@@ -837,7 +866,7 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
     };
     DatePicker.prototype.ca = function () {
         var a = '/';
-        var b = this.bo != null ? this.bo.toLowerCase() : this.e.j();
+        var b = this.bo != null ? this.bo.toLowerCase() : this.a.j();
         if (stringContains(b, "/")) {
             a = '/';
         }
@@ -922,82 +951,82 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             }
         }
     };
-    DatePicker.prototype.c5 = function () {
-        if (this.s != null) {
-            this.s.dy = this.dd;
+    DatePicker.prototype.c6 = function () {
+        if (this.o != null) {
+            this.o.dy = this.de;
         }
-        if (this.q != null) {
-            this.q.fill = this.db;
+        if (this.m != null) {
+            this.m.fill = this.dc;
         }
-        if (this.r != null) {
-            this.r.fill = this.db;
+        if (this.n != null) {
+            this.n.fill = this.dc;
         }
-        if (this.v != null) {
-            this.v.df = this.dc;
-            this.v.y = this.ac;
+        if (this.r != null) {
+            this.r.df = this.dd;
+            this.r.y = this.ac;
         }
     };
-    DatePicker.prototype.c2 = function () {
-        if (this.u != null) {
+    DatePicker.prototype.c3 = function () {
+        if (this.q != null) {
         }
     };
-    DatePicker.prototype.c4 = function () {
+    DatePicker.prototype.c5 = function () {
         if (this.aa != null) {
-            this.s.ac = this.aa;
+            this.o.ac = this.aa;
         }
     };
     DatePicker.prototype.cd = function () {
-        this.u = new XInputGroup();
-        this.l.ah(this.u);
-        this.u.k = 0;
-        this.u.d = this.b;
-        this.u.h = this.d;
-        this.v = new XLabel();
-        this.l.aj(this.v);
-        this.v.df = this.dc;
-        this.v.y = this.ac;
-        this.u.appendContentChild(this.l.s());
+        this.q = new XInputGroup();
+        this.h.aj(this.q);
+        this.q.d = 0;
+        this.q.j = this.w;
+        this.q.n = this.y;
+        this.r = new XLabel();
+        this.h.al(this.r);
+        this.r.df = this.dd;
+        this.r.y = this.ac;
+        this.q.appendContentChild(this.h.u());
         if (this.bs != null && this.bs != "") {
-            this.v.text = this.bs;
-            this.u.inputs.add(this.v);
+            this.r.text = this.bs;
+            this.q.inputs.add(this.r);
         }
-        this.s = new XInput();
-        this.l.ai(this.s);
-        this.s.b3 = "text";
+        this.o = new XInput();
+        this.h.ak(this.o);
+        this.o.b3 = "text";
         if (this.aa != null) {
-            this.s.ac = this.aa;
-        }
-        this.s.disabled = !this.ap;
-        this.s.dy = this.dd;
-        this.u.appendContentChild(this.l.r());
-        this.u.inputs.add(this.s);
-        this.s.cb = this.bz;
-        this.l.ao(this.bz);
-        var a = this.s;
+            this.o.ac = this.aa;
+        }
+        this.o.disabled = !this.ap;
+        this.o.dy = this.de;
+        this.q.appendContentChild(this.h.t());
+        this.q.inputs.add(this.o);
+        this.o.cb = this.bz;
+        this.h.aq(this.bz);
+        var a = this.o;
         a.change = delegateCombine(a.change, runOn(this, this.ck));
-        var b = this.s;
+        var b = this.o;
         b.changing = delegateCombine(b.changing, runOn(this, this.cl));
-        var c = this.s;
+        var c = this.o;
         c.keyDown = delegateCombine(c.keyDown, runOn(this, this.cm));
         var d = new XSuffix();
-        this.l.al(d, this.l.o());
-        this.q = new XIcon();
-        this.l.ag(this.q, this.l.n());
-        this.q.svgPath = DatePicker.bh;
-        this.q.fill = this.db;
-        d.appendContentChild(this.l.n());
-        this.u.appendContentChild(this.l.o());
-        this.u.inputs.add(d);
-        this.c3();
+        this.h.an(d, this.h.q());
+        this.m = new XIcon();
+        this.h.ai(this.m, this.h.p());
+        this.m.svgPath = DatePicker.bh;
+        this.m.fill = this.dc;
+        d.appendContentChild(this.h.p());
+        this.q.appendContentChild(this.h.q());
+        this.q.inputs.add(d);
+        this.c4();
         var e = new XSuffix();
-        this.l.al(e, this.l.q());
-        this.r = new XIcon();
-        this.l.ag(this.r, this.l.p());
-        this.r.svgPath = DatePicker.bg;
-        this.r.fill = this.db;
-        e.appendContentChild(this.l.p());
-        this.u.appendContentChild(this.l.q());
-        this.u.inputs.add(e);
+        this.h.an(e, this.h.s());
+        this.n = new XIcon();
+        this.h.ai(this.n, this.h.r());
+        this.n.svgPath = DatePicker.bg;
+        this.n.fill = this.dc;
+        e.appendContentChild(this.h.r());
+        this.q.appendContentChild(this.h.s());
+        this.q.inputs.add(e);
     };
     DatePicker.prototype.cm = function (a, b) {
         this.cs(b);
@@ -1010,7 +1039,7 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             case 9:
                 this.an = true;
                 if (!this.ao) {
-                    this.c7(this.s.cj);
+                    this.c8(this.o.cj);
                 }
                 this.ah = true;
                 this.cc();
@@ -1019,7 +1048,7 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             case 13:
                 this.an = true;
                 if (!this.ao) {
-                    this.c7(this.s.cj);
+                    this.c8(this.o.cj);
                 }
                 this.ah = true;
                 this.cc();
@@ -1041,18 +1070,18 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
     DatePicker.prototype.cl = function (a, b) {
         this.co(b);
         if (b.value.length > 0) {
-            this.l.am();
+            this.h.ao();
         }
         else {
-            this.l.ab();
+            this.h.ad();
         }
     };
     DatePicker.prototype.ck = function (a, b) {
         this.ao = true;
-        this.c7(b.value);
+        this.c8(b.value);
         this.ao = false;
     };
-    DatePicker.prototype.c7 = function (a) {
+    DatePicker.prototype.c8 = function (a) {
         var b = ['/', '-', ' ', '.', ','];
         var c = stringSplit(a, b, 1);
         var d = 0;
@@ -1171,38 +1200,43 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             var ah = Base.compareSimple(ag, this.a1);
             var ai = Base.compareSimple(ag, this.a0);
             if (ah < 0 || ai > 0) {
-                this.c3();
+                this.c4();
             }
             else {
-                this.c6(ag);
-                this.l.am();
+                this.c7(ag);
+                this.h.ao();
             }
         }
         else {
-            this.c3();
+            if (stringIsNullOrEmpty(a)) {
+                this.cb();
+            }
+            else {
+                this.c4();
+            }
         }
     };
-    DatePicker.prototype.c6 = function (a) {
-        var b = this.a3;
-        this.a3 = a;
+    DatePicker.prototype.c7 = function (a) {
+        var b = this.value;
+        this.value = a;
     };
-    DatePicker.prototype.c3 = function () {
-        if (this.s != null) {
+    DatePicker.prototype.c4 = function () {
+        if (this.o != null) {
             if (+(this.az) != +(dateMinValue())) {
                 var a = "";
                 if (this.bo == null) {
-                    a = this.e.i(this.a3);
+                    a = this.a.i(this.value);
                 }
                 else {
-                    var b = this.a3.getDate().toString();
+                    var b = this.value.getDate().toString();
                     var c = b;
                     if (this.a6 == "dd") {
-                        if (this.a3.getDate() < 10) {
+                        if (this.value.getDate() < 10) {
                             b = "0" + b;
                         }
                     }
                     else if (this.a6 == "ddd") {
-                        switch (this.a3.getDay()) {
+                        switch (this.value.getDay()) {
                             case 0:
                                 b = !stringIsNullOrWhiteSpace(this.af.b1("Sunday_Short")) ? this.af.b1("Sunday_Short") : "Sun";
                                 break;
@@ -1227,7 +1261,7 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
                         }
                     }
                     else if (this.a6 == "dddd") {
-                        switch (this.a3.getDay()) {
+                        switch (this.value.getDay()) {
                             case 0:
                                 b = !stringIsNullOrWhiteSpace(this.af.b1("Sunday_Full")) ? this.af.b1("Sunday_Full") : "Sunday";
                                 break;
@@ -1251,14 +1285,14 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
                                 break;
                         }
                     }
-                    var d = dateGetMonth(this.a3).toString();
+                    var d = dateGetMonth(this.value).toString();
                     if (this.ba == "mm") {
-                        if (dateGetMonth(this.a3) < 10) {
+                        if (dateGetMonth(this.value) < 10) {
                             d = "0" + d;
                         }
                     }
                     else if (this.ba == "mmm") {
-                        switch (dateGetMonth(this.a3)) {
+                        switch (dateGetMonth(this.value)) {
                             case 1:
                                 d = !stringIsNullOrWhiteSpace(this.af.b1("January_Short")) ? this.af.b1("January_Short") : "Jan";
                                 break;
@@ -1298,7 +1332,7 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
                         }
                     }
                     else if (this.ba == "mmmm") {
-                        switch (dateGetMonth(this.a3)) {
+                        switch (dateGetMonth(this.value)) {
                             case 1:
                                 d = !stringIsNullOrWhiteSpace(this.af.b1("January_Full")) ? this.af.b1("January_Full") : "January";
                                 break;
@@ -1337,7 +1371,7 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
                                 break;
                         }
                     }
-                    var e = this.a3.getFullYear().toString();
+                    var e = this.value.getFullYear().toString();
                     if (this.bd == "yy") {
                         e = e.substr(2);
                     }
@@ -1366,58 +1400,61 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
                         }
                     }
                 }
-                this.s.cj = a;
-                this.l.am();
+                this.o.cj = a;
+                this.h.ao();
             }
             else {
-                this.s.cj = "";
-                this.l.ab();
+                this.o.cj = "";
+                this.h.ad();
             }
         }
     };
     DatePicker.prototype.cb = function () {
-        if (this.s != null) {
-            this.s.cj = "";
+        if (this.aq == true) {
+            return;
         }
-        this.a3 = dateMinValue();
-        this.g.ch();
+        if (this.o != null) {
+            this.o.cj = "";
+        }
+        this.value = dateMinValue();
+        this.c.ch();
     };
     DatePicker.prototype.ce = function () {
-        this.y = new Popup();
-        this.l.ak(this.y);
-        this.g = new XCalendar();
-        this.l.af(this.g);
+        this.u = new Popup();
+        this.h.am(this.u);
+        this.c = new XCalendar();
+        this.h.ah(this.c);
         if (+(this.a1) != +(dateMinValue())) {
-            this.g.au = this.a1;
+            this.c.au = this.a1;
         }
         if (+(this.a0) != +(dateMaxValue())) {
-            this.g.at = this.a0;
+            this.c.at = this.a0;
         }
         if (+(this.a2) != +(dateMinValue())) {
-            this.g.av = this.a2;
-        }
-        this.g.ae = this.at;
-        this.g.p = this.n;
-        this.g.af = this.au;
-        this.g.s = this.p;
-        var a = this.g;
-        a.valueChanged = delegateCombine(a.valueChanged, runOn(this, this.b9));
-        var b = this.g;
+            this.c.av = this.a2;
+        }
+        this.c.ae = this.at;
+        this.c.l = this.j;
+        this.c.af = this.au;
+        this.c.o = this.l;
+        var a = this.c;
+        a.selectedValueChanged = delegateCombine(a.selectedValueChanged, runOn(this, this.b9));
+        var b = this.c;
         b.close = delegateCombine(b.close, runOn(this, this.b8));
-        this.y.appendPopupContent(this.l.m());
+        this.u.appendPopupContent(this.h.o());
     };
     DatePicker.prototype.b9 = function (a, b) {
-        this.a3 = b.newValue;
+        this.value = b.newValue;
     };
     DatePicker.prototype.b8 = function (a) {
-        if (this.y.t) {
+        if (this.u.t) {
             this.ah = true;
             this.cc();
         }
     };
     DatePicker.prototype.cj = function () {
         if (this.ah == false) {
-            if (this.y.t) {
+            if (this.u.t) {
                 this.cc();
             }
             else {
@@ -1432,21 +1469,39 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         if (this.aq) {
             return;
         }
-        var a = this.l.ap();
-        if (this.y != null) {
-            this.y.showRelativeToExclusionRect(a, 0, 0);
+        if (this.u != null) {
+            var a = this.h.ar();
+            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.at == 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);
+                }
+                else {
+                    this.u.showRelativeToExclusionRect(b, 2, 0);
+                }
+            }
+            else {
+                this.u.showRelativeToExclusionRect(b, 1, 0);
+            }
+            this.h.ap(true);
         }
-        this.l.an(true);
     };
     DatePicker.prototype.cc = function () {
         var _this = this;
-        if (this.y != null) {
-            window.setTimeout(function () { return _this.y.ao(); }, 0);
+        if (this.u != null) {
+            window.setTimeout(function () { return _this.u.ao(); }, 0);
         }
-        if (this.g != null) {
-            this.g.cy();
+        if (this.c != null) {
+            this.c.cy();
         }
-        this.l.an(false);
+        this.h.ap(false);
         this.ah = false;
     };
     DatePicker.prototype.focus = function (a) {
@@ -1454,10 +1509,10 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         if (a === void 0) {
             a = false;
         }
-        if (this.s != null) {
-            this.s.focus(a);
+        if (this.o != null) {
+            this.o.focus(a);
         }
-        if (!this.y.t && this.ar == true) {
+        if (!this.u.t && this.ar == true) {
             if (this.ah == false) {
                 if (this.ap == false) {
                     this.cw();
@@ -1481,12 +1536,12 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         this.ah = false;
     };
     DatePicker.prototype.cz = function () {
-        if (this.s != null) {
-            this.s.dg();
+        if (this.o != null) {
+            this.o.dg();
         }
     };
     DatePicker.prototype.ch = function () {
-        this.g.cq();
+        this.c.cq();
     };
     DatePicker.prototype.cp = function () {
         var a = new GotFocusEventArgs();
@@ -1496,28 +1551,28 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         var a = new LostFocusEventArgs();
         this.ct(a);
     };
-    DatePicker.prototype.c1 = function () {
+    DatePicker.prototype.c2 = function () {
     };
     DatePicker.prototype.c0 = function () {
     };
     DatePicker.prototype.a5 = function () {
-        return this.f();
+        return this.b();
     };
     DatePicker.prototype.bl = function () {
-        var a = this.f();
+        var a = this.b();
         return a.g();
     };
-    DatePicker.prototype.f = function () {
+    DatePicker.prototype.b = function () {
         var a = new DatePickerVisualModelExport();
-        a.b = this.d;
-        a.a = this.b;
-        a.e = this.y.ab();
-        a.d = this.u.ia();
-        a.c = this.g.bj();
+        a.e = this.y;
+        a.d = this.w;
+        a.c = this.u.ab();
+        a.b = this.q.ia();
+        a.a = this.c.bj();
         if (this.ad != null) {
             var b = this.ad;
-            if (this.l != null && b.n == null) {
-                var c = this.l.c;
+            if (this.h != null && b.n == null) {
+                var c = this.h.d;
                 var d = FontUtil.getFontInfoFromString(c, b.fontString);
                 b.n = d.n;
                 b.d = d.d;
@@ -1571,4 +1626,3 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
     return DatePicker;
 }(Base));
 export { DatePicker };
-//# sourceMappingURL=DatePickerView_combined.js.map