igniteui-webcomponents-inputs 4.0.3 → 4.2.2

package/esm2015/lib/igc-x-icon-component.js

@@ -1,10 +1,11 @@
 import { XIcon } from "./XIcon";
-import { brushToString, stringToBrush, ensureBool, initializePropertiesFromCss, NamePatcher, toSpinal, getAllPropertyNames, fromSpinal } from "igniteui-webcomponents-core";
+import { ensureEnum, brushToString, stringToBrush, ensureBool, initializePropertiesFromCss, NamePatcher, toSpinal, enumToString, getAllPropertyNames, fromSpinal } from "igniteui-webcomponents-core";
 import { FontInfo } from "igniteui-webcomponents-core";
 import { WebComponentRenderer, PortalManager } from "igniteui-webcomponents-core";
 import { TypeRegistrar } from "igniteui-webcomponents-core";
 import { RegisterElementHelper } from "igniteui-webcomponents-core";
 import { IgcHTMLElement } from "igniteui-webcomponents-core";
+import { BaseControlTheme_$type } from "igniteui-webcomponents-core";
 export let IgcXIconComponent = /*@__PURE__*/ (() => {
     class IgcXIconComponent extends IgcHTMLElement {
         constructor() {
@@ -182,74 +183,84 @@ export let IgcXIconComponent = /*@__PURE__*/ (() => {
             }
         }
         /**
-     * Gets the color to use for the actual background.
+     * Gets or sets the base built in theme to use for the button.
     */
+        get baseTheme() {
+            return this.i.e;
+        }
+        set baseTheme(v) {
+            this.i.e = ensureEnum(BaseControlTheme_$type, v);
+            this._a("baseTheme", enumToString(BaseControlTheme_$type, this.i.e));
+        }
+        /**
+         * Gets the color to use for the actual background.
+        */
         get actualFill() {
-            return brushToString(this.i.bu);
+            return brushToString(this.i.bx);
         }
         set actualFill(v) {
-            this.i.bu = stringToBrush(v);
-            this._a("actualFill", brushToString(this.i.bu));
+            this.i.bx = stringToBrush(v);
+            this._a("actualFill", brushToString(this.i.bx));
         }
         /**
          * Gets the color to use for the actual text color.
         */
         get actualTextColor() {
-            return brushToString(this.i.by);
+            return brushToString(this.i.b1);
         }
         set actualTextColor(v) {
-            this.i.by = stringToBrush(v);
-            this._a("actualTextColor", brushToString(this.i.by));
+            this.i.b1 = stringToBrush(v);
+            this._a("actualTextColor", brushToString(this.i.b1));
         }
         /**
          * Gets the color to use for the actual background.
         */
         get actualHoverFill() {
-            return brushToString(this.i.bv);
+            return brushToString(this.i.by);
         }
         set actualHoverFill(v) {
-            this.i.bv = stringToBrush(v);
-            this._a("actualHoverFill", brushToString(this.i.bv));
+            this.i.by = stringToBrush(v);
+            this._a("actualHoverFill", brushToString(this.i.by));
         }
         /**
          * Gets the hover stroke to use for the icon.
         */
         get actualHoverStroke() {
-            return brushToString(this.i.bw);
+            return brushToString(this.i.bz);
         }
         set actualHoverStroke(v) {
-            this.i.bw = stringToBrush(v);
-            this._a("actualHoverStroke", brushToString(this.i.bw));
+            this.i.bz = stringToBrush(v);
+            this._a("actualHoverStroke", brushToString(this.i.bz));
         }
         /**
          * Gets the stroke to use for the icon.
         */
         get actualStroke() {
-            return brushToString(this.i.bx);
+            return brushToString(this.i.b0);
         }
         set actualStroke(v) {
-            this.i.bx = stringToBrush(v);
-            this._a("actualStroke", brushToString(this.i.bx));
+            this.i.b0 = stringToBrush(v);
+            this._a("actualStroke", brushToString(this.i.b0));
         }
         /**
          * Gets the hover stroke to use for the icon.
         */
         get actualHoverStrokeThickness() {
-            return this.i.s;
+            return this.i.u;
         }
         set actualHoverStrokeThickness(v) {
-            this.i.s = +v;
-            this._a("actualHoverStrokeThickness", this.i.s);
+            this.i.u = +v;
+            this._a("actualHoverStrokeThickness", this.i.u);
         }
         /**
          * Gets the stroke to use for the icon.
         */
         get actualStrokeThickness() {
-            return this.i.t;
+            return this.i.v;
         }
         set actualStrokeThickness(v) {
-            this.i.t = +v;
-            this._a("actualStrokeThickness", this.i.t);
+            this.i.v = +v;
+            this._a("actualStrokeThickness", this.i.v);
         }
         /**
          * Gets or sets the color to use for the actual background.
@@ -265,11 +276,11 @@ export let IgcXIconComponent = /*@__PURE__*/ (() => {
          * Gets or sets the color to use for the text.
         */
         get textColor() {
-            return brushToString(this.i.b8);
+            return brushToString(this.i.cb);
         }
         set textColor(v) {
-            this.i.b8 = stringToBrush(v);
-            this._a("textColor", brushToString(this.i.b8));
+            this.i.cb = stringToBrush(v);
+            this._a("textColor", brushToString(this.i.cb));
         }
         /**
          * Gets or sets the color to use for the text.
@@ -284,114 +295,114 @@ export let IgcXIconComponent = /*@__PURE__*/ (() => {
          * Gets or sets the color to use for the actual background.
         */
         get hoverFill() {
-            return brushToString(this.i.b4);
+            return brushToString(this.i.b7);
         }
         set hoverFill(v) {
-            this.i.b4 = stringToBrush(v);
-            this._a("hoverFill", brushToString(this.i.b4));
+            this.i.b7 = stringToBrush(v);
+            this._a("hoverFill", brushToString(this.i.b7));
         }
         /**
          * Gets or sets the hover stroke to use for the icon.
         */
         get hoverStroke() {
-            return brushToString(this.i.b5);
+            return brushToString(this.i.b8);
         }
         set hoverStroke(v) {
-            this.i.b5 = stringToBrush(v);
-            this._a("hoverStroke", brushToString(this.i.b5));
+            this.i.b8 = stringToBrush(v);
+            this._a("hoverStroke", brushToString(this.i.b8));
         }
         /**
          * Gets or sets the stroke to use for the icon.
         */
         get stroke() {
-            return brushToString(this.i.b7);
+            return brushToString(this.i.ca);
         }
         set stroke(v) {
-            this.i.b7 = stringToBrush(v);
-            this._a("stroke", brushToString(this.i.b7));
+            this.i.ca = stringToBrush(v);
+            this._a("stroke", brushToString(this.i.ca));
         }
         /**
          * Gets or sets the hover stroke to use for the icon.
         */
         get hoverStrokeThickness() {
-            return this.i.w;
+            return this.i.y;
         }
         set hoverStrokeThickness(v) {
-            this.i.w = +v;
-            this._a("hoverStrokeThickness", this.i.w);
+            this.i.y = +v;
+            this._a("hoverStrokeThickness", this.i.y);
         }
         /**
          * Gets or sets the stroke to use for the icon.
         */
         get strokeThickness() {
-            return this.i.y;
+            return this.i.aa;
         }
         set strokeThickness(v) {
-            this.i.y = +v;
-            this._a("strokeThickness", this.i.y);
+            this.i.aa = +v;
+            this._a("strokeThickness", this.i.aa);
         }
         /**
          * Gets or sets the use for the button.
         */
         get textStyle() {
-            if (this.i.e == null) {
+            if (this.i.g == null) {
                 return null;
             }
-            return this.i.e.fontString;
+            return this.i.g.fontString;
         }
         set textStyle(v) {
             let fi = new FontInfo();
             fi.fontString = v;
-            this.i.e = fi;
-            this._a("textStyle", this.i.e != null ? this.i.e.fontString : "");
+            this.i.g = fi;
+            this._a("textStyle", this.i.g != null ? this.i.g.fontString : "");
         }
         /**
          * Gets or sets the color to use for the hovered text of the button regardless of type.
         */
         get hoverTextColor() {
-            return brushToString(this.i.b6);
+            return brushToString(this.i.b9);
         }
         set hoverTextColor(v) {
-            this.i.b6 = stringToBrush(v);
-            this._a("hoverTextColor", brushToString(this.i.b6));
+            this.i.b9 = stringToBrush(v);
+            this._a("hoverTextColor", brushToString(this.i.b9));
         }
         /**
          * Gets or sets the id to use for the checkbox.
         */
         get id() {
-            return this.i.av;
+            return this.i.ay;
         }
         set id(v) {
-            this.i.av = v;
+            this.i.ay = v;
         }
         /**
          * Gets or sets TabIndex to use for the checkbox.
         */
         get tabIndex() {
-            return this.i.aa;
+            return this.i.ac;
         }
         set tabIndex(v) {
-            this.i.aa = +v;
-            this._a("tabIndex", this.i.aa);
+            this.i.ac = +v;
+            this._a("tabIndex", this.i.ac);
         }
         /**
          * Gets or sets the value of the aria-label attribute.
         */
         get ariaLabel() {
-            return this.i.an;
+            return this.i.ap;
         }
         set ariaLabel(v) {
-            this.i.an = v;
+            this.i.ap = v;
         }
         /**
          * Gets or sets whether the icon is hovered.
         */
         get isHover() {
-            return this.i.l;
+            return this.i.n;
         }
         set isHover(v) {
-            this.i.l = ensureBool(v);
-            this._a("isHover", this.i.l);
+            this.i.n = ensureBool(v);
+            this._a("isHover", this.i.n);
         }
         /**
          * Gets or sets whether the checkbox is disabled.
@@ -404,11 +415,11 @@ export let IgcXIconComponent = /*@__PURE__*/ (() => {
             this._a("disabled", this.i.disabled);
         }
         get opacity() {
-            return this.i.x;
+            return this.i.z;
         }
         set opacity(v) {
-            this.i.x = +v;
-            this._a("opacity", this.i.x);
+            this.i.z = +v;
+            this._a("opacity", this.i.z);
         }
         findByName(name) {
             if (this.findEphemera) {
@@ -482,7 +493,7 @@ export let IgcXIconComponent = /*@__PURE__*/ (() => {
         
         */
         exportVisualModel() {
-            let iv = this.i.ac();
+            let iv = this.i.ae();
             return (iv);
         }
         /**
@@ -490,7 +501,7 @@ export let IgcXIconComponent = /*@__PURE__*/ (() => {
         
         */
         exportSerializedVisualModel() {
-            let iv = this.i.ap();
+            let iv = this.i.as();
             return (iv);
         }
     }

package/esm2015/lib/igc-x-input-component.js

@@ -8,6 +8,7 @@ import { IgcXInputGroupItemComponent } from './igc-x-input-group-item-component'
 import { IgcInputChangeEventArgs } from './igc-input-change-event-args';
 import { ControlDisplayDensity_$type } from "igniteui-webcomponents-core";
 import { IgcKeyEventArgs } from "igniteui-webcomponents-core";
+import { BaseControlTheme_$type } from "igniteui-webcomponents-core";
 let requiredStyle = `
 
 `;
@@ -177,184 +178,194 @@ export let IgcXInputComponent = /*@__PURE__*/ (() => {
             }
         }
         /**
-     * Gets or sets the display density to use for the input.
+     * Gets or sets the base built in theme to use for the button.
     */
+        get baseTheme() {
+            return this.i.w;
+        }
+        set baseTheme(v) {
+            this.i.w = ensureEnum(BaseControlTheme_$type, v);
+            this._a("baseTheme", enumToString(BaseControlTheme_$type, this.i.w));
+        }
+        /**
+         * Gets or sets the display density to use for the input.
+        */
         get density() {
-            return this.i.y;
+            return this.i.aa;
         }
         set density(v) {
-            this.i.y = ensureEnum(ControlDisplayDensity_$type, v);
-            this._a("density", enumToString(ControlDisplayDensity_$type, this.i.y));
+            this.i.aa = ensureEnum(ControlDisplayDensity_$type, v);
+            this._a("density", enumToString(ControlDisplayDensity_$type, this.i.aa));
         }
         /**
          * Gets the actual display density to use for the label.
         */
         get actualDensity() {
-            return this.i.x;
+            return this.i.z;
         }
         set actualDensity(v) {
-            this.i.x = ensureEnum(ControlDisplayDensity_$type, v);
-            this._a("actualDensity", enumToString(ControlDisplayDensity_$type, this.i.x));
+            this.i.z = ensureEnum(ControlDisplayDensity_$type, v);
+            this._a("actualDensity", enumToString(ControlDisplayDensity_$type, this.i.z));
         }
         /**
          * Gets/Sets the input mask for the input.
         */
         get mask() {
-            return this.i.b9;
+            return this.i.cc;
         }
         set mask(v) {
-            this.i.b9 = v;
+            this.i.cc = v;
         }
         /**
          * Gets/Sets the character representing a fillable spot in the input mask
         */
         get promptChar() {
-            return this.i.cd;
+            return this.i.cg;
         }
         set promptChar(v) {
-            this.i.cd = v;
+            this.i.cg = v;
         }
         /**
          * Specifies if the bound value includes the formatting symbols.
         */
         get includeLiterals() {
-            return this.i.ar;
+            return this.i.at;
         }
         set includeLiterals(v) {
-            this.i.ar = ensureBool(v);
-            this._a("includeLiterals", this.i.ar);
+            this.i.at = ensureBool(v);
+            this._a("includeLiterals", this.i.at);
         }
         /**
          * Gets the actual color to use for the text color.
         */
         get actualTextColor() {
-            return brushToString(this.i.du);
+            return brushToString(this.i.dx);
         }
         set actualTextColor(v) {
-            this.i.du = stringToBrush(v);
-            this._a("actualTextColor", brushToString(this.i.du));
+            this.i.dx = stringToBrush(v);
+            this._a("actualTextColor", brushToString(this.i.dx));
         }
         /**
          * Gets the actual hover color to use for the text.
         */
         get actualHoverTextColor() {
-            return brushToString(this.i.dt);
+            return brushToString(this.i.dw);
         }
         set actualHoverTextColor(v) {
-            this.i.dt = stringToBrush(v);
-            this._a("actualHoverTextColor", brushToString(this.i.dt));
+            this.i.dw = stringToBrush(v);
+            this._a("actualHoverTextColor", brushToString(this.i.dw));
         }
         /**
          * Gets or sets the color to use for the text.
         */
         get textColor() {
-            return brushToString(this.i.dy);
+            return brushToString(this.i.d1);
         }
         set textColor(v) {
-            this.i.dy = stringToBrush(v);
-            this._a("textColor", brushToString(this.i.dy));
+            this.i.d1 = stringToBrush(v);
+            this._a("textColor", brushToString(this.i.d1));
         }
         /**
          * Gets or sets the use for the button.
         */
         get textStyle() {
-            if (this.i.ad == null) {
+            if (this.i.af == null) {
                 return null;
             }
-            return this.i.ad.fontString;
+            return this.i.af.fontString;
         }
         set textStyle(v) {
             let fi = new FontInfo();
             fi.fontString = v;
-            this.i.ad = fi;
-            this._a("textStyle", this.i.ad != null ? this.i.ad.fontString : "");
+            this.i.af = fi;
+            this._a("textStyle", this.i.af != null ? this.i.af.fontString : "");
         }
         /**
          * Gets or sets the type to use for the input.
         */
         get inputType() {
-            return this.i.b3;
+            return this.i.b6;
         }
         set inputType(v) {
-            this.i.b3 = v;
+            this.i.b6 = v;
         }
         /**
          * Gets or sets the placeholder to use for the input.
         */
         get placeholder() {
-            return this.i.cb;
+            return this.i.ce;
         }
         set placeholder(v) {
-            this.i.cb = v;
+            this.i.ce = v;
         }
         /**
          * Gets or sets the color to use for the hovered text of the button regardless of type.
         */
         get hoverTextColor() {
-            return brushToString(this.i.dx);
+            return brushToString(this.i.d0);
         }
         set hoverTextColor(v) {
-            this.i.dx = stringToBrush(v);
-            this._a("hoverTextColor", brushToString(this.i.dx));
+            this.i.d0 = stringToBrush(v);
+            this._a("hoverTextColor", brushToString(this.i.d0));
         }
         /**
          * Gets or sets the id to use for the checkbox.
         */
         get id() {
-            return this.i.b0;
+            return this.i.b3;
         }
         set id(v) {
-            this.i.b0 = v;
+            this.i.b3 = v;
         }
         /**
          * Gets or sets TabIndex to use for the checkbox.
         */
         get tabIndex() {
-            return this.i.ba;
+            return this.i.bc;
         }
         set tabIndex(v) {
-            this.i.ba = +v;
-            this._a("tabIndex", this.i.ba);
+            this.i.bc = +v;
+            this._a("tabIndex", this.i.bc);
         }
         /**
          * Gets or sets the for attribute to use for the input.
         */
         get for() {
-            return this.i.bx;
+            return this.i.b0;
         }
         set for(v) {
-            this.i.bx = v;
+            this.i.b0 = v;
         }
         /**
          * Gets or sets the value of the aria-label attribute.
         */
         get ariaLabel() {
-            return this.i.bt;
+            return this.i.bv;
         }
         set ariaLabel(v) {
-            this.i.bt = v;
+            this.i.bv = v;
         }
         /**
          * Gets or sets whether the input is hovered.
         */
         get isHover() {
-            return this.i.at;
+            return this.i.av;
         }
         set isHover(v) {
-            this.i.at = ensureBool(v);
-            this._a("isHover", this.i.at);
+            this.i.av = ensureBool(v);
+            this._a("isHover", this.i.av);
         }
         /**
          * Gets or sets the value for the input.
         */
         get value() {
-            return this.i.cj;
+            return this.i.cm;
         }
         set value(v) {
-            this.i.cj = v;
+            this.i.cm = v;
         }
         get hasValue() {
-            return this.i.aq;
+            return this.i.as;
         }
         /**
          * Gets or sets whether the checkbox is disabled.
@@ -407,7 +418,7 @@ export let IgcXInputComponent = /*@__PURE__*/ (() => {
         
         */
         exportVisualModel() {
-            let iv = this.i.bc();
+            let iv = this.i.be();
             return (iv);
         }
         /**
@@ -415,17 +426,17 @@ export let IgcXInputComponent = /*@__PURE__*/ (() => {
         
         */
         exportSerializedVisualModel() {
-            let iv = this.i.bw();
+            let iv = this.i.bz();
             return (iv);
         }
         setSelectionRange(selectionStart, selectionEnd) {
-            this.i.di(selectionStart, selectionEnd);
+            this.i.dl(selectionStart, selectionEnd);
         }
         blur() {
-            this.i.cm();
+            this.i.cp();
         }
         select() {
-            this.i.dg();
+            this.i.dj();
         }
         get keyDown() {
             return this._keyDown;

package/esm2015/public_api.js

@@ -41,6 +41,12 @@ export * from './lib/igc-x-input-group-component';
 export * from './lib/igc-x-prefix-module';
 export * from './lib/igc-x-prefix-component';
 export * from './lib/igc-x-suffix-component';
+export * from './lib/NativeUIXInputsFactory';
+export * from './lib/XComponentBridge';
+export * from './lib/XButtonBridge';
+export * from './lib/XCheckboxBridge';
+export * from './lib/XIconButtonBridge';
+export * from './lib/XInputBridge';
 export * from './lib/KEYCODES';
 export * from './lib/MaskOptions';
 export * from './lib/Replaced';

package/esm5/lib/ButtonGroupView_combined.js

@@ -671,23 +671,23 @@ var XButtonGroup = /** @class */ /*@__PURE__*/ (function (_super) {
             if (this.v) {
                 b.disabled = this.disabled;
             }
-            b.nm = this.e0;
+            b.nn = this.e0;
             b.ax = this.ak;
-            b.si = this.e2;
-            b.sh = this.e1;
-            b.sj = this.e3;
+            b.sj = this.e2;
+            b.si = this.e1;
+            b.sk = this.e3;
             this.view.x(b);
             if (this.aa(b)) {
-                b.nl = this.e7;
-                b.t8 = this.fa;
-                b.s8 = this.e8;
-                b.s9 = this.e9;
+                b.nm = this.e7;
+                b.t9 = this.fa;
+                b.s9 = this.e8;
+                b.ta = this.e9;
             }
             else {
-                b.nl = this.ez;
-                b.t8 = this.e6;
-                b.s8 = this.e4;
-                b.s9 = this.e5;
+                b.nm = this.ez;
+                b.t9 = this.e6;
+                b.s9 = this.e4;
+                b.ta = this.e5;
             }
         }
     };
@@ -701,22 +701,22 @@ var XButtonGroup = /** @class */ /*@__PURE__*/ (function (_super) {
         return false;
     };
     XButtonGroup.prototype.dk = function (a) {
-        a.ke = new CornerRadius(1, 0, 0, 0, 0);
+        a.kf = new CornerRadius(1, 0, 0, 0, 0);
     };
     XButtonGroup.prototype.dj = function (a) {
         if (this.k == 1) {
-            a.ke = new CornerRadius(1, 0, 0, this.al, this.al);
+            a.kf = new CornerRadius(1, 0, 0, this.al, this.al);
         }
         else {
-            a.ke = new CornerRadius(1, 0, this.al, this.al, 0);
+            a.kf = new CornerRadius(1, 0, this.al, this.al, 0);
         }
     };
     XButtonGroup.prototype.di = function (a) {
         if (this.k == 1) {
-            a.ke = new CornerRadius(1, this.al, this.al, 0, 0);
+            a.kf = new CornerRadius(1, this.al, this.al, 0, 0);
         }
         else {
-            a.ke = new CornerRadius(1, this.al, 0, 0, this.al);
+            a.kf = new CornerRadius(1, this.al, 0, 0, this.al);
         }
     };
     XButtonGroup.prototype.dh = function (a) {