igniteui-webcomponents-inputs 1.4.2 → 3.2.0

package/fesm5/igniteui-webcomponents-inputs.js

@@ -1369,7 +1369,7 @@ var ButtonView = /** @class */ /*@__PURE__*/ (function (_super) {
         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");
@@ -9400,7 +9400,7 @@ var CalendarView = /** @class */ /*@__PURE__*/ (function (_super) {
                 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);
@@ -9490,7 +9490,7 @@ var CalendarView = /** @class */ /*@__PURE__*/ (function (_super) {
                         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);
@@ -13126,7 +13126,7 @@ var InputGroupVisualModelExport = /** @class */ /*@__PURE__*/ (function (_super)
         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() + ", ");
@@ -14317,7 +14317,7 @@ var LabelView = /** @class */ /*@__PURE__*/ (function (_super) {
         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);
@@ -14512,7 +14512,7 @@ var InputView = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(InputView.prototype, "a4", {
+    Object.defineProperty(InputView.prototype, "a5", {
         get: function () {
             return null;
         },
@@ -14577,7 +14577,7 @@ var InputView = /** @class */ /*@__PURE__*/ (function (_super) {
         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", runOn(this, this.v)));
         this.h.add(c.listen("input", runOn(this, this.w)));
@@ -14599,7 +14599,7 @@ var InputView = /** @class */ /*@__PURE__*/ (function (_super) {
         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());
         }
@@ -14635,7 +14635,7 @@ var InputView = /** @class */ /*@__PURE__*/ (function (_super) {
     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");
@@ -14651,7 +14651,7 @@ var InputView = /** @class */ /*@__PURE__*/ (function (_super) {
                 break;
         }
     };
-    InputView.prototype.az = function () {
+    InputView.prototype.a0 = function () {
         var _this = this;
         var a = new TransformGroup();
         a.j.add(((function () {
@@ -14676,6 +14676,9 @@ var InputView = /** @class */ /*@__PURE__*/ (function (_super) {
     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();
     };
@@ -14683,20 +14686,20 @@ var InputView = /** @class */ /*@__PURE__*/ (function (_super) {
         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 MouseButtonEventArgs();
         b.position = { $type: Point_$type, x: a.offsetX, y: a.offsetY };
         return b;
@@ -14728,7 +14731,7 @@ var InputView = /** @class */ /*@__PURE__*/ (function (_super) {
     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) {
@@ -14749,10 +14752,10 @@ var InputView = /** @class */ /*@__PURE__*/ (function (_super) {
         var a = this.k.getProperty("selectionEnd");
         return 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 () {
@@ -14806,7 +14809,7 @@ var InputView = /** @class */ /*@__PURE__*/ (function (_super) {
         }
         this.h.clear();
     };
-    InputView.prototype.a2 = function (a) {
+    InputView.prototype.a3 = function (a) {
         if (a != null) {
             this.k.setStyleProperty("font", a.fontString);
         }
@@ -14828,7 +14831,7 @@ var InputView = /** @class */ /*@__PURE__*/ (function (_super) {
             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);
@@ -15800,7 +15803,7 @@ var XInputGroup = /** @class */ /*@__PURE__*/ (function (_super) {
         return new CornerRadius(1, !isNaN_(a.c) ? a.c : b.c, !isNaN_(a.d) ? a.d : b.d, !isNaN_(a.b) ? a.b : b.b, !isNaN_(a.a) ? a.a : b.a);
     };
     XInputGroup.tj = function (a, b) {
-        return new Thickness(1, !isNaN_(a.c) ? a.c : b.c, !isNaN_(a.e) ? a.e : b.e, !isNaN_(a.d) ? a.d : b.d, !isNaN_(a.b) ? a.b : b.b);
+        return new Thickness(1, !isNaN_(a.left) ? a.left : b.left, !isNaN_(a.top) ? a.top : b.top, !isNaN_(a.right) ? a.right : b.right, !isNaN_(a.bottom) ? a.bottom : b.bottom);
     };
     XInputGroup.prototype.mq = function () {
         var _this = this;
@@ -16030,7 +16033,7 @@ var XInputGroup = /** @class */ /*@__PURE__*/ (function (_super) {
         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(); });
@@ -17984,7 +17987,7 @@ var XInputGroup = /** @class */ /*@__PURE__*/ (function (_super) {
         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(); });
@@ -19174,7 +19177,7 @@ var XInput = /** @class */ /*@__PURE__*/ (function (_super) {
         _this.view = a;
         _this.view.ao();
         XInput.ab = new FontInfo();
-        XInput.ab.n = "'Segoe UI', Verdana";
+        XInput.ab.n = "Verdana";
         return _this;
     }
     Object.defineProperty(XInput.prototype, "view", {
@@ -19298,12 +19301,15 @@ var XInput = /** @class */ /*@__PURE__*/ (function (_super) {
                     }
                 }
                 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();
@@ -19329,7 +19335,7 @@ var XInput = /** @class */ /*@__PURE__*/ (function (_super) {
                 this.view.au(this.aj);
                 break;
             case "IsReadOnly":
-                this.view.av(this.al);
+                this.view.aw(this.al);
                 break;
         }
     };
@@ -19340,10 +19346,10 @@ var XInput = /** @class */ /*@__PURE__*/ (function (_super) {
         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;
@@ -19352,7 +19358,7 @@ var XInput = /** @class */ /*@__PURE__*/ (function (_super) {
     };
     XInput.prototype.dl = function () {
         if (this.aa != null) {
-            this.view.a2(this.aa);
+            this.view.a3(this.aa);
         }
         NativeUI.o(this.view.o, this.du);
     };
@@ -19812,7 +19818,7 @@ var XInput = /** @class */ /*@__PURE__*/ (function (_super) {
         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);
@@ -19889,7 +19895,7 @@ var XInput = /** @class */ /*@__PURE__*/ (function (_super) {
             return this.a7();
         },
         set: function (a) {
-            this.view.ay(a);
+            this.view.az(a);
         },
         enumerable: true,
         configurable: true
@@ -19899,7 +19905,7 @@ var XInput = /** @class */ /*@__PURE__*/ (function (_super) {
             return this.a6();
         },
         set: function (a) {
-            this.view.aw(a);
+            this.view.ax(a);
         },
         enumerable: true,
         configurable: true
@@ -21983,12 +21989,12 @@ var IgcXInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     };
     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,
@@ -21996,12 +22002,12 @@ var IgcXInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     });
     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,
@@ -22009,12 +22015,12 @@ var IgcXInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     });
     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,
@@ -22022,12 +22028,12 @@ var IgcXInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     });
     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,
@@ -22323,12 +22329,12 @@ var IgcXInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     };
     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,
@@ -22336,12 +22342,12 @@ var IgcXInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     });
     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,
@@ -22349,12 +22355,12 @@ var IgcXInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     });
     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,
@@ -22362,12 +22368,12 @@ var IgcXInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     });
     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,
@@ -22677,12 +22683,12 @@ var IgcXInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     };
     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,
@@ -22690,12 +22696,12 @@ var IgcXInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     });
     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,
@@ -22703,12 +22709,12 @@ var IgcXInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     });
     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,
@@ -22716,12 +22722,12 @@ var IgcXInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     });
     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,
@@ -23031,12 +23037,12 @@ var IgcXInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     };
     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,
@@ -23044,12 +23050,12 @@ var IgcXInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     });
     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,
@@ -23057,12 +23063,12 @@ var IgcXInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     });
     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,
@@ -23070,12 +23076,12 @@ var IgcXInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     });
     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,
@@ -23385,12 +23391,12 @@ var IgcXInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     };
     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,
@@ -23398,12 +23404,12 @@ var IgcXInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     });
     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,
@@ -23411,12 +23417,12 @@ var IgcXInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     });
     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,
@@ -23424,12 +23430,12 @@ var IgcXInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     });
     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,
@@ -23739,12 +23745,12 @@ var IgcXInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     };
     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,
@@ -23752,12 +23758,12 @@ var IgcXInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     });
     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,
@@ -23765,12 +23771,12 @@ var IgcXInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     });
     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,
@@ -23778,12 +23784,12 @@ var IgcXInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     });
     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,
