Merge branch 'master' into SIvanova/icon-inputs-names

CHANGELOG.md

@@ -20,6 +20,13 @@ All notable changes for each version of this project will be documented in this
     - **Renamed inputs**
         `isActive` to `active`
         `fontSet` to `family`
+- `IgxToast`
+    - **Breaking Change** - 
+    `show` and `hide` methods have been deprecated. `open` and `close` should be used instead.
+    `onShowing`,`onShown`,`onHiding` and `onHiden` events have been deprecated. `onOpening`, `onOpened`, `onClosing` and `onClosed`should be used instead.
+- `IgxInputGroup`
+    - Added new property `theme` that allows you to set the theme explicitly and at runtime.
+
 ## 11.0.4
 
 ### General

projects/igniteui-angular/src/lib/buttonGroup/buttonGroup.component.ts

@@ -216,7 +216,7 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
      * @ViewChild("toast")
      * private toast: IgxToastComponent;
      * public onSelect(buttongroup){
-     *     this.toast.show()
+     *     this.toast.open()
      * }
      *  //...
      * ```
@@ -233,7 +233,7 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
      *  @ViewChild("toast")
      *  private toast: IgxToastComponent;
      *  public onUnselect(buttongroup){
-     *     this.toast.show()
+     *     this.toast.open()
      * }
      *  //...
      * ```

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/directives/toggle/toggle.directive.ts

@@ -219,17 +219,15 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
             this._overlayId = this.overlayService.attach(this.elementRef, overlaySettings);
         }
 
-        this._collapsed = false;
-        this.cdr.detectChanges();
-
         const openEventArgs: ToggleViewCancelableEventArgs = { cancel: false, owner: this, id: this._overlayId };
         this.onOpening.emit(openEventArgs);
         if (openEventArgs.cancel) {
-            this._collapsed = true;
-            this.cdr.detectChanges();
             return;
         }
 
+        this._collapsed = false;
+        this.cdr.detectChanges();
+
         this.unsubscribe();
 
         this._overlayAppendedSub = this.overlayService.onAppended.pipe(...this._overlaySubFilter).subscribe(() => {

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/radio/radio.component.html

@@ -9,8 +9,7 @@
     [attr.aria-checked]="checked"
     [attr.aria-labelledby]="ariaLabelledBy"
     [attr.aria-label]="ariaLabel"
-    (click)="_onRadioClick($event)"
-    (change)="_onRadioChange($event)"
+    (click)="_clicked($event)"
     (focus)="onFocus()"
     (blur)="onBlur()" />
 
@@ -24,8 +23,8 @@
 </label>
 
 <span #placeholderLabel
+    (click)="_clicked($event)"
     [id]="labelId"
-    [class]="labelClass"
-    (click)="_onLabelClick()">
+    [class]="labelClass">
     <ng-content></ng-content>
 </span>

projects/igniteui-angular/src/lib/radio/radio.component.spec.ts

@@ -133,32 +133,30 @@ describe('IgxRadio', () => {
         expect(nativeRadio.getAttribute('aria-label')).toMatch(fixture.componentInstance.label);
     });
 
-    it('Disabled state', () => {
+    it('Disabled state', fakeAsync(() => {
         const fixture = TestBed.createComponent(DisabledRadioComponent);
         fixture.detectChanges();
-
         const testInstance = fixture.componentInstance;
-        const radios = testInstance.radios.toArray();
 
         // get the disabled radio button
-        const radioInstance = radios[1];
-        const nativeRadio = radioInstance.nativeRadio.nativeElement;
-        const nativeLabel = radioInstance.nativeLabel.nativeElement;
-        const placeholderLabel = radioInstance.placeholderLabel.nativeElement;
+        const componentInstance = testInstance.radios.last;
+        const radio = componentInstance.nativeRadio.nativeElement;
 
-        expect(radios.length).toEqual(2);
-        expect(radioInstance.disabled).toBe(true);
-        expect(nativeRadio.disabled).toBe(true);
+        expect(componentInstance.disabled).toBe(true);
+        expect(radio.disabled).toBe(true);
 
-        nativeRadio.dispatchEvent(new Event('change'));
-        nativeLabel.click();
-        placeholderLabel.click();
+        fixture.detectChanges();
+
+        const btn = fixture.debugElement.queryAll(By.css('igx-radio'))[1];
+        btn.nativeElement.click();
+        tick();
         fixture.detectChanges();
 
         // Should not update
-        expect(nativeRadio.checked).toBe(false);
+        expect(componentInstance.nativeRadio.nativeElement.checked).toBe(false);
+        expect(radio.checked).toBe(false);
         expect(testInstance.selected).not.toEqual('Bar');
-    });
+    }));
 
     it('Required state', () => {
         const fixture = TestBed.createComponent(RequiredRadioComponent);