feat: upgrade angular 11 (#330)

package.json

@@ -22,18 +22,18 @@
     "material-colors": "1.2.6"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "0.1002.0",
-    "@angular/animations": "10.2.2",
-    "@angular/cli": "10.2.0",
-    "@angular/common": "10.2.2",
-    "@angular/compiler-cli": "10.2.2",
-    "@angular/compiler": "10.2.2",
-    "@angular/core": "10.2.2",
-    "@angular/forms": "10.2.2",
-    "@angular/language-service": "10.2.2",
-    "@angular/platform-browser-dynamic": "10.2.2",
-    "@angular/platform-browser": "10.2.2",
-    "@angular/router": "10.2.2",
+    "@angular-devkit/build-angular": "0.1100.3",
+    "@angular/animations": "11.0.3",
+    "@angular/cli": "11.0.3",
+    "@angular/common": "11.0.3",
+    "@angular/compiler-cli": "11.0.3",
+    "@angular/compiler": "11.0.3",
+    "@angular/core": "11.0.3",
+    "@angular/forms": "11.0.3",
+    "@angular/language-service": "11.0.3",
+    "@angular/platform-browser-dynamic": "11.0.3",
+    "@angular/platform-browser": "11.0.3",
+    "@angular/router": "11.0.3",
     "@ctrl/ngx-github-buttons": "6.0.3",
     "@types/fs-extra": "9.0.3",
     "@types/jasmine": "3.6.1",
@@ -50,7 +50,7 @@
     "karma-jasmine-html-reporter": "1.5.4",
     "karma-jasmine": "4.0.1",
     "karma": "5.2.3",
-    "ng-packagr": "10.1.2",
+    "ng-packagr": "11.0.3",
     "rxjs": "6.6.3",
     "ts-node": "9.0.0",
     "tslib": "2.0.3",

src/app/app.component.spec.ts

@@ -1,16 +1,16 @@
-import { async, TestBed } from '@angular/core/testing';
+import { TestBed, waitForAsync } from '@angular/core/testing';
 
 import { AppComponent } from './app.component';
 import { AppModule } from './app.module';
 
 describe('AppComponent', () => {
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [],
       imports: [AppModule],
     }).compileComponents();
   }));
