Merge branch 'master' into hPopov/fix-failing-HGrid-test

Author: nrobakova

package-lock.json

@@ -91,7 +91,7 @@
     "gulp-util": "^3.0.8",
     "hammer-simulator": "0.0.1",
     "igniteui-sassdoc-theme": "^1.1.2",
-    "igniteui-typedoc-theme": "^1.3.1",
+    "igniteui-typedoc-theme": "^1.3.2",
     "jasmine": "~3.4.0",
     "jasmine-core": "~3.4.0",
     "jasmine-spec-reporter": "~4.2.1",

package.json

@@ -81,12 +81,12 @@ describe('Avatar', () => {
         instance.size = IgxAvatarSize.MEDIUM;
         fixture.detectChanges();
         expect(instance.size).toEqual(IgxAvatarSize.MEDIUM);
-        expect(hostEl.classList).not.toContain(classes.medium);
+        expect(hostEl.classList).toContain(classes.medium);
 
         instance.size = IgxAvatarSize.LARGE;
         fixture.detectChanges();
         expect(instance.size).toEqual(IgxAvatarSize.LARGE);
-        expect(hostEl.classList).not.toContain(classes.large);
+        expect(hostEl.classList).toContain(classes.large);
 
         instance.size = 'nonsense' as any;
         fixture.detectChanges();

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

@@ -1,6 +1,5 @@
 import { CommonModule } from '@angular/common';
 import {
-    AfterViewInit,
     Component,
     ElementRef,
     HostBinding,
@@ -53,7 +52,7 @@ export enum IgxAvatarType {
     selector: 'igx-avatar',
     templateUrl: 'avatar.component.html'
 })
-export class IgxAvatarComponent implements OnInit, AfterViewInit {
+export class IgxAvatarComponent implements OnInit {
 
     /**
      * This is a reference to the avatar image element in the DOM.
@@ -160,9 +159,9 @@ export class IgxAvatarComponent implements OnInit, AfterViewInit {
      * Sets the color of the avatar's initials or icon.
      *
      * @example
-     *```html
-     *<igx-avatar color="blue"></igx-avatar>
-     *```
+     * ```html
+     * <igx-avatar color="blue"></igx-avatar>
+     * ```
      */
 
     @HostBinding('style.color')
@@ -256,6 +255,22 @@ export class IgxAvatarComponent implements OnInit, AfterViewInit {
         }
     }
 
+    /** @hidden @internal */
+    @HostBinding('class.igx-avatar--small')
+    get _isSmallSize(): boolean {
+        return this.size === 'small';
+    }
+    /** @hidden @internal */
+    @HostBinding('class.igx-avatar--medium')
+    get _isMediumSize(): boolean {
+        return this.size === 'medium';
+    }
+    /** @hidden @internal */
+    @HostBinding('class.igx-avatar--large')
+    get _isLargeSize(): boolean {
+        return this.size === 'large';
+    }
+
     /**
      * Returns the type of the avatar.
      *
@@ -280,6 +295,22 @@ export class IgxAvatarComponent implements OnInit, AfterViewInit {
         return IgxAvatarType.CUSTOM;
     }
 
+    /** @hidden @internal */
+    @HostBinding('class.igx-avatar--image')
+    get _isImageType(): boolean {
+        return this.type === IgxAvatarType.IMAGE;
+    }
+    /** @hidden @internal */
+    @HostBinding('class.igx-avatar--icon')
+    get _isIconType(): boolean {
+        return this.type === IgxAvatarType.ICON;
+    }
+    /** @hidden @internal */
+    @HostBinding('class.igx-avatar--initials')
+    get _isInitialsType(): boolean {
+        return this.type === IgxAvatarType.INITIALS;
+    }
+
     /**
      * Returns the template of the avatar.
      *
@@ -306,15 +337,6 @@ export class IgxAvatarComponent implements OnInit, AfterViewInit {
         this.roleDescription = this.getRole();
     }
 
-    /** @hidden @internal */
-    public ngAfterViewInit() {
-        if (this.type !== IgxAvatarType.CUSTOM) {
-            this.elementRef.nativeElement.classList.add(`igx-avatar--${this.type}`);
-        }
-
-        this.elementRef.nativeElement.classList.add(`igx-avatar--${this._size}`);
-    }
-
     /** @hidden @internal */
     private getRole(): string {
         switch (this.type) {

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

@@ -42,7 +42,7 @@ export enum IgxBadgeType {
 })
 export class IgxBadgeComponent {
 
-    /**
+   /**
     * Sets/gets the `id` of the badge.
     *
     * @remarks
@@ -57,7 +57,7 @@ export class IgxBadgeComponent {
     @Input()
     public id = `igx-badge-${NEXT_ID++}`;
 
-    /**
+   /**
     * Sets/gets the type of the badge.
     *
     * @remarks
@@ -72,7 +72,7 @@ export class IgxBadgeComponent {
     @Input()
     public type: string | IgxBadgeType = IgxBadgeType.PRIMARY;
 
-    /**
+   /**
     * Sets/gets the value to be displayed inside the badge.
     *
     * @remarks

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

@@ -88,27 +88,27 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
     /**
      * Allows you to set a style using the `itemContentCssClass` input.
      * The value should be the CSS class name that will be applied to the button group.
-     *```typescript
-     *public style1 = "styleClass";
-     * //..
-     *```
-     * ```html
-     *<igx-buttongroup [itemContentCssClass]="style1" [multiSelection]="!multi" [values]="alignOptions">
-     *```
+     * ```typescript
+     * public style1 = "styleClass";
+     *  //..
+     * ```
+     *  ```html
+     * <igx-buttongroup [itemContentCssClass]="style1" [multiSelection]="!multi" [values]="alignOptions">
+     * ```
      */
     @Input() set itemContentCssClass(value: string) {
         this._itemContentCssClass = value || this._itemContentCssClass;
     }
 
     /**
      * Returns the CSS class of the item content of the `IgxButtonGroup`.
-     *```typescript
-     *@ViewChild("MyChild")
-     *public buttonG: IgxButtonGroupComponent;
-     *ngAfterViewInit(){
-     *   let buttonSelect = this.buttonG.itemContentCssClass;
-     *}
-     *```
+     * ```typescript
+     *  @ViewChild("MyChild")
+     * public buttonG: IgxButtonGroupComponent;
+     * ngAfterViewInit(){
+     *    let buttonSelect = this.buttonG.itemContentCssClass;
+     * }
+     * ```
      */
     get itemContentCssClass(): string {
         return this._itemContentCssClass;
@@ -177,61 +177,61 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
      * Allows you to set the button group alignment.
      * Available options are `ButtonGroupAlignment.horizontal` (default) and `ButtonGroupAlignment.vertical`.
      * ```typescript
-     *public alignment = ButtonGroupAlignment.vertical;
+     * public alignment = ButtonGroupAlignment.vertical;
      * //..
      * ```
      * ```html
-     *<igx-buttongroup [multiSelection]="false" [values]="cities" [alignment]="alignment"></igx-buttongroup>
+     * <igx-buttongroup [multiSelection]="false" [values]="cities" [alignment]="alignment"></igx-buttongroup>
      * ```
      */
     @Input() set alignment(value: ButtonGroupAlignment) {
         this._isVertical = value === ButtonGroupAlignment.vertical;
     }
     /**
      * Returns the alignment of the `igx-buttongroup`.
-     *```typescript
-     *@ViewChild("MyChild")
-     *public buttonG: IgxButtonGroupComponent;
-     *ngAfterViewInit(){
+     * ```typescript
+     * @ViewChild("MyChild")
+     * public buttonG: IgxButtonGroupComponent;
+     * ngAfterViewInit(){
      *    let buttonAlignment = this.buttonG.alignment;
-     *}
-     *```
+     * }
+     * ```
      */
     get alignment(): ButtonGroupAlignment {
         return this._isVertical ? ButtonGroupAlignment.vertical : ButtonGroupAlignment.horizontal;
     }
 
     /**
      * An @Ouput property that emits an event when a button is selected.
-     *```typescript
-     *@ViewChild("toast")
-     *private toast: IgxToastComponent;
-     *public onSelect(buttongroup){
-     *    this.toast.show()
-     *}
-     * //...
-     *```
-     *```html
+     * ```typescript
+     * @ViewChild("toast")
+     * private toast: IgxToastComponent;
+     * public onSelect(buttongroup){
+     *     this.toast.show()
+     * }
+     *  //...
+     * ```
+     * ```html
      * <igx-buttongroup #MyChild [multiSelection]="!multi" (onSelect)="onSelect($event)"></igx-buttongroup>
-     *<igx-toast #toast message="You have made a selection!"></igx-toast>
-     *```
+     * <igx-toast #toast message="You have made a selection!"></igx-toast>
+     * ```
      */
     @Output() public onSelect = new EventEmitter<IButtonGroupEventArgs>();
 
     /**
      * An @Ouput property that emits an event when a button is deselected.
-     *```typescript
-     *@ViewChild("toast")
-     *private toast: IgxToastComponent;
-     *public onUnselect(buttongroup){
-     *    this.toast.show()
-     *}
-     * //...
-     *```
-     *```html
-     * igx-buttongroup #MyChild [multiSelection]="multi" (onUnselect)="onUnselect($event)"></igx-buttongroup>
-     *<igx-toast #toast message="You have deselected a button!"></igx-toast>
-     *```
+     * ```typescript
+     *  @ViewChild("toast")
+     *  private toast: IgxToastComponent;
+     *  public onUnselect(buttongroup){
+     *     this.toast.show()
+     * }
+     *  //...
+     * ```
+     * ```html
+     * <igx-buttongroup> #MyChild [multiSelection]="multi" (onUnselect)="onUnselect($event)"></igx-buttongroup>
+     * <igx-toast #toast message="You have deselected a button!"></igx-toast>
+     * ```
      */
     @Output() public onUnselect = new EventEmitter<IButtonGroupEventArgs>();
 
@@ -243,12 +243,12 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
      * ```
      * ```typescript
      * //...
-     *@ViewChild("MyChild")
-     *private buttonG: IgxButtonGroupComponent;
-     *ngAfterViewInit(){
+     * @ViewChild("MyChild")
+     * private buttonG: IgxButtonGroupComponent;
+     * ngAfterViewInit(){
      *    let orientation = this.buttonG.isVertical;
-     *}
-     *```
+     * }
+     * ```
      */
     public get isVertical(): boolean {
         return this._isVertical;
@@ -263,13 +263,13 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
 
     /**
      * Gets the selected button/buttons.
-     *```typescript
-     *@ViewChild("MyChild")
-     *private buttonG: IgxButtonGroupComponent;
-     *ngAfterViewInit(){
+     * ```typescript
+     * @ViewChild("MyChild")
+     * private buttonG: IgxButtonGroupComponent;
+     * ngAfterViewInit(){
      *    let selectedButton = this.buttonG.selectedButtons;
-     *}
-     *```
+     * }
+     * ```
      */
     get selectedButtons(): IgxButtonDirective[] {
         return this.buttons.filter((b, i) => {
@@ -280,14 +280,14 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
 
     /**
      * Selects a button by its index.
-     *```typescript
-     *@ViewChild("MyChild")
-     *private buttonG: IgxButtonGroupComponent;
-     *ngAfterViewInit(){
+     * ```typescript
+     * @ViewChild("MyChild")
+     * private buttonG: IgxButtonGroupComponent;
+     * ngAfterViewInit(){
      *    this.buttonG.selectButton(2);
      *    this.cdr.detectChanges();
-     *}
-     *```
+     * }
+     * ```
      * @memberOf {@link IgxButtonGroupComponent}
      */
     public selectButton(index: number) {
@@ -324,12 +324,12 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
     /**
      * Deselects a button by its index.
      * ```typescript
-     *@ViewChild("MyChild")
-     *private buttonG: IgxButtonGroupComponent;
-     *ngAfterViewInit(){
+     * @ViewChild("MyChild")
+     * private buttonG: IgxButtonGroupComponent;
+     * ngAfterViewInit(){
      *    this.buttonG.deselectButton(2);
      *    this.cdr.detectChanges();
-     *}
+     * }
      * ```
      * @memberOf {@link IgxButtonGroupComponent}
      */
@@ -412,7 +412,7 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
     }
 
     /**
-     *@hidden
+     * @hidden
      */
     public _clickHandler(event, i) {
         if (this.selectedIndexes.indexOf(i) !== -1) {