fix(input-group): allow type switching at runtime

Author: simeonoff

projects/igniteui-angular/src/lib/directives/input/input.directive.ts

@@ -56,7 +56,7 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy {
         public inputGroup: IgxInputGroupBase,
         @Optional() @Self() @Inject(NgModel) protected ngModel: NgModel,
         @Optional() @Self() @Inject(FormControlName) protected formControl: FormControlName,
-        protected element: ElementRef,
+        protected element: ElementRef<HTMLInputElement>,
         protected cdr: ChangeDetectorRef) { }
 
     private get ngControl(): NgControl {

projects/igniteui-angular/src/lib/input-group/input-group.component.html

@@ -2,8 +2,10 @@
     <ng-container *ngTemplateOutlet="bundle"></ng-container>
 </div>
 
+<div class="igx-input-group__border" *ngIf="hasBorder"></div>
+
 <div class="igx-input-group__hint">
-    <ng-content select="igx-hint,[igxHint]"></ng-content>
+    <ng-content select="igx-hint, [igxHint]"></ng-content>
 </div>
 
 <ng-template #label>
@@ -14,32 +16,69 @@
     <ng-content select="[igxInput]"></ng-content>
 </ng-template>
 
-<ng-template #inputBundle>
-    <ng-container *ngIf="!isNotMaterial">
-        <ng-container *ngTemplateOutlet="label"></ng-container>
-    </ng-container>
-
-    <ng-container *ngTemplateOutlet="input"></ng-container>
+<ng-template #prefix>
+    <ng-content select="igx-prefix, [igxPrefix]"></ng-content>
 </ng-template>
 
-<ng-template #bundle>
-    <ng-container *ngIf="isNotMaterial">
-        <ng-container *ngTemplateOutlet="label"></ng-container>
-    </ng-container>
+<ng-template #suffix>
+    <ng-content select="igx-suffix, [igxSuffix]"></ng-content>
+</ng-template>
 
+<ng-template #materialBundle>
     <div class="igx-input-group__bundle">
-        <ng-content select="igx-prefix,[igxPrefix]"></ng-content>
+        <ng-container *ngTemplateOutlet="prefix"></ng-container>
+
+        <div class="igx-input-group__bundle-main">
+            <ng-container *ngTemplateOutlet="label"></ng-container>
+            <ng-container *ngTemplateOutlet="input"></ng-container>
+        </div>
 
-        <div *ngIf="!isTypeBootstrap; else inputBundle" class="igx-input-group__bundle-main">
+        <ng-container *ngTemplateOutlet="suffix"></ng-container>
+    </div>
+</ng-template>
 
-            <ng-container *ngIf="!isNotMaterial">
-                <ng-container *ngTemplateOutlet="label"></ng-container>
-            </ng-container>
+<ng-template #fluentBundle>
+    <ng-container *ngTemplateOutlet="label"></ng-container>
 
+    <div class="igx-input-group__bundle">
+        <ng-container *ngTemplateOutlet="prefix"></ng-container>
+
+        <div class="igx-input-group__bundle-main">
             <ng-container *ngTemplateOutlet="input"></ng-container>
         </div>
 
-        <ng-content select="igx-suffix,[igxSuffix]"></ng-content>
+        <ng-container *ngTemplateOutlet="suffix"></ng-container>
     </div>
-    <div class="igx-input-group__border" *ngIf="hasBorder"></div>
+</ng-template>
+
+<ng-template #bootstrapBundle>
+    <ng-container *ngTemplateOutlet="label"></ng-container>
+
+    <div class="igx-input-group__bundle">
+        <ng-container *ngTemplateOutlet="prefix"></ng-container>
+
+        <ng-container *ngTemplateOutlet="input"></ng-container>
+
+        <ng-container *ngTemplateOutlet="suffix"></ng-container>
+    </div>
+</ng-template>
+
+<ng-template #bundle>
+    <ng-container [ngSwitch]="type">
+        <ng-container *ngSwitchCase="'bootstrap'">
+            <ng-container *ngTemplateOutlet="bootstrapBundle"></ng-container>
+        </ng-container>
+
+        <ng-container *ngSwitchCase="'fluent'">
+            <ng-container *ngTemplateOutlet="fluentBundle"></ng-container>
+        </ng-container>
+
+        <ng-container *ngSwitchCase="'indigo'">
+            <ng-container *ngTemplateOutlet="fluentBundle"></ng-container>
+        </ng-container>
+
+        <ng-container *ngSwitchDefault>
+            <ng-container *ngTemplateOutlet="materialBundle"></ng-container>
+        </ng-container>
+    </ng-container>
 </ng-template>