igniteui-webcomponents-inputs 1.3.3 → 1.4.0

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

@@ -1,11 +1,11 @@
 import * as tslib_1 from "tslib";
-import { InputGroup } from "./InputGroup";
+import { XInputGroup } from "./XInputGroup";
 import { ensureEnum, brushToString, stringToBrush, ensureBool, initializePropertiesFromCss, NamePatcher, toSpinal, enumToString, getAllPropertyNames, fromSpinal } from "igniteui-webcomponents-core";
 import { WebComponentRenderer, PortalManager } from "igniteui-webcomponents-core";
 import { TypeRegistrar } from "igniteui-webcomponents-core";
 import { RegisterElementHelper } from "igniteui-webcomponents-core";
-import { IgcInputGroupItemComponent } from './igc-input-group-item-component';
-import { IgcInputGroupInputCollection } from './igc-input-group-input-collection';
+import { IgcXInputGroupItemComponent } from './igc-x-input-group-item-component';
+import { IgcXInputGroupInputCollection } from './igc-x-input-group-input-collection';
 import { CollectionAdapter } from "igniteui-webcomponents-core";
 import { NotifyCollectionChangedAction } from "igniteui-webcomponents-core";
 import { InputGroupDisplayType_$type } from './InputGroupDisplayType';
@@ -14,9 +14,9 @@ import { Thickness } from "igniteui-webcomponents-core";
 import { ControlDisplayDensity_$type } from "igniteui-webcomponents-core";
 import { BaseControlTheme_$type } from "igniteui-webcomponents-core";
 import { IgcHTMLElement } from "igniteui-webcomponents-core";
