Merge pull request evt-project#109 from evt-project/feature/angular-u…

…pdate

Feature/angular update

angular.json

@@ -51,7 +51,6 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
               "extractLicenses": true,
               "vendorChunk": false,

e2e/tsconfig.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "outDir": "../out-tsc/e2e",
     "module": "commonjs",
-    "target": "es5",
+    "target": "es2018",
     "types": [
       "jasmine",
       "jasminewd2",

package.json

@@ -15,59 +15,59 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^9.0.2",
+    "@angular/animations": "^11.0.4",
     "@angular/cdk": "^9.1.0",
     "@angular/cdk-experimental": "^9.1.0",
-    "@angular/common": "^9.0.2",
-    "@angular/compiler": "^9.0.2",
-    "@angular/core": "^9.0.2",
-    "@angular/forms": "^9.0.2",
-    "@angular/localize": "^9.0.2",
-    "@angular/platform-browser": "^9.0.2",
-    "@angular/platform-browser-dynamic": "^9.0.2",
-    "@angular/router": "^9.0.2",
+    "@angular/common": "^11.0.4",
+    "@angular/compiler": "^11.0.4",
+    "@angular/core": "^11.0.4",
+    "@angular/forms": "^11.0.4",
+    "@angular/localize": "^11.0.4",
+    "@angular/platform-browser": "^11.0.4",
+    "@angular/platform-browser-dynamic": "^11.0.4",
+    "@angular/router": "^11.0.4",
     "@compodoc/compodoc": "^1.1.11",
-    "@fortawesome/angular-fontawesome": "^0.6.0",
-    "@fortawesome/fontawesome-svg-core": "^1.2.27",
-    "@fortawesome/free-solid-svg-icons": "^5.12.1",
-    "@ng-bootstrap/ng-bootstrap": "^6.0.0",
-    "@ng-select/ng-select": "^3.7.2",
+    "@fortawesome/angular-fontawesome": "^0.8.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.32",
+    "@fortawesome/free-solid-svg-icons": "^5.15.1",
+    "@ng-bootstrap/ng-bootstrap": "^8.0.0",
+    "@ng-select/ng-select": "^5.0.9",
     "@ngx-translate/core": "^12.1.1",
     "@ngx-translate/http-loader": "^4.0.0",
-    "angular-gridster2": "^9.0.1",
+    "angular-gridster2": "^11.0.0",
     "bootstrap": "^4.4.1",
     "dexie": "^3.0.2",
-    "jquery": "^3.4.1",
-    "ng-dynamic-component": "^5.0.6",
+    "jquery": "^3.5.1",
+    "ng-dynamic-component": "^8.0.0",
     "ng2-handy-syntax-highlighter": "^1.0.12",
-    "ngx-spinner": "^8.1.0",
+    "ngx-spinner": "^10.0.1",
     "openseadragon": "^2.4.1",
     "popper.js": "^1.16.1",
     "prismjs": "^1.19.0",
     "rxjs": "~6.5.4",
-    "tslib": "^1.11.0",
+    "tslib": "^2.0.0",
     "vkbeautify": "^0.99.3",
-    "zone.js": "~0.10.2"
+    "zone.js": "~0.10.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.900.3",
-    "@angular/cli": "^9.0.3",
-    "@angular/compiler-cli": "^9.0.2",
-    "@angular/language-service": "^9.0.2",
-    "@types/jasmine": "~3.3.8",
+    "@angular-devkit/build-angular": "~0.1100.4",
+    "@angular/cli": "^11.0.4",
+    "@angular/compiler-cli": "^11.0.4",
+    "@angular/language-service": "^11.0.4",
+    "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "^2.0.8",
     "@types/node": "^12.11.1",
-    "codelyzer": "^5.1.2",
-    "jasmine-core": "~3.5.0",
-    "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~4.4.1",
+    "codelyzer": "^6.0.0",
+    "jasmine-core": "~3.6.0",
+    "jasmine-spec-reporter": "~5.0.0",
+    "karma": "~5.0.0",
     "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "~2.1.1",
-    "karma-jasmine": "~3.1.1",
-    "karma-jasmine-html-reporter": "^1.5.2",
-    "protractor": "^5.4.3",
+    "karma-coverage-istanbul-reporter": "~3.0.2",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "^1.5.0",
+    "protractor": "~7.0.0",
     "ts-node": "~8.6.2",
-    "tslint": "~6.0.0",
-    "typescript": "~3.7.5"
+    "tslint": "~6.1.0",
+    "typescript": "~4.0.5"
   }
 }

