igniteui-angular-inputs 18.2.0 → 19.0.1

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

@@ -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.bu;
+            return this.i.by;
         },
         set: function (v) {
-            this.i.bu = +v;
+            this.i.by = +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.bt;
+            return this.i.bx;
         },
         set: function (v) {
-            this.i.bt = +v;
+            this.i.bx = +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.ni);
+            return brushToString(this.i.np);
         },
         set: function (v) {
-            this.i.ni = stringToBrush(v);
+            this.i.np = 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.nt);
+            return brushToString(this.i.n0);
         },
         set: function (v) {
-            this.i.nt = stringToBrush(v);
+            this.i.n0 = 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.nq);
+            return brushToString(this.i.nx);
         },
         set: function (v) {
-            this.i.nq = stringToBrush(v);
+            this.i.nx = 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.ng);
+            return brushToString(this.i.nn);
         },
         set: function (v) {
-            this.i.ng = stringToBrush(v);
+            this.i.nn = 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.ct;
+            return this.i.cx;
         },
         set: function (v) {
-            this.i.ct = +v;
+            this.i.cx = +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.cr;
+            return this.i.cv;
         },
         set: function (v) {
-            this.i.cr = +v;
+            this.i.cv = +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.cs;
+            return this.i.cw;
         },
         set: function (v) {
-            this.i.cs = +v;
+            this.i.cw = +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.nr);
+            return brushToString(this.i.ny);
         },
         set: function (v) {
-            this.i.nr = stringToBrush(v);
+            this.i.ny = stringToBrush(v);
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "actualCornerRadiusBottomRight", {
         get: function () {
-            return this.i.ks ? this.i.ks.c : NaN;
+            return this.i.kz ? this.i.kz.c : NaN;
         },
         set: function (v) {
             this.ensureActualCornerRadius();
-            this.i.ks.c = +v;
-            this.i.ks = this.i.ks;
+            this.i.kz.c = +v;
+            this.i.kz = this.i.kz;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "actualCornerRadiusBottomLeft", {
         get: function () {
-            return this.i.ks ? this.i.ks.b : NaN;
+            return this.i.kz ? this.i.kz.b : NaN;
         },
         set: function (v) {
             this.ensureActualCornerRadius();
-            this.i.ks.b = +v;
-            this.i.ks = this.i.ks;
+            this.i.kz.b = +v;
+            this.i.kz = this.i.kz;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "actualCornerRadiusTopLeft", {
         get: function () {
-            return this.i.ks ? this.i.ks.d : NaN;
+            return this.i.kz ? this.i.kz.d : NaN;
         },
         set: function (v) {
             this.ensureActualCornerRadius();
-            this.i.ks.d = +v;
-            this.i.ks = this.i.ks;
+            this.i.kz.d = +v;
+            this.i.kz = this.i.kz;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "actualCornerRadiusTopRight", {
         get: function () {
-            return this.i.ks ? this.i.ks.e : NaN;
+            return this.i.kz ? this.i.kz.e : NaN;
         },
         set: function (v) {
             this.ensureActualCornerRadius();
-            this.i.ks.e = +v;
-            this.i.ks = this.i.ks;
+            this.i.kz.e = +v;
+            this.i.kz = this.i.kz;
         },
         enumerable: false,
         configurable: true
     });
     IgxXButtonComponent.prototype.ensureActualCornerRadius = function () {
-        if (this.i.ks) {
+        if (this.i.kz) {
             return;
         }
-        this.i.ks = new CornerRadius(2);
+        this.i.kz = new CornerRadius(2);
     };
     Object.defineProperty(IgxXButtonComponent.prototype, "actualBackgroundColor", {
         /**
          * Gets the color to use for the actual background.
         */
         get: function () {
-            return brushToString(this.i.nh);
+            return brushToString(this.i.no);
         },
         set: function (v) {
-            this.i.nh = stringToBrush(v);
+            this.i.no = 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.nj);
+            return brushToString(this.i.nq);
         },
         set: function (v) {
-            this.i.nj = stringToBrush(v);
+            this.i.nq = 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.nk);
+            return brushToString(this.i.nr);
         },
         set: function (v) {
-            this.i.nk = stringToBrush(v);
+            this.i.nr = 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.nl);
+            return brushToString(this.i.ns);
         },
         set: function (v) {
-            this.i.nl = stringToBrush(v);
+            this.i.ns = 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.cq;
+            return this.i.cu;
         },
         set: function (v) {
-            this.i.cq = +v;
+            this.i.cu = +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.ns);
+            return brushToString(this.i.nz);
         },
         set: function (v) {
-            this.i.ns = stringToBrush(v);
+            this.i.nz = 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.np);
+            return brushToString(this.i.nw);
         },
         set: function (v) {
-            this.i.np = stringToBrush(v);
+            this.i.nw = 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.nm);
+            return brushToString(this.i.nt);
         },
         set: function (v) {
-            this.i.nm = stringToBrush(v);
+            this.i.nt = 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.nn);
+            return brushToString(this.i.nu);
         },
         set: function (v) {
-            this.i.nn = stringToBrush(v);
+            this.i.nu = 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.no);
+            return brushToString(this.i.nv);
         },
         set: function (v) {
-            this.i.no = stringToBrush(v);
+            this.i.nv = 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.bf;
+            return this.i.bj;
         },
         set: function (v) {
-            this.i.bf = +v;
+            this.i.bj = +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.qx);
+            return brushToString(this.i.q4);
         },
         set: function (v) {
-            this.i.qx = stringToBrush(v);
+            this.i.q4 = 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.qz);
+            return brushToString(this.i.q6);
         },
         set: function (v) {
-            this.i.qz = stringToBrush(v);
+            this.i.q6 = 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.q0);
+            return brushToString(this.i.q7);
         },
         set: function (v) {
-            this.i.q0 = stringToBrush(v);
+            this.i.q7 = 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.q1);
+            return brushToString(this.i.q8);
         },
         set: function (v) {
-            this.i.q1 = stringToBrush(v);
+            this.i.q8 = 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.dy;
+            return this.i.d2;
         },
         set: function (v) {
-            this.i.dy = +v;
+            this.i.d2 = +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.q4);
+            return brushToString(this.i.rb);
         },
         set: function (v) {
-            this.i.q4 = stringToBrush(v);
+            this.i.rb = 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.qy);
+            return brushToString(this.i.q5);
         },
         set: function (v) {
-            this.i.qy = stringToBrush(v);
+            this.i.q5 = 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.d1;
+            return this.i.d5;
         },
         set: function (v) {
-            this.i.d1 = +v;
+            this.i.d5 = +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.d0;
+            return this.i.d4;
         },
         set: function (v) {
-            this.i.d0 = +v;
+            this.i.d4 = +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.dz;
+            return this.i.d3;
         },
         set: function (v) {
-            this.i.dz = +v;
+            this.i.d3 = +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.bw;
+            return this.i.b0;
         },
         set: function (v) {
-            this.i.bw = +v;
+            this.i.b0 = +v;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "raisedCornerRadiusBottomRight", {
         get: function () {
-            return this.i.k5 ? this.i.k5.c : NaN;
+            return this.i.lc ? this.i.lc.c : NaN;
         },
         set: function (v) {
             this.ensureRaisedCornerRadius();
-            this.i.k5.c = +v;
-            this.i.k5 = this.i.k5;
+            this.i.lc.c = +v;
+            this.i.lc = this.i.lc;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "raisedCornerRadiusBottomLeft", {
         get: function () {
-            return this.i.k5 ? this.i.k5.b : NaN;
+            return this.i.lc ? this.i.lc.b : NaN;
         },
         set: function (v) {
             this.ensureRaisedCornerRadius();
-            this.i.k5.b = +v;
-            this.i.k5 = this.i.k5;
+            this.i.lc.b = +v;
+            this.i.lc = this.i.lc;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "raisedCornerRadiusTopLeft", {
         get: function () {
-            return this.i.k5 ? this.i.k5.d : NaN;
+            return this.i.lc ? this.i.lc.d : NaN;
         },
         set: function (v) {
             this.ensureRaisedCornerRadius();
-            this.i.k5.d = +v;
-            this.i.k5 = this.i.k5;
+            this.i.lc.d = +v;
+            this.i.lc = this.i.lc;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "raisedCornerRadiusTopRight", {
         get: function () {
-            return this.i.k5 ? this.i.k5.e : NaN;
+            return this.i.lc ? this.i.lc.e : NaN;
         },
         set: function (v) {
             this.ensureRaisedCornerRadius();
-            this.i.k5.e = +v;
-            this.i.k5 = this.i.k5;
+            this.i.lc.e = +v;
+            this.i.lc = this.i.lc;
         },
         enumerable: false,
         configurable: true
     });
     IgxXButtonComponent.prototype.ensureRaisedCornerRadius = function () {
-        if (this.i.k5) {
+        if (this.i.lc) {
             return;
         }
-        this.i.k5 = new CornerRadius(2);
+        this.i.lc = 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.q6);
+            return brushToString(this.i.rd);
         },
         set: function (v) {
-            this.i.q6 = stringToBrush(v);
+            this.i.rd = 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.pw);
+            return brushToString(this.i.p3);
         },
         set: function (v) {
-            this.i.pw = stringToBrush(v);
+            this.i.p3 = 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.py);
+            return brushToString(this.i.p5);
         },
         set: function (v) {
-            this.i.py = stringToBrush(v);
+            this.i.p5 = 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.pz);
+            return brushToString(this.i.p6);
         },
         set: function (v) {
-            this.i.pz = stringToBrush(v);
+            this.i.p6 = 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.p0);
+            return brushToString(this.i.p7);
         },
         set: function (v) {
-            this.i.p0 = stringToBrush(v);
+            this.i.p7 = 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.dj;
+            return this.i.dn;
         },
         set: function (v) {
-            this.i.dj = +v;
+            this.i.dn = +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.p3);
+            return brushToString(this.i.qa);
         },
         set: function (v) {
-            this.i.p3 = stringToBrush(v);
+            this.i.qa = 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.px);
+            return brushToString(this.i.p4);
         },
         set: function (v) {
-            this.i.px = stringToBrush(v);
+            this.i.p4 = 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.dm;
+            return this.i.dr;
         },
         set: function (v) {
-            this.i.dm = +v;
+            this.i.dr = +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.dl;
+            return this.i.dq;
         },
         set: function (v) {
-            this.i.dl = +v;
+            this.i.dq = +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.dk;
+            return this.i.dp;
         },
         set: function (v) {
-            this.i.dk = +v;
+            this.i.dp = +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.p5);
+            return brushToString(this.i.qc);
         },
         set: function (v) {
-            this.i.p5 = stringToBrush(v);
+            this.i.qc = 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.p6);
+            return brushToString(this.i.qd);
         },
         set: function (v) {
-            this.i.p6 = stringToBrush(v);
+            this.i.qd = 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.p4);
+            return brushToString(this.i.qb);
         },
         set: function (v) {
-            this.i.p4 = stringToBrush(v);
+            this.i.qb = 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.p1);
+            return brushToString(this.i.p8);
         },
         set: function (v) {
-            this.i.p1 = stringToBrush(v);
+            this.i.p8 = 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.p2);
+            return brushToString(this.i.p9);
         },
         set: function (v) {
-            this.i.p2 = stringToBrush(v);
+            this.i.p9 = 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.br;
+            return this.i.bv;
         },
         set: function (v) {
-            this.i.br = +v;
+            this.i.bv = +v;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "flatCornerRadiusBottomRight", {
         get: function () {
-            return this.i.k1 ? this.i.k1.c : NaN;
+            return this.i.k8 ? this.i.k8.c : NaN;
         },
         set: function (v) {
             this.ensureFlatCornerRadius();
-            this.i.k1.c = +v;
-            this.i.k1 = this.i.k1;
+            this.i.k8.c = +v;
+            this.i.k8 = this.i.k8;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "flatCornerRadiusBottomLeft", {
         get: function () {
-            return this.i.k1 ? this.i.k1.b : NaN;
+            return this.i.k8 ? this.i.k8.b : NaN;
         },
         set: function (v) {
             this.ensureFlatCornerRadius();
-            this.i.k1.b = +v;
-            this.i.k1 = this.i.k1;
+            this.i.k8.b = +v;
+            this.i.k8 = this.i.k8;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "flatCornerRadiusTopLeft", {
         get: function () {
-            return this.i.k1 ? this.i.k1.d : NaN;
+            return this.i.k8 ? this.i.k8.d : NaN;
         },
         set: function (v) {
             this.ensureFlatCornerRadius();
-            this.i.k1.d = +v;
-            this.i.k1 = this.i.k1;
+            this.i.k8.d = +v;
+            this.i.k8 = this.i.k8;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "flatCornerRadiusTopRight", {
         get: function () {
-            return this.i.k1 ? this.i.k1.e : NaN;
+            return this.i.k8 ? this.i.k8.e : NaN;
         },
         set: function (v) {
             this.ensureFlatCornerRadius();
-            this.i.k1.e = +v;
-            this.i.k1 = this.i.k1;
+            this.i.k8.e = +v;
+            this.i.k8 = this.i.k8;
         },
         enumerable: false,
         configurable: true
     });
     IgxXButtonComponent.prototype.ensureFlatCornerRadius = function () {
-        if (this.i.k1) {
+        if (this.i.k8) {
             return;
         }
-        this.i.k1 = new CornerRadius(2);
+        this.i.k8 = 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.nu);
+            return brushToString(this.i.n1);
         },
         set: function (v) {
-            this.i.nu = stringToBrush(v);
+            this.i.n1 = 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.pi);
+            return brushToString(this.i.pp);
         },
         set: function (v) {
-            this.i.pi = stringToBrush(v);
+            this.i.pp = 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.pj);
+            return brushToString(this.i.pq);
         },
         set: function (v) {
-            this.i.pj = stringToBrush(v);
+            this.i.pq = 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.pk);
+            return brushToString(this.i.pr);
         },
         set: function (v) {
-            this.i.pk = stringToBrush(v);
+            this.i.pr = 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.de;
+            return this.i.di;
         },
         set: function (v) {
-            this.i.de = +v;
+            this.i.di = +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.p9);
+            return brushToString(this.i.qg);
         },
         set: function (v) {
-            this.i.p9 = stringToBrush(v);
+            this.i.qg = 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.nv);
+            return brushToString(this.i.n2);
         },
         set: function (v) {
-            this.i.nv = stringToBrush(v);
+            this.i.n2 = 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.d2;
+            return this.i.d6;
         },
         set: function (v) {
-            this.i.d2 = +v;
+            this.i.d6 = +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.dp;
+            return this.i.dt;
         },
         set: function (v) {
-            this.i.dp = +v;
+            this.i.dt = +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.dn;
+            return this.i.ds;
         },
         set: function (v) {
-            this.i.dn = +v;
+            this.i.ds = +v;
         },
         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.q9);
