chore(update angular): update to Angular 11 (DSP-1472)

angular.json

@@ -50,7 +50,6 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
               "extractLicenses": true,
               "vendorChunk": false,
@@ -141,7 +140,7 @@
       "prefix": "dsp",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-ng-packagr:build",
+          "builder": "@angular-devkit/build-angular:ng-packagr",
           "options": {
             "tsConfig": "projects/dsp-ui/tsconfig.lib.json",
             "project": "projects/dsp-ui/ng-package.json"

package.json

@@ -35,22 +35,22 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~10.2.4",
-    "@angular/cdk": "^10.2.7",
-    "@angular/common": "~10.2.4",
-    "@angular/compiler": "~10.2.4",
-    "@angular/core": "~10.2.4",
-    "@angular/forms": "~10.2.4",
-    "@angular/material": "^10.2.7",
-    "@angular/platform-browser": "~10.2.4",
-    "@angular/platform-browser-dynamic": "~10.2.4",
-    "@angular/router": "~10.2.4",
+    "@angular/animations": "~11.2.6",
+    "@angular/cdk": "^11.2.5",
+    "@angular/common": "~11.2.6",
+    "@angular/compiler": "~11.2.6",
+    "@angular/core": "~11.2.6",
+    "@angular/forms": "~11.2.6",
+    "@angular/material": "^11.2.5",
+    "@angular/platform-browser": "~11.2.6",
+    "@angular/platform-browser-dynamic": "~11.2.6",
+    "@angular/router": "~11.2.6",
     "@ckeditor/ckeditor5-angular": "^1.2.3",
     "@dasch-swiss/dsp-js": "^2.2.0",
     "ckeditor5-custom-build": "github:dasch-swiss/ckeditor_custom_build",
     "jdnconvertiblecalendar": "^0.0.6",
-    "jdnconvertiblecalendardateadapter": "^0.0.15",
-    "ngx-color-picker": "^10.0.1",
+    "jdnconvertiblecalendardateadapter": "^0.0.16",
+    "ngx-color-picker": "^11.0.0",
     "openseadragon": "^2.4.2",
     "rxjs": "~6.5.5",
     "svg-overlay": "github:openseadragon/svg-overlay",
@@ -59,23 +59,22 @@
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1002.3",
-    "@angular-devkit/build-ng-packagr": "~0.1002.3",
-    "@angular/cli": "~10.2.3",
-    "@angular/compiler-cli": "~10.2.4",
-    "@angular/language-service": "~10.2.4",
-    "@types/jasmine": "~3.3.8",
+    "@angular-devkit/build-angular": "~0.1102.5",
+    "@angular/cli": "~11.2.5",
+    "@angular/compiler-cli": "~11.2.6",
+    "@angular/language-service": "~11.2.6",
+    "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",
-    "codelyzer": "^5.1.2",
-    "jasmine-core": "~3.5.0",
+    "codelyzer": "^6.0.0",
+    "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~5.0.0",
+    "karma": "~5.1.0",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "~3.0.2",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
-    "ng-packagr": "^10.1.0",
+    "ng-packagr": "^11.2.4",
     "protractor": "~7.0.0",
     "ts-node": "~8.9.0",
     "tslint": "~6.1.0",

projects/dsp-ui/package.json

@@ -20,14 +20,14 @@
     "tslib": "^2.0.0"
   },
   "peerDependencies": {
-    "@angular/common": "~10.2.4",
-    "@angular/core": "~10.2.4",
-    "@angular/material": "^10.2.7",
-    "@angular/cdk": "^10.2.7",
+    "@angular/common": "~11.2.6",
+    "@angular/core": "~11.2.6",
+    "@angular/material": "^11.2.5",
+    "@angular/cdk": "^11.2.5",
     "@dasch-swiss/dsp-js": "^2.2.0",
     "jdnconvertiblecalendar": "^0.0.6",
-    "jdnconvertiblecalendardateadapter": "^0.0.15",
-    "ngx-color-picker": "^10.0.1",
+    "jdnconvertiblecalendardateadapter": "^0.0.16",
+    "ngx-color-picker": "^11.0.0",
     "openseadragon": "^2.4.2",
     "svg-overlay": "github:openseadragon/svg-overlay",
     "@ckeditor/ckeditor5-angular": "^1.2.3",

projects/dsp-ui/src/lib/action/components/confirmation-dialog/confirmation-dialog.component.spec.ts

@@ -2,7 +2,7 @@ import { OverlayContainer } from '@angular/cdk/overlay';
 import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { Component, Input, OnInit } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatButtonHarness } from '@angular/material/button/testing';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { MatDialogHarness } from '@angular/material/dialog/testing';
