Merge branch 'master' into dkamburov/kb-test-pinning

Author: kdinev

CHANGELOG.md

@@ -33,6 +33,7 @@ All notable changes for each version of this project will be documented in this
     public pinningConfiguration: IPinningConfig = { columns: ColumnPinningPosition.End };
     ```
     - Added functionality for column selection.
+     - `columnSelection` property has been added. It accepts GridSelection mode enumeration. Grid selection mode could be none, single or multiple.
     - `selected` property has been added to the IgxColumnComponent; Allows you to set whether the column is selected.
     - `selectable` property has been added to the IgxColumnComponent; Allows you to set whether the column is selectable.
     - `onColumnSelectionChange` event is added for the `IgxGrid`. It is emitted when the column selection is changed.
@@ -46,6 +47,9 @@ All notable changes for each version of this project will be documented in this
 - `IgxCombo`:
     - Added `autoFocusSearch` input that allows to manipulate the combo's opening behavior. When the property is `true` (by default), the combo's search input is focused on open. When set to `false`, the focus goes to the combo items container, which can be used to prevent the software keyboard from activating on mobile devices when opening the combo.
 
+- `IgxToast`:
+    - Added functionality for displaying various content into the toast component. It also allows users to access toast styles through its host element.
+
 ### RTL Support
 - `igxSlider` have full right-to-left (RTL) support.
 

package-lock.json

@@ -26,7 +26,7 @@
     "build:migration": "gulp copyMigrations && tsc --listEmittedFiles --project ./projects/igniteui-angular/migrations/tsconfig.json",
     "build:schematics": "gulp copySchematics && tsc --listEmittedFiles --project ./projects/igniteui-angular/schematics/tsconfig.json",
     "build:docs": "sassdoc projects/igniteui-angular/src/lib/core/styles && gulp typedocBuildTheme",
-    "lint:lib": "tslint 'projects/igniteui-angular/src/**/*.ts' && stylelint 'projects/igniteui-angular/src/lib/core/styles'",
+    "lint:lib": "tslint 'projects/igniteui-angular/src/**/*.ts' && stylelint \"projects/igniteui-angular/src/lib/core/styles\"",
     "typedoc:dev": "gulp typedocServe",
     "typedoc-build:export": "gulp exportTypedocJson ",
     "typedoc-build:import": "gulp importTypedocJson",
@@ -44,14 +44,14 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^9.0.0",
-    "@angular/common": "^9.0.0",
-    "@angular/compiler": "^9.0.0",
-    "@angular/core": "^9.0.0",
-    "@angular/forms": "^9.0.0",
-    "@angular/platform-browser": "^9.0.0",
-    "@angular/platform-browser-dynamic": "^9.0.0",
-    "@angular/router": "^9.0.0",
+    "@angular/animations": "^9.1.0",
+    "@angular/common": "^9.1.0",
+    "@angular/compiler": "^9.1.0",
+    "@angular/core": "^9.1.0",
+    "@angular/forms": "^9.1.0",
+    "@angular/platform-browser": "^9.1.0",
+    "@angular/platform-browser-dynamic": "^9.1.0",
+    "@angular/router": "^9.1.0",
     "@types/hammerjs": "^2.0.36",
     "@types/source-map": "0.5.2",
     "classlist.js": "^1.1.20150312",
@@ -65,12 +65,12 @@
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.900.1",
-    "@angular-devkit/build-ng-packagr": "~0.900.1",
-    "@angular-devkit/schematics": "^9.0.1",
-    "@angular/cli": "~9.0.1",
-    "@angular/compiler-cli": "^9.0.0",
-    "@angular/language-service": "^9.0.0",
+    "@angular-devkit/build-angular": "~0.901.0",
+    "@angular-devkit/build-ng-packagr": "~0.901.0",
+    "@angular-devkit/schematics": "^9.1.0",
+    "@angular/cli": "~9.1.0",
+    "@angular/compiler-cli": "^9.1.0",
+    "@angular/language-service": "^9.1.0",
     "@angularclass/hmr": "^2.1.3",
     "@types/jasmine": "~3.3.5",
     "@types/jasminewd2": "~2.0.6",
@@ -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