updated angular to 11

apps/red-ui/src/app/app.module.ts

@@ -1,6 +1,5 @@
 import { BrowserModule } from '@angular/platform-browser';
-import { APP_INITIALIZER, LOCALE_ID, NgModule } from '@angular/core';
+import { APP_INITIALIZER, NgModule } from '@angular/core';
-
 import { AppComponent } from './app.component';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -47,7 +46,7 @@ import { LogoComponent } from './logo/logo.component';
 import { CompositeRouteGuard } from './utils/composite-route.guard';
 import { AppStateGuard } from './state/app-state.guard';
 import { SimpleDoughnutChartComponent } from './components/simple-doughnut-chart/simple-doughnut-chart.component';
-import { MAT_CHECKBOX_CLICK_ACTION, MatCheckboxModule } from '@angular/material/checkbox';
+import { MAT_CHECKBOX_DEFAULT_OPTIONS, MatCheckboxModule } from '@angular/material/checkbox';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { AnnotationIconComponent } from './components/annotation-icon/annotation-icon.component';
 import { AuthGuard } from './auth/auth.guard';
@@ -238,6 +237,13 @@ export function HttpLoaderFactory(httpClient: HttpClient) {
         MatInputModule
     ],
     providers: [
+        {
+            provide: MAT_CHECKBOX_DEFAULT_OPTIONS,
+            useValue: {
+                clickAction: 'noop',
+                color: 'primary'
+            }
+        },
         {
             provide: HTTP_INTERCEPTORS,
             multi: true,
@@ -253,8 +259,7 @@ export function HttpLoaderFactory(httpClient: HttpClient) {
             multi: true,
             useFactory: languageInitializer,
             deps: [LanguageService]
-        },
+        }
-        { provide: MAT_CHECKBOX_CLICK_ACTION, useValue: 'noop' }
     ],
     bootstrap: [AppComponent]
 })

apps/red-ui/src/app/screens/empty-states/project-overview-empty/project-overview-empty.component.html

@@ -1,31 +1,18 @@
 <div class="empty-state-container">
     <div
         *ngIf="!appStateService.activeProject"
-        [innerHTML]="
+        [innerHTML]="'project-overview.no-project' | translate: { projectId: appStateService.activeProjectId }"
-            'project-overview.no-project'
-                | translate: { projectId: appStateService.activeProjectId }
-        "
         class="heading-xl"
     ></div>
 
-    <div
+    <div *ngIf="appStateService.activeProject" class="heading-xl" translate="project-overview.no-files"></div>
-        *ngIf="appStateService.activeProject"
-        class="heading-xl"
-        translate="project-overview.no-files"
-    ></div>
     <div *ngIf="appStateService.activeProject">
         <button (click)="fileInput.click()" color="primary" mat-flat-button>
             <mat-icon svgIcon="red:upload"></mat-icon>
             <span translate="project-overview.upload-files-btn"></span>
         </button>
 
-        <input
+        <input #fileInput (change)="handleFileUploadEvent($event)" class="file-upload-input" multiple="true" type="file" />
-            #fileInput
-            (change)="uploadFiles.emit($event.target.files)"
-            class="file-upload-input"
-            multiple="true"
-            type="file"
-        />
 
         <button [routerLink]="['/ui/projects/']" mat-icon-button class="close-btn">
             <mat-icon svgIcon="red:close"></mat-icon>

apps/red-ui/src/app/screens/empty-states/project-overview-empty/project-overview-empty.component.ts

@@ -10,4 +10,8 @@ export class ProjectOverviewEmptyComponent {
     @Output() uploadFiles = new EventEmitter();
 
     constructor(public appStateService: AppStateService) {}
+
+    handleFileUploadEvent($event: Event) {
+        this.uploadFiles.emit(($event.target as HTMLInputElement).files);
+    }
 }

apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html

@@ -99,7 +99,7 @@
                         <redaction-needs-work-badge [needsWorkInput]="pw"></redaction-needs-work-badge>
                     </div>
                     <div>
-                        <redaction-initials-avatar [userId]="pw.project.ownerId" withName="true"></redaction-initials-avatar>
+                        <redaction-initials-avatar [userId]="pw.project.ownerId" [withName]="true"></redaction-initials-avatar>
                     </div>
                     <div class="status-container">
                         <redaction-status-bar [config]="getProjectStatusConfig(pw)"></redaction-status-bar>

apps/red-ui/src/app/screens/project-overview-screen/bulk-actions/bulk-actions.component.ts

