igniteui-webcomponents-inputs 4.3.3-beta.1 → 4.3.3-beta.2

package/esm2015/lib/DatePickerView_combined.js

@@ -50,6 +50,7 @@ export let DatePickerView = /*@__PURE__*/ (() => {
             this.h = null;
             this.o = null;
             this.document_Click = this.document_Click.bind(this);
+            this.window_Resize = this.window_Resize.bind(this);
         }
         am() {
         }
@@ -63,6 +64,7 @@ export let DatePickerView = /*@__PURE__*/ (() => {
                     let b = this.d.rootWrapper.getChildAt(0);
                     b.unlistenAll();
                     document.removeEventListener("click", this.document_Click, false);
+                    window.removeEventListener("resize", this.window_Resize, false);
                 }
                 this.d = null;
                 return;
@@ -77,6 +79,7 @@ export let DatePickerView = /*@__PURE__*/ (() => {
             e.listen("focusin", runOn(this, this.w));
             e.listen("focusout", runOn(this, this.x));
             document.addEventListener("click", this.document_Click, false);
+            window.addEventListener("resize", this.window_Resize, false);
             this.o = new MutationObserver(runOn(this, this.al));
         }
         ad() {
@@ -303,7 +306,10 @@ export let DatePickerView = /*@__PURE__*/ (() => {
                 this.b.cq();
             }
         }
-        az(a) {
+        window_Resize(a) {
+            this.b.dm();
+        }
+        a0(a) {
             if (this.d != null) {
                 let b = this.d.rootWrapper.getNativeElement();
                 let c = (b.getBoundingClientRect());
@@ -367,7 +373,7 @@ export let DatePicker = /*@__PURE__*/ (() => {
             this.a7 = dateMinValue();
             this.a6 = dateMinValue();
             this.bj = "";
-            this.ds = BrushUtil.g(255, 24, 29, 31);
+            this.dt = BrushUtil.g(255, 24, 29, 31);
             this.z = null;
             this.bl = "";
             this.a4 = dateMinValue();
@@ -375,8 +381,8 @@ export let DatePicker = /*@__PURE__*/ (() => {
             this.x = 2;
             this.v = 1;
             this.aa = null;
-            this.dt = BrushUtil.g(255, 24, 29, 31);
-            this.dr = BrushUtil.g(255, 163, 172, 184);
+            this.du = BrushUtil.g(255, 24, 29, 31);
+            this.ds = BrushUtil.g(255, 163, 172, 184);
             this.ao = true;
             this.ap = false;
             this.ag = true;
@@ -477,13 +483,13 @@ export let DatePicker = /*@__PURE__*/ (() => {
                 this.da("Label", b, this.bj);
             }
         }
-        get dv() {
-            return this.ds;
+        get dw() {
+            return this.dt;
         }
-        set dv(a) {
-            let b = this.ds;
-            this.ds = a;
-            if (b != this.ds) {
+        set dw(a) {
+            let b = this.dt;
+            this.dt = a;
+            if (b != this.dt) {
                 this.da("LabelTextColor", b, a);
             }
         }
@@ -557,24 +563,24 @@ export let DatePicker = /*@__PURE__*/ (() => {
                 this.da("TextStyle", b, this.aa);
             }
         }
-        get dw() {
-            return this.dt;
+        get dx() {
+            return this.du;
         }
-        set dw(a) {
-            let b = this.dt;
-            this.dt = a;
-            if (b != this.dt) {
-                this.da("TextColor", b, this.dt);
+        set dx(a) {
+            let b = this.du;
+            this.du = a;
+            if (b != this.du) {
+                this.da("TextColor", b, this.du);
             }
         }
-        get du() {
-            return this.dr;
+        get dv() {
+            return this.ds;
         }
-        set du(a) {
-            let b = this.dr;
-            this.dr = a;
-            if (b != this.dr) {
-                this.da("IconColor", b, this.dr);
+        set dv(a) {
+            let b = this.ds;
+            this.ds = a;
+            if (b != this.ds) {
+                this.da("IconColor", b, this.ds);
             }
         }
         get az() {
@@ -803,7 +809,7 @@ export let DatePicker = /*@__PURE__*/ (() => {
                     }
                     break;
                 case "TextStyle":
-                    this.dm();
+                    this.dn();
                     break;
                 case "ShowClearButton":
                     if (this.o != null) {
@@ -816,7 +822,7 @@ export let DatePicker = /*@__PURE__*/ (() => {
                 case "LabelTextStyle":
                 case "TextColor":
                 case "IconColor":
-                    this.dn();
+                    this.dp();
                     break;
                 case "ShowTodayButton":
                     if (this.c != null) {
@@ -966,18 +972,18 @@ export let DatePicker = /*@__PURE__*/ (() => {
                 }
             }
         }
-        dn() {
+        dp() {
             if (this.o != null) {
-                this.o.d8 = this.dw;
+                this.o.d8 = this.dx;
             }
             if (this.m != null) {
-                this.m.fill = this.du;
+                this.m.fill = this.dv;
             }
             if (this.n != null) {
-                this.n.fill = this.du;
+                this.n.fill = this.dv;
             }
             if (this.r != null) {
-                this.r.df = this.dv;
+                this.r.df = this.dw;
                 this.r.y = this.ac;
             }
         }
@@ -985,7 +991,7 @@ export let DatePicker = /*@__PURE__*/ (() => {
             if (this.q != null) {
             }
         }
-        dm() {
+        dn() {
             if (this.aa != null) {
                 this.o.af = this.aa;
             }
@@ -998,7 +1004,7 @@ export let DatePicker = /*@__PURE__*/ (() => {
             this.q.t = this.y;
             this.r = new XLabel();
             this.h.as(this.r);
-            this.r.df = this.dv;
+            this.r.df = this.dw;
             this.r.y = this.ac;
             this.q.appendContentChild(this.h.v());
             if (this.b3 != null && this.b3 != "") {
@@ -1012,7 +1018,7 @@ export let DatePicker = /*@__PURE__*/ (() => {
                 this.o.af = this.aa;
             }
             this.o.disabled = !this.au;
-            this.o.d8 = this.dw;
+            this.o.d8 = this.dx;
             this.q.appendContentChild(this.h.u());
             this.q.inputs.add(this.o);
             this.o.cg = this.cb;
@@ -1028,7 +1034,7 @@ export let DatePicker = /*@__PURE__*/ (() => {
             this.m = new XIcon();
             this.h.ap(this.m, this.h.q());
             this.m.svgPath = DatePicker.br;
-            this.m.fill = this.du;
+            this.m.fill = this.dv;
             d.appendContentChild(this.h.q());
             this.q.appendContentChild(this.h.r());
             this.q.inputs.add(d);
@@ -1038,7 +1044,7 @@ export let DatePicker = /*@__PURE__*/ (() => {
             this.n = new XIcon();
             this.h.ap(this.n, this.h.s());
             this.n.svgPath = DatePicker.bq;
-            this.n.fill = this.du;
+            this.n.fill = this.dv;
             e.appendContentChild(this.h.s());
             this.q.appendContentChild(this.h.t());
             this.q.inputs.add(e);
@@ -1054,7 +1060,7 @@ export let DatePicker = /*@__PURE__*/ (() => {
                 case 9:
                     this.ar = true;
                     if (!this.at) {
-                        this.dq(this.o.cq);
+                        this.dr(this.o.cq);
                     }
                     this.ah = true;
                     this.cq();
@@ -1063,7 +1069,7 @@ export let DatePicker = /*@__PURE__*/ (() => {
                 case 13:
                     this.ar = true;
                     if (!this.at) {
-                        this.dq(this.o.cq);
+                        this.dr(this.o.cq);
                     }
                     this.ah = true;
                     this.cq();
@@ -1093,10 +1099,10 @@ export let DatePicker = /*@__PURE__*/ (() => {
         }
         cy(a, b) {
             this.at = true;
-            this.dq(b.value);
+            this.dr(b.value);
             this.at = false;
         }
-        dq(a) {
+        dr(a) {
             let b = ['/', '-', ' ', '.', ','];
             let c = stringSplit(a, b, 1);
             let d = 0;
@@ -1218,7 +1224,7 @@ export let DatePicker = /*@__PURE__*/ (() => {
                     this.dl();
                 }
                 else {
-                    this.dp(ag);
+                    this.dq(ag);
                     this.h.av();
                 }
             }
@@ -1231,7 +1237,7 @@ export let DatePicker = /*@__PURE__*/ (() => {
                 }
             }
         }
-        dp(a) {
+        dq(a) {
             let b = this.value;
             this.value = a;
         }
@@ -1498,7 +1504,7 @@ export let DatePicker = /*@__PURE__*/ (() => {
                 return;
             }
             if (this.u != null) {
-                let a = this.h.az(false);
+                let a = this.h.a0(false);
                 let b = this.h.a()[1];
                 let c = 240;
                 if (this.a0 == true) {
@@ -1526,10 +1532,43 @@ export let DatePicker = /*@__PURE__*/ (() => {
                 this.u.cn(this.h.d.rootWrapper.getNativeElement(), a, b);
             }
             else {
-                let c = this.h.az(true);
+                let c = this.h.a0(true);
                 this.u.showRelativeToExclusionRect(c, a, b);
             }
         }
+        dm() {
+            if (this.u.aw) {
+                let a = this.h.a0(false);
+                let b = new Rect(0, a.left + window.pageXOffset, a.top + window.pageYOffset, a.width, a.height);
+                let c = this.h.a()[1];
+                let d = 240;
+                if (this.a0 == true) {
+                    d = 270;
+                }
+                let e = a.bottom + d;
+                if (c < e) {
+                    let f = a.top - d;
+                    if (f < 0) {
+                        if (this.u.r != 1) {
+                            this.u.r = 1;
+                            this.u.b7(b);
+                        }
+                    }
+                    else {
+                        if (this.u.r != 2) {
+                            this.u.r = 2;
+                            this.u.b7(b);
+                        }
+                    }
+                }
+                else {
+                    if (this.u.r != 1) {
+                        this.u.r = 1;
+                        this.u.b7(b);
+                    }
+                }
+            }
+        }
         cq() {
             if (this.u != null) {
                 window.setTimeout(() => this.u.b3(), 0);

package/esm2015/lib/igc-date-picker-component.js

@@ -229,11 +229,11 @@ export let IgcDatePickerComponent = /*@__PURE__*/ (() => {
          * Gets or sets the color to use for the text.
         */
         get labelTextColor() {
-            return brushToString(this.i.dv);
+            return brushToString(this.i.dw);
         }
         set labelTextColor(v) {
-            this.i.dv = stringToBrush(v);
-            this._a("labelTextColor", brushToString(this.i.dv));
+            this.i.dw = stringToBrush(v);
+            this._a("labelTextColor", brushToString(this.i.dw));
         }
         /**
          * Gets or sets the font to use for the combobox.
@@ -316,21 +316,21 @@ export let IgcDatePickerComponent = /*@__PURE__*/ (() => {
          * Gets or Sets the text color
         */
         get textColor() {
-            return brushToString(this.i.dw);
+            return brushToString(this.i.dx);
         }
         set textColor(v) {
-            this.i.dw = stringToBrush(v);
-            this._a("textColor", brushToString(this.i.dw));
+            this.i.dx = stringToBrush(v);
+            this._a("textColor", brushToString(this.i.dx));
         }
         /**
          * Gets or Sets the text color
         */
         get iconColor() {
-            return brushToString(this.i.du);
+            return brushToString(this.i.dv);
         }
         set iconColor(v) {
-            this.i.du = stringToBrush(v);
-            this._a("iconColor", brushToString(this.i.du));
+            this.i.dv = stringToBrush(v);
+            this._a("iconColor", brushToString(this.i.dv));
         }
         /**
          * Gets or sets the ShowClearButton property to detirmine if the clear button is shown

package/esm5/lib/DatePickerView_combined.js

@@ -51,6 +51,7 @@ var DatePickerView = /** @class */ /*@__PURE__*/ (function (_super) {
         _this.h = null;
         _this.o = null;
         _this.document_Click = _this.document_Click.bind(_this);
+        _this.window_Resize = _this.window_Resize.bind(_this);
         return _this;
     }
     DatePickerView.prototype.am = function () {
@@ -69,6 +70,7 @@ var DatePickerView = /** @class */ /*@__PURE__*/ (function (_super) {
                 var b = this.d.rootWrapper.getChildAt(0);
                 b.unlistenAll();
                 document.removeEventListener("click", this.document_Click, false);
+                window.removeEventListener("resize", this.window_Resize, false);
             }
             this.d = null;
             return;
@@ -83,6 +85,7 @@ var DatePickerView = /** @class */ /*@__PURE__*/ (function (_super) {
         e.listen("focusin", runOn(this, this.w));
         e.listen("focusout", runOn(this, this.x));
         document.addEventListener("click", this.document_Click, false);
+        window.addEventListener("resize", this.window_Resize, false);
         this.o = new MutationObserver(runOn(this, this.al));
     };
     DatePickerView.prototype.ad = function () {
@@ -309,7 +312,10 @@ var DatePickerView = /** @class */ /*@__PURE__*/ (function (_super) {
             this.b.cq();
         }
     };
-    DatePickerView.prototype.az = function (a) {
+    DatePickerView.prototype.window_Resize = function (a) {
+        this.b.dm();
+    };
+    DatePickerView.prototype.a0 = function (a) {
         if (this.d != null) {
             var b = this.d.rootWrapper.getNativeElement();
             var c = (b.getBoundingClientRect());
@@ -373,7 +379,7 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         _this.a7 = dateMinValue();
         _this.a6 = dateMinValue();
         _this.bj = "";
-        _this.ds = BrushUtil.g(255, 24, 29, 31);
+        _this.dt = BrushUtil.g(255, 24, 29, 31);
         _this.z = null;
         _this.bl = "";
         _this.a4 = dateMinValue();
@@ -381,8 +387,8 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         _this.x = 2;
         _this.v = 1;
         _this.aa = null;
-        _this.dt = BrushUtil.g(255, 24, 29, 31);
-        _this.dr = BrushUtil.g(255, 163, 172, 184);
+        _this.du = BrushUtil.g(255, 24, 29, 31);
+        _this.ds = BrushUtil.g(255, 163, 172, 184);
         _this.ao = true;
         _this.ap = false;
         _this.ag = true;
@@ -500,14 +506,14 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(DatePicker.prototype, "dv", {
+    Object.defineProperty(DatePicker.prototype, "dw", {
         get: function () {
-            return this.ds;
+            return this.dt;
         },
         set: function (a) {
-            var b = this.ds;
-            this.ds = a;
-            if (b != this.ds) {
+            var b = this.dt;
+            this.dt = a;
+            if (b != this.dt) {
                 this.da("LabelTextColor", b, a);
             }
         },
@@ -612,29 +618,29 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(DatePicker.prototype, "dw", {
+    Object.defineProperty(DatePicker.prototype, "dx", {
         get: function () {
-            return this.dt;
+            return this.du;
         },
         set: function (a) {
-            var b = this.dt;
-            this.dt = a;
-            if (b != this.dt) {
-                this.da("TextColor", b, this.dt);
+            var b = this.du;
+            this.du = a;
+            if (b != this.du) {
+                this.da("TextColor", b, this.du);
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(DatePicker.prototype, "du", {
+    Object.defineProperty(DatePicker.prototype, "dv", {
         get: function () {
-            return this.dr;
+            return this.ds;
         },
         set: function (a) {
-            var b = this.dr;
-            this.dr = a;
-            if (b != this.dr) {
-                this.da("IconColor", b, this.dr);
+            var b = this.ds;
+            this.ds = a;
+            if (b != this.ds) {
+                this.da("IconColor", b, this.ds);
             }
         },
         enumerable: false,
@@ -922,7 +928,7 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
                 }
                 break;
             case "TextStyle":
-                this.dm();
+                this.dn();
                 break;
             case "ShowClearButton":
                 if (this.o != null) {
@@ -935,7 +941,7 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             case "LabelTextStyle":
             case "TextColor":
             case "IconColor":
-                this.dn();
+                this.dp();
                 break;
             case "ShowTodayButton":
                 if (this.c != null) {
@@ -1085,18 +1091,18 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             }
         }
     };
-    DatePicker.prototype.dn = function () {
+    DatePicker.prototype.dp = function () {
         if (this.o != null) {
-            this.o.d8 = this.dw;
+            this.o.d8 = this.dx;
         }
         if (this.m != null) {
-            this.m.fill = this.du;
+            this.m.fill = this.dv;
         }
         if (this.n != null) {
-            this.n.fill = this.du;
+            this.n.fill = this.dv;
         }
         if (this.r != null) {
-            this.r.df = this.dv;
+            this.r.df = this.dw;
             this.r.y = this.ac;
         }
     };
@@ -1104,7 +1110,7 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         if (this.q != null) {
         }
     };
-    DatePicker.prototype.dm = function () {
+    DatePicker.prototype.dn = function () {
         if (this.aa != null) {
             this.o.af = this.aa;
         }
@@ -1117,7 +1123,7 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         this.q.t = this.y;
         this.r = new XLabel();
         this.h.as(this.r);
-        this.r.df = this.dv;
+        this.r.df = this.dw;
         this.r.y = this.ac;
         this.q.appendContentChild(this.h.v());
         if (this.b3 != null && this.b3 != "") {
@@ -1131,7 +1137,7 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             this.o.af = this.aa;
         }
         this.o.disabled = !this.au;
-        this.o.d8 = this.dw;
+        this.o.d8 = this.dx;
         this.q.appendContentChild(this.h.u());
         this.q.inputs.add(this.o);
         this.o.cg = this.cb;
@@ -1147,7 +1153,7 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         this.m = new XIcon();
         this.h.ap(this.m, this.h.q());
         this.m.svgPath = DatePicker.br;
-        this.m.fill = this.du;
+        this.m.fill = this.dv;
         d.appendContentChild(this.h.q());
         this.q.appendContentChild(this.h.r());
         this.q.inputs.add(d);
@@ -1157,7 +1163,7 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         this.n = new XIcon();
         this.h.ap(this.n, this.h.s());
         this.n.svgPath = DatePicker.bq;
-        this.n.fill = this.du;
+        this.n.fill = this.dv;
         e.appendContentChild(this.h.s());
         this.q.appendContentChild(this.h.t());
         this.q.inputs.add(e);
@@ -1173,7 +1179,7 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             case 9:
                 this.ar = true;
                 if (!this.at) {
-                    this.dq(this.o.cq);
+                    this.dr(this.o.cq);
                 }
                 this.ah = true;
                 this.cq();
@@ -1182,7 +1188,7 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             case 13:
                 this.ar = true;
                 if (!this.at) {
-                    this.dq(this.o.cq);
+                    this.dr(this.o.cq);
                 }
                 this.ah = true;
                 this.cq();
@@ -1212,10 +1218,10 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
     };
     DatePicker.prototype.cy = function (a, b) {
         this.at = true;
-        this.dq(b.value);
+        this.dr(b.value);
         this.at = false;
     };
-    DatePicker.prototype.dq = function (a) {
+    DatePicker.prototype.dr = function (a) {
         var b = ['/', '-', ' ', '.', ','];
         var c = stringSplit(a, b, 1);
         var d = 0;
@@ -1337,7 +1343,7 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
                 this.dl();
             }
             else {
-                this.dp(ag);
+                this.dq(ag);
                 this.h.av();
             }
         }
@@ -1350,7 +1356,7 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             }
         }
     };
-    DatePicker.prototype.dp = function (a) {
+    DatePicker.prototype.dq = function (a) {
         var b = this.value;
         this.value = a;
     };
@@ -1617,7 +1623,7 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             return;
         }
         if (this.u != null) {
-            var a = this.h.az(false);
+            var a = this.h.a0(false);
             var b = this.h.a()[1];
             var c = 240;
             if (this.a0 == true) {
@@ -1645,10 +1651,43 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             this.u.cn(this.h.d.rootWrapper.getNativeElement(), a, b);
         }
         else {
-            var c = this.h.az(true);
+            var c = this.h.a0(true);
             this.u.showRelativeToExclusionRect(c, a, b);
         }
     };
+    DatePicker.prototype.dm = function () {
+        if (this.u.aw) {
+            var a = this.h.a0(false);
+            var b = new Rect(0, a.left + window.pageXOffset, a.top + window.pageYOffset, a.width, a.height);
+            var c = this.h.a()[1];
+            var d = 240;
+            if (this.a0 == true) {
+                d = 270;
+            }
+            var e = a.bottom + d;
+            if (c < e) {
+                var f = a.top - d;
+                if (f < 0) {
+                    if (this.u.r != 1) {
+                        this.u.r = 1;
+                        this.u.b7(b);
+                    }
+                }
+                else {
+                    if (this.u.r != 2) {
+                        this.u.r = 2;
+                        this.u.b7(b);
+                    }
+                }
+            }
+            else {
+                if (this.u.r != 1) {
+                    this.u.r = 1;
+                    this.u.b7(b);
+                }
+            }
+        }
+    };
     DatePicker.prototype.cq = function () {
         var _this = this;
         if (this.u != null) {

package/esm5/lib/igc-date-picker-component.js

@@ -260,11 +260,11 @@ var IgcDatePickerComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the color to use for the text.
         */
         get: function () {
-            return brushToString(this.i.dv);
+            return brushToString(this.i.dw);
         },
         set: function (v) {
-            this.i.dv = stringToBrush(v);
-            this._a("labelTextColor", brushToString(this.i.dv));
+            this.i.dw = stringToBrush(v);
+            this._a("labelTextColor", brushToString(this.i.dw));
         },
         enumerable: false,
         configurable: true
@@ -379,11 +379,11 @@ var IgcDatePickerComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or Sets the text color
         */
         get: function () {
-            return brushToString(this.i.dw);
+            return brushToString(this.i.dx);
         },
         set: function (v) {
-            this.i.dw = stringToBrush(v);
-            this._a("textColor", brushToString(this.i.dw));
+            this.i.dx = stringToBrush(v);
+            this._a("textColor", brushToString(this.i.dx));
         },
         enumerable: false,
         configurable: true
@@ -393,11 +393,11 @@ var IgcDatePickerComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or Sets the text color
         */
         get: function () {
-            return brushToString(this.i.du);
+            return brushToString(this.i.dv);
         },
         set: function (v) {
-            this.i.du = stringToBrush(v);
-            this._a("iconColor", brushToString(this.i.du));
+            this.i.dv = stringToBrush(v);
+            this._a("iconColor", brushToString(this.i.dv));
         },
         enumerable: false,
         configurable: true