igniteui-webcomponents-inputs 1.3.3 → 1.4.0

package/esm5/lib/{igc-button-component.js → igc-x-button-component.js}

@@ -1,5 +1,5 @@
 import * as tslib_1 from "tslib";
-import { Button } from "./Button";
+import { XButton } from "./XButton";
 import { ensureEnum, brushToString, stringToBrush, ensureBool, initializePropertiesFromCss, NamePatcher, toSpinal, enumToString, getAllPropertyNames, fromSpinal } from "igniteui-webcomponents-core";
 import { FontInfo } from "igniteui-webcomponents-core";
 import { WebComponentRenderer, PortalManager } from "igniteui-webcomponents-core";
@@ -13,9 +13,9 @@ import { ControlDisplayDensity_$type } from "igniteui-webcomponents-core";
 import { BaseControlTheme_$type } from "igniteui-webcomponents-core";
 import { ElevationMode_$type } from "igniteui-webcomponents-core";
 import { IgcHTMLElement } from "igniteui-webcomponents-core";
-var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
-    tslib_1.__extends(IgcButtonComponent, _super);
-    function IgcButtonComponent() {
+var IgcXButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
+    tslib_1.__extends(IgcXButtonComponent, _super);
+    function IgcXButtonComponent() {
         var _this = _super.call(this) || this;
         _this._disconnected = false;
         _this._settingAttributes = false;
@@ -83,19 +83,19 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         //    this._checkbox.notifySizeChanged();
         //});
     }
-    IgcButtonComponent.prototype._onDisplayChanged = function () {
+    IgcXButtonComponent.prototype._onDisplayChanged = function () {
         this.style.display = this.display;
     };
-    IgcButtonComponent.prototype._onFlexDirectionChanged = function () {
+    IgcXButtonComponent.prototype._onFlexDirectionChanged = function () {
         this.style.flexDirection = this.flexDirection;
     };
-    IgcButtonComponent.prototype._onFlexGrowChanged = function () {
+    IgcXButtonComponent.prototype._onFlexGrowChanged = function () {
         this.style.flexGrow = this.flexGrow;
     };
-    IgcButtonComponent.prototype._onAlignItemsChanged = function () {
+    IgcXButtonComponent.prototype._onAlignItemsChanged = function () {
         this.style.alignItems = this.alignItems;
     };
-    IgcButtonComponent.prototype._onChildrenChanged = function () {
+    IgcXButtonComponent.prototype._onChildrenChanged = function () {
         var children = [];
         for (var i = 0; i < this.childNodes.length; i++) {
             var child = this.childNodes[i];
@@ -106,23 +106,23 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         this._portalManager.onChildrenChanged(children);
     };
     // supports angular themes or custom properties set in CSS
-    IgcButtonComponent.prototype.updateStyle = function () {
+    IgcXButtonComponent.prototype.updateStyle = function () {
         this._styling(this, this);
     };
-    IgcButtonComponent.prototype.destroy = function () {
+    IgcXButtonComponent.prototype.destroy = function () {
         this._button.destroy();
         this._wrapper.destroy();
     };
-    IgcButtonComponent.prototype.createImplementation = function () {
-        return new Button();
+    IgcXButtonComponent.prototype.createImplementation = function () {
+        return new XButton();
     };
-    IgcButtonComponent.prototype.disconnectedCallback = function () {
+    IgcXButtonComponent.prototype.disconnectedCallback = function () {
         this._disconnected = true;
         if (this.i) {
             this.i.onDetachedFromUI();
         }
     };
-    IgcButtonComponent.prototype.connectedCallback = function () {
+    IgcXButtonComponent.prototype.connectedCallback = function () {
         if (this._disconnected) {
             this._disconnected = false;
             if (this.i) {
@@ -130,8 +130,8 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
             }
             return;
         }
-        this.classList.add("ig-button");
-        this.classList.add("igc-button");
+        this.classList.add("ig-x-button");
+        this.classList.add("igc-x-button");
         this.appendChild(this._container.getNativeElement());
         this._attached = true;
         this.style.display = this.display;
@@ -142,10 +142,10 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         this._styling(this, this);
         this.afterContentInit();
     };
-    IgcButtonComponent.prototype.afterContentInit = function () {
+    IgcXButtonComponent.prototype.afterContentInit = function () {
         //this.i.notifySizeChanged();
     };
-    Object.defineProperty(IgcButtonComponent.prototype, "i", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "i", {
         /**
          * @hidden
          */
@@ -157,7 +157,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    IgcButtonComponent._createFromInternal = function (internal) {
+    IgcXButtonComponent._createFromInternal = function (internal) {
         if (!internal) {
             return null;
         }
@@ -171,10 +171,10 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         }
         return TypeRegistrar.create(externalName);
     };
-    IgcButtonComponent.prototype._enqueueSetAttribute = function (attrName, attrValue) {
+    IgcXButtonComponent.prototype._enqueueSetAttribute = function (attrName, attrValue) {
         this._queuedSetAttributes.push({ attrName: attrName, attrValue: attrValue });
     };
-    IgcButtonComponent.prototype._flushQueuedAttributes = function () {
+    IgcXButtonComponent.prototype._flushQueuedAttributes = function () {
         this._settingAttributes = true;
         for (var i = 0; i < this._queuedSetAttributes.length; i++) {
             this.setAttribute(this._queuedSetAttributes[i].attrName, this._queuedSetAttributes[i].attrValue);
@@ -182,7 +182,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         this._settingAttributes = false;
         this._queuedSetAttributes.length = 0;
     };
-    IgcButtonComponent.prototype._a = function (attrName, attrValue) {
+    IgcXButtonComponent.prototype._a = function (attrName, attrValue) {
         if (this._updatingFromAttribute) {
             return;
         }
@@ -199,21 +199,21 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         }
         this._settingAttributes = false;
     };
-    Object.defineProperty(IgcButtonComponent, "observedAttributes", {
+    Object.defineProperty(IgcXButtonComponent, "observedAttributes", {
         get: function () {
-            if (IgcButtonComponent._observedAttributesIgcButtonComponent == null) {
-                var names = getAllPropertyNames(IgcButtonComponent);
+            if (IgcXButtonComponent._observedAttributesIgcXButtonComponent == null) {
+                var names = getAllPropertyNames(IgcXButtonComponent);
                 for (var i = 0; i < names.length; i++) {
                     names[i] = toSpinal(names[i]);
                 }
-                IgcButtonComponent._observedAttributesIgcButtonComponent = names;
+                IgcXButtonComponent._observedAttributesIgcXButtonComponent = names;
             }
-            return IgcButtonComponent._observedAttributesIgcButtonComponent;
+            return IgcXButtonComponent._observedAttributesIgcXButtonComponent;
         },
         enumerable: true,
         configurable: true
     });
-    IgcButtonComponent.prototype.attributeChangedCallback = function (name, oldValue, newValue) {
+    IgcXButtonComponent.prototype.attributeChangedCallback = function (name, oldValue, newValue) {
         if (this._settingAttributes) {
             return;
         }
@@ -222,13 +222,13 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         this[setName] = newValue;
         this._updatingFromAttribute = false;
     };
-    IgcButtonComponent.register = function () {
-        if (!IgcButtonComponent._isElementRegistered) {
-            IgcButtonComponent._isElementRegistered = true;
-            RegisterElementHelper.registerElement(IgcButtonComponent.htmlTagName, IgcButtonComponent);
+    IgcXButtonComponent.register = function () {
+        if (!IgcXButtonComponent._isElementRegistered) {
+            IgcXButtonComponent._isElementRegistered = true;
+            RegisterElementHelper.registerElement(IgcXButtonComponent.htmlTagName, IgcXButtonComponent);
         }
     };
-    Object.defineProperty(IgcButtonComponent.prototype, "minWidth", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "minWidth", {
         /**
      * Gets or sets the min width to use for the button.
     */
@@ -242,7 +242,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "minHeight", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "minHeight", {
         /**
          * Gets or sets the min height to use for the button.
         */
@@ -256,7 +256,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "displayType", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "displayType", {
         /**
          * Gets or sets the display style to use for the button.
         */
@@ -270,7 +270,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "density", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "density", {
         /**
          * Gets or sets the display density to use for the button.
         */
@@ -284,7 +284,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "baseTheme", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "baseTheme", {
         /**
          * Gets or sets the base built in theme to use for the button.
         */
@@ -298,7 +298,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "actualDensity", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "actualDensity", {
         /**
          * Gets the actual display density to use for the label.
         */
@@ -312,7 +312,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "actualBorderColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "actualBorderColor", {
         /**
          * Gets or sets the color to use for the check mark when the checkbox is checked.
         */
@@ -326,7 +326,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "actualUmbraShadowColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "actualUmbraShadowColor", {
         /**
          * Gets or sets the color to use for the check mark when the checkbox is checked.
         */
@@ -340,7 +340,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "actualPenumbraShadowColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "actualPenumbraShadowColor", {
         /**
          * Gets or sets the color to use for the check mark when the checkbox is checked.
         */
@@ -354,7 +354,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "actualAmbientShadowColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "actualAmbientShadowColor", {
         /**
          * Gets or sets the color to use for the check mark when the checkbox is checked.
         */
@@ -368,7 +368,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "actualRestingElevation", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "actualRestingElevation", {
         /**
          * Gets or sets the color to use for the check mark when the checkbox is checked.
         */
@@ -382,7 +382,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "actualFocusElevation", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "actualFocusElevation", {
         /**
          * Gets or sets the color to use for the check mark when the checkbox is checked.
         */
@@ -396,7 +396,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "actualHoverElevation", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "actualHoverElevation", {
         /**
          * Gets or sets the color to use for the check mark when the checkbox is checked.
         */
@@ -410,7 +410,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "actualRippleColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "actualRippleColor", {
         /**
          * Gets or sets the color to use for the ripple when the button is pressed.
         */
@@ -424,7 +424,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "actualCornerRadiusBottomRight", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "actualCornerRadiusBottomRight", {
         get: function () {
             return this.i.kc ? this.i.kc.b : NaN;
         },
@@ -437,7 +437,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "actualCornerRadiusBottomLeft", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "actualCornerRadiusBottomLeft", {
         get: function () {
             return this.i.kc ? this.i.kc.a : NaN;
         },
@@ -450,7 +450,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "actualCornerRadiusTopLeft", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "actualCornerRadiusTopLeft", {
         get: function () {
             return this.i.kc ? this.i.kc.c : NaN;
         },
@@ -463,7 +463,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "actualCornerRadiusTopRight", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "actualCornerRadiusTopRight", {
         get: function () {
             return this.i.kc ? this.i.kc.d : NaN;
         },
@@ -476,13 +476,13 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    IgcButtonComponent.prototype.ensureActualCornerRadius = function () {
+    IgcXButtonComponent.prototype.ensureActualCornerRadius = function () {
         if (this.i.kc) {
             return;
         }
         this.i.kc = new CornerRadius(2);
     };
-    Object.defineProperty(IgcButtonComponent.prototype, "actualBackgroundColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "actualBackgroundColor", {
         /**
          * Gets the color to use for the actual background.
         */
@@ -496,7 +496,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "actualDisabledBackgroundColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "actualDisabledBackgroundColor", {
         /**
          * Gets the actual color to use for the disabled background of the button.
         */
@@ -510,7 +510,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "actualDisabledBorderColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "actualDisabledBorderColor", {
         /**
          * Gets the actual color to use for the disabled border of the button.
         */
@@ -524,7 +524,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "actualDisabledTextColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "actualDisabledTextColor", {
         /**
          * Gets the actual color to use for the disabled text of the button.
         */
@@ -538,7 +538,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "actualDisabledElevation", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "actualDisabledElevation", {
         /**
          * Gets the actual disabled elevation to use for the button.
         */
@@ -552,7 +552,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "actualElevationMode", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "actualElevationMode", {
         /**
          * Gets the actual disabled elevation to use for the button.
         */
@@ -566,7 +566,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "actualTextColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "actualTextColor", {
         /**
          * Gets the color to use for the actual background.
         */
@@ -580,7 +580,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "actualHoverTextColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "actualHoverTextColor", {
         /**
          * Gets the color to use for the actual background.
         */
@@ -594,7 +594,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "actualFocusBackgroundColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "actualFocusBackgroundColor", {
         /**
          * Gets the color to use for the actual background.
         */
@@ -608,7 +608,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "actualFocusTextColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "actualFocusTextColor", {
         /**
          * Gets the actual color to use for the focused text.
         */
@@ -622,7 +622,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "actualHoverBackgroundColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "actualHoverBackgroundColor", {
         /**
          * Gets the hover color to use for the actual background.
         */
@@ -636,7 +636,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "actualBorderWidth", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "actualBorderWidth", {
         /**
          * Gets or sets the Width to use for the check mark when the checkbox is checked.
         */
@@ -650,7 +650,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "raisedBackgroundColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "raisedBackgroundColor", {
         /**
          * Gets or sets the color to use for the background of the button when the  type is raised.
         */
@@ -664,7 +664,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "raisedDisabledBackgroundColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "raisedDisabledBackgroundColor", {
         /**
          * Gets or sets the color to use for the disabled background of the button when the type is raised.
         */
@@ -678,7 +678,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "raisedDisabledBorderColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "raisedDisabledBorderColor", {
         /**
          * Gets or sets the color to use for the disabled border of the button when the type is raised.
         */
@@ -692,7 +692,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "raisedDisabledTextColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "raisedDisabledTextColor", {
         /**
          * Gets or sets the color to use for the disabled text of the button when the type is raised.
         */
@@ -706,7 +706,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "raisedDisabledElevation", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "raisedDisabledElevation", {
         /**
          * Gets or sets the disabled elevation to use for the button when the type is raised.
         */
@@ -720,7 +720,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "raisedHoverBackgroundColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "raisedHoverBackgroundColor", {
         /**
          * Gets or sets the hover color to use for the background of the button when the  type is raised.
         */
@@ -734,7 +734,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "raisedBorderColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "raisedBorderColor", {
         /**
          * Gets or sets the border color to use for the button when the type is raised.
         */
@@ -748,7 +748,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "raisedRestingElevation", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "raisedRestingElevation", {
         /**
          * Gets or sets the elevation to use for the button when the type is raised.
         */
@@ -762,7 +762,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "raisedHoverElevation", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "raisedHoverElevation", {
         /**
          * Gets or sets the hover elevation to use for the button when the type is raised.
         */
@@ -776,7 +776,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "raisedFocusElevation", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "raisedFocusElevation", {
         /**
          * Gets or sets the focus elevation to use for the button when the type is raised.
         */
@@ -790,7 +790,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "raisedBorderWidth", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "raisedBorderWidth", {
         /**
          * Gets or sets the width to use for the button border when the type is raised.
         */
@@ -804,7 +804,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "raisedCornerRadiusBottomRight", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "raisedCornerRadiusBottomRight", {
         get: function () {
             return this.i.ky ? this.i.ky.b : NaN;
         },
@@ -817,7 +817,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "raisedCornerRadiusBottomLeft", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "raisedCornerRadiusBottomLeft", {
         get: function () {
             return this.i.ky ? this.i.ky.a : NaN;
         },
@@ -830,7 +830,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "raisedCornerRadiusTopLeft", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "raisedCornerRadiusTopLeft", {
         get: function () {
             return this.i.ky ? this.i.ky.c : NaN;
         },
@@ -843,7 +843,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "raisedCornerRadiusTopRight", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "raisedCornerRadiusTopRight", {
         get: function () {
             return this.i.ky ? this.i.ky.d : NaN;
         },
@@ -856,13 +856,13 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    IgcButtonComponent.prototype.ensureRaisedCornerRadius = function () {
+    IgcXButtonComponent.prototype.ensureRaisedCornerRadius = function () {
         if (this.i.ky) {
             return;
         }
         this.i.ky = new CornerRadius(2);
     };
-    Object.defineProperty(IgcButtonComponent.prototype, "raisedRippleColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "raisedRippleColor", {
         /**
          * Gets or sets the color to use for the background when the button is pressed and the type is floating action button.
         */
@@ -876,7 +876,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "flatBackgroundColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "flatBackgroundColor", {
         /**
          * Gets or sets the color to use for the background of the button when the type is flat.
         */
@@ -890,7 +890,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "flatDisabledBackgroundColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "flatDisabledBackgroundColor", {
         /**
          * Gets or sets the color to use for the disabled background of the button when the type is flat.
         */
@@ -904,7 +904,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "flatDisabledBorderColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "flatDisabledBorderColor", {
         /**
          * Gets or sets the color to use for the disabled border of the button when the type is flat.
         */
@@ -918,7 +918,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "flatDisabledTextColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "flatDisabledTextColor", {
         /**
          * Gets or sets the color to use for the disabled text of the button when the type is flat.
         */
@@ -932,7 +932,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "flatDisabledElevation", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "flatDisabledElevation", {
         /**
          * Gets or sets the disabled elevation to use for the button when the type is flat.
         */
@@ -946,7 +946,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "flatHoverBackgroundColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "flatHoverBackgroundColor", {
         /**
          * Gets or sets the hover color to use for the background of the button when the type is flat.
         */
@@ -960,7 +960,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "flatBorderColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "flatBorderColor", {
         /**
          * Gets or sets the border color to use for the button when the type is flat.
         */
@@ -974,7 +974,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "flatRestingElevation", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "flatRestingElevation", {
         /**
          * Gets or sets the elevation to use for the button when the type is flat.
         */
@@ -988,7 +988,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "flatHoverElevation", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "flatHoverElevation", {
         /**
          * Gets or sets the hover elevation to use for the button when the type is flat.
         */
@@ -1002,7 +1002,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "flatFocusElevation", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "flatFocusElevation", {
         /**
          * Gets or sets the focus elevation to use for the button when the type is flat.
         */
@@ -1016,7 +1016,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "flatRippleColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "flatRippleColor", {
         /**
          * Gets or sets the color to use for the background when the button is pressed and the type is floating action button.
         */
@@ -1030,7 +1030,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "flatTextColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "flatTextColor", {
         /**
          * Gets or sets the color to use for the text of the button when type is flat.
         */
@@ -1044,7 +1044,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "flatHoverTextColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "flatHoverTextColor", {
         /**
          * Gets or sets the color to use for the hovered text of the button when type is flat.
         */
@@ -1058,7 +1058,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "flatFocusBackgroundColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "flatFocusBackgroundColor", {
         /**
          * Gets or sets the color to use for the backround the button when it is focused and flat.
         */
@@ -1072,7 +1072,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "flatFocusTextColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "flatFocusTextColor", {
         /**
          * Gets or sets the color to use for the text the button when it is focused and flat.
         */
@@ -1086,7 +1086,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "flatBorderWidth", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "flatBorderWidth", {
         /**
          * Gets or sets the width to use for the button border when the type is flat.
         */
@@ -1100,7 +1100,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "flatCornerRadiusBottomRight", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "flatCornerRadiusBottomRight", {
         get: function () {
             return this.i.kv ? this.i.kv.b : NaN;
         },
@@ -1113,7 +1113,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "flatCornerRadiusBottomLeft", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "flatCornerRadiusBottomLeft", {
         get: function () {
             return this.i.kv ? this.i.kv.a : NaN;
         },
@@ -1126,7 +1126,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "flatCornerRadiusTopLeft", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "flatCornerRadiusTopLeft", {
         get: function () {
             return this.i.kv ? this.i.kv.c : NaN;
         },
@@ -1139,7 +1139,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "flatCornerRadiusTopRight", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "flatCornerRadiusTopRight", {
         get: function () {
             return this.i.kv ? this.i.kv.d : NaN;
         },
@@ -1152,13 +1152,13 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    IgcButtonComponent.prototype.ensureFlatCornerRadius = function () {
+    IgcXButtonComponent.prototype.ensureFlatCornerRadius = function () {
         if (this.i.kv) {
             return;
         }
         this.i.kv = new CornerRadius(2);
     };
-    Object.defineProperty(IgcButtonComponent.prototype, "backgroundColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "backgroundColor", {
         /**
          * Gets or sets the color to use for the background when the button regardless of type.
         */
@@ -1172,7 +1172,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "disabledBackgroundColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "disabledBackgroundColor", {
         /**
          * Gets or sets the color to use for the disabled background of the button when the type is disabled.
         */
@@ -1186,7 +1186,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "disabledBorderColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "disabledBorderColor", {
         /**
          * Gets or sets the color to use for the disabled border of the button when the type is raised.
         */
@@ -1200,7 +1200,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "disabledTextColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "disabledTextColor", {
         /**
          * Gets or sets the color to use for the disabled text of the button when the type is raised.
         */
@@ -1214,7 +1214,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "disabledElevation", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "disabledElevation", {
         /**
          * Gets or sets the disabled elevation to use for the button when the type is raised.
         */
@@ -1228,7 +1228,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "elevationMode", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "elevationMode", {
         /**
          * Gets or sets the disabled elevation to use for the button when the type is raised.
         */
@@ -1242,7 +1242,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "hoverBackgroundColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "hoverBackgroundColor", {
         /**
          * Gets or sets the hover color to use for the background of the button when the  type is hovered.
         */
@@ -1256,7 +1256,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "borderColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "borderColor", {
         /**
          * Gets or sets the border color to use for the button regardless of type.
         */
@@ -1270,7 +1270,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "restingElevation", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "restingElevation", {
         /**
          * Gets or sets the elevation to use for the button regardless of type.
         */
@@ -1284,7 +1284,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "hoverElevation", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "hoverElevation", {
         /**
          * Gets or sets the hover elevation to use for the button regardless of type.
         */
@@ -1298,7 +1298,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "focusElevation", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "focusElevation", {
         /**
          * Gets or sets the focus elevation to use for the button regardless of type.
         */
@@ -1312,7 +1312,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "textStyle", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "textStyle", {
         /**
          * Gets or sets the use for the button.
         */
@@ -1331,7 +1331,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "textColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "textColor", {
         /**
          * Gets or sets the color to use for the text of the button regardless of type.
         */
@@ -1345,7 +1345,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "hoverTextColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "hoverTextColor", {
         /**
          * Gets or sets the color to use for the hovered text of the button regardless of type.
         */
@@ -1359,7 +1359,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "rippleColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "rippleColor", {
         /**
          * Gets or sets the color to use for the background of the button regardless of type.
         */
@@ -1373,7 +1373,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "raisedTextColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "raisedTextColor", {
         /**
          * Gets or sets the color to use for the text of the button when type is raised.
         */
@@ -1387,7 +1387,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "raisedHoverTextColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "raisedHoverTextColor", {
         /**
          * Gets or sets the color to use for the hovered text of the button when type is raised.
         */
@@ -1401,7 +1401,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "raisedFocusBackgroundColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "raisedFocusBackgroundColor", {
         /**
          * Gets or sets the color to use for the backround the button when it is focused and raised.
         */
@@ -1415,7 +1415,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "raisedFocusTextColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "raisedFocusTextColor", {
         /**
          * Gets or sets the color to use for the text the button when it is focused and raised.
         */
@@ -1429,7 +1429,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "focusBackgroundColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "focusBackgroundColor", {
         /**
          * Gets or sets the color to use for the backround the button when it is focused.
         */
@@ -1443,7 +1443,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "focusTextColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "focusTextColor", {
         /**
          * Gets or sets the color to use for the text of the button when it is focused.
         */
@@ -1457,7 +1457,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "borderWidth", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "borderWidth", {
         /**
          * Gets or sets the width to use for the button border regardless of type.
         */
@@ -1471,7 +1471,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "cornerRadiusBottomRight", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "cornerRadiusBottomRight", {
         get: function () {
             return this.i.ke ? this.i.ke.b : NaN;
         },
@@ -1484,7 +1484,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "cornerRadiusBottomLeft", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "cornerRadiusBottomLeft", {
         get: function () {
             return this.i.ke ? this.i.ke.a : NaN;
         },
@@ -1497,7 +1497,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "cornerRadiusTopLeft", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "cornerRadiusTopLeft", {
         get: function () {
             return this.i.ke ? this.i.ke.c : NaN;
         },
@@ -1510,7 +1510,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "cornerRadiusTopRight", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "cornerRadiusTopRight", {
         get: function () {
             return this.i.ke ? this.i.ke.d : NaN;
         },
@@ -1523,13 +1523,13 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    IgcButtonComponent.prototype.ensureCornerRadius = function () {
+    IgcXButtonComponent.prototype.ensureCornerRadius = function () {
         if (this.i.ke) {
             return;
         }
         this.i.ke = new CornerRadius(2);
     };
-    Object.defineProperty(IgcButtonComponent.prototype, "outlinedBackgroundColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "outlinedBackgroundColor", {
         /**
          * Gets or sets the color to use for the background of the button when the  type is outlined.
         */
@@ -1543,7 +1543,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "outlinedDisabledBackgroundColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "outlinedDisabledBackgroundColor", {
         /**
          * Gets or sets the color to use for the disabled background of the button when the type is outlined.
         */
@@ -1557,7 +1557,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "outlinedDisabledBorderColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "outlinedDisabledBorderColor", {
         /**
          * Gets or sets the color to use for the disabled border of the button when the type is outlined.
         */
@@ -1571,7 +1571,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "outlinedDisabledTextColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "outlinedDisabledTextColor", {
         /**
          * Gets or sets the color to use for the disabled text of the button when the type is outlined.
         */
@@ -1585,7 +1585,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "outlinedDisabledElevation", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "outlinedDisabledElevation", {
         /**
          * Gets or sets the disabled elevation to use for the button when the type is outlined.
         */
@@ -1599,7 +1599,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "outlinedHoverBackgroundColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "outlinedHoverBackgroundColor", {
         /**
          * Gets or sets the hover color to use for the background of the button when the  type is hoveredOutlined.
         */
@@ -1613,7 +1613,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "outlinedBorderColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "outlinedBorderColor", {
         /**
          * Gets or sets the border color to use for the button when the type is outlined.
         */
@@ -1627,7 +1627,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "outlinedRestingElevation", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "outlinedRestingElevation", {
         /**
          * Gets or sets the elevation to use for the button when the type is outlined.
         */
@@ -1641,7 +1641,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "outlinedHoverElevation", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "outlinedHoverElevation", {
         /**
          * Gets or sets the hover elevation to use for the button when the type is outlined.
         */
@@ -1655,7 +1655,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "outlinedFocusElevation", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "outlinedFocusElevation", {
         /**
          * Gets or sets the focus elevation to use for the button when the type is outlined.
         */
@@ -1669,7 +1669,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "outlinedBorderWidth", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "outlinedBorderWidth", {
         /**
          * Gets or sets the width to use for the button border when the type is outlined.
         */
@@ -1683,7 +1683,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "outlinedCornerRadiusBottomRight", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "outlinedCornerRadiusBottomRight", {
         get: function () {
             return this.i.kx ? this.i.kx.b : NaN;
         },
@@ -1696,7 +1696,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "outlinedCornerRadiusBottomLeft", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "outlinedCornerRadiusBottomLeft", {
         get: function () {
             return this.i.kx ? this.i.kx.a : NaN;
         },
@@ -1709,7 +1709,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "outlinedCornerRadiusTopLeft", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "outlinedCornerRadiusTopLeft", {
         get: function () {
             return this.i.kx ? this.i.kx.c : NaN;
         },
@@ -1722,7 +1722,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "outlinedCornerRadiusTopRight", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "outlinedCornerRadiusTopRight", {
         get: function () {
             return this.i.kx ? this.i.kx.d : NaN;
         },
@@ -1735,13 +1735,13 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    IgcButtonComponent.prototype.ensureOutlinedCornerRadius = function () {
+    IgcXButtonComponent.prototype.ensureOutlinedCornerRadius = function () {
         if (this.i.kx) {
             return;
         }
         this.i.kx = new CornerRadius(2);
     };
-    Object.defineProperty(IgcButtonComponent.prototype, "outlinedRippleColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "outlinedRippleColor", {
         /**
          * Gets or sets the color to use for the background when the button is pressed and the type is floating action button.
         */
@@ -1755,7 +1755,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "outlinedTextColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "outlinedTextColor", {
         /**
          * Gets or sets the color to use for the text of the button when type is outlined.
         */
@@ -1769,7 +1769,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "outlinedHoverTextColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "outlinedHoverTextColor", {
         /**
          * Gets or sets the color to use for the hovered text of the button when type is outlined.
         */
@@ -1783,7 +1783,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "outlinedFocusBackgroundColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "outlinedFocusBackgroundColor", {
         /**
          * Gets or sets the color to use for the backround the button when it is focused and outlined.
         */
@@ -1797,7 +1797,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "outlinedFocusTextColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "outlinedFocusTextColor", {
         /**
          * Gets or sets the color to use for the text the button when it is focused and outlined.
         */
@@ -1811,7 +1811,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "fabBackgroundColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "fabBackgroundColor", {
         /**
          * Gets or sets the color to use for the background of the button when the  type is floating action button.
         */
@@ -1825,7 +1825,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "fabDisabledBackgroundColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "fabDisabledBackgroundColor", {
         /**
          * Gets or sets the color to use for the disabled background of the button when the type is fab.
         */
@@ -1839,7 +1839,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "fabDisabledBorderColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "fabDisabledBorderColor", {
         /**
          * Gets or sets the color to use for the disabled border of the button when the type is fab.
         */
@@ -1853,7 +1853,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "fabDisabledTextColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "fabDisabledTextColor", {
         /**
          * Gets or sets the color to use for the disabled text of the button when the type is fab.
         */
@@ -1867,7 +1867,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "fabDisabledElevation", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "fabDisabledElevation", {
         /**
          * Gets or sets the disabled elevation to use for the button when the type is fab.
         */
@@ -1881,7 +1881,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "fabHoverBackgroundColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "fabHoverBackgroundColor", {
         /**
          * Gets or sets the hover color to use for the background of the button when the  type is hoveredFab.
         */
@@ -1895,7 +1895,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "fabBorderColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "fabBorderColor", {
         /**
          * Gets or sets the border color to use for the button when the type is floating action button.
         */
@@ -1909,7 +1909,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "fabRestingElevation", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "fabRestingElevation", {
         /**
          * Gets or sets the elevation to use for the button when the type is floating action button.
         */
@@ -1923,7 +1923,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "fabHoverElevation", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "fabHoverElevation", {
         /**
          * Gets or sets the hover elevation to use for the button when the type is floating action button.
         */
@@ -1937,7 +1937,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "fabFocusElevation", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "fabFocusElevation", {
         /**
          * Gets or sets the focus elevation to use for the button when the type is floating action button.
         */
@@ -1951,7 +1951,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "fabBorderWidth", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "fabBorderWidth", {
         /**
          * Gets or sets the width to use for the button border when the type is floating action button.
         */
@@ -1965,7 +1965,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "fabCornerRadiusBottomRight", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "fabCornerRadiusBottomRight", {
         get: function () {
             return this.i.ku ? this.i.ku.b : NaN;
         },
@@ -1978,7 +1978,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "fabCornerRadiusBottomLeft", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "fabCornerRadiusBottomLeft", {
         get: function () {
             return this.i.ku ? this.i.ku.a : NaN;
         },
@@ -1991,7 +1991,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "fabCornerRadiusTopLeft", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "fabCornerRadiusTopLeft", {
         get: function () {
             return this.i.ku ? this.i.ku.c : NaN;
         },
@@ -2004,7 +2004,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "fabCornerRadiusTopRight", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "fabCornerRadiusTopRight", {
         get: function () {
             return this.i.ku ? this.i.ku.d : NaN;
         },
@@ -2017,13 +2017,13 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    IgcButtonComponent.prototype.ensureFabCornerRadius = function () {
+    IgcXButtonComponent.prototype.ensureFabCornerRadius = function () {
         if (this.i.ku) {
             return;
         }
         this.i.ku = new CornerRadius(2);
     };
-    Object.defineProperty(IgcButtonComponent.prototype, "fabRippleColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "fabRippleColor", {
         /**
          * Gets or sets the color to use for the background when the button is pressed and the type is floating action button.
         */
@@ -2037,7 +2037,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "fabTextColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "fabTextColor", {
         /**
          * Gets or sets the color to use for the text of the button when type is floating action button.
         */
@@ -2051,7 +2051,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "fabHoverTextColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "fabHoverTextColor", {
         /**
          * Gets or sets the color to use for the hovered text of the button when type is floating action button.
         */
@@ -2065,7 +2065,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "fabFocusBackgroundColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "fabFocusBackgroundColor", {
         /**
          * Gets or sets the color to use for the backround the button when it is focused and fab.
         */
@@ -2079,7 +2079,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "fabFocusTextColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "fabFocusTextColor", {
         /**
          * Gets or sets the color to use for the text the button when it is focused and fab.
         */
@@ -2093,7 +2093,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "iconBackgroundColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "iconBackgroundColor", {
         /**
          * Gets or sets the color to use for the background of the button when the  type is icon.
         */
@@ -2107,7 +2107,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "iconDisabledBackgroundColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "iconDisabledBackgroundColor", {
         /**
          * Gets or sets the color to use for the disabled background of the button when the type is icon.
         */
@@ -2121,7 +2121,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "iconDisabledBorderColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "iconDisabledBorderColor", {
         /**
          * Gets or sets the color to use for the disabled border of the button when the type is icon.
         */
@@ -2135,7 +2135,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "iconDisabledTextColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "iconDisabledTextColor", {
         /**
          * Gets or sets the color to use for the disabled text of the button when the type is icon.
         */
@@ -2149,7 +2149,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "iconDisabledElevation", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "iconDisabledElevation", {
         /**
          * Gets or sets the disabled elevation to use for the button when the type is icon.
         */
@@ -2163,7 +2163,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "iconHoverBackgroundColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "iconHoverBackgroundColor", {
         /**
          * Gets or sets the hover color to use for the background of the button when the  type is hoveredIcon.
         */
@@ -2177,7 +2177,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "iconBorderColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "iconBorderColor", {
         /**
          * Gets or sets the border color to use for the button when the type is icon.
         */
@@ -2191,7 +2191,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "iconRestingElevation", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "iconRestingElevation", {
         /**
          * Gets or sets the elevation to use for the button when the type is icon.
         */
@@ -2205,7 +2205,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "iconHoverElevation", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "iconHoverElevation", {
         /**
          * Gets or sets the hover elevation to use for the button when the type is icon.
         */
@@ -2219,7 +2219,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "iconFocusElevation", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "iconFocusElevation", {
         /**
          * Gets or sets the focus elevation to use for the button when the type is icon.
         */
@@ -2233,7 +2233,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "iconBorderWidth", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "iconBorderWidth", {
         /**
          * Gets or sets the width to use for the button border when the type is icon.
         */
@@ -2247,7 +2247,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "iconCornerRadiusBottomRight", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "iconCornerRadiusBottomRight", {
         get: function () {
             return this.i.kw ? this.i.kw.b : NaN;
         },
@@ -2260,7 +2260,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "iconCornerRadiusBottomLeft", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "iconCornerRadiusBottomLeft", {
         get: function () {
             return this.i.kw ? this.i.kw.a : NaN;
         },
@@ -2273,7 +2273,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "iconCornerRadiusTopLeft", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "iconCornerRadiusTopLeft", {
         get: function () {
             return this.i.kw ? this.i.kw.c : NaN;
         },
@@ -2286,7 +2286,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "iconCornerRadiusTopRight", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "iconCornerRadiusTopRight", {
         get: function () {
             return this.i.kw ? this.i.kw.d : NaN;
         },
@@ -2299,13 +2299,13 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    IgcButtonComponent.prototype.ensureIconCornerRadius = function () {
+    IgcXButtonComponent.prototype.ensureIconCornerRadius = function () {
         if (this.i.kw) {
             return;
         }
         this.i.kw = new CornerRadius(2);
     };
-    Object.defineProperty(IgcButtonComponent.prototype, "iconRippleColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "iconRippleColor", {
         /**
          * Gets or sets the color to use for the background when the button is pressed and the type is floating action button.
         */
@@ -2319,7 +2319,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "iconTextColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "iconTextColor", {
         /**
          * Gets or sets the color to use for the text of the button when type is icon.
         */
@@ -2333,7 +2333,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "iconHoverTextColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "iconHoverTextColor", {
         /**
          * Gets or sets the color to use for the hovered text of the button when type is icon.
         */
@@ -2347,7 +2347,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "iconFocusBackgroundColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "iconFocusBackgroundColor", {
         /**
          * Gets or sets the color to use for the backround the button when it is focused and icon.
         */
@@ -2361,7 +2361,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "iconFocusTextColor", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "iconFocusTextColor", {
         /**
          * Gets or sets the color to use for the text the button when it is focused and icon.
         */
@@ -2375,7 +2375,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "inputId", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "inputId", {
         /**
          * Gets or sets the id to use for the internal native checkbox.
         */
@@ -2388,7 +2388,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "id", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "id", {
         /**
          * Gets or sets the id to use for the checkbox.
         */
@@ -2401,7 +2401,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "display", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "display", {
         /**
          * Gets or sets the id to use for the checkbox.
         */
@@ -2414,7 +2414,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "flexDirection", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "flexDirection", {
         /**
          * Gets or sets the id to use for the checkbox.
         */
@@ -2427,7 +2427,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "flexGrow", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "flexGrow", {
         /**
          * Gets or sets the flex-grow setting for the button.
         */
@@ -2440,7 +2440,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "alignItems", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "alignItems", {
         /**
          * Gets or sets the id to use for the checkbox.
         */
@@ -2453,7 +2453,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "value", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "value", {
         /**
          * Gets or sets value to use for the checkbox.
         */
@@ -2466,7 +2466,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "name", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "name", {
         /**
          * Gets or sets name to use for the button.
         */
@@ -2479,7 +2479,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "tabIndex", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "tabIndex", {
         /**
          * Gets or sets TabIndex to use for the checkbox.
         */
@@ -2493,7 +2493,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "ariaLabel", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "ariaLabel", {
         /**
          * Gets or sets the value of the aria-label attribute.
         */
@@ -2506,7 +2506,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "focused", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "focused", {
         /**
          * Gets or sets if the checkbox is Focused.
         */
@@ -2520,7 +2520,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "isFocusStyleEnabled", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "isFocusStyleEnabled", {
         /**
          * Gets or sets if the button show use styling to show focus.
         */
@@ -2534,7 +2534,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "disableRipple", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "disableRipple", {
         /**
          * Gets or sets whether to disable the ripple effect for the button.
         */
@@ -2548,7 +2548,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "actualDisableRipple", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "actualDisableRipple", {
         /**
          * Gets whether to actually disable the ripple effect for the button.
         */
@@ -2562,7 +2562,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "isHover", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "isHover", {
         /**
          * Gets or sets whether the checkbox is checked.
         */
@@ -2576,7 +2576,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "disabled", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "disabled", {
         /**
          * Gets or sets whether the checkbox is disabled.
         */
@@ -2590,7 +2590,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonComponent.prototype, "disableTransitions", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "disableTransitions", {
         /**
          * Gets or sets whether the checkbox transitions are disabled.
         */
@@ -2604,22 +2604,22 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    IgcButtonComponent.prototype.findByName = function (name) {
+    IgcXButtonComponent.prototype.findByName = function (name) {
         return null;
     };
-    Object.defineProperty(IgcButtonComponent.prototype, "hasUserValues", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "hasUserValues", {
         get: function () {
             return this._hasUserValues;
         },
         enumerable: true,
         configurable: true
     });
-    IgcButtonComponent.prototype.__m = function (propertyName) {
+    IgcXButtonComponent.prototype.__m = function (propertyName) {
         if (!this._inStyling) {
             this._hasUserValues.add(propertyName);
         }
     };
-    IgcButtonComponent.prototype._styling = function (container, component, parent) {
+    IgcXButtonComponent.prototype._styling = function (container, component, parent) {
         if (this._inStyling) {
             return;
         }
@@ -2631,7 +2631,7 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         if (typeName.indexOf("Xam") === 0) {
             typeName = typeName.substring(3);
         }
-        genericPrefix = toSpinal("ButtonComponent");
+        genericPrefix = toSpinal("XButtonComponent");
         var additionalPrefixes = [];
         var prefix = toSpinal(typeName);
         additionalPrefixes.push(prefix + "-");
@@ -2664,17 +2664,17 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         }
         this._inStyling = false;
     };
-    IgcButtonComponent.prototype.onDetachedFromUI = function () {
+    IgcXButtonComponent.prototype.onDetachedFromUI = function () {
         this.i.onDetachedFromUI();
     };
-    IgcButtonComponent.prototype.onAttachedToUI = function () {
+    IgcXButtonComponent.prototype.onAttachedToUI = function () {
         this.i.onAttachedToUI();
     };
     /**
      * Exports visual information about the current state of the grid.
     
     */
-    IgcButtonComponent.prototype.exportVisualModel = function () {
+    IgcXButtonComponent.prototype.exportVisualModel = function () {
         var iv = this.i.ey();
         return (iv);
     };
@@ -2682,11 +2682,11 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
      * Returns a serialized copy of the exported visual model
     
     */
-    IgcButtonComponent.prototype.exportSerializedVisualModel = function () {
+    IgcXButtonComponent.prototype.exportSerializedVisualModel = function () {
         var iv = this.i.gg();
         return (iv);
     };
-    Object.defineProperty(IgcButtonComponent.prototype, "clicked", {
+    Object.defineProperty(IgcXButtonComponent.prototype, "clicked", {
         get: function () {
             return this._clicked;
         },
@@ -2713,10 +2713,10 @@ var IgcButtonComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    IgcButtonComponent._observedAttributesIgcButtonComponent = null;
-    IgcButtonComponent.htmlTagName = "igc-button";
-    IgcButtonComponent._isElementRegistered = false;
-    return IgcButtonComponent;
+    IgcXButtonComponent._observedAttributesIgcXButtonComponent = null;
+    IgcXButtonComponent.htmlTagName = "igc-x-button";
+    IgcXButtonComponent._isElementRegistered = false;
+    return IgcXButtonComponent;
 }(IgcHTMLElement));
-export { IgcButtonComponent };
-//# sourceMappingURL=igc-button-component.js.map
+export { IgcXButtonComponent };
+//# sourceMappingURL=igc-x-button-component.js.map