igniteui-webcomponents-inputs 1.4.0 → 3.2.0

package/esm2015/lib/DatePickerView_combined.js

@@ -11,7 +11,8 @@ import { XInput } from "./XInput";
 import { XSuffix } from "./XSuffix";
 import { XIcon } from "./XIcon";
 import { Popup } from "igniteui-webcomponents-layouts";
-import { Calendar } from "./Calendar";
+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";
@@ -20,13 +21,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";
 /**
@@ -36,230 +37,251 @@ export let DatePickerView = /*@__PURE__*/ (() => {
     class DatePickerView extends Base {
         constructor() {
             super();
-            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;
         }
-        ae() {
+        ag() {
+        }
+        get n() {
+            return this.e;
         }
-        ad(a) {
+        af(a) {
             if (a == null) {
-                this.c = null;
+                this.d = null;
                 return;
             }
-            this.c = a;
+            this.d = a;
             let b = Math.round(a.rootWrapper.width());
             let c = Math.round(a.rootWrapper.height());
-            this.x();
-            this.y();
-            let 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);
-        }
-        x() {
-            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();
+            let 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);
+        }
+        z() {
+            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));
             }
         }
-        ah(a) {
-            if (this.c != null) {
-                let b = this.c.getSubRenderer(this.j);
+        aj(a) {
+            if (this.d != null) {
+                let b = this.d.getSubRenderer(this.k);
                 a.provideContainer(b);
-                let c = this.c.getExternal(a, b.rootWrapper, this.c.getExternal(this.a, null, null));
+                let c = this.d.getExternal(a, b.rootWrapper, this.d.getExternal(this.b, null, null));
             }
         }
-        aj(a) {
-            if (this.c != null) {
-                let b = this.c.getSubRenderer(this.k);
+        al(a) {
+            if (this.d != null) {
+                let b = this.d.getSubRenderer(this.l);
                 a.provideContainer(b);
-                let c = this.c.getExternal(a, b.rootWrapper, this.c.getExternal(this.a, null, null));
+                let c = this.d.getExternal(a, b.rootWrapper, this.d.getExternal(this.b, null, null));
             }
         }
-        ai(a) {
-            if (this.c != null) {
-                let b = this.c.getSubRenderer(this.i);
+        ak(a) {
+            if (this.d != null) {
+                let b = this.d.getSubRenderer(this.j);
                 a.provideContainer(b);
-                let c = this.c.getExternal(a, b.rootWrapper, this.c.getExternal(this.a, null, null));
+                let c = this.d.getExternal(a, b.rootWrapper, this.d.getExternal(this.b, null, null));
             }
         }
-        al(a, b) {
-            if (this.c != null) {
-                let c = this.c.getSubRenderer(b);
+        an(a, b) {
+            if (this.d != null) {
+                let c = this.d.getSubRenderer(b);
                 a.provideContainer(c);
-                let d = this.c.getExternal(a, c.rootWrapper, this.c.getExternal(this.a, null, null));
+                let d = this.d.getExternal(a, c.rootWrapper, this.d.getExternal(this.b, null, null));
             }
         }
-        ag(a, b) {
-            if (this.c != null) {
-                let c = this.c.getSubRenderer(b);
+        ai(a, b) {
+            if (this.d != null) {
+                let c = this.d.getSubRenderer(b);
                 a.provideContainer(c);
-                let d = this.c.getExternal(a, c.rootWrapper, this.c.getExternal(this.a, null, null));
+                let d = this.d.getExternal(a, c.rootWrapper, this.d.getExternal(this.b, null, null));
             }
         }
-        s() {
-            return this.k;
+        u() {
+            return this.l;
         }
-        r() {
-            return this.i;
+        t() {
+            return this.j;
         }
-        o() {
+        q() {
+            return this.g;
+        }
+        p() {
             return this.f;
         }
-        n() {
-            return this.e;
+        s() {
+            return this.i;
         }
-        q() {
+        r() {
             return this.h;
         }
-        p() {
-            return this.g;
-        }
-        an(a) {
-            if (this.i != null) {
+        ap(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");
                 }
             }
         }
-        ao(a) {
+        aq(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");
             }
         }
-        am() {
-            if (this.e != null) {
-                if (this.a.as == true) {
-                    this.e.show();
+        ao() {
+            if (this.f != null) {
+                if (this.b.as == true) {
+                    this.f.show();
                 }
                 else {
-                    this.e.hide();
+                    this.f.hide();
                 }
             }
         }
-        ab() {
-            if (this.e != null) {
-                this.e.hide();
+        ad() {
+            if (this.f != null) {
+                this.f.hide();
             }
         }
-        y() {
-            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%");
+        aa() {
+            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");
+                }
             }
         }
-        ak(a) {
-            if (this.c != null) {
-                let b = this.c.getSubRenderer(this.l);
+        am(a) {
+            if (this.d != null) {
+                let b = this.d.getSubRenderer(this.m);
                 a.provideRenderer(b);
-                let c = b.getExternal(a, b.rootWrapper, b.getExternal(this.a, null, null));
+                let c = b.getExternal(a, b.rootWrapper, b.getExternal(this.b, null, null));
             }
         }
-        af(a) {
-            if (this.c != null) {
-                let b = this.c.getSubRenderer(this.d);
+        ah(a) {
+            if (this.d != null) {
+                let b = this.d.getSubRenderer(this.e);
                 a.provideContainer(b);
-                let c = this.c.getExternal(a, b.rootWrapper, this.c.getExternal(this.a, null, null));
+                let c = this.d.getExternal(a, b.rootWrapper, this.d.getExternal(this.b, null, null));
             }
         }
-        m() {
-            return this.d;
+        o() {
+            return this.e;
         }
-        w(a) {
-            this.a.cb();
-            if (this.e != null) {
-                this.e.hide();
+        y(a) {
+            if (this.b.aq == true) {
+                return;
+            }
+            this.b.cb();
+            if (this.f != null) {
+                this.f.hide();
             }
         }
-        aa(a) {
+        ac(a) {
             a.stopPropagation();
-            this.a.cj();
+            this.b.cj();
         }
-        v(a) {
+        x(a) {
             let b = a.which;
             if (b == 27) {
-                this.a.cc();
+                this.b.cc();
             }
         }
-        t(a) {
-            this.a.focus();
+        v(a) {
+            this.b.focus();
             let b = (a.originalEvent.relatedTarget);
-            if (!this.b(b)) {
-                this.a.cp();
+            if (!this.c(b)) {
+                this.b.cp();
             }
         }
-        u(a) {
+        w(a) {
             let b = (a.originalEvent.relatedTarget);
-            if (!this.b(b)) {
-                this.a.ci();
-                this.a.cq();
+            if (!this.c(b)) {
+                this.b.ci();
+                this.b.cq();
             }
         }
-        z(a) {
+        ab(a) {
             let b = a.target;
-            if (!this.b(b)) {
-                this.a.cc();
+            if (!this.c(b)) {
+                this.b.cc();
             }
         }
-        ap() {
-            if (this.c != null) {
-                let a = this.c.rootWrapper.getNativeElement();
+        ar() {
+            if (this.d != null) {
+                let a = this.d.rootWrapper.getNativeElement();
                 let b = a.getBoundingClientRect();
                 ;
                 return b;
             }
             return null;
         }
-        b(a) {
+        a() {
+            let a = (window.innerWidth);
+            let b = (window.innerHeight);
+            let c = new Array(2);
+            c[0] = a;
+            c[1] = b;
+            return c;
+        }
+        c(a) {
             if (null == a) {
                 return false;
             }
-            let b = this.i.getNativeElement();
-            let c = this.d.getNativeElement();
+            let b = this.j.getNativeElement();
+            let c = this.e.getNativeElement();
             return b.contains(a) || c.contains(a);
         }
-        ac() {
+        ae() {
         }
     }
     DatePickerView.$t = /*@__PURE__*/ markType(DatePickerView, 'DatePickerView');
@@ -272,14 +294,14 @@ export let DatePicker = /*@__PURE__*/ (() => {
     class DatePicker extends Base {
         constructor() {
             super();
-            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";
@@ -290,30 +312,30 @@ export let DatePicker = /*@__PURE__*/ (() => {
             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;
@@ -321,20 +343,20 @@ export let DatePicker = /*@__PURE__*/ (() => {
             this.keyDown = null;
             this.changing = null;
             let a = new DatePickerView();
-            a.a = this;
-            this.l = a;
-            this.l.ae();
+            a.b = this;
+            this.h = a;
+            this.h.ag();
             this.ca();
         }
         cv(a, b) {
-            if (this.y != null) {
+            if (this.u != null) {
                 this.ah = true;
                 this.cc();
             }
-            this.c3();
-            if (this.valueChanged != null) {
-                this.valueChanged(this, ((() => {
-                    let $ret = new ValueChangedEventArgs();
+            this.c4();
+            if (this.selectedValueChanged != null) {
+                this.selectedValueChanged(this, ((() => {
+                    let $ret = new SelectedValueChangedEventArgs();
                     $ret.oldValue = a;
                     $ret.newValue = b;
                     return $ret;
@@ -343,31 +365,34 @@ export let DatePicker = /*@__PURE__*/ (() => {
             this.cz();
         }
         notifySizeChanged() {
-            this.l.ac();
+            this.h.ae();
         }
         destroy() {
-            if (this.g != null) {
-                let a = this.g;
-                a.valueChanged = delegateRemove(a.valueChanged, runOn(this, this.b9));
-                let b = this.g;
+            if (this.c != null) {
+                let a = this.c;
+                a.selectedValueChanged = delegateRemove(a.selectedValueChanged, runOn(this, this.b9));
+                let b = this.c;
                 b.close = delegateRemove(b.close, runOn(this, this.b8));
             }
             this.provideContainer(null);
         }
         provideContainer(a) {
-            this.l.ad(a);
+            this.h.af(a);
+        }
+        setName(a) {
+            this.o.e = a;
         }
         get af() {
             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;
         }
-        get a3() {
+        get value() {
             return this.az;
         }
-        set a3(a) {
+        set value(a) {
             let b = this.az;
             this.ax = b;
             this.az = a;
@@ -395,13 +420,13 @@ export let DatePicker = /*@__PURE__*/ (() => {
                 this.cu("Label", b, this.a9);
             }
         }
-        get dc() {
-            return this.c9;
+        get dd() {
+            return this.da;
         }
-        set dc(a) {
-            let b = this.c9;
-            this.c9 = a;
-            if (b != this.c9) {
+        set dd(a) {
+            let b = this.da;
+            this.da = a;
+            if (b != this.da) {
                 this.cu("LabelTextColor", b, a);
             }
         }
@@ -445,24 +470,24 @@ export let DatePicker = /*@__PURE__*/ (() => {
                 this.cu("MaxDate", b, this.av);
             }
         }
-        get d() {
-            return this.c;
+        get y() {
+            return this.x;
         }
-        set d(a) {
-            let b = this.c;
-            this.c = a;
-            if (b != this.c) {
-                this.cu("Density", enumGetBox(ControlDisplayDensity_$type, b), enumGetBox(ControlDisplayDensity_$type, this.c));
+        set y(a) {
+            let b = this.x;
+            this.x = a;
+            if (b != this.x) {
+                this.cu("Density", enumGetBox(ControlDisplayDensity_$type, b), enumGetBox(ControlDisplayDensity_$type, this.x));
             }
         }
-        get b() {
-            return this.a;
+        get w() {
+            return this.v;
         }
-        set b(a) {
-            let b = this.a;
-            this.a = a;
-            if (b != this.a) {
-                this.cu("BaseTheme", enumGetBox(BaseControlTheme_$type, b), enumGetBox(BaseControlTheme_$type, this.a));
+        set w(a) {
+            let b = this.v;
+            this.v = a;
+            if (b != this.v) {
+                this.cu("BaseTheme", enumGetBox(BaseControlTheme_$type, b), enumGetBox(BaseControlTheme_$type, this.v));
             }
         }
         get ad() {
@@ -475,24 +500,24 @@ export let DatePicker = /*@__PURE__*/ (() => {
                 this.cu("TextStyle", b, this.aa);
             }
         }
-        get dd() {
-            return this.da;
+        get de() {
+            return this.db;
         }
-        set dd(a) {
-            let b = this.da;
-            this.da = a;
-            if (b != this.da) {
-                this.cu("TextColor", b, this.da);
+        set de(a) {
+            let b = this.db;
+            this.db = a;
+            if (b != this.db) {
+                this.cu("TextColor", b, this.db);
             }
         }
-        get db() {
-            return this.c8;
+        get dc() {
+            return this.c9;
         }
-        set db(a) {
-            let b = this.c8;
-            this.c8 = a;
-            if (b != this.c8) {
-                this.cu("IconColor", b, this.c8);
+        set dc(a) {
+            let b = this.c9;
+            this.c9 = a;
+            if (b != this.c9) {
+                this.cu("IconColor", b, this.c9);
             }
         }
         get as() {
@@ -535,24 +560,24 @@ export let DatePicker = /*@__PURE__*/ (() => {
                 this.cu("OpenOnFocus", b, this.aj);
             }
         }
-        get n() {
-            return this.m;
+        get j() {
+            return this.i;
         }
-        set n(a) {
-            let b = this.m;
-            this.m = a;
-            if (b != this.m) {
-                this.cu("FirstDayOfWeek", enumGetBox(DayOfWeek_$type, b), enumGetBox(DayOfWeek_$type, this.m));
+        set j(a) {
+            let b = this.i;
+            this.i = a;
+            if (b != this.i) {
+                this.cu("FirstDayOfWeek", enumGetBox(DayOfWeek_$type, b), enumGetBox(DayOfWeek_$type, this.i));
             }
         }
-        get p() {
-            return this.o;
+        get l() {
+            return this.k;
         }
-        set p(a) {
-            let b = this.o;
-            this.o = a;
-            if (b != this.o) {
-                this.cu("FirstWeekOfYear", enumGetBox(FirstWeek_$type, b), enumGetBox(FirstWeek_$type, this.o));
+        set l(a) {
+            let b = this.k;
+            this.k = a;
+            if (b != this.k) {
+                this.cu("FirstWeekOfYear", enumGetBox(FirstWeek_$type, b), enumGetBox(FirstWeek_$type, this.k));
             }
         }
         get au() {
@@ -565,14 +590,14 @@ export let DatePicker = /*@__PURE__*/ (() => {
                 this.cu("ShowWeekNumbers", b, this.am);
             }
         }
-        get i() {
-            return this.h;
+        get e() {
+            return this.d;
         }
-        set i(a) {
-            let b = this.h;
-            this.h = a;
-            if (this.h != b) {
-                this.cu("DateFormat", enumGetBox(DateFormats_$type, b), enumGetBox(DateFormats_$type, this.h));
+        set e(a) {
+            let b = this.d;
+            this.d = a;
+            if (this.d != b) {
+                this.cu("DateFormat", enumGetBox(DateFormats_$type, b), enumGetBox(DateFormats_$type, this.d));
             }
         }
         get bo() {
@@ -607,80 +632,80 @@ export let DatePicker = /*@__PURE__*/ (() => {
                     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) {
                         let 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;
                         let 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;
@@ -688,49 +713,49 @@ export let DatePicker = /*@__PURE__*/ (() => {
                 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;
@@ -738,7 +763,7 @@ export let DatePicker = /*@__PURE__*/ (() => {
         }
         ca() {
             let a = '/';
-            let b = this.bo != null ? this.bo.toLowerCase() : this.e.j();
+            let b = this.bo != null ? this.bo.toLowerCase() : this.a.j();
             if (stringContains(b, "/")) {
                 a = '/';
             }
@@ -823,82 +848,82 @@ export let DatePicker = /*@__PURE__*/ (() => {
                 }
             }
         }
-        c5() {
-            if (this.s != null) {
-                this.s.dy = this.dd;
+        c6() {
+            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;
             }
         }
-        c2() {
-            if (this.u != null) {
+        c3() {
+            if (this.q != null) {
             }
         }
-        c4() {
+        c5() {
             if (this.aa != null) {
-                this.s.ac = this.aa;
+                this.o.ac = this.aa;
             }
         }
         cd() {
-            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);
-            let 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);
+            let a = this.o;
             a.change = delegateCombine(a.change, runOn(this, this.ck));
-            let b = this.s;
+            let b = this.o;
             b.changing = delegateCombine(b.changing, runOn(this, this.cl));
-            let c = this.s;
+            let c = this.o;
             c.keyDown = delegateCombine(c.keyDown, runOn(this, this.cm));
             let 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();
             let 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);
         }
         cm(a, b) {
             this.cs(b);
@@ -911,7 +936,7 @@ export let DatePicker = /*@__PURE__*/ (() => {
                 case 9:
                     this.an = true;
                     if (!this.ao) {
-                        this.c7(this.s.cj);
+                        this.c8(this.o.cj);
                     }
                     this.ah = true;
                     this.cc();
@@ -920,7 +945,7 @@ export let DatePicker = /*@__PURE__*/ (() => {
                 case 13:
                     this.an = true;
                     if (!this.ao) {
-                        this.c7(this.s.cj);
+                        this.c8(this.o.cj);
                     }
                     this.ah = true;
                     this.cc();
@@ -942,18 +967,18 @@ export let DatePicker = /*@__PURE__*/ (() => {
         cl(a, b) {
             this.co(b);
             if (b.value.length > 0) {
-                this.l.am();
+                this.h.ao();
             }
             else {
-                this.l.ab();
+                this.h.ad();
             }
         }
         ck(a, b) {
             this.ao = true;
-            this.c7(b.value);
+            this.c8(b.value);
             this.ao = false;
         }
-        c7(a) {
+        c8(a) {
             let b = ['/', '-', ' ', '.', ','];
             let c = stringSplit(a, b, 1);
             let d = 0;
@@ -1072,38 +1097,43 @@ export let DatePicker = /*@__PURE__*/ (() => {
                 let ah = Base.compareSimple(ag, this.a1);
                 let 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();
+                }
             }
         }
-        c6(a) {
-            let b = this.a3;
-            this.a3 = a;
+        c7(a) {
+            let b = this.value;
+            this.value = a;
         }
-        c3() {
-            if (this.s != null) {
+        c4() {
+            if (this.o != null) {
                 if (+(this.az) != +(dateMinValue())) {
                     let a = "";
                     if (this.bo == null) {
-                        a = this.e.i(this.a3);
+                        a = this.a.i(this.value);
                     }
                     else {
-                        let b = this.a3.getDate().toString();
+                        let b = this.value.getDate().toString();
                         let 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;
@@ -1128,7 +1158,7 @@ export let DatePicker = /*@__PURE__*/ (() => {
                             }
                         }
                         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;
@@ -1152,14 +1182,14 @@ export let DatePicker = /*@__PURE__*/ (() => {
                                     break;
                             }
                         }
-                        let d = dateGetMonth(this.a3).toString();
+                        let 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;
@@ -1199,7 +1229,7 @@ export let DatePicker = /*@__PURE__*/ (() => {
                             }
                         }
                         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;
@@ -1238,7 +1268,7 @@ export let DatePicker = /*@__PURE__*/ (() => {
                                     break;
                             }
                         }
-                        let e = this.a3.getFullYear().toString();
+                        let e = this.value.getFullYear().toString();
                         if (this.bd == "yy") {
                             e = e.substr(2);
                         }
@@ -1267,58 +1297,61 @@ export let DatePicker = /*@__PURE__*/ (() => {
                             }
                         }
                     }
-                    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();
                 }
             }
         }
         cb() {
-            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();
         }
         ce() {
-            this.y = new Popup();
-            this.l.ak(this.y);
-            this.g = new Calendar();
-            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;
-            let a = this.g;
-            a.valueChanged = delegateCombine(a.valueChanged, runOn(this, this.b9));
-            let 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;
+            let a = this.c;
+            a.selectedValueChanged = delegateCombine(a.selectedValueChanged, runOn(this, this.b9));
+            let b = this.c;
             b.close = delegateCombine(b.close, runOn(this, this.b8));
-            this.y.appendPopupContent(this.l.m());
+            this.u.appendPopupContent(this.h.o());
         }
         b9(a, b) {
-            this.a3 = b.newValue;
+            this.value = b.newValue;
         }
         b8(a) {
-            if (this.y.t) {
+            if (this.u.t) {
                 this.ah = true;
                 this.cc();
             }
         }
         cj() {
             if (this.ah == false) {
-                if (this.y.t) {
+                if (this.u.t) {
                     this.cc();
                 }
                 else {
@@ -1333,27 +1366,45 @@ export let DatePicker = /*@__PURE__*/ (() => {
             if (this.aq) {
                 return;
             }
-            let a = this.l.ap();
-            if (this.y != null) {
-                this.y.showRelativeToExclusionRect(a, 0, 0);
+            if (this.u != null) {
+                let a = this.h.ar();
+                let b = new Rect(0, a.left + window.pageXOffset, a.top + window.pageYOffset, a.width, a.height);
+                let c = this.h.a()[1];
+                let d = 240;
+                if (this.at == true) {
+                    d = 270;
+                }
+                let e = a.bottom + d;
+                if (c < e) {
+                    let f = a.top - d;
+                    if (f < 0) {
+                        this.u.showRelativeToExclusionRect(b, 1, 0);
+                    }
+                    else {
+                        this.u.showRelativeToExclusionRect(b, 2, 0);
+                    }
+                }
+                else {
+                    this.u.showRelativeToExclusionRect(b, 1, 0);
+                }
+                this.h.ap(true);
             }
-            this.l.an(true);
         }
         cc() {
-            if (this.y != null) {
-                window.setTimeout(() => this.y.ao(), 0);
+            if (this.u != null) {
+                window.setTimeout(() => 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;
         }
         focus(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();
@@ -1377,12 +1428,12 @@ export let DatePicker = /*@__PURE__*/ (() => {
             this.ah = false;
         }
         cz() {
-            if (this.s != null) {
-                this.s.dg();
+            if (this.o != null) {
+                this.o.dg();
             }
         }
         ch() {
-            this.g.cq();
+            this.c.cq();
         }
         cp() {
             let a = new GotFocusEventArgs();
@@ -1392,28 +1443,28 @@ export let DatePicker = /*@__PURE__*/ (() => {
             let a = new LostFocusEventArgs();
             this.ct(a);
         }
-        c1() {
+        c2() {
         }
         c0() {
         }
         a5() {
-            return this.f();
+            return this.b();
         }
         bl() {
-            let a = this.f();
+            let a = this.b();
             return a.g();
         }
-        f() {
+        b() {
             let 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) {
                 let b = this.ad;
-                if (this.l != null && b.n == null) {
-                    let c = this.l.c;
+                if (this.h != null && b.n == null) {
+                    let c = this.h.d;
                     let d = FontUtil.getFontInfoFromString(c, b.fontString);
                     b.n = d.n;
                     b.d = d.d;
@@ -1467,4 +1518,3 @@ export let DatePicker = /*@__PURE__*/ (() => {
     DatePicker.ab = null;
     return DatePicker;
 })();
-//# sourceMappingURL=DatePickerView_combined.js.map