From 71d04ef29a13f3732f36f44f0be9c707c1cf2737 Mon Sep 17 00:00:00 2001
From: sivanova <sivanova@infragistics.com>
Date: Wed, 23 Mar 2022 15:32:07 +0200
Subject: [PATCH 1/5] refactor(input): use border instead of box-shadow

---
 .../input/_input-group-component.scss         |  6 +++++
 .../components/input/_input-group-theme.scss  | 22 ++++++++++++++-----
 .../themes/schemas/light/_input-group.scss    |  4 ++--
 .../lib/input-group/input-group.component.ts  |  6 +++++
 4 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss
index 8a68c283bb0..1869e45315b 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss
@@ -617,6 +617,12 @@
             }
         }
 
+        @include mx(textarea, fluent) {
+            @include e(bundle) {
+                @extend %form-group-bundle-textarea--fluent !optional;
+            }
+        }
+
         @include mx(required, fluent) {
             @include e(bundle) {
                 @extend %form-group-bundle-required--fluent !optional;
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss
index 270c316fe50..c0d6c5577f1 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss
@@ -652,6 +652,10 @@
             @extend %form-group-suffix-fluent--cosy;
             outline-style: none;
         }
+
+        %form-group-bundle--fluent {
+            height: rem(40px);
+        }
     }
 
     %igx-input-group-fluent-search--cosy {
@@ -683,6 +687,10 @@
             @extend %form-group-suffix-fluent--compact;
             outline-style: none;
         }
+
+        %form-group-bundle--fluent {
+            height: rem(32px);
+        }
     }
 
     %igx-input-group-fluent-search--compact {
@@ -718,6 +726,10 @@
         }
     }
 
+    %form-group-bundle-textarea--fluent {
+        height: rem(84px);
+    }
+
     // Bundle
     %form-group-bundle--fluent {
         padding: 0;
@@ -728,6 +740,7 @@
         background: var-get($theme, 'border-background');
         position: relative;
         align-items: stretch;
+        height: rem(48px);
     }
 
     %form-group-bundle--fluent--hover {
@@ -737,8 +750,7 @@
 
     %form-group-bundle--fluent--focus {
         caret-color: var-get($theme, 'focused-text-color');
-        border-color: var-get($theme, 'focused-border-color');
-        box-shadow: 0 0 0 1px var-get($theme, 'focused-border-color');
+        border: rem(2px) solid var-get($theme, 'focused-border-color');
     }
 
     %form-group-bundle--fluent--hover-disabled,
@@ -747,22 +759,20 @@
         background: var-get($theme, 'border-disabled-background');
     }
 
-    %form-group-bundle-error--fluent--hover,
     %form-group-bundle-error--fluent {
         border-color: var-get($theme, 'error-secondary-color');
     }
 
     %form-group-bundle-error--fluent--hover {
-        box-shadow: 0 0 0 1px var-get($theme, 'error-secondary-color');
+        border: rem(2px) solid var-get($theme, 'error-secondary-color');
     }
 