@@ -24491,6 +24497,7 @@ var DatePickerView = /** @class */ /*@__PURE__*/ (function (_super) {
             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");
@@ -24626,6 +24633,9 @@ var DatePickerView = /** @class */ /*@__PURE__*/ (function (_super) {
         return this.e;
     };
     DatePickerView.prototype.y = function (a) {
+        if (this.b.aq == true) {
+            return;
+        }
         this.b.cb();
         if (this.f != null) {
             this.f.hide();
@@ -24721,7 +24731,7 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         _this.az = dateMinValue();
         _this.ay = dateMinValue();
         _this.a9 = "";
-        _this.c9 = BrushUtil.g(255, 24, 29, 31);
+        _this.da = BrushUtil.g(255, 24, 29, 31);
         _this.z = null;
         _this.bb = "";
         _this.aw = dateMinValue();
@@ -24729,8 +24739,8 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         _this.x = 2;
         _this.v = 1;
         _this.aa = null;
-        _this.da = BrushUtil.g(255, 24, 29, 31);
-        _this.c8 = BrushUtil.g(255, 163, 172, 184);
+        _this.db = BrushUtil.g(255, 24, 29, 31);
+        _this.c9 = BrushUtil.g(255, 163, 172, 184);
         _this.ak = true;
         _this.al = false;
         _this.ag = true;
@@ -24758,7 +24768,7 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             this.ah = true;
             this.cc();
         }
-        this.c3();
+        this.c4();
         if (this.selectedValueChanged != null) {
             this.selectedValueChanged(this, ((function () {
                 var $ret = new SelectedValueChangedEventArgs();
@@ -24784,6 +24794,9 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
     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) {
@@ -24838,14 +24851,14 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DatePicker.prototype, "dc", {
+    Object.defineProperty(DatePicker.prototype, "dd", {
         get: function () {
-            return this.c9;
+            return this.da;
         },
         set: function (a) {
-            var b = this.c9;
-            this.c9 = a;
-            if (b != this.c9) {
+            var b = this.da;
+            this.da = a;
+            if (b != this.da) {
                 this.cu("LabelTextColor", b, a);
             }
         },
@@ -24950,29 +24963,29 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DatePicker.prototype, "dd", {
+    Object.defineProperty(DatePicker.prototype, "de", {
         get: function () {
-            return this.da;
+            return this.db;
         },
         set: function (a) {
-            var b = this.da;
-            this.da = a;
-            if (b != this.da) {
-                this.cu("TextColor", b, this.da);
+            var b = this.db;
+            this.db = a;
+            if (b != this.db) {
+                this.cu("TextColor", b, this.db);
             }
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DatePicker.prototype, "db", {
+    Object.defineProperty(DatePicker.prototype, "dc", {
         get: function () {
-            return this.c8;
+            return this.c9;
         },
         set: function (a) {
-            var b = this.c8;
-            this.c8 = a;
-            if (b != this.c8) {
-                this.cu("IconColor", b, this.c8);
+            var b = this.c9;
+            this.c9 = a;
+            if (b != this.c9) {
+                this.cu("IconColor", b, this.c9);
             }
         },
         enumerable: true,
@@ -25130,7 +25143,7 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
                 this.c0();
                 break;
             case "BaseTheme":
-                this.c1();
+                this.c2();
                 break;
             case "Value":
                 if (+(this.value) != +(dateMinValue())) {
@@ -25198,7 +25211,7 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
                 }
                 break;
             case "TextStyle":
-                this.c4();
+                this.c5();
                 break;
             case "ShowClearButton":
                 if (this.o != null) {
@@ -25211,7 +25224,7 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             case "LabelTextStyle":
             case "TextColor":
             case "IconColor":
-                this.c5();
+                this.c6();
                 break;
             case "ShowTodayButton":
                 if (this.c != null) {
@@ -25226,11 +25239,11 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             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) {
@@ -25346,26 +25359,26 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             }
         }
     };
-    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;
         }
@@ -25378,7 +25391,7 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         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 != "") {
@@ -25392,7 +25405,7 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             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;
@@ -25408,17 +25421,17 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         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);
@@ -25434,7 +25447,7 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             case 9:
                 this.an = true;
                 if (!this.ao) {
-                    this.c7(this.o.cj);
+                    this.c8(this.o.cj);
                 }
                 this.ah = true;
                 this.cc();
@@ -25443,7 +25456,7 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             case 13:
                 this.an = true;
                 if (!this.ao) {
-                    this.c7(this.o.cj);
+                    this.c8(this.o.cj);
                 }
                 this.ah = true;
                 this.cc();
@@ -25473,10 +25486,10 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
     };
     DatePicker.prototype.ck = function (a, b) {
         this.ao = true;
-        this.c7(b.value);
+        this.c8(b.value);
         this.ao = false;
     };
-    DatePicker.prototype.c7 = function (a) {
+    DatePicker.prototype.c8 = function (a) {
         var b = ['/', '-', ' ', '.', ','];
         var c = stringSplit(a, b, 1);
         var d = 0;
@@ -25595,10 +25608,10 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
             var ah = Base.compareSimple(ag, this.a1);
             var ai = Base.compareSimple(ag, this.a0);
             if (ah < 0 || ai > 0) {
-                this.c3();
+                this.c4();
             }
             else {
-                this.c6(ag);
+                this.c7(ag);
                 this.h.ao();
             }
         }
@@ -25607,15 +25620,15 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
                 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) != +(dateMinValue())) {
                 var a = "";
@@ -25805,6 +25818,9 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         }
     };
     DatePicker.prototype.cb = function () {
+        if (this.aq == true) {
+            return;
+        }
         if (this.o != null) {
             this.o.cj = "";
         }
@@ -25943,7 +25959,7 @@ var DatePicker = /** @class */ /*@__PURE__*/ (function (_super) {
         var a = new LostFocusEventArgs();
         this.ct(a);
     };
-    DatePicker.prototype.c1 = function () {
+    DatePicker.prototype.c2 = function () {
     };
     DatePicker.prototype.c0 = function () {
     };
@@ -26191,6 +26207,12 @@ var IgcDatePickerComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     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
@@ -26318,11 +26340,11 @@ var IgcDatePickerComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the color to use for the text.
         */
         get: function () {
-            return brushToString(this.i.dc);
+            return brushToString(this.i.dd);
         },
         set: function (v) {
-            this.i.dc = stringToBrush(v);
-            this._a("labelTextColor", brushToString(this.i.dc));
+            this.i.dd = stringToBrush(v);
+            this._a("labelTextColor", brushToString(this.i.dd));
         },
         enumerable: true,
         configurable: true
@@ -26437,11 +26459,11 @@ var IgcDatePickerComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or Sets the text color
         */
         get: function () {
-            return brushToString(this.i.dd);
+            return brushToString(this.i.de);
         },
         set: function (v) {
-            this.i.dd = stringToBrush(v);
-            this._a("textColor", brushToString(this.i.dd));
+            this.i.de = stringToBrush(v);
+            this._a("textColor", brushToString(this.i.de));
         },
         enumerable: true,
         configurable: true
@@ -26451,11 +26473,11 @@ var IgcDatePickerComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or Sets the text color
         */
         get: function () {
-            return brushToString(this.i.db);
+            return brushToString(this.i.dc);
         },
         set: function (v) {
-            this.i.db = stringToBrush(v);
-            this._a("iconColor", brushToString(this.i.db));
+            this.i.dc = stringToBrush(v);
+            this._a("iconColor", brushToString(this.i.dc));
         },
         enumerable: true,
         configurable: true
@@ -27139,7 +27161,7 @@ var CheckboxView = /** @class */ /*@__PURE__*/ (function (_super) {
         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");