npm - igniteui-angular-inputs - Versions diffs - 21.0.0 → 21.0.1 - Mend

igniteui-angular-inputs 21.0.0 → 21.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (36) hide show

package/bundles/igniteui-angular-inputs.umd.js +3640 -3311
package/bundles/igniteui-angular-inputs.umd.min.js +1 -1
package/esm2015/lib/ButtonGroupView_combined.js +642 -628
package/esm2015/lib/ButtonView_combined.js +2036 -1743
package/esm2015/lib/CalendarView_combined.js +157 -157
package/esm2015/lib/CheckboxView_combined.js +39 -39
package/esm2015/lib/DatePickerView_combined.js +4 -4
package/esm2015/lib/InputGroupView_combined.js +209 -209
package/esm2015/lib/NativeUIXInputsFactory_combined.js +35 -35
package/esm2015/lib/RippleView_combined.js +2 -2
package/esm2015/lib/ThemeResolver.js +38 -22
package/esm2015/lib/XButtonBridge.js +53 -45
package/esm2015/lib/XButtonGroupBridge.js +13 -9
package/esm2015/lib/XIconButtonBridge.js +2 -2
package/esm2015/lib/igx-x-button-component.js +399 -399
package/esm2015/lib/igx-x-button-group-component.js +124 -124
package/esm5/lib/ButtonGroupView_combined.js +620 -606
package/esm5/lib/ButtonView_combined.js +1950 -1657
package/esm5/lib/CalendarView_combined.js +157 -157
package/esm5/lib/CheckboxView_combined.js +39 -39
package/esm5/lib/DatePickerView_combined.js +4 -4
package/esm5/lib/InputGroupView_combined.js +209 -209
package/esm5/lib/NativeUIXInputsFactory_combined.js +35 -35
package/esm5/lib/RippleView_combined.js +2 -2
package/esm5/lib/ThemeResolver.js +38 -22
package/esm5/lib/XButtonBridge.js +53 -45
package/esm5/lib/XButtonGroupBridge.js +13 -9
package/esm5/lib/XIconButtonBridge.js +2 -2
package/esm5/lib/igx-x-button-component.js +399 -399
package/esm5/lib/igx-x-button-group-component.js +124 -124
package/fesm2015/igniteui-angular-inputs.js +3743 -3414
package/fesm5/igniteui-angular-inputs.js +3641 -3312
package/lib/ButtonGroupView_combined.d.ts +181 -179
package/lib/ButtonView_combined.d.ts +479 -478
package/lib/ThemeResolver.d.ts +18 -15
package/package.json +2 -2

package/esm5/lib/igx-x-button-component.js CHANGED Viewed

@@ -110,10 +110,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
      * Gets or sets the min width to use for the button.
     */
         get: function () {
-            return this.i.by;
+            return this.i.bz;
         },
         set: function (v) {
-            this.i.by = +v;
+            this.i.bz = +v;
         },
         enumerable: false,
         configurable: true
@@ -123,10 +123,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the min height to use for the button.
         */
         get: function () {
-            return this.i.bx;
+            return this.i.by;
         },
         set: function (v) {
-            this.i.bx = +v;
+            this.i.by = +v;
         },
         enumerable: false,
         configurable: true
@@ -149,10 +149,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the display density to use for the button.
         */
         get: function () {
-            return this.i.r;
+            return this.i.s;
         },
         set: function (v) {
-            this.i.r = ensureEnum(ControlDisplayDensity_$type, v);
+            this.i.s = ensureEnum(ControlDisplayDensity_$type, v);
         },
         enumerable: false,
         configurable: true
@@ -162,10 +162,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the base built in theme to use for the button.
         */
         get: function () {
-            return this.i.n;
+            return this.i.o;
         },
         set: function (v) {
-            this.i.n = ensureEnum(BaseControlTheme_$type, v);
+            this.i.o = ensureEnum(BaseControlTheme_$type, v);
         },
         enumerable: false,
         configurable: true
@@ -175,10 +175,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets the actual display density to use for the label.
         */
         get: function () {
-            return this.i.q;
+            return this.i.r;
         },
         set: function (v) {
-            this.i.q = ensureEnum(ControlDisplayDensity_$type, v);
+            this.i.r = ensureEnum(ControlDisplayDensity_$type, v);
         },
         enumerable: false,
         configurable: true
