igniteui-webcomponents-inputs 1.3.1 → 1.4.1

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

@@ -1,12 +1,12 @@
 import * as tslib_1 from "tslib";
-import { ButtonGroup } from "./ButtonGroup";
+import { XButtonGroup } from "./XButtonGroup";
 import { ensureEnum, brushToString, stringToBrush, ensureBool, initializePropertiesFromCss, NamePatcher, toSpinal, enumToString, getAllPropertyNames, fromSpinal } from "igniteui-webcomponents-core";
 import { WebComponentRenderer, PortalManager } from "igniteui-webcomponents-core";
 import { delegateCombine, delegateRemove } from "igniteui-webcomponents-core";
 import { TypeRegistrar } from "igniteui-webcomponents-core";
 import { RegisterElementHelper } from "igniteui-webcomponents-core";
-import { IgcButtonComponent } from './igc-button-component';
-import { IgcButtonGroupButtonCollection } from './igc-button-group-button-collection';
+import { IgcXButtonComponent } from './igc-x-button-component';
+import { IgcXButtonGroupButtonCollection } from './igc-x-button-group-button-collection';
 import { CollectionAdapter } from "igniteui-webcomponents-core";
 import { NotifyCollectionChangedAction } from "igniteui-webcomponents-core";
 import { ButtonGroupOrientation_$type } from './ButtonGroupOrientation';
@@ -15,9 +15,9 @@ import { ControlDisplayDensity_$type } from "igniteui-webcomponents-core";
 import { BaseControlTheme_$type } from "igniteui-webcomponents-core";
 import { ButtonGroupDisplayStyle_$type } from './ButtonGroupDisplayStyle';
 import { IgcHTMLElement } from "igniteui-webcomponents-core";