src/app/app-routing.module.ts

@@ -16,7 +16,7 @@ const appRoutes: Routes = [
   { path: 'textVersions', component: TextVersionsComponent },
 ];
 @NgModule({
-  imports: [RouterModule.forRoot(appRoutes)],
+  imports: [RouterModule.forRoot(appRoutes, { relativeLinkResolution: 'legacy' })],
   exports: [RouterModule],
 })
 export class AppRoutingModule {

src/app/app.component.spec.ts

@@ -1,9 +1,9 @@
-import { TestBed, async } from '@angular/core/testing';
+import { TestBed, waitForAsync } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         RouterTestingModule

src/app/app.module.ts

@@ -9,7 +9,7 @@ import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
 import { fas } from '@fortawesome/free-solid-svg-icons';
 import { NgbModule, NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
 import { GridsterModule } from 'angular-gridster2';
-import { DynamicModule } from 'ng-dynamic-component';
+import { DynamicAttributesModule, DynamicModule } from 'ng-dynamic-component';
 import { NgxSpinnerModule } from 'ngx-spinner';
 import { UiComponentsModule } from './ui-components/ui-components.module';
 
@@ -161,11 +161,8 @@ export function initializeApp(appConfig: AppConfig) {
     AppTranslationModule,
     BrowserModule,
     BrowserAnimationsModule,
-    DynamicModule.withComponents([
-      TextComponent,
-      GenericElementComponent,
-      NoteComponent,
-    ]),
+    DynamicAttributesModule,
+    DynamicModule,
     ExperimentalScrollingModule,
     FormsModule,
     GridsterModule,
@@ -174,7 +171,7 @@ export function initializeApp(appConfig: AppConfig) {
     NgbModule,
     NgbPopoverModule,
     NgxSpinnerModule,
-    RouterModule.forRoot(routes, { useHash: true }),
+    RouterModule.forRoot(routes, { useHash: true, relativeLinkResolution: 'legacy' }),
     ScrollingModule,
     UiComponentsModule,
   ],

src/app/components/addition/addition.component.spec.ts

@@ -1,12 +1,12 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { AdditionComponent } from './addition.component';
 
 describe('AdditionComponent', () => {
   let component: AdditionComponent;
   let fixture: ComponentFixture<AdditionComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ AdditionComponent ],
     })

src/app/components/apparatus-entry/apparatus-entry.component.spec.ts

@@ -1,12 +1,12 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { ApparatusEntryComponent } from './apparatus-entry.component';
 
 describe('ApparatusEntryComponent', () => {
   let component: ApparatusEntryComponent;
   let fixture: ComponentFixture<ApparatusEntryComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ ApparatusEntryComponent ]
     })

src/app/components/char/char.component.spec.ts

@@ -1,12 +1,12 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { CharComponent } from './char.component';
 
 describe('CharComponent', () => {
   let component: CharComponent;
   let fixture: ComponentFixture<CharComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ CharComponent ],
     })

src/app/components/choice/choice.component.spec.ts

@@ -1,12 +1,12 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { ChoiceComponent } from './choice.component';
 
 describe('ChoiceComponent', () => {
   let component: ChoiceComponent;
   let fixture: ComponentFixture<ChoiceComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ ChoiceComponent ],
     })

src/app/components/components-mixins.ts

@@ -1,17 +1,23 @@
-import { Input } from '@angular/core';
+import { Directive, Input } from '@angular/core';
 import { EditionLevelType, TextFlow } from '../app.config';
 import { HighlightData } from '../models/evt-models';
 import { EntitiesSelectItem } from './entities-select/entities-select.component';
 
