Merge pull request #8791 from IgniteUI/simeonoff/input-runtime-themes

refactor(input-group): allow setting theme at runtime

Author: kdinev

CHANGELOG.md

@@ -15,6 +15,8 @@ All notable changes for each version of this project will be documented in this
     - Added new property `alignment` that determines the radio group alignment. Available options are `horizontal` (default) and `vertical`.
 - `IgxDialog`
     - Added new `onOpened` and `onClosed` events.
+- `IgxInputGroup`
+    - Added new property `theme` that allows you to set the theme explicitly and at runtime.
 
 ## 11.0.4
 

projects/igniteui-angular/src/lib/input-group/README.md

@@ -48,6 +48,7 @@ Ignite UI for Angular Hint provides a helper text placed below the input. The hi
 | Name | Description |
 | :--- | :--- |
 | type | How the input will be styled. The allowed values are line, box, border and search. The default is line.|
+| theme | Allows the user to change the theme of the input group. |
 | position | **`Hint` API**. Where the hint will be placed. The allowed values are start and end. The default value is start. |
 | displayDensity | Allows the user to change the default display density of the input group. |
 

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

@@ -49,14 +49,14 @@ export type IgxInputGroupTheme = keyof typeof IgxInputGroupThemeEnum;
     selector: 'igx-input-group',
     templateUrl: 'input-group.component.html',
     providers: [
-        { provide: IgxInputGroupBase, useExisting: IgxInputGroupComponent }
+        { provide: IgxInputGroupBase, useExisting: IgxInputGroupComponent },
     ],
 })
 export class IgxInputGroupComponent extends DisplayDensityBase
     implements IgxInputGroupBase, AfterContentInit {
     private _type: IgxInputGroupType = null;
     private _filled = false;
-    private _variant: IgxInputGroupTheme = 'material';
+    private _variant: IgxInputGroupTheme;
 
     /**
      * An @Input property that sets the value of `id` attribute. If not provided it will be automatically generated.
@@ -215,7 +215,31 @@ export class IgxInputGroupComponent extends DisplayDensityBase
         return this._type || this._inputGroupType || 'line';
     }
 
-    /** @hidden @internal */
+    /**
+     * Sets the theme of the input.
+     * Allowed values of type IgxInputGroupTheme.
+     * ```typescript
+     * @ViewChild("MyInputGroup")
+     * public inputGroup: IgxInputGroupComponent;
+     * ngAfterViewInit() {
+     *  let inputTheme = 'fluent';
+     * }
+     */
+    @Input()
+    public set theme(variant: IgxInputGroupTheme) {
+        this._variant = variant;
+    }
+
+    /**
+     * Returns the theme of the input.
+     * The returned value is of tyep IgxInputGroupType.
+     * ```typescript
+     * @ViewChild("MyInputGroup")
+     * public inputGroup: IgxInputGroupComponent;
+     * ngAfterViewInit() {
+     *  let inputTheme = this.inputGroup.theme;
+     * }
+     */
     public get theme(): IgxInputGroupTheme {
         return this._variant;
     }
@@ -253,11 +277,13 @@ export class IgxInputGroupComponent extends DisplayDensityBase
     }
 
     ngAfterContentInit() {
-        const variant = this.document.defaultView
-            .getComputedStyle(this.element.nativeElement)
-            .getPropertyValue('--igx-input-group-variant')
-            .trim();
-        this._variant = variant as IgxInputGroupTheme;
+        if (!this.theme) {
+            const variant = this.document.defaultView
+                .getComputedStyle(this.element.nativeElement)
+                .getPropertyValue('--igx-input-group-variant')
+                .trim();
+            this._variant = variant as IgxInputGroupTheme;
+        }
     }
     /**
      * Returns whether the `IgxInputGroupComponent` has hints.

src/app/input-group/input-group.sample.html

@@ -60,7 +60,7 @@
             <br />
 
             <!-- text field prefix/suffix -->
-            <igx-input-group [displayDensity]="density" [type]="inputType">
+            <igx-input-group [displayDensity]="density" [type]="inputType" theme="fluent">
                 <label igxLabel>Web address</label>
                 <igx-prefix>
                     http://