-var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
-    tslib_1.__extends(IgcInputGroupComponent, _super);
-    function IgcInputGroupComponent() {
+var IgcXInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
+    tslib_1.__extends(IgcXInputGroupComponent, _super);
+    function IgcXInputGroupComponent() {
         var _this = _super.call(this) || this;
         _this.contentInputs = [];
         /**
@@ -97,14 +97,14 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         //    this._checkbox.notifySizeChanged();
         //});
     }
-    Object.defineProperty(IgcInputGroupComponent.prototype, "inputs", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "inputs", {
         /**
          * A collection or manually added axes for the chart.
         */
         get: function () {
             var _this = this;
             if (this._inputs === null) {
-                var coll = new IgcInputGroupInputCollection();
+                var coll = new IgcXInputGroupInputCollection();
                 var inner = coll._innerColl;
                 inner.addListener(function (sender, e) {
                     switch (e.action) {
@@ -130,7 +130,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    IgcInputGroupComponent.prototype._onChildrenChanged = function () {
+    IgcXInputGroupComponent.prototype._onChildrenChanged = function () {
         var children = [];
         for (var i = 0; i < this.childNodes.length; i++) {
             var child = this.childNodes[i];
@@ -140,17 +140,17 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         }
         this._portalManager.onChildrenChanged(children);
     };
-    IgcInputGroupComponent.prototype.updateInputs = function () {
+    IgcXInputGroupComponent.prototype.updateInputs = function () {
         this.contentInputs.length = 0;
         for (var i = 0; i < this.children.length; i++) {
-            if (this.children[i] instanceof IgcInputGroupItemComponent) {
+            if (this.children[i] instanceof IgcXInputGroupItemComponent) {
                 this.contentInputs.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 IgcInputGroupItemComponent) {
+                if (childContent.children[i] instanceof IgcXInputGroupItemComponent) {
                     this.contentInputs.push(childContent.children[i]);
                 }
             }
@@ -160,23 +160,23 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         }
     };
     // supports angular themes or custom properties set in CSS
-    IgcInputGroupComponent.prototype.updateStyle = function () {
+    IgcXInputGroupComponent.prototype.updateStyle = function () {
         this._styling(this, this);
     };
-    IgcInputGroupComponent.prototype.destroy = function () {
+    IgcXInputGroupComponent.prototype.destroy = function () {
         this._inputGroup.destroy();
         this._wrapper.destroy();
     };
-    IgcInputGroupComponent.prototype.createImplementation = function () {
-        return new InputGroup();
+    IgcXInputGroupComponent.prototype.createImplementation = function () {
+        return new XInputGroup();
     };
-    IgcInputGroupComponent.prototype.disconnectedCallback = function () {
+    IgcXInputGroupComponent.prototype.disconnectedCallback = function () {
         this._disconnected = true;
         if (this.i) {
             this.i.onDetachedFromUI();
         }
     };
-    IgcInputGroupComponent.prototype.connectedCallback = function () {
+    IgcXInputGroupComponent.prototype.connectedCallback = function () {
         if (this._disconnected) {
             this._disconnected = false;
             if (this.i) {
@@ -184,8 +184,8 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
             }
             return;
         }
-        this.classList.add("ig-input-group");
-        this.classList.add("igc-input-group");
+        this.classList.add("ig-x-input-group");
+        this.classList.add("igc-x-input-group");
         this.appendChild(this._container.getNativeElement());
         this._attached = true;
         this.style.display = "inline-block";
@@ -196,10 +196,11 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         this._styling(this, this);
         this.afterContentInit();
     };
-    IgcInputGroupComponent.prototype.afterContentInit = function () {
+    IgcXInputGroupComponent.prototype.afterContentInit = function () {
+        this.i.ensureShift();
         //this.i.notifySizeChanged();
     };
-    Object.defineProperty(IgcInputGroupComponent.prototype, "i", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "i", {
         /**
          * @hidden
          */
@@ -211,7 +212,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    IgcInputGroupComponent._createFromInternal = function (internal) {
+    IgcXInputGroupComponent._createFromInternal = function (internal) {
         if (!internal) {
             return null;
         }
@@ -225,10 +226,10 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         }
         return TypeRegistrar.create(externalName);
     };
-    IgcInputGroupComponent.prototype._enqueueSetAttribute = function (attrName, attrValue) {
+    IgcXInputGroupComponent.prototype._enqueueSetAttribute = function (attrName, attrValue) {
         this._queuedSetAttributes.push({ attrName: attrName, attrValue: attrValue });
     };
-    IgcInputGroupComponent.prototype._flushQueuedAttributes = function () {
+    IgcXInputGroupComponent.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);
@@ -236,7 +237,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         this._settingAttributes = false;
         this._queuedSetAttributes.length = 0;
     };
-    IgcInputGroupComponent.prototype._a = function (attrName, attrValue) {
+    IgcXInputGroupComponent.prototype._a = function (attrName, attrValue) {
         if (this._updatingFromAttribute) {
             return;
         }
@@ -253,21 +254,21 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         }
         this._settingAttributes = false;
     };
-    Object.defineProperty(IgcInputGroupComponent, "observedAttributes", {
+    Object.defineProperty(IgcXInputGroupComponent, "observedAttributes", {
         get: function () {
-            if (IgcInputGroupComponent._observedAttributesIgcInputGroupComponent == null) {
-                var names = getAllPropertyNames(IgcInputGroupComponent);
+            if (IgcXInputGroupComponent._observedAttributesIgcXInputGroupComponent == null) {
+                var names = getAllPropertyNames(IgcXInputGroupComponent);
                 for (var i = 0; i < names.length; i++) {
                     names[i] = toSpinal(names[i]);
                 }
-                IgcInputGroupComponent._observedAttributesIgcInputGroupComponent = names;
+                IgcXInputGroupComponent._observedAttributesIgcXInputGroupComponent = names;
             }
-            return IgcInputGroupComponent._observedAttributesIgcInputGroupComponent;
+            return IgcXInputGroupComponent._observedAttributesIgcXInputGroupComponent;
         },
         enumerable: true,
         configurable: true
     });
-    IgcInputGroupComponent.prototype.attributeChangedCallback = function (name, oldValue, newValue) {
+    IgcXInputGroupComponent.prototype.attributeChangedCallback = function (name, oldValue, newValue) {
         if (this._settingAttributes) {
             return;
         }
@@ -276,13 +277,13 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         this[setName] = newValue;
         this._updatingFromAttribute = false;
     };
-    IgcInputGroupComponent.register = function () {
-        if (!IgcInputGroupComponent._isElementRegistered) {
-            IgcInputGroupComponent._isElementRegistered = true;
-            RegisterElementHelper.registerElement(IgcInputGroupComponent.htmlTagName, IgcInputGroupComponent);
+    IgcXInputGroupComponent.register = function () {
+        if (!IgcXInputGroupComponent._isElementRegistered) {
+            IgcXInputGroupComponent._isElementRegistered = true;
+            RegisterElementHelper.registerElement(IgcXInputGroupComponent.htmlTagName, IgcXInputGroupComponent);
         }
     };
-    Object.defineProperty(IgcInputGroupComponent.prototype, "displayType", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "displayType", {
         /**
      * Gets or sets the display style to use for the button.
     */
@@ -296,7 +297,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "density", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "density", {
         /**
          * Gets or sets the display density to use for the input group.
         */
@@ -310,7 +311,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "actualDensity", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "actualDensity", {
         /**
          * Gets the actual display density to use for the input group.
         */
@@ -324,7 +325,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "baseTheme", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "baseTheme", {
         /**
          * Gets or sets the base built in theme to use for the label.
         */
@@ -338,42 +339,42 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "inputHasValue", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "inputHasValue", {
         get: function () {
             return this.i.af;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "actualBorderColor", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "actualBorderColor", {
         /**
          * Gets the actual item background color.
         */
         get: function () {
-            return brushToString(this.i.os);
+            return brushToString(this.i.ot);
         },
         set: function (v) {
-            this.i.os = stringToBrush(v);
-            this._a("actualBorderColor", brushToString(this.i.os));
+            this.i.ot = stringToBrush(v);
+            this._a("actualBorderColor", brushToString(this.i.ot));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "actualFocusBorderColor", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "actualFocusBorderColor", {
         /**
          * Gets the actual item border color.
         */
         get: function () {
-            return brushToString(this.i.ot);
+            return brushToString(this.i.ou);
         },
         set: function (v) {
-            this.i.ot = stringToBrush(v);
-            this._a("actualFocusBorderColor", brushToString(this.i.ot));
+            this.i.ou = stringToBrush(v);
+            this._a("actualFocusBorderColor", brushToString(this.i.ou));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "actualBorderWidth", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "actualBorderWidth", {
         /**
          * Gets the actual item border width.
         */
@@ -387,7 +388,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "actualFocusBorderWidth", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "actualFocusBorderWidth", {
         /**
          * Gets the actual item border width.
         */
@@ -401,123 +402,123 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "actualCornerRadiusBottomRight", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "actualCornerRadiusBottomRight", {
         get: function () {
-            return this.i.mz ? this.i.mz.b : NaN;
+            return this.i.m0 ? this.i.m0.b : NaN;
         },
         set: function (v) {
             this.ensureActualCornerRadius();
-            this.i.mz.b = +v;
-            this._a("actualCornerRadiusBottomRight", this.i.mz.b);
-            this.i.mz = this.i.mz;
+            this.i.m0.b = +v;
+            this._a("actualCornerRadiusBottomRight", this.i.m0.b);
+            this.i.m0 = this.i.m0;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "actualCornerRadiusBottomLeft", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "actualCornerRadiusBottomLeft", {
         get: function () {
-            return this.i.mz ? this.i.mz.a : NaN;
+            return this.i.m0 ? this.i.m0.a : NaN;
         },
         set: function (v) {
             this.ensureActualCornerRadius();
-            this.i.mz.a = +v;
-            this._a("actualCornerRadiusBottomLeft", this.i.mz.a);
-            this.i.mz = this.i.mz;
+            this.i.m0.a = +v;
+            this._a("actualCornerRadiusBottomLeft", this.i.m0.a);
+            this.i.m0 = this.i.m0;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "actualCornerRadiusTopLeft", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "actualCornerRadiusTopLeft", {
         get: function () {
-            return this.i.mz ? this.i.mz.c : NaN;
+            return this.i.m0 ? this.i.m0.c : NaN;
         },
         set: function (v) {
             this.ensureActualCornerRadius();
-            this.i.mz.c = +v;
-            this._a("actualCornerRadiusTopLeft", this.i.mz.c);
-            this.i.mz = this.i.mz;
+            this.i.m0.c = +v;
+            this._a("actualCornerRadiusTopLeft", this.i.m0.c);
+            this.i.m0 = this.i.m0;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "actualCornerRadiusTopRight", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "actualCornerRadiusTopRight", {
         get: function () {
-            return this.i.mz ? this.i.mz.d : NaN;
+            return this.i.m0 ? this.i.m0.d : NaN;
         },
         set: function (v) {
             this.ensureActualCornerRadius();
-            this.i.mz.d = +v;
-            this._a("actualCornerRadiusTopRight", this.i.mz.d);
-            this.i.mz = this.i.mz;
+            this.i.m0.d = +v;
+            this._a("actualCornerRadiusTopRight", this.i.m0.d);
+            this.i.m0 = this.i.m0;
         },
         enumerable: true,
         configurable: true
     });
-    IgcInputGroupComponent.prototype.ensureActualCornerRadius = function () {
-        if (this.i.mz) {
+    IgcXInputGroupComponent.prototype.ensureActualCornerRadius = function () {
+        if (this.i.m0) {
             return;
         }
-        this.i.mz = new CornerRadius(2);
+        this.i.m0 = new CornerRadius(2);
     };
-    Object.defineProperty(IgcInputGroupComponent.prototype, "actualContentPaddingBottom", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "actualContentPaddingBottom", {
         get: function () {
-            return this.i.tf ? this.i.tf.b : NaN;
+            return this.i.tg ? this.i.tg.b : NaN;
         },
         set: function (v) {
             this.ensureActualContentPadding();
-            this.i.tf.b = +v;
-            this._a("actualContentPaddingBottom", this.i.tf.b);
-            this.i.tf = this.i.tf;
+            this.i.tg.b = +v;
+            this._a("actualContentPaddingBottom", this.i.tg.b);
+            this.i.tg = this.i.tg;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "actualContentPaddingLeft", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "actualContentPaddingLeft", {
         get: function () {
-            return this.i.tf ? this.i.tf.c : NaN;
+            return this.i.tg ? this.i.tg.c : NaN;
         },
         set: function (v) {
             this.ensureActualContentPadding();
-            this.i.tf.c = +v;
-            this._a("actualContentPaddingLeft", this.i.tf.c);
-            this.i.tf = this.i.tf;
+            this.i.tg.c = +v;
+            this._a("actualContentPaddingLeft", this.i.tg.c);
+            this.i.tg = this.i.tg;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "actualContentPaddingRight", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "actualContentPaddingRight", {
         get: function () {
-            return this.i.tf ? this.i.tf.d : NaN;
+            return this.i.tg ? this.i.tg.d : NaN;
         },
         set: function (v) {
             this.ensureActualContentPadding();
-            this.i.tf.d = +v;
-            this._a("actualContentPaddingRight", this.i.tf.d);
-            this.i.tf = this.i.tf;
+            this.i.tg.d = +v;
+            this._a("actualContentPaddingRight", this.i.tg.d);
+            this.i.tg = this.i.tg;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "actualContentPaddingTop", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "actualContentPaddingTop", {
         get: function () {
-            return this.i.tf ? this.i.tf.e : NaN;
+            return this.i.tg ? this.i.tg.e : NaN;
         },
         set: function (v) {
             this.ensureActualContentPadding();
-            this.i.tf.e = +v;
-            this._a("actualContentPaddingTop", this.i.tf.e);
-            this.i.tf = this.i.tf;
+            this.i.tg.e = +v;
+            this._a("actualContentPaddingTop", this.i.tg.e);
+            this.i.tg = this.i.tg;
         },
         enumerable: true,
         configurable: true
     });
-    IgcInputGroupComponent.prototype.ensureActualContentPadding = function () {
-        if (this.i.tf) {
+    IgcXInputGroupComponent.prototype.ensureActualContentPadding = function () {
+        if (this.i.tg) {
             return;
         }
-        this.i.tf = new Thickness(2);
+        this.i.tg = new Thickness(2);
     };
-    Object.defineProperty(IgcInputGroupComponent.prototype, "actualUnderlineWidth", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "actualUnderlineWidth", {
         /**
          * Gets the actual width to use for the underline element.
         */
@@ -531,7 +532,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "actualUnderlineRippleWidth", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "actualUnderlineRippleWidth", {
         /**
          * Gets the actual width to use for the underline element.
         */
@@ -545,7 +546,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "actualHoverUnderlineWidth", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "actualHoverUnderlineWidth", {
         /**
          * Gets the width to use for the underline element when hovered.
         */
@@ -559,63 +560,63 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "actualUnderlineColor", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "actualUnderlineColor", {
         /**
          * Gets the actual color to use for the underline element.
         */
         get: function () {
-            return brushToString(this.i.ow);
+            return brushToString(this.i.ox);
         },
         set: function (v) {
-            this.i.ow = stringToBrush(v);
-            this._a("actualUnderlineColor", brushToString(this.i.ow));
+            this.i.ox = stringToBrush(v);
+            this._a("actualUnderlineColor", brushToString(this.i.ox));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "actualUnderlineRippleColor", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "actualUnderlineRippleColor", {
         /**
          * Gets the actual color to use for the underline ripple element.
         */
         get: function () {
-            return brushToString(this.i.ox);
+            return brushToString(this.i.oy);
         },
         set: function (v) {
-            this.i.ox = stringToBrush(v);
-            this._a("actualUnderlineRippleColor", brushToString(this.i.ox));
+            this.i.oy = stringToBrush(v);
+            this._a("actualUnderlineRippleColor", brushToString(this.i.oy));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "actualHoverUnderlineColor", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "actualHoverUnderlineColor", {
         /**
          * Gets the actual color to use for the underline element.
         */
         get: function () {
-            return brushToString(this.i.ov);
+            return brushToString(this.i.ow);
         },
         set: function (v) {
-            this.i.ov = stringToBrush(v);
-            this._a("actualHoverUnderlineColor", brushToString(this.i.ov));
+            this.i.ow = stringToBrush(v);
+            this._a("actualHoverUnderlineColor", brushToString(this.i.ow));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "actualFocusUnderlineColor", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "actualFocusUnderlineColor", {
         /**
          * Gets the actual color to use for the underline element when focused.
         */
         get: function () {
-            return brushToString(this.i.ou);
+            return brushToString(this.i.ov);
         },
         set: function (v) {
-            this.i.ou = stringToBrush(v);
-            this._a("actualFocusUnderlineColor", brushToString(this.i.ou));
+            this.i.ov = stringToBrush(v);
+            this._a("actualFocusUnderlineColor", brushToString(this.i.ov));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "actualUnderlineOpacity", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "actualUnderlineOpacity", {
         /**
          * Gets the actual opacity to use for the underline element.
         */
@@ -629,7 +630,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "actualHoverUnderlineOpacity", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "actualHoverUnderlineOpacity", {
         /**
          * Gets the actual opacity to use for the underline element when hovered.
         */
@@ -643,7 +644,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "actualFocusUnderlineOpacity", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "actualFocusUnderlineOpacity", {
         /**
          * Gets the actual opacity to use for the underline element when focused.
         */
@@ -657,7 +658,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "actualFocusUnderlineRippleOpacity", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "actualFocusUnderlineRippleOpacity", {
         /**
          * Gets the actual opacity to use for the underline ripple element when focused.
         */
@@ -671,7 +672,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "actualUnderlineRippleOpacity", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "actualUnderlineRippleOpacity", {
         /**
          * Gets the actual opacity to use for the underline ripple element.
         */
@@ -685,21 +686,21 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "actualBackgroundColor", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "actualBackgroundColor", {
         /**
          * Gets the actual opacity to use for the underline ripple element.
         */
         get: function () {
-            return brushToString(this.i.or);
+            return brushToString(this.i.os);
         },
         set: function (v) {
-            this.i.or = stringToBrush(v);
-            this._a("actualBackgroundColor", brushToString(this.i.or));
+            this.i.os = stringToBrush(v);
+            this._a("actualBackgroundColor", brushToString(this.i.os));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "borderWidth", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "borderWidth", {
         /**
          * Gets or sets the border width to use for the border of the item group.
         */
@@ -713,7 +714,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "focusBorderWidth", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "focusBorderWidth", {
         /**
          * Gets or sets the border width to use for the border of the item group when focused.
         */
@@ -727,137 +728,137 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "borderColor", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "borderColor", {
         /**
          * Gets or sets the color to use the border of the input group.
         */
         get: function () {
-            return brushToString(this.i.oz);
+            return brushToString(this.i.o0);
         },
         set: function (v) {
-            this.i.oz = stringToBrush(v);
-            this._a("borderColor", brushToString(this.i.oz));
+            this.i.o0 = stringToBrush(v);
+            this._a("borderColor", brushToString(this.i.o0));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "cornerRadiusBottomRight", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "cornerRadiusBottomRight", {
         get: function () {
-            return this.i.m3 ? this.i.m3.b : NaN;
+            return this.i.m4 ? this.i.m4.b : NaN;
         },
         set: function (v) {
             this.ensureCornerRadius();
-            this.i.m3.b = +v;
-            this._a("cornerRadiusBottomRight", this.i.m3.b);
-            this.i.m3 = this.i.m3;
+            this.i.m4.b = +v;
+            this._a("cornerRadiusBottomRight", this.i.m4.b);
+            this.i.m4 = this.i.m4;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "cornerRadiusBottomLeft", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "cornerRadiusBottomLeft", {
         get: function () {
-            return this.i.m3 ? this.i.m3.a : NaN;
+            return this.i.m4 ? this.i.m4.a : NaN;
         },
         set: function (v) {
             this.ensureCornerRadius();
-            this.i.m3.a = +v;
-            this._a("cornerRadiusBottomLeft", this.i.m3.a);
-            this.i.m3 = this.i.m3;
+            this.i.m4.a = +v;
+            this._a("cornerRadiusBottomLeft", this.i.m4.a);
+            this.i.m4 = this.i.m4;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "cornerRadiusTopLeft", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "cornerRadiusTopLeft", {
         get: function () {
-            return this.i.m3 ? this.i.m3.c : NaN;
+            return this.i.m4 ? this.i.m4.c : NaN;
         },
         set: function (v) {
             this.ensureCornerRadius();
-            this.i.m3.c = +v;
-            this._a("cornerRadiusTopLeft", this.i.m3.c);
-            this.i.m3 = this.i.m3;
+            this.i.m4.c = +v;
+            this._a("cornerRadiusTopLeft", this.i.m4.c);
+            this.i.m4 = this.i.m4;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "cornerRadiusTopRight", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "cornerRadiusTopRight", {
         get: function () {
-            return this.i.m3 ? this.i.m3.d : NaN;
+            return this.i.m4 ? this.i.m4.d : NaN;
         },
         set: function (v) {
             this.ensureCornerRadius();
-            this.i.m3.d = +v;
-            this._a("cornerRadiusTopRight", this.i.m3.d);
-            this.i.m3 = this.i.m3;
+            this.i.m4.d = +v;
+            this._a("cornerRadiusTopRight", this.i.m4.d);
+            this.i.m4 = this.i.m4;
         },
         enumerable: true,
         configurable: true
     });
-    IgcInputGroupComponent.prototype.ensureCornerRadius = function () {
-        if (this.i.m3) {
+    IgcXInputGroupComponent.prototype.ensureCornerRadius = function () {
+        if (this.i.m4) {
             return;
         }
-        this.i.m3 = new CornerRadius(2);
+        this.i.m4 = new CornerRadius(2);
     };
-    Object.defineProperty(IgcInputGroupComponent.prototype, "contentPaddingBottom", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "contentPaddingBottom", {
         get: function () {
-            return this.i.tj ? this.i.tj.b : NaN;
+            return this.i.tk ? this.i.tk.b : NaN;
         },
         set: function (v) {
             this.ensureContentPadding();
-            this.i.tj.b = +v;
-            this._a("contentPaddingBottom", this.i.tj.b);
-            this.i.tj = this.i.tj;
+            this.i.tk.b = +v;
+            this._a("contentPaddingBottom", this.i.tk.b);
+            this.i.tk = this.i.tk;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "contentPaddingLeft", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "contentPaddingLeft", {
         get: function () {
-            return this.i.tj ? this.i.tj.c : NaN;
+            return this.i.tk ? this.i.tk.c : NaN;
         },
         set: function (v) {
             this.ensureContentPadding();
-            this.i.tj.c = +v;
-            this._a("contentPaddingLeft", this.i.tj.c);
-            this.i.tj = this.i.tj;
+            this.i.tk.c = +v;
+            this._a("contentPaddingLeft", this.i.tk.c);
+            this.i.tk = this.i.tk;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "contentPaddingRight", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "contentPaddingRight", {
         get: function () {
-            return this.i.tj ? this.i.tj.d : NaN;
+            return this.i.tk ? this.i.tk.d : NaN;
         },
         set: function (v) {
             this.ensureContentPadding();
-            this.i.tj.d = +v;
-            this._a("contentPaddingRight", this.i.tj.d);
-            this.i.tj = this.i.tj;
+            this.i.tk.d = +v;
+            this._a("contentPaddingRight", this.i.tk.d);
+            this.i.tk = this.i.tk;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "contentPaddingTop", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "contentPaddingTop", {
         get: function () {
-            return this.i.tj ? this.i.tj.e : NaN;
+            return this.i.tk ? this.i.tk.e : NaN;
         },
         set: function (v) {
             this.ensureContentPadding();
-            this.i.tj.e = +v;
-            this._a("contentPaddingTop", this.i.tj.e);
-            this.i.tj = this.i.tj;
+            this.i.tk.e = +v;
+            this._a("contentPaddingTop", this.i.tk.e);
+            this.i.tk = this.i.tk;
         },
         enumerable: true,
         configurable: true
     });
-    IgcInputGroupComponent.prototype.ensureContentPadding = function () {
-        if (this.i.tj) {
+    IgcXInputGroupComponent.prototype.ensureContentPadding = function () {
+        if (this.i.tk) {
             return;
         }
-        this.i.tj = new Thickness(2);
+        this.i.tk = new Thickness(2);
     };
-    Object.defineProperty(IgcInputGroupComponent.prototype, "underlineWidth", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "underlineWidth", {
         /**
          * Gets or sets the width to use for the underline element.
         */
@@ -871,7 +872,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "underlineRippleWidth", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "underlineRippleWidth", {
         /**
          * Gets or sets the width to use for the underline element.
         */
@@ -885,7 +886,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "hoverUnderlineWidth", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "hoverUnderlineWidth", {
         /**
          * Gets or sets the width to use for the underline element when hovered.
         */
@@ -899,63 +900,63 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "underlineColor", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "underlineColor", {
         /**
          * Gets or sets the color to use for the underline element.
         */
         get: function () {
-            return brushToString(this.i.s7);
+            return brushToString(this.i.s8);
         },
         set: function (v) {
-            this.i.s7 = stringToBrush(v);
-            this._a("underlineColor", brushToString(this.i.s7));
+            this.i.s8 = stringToBrush(v);
+            this._a("underlineColor", brushToString(this.i.s8));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "underlineRippleColor", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "underlineRippleColor", {
         /**
          * Gets or sets the color to use for the underline ripple element.
         */
         get: function () {
-            return brushToString(this.i.s8);
+            return brushToString(this.i.s9);
         },
         set: function (v) {
-            this.i.s8 = stringToBrush(v);
-            this._a("underlineRippleColor", brushToString(this.i.s8));
+            this.i.s9 = stringToBrush(v);
+            this._a("underlineRippleColor", brushToString(this.i.s9));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "hoverUnderlineColor", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "hoverUnderlineColor", {
         /**
          * Gets or sets the color to use for the underline element.
         */
         get: function () {
-            return brushToString(this.i.ss);
+            return brushToString(this.i.st);
         },
         set: function (v) {
-            this.i.ss = stringToBrush(v);
-            this._a("hoverUnderlineColor", brushToString(this.i.ss));
+            this.i.st = stringToBrush(v);
+            this._a("hoverUnderlineColor", brushToString(this.i.st));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "focusUnderlineColor", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "focusUnderlineColor", {
         /**
          * Gets or sets the color to use for the underline element.
         */
         get: function () {
-            return brushToString(this.i.sr);
+            return brushToString(this.i.ss);
         },
         set: function (v) {
-            this.i.sr = stringToBrush(v);
-            this._a("focusUnderlineColor", brushToString(this.i.sr));
+            this.i.ss = stringToBrush(v);
+            this._a("focusUnderlineColor", brushToString(this.i.ss));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "underlineOpacity", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "underlineOpacity", {
         /**
          * Gets or sets the color to use for the underline element.
         */
@@ -969,7 +970,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "hoverUnderlineOpacity", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "hoverUnderlineOpacity", {
         /**
          * Gets or sets the color to use for the underline element.
         */
@@ -983,7 +984,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "focusUnderlineOpacity", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "focusUnderlineOpacity", {
         /**
          * Gets or sets the color to use for the underline element.
         */
@@ -997,7 +998,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "focusUnderlineRippleOpacity", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "focusUnderlineRippleOpacity", {
         /**
          * Gets or sets the opacity to use for the underline ripple element when focused.
         */
@@ -1011,7 +1012,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "underlineRippleOpacity", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "underlineRippleOpacity", {
         /**
          * Gets or sets the opacity to use for the underline ripple element.
         */
@@ -1025,21 +1026,21 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "backgroundColor", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "backgroundColor", {
         /**
          * Gets or sets the background color to use for the input group.
         */
         get: function () {
-            return brushToString(this.i.oy);
+            return brushToString(this.i.oz);
         },
         set: function (v) {
-            this.i.oy = stringToBrush(v);
-            this._a("backgroundColor", brushToString(this.i.oy));
+            this.i.oz = stringToBrush(v);
+            this._a("backgroundColor", brushToString(this.i.oz));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "lineTypeBorderWidth", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "lineTypeBorderWidth", {
         /**
          * Gets or sets the border width to use for the border of the item group when using type line.
         */
@@ -1053,7 +1054,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "lineTypeFocusBorderWidth", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "lineTypeFocusBorderWidth", {
         /**
          * Gets or sets the border width to use for the border of the item group when focused when type is line.
         */
@@ -1067,151 +1068,151 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "lineTypeFocusBorderColor", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "lineTypeFocusBorderColor", {
         /**
          * Gets or sets the focus color to use the border of the input group when type is line.
         */
         get: function () {
-            return brushToString(this.i.sv);
+            return brushToString(this.i.sw);
         },
         set: function (v) {
-            this.i.sv = stringToBrush(v);
-            this._a("lineTypeFocusBorderColor", brushToString(this.i.sv));
+            this.i.sw = stringToBrush(v);
+            this._a("lineTypeFocusBorderColor", brushToString(this.i.sw));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "lineTypeBorderColor", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "lineTypeBorderColor", {
         /**
          * Gets or sets the color to use the border of the input group when type is line.
         */
         get: function () {
-            return brushToString(this.i.su);
+            return brushToString(this.i.sv);
         },
         set: function (v) {
-            this.i.su = stringToBrush(v);
-            this._a("lineTypeBorderColor", brushToString(this.i.su));
+            this.i.sv = stringToBrush(v);
+            this._a("lineTypeBorderColor", brushToString(this.i.sv));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "lineTypeCornerRadiusBottomRight", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "lineTypeCornerRadiusBottomRight", {
         get: function () {
-            return this.i.nj ? this.i.nj.b : NaN;
+            return this.i.nk ? this.i.nk.b : NaN;
         },
         set: function (v) {
             this.ensureLineTypeCornerRadius();
-            this.i.nj.b = +v;
-            this._a("lineTypeCornerRadiusBottomRight", this.i.nj.b);
-            this.i.nj = this.i.nj;
+            this.i.nk.b = +v;
+            this._a("lineTypeCornerRadiusBottomRight", this.i.nk.b);
+            this.i.nk = this.i.nk;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "lineTypeCornerRadiusBottomLeft", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "lineTypeCornerRadiusBottomLeft", {
         get: function () {
-            return this.i.nj ? this.i.nj.a : NaN;
+            return this.i.nk ? this.i.nk.a : NaN;
         },
         set: function (v) {
             this.ensureLineTypeCornerRadius();
-            this.i.nj.a = +v;
-            this._a("lineTypeCornerRadiusBottomLeft", this.i.nj.a);
-            this.i.nj = this.i.nj;
+            this.i.nk.a = +v;
+            this._a("lineTypeCornerRadiusBottomLeft", this.i.nk.a);
+            this.i.nk = this.i.nk;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "lineTypeCornerRadiusTopLeft", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "lineTypeCornerRadiusTopLeft", {
         get: function () {
-            return this.i.nj ? this.i.nj.c : NaN;
+            return this.i.nk ? this.i.nk.c : NaN;
         },
         set: function (v) {
             this.ensureLineTypeCornerRadius();
-            this.i.nj.c = +v;
-            this._a("lineTypeCornerRadiusTopLeft", this.i.nj.c);
-            this.i.nj = this.i.nj;
+            this.i.nk.c = +v;
+            this._a("lineTypeCornerRadiusTopLeft", this.i.nk.c);
+            this.i.nk = this.i.nk;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "lineTypeCornerRadiusTopRight", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "lineTypeCornerRadiusTopRight", {
         get: function () {
-            return this.i.nj ? this.i.nj.d : NaN;
+            return this.i.nk ? this.i.nk.d : NaN;
         },
         set: function (v) {
             this.ensureLineTypeCornerRadius();
-            this.i.nj.d = +v;
-            this._a("lineTypeCornerRadiusTopRight", this.i.nj.d);
-            this.i.nj = this.i.nj;
+            this.i.nk.d = +v;
+            this._a("lineTypeCornerRadiusTopRight", this.i.nk.d);
+            this.i.nk = this.i.nk;
         },
         enumerable: true,
         configurable: true
     });
-    IgcInputGroupComponent.prototype.ensureLineTypeCornerRadius = function () {
-        if (this.i.nj) {
+    IgcXInputGroupComponent.prototype.ensureLineTypeCornerRadius = function () {
+        if (this.i.nk) {
             return;
         }
-        this.i.nj = new CornerRadius(2);
+        this.i.nk = new CornerRadius(2);
     };
-    Object.defineProperty(IgcInputGroupComponent.prototype, "lineTypeContentPaddingBottom", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "lineTypeContentPaddingBottom", {
         get: function () {
-            return this.i.tz ? this.i.tz.b : NaN;
+            return this.i.t0 ? this.i.t0.b : NaN;
         },
         set: function (v) {
             this.ensureLineTypeContentPadding();
-            this.i.tz.b = +v;
-            this._a("lineTypeContentPaddingBottom", this.i.tz.b);
-            this.i.tz = this.i.tz;
+            this.i.t0.b = +v;
+            this._a("lineTypeContentPaddingBottom", this.i.t0.b);
+            this.i.t0 = this.i.t0;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "lineTypeContentPaddingLeft", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "lineTypeContentPaddingLeft", {
         get: function () {
-            return this.i.tz ? this.i.tz.c : NaN;
+            return this.i.t0 ? this.i.t0.c : NaN;
         },
         set: function (v) {
             this.ensureLineTypeContentPadding();
-            this.i.tz.c = +v;
-            this._a("lineTypeContentPaddingLeft", this.i.tz.c);
-            this.i.tz = this.i.tz;
+            this.i.t0.c = +v;
+            this._a("lineTypeContentPaddingLeft", this.i.t0.c);
+            this.i.t0 = this.i.t0;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "lineTypeContentPaddingRight", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "lineTypeContentPaddingRight", {
         get: function () {
-            return this.i.tz ? this.i.tz.d : NaN;
+            return this.i.t0 ? this.i.t0.d : NaN;
         },
         set: function (v) {
             this.ensureLineTypeContentPadding();
-            this.i.tz.d = +v;
-            this._a("lineTypeContentPaddingRight", this.i.tz.d);
-            this.i.tz = this.i.tz;
+            this.i.t0.d = +v;
+            this._a("lineTypeContentPaddingRight", this.i.t0.d);
+            this.i.t0 = this.i.t0;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "lineTypeContentPaddingTop", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "lineTypeContentPaddingTop", {
         get: function () {
-            return this.i.tz ? this.i.tz.e : NaN;
+            return this.i.t0 ? this.i.t0.e : NaN;
         },
         set: function (v) {
             this.ensureLineTypeContentPadding();
-            this.i.tz.e = +v;
-            this._a("lineTypeContentPaddingTop", this.i.tz.e);
-            this.i.tz = this.i.tz;
+            this.i.t0.e = +v;
+            this._a("lineTypeContentPaddingTop", this.i.t0.e);
+            this.i.t0 = this.i.t0;
         },
         enumerable: true,
         configurable: true
     });
-    IgcInputGroupComponent.prototype.ensureLineTypeContentPadding = function () {
-        if (this.i.tz) {
+    IgcXInputGroupComponent.prototype.ensureLineTypeContentPadding = function () {
+        if (this.i.t0) {
             return;
         }
-        this.i.tz = new Thickness(2);
+        this.i.t0 = new Thickness(2);
     };
-    Object.defineProperty(IgcInputGroupComponent.prototype, "lineTypeUnderlineWidth", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "lineTypeUnderlineWidth", {
         /**
          * Gets or sets the width to use for the underline element when type is line.
         */
@@ -1225,7 +1226,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "lineTypeUnderlineRippleWidth", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "lineTypeUnderlineRippleWidth", {
         /**
          * Gets or sets the width to use for the underline element when type is line.
         */
@@ -1239,7 +1240,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "lineTypeHoverUnderlineWidth", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "lineTypeHoverUnderlineWidth", {
         /**
          * Gets or sets the width to use for the underline element when hovered when type is line.
         */
@@ -1253,63 +1254,63 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "lineTypeUnderlineColor", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "lineTypeUnderlineColor", {
         /**
          * Gets or sets the color to use for the underline element when type is line.
         */
         get: function () {
-            return brushToString(this.i.sy);
+            return brushToString(this.i.sz);
         },
         set: function (v) {
-            this.i.sy = stringToBrush(v);
-            this._a("lineTypeUnderlineColor", brushToString(this.i.sy));
+            this.i.sz = stringToBrush(v);
+            this._a("lineTypeUnderlineColor", brushToString(this.i.sz));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "lineTypeUnderlineRippleColor", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "lineTypeUnderlineRippleColor", {
         /**
          * Gets or sets the color to use for the underline ripple element when type is line.
         */
         get: function () {
-            return brushToString(this.i.sz);
+            return brushToString(this.i.s0);
         },
         set: function (v) {
-            this.i.sz = stringToBrush(v);
-            this._a("lineTypeUnderlineRippleColor", brushToString(this.i.sz));
+            this.i.s0 = stringToBrush(v);
+            this._a("lineTypeUnderlineRippleColor", brushToString(this.i.s0));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "lineTypeHoverUnderlineColor", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "lineTypeHoverUnderlineColor", {
         /**
          * Gets or sets the color to use for the underline element when type is line.
         */
         get: function () {
-            return brushToString(this.i.sx);
+            return brushToString(this.i.sy);
         },
         set: function (v) {
-            this.i.sx = stringToBrush(v);
-            this._a("lineTypeHoverUnderlineColor", brushToString(this.i.sx));
+            this.i.sy = stringToBrush(v);
+            this._a("lineTypeHoverUnderlineColor", brushToString(this.i.sy));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "lineTypeFocusUnderlineColor", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "lineTypeFocusUnderlineColor", {
         /**
          * Gets or sets the color to use for the underline element when type is line.
         */
         get: function () {
-            return brushToString(this.i.sw);
+            return brushToString(this.i.sx);
         },
         set: function (v) {
-            this.i.sw = stringToBrush(v);
-            this._a("lineTypeFocusUnderlineColor", brushToString(this.i.sw));
+            this.i.sx = stringToBrush(v);
+            this._a("lineTypeFocusUnderlineColor", brushToString(this.i.sx));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "lineTypeUnderlineOpacity", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "lineTypeUnderlineOpacity", {
         /**
          * Gets or sets the color to use for the underline element when type is line.
         */
@@ -1323,7 +1324,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "lineTypeHoverUnderlineOpacity", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "lineTypeHoverUnderlineOpacity", {
         /**
          * Gets or sets the color to use for the underline element when type is line.
         */
@@ -1337,7 +1338,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "lineTypeFocusUnderlineOpacity", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "lineTypeFocusUnderlineOpacity", {
         /**
          * Gets or sets the color to use for the underline element when type is line.
         */
@@ -1351,7 +1352,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "lineTypeFocusUnderlineRippleOpacity", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "lineTypeFocusUnderlineRippleOpacity", {
         /**
          * Gets or sets the opacity to use for the underline ripple element when focused when type is line.
         */
@@ -1365,7 +1366,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "lineTypeUnderlineRippleOpacity", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "lineTypeUnderlineRippleOpacity", {
         /**
          * Gets or sets the opacity to use for the underline ripple element when type is line.
         */
@@ -1379,21 +1380,21 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "lineTypeBackgroundColor", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "lineTypeBackgroundColor", {
         /**
          * Gets or sets the background color to use for the input group when type is line.
         */
         get: function () {
-            return brushToString(this.i.st);
+            return brushToString(this.i.su);
         },
         set: function (v) {
-            this.i.st = stringToBrush(v);
-            this._a("lineTypeBackgroundColor", brushToString(this.i.st));
+            this.i.su = stringToBrush(v);
+            this._a("lineTypeBackgroundColor", brushToString(this.i.su));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "boxTypeBorderWidth", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "boxTypeBorderWidth", {
         /**
          * Gets or sets the border width to use for the border of the item group when using type line.
         */
@@ -1407,7 +1408,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "boxTypeFocusBorderWidth", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "boxTypeFocusBorderWidth", {
         /**
          * Gets or sets the border width to use for the border of the item group when focused when type is box.
         */
@@ -1421,151 +1422,151 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "boxTypeFocusBorderColor", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "boxTypeFocusBorderColor", {
         /**
          * Gets or sets the focus color to use the border of the input group when type is box.
         */
         get: function () {
-            return brushToString(this.i.o9);
+            return brushToString(this.i.pa);
         },
         set: function (v) {
-            this.i.o9 = stringToBrush(v);
-            this._a("boxTypeFocusBorderColor", brushToString(this.i.o9));
+            this.i.pa = stringToBrush(v);
+            this._a("boxTypeFocusBorderColor", brushToString(this.i.pa));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "boxTypeBorderColor", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "boxTypeBorderColor", {
         /**
          * Gets or sets the color to use the border of the input group when type is box.
         */
         get: function () {
-            return brushToString(this.i.o8);
+            return brushToString(this.i.o9);
         },
         set: function (v) {
-            this.i.o8 = stringToBrush(v);
-            this._a("boxTypeBorderColor", brushToString(this.i.o8));
+            this.i.o9 = stringToBrush(v);
+            this._a("boxTypeBorderColor", brushToString(this.i.o9));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "boxTypeCornerRadiusBottomRight", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "boxTypeCornerRadiusBottomRight", {
         get: function () {
-            return this.i.m1 ? this.i.m1.b : NaN;
+            return this.i.m2 ? this.i.m2.b : NaN;
         },
         set: function (v) {
             this.ensureBoxTypeCornerRadius();
-            this.i.m1.b = +v;
-            this._a("boxTypeCornerRadiusBottomRight", this.i.m1.b);
-            this.i.m1 = this.i.m1;
+            this.i.m2.b = +v;
+            this._a("boxTypeCornerRadiusBottomRight", this.i.m2.b);
+            this.i.m2 = this.i.m2;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "boxTypeCornerRadiusBottomLeft", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "boxTypeCornerRadiusBottomLeft", {
         get: function () {
-            return this.i.m1 ? this.i.m1.a : NaN;
+            return this.i.m2 ? this.i.m2.a : NaN;
         },
         set: function (v) {
             this.ensureBoxTypeCornerRadius();
-            this.i.m1.a = +v;
-            this._a("boxTypeCornerRadiusBottomLeft", this.i.m1.a);
-            this.i.m1 = this.i.m1;
+            this.i.m2.a = +v;
+            this._a("boxTypeCornerRadiusBottomLeft", this.i.m2.a);
+            this.i.m2 = this.i.m2;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "boxTypeCornerRadiusTopLeft", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "boxTypeCornerRadiusTopLeft", {
         get: function () {
-            return this.i.m1 ? this.i.m1.c : NaN;
+            return this.i.m2 ? this.i.m2.c : NaN;
         },
         set: function (v) {
             this.ensureBoxTypeCornerRadius();
-            this.i.m1.c = +v;
-            this._a("boxTypeCornerRadiusTopLeft", this.i.m1.c);
-            this.i.m1 = this.i.m1;
+            this.i.m2.c = +v;
+            this._a("boxTypeCornerRadiusTopLeft", this.i.m2.c);
+            this.i.m2 = this.i.m2;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "boxTypeCornerRadiusTopRight", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "boxTypeCornerRadiusTopRight", {
         get: function () {
-            return this.i.m1 ? this.i.m1.d : NaN;
+            return this.i.m2 ? this.i.m2.d : NaN;
         },
         set: function (v) {
             this.ensureBoxTypeCornerRadius();
-            this.i.m1.d = +v;
-            this._a("boxTypeCornerRadiusTopRight", this.i.m1.d);
-            this.i.m1 = this.i.m1;
+            this.i.m2.d = +v;
+            this._a("boxTypeCornerRadiusTopRight", this.i.m2.d);
+            this.i.m2 = this.i.m2;
         },
         enumerable: true,
         configurable: true
     });
-    IgcInputGroupComponent.prototype.ensureBoxTypeCornerRadius = function () {
-        if (this.i.m1) {
+    IgcXInputGroupComponent.prototype.ensureBoxTypeCornerRadius = function () {
+        if (this.i.m2) {
             return;
         }
-        this.i.m1 = new CornerRadius(2);
+        this.i.m2 = new CornerRadius(2);
     };
-    Object.defineProperty(IgcInputGroupComponent.prototype, "boxTypeContentPaddingBottom", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "boxTypeContentPaddingBottom", {
         get: function () {
-            return this.i.th ? this.i.th.b : NaN;
+            return this.i.ti ? this.i.ti.b : NaN;
         },
         set: function (v) {
             this.ensureBoxTypeContentPadding();
-            this.i.th.b = +v;
-            this._a("boxTypeContentPaddingBottom", this.i.th.b);
-            this.i.th = this.i.th;
+            this.i.ti.b = +v;
+            this._a("boxTypeContentPaddingBottom", this.i.ti.b);
+            this.i.ti = this.i.ti;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "boxTypeContentPaddingLeft", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "boxTypeContentPaddingLeft", {
         get: function () {
-            return this.i.th ? this.i.th.c : NaN;
+            return this.i.ti ? this.i.ti.c : NaN;
         },
         set: function (v) {
             this.ensureBoxTypeContentPadding();
-            this.i.th.c = +v;
-            this._a("boxTypeContentPaddingLeft", this.i.th.c);
-            this.i.th = this.i.th;
+            this.i.ti.c = +v;
+            this._a("boxTypeContentPaddingLeft", this.i.ti.c);
+            this.i.ti = this.i.ti;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "boxTypeContentPaddingRight", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "boxTypeContentPaddingRight", {
         get: function () {
-            return this.i.th ? this.i.th.d : NaN;
+            return this.i.ti ? this.i.ti.d : NaN;
         },
         set: function (v) {
             this.ensureBoxTypeContentPadding();
-            this.i.th.d = +v;
-            this._a("boxTypeContentPaddingRight", this.i.th.d);
-            this.i.th = this.i.th;
+            this.i.ti.d = +v;
+            this._a("boxTypeContentPaddingRight", this.i.ti.d);
+            this.i.ti = this.i.ti;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "boxTypeContentPaddingTop", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "boxTypeContentPaddingTop", {
         get: function () {
-            return this.i.th ? this.i.th.e : NaN;
+            return this.i.ti ? this.i.ti.e : NaN;
         },
         set: function (v) {
             this.ensureBoxTypeContentPadding();
-            this.i.th.e = +v;
-            this._a("boxTypeContentPaddingTop", this.i.th.e);
-            this.i.th = this.i.th;
+            this.i.ti.e = +v;
+            this._a("boxTypeContentPaddingTop", this.i.ti.e);
+            this.i.ti = this.i.ti;
         },
         enumerable: true,
         configurable: true
     });
-    IgcInputGroupComponent.prototype.ensureBoxTypeContentPadding = function () {
-        if (this.i.th) {
+    IgcXInputGroupComponent.prototype.ensureBoxTypeContentPadding = function () {
+        if (this.i.ti) {
             return;
         }
-        this.i.th = new Thickness(2);
+        this.i.ti = new Thickness(2);
     };
-    Object.defineProperty(IgcInputGroupComponent.prototype, "boxTypeUnderlineWidth", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "boxTypeUnderlineWidth", {
         /**
          * Gets or sets the width to use for the underline element when type is box.
         */
@@ -1579,7 +1580,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "boxTypeUnderlineRippleWidth", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "boxTypeUnderlineRippleWidth", {
         /**
          * Gets or sets the width to use for the underline element when type is box.
         */
@@ -1593,7 +1594,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "boxTypeHoverUnderlineWidth", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "boxTypeHoverUnderlineWidth", {
         /**
          * Gets or sets the width to use for the underline element when hovered when type is box.
         */
@@ -1607,63 +1608,63 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "boxTypeUnderlineColor", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "boxTypeUnderlineColor", {
         /**
          * Gets or sets the color to use for the underline element when type is box.
         */
         get: function () {
-            return brushToString(this.i.pc);
+            return brushToString(this.i.pd);
         },
         set: function (v) {
-            this.i.pc = stringToBrush(v);
-            this._a("boxTypeUnderlineColor", brushToString(this.i.pc));
+            this.i.pd = stringToBrush(v);
+            this._a("boxTypeUnderlineColor", brushToString(this.i.pd));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "boxTypeUnderlineRippleColor", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "boxTypeUnderlineRippleColor", {
         /**
          * Gets or sets the color to use for the underline ripple element when type is box.
         */
         get: function () {
-            return brushToString(this.i.pd);
+            return brushToString(this.i.pe);
         },
         set: function (v) {
-            this.i.pd = stringToBrush(v);
-            this._a("boxTypeUnderlineRippleColor", brushToString(this.i.pd));
+            this.i.pe = stringToBrush(v);
+            this._a("boxTypeUnderlineRippleColor", brushToString(this.i.pe));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "boxTypeHoverUnderlineColor", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "boxTypeHoverUnderlineColor", {
         /**
          * Gets or sets the color to use for the underline element when type is box.
         */
         get: function () {
-            return brushToString(this.i.pb);
+            return brushToString(this.i.pc);
         },
         set: function (v) {
-            this.i.pb = stringToBrush(v);
-            this._a("boxTypeHoverUnderlineColor", brushToString(this.i.pb));
+            this.i.pc = stringToBrush(v);
+            this._a("boxTypeHoverUnderlineColor", brushToString(this.i.pc));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "boxTypeFocusUnderlineColor", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "boxTypeFocusUnderlineColor", {
         /**
          * Gets or sets the color to use for the underline element when type is box.
         */
         get: function () {
-            return brushToString(this.i.pa);
+            return brushToString(this.i.pb);
         },
         set: function (v) {
-            this.i.pa = stringToBrush(v);
-            this._a("boxTypeFocusUnderlineColor", brushToString(this.i.pa));
+            this.i.pb = stringToBrush(v);
+            this._a("boxTypeFocusUnderlineColor", brushToString(this.i.pb));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "boxTypeUnderlineOpacity", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "boxTypeUnderlineOpacity", {
         /**
          * Gets or sets the color to use for the underline element when type is box.
         */
@@ -1677,7 +1678,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "boxTypeHoverUnderlineOpacity", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "boxTypeHoverUnderlineOpacity", {
         /**
          * Gets or sets the color to use for the underline element when type is box.
         */
@@ -1691,7 +1692,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "boxTypeFocusUnderlineOpacity", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "boxTypeFocusUnderlineOpacity", {
         /**
          * Gets or sets the color to use for the underline element when type is box.
         */
@@ -1705,7 +1706,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "boxTypeFocusUnderlineRippleOpacity", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "boxTypeFocusUnderlineRippleOpacity", {
         /**
          * Gets or sets the opacity to use for the underline ripple element when focused when type is box.
         */
@@ -1719,7 +1720,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "boxTypeUnderlineRippleOpacity", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "boxTypeUnderlineRippleOpacity", {
         /**
          * Gets or sets the opacity to use for the underline ripple element when type is box.
         */
@@ -1733,21 +1734,21 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "boxTypeBackgroundColor", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "boxTypeBackgroundColor", {
         /**
          * Gets or sets the background color to use for the input group when type is box.
         */
         get: function () {
-            return brushToString(this.i.o7);
+            return brushToString(this.i.o8);
         },
         set: function (v) {
-            this.i.o7 = stringToBrush(v);
-            this._a("boxTypeBackgroundColor", brushToString(this.i.o7));
+            this.i.o8 = stringToBrush(v);
+            this._a("boxTypeBackgroundColor", brushToString(this.i.o8));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeBorderWidth", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "borderTypeBorderWidth", {
         /**
          * Gets or sets the border width to use for the border of the item group when using type line.
         */
@@ -1761,7 +1762,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeFocusBorderWidth", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "borderTypeFocusBorderWidth", {
         /**
          * Gets or sets the border width to use for the border of the item group when focused when type is border.
         */
@@ -1775,151 +1776,151 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeFocusBorderColor", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "borderTypeFocusBorderColor", {
         /**
          * Gets or sets the focus color to use the border of the input group when type is border.
         */
         get: function () {
-            return brushToString(this.i.o2);
+            return brushToString(this.i.o3);
         },
         set: function (v) {
-            this.i.o2 = stringToBrush(v);
-            this._a("borderTypeFocusBorderColor", brushToString(this.i.o2));
+            this.i.o3 = stringToBrush(v);
+            this._a("borderTypeFocusBorderColor", brushToString(this.i.o3));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeBorderColor", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "borderTypeBorderColor", {
         /**
          * Gets or sets the color to use the border of the input group when type is border.
         */
         get: function () {
-            return brushToString(this.i.o1);
+            return brushToString(this.i.o2);
         },
         set: function (v) {
-            this.i.o1 = stringToBrush(v);
-            this._a("borderTypeBorderColor", brushToString(this.i.o1));
+            this.i.o2 = stringToBrush(v);
+            this._a("borderTypeBorderColor", brushToString(this.i.o2));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeCornerRadiusBottomRight", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "borderTypeCornerRadiusBottomRight", {
         get: function () {
-            return this.i.m0 ? this.i.m0.b : NaN;
+            return this.i.m1 ? this.i.m1.b : NaN;
         },
         set: function (v) {
             this.ensureBorderTypeCornerRadius();
-            this.i.m0.b = +v;
-            this._a("borderTypeCornerRadiusBottomRight", this.i.m0.b);
-            this.i.m0 = this.i.m0;
+            this.i.m1.b = +v;
+            this._a("borderTypeCornerRadiusBottomRight", this.i.m1.b);
+            this.i.m1 = this.i.m1;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeCornerRadiusBottomLeft", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "borderTypeCornerRadiusBottomLeft", {
         get: function () {
-            return this.i.m0 ? this.i.m0.a : NaN;
+            return this.i.m1 ? this.i.m1.a : NaN;
         },
         set: function (v) {
             this.ensureBorderTypeCornerRadius();
-            this.i.m0.a = +v;
-            this._a("borderTypeCornerRadiusBottomLeft", this.i.m0.a);
-            this.i.m0 = this.i.m0;
+            this.i.m1.a = +v;
+            this._a("borderTypeCornerRadiusBottomLeft", this.i.m1.a);
+            this.i.m1 = this.i.m1;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeCornerRadiusTopLeft", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "borderTypeCornerRadiusTopLeft", {
         get: function () {
-            return this.i.m0 ? this.i.m0.c : NaN;
+            return this.i.m1 ? this.i.m1.c : NaN;
         },
         set: function (v) {
             this.ensureBorderTypeCornerRadius();
-            this.i.m0.c = +v;
-            this._a("borderTypeCornerRadiusTopLeft", this.i.m0.c);
-            this.i.m0 = this.i.m0;
+            this.i.m1.c = +v;
+            this._a("borderTypeCornerRadiusTopLeft", this.i.m1.c);
+            this.i.m1 = this.i.m1;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeCornerRadiusTopRight", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "borderTypeCornerRadiusTopRight", {
         get: function () {
-            return this.i.m0 ? this.i.m0.d : NaN;
+            return this.i.m1 ? this.i.m1.d : NaN;
         },
         set: function (v) {
             this.ensureBorderTypeCornerRadius();
-            this.i.m0.d = +v;
-            this._a("borderTypeCornerRadiusTopRight", this.i.m0.d);
-            this.i.m0 = this.i.m0;
+            this.i.m1.d = +v;
+            this._a("borderTypeCornerRadiusTopRight", this.i.m1.d);
+            this.i.m1 = this.i.m1;
         },
         enumerable: true,
         configurable: true
     });
-    IgcInputGroupComponent.prototype.ensureBorderTypeCornerRadius = function () {
-        if (this.i.m0) {
+    IgcXInputGroupComponent.prototype.ensureBorderTypeCornerRadius = function () {
+        if (this.i.m1) {
             return;
         }
-        this.i.m0 = new CornerRadius(2);
+        this.i.m1 = new CornerRadius(2);
     };
-    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeContentPaddingBottom", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "borderTypeContentPaddingBottom", {
         get: function () {
-            return this.i.tg ? this.i.tg.b : NaN;
+            return this.i.th ? this.i.th.b : NaN;
         },
         set: function (v) {
             this.ensureBorderTypeContentPadding();
-            this.i.tg.b = +v;
-            this._a("borderTypeContentPaddingBottom", this.i.tg.b);
-            this.i.tg = this.i.tg;
+            this.i.th.b = +v;
+            this._a("borderTypeContentPaddingBottom", this.i.th.b);
+            this.i.th = this.i.th;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeContentPaddingLeft", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "borderTypeContentPaddingLeft", {
         get: function () {
-            return this.i.tg ? this.i.tg.c : NaN;
+            return this.i.th ? this.i.th.c : NaN;
         },
         set: function (v) {
             this.ensureBorderTypeContentPadding();
-            this.i.tg.c = +v;
-            this._a("borderTypeContentPaddingLeft", this.i.tg.c);
-            this.i.tg = this.i.tg;
+            this.i.th.c = +v;
+            this._a("borderTypeContentPaddingLeft", this.i.th.c);
+            this.i.th = this.i.th;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeContentPaddingRight", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "borderTypeContentPaddingRight", {
         get: function () {
-            return this.i.tg ? this.i.tg.d : NaN;
+            return this.i.th ? this.i.th.d : NaN;
         },
         set: function (v) {
             this.ensureBorderTypeContentPadding();
-            this.i.tg.d = +v;
-            this._a("borderTypeContentPaddingRight", this.i.tg.d);
-            this.i.tg = this.i.tg;
+            this.i.th.d = +v;
+            this._a("borderTypeContentPaddingRight", this.i.th.d);
+            this.i.th = this.i.th;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeContentPaddingTop", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "borderTypeContentPaddingTop", {
         get: function () {
-            return this.i.tg ? this.i.tg.e : NaN;
+            return this.i.th ? this.i.th.e : NaN;
         },
         set: function (v) {
             this.ensureBorderTypeContentPadding();
-            this.i.tg.e = +v;
-            this._a("borderTypeContentPaddingTop", this.i.tg.e);
-            this.i.tg = this.i.tg;
+            this.i.th.e = +v;
+            this._a("borderTypeContentPaddingTop", this.i.th.e);
+            this.i.th = this.i.th;
         },
         enumerable: true,
         configurable: true
     });
-    IgcInputGroupComponent.prototype.ensureBorderTypeContentPadding = function () {
-        if (this.i.tg) {
+    IgcXInputGroupComponent.prototype.ensureBorderTypeContentPadding = function () {
+        if (this.i.th) {
             return;
         }
-        this.i.tg = new Thickness(2);
+        this.i.th = new Thickness(2);
     };
-    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeUnderlineWidth", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "borderTypeUnderlineWidth", {
         /**
          * Gets or sets the width to use for the underline element when type is border.
         */
@@ -1933,7 +1934,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeUnderlineRippleWidth", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "borderTypeUnderlineRippleWidth", {
         /**
          * Gets or sets the width to use for the underline element when type is border.
         */
@@ -1947,7 +1948,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeHoverUnderlineWidth", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "borderTypeHoverUnderlineWidth", {
         /**
          * Gets or sets the width to use for the underline element when hovered when type is border.
         */
@@ -1961,63 +1962,63 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeUnderlineColor", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "borderTypeUnderlineColor", {
         /**
          * Gets or sets the color to use for the underline element when type is border.
         */
         get: function () {
-            return brushToString(this.i.o5);
+            return brushToString(this.i.o6);
         },
         set: function (v) {
-            this.i.o5 = stringToBrush(v);
-            this._a("borderTypeUnderlineColor", brushToString(this.i.o5));
+            this.i.o6 = stringToBrush(v);
+            this._a("borderTypeUnderlineColor", brushToString(this.i.o6));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeUnderlineRippleColor", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "borderTypeUnderlineRippleColor", {
         /**
          * Gets or sets the color to use for the underline ripple element when type is border.
         */
         get: function () {
-            return brushToString(this.i.o6);
+            return brushToString(this.i.o7);
         },
         set: function (v) {
-            this.i.o6 = stringToBrush(v);
-            this._a("borderTypeUnderlineRippleColor", brushToString(this.i.o6));
+            this.i.o7 = stringToBrush(v);
+            this._a("borderTypeUnderlineRippleColor", brushToString(this.i.o7));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeHoverUnderlineColor", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "borderTypeHoverUnderlineColor", {
         /**
          * Gets or sets the color to use for the underline element when type is border.
         */
         get: function () {
-            return brushToString(this.i.o4);
+            return brushToString(this.i.o5);
         },
         set: function (v) {
-            this.i.o4 = stringToBrush(v);
-            this._a("borderTypeHoverUnderlineColor", brushToString(this.i.o4));
+            this.i.o5 = stringToBrush(v);
+            this._a("borderTypeHoverUnderlineColor", brushToString(this.i.o5));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeFocusUnderlineColor", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "borderTypeFocusUnderlineColor", {
         /**
          * Gets or sets the color to use for the underline element when type is border.
         */
         get: function () {
-            return brushToString(this.i.o3);
+            return brushToString(this.i.o4);
         },
         set: function (v) {
-            this.i.o3 = stringToBrush(v);
-            this._a("borderTypeFocusUnderlineColor", brushToString(this.i.o3));
+            this.i.o4 = stringToBrush(v);
+            this._a("borderTypeFocusUnderlineColor", brushToString(this.i.o4));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeUnderlineOpacity", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "borderTypeUnderlineOpacity", {
         /**
          * Gets or sets the color to use for the underline element when type is border.
         */
@@ -2031,7 +2032,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeHoverUnderlineOpacity", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "borderTypeHoverUnderlineOpacity", {
         /**
          * Gets or sets the color to use for the underline element when type is border.
         */
@@ -2045,7 +2046,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeFocusUnderlineOpacity", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "borderTypeFocusUnderlineOpacity", {
         /**
          * Gets or sets the color to use for the underline element when type is border.
         */
@@ -2059,7 +2060,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeFocusUnderlineRippleOpacity", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "borderTypeFocusUnderlineRippleOpacity", {
         /**
          * Gets or sets the opacity to use for the underline ripple element when focused when type is border.
         */
@@ -2073,7 +2074,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeUnderlineRippleOpacity", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "borderTypeUnderlineRippleOpacity", {
         /**
          * Gets or sets the opacity to use for the underline ripple element when type is border.
         */
@@ -2087,21 +2088,21 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "borderTypeBackgroundColor", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "borderTypeBackgroundColor", {
         /**
          * Gets or sets the background color to use for the input group when type is border.
         */
         get: function () {
-            return brushToString(this.i.o0);
+            return brushToString(this.i.o1);
         },
         set: function (v) {
-            this.i.o0 = stringToBrush(v);
-            this._a("borderTypeBackgroundColor", brushToString(this.i.o0));
+            this.i.o1 = stringToBrush(v);
+            this._a("borderTypeBackgroundColor", brushToString(this.i.o1));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeBorderWidth", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "searchTypeBorderWidth", {
         /**
          * Gets or sets the search width to use for the border of the item group when using type line.
         */
@@ -2115,7 +2116,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeFocusBorderWidth", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "searchTypeFocusBorderWidth", {
         /**
          * Gets or sets the search width to use for the border of the item group when focused when type is search.
         */
@@ -2129,151 +2130,151 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeFocusBorderColor", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "searchTypeFocusBorderColor", {
         /**
          * Gets or sets the focus color to use the search of the input group when type is search.
         */
         get: function () {
-            return brushToString(this.i.s2);
+            return brushToString(this.i.s3);
         },
         set: function (v) {
-            this.i.s2 = stringToBrush(v);
-            this._a("searchTypeFocusBorderColor", brushToString(this.i.s2));
+            this.i.s3 = stringToBrush(v);
+            this._a("searchTypeFocusBorderColor", brushToString(this.i.s3));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeBorderColor", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "searchTypeBorderColor", {
         /**
          * Gets or sets the color to use the search of the input group when type is search.
         */
         get: function () {
-            return brushToString(this.i.s1);
+            return brushToString(this.i.s2);
         },
         set: function (v) {
-            this.i.s1 = stringToBrush(v);
-            this._a("searchTypeBorderColor", brushToString(this.i.s1));
+            this.i.s2 = stringToBrush(v);
+            this._a("searchTypeBorderColor", brushToString(this.i.s2));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeCornerRadiusBottomRight", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "searchTypeCornerRadiusBottomRight", {
         get: function () {
-            return this.i.nk ? this.i.nk.b : NaN;
+            return this.i.nl ? this.i.nl.b : NaN;
         },
         set: function (v) {
             this.ensureSearchTypeCornerRadius();
-            this.i.nk.b = +v;
-            this._a("searchTypeCornerRadiusBottomRight", this.i.nk.b);
-            this.i.nk = this.i.nk;
+            this.i.nl.b = +v;
+            this._a("searchTypeCornerRadiusBottomRight", this.i.nl.b);
+            this.i.nl = this.i.nl;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeCornerRadiusBottomLeft", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "searchTypeCornerRadiusBottomLeft", {
         get: function () {
-            return this.i.nk ? this.i.nk.a : NaN;
+            return this.i.nl ? this.i.nl.a : NaN;
         },
         set: function (v) {
             this.ensureSearchTypeCornerRadius();
-            this.i.nk.a = +v;
-            this._a("searchTypeCornerRadiusBottomLeft", this.i.nk.a);
-            this.i.nk = this.i.nk;
+            this.i.nl.a = +v;
+            this._a("searchTypeCornerRadiusBottomLeft", this.i.nl.a);
+            this.i.nl = this.i.nl;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeCornerRadiusTopLeft", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "searchTypeCornerRadiusTopLeft", {
         get: function () {
-            return this.i.nk ? this.i.nk.c : NaN;
+            return this.i.nl ? this.i.nl.c : NaN;
         },
         set: function (v) {
             this.ensureSearchTypeCornerRadius();
-            this.i.nk.c = +v;
-            this._a("searchTypeCornerRadiusTopLeft", this.i.nk.c);
-            this.i.nk = this.i.nk;
+            this.i.nl.c = +v;
+            this._a("searchTypeCornerRadiusTopLeft", this.i.nl.c);
+            this.i.nl = this.i.nl;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeCornerRadiusTopRight", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "searchTypeCornerRadiusTopRight", {
         get: function () {
-            return this.i.nk ? this.i.nk.d : NaN;
+            return this.i.nl ? this.i.nl.d : NaN;
         },
         set: function (v) {
             this.ensureSearchTypeCornerRadius();
-            this.i.nk.d = +v;
-            this._a("searchTypeCornerRadiusTopRight", this.i.nk.d);
-            this.i.nk = this.i.nk;
+            this.i.nl.d = +v;
+            this._a("searchTypeCornerRadiusTopRight", this.i.nl.d);
+            this.i.nl = this.i.nl;
         },
         enumerable: true,
         configurable: true
     });
-    IgcInputGroupComponent.prototype.ensureSearchTypeCornerRadius = function () {
-        if (this.i.nk) {
+    IgcXInputGroupComponent.prototype.ensureSearchTypeCornerRadius = function () {
+        if (this.i.nl) {
             return;
         }
-        this.i.nk = new CornerRadius(2);
+        this.i.nl = new CornerRadius(2);
     };
-    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeContentPaddingBottom", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "searchTypeContentPaddingBottom", {
         get: function () {
-            return this.i.t0 ? this.i.t0.b : NaN;
+            return this.i.t1 ? this.i.t1.b : NaN;
         },
         set: function (v) {
             this.ensureSearchTypeContentPadding();
-            this.i.t0.b = +v;
-            this._a("searchTypeContentPaddingBottom", this.i.t0.b);
-            this.i.t0 = this.i.t0;
+            this.i.t1.b = +v;
+            this._a("searchTypeContentPaddingBottom", this.i.t1.b);
+            this.i.t1 = this.i.t1;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeContentPaddingLeft", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "searchTypeContentPaddingLeft", {
         get: function () {
-            return this.i.t0 ? this.i.t0.c : NaN;
+            return this.i.t1 ? this.i.t1.c : NaN;
         },
         set: function (v) {
             this.ensureSearchTypeContentPadding();
-            this.i.t0.c = +v;
-            this._a("searchTypeContentPaddingLeft", this.i.t0.c);
-            this.i.t0 = this.i.t0;
+            this.i.t1.c = +v;
+            this._a("searchTypeContentPaddingLeft", this.i.t1.c);
+            this.i.t1 = this.i.t1;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeContentPaddingRight", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "searchTypeContentPaddingRight", {
         get: function () {
-            return this.i.t0 ? this.i.t0.d : NaN;
+            return this.i.t1 ? this.i.t1.d : NaN;
         },
         set: function (v) {
             this.ensureSearchTypeContentPadding();
-            this.i.t0.d = +v;
-            this._a("searchTypeContentPaddingRight", this.i.t0.d);
-            this.i.t0 = this.i.t0;
+            this.i.t1.d = +v;
+            this._a("searchTypeContentPaddingRight", this.i.t1.d);
+            this.i.t1 = this.i.t1;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeContentPaddingTop", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "searchTypeContentPaddingTop", {
         get: function () {
-            return this.i.t0 ? this.i.t0.e : NaN;
+            return this.i.t1 ? this.i.t1.e : NaN;
         },
         set: function (v) {
             this.ensureSearchTypeContentPadding();
-            this.i.t0.e = +v;
-            this._a("searchTypeContentPaddingTop", this.i.t0.e);
-            this.i.t0 = this.i.t0;
+            this.i.t1.e = +v;
+            this._a("searchTypeContentPaddingTop", this.i.t1.e);
+            this.i.t1 = this.i.t1;
         },
         enumerable: true,
         configurable: true
     });
-    IgcInputGroupComponent.prototype.ensureSearchTypeContentPadding = function () {
-        if (this.i.t0) {
+    IgcXInputGroupComponent.prototype.ensureSearchTypeContentPadding = function () {
+        if (this.i.t1) {
             return;
         }
-        this.i.t0 = new Thickness(2);
+        this.i.t1 = new Thickness(2);
     };
-    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeUnderlineWidth", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "searchTypeUnderlineWidth", {
         /**
          * Gets or sets the width to use for the underline element when type is search.
         */
@@ -2287,7 +2288,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeUnderlineRippleWidth", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "searchTypeUnderlineRippleWidth", {
         /**
          * Gets or sets the width to use for the underline element when type is search.
         */
@@ -2301,7 +2302,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeHoverUnderlineWidth", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "searchTypeHoverUnderlineWidth", {
         /**
          * Gets or sets the width to use for the underline element when hovered when type is search.
         */
@@ -2315,63 +2316,63 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeUnderlineColor", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "searchTypeUnderlineColor", {
         /**
          * Gets or sets the color to use for the underline element when type is search.
         */
         get: function () {
-            return brushToString(this.i.s5);
+            return brushToString(this.i.s6);
         },
         set: function (v) {
-            this.i.s5 = stringToBrush(v);
-            this._a("searchTypeUnderlineColor", brushToString(this.i.s5));
+            this.i.s6 = stringToBrush(v);
+            this._a("searchTypeUnderlineColor", brushToString(this.i.s6));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeUnderlineRippleColor", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "searchTypeUnderlineRippleColor", {
         /**
          * Gets or sets the color to use for the underline ripple element when type is search.
         */
         get: function () {
-            return brushToString(this.i.s6);
+            return brushToString(this.i.s7);
         },
         set: function (v) {
-            this.i.s6 = stringToBrush(v);
-            this._a("searchTypeUnderlineRippleColor", brushToString(this.i.s6));
+            this.i.s7 = stringToBrush(v);
+            this._a("searchTypeUnderlineRippleColor", brushToString(this.i.s7));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeHoverUnderlineColor", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "searchTypeHoverUnderlineColor", {
         /**
          * Gets or sets the color to use for the underline element when type is search.
         */
         get: function () {
-            return brushToString(this.i.s4);
+            return brushToString(this.i.s5);
         },
         set: function (v) {
-            this.i.s4 = stringToBrush(v);
-            this._a("searchTypeHoverUnderlineColor", brushToString(this.i.s4));
+            this.i.s5 = stringToBrush(v);
+            this._a("searchTypeHoverUnderlineColor", brushToString(this.i.s5));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeFocusUnderlineColor", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "searchTypeFocusUnderlineColor", {
         /**
          * Gets or sets the color to use for the underline element when type is search.
         */
         get: function () {
-            return brushToString(this.i.s3);
+            return brushToString(this.i.s4);
         },
         set: function (v) {
-            this.i.s3 = stringToBrush(v);
-            this._a("searchTypeFocusUnderlineColor", brushToString(this.i.s3));
+            this.i.s4 = stringToBrush(v);
+            this._a("searchTypeFocusUnderlineColor", brushToString(this.i.s4));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeUnderlineOpacity", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "searchTypeUnderlineOpacity", {
         /**
          * Gets or sets the color to use for the underline element when type is search.
         */
@@ -2385,7 +2386,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeHoverUnderlineOpacity", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "searchTypeHoverUnderlineOpacity", {
         /**
          * Gets or sets the color to use for the underline element when type is search.
         */
@@ -2399,7 +2400,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeFocusUnderlineOpacity", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "searchTypeFocusUnderlineOpacity", {
         /**
          * Gets or sets the color to use for the underline element when type is search.
         */
@@ -2413,7 +2414,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeFocusUnderlineRippleOpacity", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "searchTypeFocusUnderlineRippleOpacity", {
         /**
          * Gets or sets the opacity to use for the underline ripple element when focused when type is search.
         */
@@ -2427,7 +2428,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeUnderlineRippleOpacity", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "searchTypeUnderlineRippleOpacity", {
         /**
          * Gets or sets the opacity to use for the underline ripple element when type is search.
         */
@@ -2441,21 +2442,21 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "searchTypeBackgroundColor", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "searchTypeBackgroundColor", {
         /**
          * Gets or sets the background color to use for the input group when type is search.
         */
         get: function () {
-            return brushToString(this.i.s0);
+            return brushToString(this.i.s1);
         },
         set: function (v) {
-            this.i.s0 = stringToBrush(v);
-            this._a("searchTypeBackgroundColor", brushToString(this.i.s0));
+            this.i.s1 = stringToBrush(v);
+            this._a("searchTypeBackgroundColor", brushToString(this.i.s1));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "isExpanded", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "isExpanded", {
         /**
          * Gets or sets whether the input group is expanded or not.
         */
@@ -2469,7 +2470,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "isHovered", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "isHovered", {
         /**
          * Gets or sets whether the input group is hovered or not.
         */
@@ -2483,7 +2484,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "isFocused", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "isFocused", {
         /**
          * Gets or sets whether the input group is hovered or not.
         */
@@ -2497,7 +2498,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "actualIsExpanded", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "actualIsExpanded", {
         /**
          * Gets or sets whether the input group is expanded or not.
         */
@@ -2511,21 +2512,21 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "focusBorderColor", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "focusBorderColor", {
         /**
          * Gets or sets the color to use the hovered background of the inputs in the group.
         */
         get: function () {
-            return brushToString(this.i.sq);
+            return brushToString(this.i.sr);
         },
         set: function (v) {
-            this.i.sq = stringToBrush(v);
-            this._a("focusBorderColor", brushToString(this.i.sq));
+            this.i.sr = stringToBrush(v);
+            this._a("focusBorderColor", brushToString(this.i.sr));
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "id", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "id", {
         /**
          * Gets or sets the id to use for the checkbox.
         */
@@ -2538,7 +2539,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(IgcInputGroupComponent.prototype, "disabled", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "disabled", {
         /**
          * Gets or sets whether the checkbox is disabled.
         */
@@ -2552,25 +2553,25 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    IgcInputGroupComponent.prototype.findByName = function (name) {
+    IgcXInputGroupComponent.prototype.findByName = function (name) {
         if (this.inputs != null && this.inputs.findByName && this.inputs.findByName(name)) {
             return this.inputs.findByName(name);
         }
         return null;
     };
-    Object.defineProperty(IgcInputGroupComponent.prototype, "hasUserValues", {
+    Object.defineProperty(IgcXInputGroupComponent.prototype, "hasUserValues", {
         get: function () {
             return this._hasUserValues;
         },
         enumerable: true,
         configurable: true
     });
-    IgcInputGroupComponent.prototype.__m = function (propertyName) {
+    IgcXInputGroupComponent.prototype.__m = function (propertyName) {
         if (!this._inStyling) {
             this._hasUserValues.add(propertyName);
         }
     };
-    IgcInputGroupComponent.prototype._styling = function (container, component, parent) {
+    IgcXInputGroupComponent.prototype._styling = function (container, component, parent) {
         if (this._inStyling) {
             return;
         }
@@ -2582,7 +2583,7 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         if (typeName.indexOf("Xam") === 0) {
             typeName = typeName.substring(3);
         }
-        genericPrefix = toSpinal("InputGroupComponent");
+        genericPrefix = toSpinal("XInputGroupComponent");
         var additionalPrefixes = [];
         var prefix = toSpinal(typeName);
         additionalPrefixes.push(prefix + "-");
@@ -2615,17 +2616,17 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         }
         this._inStyling = false;
     };
-    IgcInputGroupComponent.prototype.onDetachedFromUI = function () {
+    IgcXInputGroupComponent.prototype.onDetachedFromUI = function () {
         this.i.onDetachedFromUI();
     };
-    IgcInputGroupComponent.prototype.onAttachedToUI = function () {
+    IgcXInputGroupComponent.prototype.onAttachedToUI = function () {
         this.i.onAttachedToUI();
     };
     /**
      * Exports visual information about the current state of the grid.
     
     */
-    IgcInputGroupComponent.prototype.exportVisualModel = function () {
+    IgcXInputGroupComponent.prototype.exportVisualModel = function () {
         var iv = this.i.ia();
         return (iv);
     };
@@ -2633,14 +2634,14 @@ var IgcInputGroupComponent = /** @class */ /*@__PURE__*/ (function (_super) {
      * Returns a serialized copy of the exported visual model
     
     */
-    IgcInputGroupComponent.prototype.exportSerializedVisualModel = function () {
+    IgcXInputGroupComponent.prototype.exportSerializedVisualModel = function () {
         var iv = this.i.j9();
         return (iv);
     };
-    IgcInputGroupComponent._observedAttributesIgcInputGroupComponent = null;
-    IgcInputGroupComponent.htmlTagName = "igc-input-group";
-    IgcInputGroupComponent._isElementRegistered = false;
-    return IgcInputGroupComponent;
+    IgcXInputGroupComponent._observedAttributesIgcXInputGroupComponent = null;
+    IgcXInputGroupComponent.htmlTagName = "igc-x-input-group";
+    IgcXInputGroupComponent._isElementRegistered = false;
+    return IgcXInputGroupComponent;
 }(IgcHTMLElement));
-export { IgcInputGroupComponent };
-//# sourceMappingURL=igc-input-group-component.js.map
+export { IgcXInputGroupComponent };
+//# sourceMappingURL=igc-x-input-group-component.js.map