+            return brushToString(this.i.rg);
         },
         set: function (v) {
-            this.i.q9 = stringToBrush(v);
+            this.i.rg = 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.qa);
+            return brushToString(this.i.qh);
         },
         set: function (v) {
-            this.i.qa = stringToBrush(v);
+            this.i.qh = 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.q8);
+            return brushToString(this.i.rf);
         },
         set: function (v) {
-            this.i.q8 = stringToBrush(v);
+            this.i.rf = 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.q7);
+            return brushToString(this.i.re);
         },
         set: function (v) {
-            this.i.q7 = stringToBrush(v);
+            this.i.re = 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.q5);
+            return brushToString(this.i.rc);
         },
         set: function (v) {
-            this.i.q5 = stringToBrush(v);
+            this.i.rc = 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.q2);
+            return brushToString(this.i.q9);
         },
         set: function (v) {
-            this.i.q2 = stringToBrush(v);
+            this.i.q9 = 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.q3);
+            return brushToString(this.i.ra);
         },
         set: function (v) {
-            this.i.q3 = stringToBrush(v);
+            this.i.ra = 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.p7);
+            return brushToString(this.i.qe);
         },
         set: function (v) {
-            this.i.p7 = stringToBrush(v);
+            this.i.qe = 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.p8);
+            return brushToString(this.i.qf);
         },
         set: function (v) {
-            this.i.p8 = stringToBrush(v);
+            this.i.qf = 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.bg;
+            return this.i.bk;
         },
         set: function (v) {
-            this.i.bg = +v;
+            this.i.bk = +v;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "cornerRadiusBottomRight", {
         get: function () {
-            return this.i.ku ? this.i.ku.c : NaN;
+            return this.i.k1 ? this.i.k1.c : NaN;
         },
         set: function (v) {
             this.ensureCornerRadius();
-            this.i.ku.c = +v;
-            this.i.ku = this.i.ku;
+            this.i.k1.c = +v;
+            this.i.k1 = this.i.k1;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "cornerRadiusBottomLeft", {
         get: function () {
-            return this.i.ku ? this.i.ku.b : NaN;
+            return this.i.k1 ? this.i.k1.b : NaN;
         },
         set: function (v) {
             this.ensureCornerRadius();
-            this.i.ku.b = +v;
-            this.i.ku = this.i.ku;
+            this.i.k1.b = +v;
+            this.i.k1 = this.i.k1;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "cornerRadiusTopLeft", {
         get: function () {
-            return this.i.ku ? this.i.ku.d : NaN;
+            return this.i.k1 ? this.i.k1.d : NaN;
         },
         set: function (v) {
             this.ensureCornerRadius();
-            this.i.ku.d = +v;
-            this.i.ku = this.i.ku;
+            this.i.k1.d = +v;
+            this.i.k1 = this.i.k1;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "cornerRadiusTopRight", {
         get: function () {
-            return this.i.ku ? this.i.ku.e : NaN;
+            return this.i.k1 ? this.i.k1.e : NaN;
         },
         set: function (v) {
             this.ensureCornerRadius();
-            this.i.ku.e = +v;
-            this.i.ku = this.i.ku;
+            this.i.k1.e = +v;
+            this.i.k1 = this.i.k1;
         },
         enumerable: false,
         configurable: true
     });
     IgxXButtonComponent.prototype.ensureCornerRadius = function () {
-        if (this.i.ku) {
+        if (this.i.k1) {
             return;
         }
-        this.i.ku = new CornerRadius(2);
+        this.i.k1 = 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.qm);
+            return brushToString(this.i.qt);
         },
         set: function (v) {
-            this.i.qm = stringToBrush(v);
+            this.i.qt = 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.qo);
+            return brushToString(this.i.qv);
         },
         set: function (v) {
-            this.i.qo = stringToBrush(v);
+            this.i.qv = 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.qp);
+            return brushToString(this.i.qw);
         },
         set: function (v) {
-            this.i.qp = stringToBrush(v);
+            this.i.qw = 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.qq);
+            return brushToString(this.i.qx);
         },
         set: function (v) {
-            this.i.qq = stringToBrush(v);
+            this.i.qx = 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.du;
+            return this.i.dy;
         },
         set: function (v) {
-            this.i.du = +v;
+            this.i.dy = +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.qt);
+            return brushToString(this.i.q0);
         },
         set: function (v) {
-            this.i.qt = stringToBrush(v);
+            this.i.q0 = 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.qn);
+            return brushToString(this.i.qu);
         },
         set: function (v) {
-            this.i.qn = stringToBrush(v);
+            this.i.qu = 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.dx;
+            return this.i.d1;
         },
         set: function (v) {
-            this.i.dx = +v;
+            this.i.d1 = +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.dw;
+            return this.i.d0;
         },
         set: function (v) {
-            this.i.dw = +v;
+            this.i.d0 = +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.dv;
+            return this.i.dz;
         },
         set: function (v) {
-            this.i.dv = +v;
+            this.i.dz = +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.bv;
+            return this.i.bz;
         },
         set: function (v) {
-            this.i.bv = +v;
+            this.i.bz = +v;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "outlinedCornerRadiusBottomRight", {
         get: function () {
-            return this.i.k4 ? this.i.k4.c : NaN;
+            return this.i.lb ? this.i.lb.c : NaN;
         },
         set: function (v) {
             this.ensureOutlinedCornerRadius();
-            this.i.k4.c = +v;
-            this.i.k4 = this.i.k4;
+            this.i.lb.c = +v;
+            this.i.lb = this.i.lb;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "outlinedCornerRadiusBottomLeft", {
         get: function () {
-            return this.i.k4 ? this.i.k4.b : NaN;
+            return this.i.lb ? this.i.lb.b : NaN;
         },
         set: function (v) {
             this.ensureOutlinedCornerRadius();
-            this.i.k4.b = +v;
-            this.i.k4 = this.i.k4;
+            this.i.lb.b = +v;
+            this.i.lb = this.i.lb;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "outlinedCornerRadiusTopLeft", {
         get: function () {
-            return this.i.k4 ? this.i.k4.d : NaN;
+            return this.i.lb ? this.i.lb.d : NaN;
         },
         set: function (v) {
             this.ensureOutlinedCornerRadius();
-            this.i.k4.d = +v;
-            this.i.k4 = this.i.k4;
+            this.i.lb.d = +v;
+            this.i.lb = this.i.lb;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "outlinedCornerRadiusTopRight", {
         get: function () {
-            return this.i.k4 ? this.i.k4.e : NaN;
+            return this.i.lb ? this.i.lb.e : NaN;
         },
         set: function (v) {
             this.ensureOutlinedCornerRadius();
-            this.i.k4.e = +v;
-            this.i.k4 = this.i.k4;
+            this.i.lb.e = +v;
+            this.i.lb = this.i.lb;
         },
         enumerable: false,
         configurable: true
     });
     IgxXButtonComponent.prototype.ensureOutlinedCornerRadius = function () {
-        if (this.i.k4) {
+        if (this.i.lb) {
             return;
         }
-        this.i.k4 = new CornerRadius(2);
+        this.i.lb = 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.qv);
+            return brushToString(this.i.q2);
         },
         set: function (v) {
-            this.i.qv = stringToBrush(v);
+            this.i.q2 = 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.qw);
+            return brushToString(this.i.q3);
         },
         set: function (v) {
-            this.i.qw = stringToBrush(v);
+            this.i.q3 = 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.qu);
+            return brushToString(this.i.q1);
         },
         set: function (v) {
-            this.i.qu = stringToBrush(v);
+            this.i.q1 = 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.qr);
+            return brushToString(this.i.qy);
         },
         set: function (v) {
-            this.i.qr = stringToBrush(v);
+            this.i.qy = 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.qs);
+            return brushToString(this.i.qz);
         },
         set: function (v) {
-            this.i.qs = stringToBrush(v);
+            this.i.qz = 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.pl);
+            return brushToString(this.i.ps);
         },
         set: function (v) {
-            this.i.pl = stringToBrush(v);
+            this.i.ps = 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.pn);
+            return brushToString(this.i.pu);
         },
         set: function (v) {
-            this.i.pn = stringToBrush(v);
+            this.i.pu = 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.po);
+            return brushToString(this.i.pv);
         },
         set: function (v) {
-            this.i.po = stringToBrush(v);
+            this.i.pv = 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.pp);
+            return brushToString(this.i.pw);
         },
         set: function (v) {
-            this.i.pp = stringToBrush(v);
+            this.i.pw = 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.df;
+            return this.i.dj;
         },
         set: function (v) {
-            this.i.df = +v;
+            this.i.dj = +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.ps);
+            return brushToString(this.i.pz);
         },
         set: function (v) {
-            this.i.ps = stringToBrush(v);
+            this.i.pz = 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.pm);
+            return brushToString(this.i.pt);
         },
         set: function (v) {
-            this.i.pm = stringToBrush(v);
+            this.i.pt = 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.di;
+            return this.i.dm;
         },
         set: function (v) {
-            this.i.di = +v;
+            this.i.dm = +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.dh;
+            return this.i.dl;
         },
         set: function (v) {
-            this.i.dh = +v;
+            this.i.dl = +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.dg;
+            return this.i.dk;
         },
         set: function (v) {
-            this.i.dg = +v;
+            this.i.dk = +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.bq;
+            return this.i.bu;
         },
         set: function (v) {
-            this.i.bq = +v;
+            this.i.bu = +v;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "fabCornerRadiusBottomRight", {
         get: function () {
-            return this.i.k0 ? this.i.k0.c : NaN;
+            return this.i.k7 ? this.i.k7.c : NaN;
         },
         set: function (v) {
             this.ensureFabCornerRadius();
-            this.i.k0.c = +v;
-            this.i.k0 = this.i.k0;
+            this.i.k7.c = +v;
+            this.i.k7 = this.i.k7;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "fabCornerRadiusBottomLeft", {
         get: function () {
-            return this.i.k0 ? this.i.k0.b : NaN;
+            return this.i.k7 ? this.i.k7.b : NaN;
         },
         set: function (v) {
             this.ensureFabCornerRadius();
-            this.i.k0.b = +v;
-            this.i.k0 = this.i.k0;
+            this.i.k7.b = +v;
+            this.i.k7 = this.i.k7;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "fabCornerRadiusTopLeft", {
         get: function () {
-            return this.i.k0 ? this.i.k0.d : NaN;
+            return this.i.k7 ? this.i.k7.d : NaN;
         },
         set: function (v) {
             this.ensureFabCornerRadius();
-            this.i.k0.d = +v;
-            this.i.k0 = this.i.k0;
+            this.i.k7.d = +v;
+            this.i.k7 = this.i.k7;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "fabCornerRadiusTopRight", {
         get: function () {
-            return this.i.k0 ? this.i.k0.e : NaN;
+            return this.i.k7 ? this.i.k7.e : NaN;
         },
         set: function (v) {
             this.ensureFabCornerRadius();
-            this.i.k0.e = +v;
-            this.i.k0 = this.i.k0;
+            this.i.k7.e = +v;
+            this.i.k7 = this.i.k7;
         },
         enumerable: false,
         configurable: true
     });
     IgxXButtonComponent.prototype.ensureFabCornerRadius = function () {
-        if (this.i.k0) {
+        if (this.i.k7) {
             return;
         }
-        this.i.k0 = new CornerRadius(2);
+        this.i.k7 = 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.pu);
+            return brushToString(this.i.p1);
         },
         set: function (v) {
-            this.i.pu = stringToBrush(v);
+            this.i.p1 = 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.pv);
+            return brushToString(this.i.p2);
         },
         set: function (v) {
-            this.i.pv = stringToBrush(v);
+            this.i.p2 = 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.pt);
+            return brushToString(this.i.p0);
         },
         set: function (v) {
-            this.i.pt = stringToBrush(v);
+            this.i.p0 = 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.pq);
+            return brushToString(this.i.px);
         },
         set: function (v) {
-            this.i.pq = stringToBrush(v);
+            this.i.px = 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.pr);
+            return brushToString(this.i.py);
         },
         set: function (v) {
-            this.i.pr = stringToBrush(v);
+            this.i.py = 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.qb);
+            return brushToString(this.i.qi);
         },
         set: function (v) {
-            this.i.qb = stringToBrush(v);
+            this.i.qi = 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.qd);
+            return brushToString(this.i.qk);
         },
         set: function (v) {
-            this.i.qd = stringToBrush(v);
+            this.i.qk = 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.qe);
+            return brushToString(this.i.ql);
         },
         set: function (v) {
-            this.i.qe = stringToBrush(v);
+            this.i.ql = 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.qf);
+            return brushToString(this.i.qm);
         },
         set: function (v) {
-            this.i.qf = stringToBrush(v);
+            this.i.qm = 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.dq;
+            return this.i.du;
         },
         set: function (v) {
-            this.i.dq = +v;
+            this.i.du = +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.qi);
+            return brushToString(this.i.qp);
         },
         set: function (v) {
-            this.i.qi = stringToBrush(v);
+            this.i.qp = 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.qc);
+            return brushToString(this.i.qj);
         },
         set: function (v) {
-            this.i.qc = stringToBrush(v);
+            this.i.qj = 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.dt;
+            return this.i.dx;
         },
         set: function (v) {
-            this.i.dt = +v;
+            this.i.dx = +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.ds;
+            return this.i.dw;
         },
         set: function (v) {
-            this.i.ds = +v;
+            this.i.dw = +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.dr;
+            return this.i.dv;
         },
         set: function (v) {
-            this.i.dr = +v;
+            this.i.dv = +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.bs;
+            return this.i.bw;
         },
         set: function (v) {
-            this.i.bs = +v;
+            this.i.bw = +v;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "iconCornerRadiusBottomRight", {
         get: function () {
-            return this.i.k3 ? this.i.k3.c : NaN;
+            return this.i.la ? this.i.la.c : NaN;
         },
         set: function (v) {
             this.ensureIconCornerRadius();
-            this.i.k3.c = +v;
-            this.i.k3 = this.i.k3;
+            this.i.la.c = +v;
+            this.i.la = this.i.la;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "iconCornerRadiusBottomLeft", {
         get: function () {
-            return this.i.k3 ? this.i.k3.b : NaN;
+            return this.i.la ? this.i.la.b : NaN;
         },
         set: function (v) {
             this.ensureIconCornerRadius();
-            this.i.k3.b = +v;
-            this.i.k3 = this.i.k3;
+            this.i.la.b = +v;
+            this.i.la = this.i.la;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "iconCornerRadiusTopLeft", {
         get: function () {
-            return this.i.k3 ? this.i.k3.d : NaN;
+            return this.i.la ? this.i.la.d : NaN;
         },
         set: function (v) {
             this.ensureIconCornerRadius();
-            this.i.k3.d = +v;
-            this.i.k3 = this.i.k3;
+            this.i.la.d = +v;
+            this.i.la = this.i.la;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "iconCornerRadiusTopRight", {
         get: function () {
-            return this.i.k3 ? this.i.k3.e : NaN;
+            return this.i.la ? this.i.la.e : NaN;
         },
         set: function (v) {
             this.ensureIconCornerRadius();
-            this.i.k3.e = +v;
-            this.i.k3 = this.i.k3;
+            this.i.la.e = +v;
+            this.i.la = this.i.la;
         },
         enumerable: false,
         configurable: true
     });
     IgxXButtonComponent.prototype.ensureIconCornerRadius = function () {
-        if (this.i.k3) {
+        if (this.i.la) {
             return;
         }
-        this.i.k3 = new CornerRadius(2);
+        this.i.la = 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.qk);
+            return brushToString(this.i.qr);
         },
         set: function (v) {
-            this.i.qk = stringToBrush(v);
+            this.i.qr = 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.ql);
+            return brushToString(this.i.qs);
         },
         set: function (v) {
-            this.i.ql = stringToBrush(v);
+            this.i.qs = 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.qj);
+            return brushToString(this.i.qq);
         },
         set: function (v) {
-            this.i.qj = stringToBrush(v);
+            this.i.qq = 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.qg);
+            return brushToString(this.i.qn);
         },
         set: function (v) {
-            this.i.qg = stringToBrush(v);
+            this.i.qn = 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.qh);
+            return brushToString(this.i.qo);
         },
         set: function (v) {
-            this.i.qh = stringToBrush(v);
+            this.i.qo = 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.hu;
+            return this.i.hy;
         },
         set: function (v) {
-            this.i.hu = v;
+            this.i.hy = 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.hs;
+            return this.i.hw;
         },
         set: function (v) {
-            this.i.hs = v;
+            this.i.hw = 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.fw;
+            return this.i.f0;
         },
         set: function (v) {
-            this.i.fw = v;
+            this.i.f0 = 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.g0;
+            return this.i.g4;
         },
         set: function (v) {
-            this.i.g0 = v;
+            this.i.g4 = 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.g2;
+            return this.i.g6;
         },
         set: function (v) {
-            this.i.g2 = v;
+            this.i.g6 = 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.e7;
+            return this.i.fb;
         },
         set: function (v) {
-            this.i.e7 = v;
+            this.i.fb = 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.ea;
+            return this.i.ee;
         },
         set: function (v) {
-            this.i.ea = v;
+            this.i.ee = 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.h2;
+            return this.i.h6;
         },
         set: function (v) {
-            this.i.h2 = v;
+            this.i.h6 = 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.d3;
+            return this.i.d7;
         },
         set: function (v) {
-            this.i.d3 = +v;
+            this.i.d7 = +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.e9;
+            return this.i.fd;
         },
         set: function (v) {
-            this.i.e9 = v;
+            this.i.fd = v;
         },
         enumerable: false,
         configurable: true
@@ -2236,10 +2236,10 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
          * will use an intrinsic size.
         */
         get: function () {
-            return this.i.av;
+            return this.i.ay;
         },
         set: function (v) {
-            this.i.av = ensureBool(v);
+            this.i.ay = 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.az;
+            return this.i.a2;
         },
         set: function (v) {
-            this.i.az = ensureBool(v);
+            this.i.a2 = 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.at;
+            return this.i.aw;
         },
         set: function (v) {
-            this.i.at = ensureBool(v);
+            this.i.aw = 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.ap;
+            return this.i.as;
         },
         set: function (v) {
-            this.i.ap = ensureBool(v);
+            this.i.as = 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.ar;
+            return this.i.au;
         },
         set: function (v) {
-            this.i.ar = ensureBool(v);
+            this.i.au = 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.a0;
+            return this.i.a3;
         },
         set: function (v) {
-            this.i.a0 = ensureBool(v);
+            this.i.a3 = 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.au;
+            return this.i.ax;
         },
         set: function (v) {
-            this.i.au = ensureBool(v);
+            this.i.ax = 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.as;
+            return this.i.av;
         },
         set: function (v) {
-            this.i.as = ensureBool(v);
+            this.i.av = 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.bi;
+            return this.i.bm;
         },
         set: function (v) {
-            this.i.bi = +v;
+            this.i.bm = +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.bk;
+            return this.i.bo;
         },
         set: function (v) {
-            this.i.bk = +v;
+            this.i.bo = +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.bj;
+            return this.i.bn;
         },
         set: function (v) {
-            this.i.bj = +v;
+            this.i.bn = +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.bh;
+            return this.i.bl;
         },
         set: function (v) {
-            this.i.bh = +v;
+            this.i.bl = +v;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "horizontalContentAlignment", {
         get: function () {
-            return this.i.k7;
+            return this.i.le;
         },
         set: function (v) {
-            this.i.k7 = ensureEnum(HorizontalAlignment_$type, v);
+            this.i.le = ensureEnum(HorizontalAlignment_$type, v);
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(IgxXButtonComponent.prototype, "verticalContentAlignment", {
         get: function () {
-            return this.i.rb;
+            return this.i.ri;
         },
         set: function (v) {
-            this.i.rb = ensureEnum(VerticalAlignment_$type, v);
+            this.i.ri = ensureEnum(VerticalAlignment_$type, v);
         },
         enumerable: false,
         configurable: true
@@ -2438,10 +2438,23 @@ 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.aq;
+            return this.i.at;
         },
         set: function (v) {
-            this.i.aq = ensureBool(v);
+            this.i.at = ensureBool(v);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(IgxXButtonComponent.prototype, "stopPropagation", {
+        /**
+         * Gets or sets whether mouse events on the button will bubble up to parent elements.
+        */
+        get: function () {
+            return this.i.a5;
+        },
+        set: function (v) {
+            this.i.a5 = ensureBool(v);
         },
         enumerable: false,
         configurable: true
@@ -2522,7 +2535,7 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
     
     */
     IgxXButtonComponent.prototype.exportVisualModel = function () {
-        var iv = this.i.d7();
+        var iv = this.i.eb();
         return (iv);
     };
     /**
@@ -2530,7 +2543,7 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
     
     */
     IgxXButtonComponent.prototype.exportSerializedVisualModel = function () {
-        var iv = this.i.f0();
+        var iv = this.i.f4();
         return (iv);
     };
     Object.defineProperty(IgxXButtonComponent.prototype, "clicked", {
@@ -2614,7 +2627,7 @@ var IgxXButtonComponent = /** @class */ /*@__PURE__*/ (function () {
         }
     };
     IgxXButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxXButtonComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component });
-    IgxXButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: IgxXButtonComponent, selector: "igx-x-button", inputs: { minWidth: "minWidth", minHeight: "minHeight", displayType: "displayType", density: "density", baseTheme: "baseTheme", actualDensity: "actualDensity", actualBorderColor: "actualBorderColor", actualUmbraShadowColor: "actualUmbraShadowColor", actualPenumbraShadowColor: "actualPenumbraShadowColor", actualAmbientShadowColor: "actualAmbientShadowColor", actualRestingElevation: "actualRestingElevation", actualFocusElevation: "actualFocusElevation", actualHoverElevation: "actualHoverElevation", actualRippleColor: "actualRippleColor", actualCornerRadiusBottomRight: "actualCornerRadiusBottomRight", actualCornerRadiusBottomLeft: "actualCornerRadiusBottomLeft", actualCornerRadiusTopLeft: "actualCornerRadiusTopLeft", actualCornerRadiusTopRight: "actualCornerRadiusTopRight", actualBackgroundColor: "actualBackgroundColor", actualDisabledBackgroundColor: "actualDisabledBackgroundColor", actualDisabledBorderColor: "actualDisabledBorderColor", actualDisabledTextColor: "actualDisabledTextColor", actualDisabledElevation: "actualDisabledElevation", actualElevationMode: "actualElevationMode", actualTextColor: "actualTextColor", actualHoverTextColor: "actualHoverTextColor", actualFocusBackgroundColor: "actualFocusBackgroundColor", actualFocusTextColor: "actualFocusTextColor", actualHoverBackgroundColor: "actualHoverBackgroundColor", actualBorderWidth: "actualBorderWidth", raisedBackgroundColor: "raisedBackgroundColor", raisedDisabledBackgroundColor: "raisedDisabledBackgroundColor", raisedDisabledBorderColor: "raisedDisabledBorderColor", raisedDisabledTextColor: "raisedDisabledTextColor", raisedDisabledElevation: "raisedDisabledElevation", raisedHoverBackgroundColor: "raisedHoverBackgroundColor", raisedBorderColor: "raisedBorderColor", raisedRestingElevation: "raisedRestingElevation", raisedHoverElevation: "raisedHoverElevation", raisedFocusElevation: "raisedFocusElevation", raisedBorderWidth: "raisedBorderWidth", raisedCornerRadiusBottomRight: "raisedCornerRadiusBottomRight", raisedCornerRadiusBottomLeft: "raisedCornerRadiusBottomLeft", raisedCornerRadiusTopLeft: "raisedCornerRadiusTopLeft", raisedCornerRadiusTopRight: "raisedCornerRadiusTopRight", raisedRippleColor: "raisedRippleColor", flatBackgroundColor: "flatBackgroundColor", flatDisabledBackgroundColor: "flatDisabledBackgroundColor", flatDisabledBorderColor: "flatDisabledBorderColor", flatDisabledTextColor: "flatDisabledTextColor", flatDisabledElevation: "flatDisabledElevation", flatHoverBackgroundColor: "flatHoverBackgroundColor", flatBorderColor: "flatBorderColor", flatRestingElevation: "flatRestingElevation", flatHoverElevation: "flatHoverElevation", flatFocusElevation: "flatFocusElevation", flatRippleColor: "flatRippleColor", flatTextColor: "flatTextColor", flatHoverTextColor: "flatHoverTextColor", flatFocusBackgroundColor: "flatFocusBackgroundColor", flatFocusTextColor: "flatFocusTextColor", flatBorderWidth: "flatBorderWidth", flatCornerRadiusBottomRight: "flatCornerRadiusBottomRight", flatCornerRadiusBottomLeft: "flatCornerRadiusBottomLeft", flatCornerRadiusTopLeft: "flatCornerRadiusTopLeft", flatCornerRadiusTopRight: "flatCornerRadiusTopRight", backgroundColor: "backgroundColor", disabledBackgroundColor: "disabledBackgroundColor", disabledBorderColor: "disabledBorderColor", disabledTextColor: "disabledTextColor", disabledElevation: "disabledElevation", elevationMode: "elevationMode", hoverBackgroundColor: "hoverBackgroundColor", borderColor: "borderColor", restingElevation: "restingElevation", hoverElevation: "hoverElevation", focusElevation: "focusElevation", textStyle: "textStyle", textColor: "textColor", hoverTextColor: "hoverTextColor", rippleColor: "rippleColor", raisedTextColor: "raisedTextColor", raisedHoverTextColor: "raisedHoverTextColor", raisedFocusBackgroundColor: "raisedFocusBackgroundColor", raisedFocusTextColor: "raisedFocusTextColor", focusBackgroundColor: "focusBackgroundColor", focusTextColor: "focusTextColor", borderWidth: "borderWidth", cornerRadiusBottomRight: "cornerRadiusBottomRight", cornerRadiusBottomLeft: "cornerRadiusBottomLeft", cornerRadiusTopLeft: "cornerRadiusTopLeft", cornerRadiusTopRight: "cornerRadiusTopRight", outlinedBackgroundColor: "outlinedBackgroundColor", outlinedDisabledBackgroundColor: "outlinedDisabledBackgroundColor", outlinedDisabledBorderColor: "outlinedDisabledBorderColor", outlinedDisabledTextColor: "outlinedDisabledTextColor", outlinedDisabledElevation: "outlinedDisabledElevation", outlinedHoverBackgroundColor: "outlinedHoverBackgroundColor", outlinedBorderColor: "outlinedBorderColor", outlinedRestingElevation: "outlinedRestingElevation", outlinedHoverElevation: "outlinedHoverElevation", outlinedFocusElevation: "outlinedFocusElevation", outlinedBorderWidth: "outlinedBorderWidth", outlinedCornerRadiusBottomRight: "outlinedCornerRadiusBottomRight", outlinedCornerRadiusBottomLeft: "outlinedCornerRadiusBottomLeft", outlinedCornerRadiusTopLeft: "outlinedCornerRadiusTopLeft", outlinedCornerRadiusTopRight: "outlinedCornerRadiusTopRight", outlinedRippleColor: "outlinedRippleColor", outlinedTextColor: "outlinedTextColor", outlinedHoverTextColor: "outlinedHoverTextColor", outlinedFocusBackgroundColor: "outlinedFocusBackgroundColor", outlinedFocusTextColor: "outlinedFocusTextColor", fabBackgroundColor: "fabBackgroundColor", fabDisabledBackgroundColor: "fabDisabledBackgroundColor", fabDisabledBorderColor: "fabDisabledBorderColor", fabDisabledTextColor: "fabDisabledTextColor", fabDisabledElevation: "fabDisabledElevation", fabHoverBackgroundColor: "fabHoverBackgroundColor", fabBorderColor: "fabBorderColor", fabRestingElevation: "fabRestingElevation", fabHoverElevation: "fabHoverElevation", fabFocusElevation: "fabFocusElevation", fabBorderWidth: "fabBorderWidth", fabCornerRadiusBottomRight: "fabCornerRadiusBottomRight", fabCornerRadiusBottomLeft: "fabCornerRadiusBottomLeft", fabCornerRadiusTopLeft: "fabCornerRadiusTopLeft", fabCornerRadiusTopRight: "fabCornerRadiusTopRight", fabRippleColor: "fabRippleColor", fabTextColor: "fabTextColor", fabHoverTextColor: "fabHoverTextColor", fabFocusBackgroundColor: "fabFocusBackgroundColor", fabFocusTextColor: "fabFocusTextColor", iconBackgroundColor: "iconBackgroundColor", iconDisabledBackgroundColor: "iconDisabledBackgroundColor", iconDisabledBorderColor: "iconDisabledBorderColor", iconDisabledTextColor: "iconDisabledTextColor", iconDisabledElevation: "iconDisabledElevation", iconHoverBackgroundColor: "iconHoverBackgroundColor", iconBorderColor: "iconBorderColor", iconRestingElevation: "iconRestingElevation", iconHoverElevation: "iconHoverElevation", iconFocusElevation: "iconFocusElevation", iconBorderWidth: "iconBorderWidth", iconCornerRadiusBottomRight: "iconCornerRadiusBottomRight", iconCornerRadiusBottomLeft: "iconCornerRadiusBottomLeft", iconCornerRadiusTopLeft: "iconCornerRadiusTopLeft", iconCornerRadiusTopRight: "iconCornerRadiusTopRight", iconRippleColor: "iconRippleColor", iconTextColor: "iconTextColor", iconHoverTextColor: "iconHoverTextColor", iconFocusBackgroundColor: "iconFocusBackgroundColor", iconFocusTextColor: "iconFocusTextColor", inputId: "inputId", id: "id", display: "display", flexDirection: "flexDirection", flexGrow: "flexGrow", alignItems: "alignItems", value: "value", name: "name", tabIndex: ["tabindex", "tabIndex"], ariaLabel: ["aria-label", "ariaLabel"], fillAvailableSpace: "fillAvailableSpace", focused: "focused", isFocusStyleEnabled: "isFocusStyleEnabled", disableRipple: "disableRipple", actualDisableRipple: "actualDisableRipple", disableHover: "disableHover", isHover: "isHover", disabled: "disabled", disableTransitions: "disableTransitions", disablePointer: "disablePointer", contentPaddingLeft: "contentPaddingLeft", contentPaddingTop: "contentPaddingTop", contentPaddingRight: "contentPaddingRight", contentPaddingBottom: "contentPaddingBottom", horizontalContentAlignment: "horizontalContentAlignment", verticalContentAlignment: "verticalContentAlignment", clickTunneling: "clickTunneling" }, outputs: { clicked: "clicked", gotFocus: "gotFocus", lostFocus: "lostFocus" }, host: { properties: { "attr.id": "this.id", "style.display": "this.display", "style.flexDirection": "this.flexDirection", "style.flexGrow": "this.flexGrow", "style.alignItems": "this.alignItems" }, classAttribute: "ig-x-button igx-x-button" }, providers: [], viewQueries: [{ propertyName: "_dynamicContent", first: true, predicate: ["dynamicContent"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "_childTemplateRef", first: true, predicate: ["childContent"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<ng-template #childContent><ng-content></ng-content></ng-template>\n<ng-container #dynamicContent></ng-container>", isInline: true, styles: ["\n\t\t:host {\n\t\t\tdisplay: inline-block;           \n\t\t}\n\t"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    IgxXButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: IgxXButtonComponent, selector: "igx-x-button", inputs: { minWidth: "minWidth", minHeight: "minHeight", displayType: "displayType", density: "density", baseTheme: "baseTheme", actualDensity: "actualDensity", actualBorderColor: "actualBorderColor", actualUmbraShadowColor: "actualUmbraShadowColor", actualPenumbraShadowColor: "actualPenumbraShadowColor", actualAmbientShadowColor: "actualAmbientShadowColor", actualRestingElevation: "actualRestingElevation", actualFocusElevation: "actualFocusElevation", actualHoverElevation: "actualHoverElevation", actualRippleColor: "actualRippleColor", actualCornerRadiusBottomRight: "actualCornerRadiusBottomRight", actualCornerRadiusBottomLeft: "actualCornerRadiusBottomLeft", actualCornerRadiusTopLeft: "actualCornerRadiusTopLeft", actualCornerRadiusTopRight: "actualCornerRadiusTopRight", actualBackgroundColor: "actualBackgroundColor", actualDisabledBackgroundColor: "actualDisabledBackgroundColor", actualDisabledBorderColor: "actualDisabledBorderColor", actualDisabledTextColor: "actualDisabledTextColor", actualDisabledElevation: "actualDisabledElevation", actualElevationMode: "actualElevationMode", actualTextColor: "actualTextColor", actualHoverTextColor: "actualHoverTextColor", actualFocusBackgroundColor: "actualFocusBackgroundColor", actualFocusTextColor: "actualFocusTextColor", actualHoverBackgroundColor: "actualHoverBackgroundColor", actualBorderWidth: "actualBorderWidth", raisedBackgroundColor: "raisedBackgroundColor", raisedDisabledBackgroundColor: "raisedDisabledBackgroundColor", raisedDisabledBorderColor: "raisedDisabledBorderColor", raisedDisabledTextColor: "raisedDisabledTextColor", raisedDisabledElevation: "raisedDisabledElevation", raisedHoverBackgroundColor: "raisedHoverBackgroundColor", raisedBorderColor: "raisedBorderColor", raisedRestingElevation: "raisedRestingElevation", raisedHoverElevation: "raisedHoverElevation", raisedFocusElevation: "raisedFocusElevation", raisedBorderWidth: "raisedBorderWidth", raisedCornerRadiusBottomRight: "raisedCornerRadiusBottomRight", raisedCornerRadiusBottomLeft: "raisedCornerRadiusBottomLeft", raisedCornerRadiusTopLeft: "raisedCornerRadiusTopLeft", raisedCornerRadiusTopRight: "raisedCornerRadiusTopRight", raisedRippleColor: "raisedRippleColor", flatBackgroundColor: "flatBackgroundColor", flatDisabledBackgroundColor: "flatDisabledBackgroundColor", flatDisabledBorderColor: "flatDisabledBorderColor", flatDisabledTextColor: "flatDisabledTextColor", flatDisabledElevation: "flatDisabledElevation", flatHoverBackgroundColor: "flatHoverBackgroundColor", flatBorderColor: "flatBorderColor", flatRestingElevation: "flatRestingElevation", flatHoverElevation: "flatHoverElevation", flatFocusElevation: "flatFocusElevation", flatRippleColor: "flatRippleColor", flatTextColor: "flatTextColor", flatHoverTextColor: "flatHoverTextColor", flatFocusBackgroundColor: "flatFocusBackgroundColor", flatFocusTextColor: "flatFocusTextColor", flatBorderWidth: "flatBorderWidth", flatCornerRadiusBottomRight: "flatCornerRadiusBottomRight", flatCornerRadiusBottomLeft: "flatCornerRadiusBottomLeft", flatCornerRadiusTopLeft: "flatCornerRadiusTopLeft", flatCornerRadiusTopRight: "flatCornerRadiusTopRight", backgroundColor: "backgroundColor", disabledBackgroundColor: "disabledBackgroundColor", disabledBorderColor: "disabledBorderColor", disabledTextColor: "disabledTextColor", disabledElevation: "disabledElevation", elevationMode: "elevationMode", hoverBackgroundColor: "hoverBackgroundColor", borderColor: "borderColor", restingElevation: "restingElevation", hoverElevation: "hoverElevation", focusElevation: "focusElevation", textStyle: "textStyle", textColor: "textColor", hoverTextColor: "hoverTextColor", rippleColor: "rippleColor", raisedTextColor: "raisedTextColor", raisedHoverTextColor: "raisedHoverTextColor", raisedFocusBackgroundColor: "raisedFocusBackgroundColor", raisedFocusTextColor: "raisedFocusTextColor", focusBackgroundColor: "focusBackgroundColor", focusTextColor: "focusTextColor", borderWidth: "borderWidth", cornerRadiusBottomRight: "cornerRadiusBottomRight", cornerRadiusBottomLeft: "cornerRadiusBottomLeft", cornerRadiusTopLeft: "cornerRadiusTopLeft", cornerRadiusTopRight: "cornerRadiusTopRight", outlinedBackgroundColor: "outlinedBackgroundColor", outlinedDisabledBackgroundColor: "outlinedDisabledBackgroundColor", outlinedDisabledBorderColor: "outlinedDisabledBorderColor", outlinedDisabledTextColor: "outlinedDisabledTextColor", outlinedDisabledElevation: "outlinedDisabledElevation", outlinedHoverBackgroundColor: "outlinedHoverBackgroundColor", outlinedBorderColor: "outlinedBorderColor", outlinedRestingElevation: "outlinedRestingElevation", outlinedHoverElevation: "outlinedHoverElevation", outlinedFocusElevation: "outlinedFocusElevation", outlinedBorderWidth: "outlinedBorderWidth", outlinedCornerRadiusBottomRight: "outlinedCornerRadiusBottomRight", outlinedCornerRadiusBottomLeft: "outlinedCornerRadiusBottomLeft", outlinedCornerRadiusTopLeft: "outlinedCornerRadiusTopLeft", outlinedCornerRadiusTopRight: "outlinedCornerRadiusTopRight", outlinedRippleColor: "outlinedRippleColor", outlinedTextColor: "outlinedTextColor", outlinedHoverTextColor: "outlinedHoverTextColor", outlinedFocusBackgroundColor: "outlinedFocusBackgroundColor", outlinedFocusTextColor: "outlinedFocusTextColor", fabBackgroundColor: "fabBackgroundColor", fabDisabledBackgroundColor: "fabDisabledBackgroundColor", fabDisabledBorderColor: "fabDisabledBorderColor", fabDisabledTextColor: "fabDisabledTextColor", fabDisabledElevation: "fabDisabledElevation", fabHoverBackgroundColor: "fabHoverBackgroundColor", fabBorderColor: "fabBorderColor", fabRestingElevation: "fabRestingElevation", fabHoverElevation: "fabHoverElevation", fabFocusElevation: "fabFocusElevation", fabBorderWidth: "fabBorderWidth", fabCornerRadiusBottomRight: "fabCornerRadiusBottomRight", fabCornerRadiusBottomLeft: "fabCornerRadiusBottomLeft", fabCornerRadiusTopLeft: "fabCornerRadiusTopLeft", fabCornerRadiusTopRight: "fabCornerRadiusTopRight", fabRippleColor: "fabRippleColor", fabTextColor: "fabTextColor", fabHoverTextColor: "fabHoverTextColor", fabFocusBackgroundColor: "fabFocusBackgroundColor", fabFocusTextColor: "fabFocusTextColor", iconBackgroundColor: "iconBackgroundColor", iconDisabledBackgroundColor: "iconDisabledBackgroundColor", iconDisabledBorderColor: "iconDisabledBorderColor", iconDisabledTextColor: "iconDisabledTextColor", iconDisabledElevation: "iconDisabledElevation", iconHoverBackgroundColor: "iconHoverBackgroundColor", iconBorderColor: "iconBorderColor", iconRestingElevation: "iconRestingElevation", iconHoverElevation: "iconHoverElevation", iconFocusElevation: "iconFocusElevation", iconBorderWidth: "iconBorderWidth", iconCornerRadiusBottomRight: "iconCornerRadiusBottomRight", iconCornerRadiusBottomLeft: "iconCornerRadiusBottomLeft", iconCornerRadiusTopLeft: "iconCornerRadiusTopLeft", iconCornerRadiusTopRight: "iconCornerRadiusTopRight", iconRippleColor: "iconRippleColor", iconTextColor: "iconTextColor", iconHoverTextColor: "iconHoverTextColor", iconFocusBackgroundColor: "iconFocusBackgroundColor", iconFocusTextColor: "iconFocusTextColor", inputId: "inputId", id: "id", display: "display", flexDirection: "flexDirection", flexGrow: "flexGrow", alignItems: "alignItems", value: "value", name: "name", tabIndex: ["tabindex", "tabIndex"], ariaLabel: ["aria-label", "ariaLabel"], fillAvailableSpace: "fillAvailableSpace", focused: "focused", isFocusStyleEnabled: "isFocusStyleEnabled", disableRipple: "disableRipple", actualDisableRipple: "actualDisableRipple", disableHover: "disableHover", isHover: "isHover", disabled: "disabled", disableTransitions: "disableTransitions", disablePointer: "disablePointer", contentPaddingLeft: "contentPaddingLeft", contentPaddingTop: "contentPaddingTop", contentPaddingRight: "contentPaddingRight", contentPaddingBottom: "contentPaddingBottom", horizontalContentAlignment: "horizontalContentAlignment", verticalContentAlignment: "verticalContentAlignment", clickTunneling: "clickTunneling", stopPropagation: "stopPropagation" }, outputs: { clicked: "clicked", gotFocus: "gotFocus", lostFocus: "lostFocus" }, host: { properties: { "attr.id": "this.id", "style.display": "this.display", "style.flexDirection": "this.flexDirection", "style.flexGrow": "this.flexGrow", "style.alignItems": "this.alignItems" }, classAttribute: "ig-x-button igx-x-button" }, providers: [], viewQueries: [{ propertyName: "_dynamicContent", first: true, predicate: ["dynamicContent"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "_childTemplateRef", first: true, predicate: ["childContent"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<ng-template #childContent><ng-content></ng-content></ng-template>\n<ng-container #dynamicContent></ng-container>", isInline: true, styles: ["\n\t\t:host {\n\t\t\tdisplay: inline-block;           \n\t\t}\n\t"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
     return IgxXButtonComponent;
 }());
 export { IgxXButtonComponent };
@@ -3009,6 +3022,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }], clickTunneling: [{
                 type: Input
+            }], stopPropagation: [{
+                type: Input
             }], clicked: [{
                 type: Output
             }], gotFocus: [{