igniteui-webcomponents-inputs 1.4.2 → 3.2.0

package/bundles/igniteui-webcomponents-inputs.umd.js

@@ -1371,7 +1371,7 @@
             this.n.append(d);
             var h = this.k.createElement("div");
             h.addClass("ig-button-content");
-            h.setStyleProperty("font-family", "'Segoe UI', Verdana");
+            h.setStyleProperty("font-family", "Verdana");
             h.setStyleProperty("font-weight", "400");
             h.setStyleProperty("font-size", ".875rem");
             h.setStyleProperty("cursor", "pointer");
@@ -9402,7 +9402,7 @@
                     c.setStyleProperty("border-color", "rgb(163, 172, 184)");
                     var d = this.m.createElement("span");
                     d.setAttribute("aria-hidden", "true");
-                    d.setStyleProperty("font", "14px \"Segoe UI\", Verdana");
+                    d.setStyleProperty("font", "14px Verdana");
                     d.setStyleProperty("color", "rgb(24, 29, 31)");
                     c.append(d);
                     this.i.add(d);
@@ -9492,7 +9492,7 @@
                             l.setStyleProperty("vertical-align", "middle");
                             l.setStyleProperty("width", "12%");
                             var m = this.m.createElement("span");
-                            m.setStyleProperty("font", "16px \"Segoe UI\", Verdana");
+                            m.setStyleProperty("font", "16px Verdana");
                             m.setStyleProperty("color", "rgb(24, 29, 31)");
                             l.append(m);
                             this.e.add(m);
@@ -13128,7 +13128,7 @@
             a.l("actualBorderColor : " + this.b.serialize() + ", ");
             a.l("actualBorderWidth : " + this.o + ", ");
             a.l("actualFocusBorderWidth : " + this.p + ", ");
-            a.l("actualContentPadding : { left: " + this.aa.c + ",top: " + this.aa.e + ",right: " + this.aa.d + ",bottom: " + this.aa.b + "},");
+            a.l("actualContentPadding : { left: " + this.aa.left + ",top: " + this.aa.top + ",right: " + this.aa.right + ",bottom: " + this.aa.bottom + "},");
             a.l("actualUnderlineWidth : " + this.x + ", ");
             a.l("actualUnderlineRippleWidth : " + this.w + ", ");
             a.l("actualBackgroundColor : " + this.a.serialize() + ", ");
@@ -14319,7 +14319,7 @@
             igniteuiWebcomponentsCore.NativeUI.o(this.k.rootWrapper, this.c.cz);
             c.setStyleProperty("outline-style", "none");
             c.setStyleProperty("box-shadow", "none");
-            c.setStyleProperty("font-family", "'Segoe UI', Verdana");
+            c.setStyleProperty("font-family", "Verdana");
             c.setStyleProperty("font-size", "1rem");
             this.l = c;
             this.k.append(this.l);
@@ -14514,7 +14514,7 @@
             enumerable: true,
             configurable: true
         });
