Merge branch 'master' into simeonoff/fix-8794

Author: zdrawku

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/card/card.component.ts

@@ -243,7 +243,7 @@ export class IgxCardComponent {
 
     /**
      * An @Input property that sets the value of the `type` attribute of the card.
-     * By default the value is set to `default`. You can make the card use the
+     * By default the value is set to `elevated`. You can make the card use the
      * outlined style by setting the value to `outlined`.
      *
      * @example

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.

projects/igniteui-angular/src/lib/slider/label/thumb-label.component.ts

@@ -2,6 +2,9 @@ import { Component, Input, TemplateRef, HostBinding, ElementRef } from '@angular
 import { SliderHandle } from '../slider.common';
 import { IgxSliderThumbComponent } from '../thumb/thumb-slider.component';
 
+/**
+ * @hidden
+ */
 @Component({
     selector: 'igx-thumb-label',
     templateUrl: 'thumb-label.component.html'

projects/igniteui-angular/src/lib/slider/ticks/tick.pipe.ts

@@ -1,5 +1,8 @@
 import { Pipe, PipeTransform } from '@angular/core';
 
+/**
+ * @hidden
+ */
 @Pipe({
     name: 'spreadTickLabels'
 })

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://