-    %form-group-bundle-success--fluent--hover,
     %form-group-bundle-success--fluent {
         border-color: var-get($theme, 'success-secondary-color');
     }
 
     %form-group-bundle-success--fluent--hover {
-        box-shadow: 0 0 0 1px var-get($theme, 'success-secondary-color');
+        border: rem(2px) solid var-get($theme, 'success-secondary-color');
     }
 
     %fluent-input {
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_input-group.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_input-group.scss
index 2542e69944f..88e25c48f5f 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_input-group.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_input-group.scss
@@ -205,7 +205,7 @@ $light-input-group: extend(
 /// @prop {Map} hover-border-color [color: ('grays', 800)] - The hover input border for input groups of type border and fluent.
 /// @prop {Map} disabled-border-color [color: ('grays', 100)] - The disabled border color for input groups of type border and fluent.
 ///
-/// @prop {Map} focused-border-color [color: ('info')] - The focused input border color for input groups of type border and fluent.
+/// @prop {Map} focused-border-color [color: ('primary', 500)] - The focused input border color for input groups of type border and fluent.
 /// @prop {Map} border-disabled-background [color: ('grays', 100)] - The background color of an input group of type border in the disabled state.
 ///
 /// @prop {Color} search-disabled-background [color: ('grays', 100)] - The background color of an input group of type search in the disabled state.
@@ -241,7 +241,7 @@ $fluent-input-group: extend(
         ),
 
         focused-border-color: (
-            color: ('info')
+            color: ('primary', 500)
         ),
 
         disabled-border-color: (
diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts
index b47b41b5bd9..2ec8d208dc5 100644
--- a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts
+++ b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts
@@ -99,6 +99,12 @@ export class IgxInputGroupComponent extends DisplayDensityBase implements IgxInp
     @HostBinding('class.igx-input-group--focused')
     public isFocused = false;
 
+    /** @hidden */
+    @HostBinding('class.igx-input-group--textarea')
+    public get isTextArea() {
+        return this.input.isTextArea;
+    }
+
     /**
      * @hidden @internal
      * When truthy, disables the `IgxInputGroupComponent`.

From 86457ad01c5b423e3463165e887b5fa6022b0d38 Mon Sep 17 00:00:00 2001
From: sivanova <sivanova@infragistics.com>
Date: Wed, 23 Mar 2022 17:36:53 +0200
Subject: [PATCH 2/5] improve prefix & suffix padding

---
 .../input/_input-group-component.scss         | 23 +++++---
 .../components/input/_input-group-theme.scss  | 59 ++++++++++++++++---
 2 files changed, 67 insertions(+), 15 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss
index 1869e45315b..fb22fbbb3de 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss
@@ -515,6 +515,10 @@
                 &:hover {
                     @extend %form-group-bundle--fluent--hover !optional;
                 }
+
+                &:focus-within {
+                    @extend %form-group-bundle--fluent--focus !optional;
+                }
             }
 
             @include e(bundle-main) {
@@ -597,6 +601,10 @@
         }
 
         @include mx(file, fluent) {
+            @include e(bundle-main) {
+                @extend %form-group-bundle-main--file !optional;
+            }
+
             @include e(label) {
                 @extend %fluent-label-filled !optional;
             }
@@ -605,11 +613,6 @@
         @include mx(focused, fluent) {
             @include e(bundle) {
                 @extend %form-group-bundle--focus !optional;
-
-                &:focus-within,
-                &:hover {
-                    @extend %form-group-bundle--fluent--focus !optional;
-                }
             }
 
             @include e(label) {
@@ -633,10 +636,13 @@
             @include e(bundle) {
                 @extend %form-group-bundle-success--fluent !optional;
 
-                &:focus-within,
                 &:hover {
                     @extend %form-group-bundle-success--fluent--hover !optional;
                 }
+
+                &:focus-within {
+                    @extend %form-group-bundle-success--fluent--focus !optional;
+                }
             }
 
             @include e(label) {
@@ -648,10 +654,13 @@
             @include e(bundle) {
                 @extend %form-group-bundle-error--fluent !optional;
 
-                &:focus-within,
                 &:hover {
                     @extend %form-group-bundle-error--fluent--hover !optional;
                 }
+
+                &:focus-within {
+                    @extend %form-group-bundle-error--fluent--focus !optional;
+                }
             }
 
             @include e(label) {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss
index c0d6c5577f1..cb395b657fb 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss
@@ -283,6 +283,7 @@
 
     $hint-padding-top: rem(6px, map.get($base-scale-size, 'comfortable'));
     $hint--box-margin: rem(12px, map.get($base-scale-size, 'comfortable'));
+    $fluent-focus-border: rem(2px);
 
     $left: if-ltr(left, right);
     $right: if-ltr(right, left);
@@ -656,6 +657,18 @@
         %form-group-bundle--fluent {
             height: rem(40px);
         }
+
+        %form-group-bundle--fluent--focus {
+            igx-prefix,
+            [igxPrefix] {
+                padding-#{$left}: calc((rem(8px, map.get($base-scale-size, 'cosy'))) - (#{$fluent-focus-border} / 2));
+            }
+
+            igx-suffix,
+            [igxSuffix] {
+                padding-#{$right}: calc((rem(8px, map.get($base-scale-size, 'cosy'))) - (#{$fluent-focus-border} / 2));
+            }
+        }
     }
 
     %igx-input-group-fluent-search--cosy {
@@ -691,6 +704,18 @@
         %form-group-bundle--fluent {
             height: rem(32px);
         }
+
+        %form-group-bundle--fluent--focus {
+            igx-prefix,
+            [igxPrefix] {
+                padding-#{$left}: calc((rem(8px, map.get($base-scale-size, 'compact'))) - (#{$fluent-focus-border} / 2));
+            }
+
+            igx-suffix,
+            [igxSuffix] {
+                padding-#{$right}: calc((rem(8px, map.get($base-scale-size, 'compact'))) - (#{$fluent-focus-border} / 2));
+            }
+        }
     }
 
     %igx-input-group-fluent-search--compact {
@@ -743,6 +768,23 @@
         height: rem(48px);
     }
 
+    %form-group-bundle--fluent--focus {
+        %form-group-bundle-main--fluent,
+        igx-prefix,
+        [igxPrefix] {
+            padding-#{$left}: calc((rem(8px, map.get($base-scale-size, 'comfortable'))) - (#{$fluent-focus-border} / 2));
+        }
+
+        igx-suffix,
+        [igxSuffix] {
+            padding-#{$right}: calc((rem(8px, map.get($base-scale-size, 'comfortable'))) - (#{$fluent-focus-border} / 2));
+        }
+
+        %form-group-bundle-main--file { 
+            padding-left: rem(8px);
+        }
+    }
+
     %form-group-bundle--fluent--hover {
         border-color: var-get($theme, 'hover-border-color');
         box-shadow: none;
@@ -759,20 +801,21 @@
         background: var-get($theme, 'border-disabled-background');
     }
 
-    %form-group-bundle-error--fluent {
+    %form-group-bundle-error--fluent,
+    %form-group-bundle-error--fluent--hover,
+    %form-group-bundle-error--fluent--focus {
         border-color: var-get($theme, 'error-secondary-color');
     }
 
-    %form-group-bundle-error--fluent--hover {
-        border: rem(2px) solid var-get($theme, 'error-secondary-color');
-    }
-
-    %form-group-bundle-success--fluent {
+    %form-group-bundle-success--fluent,
+    %form-group-bundle-success--fluent--hover,
+    %form-group-bundle-success--fluent--focus {
         border-color: var-get($theme, 'success-secondary-color');
     }
 
-    %form-group-bundle-success--fluent--hover {
-        border: rem(2px) solid var-get($theme, 'success-secondary-color');
+    %form-group-bundle-error--fluent--focus,
+    %form-group-bundle-success--fluent--focus {
+        border-width: $fluent-focus-border;
     }
 
     %fluent-input {

From 37fa83811036e5f9d713489e1aaab0616a78a822 Mon Sep 17 00:00:00 2001
From: sivanova <sivanova@infragistics.com>
Date: Thu, 24 Mar 2022 10:07:46 +0200
Subject: [PATCH 3/5] fix lint errors

---
 .../input/_input-group-component.scss          | 16 ++++++++--------
 .../components/input/_input-group-theme.scss   | 18 ++++++++----------
 2 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss
index fb22fbbb3de..13b741b075d 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss
@@ -569,24 +569,24 @@
                 @extend %fluent-input-disabled !optional;
 
                 &:hover {
-                    @extend %fluent-input-disabled !optional
-            }
+                    @extend %fluent-input-disabled !optional;
+                }
 
                 &:focus {
-                    @extend %fluent-input-disabled !optional
-            }
+                    @extend %fluent-input-disabled !optional;
+                }
             }
 
             @include e(file-input) {
                 @extend %fluent-input-disabled !optional;
 
                 &:hover {
-                    @extend %fluent-input-disabled !optional
-            }
+                    @extend %fluent-input-disabled !optional;
+                }
 
                 &:focus {
-                    @extend %fluent-input-disabled !optional
-            }
+                    @extend %fluent-input-disabled !optional;
+                }
             }
 
             @include e(label) {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss
index cb395b657fb..424e211e5c4 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss
@@ -768,7 +768,15 @@
         height: rem(48px);
     }
 
+    %form-group-bundle--fluent--hover {
+        border-color: var-get($theme, 'hover-border-color');
+        box-shadow: none;
+    }
+
     %form-group-bundle--fluent--focus {
+        caret-color: var-get($theme, 'focused-text-color');
+        border: rem(2px) solid var-get($theme, 'focused-border-color');
+
         %form-group-bundle-main--fluent,
         igx-prefix,
         [igxPrefix] {
@@ -785,16 +793,6 @@
         }
     }
 
-    %form-group-bundle--fluent--hover {
-        border-color: var-get($theme, 'hover-border-color');
-        box-shadow: none;
-    }
-
-    %form-group-bundle--fluent--focus {
-        caret-color: var-get($theme, 'focused-text-color');
-        border: rem(2px) solid var-get($theme, 'focused-border-color');
-    }
-
     %form-group-bundle--fluent--hover-disabled,
     %form-group-bundle--fluent-disabled {
         border-color: var-get($theme, 'disabled-border-color');

From e0770099db4f13cc554382b67d9597cd595358a8 Mon Sep 17 00:00:00 2001
From: sivanova <sivanova@infragistics.com>
Date: Thu, 24 Mar 2022 10:27:44 +0200
Subject: [PATCH 4/5] fix indigo error hover

---
 .../core/styles/components/input/_input-group-component.scss | 2 +-
 .../lib/core/styles/components/input/_input-group-theme.scss | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss
index 13b741b075d..629b2700fd9 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss
@@ -755,7 +755,7 @@
                 @extend %form-group-bundle-error--indigo !optional;
 
                 &:hover {
-                    @extend %form-group-bundle-error--fluent--hover !optional;
+                    @extend %form-group-bundle-error--indigo--hover !optional;
                 }
             }
         }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss
index 424e211e5c4..39a3a98d6cf 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss
@@ -473,6 +473,11 @@
         box-shadow: inset 0 -2px 0 0 var-get($theme, 'error-secondary-color');
     }
 
+    %form-group-bundle-error--indigo--hover {
+        border-color: var-get($theme, 'error-secondary-color');
+        box-shadow: 0 0 0 1px var-get($theme, 'error-secondary-color');
+    }
+
     %form-group-helper--indigo--disabled {
         color: var-get($theme, 'disabled-text-color');
     }

From b9ee7342c3da308cd4b796f0bbbdb51e21ebd102 Mon Sep 17 00:00:00 2001
From: sivanova <sivanova@infragistics.com>
Date: Thu, 24 Mar 2022 14:57:15 +0200
Subject: [PATCH 5/5] use ::after pseudo-element

---
 .../input/_input-group-component.scss         | 10 ---
 .../components/input/_input-group-theme.scss  | 75 +++++--------------
 .../lib/input-group/input-group.component.ts  |  6 --
 3 files changed, 19 insertions(+), 72 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss
index 629b2700fd9..d6e619d1292 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss
@@ -601,10 +601,6 @@
         }
 
         @include mx(file, fluent) {
-            @include e(bundle-main) {
-                @extend %form-group-bundle-main--file !optional;
-            }
-
             @include e(label) {
                 @extend %fluent-label-filled !optional;
             }
@@ -620,12 +616,6 @@
             }
         }
 
-        @include mx(textarea, fluent) {
-            @include e(bundle) {
-                @extend %form-group-bundle-textarea--fluent !optional;
-            }
-        }
-
         @include mx(required, fluent) {
             @include e(bundle) {
                 @extend %form-group-bundle-required--fluent !optional;
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss
index 39a3a98d6cf..26f7227d5be 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss
@@ -283,7 +283,6 @@
 
     $hint-padding-top: rem(6px, map.get($base-scale-size, 'comfortable'));
     $hint--box-margin: rem(12px, map.get($base-scale-size, 'comfortable'));
-    $fluent-focus-border: rem(2px);
 
     $left: if-ltr(left, right);
     $right: if-ltr(right, left);
@@ -658,22 +657,6 @@
             @extend %form-group-suffix-fluent--cosy;
             outline-style: none;
         }
-
-        %form-group-bundle--fluent {
-            height: rem(40px);
-        }
-
-        %form-group-bundle--fluent--focus {
-            igx-prefix,
-            [igxPrefix] {
-                padding-#{$left}: calc((rem(8px, map.get($base-scale-size, 'cosy'))) - (#{$fluent-focus-border} / 2));
-            }
-
-            igx-suffix,
-            [igxSuffix] {
-                padding-#{$right}: calc((rem(8px, map.get($base-scale-size, 'cosy'))) - (#{$fluent-focus-border} / 2));
-            }
-        }
     }
 
     %igx-input-group-fluent-search--cosy {
@@ -705,22 +688,6 @@
             @extend %form-group-suffix-fluent--compact;
             outline-style: none;
         }
-
-        %form-group-bundle--fluent {
-            height: rem(32px);
-        }
-
-        %form-group-bundle--fluent--focus {
-            igx-prefix,
-            [igxPrefix] {
-                padding-#{$left}: calc((rem(8px, map.get($base-scale-size, 'compact'))) - (#{$fluent-focus-border} / 2));
-            }
-
-            igx-suffix,
-            [igxSuffix] {
-                padding-#{$right}: calc((rem(8px, map.get($base-scale-size, 'compact'))) - (#{$fluent-focus-border} / 2));
-            }
-        }
     }
 
     %igx-input-group-fluent-search--compact {
@@ -741,7 +708,7 @@
     }
 
     %form-group-bundle-required--fluent {
-        &::after {
+        &::before {
             content: '*';
             position: absolute;
             top: rem(-8px);
@@ -751,15 +718,11 @@
     }
 
     %fluent-label + %form-group-bundle-required--fluent {
-        &::after {
+        &::before {
             display: none;
         }
     }
 
-    %form-group-bundle-textarea--fluent {
-        height: rem(84px);
-    }
-
     // Bundle
     %form-group-bundle--fluent {
         padding: 0;
@@ -770,7 +733,6 @@
         background: var-get($theme, 'border-background');
         position: relative;
         align-items: stretch;
-        height: rem(48px);
     }
 
     %form-group-bundle--fluent--hover {
@@ -780,21 +742,15 @@
 
     %form-group-bundle--fluent--focus {
         caret-color: var-get($theme, 'focused-text-color');
-        border: rem(2px) solid var-get($theme, 'focused-border-color');
+        border-color: var-get($theme, 'focused-border-color');
 
-        %form-group-bundle-main--fluent,
-        igx-prefix,
-        [igxPrefix] {
-            padding-#{$left}: calc((rem(8px, map.get($base-scale-size, 'comfortable'))) - (#{$fluent-focus-border} / 2));
-        }
-
-        igx-suffix,
-        [igxSuffix] {
-            padding-#{$right}: calc((rem(8px, map.get($base-scale-size, 'comfortable'))) - (#{$fluent-focus-border} / 2));
-        }
-
-        %form-group-bundle-main--file { 
-            padding-left: rem(8px);
+        &::after {
+            pointer-events: none;
+            position: absolute;
+            content: '';
+            width: 100%;
+            height: 100%;
+            border: rem(1px) solid var-get($theme, 'focused-border-color');
         }
     }
 
@@ -816,9 +772,16 @@
         border-color: var-get($theme, 'success-secondary-color');
     }
 
-    %form-group-bundle-error--fluent--focus,
     %form-group-bundle-success--fluent--focus {
-        border-width: $fluent-focus-border;
+        &::after {
+            border: rem(1px) solid var-get($theme, 'success-secondary-color');
+        }
+    }
+
+    %form-group-bundle-error--fluent--focus {
+        &::after {
+            border: rem(1px) solid var-get($theme, 'error-secondary-color');
+        }
     }
 
     %fluent-input {
diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts
index 2ec8d208dc5..b47b41b5bd9 100644
--- a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts
+++ b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts
@@ -99,12 +99,6 @@ export class IgxInputGroupComponent extends DisplayDensityBase implements IgxInp
     @HostBinding('class.igx-input-group--focused')
     public isFocused = false;
 
-    /** @hidden */
-    @HostBinding('class.igx-input-group--textarea')
-    public get isTextArea() {
-        return this.input.isTextArea;
-    }
-
     /**
      * @hidden @internal
      * When truthy, disables the `IgxInputGroupComponent`.