@@ -62,7 +62,7 @@ describe('ConfirmationDialogComponent', () => {
     let rootLoader: HarnessLoader;
     let overlayContainer: OverlayContainer;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [
                 ConfirmationDialogComponent,

projects/dsp-ui/src/lib/action/components/confirmation-dialog/confirmation-message/confirmation-message.component.spec.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { MockResource, ReadIntValue } from '@dasch-swiss/dsp-js';
 import { ConfirmationMessageComponent } from './confirmation-message.component';
@@ -28,7 +28,7 @@ describe('ConfirmationMessageComponent', () => {
     let testHostComponent: ConfirmationMessageTestHostComponent;
     let testHostFixture: ComponentFixture<ConfirmationMessageTestHostComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [
                 ConfirmationMessageTestHostComponent,

projects/dsp-ui/src/lib/action/components/login-form/login-form.component.spec.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
@@ -52,7 +52,7 @@ describe('LoginFormComponent', () => {
 
     let sessionService: SessionService;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         const dspConnSpy = {
             admin: {
                 usersEndpoint: jasmine.createSpyObj('usersEndpoint', ['getUser'])

projects/dsp-ui/src/lib/action/components/message/message.component.spec.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { async, ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
 import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
@@ -97,7 +97,7 @@ describe('MessageComponent', () => {
     let status: StatusMsg;
     let apiResonseError: ApiResponseError;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             imports: [
                 MatCardModule,

projects/dsp-ui/src/lib/action/components/progress-indicator/progress-indicator.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
@@ -28,7 +28,7 @@ describe('ProgressIndicatorComponent', () => {
     let testHostComponent: TestHostComponent;
     let testHostFixture: ComponentFixture<TestHostComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             imports: [
                 MatIconModule

projects/dsp-ui/src/lib/action/components/select-project/select-project.component.spec.ts

@@ -2,7 +2,7 @@ import { OverlayModule } from '@angular/cdk/overlay';
 import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { Component, ViewChild } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatAutocompleteHarness } from '@angular/material/autocomplete/testing';
@@ -45,7 +45,7 @@ describe('SelectProjectComponent', () => {
     let dspConnSpy;
     let loader: HarnessLoader;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
 
         dspConnSpy = {
             admin: {

projects/dsp-ui/src/lib/action/components/sort-button/sort-button.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
@@ -93,7 +93,7 @@ describe('SortButtonComponent', () => {
         { firstname: 'd', lastname: 'w', creator: 'Charles M. Schulz' },
     ];
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             imports: [
                 MatIconModule,

projects/dsp-ui/src/lib/action/components/string-literal-input/string-literal-input.component.spec.ts

@@ -1,7 +1,7 @@
 import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { Component, DebugElement, OnInit, ViewChild } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatButtonHarness } from '@angular/material/button/testing';
@@ -76,7 +76,7 @@ describe('StringLiteralInputComponent', () => {
     let sliMenuNativeElement;
     let langButton;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
 
         // empty spy object to use in the providers for the SessionService injection
         const dspConnSpy = { };

projects/dsp-ui/src/lib/action/directives/gnd/gnd.directive.spec.ts

@@ -1,5 +1,5 @@
 import { Component, DebugElement, ElementRef, OnInit } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { GndDirective } from './gnd.directive';
 
@@ -58,7 +58,7 @@ class MockElementRef implements ElementRef {
 
 describe('GndDirective', () => {
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [TestGnd1Component, TestGnd2Component, TestGnd3Component, TestGnd4Component, TestGnd5Component, GndDirective],
             providers: [

projects/dsp-ui/src/lib/action/pipes/string-transformation/stringify-string-literal.pipe.spec.ts

@@ -1,4 +1,4 @@
-import { async, TestBed } from '@angular/core/testing';
+import { waitForAsync, TestBed } from '@angular/core/testing';
 import { StringLiteral } from '@dasch-swiss/dsp-js';
 import { DspApiConnectionToken } from '../../../core/core.module';
 import { Session, SessionService } from '../../../core/session.service';
@@ -9,7 +9,7 @@ describe('StringifyStringLiteralPipe', () => {
     let labels: StringLiteral[];
     let service: SessionService;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
 
         // empty spy object to use in the providers for the SessionService injection
         const dspConnSpy = { };

projects/dsp-ui/src/lib/core/session.service.spec.ts

@@ -1,4 +1,4 @@
-import { async, TestBed } from '@angular/core/testing';
+import { waitForAsync, TestBed } from '@angular/core/testing';
 import {
     ApiResponseData,
     AuthenticationEndpointV2,
@@ -13,7 +13,7 @@ import { Session, SessionService } from './session.service';
 describe('SessionService', () => {
     let service: SessionService;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
 
         const dspConnSpy = {
             admin: {

projects/dsp-ui/src/lib/search/advanced-search/advanced-search.component.spec.ts

@@ -1,7 +1,7 @@
 import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonHarness } from '@angular/material/button/testing';
 import { MatIconModule } from '@angular/material/icon';
@@ -109,7 +109,7 @@ describe('AdvancedSearchComponent', () => {
 
     let loader: HarnessLoader;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
 
         const dspConnSpy = {
             v2: {

projects/dsp-ui/src/lib/search/advanced-search/select-ontology/select-ontology.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { SelectOntologyComponent } from './select-ontology.component';
 import { Component, Inject, OnInit, ViewChild } from '@angular/core';
@@ -49,7 +49,7 @@ describe('SelectOntologyComponent', () => {
 
     let loader: HarnessLoader;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             imports: [
                 BrowserAnimationsModule,

projects/dsp-ui/src/lib/search/advanced-search/select-property/select-property.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { SelectPropertyComponent } from './select-property.component';
 import { Component, Inject, Input, OnInit, ViewChild } from '@angular/core';
@@ -80,7 +80,7 @@ describe('SelectPropertyComponent', () => {
 
     let loader: HarnessLoader;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             imports: [
                 BrowserAnimationsModule,
@@ -120,7 +120,7 @@ describe('SelectPropertyComponent', () => {
         expect(testHostComponent.selectProperty.properties.length).toEqual(22);
     });
 
-    it('should add a new control to the parent form', async(() => {
+    it('should add a new control to the parent form', waitForAsync(() => {
 
         // the control is added to the form as an async operation
         // https://angular.io/guide/testing#async-test-with-async
@@ -244,7 +244,7 @@ describe('SelectPropertyComponent', () => {
         expect(testHostComponent.selectProperty.propertySelected).toBeUndefined();
     });
 
-    it('should remove the control from the parent form and unsubscribe from value changes when destroyed', async(() => {
+    it('should remove the control from the parent form and unsubscribe from value changes when destroyed', waitForAsync(() => {
 
         expect(testHostComponent.selectProperty.propertyChangesSubscription.closed).toBe(false);
 

projects/dsp-ui/src/lib/search/advanced-search/select-property/specify-property-value/search-boolean-value/search-boolean-value.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { SearchBooleanValueComponent } from './search-boolean-value.component';
 import { Component, Inject, OnInit, ViewChild } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
@@ -37,7 +37,7 @@ describe('SearchBooleanValueComponent', () => {
 
     let loader: HarnessLoader;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             imports: [
                 BrowserAnimationsModule,

projects/dsp-ui/src/lib/search/advanced-search/select-property/specify-property-value/search-date-value/search-date-value.component.spec.ts

@@ -1,7 +1,7 @@
 import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { Component, Inject, OnInit, ViewChild } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatInputModule } from '@angular/material/input';
@@ -38,7 +38,7 @@ describe('SearchDateValueComponent', () => {
 
     let loader: HarnessLoader;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             imports: [
                 BrowserAnimationsModule,

projects/dsp-ui/src/lib/search/advanced-search/select-property/specify-property-value/search-decimal-value/search-decimal-value.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { SearchDecimalValueComponent } from './search-decimal-value.component';
 import { Component, Inject, OnInit, ViewChild } from '@angular/core';
@@ -37,7 +37,7 @@ describe('SearchDecimalValueComponent', () => {
 
     let loader: HarnessLoader;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             imports: [
                 BrowserAnimationsModule,