igniteui-angular-inputs 18.2.0 → 19.0.1

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

@@ -106,19 +106,19 @@ export let IgxXButtonComponent = /*@__PURE__*/ (() => {
      * Gets or sets the min width to use for the button.
     */
         get minWidth() {
-            return this.i.bu;
+            return this.i.by;
         }
         set minWidth(v) {
-            this.i.bu = +v;
+            this.i.by = +v;
         }
         /**
          * Gets or sets the min height to use for the button.
         */
         get minHeight() {
-            return this.i.bt;
+            return this.i.bx;
         }
         set minHeight(v) {
-            this.i.bt = +v;
+            this.i.bx = +v;
         }
         /**
          * Gets or sets the display style to use for the button.
@@ -160,156 +160,156 @@ export let IgxXButtonComponent = /*@__PURE__*/ (() => {
          * Gets or sets the color to use for the check mark when the checkbox is checked.
         */
         get actualBorderColor() {
-            return brushToString(this.i.ni);
+            return brushToString(this.i.np);
         }
         set actualBorderColor(v) {
-            this.i.ni = stringToBrush(v);
+            this.i.np = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the check mark when the checkbox is checked.
         */
         get actualUmbraShadowColor() {
-            return brushToString(this.i.nt);
+            return brushToString(this.i.n0);
         }
         set actualUmbraShadowColor(v) {
-            this.i.nt = stringToBrush(v);
+            this.i.n0 = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the check mark when the checkbox is checked.
         */
         get actualPenumbraShadowColor() {
-            return brushToString(this.i.nq);
+            return brushToString(this.i.nx);
         }
         set actualPenumbraShadowColor(v) {
-            this.i.nq = stringToBrush(v);
+            this.i.nx = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the check mark when the checkbox is checked.
         */
         get actualAmbientShadowColor() {
-            return brushToString(this.i.ng);
+            return brushToString(this.i.nn);
         }
         set actualAmbientShadowColor(v) {
-            this.i.ng = stringToBrush(v);
+            this.i.nn = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the check mark when the checkbox is checked.
         */
         get actualRestingElevation() {
-            return this.i.ct;
+            return this.i.cx;
         }
         set actualRestingElevation(v) {
-            this.i.ct = +v;
+            this.i.cx = +v;
         }
         /**
          * Gets or sets the color to use for the check mark when the checkbox is checked.
         */
         get actualFocusElevation() {
-            return this.i.cr;
+            return this.i.cv;
         }
         set actualFocusElevation(v) {
-            this.i.cr = +v;
+            this.i.cv = +v;
         }
         /**
          * Gets or sets the color to use for the check mark when the checkbox is checked.
         */
         get actualHoverElevation() {
-            return this.i.cs;
+            return this.i.cw;
         }
         set actualHoverElevation(v) {
-            this.i.cs = +v;
+            this.i.cw = +v;
         }
         /**
          * Gets or sets the color to use for the ripple when the button is pressed.
         */
         get actualRippleColor() {
-            return brushToString(this.i.nr);
+            return brushToString(this.i.ny);
         }
         set actualRippleColor(v) {
-            this.i.nr = stringToBrush(v);
+            this.i.ny = stringToBrush(v);
         }
         get actualCornerRadiusBottomRight() {
-            return this.i.ks ? this.i.ks.c : NaN;
+            return this.i.kz ? this.i.kz.c : NaN;
         }
         set actualCornerRadiusBottomRight(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;
         }
         get actualCornerRadiusBottomLeft() {
-            return this.i.ks ? this.i.ks.b : NaN;
+            return this.i.kz ? this.i.kz.b : NaN;
         }
         set actualCornerRadiusBottomLeft(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;
         }
         get actualCornerRadiusTopLeft() {
-            return this.i.ks ? this.i.ks.d : NaN;
+            return this.i.kz ? this.i.kz.d : NaN;
         }
         set actualCornerRadiusTopLeft(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;
         }
         get actualCornerRadiusTopRight() {
-            return this.i.ks ? this.i.ks.e : NaN;
+            return this.i.kz ? this.i.kz.e : NaN;
         }
         set actualCornerRadiusTopRight(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;
         }
         ensureActualCornerRadius() {
-            if (this.i.ks) {
+            if (this.i.kz) {
                 return;
             }
-            this.i.ks = new CornerRadius(2);
+            this.i.kz = new CornerRadius(2);
         }
         /**
          * Gets the color to use for the actual background.
         */
         get actualBackgroundColor() {
-            return brushToString(this.i.nh);
+            return brushToString(this.i.no);
         }
         set actualBackgroundColor(v) {
-            this.i.nh = stringToBrush(v);
+            this.i.no = stringToBrush(v);
         }
         /**
          * Gets the actual color to use for the disabled background of the button.
         */
         get actualDisabledBackgroundColor() {
-            return brushToString(this.i.nj);
+            return brushToString(this.i.nq);
         }
         set actualDisabledBackgroundColor(v) {
-            this.i.nj = stringToBrush(v);
+            this.i.nq = stringToBrush(v);
         }
         /**
          * Gets the actual color to use for the disabled border of the button.
         */
         get actualDisabledBorderColor() {
-            return brushToString(this.i.nk);
+            return brushToString(this.i.nr);
         }
         set actualDisabledBorderColor(v) {
-            this.i.nk = stringToBrush(v);
+            this.i.nr = stringToBrush(v);
         }
         /**
          * Gets the actual color to use for the disabled text of the button.
         */
         get actualDisabledTextColor() {
-            return brushToString(this.i.nl);
+            return brushToString(this.i.ns);
         }
         set actualDisabledTextColor(v) {
-            this.i.nl = stringToBrush(v);
+            this.i.ns = stringToBrush(v);
         }
         /**
          * Gets the actual disabled elevation to use for the button.
         */
         get actualDisabledElevation() {
-            return this.i.cq;
+            return this.i.cu;
         }
         set actualDisabledElevation(v) {
-            this.i.cq = +v;
+            this.i.cu = +v;
         }
         /**
          * Gets the actual disabled elevation to use for the button.
@@ -324,428 +324,428 @@ export let IgxXButtonComponent = /*@__PURE__*/ (() => {
          * Gets the color to use for the actual background.
         */
         get actualTextColor() {
-            return brushToString(this.i.ns);
+            return brushToString(this.i.nz);
         }
         set actualTextColor(v) {
-            this.i.ns = stringToBrush(v);
+            this.i.nz = stringToBrush(v);
         }
         /**
          * Gets the color to use for the actual background.
         */
         get actualHoverTextColor() {
-            return brushToString(this.i.np);
+            return brushToString(this.i.nw);
         }
         set actualHoverTextColor(v) {
-            this.i.np = stringToBrush(v);
+            this.i.nw = stringToBrush(v);
         }
         /**
          * Gets the color to use for the actual background.
         */
         get actualFocusBackgroundColor() {
-            return brushToString(this.i.nm);
+            return brushToString(this.i.nt);
         }
         set actualFocusBackgroundColor(v) {
-            this.i.nm = stringToBrush(v);
+            this.i.nt = stringToBrush(v);
         }
         /**
          * Gets the actual color to use for the focused text.
         */
         get actualFocusTextColor() {
-            return brushToString(this.i.nn);
+            return brushToString(this.i.nu);
         }
         set actualFocusTextColor(v) {
-            this.i.nn = stringToBrush(v);
+            this.i.nu = stringToBrush(v);
         }
         /**
          * Gets the hover color to use for the actual background.
         */
         get actualHoverBackgroundColor() {
-            return brushToString(this.i.no);
+            return brushToString(this.i.nv);
         }
         set actualHoverBackgroundColor(v) {
-            this.i.no = stringToBrush(v);
+            this.i.nv = stringToBrush(v);
         }
         /**
          * Gets or sets the Width to use for the check mark when the checkbox is checked.
         */
         get actualBorderWidth() {
-            return this.i.bf;
+            return this.i.bj;
         }
         set actualBorderWidth(v) {
-            this.i.bf = +v;
+            this.i.bj = +v;
         }
         /**
          * Gets or sets the color to use for the background of the button when the  type is raised.
         */
         get raisedBackgroundColor() {
-            return brushToString(this.i.qx);
+            return brushToString(this.i.q4);
         }
         set raisedBackgroundColor(v) {
-            this.i.qx = stringToBrush(v);
+            this.i.q4 = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the disabled background of the button when the type is raised.
         */
         get raisedDisabledBackgroundColor() {
-            return brushToString(this.i.qz);
+            return brushToString(this.i.q6);
         }
         set raisedDisabledBackgroundColor(v) {
-            this.i.qz = stringToBrush(v);
+            this.i.q6 = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the disabled border of the button when the type is raised.
         */
         get raisedDisabledBorderColor() {
-            return brushToString(this.i.q0);
+            return brushToString(this.i.q7);
         }
         set raisedDisabledBorderColor(v) {
-            this.i.q0 = stringToBrush(v);
+            this.i.q7 = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the disabled text of the button when the type is raised.
         */
         get raisedDisabledTextColor() {
-            return brushToString(this.i.q1);
+            return brushToString(this.i.q8);
         }
         set raisedDisabledTextColor(v) {
-            this.i.q1 = stringToBrush(v);
+            this.i.q8 = stringToBrush(v);
         }
         /**
          * Gets or sets the disabled elevation to use for the button when the type is raised.
         */
         get raisedDisabledElevation() {
-            return this.i.dy;
+            return this.i.d2;
         }
         set raisedDisabledElevation(v) {
-            this.i.dy = +v;
+            this.i.d2 = +v;
         }
         /**
          * Gets or sets the hover color to use for the background of the button when the  type is raised.
         */
         get raisedHoverBackgroundColor() {
-            return brushToString(this.i.q4);
+            return brushToString(this.i.rb);
         }
         set raisedHoverBackgroundColor(v) {
-            this.i.q4 = stringToBrush(v);
+            this.i.rb = stringToBrush(v);
         }
         /**
          * Gets or sets the border color to use for the button when the type is raised.
         */
         get raisedBorderColor() {
-            return brushToString(this.i.qy);
+            return brushToString(this.i.q5);
         }
         set raisedBorderColor(v) {
-            this.i.qy = stringToBrush(v);
+            this.i.q5 = stringToBrush(v);
         }
         /**
          * Gets or sets the elevation to use for the button when the type is raised.
         */
         get raisedRestingElevation() {
-            return this.i.d1;
+            return this.i.d5;
         }
         set raisedRestingElevation(v) {
-            this.i.d1 = +v;
+            this.i.d5 = +v;
         }
         /**
          * Gets or sets the hover elevation to use for the button when the type is raised.
         */
         get raisedHoverElevation() {
-            return this.i.d0;
+            return this.i.d4;
         }
         set raisedHoverElevation(v) {
-            this.i.d0 = +v;
+            this.i.d4 = +v;
         }
         /**
          * Gets or sets the focus elevation to use for the button when the type is raised.
         */
         get raisedFocusElevation() {
-            return this.i.dz;
+            return this.i.d3;
         }
         set raisedFocusElevation(v) {
-            this.i.dz = +v;
+            this.i.d3 = +v;
         }
         /**
          * Gets or sets the width to use for the button border when the type is raised.
         */
         get raisedBorderWidth() {
-            return this.i.bw;
+            return this.i.b0;
         }
         set raisedBorderWidth(v) {
-            this.i.bw = +v;
+            this.i.b0 = +v;
         }
         get raisedCornerRadiusBottomRight() {
-            return this.i.k5 ? this.i.k5.c : NaN;
+            return this.i.lc ? this.i.lc.c : NaN;
         }
         set raisedCornerRadiusBottomRight(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;
         }
         get raisedCornerRadiusBottomLeft() {
-            return this.i.k5 ? this.i.k5.b : NaN;
+            return this.i.lc ? this.i.lc.b : NaN;
         }
         set raisedCornerRadiusBottomLeft(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;
         }
         get raisedCornerRadiusTopLeft() {
-            return this.i.k5 ? this.i.k5.d : NaN;
+            return this.i.lc ? this.i.lc.d : NaN;
         }
         set raisedCornerRadiusTopLeft(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;
         }
         get raisedCornerRadiusTopRight() {
-            return this.i.k5 ? this.i.k5.e : NaN;
+            return this.i.lc ? this.i.lc.e : NaN;
         }
         set raisedCornerRadiusTopRight(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;
         }
         ensureRaisedCornerRadius() {
-            if (this.i.k5) {
+            if (this.i.lc) {
                 return;
             }
-            this.i.k5 = new CornerRadius(2);
+            this.i.lc = new CornerRadius(2);
         }
         /**
          * Gets or sets the color to use for the background when the button is pressed and the type is floating action button.
         */
         get raisedRippleColor() {
-            return brushToString(this.i.q6);
+            return brushToString(this.i.rd);
         }
         set raisedRippleColor(v) {
-            this.i.q6 = stringToBrush(v);
+            this.i.rd = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the background of the button when the type is flat.
         */
         get flatBackgroundColor() {
-            return brushToString(this.i.pw);
+            return brushToString(this.i.p3);
         }
         set flatBackgroundColor(v) {
-            this.i.pw = stringToBrush(v);
+            this.i.p3 = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the disabled background of the button when the type is flat.
         */
         get flatDisabledBackgroundColor() {
-            return brushToString(this.i.py);
+            return brushToString(this.i.p5);
         }
         set flatDisabledBackgroundColor(v) {
-            this.i.py = stringToBrush(v);
+            this.i.p5 = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the disabled border of the button when the type is flat.
         */
         get flatDisabledBorderColor() {
-            return brushToString(this.i.pz);
+            return brushToString(this.i.p6);
         }
         set flatDisabledBorderColor(v) {
-            this.i.pz = stringToBrush(v);
+            this.i.p6 = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the disabled text of the button when the type is flat.
         */
         get flatDisabledTextColor() {
-            return brushToString(this.i.p0);
+            return brushToString(this.i.p7);
         }
         set flatDisabledTextColor(v) {
-            this.i.p0 = stringToBrush(v);
+            this.i.p7 = stringToBrush(v);
         }
         /**
          * Gets or sets the disabled elevation to use for the button when the type is flat.
         */
         get flatDisabledElevation() {
-            return this.i.dj;
+            return this.i.dn;
         }
         set flatDisabledElevation(v) {
-            this.i.dj = +v;
+            this.i.dn = +v;
         }
         /**
          * Gets or sets the hover color to use for the background of the button when the type is flat.
         */
         get flatHoverBackgroundColor() {
-            return brushToString(this.i.p3);
+            return brushToString(this.i.qa);
         }
         set flatHoverBackgroundColor(v) {
-            this.i.p3 = stringToBrush(v);
+            this.i.qa = stringToBrush(v);
         }
         /**
          * Gets or sets the border color to use for the button when the type is flat.
         */
         get flatBorderColor() {
-            return brushToString(this.i.px);
+            return brushToString(this.i.p4);
         }
         set flatBorderColor(v) {
-            this.i.px = stringToBrush(v);
+            this.i.p4 = stringToBrush(v);
         }
         /**
          * Gets or sets the elevation to use for the button when the type is flat.
         */
         get flatRestingElevation() {
-            return this.i.dm;
+            return this.i.dr;
         }
         set flatRestingElevation(v) {
-            this.i.dm = +v;
+            this.i.dr = +v;
         }
         /**
          * Gets or sets the hover elevation to use for the button when the type is flat.
         */
         get flatHoverElevation() {
-            return this.i.dl;
+            return this.i.dq;
         }
         set flatHoverElevation(v) {
-            this.i.dl = +v;
+            this.i.dq = +v;
         }
         /**
          * Gets or sets the focus elevation to use for the button when the type is flat.
         */
         get flatFocusElevation() {
-            return this.i.dk;
+            return this.i.dp;
         }
         set flatFocusElevation(v) {
-            this.i.dk = +v;
+            this.i.dp = +v;
         }
         /**
          * Gets or sets the color to use for the background when the button is pressed and the type is floating action button.
         */
         get flatRippleColor() {
-            return brushToString(this.i.p5);
+            return brushToString(this.i.qc);
         }
         set flatRippleColor(v) {
-            this.i.p5 = stringToBrush(v);
+            this.i.qc = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the text of the button when type is flat.
         */
         get flatTextColor() {
-            return brushToString(this.i.p6);
+            return brushToString(this.i.qd);
         }
         set flatTextColor(v) {
-            this.i.p6 = stringToBrush(v);
+            this.i.qd = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the hovered text of the button when type is flat.
         */
         get flatHoverTextColor() {
-            return brushToString(this.i.p4);
+            return brushToString(this.i.qb);
         }
         set flatHoverTextColor(v) {
-            this.i.p4 = stringToBrush(v);
+            this.i.qb = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the backround the button when it is focused and flat.
         */
         get flatFocusBackgroundColor() {
-            return brushToString(this.i.p1);
+            return brushToString(this.i.p8);
         }
         set flatFocusBackgroundColor(v) {
-            this.i.p1 = stringToBrush(v);
+            this.i.p8 = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the text the button when it is focused and flat.
         */
         get flatFocusTextColor() {
-            return brushToString(this.i.p2);
+            return brushToString(this.i.p9);
         }
         set flatFocusTextColor(v) {
-            this.i.p2 = stringToBrush(v);
+            this.i.p9 = stringToBrush(v);
         }
         /**
          * Gets or sets the width to use for the button border when the type is flat.
         */
         get flatBorderWidth() {
-            return this.i.br;
+            return this.i.bv;
         }
         set flatBorderWidth(v) {
-            this.i.br = +v;
+            this.i.bv = +v;
         }
         get flatCornerRadiusBottomRight() {
-            return this.i.k1 ? this.i.k1.c : NaN;
+            return this.i.k8 ? this.i.k8.c : NaN;
         }
         set flatCornerRadiusBottomRight(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;
         }
         get flatCornerRadiusBottomLeft() {
-            return this.i.k1 ? this.i.k1.b : NaN;
+            return this.i.k8 ? this.i.k8.b : NaN;
         }
         set flatCornerRadiusBottomLeft(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;
         }
         get flatCornerRadiusTopLeft() {
-            return this.i.k1 ? this.i.k1.d : NaN;
+            return this.i.k8 ? this.i.k8.d : NaN;
         }
         set flatCornerRadiusTopLeft(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;
         }
         get flatCornerRadiusTopRight() {
-            return this.i.k1 ? this.i.k1.e : NaN;
+            return this.i.k8 ? this.i.k8.e : NaN;
         }
         set flatCornerRadiusTopRight(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;
         }
         ensureFlatCornerRadius() {
-            if (this.i.k1) {
+            if (this.i.k8) {
                 return;
             }
-            this.i.k1 = new CornerRadius(2);
+            this.i.k8 = new CornerRadius(2);
         }
         /**
          * Gets or sets the color to use for the background when the button regardless of type.
         */
         get backgroundColor() {
-            return brushToString(this.i.nu);
+            return brushToString(this.i.n1);
         }
         set backgroundColor(v) {
-            this.i.nu = stringToBrush(v);
+            this.i.n1 = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the disabled background of the button when the type is disabled.
         */
         get disabledBackgroundColor() {
-            return brushToString(this.i.pi);
+            return brushToString(this.i.pp);
         }
         set disabledBackgroundColor(v) {
-            this.i.pi = stringToBrush(v);
+            this.i.pp = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the disabled border of the button when the type is raised.
         */
         get disabledBorderColor() {
-            return brushToString(this.i.pj);
+            return brushToString(this.i.pq);
         }
         set disabledBorderColor(v) {
-            this.i.pj = stringToBrush(v);
+            this.i.pq = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the disabled text of the button when the type is raised.
         */
         get disabledTextColor() {
-            return brushToString(this.i.pk);
+            return brushToString(this.i.pr);
         }
         set disabledTextColor(v) {
-            this.i.pk = stringToBrush(v);
+            this.i.pr = stringToBrush(v);
         }
         /**
          * Gets or sets the disabled elevation to use for the button when the type is raised.
         */
         get disabledElevation() {
-            return this.i.de;
+            return this.i.di;
         }
         set disabledElevation(v) {
-            this.i.de = +v;
+            this.i.di = +v;
         }
         /**
          * Gets or sets the disabled elevation to use for the button when the type is raised.
@@ -760,46 +760,46 @@ export let IgxXButtonComponent = /*@__PURE__*/ (() => {
          * Gets or sets the hover color to use for the background of the button when the  type is hovered.
         */
         get hoverBackgroundColor() {
-            return brushToString(this.i.p9);
+            return brushToString(this.i.qg);
         }
         set hoverBackgroundColor(v) {
-            this.i.p9 = stringToBrush(v);
+            this.i.qg = stringToBrush(v);
         }
         /**
          * Gets or sets the border color to use for the button regardless of type.
         */
         get borderColor() {
-            return brushToString(this.i.nv);
+            return brushToString(this.i.n2);
         }
         set borderColor(v) {
-            this.i.nv = stringToBrush(v);
+            this.i.n2 = stringToBrush(v);
         }
         /**
          * Gets or sets the elevation to use for the button regardless of type.
         */
         get restingElevation() {
-            return this.i.d2;
+            return this.i.d6;
         }
         set restingElevation(v) {
-            this.i.d2 = +v;
+            this.i.d6 = +v;
         }
         /**
          * Gets or sets the hover elevation to use for the button regardless of type.
         */
         get hoverElevation() {
-            return this.i.dp;
+            return this.i.dt;
         }
         set hoverElevation(v) {
-            this.i.dp = +v;
+            this.i.dt = +v;
         }
         /**
          * Gets or sets the focus elevation to use for the button regardless of type.
         */
         get focusElevation() {
-            return this.i.dn;
+            return this.i.ds;
         }
         set focusElevation(v) {
-            this.i.dn = +v;
+            this.i.ds = +v;
         }
         /**
          * Gets or sets the use for the button.
@@ -819,775 +819,775 @@ export let IgxXButtonComponent = /*@__PURE__*/ (() => {
          * Gets or sets the color to use for the text of the button regardless of type.
         */
         get textColor() {
-            return brushToString(this.i.q9);
+            return brushToString(this.i.rg);
         }
         set textColor(v) {
-            this.i.q9 = stringToBrush(v);
+            this.i.rg = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the hovered text of the button regardless of type.
         */
         get hoverTextColor() {
-            return brushToString(this.i.qa);
+            return brushToString(this.i.qh);
         }
         set hoverTextColor(v) {
-            this.i.qa = stringToBrush(v);
+            this.i.qh = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the background of the button regardless of type.
         */
         get rippleColor() {
-            return brushToString(this.i.q8);
+            return brushToString(this.i.rf);
         }
         set rippleColor(v) {
-            this.i.q8 = stringToBrush(v);
+            this.i.rf = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the text of the button when type is raised.
         */
         get raisedTextColor() {
-            return brushToString(this.i.q7);
+            return brushToString(this.i.re);
         }
         set raisedTextColor(v) {
-            this.i.q7 = stringToBrush(v);
+            this.i.re = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the hovered text of the button when type is raised.
         */
         get raisedHoverTextColor() {
-            return brushToString(this.i.q5);
+            return brushToString(this.i.rc);
         }
         set raisedHoverTextColor(v) {
-            this.i.q5 = stringToBrush(v);
+            this.i.rc = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the backround the button when it is focused and raised.
         */
         get raisedFocusBackgroundColor() {
-            return brushToString(this.i.q2);
+            return brushToString(this.i.q9);
         }
         set raisedFocusBackgroundColor(v) {
-            this.i.q2 = stringToBrush(v);
+            this.i.q9 = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the text the button when it is focused and raised.
         */
         get raisedFocusTextColor() {
-            return brushToString(this.i.q3);
+            return brushToString(this.i.ra);
         }
         set raisedFocusTextColor(v) {
-            this.i.q3 = stringToBrush(v);
+            this.i.ra = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the backround the button when it is focused.
         */
         get focusBackgroundColor() {
-            return brushToString(this.i.p7);
+            return brushToString(this.i.qe);
         }
         set focusBackgroundColor(v) {
-            this.i.p7 = stringToBrush(v);
+            this.i.qe = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the text of the button when it is focused.
         */
         get focusTextColor() {
-            return brushToString(this.i.p8);
+            return brushToString(this.i.qf);
         }
         set focusTextColor(v) {
-            this.i.p8 = stringToBrush(v);
+            this.i.qf = stringToBrush(v);
         }
         /**
          * Gets or sets the width to use for the button border regardless of type.
         */
         get borderWidth() {
-            return this.i.bg;
+            return this.i.bk;
         }
         set borderWidth(v) {
-            this.i.bg = +v;
+            this.i.bk = +v;
         }
         get cornerRadiusBottomRight() {
-            return this.i.ku ? this.i.ku.c : NaN;
+            return this.i.k1 ? this.i.k1.c : NaN;
         }
         set cornerRadiusBottomRight(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;
         }
         get cornerRadiusBottomLeft() {
-            return this.i.ku ? this.i.ku.b : NaN;
+            return this.i.k1 ? this.i.k1.b : NaN;
         }
         set cornerRadiusBottomLeft(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;
         }
         get cornerRadiusTopLeft() {
-            return this.i.ku ? this.i.ku.d : NaN;
+            return this.i.k1 ? this.i.k1.d : NaN;
         }
         set cornerRadiusTopLeft(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;
         }
         get cornerRadiusTopRight() {
-            return this.i.ku ? this.i.ku.e : NaN;
+            return this.i.k1 ? this.i.k1.e : NaN;
         }
         set cornerRadiusTopRight(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;
         }
         ensureCornerRadius() {
-            if (this.i.ku) {
+            if (this.i.k1) {
                 return;
             }
-            this.i.ku = new CornerRadius(2);
+            this.i.k1 = new CornerRadius(2);
         }
         /**
          * Gets or sets the color to use for the background of the button when the  type is outlined.
         */
         get outlinedBackgroundColor() {
-            return brushToString(this.i.qm);
+            return brushToString(this.i.qt);
         }
         set outlinedBackgroundColor(v) {
-            this.i.qm = stringToBrush(v);
+            this.i.qt = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the disabled background of the button when the type is outlined.
         */
         get outlinedDisabledBackgroundColor() {
-            return brushToString(this.i.qo);
+            return brushToString(this.i.qv);
         }
         set outlinedDisabledBackgroundColor(v) {
-            this.i.qo = stringToBrush(v);
+            this.i.qv = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the disabled border of the button when the type is outlined.
         */
         get outlinedDisabledBorderColor() {
-            return brushToString(this.i.qp);
+            return brushToString(this.i.qw);
         }
         set outlinedDisabledBorderColor(v) {
-            this.i.qp = stringToBrush(v);
+            this.i.qw = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the disabled text of the button when the type is outlined.
         */
         get outlinedDisabledTextColor() {
-            return brushToString(this.i.qq);
+            return brushToString(this.i.qx);
         }
         set outlinedDisabledTextColor(v) {
-            this.i.qq = stringToBrush(v);
+            this.i.qx = stringToBrush(v);
         }
         /**
          * Gets or sets the disabled elevation to use for the button when the type is outlined.
         */
         get outlinedDisabledElevation() {
-            return this.i.du;
+            return this.i.dy;
         }
         set outlinedDisabledElevation(v) {
-            this.i.du = +v;
+            this.i.dy = +v;
         }
         /**
          * Gets or sets the hover color to use for the background of the button when the  type is hoveredOutlined.
         */
         get outlinedHoverBackgroundColor() {
-            return brushToString(this.i.qt);
+            return brushToString(this.i.q0);
         }
         set outlinedHoverBackgroundColor(v) {
-            this.i.qt = stringToBrush(v);
+            this.i.q0 = stringToBrush(v);
         }
         /**
          * Gets or sets the border color to use for the button when the type is outlined.
         */
         get outlinedBorderColor() {
-            return brushToString(this.i.qn);
+            return brushToString(this.i.qu);
         }
         set outlinedBorderColor(v) {
-            this.i.qn = stringToBrush(v);
+            this.i.qu = stringToBrush(v);
         }
         /**
          * Gets or sets the elevation to use for the button when the type is outlined.
         */
         get outlinedRestingElevation() {
-            return this.i.dx;
+            return this.i.d1;
         }
         set outlinedRestingElevation(v) {
-            this.i.dx = +v;
+            this.i.d1 = +v;
         }
         /**
          * Gets or sets the hover elevation to use for the button when the type is outlined.
         */
         get outlinedHoverElevation() {
-            return this.i.dw;
+            return this.i.d0;
         }
         set outlinedHoverElevation(v) {
-            this.i.dw = +v;
+            this.i.d0 = +v;
         }
         /**
          * Gets or sets the focus elevation to use for the button when the type is outlined.
         */
         get outlinedFocusElevation() {
-            return this.i.dv;
+            return this.i.dz;
         }
         set outlinedFocusElevation(v) {
-            this.i.dv = +v;
+            this.i.dz = +v;
         }
         /**
          * Gets or sets the width to use for the button border when the type is outlined.
         */
         get outlinedBorderWidth() {
-            return this.i.bv;
+            return this.i.bz;
         }
         set outlinedBorderWidth(v) {
-            this.i.bv = +v;
+            this.i.bz = +v;
         }
         get outlinedCornerRadiusBottomRight() {
-            return this.i.k4 ? this.i.k4.c : NaN;
+            return this.i.lb ? this.i.lb.c : NaN;
         }
         set outlinedCornerRadiusBottomRight(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;
         }
         get outlinedCornerRadiusBottomLeft() {
-            return this.i.k4 ? this.i.k4.b : NaN;
+            return this.i.lb ? this.i.lb.b : NaN;
         }
         set outlinedCornerRadiusBottomLeft(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;
         }
         get outlinedCornerRadiusTopLeft() {
-            return this.i.k4 ? this.i.k4.d : NaN;
+            return this.i.lb ? this.i.lb.d : NaN;
         }
         set outlinedCornerRadiusTopLeft(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;
         }
         get outlinedCornerRadiusTopRight() {
-            return this.i.k4 ? this.i.k4.e : NaN;
+            return this.i.lb ? this.i.lb.e : NaN;
         }
         set outlinedCornerRadiusTopRight(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;
         }
         ensureOutlinedCornerRadius() {
-            if (this.i.k4) {
+            if (this.i.lb) {
                 return;
             }
-            this.i.k4 = new CornerRadius(2);
+            this.i.lb = new CornerRadius(2);
         }
         /**
          * Gets or sets the color to use for the background when the button is pressed and the type is floating action button.
         */
         get outlinedRippleColor() {
-            return brushToString(this.i.qv);
+            return brushToString(this.i.q2);
         }
         set outlinedRippleColor(v) {
-            this.i.qv = stringToBrush(v);
+            this.i.q2 = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the text of the button when type is outlined.
         */
         get outlinedTextColor() {
-            return brushToString(this.i.qw);
+            return brushToString(this.i.q3);
         }
         set outlinedTextColor(v) {
-            this.i.qw = stringToBrush(v);
+            this.i.q3 = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the hovered text of the button when type is outlined.
         */
         get outlinedHoverTextColor() {
-            return brushToString(this.i.qu);
+            return brushToString(this.i.q1);
         }
         set outlinedHoverTextColor(v) {
-            this.i.qu = stringToBrush(v);
+            this.i.q1 = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the backround the button when it is focused and outlined.
         */
         get outlinedFocusBackgroundColor() {
-            return brushToString(this.i.qr);
+            return brushToString(this.i.qy);
         }
         set outlinedFocusBackgroundColor(v) {
-            this.i.qr = stringToBrush(v);
+            this.i.qy = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the text the button when it is focused and outlined.
         */
         get outlinedFocusTextColor() {
-            return brushToString(this.i.qs);
+            return brushToString(this.i.qz);
         }
         set outlinedFocusTextColor(v) {
-            this.i.qs = stringToBrush(v);
+            this.i.qz = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the background of the button when the  type is floating action button.
         */
         get fabBackgroundColor() {
-            return brushToString(this.i.pl);
+            return brushToString(this.i.ps);
         }
         set fabBackgroundColor(v) {
-            this.i.pl = stringToBrush(v);
+            this.i.ps = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the disabled background of the button when the type is fab.
         */
         get fabDisabledBackgroundColor() {
-            return brushToString(this.i.pn);
+            return brushToString(this.i.pu);
         }
         set fabDisabledBackgroundColor(v) {
-            this.i.pn = stringToBrush(v);
+            this.i.pu = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the disabled border of the button when the type is fab.
         */
         get fabDisabledBorderColor() {
-            return brushToString(this.i.po);
+            return brushToString(this.i.pv);
         }
         set fabDisabledBorderColor(v) {
-            this.i.po = stringToBrush(v);
+            this.i.pv = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the disabled text of the button when the type is fab.
         */
         get fabDisabledTextColor() {
-            return brushToString(this.i.pp);
+            return brushToString(this.i.pw);
         }
         set fabDisabledTextColor(v) {
-            this.i.pp = stringToBrush(v);
+            this.i.pw = stringToBrush(v);
         }
         /**
          * Gets or sets the disabled elevation to use for the button when the type is fab.
         */
         get fabDisabledElevation() {
-            return this.i.df;
+            return this.i.dj;
         }
         set fabDisabledElevation(v) {
-            this.i.df = +v;
+            this.i.dj = +v;
         }
         /**
          * Gets or sets the hover color to use for the background of the button when the  type is hoveredFab.
         */
         get fabHoverBackgroundColor() {
-            return brushToString(this.i.ps);
+            return brushToString(this.i.pz);
         }
         set fabHoverBackgroundColor(v) {
-            this.i.ps = stringToBrush(v);
+            this.i.pz = stringToBrush(v);
         }
         /**
          * Gets or sets the border color to use for the button when the type is floating action button.
         */
         get fabBorderColor() {
-            return brushToString(this.i.pm);
+            return brushToString(this.i.pt);
         }
         set fabBorderColor(v) {
-            this.i.pm = stringToBrush(v);
+            this.i.pt = stringToBrush(v);
         }
         /**
          * Gets or sets the elevation to use for the button when the type is floating action button.
         */
         get fabRestingElevation() {
-            return this.i.di;
+            return this.i.dm;
         }
         set fabRestingElevation(v) {
-            this.i.di = +v;
+            this.i.dm = +v;
         }
         /**
          * Gets or sets the hover elevation to use for the button when the type is floating action button.
         */
         get fabHoverElevation() {
-            return this.i.dh;
+            return this.i.dl;
         }
         set fabHoverElevation(v) {
-            this.i.dh = +v;
+            this.i.dl = +v;
         }
         /**
          * Gets or sets the focus elevation to use for the button when the type is floating action button.
         */
         get fabFocusElevation() {
-            return this.i.dg;
+            return this.i.dk;
         }
         set fabFocusElevation(v) {
-            this.i.dg = +v;
+            this.i.dk = +v;
         }
         /**
          * Gets or sets the width to use for the button border when the type is floating action button.
         */
         get fabBorderWidth() {
-            return this.i.bq;
+            return this.i.bu;
         }
         set fabBorderWidth(v) {
-            this.i.bq = +v;
+            this.i.bu = +v;
         }
         get fabCornerRadiusBottomRight() {
-            return this.i.k0 ? this.i.k0.c : NaN;
+            return this.i.k7 ? this.i.k7.c : NaN;
         }
         set fabCornerRadiusBottomRight(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;
         }
         get fabCornerRadiusBottomLeft() {
-            return this.i.k0 ? this.i.k0.b : NaN;
+            return this.i.k7 ? this.i.k7.b : NaN;
         }
         set fabCornerRadiusBottomLeft(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;
         }
         get fabCornerRadiusTopLeft() {
-            return this.i.k0 ? this.i.k0.d : NaN;
+            return this.i.k7 ? this.i.k7.d : NaN;
         }
         set fabCornerRadiusTopLeft(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;
         }
         get fabCornerRadiusTopRight() {
-            return this.i.k0 ? this.i.k0.e : NaN;
+            return this.i.k7 ? this.i.k7.e : NaN;
         }
         set fabCornerRadiusTopRight(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;
         }
         ensureFabCornerRadius() {
-            if (this.i.k0) {
+            if (this.i.k7) {
                 return;
             }
-            this.i.k0 = new CornerRadius(2);
+            this.i.k7 = new CornerRadius(2);
         }
         /**
          * Gets or sets the color to use for the background when the button is pressed and the type is floating action button.
         */
         get fabRippleColor() {
-            return brushToString(this.i.pu);
+            return brushToString(this.i.p1);
         }
         set fabRippleColor(v) {
-            this.i.pu = stringToBrush(v);
+            this.i.p1 = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the text of the button when type is floating action button.
         */
         get fabTextColor() {
-            return brushToString(this.i.pv);
+            return brushToString(this.i.p2);
         }
         set fabTextColor(v) {
-            this.i.pv = stringToBrush(v);
+            this.i.p2 = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the hovered text of the button when type is floating action button.
         */
         get fabHoverTextColor() {
-            return brushToString(this.i.pt);
+            return brushToString(this.i.p0);
         }
         set fabHoverTextColor(v) {
-            this.i.pt = stringToBrush(v);
+            this.i.p0 = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the backround the button when it is focused and fab.
         */
         get fabFocusBackgroundColor() {
-            return brushToString(this.i.pq);
+            return brushToString(this.i.px);
         }
         set fabFocusBackgroundColor(v) {
-            this.i.pq = stringToBrush(v);
+            this.i.px = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the text the button when it is focused and fab.
         */
         get fabFocusTextColor() {
-            return brushToString(this.i.pr);
+            return brushToString(this.i.py);
         }
         set fabFocusTextColor(v) {
-            this.i.pr = stringToBrush(v);
+            this.i.py = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the background of the button when the  type is icon.
         */
         get iconBackgroundColor() {
-            return brushToString(this.i.qb);
+            return brushToString(this.i.qi);
         }
         set iconBackgroundColor(v) {
-            this.i.qb = stringToBrush(v);
+            this.i.qi = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the disabled background of the button when the type is icon.
         */
         get iconDisabledBackgroundColor() {
-            return brushToString(this.i.qd);
+            return brushToString(this.i.qk);
         }
         set iconDisabledBackgroundColor(v) {
-            this.i.qd = stringToBrush(v);
+            this.i.qk = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the disabled border of the button when the type is icon.
         */
         get iconDisabledBorderColor() {
-            return brushToString(this.i.qe);
+            return brushToString(this.i.ql);
         }
         set iconDisabledBorderColor(v) {
-            this.i.qe = stringToBrush(v);
+            this.i.ql = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the disabled text of the button when the type is icon.
         */
         get iconDisabledTextColor() {
-            return brushToString(this.i.qf);
+            return brushToString(this.i.qm);
         }
         set iconDisabledTextColor(v) {
-            this.i.qf = stringToBrush(v);
+            this.i.qm = stringToBrush(v);
         }
         /**
          * Gets or sets the disabled elevation to use for the button when the type is icon.
         */
         get iconDisabledElevation() {
-            return this.i.dq;
+            return this.i.du;
         }
         set iconDisabledElevation(v) {
-            this.i.dq = +v;
+            this.i.du = +v;
         }
         /**
          * Gets or sets the hover color to use for the background of the button when the  type is hoveredIcon.
         */
         get iconHoverBackgroundColor() {
-            return brushToString(this.i.qi);
+            return brushToString(this.i.qp);
         }
         set iconHoverBackgroundColor(v) {
-            this.i.qi = stringToBrush(v);
+            this.i.qp = stringToBrush(v);
         }
         /**
          * Gets or sets the border color to use for the button when the type is icon.
         */
         get iconBorderColor() {
-            return brushToString(this.i.qc);
+            return brushToString(this.i.qj);
         }
         set iconBorderColor(v) {
-            this.i.qc = stringToBrush(v);
+            this.i.qj = stringToBrush(v);
         }
         /**
          * Gets or sets the elevation to use for the button when the type is icon.
         */
         get iconRestingElevation() {
-            return this.i.dt;
+            return this.i.dx;
         }
         set iconRestingElevation(v) {
-            this.i.dt = +v;
+            this.i.dx = +v;
         }
         /**
          * Gets or sets the hover elevation to use for the button when the type is icon.
         */
         get iconHoverElevation() {
-            return this.i.ds;
+            return this.i.dw;
         }
         set iconHoverElevation(v) {
-            this.i.ds = +v;
+            this.i.dw = +v;
         }
         /**
          * Gets or sets the focus elevation to use for the button when the type is icon.
         */
         get iconFocusElevation() {
-            return this.i.dr;
+            return this.i.dv;
         }
         set iconFocusElevation(v) {
-            this.i.dr = +v;
+            this.i.dv = +v;
         }
         /**
          * Gets or sets the width to use for the button border when the type is icon.
         */
         get iconBorderWidth() {
-            return this.i.bs;
+            return this.i.bw;
         }
         set iconBorderWidth(v) {
-            this.i.bs = +v;
+            this.i.bw = +v;
         }
         get iconCornerRadiusBottomRight() {
-            return this.i.k3 ? this.i.k3.c : NaN;
+            return this.i.la ? this.i.la.c : NaN;
         }
         set iconCornerRadiusBottomRight(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;
         }
         get iconCornerRadiusBottomLeft() {
-            return this.i.k3 ? this.i.k3.b : NaN;
+            return this.i.la ? this.i.la.b : NaN;
         }
         set iconCornerRadiusBottomLeft(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;
         }
         get iconCornerRadiusTopLeft() {
-            return this.i.k3 ? this.i.k3.d : NaN;
+            return this.i.la ? this.i.la.d : NaN;
         }
         set iconCornerRadiusTopLeft(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;
         }
         get iconCornerRadiusTopRight() {
-            return this.i.k3 ? this.i.k3.e : NaN;
+            return this.i.la ? this.i.la.e : NaN;
         }
         set iconCornerRadiusTopRight(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;
         }
         ensureIconCornerRadius() {
-            if (this.i.k3) {
+            if (this.i.la) {
                 return;
             }
-            this.i.k3 = new CornerRadius(2);
+            this.i.la = new CornerRadius(2);
         }
         /**
          * Gets or sets the color to use for the background when the button is pressed and the type is floating action button.
         */
         get iconRippleColor() {
-            return brushToString(this.i.qk);
+            return brushToString(this.i.qr);
         }
         set iconRippleColor(v) {
-            this.i.qk = stringToBrush(v);
+            this.i.qr = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the text of the button when type is icon.
         */
         get iconTextColor() {
-            return brushToString(this.i.ql);
+            return brushToString(this.i.qs);
         }
         set iconTextColor(v) {
-            this.i.ql = stringToBrush(v);
+            this.i.qs = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the hovered text of the button when type is icon.
         */
         get iconHoverTextColor() {
-            return brushToString(this.i.qj);
+            return brushToString(this.i.qq);
         }
         set iconHoverTextColor(v) {
-            this.i.qj = stringToBrush(v);
+            this.i.qq = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the backround the button when it is focused and icon.
         */
         get iconFocusBackgroundColor() {
-            return brushToString(this.i.qg);
+            return brushToString(this.i.qn);
         }
         set iconFocusBackgroundColor(v) {
-            this.i.qg = stringToBrush(v);
+            this.i.qn = stringToBrush(v);
         }
         /**
          * Gets or sets the color to use for the text the button when it is focused and icon.
         */
         get iconFocusTextColor() {
-            return brushToString(this.i.qh);
+            return brushToString(this.i.qo);
         }
         set iconFocusTextColor(v) {
-            this.i.qh = stringToBrush(v);
+            this.i.qo = stringToBrush(v);
         }
         /**
          * Gets or sets the id to use for the internal native checkbox.
         */
         get inputId() {
-            return this.i.hu;
+            return this.i.hy;
         }
         set inputId(v) {
-            this.i.hu = v;
+            this.i.hy = v;
         }
         /**
          * Gets or sets the id to use for the checkbox.
         */
         get id() {
-            return this.i.hs;
+            return this.i.hw;
         }
         set id(v) {
-            this.i.hs = v;
+            this.i.hw = v;
         }
         /**
          * Gets or sets the id to use for the checkbox.
         */
         get display() {
-            return this.i.fw;
+            return this.i.f0;
         }
         set display(v) {
-            this.i.fw = v;
+            this.i.f0 = v;
         }
         /**
          * Gets or sets the id to use for the checkbox.
         */
         get flexDirection() {
-            return this.i.g0;
+            return this.i.g4;
         }
         set flexDirection(v) {
-            this.i.g0 = v;
+            this.i.g4 = v;
         }
         /**
          * Gets or sets the flex-grow setting for the button.
         */
         get flexGrow() {
-            return this.i.g2;
+            return this.i.g6;
         }
         set flexGrow(v) {
-            this.i.g2 = v;
+            this.i.g6 = v;
         }
         /**
          * Gets or sets the id to use for the checkbox.
         */
         get alignItems() {
-            return this.i.e7;
+            return this.i.fb;
         }
         set alignItems(v) {
-            this.i.e7 = v;
+            this.i.fb = v;
         }
         /**
          * Gets or sets value to use for the checkbox.
         */
         get value() {
-            return this.i.ea;
+            return this.i.ee;
         }
         set value(v) {
-            this.i.ea = v;
+            this.i.ee = v;
         }
         /**
          * Gets or sets name to use for the button.
         */
         get name() {
-            return this.i.h2;
+            return this.i.h6;
         }
         set name(v) {
-            this.i.h2 = v;
+            this.i.h6 = v;
         }
         /**
          * Gets or sets TabIndex to use for the checkbox.
         */
         get tabIndex() {
-            return this.i.d3;
+            return this.i.d7;
         }
         set tabIndex(v) {
-            this.i.d3 = +v;
+            this.i.d7 = +v;
         }
         /**
          * Gets or sets the value of the aria-label attribute.
         */
         get ariaLabel() {
-            return this.i.e9;
+            return this.i.fd;
         }
         set ariaLabel(v) {
-            this.i.e9 = v;
+            this.i.fd = v;
         }
         /**
          * Gets or sets whether the button should fill the available space. If false, the button
          * will use an intrinsic size.
         */
         get fillAvailableSpace() {
-            return this.i.av;
+            return this.i.ay;
         }
         set fillAvailableSpace(v) {
-            this.i.av = ensureBool(v);
+            this.i.ay = ensureBool(v);
         }
         /**
          * Gets or sets if the checkbox is Focused.
@@ -1602,46 +1602,46 @@ export let IgxXButtonComponent = /*@__PURE__*/ (() => {
          * Gets or sets if the button show use styling to show focus.
         */
         get isFocusStyleEnabled() {
-            return this.i.az;
+            return this.i.a2;
         }
         set isFocusStyleEnabled(v) {
-            this.i.az = ensureBool(v);
+            this.i.a2 = ensureBool(v);
         }
         /**
          * Gets or sets whether to disable the ripple effect for the button.
         */
         get disableRipple() {
-            return this.i.at;
+            return this.i.aw;
         }
         set disableRipple(v) {
-            this.i.at = ensureBool(v);
+            this.i.aw = ensureBool(v);
         }
         /**
          * Gets whether to actually disable the ripple effect for the button.
         */
         get actualDisableRipple() {
-            return this.i.ap;
+            return this.i.as;
         }
         set actualDisableRipple(v) {
-            this.i.ap = ensureBool(v);
+            this.i.as = ensureBool(v);
         }
         /**
          * Gets or sets whether the hover effect is disabled.
         */
         get disableHover() {
-            return this.i.ar;
+            return this.i.au;
         }
         set disableHover(v) {
-            this.i.ar = ensureBool(v);
+            this.i.au = ensureBool(v);
         }
         /**
          * Gets or sets whether the checkbox is checked.
         */
         get isHover() {
-            return this.i.a0;
+            return this.i.a3;
         }
         set isHover(v) {
-            this.i.a0 = ensureBool(v);
+            this.i.a3 = ensureBool(v);
         }
         /**
          * Gets or sets whether the checkbox is disabled.
@@ -1656,76 +1656,85 @@ export let IgxXButtonComponent = /*@__PURE__*/ (() => {
          * Gets or sets whether the checkbox transitions are disabled.
         */
         get disableTransitions() {
-            return this.i.au;
+            return this.i.ax;
         }
         set disableTransitions(v) {
-            this.i.au = ensureBool(v);
+            this.i.ax = ensureBool(v);
         }
         /**
          * Gets or sets whether the cursor will change into a pointer when the button is hovered.
         */
         get disablePointer() {
-            return this.i.as;
+            return this.i.av;
         }
         set disablePointer(v) {
-            this.i.as = ensureBool(v);
+            this.i.av = ensureBool(v);
         }
         /**
          * Gets or sets the left padding for the button content.
         */
         get contentPaddingLeft() {
-            return this.i.bi;
+            return this.i.bm;
         }
         set contentPaddingLeft(v) {
-            this.i.bi = +v;
+            this.i.bm = +v;
         }
         /**
          * Gets or sets the top padding for the button content.
         */
         get contentPaddingTop() {
-            return this.i.bk;
+            return this.i.bo;
         }
         set contentPaddingTop(v) {
-            this.i.bk = +v;
+            this.i.bo = +v;
         }
         /**
          * Gets or sets the right padding for the button content.
         */
         get contentPaddingRight() {
-            return this.i.bj;
+            return this.i.bn;
         }
         set contentPaddingRight(v) {
-            this.i.bj = +v;
+            this.i.bn = +v;
         }
         /**
          * Gets or sets the bottom padding for the button content.
         */
         get contentPaddingBottom() {
-            return this.i.bh;
+            return this.i.bl;
         }
         set contentPaddingBottom(v) {
-            this.i.bh = +v;
+            this.i.bl = +v;
         }
         get horizontalContentAlignment() {
-            return this.i.k7;
+            return this.i.le;
         }
         set horizontalContentAlignment(v) {
-            this.i.k7 = ensureEnum(HorizontalAlignment_$type, v);
+            this.i.le = ensureEnum(HorizontalAlignment_$type, v);
         }
         get verticalContentAlignment() {
-            return this.i.rb;
+            return this.i.ri;
         }
         set verticalContentAlignment(v) {
-            this.i.rb = ensureEnum(VerticalAlignment_$type, v);
+            this.i.ri = ensureEnum(VerticalAlignment_$type, v);
         }
         /**
          * Gets or sets if clicking on the button is allowed to tunnel down to button content.
         */
         get clickTunneling() {
-            return this.i.aq;
+            return this.i.at;
         }
         set clickTunneling(v) {
-            this.i.aq = ensureBool(v);
+            this.i.at = ensureBool(v);
+        }
+        /**
+         * Gets or sets whether mouse events on the button will bubble up to parent elements.
+        */
+        get stopPropagation() {
+            return this.i.a5;
+        }
+        set stopPropagation(v) {
+            this.i.a5 = ensureBool(v);
         }
         findByName(name) {
             if (this.findEphemera) {
@@ -1799,7 +1808,7 @@ export let IgxXButtonComponent = /*@__PURE__*/ (() => {
         
         */
         exportVisualModel() {
-            let iv = this.i.d7();
+            let iv = this.i.eb();
             return (iv);
         }
         /**
@@ -1807,7 +1816,7 @@ export let IgxXButtonComponent = /*@__PURE__*/ (() => {
         
         */
         exportSerializedVisualModel() {
-            let iv = this.i.f0();
+            let iv = this.i.f4();
             return (iv);
         }
         get clicked() {
@@ -1877,7 +1886,7 @@ export let IgxXButtonComponent = /*@__PURE__*/ (() => {
         }
     }
     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>
+    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>
 <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;
 })();
@@ -2277,6 +2286,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }], clickTunneling: [{
                 type: Input
+            }], stopPropagation: [{
+                type: Input
             }], clicked: [{
                 type: Output
             }], gotFocus: [{