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

package/fesm2015/igniteui-webcomponents-inputs.js

@@ -21684,6 +21684,7 @@ 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() {
         }
@@ -21697,6 +21698,7 @@ 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;
@@ -21711,6 +21713,7 @@ 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() {
@@ -21937,7 +21940,10 @@ 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());
@@ -22001,7 +22007,7 @@ 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();
@@ -22009,8 +22015,8 @@ 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;
@@ -22111,13 +22117,13 @@ 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);
             }
         }
@@ -22191,24 +22197,24 @@ 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() {
@@ -22437,7 +22443,7 @@ let DatePicker = /*@__PURE__*/ (() => {
                     }
                     break;
                 case "TextStyle":
-                    this.dm();
+                    this.dn();
                     break;
                 case "ShowClearButton":
                     if (this.o != null) {
@@ -22450,7 +22456,7 @@ let DatePicker = /*@__PURE__*/ (() => {
                 case "LabelTextStyle":
                 case "TextColor":
                 case "IconColor":
-                    this.dn();
+                    this.dp();
                     break;
                 case "ShowTodayButton":
                     if (this.c != null) {
@@ -22600,18 +22606,18 @@ 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;
             }
         }
@@ -22619,7 +22625,7 @@ let DatePicker = /*@__PURE__*/ (() => {
             if (this.q != null) {
             }
         }
-        dm() {
+        dn() {
             if (this.aa != null) {
                 this.o.af = this.aa;
             }
@@ -22632,7 +22638,7 @@ 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 != "") {
@@ -22646,7 +22652,7 @@ 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;
@@ -22662,7 +22668,7 @@ 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);
@@ -22672,7 +22678,7 @@ 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);
@@ -22688,7 +22694,7 @@ 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();
@@ -22697,7 +22703,7 @@ 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();
@@ -22727,10 +22733,10 @@ 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;
@@ -22852,7 +22858,7 @@ let DatePicker = /*@__PURE__*/ (() => {
                     this.dl();
                 }
                 else {
-                    this.dp(ag);
+                    this.dq(ag);
                     this.h.av();
                 }
             }
@@ -22865,7 +22871,7 @@ let DatePicker = /*@__PURE__*/ (() => {
                 }
             }
         }
-        dp(a) {
+        dq(a) {
             let b = this.value;
             this.value = a;
         }
@@ -23132,7 +23138,7 @@ 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) {
@@ -23160,10 +23166,43 @@ 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);
@@ -23577,11 +23616,11 @@ 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.
@@ -23664,21 +23703,21 @@ 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/fesm5/igniteui-webcomponents-inputs.js

@@ -26151,6 +26151,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 () {
@@ -26169,6 +26170,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;
@@ -26183,6 +26185,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 () {
@@ -26409,7 +26412,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());
@@ -26472,7 +26478,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();
@@ -26480,8 +26486,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;
@@ -26599,14 +26605,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);
             }
         },
@@ -26711,29 +26717,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,
@@ -27021,7 +27027,7 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
                 }
                 break;
             case "TextStyle":
-                this.dm();
+                this.dn();
                 break;
             case "ShowClearButton":
                 if (this.o != null) {
@@ -27034,7 +27040,7 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             case "LabelTextStyle":
             case "TextColor":
             case "IconColor":
-                this.dn();
+                this.dp();
                 break;
             case "ShowTodayButton":
                 if (this.c != null) {
@@ -27184,18 +27190,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;
         }
     };
@@ -27203,7 +27209,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;
         }
@@ -27216,7 +27222,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 != "") {
@@ -27230,7 +27236,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;
@@ -27246,7 +27252,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);
@@ -27256,7 +27262,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);
@@ -27272,7 +27278,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();
@@ -27281,7 +27287,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();
@@ -27311,10 +27317,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;
@@ -27436,7 +27442,7 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
                 this.dl();
             }
             else {
-                this.dp(ag);
+                this.dq(ag);
                 this.h.av();
             }
         }
@@ -27449,7 +27455,7 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             }
         }
     };
-    DatePicker.prototype.dp = function (a) {
+    DatePicker.prototype.dq = function (a) {
         var b = this.value;
         this.value = a;
     };
@@ -27716,7 +27722,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) {
@@ -27744,10 +27750,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) {
@@ -28205,11 +28244,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
@@ -28324,11 +28363,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
@@ -28338,11 +28377,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