+@Directive()
+// tslint:disable-next-line: directive-class-suffix
 export class Highlightable {
   @Input() highlightData: HighlightData;
   @Input() itemsToHighlight: EntitiesSelectItem[];
 }
 
+@Directive()
+// tslint:disable-next-line: directive-class-suffix
 export class EditionlevelSusceptible {
   @Input() editionLevel: EditionLevelType;
 }
 
+@Directive()
+// tslint:disable-next-line: directive-class-suffix
 export class TextFlowSusceptible {
   @Input() textFlow: TextFlow;
 }

src/app/components/content-viewer/content-viewer.component.spec.ts

@@ -1,12 +1,12 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { ContentViewerComponent } from './content-viewer.component';
 
 describe('ContentViewerComponent', () => {
   let component: ContentViewerComponent;
   let fixture: ComponentFixture<ContentViewerComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ ContentViewerComponent ]
     })

src/app/components/damage/damage.component.spec.ts

@@ -1,12 +1,12 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { DamageComponent } from './damage.component';
 
 describe('DamageComponent', () => {
   let component: DamageComponent;
   let fixture: ComponentFixture<DamageComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ DamageComponent ]
     })

src/app/components/deletion/deletion.component.spec.ts

@@ -1,12 +1,12 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { DeletionComponent } from './deletion.component';
 
 describe('DeletionComponent', () => {
   let component: DeletionComponent;
   let fixture: ComponentFixture<DeletionComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ DeletionComponent ]
     })

src/app/components/edition-level-selector/edition-level-selector.component.spec.ts

@@ -1,12 +1,12 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { EditionLevelSelectorComponent } from './edition-level-selector.component';
 
 describe('EditionLevelSelectorComponent', () => {
   let component: EditionLevelSelectorComponent;
   let fixture: ComponentFixture<EditionLevelSelectorComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ EditionLevelSelectorComponent ]
     })

src/app/components/edition-level-selector/edition-level-selector.component.ts

@@ -12,6 +12,7 @@ import { EvtIconInfo } from '../../ui-components/icon/icon.component';
 export class EditionLevelSelectorComponent {
   public editionLevels = (AppConfig.evtSettings.edition.availableEditionLevels || []).filter((el) => !el.disabled);
 
+  // tslint:disable-next-line: variable-name
   private _edLevelID: EditionLevelType;
   @Input() set editionLevelID(p: EditionLevelType) {
     this._edLevelID = p;

src/app/components/entities-select/entities-select.component.spec.ts

@@ -1,12 +1,12 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { EntitiesSelectComponent } from './entities-select.component';
 
 describe('EntitiesSelectComponent', () => {
   let component: EntitiesSelectComponent;
   let fixture: ComponentFixture<EntitiesSelectComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ EntitiesSelectComponent ]
     })

src/app/components/g/g.component.spec.ts

@@ -1,12 +1,12 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { GComponent } from './g.component';
 
 describe('GComponent', () => {
   let component: GComponent;
   let fixture: ComponentFixture<GComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ GComponent ]
     })

src/app/components/gap/gap.component.spec.ts

@@ -1,12 +1,12 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { GapComponent } from './gap.component';
 
 describe('GapComponent', () => {
   let component: GapComponent;
   let fixture: ComponentFixture<GapComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ GapComponent ],
     })

src/app/components/generic-element/generic-element.component.spec.ts

@@ -1,12 +1,12 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { GenericElementComponent } from './generic-element.component';
 
 describe('GenericElementComponent', () => {
   let component: GenericElementComponent;
   let fixture: ComponentFixture<GenericElementComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ GenericElementComponent ]
     })

src/app/components/global-lists/global-lists.component.spec.ts

@@ -1,12 +1,12 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { GlobalListsComponent } from './global-lists.component';
 
 describe('GlobalListsComponent', () => {
   let component: GlobalListsComponent;
   let fixture: ComponentFixture<GlobalListsComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ GlobalListsComponent ]
     })