@@ -188,10 +188,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the check mark when the checkbox is checked.
         */
         get: function () {
-            return brushToString(this.i.np);
+            return brushToString(this.i.nu);
         },
         set: function (v) {
-            this.i.np = stringToBrush(v);
+            this.i.nu = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -201,10 +201,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the check mark when the checkbox is checked.
         */
         get: function () {
-            return brushToString(this.i.n0);
+            return brushToString(this.i.n5);
         },
         set: function (v) {
-            this.i.n0 = stringToBrush(v);
+            this.i.n5 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -214,10 +214,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the check mark when the checkbox is checked.
         */
         get: function () {
-            return brushToString(this.i.nx);
+            return brushToString(this.i.n2);
         },
         set: function (v) {
-            this.i.nx = stringToBrush(v);
+            this.i.n2 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -227,10 +227,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the check mark when the checkbox is checked.
         */
         get: function () {
-            return brushToString(this.i.nn);
+            return brushToString(this.i.ns);
         },
         set: function (v) {
-            this.i.nn = stringToBrush(v);
+            this.i.ns = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -240,10 +240,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the check mark when the checkbox is checked.
         */
         get: function () {
-            return this.i.cx;
+            return this.i.cy;
         },
         set: function (v) {
-            this.i.cx = +v;
+            this.i.cy = +v;
         },
         enumerable: false,
         configurable: true
@@ -253,10 +253,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the check mark when the checkbox is checked.
         */
         get: function () {
-            return this.i.cv;
+            return this.i.cw;
         },
         set: function (v) {
-            this.i.cv = +v;
+            this.i.cw = +v;
         },
         enumerable: false,
         configurable: true
@@ -266,10 +266,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the check mark when the checkbox is checked.
         */
         get: function () {
-            return this.i.cw;
+            return this.i.cx;
         },
         set: function (v) {
-            this.i.cw = +v;
+            this.i.cx = +v;
         },
         enumerable: false,
         configurable: true
@@ -279,77 +279,77 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the ripple when the button is pressed.
         */
         get: function () {
-            return brushToString(this.i.ny);
+            return brushToString(this.i.n3);
         },
         set: function (v) {
-            this.i.ny = stringToBrush(v);
+            this.i.n3 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "actualCornerRadiusBottomRight", {
         get: function () {
-            return this.i.kz ? this.i.kz.c : NaN;
+            return this.i.k4 ? this.i.k4.c : NaN;
         },
         set: function (v) {
             this.ensureActualCornerRadius();
-            this.i.kz.c = +v;
-            this.i.kz = this.i.kz;
+            this.i.k4.c = +v;
+            this.i.k4 = this.i.k4;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "actualCornerRadiusBottomLeft", {
         get: function () {
-            return this.i.kz ? this.i.kz.b : NaN;
+            return this.i.k4 ? this.i.k4.b : NaN;
         },
         set: function (v) {
             this.ensureActualCornerRadius();
-            this.i.kz.b = +v;
-            this.i.kz = this.i.kz;
+            this.i.k4.b = +v;
+            this.i.k4 = this.i.k4;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "actualCornerRadiusTopLeft", {
         get: function () {
-            return this.i.kz ? this.i.kz.d : NaN;
+            return this.i.k4 ? this.i.k4.d : NaN;
         },
         set: function (v) {
             this.ensureActualCornerRadius();
-            this.i.kz.d = +v;
-            this.i.kz = this.i.kz;
+            this.i.k4.d = +v;
+            this.i.k4 = this.i.k4;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "actualCornerRadiusTopRight", {
         get: function () {
-            return this.i.kz ? this.i.kz.e : NaN;
+            return this.i.k4 ? this.i.k4.e : NaN;
         },
         set: function (v) {
             this.ensureActualCornerRadius();
-            this.i.kz.e = +v;
-            this.i.kz = this.i.kz;
+            this.i.k4.e = +v;
+            this.i.k4 = this.i.k4;
         },
         enumerable: false,
         configurable: true
     });
     IgxXButtonComponent.prototype.ensureActualCornerRadius = function () {
-        if (this.i.kz) {
+        if (this.i.k4) {
             return;
         }
-        this.i.kz = new CornerRadius(2);
+        this.i.k4 = new CornerRadius(2);
     };
     Object.defineProperty(IgxXButtonComponent.prototype, "actualBackgroundColor", {
         /**
          * Gets the color to use for the actual background.
         */
         get: function () {
-            return brushToString(this.i.no);
+            return brushToString(this.i.nt);
         },
         set: function (v) {
-            this.i.no = stringToBrush(v);
+            this.i.nt = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -359,10 +359,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets the actual color to use for the disabled background of the button.
         */
         get: function () {
-            return brushToString(this.i.nq);
+            return brushToString(this.i.nv);
         },
         set: function (v) {
-            this.i.nq = stringToBrush(v);
+            this.i.nv = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -372,10 +372,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets the actual color to use for the disabled border of the button.
         */
         get: function () {
-            return brushToString(this.i.nr);
+            return brushToString(this.i.nw);
         },
         set: function (v) {
-            this.i.nr = stringToBrush(v);
+            this.i.nw = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -385,10 +385,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets the actual color to use for the disabled text of the button.
         */
         get: function () {
-            return brushToString(this.i.ns);
+            return brushToString(this.i.nx);
         },
         set: function (v) {
-            this.i.ns = stringToBrush(v);
+            this.i.nx = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -398,10 +398,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets the actual disabled elevation to use for the button.
         */
         get: function () {
-            return this.i.cu;
+            return this.i.cv;
         },
         set: function (v) {
-            this.i.cu = +v;
+            this.i.cv = +v;
         },
         enumerable: false,
         configurable: true
@@ -411,10 +411,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets the actual disabled elevation to use for the button.
         */
         get: function () {
-            return this.i.u;
+            return this.i.v;
         },
         set: function (v) {
-            this.i.u = ensureEnum(ElevationMode_$type, v);
+            this.i.v = ensureEnum(ElevationMode_$type, v);
         },
         enumerable: false,
         configurable: true
@@ -424,10 +424,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets the color to use for the actual background.
         */
         get: function () {
-            return brushToString(this.i.nz);
+            return brushToString(this.i.n4);
         },
         set: function (v) {
-            this.i.nz = stringToBrush(v);
+            this.i.n4 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -437,10 +437,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets the color to use for the actual background.
         */
         get: function () {
-            return brushToString(this.i.nw);
+            return brushToString(this.i.n1);
         },
         set: function (v) {
-            this.i.nw = stringToBrush(v);
+            this.i.n1 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -450,10 +450,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets the color to use for the actual background.
         */
         get: function () {
-            return brushToString(this.i.nt);
+            return brushToString(this.i.ny);
         },
         set: function (v) {
-            this.i.nt = stringToBrush(v);
+            this.i.ny = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -463,10 +463,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets the actual color to use for the focused text.
         */
         get: function () {
-            return brushToString(this.i.nu);
+            return brushToString(this.i.nz);
         },
         set: function (v) {
-            this.i.nu = stringToBrush(v);
+            this.i.nz = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -476,10 +476,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets the hover color to use for the actual background.
         */
         get: function () {
-            return brushToString(this.i.nv);
+            return brushToString(this.i.n0);
         },
         set: function (v) {
-            this.i.nv = stringToBrush(v);
+            this.i.n0 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -489,10 +489,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the Width to use for the check mark when the checkbox is checked.
         */
         get: function () {
-            return this.i.bj;
+            return this.i.bk;
         },
         set: function (v) {
-            this.i.bj = +v;
+            this.i.bk = +v;
         },
         enumerable: false,
         configurable: true
@@ -502,10 +502,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the background of the button when the  type is raised.
         */
         get: function () {
-            return brushToString(this.i.q4);
+            return brushToString(this.i.q9);
         },
         set: function (v) {
-            this.i.q4 = stringToBrush(v);
+            this.i.q9 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -515,10 +515,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the disabled background of the button when the type is raised.
         */
         get: function () {
-            return brushToString(this.i.q6);
+            return brushToString(this.i.rb);
         },
         set: function (v) {
-            this.i.q6 = stringToBrush(v);
+            this.i.rb = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -528,10 +528,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the disabled border of the button when the type is raised.
         */
         get: function () {
-            return brushToString(this.i.q7);
+            return brushToString(this.i.rc);
         },
         set: function (v) {
-            this.i.q7 = stringToBrush(v);
+            this.i.rc = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -541,10 +541,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the disabled text of the button when the type is raised.
         */
         get: function () {
-            return brushToString(this.i.q8);
+            return brushToString(this.i.rd);
         },
         set: function (v) {
-            this.i.q8 = stringToBrush(v);
+            this.i.rd = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -554,10 +554,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the disabled elevation to use for the button when the type is raised.
         */
         get: function () {
-            return this.i.d2;
+            return this.i.d3;
         },
         set: function (v) {
-            this.i.d2 = +v;
+            this.i.d3 = +v;
         },
         enumerable: false,
         configurable: true
@@ -567,10 +567,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the hover color to use for the background of the button when the  type is raised.
         */
         get: function () {
-            return brushToString(this.i.rb);
+            return brushToString(this.i.rg);
         },
         set: function (v) {
-            this.i.rb = stringToBrush(v);
+            this.i.rg = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -580,10 +580,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the border color to use for the button when the type is raised.
         */
         get: function () {
-            return brushToString(this.i.q5);
+            return brushToString(this.i.ra);
         },
         set: function (v) {
-            this.i.q5 = stringToBrush(v);
+            this.i.ra = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -593,10 +593,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the elevation to use for the button when the type is raised.
         */
         get: function () {
-            return this.i.d5;
+            return this.i.d6;
         },
         set: function (v) {
-            this.i.d5 = +v;
+            this.i.d6 = +v;
         },
         enumerable: false,
         configurable: true
@@ -606,10 +606,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the hover elevation to use for the button when the type is raised.
         */
         get: function () {
-            return this.i.d4;
+            return this.i.d5;
         },
         set: function (v) {
-            this.i.d4 = +v;
+            this.i.d5 = +v;
         },
         enumerable: false,
         configurable: true
@@ -619,10 +619,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the focus elevation to use for the button when the type is raised.
         */
         get: function () {
-            return this.i.d3;
+            return this.i.d4;
         },
         set: function (v) {
-            this.i.d3 = +v;
+            this.i.d4 = +v;
         },
         enumerable: false,
         configurable: true
@@ -632,77 +632,77 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the width to use for the button border when the type is raised.
         */
         get: function () {
-            return this.i.b0;
+            return this.i.b1;
         },
         set: function (v) {
-            this.i.b0 = +v;
+            this.i.b1 = +v;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "raisedCornerRadiusBottomRight", {
         get: function () {
-            return this.i.lc ? this.i.lc.c : NaN;
+            return this.i.lh ? this.i.lh.c : NaN;
         },
         set: function (v) {
             this.ensureRaisedCornerRadius();
-            this.i.lc.c = +v;
-            this.i.lc = this.i.lc;
+            this.i.lh.c = +v;
+            this.i.lh = this.i.lh;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "raisedCornerRadiusBottomLeft", {
         get: function () {
-            return this.i.lc ? this.i.lc.b : NaN;
+            return this.i.lh ? this.i.lh.b : NaN;
         },
         set: function (v) {
             this.ensureRaisedCornerRadius();
-            this.i.lc.b = +v;
-            this.i.lc = this.i.lc;
+            this.i.lh.b = +v;
+            this.i.lh = this.i.lh;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "raisedCornerRadiusTopLeft", {
         get: function () {
-            return this.i.lc ? this.i.lc.d : NaN;
+            return this.i.lh ? this.i.lh.d : NaN;
         },
         set: function (v) {
             this.ensureRaisedCornerRadius();
-            this.i.lc.d = +v;
-            this.i.lc = this.i.lc;
+            this.i.lh.d = +v;
+            this.i.lh = this.i.lh;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "raisedCornerRadiusTopRight", {
         get: function () {
-            return this.i.lc ? this.i.lc.e : NaN;
+            return this.i.lh ? this.i.lh.e : NaN;
         },
         set: function (v) {
             this.ensureRaisedCornerRadius();
-            this.i.lc.e = +v;
-            this.i.lc = this.i.lc;
+            this.i.lh.e = +v;
+            this.i.lh = this.i.lh;
         },
         enumerable: false,
         configurable: true
     });
     IgxXButtonComponent.prototype.ensureRaisedCornerRadius = function () {
-        if (this.i.lc) {
+        if (this.i.lh) {
             return;
         }
-        this.i.lc = new CornerRadius(2);
+        this.i.lh = new CornerRadius(2);
     };
     Object.defineProperty(IgxXButtonComponent.prototype, "raisedRippleColor", {
         /**
          * Gets or sets the color to use for the background when the button is pressed and the type is floating action button.
         */
         get: function () {
-            return brushToString(this.i.rd);
+            return brushToString(this.i.ri);
         },
         set: function (v) {
-            this.i.rd = stringToBrush(v);
+            this.i.ri = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -712,10 +712,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the background of the button when the type is flat.
         */
         get: function () {
-            return brushToString(this.i.p3);
+            return brushToString(this.i.p8);
         },
         set: function (v) {
-            this.i.p3 = stringToBrush(v);
+            this.i.p8 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -725,10 +725,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the disabled background of the button when the type is flat.
         */
         get: function () {
-            return brushToString(this.i.p5);
+            return brushToString(this.i.qa);
         },
         set: function (v) {
-            this.i.p5 = stringToBrush(v);
+            this.i.qa = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -738,10 +738,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the disabled border of the button when the type is flat.
         */
         get: function () {
-            return brushToString(this.i.p6);
+            return brushToString(this.i.qb);
         },
         set: function (v) {
-            this.i.p6 = stringToBrush(v);
+            this.i.qb = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -751,10 +751,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the disabled text of the button when the type is flat.
         */
         get: function () {
-            return brushToString(this.i.p7);
+            return brushToString(this.i.qc);
         },
         set: function (v) {
-            this.i.p7 = stringToBrush(v);
+            this.i.qc = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -764,10 +764,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the disabled elevation to use for the button when the type is flat.
         */
         get: function () {
-            return this.i.dn;
+            return this.i.dp;
         },
         set: function (v) {
-            this.i.dn = +v;
+            this.i.dp = +v;
         },
         enumerable: false,
         configurable: true
@@ -777,10 +777,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the hover color to use for the background of the button when the type is flat.
         */
         get: function () {
-            return brushToString(this.i.qa);
+            return brushToString(this.i.qf);
         },
         set: function (v) {
-            this.i.qa = stringToBrush(v);
+            this.i.qf = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -790,10 +790,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the border color to use for the button when the type is flat.
         */
         get: function () {
-            return brushToString(this.i.p4);
+            return brushToString(this.i.p9);
         },
         set: function (v) {
-            this.i.p4 = stringToBrush(v);
+            this.i.p9 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -803,10 +803,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the elevation to use for the button when the type is flat.
         */
         get: function () {
-            return this.i.dr;
+            return this.i.ds;
         },
         set: function (v) {
-            this.i.dr = +v;
+            this.i.ds = +v;
         },
         enumerable: false,
         configurable: true
@@ -816,10 +816,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the hover elevation to use for the button when the type is flat.
         */
         get: function () {
-            return this.i.dq;
+            return this.i.dr;
         },
         set: function (v) {
-            this.i.dq = +v;
+            this.i.dr = +v;
         },
         enumerable: false,
         configurable: true
@@ -829,10 +829,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the focus elevation to use for the button when the type is flat.
         */
         get: function () {
-            return this.i.dp;
+            return this.i.dq;
         },
         set: function (v) {
-            this.i.dp = +v;
+            this.i.dq = +v;
         },
         enumerable: false,
         configurable: true
@@ -842,10 +842,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the background when the button is pressed and the type is floating action button.
         */
         get: function () {
-            return brushToString(this.i.qc);
+            return brushToString(this.i.qh);
         },
         set: function (v) {
-            this.i.qc = stringToBrush(v);
+            this.i.qh = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -855,10 +855,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the text of the button when type is flat.
         */
         get: function () {
-            return brushToString(this.i.qd);
+            return brushToString(this.i.qi);
         },
         set: function (v) {
-            this.i.qd = stringToBrush(v);
+            this.i.qi = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -868,10 +868,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the hovered text of the button when type is flat.
         */
         get: function () {
-            return brushToString(this.i.qb);
+            return brushToString(this.i.qg);
         },
         set: function (v) {
-            this.i.qb = stringToBrush(v);
+            this.i.qg = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -881,10 +881,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the backround the button when it is focused and flat.
         */
         get: function () {
-            return brushToString(this.i.p8);
+            return brushToString(this.i.qd);
         },
         set: function (v) {
-            this.i.p8 = stringToBrush(v);
+            this.i.qd = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -894,10 +894,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the text the button when it is focused and flat.
         */
         get: function () {
-            return brushToString(this.i.p9);
+            return brushToString(this.i.qe);
         },
         set: function (v) {
-            this.i.p9 = stringToBrush(v);
+            this.i.qe = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -907,77 +907,77 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the width to use for the button border when the type is flat.
         */
         get: function () {
-            return this.i.bv;
+            return this.i.bw;
         },
         set: function (v) {
-            this.i.bv = +v;
+            this.i.bw = +v;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "flatCornerRadiusBottomRight", {
         get: function () {
-            return this.i.k8 ? this.i.k8.c : NaN;
+            return this.i.ld ? this.i.ld.c : NaN;
         },
         set: function (v) {
             this.ensureFlatCornerRadius();
-            this.i.k8.c = +v;
-            this.i.k8 = this.i.k8;
+            this.i.ld.c = +v;
+            this.i.ld = this.i.ld;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "flatCornerRadiusBottomLeft", {
         get: function () {
-            return this.i.k8 ? this.i.k8.b : NaN;
+            return this.i.ld ? this.i.ld.b : NaN;
         },
         set: function (v) {
             this.ensureFlatCornerRadius();
-            this.i.k8.b = +v;
-            this.i.k8 = this.i.k8;
+            this.i.ld.b = +v;
+            this.i.ld = this.i.ld;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "flatCornerRadiusTopLeft", {
         get: function () {
-            return this.i.k8 ? this.i.k8.d : NaN;
+            return this.i.ld ? this.i.ld.d : NaN;
         },
         set: function (v) {
             this.ensureFlatCornerRadius();
-            this.i.k8.d = +v;
-            this.i.k8 = this.i.k8;
+            this.i.ld.d = +v;
+            this.i.ld = this.i.ld;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "flatCornerRadiusTopRight", {
         get: function () {
-            return this.i.k8 ? this.i.k8.e : NaN;
+            return this.i.ld ? this.i.ld.e : NaN;
         },
         set: function (v) {
             this.ensureFlatCornerRadius();
-            this.i.k8.e = +v;
-            this.i.k8 = this.i.k8;
+            this.i.ld.e = +v;
+            this.i.ld = this.i.ld;
         },
         enumerable: false,
         configurable: true
     });
     IgxXButtonComponent.prototype.ensureFlatCornerRadius = function () {
-        if (this.i.k8) {
+        if (this.i.ld) {
             return;
         }
-        this.i.k8 = new CornerRadius(2);
+        this.i.ld = new CornerRadius(2);
     };
     Object.defineProperty(IgxXButtonComponent.prototype, "backgroundColor", {
         /**
          * Gets or sets the color to use for the background when the button regardless of type.
         */
         get: function () {
-            return brushToString(this.i.n1);
+            return brushToString(this.i.n6);
         },
         set: function (v) {
-            this.i.n1 = stringToBrush(v);
+            this.i.n6 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -987,10 +987,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the disabled background of the button when the type is disabled.
         */
         get: function () {
-            return brushToString(this.i.pp);
+            return brushToString(this.i.pu);
         },
         set: function (v) {
-            this.i.pp = stringToBrush(v);
+            this.i.pu = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -1000,10 +1000,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the disabled border of the button when the type is raised.
         */
         get: function () {
-            return brushToString(this.i.pq);
+            return brushToString(this.i.pv);
         },
         set: function (v) {
-            this.i.pq = stringToBrush(v);
+            this.i.pv = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -1013,10 +1013,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the disabled text of the button when the type is raised.
         */
         get: function () {
-            return brushToString(this.i.pr);
+            return brushToString(this.i.pw);
         },
         set: function (v) {
-            this.i.pr = stringToBrush(v);
+            this.i.pw = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -1026,10 +1026,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the disabled elevation to use for the button when the type is raised.
         */
         get: function () {
-            return this.i.di;
+            return this.i.dj;
         },
         set: function (v) {
-            this.i.di = +v;
+            this.i.dj = +v;
         },
         enumerable: false,
         configurable: true
@@ -1039,10 +1039,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the disabled elevation to use for the button when the type is raised.
         */
         get: function () {
-            return this.i.w;
+            return this.i.x;
         },
         set: function (v) {
-            this.i.w = ensureEnum(ElevationMode_$type, v);
+            this.i.x = ensureEnum(ElevationMode_$type, v);
         },
         enumerable: false,
         configurable: true
@@ -1052,10 +1052,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the hover color to use for the background of the button when the  type is hovered.
         */
         get: function () {
-            return brushToString(this.i.qg);
+            return brushToString(this.i.ql);
         },
         set: function (v) {
-            this.i.qg = stringToBrush(v);
+            this.i.ql = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -1065,10 +1065,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the border color to use for the button regardless of type.
         */
         get: function () {
-            return brushToString(this.i.n2);
+            return brushToString(this.i.n7);
         },
         set: function (v) {
-            this.i.n2 = stringToBrush(v);
+            this.i.n7 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -1078,10 +1078,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the elevation to use for the button regardless of type.
         */
         get: function () {
-            return this.i.d6;
+            return this.i.d7;
         },
         set: function (v) {
-            this.i.d6 = +v;
+            this.i.d7 = +v;
         },
         enumerable: false,
         configurable: true
@@ -1091,10 +1091,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the hover elevation to use for the button regardless of type.
         */
         get: function () {
-            return this.i.dt;
+            return this.i.du;
         },
         set: function (v) {
-            this.i.dt = +v;
+            this.i.du = +v;
         },
         enumerable: false,
         configurable: true
@@ -1104,10 +1104,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the focus elevation to use for the button regardless of type.
         */
         get: function () {
-            return this.i.ds;
+            return this.i.dt;
         },
         set: function (v) {
-            this.i.ds = +v;
+            this.i.dt = +v;
         },
         enumerable: false,
         configurable: true
@@ -1117,15 +1117,15 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the use for the button.
         */
         get: function () {
-            if (this.i.aa == null) {
+            if (this.i.ab == null) {
                 return null;
             }
-            return this.i.aa.fontString;
+            return this.i.ab.fontString;
         },
         set: function (v) {
             var fi = new FontInfo();
             fi.fontString = v;
-            this.i.aa = fi;
+            this.i.ab = fi;
         },
         enumerable: false,
         configurable: true
@@ -1135,10 +1135,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the text of the button regardless of type.
         */
         get: function () {
-            return brushToString(this.i.rg);
+            return brushToString(this.i.rl);
         },
         set: function (v) {
-            this.i.rg = stringToBrush(v);
+            this.i.rl = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -1148,10 +1148,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the hovered text of the button regardless of type.
         */
         get: function () {
-            return brushToString(this.i.qh);
+            return brushToString(this.i.qm);
         },
         set: function (v) {
-            this.i.qh = stringToBrush(v);
+            this.i.qm = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -1161,10 +1161,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the background of the button regardless of type.
         */
         get: function () {
-            return brushToString(this.i.rf);
+            return brushToString(this.i.rk);
         },
         set: function (v) {
-            this.i.rf = stringToBrush(v);
+            this.i.rk = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -1174,10 +1174,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the text of the button when type is raised.
         */
         get: function () {
-            return brushToString(this.i.re);
+            return brushToString(this.i.rj);
         },
         set: function (v) {
-            this.i.re = stringToBrush(v);
+            this.i.rj = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -1187,10 +1187,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the hovered text of the button when type is raised.
         */
         get: function () {
-            return brushToString(this.i.rc);
+            return brushToString(this.i.rh);
         },
         set: function (v) {
-            this.i.rc = stringToBrush(v);
+            this.i.rh = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -1200,10 +1200,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the backround the button when it is focused and raised.
         */
         get: function () {
-            return brushToString(this.i.q9);
+            return brushToString(this.i.re);
         },
         set: function (v) {
-            this.i.q9 = stringToBrush(v);
+            this.i.re = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -1213,10 +1213,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the text the button when it is focused and raised.
         */
         get: function () {
-            return brushToString(this.i.ra);
+            return brushToString(this.i.rf);
         },
         set: function (v) {
-            this.i.ra = stringToBrush(v);
+            this.i.rf = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -1226,10 +1226,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the backround the button when it is focused.
         */
         get: function () {
-            return brushToString(this.i.qe);
+            return brushToString(this.i.qj);
         },
         set: function (v) {
-            this.i.qe = stringToBrush(v);
+            this.i.qj = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -1239,10 +1239,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the text of the button when it is focused.
         */
         get: function () {
-            return brushToString(this.i.qf);
+            return brushToString(this.i.qk);
         },
         set: function (v) {
-            this.i.qf = stringToBrush(v);
+            this.i.qk = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -1252,77 +1252,77 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the width to use for the button border regardless of type.
         */
         get: function () {
-            return this.i.bk;
+            return this.i.bl;
         },
         set: function (v) {
-            this.i.bk = +v;
+            this.i.bl = +v;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "cornerRadiusBottomRight", {
         get: function () {
-            return this.i.k1 ? this.i.k1.c : NaN;
+            return this.i.k6 ? this.i.k6.c : NaN;
         },
         set: function (v) {
             this.ensureCornerRadius();
-            this.i.k1.c = +v;
-            this.i.k1 = this.i.k1;
+            this.i.k6.c = +v;
+            this.i.k6 = this.i.k6;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "cornerRadiusBottomLeft", {
         get: function () {
-            return this.i.k1 ? this.i.k1.b : NaN;
+            return this.i.k6 ? this.i.k6.b : NaN;
         },
         set: function (v) {
             this.ensureCornerRadius();
-            this.i.k1.b = +v;
-            this.i.k1 = this.i.k1;
+            this.i.k6.b = +v;
+            this.i.k6 = this.i.k6;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "cornerRadiusTopLeft", {
         get: function () {
-            return this.i.k1 ? this.i.k1.d : NaN;
+            return this.i.k6 ? this.i.k6.d : NaN;
         },
         set: function (v) {
             this.ensureCornerRadius();
-            this.i.k1.d = +v;
-            this.i.k1 = this.i.k1;
+            this.i.k6.d = +v;
+            this.i.k6 = this.i.k6;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "cornerRadiusTopRight", {
         get: function () {
-            return this.i.k1 ? this.i.k1.e : NaN;
+            return this.i.k6 ? this.i.k6.e : NaN;
         },
         set: function (v) {
             this.ensureCornerRadius();
-            this.i.k1.e = +v;
-            this.i.k1 = this.i.k1;
+            this.i.k6.e = +v;
+            this.i.k6 = this.i.k6;
         },
         enumerable: false,
         configurable: true
     });
     IgxXButtonComponent.prototype.ensureCornerRadius = function () {
-        if (this.i.k1) {
+        if (this.i.k6) {
             return;
         }
-        this.i.k1 = new CornerRadius(2);
+        this.i.k6 = new CornerRadius(2);
     };
     Object.defineProperty(IgxXButtonComponent.prototype, "outlinedBackgroundColor", {
         /**
          * Gets or sets the color to use for the background of the button when the  type is outlined.
         */
         get: function () {
-            return brushToString(this.i.qt);
+            return brushToString(this.i.qy);
         },
         set: function (v) {
-            this.i.qt = stringToBrush(v);
+            this.i.qy = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -1332,10 +1332,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the disabled background of the button when the type is outlined.
         */
         get: function () {
-            return brushToString(this.i.qv);
+            return brushToString(this.i.q0);
         },
         set: function (v) {
-            this.i.qv = stringToBrush(v);
+            this.i.q0 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -1345,10 +1345,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the disabled border of the button when the type is outlined.
         */
         get: function () {
-            return brushToString(this.i.qw);
+            return brushToString(this.i.q1);
         },
         set: function (v) {
-            this.i.qw = stringToBrush(v);
+            this.i.q1 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -1358,10 +1358,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the disabled text of the button when the type is outlined.
         */
         get: function () {
-            return brushToString(this.i.qx);
+            return brushToString(this.i.q2);
         },
         set: function (v) {
-            this.i.qx = stringToBrush(v);
+            this.i.q2 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -1371,10 +1371,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the disabled elevation to use for the button when the type is outlined.
         */
         get: function () {
-            return this.i.dy;
+            return this.i.dz;
         },
         set: function (v) {
-            this.i.dy = +v;
+            this.i.dz = +v;
         },
         enumerable: false,
         configurable: true
@@ -1384,10 +1384,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the hover color to use for the background of the button when the  type is hoveredOutlined.
         */
         get: function () {
-            return brushToString(this.i.q0);
+            return brushToString(this.i.q5);
         },
         set: function (v) {
-            this.i.q0 = stringToBrush(v);
+            this.i.q5 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -1397,10 +1397,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the border color to use for the button when the type is outlined.
         */
         get: function () {
-            return brushToString(this.i.qu);
+            return brushToString(this.i.qz);
         },
         set: function (v) {
-            this.i.qu = stringToBrush(v);
+            this.i.qz = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -1410,10 +1410,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the elevation to use for the button when the type is outlined.
         */
         get: function () {
-            return this.i.d1;
+            return this.i.d2;
         },
         set: function (v) {
-            this.i.d1 = +v;
+            this.i.d2 = +v;
         },
         enumerable: false,
         configurable: true
@@ -1423,10 +1423,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the hover elevation to use for the button when the type is outlined.
         */
         get: function () {
-            return this.i.d0;
+            return this.i.d1;
         },
         set: function (v) {
-            this.i.d0 = +v;
+            this.i.d1 = +v;
         },
         enumerable: false,
         configurable: true
@@ -1436,10 +1436,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the focus elevation to use for the button when the type is outlined.
         */
         get: function () {
-            return this.i.dz;
+            return this.i.d0;
         },
         set: function (v) {
-            this.i.dz = +v;
+            this.i.d0 = +v;
         },
         enumerable: false,
         configurable: true
@@ -1449,77 +1449,77 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the width to use for the button border when the type is outlined.
         */
         get: function () {
-            return this.i.bz;
+            return this.i.b0;
         },
         set: function (v) {
-            this.i.bz = +v;
+            this.i.b0 = +v;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "outlinedCornerRadiusBottomRight", {
         get: function () {
-            return this.i.lb ? this.i.lb.c : NaN;
+            return this.i.lg ? this.i.lg.c : NaN;
         },
         set: function (v) {
             this.ensureOutlinedCornerRadius();
-            this.i.lb.c = +v;
-            this.i.lb = this.i.lb;
+            this.i.lg.c = +v;
+            this.i.lg = this.i.lg;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "outlinedCornerRadiusBottomLeft", {
         get: function () {
-            return this.i.lb ? this.i.lb.b : NaN;
+            return this.i.lg ? this.i.lg.b : NaN;
         },
         set: function (v) {
             this.ensureOutlinedCornerRadius();
-            this.i.lb.b = +v;
-            this.i.lb = this.i.lb;
+            this.i.lg.b = +v;
+            this.i.lg = this.i.lg;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "outlinedCornerRadiusTopLeft", {
         get: function () {
-            return this.i.lb ? this.i.lb.d : NaN;
+            return this.i.lg ? this.i.lg.d : NaN;
         },
         set: function (v) {
             this.ensureOutlinedCornerRadius();
-            this.i.lb.d = +v;
-            this.i.lb = this.i.lb;
+            this.i.lg.d = +v;
+            this.i.lg = this.i.lg;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "outlinedCornerRadiusTopRight", {
         get: function () {
-            return this.i.lb ? this.i.lb.e : NaN;
+            return this.i.lg ? this.i.lg.e : NaN;
         },
         set: function (v) {
             this.ensureOutlinedCornerRadius();
-            this.i.lb.e = +v;
-            this.i.lb = this.i.lb;
+            this.i.lg.e = +v;
+            this.i.lg = this.i.lg;
         },
         enumerable: false,
         configurable: true
     });
     IgxXButtonComponent.prototype.ensureOutlinedCornerRadius = function () {
-        if (this.i.lb) {
+        if (this.i.lg) {
             return;
         }
-        this.i.lb = new CornerRadius(2);
+        this.i.lg = new CornerRadius(2);
     };
     Object.defineProperty(IgxXButtonComponent.prototype, "outlinedRippleColor", {
         /**
          * Gets or sets the color to use for the background when the button is pressed and the type is floating action button.
         */
         get: function () {
-            return brushToString(this.i.q2);
+            return brushToString(this.i.q7);
         },
         set: function (v) {
-            this.i.q2 = stringToBrush(v);
+            this.i.q7 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -1529,10 +1529,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the text of the button when type is outlined.
         */
         get: function () {
-            return brushToString(this.i.q3);
+            return brushToString(this.i.q8);
         },
         set: function (v) {
-            this.i.q3 = stringToBrush(v);
+            this.i.q8 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -1542,10 +1542,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the hovered text of the button when type is outlined.
         */
         get: function () {
-            return brushToString(this.i.q1);
+            return brushToString(this.i.q6);
         },
         set: function (v) {
-            this.i.q1 = stringToBrush(v);
+            this.i.q6 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -1555,10 +1555,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the backround the button when it is focused and outlined.
         */
         get: function () {
-            return brushToString(this.i.qy);
+            return brushToString(this.i.q3);
         },
         set: function (v) {
-            this.i.qy = stringToBrush(v);
+            this.i.q3 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -1568,10 +1568,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the text the button when it is focused and outlined.
         */
         get: function () {
-            return brushToString(this.i.qz);
+            return brushToString(this.i.q4);
         },
         set: function (v) {
-            this.i.qz = stringToBrush(v);
+            this.i.q4 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -1581,10 +1581,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the background of the button when the  type is floating action button.
         */
         get: function () {
-            return brushToString(this.i.ps);
+            return brushToString(this.i.px);
         },
         set: function (v) {
-            this.i.ps = stringToBrush(v);
+            this.i.px = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -1594,10 +1594,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the disabled background of the button when the type is fab.
         */
         get: function () {
-            return brushToString(this.i.pu);
+            return brushToString(this.i.pz);
         },
         set: function (v) {
-            this.i.pu = stringToBrush(v);
+            this.i.pz = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -1607,10 +1607,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the disabled border of the button when the type is fab.
         */
         get: function () {
-            return brushToString(this.i.pv);
+            return brushToString(this.i.p0);
         },
         set: function (v) {
-            this.i.pv = stringToBrush(v);
+            this.i.p0 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -1620,10 +1620,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the disabled text of the button when the type is fab.
         */
         get: function () {
-            return brushToString(this.i.pw);
+            return brushToString(this.i.p1);
         },
         set: function (v) {
-            this.i.pw = stringToBrush(v);
+            this.i.p1 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -1633,10 +1633,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the disabled elevation to use for the button when the type is fab.
         */
         get: function () {
-            return this.i.dj;
+            return this.i.dk;
         },
         set: function (v) {
-            this.i.dj = +v;
+            this.i.dk = +v;
         },
         enumerable: false,
         configurable: true
@@ -1646,10 +1646,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the hover color to use for the background of the button when the  type is hoveredFab.
         */
         get: function () {
-            return brushToString(this.i.pz);
+            return brushToString(this.i.p4);
         },
         set: function (v) {
-            this.i.pz = stringToBrush(v);
+            this.i.p4 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -1659,10 +1659,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the border color to use for the button when the type is floating action button.
         */
         get: function () {
-            return brushToString(this.i.pt);
+            return brushToString(this.i.py);
         },
         set: function (v) {
-            this.i.pt = stringToBrush(v);
+            this.i.py = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -1672,10 +1672,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the elevation to use for the button when the type is floating action button.
         */
         get: function () {
-            return this.i.dm;
+            return this.i.dn;
         },
         set: function (v) {
-            this.i.dm = +v;
+            this.i.dn = +v;
         },
         enumerable: false,
         configurable: true
@@ -1685,10 +1685,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the hover elevation to use for the button when the type is floating action button.
         */
         get: function () {
-            return this.i.dl;
+            return this.i.dm;
         },
         set: function (v) {
-            this.i.dl = +v;
+            this.i.dm = +v;
         },
         enumerable: false,
         configurable: true
@@ -1698,10 +1698,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the focus elevation to use for the button when the type is floating action button.
         */
         get: function () {
-            return this.i.dk;
+            return this.i.dl;
         },
         set: function (v) {
-            this.i.dk = +v;
+            this.i.dl = +v;
         },
         enumerable: false,
         configurable: true
@@ -1711,77 +1711,77 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the width to use for the button border when the type is floating action button.
         */
         get: function () {
-            return this.i.bu;
+            return this.i.bv;
         },
         set: function (v) {
-            this.i.bu = +v;
+            this.i.bv = +v;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "fabCornerRadiusBottomRight", {
         get: function () {
-            return this.i.k7 ? this.i.k7.c : NaN;
+            return this.i.lc ? this.i.lc.c : NaN;
         },
         set: function (v) {
             this.ensureFabCornerRadius();
-            this.i.k7.c = +v;
-            this.i.k7 = this.i.k7;
+            this.i.lc.c = +v;
+            this.i.lc = this.i.lc;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "fabCornerRadiusBottomLeft", {
         get: function () {
-            return this.i.k7 ? this.i.k7.b : NaN;
+            return this.i.lc ? this.i.lc.b : NaN;
         },
         set: function (v) {
             this.ensureFabCornerRadius();
-            this.i.k7.b = +v;
-            this.i.k7 = this.i.k7;
+            this.i.lc.b = +v;
+            this.i.lc = this.i.lc;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "fabCornerRadiusTopLeft", {
         get: function () {
-            return this.i.k7 ? this.i.k7.d : NaN;
+            return this.i.lc ? this.i.lc.d : NaN;
         },
         set: function (v) {
             this.ensureFabCornerRadius();
-            this.i.k7.d = +v;
-            this.i.k7 = this.i.k7;
+            this.i.lc.d = +v;
+            this.i.lc = this.i.lc;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "fabCornerRadiusTopRight", {
         get: function () {
-            return this.i.k7 ? this.i.k7.e : NaN;
+            return this.i.lc ? this.i.lc.e : NaN;
         },
         set: function (v) {
             this.ensureFabCornerRadius();
-            this.i.k7.e = +v;
-            this.i.k7 = this.i.k7;
+            this.i.lc.e = +v;
+            this.i.lc = this.i.lc;
         },
         enumerable: false,
         configurable: true
     });
     IgxXButtonComponent.prototype.ensureFabCornerRadius = function () {
-        if (this.i.k7) {
+        if (this.i.lc) {
             return;
         }
-        this.i.k7 = new CornerRadius(2);
+        this.i.lc = new CornerRadius(2);
     };
     Object.defineProperty(IgxXButtonComponent.prototype, "fabRippleColor", {
         /**
          * Gets or sets the color to use for the background when the button is pressed and the type is floating action button.
         */
         get: function () {
-            return brushToString(this.i.p1);
+            return brushToString(this.i.p6);
         },
         set: function (v) {
-            this.i.p1 = stringToBrush(v);
+            this.i.p6 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -1791,10 +1791,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the text of the button when type is floating action button.
         */
         get: function () {
-            return brushToString(this.i.p2);
+            return brushToString(this.i.p7);
         },
         set: function (v) {
-            this.i.p2 = stringToBrush(v);
+            this.i.p7 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -1804,10 +1804,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the hovered text of the button when type is floating action button.
         */
         get: function () {
-            return brushToString(this.i.p0);
+            return brushToString(this.i.p5);
         },
         set: function (v) {
-            this.i.p0 = stringToBrush(v);
+            this.i.p5 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -1817,10 +1817,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the backround the button when it is focused and fab.
         */
         get: function () {
-            return brushToString(this.i.px);
+            return brushToString(this.i.p2);
         },
         set: function (v) {
-            this.i.px = stringToBrush(v);
+            this.i.p2 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -1830,10 +1830,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the text the button when it is focused and fab.
         */
         get: function () {
-            return brushToString(this.i.py);
+            return brushToString(this.i.p3);
         },
         set: function (v) {
-            this.i.py = stringToBrush(v);
+            this.i.p3 = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -1843,10 +1843,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the background of the button when the  type is icon.
         */
         get: function () {
-            return brushToString(this.i.qi);
+            return brushToString(this.i.qn);
         },
         set: function (v) {
-            this.i.qi = stringToBrush(v);
+            this.i.qn = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -1856,10 +1856,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the disabled background of the button when the type is icon.
         */
         get: function () {
-            return brushToString(this.i.qk);
+            return brushToString(this.i.qp);
         },
         set: function (v) {
-            this.i.qk = stringToBrush(v);
+            this.i.qp = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -1869,10 +1869,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the disabled border of the button when the type is icon.
         */
         get: function () {
-            return brushToString(this.i.ql);
+            return brushToString(this.i.qq);
         },
         set: function (v) {
-            this.i.ql = stringToBrush(v);
+            this.i.qq = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -1882,10 +1882,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the disabled text of the button when the type is icon.
         */
         get: function () {
-            return brushToString(this.i.qm);
+            return brushToString(this.i.qr);
         },
         set: function (v) {
-            this.i.qm = stringToBrush(v);
+            this.i.qr = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -1895,10 +1895,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the disabled elevation to use for the button when the type is icon.
         */
         get: function () {
-            return this.i.du;
+            return this.i.dv;
         },
         set: function (v) {
-            this.i.du = +v;
+            this.i.dv = +v;
         },
         enumerable: false,
         configurable: true
@@ -1908,10 +1908,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the hover color to use for the background of the button when the  type is hoveredIcon.
         */
         get: function () {
-            return brushToString(this.i.qp);
+            return brushToString(this.i.qu);
         },
         set: function (v) {
-            this.i.qp = stringToBrush(v);
+            this.i.qu = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -1921,10 +1921,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the border color to use for the button when the type is icon.
         */
         get: function () {
-            return brushToString(this.i.qj);
+            return brushToString(this.i.qo);
         },
         set: function (v) {
-            this.i.qj = stringToBrush(v);
+            this.i.qo = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -1934,10 +1934,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the elevation to use for the button when the type is icon.
         */
         get: function () {
-            return this.i.dx;
+            return this.i.dy;
         },
         set: function (v) {
-            this.i.dx = +v;
+            this.i.dy = +v;
         },
         enumerable: false,
         configurable: true
@@ -1947,10 +1947,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the hover elevation to use for the button when the type is icon.
         */
         get: function () {
-            return this.i.dw;
+            return this.i.dx;
         },
         set: function (v) {
-            this.i.dw = +v;
+            this.i.dx = +v;
         },
         enumerable: false,
         configurable: true
@@ -1960,10 +1960,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the focus elevation to use for the button when the type is icon.
         */
         get: function () {
-            return this.i.dv;
+            return this.i.dw;
         },
         set: function (v) {
-            this.i.dv = +v;
+            this.i.dw = +v;
         },
         enumerable: false,
         configurable: true
@@ -1973,77 +1973,77 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the width to use for the button border when the type is icon.
         */
         get: function () {
-            return this.i.bw;
+            return this.i.bx;
         },
         set: function (v) {
-            this.i.bw = +v;
+            this.i.bx = +v;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "iconCornerRadiusBottomRight", {
         get: function () {
-            return this.i.la ? this.i.la.c : NaN;
+            return this.i.lf ? this.i.lf.c : NaN;
         },
         set: function (v) {
             this.ensureIconCornerRadius();
-            this.i.la.c = +v;
-            this.i.la = this.i.la;
+            this.i.lf.c = +v;
+            this.i.lf = this.i.lf;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "iconCornerRadiusBottomLeft", {
         get: function () {
-            return this.i.la ? this.i.la.b : NaN;
+            return this.i.lf ? this.i.lf.b : NaN;
         },
         set: function (v) {
             this.ensureIconCornerRadius();
-            this.i.la.b = +v;
-            this.i.la = this.i.la;
+            this.i.lf.b = +v;
+            this.i.lf = this.i.lf;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "iconCornerRadiusTopLeft", {
         get: function () {
-            return this.i.la ? this.i.la.d : NaN;
+            return this.i.lf ? this.i.lf.d : NaN;
         },
         set: function (v) {
             this.ensureIconCornerRadius();
-            this.i.la.d = +v;
-            this.i.la = this.i.la;
+            this.i.lf.d = +v;
+            this.i.lf = this.i.lf;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "iconCornerRadiusTopRight", {
         get: function () {
-            return this.i.la ? this.i.la.e : NaN;
+            return this.i.lf ? this.i.lf.e : NaN;
         },
         set: function (v) {
             this.ensureIconCornerRadius();
-            this.i.la.e = +v;
-            this.i.la = this.i.la;
+            this.i.lf.e = +v;
+            this.i.lf = this.i.lf;
         },
         enumerable: false,
         configurable: true
     });
     IgxXButtonComponent.prototype.ensureIconCornerRadius = function () {
-        if (this.i.la) {
+        if (this.i.lf) {
             return;
         }
-        this.i.la = new CornerRadius(2);
+        this.i.lf = new CornerRadius(2);
     };
     Object.defineProperty(IgxXButtonComponent.prototype, "iconRippleColor", {
         /**
          * Gets or sets the color to use for the background when the button is pressed and the type is floating action button.
         */
         get: function () {
-            return brushToString(this.i.qr);
+            return brushToString(this.i.qw);
         },
         set: function (v) {
-            this.i.qr = stringToBrush(v);
+            this.i.qw = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -2053,10 +2053,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the text of the button when type is icon.
         */
         get: function () {
-            return brushToString(this.i.qs);
+            return brushToString(this.i.qx);
         },
         set: function (v) {
-            this.i.qs = stringToBrush(v);
+            this.i.qx = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -2066,10 +2066,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the hovered text of the button when type is icon.
         */
         get: function () {
-            return brushToString(this.i.qq);
+            return brushToString(this.i.qv);
         },
         set: function (v) {
-            this.i.qq = stringToBrush(v);
+            this.i.qv = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -2079,10 +2079,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the backround the button when it is focused and icon.
         */
         get: function () {
-            return brushToString(this.i.qn);
+            return brushToString(this.i.qs);
         },
         set: function (v) {
-            this.i.qn = stringToBrush(v);
+            this.i.qs = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -2092,10 +2092,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the color to use for the text the button when it is focused and icon.
         */
         get: function () {
-            return brushToString(this.i.qo);
+            return brushToString(this.i.qt);
         },
         set: function (v) {
-            this.i.qo = stringToBrush(v);
+            this.i.qt = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
@@ -2105,10 +2105,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the id to use for the internal native checkbox.
         */
         get: function () {
-            return this.i.hy;
+            return this.i.hz;
         },
         set: function (v) {
-            this.i.hy = v;
+            this.i.hz = v;
         },
         enumerable: false,
         configurable: true
@@ -2118,10 +2118,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the id to use for the checkbox.
         */
         get: function () {
-            return this.i.hw;
+            return this.i.hx;
         },
         set: function (v) {
-            this.i.hw = v;
+            this.i.hx = v;
         },
         enumerable: false,
         configurable: true
@@ -2131,10 +2131,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the id to use for the checkbox.
         */
         get: function () {
-            return this.i.f0;
+            return this.i.f1;
         },
         set: function (v) {
-            this.i.f0 = v;
+            this.i.f1 = v;
         },
         enumerable: false,
         configurable: true
@@ -2144,10 +2144,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the id to use for the checkbox.
         */
         get: function () {
-            return this.i.g4;
+            return this.i.g5;
         },
         set: function (v) {
-            this.i.g4 = v;
+            this.i.g5 = v;
         },
         enumerable: false,
         configurable: true
@@ -2157,10 +2157,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the flex-grow setting for the button.
         */
         get: function () {
-            return this.i.g6;
+            return this.i.g7;
         },
         set: function (v) {
-            this.i.g6 = v;
+            this.i.g7 = v;
         },
         enumerable: false,
         configurable: true
@@ -2170,10 +2170,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the id to use for the checkbox.
         */
         get: function () {
-            return this.i.fb;
+            return this.i.fc;
         },
         set: function (v) {
-            this.i.fb = v;
+            this.i.fc = v;
         },
         enumerable: false,
         configurable: true
@@ -2183,10 +2183,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets value to use for the checkbox.
         */
         get: function () {
-            return this.i.ee;
+            return this.i.ef;
         },
         set: function (v) {
-            this.i.ee = v;
+            this.i.ef = v;
         },
         enumerable: false,
         configurable: true
@@ -2196,10 +2196,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets name to use for the button.
         */
         get: function () {
-            return this.i.h6;
+            return this.i.h7;
         },
         set: function (v) {
-            this.i.h6 = v;
+            this.i.h7 = v;
         },
         enumerable: false,
         configurable: true
@@ -2209,10 +2209,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets TabIndex to use for the checkbox.
         */
         get: function () {
-            return this.i.d7;
+            return this.i.d8;
         },
         set: function (v) {
-            this.i.d7 = +v;
+            this.i.d8 = +v;
         },
         enumerable: false,
         configurable: true
@@ -2222,10 +2222,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the value of the aria-label attribute.
         */
         get: function () {
-            return this.i.fd;
+            return this.i.fe;
         },
         set: function (v) {
-            this.i.fd = v;
+            this.i.fe = v;
         },
         enumerable: false,
         configurable: true
@@ -2236,10 +2236,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * will use an intrinsic size.
         */
         get: function () {
-            return this.i.ay;
+            return this.i.az;
         },
         set: function (v) {
-            this.i.ay = ensureBool(v);
+            this.i.az = ensureBool(v);
         },
         enumerable: false,
         configurable: true
@@ -2262,10 +2262,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets if the button show use styling to show focus.
         */
         get: function () {
-            return this.i.a2;
+            return this.i.a3;
         },
         set: function (v) {
-            this.i.a2 = ensureBool(v);
+            this.i.a3 = ensureBool(v);
         },
         enumerable: false,
         configurable: true
@@ -2275,10 +2275,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets whether to disable the ripple effect for the button.
         */
         get: function () {
-            return this.i.aw;
+            return this.i.ax;
         },
         set: function (v) {
-            this.i.aw = ensureBool(v);
+            this.i.ax = ensureBool(v);
         },
         enumerable: false,
         configurable: true
@@ -2288,10 +2288,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets whether to actually disable the ripple effect for the button.
         */
         get: function () {
-            return this.i.as;
+            return this.i.at;
         },
         set: function (v) {
-            this.i.as = ensureBool(v);
+            this.i.at = ensureBool(v);
         },
         enumerable: false,
         configurable: true
@@ -2301,10 +2301,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets whether the hover effect is disabled.
         */
         get: function () {
-            return this.i.au;
+            return this.i.av;
         },
         set: function (v) {
-            this.i.au = ensureBool(v);
+            this.i.av = ensureBool(v);
         },
         enumerable: false,
         configurable: true
@@ -2314,10 +2314,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets whether the checkbox is checked.
         */
         get: function () {
-            return this.i.a3;
+            return this.i.a4;
         },
         set: function (v) {
-            this.i.a3 = ensureBool(v);
+            this.i.a4 = ensureBool(v);
         },
         enumerable: false,
         configurable: true
@@ -2340,10 +2340,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets whether the checkbox transitions are disabled.
         */
         get: function () {
-            return this.i.ax;
+            return this.i.ay;
         },
         set: function (v) {
-            this.i.ax = ensureBool(v);
+            this.i.ay = ensureBool(v);
         },
         enumerable: false,
         configurable: true
@@ -2353,10 +2353,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets whether the cursor will change into a pointer when the button is hovered.
         */
         get: function () {
-            return this.i.av;
+            return this.i.aw;
         },
         set: function (v) {
-            this.i.av = ensureBool(v);
+            this.i.aw = ensureBool(v);
         },
         enumerable: false,
         configurable: true
@@ -2366,10 +2366,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the left padding for the button content.
         */
         get: function () {
-            return this.i.bm;
+            return this.i.bn;
         },
         set: function (v) {
-            this.i.bm = +v;
+            this.i.bn = +v;
         },
         enumerable: false,
         configurable: true
@@ -2379,10 +2379,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the top padding for the button content.
         */
         get: function () {
-            return this.i.bo;
+            return this.i.bp;
         },
         set: function (v) {
-            this.i.bo = +v;
+            this.i.bp = +v;
         },
         enumerable: false,
         configurable: true
@@ -2392,10 +2392,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the right padding for the button content.
         */
         get: function () {
-            return this.i.bn;
+            return this.i.bo;
         },
         set: function (v) {
-            this.i.bn = +v;
+            this.i.bo = +v;
         },
         enumerable: false,
         configurable: true
@@ -2405,30 +2405,30 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets the bottom padding for the button content.
         */
         get: function () {
-            return this.i.bl;
+            return this.i.bm;
         },
         set: function (v) {
-            this.i.bl = +v;
+            this.i.bm = +v;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "horizontalContentAlignment", {
         get: function () {
-            return this.i.le;
+            return this.i.lj;
         },
         set: function (v) {
-            this.i.le = ensureEnum(HorizontalAlignment_$type, v);
+            this.i.lj = ensureEnum(HorizontalAlignment_$type, v);
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "verticalContentAlignment", {
         get: function () {
-            return this.i.ri;
+            return this.i.rn;
         },
         set: function (v) {
-            this.i.ri = ensureEnum(VerticalAlignment_$type, v);
+            this.i.rn = ensureEnum(VerticalAlignment_$type, v);
         },
         enumerable: false,
         configurable: true
@@ -2438,10 +2438,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets if clicking on the button is allowed to tunnel down to button content.
         */
         get: function () {
-            return this.i.at;
+            return this.i.au;
         },
         set: function (v) {
-            this.i.at = ensureBool(v);
+            this.i.au = ensureBool(v);
         },
         enumerable: false,
         configurable: true
@@ -2451,10 +2451,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * Gets or sets whether mouse events on the button will bubble up to parent elements.
         */
         get: function () {
-            return this.i.a5;
+            return this.i.a6;
         },
         set: function (v) {
-            this.i.a5 = ensureBool(v);
+            this.i.a6 = ensureBool(v);
         },
         enumerable: false,
         configurable: true
@@ -2535,7 +2535,7 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
     */
     IgxXButtonComponent.prototype.exportVisualModel = function () {
-        var iv = this.i.eb();
+        var iv = this.i.ec();
         return (iv);
     };
     /**
@@ -2543,7 +2543,7 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
     */
     IgxXButtonComponent.prototype.exportSerializedVisualModel = function () {
-        var iv = this.i.f4();
+        var iv = this.i.f5();
         return (iv);
     };
     Object.defineProperty(IgxXButtonComponent.prototype, "clicked", {