-  it('should create the app', async(() => {
+  it('should create the app', waitForAsync(() => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
     fixture.detectChanges();

src/lib/components/alpha/alpha.spec.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { async, TestBed } from '@angular/core/testing';
+import { TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
 
@@ -14,7 +14,7 @@ export const red = {
 
 
 describe('AlphaComponent', () => {
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [AlphaTestApp],
       imports: [ColorAlphaModule],

src/lib/components/block/block.spec.ts

@@ -1,11 +1,11 @@
 import { Component } from '@angular/core';
-import { async, TestBed } from '@angular/core/testing';
+import { TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
 import { BlockComponent, ColorBlockModule } from './block.component';
 
 describe('BlockComponent', () => {
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [BlockTestApp],
       imports: [ColorBlockModule],

src/lib/components/chrome/chrome.spec.ts

@@ -1,17 +1,17 @@
 import { Component } from '@angular/core';
-import { async, TestBed } from '@angular/core/testing';
+import { TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
 import { ColorChromeModule } from './chrome.component';
 
 describe('BlockComponent', () => {
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ChromeTestApp],
       imports: [ColorChromeModule],
     }).compileComponents();
   }));
-  it(`should apply className to root element`, async(() => {
+  it(`should apply className to root element`, waitForAsync(() => {
     const fixture = TestBed.createComponent(ChromeTestApp);
     fixture.detectChanges();
     const divDebugElement = fixture.debugElement.query(By.css('.chrome-picker'));

src/lib/components/circle/circle.spec.ts

@@ -1,17 +1,17 @@
 import { Component } from '@angular/core';
-import { async, TestBed } from '@angular/core/testing';
+import { TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
 import { ColorCircleModule } from './circle.component';
 
 describe('BlockComponent', () => {
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [CircleTestApp],
       imports: [ColorCircleModule],
     }).compileComponents();
   }));
-  it(`should apply className to root element`, async(() => {
+  it(`should apply className to root element`, waitForAsync(() => {
     const fixture = TestBed.createComponent(CircleTestApp);
     fixture.detectChanges();
     const divDebugElement = fixture.debugElement.query(By.css('.circle-picker'));

src/lib/components/compact/compact.spec.ts

@@ -1,17 +1,17 @@
 import { Component } from '@angular/core';
-import { async, TestBed } from '@angular/core/testing';
+import { TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
 import { ColorCompactModule } from './compact.component';
 
 describe('CompactComponent', () => {
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [CompactTestApp],
       imports: [ColorCompactModule],
     }).compileComponents();
   }));
-  it(`should apply className to root element`, async(() => {
+  it(`should apply className to root element`, waitForAsync(() => {
     const fixture = TestBed.createComponent(CompactTestApp);
     fixture.detectChanges();
     const divDebugElement = fixture.debugElement.query(By.css('.compact-picker'));

src/lib/components/github/github.spec.ts

@@ -1,17 +1,17 @@
 import { Component } from '@angular/core';
-import { async, TestBed } from '@angular/core/testing';
+import { TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
 import { ColorGithubModule } from './github.component';
 
 describe('BlockComponent', () => {
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [GithubTestApp],
       imports: [ColorGithubModule],
     }).compileComponents();
   }));
-  it(`should apply className to root element`, async(() => {
+  it(`should apply className to root element`, waitForAsync(() => {
     const fixture = TestBed.createComponent(GithubTestApp);
     fixture.detectChanges();
     const divDebugElement = fixture.debugElement.query(By.css('.github-picker'));

src/lib/components/hue/hue.spec.ts

@@ -1,17 +1,17 @@
 import { Component } from '@angular/core';
-import { async, TestBed } from '@angular/core/testing';
+import { TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
 import { ColorHueModule } from './hue-picker.component';
 
 describe('HuePickerComponent', () => {
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [HueTestApp],
       imports: [ColorHueModule],
     }).compileComponents();
   }));
-  it(`should apply className to root element`, async(() => {
+  it(`should apply className to root element`, waitForAsync(() => {
     const fixture = TestBed.createComponent(HueTestApp);
     fixture.detectChanges();
     const divDebugElement = fixture.debugElement.query(By.css('.hue-picker'));

src/lib/components/material/material.spec.ts

@@ -1,17 +1,17 @@
 import { Component } from '@angular/core';
-import { async, TestBed } from '@angular/core/testing';
+import { TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
 import { ColorMaterialModule } from './material.component';
 
 describe('MaterialComponent', () => {
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [MaterialTestApp],
       imports: [ColorMaterialModule],
     }).compileComponents();
   }));
-  it(`should apply className to root element`, async(() => {
+  it(`should apply className to root element`, waitForAsync(() => {
     const fixture = TestBed.createComponent(MaterialTestApp);
     fixture.detectChanges();
     const divDebugElement = fixture.debugElement.query(By.css('.material-picker'));

src/lib/components/photoshop/photoshop.spec.ts

@@ -1,17 +1,17 @@
 import { Component } from '@angular/core';
-import { async, TestBed } from '@angular/core/testing';
+import { TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
 import { ColorPhotoshopModule } from './photoshop.component';
 
 describe('PhotoshopComponent', () => {
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [PhotoshopTestApp],
       imports: [ColorPhotoshopModule],
     }).compileComponents();
   }));
-  it('should apply className to root element', async(() => {
+  it('should apply className to root element', waitForAsync(() => {
     const fixture = TestBed.createComponent(PhotoshopTestApp);
     fixture.detectChanges();
     const divDebugElement = fixture.debugElement.query(By.css('.photoshop-picker'));

src/lib/components/shade/shade-picker.spec.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { async, TestBed } from '@angular/core/testing';
+import { TestBed, waitForAsync } from '@angular/core/testing';
 
 import { ColorShadeModule } from './shade-picker.component';
 
@@ -12,7 +12,7 @@ export const red = {
 
 
 describe('AlphaComponent', () => {
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ColorShadeSliderApp],
       imports: [ColorShadeModule],

src/lib/components/sketch/sketch.spec.ts

@@ -1,17 +1,17 @@
 import { Component } from '@angular/core';
-import { async, TestBed } from '@angular/core/testing';
+import { TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
 import { ColorSketchModule } from './sketch.component';
 
 describe('SketchComponent', () => {
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [SketchTestApp],
       imports: [ColorSketchModule],
     }).compileComponents();
   }));
-  it(`should apply className to root element`, async(() => {
+  it(`should apply className to root element`, waitForAsync(() => {
     const fixture = TestBed.createComponent(SketchTestApp);
     fixture.detectChanges();
     const divDebugElement = fixture.debugElement.query(By.css('.sketch-picker'));

src/lib/components/slider/slider.spec.ts

@@ -1,17 +1,17 @@
 import { Component } from '@angular/core';
-import { async, TestBed } from '@angular/core/testing';
+import { TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
 import { ColorSliderModule } from './slider.component';
 
 describe('SliderComponent', () => {
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [SliderTestApp],
       imports: [ColorSliderModule],
     }).compileComponents();
   }));
-  it(`should apply className to root element`, async(() => {
+  it(`should apply className to root element`, waitForAsync(() => {
     const fixture = TestBed.createComponent(SliderTestApp);
     fixture.detectChanges();
     const divDebugElement = fixture.debugElement.query(By.css('.slider-picker'));

src/lib/components/swatches/swatches.spec.ts

@@ -1,16 +1,16 @@
 import { Component } from '@angular/core';
-import { async, TestBed } from '@angular/core/testing';
+import { TestBed, waitForAsync } from '@angular/core/testing';
 
 import { ColorSwatchesModule } from './swatches.component';
 
 describe('SwatchesComponent', () => {
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [SwatchTestApp],
       imports: [ColorSwatchesModule],
     }).compileComponents();
   }));
-  it(`should apply className to root element`, async(() => {
+  it(`should apply className to root element`, waitForAsync(() => {
     const fixture = TestBed.createComponent(SwatchTestApp);
     fixture.detectChanges();
     const compiled = fixture.nativeElement;

src/lib/components/twitter/twitter.spec.ts

@@ -1,17 +1,17 @@
 import { Component } from '@angular/core';
-import { async, TestBed } from '@angular/core/testing';
+import { TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
 import { ColorTwitterModule } from './twitter.component';
 
 describe('TwitterComponent', () => {
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [TwitterTestApp],
       imports: [ColorTwitterModule],
     }).compileComponents();
   }));
-  it(`should apply className to root element`, async(() => {
+  it(`should apply className to root element`, waitForAsync(() => {
     const fixture = TestBed.createComponent(TwitterTestApp);
     fixture.detectChanges();
     const divDebugElement = fixture.debugElement.query(By.css('.twitter-picker'));