-var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
-    tslib_1.__extends(IgcButtonGroupComponent, _super);
-    function IgcButtonGroupComponent() {
+var IgcXButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
+    tslib_1.__extends(IgcXButtonGroupComponent, _super);
+    function IgcXButtonGroupComponent() {
         var _this = _super.call(this) || this;
         _this.contentButtons = [];
         /**
@@ -100,14 +100,14 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         //    this._checkbox.notifySizeChanged();
         //});
     }
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "buttons", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "buttons", {
         /**
          * A collection or manually added axes for the chart.
         */
         get: function () {
             var _this = this;
             if (this._buttons === null) {
-                var coll = new IgcButtonGroupButtonCollection();
+                var coll = new IgcXButtonGroupButtonCollection();
                 var inner = coll._innerColl;
                 inner.addListener(function (sender, e) {
                     switch (e.action) {
@@ -133,7 +133,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    IgcButtonGroupComponent.prototype._onChildrenChanged = function () {
+    IgcXButtonGroupComponent.prototype._onChildrenChanged = function () {
         var children = [];
         for (var i = 0; i < this.childNodes.length; i++) {
             var child = this.childNodes[i];
@@ -143,17 +143,17 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         }
         this._portalManager.onChildrenChanged(children);
     };
-    IgcButtonGroupComponent.prototype.updateButtons = function () {
+    IgcXButtonGroupComponent.prototype.updateButtons = function () {
         this.contentButtons.length = 0;
         for (var i = 0; i < this.children.length; i++) {
-            if (this.children[i] instanceof IgcButtonComponent) {
+            if (this.children[i] instanceof IgcXButtonComponent) {
                 this.contentButtons.push(this.children[i]);
             }
         }
         var childContent = this.querySelector("igc-child-content");
         if (childContent) {
             for (var i = 0; i < childContent.children.length; i++) {
-                if (childContent.children[i] instanceof IgcButtonComponent) {
+                if (childContent.children[i] instanceof IgcXButtonComponent) {
                     this.contentButtons.push(childContent.children[i]);
                 }
             }
@@ -163,23 +163,23 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         }
     };
     // supports angular themes or custom properties set in CSS
-    IgcButtonGroupComponent.prototype.updateStyle = function () {
+    IgcXButtonGroupComponent.prototype.updateStyle = function () {
         this._styling(this, this);
     };
-    IgcButtonGroupComponent.prototype.destroy = function () {
+    IgcXButtonGroupComponent.prototype.destroy = function () {
         this._buttonGroup.destroy();
         this._wrapper.destroy();
     };
-    IgcButtonGroupComponent.prototype.createImplementation = function () {
-        return new ButtonGroup();
+    IgcXButtonGroupComponent.prototype.createImplementation = function () {
+        return new XButtonGroup();
     };
-    IgcButtonGroupComponent.prototype.disconnectedCallback = function () {
+    IgcXButtonGroupComponent.prototype.disconnectedCallback = function () {
         this._disconnected = true;
         if (this.i) {
             this.i.onDetachedFromUI();
         }
     };
-    IgcButtonGroupComponent.prototype.connectedCallback = function () {
+    IgcXButtonGroupComponent.prototype.connectedCallback = function () {
         if (this._disconnected) {
             this._disconnected = false;
             if (this.i) {
@@ -187,8 +187,8 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
             }
             return;
         }
-        this.classList.add("ig-button-group");
-        this.classList.add("igc-button-group");
+        this.classList.add("ig-x-button-group");
+        this.classList.add("igc-x-button-group");
         this.appendChild(this._container.getNativeElement());
         this._attached = true;
         this.style.display = "inline-block";
@@ -199,10 +199,10 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         this._styling(this, this);
         this.afterContentInit();
     };
-    IgcButtonGroupComponent.prototype.afterContentInit = function () {
+    IgcXButtonGroupComponent.prototype.afterContentInit = function () {
         //this.i.notifySizeChanged();
     };
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "i", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "i", {
         /**
          * @hidden
          */
@@ -214,7 +214,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    IgcButtonGroupComponent._createFromInternal = function (internal) {
+    IgcXButtonGroupComponent._createFromInternal = function (internal) {
         if (!internal) {
             return null;
         }
@@ -228,10 +228,10 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         }
         return TypeRegistrar.create(externalName);
     };
-    IgcButtonGroupComponent.prototype._enqueueSetAttribute = function (attrName, attrValue) {
+    IgcXButtonGroupComponent.prototype._enqueueSetAttribute = function (attrName, attrValue) {
         this._queuedSetAttributes.push({ attrName: attrName, attrValue: attrValue });
     };
-    IgcButtonGroupComponent.prototype._flushQueuedAttributes = function () {
+    IgcXButtonGroupComponent.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);
@@ -239,7 +239,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         this._settingAttributes = false;
         this._queuedSetAttributes.length = 0;
     };
-    IgcButtonGroupComponent.prototype._a = function (attrName, attrValue) {
+    IgcXButtonGroupComponent.prototype._a = function (attrName, attrValue) {
         if (this._updatingFromAttribute) {
             return;
         }
@@ -256,21 +256,21 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         }
         this._settingAttributes = false;
     };
-    Object.defineProperty(IgcButtonGroupComponent, "observedAttributes", {
+    Object.defineProperty(IgcXButtonGroupComponent, "observedAttributes", {
         get: function () {
-            if (IgcButtonGroupComponent._observedAttributesIgcButtonGroupComponent == null) {
-                var names = getAllPropertyNames(IgcButtonGroupComponent);
+            if (IgcXButtonGroupComponent._observedAttributesIgcXButtonGroupComponent == null) {
+                var names = getAllPropertyNames(IgcXButtonGroupComponent);
                 for (var i = 0; i < names.length; i++) {
                     names[i] = toSpinal(names[i]);
                 }
-                IgcButtonGroupComponent._observedAttributesIgcButtonGroupComponent = names;
+                IgcXButtonGroupComponent._observedAttributesIgcXButtonGroupComponent = names;
             }
-            return IgcButtonGroupComponent._observedAttributesIgcButtonGroupComponent;
+            return IgcXButtonGroupComponent._observedAttributesIgcXButtonGroupComponent;
         },
         enumerable: true,
         configurable: true
     });
-    IgcButtonGroupComponent.prototype.attributeChangedCallback = function (name, oldValue, newValue) {
+    IgcXButtonGroupComponent.prototype.attributeChangedCallback = function (name, oldValue, newValue) {
         if (this._settingAttributes) {
             return;
         }
@@ -279,13 +279,13 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         this[setName] = newValue;
         this._updatingFromAttribute = false;
     };
-    IgcButtonGroupComponent.register = function () {
-        if (!IgcButtonGroupComponent._isElementRegistered) {
-            IgcButtonGroupComponent._isElementRegistered = true;
-            RegisterElementHelper.registerElement(IgcButtonGroupComponent.htmlTagName, IgcButtonGroupComponent);
+    IgcXButtonGroupComponent.register = function () {
+        if (!IgcXButtonGroupComponent._isElementRegistered) {
+            IgcXButtonGroupComponent._isElementRegistered = true;
+            RegisterElementHelper.registerElement(IgcXButtonGroupComponent.htmlTagName, IgcXButtonGroupComponent);
         }
     };
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "displayType", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "displayType", {
         /**
      * Gets or sets the display style to use for the button.
     */
@@ -299,7 +299,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "baseTheme", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "baseTheme", {
         /**
          * Gets or sets the base built in theme to use for the button group.
         */
@@ -313,7 +313,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "density", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "density", {
         /**
          * Gets or sets the display density to use for the button group.
         */
@@ -327,7 +327,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "actualDensity", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "actualDensity", {
         /**
          * Gets the actual display density to use for the button group.
         */
@@ -341,7 +341,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "selectedIndices", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "selectedIndices", {
         /**
          * Gets the currently selected button indices.
         */
@@ -349,12 +349,16 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
             return this.i.d;
         },
         set: function (v) {
+            if (v && !Array.isArray(v) && typeof (v) == "string") {
+                var re = /\s*(?:,|\s|$)\s*/gm;
+                v = v.split(re);
+            }
             this.i.d = v;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "actualItemCornerRadius", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "actualItemCornerRadius", {
         /**
          * Gets the actual item corner radius for the appropriate corners.
         */
@@ -368,7 +372,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "actualItemBackgroundColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "actualItemBackgroundColor", {
         /**
          * Gets the actual item background color.
         */
@@ -382,7 +386,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "actualItemDisabledBackgroundColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "actualItemDisabledBackgroundColor", {
         /**
          * Gets the actual item background color.
         */
@@ -396,7 +400,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "actualItemTextColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "actualItemTextColor", {
         /**
          * Gets the actual item text color.
         */
@@ -410,7 +414,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "actualItemDisabledTextColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "actualItemDisabledTextColor", {
         /**
          * Gets the actual item text color.
         */
@@ -424,7 +428,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "actualItemBorderColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "actualItemBorderColor", {
         /**
          * Gets the actual item border color.
         */
@@ -438,7 +442,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "actualItemDisabledBorderColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "actualItemDisabledBorderColor", {
         /**
          * Gets the actual item border color.
         */
@@ -452,7 +456,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "actualItemBorderWidth", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "actualItemBorderWidth", {
         /**
          * Gets the actual item border width.
         */
@@ -466,7 +470,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "actualSelectedItemBackgroundColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "actualSelectedItemBackgroundColor", {
         /**
          * Gets the actual selected item background color.
         */
@@ -480,7 +484,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "actualSelectedItemTextColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "actualSelectedItemTextColor", {
         /**
          * Gets the stroke actual selected item text color.
         */
@@ -494,7 +498,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "actualItemHoverBackgroundColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "actualItemHoverBackgroundColor", {
         /**
          * Gets the actual item hovered background color.
         */
@@ -508,7 +512,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "actualItemHoverTextColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "actualItemHoverTextColor", {
         /**
          * Gets the actual item text color.
         */
@@ -522,7 +526,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "actualSelectedItemHoverBackgroundColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "actualSelectedItemHoverBackgroundColor", {
         /**
          * Gets the actual selected item hovered background color.
         */
@@ -536,7 +540,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "actualSelectedItemHoverTextColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "actualSelectedItemHoverTextColor", {
         /**
          * Gets the actual selected item hovered text color.
         */
@@ -550,7 +554,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "itemCornerRadius", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "itemCornerRadius", {
         /**
          * Gets or sets the corner radius to use for the appropriate corners for the item buttons.
         */
@@ -564,7 +568,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "itemBackgroundColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "itemBackgroundColor", {
         /**
          * Gets or sets the color to use the background of the buttons in the group.
         */
@@ -578,7 +582,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "itemDisabledBackgroundColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "itemDisabledBackgroundColor", {
         /**
          * Gets or sets the disabled color to use the background of the buttons in the group.
         */
@@ -592,7 +596,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "itemTextColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "itemTextColor", {
         /**
          * Gets or sets the color to use the text of the buttons in the group.
         */
@@ -606,7 +610,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "itemDisabledTextColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "itemDisabledTextColor", {
         /**
          * Gets or sets the disabled color to use the text of the buttons in the group.
         */
@@ -620,7 +624,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "itemHoverBackgroundColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "itemHoverBackgroundColor", {
         /**
          * Gets or sets the color to use the hovered background of the buttons in the group.
         */
@@ -634,7 +638,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "itemBorderColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "itemBorderColor", {
         /**
          * Gets or sets the color to use the border of the buttons in the group.
         */
@@ -648,7 +652,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "itemDisabledBorderColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "itemDisabledBorderColor", {
         /**
          * Gets or sets the disabled color to use the border of the buttons in the group.
         */
@@ -662,7 +666,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "itemBorderWidth", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "itemBorderWidth", {
         /**
          * Gets or sets the border width to use for the buttons in the group.
         */
@@ -676,7 +680,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "itemHoverTextColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "itemHoverTextColor", {
         /**
          * Gets or sets the color to use the hovered text of the buttons in the group.
         */
@@ -690,7 +694,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "selectedItemBackgroundColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "selectedItemBackgroundColor", {
         /**
          * Gets or sets the color to use the background of the buttons in the group that are selected.
         */
@@ -704,7 +708,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "selectedItemTextColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "selectedItemTextColor", {
         /**
          * Gets or sets the color to use the text of the buttons in the group that are selected.
         */
@@ -718,7 +722,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "selectedItemHoverBackgroundColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "selectedItemHoverBackgroundColor", {
         /**
          * Gets or sets the color to use the hovered background of the buttons in the group that are selected.
         */
@@ -732,7 +736,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "selectedItemHoverTextColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "selectedItemHoverTextColor", {
         /**
          * Gets or sets the color to use the hovered text of the buttons in the group that are selected.
         */
@@ -746,7 +750,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "outlinedItemCornerRadius", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "outlinedItemCornerRadius", {
         /**
          * Gets or sets the corner radius to use for the appropriate corners for the outlined type item buttons.
         */
@@ -760,7 +764,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "outlinedItemBackgroundColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "outlinedItemBackgroundColor", {
         /**
          * Gets or sets the color to use the background of the buttons in the group when type is outlined.
         */
@@ -774,7 +778,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "outlinedItemDisabledBackgroundColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "outlinedItemDisabledBackgroundColor", {
         /**
          * Gets or sets the disabled color to use the background of the buttons in the group when type is outlined.
         */
@@ -788,7 +792,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "outlinedItemTextColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "outlinedItemTextColor", {
         /**
          * Gets or sets the color to use the text of the buttons in the group when type is outlined.
         */
@@ -802,7 +806,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "outlinedItemDisabledTextColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "outlinedItemDisabledTextColor", {
         /**
          * Gets or sets the disabled color to use the text of the buttons in the group when type is outlined.
         */
@@ -816,7 +820,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "outlinedItemHoverBackgroundColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "outlinedItemHoverBackgroundColor", {
         /**
          * Gets or sets the color to use the hovered background of the buttons in the group when type is outlined.
         */
@@ -830,7 +834,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "outlinedItemBorderColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "outlinedItemBorderColor", {
         /**
          * Gets or sets the color to use the border of the buttons in the group when type is outlined.
         */
@@ -844,7 +848,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "outlinedItemDisabledBorderColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "outlinedItemDisabledBorderColor", {
         /**
          * Gets or sets the disabled color to use the border of the buttons in the group when type is outlined.
         */
@@ -858,7 +862,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "outlinedItemBorderWidth", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "outlinedItemBorderWidth", {
         /**
          * Gets or sets the border width to use for the buttons in the group when type is outlined.
         */
@@ -872,7 +876,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "outlinedItemHoverTextColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "outlinedItemHoverTextColor", {
         /**
          * Gets or sets the color to use the hovered text of the buttons in the group when type is outlined.
         */
@@ -886,7 +890,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "outlinedSelectedItemBackgroundColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "outlinedSelectedItemBackgroundColor", {
         /**
          * Gets or sets the color to use the background of the buttons in the group that are selected when type is outlined.
         */
@@ -900,7 +904,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "outlinedSelectedItemTextColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "outlinedSelectedItemTextColor", {
         /**
          * Gets or sets the color to use the text of the buttons in the group that are selected when type is outlined.
         */
@@ -914,7 +918,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "outlinedSelectedItemHoverBackgroundColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "outlinedSelectedItemHoverBackgroundColor", {
         /**
          * Gets or sets the color to use the hovered background of the buttons in the group that are selected when type is outlined.
         */
@@ -928,7 +932,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "outlinedSelectedItemHoverTextColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "outlinedSelectedItemHoverTextColor", {
         /**
          * Gets or sets the color to use the hovered text of the buttons in the group that are selected when type is outlined.
         */
@@ -942,7 +946,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "flatItemCornerRadius", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "flatItemCornerRadius", {
         /**
          * Gets or sets the corner radius to use for the appropriate corners for the flat type item buttons.
         */
@@ -956,7 +960,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "flatItemBackgroundColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "flatItemBackgroundColor", {
         /**
          * Gets or sets the color to use the background of the buttons in the group when type is flat.
         */
@@ -970,7 +974,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "flatItemDisabledBackgroundColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "flatItemDisabledBackgroundColor", {
         /**
          * Gets or sets the disabled color to use the background of the buttons in the group when type is flat.
         */
@@ -984,7 +988,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "flatItemTextColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "flatItemTextColor", {
         /**
          * Gets or sets the color to use the text of the buttons in the group when type is flat.
         */
@@ -998,7 +1002,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "flatItemDisabledTextColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "flatItemDisabledTextColor", {
         /**
          * Gets or sets the disabled color to use the text of the buttons in the group when type is flat.
         */
@@ -1012,7 +1016,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "flatItemHoverBackgroundColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "flatItemHoverBackgroundColor", {
         /**
          * Gets or sets the color to use the hovered background of the buttons in the group when type is flat.
         */
@@ -1026,7 +1030,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "flatItemBorderColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "flatItemBorderColor", {
         /**
          * Gets or sets the color to use the border of the buttons in the group when type is flat.
         */
@@ -1040,7 +1044,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "flatItemDisabledBorderColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "flatItemDisabledBorderColor", {
         /**
          * Gets or sets the disabled color to use the border of the buttons in the group when type is flat.
         */
@@ -1054,7 +1058,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "flatItemBorderWidth", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "flatItemBorderWidth", {
         /**
          * Gets or sets the border width to use for the buttons in the group when type is flat.
         */
@@ -1068,7 +1072,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "flatItemHoverTextColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "flatItemHoverTextColor", {
         /**
          * Gets or sets the color to use the hovered text of the buttons in the group when type is flat.
         */
@@ -1082,7 +1086,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "flatSelectedItemBackgroundColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "flatSelectedItemBackgroundColor", {
         /**
          * Gets or sets the color to use the background of the buttons in the group that are selected when type is flat.
         */
@@ -1096,7 +1100,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "flatSelectedItemTextColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "flatSelectedItemTextColor", {
         /**
          * Gets or sets the color to use the text of the buttons in the group that are selected when type is flat.
         */
@@ -1110,7 +1114,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "flatSelectedItemHoverBackgroundColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "flatSelectedItemHoverBackgroundColor", {
         /**
          * Gets or sets the color to use the hovered background of the buttons in the group that are selected when type is flat.
         */
@@ -1124,7 +1128,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "flatSelectedItemHoverTextColor", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "flatSelectedItemHoverTextColor", {
         /**
          * Gets or sets the color to use the hovered text of the buttons in the group that are selected when type is flat.
         */
@@ -1138,7 +1142,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "orientation", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "orientation", {
         /**
          * Gets or sets the oreientation to use the button group when type is outlined.
         */
@@ -1152,7 +1156,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "id", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "id", {
         /**
          * Gets or sets the id to use for the button group.
         */
@@ -1165,7 +1169,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "disabled", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "disabled", {
         /**
          * Gets or sets whether the checkbox is disabled.
         */
@@ -1179,7 +1183,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "isMultiSelect", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "isMultiSelect", {
         /**
          * Gets or sets whether the group supports multi-select.
         */
@@ -1193,25 +1197,25 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    IgcButtonGroupComponent.prototype.findByName = function (name) {
+    IgcXButtonGroupComponent.prototype.findByName = function (name) {
         if (this.buttons != null && this.buttons.findByName && this.buttons.findByName(name)) {
             return this.buttons.findByName(name);
         }
         return null;
     };
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "hasUserValues", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "hasUserValues", {
         get: function () {
             return this._hasUserValues;
         },
         enumerable: true,
         configurable: true
     });
-    IgcButtonGroupComponent.prototype.__m = function (propertyName) {
+    IgcXButtonGroupComponent.prototype.__m = function (propertyName) {
         if (!this._inStyling) {
             this._hasUserValues.add(propertyName);
         }
     };
-    IgcButtonGroupComponent.prototype._styling = function (container, component, parent) {
+    IgcXButtonGroupComponent.prototype._styling = function (container, component, parent) {
         if (this._inStyling) {
             return;
         }
@@ -1223,7 +1227,7 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         if (typeName.indexOf("Xam") === 0) {
             typeName = typeName.substring(3);
         }
-        genericPrefix = toSpinal("ButtonGroupComponent");
+        genericPrefix = toSpinal("XButtonGroupComponent");
         var additionalPrefixes = [];
         var prefix = toSpinal(typeName);
         additionalPrefixes.push(prefix + "-");
@@ -1256,17 +1260,17 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         }
         this._inStyling = false;
     };
-    IgcButtonGroupComponent.prototype.onDetachedFromUI = function () {
+    IgcXButtonGroupComponent.prototype.onDetachedFromUI = function () {
         this.i.onDetachedFromUI();
     };
-    IgcButtonGroupComponent.prototype.onAttachedToUI = function () {
+    IgcXButtonGroupComponent.prototype.onAttachedToUI = function () {
         this.i.onAttachedToUI();
     };
     /**
      * Exports visual information about the current state of the grid.
     
     */
-    IgcButtonGroupComponent.prototype.exportVisualModel = function () {
+    IgcXButtonGroupComponent.prototype.exportVisualModel = function () {
         var iv = this.i.a5();
         return (iv);
     };
@@ -1274,11 +1278,11 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
      * Returns a serialized copy of the exported visual model
     
     */
-    IgcButtonGroupComponent.prototype.exportSerializedVisualModel = function () {
+    IgcXButtonGroupComponent.prototype.exportSerializedVisualModel = function () {
         var iv = this.i.bq();
         return (iv);
     };
-    Object.defineProperty(IgcButtonGroupComponent.prototype, "selectionChanged", {
+    Object.defineProperty(IgcXButtonGroupComponent.prototype, "selectionChanged", {
         get: function () {
             return this._selectionChanged;
         },
@@ -1305,10 +1309,10 @@ var IgcButtonGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    IgcButtonGroupComponent._observedAttributesIgcButtonGroupComponent = null;
-    IgcButtonGroupComponent.htmlTagName = "igc-button-group";
-    IgcButtonGroupComponent._isElementRegistered = false;
-    return IgcButtonGroupComponent;
+    IgcXButtonGroupComponent._observedAttributesIgcXButtonGroupComponent = null;
+    IgcXButtonGroupComponent.htmlTagName = "igc-x-button-group";
+    IgcXButtonGroupComponent._isElementRegistered = false;
+    return IgcXButtonGroupComponent;
 }(IgcHTMLElement));
-export { IgcButtonGroupComponent };
-//# sourceMappingURL=igc-button-group-component.js.map
+export { IgcXButtonGroupComponent };
+//# sourceMappingURL=igc-x-button-group-component.js.map