igniteui-webcomponents-inputs 1.4.2 → 3.2.2

package/esm2015/lib/ButtonView_combined.js

@@ -114,7 +114,7 @@ export 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");

package/esm2015/lib/CalendarView_combined.js

@@ -152,7 +152,7 @@ export 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);
@@ -242,7 +242,7 @@ export 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);

package/esm2015/lib/CheckboxView_combined.js

@@ -155,7 +155,7 @@ export 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");

package/esm2015/lib/DatePickerView_combined.js

@@ -82,6 +82,7 @@ export 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");
@@ -197,6 +198,12 @@ export let DatePickerView = /*@__PURE__*/ (() => {
                 else {
                     this.e.parent().parent().setStyleProperty("max-width", "232px");
                 }
+                if (this.b.at == true) {
+                    this.e.parent().parent().setStyleProperty("height", "270px");
+                }
+                else {
+                    this.e.parent().parent().setStyleProperty("height", "234px");
+                }
             }
         }
         am(a) {
@@ -217,6 +224,9 @@ export let DatePickerView = /*@__PURE__*/ (() => {
             return this.e;
         }
         y(a) {
+            if (this.b.aq == true) {
+                return;
+            }
             this.b.cb();
             if (this.f != null) {
                 this.f.hide();
@@ -313,7 +323,7 @@ export 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();
@@ -321,8 +331,8 @@ export 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;
@@ -349,7 +359,7 @@ export let DatePicker = /*@__PURE__*/ (() => {
                 this.ah = true;
                 this.cc();
             }
-            this.c3();
+            this.c4();
             if (this.selectedValueChanged != null) {
                 this.selectedValueChanged(this, ((() => {
                     let $ret = new SelectedValueChangedEventArgs();
@@ -375,6 +385,9 @@ export 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);
@@ -413,13 +426,13 @@ export 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);
             }
         }
@@ -493,24 +506,24 @@ export 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() {
@@ -625,7 +638,7 @@ export let DatePicker = /*@__PURE__*/ (() => {
                     this.c0();
                     break;
                 case "BaseTheme":
-                    this.c1();
+                    this.c2();
                     break;
                 case "Value":
                     if (+(this.value) != +(dateMinValue())) {
@@ -693,7 +706,7 @@ export let DatePicker = /*@__PURE__*/ (() => {
                     }
                     break;
                 case "TextStyle":
-                    this.c4();
+                    this.c5();
                     break;
                 case "ShowClearButton":
                     if (this.o != null) {
@@ -706,7 +719,7 @@ export let DatePicker = /*@__PURE__*/ (() => {
                 case "LabelTextStyle":
                 case "TextColor":
                 case "IconColor":
-                    this.c5();
+                    this.c6();
                     break;
                 case "ShowTodayButton":
                     if (this.c != null) {
@@ -721,11 +734,11 @@ export 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) {
@@ -841,26 +854,26 @@ export 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;
             }
@@ -873,7 +886,7 @@ export 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 != "") {
@@ -887,7 +900,7 @@ export 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;
@@ -903,17 +916,17 @@ export 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);
@@ -929,7 +942,7 @@ export 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();
@@ -938,7 +951,7 @@ export 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();
@@ -968,10 +981,10 @@ export 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;
@@ -1090,10 +1103,10 @@ export 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();
                 }
             }
@@ -1102,15 +1115,15 @@ export 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 = "";
@@ -1300,6 +1313,9 @@ export let DatePicker = /*@__PURE__*/ (() => {
             }
         }
         cb() {
+            if (this.aq == true) {
+                return;
+            }
             if (this.o != null) {
                 this.o.cj = "";
             }
@@ -1433,7 +1449,7 @@ export let DatePicker = /*@__PURE__*/ (() => {
             let a = new LostFocusEventArgs();
             this.ct(a);
         }
-        c1() {
+        c2() {
         }
         c0() {
         }

package/esm2015/lib/InputGroupView_combined.js

@@ -493,7 +493,7 @@ export 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);
@@ -666,7 +666,7 @@ export let InputView = /*@__PURE__*/ (() => {
         get o() {
             return this.k;
         }
-        get a4() {
+        get a5() {
             return null;
         }
         get g() {
@@ -706,7 +706,7 @@ export 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)));
@@ -728,7 +728,7 @@ export let InputView = /*@__PURE__*/ (() => {
             this.j.append(this.k);
             this.b.dd();
         }
-        av(a) {
+        aw(a) {
             if (a) {
                 this.k.setAttribute("readonly", a.toString());
             }
@@ -764,7 +764,7 @@ export let InputView = /*@__PURE__*/ (() => {
         aq() {
             this.k.setAttribute("placeholder", this.b.cb);
         }
-        a0() {
+        a1() {
             switch (this.b.w) {
                 case 1:
                     this.k.setStyleProperty("height", "2rem");
@@ -780,7 +780,7 @@ export let InputView = /*@__PURE__*/ (() => {
                     break;
             }
         }
-        az() {
+        a0() {
             let a = new TransformGroup();
             a.j.add(((() => {
                 let $ret = new TranslateTransform();
@@ -804,6 +804,9 @@ export let InputView = /*@__PURE__*/ (() => {
         at(a) {
             this.k.setProperty("value", a);
         }
+        av(a) {
+            this.k.setAttribute("name", a);
+        }
         u(a) {
             this.b.cr();
         }
@@ -811,20 +814,20 @@ export 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;
@@ -856,7 +859,7 @@ export let InputView = /*@__PURE__*/ (() => {
         aa(a) {
             this.b.cy();
         }
-        a1(a) {
+        a2(a) {
             if (this.p != a) {
                 this.p = a;
                 if (this.l != null) {
@@ -877,10 +880,10 @@ export 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() {
@@ -917,7 +920,7 @@ export let InputView = /*@__PURE__*/ (() => {
             }
             this.h.clear();
         }
-        a2(a) {
+        a3(a) {
             if (a != null) {
                 this.k.setStyleProperty("font", a.fontString);
             }
@@ -939,7 +942,7 @@ export 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);
@@ -1801,7 +1804,7 @@ export 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) => {
@@ -2023,7 +2026,7 @@ export 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());
@@ -3491,7 +3494,7 @@ export 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());
@@ -4533,7 +4536,7 @@ export 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;
@@ -4628,12 +4631,15 @@ export 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();
@@ -4659,7 +4665,7 @@ export let XInput = /*@__PURE__*/ (() => {
                     this.view.au(this.aj);
                     break;
                 case "IsReadOnly":
-                    this.view.av(this.al);
+                    this.view.aw(this.al);
                     break;
             }
         }
@@ -4670,10 +4676,10 @@ export 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;
@@ -4682,7 +4688,7 @@ export 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);
         }
@@ -5068,7 +5074,7 @@ export let XInput = /*@__PURE__*/ (() => {
             return a;
         }
         di(a, b) {
-            this.view.ax(a, b);
+            this.view.ay(a, b);
         }
         provideContainer(a) {
             this.view.al(a);
@@ -5140,13 +5146,13 @@ export 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;

package/esm2015/lib/InputGroupVisualModelExport.js

@@ -48,7 +48,7 @@ export 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() + ", ");

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

@@ -114,6 +114,12 @@ export 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
          */
@@ -220,11 +226,11 @@ export 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.
@@ -307,21 +313,21 @@ export 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