igniteui-webcomponents-inputs 4.8.1 → 5.0.0-beta.1

package/esm2015/lib/{igc-date-picker-component.js → igc-x-date-picker-component.js}

@@ -4,7 +4,7 @@ import { WebComponentRenderer } from "igniteui-webcomponents-core";
 import { delegateCombine, delegateRemove } from "igniteui-webcomponents-core";
 import { TypeRegistrar } from "igniteui-webcomponents-core";
 import { RegisterElementHelper } from "igniteui-webcomponents-core";
-import { DatePicker } from './DatePicker';
+import { XDatePicker } from './XDatePicker';
 import { IgcSelectedValueChangedEventArgs } from "./igc-selected-value-changed-event-args";
 import { IgcGotFocusEventArgs } from "./igc-got-focus-event-args";
 import { IgcLostFocusEventArgs } from "./igc-lost-focus-event-args";
@@ -16,8 +16,8 @@ import { DateFormats_$type } from "./DateFormats";
 import { DayOfWeek_$type } from "./DayOfWeek";
 import { FirstWeek_$type } from "./FirstWeek";
 import { IgcHTMLElement } from "igniteui-webcomponents-core";
-export let IgcDatePickerComponent = /*@__PURE__*/ (() => {
-    class IgcDatePickerComponent extends IgcHTMLElement {
+export let IgcXDatePickerComponent = /*@__PURE__*/ (() => {
+    class IgcXDatePickerComponent extends IgcHTMLElement {
         set height(value) {
             this._height = value;
             this.style.height = value;
@@ -83,7 +83,7 @@ export let IgcDatePickerComponent = /*@__PURE__*/ (() => {
             this._datePicker.destroy();
         }
         createImplementation() {
-            return new DatePicker();
+            return new XDatePicker();
         }
         disconnectedCallback() {
             this._disconnected = true;
@@ -94,8 +94,8 @@ export let IgcDatePickerComponent = /*@__PURE__*/ (() => {
                 this._disconnected = false;
                 return;
             }
-            this.classList.add("ig-date-picker");
-            this.classList.add("igc-date-picker");
+            this.classList.add("ig-x-date-picker");
+            this.classList.add("igc-x-date-picker");
             var rootWrapper = this._renderer.rootWrapper;
             var rootElement = rootWrapper.getNativeElement();
             this.appendChild(rootElement);
@@ -174,14 +174,14 @@ export let IgcDatePickerComponent = /*@__PURE__*/ (() => {
             this._settingAttributes = false;
         }
         static get observedAttributes() {
-            if (IgcDatePickerComponent._observedAttributesIgcDatePickerComponent == null) {
-                let names = getAllPropertyNames(IgcDatePickerComponent);
+            if (IgcXDatePickerComponent._observedAttributesIgcXDatePickerComponent == null) {
+                let names = getAllPropertyNames(IgcXDatePickerComponent);
                 for (let i = 0; i < names.length; i++) {
                     names[i] = toSpinal(names[i]);
                 }
-                IgcDatePickerComponent._observedAttributesIgcDatePickerComponent = names;
+                IgcXDatePickerComponent._observedAttributesIgcXDatePickerComponent = names;
             }
-            return IgcDatePickerComponent._observedAttributesIgcDatePickerComponent;
+            return IgcXDatePickerComponent._observedAttributesIgcXDatePickerComponent;
         }
         attributeChangedCallback(name, oldValue, newValue) {
             if (this._settingAttributes) {
@@ -193,9 +193,9 @@ export let IgcDatePickerComponent = /*@__PURE__*/ (() => {
             this._updatingFromAttribute = false;
         }
         static register() {
-            if (!IgcDatePickerComponent._isElementRegistered) {
-                IgcDatePickerComponent._isElementRegistered = true;
-                RegisterElementHelper.registerElement(IgcDatePickerComponent.htmlTagName, IgcDatePickerComponent);
+            if (!IgcXDatePickerComponent._isElementRegistered) {
+                IgcXDatePickerComponent._isElementRegistered = true;
+                RegisterElementHelper.registerElement(IgcXDatePickerComponent.htmlTagName, IgcXDatePickerComponent);
             }
         }
         /**
@@ -211,29 +211,29 @@ export let IgcDatePickerComponent = /*@__PURE__*/ (() => {
          * Gets or Sets the property name that contains the values.
         */
         get today() {
-            return this.i.ba;
+            return this.i.bb;
         }
         set today(v) {
-            this.i.ba = v;
+            this.i.bb = v;
         }
         /**
          * Gets or Sets the property name that contains the label.
         */
         get label() {
-            return this.i.b3;
+            return this.i.b4;
         }
         set label(v) {
-            this.i.b3 = v;
+            this.i.b4 = v;
         }
         /**
          * Gets or sets the color to use for the text.
         */
         get labelTextColor() {
-            return brushToString(this.i.dw);
+            return brushToString(this.i.dx);
         }
         set labelTextColor(v) {
-            this.i.dw = stringToBrush(v);
-            this._a("labelTextColor", brushToString(this.i.dw));
+            this.i.dx = stringToBrush(v);
+            this._a("labelTextColor", brushToString(this.i.dx));
         }
         /**
          * Gets or sets the font to use for the combobox.
@@ -254,28 +254,28 @@ export let IgcDatePickerComponent = /*@__PURE__*/ (() => {
          * Gets or Sets the property name that contains the placeholder.
         */
         get placeholder() {
-            return this.i.cb;
+            return this.i.cc;
         }
         set placeholder(v) {
-            this.i.cb = v;
+            this.i.cc = v;
         }
         /**
          * Gets or Sets the property name that contains the MinDate.
         */
         get minDate() {
-            return this.i.a9;
+            return this.i.ba;
         }
         set minDate(v) {
-            this.i.a9 = v;
+            this.i.ba = v;
         }
         /**
          * Gets or Sets the property name that contains the MaxDate.
         */
         get maxDate() {
-            return this.i.a8;
+            return this.i.a9;
         }
         set maxDate(v) {
-            this.i.a8 = v;
+            this.i.a9 = v;
         }
         /**
          * Gets or sets the display density to use for the date pcicker.
@@ -316,41 +316,41 @@ export let IgcDatePickerComponent = /*@__PURE__*/ (() => {
          * Gets or Sets the text color
         */
         get textColor() {
-            return brushToString(this.i.dx);
+            return brushToString(this.i.dy);
         }
         set textColor(v) {
-            this.i.dx = stringToBrush(v);
-            this._a("textColor", brushToString(this.i.dx));
+            this.i.dy = stringToBrush(v);
+            this._a("textColor", brushToString(this.i.dy));
         }
         /**
          * Gets or Sets the text color
         */
         get iconColor() {
-            return brushToString(this.i.dv);
+            return brushToString(this.i.dw);
         }
         set iconColor(v) {
-            this.i.dv = stringToBrush(v);
-            this._a("iconColor", brushToString(this.i.dv));
+            this.i.dw = stringToBrush(v);
+            this._a("iconColor", brushToString(this.i.dw));
         }
         /**
          * Gets or sets the ShowClearButton property to detirmine if the clear button is shown
         */
         get showClearButton() {
-            return this.i.az;
+            return this.i.a0;
         }
         set showClearButton(v) {
-            this.i.az = ensureBool(v);
-            this._a("showClearButton", this.i.az);
+            this.i.a0 = ensureBool(v);
+            this._a("showClearButton", this.i.a0);
         }
         /**
          * Gets or sets the ShowTodayButton property to detirmine if the today button is shown
         */
         get showTodayButton() {
-            return this.i.a0;
+            return this.i.a1;
         }
         set showTodayButton(v) {
-            this.i.a0 = ensureBool(v);
-            this._a("showTodayButton", this.i.a0);
+            this.i.a1 = ensureBool(v);
+            this._a("showTodayButton", this.i.a1);
         }
         /**
          * Gets or sets the AllowTextInput property to detirmine if entering text into the input is allowed
@@ -396,11 +396,11 @@ export let IgcDatePickerComponent = /*@__PURE__*/ (() => {
          * Gets or sets the ShowWeekNumbers property to detirmine if the week numbers are shown
         */
         get showWeekNumbers() {
-            return this.i.a1;
+            return this.i.a2;
         }
         set showWeekNumbers(v) {
-            this.i.a1 = ensureBool(v);
-            this._a("showWeekNumbers", this.i.a1);
+            this.i.a2 = ensureBool(v);
+            this._a("showWeekNumbers", this.i.a2);
         }
         /**
          * Gets or sets the date time format to use for this column. If FormatString is specificied this value is ignored.
@@ -416,10 +416,10 @@ export let IgcDatePickerComponent = /*@__PURE__*/ (() => {
          * Gets or sets the Format property to detirmine the format of the date in the input
         */
         get formatString() {
-            return this.i.by;
+            return this.i.bz;
         }
         set formatString(v) {
-            this.i.by = v;
+            this.i.bz = v;
         }
         get isDisabled() {
             return this.i.av;
@@ -452,11 +452,11 @@ export let IgcDatePickerComponent = /*@__PURE__*/ (() => {
          * Indicates that the dropdown will place itself into the browser top layer.
         */
         get useTopLayer() {
-            return this.i.a2;
+            return this.i.a3;
         }
         set useTopLayer(v) {
-            this.i.a2 = ensureBool(v);
-            this._a("useTopLayer", this.i.a2);
+            this.i.a3 = ensureBool(v);
+            this._a("useTopLayer", this.i.a3);
         }
         get hasUserValues() {
             return this._hasUserValues;
@@ -478,7 +478,7 @@ export let IgcDatePickerComponent = /*@__PURE__*/ (() => {
             if (typeName.indexOf("Xam") === 0) {
                 typeName = typeName.substring(3);
             }
-            genericPrefix = toSpinal("DatePickerComponent");
+            genericPrefix = toSpinal("XDatePickerComponent");
             let additionalPrefixes = [];
             let prefix = toSpinal(typeName);
             additionalPrefixes.push(prefix + "-");
@@ -512,14 +512,14 @@ export let IgcDatePickerComponent = /*@__PURE__*/ (() => {
             this._inStyling = false;
         }
         select() {
-            this.i.df();
+            this.i.dg();
         }
         /**
          * Exports visual information about the current state of the grid.
         
         */
         exportVisualModel() {
-            let iv = this.i.bf();
+            let iv = this.i.bg();
             return (iv);
         }
         /**
@@ -527,7 +527,7 @@ export let IgcDatePickerComponent = /*@__PURE__*/ (() => {
         
         */
         exportSerializedVisualModel() {
-            let iv = this.i.bv();
+            let iv = this.i.bw();
             return (iv);
         }
         /**
@@ -672,8 +672,8 @@ export let IgcDatePickerComponent = /*@__PURE__*/ (() => {
             this.i.propertyChanged = delegateCombine(this.i.propertyChanged, this._valueChange_wrapped);
         }
     }
-    IgcDatePickerComponent._observedAttributesIgcDatePickerComponent = null;
-    IgcDatePickerComponent.htmlTagName = "igc-date-picker";
-    IgcDatePickerComponent._isElementRegistered = false;
-    return IgcDatePickerComponent;
+    IgcXDatePickerComponent._observedAttributesIgcXDatePickerComponent = null;
+    IgcXDatePickerComponent.htmlTagName = "igc-x-date-picker";
+    IgcXDatePickerComponent._isElementRegistered = false;
+    return IgcXDatePickerComponent;
 })();

package/esm2015/lib/{igc-date-picker-module.js → igc-x-date-picker-module.js}

@@ -8,18 +8,18 @@ import { IgcXCalendarModule } from './igc-x-calendar-module';
 import { IgcXButtonModule } from './igc-x-button-module';
 import { IgcXIconModule } from './igc-x-icon-module';
 import { IgcXInputGroupModule } from './igc-x-input-group-module';
-import { IgcDatePickerComponent } from './igc-date-picker-component';
-import { DatePicker } from './DatePicker';
+import { IgcXDatePickerComponent } from './igc-x-date-picker-component';
+import { XDatePicker } from './XDatePicker';
 import { TypeRegistrar } from "igniteui-webcomponents-core";
-export class IgcDatePickerModule {
+export class IgcXDatePickerModule {
     static register() {
         IgcXCalendarModule.register();
         IgcXButtonModule.register();
         IgcXIconModule.register();
         IgcXInputGroupModule.register();
-        IgcDatePickerComponent.register();
-        TypeRegistrar.registerCons('IgcDatePickerComponent', IgcDatePickerComponent);
-        TypeRegistrar.registerCons('IgcDatePickerComponent', IgcDatePickerComponent);
-        TypeRegistrar.register('DatePicker', DatePicker.$type);
+        IgcXDatePickerComponent.register();
+        TypeRegistrar.registerCons('IgcXDatePickerComponent', IgcXDatePickerComponent);
+        TypeRegistrar.registerCons('IgcXDatePickerComponent', IgcXDatePickerComponent);
+        TypeRegistrar.register('XDatePicker', XDatePicker.$type);
     }
 }

package/esm2015/public_api.js

@@ -11,11 +11,11 @@ export * from './lib/FirstWeek';
 export * from './lib/CalendarVisualModelExport';
 export * from './lib/TextElementsVisualModelExport';
 export * from './lib/XCalendarLocaleEn';
-export * from './lib/igc-date-picker-module';
-export * from './lib/igc-date-picker-component';
+export * from './lib/igc-x-date-picker-module';
+export * from './lib/igc-x-date-picker-component';
 export * from './lib/DateTimeValueFormatter';
 export * from './lib/DatePickerView';
-export * from './lib/DatePicker';
+export * from './lib/XDatePicker';
 export * from './lib/GotFocusEventArgs';
 export * from './lib/igc-got-focus-event-args';
 export * from './lib/LostFocusEventArgs';
@@ -110,3 +110,4 @@ export * from './lib/LabelVisualModelExport';
 export * from './lib/PrefixVisualModelExport';
 export * from './lib/RippleVisualModelExport';
 export * from './lib/SuffixVisualModelExport';
+export * from './lib/TextBlockVisualModelExport';

package/esm5/lib/ButtonGroupVisualModelExport.js

@@ -46,7 +46,7 @@ var ButtonGroupVisualModelExport = /** @class */ /*@__PURE__*/ (function (_super
             if (b != 0) {
                 a.l(",");
             }
-            a.l(this.i._inner[b].ab());
+            a.l(this.i._inner[b].serialize());
         }
         a.l("]");
         a.l("}");

package/esm5/lib/ButtonView_combined.js

@@ -27,7 +27,6 @@ import { FocusEventArgs } from "igniteui-webcomponents-core";
 import { Thickness } from "igniteui-webcomponents-core";
 import { BrushUtil } from "igniteui-webcomponents-core";
 import { ButtonVisualModelExport } from "./ButtonVisualModelExport";
-import { UIElementPropertyAccessorFactory } from "igniteui-webcomponents-core";
 import { AppearanceHelper } from "igniteui-webcomponents-core";
 import { FontUtil } from "igniteui-webcomponents-core";
 import { Dictionary$2 } from "igniteui-webcomponents-core";
@@ -228,10 +227,13 @@ var ButtonView = /** @class */ /*@__PURE__*/ (function (_super) {
             this.n.setStyleProperty("height", h);
         }
         else {
+            this.n.setStyleProperty("width", "auto");
+            this.n.setStyleProperty("height", "auto");
             this.n.setStyleProperty("min-width", i);
             this.n.setStyleProperty("min-height", j);
             this.n.setStyleProperty("padding", m);
         }
+        this.k.rootWrapper.setStyleProperty("height", "auto");
         if (!isNaN_(this.b.bf) && this.b.bf > 0) {
             this.n.setStyleProperty("border-style", "solid");
         }
@@ -249,11 +251,6 @@ var ButtonView = /** @class */ /*@__PURE__*/ (function (_super) {
             this.n.setStyleProperty("height", "100%");
             this.k.rootWrapper.setStyleProperty("height", "100%");
         }
-        else {
-            this.n.setStyleProperty("width", "auto");
-            this.n.setStyleProperty("height", "auto");
-            this.k.rootWrapper.setStyleProperty("height", "auto");
-        }
     };
     ButtonView.prototype.as = function () {
         switch (this.b.k5) {
@@ -3552,17 +3549,15 @@ var XButton = /** @class */ /*@__PURE__*/ (function (_super) {
     };
     XButton.prototype.f0 = function () {
         var a = this.b();
-        return a.ab();
+        return a.serialize();
     };
     XButton.prototype.b = function () {
         var a = this.view.q;
         var b = this.view.s;
         var c = new ButtonVisualModelExport();
-        var d = UIElementPropertyAccessorFactory.c.a(12, 0);
-        var e = d.b(a);
-        var f = this.view.a();
-        c.s = f[0];
-        c.q = f[1];
+        var d = this.view.a();
+        c.s = d[0];
+        c.q = d[1];
         c.p = NativeUI.d(a);
         c.t = NativeUI.k(a);
         c.h = this.n;
@@ -3573,7 +3568,7 @@ var XButton = /** @class */ /*@__PURE__*/ (function (_super) {
         c.a = AppearanceHelper.a(this.ne);
         c.u = this.ct;
         c.e = AppearanceHelper.a(this.np);
-        c.ah = this.kr;
+        c.ag = this.kr;
         c.b = AppearanceHelper.a(NativeUI.aj(a));
         c.j = this.u;
         c.f = AppearanceHelper.a(NativeUI.al(b));
@@ -3589,31 +3584,31 @@ var XButton = /** @class */ /*@__PURE__*/ (function (_super) {
         c.n = this.a0;
         c.l = this.disabled;
         if (this.aa != null) {
-            var g = this.aa;
-            if (this.view != null && g.q == null) {
-                var h = this.view.k;
-                var i = FontUtil.getFontInfoFromString(h, g.fontString);
-                g.q = i.q;
-                g.f = i.f;
-                g.r = i.r;
-                g.t = i.t;
-                g.u = i.u;
-                g.v = i.v;
-            }
-            if (g.q != null) {
-                c.ac = g.q;
-            }
-            if (!isNaN_(g.f)) {
-                c.r = g.f;
-            }
-            if (g.v != null) {
-                c.ag = g.v;
-            }
-            if (g.t != null) {
-                c.ae = g.t;
-            }
-            if (g.r != null) {
-                c.ad = g.t;
+            var e = this.aa;
+            if (this.view != null && e.q == null) {
+                var f = this.view.k;
+                var g = FontUtil.getFontInfoFromString(f, e.fontString);
+                e.q = g.q;
+                e.f = g.f;
+                e.r = g.r;
+                e.t = g.t;
+                e.u = g.u;
+                e.v = g.v;
+            }
+            if (e.q != null) {
+                c.ab = e.q;
+            }
+            if (!isNaN_(e.f)) {
+                c.r = e.f;
+            }
+            if (e.v != null) {
+                c.af = e.v;
+            }
+            if (e.t != null) {
+                c.ad = e.t;
+            }
+            if (e.r != null) {
+                c.ac = e.t;
             }
         }
         return c;

package/esm5/lib/ButtonVisualModelExport.js

@@ -6,6 +6,7 @@ GOVERNS THE LICENSING, INSTALLATION AND USE OF INFRAGISTICS SOFTWARE. BY DOWNLOA
 */
 import { __extends } from "tslib";
 import { Base, markType } from "igniteui-webcomponents-core";
+import { IVisualData_$type } from "igniteui-webcomponents-core";
 import { StringBuilder } from "igniteui-webcomponents-core";
 import { stringIsNullOrEmpty } from "igniteui-webcomponents-core";
 import { isNaN_ } from "igniteui-webcomponents-core";
@@ -28,17 +29,17 @@ var ButtonVisualModelExport = /** @class */ /*@__PURE__*/ (function (_super) {
         _this.a = null;
         _this.u = 0;
         _this.e = null;
-        _this.ah = null;
+        _this.ag = null;
         _this.b = null;
         _this.j = 0;
         _this.f = null;
         _this.o = 0;
+        _this.ad = null;
         _this.ae = null;
         _this.af = null;
-        _this.ag = null;
         _this.r = 0;
+        _this.ab = null;
         _this.ac = null;
-        _this.ad = null;
         _this.x = null;
         _this.y = null;
         _this.z = null;
@@ -51,7 +52,7 @@ var ButtonVisualModelExport = /** @class */ /*@__PURE__*/ (function (_super) {
         _this.l = false;
         return _this;
     }
-    ButtonVisualModelExport.prototype.ab = function () {
+    ButtonVisualModelExport.prototype.serialize = function () {
         var a = new StringBuilder(0);
         a.l("{");
         a.l("top : " + this.s + ", ");
@@ -72,20 +73,20 @@ var ButtonVisualModelExport = /** @class */ /*@__PURE__*/ (function (_super) {
         a.l("actualElevationMode : " + this.j + ", ");
         a.l("actualTextColor : " + this.f.serialize() + ", ");
         a.l("actualBorderWidth : " + this.o + ", ");
+        if (!stringIsNullOrEmpty(this.ad)) {
+            a.l("textStyleFontStyle : \"" + this.ad + "\", ");
+        }
         if (!stringIsNullOrEmpty(this.ae)) {
-            a.l("textStyleFontStyle : \"" + this.ae + "\", ");
+            a.l("textStyleFontVariant : \"" + this.ae + "\", ");
         }
         if (!stringIsNullOrEmpty(this.af)) {
-            a.l("textStyleFontVariant : \"" + this.af + "\", ");
+            a.l("textStyleFontWeight : \"" + this.af + "\", ");
         }
-        if (!stringIsNullOrEmpty(this.ag)) {
-            a.l("textStyleFontWeight : \"" + this.ag + "\", ");
+        if (!stringIsNullOrEmpty(this.ab)) {
+            a.l("textStyleFontFamily : \"" + this.ab + "\", ");
         }
         if (!stringIsNullOrEmpty(this.ac)) {
-            a.l("textStyleFontFamily : \"" + this.ac + "\", ");
-        }
-        if (!stringIsNullOrEmpty(this.ad)) {
-            a.l("textStyleFontStretch : \"" + this.ad + "\", ");
+            a.l("textStyleFontStretch : \"" + this.ac + "\", ");
         }
         if (!isNaN_(this.r)) {
             a.l("textStyleFontSize : " + this.r + ", ");
@@ -105,7 +106,7 @@ var ButtonVisualModelExport = /** @class */ /*@__PURE__*/ (function (_super) {
         a.l("}");
         return a.toString();
     };
-    ButtonVisualModelExport.$t = markType(ButtonVisualModelExport, 'ButtonVisualModelExport');
+    ButtonVisualModelExport.$t = markType(ButtonVisualModelExport, 'ButtonVisualModelExport', Base.$, [IVisualData_$type]);
     return ButtonVisualModelExport;
 }(Base));
 export { ButtonVisualModelExport };

package/esm5/lib/CalendarVisualModelExport.js

@@ -74,7 +74,7 @@ var CalendarVisualModelExport = /** @class */ /*@__PURE__*/ (function (_super) {
                 a.l(",");
             }
             var c = this.j._inner[b].aa.charAt(0).toString().toLowerCase() + this.j._inner[b].aa.substr(1);
-            a.l(this.j._inner[b].ab());
+            a.l(this.j._inner[b].serialize());
         }
         a.l("],");
         a.l("dayNamesModels: [");

package/esm5/lib/CheckboxView_combined.js

@@ -1278,7 +1278,7 @@ var XCheckbox = /** @class */ /*@__PURE__*/ (function (_super) {
         $ret.addItem("CheckedBackgroundColor", BrushUtil.h(255, 105, 136, 255));
         $ret.addItem("TickColor", BrushUtil.h(255, 255, 255, 255));
         $ret.addItem("TickStrokeWidth", 3);
-        $ret.addItem("BorderWidth", NaN);
+        $ret.addItem("BorderWidth", 1);
         $ret.addItem("CornerRadius", 2);
         return $ret;
     })()));
@@ -1291,7 +1291,7 @@ var XCheckbox = /** @class */ /*@__PURE__*/ (function (_super) {
         $ret.addItem("CheckedBackgroundColor", BrushUtil.h(255, 105, 136, 255));
         $ret.addItem("TickColor", BrushUtil.h(255, 255, 255, 255));
         $ret.addItem("TickStrokeWidth", 3);
-        $ret.addItem("BorderWidth", NaN);
+        $ret.addItem("BorderWidth", 1);
         $ret.addItem("CornerRadius", 2);
         return $ret;
     })()));