@@ -15,7 +15,7 @@ import { computerize } from '../../../utils/functions';
     styleUrls: ['./bulk-actions.component.scss']
 })
 export class BulkActionsComponent {
-    @Input() private selectedFileIds: string[];
+    @Input() selectedFileIds: string[];
     @Output() private reload = new EventEmitter();
 
     constructor(

apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html

@@ -23,8 +23,8 @@
     <div class="mt-12">
         <redaction-initials-avatar
             [userId]="appStateService.activeProject.project.ownerId"
+            [withName]="true"
             size="large"
-            withName="true"
             color="gray"
         ></redaction-initials-avatar>
     </div>

apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html

@@ -192,7 +192,7 @@
                         <redaction-needs-work-badge [needsWorkInput]="fileStatus"></redaction-needs-work-badge>
                     </div>
                     <div *ngIf="!fileStatus.isError" class="assigned-to">
-                        <redaction-initials-avatar [userId]="fileStatus.currentReviewer" withName="true"></redaction-initials-avatar>
+                        <redaction-initials-avatar [userId]="fileStatus.currentReviewer" [withName]="true"></redaction-initials-avatar>
                     </div>
 
                     <div *ngIf="!fileStatus.isError" class="pages">

package.json

@@ -1,101 +1,104 @@
 {
-  "name": "redaction",
+    "name": "redaction",
-  "version": "0.0.191",
+    "version": "0.0.191",
-  "license": "MIT",
+    "private": true,
-  "husky": {
+    "license": "MIT",
-    "hooks": {
+    "scripts": {
-      "pre-commit": "pretty-quick --staged && ng lint --project=red-ui-http && ng lint --project=red-ui --fix"
+        "affected": "nx affected",
+        "affected:apps": "nx affected:apps",
+        "affected:build": "nx affected:build",
+        "affected:dep-graph": "nx affected:dep-graph",
+        "affected:e2e": "nx affected:e2e",
+        "affected:libs": "nx affected:libs",
+        "affected:lint": "nx affected:lint",
+        "affected:test": "nx affected:test",
+        "build": "nx build",
+        "build-lint-all": "ng lint --project=red-ui-http --fix && ng build --project=red-ui-http && ng lint --project=red-ui --fix && ng build --project=red-ui --prod",
+        "dep-graph": "nx dep-graph",
+        "e2e": "nx e2e",
+        "format": "nx format:write",
+        "format:check": "nx format:check",
+        "format:write": "nx format:write",
+        "help": "nx help",
+        "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points",
+        "lint": "nx workspace-lint && nx lint",
+        "nx": "nx",
+        "start": "nx serve",
+        "test": "nx test",
+        "update": "nx migrate latest",
+        "workspace-schematic": "nx workspace-schematic"
+    },
+    "husky": {
+        "hooks": {
+            "pre-commit": "pretty-quick --staged && ng lint --project=red-ui-http && ng lint --project=red-ui --fix"
+        }
+    },
+    "dependencies": {
+        "@angular/animations": "~11.0.1",
+        "@angular/cdk": "~11.0.1",
+        "@angular/common": "~11.0.1",
+        "@angular/compiler": "~11.0.1",
+        "@angular/core": "~11.0.1",
+        "@angular/forms": "~11.0.1",
+        "@angular/material": "~11.0.1",
+        "@angular/platform-browser": "~11.0.1",
+        "@angular/platform-browser-dynamic": "~11.0.1",
+        "@angular/router": "~11.0.1",
+        "@angular/service-worker": "~11.0.1",
+        "@ngx-translate/core": "^13.0.0",
+        "@ngx-translate/http-loader": "^6.0.0",
+        "@nrwl/angular": "^10.2.0",
+        "@pdftron/webviewer": "^7.0.1",
+        "file-saver": "^2.0.2",
+        "jwt-decode": "^3.0.0",
+        "keycloak-angular": "^8.0.1",
+        "keycloak-js": "10.0.2",
+        "lint-staged": "^10.5.0",
+        "ng2-file-upload": "^1.4.0",
+        "ngp-sort-pipe": "^0.0.4",
+        "ngx-dropzone": "^2.2.2",
+        "ngx-toastr": "^13.0.0",
+        "rxjs": "~6.6.0",
+        "scroll-into-view-if-needed": "^2.2.26",
+        "tslib": "^2.0.0",
+        "zone.js": "~0.10.2"
+    },
+    "devDependencies": {
+        "@angular-devkit/build-angular": "~0.1100.2",
+        "@angular-devkit/build-ng-packagr": "~0.1002.0",
+        "@angular/cli": "~11.0.2",
+        "@angular/compiler": "~11.0.1",
+        "@angular/compiler-cli": "~11.0.1",
+        "@angular/language-service": "~11.0.2",
+        "@nrwl/cypress": "10.2.0",
+        "@nrwl/jest": "10.2.0",
+        "@nrwl/workspace": "10.2.0",
+        "@types/cypress": "^1.1.3",
+        "@types/jasmine": "~3.6.0",
+        "@types/jest": "26.0.8",
+        "@types/node": "^12.11.1",
+        "codelyzer": "^6.0.0",
+        "cypress": "^5.6.0",
+        "cypress-file-upload": "^4.1.1",
+        "cypress-keycloak": "^1.5.0",
+        "cypress-keycloak-commands": "^1.2.0",
+        "cypress-localstorage-commands": "^1.2.4",
+        "dotenv": "6.2.0",
+        "eslint": "6.8.0",
+        "google-translate-api-browser": "^1.1.71",
+        "husky": "^4.3.0",
+        "jest": "26.2.2",
+        "jest-preset-angular": "8.2.1",
+        "lodash": "^4.17.20",
+        "moment": "^2.29.1",
+        "ng-packagr": "^10.1.2",
+        "prettier": "2.0.4",
+        "pretty-quick": "^3.1.0",
+        "superagent": "^6.1.0",
+        "superagent-promise": "^1.1.0",
+        "ts-jest": "26.1.4",
+        "ts-node": "~8.3.0",
+        "tslint": "~6.1.0",
+        "typescript": "~4.0.2"
     }
-  },
-  "scripts": {
-    "build-lint-all": "ng lint --project=red-ui-http --fix && ng build --project=red-ui-http && ng lint --project=red-ui --fix && ng build --project=red-ui --prod",
-    "nx": "nx",
-    "start": "nx serve",
-    "build": "nx build",
-    "test": "nx test",
-    "lint": "nx workspace-lint && nx lint",
-    "e2e": "nx e2e",
-    "affected:apps": "nx affected:apps",
-    "affected:libs": "nx affected:libs",
-    "affected:build": "nx affected:build",
-    "affected:e2e": "nx affected:e2e",
-    "affected:test": "nx affected:test",
-    "affected:lint": "nx affected:lint",
-    "affected:dep-graph": "nx affected:dep-graph",
-    "affected": "nx affected",
-    "format": "nx format:write",
-    "format:write": "nx format:write",
-    "format:check": "nx format:check",
-    "update": "nx migrate latest",
-    "workspace-schematic": "nx workspace-schematic",
-    "dep-graph": "nx dep-graph",
-    "help": "nx help",
-    "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points"
-  },
-  "private": true,
-  "dependencies": {
-    "@angular/animations": "^10.0.0",
-    "@angular/cdk": "^10.2.3",
-    "@angular/common": "^10.0.0",
-    "@angular/core": "^10.0.0",
-    "@angular/forms": "^10.0.0",
-    "@angular/material": "^10.2.1",
-    "@angular/platform-browser": "^10.0.0",
-    "@angular/platform-browser-dynamic": "^10.0.0",
-    "@angular/router": "^10.0.0",
-    "@angular/service-worker": "^10.0.0",
-    "@ngx-translate/core": "^13.0.0",
-    "@ngx-translate/http-loader": "^6.0.0",
-    "@nrwl/angular": "^10.2.0",
-    "@pdftron/webviewer": "^7.0.1",
-    "file-saver": "^2.0.2",
-    "jwt-decode": "^3.0.0",
-    "keycloak-angular": "^8.0.1",
-    "keycloak-js": "10.0.2",
-    "lint-staged": "^10.5.0",
-    "ng2-file-upload": "^1.4.0",
-    "ngp-sort-pipe": "^0.0.4",
-    "ngx-dropzone": "^2.2.2",
-    "ngx-toastr": "^13.0.0",
-    "rxjs": "~6.5.5",
-    "scroll-into-view-if-needed": "^2.2.26",
-    "zone.js": "^0.10.2"
-  },
-  "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1000.0",
-    "@angular-devkit/build-ng-packagr": "^0.1001.3",
-    "@angular/cli": "^10.1.2",
-    "@angular/compiler": "^10.0.0",
-    "@angular/compiler-cli": "^10.0.0",
-    "@angular/language-service": "^10.0.0",
-    "@nrwl/cypress": "10.2.0",
-    "@nrwl/jest": "10.2.0",
-    "@nrwl/workspace": "10.2.0",
-    "@types/cypress": "^1.1.3",
-    "@types/jest": "26.0.8",
-    "@types/node": "~8.9.4",
-    "codelyzer": "~5.0.1",
-    "cypress": "^5.6.0",
-    "cypress-file-upload": "^4.1.1",
-    "cypress-keycloak": "^1.5.0",
-    "cypress-keycloak-commands": "^1.2.0",
-    "cypress-localstorage-commands": "^1.2.4",
-    "dotenv": "6.2.0",
-    "eslint": "6.8.0",
-    "google-translate-api-browser": "^1.1.71",
-    "husky": "^4.3.0",
-    "jest": "26.2.2",
-    "jest-preset-angular": "8.2.1",
-    "lodash": "^4.17.20",
-    "moment": "^2.29.1",
-    "ng-packagr": "^10.1.2",
-    "prettier": "2.0.4",
-    "pretty-quick": "^3.1.0",
-    "superagent": "^6.1.0",
-    "superagent-promise": "^1.1.0",
-    "ts-jest": "26.1.4",
-    "ts-node": "~7.0.0",
-    "tslint": "~6.0.0",
-    "typescript": "~3.9.3"
-  }
 }

tsconfig.base.json

@@ -21,5 +21,10 @@
             "@redaction/red-cache": ["libs/red-cache/src/index.ts"]
         }
     },
-    "exclude": ["node_modules", "tmp"]
+    "exclude": ["node_modules", "tmp"],
+    "angularCompilerOptions": {
+        "strictInjectionParameters": true,
+        "strictInputAccessModifiers": true,
+        "strictTemplates": true
+    }
 }