igniteui-webcomponents-inputs 1.3.3 → 1.4.2

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

@@ -1,10 +1,10 @@
-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';
@@ -13,8 +13,8 @@ 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";
-export let IgcInputGroupComponent = /*@__PURE__*/ (() => {
-    class IgcInputGroupComponent extends IgcHTMLElement {
+export let IgcXInputGroupComponent = /*@__PURE__*/ (() => {
+    class IgcXInputGroupComponent extends IgcHTMLElement {
         constructor() {
             super();
             this.contentInputs = [];
@@ -83,7 +83,7 @@ export let IgcInputGroupComponent = /*@__PURE__*/ (() => {
         */
         get inputs() {
             if (this._inputs === null) {
-                let coll = new IgcInputGroupInputCollection();
+                let coll = new IgcXInputGroupInputCollection();
                 let inner = coll._innerColl;
                 inner.addListener((sender, e) => {
                     switch (e.action) {
@@ -119,14 +119,14 @@ export let IgcInputGroupComponent = /*@__PURE__*/ (() => {
         updateInputs() {
             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]);
                     }
                 }
@@ -144,7 +144,7 @@ export let IgcInputGroupComponent = /*@__PURE__*/ (() => {
             this._wrapper.destroy();
         }
         createImplementation() {
-            return new InputGroup();
+            return new XInputGroup();
         }
         disconnectedCallback() {
             this._disconnected = true;
@@ -160,8 +160,8 @@ export let IgcInputGroupComponent = /*@__PURE__*/ (() => {
                 }
                 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";
@@ -173,6 +173,7 @@ export let IgcInputGroupComponent = /*@__PURE__*/ (() => {
             this.afterContentInit();
         }
         afterContentInit() {
+            this.i.ensureShift();
             //this.i.notifySizeChanged();
         }
         /**
@@ -226,14 +227,14 @@ export let IgcInputGroupComponent = /*@__PURE__*/ (() => {
             this._settingAttributes = false;
         }
         static get observedAttributes() {
-            if (IgcInputGroupComponent._observedAttributesIgcInputGroupComponent == null) {
-                let names = getAllPropertyNames(IgcInputGroupComponent);
+            if (IgcXInputGroupComponent._observedAttributesIgcXInputGroupComponent == null) {
+                let names = getAllPropertyNames(IgcXInputGroupComponent);
                 for (let i = 0; i < names.length; i++) {
                     names[i] = toSpinal(names[i]);
                 }
-                IgcInputGroupComponent._observedAttributesIgcInputGroupComponent = names;
+                IgcXInputGroupComponent._observedAttributesIgcXInputGroupComponent = names;
             }
-            return IgcInputGroupComponent._observedAttributesIgcInputGroupComponent;
+            return IgcXInputGroupComponent._observedAttributesIgcXInputGroupComponent;
         }
         attributeChangedCallback(name, oldValue, newValue) {
             if (this._settingAttributes) {
@@ -245,50 +246,50 @@ export let IgcInputGroupComponent = /*@__PURE__*/ (() => {
             this._updatingFromAttribute = false;
         }
         static register() {
-            if (!IgcInputGroupComponent._isElementRegistered) {
-                IgcInputGroupComponent._isElementRegistered = true;
-                RegisterElementHelper.registerElement(IgcInputGroupComponent.htmlTagName, IgcInputGroupComponent);
+            if (!IgcXInputGroupComponent._isElementRegistered) {
+                IgcXInputGroupComponent._isElementRegistered = true;
+                RegisterElementHelper.registerElement(IgcXInputGroupComponent.htmlTagName, IgcXInputGroupComponent);
             }
         }
         /**
      * Gets or sets the display style to use for the button.
     */
         get displayType() {
-            return this.i.k;
+            return this.i.d;
         }
         set displayType(v) {
-            this.i.k = ensureEnum(InputGroupDisplayType_$type, v);
-            this._a("displayType", enumToString(InputGroupDisplayType_$type, this.i.k));
+            this.i.d = ensureEnum(InputGroupDisplayType_$type, v);
+            this._a("displayType", enumToString(InputGroupDisplayType_$type, this.i.d));
         }
         /**
          * Gets or sets the display density to use for the input group.
         */
         get density() {
-            return this.i.h;
+            return this.i.n;
         }
         set density(v) {
-            this.i.h = ensureEnum(ControlDisplayDensity_$type, v);
-            this._a("density", enumToString(ControlDisplayDensity_$type, this.i.h));
+            this.i.n = ensureEnum(ControlDisplayDensity_$type, v);
+            this._a("density", enumToString(ControlDisplayDensity_$type, this.i.n));
         }
         /**
          * Gets the actual display density to use for the input group.
         */
         get actualDensity() {
-            return this.i.g;
+            return this.i.m;
         }
         set actualDensity(v) {
-            this.i.g = ensureEnum(ControlDisplayDensity_$type, v);
-            this._a("actualDensity", enumToString(ControlDisplayDensity_$type, this.i.g));
+            this.i.m = ensureEnum(ControlDisplayDensity_$type, v);
+            this._a("actualDensity", enumToString(ControlDisplayDensity_$type, this.i.m));
         }
         /**
          * Gets or sets the base built in theme to use for the label.
         */
         get baseTheme() {
-            return this.i.d;
+            return this.i.j;
         }
         set baseTheme(v) {
-            this.i.d = ensureEnum(BaseControlTheme_$type, v);
-            this._a("baseTheme", enumToString(BaseControlTheme_$type, this.i.d));
+            this.i.j = ensureEnum(BaseControlTheme_$type, v);
+            this._a("baseTheme", enumToString(BaseControlTheme_$type, this.i.j));
         }
         get inputHasValue() {
             return this.i.af;
@@ -297,21 +298,21 @@ export let IgcInputGroupComponent = /*@__PURE__*/ (() => {
          * Gets the actual item background color.
         */
         get actualBorderColor() {
-            return brushToString(this.i.os);
+            return brushToString(this.i.ot);
         }
         set actualBorderColor(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));
         }
         /**
          * Gets the actual item border color.
         */
         get actualFocusBorderColor() {
-            return brushToString(this.i.ot);
+            return brushToString(this.i.ou);
         }
         set actualFocusBorderColor(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));
         }
         /**
          * Gets the actual item border width.
@@ -334,88 +335,88 @@ export let IgcInputGroupComponent = /*@__PURE__*/ (() => {
             this._a("actualFocusBorderWidth", this.i.cb);
         }
         get actualCornerRadiusBottomRight() {
-            return this.i.mz ? this.i.mz.b : NaN;
+            return this.i.m0 ? this.i.m0.b : NaN;
         }
         set actualCornerRadiusBottomRight(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;
         }
         get actualCornerRadiusBottomLeft() {
-            return this.i.mz ? this.i.mz.a : NaN;
+            return this.i.m0 ? this.i.m0.a : NaN;
         }
         set actualCornerRadiusBottomLeft(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;
         }
         get actualCornerRadiusTopLeft() {
-            return this.i.mz ? this.i.mz.c : NaN;
+            return this.i.m0 ? this.i.m0.c : NaN;
         }
         set actualCornerRadiusTopLeft(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;
         }
         get actualCornerRadiusTopRight() {
-            return this.i.mz ? this.i.mz.d : NaN;
+            return this.i.m0 ? this.i.m0.d : NaN;
         }
         set actualCornerRadiusTopRight(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;
         }
         ensureActualCornerRadius() {
-            if (this.i.mz) {
+            if (this.i.m0) {
                 return;
             }
-            this.i.mz = new CornerRadius(2);
+            this.i.m0 = new CornerRadius(2);
         }
         get actualContentPaddingBottom() {
-            return this.i.tf ? this.i.tf.b : NaN;
+            return this.i.tg ? this.i.tg.b : NaN;
         }
         set actualContentPaddingBottom(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;
         }
         get actualContentPaddingLeft() {
-            return this.i.tf ? this.i.tf.c : NaN;
+            return this.i.tg ? this.i.tg.c : NaN;
         }
         set actualContentPaddingLeft(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;
         }
         get actualContentPaddingRight() {
-            return this.i.tf ? this.i.tf.d : NaN;
+            return this.i.tg ? this.i.tg.d : NaN;
         }
         set actualContentPaddingRight(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;
         }
         get actualContentPaddingTop() {
-            return this.i.tf ? this.i.tf.e : NaN;
+            return this.i.tg ? this.i.tg.e : NaN;
         }
         set actualContentPaddingTop(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;
         }
         ensureActualContentPadding() {
-            if (this.i.tf) {
+            if (this.i.tg) {
                 return;
             }
-            this.i.tf = new Thickness(2);
+            this.i.tg = new Thickness(2);
         }
         /**
          * Gets the actual width to use for the underline element.
@@ -451,41 +452,41 @@ export let IgcInputGroupComponent = /*@__PURE__*/ (() => {
          * Gets the actual color to use for the underline element.
         */
         get actualUnderlineColor() {
-            return brushToString(this.i.ow);
+            return brushToString(this.i.ox);
         }
         set actualUnderlineColor(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));
         }
         /**
          * Gets the actual color to use for the underline ripple element.
         */
         get actualUnderlineRippleColor() {
-            return brushToString(this.i.ox);
+            return brushToString(this.i.oy);
         }
         set actualUnderlineRippleColor(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));
         }
         /**
          * Gets the actual color to use for the underline element.
         */
         get actualHoverUnderlineColor() {
-            return brushToString(this.i.ov);
+            return brushToString(this.i.ow);
         }
         set actualHoverUnderlineColor(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));
         }
         /**
          * Gets the actual color to use for the underline element when focused.
         */
         get actualFocusUnderlineColor() {
-            return brushToString(this.i.ou);
+            return brushToString(this.i.ov);
         }
         set actualFocusUnderlineColor(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));
         }
         /**
          * Gets the actual opacity to use for the underline element.
@@ -541,11 +542,11 @@ export let IgcInputGroupComponent = /*@__PURE__*/ (() => {
          * Gets the actual opacity to use for the underline ripple element.
         */
         get actualBackgroundColor() {
-            return brushToString(this.i.or);
+            return brushToString(this.i.os);
         }
         set actualBackgroundColor(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));
         }
         /**
          * Gets or sets the border width to use for the border of the item group.
@@ -571,95 +572,95 @@ export let IgcInputGroupComponent = /*@__PURE__*/ (() => {
          * Gets or sets the color to use the border of the input group.
         */
         get borderColor() {
-            return brushToString(this.i.oz);
+            return brushToString(this.i.o0);
         }
         set borderColor(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));
         }
         get cornerRadiusBottomRight() {
-            return this.i.m3 ? this.i.m3.b : NaN;
+            return this.i.m4 ? this.i.m4.b : NaN;
         }
         set cornerRadiusBottomRight(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;
         }
         get cornerRadiusBottomLeft() {
-            return this.i.m3 ? this.i.m3.a : NaN;
+            return this.i.m4 ? this.i.m4.a : NaN;
         }
         set cornerRadiusBottomLeft(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;
         }
         get cornerRadiusTopLeft() {
-            return this.i.m3 ? this.i.m3.c : NaN;
+            return this.i.m4 ? this.i.m4.c : NaN;
         }
         set cornerRadiusTopLeft(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;
         }
         get cornerRadiusTopRight() {
-            return this.i.m3 ? this.i.m3.d : NaN;
+            return this.i.m4 ? this.i.m4.d : NaN;
         }
         set cornerRadiusTopRight(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;
         }
         ensureCornerRadius() {
-            if (this.i.m3) {
+            if (this.i.m4) {
                 return;
             }
-            this.i.m3 = new CornerRadius(2);
+            this.i.m4 = new CornerRadius(2);
         }
         get contentPaddingBottom() {
-            return this.i.tj ? this.i.tj.b : NaN;
+            return this.i.tk ? this.i.tk.b : NaN;
         }
         set contentPaddingBottom(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;
         }
         get contentPaddingLeft() {
-            return this.i.tj ? this.i.tj.c : NaN;
+            return this.i.tk ? this.i.tk.c : NaN;
         }
         set contentPaddingLeft(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;
         }
         get contentPaddingRight() {
-            return this.i.tj ? this.i.tj.d : NaN;
+            return this.i.tk ? this.i.tk.d : NaN;
         }
         set contentPaddingRight(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;
         }
         get contentPaddingTop() {
-            return this.i.tj ? this.i.tj.e : NaN;
+            return this.i.tk ? this.i.tk.e : NaN;
         }
         set contentPaddingTop(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;
         }
         ensureContentPadding() {
-            if (this.i.tj) {
+            if (this.i.tk) {
                 return;
             }
-            this.i.tj = new Thickness(2);
+            this.i.tk = new Thickness(2);
         }
         /**
          * Gets or sets the width to use for the underline element.
@@ -695,41 +696,41 @@ export let IgcInputGroupComponent = /*@__PURE__*/ (() => {
          * Gets or sets the color to use for the underline element.
         */
         get underlineColor() {
-            return brushToString(this.i.s7);
+            return brushToString(this.i.s8);
         }
         set underlineColor(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));
         }
         /**
          * Gets or sets the color to use for the underline ripple element.
         */
         get underlineRippleColor() {
-            return brushToString(this.i.s8);
+            return brushToString(this.i.s9);
         }
         set underlineRippleColor(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));
         }
         /**
          * Gets or sets the color to use for the underline element.
         */
         get hoverUnderlineColor() {
-            return brushToString(this.i.ss);
+            return brushToString(this.i.st);
         }
         set hoverUnderlineColor(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));
         }
         /**
          * Gets or sets the color to use for the underline element.
         */
         get focusUnderlineColor() {
-            return brushToString(this.i.sr);
+            return brushToString(this.i.ss);
         }
         set focusUnderlineColor(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));
         }
         /**
          * Gets or sets the color to use for the underline element.
@@ -785,11 +786,11 @@ export let IgcInputGroupComponent = /*@__PURE__*/ (() => {
          * Gets or sets the background color to use for the input group.
         */
         get backgroundColor() {
-            return brushToString(this.i.oy);
+            return brushToString(this.i.oz);
         }
         set backgroundColor(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));
         }
         /**
          * Gets or sets the border width to use for the border of the item group when using type line.
@@ -815,105 +816,105 @@ export let IgcInputGroupComponent = /*@__PURE__*/ (() => {
          * Gets or sets the focus color to use the border of the input group when type is line.
         */
         get lineTypeFocusBorderColor() {
-            return brushToString(this.i.sv);
+            return brushToString(this.i.sw);
         }
         set lineTypeFocusBorderColor(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));
         }
         /**
          * Gets or sets the color to use the border of the input group when type is line.
         */
         get lineTypeBorderColor() {
-            return brushToString(this.i.su);
+            return brushToString(this.i.sv);
         }
         set lineTypeBorderColor(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));
         }
         get lineTypeCornerRadiusBottomRight() {
-            return this.i.nj ? this.i.nj.b : NaN;
+            return this.i.nk ? this.i.nk.b : NaN;
         }
         set lineTypeCornerRadiusBottomRight(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;
         }
         get lineTypeCornerRadiusBottomLeft() {
-            return this.i.nj ? this.i.nj.a : NaN;
+            return this.i.nk ? this.i.nk.a : NaN;
         }
         set lineTypeCornerRadiusBottomLeft(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;
         }
         get lineTypeCornerRadiusTopLeft() {
-            return this.i.nj ? this.i.nj.c : NaN;
+            return this.i.nk ? this.i.nk.c : NaN;
         }
         set lineTypeCornerRadiusTopLeft(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;
         }
         get lineTypeCornerRadiusTopRight() {
-            return this.i.nj ? this.i.nj.d : NaN;
+            return this.i.nk ? this.i.nk.d : NaN;
         }
         set lineTypeCornerRadiusTopRight(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;
         }
         ensureLineTypeCornerRadius() {
-            if (this.i.nj) {
+            if (this.i.nk) {
                 return;
             }
-            this.i.nj = new CornerRadius(2);
+            this.i.nk = new CornerRadius(2);
         }
         get lineTypeContentPaddingBottom() {
-            return this.i.tz ? this.i.tz.b : NaN;
+            return this.i.t0 ? this.i.t0.b : NaN;
         }
         set lineTypeContentPaddingBottom(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;
         }
         get lineTypeContentPaddingLeft() {
-            return this.i.tz ? this.i.tz.c : NaN;
+            return this.i.t0 ? this.i.t0.c : NaN;
         }
         set lineTypeContentPaddingLeft(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;
         }
         get lineTypeContentPaddingRight() {
-            return this.i.tz ? this.i.tz.d : NaN;
+            return this.i.t0 ? this.i.t0.d : NaN;
         }
         set lineTypeContentPaddingRight(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;
         }
         get lineTypeContentPaddingTop() {
-            return this.i.tz ? this.i.tz.e : NaN;
+            return this.i.t0 ? this.i.t0.e : NaN;
         }
         set lineTypeContentPaddingTop(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;
         }
         ensureLineTypeContentPadding() {
-            if (this.i.tz) {
+            if (this.i.t0) {
                 return;
             }
-            this.i.tz = new Thickness(2);
+            this.i.t0 = new Thickness(2);
         }
         /**
          * Gets or sets the width to use for the underline element when type is line.
@@ -949,41 +950,41 @@ export let IgcInputGroupComponent = /*@__PURE__*/ (() => {
          * Gets or sets the color to use for the underline element when type is line.
         */
         get lineTypeUnderlineColor() {
-            return brushToString(this.i.sy);
+            return brushToString(this.i.sz);
         }
         set lineTypeUnderlineColor(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));
         }
         /**
          * Gets or sets the color to use for the underline ripple element when type is line.
         */
         get lineTypeUnderlineRippleColor() {
-            return brushToString(this.i.sz);
+            return brushToString(this.i.s0);
         }
         set lineTypeUnderlineRippleColor(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));
         }
         /**
          * Gets or sets the color to use for the underline element when type is line.
         */
         get lineTypeHoverUnderlineColor() {
-            return brushToString(this.i.sx);
+            return brushToString(this.i.sy);
         }
         set lineTypeHoverUnderlineColor(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));
         }
         /**
          * Gets or sets the color to use for the underline element when type is line.
         */
         get lineTypeFocusUnderlineColor() {
-            return brushToString(this.i.sw);
+            return brushToString(this.i.sx);
         }
         set lineTypeFocusUnderlineColor(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));
         }
         /**
          * Gets or sets the color to use for the underline element when type is line.
@@ -1039,11 +1040,11 @@ export let IgcInputGroupComponent = /*@__PURE__*/ (() => {
          * Gets or sets the background color to use for the input group when type is line.
         */
         get lineTypeBackgroundColor() {
-            return brushToString(this.i.st);
+            return brushToString(this.i.su);
         }
         set lineTypeBackgroundColor(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));
         }
         /**
          * Gets or sets the border width to use for the border of the item group when using type line.
@@ -1069,105 +1070,105 @@ export let IgcInputGroupComponent = /*@__PURE__*/ (() => {
          * Gets or sets the focus color to use the border of the input group when type is box.
         */
         get boxTypeFocusBorderColor() {
-            return brushToString(this.i.o9);
+            return brushToString(this.i.pa);
         }
         set boxTypeFocusBorderColor(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));
         }
         /**
          * Gets or sets the color to use the border of the input group when type is box.
         */
         get boxTypeBorderColor() {
-            return brushToString(this.i.o8);
+            return brushToString(this.i.o9);
         }
         set boxTypeBorderColor(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));
         }
         get boxTypeCornerRadiusBottomRight() {
-            return this.i.m1 ? this.i.m1.b : NaN;
+            return this.i.m2 ? this.i.m2.b : NaN;
         }
         set boxTypeCornerRadiusBottomRight(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;
         }
         get boxTypeCornerRadiusBottomLeft() {
-            return this.i.m1 ? this.i.m1.a : NaN;
+            return this.i.m2 ? this.i.m2.a : NaN;
         }
         set boxTypeCornerRadiusBottomLeft(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;
         }
         get boxTypeCornerRadiusTopLeft() {
-            return this.i.m1 ? this.i.m1.c : NaN;
+            return this.i.m2 ? this.i.m2.c : NaN;
         }
         set boxTypeCornerRadiusTopLeft(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;
         }
         get boxTypeCornerRadiusTopRight() {
-            return this.i.m1 ? this.i.m1.d : NaN;
+            return this.i.m2 ? this.i.m2.d : NaN;
         }
         set boxTypeCornerRadiusTopRight(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;
         }
         ensureBoxTypeCornerRadius() {
-            if (this.i.m1) {
+            if (this.i.m2) {
                 return;
             }
-            this.i.m1 = new CornerRadius(2);
+            this.i.m2 = new CornerRadius(2);
         }
         get boxTypeContentPaddingBottom() {
-            return this.i.th ? this.i.th.b : NaN;
+            return this.i.ti ? this.i.ti.b : NaN;
         }
         set boxTypeContentPaddingBottom(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;
         }
         get boxTypeContentPaddingLeft() {
-            return this.i.th ? this.i.th.c : NaN;
+            return this.i.ti ? this.i.ti.c : NaN;
         }
         set boxTypeContentPaddingLeft(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;
         }
         get boxTypeContentPaddingRight() {
-            return this.i.th ? this.i.th.d : NaN;
+            return this.i.ti ? this.i.ti.d : NaN;
         }
         set boxTypeContentPaddingRight(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;
         }
         get boxTypeContentPaddingTop() {
-            return this.i.th ? this.i.th.e : NaN;
+            return this.i.ti ? this.i.ti.e : NaN;
         }
         set boxTypeContentPaddingTop(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;
         }
         ensureBoxTypeContentPadding() {
-            if (this.i.th) {
+            if (this.i.ti) {
                 return;
             }
-            this.i.th = new Thickness(2);
+            this.i.ti = new Thickness(2);
         }
         /**
          * Gets or sets the width to use for the underline element when type is box.
@@ -1203,41 +1204,41 @@ export let IgcInputGroupComponent = /*@__PURE__*/ (() => {
          * Gets or sets the color to use for the underline element when type is box.
         */
         get boxTypeUnderlineColor() {
-            return brushToString(this.i.pc);
+            return brushToString(this.i.pd);
         }
         set boxTypeUnderlineColor(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));
         }
         /**
          * Gets or sets the color to use for the underline ripple element when type is box.
         */
         get boxTypeUnderlineRippleColor() {
-            return brushToString(this.i.pd);
+            return brushToString(this.i.pe);
         }
         set boxTypeUnderlineRippleColor(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));
         }
         /**
          * Gets or sets the color to use for the underline element when type is box.
         */
         get boxTypeHoverUnderlineColor() {
-            return brushToString(this.i.pb);
+            return brushToString(this.i.pc);
         }
         set boxTypeHoverUnderlineColor(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));
         }
         /**
          * Gets or sets the color to use for the underline element when type is box.
         */
         get boxTypeFocusUnderlineColor() {
-            return brushToString(this.i.pa);
+            return brushToString(this.i.pb);
         }
         set boxTypeFocusUnderlineColor(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));
         }
         /**
          * Gets or sets the color to use for the underline element when type is box.
@@ -1293,11 +1294,11 @@ export let IgcInputGroupComponent = /*@__PURE__*/ (() => {
          * Gets or sets the background color to use for the input group when type is box.
         */
         get boxTypeBackgroundColor() {
-            return brushToString(this.i.o7);
+            return brushToString(this.i.o8);
         }
         set boxTypeBackgroundColor(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));
         }
         /**
          * Gets or sets the border width to use for the border of the item group when using type line.
@@ -1323,105 +1324,105 @@ export let IgcInputGroupComponent = /*@__PURE__*/ (() => {
          * Gets or sets the focus color to use the border of the input group when type is border.
         */
         get borderTypeFocusBorderColor() {
-            return brushToString(this.i.o2);
+            return brushToString(this.i.o3);
         }
         set borderTypeFocusBorderColor(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));
         }
         /**
          * Gets or sets the color to use the border of the input group when type is border.
         */
         get borderTypeBorderColor() {
-            return brushToString(this.i.o1);
+            return brushToString(this.i.o2);
         }
         set borderTypeBorderColor(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));
         }
         get borderTypeCornerRadiusBottomRight() {
-            return this.i.m0 ? this.i.m0.b : NaN;
+            return this.i.m1 ? this.i.m1.b : NaN;
         }
         set borderTypeCornerRadiusBottomRight(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;
         }
         get borderTypeCornerRadiusBottomLeft() {
-            return this.i.m0 ? this.i.m0.a : NaN;
+            return this.i.m1 ? this.i.m1.a : NaN;
         }
         set borderTypeCornerRadiusBottomLeft(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;
         }
         get borderTypeCornerRadiusTopLeft() {
-            return this.i.m0 ? this.i.m0.c : NaN;
+            return this.i.m1 ? this.i.m1.c : NaN;
         }
         set borderTypeCornerRadiusTopLeft(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;
         }
         get borderTypeCornerRadiusTopRight() {
-            return this.i.m0 ? this.i.m0.d : NaN;
+            return this.i.m1 ? this.i.m1.d : NaN;
         }
         set borderTypeCornerRadiusTopRight(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;
         }
         ensureBorderTypeCornerRadius() {
-            if (this.i.m0) {
+            if (this.i.m1) {
                 return;
             }
-            this.i.m0 = new CornerRadius(2);
+            this.i.m1 = new CornerRadius(2);
         }
         get borderTypeContentPaddingBottom() {
-            return this.i.tg ? this.i.tg.b : NaN;
+            return this.i.th ? this.i.th.b : NaN;
         }
         set borderTypeContentPaddingBottom(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;
         }
         get borderTypeContentPaddingLeft() {
-            return this.i.tg ? this.i.tg.c : NaN;
+            return this.i.th ? this.i.th.c : NaN;
         }
         set borderTypeContentPaddingLeft(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;
         }
         get borderTypeContentPaddingRight() {
-            return this.i.tg ? this.i.tg.d : NaN;
+            return this.i.th ? this.i.th.d : NaN;
         }
         set borderTypeContentPaddingRight(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;
         }
         get borderTypeContentPaddingTop() {
-            return this.i.tg ? this.i.tg.e : NaN;
+            return this.i.th ? this.i.th.e : NaN;
         }
         set borderTypeContentPaddingTop(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;
         }
         ensureBorderTypeContentPadding() {
-            if (this.i.tg) {
+            if (this.i.th) {
                 return;
             }
-            this.i.tg = new Thickness(2);
+            this.i.th = new Thickness(2);
         }
         /**
          * Gets or sets the width to use for the underline element when type is border.
@@ -1457,41 +1458,41 @@ export let IgcInputGroupComponent = /*@__PURE__*/ (() => {
          * Gets or sets the color to use for the underline element when type is border.
         */
         get borderTypeUnderlineColor() {
-            return brushToString(this.i.o5);
+            return brushToString(this.i.o6);
         }
         set borderTypeUnderlineColor(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));
         }
         /**
          * Gets or sets the color to use for the underline ripple element when type is border.
         */
         get borderTypeUnderlineRippleColor() {
-            return brushToString(this.i.o6);
+            return brushToString(this.i.o7);
         }
         set borderTypeUnderlineRippleColor(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));
         }
         /**
          * Gets or sets the color to use for the underline element when type is border.
         */
         get borderTypeHoverUnderlineColor() {
-            return brushToString(this.i.o4);
+            return brushToString(this.i.o5);
         }
         set borderTypeHoverUnderlineColor(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));
         }
         /**
          * Gets or sets the color to use for the underline element when type is border.
         */
         get borderTypeFocusUnderlineColor() {
-            return brushToString(this.i.o3);
+            return brushToString(this.i.o4);
         }
         set borderTypeFocusUnderlineColor(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));
         }
         /**
          * Gets or sets the color to use for the underline element when type is border.
@@ -1547,11 +1548,11 @@ export let IgcInputGroupComponent = /*@__PURE__*/ (() => {
          * Gets or sets the background color to use for the input group when type is border.
         */
         get borderTypeBackgroundColor() {
-            return brushToString(this.i.o0);
+            return brushToString(this.i.o1);
         }
         set borderTypeBackgroundColor(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));
         }
         /**
          * Gets or sets the search width to use for the border of the item group when using type line.
@@ -1577,105 +1578,105 @@ export let IgcInputGroupComponent = /*@__PURE__*/ (() => {
          * Gets or sets the focus color to use the search of the input group when type is search.
         */
         get searchTypeFocusBorderColor() {
-            return brushToString(this.i.s2);
+            return brushToString(this.i.s3);
         }
         set searchTypeFocusBorderColor(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));
         }
         /**
          * Gets or sets the color to use the search of the input group when type is search.
         */
         get searchTypeBorderColor() {
-            return brushToString(this.i.s1);
+            return brushToString(this.i.s2);
         }
         set searchTypeBorderColor(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));
         }
         get searchTypeCornerRadiusBottomRight() {
-            return this.i.nk ? this.i.nk.b : NaN;
+            return this.i.nl ? this.i.nl.b : NaN;
         }
         set searchTypeCornerRadiusBottomRight(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;
         }
         get searchTypeCornerRadiusBottomLeft() {
-            return this.i.nk ? this.i.nk.a : NaN;
+            return this.i.nl ? this.i.nl.a : NaN;
         }
         set searchTypeCornerRadiusBottomLeft(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;
         }
         get searchTypeCornerRadiusTopLeft() {
-            return this.i.nk ? this.i.nk.c : NaN;
+            return this.i.nl ? this.i.nl.c : NaN;
         }
         set searchTypeCornerRadiusTopLeft(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;
         }
         get searchTypeCornerRadiusTopRight() {
-            return this.i.nk ? this.i.nk.d : NaN;
+            return this.i.nl ? this.i.nl.d : NaN;
         }
         set searchTypeCornerRadiusTopRight(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;
         }
         ensureSearchTypeCornerRadius() {
-            if (this.i.nk) {
+            if (this.i.nl) {
                 return;
             }
-            this.i.nk = new CornerRadius(2);
+            this.i.nl = new CornerRadius(2);
         }
         get searchTypeContentPaddingBottom() {
-            return this.i.t0 ? this.i.t0.b : NaN;
+            return this.i.t1 ? this.i.t1.b : NaN;
         }
         set searchTypeContentPaddingBottom(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;
         }
         get searchTypeContentPaddingLeft() {
-            return this.i.t0 ? this.i.t0.c : NaN;
+            return this.i.t1 ? this.i.t1.c : NaN;
         }
         set searchTypeContentPaddingLeft(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;
         }
         get searchTypeContentPaddingRight() {
-            return this.i.t0 ? this.i.t0.d : NaN;
+            return this.i.t1 ? this.i.t1.d : NaN;
         }
         set searchTypeContentPaddingRight(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;
         }
         get searchTypeContentPaddingTop() {
-            return this.i.t0 ? this.i.t0.e : NaN;
+            return this.i.t1 ? this.i.t1.e : NaN;
         }
         set searchTypeContentPaddingTop(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;
         }
         ensureSearchTypeContentPadding() {
-            if (this.i.t0) {
+            if (this.i.t1) {
                 return;
             }
-            this.i.t0 = new Thickness(2);
+            this.i.t1 = new Thickness(2);
         }
         /**
          * Gets or sets the width to use for the underline element when type is search.
@@ -1711,41 +1712,41 @@ export let IgcInputGroupComponent = /*@__PURE__*/ (() => {
          * Gets or sets the color to use for the underline element when type is search.
         */
         get searchTypeUnderlineColor() {
-            return brushToString(this.i.s5);
+            return brushToString(this.i.s6);
         }
         set searchTypeUnderlineColor(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));
         }
         /**
          * Gets or sets the color to use for the underline ripple element when type is search.
         */
         get searchTypeUnderlineRippleColor() {
-            return brushToString(this.i.s6);
+            return brushToString(this.i.s7);
         }
         set searchTypeUnderlineRippleColor(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));
         }
         /**
          * Gets or sets the color to use for the underline element when type is search.
         */
         get searchTypeHoverUnderlineColor() {
-            return brushToString(this.i.s4);
+            return brushToString(this.i.s5);
         }
         set searchTypeHoverUnderlineColor(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));
         }
         /**
          * Gets or sets the color to use for the underline element when type is search.
         */
         get searchTypeFocusUnderlineColor() {
-            return brushToString(this.i.s3);
+            return brushToString(this.i.s4);
         }
         set searchTypeFocusUnderlineColor(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));
         }
         /**
          * Gets or sets the color to use for the underline element when type is search.
@@ -1801,11 +1802,11 @@ export let IgcInputGroupComponent = /*@__PURE__*/ (() => {
          * Gets or sets the background color to use for the input group when type is search.
         */
         get searchTypeBackgroundColor() {
-            return brushToString(this.i.s0);
+            return brushToString(this.i.s1);
         }
         set searchTypeBackgroundColor(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));
         }
         /**
          * Gets or sets whether the input group is expanded or not.
@@ -1851,11 +1852,11 @@ export let IgcInputGroupComponent = /*@__PURE__*/ (() => {
          * Gets or sets the color to use the hovered background of the inputs in the group.
         */
         get focusBorderColor() {
-            return brushToString(this.i.sq);
+            return brushToString(this.i.sr);
         }
         set focusBorderColor(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));
         }
         /**
          * Gets or sets the id to use for the checkbox.
@@ -1902,7 +1903,7 @@ export let IgcInputGroupComponent = /*@__PURE__*/ (() => {
             if (typeName.indexOf("Xam") === 0) {
                 typeName = typeName.substring(3);
             }
-            genericPrefix = toSpinal("InputGroupComponent");
+            genericPrefix = toSpinal("XInputGroupComponent");
             let additionalPrefixes = [];
             let prefix = toSpinal(typeName);
             additionalPrefixes.push(prefix + "-");
@@ -1958,9 +1959,8 @@ export let IgcInputGroupComponent = /*@__PURE__*/ (() => {
             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;
 })();
-//# sourceMappingURL=igc-input-group-component.js.map