igniteui-webcomponents-inputs 1.4.2 → 3.2.0

package/fesm2015/igniteui-webcomponents-inputs.js

@@ -1172,7 +1172,7 @@ let ButtonView = /*@__PURE__*/ (() => {
             this.n.append(d);
             let 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");
@@ -7576,7 +7576,7 @@ let CalendarView = /*@__PURE__*/ (() => {
                     c.setStyleProperty("border-color", "rgb(163, 172, 184)");
                     let 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);
@@ -7666,7 +7666,7 @@ let CalendarView = /*@__PURE__*/ (() => {
                             l.setStyleProperty("vertical-align", "middle");
                             l.setStyleProperty("width", "12%");
                             let 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);
@@ -11047,7 +11047,7 @@ let InputGroupVisualModelExport = /*@__PURE__*/ (() => {
             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() + ", ");
@@ -12004,7 +12004,7 @@ let LabelView = /*@__PURE__*/ (() => {
             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);
@@ -12177,7 +12177,7 @@ let InputView = /*@__PURE__*/ (() => {
         get o() {
             return this.k;
         }
-        get a4() {
+        get a5() {
             return null;
         }
         get g() {
@@ -12217,7 +12217,7 @@ let InputView = /*@__PURE__*/ (() => {
             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)));
@@ -12239,7 +12239,7 @@ let InputView = /*@__PURE__*/ (() => {
             this.j.append(this.k);
             this.b.dd();
         }
-        av(a) {
+        aw(a) {
             if (a) {
                 this.k.setAttribute("readonly", a.toString());
             }
@@ -12275,7 +12275,7 @@ let InputView = /*@__PURE__*/ (() => {
         aq() {
             this.k.setAttribute("placeholder", this.b.cb);
         }
-        a0() {
+        a1() {
             switch (this.b.w) {
                 case 1:
                     this.k.setStyleProperty("height", "2rem");
@@ -12291,7 +12291,7 @@ let InputView = /*@__PURE__*/ (() => {
                     break;
             }
         }
-        az() {
+        a0() {
             let a = new TransformGroup();
             a.j.add(((() => {
                 let $ret = new TranslateTransform();
@@ -12315,6 +12315,9 @@ let InputView = /*@__PURE__*/ (() => {
         at(a) {
             this.k.setProperty("value", a);
         }
+        av(a) {
+            this.k.setAttribute("name", a);
+        }
         u(a) {
             this.b.cr();
         }
@@ -12322,20 +12325,20 @@ let InputView = /*@__PURE__*/ (() => {
             this.b.cz();
         }
         af(a) {
-            let b = this.a3(a);
+            let b = this.a4(a);
             this.b.c5(b);
             if (b.handled) {
                 a.preventDefault();
             }
         }
         ag(a) {
-            let b = this.a3(a);
+            let b = this.a4(a);
             this.b.c8(b);
             if (b.handled) {
                 a.preventDefault();
             }
         }
-        a3(a) {
+        a4(a) {
             let b = new MouseButtonEventArgs();
             b.position = { $type: Point_$type, x: a.offsetX, y: a.offsetY };
             return b;
@@ -12367,7 +12370,7 @@ let InputView = /*@__PURE__*/ (() => {
         aa(a) {
             this.b.cy();
         }
-        a1(a) {
+        a2(a) {
             if (this.p != a) {
                 this.p = a;
                 if (this.l != null) {
@@ -12388,10 +12391,10 @@ let InputView = /*@__PURE__*/ (() => {
             let a = this.k.getProperty("selectionEnd");
             return typeGetValue(a);
         }
-        ay(a) {
+        az(a) {
             this.k.setProperty("selectionStart", a);
         }
-        aw(a) {
+        ax(a) {
             this.k.setProperty("selectionEnd", a);
         }
         ap() {
@@ -12428,7 +12431,7 @@ let InputView = /*@__PURE__*/ (() => {
             }
             this.h.clear();
         }
-        a2(a) {
+        a3(a) {
             if (a != null) {
                 this.k.setStyleProperty("font", a.fontString);
             }
@@ -12450,7 +12453,7 @@ let InputView = /*@__PURE__*/ (() => {
                 nativeInput_.getNativeElement().select();
             }
         }
-        ax(a, b) {
+        ay(a, b) {
             if (this.k != null) {
                 let c = this.k.getNativeElement();
                 c.setSelectionRange(a, b);
@@ -13312,7 +13315,7 @@ let XInputGroup = /*@__PURE__*/ (() => {
             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);
         }
         static tj(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);
         }
         mq() {
             this.l4((a) => {
@@ -13534,7 +13537,7 @@ let XInputGroup = /*@__PURE__*/ (() => {
             return a;
         }
         onChildrenMutated() {
-            this.l3((a) => a.view.az());
+            this.l3((a) => a.view.a0());
             this.l4((a) => a.view.af());
             this.l5((a) => a.view.q());
             this.l6((a) => a.view.q());
@@ -15002,7 +15005,7 @@ let XInputGroup = /*@__PURE__*/ (() => {
             this.view.ag();
         }
         ensureShift() {
-            this.l3((a) => a.view.az());
+            this.l3((a) => a.view.a0());
             this.l4((a) => a.view.af());
             this.l5((a) => a.view.q());
             this.l6((a) => a.view.q());
@@ -16044,7 +16047,7 @@ let XInput = /*@__PURE__*/ (() => {
             this.view = a;
             this.view.ao();
             XInput.ab = new FontInfo();
-            XInput.ab.n = "'Segoe UI', Verdana";
+            XInput.ab.n = "Verdana";
         }
         get view() {
             return this._view;
@@ -16139,12 +16142,15 @@ let XInput = /*@__PURE__*/ (() => {
                         }
                     }
                     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();
@@ -16170,7 +16176,7 @@ let XInput = /*@__PURE__*/ (() => {
                     this.view.au(this.aj);
                     break;
                 case "IsReadOnly":
-                    this.view.av(this.al);
+                    this.view.aw(this.al);
                     break;
             }
         }
@@ -16181,10 +16187,10 @@ let XInput = /*@__PURE__*/ (() => {
             this.view.as();
         }
         db() {
-            this.view.az();
+            this.view.a0();
         }
         c0() {
-            this.view.az();
+            this.view.a0();
         }
         dm() {
             this.du = this.dy != null ? this.dy : XInput.dw;
@@ -16193,7 +16199,7 @@ let XInput = /*@__PURE__*/ (() => {
         }
         dl() {
             if (this.aa != null) {
-                this.view.a2(this.aa);
+                this.view.a3(this.aa);
             }
             NativeUI.o(this.view.o, this.du);
         }
@@ -16579,7 +16585,7 @@ let XInput = /*@__PURE__*/ (() => {
             return a;
         }
         di(a, b) {
-            this.view.ax(a, b);
+            this.view.ay(a, b);
         }
         provideContainer(a) {
             this.view.al(a);
@@ -16651,13 +16657,13 @@ let XInput = /*@__PURE__*/ (() => {
             return this.a7();
         }
         set selectionStart(a) {
-            this.view.ay(a);
+            this.view.az(a);
         }
         get selectionEnd() {
             return this.a6();
         }
         set selectionEnd(a) {
-            this.view.aw(a);
+            this.view.ax(a);
         }
         get au() {
             return this.am;
@@ -18338,39 +18344,39 @@ let IgcXInputGroupComponent = /*@__PURE__*/ (() => {
             this.i.m0 = new CornerRadius(2);
         }
         get actualContentPaddingBottom() {
-            return this.i.tg ? this.i.tg.b : NaN;
+            return this.i.tg ? this.i.tg.bottom : NaN;
         }
         set actualContentPaddingBottom(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;
         }
         get actualContentPaddingLeft() {
-            return this.i.tg ? this.i.tg.c : NaN;
+            return this.i.tg ? this.i.tg.left : NaN;
         }
         set actualContentPaddingLeft(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;
         }
         get actualContentPaddingRight() {
-            return this.i.tg ? this.i.tg.d : NaN;
+            return this.i.tg ? this.i.tg.right : NaN;
         }
         set actualContentPaddingRight(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;
         }
         get actualContentPaddingTop() {
-            return this.i.tg ? this.i.tg.e : NaN;
+            return this.i.tg ? this.i.tg.top : NaN;
         }
         set actualContentPaddingTop(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;
         }
         ensureActualContentPadding() {
@@ -18582,39 +18588,39 @@ let IgcXInputGroupComponent = /*@__PURE__*/ (() => {
             this.i.m4 = new CornerRadius(2);
         }
         get contentPaddingBottom() {
-            return this.i.tk ? this.i.tk.b : NaN;
+            return this.i.tk ? this.i.tk.bottom : NaN;
         }
         set contentPaddingBottom(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;
         }
         get contentPaddingLeft() {
-            return this.i.tk ? this.i.tk.c : NaN;
+            return this.i.tk ? this.i.tk.left : NaN;
         }
         set contentPaddingLeft(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;
         }
         get contentPaddingRight() {
-            return this.i.tk ? this.i.tk.d : NaN;
+            return this.i.tk ? this.i.tk.right : NaN;
         }
         set contentPaddingRight(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;
         }
         get contentPaddingTop() {
-            return this.i.tk ? this.i.tk.e : NaN;
+            return this.i.tk ? this.i.tk.top : NaN;
         }
         set contentPaddingTop(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;
         }
         ensureContentPadding() {
@@ -18836,39 +18842,39 @@ let IgcXInputGroupComponent = /*@__PURE__*/ (() => {
             this.i.nk = new CornerRadius(2);
         }
         get lineTypeContentPaddingBottom() {
-            return this.i.t0 ? this.i.t0.b : NaN;
+            return this.i.t0 ? this.i.t0.bottom : NaN;
         }
         set lineTypeContentPaddingBottom(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;
         }
         get lineTypeContentPaddingLeft() {
-            return this.i.t0 ? this.i.t0.c : NaN;
+            return this.i.t0 ? this.i.t0.left : NaN;
         }
         set lineTypeContentPaddingLeft(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;
         }
         get lineTypeContentPaddingRight() {
-            return this.i.t0 ? this.i.t0.d : NaN;
+            return this.i.t0 ? this.i.t0.right : NaN;
         }
         set lineTypeContentPaddingRight(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;
         }
         get lineTypeContentPaddingTop() {
-            return this.i.t0 ? this.i.t0.e : NaN;
+            return this.i.t0 ? this.i.t0.top : NaN;
         }
         set lineTypeContentPaddingTop(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;
         }
         ensureLineTypeContentPadding() {
@@ -19090,39 +19096,39 @@ let IgcXInputGroupComponent = /*@__PURE__*/ (() => {
             this.i.m2 = new CornerRadius(2);
         }
         get boxTypeContentPaddingBottom() {
-            return this.i.ti ? this.i.ti.b : NaN;
+            return this.i.ti ? this.i.ti.bottom : NaN;
         }
         set boxTypeContentPaddingBottom(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;
         }
         get boxTypeContentPaddingLeft() {
-            return this.i.ti ? this.i.ti.c : NaN;
+            return this.i.ti ? this.i.ti.left : NaN;
         }
         set boxTypeContentPaddingLeft(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;
         }
         get boxTypeContentPaddingRight() {
-            return this.i.ti ? this.i.ti.d : NaN;
+            return this.i.ti ? this.i.ti.right : NaN;
         }
         set boxTypeContentPaddingRight(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;
         }
         get boxTypeContentPaddingTop() {
-            return this.i.ti ? this.i.ti.e : NaN;
+            return this.i.ti ? this.i.ti.top : NaN;
         }
         set boxTypeContentPaddingTop(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;
         }
         ensureBoxTypeContentPadding() {
@@ -19344,39 +19350,39 @@ let IgcXInputGroupComponent = /*@__PURE__*/ (() => {
             this.i.m1 = new CornerRadius(2);
         }
         get borderTypeContentPaddingBottom() {
-            return this.i.th ? this.i.th.b : NaN;
+            return this.i.th ? this.i.th.bottom : NaN;
         }
         set borderTypeContentPaddingBottom(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;
         }
         get borderTypeContentPaddingLeft() {
-            return this.i.th ? this.i.th.c : NaN;
+            return this.i.th ? this.i.th.left : NaN;
         }
         set borderTypeContentPaddingLeft(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;
         }
         get borderTypeContentPaddingRight() {
-            return this.i.th ? this.i.th.d : NaN;
+            return this.i.th ? this.i.th.right : NaN;
         }
         set borderTypeContentPaddingRight(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;
         }
         get borderTypeContentPaddingTop() {
-            return this.i.th ? this.i.th.e : NaN;
+            return this.i.th ? this.i.th.top : NaN;
         }
         set borderTypeContentPaddingTop(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;
         }
         ensureBorderTypeContentPadding() {
@@ -19598,39 +19604,39 @@ let IgcXInputGroupComponent = /*@__PURE__*/ (() => {
             this.i.nl = new CornerRadius(2);
         }
         get searchTypeContentPaddingBottom() {
-            return this.i.t1 ? this.i.t1.b : NaN;
+            return this.i.t1 ? this.i.t1.bottom : NaN;
         }
         set searchTypeContentPaddingBottom(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;
         }
         get searchTypeContentPaddingLeft() {
-            return this.i.t1 ? this.i.t1.c : NaN;
+            return this.i.t1 ? this.i.t1.left : NaN;
         }
         set searchTypeContentPaddingLeft(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;
         }
         get searchTypeContentPaddingRight() {
-            return this.i.t1 ? this.i.t1.d : NaN;
+            return this.i.t1 ? this.i.t1.right : NaN;
         }
         set searchTypeContentPaddingRight(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;
         }
         get searchTypeContentPaddingTop() {
-            return this.i.t1 ? this.i.t1.e : NaN;
+            return this.i.t1 ? this.i.t1.top : NaN;
         }
         set searchTypeContentPaddingTop(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;
         }
         ensureSearchTypeContentPadding() {
@@ -20240,6 +20246,7 @@ let DatePickerView = /*@__PURE__*/ (() => {
                 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");
@@ -20375,6 +20382,9 @@ let DatePickerView = /*@__PURE__*/ (() => {
             return this.e;
         }
         y(a) {
+            if (this.b.aq == true) {
+                return;
+            }
             this.b.cb();
             if (this.f != null) {
                 this.f.hide();
@@ -20471,7 +20481,7 @@ let DatePicker = /*@__PURE__*/ (() => {
             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();
@@ -20479,8 +20489,8 @@ let DatePicker = /*@__PURE__*/ (() => {
             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;
@@ -20507,7 +20517,7 @@ let DatePicker = /*@__PURE__*/ (() => {
                 this.ah = true;
                 this.cc();
             }
-            this.c3();
+            this.c4();
             if (this.selectedValueChanged != null) {
                 this.selectedValueChanged(this, ((() => {
                     let $ret = new SelectedValueChangedEventArgs();
@@ -20533,6 +20543,9 @@ let DatePicker = /*@__PURE__*/ (() => {
         provideContainer(a) {
             this.h.af(a);
         }
+        setName(a) {
+            this.o.e = a;
+        }
         get af() {
             if (this.ae == null) {
                 this.ae = new SRProvider(this.h.d);
@@ -20571,13 +20584,13 @@ let DatePicker = /*@__PURE__*/ (() => {
                 this.cu("Label", b, this.a9);
             }
         }
-        get dc() {
-            return this.c9;
+        get dd() {
+            return this.da;
         }
-        set dc(a) {
-            let b = this.c9;
-            this.c9 = a;
-            if (b != this.c9) {
+        set dd(a) {
+            let b = this.da;
+            this.da = a;
+            if (b != this.da) {
                 this.cu("LabelTextColor", b, a);
             }
         }
@@ -20651,24 +20664,24 @@ let DatePicker = /*@__PURE__*/ (() => {
                 this.cu("TextStyle", b, this.aa);
             }
         }
-        get dd() {
-            return this.da;
+        get de() {
+            return this.db;
         }
-        set dd(a) {
-            let b = this.da;
-            this.da = a;
-            if (b != this.da) {
-                this.cu("TextColor", b, this.da);
+        set de(a) {
+            let b = this.db;
+            this.db = a;
+            if (b != this.db) {
+                this.cu("TextColor", b, this.db);
             }
         }
-        get db() {
-            return this.c8;
+        get dc() {
+            return this.c9;
         }
-        set db(a) {
-            let b = this.c8;
-            this.c8 = a;
-            if (b != this.c8) {
-                this.cu("IconColor", b, this.c8);
+        set dc(a) {
+            let b = this.c9;
+            this.c9 = a;
+            if (b != this.c9) {
+                this.cu("IconColor", b, this.c9);
             }
         }
         get as() {
@@ -20783,7 +20796,7 @@ let DatePicker = /*@__PURE__*/ (() => {
                     this.c0();
                     break;
                 case "BaseTheme":
-                    this.c1();
+                    this.c2();
                     break;
                 case "Value":
                     if (+(this.value) != +(dateMinValue())) {
@@ -20851,7 +20864,7 @@ let DatePicker = /*@__PURE__*/ (() => {
                     }
                     break;
                 case "TextStyle":
-                    this.c4();
+                    this.c5();
                     break;
                 case "ShowClearButton":
                     if (this.o != null) {
@@ -20864,7 +20877,7 @@ let DatePicker = /*@__PURE__*/ (() => {
                 case "LabelTextStyle":
                 case "TextColor":
                 case "IconColor":
-                    this.c5();
+                    this.c6();
                     break;
                 case "ShowTodayButton":
                     if (this.c != null) {
@@ -20879,11 +20892,11 @@ let DatePicker = /*@__PURE__*/ (() => {
                 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) {
@@ -20999,26 +21012,26 @@ let DatePicker = /*@__PURE__*/ (() => {
                 }
             }
         }
-        c5() {
+        c6() {
             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;
             }
         }
-        c2() {
+        c3() {
             if (this.q != null) {
             }
         }
-        c4() {
+        c5() {
             if (this.aa != null) {
                 this.o.ac = this.aa;
             }
@@ -21031,7 +21044,7 @@ let DatePicker = /*@__PURE__*/ (() => {
             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 != "") {
@@ -21045,7 +21058,7 @@ let DatePicker = /*@__PURE__*/ (() => {
                 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;
@@ -21061,17 +21074,17 @@ let DatePicker = /*@__PURE__*/ (() => {
             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();
             let 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);
@@ -21087,7 +21100,7 @@ let DatePicker = /*@__PURE__*/ (() => {
                 case 9:
                     this.an = true;
                     if (!this.ao) {
-                        this.c7(this.o.cj);
+                        this.c8(this.o.cj);
                     }
                     this.ah = true;
                     this.cc();
@@ -21096,7 +21109,7 @@ let DatePicker = /*@__PURE__*/ (() => {
                 case 13:
                     this.an = true;
                     if (!this.ao) {
-                        this.c7(this.o.cj);
+                        this.c8(this.o.cj);
                     }
                     this.ah = true;
                     this.cc();
@@ -21126,10 +21139,10 @@ let DatePicker = /*@__PURE__*/ (() => {
         }
         ck(a, b) {
             this.ao = true;
-            this.c7(b.value);
+            this.c8(b.value);
             this.ao = false;
         }
-        c7(a) {
+        c8(a) {
             let b = ['/', '-', ' ', '.', ','];
             let c = stringSplit(a, b, 1);
             let d = 0;
@@ -21248,10 +21261,10 @@ let DatePicker = /*@__PURE__*/ (() => {
                 let ah = Base.compareSimple(ag, this.a1);
                 let ai = Base.compareSimple(ag, this.a0);
                 if (ah < 0 || ai > 0) {
-                    this.c3();
+                    this.c4();
                 }
                 else {
-                    this.c6(ag);
+                    this.c7(ag);
                     this.h.ao();
                 }
             }
@@ -21260,15 +21273,15 @@ let DatePicker = /*@__PURE__*/ (() => {
                     this.cb();
                 }
                 else {
-                    this.c3();
+                    this.c4();
                 }
             }
         }
-        c6(a) {
+        c7(a) {
             let b = this.value;
             this.value = a;
         }
-        c3() {
+        c4() {
             if (this.o != null) {
                 if (+(this.az) != +(dateMinValue())) {
                     let a = "";
@@ -21458,6 +21471,9 @@ let DatePicker = /*@__PURE__*/ (() => {
             }
         }
         cb() {
+            if (this.aq == true) {
+                return;
+            }
             if (this.o != null) {
                 this.o.cj = "";
             }
@@ -21591,7 +21607,7 @@ let DatePicker = /*@__PURE__*/ (() => {
             let a = new LostFocusEventArgs();
             this.ct(a);
         }
-        c1() {
+        c2() {
         }
         c0() {
         }
@@ -21821,6 +21837,12 @@ let IgcDatePickerComponent = /*@__PURE__*/ (() => {
         afterContentInit() {
             this.i.notifySizeChanged();
         }
+        attributeSynced(name, value) {
+            // an attribute was set by the component renderer.
+            if (name === 'name') {
+                this.i.setName(value);
+            }
+        }
         /**
          * @hidden
          */
@@ -21927,11 +21949,11 @@ let IgcDatePickerComponent = /*@__PURE__*/ (() => {
          * Gets or sets the color to use for the text.
         */
         get labelTextColor() {
-            return brushToString(this.i.dc);
+            return brushToString(this.i.dd);
         }
         set labelTextColor(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));
         }
         /**
          * Gets or sets the font to use for the combobox.
@@ -22014,21 +22036,21 @@ let IgcDatePickerComponent = /*@__PURE__*/ (() => {
          * Gets or Sets the text color
         */
         get textColor() {
-            return brushToString(this.i.dd);
+            return brushToString(this.i.de);
         }
         set textColor(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));
         }
         /**
          * Gets or Sets the text color
         */
         get iconColor() {
-            return brushToString(this.i.db);
+            return brushToString(this.i.dc);
         }
         set iconColor(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));
         }
         /**
          * Gets or sets the ShowClearButton property to detirmine if the clear button is shown
@@ -22607,7 +22629,7 @@ let CheckboxView = /*@__PURE__*/ (() => {
             d.append(h);
             let 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");