-        Object.defineProperty(InputView.prototype, "a4", {
+        Object.defineProperty(InputView.prototype, "a5", {
             get: function () {
                 return null;
             },
@@ -14579,7 +14579,7 @@
             c.setStyleProperty("box-shadow", "none");
             c.setStyleProperty("border-top", "0.1875rem solid transparent");
             c.setStyleProperty("padding-bottom", "0.1875rem");
-            c.setStyleProperty("font-family", "'Segoe UI', Verdana");
+            c.setStyleProperty("font-family", "Verdana");
             c.setStyleProperty("font-size", "1rem");
             this.h.add(c.listen("change", igniteuiWebcomponentsCore.runOn(this, this.v)));
             this.h.add(c.listen("input", igniteuiWebcomponentsCore.runOn(this, this.w)));
@@ -14601,7 +14601,7 @@
             this.j.append(this.k);
             this.b.dd();
         };
-        InputView.prototype.av = function (a) {
+        InputView.prototype.aw = function (a) {
             if (a) {
                 this.k.setAttribute("readonly", a.toString());
             }
@@ -14637,7 +14637,7 @@
         InputView.prototype.aq = function () {
             this.k.setAttribute("placeholder", this.b.cb);
         };
-        InputView.prototype.a0 = function () {
+        InputView.prototype.a1 = function () {
             switch (this.b.w) {
                 case 1:
                     this.k.setStyleProperty("height", "2rem");
@@ -14653,7 +14653,7 @@
                     break;
             }
         };
-        InputView.prototype.az = function () {
+        InputView.prototype.a0 = function () {
             var _this = this;
             var a = new igniteuiWebcomponentsCore.TransformGroup();
             a.j.add(((function () {
@@ -14678,6 +14678,9 @@
         InputView.prototype.at = function (a) {
             this.k.setProperty("value", a);
         };
+        InputView.prototype.av = function (a) {
+            this.k.setAttribute("name", a);
+        };
         InputView.prototype.u = function (a) {
             this.b.cr();
         };
@@ -14685,20 +14688,20 @@
             this.b.cz();
         };
         InputView.prototype.af = function (a) {
-            var b = this.a3(a);
+            var b = this.a4(a);
             this.b.c5(b);
             if (b.handled) {
                 a.preventDefault();
             }
         };
         InputView.prototype.ag = function (a) {
-            var b = this.a3(a);
+            var b = this.a4(a);
             this.b.c8(b);
             if (b.handled) {
                 a.preventDefault();
             }
         };
-        InputView.prototype.a3 = function (a) {
+        InputView.prototype.a4 = function (a) {
             var b = new igniteuiWebcomponentsCore.MouseButtonEventArgs();
             b.position = { $type: igniteuiWebcomponentsCore.Point_$type, x: a.offsetX, y: a.offsetY };
             return b;
@@ -14730,7 +14733,7 @@
         InputView.prototype.aa = function (a) {
             this.b.cy();
         };
-        InputView.prototype.a1 = function (a) {
+        InputView.prototype.a2 = function (a) {
             if (this.p != a) {
                 this.p = a;
                 if (this.l != null) {
@@ -14751,10 +14754,10 @@
             var a = this.k.getProperty("selectionEnd");
             return igniteuiWebcomponentsCore.typeGetValue(a);
         };
-        InputView.prototype.ay = function (a) {
+        InputView.prototype.az = function (a) {
             this.k.setProperty("selectionStart", a);
         };
-        InputView.prototype.aw = function (a) {
+        InputView.prototype.ax = function (a) {
             this.k.setProperty("selectionEnd", a);
         };
         InputView.prototype.ap = function () {
@@ -14808,7 +14811,7 @@
             }
             this.h.clear();
         };
-        InputView.prototype.a2 = function (a) {
+        InputView.prototype.a3 = function (a) {
             if (a != null) {
                 this.k.setStyleProperty("font", a.fontString);
             }
@@ -14830,7 +14833,7 @@
                 nativeInput_.getNativeElement().select();
             }
         };
-        InputView.prototype.ax = function (a, b) {
+        InputView.prototype.ay = function (a, b) {
             if (this.k != null) {
                 var c = this.k.getNativeElement();
                 c.setSelectionRange(a, b);
@@ -15802,7 +15805,7 @@
             return new igniteuiWebcomponentsCore.CornerRadius(1, !igniteuiWebcomponentsCore.isNaN_(a.c) ? a.c : b.c, !igniteuiWebcomponentsCore.isNaN_(a.d) ? a.d : b.d, !igniteuiWebcomponentsCore.isNaN_(a.b) ? a.b : b.b, !igniteuiWebcomponentsCore.isNaN_(a.a) ? a.a : b.a);
         };
         XInputGroup.tj = function (a, b) {
-            return new igniteuiWebcomponentsCore.Thickness(1, !igniteuiWebcomponentsCore.isNaN_(a.c) ? a.c : b.c, !igniteuiWebcomponentsCore.isNaN_(a.e) ? a.e : b.e, !igniteuiWebcomponentsCore.isNaN_(a.d) ? a.d : b.d, !igniteuiWebcomponentsCore.isNaN_(a.b) ? a.b : b.b);
+            return new igniteuiWebcomponentsCore.Thickness(1, !igniteuiWebcomponentsCore.isNaN_(a.left) ? a.left : b.left, !igniteuiWebcomponentsCore.isNaN_(a.top) ? a.top : b.top, !igniteuiWebcomponentsCore.isNaN_(a.right) ? a.right : b.right, !igniteuiWebcomponentsCore.isNaN_(a.bottom) ? a.bottom : b.bottom);
         };
         XInputGroup.prototype.mq = function () {
             var _this = this;
@@ -16032,7 +16035,7 @@
             configurable: true
         });
         XInputGroup.prototype.onChildrenMutated = function () {
-            this.l3(function (a) { return a.view.az(); });
+            this.l3(function (a) { return a.view.a0(); });
             this.l4(function (a) { return a.view.af(); });
             this.l5(function (a) { return a.view.q(); });
             this.l6(function (a) { return a.view.q(); });
@@ -17986,7 +17989,7 @@
             this.view.ag();
         };
         XInputGroup.prototype.ensureShift = function () {
-            this.l3(function (a) { return a.view.az(); });
+            this.l3(function (a) { return a.view.a0(); });
             this.l4(function (a) { return a.view.af(); });
             this.l5(function (a) { return a.view.q(); });
             this.l6(function (a) { return a.view.q(); });
@@ -19176,7 +19179,7 @@
             _this.view = a;
             _this.view.ao();
             XInput.ab = new igniteuiWebcomponentsCore.FontInfo();
-            XInput.ab.n = "'Segoe UI', Verdana";
+            XInput.ab.n = "Verdana";
             return _this;
         }
         Object.defineProperty(XInput.prototype, "view", {
@@ -19300,12 +19303,15 @@
                         }
                     }
                     break;
+                case "Name":
+                    this.view.av(this.e);
+                    break;
                 case "Density":
                     this.w = this.x == 0 ? 1 : this.x;
                     break;
                 case "ActualDensity":
+                    this.view.a1();
                     this.view.a0();
-                    this.view.az();
                     break;
                 case "InputGroup":
                     this.c0();
@@ -19331,7 +19337,7 @@
                     this.view.au(this.aj);
                     break;
                 case "IsReadOnly":
-                    this.view.av(this.al);
+                    this.view.aw(this.al);
                     break;
             }
         };
@@ -19342,10 +19348,10 @@
             this.view.as();
         };
         XInput.prototype.db = function () {
-            this.view.az();
+            this.view.a0();
         };
         XInput.prototype.c0 = function () {
-            this.view.az();
+            this.view.a0();
         };
         XInput.prototype.dm = function () {
             this.du = this.dy != null ? this.dy : XInput.dw;
@@ -19354,7 +19360,7 @@
         };
         XInput.prototype.dl = function () {
             if (this.aa != null) {
-                this.view.a2(this.aa);
+                this.view.a3(this.aa);
             }
             igniteuiWebcomponentsCore.NativeUI.o(this.view.o, this.du);
         };
@@ -19814,7 +19820,7 @@
             return a;
         };
         XInput.prototype.di = function (a, b) {
-            this.view.ax(a, b);
+            this.view.ay(a, b);
         };
         XInput.prototype.provideContainer = function (a) {
             this.view.al(a);
@@ -19891,7 +19897,7 @@
                 return this.a7();
             },
             set: function (a) {
-                this.view.ay(a);
+                this.view.az(a);
             },
             enumerable: true,
             configurable: true
@@ -19901,7 +19907,7 @@
                 return this.a6();
             },
             set: function (a) {
-                this.view.aw(a);
+                this.view.ax(a);
             },
             enumerable: true,
             configurable: true
@@ -21985,12 +21991,12 @@
         };
         Object.defineProperty(IgcXInputGroupComponent.prototype, "actualContentPaddingBottom", {
             get: function () {
-                return this.i.tg ? this.i.tg.b : NaN;
+                return this.i.tg ? this.i.tg.bottom : NaN;
             },
             set: function (v) {
                 this.ensureActualContentPadding();
-                this.i.tg.b = +v;
-                this._a("actualContentPaddingBottom", this.i.tg.b);
+                this.i.tg.bottom = +v;
+                this._a("actualContentPaddingBottom", this.i.tg.bottom);
                 this.i.tg = this.i.tg;
             },
             enumerable: true,
@@ -21998,12 +22004,12 @@
         });
         Object.defineProperty(IgcXInputGroupComponent.prototype, "actualContentPaddingLeft", {
             get: function () {
-                return this.i.tg ? this.i.tg.c : NaN;
+                return this.i.tg ? this.i.tg.left : NaN;
             },
             set: function (v) {
                 this.ensureActualContentPadding();
-                this.i.tg.c = +v;
-                this._a("actualContentPaddingLeft", this.i.tg.c);
+                this.i.tg.left = +v;
+                this._a("actualContentPaddingLeft", this.i.tg.left);
                 this.i.tg = this.i.tg;
             },
             enumerable: true,
@@ -22011,12 +22017,12 @@
         });
         Object.defineProperty(IgcXInputGroupComponent.prototype, "actualContentPaddingRight", {
             get: function () {
-                return this.i.tg ? this.i.tg.d : NaN;
+                return this.i.tg ? this.i.tg.right : NaN;
             },
             set: function (v) {
                 this.ensureActualContentPadding();
-                this.i.tg.d = +v;
-                this._a("actualContentPaddingRight", this.i.tg.d);
+                this.i.tg.right = +v;
+                this._a("actualContentPaddingRight", this.i.tg.right);
                 this.i.tg = this.i.tg;
             },
             enumerable: true,
@@ -22024,12 +22030,12 @@
         });
         Object.defineProperty(IgcXInputGroupComponent.prototype, "actualContentPaddingTop", {
             get: function () {
-                return this.i.tg ? this.i.tg.e : NaN;
+                return this.i.tg ? this.i.tg.top : NaN;
             },
             set: function (v) {
                 this.ensureActualContentPadding();
-                this.i.tg.e = +v;
-                this._a("actualContentPaddingTop", this.i.tg.e);
+                this.i.tg.top = +v;
+                this._a("actualContentPaddingTop", this.i.tg.top);
                 this.i.tg = this.i.tg;
             },
             enumerable: true,
@@ -22325,12 +22331,12 @@
         };
         Object.defineProperty(IgcXInputGroupComponent.prototype, "contentPaddingBottom", {
             get: function () {
-                return this.i.tk ? this.i.tk.b : NaN;
+                return this.i.tk ? this.i.tk.bottom : NaN;
             },
             set: function (v) {
                 this.ensureContentPadding();
-                this.i.tk.b = +v;
-                this._a("contentPaddingBottom", this.i.tk.b);
+                this.i.tk.bottom = +v;
+                this._a("contentPaddingBottom", this.i.tk.bottom);
                 this.i.tk = this.i.tk;
             },
             enumerable: true,
@@ -22338,12 +22344,12 @@
         });
         Object.defineProperty(IgcXInputGroupComponent.prototype, "contentPaddingLeft", {
             get: function () {
-                return this.i.tk ? this.i.tk.c : NaN;
+                return this.i.tk ? this.i.tk.left : NaN;
             },
             set: function (v) {
                 this.ensureContentPadding();
-                this.i.tk.c = +v;
-                this._a("contentPaddingLeft", this.i.tk.c);
+                this.i.tk.left = +v;
+                this._a("contentPaddingLeft", this.i.tk.left);
                 this.i.tk = this.i.tk;
             },
             enumerable: true,
@@ -22351,12 +22357,12 @@
         });
         Object.defineProperty(IgcXInputGroupComponent.prototype, "contentPaddingRight", {
             get: function () {
-                return this.i.tk ? this.i.tk.d : NaN;
+                return this.i.tk ? this.i.tk.right : NaN;
             },
             set: function (v) {
                 this.ensureContentPadding();
-                this.i.tk.d = +v;
-                this._a("contentPaddingRight", this.i.tk.d);
+                this.i.tk.right = +v;
+                this._a("contentPaddingRight", this.i.tk.right);
                 this.i.tk = this.i.tk;
             },
             enumerable: true,
@@ -22364,12 +22370,12 @@
         });
         Object.defineProperty(IgcXInputGroupComponent.prototype, "contentPaddingTop", {
             get: function () {
-                return this.i.tk ? this.i.tk.e : NaN;
+                return this.i.tk ? this.i.tk.top : NaN;
             },
             set: function (v) {
                 this.ensureContentPadding();
-                this.i.tk.e = +v;
-                this._a("contentPaddingTop", this.i.tk.e);
+                this.i.tk.top = +v;
+                this._a("contentPaddingTop", this.i.tk.top);
                 this.i.tk = this.i.tk;
             },
             enumerable: true,
@@ -22679,12 +22685,12 @@
         };
         Object.defineProperty(IgcXInputGroupComponent.prototype, "lineTypeContentPaddingBottom", {
             get: function () {
-                return this.i.t0 ? this.i.t0.b : NaN;
+                return this.i.t0 ? this.i.t0.bottom : NaN;
             },
             set: function (v) {
                 this.ensureLineTypeContentPadding();
-                this.i.t0.b = +v;
-                this._a("lineTypeContentPaddingBottom", this.i.t0.b);
+                this.i.t0.bottom = +v;
+                this._a("lineTypeContentPaddingBottom", this.i.t0.bottom);
                 this.i.t0 = this.i.t0;
             },
             enumerable: true,
@@ -22692,12 +22698,12 @@
         });
         Object.defineProperty(IgcXInputGroupComponent.prototype, "lineTypeContentPaddingLeft", {
             get: function () {
-                return this.i.t0 ? this.i.t0.c : NaN;
+                return this.i.t0 ? this.i.t0.left : NaN;
             },
             set: function (v) {
                 this.ensureLineTypeContentPadding();
-                this.i.t0.c = +v;
-                this._a("lineTypeContentPaddingLeft", this.i.t0.c);
+                this.i.t0.left = +v;
+                this._a("lineTypeContentPaddingLeft", this.i.t0.left);
                 this.i.t0 = this.i.t0;
             },
             enumerable: true,
@@ -22705,12 +22711,12 @@
         });
         Object.defineProperty(IgcXInputGroupComponent.prototype, "lineTypeContentPaddingRight", {
             get: function () {
-                return this.i.t0 ? this.i.t0.d : NaN;
+                return this.i.t0 ? this.i.t0.right : NaN;
             },
             set: function (v) {
                 this.ensureLineTypeContentPadding();
-                this.i.t0.d = +v;
-                this._a("lineTypeContentPaddingRight", this.i.t0.d);
+                this.i.t0.right = +v;
+                this._a("lineTypeContentPaddingRight", this.i.t0.right);
                 this.i.t0 = this.i.t0;
             },
             enumerable: true,
@@ -22718,12 +22724,12 @@
         });
         Object.defineProperty(IgcXInputGroupComponent.prototype, "lineTypeContentPaddingTop", {
             get: function () {
-                return this.i.t0 ? this.i.t0.e : NaN;
+                return this.i.t0 ? this.i.t0.top : NaN;
             },
             set: function (v) {
                 this.ensureLineTypeContentPadding();
-                this.i.t0.e = +v;
-                this._a("lineTypeContentPaddingTop", this.i.t0.e);
+                this.i.t0.top = +v;
+                this._a("lineTypeContentPaddingTop", this.i.t0.top);
                 this.i.t0 = this.i.t0;
             },
             enumerable: true,
@@ -23033,12 +23039,12 @@
         };
         Object.defineProperty(IgcXInputGroupComponent.prototype, "boxTypeContentPaddingBottom", {
             get: function () {
-                return this.i.ti ? this.i.ti.b : NaN;
+                return this.i.ti ? this.i.ti.bottom : NaN;
             },
             set: function (v) {
                 this.ensureBoxTypeContentPadding();
-                this.i.ti.b = +v;
-                this._a("boxTypeContentPaddingBottom", this.i.ti.b);
+                this.i.ti.bottom = +v;
+                this._a("boxTypeContentPaddingBottom", this.i.ti.bottom);
                 this.i.ti = this.i.ti;
             },
             enumerable: true,
@@ -23046,12 +23052,12 @@
         });
         Object.defineProperty(IgcXInputGroupComponent.prototype, "boxTypeContentPaddingLeft", {
             get: function () {
-                return this.i.ti ? this.i.ti.c : NaN;
+                return this.i.ti ? this.i.ti.left : NaN;
             },
             set: function (v) {
                 this.ensureBoxTypeContentPadding();
-                this.i.ti.c = +v;
-                this._a("boxTypeContentPaddingLeft", this.i.ti.c);
+                this.i.ti.left = +v;
+                this._a("boxTypeContentPaddingLeft", this.i.ti.left);
                 this.i.ti = this.i.ti;
             },
             enumerable: true,
@@ -23059,12 +23065,12 @@
         });
         Object.defineProperty(IgcXInputGroupComponent.prototype, "boxTypeContentPaddingRight", {
             get: function () {
-                return this.i.ti ? this.i.ti.d : NaN;
+                return this.i.ti ? this.i.ti.right : NaN;
             },
             set: function (v) {
                 this.ensureBoxTypeContentPadding();
-                this.i.ti.d = +v;
-                this._a("boxTypeContentPaddingRight", this.i.ti.d);
+                this.i.ti.right = +v;
+                this._a("boxTypeContentPaddingRight", this.i.ti.right);
                 this.i.ti = this.i.ti;
             },
             enumerable: true,
@@ -23072,12 +23078,12 @@
         });
         Object.defineProperty(IgcXInputGroupComponent.prototype, "boxTypeContentPaddingTop", {
             get: function () {
-                return this.i.ti ? this.i.ti.e : NaN;
+                return this.i.ti ? this.i.ti.top : NaN;
             },
             set: function (v) {
                 this.ensureBoxTypeContentPadding();
-                this.i.ti.e = +v;
-                this._a("boxTypeContentPaddingTop", this.i.ti.e);
+                this.i.ti.top = +v;
+                this._a("boxTypeContentPaddingTop", this.i.ti.top);
                 this.i.ti = this.i.ti;
             },
             enumerable: true,
@@ -23387,12 +23393,12 @@
         };
         Object.defineProperty(IgcXInputGroupComponent.prototype, "borderTypeContentPaddingBottom", {
             get: function () {
-                return this.i.th ? this.i.th.b : NaN;
+                return this.i.th ? this.i.th.bottom : NaN;
             },
             set: function (v) {
                 this.ensureBorderTypeContentPadding();
-                this.i.th.b = +v;
-                this._a("borderTypeContentPaddingBottom", this.i.th.b);
+                this.i.th.bottom = +v;
+                this._a("borderTypeContentPaddingBottom", this.i.th.bottom);
                 this.i.th = this.i.th;
             },
             enumerable: true,
@@ -23400,12 +23406,12 @@
         });
         Object.defineProperty(IgcXInputGroupComponent.prototype, "borderTypeContentPaddingLeft", {
             get: function () {
-                return this.i.th ? this.i.th.c : NaN;
+                return this.i.th ? this.i.th.left : NaN;
             },
             set: function (v) {
                 this.ensureBorderTypeContentPadding();
-                this.i.th.c = +v;
-                this._a("borderTypeContentPaddingLeft", this.i.th.c);
+                this.i.th.left = +v;
+                this._a("borderTypeContentPaddingLeft", this.i.th.left);
                 this.i.th = this.i.th;
             },
             enumerable: true,
@@ -23413,12 +23419,12 @@
         });
         Object.defineProperty(IgcXInputGroupComponent.prototype, "borderTypeContentPaddingRight", {
             get: function () {
-                return this.i.th ? this.i.th.d : NaN;
+                return this.i.th ? this.i.th.right : NaN;
             },
             set: function (v) {
                 this.ensureBorderTypeContentPadding();
-                this.i.th.d = +v;
-                this._a("borderTypeContentPaddingRight", this.i.th.d);
+                this.i.th.right = +v;
+                this._a("borderTypeContentPaddingRight", this.i.th.right);
                 this.i.th = this.i.th;
             },
             enumerable: true,
@@ -23426,12 +23432,12 @@
         });
         Object.defineProperty(IgcXInputGroupComponent.prototype, "borderTypeContentPaddingTop", {
             get: function () {
-                return this.i.th ? this.i.th.e : NaN;
+                return this.i.th ? this.i.th.top : NaN;
             },
             set: function (v) {
                 this.ensureBorderTypeContentPadding();
-                this.i.th.e = +v;
-                this._a("borderTypeContentPaddingTop", this.i.th.e);
+                this.i.th.top = +v;
+                this._a("borderTypeContentPaddingTop", this.i.th.top);
                 this.i.th = this.i.th;
             },
             enumerable: true,
@@ -23741,12 +23747,12 @@
         };
         Object.defineProperty(IgcXInputGroupComponent.prototype, "searchTypeContentPaddingBottom", {
             get: function () {
-                return this.i.t1 ? this.i.t1.b : NaN;
+                return this.i.t1 ? this.i.t1.bottom : NaN;
             },
             set: function (v) {
                 this.ensureSearchTypeContentPadding();
-                this.i.t1.b = +v;
-                this._a("searchTypeContentPaddingBottom", this.i.t1.b);
+                this.i.t1.bottom = +v;
+                this._a("searchTypeContentPaddingBottom", this.i.t1.bottom);
                 this.i.t1 = this.i.t1;
             },
             enumerable: true,
@@ -23754,12 +23760,12 @@
         });
         Object.defineProperty(IgcXInputGroupComponent.prototype, "searchTypeContentPaddingLeft", {
             get: function () {
-                return this.i.t1 ? this.i.t1.c : NaN;
+                return this.i.t1 ? this.i.t1.left : NaN;
             },
             set: function (v) {
                 this.ensureSearchTypeContentPadding();
-                this.i.t1.c = +v;
-                this._a("searchTypeContentPaddingLeft", this.i.t1.c);
+                this.i.t1.left = +v;
+                this._a("searchTypeContentPaddingLeft", this.i.t1.left);
                 this.i.t1 = this.i.t1;
             },
             enumerable: true,
@@ -23767,12 +23773,12 @@
         });
         Object.defineProperty(IgcXInputGroupComponent.prototype, "searchTypeContentPaddingRight", {
             get: function () {
-                return this.i.t1 ? this.i.t1.d : NaN;
+                return this.i.t1 ? this.i.t1.right : NaN;
             },
             set: function (v) {
                 this.ensureSearchTypeContentPadding();
-                this.i.t1.d = +v;
-                this._a("searchTypeContentPaddingRight", this.i.t1.d);
+                this.i.t1.right = +v;
+                this._a("searchTypeContentPaddingRight", this.i.t1.right);
                 this.i.t1 = this.i.t1;
             },
             enumerable: true,
@@ -23780,12 +23786,12 @@
         });
         Object.defineProperty(IgcXInputGroupComponent.prototype, "searchTypeContentPaddingTop", {
             get: function () {
-                return this.i.t1 ? this.i.t1.e : NaN;
+                return this.i.t1 ? this.i.t1.top : NaN;
             },
             set: function (v) {
                 this.ensureSearchTypeContentPadding();
-                this.i.t1.e = +v;
-                this._a("searchTypeContentPaddingTop", this.i.t1.e);
+                this.i.t1.top = +v;
+                this._a("searchTypeContentPaddingTop", this.i.t1.top);
                 this.i.t1 = this.i.t1;
             },
             enumerable: true,
@@ -24493,6 +24499,7 @@
                 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");
@@ -24628,6 +24635,9 @@
             return this.e;
         };
         DatePickerView.prototype.y = function (a) {
+            if (this.b.aq == true) {
+                return;
+            }
             this.b.cb();
             if (this.f != null) {
                 this.f.hide();
@@ -24723,7 +24733,7 @@
             _this.az = igniteuiWebcomponentsCore.dateMinValue();
             _this.ay = igniteuiWebcomponentsCore.dateMinValue();
             _this.a9 = "";
-            _this.c9 = igniteuiWebcomponentsCore.BrushUtil.g(255, 24, 29, 31);
+            _this.da = igniteuiWebcomponentsCore.BrushUtil.g(255, 24, 29, 31);
             _this.z = null;
             _this.bb = "";
             _this.aw = igniteuiWebcomponentsCore.dateMinValue();
@@ -24731,8 +24741,8 @@
             _this.x = 2;
             _this.v = 1;
             _this.aa = null;
-            _this.da = igniteuiWebcomponentsCore.BrushUtil.g(255, 24, 29, 31);
-            _this.c8 = igniteuiWebcomponentsCore.BrushUtil.g(255, 163, 172, 184);
+            _this.db = igniteuiWebcomponentsCore.BrushUtil.g(255, 24, 29, 31);
+            _this.c9 = igniteuiWebcomponentsCore.BrushUtil.g(255, 163, 172, 184);
             _this.ak = true;
             _this.al = false;
             _this.ag = true;
@@ -24760,7 +24770,7 @@
                 this.ah = true;
                 this.cc();
             }
-            this.c3();
+            this.c4();
             if (this.selectedValueChanged != null) {
                 this.selectedValueChanged(this, ((function () {
                     var $ret = new SelectedValueChangedEventArgs();
@@ -24786,6 +24796,9 @@
         DatePicker.prototype.provideContainer = function (a) {
             this.h.af(a);
         };
+        DatePicker.prototype.setName = function (a) {
+            this.o.e = a;
+        };
         Object.defineProperty(DatePicker.prototype, "af", {
             get: function () {
                 if (this.ae == null) {
@@ -24840,14 +24853,14 @@
             enumerable: true,
             configurable: true
         });
-        Object.defineProperty(DatePicker.prototype, "dc", {
+        Object.defineProperty(DatePicker.prototype, "dd", {
             get: function () {
-                return this.c9;
+                return this.da;
             },
             set: function (a) {
-                var b = this.c9;
-                this.c9 = a;
-                if (b != this.c9) {
+                var b = this.da;
+                this.da = a;
+                if (b != this.da) {
                     this.cu("LabelTextColor", b, a);
                 }
             },
@@ -24952,29 +24965,29 @@
             enumerable: true,
             configurable: true
         });
-        Object.defineProperty(DatePicker.prototype, "dd", {
+        Object.defineProperty(DatePicker.prototype, "de", {
             get: function () {
-                return this.da;
+                return this.db;
             },
             set: function (a) {
-                var b = this.da;
-                this.da = a;
-                if (b != this.da) {
-                    this.cu("TextColor", b, this.da);
+                var b = this.db;
+                this.db = a;
+                if (b != this.db) {
+                    this.cu("TextColor", b, this.db);
                 }
             },
             enumerable: true,
             configurable: true
         });
-        Object.defineProperty(DatePicker.prototype, "db", {
+        Object.defineProperty(DatePicker.prototype, "dc", {
             get: function () {
-                return this.c8;
+                return this.c9;
             },
             set: function (a) {
-                var b = this.c8;
-                this.c8 = a;
-                if (b != this.c8) {
-                    this.cu("IconColor", b, this.c8);
+                var b = this.c9;
+                this.c9 = a;
+                if (b != this.c9) {
+                    this.cu("IconColor", b, this.c9);
                 }
             },
             enumerable: true,
@@ -25132,7 +25145,7 @@
                     this.c0();
                     break;
                 case "BaseTheme":
-                    this.c1();
+                    this.c2();
                     break;
                 case "Value":
                     if (+(this.value) != +(igniteuiWebcomponentsCore.dateMinValue())) {
@@ -25200,7 +25213,7 @@
                     }
                     break;
                 case "TextStyle":
-                    this.c4();
+                    this.c5();
                     break;
                 case "ShowClearButton":
                     if (this.o != null) {
@@ -25213,7 +25226,7 @@
                 case "LabelTextStyle":
                 case "TextColor":
                 case "IconColor":
-                    this.c5();
+                    this.c6();
                     break;
                 case "ShowTodayButton":
                     if (this.c != null) {
@@ -25228,11 +25241,11 @@
                 case "OpenOnFocus": break;
                 case "DateFormat":
                     this.a.k(this.e);
-                    this.c3();
+                    this.c4();
                     break;
                 case "FormatString":
                     this.ca();
-                    this.c3();
+                    this.c4();
                     break;
                 case "FirstDayOfWeek":
                     if (this.c != null) {
@@ -25348,26 +25361,26 @@
                 }
             }
         };
-        DatePicker.prototype.c5 = function () {
+        DatePicker.prototype.c6 = function () {
             if (this.o != null) {
-                this.o.dy = this.dd;
+                this.o.dy = this.de;
             }
             if (this.m != null) {
-                this.m.fill = this.db;
+                this.m.fill = this.dc;
             }
             if (this.n != null) {
-                this.n.fill = this.db;
+                this.n.fill = this.dc;
             }
             if (this.r != null) {
-                this.r.df = this.dc;
+                this.r.df = this.dd;
                 this.r.y = this.ac;
             }
         };
-        DatePicker.prototype.c2 = function () {
+        DatePicker.prototype.c3 = function () {
             if (this.q != null) {
             }
         };
-        DatePicker.prototype.c4 = function () {
+        DatePicker.prototype.c5 = function () {
             if (this.aa != null) {
                 this.o.ac = this.aa;
             }
@@ -25380,7 +25393,7 @@
             this.q.n = this.y;
             this.r = new XLabel();
             this.h.al(this.r);
-            this.r.df = this.dc;
+            this.r.df = this.dd;
             this.r.y = this.ac;
             this.q.appendContentChild(this.h.u());
             if (this.bs != null && this.bs != "") {
@@ -25394,7 +25407,7 @@
                 this.o.ac = this.aa;
             }
             this.o.disabled = !this.ap;
-            this.o.dy = this.dd;
+            this.o.dy = this.de;
             this.q.appendContentChild(this.h.t());
             this.q.inputs.add(this.o);
             this.o.cb = this.bz;
@@ -25410,17 +25423,17 @@
             this.m = new XIcon();
             this.h.ai(this.m, this.h.p());
             this.m.svgPath = DatePicker.bh;
-            this.m.fill = this.db;
+            this.m.fill = this.dc;
             d.appendContentChild(this.h.p());
             this.q.appendContentChild(this.h.q());
             this.q.inputs.add(d);
-            this.c3();
+            this.c4();
             var e = new XSuffix();
             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.db;
+            this.n.fill = this.dc;
             e.appendContentChild(this.h.r());
             this.q.appendContentChild(this.h.s());
             this.q.inputs.add(e);
@@ -25436,7 +25449,7 @@
                 case 9:
                     this.an = true;
                     if (!this.ao) {
-                        this.c7(this.o.cj);
+                        this.c8(this.o.cj);
                     }
                     this.ah = true;
                     this.cc();
@@ -25445,7 +25458,7 @@
                 case 13:
                     this.an = true;
                     if (!this.ao) {
-                        this.c7(this.o.cj);
+                        this.c8(this.o.cj);
                     }
                     this.ah = true;
                     this.cc();
@@ -25475,10 +25488,10 @@
         };
         DatePicker.prototype.ck = function (a, b) {
             this.ao = true;
-            this.c7(b.value);
+            this.c8(b.value);
             this.ao = false;
         };
-        DatePicker.prototype.c7 = function (a) {
+        DatePicker.prototype.c8 = function (a) {
             var b = ['/', '-', ' ', '.', ','];
             var c = igniteuiWebcomponentsCore.stringSplit(a, b, 1);
             var d = 0;
@@ -25597,10 +25610,10 @@
                 var ah = igniteuiWebcomponentsCore.Base.compareSimple(ag, this.a1);
                 var ai = igniteuiWebcomponentsCore.Base.compareSimple(ag, this.a0);
                 if (ah < 0 || ai > 0) {
-                    this.c3();
+                    this.c4();
                 }
                 else {
-                    this.c6(ag);
+                    this.c7(ag);
                     this.h.ao();
                 }
             }
@@ -25609,15 +25622,15 @@
                     this.cb();
                 }
                 else {
-                    this.c3();
+                    this.c4();
                 }
             }
         };
-        DatePicker.prototype.c6 = function (a) {
+        DatePicker.prototype.c7 = function (a) {
             var b = this.value;
             this.value = a;
         };
-        DatePicker.prototype.c3 = function () {
+        DatePicker.prototype.c4 = function () {
             if (this.o != null) {
                 if (+(this.az) != +(igniteuiWebcomponentsCore.dateMinValue())) {
                     var a = "";
@@ -25807,6 +25820,9 @@
             }
         };
         DatePicker.prototype.cb = function () {
+            if (this.aq == true) {
+                return;
+            }
             if (this.o != null) {
                 this.o.cj = "";
             }
@@ -25945,7 +25961,7 @@
             var a = new LostFocusEventArgs();
             this.ct(a);
         };
-        DatePicker.prototype.c1 = function () {
+        DatePicker.prototype.c2 = function () {
         };
         DatePicker.prototype.c0 = function () {
         };
@@ -26193,6 +26209,12 @@
         IgcDatePickerComponent.prototype.afterContentInit = function () {
             this.i.notifySizeChanged();
         };
+        IgcDatePickerComponent.prototype.attributeSynced = function (name, value) {
+            // an attribute was set by the component renderer.
+            if (name === 'name') {
+                this.i.setName(value);
+            }
+        };
         Object.defineProperty(IgcDatePickerComponent.prototype, "i", {
             /**
              * @hidden
@@ -26320,11 +26342,11 @@
              * Gets or sets the color to use for the text.
             */
             get: function () {
-                return igniteuiWebcomponentsCore.brushToString(this.i.dc);
+                return igniteuiWebcomponentsCore.brushToString(this.i.dd);
             },
             set: function (v) {
-                this.i.dc = igniteuiWebcomponentsCore.stringToBrush(v);
-                this._a("labelTextColor", igniteuiWebcomponentsCore.brushToString(this.i.dc));
+                this.i.dd = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("labelTextColor", igniteuiWebcomponentsCore.brushToString(this.i.dd));
             },
             enumerable: true,
             configurable: true
@@ -26439,11 +26461,11 @@
              * Gets or Sets the text color
             */
             get: function () {
-                return igniteuiWebcomponentsCore.brushToString(this.i.dd);
+                return igniteuiWebcomponentsCore.brushToString(this.i.de);
             },
             set: function (v) {
-                this.i.dd = igniteuiWebcomponentsCore.stringToBrush(v);
-                this._a("textColor", igniteuiWebcomponentsCore.brushToString(this.i.dd));
+                this.i.de = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("textColor", igniteuiWebcomponentsCore.brushToString(this.i.de));
             },
             enumerable: true,
             configurable: true
@@ -26453,11 +26475,11 @@
              * Gets or Sets the text color
             */
             get: function () {
-                return igniteuiWebcomponentsCore.brushToString(this.i.db);
+                return igniteuiWebcomponentsCore.brushToString(this.i.dc);
             },
             set: function (v) {
-                this.i.db = igniteuiWebcomponentsCore.stringToBrush(v);
-                this._a("iconColor", igniteuiWebcomponentsCore.brushToString(this.i.db));
+                this.i.dc = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("iconColor", igniteuiWebcomponentsCore.brushToString(this.i.dc));
             },
             enumerable: true,
             configurable: true
@@ -27141,7 +27163,7 @@
             d.append(h);
             var l = this.l.createElement("span");
             l.addClass("ig-checkbox-label");
-            l.setStyleProperty("font-family", "'Segoe UI', Verdana");
+            l.setStyleProperty("font-family", "Verdana");
             l.setStyleProperty("font-weight", "400");
             l.setStyleProperty("font-size", "1rem");
             l.setStyleProperty("letter-spacing", ".00937rem");