Migrate to angular v17, remove deprecated ngbAccordion directives

Dockerfile

@@ -12,7 +12,7 @@ COPY ./src-ui /src/src-ui
 WORKDIR /src/src-ui
 RUN set -eux \
   && npm update npm -g \
-  && npm ci --omit=optional
+  && npm ci
 RUN set -eux \
   && ./node_modules/.bin/ng build --configuration production
 

src-ui/package.json

@@ -11,56 +11,56 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/cdk": "^16.2.11",
+    "@angular/cdk": "^17.0.4",
-    "@angular/common": "~16.2.11",
+    "@angular/common": "~17.0.7",
-    "@angular/compiler": "~16.2.11",
+    "@angular/compiler": "~17.0.7",
-    "@angular/core": "~16.2.11",
+    "@angular/core": "~17.0.7",
-    "@angular/forms": "~16.2.11",
+    "@angular/forms": "~17.0.7",
-    "@angular/localize": "~16.2.11",
+    "@angular/localize": "~17.0.7",
-    "@angular/platform-browser": "~16.2.11",
+    "@angular/platform-browser": "~17.0.7",
-    "@angular/platform-browser-dynamic": "~16.2.11",
+    "@angular/platform-browser-dynamic": "~17.0.7",
-    "@angular/router": "~16.2.11",
+    "@angular/router": "~17.0.7",
-    "@ng-bootstrap/ng-bootstrap": "^15.1.2",
+    "@ng-bootstrap/ng-bootstrap": "^16.0.0",
-    "@ng-select/ng-select": "^11.2.0",
+    "@ng-select/ng-select": "^12.0.4",
     "@ngneat/dirty-check-forms": "^3.0.3",
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.2",
     "file-saver": "^2.0.5",
     "mime-names": "^1.0.0",
     "ngx-color": "^9.0.0",
-    "ngx-cookie-service": "^16.0.1",
+    "ngx-cookie-service": "^17.0.1",
     "ngx-file-drop": "^16.0.0",
-    "ngx-ui-tour-ng-bootstrap": "^13.0.6",
+    "ngx-ui-tour-ng-bootstrap": "^14.0.1",
     "pdfjs-dist": "^3.11.174",
     "rxjs": "^7.8.1",
     "tslib": "^2.6.2",
     "uuid": "^9.0.1",
-    "zone.js": "^0.13.3"
+    "zone.js": "^0.14.2"
   },
   "devDependencies": {
-    "@angular-builders/jest": "16.0.1",
+    "@angular-builders/jest": "17.0.0",
-    "@angular-devkit/build-angular": "~16.2.9",
+    "@angular-devkit/build-angular": "~17.0.7",
-    "@angular-eslint/builder": "16.2.0",
+    "@angular-eslint/builder": "17.1.1",
-    "@angular-eslint/eslint-plugin": "16.2.0",
+    "@angular-eslint/eslint-plugin": "17.1.1",
-    "@angular-eslint/eslint-plugin-template": "16.2.0",
+    "@angular-eslint/eslint-plugin-template": "17.1.1",
-    "@angular-eslint/schematics": "16.2.0",
+    "@angular-eslint/schematics": "17.1.1",
-    "@angular-eslint/template-parser": "16.2.0",
+    "@angular-eslint/template-parser": "17.1.1",
-    "@angular/cli": "~16.2.9",
+    "@angular/cli": "~17.0.7",
-    "@angular/compiler-cli": "~16.2.3",
+    "@angular/compiler-cli": "~17.0.7",
     "@playwright/test": "^1.40.1",
     "@types/jest": "^29.5.10",
     "@types/node": "^20.10.2",
-    "@typescript-eslint/eslint-plugin": "^6.13.1",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "@typescript-eslint/parser": "^6.13.1",
+    "@typescript-eslint/parser": "^6.10.0",
     "concurrently": "^8.2.2",
-    "eslint": "^8.55.0",
+    "eslint": "^8.53.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-preset-angular": "^13.1.4",
     "jest-websocket-mock": "^2.5.0",
     "patch-package": "^8.0.0",
     "ts-node": "~10.9.1",
-    "typescript": "^5.1.6",
+    "typescript": "^5.2.2",
     "wait-on": "^7.2.0"
   }
 }

src-ui/src/app/components/common/input/permissions/permissions-form/permissions-form.component.html

@@ -3,13 +3,20 @@
   <ng-container [ngTemplateOutlet]="permissionsForm"></ng-container>
 </ng-container>
 <ng-container *ngIf="accordion">
-  <ngb-accordion #acc="ngbAccordion" activeIds="">
+  <div ngbAccordion activeIds="">
-    <ngb-panel i18n-title title="Edit Permissions">
+    <div ngbAccordionItem>
-      <ng-template ngbPanelContent>
+      <h2 ngbAccordionHeader>
-        <ng-container [ngTemplateOutlet]="permissionsForm"></ng-container>
+        <button ngbAccordionButton i18n>Edit Permissions</button>
-      </ng-template>
+      </h2>
-    </ngb-panel>
+      <div ngbAccordionCollapse>
-  </ngb-accordion>
+        <div ngbAccordionBody>
+          <ng-template>
+            <ng-container [ngTemplateOutlet]="permissionsForm"></ng-container>
+          </ng-template>
+        </div>
+      </div>
+    </div>
+  </div>
 </ng-container>
 
 <ng-template #permissionsForm>

src-ui/src/app/components/common/input/tags/tags.component.spec.ts

@@ -1,9 +1,4 @@
-import {
+import { ComponentFixture, TestBed } from '@angular/core/testing'
-  ComponentFixture,
-  TestBed,
-  fakeAsync,
-  tick,
-} from '@angular/core/testing'
 import {
   FormsModule,
   ReactiveFormsModule,
@@ -15,7 +10,7 @@ import {
   DEFAULT_MATCHING_ALGORITHM,
   MATCH_ALL,
 } from 'src/app/data/matching-model'
-import { NgSelectComponent, NgSelectModule } from '@ng-select/ng-select'
+import { NgSelectModule } from '@ng-select/ng-select'
 import { RouterTestingModule } from '@angular/router/testing'
 import { HttpClientTestingModule } from '@angular/common/http/testing'
 import { of } from 'rxjs'

src-ui/src/app/components/common/pdf-viewer/pdf-viewer.component.ts

@@ -36,15 +36,6 @@ import { PDFSinglePageViewer } from 'pdfjs-dist/web/pdf_viewer'
 
 PDFJS['verbosity'] = PDFJS.VerbosityLevel.ERRORS
 
-// Yea this is a straight hack
-declare global {
-  interface WeakKeyTypes {
-    symbol: Object
-  }
-
-  type WeakKey = WeakKeyTypes[keyof WeakKeyTypes]
-}
-
 export enum RenderTextMode {
   DISABLED,
   ENABLED,