Performance: add index to paperlesstask task_id

.github/DISCUSSION_TEMPLATE/support.yml

@@ -1,55 +0,0 @@
-title: "[Support] "
-body:
-  - type: textarea
-    id: description
-    attributes:
-      label: What's your question or issue?
-      description: Provide a clear and concise description of what you're trying to do, and what's going wrong.
-      placeholder: |
-        I'm trying to...
-
-        [Include screenshots if helpful]
-    validations:
-      required: true
-  - type: textarea
-    id: steps
-    attributes:
-      label: What have you tried?
-      description: Describe any steps you've already taken to troubleshoot or solve the issue.
-      placeholder: |
-        - I checked the logs and saw...
-        - I followed the install guide and tried...
-  - type: input
-    id: version
-    attributes:
-      label: Paperless-ngx version
-      placeholder: e.g. 1.14.0
-    validations:
-      required: true
-  - type: input
-    id: host-os
-    attributes:
-      label: Host OS
-      description: Include architecture if relevant.
-      placeholder: e.g. Ubuntu 22.04 / Raspberry Pi arm64
-  - type: dropdown
-    id: install-method
-    attributes:
-      label: Installation method
-      options:
-        - Docker - official image
-        - Docker - linuxserver.io image
-        - Bare metal
-        - Other (please describe above)
-  - type: textarea
-    id: system-status
-    attributes:
-      label: System status
-      description: If available, copy & paste the system status output from Settings > System Status > Copy
-      render: json
-  - type: textarea
-    id: logs
-    attributes:
-      label: Relevant logs or output
-      description: If you have logs, errors that might help, paste it here.
-      render: bash

Dockerfile

@@ -21,7 +21,7 @@ ARG PNGX_TAG_VERSION=
 RUN set -eux && \
 case "${PNGX_TAG_VERSION}" in \
   dev|beta|fix*|feature*) \
-    sed -i -E "s/tag: '([a-z\.]+)'/tag: '${PNGX_TAG_VERSION}'/g" /src/src-ui/src/environments/environment.prod.ts \
+    sed -i -E "s/version: '([0-9\.]+)'/version: '\1 #${PNGX_TAG_VERSION}'/g" /src/src-ui/src/environments/environment.prod.ts \
     ;; \
 esac
 

docs/administration.md

@@ -457,22 +457,6 @@ of the index and usually makes queries faster and also ensures that the
 autocompletion works properly. This command is regularly invoked by the
 task scheduler.
 
-### Clearing the database read cache
-
-If the database read cache is enabled, **you must run this command** after making any changes to the database outside the application context.
-This includes operations such as restoring a database backup or executing SQL statements like UPDATE, INSERT, DELETE, ALTER, CREATE, or DROP.
-
-Failing to invalidate the cache after such modifications can lead to stale data being served from the cache, and **may cause data corruption** or inconsistent behavior in the application.
-
-Use the following management command to clear the cache:
-
-```
-invalidate_cachalot
-```
-
-!!! info
-The database read cache is based on Django-Cachalot. You can refer to their [documentation](https://django-cachalot.readthedocs.io/en/latest/quickstart.html#manage-py-command).
-
 ### Managing filenames {#renamer}
 
 If you use paperless' feature to

docs/changelog.md

@@ -1,64 +1,5 @@
 # Changelog
 
-## paperless-ngx 2.17.1
-
-### Bug Fixes
-
--   Fix: correct PAPERLESS_EMPTY_TRASH_DIR to Path [@shamoon](https://github.com/shamoon) ([#10227](https://github.com/paperless-ngx/paperless-ngx/pull/10227))
-
-### All App Changes
-
--   Fix: correct PAPERLESS_EMPTY_TRASH_DIR to Path [@shamoon](https://github.com/shamoon) ([#10227](https://github.com/paperless-ngx/paperless-ngx/pull/10227))
-
-## paperless-ngx 2.17.0
-
-### Breaking Changes
-
--   Fix: restore expected pre-2.16 scheduled workflow offset behavior [@shamoon](https://github.com/shamoon) ([#10218](https://github.com/paperless-ngx/paperless-ngx/pull/10218))
-
-### Features / Enhancements
-
--   QoL: log version at startup, show backend vs frontend mismatch in system status [@shamoon](https://github.com/shamoon) ([#10214](https://github.com/paperless-ngx/paperless-ngx/pull/10214))
--   Feature: add Persian translation [@shamoon](https://github.com/shamoon) ([#10183](https://github.com/paperless-ngx/paperless-ngx/pull/10183))
--   Enhancement: support import of zipped export [@kaerbr](https://github.com/kaerbr) ([#10073](https://github.com/paperless-ngx/paperless-ngx/pull/10073))
-
-### Bug Fixes
-
--   Fix: more api fixes [@shamoon](https://github.com/shamoon) ([#10204](https://github.com/paperless-ngx/paperless-ngx/pull/10204))
--   Fix: restore expected pre-2.16 scheduled workflow offset behavior [@shamoon](https://github.com/shamoon) ([#10218](https://github.com/paperless-ngx/paperless-ngx/pull/10218))
--   Fix: fix some API crashes [@shamoon](https://github.com/shamoon) ([#10196](https://github.com/paperless-ngx/paperless-ngx/pull/10196))
--   Fix: remove duplicate base path in websocket urls [@robertmx](https://github.com/robertmx) ([#10194](https://github.com/paperless-ngx/paperless-ngx/pull/10194))
--   Fix: use hard delete for custom fields with workflow removal [@shamoon](https://github.com/shamoon) ([#10191](https://github.com/paperless-ngx/paperless-ngx/pull/10191))
--   Fix: fix mail account test api schema [@shamoon](https://github.com/shamoon) ([#10164](https://github.com/paperless-ngx/paperless-ngx/pull/10164))
--   Fix: correct api schema for mail_account process [@shamoon](https://github.com/shamoon) ([#10157](https://github.com/paperless-ngx/paperless-ngx/pull/10157))
--   Fix: correct api schema for next_asn [@shamoon](https://github.com/shamoon) ([#10151](https://github.com/paperless-ngx/paperless-ngx/pull/10151))
--   Fix: fix email and notes endpoints api spec [@shamoon](https://github.com/shamoon) ([#10148](https://github.com/paperless-ngx/paperless-ngx/pull/10148))
-
-### Dependencies
-
--   Chore: bump angular/common to 19.12.14 [@shamoon](https://github.com/shamoon) ([#10212](https://github.com/paperless-ngx/paperless-ngx/pull/10212))
-
-### All App Changes
-
-<details>
-<summary>14 changes</summary>
-
--   QoL: log version at startup, show backend vs frontend mismatch in system status [@shamoon](https://github.com/shamoon) ([#10214](https://github.com/paperless-ngx/paperless-ngx/pull/10214))
--   Fix: more api fixes [@shamoon](https://github.com/shamoon) ([#10204](https://github.com/paperless-ngx/paperless-ngx/pull/10204))
--   Fix: restore expected pre-2.16 scheduled workflow offset behavior [@shamoon](https://github.com/shamoon) ([#10218](https://github.com/paperless-ngx/paperless-ngx/pull/10218))
--   Chore: switch from os.path to pathlib.Path [@gothicVI](https://github.com/gothicVI) ([#9933](https://github.com/paperless-ngx/paperless-ngx/pull/9933))
--   Chore: bump angular/common to 19.12.14 [@shamoon](https://github.com/shamoon) ([#10212](https://github.com/paperless-ngx/paperless-ngx/pull/10212))
--   Fix: fix some API crashes [@shamoon](https://github.com/shamoon) ([#10196](https://github.com/paperless-ngx/paperless-ngx/pull/10196))
--   Fix: remove duplicate base path in websocket urls [@robertmx](https://github.com/robertmx) ([#10194](https://github.com/paperless-ngx/paperless-ngx/pull/10194))
--   Fix: use hard delete for custom fields with workflow removal [@shamoon](https://github.com/shamoon) ([#10191](https://github.com/paperless-ngx/paperless-ngx/pull/10191))
--   Feature: add Persian translation [@shamoon](https://github.com/shamoon) ([#10183](https://github.com/paperless-ngx/paperless-ngx/pull/10183))
--   Enhancement: support import of zipped export [@kaerbr](https://github.com/kaerbr) ([#10073](https://github.com/paperless-ngx/paperless-ngx/pull/10073))
--   Fix: fix mail account test api schema [@shamoon](https://github.com/shamoon) ([#10164](https://github.com/paperless-ngx/paperless-ngx/pull/10164))
--   Fix: correct api schema for mail_account process [@shamoon](https://github.com/shamoon) ([#10157](https://github.com/paperless-ngx/paperless-ngx/pull/10157))
--   Fix: correct api schema for next_asn [@shamoon](https://github.com/shamoon) ([#10151](https://github.com/paperless-ngx/paperless-ngx/pull/10151))
--   Fix: fix email and notes endpoints api spec [@shamoon](https://github.com/shamoon) ([#10148](https://github.com/paperless-ngx/paperless-ngx/pull/10148))
-</details>
-
 ## paperless-ngx 2.16.3
 
 ### Features / Enhancements
@@ -6007,6 +5948,7 @@ primarily.
         a very good job at ocr'ing a document with the default
         language. Certain language specifics such as umlauts may not get
         picked up properly.
+    -   `PAPERLESS_DEBUG` defaults to `false`.
     -   The presence of `PAPERLESS_DBHOST` now determines whether to use
         PostgreSQL or SQLite.
     -   `PAPERLESS_OCR_THREADS` is gone and replaced with

docs/configuration.md

@@ -159,41 +159,6 @@ Available options are `postgresql` and `mariadb`.
 
     Defaults to unset, which uses Django’s built-in defaults.
 
-#### [`PAPERLESS_DB_READ_CACHE_ENABLED=<bool>`](#PAPERLESS_DB_READ_CACHE_ENABLED) {#PAPERLESS_DB_READ_CACHE_ENABLED}
-
-: Caches the database read query results into Redis. This can significantly improve application response times by caching database queries, at the cost of slightly increased memory usage.
-
-    Defaults to `false`.
-
-    !!! danger
-
-    **Do not modify the database outside the application while it is running.**
-    This includes actions such as restoring a backup, upgrading the database, or performing manual inserts. All external modifications must be done **only when the application is stopped**.
-    After making any such changes, you **must invalidate the DB read cache** using the `invalidate_cachalot` management command.
-
-#### [`PAPERLESS_READ_CACHE_TTL=<int>`](#PAPERLESS_READ_CACHE_TTL) {#PAPERLESS_READ_CACHE_TTL}
-
-: Specifies how long (in seconds) read data should be cached.
-
-    Allowed values are between `1` (one second) and `31536000` (one year). Defaults to `3600` (one hour).
-
-    !!! warning
-
-    A high TTL increases memory usage over time. Memory may be used until end of TTL, even if the cache is invalidated with the `invalidate_cachalot` command.
-
-In case of an out-of-memory (OOM) situation, Redis may stop accepting new data — including cache entries, scheduled tasks, and documents to consume.
-If your system has limited RAM, consider configuring a dedicated Redis instance for the read cache, with a memory limit and the eviction policy set to `allkeys-lru`.
-For more details, refer to the [Redis eviction policy documentation](https://redis.io/docs/latest/develop/reference/eviction/), and see the `PAPERLESS_READ_CACHE_REDIS_URL` setting to specify a separate Redis broker.
-
-#### [`PAPERLESS_READ_CACHE_REDIS_URL=<url>`](#PAPERLESS_READ_CACHE_REDIS_URL) {#PAPERLESS_READ_CACHE_REDIS_URL}
-
-: Defines the Redis instance used for the read cache.
-
-    Defaults to `None`.
-
-    !!! Note
-    If this value is not set, the same Redis instance used for scheduled tasks will be used for caching as well.
-
 ## Optional Services
 
 ### Tika {#tika}
@@ -1003,22 +968,6 @@ still perform some basic text pre-processing before matching.
 
     Defaults to 1.
 
-#### [`PAPERLESS_DATE_PARSER_LANGUAGES=<lang>`](#PAPERLESS_DATE_PARSER_LANGUAGES) {#PAPERLESS_DATE_PARSER_LANGUAGES}
-
-Specifies which language Paperless should use when parsing dates from documents.
-
-    This should be a language code supported by the dateparser library,
-    for example: "en", or a combination such as "en+de".
-    Locales are also supported (e.g., "en-AU").
-    Multiple languages can be combined using "+", for example: "en+de" or "en-AU+de".
-    For valid values, refer to the list of supported languages and locales in the [dateparser documentation](https://dateparser.readthedocs.io/en/latest/supported_locales.html).
-
-    Set this to match the languages in which most of your documents are written.
-    If not set, Paperless will attempt to infer the language(s) from the OCR configuration (`PAPERLESS_OCR_LANGUAGE`).
-
-!!! note
-This format differs from the `PAPERLESS_OCR_LANGUAGE` setting, which uses ISO 639-2 codes (3 letters, e.g., "eng+deu" for Tesseract OCR).
-
 #### [`PAPERLESS_EMAIL_TASK_CRON=<cron expression>`](#PAPERLESS_EMAIL_TASK_CRON) {#PAPERLESS_EMAIL_TASK_CRON}
 
 : Configures the scheduled email fetching frequency. The value

docs/usage.md

@@ -408,7 +408,7 @@ Currently, there are three events that correspond to workflow trigger 'types':
    tags, doc type, or correspondent.
 4. **Scheduled**: a scheduled trigger that can be used to run workflows at a specific time. The date used can be either the document
    added, created, updated date or you can specify a (date) custom field. You can also specify a day offset from the date (positive
-   offsets will trigger after the date, negative offsets will trigger before).
+   offsets will trigger before the date, negative offsets will trigger after).
 
 The following flow diagram illustrates the three document trigger types:
 

paperless.conf.example

@@ -1,6 +1,10 @@
 # Have a look at the docs for documentation.
 # https://docs.paperless-ngx.com/configuration/
 
+# Debug. Only enable this for development.
+
+#PAPERLESS_DEBUG=false
+
 # Required services
 
 #PAPERLESS_REDIS=redis://localhost:6379

pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "paperless-ngx"
-version = "2.17.1"
+version = "2.16.3"
 description = "A community-supported supercharged version of paperless: scan, index and archive all your physical documents"
 readme = "README.md"
 requires-python = ">=3.10"
@@ -26,7 +26,6 @@ dependencies = [
   "django~=5.1.7",
   "django-allauth[socialaccount,mfa]~=65.4.0",
   "django-auditlog~=3.1.2",
-  "django-cachalot~=2.8.0",
   "django-celery-results~=2.6.0",
   "django-compression-middleware~=0.5.0",
   "django-cors-headers~=4.7.0",
@@ -222,6 +221,9 @@ lint.per-file-ignores."src/documents/parsers.py" = [
 lint.per-file-ignores."src/documents/signals/handlers.py" = [
   "PTH",
 ] # TODO Enable & remove
+lint.per-file-ignores."src/paperless/settings.py" = [
+  "PTH",
+] # TODO Enable & remove
 lint.per-file-ignores."src/paperless_tesseract/tests/test_parser.py" = [
   "RUF001",
 ]

src-ui/angular.json

@@ -60,12 +60,10 @@
                 "path": "./extra-webpack.config.ts"
             },
             "outputPath": "dist/paperless-ui",
-            "main": "src/main.ts",
             "outputHashing": "none",
             "index": "src/index.html",
-            "polyfills": [
-              "src/polyfills.ts"
-            ],
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
             "localize": true,
             "assets": [
@@ -88,15 +86,12 @@
               "file-saver",
               "utif"
             ],
+            "vendorChunk": true,
             "extractLicenses": false,
+            "buildOptimizer": false,
             "sourceMap": true,
             "optimization": false,
-            "namedChunks": true,
-            "stylePreprocessorOptions": {
-              "includePaths": [
-                "."
-              ]
-            }
+            "namedChunks": true
           },
           "configurations": {
             "production": {
@@ -112,6 +107,8 @@
               "sourceMap": false,
               "namedChunks": false,
               "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
               "budgets": [
                 {
                   "type": "initial",
@@ -191,30 +188,6 @@
     },
     "@angular-eslint/schematics:library": {
       "setParserOptionsProject": true
-    },
-    "@schematics/angular:component": {
-      "type": "component"
-    },
-    "@schematics/angular:directive": {
-      "type": "directive"
-    },
-    "@schematics/angular:service": {
-      "type": "service"
-    },
-    "@schematics/angular:guard": {
-      "typeSeparator": "."
-    },
-    "@schematics/angular:interceptor": {
-      "typeSeparator": "."
-    },
-    "@schematics/angular:module": {
-      "typeSeparator": "."
-    },
-    "@schematics/angular:pipe": {
-      "typeSeparator": "."
-    },
-    "@schematics/angular:resolver": {
-      "typeSeparator": "."
     }
   }
 }

src-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "paperless-ngx-ui",
-  "version": "2.17.1",
+  "version": "2.16.3",
   "scripts": {
     "preinstall": "npx only-allow pnpm",
     "ng": "ng",
@@ -11,17 +11,17 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/cdk": "^20.0.4",
-    "@angular/common": "~20.0.5",
-    "@angular/compiler": "~20.0.5",
-    "@angular/core": "~20.0.5",
-    "@angular/forms": "~20.0.5",
-    "@angular/localize": "~20.0.5",
-    "@angular/platform-browser": "~20.0.5",
-    "@angular/platform-browser-dynamic": "~20.0.5",
-    "@angular/router": "~20.0.5",
-    "@ng-bootstrap/ng-bootstrap": "^19.0.0",
-    "@ng-select/ng-select": "^15.1.2",
+    "@angular/cdk": "^19.2.14",
+    "@angular/common": "~19.2.14",
+    "@angular/compiler": "~19.2.14",
+    "@angular/core": "~19.2.14",
+    "@angular/forms": "~19.2.14",
+    "@angular/localize": "~19.2.14",
+    "@angular/platform-browser": "~19.2.14",
+    "@angular/platform-browser-dynamic": "~19.2.14",
+    "@angular/router": "~19.2.14",
+    "@ng-bootstrap/ng-bootstrap": "^18.0.0",
+    "@ng-select/ng-select": "^14.9.0",
     "@ngneat/dirty-check-forms": "^3.0.3",
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.6",
@@ -32,7 +32,7 @@
     "ngx-color": "^10.0.0",
     "ngx-cookie-service": "^19.1.2",
     "ngx-device-detector": "^9.0.0",
-    "ngx-ui-tour-ng-bootstrap": "^17.0.0",
+    "ngx-ui-tour-ng-bootstrap": "^16.0.0",
     "rxjs": "^7.8.2",
     "tslib": "^2.8.1",
     "utif": "^3.1.0",
@@ -40,25 +40,25 @@
     "zone.js": "^0.15.1"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "^20.0.0",
-    "@angular-builders/jest": "^20.0.0",
-    "@angular-devkit/core": "^20.0.4",
-    "@angular-devkit/schematics": "^20.0.4",
-    "@angular-eslint/builder": "20.1.1",
-    "@angular-eslint/eslint-plugin": "20.1.1",
-    "@angular-eslint/eslint-plugin-template": "20.1.1",
-    "@angular-eslint/schematics": "20.1.1",
-    "@angular-eslint/template-parser": "20.1.1",
-    "@angular/build": "^20.0.4",
-    "@angular/cli": "~20.0.4",
-    "@angular/compiler-cli": "~20.0.5",
+    "@angular-builders/custom-webpack": "^19.0.1",
+    "@angular-builders/jest": "^19.0.1",
+    "@angular-devkit/build-angular": "^19.2.14",
+    "@angular-devkit/core": "^19.2.14",
+    "@angular-devkit/schematics": "^19.2.14",
+    "@angular-eslint/builder": "19.7.0",
+    "@angular-eslint/eslint-plugin": "19.7.0",
+    "@angular-eslint/eslint-plugin-template": "19.7.0",
+    "@angular-eslint/schematics": "19.7.0",
+    "@angular-eslint/template-parser": "19.7.0",
+    "@angular/cli": "~19.2.14",
+    "@angular/compiler-cli": "~19.2.14",
     "@codecov/webpack-plugin": "^1.9.1",
     "@playwright/test": "^1.51.1",
     "@types/jest": "^29.5.14",
     "@types/node": "^22.15.29",
-    "@typescript-eslint/eslint-plugin": "^8.33.1",
-    "@typescript-eslint/parser": "^8.33.1",
-    "@typescript-eslint/utils": "^8.33.1",
+    "@typescript-eslint/eslint-plugin": "^8.33.0",
+    "@typescript-eslint/parser": "^8.33.0",
+    "@typescript-eslint/utils": "^8.33.0",
     "eslint": "^9.28.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -67,8 +67,7 @@
     "jest-websocket-mock": "^2.5.0",
     "prettier-plugin-organize-imports": "^4.1.0",
     "ts-node": "~10.9.1",
-    "typescript": "^5.8.3",
-    "webpack": "^5.98.0"
+    "typescript": "^5.5.4"
   },
   "pnpm": {
     "onlyBuiltDependencies": [
@@ -78,5 +77,6 @@
       "lmdb",
       "msgpackr-extract"
     ]
-  }
+  },
+  "typings": "./src/typings.d.ts"
 }

src-ui/src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject, OnDestroy, OnInit, Renderer2 } from '@angular/core'
+import { Component, OnDestroy, OnInit, Renderer2 } from '@angular/core'
 import { Router, RouterOutlet } from '@angular/router'
 import { TourNgBootstrapModule, TourService } from 'ngx-ui-tour-ng-bootstrap'
 import { first, Subscription } from 'rxjs'
@@ -29,22 +29,22 @@ import { WebsocketStatusService } from './services/websocket-status.service'
   ],
 })
 export class AppComponent implements OnInit, OnDestroy {
-  private settings = inject(SettingsService)
-  private websocketStatusService = inject(WebsocketStatusService)
-  private toastService = inject(ToastService)
-  private router = inject(Router)
-  private tasksService = inject(TasksService)
-  tourService = inject(TourService)
-  private renderer = inject(Renderer2)
-  private permissionsService = inject(PermissionsService)
-  private hotKeyService = inject(HotKeyService)
-  private componentRouterService = inject(ComponentRouterService)
-
   newDocumentSubscription: Subscription
   successSubscription: Subscription
   failedSubscription: Subscription
 
-  constructor() {
+  constructor(
+    private settings: SettingsService,
+    private websocketStatusService: WebsocketStatusService,
+    private toastService: ToastService,
+    private router: Router,
+    private tasksService: TasksService,
+    public tourService: TourService,
+    private renderer: Renderer2,
+    private permissionsService: PermissionsService,
+    private hotKeyService: HotKeyService,
+    private componentRouterService: ComponentRouterService
+  ) {
     let anyWindow = window as any
     anyWindow.pdfWorkerSrc = 'assets/js/pdf.worker.min.mjs'
     this.settings.updateAppearanceSettings()

src-ui/src/app/components/admin/config/config.component.ts

@@ -1,5 +1,5 @@
 import { AsyncPipe } from '@angular/common'
-import { Component, OnDestroy, OnInit, inject } from '@angular/core'
+import { Component, OnDestroy, OnInit } from '@angular/core'
 import {
   AbstractControl,
   FormControl,
@@ -57,10 +57,6 @@ export class ConfigComponent
   extends LoadingComponentWithPermissions
   implements OnInit, OnDestroy, DirtyComponent
 {
-  private configService = inject(ConfigService)
-  private toastService = inject(ToastService)
-  private settingsService = inject(SettingsService)
-
   public readonly ConfigOptionType = ConfigOptionType
 
   // generated dynamically
@@ -81,7 +77,11 @@ export class ConfigComponent
   storeSub: Subscription
   isDirty$: Observable<boolean>
 
-  constructor() {
+  constructor(
+    private configService: ConfigService,
+    private toastService: ToastService,
+    private settingsService: SettingsService
+  ) {
     super()
     this.configForm.addControl('id', new FormControl())
     PaperlessConfigOptions.forEach((option) => {

src-ui/src/app/components/admin/logs/logs.component.ts

@@ -5,7 +5,6 @@ import {
   OnDestroy,
   OnInit,
   ViewChild,
-  inject,
 } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap'
@@ -29,8 +28,12 @@ export class LogsComponent
   extends LoadingComponentWithPermissions
   implements OnInit, OnDestroy
 {
-  private logService = inject(LogService)
-  private changedetectorRef = inject(ChangeDetectorRef)
+  constructor(
+    private logService: LogService,
+    private changedetectorRef: ChangeDetectorRef
+  ) {
+    super()
+  }
 
   public logs: string[] = []
 

src-ui/src/app/components/admin/settings/settings.component.ts

@@ -2,10 +2,10 @@ import { AsyncPipe, ViewportScroller } from '@angular/common'
 import {
   AfterViewInit,
   Component,
+  Inject,
   LOCALE_ID,
   OnDestroy,
   OnInit,
-  inject,
 } from '@angular/core'
 import {
   FormControl,
@@ -104,20 +104,6 @@ export class SettingsComponent
   extends ComponentWithPermissions
   implements OnInit, AfterViewInit, OnDestroy, DirtyComponent
 {
-  private documentListViewService = inject(DocumentListViewService)
-  private toastService = inject(ToastService)
-  private settings = inject(SettingsService)
-  currentLocale = inject(LOCALE_ID)
-  private viewportScroller = inject(ViewportScroller)
-  private activatedRoute = inject(ActivatedRoute)
-  readonly tourService = inject(TourService)
-  private usersService = inject(UserService)
-  private groupsService = inject(GroupService)
-  private router = inject(Router)
-  permissionsService = inject(PermissionsService)
-  private modalService = inject(NgbModal)
-  private systemStatusService = inject(SystemStatusService)
-
   activeNavID: number
 
   settingsForm = new FormGroup({
@@ -193,7 +179,21 @@ export class SettingsComponent
     )
   }
 
-  constructor() {
+  constructor(
+    private documentListViewService: DocumentListViewService,
+    private toastService: ToastService,
+    private settings: SettingsService,
+    @Inject(LOCALE_ID) public currentLocale: string,
+    private viewportScroller: ViewportScroller,
+    private activatedRoute: ActivatedRoute,
+    public readonly tourService: TourService,
+    private usersService: UserService,
+    private groupsService: GroupService,
+    private router: Router,
+    public permissionsService: PermissionsService,
+    private modalService: NgbModal,
+    private systemStatusService: SystemStatusService
+  ) {
     super()
     this.settings.settingsSaved.subscribe(() => {
       if (!this.savePending) this.initialize()

src-ui/src/app/components/admin/tasks/tasks.component.ts

@@ -1,5 +1,5 @@
 import { NgTemplateOutlet, SlicePipe } from '@angular/common'
-import { Component, inject, OnDestroy, OnInit } from '@angular/core'
+import { Component, OnDestroy, OnInit } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { Router } from '@angular/router'
 import {
@@ -69,10 +69,6 @@ export class TasksComponent
   extends LoadingComponentWithPermissions
   implements OnInit, OnDestroy
 {
-  tasksService = inject(TasksService)
-  private modalService = inject(NgbModal)
-  private readonly router = inject(Router)
-
   public activeTab: TaskTab
   public selectedTasks: Set<number> = new Set()
   public togggleAll: boolean = false
@@ -109,6 +105,14 @@ export class TasksComponent
       : $localize`Dismiss all`
   }
 
+  constructor(
+    public tasksService: TasksService,
+    private modalService: NgbModal,
+    private readonly router: Router
+  ) {
+    super()
+  }
+
   ngOnInit() {
     this.tasksService.reload()
     timer(5000, 5000)

src-ui/src/app/components/admin/trash/trash.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, inject } from '@angular/core'
+import { Component, OnDestroy } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { Router } from '@angular/router'
 import {
@@ -36,19 +36,19 @@ export class TrashComponent
   extends LoadingComponentWithPermissions
   implements OnDestroy
 {
-  private trashService = inject(TrashService)
-  private toastService = inject(ToastService)
-  private modalService = inject(NgbModal)
-  private settingsService = inject(SettingsService)
-  private router = inject(Router)
-
   public documentsInTrash: Document[] = []
   public selectedDocuments: Set<number> = new Set()
   public allToggled: boolean = false
   public page: number = 1
   public totalDocuments: number
 
-  constructor() {
+  constructor(
+    private trashService: TrashService,
+    private toastService: ToastService,
+    private modalService: NgbModal,
+    private settingsService: SettingsService,
+    private router: Router
+  ) {
     super()
     this.reload()
   }

src-ui/src/app/components/admin/users-groups/users-groups.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit, inject } from '@angular/core'
+import { Component, OnDestroy, OnInit } from '@angular/core'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { Subject, first, takeUntil } from 'rxjs'
@@ -31,18 +31,22 @@ export class UsersAndGroupsComponent
   extends ComponentWithPermissions
   implements OnInit, OnDestroy
 {
-  private usersService = inject(UserService)
-  private groupsService = inject(GroupService)
-  private toastService = inject(ToastService)
-  private modalService = inject(NgbModal)
-  permissionsService = inject(PermissionsService)
-  private settings = inject(SettingsService)
-
   users: User[]
   groups: Group[]
 
   unsubscribeNotifier: Subject<any> = new Subject()
 
+  constructor(
+    private usersService: UserService,
+    private groupsService: GroupService,
+    private toastService: ToastService,
+    private modalService: NgbModal,
+    public permissionsService: PermissionsService,
+    private settings: SettingsService
+  ) {
+    super()
+  }
+
   ngOnInit(): void {
     this.usersService
       .listAll(null, null, { full_perms: true })

src-ui/src/app/components/app-frame/app-frame.component.ts

@@ -6,7 +6,7 @@ import {
   moveItemInArray,
 } from '@angular/cdk/drag-drop'
 import { NgClass } from '@angular/common'
-import { Component, HostListener, inject, OnInit } from '@angular/core'
+import { Component, HostListener, OnInit } from '@angular/core'
 import { ActivatedRoute, Router, RouterModule } from '@angular/router'
 import {
   NgbCollapseModule,
@@ -74,27 +74,27 @@ export class AppFrameComponent
   extends ComponentWithPermissions
   implements OnInit, ComponentCanDeactivate
 {
-  router = inject(Router)
-  private activatedRoute = inject(ActivatedRoute)
-  private openDocumentsService = inject(OpenDocumentsService)
-  savedViewService = inject(SavedViewService)
-  private remoteVersionService = inject(RemoteVersionService)
-  settingsService = inject(SettingsService)
-  tasksService = inject(TasksService)
-  private readonly toastService = inject(ToastService)
-  private modalService = inject(NgbModal)
-  permissionsService = inject(PermissionsService)
-  private djangoMessagesService = inject(DjangoMessagesService)
-
+  versionString = `${environment.appTitle} ${environment.version}`
   appRemoteVersion: AppRemoteVersion
 
   isMenuCollapsed: boolean = true
 
   slimSidebarAnimating: boolean = false
 
-  constructor() {
+  constructor(
+    public router: Router,
+    private activatedRoute: ActivatedRoute,
+    private openDocumentsService: OpenDocumentsService,
+    public savedViewService: SavedViewService,
+    private remoteVersionService: RemoteVersionService,
+    public settingsService: SettingsService,
+    public tasksService: TasksService,
+    private readonly toastService: ToastService,
+    private modalService: NgbModal,
+    public permissionsService: PermissionsService,
+    private djangoMessagesService: DjangoMessagesService
+  ) {
     super()
-    const permissionsService = this.permissionsService
 
     if (
       permissionsService.currentUserCan(
@@ -142,10 +142,6 @@ export class AppFrameComponent
     }, 200) // slightly longer than css animation for slim sidebar
   }
 
-  get versionString(): string {
-    return `${environment.appTitle} v${this.settingsService.get(SETTINGS_KEYS.VERSION)}${environment.production ? '' : ` #${environment.tag}`}`
-  }
-
   get customAppTitle(): string {
     return this.settingsService.get(SETTINGS_KEYS.APP_TITLE)
   }

src-ui/src/app/components/app-frame/global-search/global-search.component.ts

@@ -6,7 +6,6 @@ import {
   QueryList,
   ViewChild,
   ViewChildren,
-  inject,
 } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { Router } from '@angular/router'
@@ -70,17 +69,6 @@ import { WorkflowEditDialogComponent } from '../../common/edit-dialog/workflow-e
   ],
 })
 export class GlobalSearchComponent implements OnInit {
-  searchService = inject(SearchService)
-  private router = inject(Router)
-  private modalService = inject(NgbModal)
-  private documentService = inject(DocumentService)
-  private documentListViewService = inject(DocumentListViewService)
-  private permissionsService = inject(PermissionsService)
-  private toastService = inject(ToastService)
-  private hotkeyService = inject(HotKeyService)
-  private settingsService = inject(SettingsService)
-  private locationStrategy = inject(LocationStrategy)
-
   public DataType = DataType
   public query: string
   public queryDebounce: Subject<string>
@@ -102,7 +90,18 @@ export class GlobalSearchComponent implements OnInit {
     )
   }
 
-  constructor() {
+  constructor(
+    public searchService: SearchService,
+    private router: Router,
+    private modalService: NgbModal,
+    private documentService: DocumentService,
+    private documentListViewService: DocumentListViewService,
+    private permissionsService: PermissionsService,
+    private toastService: ToastService,
+    private hotkeyService: HotKeyService,
+    private settingsService: SettingsService,
+    private locationStrategy: LocationStrategy
+  ) {
     this.queryDebounce = new Subject<string>()
 
     this.queryDebounce

src-ui/src/app/components/app-frame/toasts-dropdown/toasts-dropdown.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit, inject } from '@angular/core'
+import { Component, OnDestroy, OnInit } from '@angular/core'
 import {
   NgbDropdownModule,
   NgbProgressbarModule,
@@ -20,7 +20,7 @@ import { ToastComponent } from '../../common/toast/toast.component'
   ],
 })
 export class ToastsDropdownComponent implements OnInit, OnDestroy {
-  toastService = inject(ToastService)
+  constructor(public toastService: ToastService) {}
 
   private subscription: Subscription
 

src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.ts

@@ -1,5 +1,5 @@
 import { DecimalPipe } from '@angular/common'
-import { Component, EventEmitter, Input, Output, inject } from '@angular/core'
+import { Component, EventEmitter, Input, Output } from '@angular/core'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { Subject } from 'rxjs'
 import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
@@ -12,7 +12,9 @@ import { LoadingComponentWithPermissions } from '../../loading-component/loading
   imports: [DecimalPipe, SafeHtmlPipe],
 })
 export class ConfirmDialogComponent extends LoadingComponentWithPermissions {
-  activeModal = inject(NgbActiveModal)
+  constructor(public activeModal: NgbActiveModal) {
+    super()
+  }
 
   @Output()
   public confirmClicked = new EventEmitter()

src-ui/src/app/components/common/confirm-dialog/delete-pages-confirm-dialog/delete-pages-confirm-dialog.component.html

@@ -0,0 +1,54 @@
+<div class="modal-header">
+    <h4 class="modal-title" id="modal-basic-title">{{title}}</h4>
+    <button type="button" class="btn-close" aria-label="Close" (click)="cancel()">
+    </button>
+</div>
+<div class="modal-body">
+    <div class="row">
+        <div class="col">
+            <div class="btn-toolbar flex-nowrap">
+                <div class="input-group input-group-sm">
+                    <div class="input-group-text" i18n>Page</div>
+                    <input class="form-control mw-60" type="number" min="1" [(ngModel)]="currentPage" />
+                    <div class="input-group-text" i18n>of {{totalPages}}</div>
+                </div>
+                <div class="input-group input-group-sm ms-auto">
+                    <span class="input-group-text" i18n>Pages to remove</span>
+                    <input [ngModel]="pagesString" class="form-control" disabled />
+                </div>
+            </div>
+            <div class="pdf-viewer-container w-100 mt-3">
+                <pdf-viewer #pdfViewer [src]="pdfSrc" [(page)]="currentPage"
+                [original-size]="false"
+                [zoom]="1"
+                zoom-scale="page-fit"
+                [render-text]="false"
+                (pagerendered)="pageRendered($event)"
+                (after-load-complete)="pdfPreviewLoaded($event)">
+                </pdf-viewer>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="modal-footer flex-nowrap">
+    <div>
+        @if (message) {
+            <p [innerHTML]="message | safeHtml"></p>
+        }
+        @if (messageBold) {
+            <p class="mb-0 small"><b [innerHTML]="messageBold | safeHtml"></b></p>
+        }
+    </div>
+    <button type="button" class="btn" [class]="cancelBtnClass" (click)="cancel()" [disabled]="!buttonsEnabled">
+            <span class="d-inline-block" style="padding-bottom: 1px;">{{cancelBtnCaption}}</span>
+        </button>
+    <button type="button" class="btn" [class]="btnClass" (click)="confirm()" [disabled]="!confirmButtonEnabled || !buttonsEnabled">
+        {{btnCaption}}
+    </button>
+</div>
+
+<ng-template #pageCheckOverlay let-page="page" let-pages="pages">
+    <div class="position-absolute top-0 start-0 w-100 h-100 p-2" (click)="pageCheckChanged(page)">
+        <input type="checkbox" class="form-check-input" />
+    </div>
+</ng-template>

src-ui/src/app/components/common/confirm-dialog/delete-pages-confirm-dialog/delete-pages-confirm-dialog.component.scss

@@ -0,0 +1,28 @@
+.pdf-viewer-container {
+  background-color: gray;
+  height: 550px;
+
+  pdf-viewer {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.mw-60 {
+  max-width: 60px;
+}
+
+div.position-absolute:has(.form-check-input:checked) {
+  background-color: rgba(var(--bs-dark-rgb), 0.4);
+}
+
+.form-check-input {
+  &:checked {
+    background-color: var(--bs-danger);
+    border-color: var(--bs-danger);
+  }
+  &:focus {
+    box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), var(--pngx-focus-alpha));
+    border-color: var(--bs-danger);
+  }
+}

src-ui/src/app/components/common/confirm-dialog/delete-pages-confirm-dialog/delete-pages-confirm-dialog.component.spec.ts

@@ -0,0 +1,60 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
+import { DeletePagesConfirmDialogComponent } from './delete-pages-confirm-dialog.component'
+
+describe('DeletePagesConfirmDialogComponent', () => {
+  let component: DeletePagesConfirmDialogComponent
+  let fixture: ComponentFixture<DeletePagesConfirmDialogComponent>
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [],
+      imports: [
+        NgxBootstrapIconsModule.pick(allIcons),
+        FormsModule,
+        ReactiveFormsModule,
+        DeletePagesConfirmDialogComponent,
+      ],
+      providers: [
+        NgbActiveModal,
+        SafeHtmlPipe,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
+    }).compileComponents()
+    fixture = TestBed.createComponent(DeletePagesConfirmDialogComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should return a string with comma-separated pages', () => {
+    component.pages = [1, 2, 3, 4]
+    expect(component.pagesString).toEqual('1, 2, 3, 4')
+  })
+
+  it('should update totalPages when pdf is loaded', () => {
+    component.pdfPreviewLoaded({ numPages: 5 } as any)
+    expect(component.totalPages).toEqual(5)
+  })
+
+  it('should update checks when page is rendered', () => {
+    const event = {
+      target: document.createElement('div'),
+      detail: { pageNumber: 1 },
+    } as any
+    component.pageRendered(event)
+    expect(component['checks'].length).toEqual(1)
+  })
+
+  it('should update pages when page check is changed', () => {
+    component.pageCheckChanged(1)
+    expect(component.pages).toEqual([1])
+    component.pageCheckChanged(1)
+    expect(component.pages).toEqual([])
+  })
+})

src-ui/src/app/components/common/confirm-dialog/delete-pages-confirm-dialog/delete-pages-confirm-dialog.component.ts

@@ -0,0 +1,71 @@
+import { Component, TemplateRef, ViewChild } from '@angular/core'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import {
+  PDFDocumentProxy,
+  PdfViewerComponent,
+  PdfViewerModule,
+} from 'ng2-pdf-viewer'
+import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
+import { DocumentService } from 'src/app/services/rest/document.service'
+import { ConfirmDialogComponent } from '../confirm-dialog.component'
+
+@Component({
+  selector: 'pngx-delete-pages-confirm-dialog',
+  templateUrl: './delete-pages-confirm-dialog.component.html',
+  styleUrl: './delete-pages-confirm-dialog.component.scss',
+  imports: [PdfViewerModule, FormsModule, ReactiveFormsModule, SafeHtmlPipe],
+})
+export class DeletePagesConfirmDialogComponent extends ConfirmDialogComponent {
+  public documentID: number
+  public pages: number[] = []
+  public currentPage: number = 1
+  public totalPages: number
+
+  @ViewChild('pdfViewer') pdfViewer: PdfViewerComponent
+  @ViewChild('pageCheckOverlay') pageCheckOverlay!: TemplateRef<any>
+  private checks: HTMLElement[] = []
+
+  public get pagesString(): string {
+    return this.pages.join(', ')
+  }
+
+  public get pdfSrc(): string {
+    return this.documentService.getPreviewUrl(this.documentID)
+  }
+
+  constructor(
+    activeModal: NgbActiveModal,
+    private documentService: DocumentService
+  ) {
+    super(activeModal)
+  }
+
+  public pdfPreviewLoaded(pdf: PDFDocumentProxy) {
+    this.totalPages = pdf.numPages
+  }
+
+  pageRendered(event: CustomEvent) {
+    const pageDiv = event.target as HTMLDivElement
+    const check = this.pageCheckOverlay.createEmbeddedView({
+      page: event.detail.pageNumber,
+    })
+    this.checks[event.detail.pageNumber - 1] = check.rootNodes[0]
+    pageDiv?.insertBefore(check.rootNodes[0], pageDiv.firstChild)
+    this.updateChecks()
+  }
+
+  pageCheckChanged(pageNumber: number) {
+    if (!this.pages.includes(pageNumber)) this.pages.push(pageNumber)
+    else if (this.pages.includes(pageNumber))
+      this.pages.splice(this.pages.indexOf(pageNumber), 1)
+    this.updateChecks()
+  }
+
+  private updateChecks() {
+    this.checks.forEach((check, i) => {
+      const input = check.getElementsByTagName('input')[0]
+      input.checked = this.pages.includes(i + 1)
+    })
+  }
+}

src-ui/src/app/components/common/confirm-dialog/merge-confirm-dialog/merge-confirm-dialog.component.ts

@@ -3,8 +3,9 @@ import {
   DragDropModule,
   moveItemInArray,
 } from '@angular/cdk/drag-drop'
-import { Component, OnInit, inject } from '@angular/core'
+import { Component, OnInit } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { takeUntil } from 'rxjs'
 import { Document } from 'src/app/data/document'
@@ -27,9 +28,6 @@ export class MergeConfirmDialogComponent
   extends ConfirmDialogComponent
   implements OnInit
 {
-  private documentService = inject(DocumentService)
-  private permissionService = inject(PermissionsService)
-
   public documentIDs: number[] = []
   public archiveFallback: boolean = false
   public deleteOriginals: boolean = false
@@ -40,8 +38,12 @@ export class MergeConfirmDialogComponent
 
   public metadataDocumentID: number = -1
 
-  constructor() {
-    super()
+  constructor(
+    activeModal: NgbActiveModal,
+    private documentService: DocumentService,
+    private permissionService: PermissionsService
+  ) {
+    super(activeModal)
   }
 
   ngOnInit() {

src-ui/src/app/components/common/confirm-dialog/rotate-confirm-dialog/rotate-confirm-dialog.component.ts

@@ -1,5 +1,6 @@
 import { NgStyle } from '@angular/common'
-import { Component, inject } from '@angular/core'
+import { Component } from '@angular/core'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
 import { DocumentService } from 'src/app/services/rest/document.service'
@@ -12,8 +13,6 @@ import { ConfirmDialogComponent } from '../confirm-dialog.component'
   imports: [NgStyle, NgxBootstrapIconsModule, SafeHtmlPipe],
 })
 export class RotateConfirmDialogComponent extends ConfirmDialogComponent {
-  documentService = inject(DocumentService)
-
   public documentID: number
   public showPDFNote: boolean = true
 
@@ -26,8 +25,11 @@ export class RotateConfirmDialogComponent extends ConfirmDialogComponent {
     return degrees
   }
 
-  constructor() {
-    super()
+  constructor(
+    activeModal: NgbActiveModal,
+    public documentService: DocumentService
+  ) {
+    super(activeModal)
   }
 
   rotate(clockwise: boolean = true) {

src-ui/src/app/components/common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component.html

@@ -0,0 +1,59 @@
+<div class="modal-header">
+    <h4 class="modal-title" id="modal-basic-title">{{title}}</h4>
+    <button type="button" class="btn-close" aria-label="Close" (click)="cancel()">
+    </button>
+</div>
+<div class="modal-body">
+    <p>{{message}}</p>
+    <div class="row mb-2">
+        <div class="col-7">
+            <div class="input-group input-group-sm">
+                <div class="input-group-text" i18n>Page</div>
+                <input class="form-control" type="number" min="1" [(ngModel)]="page" />
+                <div class="input-group-text" i18n>of {{totalPages}}</div>
+            </div>
+            <div class="pdf-viewer-container w-100 mt-3">
+                <pdf-viewer [src]="pdfSrc" [(page)]="page"
+                [original-size]="false"
+                [zoom]="1"
+                zoom-scale="page-fit"
+                (after-load-complete)="pdfPreviewLoaded($event)">
+                </pdf-viewer>
+            </div>
+        </div>
+        <div class="col-5">
+            <div class="d-grid">
+                <button class="btn btn-sm btn-primary" (click)="addSplit()" [disabled]="!canSplit">
+                    <i-bs name="plus-circle"></i-bs>&nbsp;
+                    <span i18n>Add Split</span>
+                </button>
+            </div>
+
+            <ul class="list-group mt-3">
+                @for (pageStr of pagesString.split(','); track pageStr; let i = $index) {
+                    <li class="list-group-item d-flex align-items-center">
+                        {{pageStr}}
+                        @if (pagesString.split(',').length > 1) {
+                            &nbsp;
+                            <button class="btn btn-sm btn-danger ms-auto" (click)="removeSplit(i)">
+                                <i-bs name="trash"></i-bs>
+                            </button>
+                        }
+                    </li>
+                }
+            </ul>
+        </div>
+    </div>
+</div>
+<div class="modal-footer">
+    <div class="form-check form-switch me-auto">
+       <input class="form-check-input" type="checkbox" role="switch" id="deleteOriginalSwitch" [(ngModel)]="deleteOriginal" [disabled]="!userOwnsDocument">
+       <label class="form-check-label" for="deleteOriginalSwitch" i18n>Delete original document after successful split</label>
+     </div>
+    <button type="button" class="btn" [class]="cancelBtnClass" (click)="cancel()" [disabled]="!buttonsEnabled">
+            <span class="d-inline-block" style="padding-bottom: 1px;">{{cancelBtnCaption}}</span>
+        </button>
+    <button type="button" class="btn" [class]="btnClass" (click)="confirm()" [disabled]="!confirmButtonEnabled || !buttonsEnabled">
+        {{btnCaption}}
+    </button>
+</div>

src-ui/src/app/components/common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component.scss

@@ -0,0 +1,9 @@
+.pdf-viewer-container {
+    background-color: gray;
+    height: 500px;
+
+    pdf-viewer {
+      width: 100%;
+      height: 100%;
+    }
+  }

src-ui/src/app/components/common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component.spec.ts

@@ -0,0 +1,107 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { PdfViewerModule } from 'ng2-pdf-viewer'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { of } from 'rxjs'
+import { DocumentService } from 'src/app/services/rest/document.service'
+import { SplitConfirmDialogComponent } from './split-confirm-dialog.component'
+
+describe('SplitConfirmDialogComponent', () => {
+  let component: SplitConfirmDialogComponent
+  let fixture: ComponentFixture<SplitConfirmDialogComponent>
+  let documentService: DocumentService
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        NgxBootstrapIconsModule.pick(allIcons),
+        ReactiveFormsModule,
+        FormsModule,
+        PdfViewerModule,
+        SplitConfirmDialogComponent,
+      ],
+      providers: [
+        NgbActiveModal,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(SplitConfirmDialogComponent)
+    documentService = TestBed.inject(DocumentService)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should load document on init', () => {
+    const getSpy = jest.spyOn(documentService, 'get')
+    component.documentID = 1
+    getSpy.mockReturnValue(of({ id: 1 } as any))
+    component.ngOnInit()
+    expect(documentService.get).toHaveBeenCalledWith(1)
+  })
+
+  it('should update pagesString when pages are added', () => {
+    component.totalPages = 5
+    component.page = 2
+    component.addSplit()
+    expect(component.pagesString).toEqual('1-2,3-5')
+    component.page = 4
+    component.addSplit()
+    expect(component.pagesString).toEqual('1-2,3-4,5')
+  })
+
+  it('should update pagesString when pages are removed', () => {
+    component.totalPages = 5
+    component.page = 2
+    component.addSplit()
+    component.page = 4
+    component.addSplit()
+    expect(component.pagesString).toEqual('1-2,3-4,5')
+    component.removeSplit(0)
+    expect(component.pagesString).toEqual('1-4,5')
+  })
+
+  it('should enable confirm button when pages are added', () => {
+    component.totalPages = 5
+    component.page = 2
+    component.addSplit()
+    expect(component.confirmButtonEnabled).toBeTruthy()
+  })
+
+  it('should disable confirm button when all pages are removed', () => {
+    component.totalPages = 5
+    component.page = 2
+    component.addSplit()
+    component.removeSplit(0)
+    expect(component.confirmButtonEnabled).toBeFalsy()
+  })
+
+  it('should not add split if page is the last page', () => {
+    component.totalPages = 5
+    component.page = 5
+    component.addSplit()
+    expect(component.pagesString).toEqual('1-5')
+  })
+
+  it('should update totalPages when pdf is loaded', () => {
+    component.pdfPreviewLoaded({ numPages: 5 } as any)
+    expect(component.totalPages).toEqual(5)
+  })
+
+  it('should correctly disable split button', () => {
+    component.totalPages = 5
+    component.page = 1
+    expect(component.canSplit).toBeTruthy()
+    component.page = 5
+    expect(component.canSplit).toBeFalsy()
+    component.page = 4
+    expect(component.canSplit).toBeTruthy()
+    component['pages'] = new Set([1, 2, 3, 4])
+    expect(component.canSplit).toBeFalsy()
+  })
+})

src-ui/src/app/components/common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component.ts

@@ -0,0 +1,100 @@
+import { Component, OnInit } from '@angular/core'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { PDFDocumentProxy, PdfViewerModule } from 'ng2-pdf-viewer'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { Document } from 'src/app/data/document'
+import { PermissionsService } from 'src/app/services/permissions.service'
+import { DocumentService } from 'src/app/services/rest/document.service'
+import { ConfirmDialogComponent } from '../confirm-dialog.component'
+
+@Component({
+  selector: 'pngx-split-confirm-dialog',
+  templateUrl: './split-confirm-dialog.component.html',
+  styleUrl: './split-confirm-dialog.component.scss',
+  imports: [
+    FormsModule,
+    ReactiveFormsModule,
+    NgxBootstrapIconsModule,
+    PdfViewerModule,
+  ],
+})
+export class SplitConfirmDialogComponent
+  extends ConfirmDialogComponent
+  implements OnInit
+{
+  public get pagesString(): string {
+    let pagesStr = ''
+
+    let lastPage = 1
+    for (let i = 1; i <= this.totalPages; i++) {
+      if (this.pages.has(i) || i === this.totalPages) {
+        if (lastPage === i) {
+          pagesStr += `${i},`
+          lastPage = Math.min(i + 1, this.totalPages)
+        } else {
+          pagesStr += `${lastPage}-${i},`
+          lastPage = Math.min(i + 1, this.totalPages)
+        }
+      }
+    }
+
+    return pagesStr.replace(/,$/, '')
+  }
+
+  private pages: Set<number> = new Set()
+
+  public documentID: number
+  private document: Document
+  public page: number = 1
+  public totalPages: number
+  public deleteOriginal: boolean = false
+
+  public get canSplit(): boolean {
+    return (
+      this.page < this.totalPages &&
+      this.pages.size < this.totalPages - 1 &&
+      !this.pages.has(this.page)
+    )
+  }
+
+  public get pdfSrc(): string {
+    return this.documentService.getPreviewUrl(this.documentID)
+  }
+
+  constructor(
+    activeModal: NgbActiveModal,
+    private documentService: DocumentService,
+    private permissionService: PermissionsService
+  ) {
+    super(activeModal)
+    this.confirmButtonEnabled = this.pages.size > 0
+  }
+
+  ngOnInit(): void {
+    this.documentService.get(this.documentID).subscribe((r) => {
+      this.document = r
+    })
+  }
+
+  pdfPreviewLoaded(pdf: PDFDocumentProxy) {
+    this.totalPages = pdf.numPages
+  }
+
+  addSplit() {
+    if (this.page === this.totalPages) return
+    this.pages.add(this.page)
+    this.pages = new Set(Array.from(this.pages).sort((a, b) => a - b))
+    this.confirmButtonEnabled = this.pages.size > 0
+  }
+
+  removeSplit(i: number) {
+    let page = Array.from(this.pages)[Math.min(i, this.pages.size - 1)]
+    this.pages.delete(page)
+    this.confirmButtonEnabled = this.pages.size > 0
+  }
+
+  get userOwnsDocument(): boolean {
+    return this.permissionService.currentUserOwnsObject(this.document)
+  }
+}

src-ui/src/app/components/common/custom-field-display/custom-field-display.component.ts

@@ -1,5 +1,5 @@
 import { CurrencyPipe, getLocaleCurrencyCode } from '@angular/common'
-import { Component, Input, LOCALE_ID, OnInit, inject } from '@angular/core'
+import { Component, Inject, Input, LOCALE_ID, OnInit } from '@angular/core'
 import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'
 import { takeUntil } from 'rxjs'
 import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
@@ -20,9 +20,6 @@ export class CustomFieldDisplayComponent
   extends LoadingComponentWithPermissions
   implements OnInit
 {
-  private customFieldService = inject(CustomFieldsService)
-  private documentService = inject(DocumentService)
-
   CustomFieldDataType = CustomFieldDataType
 
   private _document: Document
@@ -66,9 +63,11 @@ export class CustomFieldDisplayComponent
 
   private defaultCurrencyCode: any
 
-  constructor() {
-    const currentLocale = inject(LOCALE_ID)
-
+  constructor(
+    private customFieldService: CustomFieldsService,
+    private documentService: DocumentService,
+    @Inject(LOCALE_ID) currentLocale: string
+  ) {
     super()
     this.defaultCurrencyCode = getLocaleCurrencyCode(currentLocale)
     this.customFieldService.listAll().subscribe((r) => {

src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.ts

@@ -7,7 +7,6 @@ import {
   QueryList,
   ViewChild,
   ViewChildren,
-  inject,
 } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbDropdownModule, NgbModal } from '@ng-bootstrap/ng-bootstrap'
@@ -38,11 +37,6 @@ import { CustomFieldEditDialogComponent } from '../edit-dialog/custom-field-edit
   ],
 })
 export class CustomFieldsDropdownComponent extends LoadingComponentWithPermissions {
-  private customFieldsService = inject(CustomFieldsService)
-  private modalService = inject(NgbModal)
-  private toastService = inject(ToastService)
-  private permissionsService = inject(PermissionsService)
-
   public popperOptions = pngxPopperOptions
 
   @Input()
@@ -84,7 +78,12 @@ export class CustomFieldsDropdownComponent extends LoadingComponentWithPermissio
     )
   }
 
-  constructor() {
+  constructor(
+    private customFieldsService: CustomFieldsService,
+    private modalService: NgbModal,
+    private toastService: ToastService,
+    private permissionsService: PermissionsService
+  ) {
     super()
     this.getFields()
   }

src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.ts

@@ -2,7 +2,6 @@ import { NgTemplateOutlet } from '@angular/common'
 import {
   Component,
   EventEmitter,
-  inject,
   Input,
   Output,
   QueryList,
@@ -179,8 +178,6 @@ export class CustomFieldQueriesModel {
   ],
 })
 export class CustomFieldsQueryDropdownComponent extends LoadingComponentWithPermissions {
-  protected customFieldsService = inject(CustomFieldsService)
-
   public CustomFieldQueryComponentType = CustomFieldQueryElementType
   public CustomFieldQueryOperator = CustomFieldQueryOperator
   public CustomFieldDataType = CustomFieldDataType
@@ -248,7 +245,7 @@ export class CustomFieldsQueryDropdownComponent extends LoadingComponentWithPerm
 
   public readonly today: string = new Date().toISOString().split('T')[0]
 
-  constructor() {
+  constructor(protected customFieldsService: CustomFieldsService) {
     super()
     this.selectionModel = new CustomFieldQueriesModel()
     this.getFields()

src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.ts

@@ -6,7 +6,6 @@ import {
   OnDestroy,
   OnInit,
   Output,
-  inject,
 } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import {
@@ -64,9 +63,7 @@ export enum RelativeDate {
 export class DatesDropdownComponent implements OnInit, OnDestroy {
   public popperOptions = pngxPopperOptions
 
-  constructor() {
-    const settings = inject(SettingsService)
-
+  constructor(settings: SettingsService) {
     this.datePlaceHolder = settings.getLocalizedDateInputFormat()
   }
 

src-ui/src/app/components/common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component.html

@@ -13,6 +13,8 @@
     <pngx-input-select i18n-title title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></pngx-input-select>
     @if (patternRequired) {
       <pngx-input-text i18n-title title="Matching pattern" formControlName="match" [error]="error?.match"></pngx-input-text>
+    }
+    @if (patternRequired) {
       <pngx-input-check i18n-title title="Case insensitive" formControlName="is_insensitive" novalidate></pngx-input-check>
     }
 

src-ui/src/app/components/common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component.ts

@@ -1,10 +1,11 @@
-import { Component, inject } from '@angular/core'
+import { Component } from '@angular/core'
 import {
   FormControl,
   FormGroup,
   FormsModule,
   ReactiveFormsModule,
 } from '@angular/forms'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'
 import { Correspondent } from 'src/app/data/correspondent'
 import { DEFAULT_MATCHING_ALGORITHM } from 'src/app/data/matching-model'
@@ -12,7 +13,6 @@ import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
 import { CorrespondentService } from 'src/app/services/rest/correspondent.service'
 import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
-import { CheckComponent } from '../../input/check/check.component'
 import { PermissionsFormComponent } from '../../input/permissions/permissions-form/permissions-form.component'
 import { SelectComponent } from '../../input/select/select.component'
 import { TextComponent } from '../../input/text/text.component'
@@ -22,7 +22,6 @@ import { TextComponent } from '../../input/text/text.component'
   templateUrl: './correspondent-edit-dialog.component.html',
   styleUrls: ['./correspondent-edit-dialog.component.scss'],
   imports: [
-    CheckComponent,
     SelectComponent,
     PermissionsFormComponent,
     TextComponent,
@@ -32,11 +31,13 @@ import { TextComponent } from '../../input/text/text.component'
   ],
 })
 export class CorrespondentEditDialogComponent extends EditDialogComponent<Correspondent> {
-  constructor() {
-    super()
-    this.service = inject(CorrespondentService)
-    this.userService = inject(UserService)
-    this.settingsService = inject(SettingsService)
+  constructor(
+    service: CorrespondentService,
+    activeModal: NgbActiveModal,
+    userService: UserService,
+    settingsService: SettingsService
+  ) {
+    super(service, activeModal, userService, settingsService)
   }
 
   getCreateTitle() {

src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.ts

@@ -5,7 +5,6 @@ import {
   OnInit,
   QueryList,
   ViewChildren,
-  inject,
 } from '@angular/core'
 import {
   FormArray,
@@ -14,6 +13,7 @@ import {
   FormsModule,
   ReactiveFormsModule,
 } from '@angular/forms'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { takeUntil } from 'rxjs'
 import {
@@ -54,11 +54,13 @@ export class CustomFieldEditDialogComponent
       .select_options as FormArray
   }
 
-  constructor() {
-    super()
-    this.service = inject(CustomFieldsService)
-    this.userService = inject(UserService)
-    this.settingsService = inject(SettingsService)
+  constructor(
+    service: CustomFieldsService,
+    activeModal: NgbActiveModal,
+    userService: UserService,
+    settingsService: SettingsService
+  ) {
+    super(service, activeModal, userService, settingsService)
   }
 
   ngOnInit(): void {

src-ui/src/app/components/common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component.html

@@ -14,6 +14,8 @@
       <pngx-input-select i18n-title title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></pngx-input-select>
       @if (patternRequired) {
         <pngx-input-text i18n-title title="Matching pattern" formControlName="match" [error]="error?.match"></pngx-input-text>
+      }
+      @if (patternRequired) {
         <pngx-input-check i18n-title title="Case insensitive" formControlName="is_insensitive"></pngx-input-check>
       }
     </div>

src-ui/src/app/components/common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component.ts

@@ -1,10 +1,11 @@
-import { Component, inject } from '@angular/core'
+import { Component } from '@angular/core'
 import {
   FormControl,
   FormGroup,
   FormsModule,
   ReactiveFormsModule,
 } from '@angular/forms'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'
 import { DocumentType } from 'src/app/data/document-type'
 import { DEFAULT_MATCHING_ALGORITHM } from 'src/app/data/matching-model'
@@ -12,7 +13,6 @@ import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
 import { DocumentTypeService } from 'src/app/services/rest/document-type.service'
 import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
-import { CheckComponent } from '../../input/check/check.component'
 import { PermissionsFormComponent } from '../../input/permissions/permissions-form/permissions-form.component'
 import { SelectComponent } from '../../input/select/select.component'
 import { TextComponent } from '../../input/text/text.component'
@@ -22,7 +22,6 @@ import { TextComponent } from '../../input/text/text.component'
   templateUrl: './document-type-edit-dialog.component.html',
   styleUrls: ['./document-type-edit-dialog.component.scss'],
   imports: [
-    CheckComponent,
     SelectComponent,
     PermissionsFormComponent,
     TextComponent,
@@ -32,11 +31,13 @@ import { TextComponent } from '../../input/text/text.component'
   ],
 })
 export class DocumentTypeEditDialogComponent extends EditDialogComponent<DocumentType> {
-  constructor() {
-    super()
-    this.service = inject(DocumentTypeService)
-    this.userService = inject(UserService)
-    this.settingsService = inject(SettingsService)
+  constructor(
+    service: DocumentTypeService,
+    activeModal: NgbActiveModal,
+    userService: UserService,
+    settingsService: SettingsService
+  ) {
+    super(service, activeModal, userService, settingsService)
   }
 
   getCreateTitle() {

src-ui/src/app/components/common/edit-dialog/edit-dialog.component.spec.ts

@@ -41,9 +41,13 @@ import { EditDialogComponent, EditDialogMode } from './edit-dialog.component'
   imports: [FormsModule, ReactiveFormsModule],
 })
 class TestComponent extends EditDialogComponent<Tag> {
-  constructor() {
-    super()
-    this.service = TestBed.inject(TagService)
+  constructor(
+    service: TagService,
+    activeModal: NgbActiveModal,
+    userService: UserService,
+    settingsService: SettingsService
+  ) {
+    super(service, activeModal, userService, settingsService)
   }
 
   getForm(): FormGroup<any> {

src-ui/src/app/components/common/edit-dialog/edit-dialog.component.ts

@@ -1,11 +1,4 @@
-import {
-  Directive,
-  EventEmitter,
-  Input,
-  OnInit,
-  Output,
-  inject,
-} from '@angular/core'
+import { Directive, EventEmitter, Input, OnInit, Output } from '@angular/core'
 import { FormGroup } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { Observable } from 'rxjs'
@@ -36,12 +29,14 @@ export abstract class EditDialogComponent<
   extends LoadingComponentWithPermissions
   implements OnInit
 {
-  protected service = inject<AbstractPaperlessService<T>>(
-    AbstractPaperlessService
-  )
-  protected activeModal = inject(NgbActiveModal)
-  protected userService = inject(UserService)
-  protected settingsService = inject(SettingsService)
+  constructor(
+    protected service: AbstractPaperlessService<T>,
+    private activeModal: NgbActiveModal,
+    private userService: UserService,
+    protected settingsService: SettingsService
+  ) {
+    super()
+  }
 
   users: User[]
 

src-ui/src/app/components/common/edit-dialog/group-edit-dialog/group-edit-dialog.component.ts

@@ -1,10 +1,11 @@
-import { Component, inject } from '@angular/core'
+import { Component } from '@angular/core'
 import {
   FormControl,
   FormGroup,
   FormsModule,
   ReactiveFormsModule,
 } from '@angular/forms'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'
 import { Group } from 'src/app/data/group'
 import { GroupService } from 'src/app/services/rest/group.service'
@@ -25,11 +26,13 @@ import { PermissionsSelectComponent } from '../../permissions-select/permissions
   ],
 })
 export class GroupEditDialogComponent extends EditDialogComponent<Group> {
-  constructor() {
-    super()
-    this.service = inject(GroupService)
-    this.userService = inject(UserService)
-    this.settingsService = inject(SettingsService)
+  constructor(
+    service: GroupService,
+    activeModal: NgbActiveModal,
+    userService: UserService,
+    settingsService: SettingsService
+  ) {
+    super(service, activeModal, userService, settingsService)
   }
 
   getCreateTitle() {

src-ui/src/app/components/common/edit-dialog/mail-account-edit-dialog/mail-account-edit-dialog.component.ts

@@ -1,11 +1,15 @@
-import { Component, ViewChild, inject } from '@angular/core'
+import { Component, ViewChild } from '@angular/core'
 import {
   FormControl,
   FormGroup,
   FormsModule,
   ReactiveFormsModule,
 } from '@angular/forms'
-import { NgbAlert, NgbAlertModule } from '@ng-bootstrap/ng-bootstrap'
+import {
+  NgbActiveModal,
+  NgbAlert,
+  NgbAlertModule,
+} from '@ng-bootstrap/ng-bootstrap'
 import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'
 import { IMAPSecurity, MailAccount } from 'src/app/data/mail-account'
 import { MailAccountService } from 'src/app/services/rest/mail-account.service'
@@ -43,11 +47,13 @@ export class MailAccountEditDialogComponent extends EditDialogComponent<MailAcco
 
   @ViewChild('testResultAlert', { static: false }) testResultAlert: NgbAlert
 
-  constructor() {
-    super()
-    this.service = inject(MailAccountService)
-    this.userService = inject(UserService)
-    this.settingsService = inject(SettingsService)
+  constructor(
+    service: MailAccountService,
+    activeModal: NgbActiveModal,
+    userService: UserService,
+    settingsService: SettingsService
+  ) {
+    super(service, activeModal, userService, settingsService)
   }
 
   getCreateTitle() {

src-ui/src/app/components/common/edit-dialog/mail-rule-edit-dialog/mail-rule-edit-dialog.component.ts

@@ -1,10 +1,11 @@
-import { Component, inject } from '@angular/core'
+import { Component } from '@angular/core'
 import {
   FormControl,
   FormGroup,
   FormsModule,
   ReactiveFormsModule,
 } from '@angular/forms'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { first } from 'rxjs'
 import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'
 import { Correspondent } from 'src/app/data/correspondent'
@@ -154,34 +155,32 @@ const METADATA_CORRESPONDENT_OPTIONS = [
   ],
 })
 export class MailRuleEditDialogComponent extends EditDialogComponent<MailRule> {
-  private accountService: MailAccountService
-  private correspondentService: CorrespondentService
-  private documentTypeService: DocumentTypeService
-
   accounts: MailAccount[]
   correspondents: Correspondent[]
   documentTypes: DocumentType[]
 
-  constructor() {
-    super()
-    this.service = inject(MailRuleService)
-    this.accountService = inject(MailAccountService)
-    this.correspondentService = inject(CorrespondentService)
-    this.documentTypeService = inject(DocumentTypeService)
-    this.userService = inject(UserService)
-    this.settingsService = inject(SettingsService)
+  constructor(
+    service: MailRuleService,
+    activeModal: NgbActiveModal,
+    accountService: MailAccountService,
+    correspondentService: CorrespondentService,
+    documentTypeService: DocumentTypeService,
+    userService: UserService,
+    settingsService: SettingsService
+  ) {
+    super(service, activeModal, userService, settingsService)
 
-    this.accountService
+    accountService
       .listAll()
       .pipe(first())
       .subscribe((result) => (this.accounts = result.results))
 
-    this.correspondentService
+    correspondentService
       .listAll()
       .pipe(first())
       .subscribe((result) => (this.correspondents = result.results))
 
-    this.documentTypeService
+    documentTypeService
       .listAll()
       .pipe(first())
       .subscribe((result) => (this.documentTypes = result.results))

src-ui/src/app/components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component.html

@@ -64,6 +64,8 @@
     <pngx-input-select i18n-title title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></pngx-input-select>
     @if (patternRequired) {
       <pngx-input-text i18n-title title="Matching pattern" formControlName="match" [error]="error?.match"></pngx-input-text>
+    }
+    @if (patternRequired) {
       <pngx-input-check i18n-title title="Case insensitive" formControlName="is_insensitive"></pngx-input-check>
     }
 

src-ui/src/app/components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component.ts

@@ -1,12 +1,12 @@
 import { AsyncPipe, NgTemplateOutlet } from '@angular/common'
-import { Component, OnDestroy, inject } from '@angular/core'
+import { Component, OnDestroy } from '@angular/core'
 import {
   FormControl,
   FormGroup,
   FormsModule,
   ReactiveFormsModule,
 } from '@angular/forms'
-import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap'
+import { NgbAccordionModule, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectComponent } from '@ng-select/ng-select'
 import {
   Observable,
@@ -60,8 +60,6 @@ export class StoragePathEditDialogComponent
   extends EditDialogComponent<StoragePath>
   implements OnDestroy
 {
-  private documentsService = inject(DocumentService)
-
   public documentsInput$ = new Subject<string>()
   public foundDocuments$: Observable<Document[]>
   private testDocument: Document
@@ -70,11 +68,14 @@ export class StoragePathEditDialogComponent
   public loading = false
   public testLoading = false
 
-  constructor() {
-    super()
-    this.service = inject(StoragePathService)
-    this.userService = inject(UserService)
-    this.settingsService = inject(SettingsService)
+  constructor(
+    service: StoragePathService,
+    activeModal: NgbActiveModal,
+    userService: UserService,
+    settingsService: SettingsService,
+    private documentsService: DocumentService
+  ) {
+    super(service, activeModal, userService, settingsService)
     this.initPathObservables()
   }
 

src-ui/src/app/components/common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component.html

@@ -16,6 +16,8 @@
     <pngx-input-select i18n-title title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></pngx-input-select>
     @if (patternRequired) {
       <pngx-input-text i18n-title title="Matching pattern" formControlName="match" [error]="error?.match"></pngx-input-text>
+    }
+    @if (patternRequired) {
       <pngx-input-check i18n-title title="Case insensitive" formControlName="is_insensitive"></pngx-input-check>
     }
 

src-ui/src/app/components/common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component.ts

@@ -1,10 +1,11 @@
-import { Component, inject } from '@angular/core'
+import { Component } from '@angular/core'
 import {
   FormControl,
   FormGroup,
   FormsModule,
   ReactiveFormsModule,
 } from '@angular/forms'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'
 import { DEFAULT_MATCHING_ALGORITHM } from 'src/app/data/matching-model'
 import { Tag } from 'src/app/data/tag'
@@ -35,11 +36,13 @@ import { TextComponent } from '../../input/text/text.component'
   ],
 })
 export class TagEditDialogComponent extends EditDialogComponent<Tag> {
-  constructor() {
-    super()
-    this.service = inject(TagService)
-    this.userService = inject(UserService)
-    this.settingsService = inject(SettingsService)
+  constructor(
+    service: TagService,
+    activeModal: NgbActiveModal,
+    userService: UserService,
+    settingsService: SettingsService
+  ) {
+    super(service, activeModal, userService, settingsService)
   }
 
   getCreateTitle() {

src-ui/src/app/components/common/edit-dialog/user-edit-dialog/user-edit-dialog.component.ts

@@ -1,10 +1,11 @@
-import { Component, OnInit, inject } from '@angular/core'
+import { Component, OnInit } from '@angular/core'
 import {
   FormControl,
   FormGroup,
   FormsModule,
   ReactiveFormsModule,
 } from '@angular/forms'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { first } from 'rxjs'
 import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'
 import { Group } from 'src/app/data/group'
@@ -36,21 +37,21 @@ export class UserEditDialogComponent
   extends EditDialogComponent<User>
   implements OnInit
 {
-  private toastService = inject(ToastService)
-  private permissionsService = inject(PermissionsService)
-  private groupsService: GroupService
-
   groups: Group[]
   passwordIsSet: boolean = false
   public totpLoading: boolean = false
 
-  constructor() {
-    super()
-    this.service = inject(UserService)
-    this.groupsService = inject(GroupService)
-    this.settingsService = inject(SettingsService)
+  constructor(
+    service: UserService,
+    activeModal: NgbActiveModal,
+    groupsService: GroupService,
+    settingsService: SettingsService,
+    private toastService: ToastService,
+    private permissionsService: PermissionsService
+  ) {
+    super(service, activeModal, service, settingsService)
 
-    this.groupsService
+    groupsService
       .listAll()
       .pipe(first())
       .subscribe((result) => (this.groups = result.results))

src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html

@@ -129,7 +129,7 @@
             formControlName="schedule_offset_days"
             [showAdd]="false"
             [error]="error?.schedule_offset_days"
-            hint="Positive values will trigger after the date, negative values before."
+            hint="Positive values will trigger the workflow before the date, negative values after."
             i18n-hint
           ></pngx-input-number>
         </div>

src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.ts

@@ -4,7 +4,7 @@ import {
   moveItemInArray,
 } from '@angular/cdk/drag-drop'
 import { NgTemplateOutlet } from '@angular/common'
-import { Component, OnInit, inject } from '@angular/core'
+import { Component, OnInit } from '@angular/core'
 import {
   FormArray,
   FormControl,
@@ -12,7 +12,7 @@ import {
   FormsModule,
   ReactiveFormsModule,
 } from '@angular/forms'
-import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap'
+import { NgbAccordionModule, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { first } from 'rxjs'
 import { Correspondent } from 'src/app/data/correspondent'
@@ -171,12 +171,6 @@ export class WorkflowEditDialogComponent
   public WorkflowTriggerType = WorkflowTriggerType
   public WorkflowActionType = WorkflowActionType
 
-  private correspondentService: CorrespondentService
-  private documentTypeService: DocumentTypeService
-  private storagePathService: StoragePathService
-  private mailRuleService: MailRuleService
-  private customFieldsService: CustomFieldsService
-
   templates: Workflow[]
   correspondents: Correspondent[]
   documentTypes: DocumentType[]
@@ -189,38 +183,40 @@ export class WorkflowEditDialogComponent
 
   private allowedActionTypes = []
 
-  constructor() {
-    super()
-    this.service = inject(WorkflowService)
-    this.correspondentService = inject(CorrespondentService)
-    this.documentTypeService = inject(DocumentTypeService)
-    this.storagePathService = inject(StoragePathService)
-    this.mailRuleService = inject(MailRuleService)
-    this.userService = inject(UserService)
-    this.settingsService = inject(SettingsService)
-    this.customFieldsService = inject(CustomFieldsService)
+  constructor(
+    service: WorkflowService,
+    activeModal: NgbActiveModal,
+    correspondentService: CorrespondentService,
+    documentTypeService: DocumentTypeService,
+    storagePathService: StoragePathService,
+    mailRuleService: MailRuleService,
+    userService: UserService,
+    settingsService: SettingsService,
+    customFieldsService: CustomFieldsService
+  ) {
+    super(service, activeModal, userService, settingsService)
 
-    this.correspondentService
+    correspondentService
       .listAll()
       .pipe(first())
       .subscribe((result) => (this.correspondents = result.results))
 
-    this.documentTypeService
+    documentTypeService
       .listAll()
       .pipe(first())
       .subscribe((result) => (this.documentTypes = result.results))
 
-    this.storagePathService
+    storagePathService
       .listAll()
       .pipe(first())
       .subscribe((result) => (this.storagePaths = result.results))
 
-    this.mailRuleService
+    mailRuleService
       .listAll()
       .pipe(first())
       .subscribe((result) => (this.mailRules = result.results))
 
-    this.customFieldsService
+    customFieldsService
       .listAll()
       .pipe(first())
       .subscribe((result) => {

src-ui/src/app/components/common/email-document-dialog/email-document-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, inject } from '@angular/core'
+import { Component, Input } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
@@ -13,10 +13,6 @@ import { LoadingComponentWithPermissions } from '../../loading-component/loading
   imports: [FormsModule, NgxBootstrapIconsModule],
 })
 export class EmailDocumentDialogComponent extends LoadingComponentWithPermissions {
-  private activeModal = inject(NgbActiveModal)
-  private documentService = inject(DocumentService)
-  private toastService = inject(ToastService)
-
   @Input()
   title = $localize`Email Document`
 
@@ -41,7 +37,11 @@ export class EmailDocumentDialogComponent extends LoadingComponentWithPermission
   public emailSubject: string = ''
   public emailMessage: string = ''
 
-  constructor() {
+  constructor(
+    private activeModal: NgbActiveModal,
+    private documentService: DocumentService,
+    private toastService: ToastService
+  ) {
     super()
     this.loading = false
   }

src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts

@@ -7,7 +7,6 @@ import {
   OnInit,
   Output,
   ViewChild,
-  inject,
 } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbDropdown, NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'
@@ -435,9 +434,6 @@ export class FilterableDropdownComponent
   extends LoadingComponentWithPermissions
   implements OnInit
 {
-  private filterPipe = inject(FilterPipe)
-  private hotkeyService = inject(HotKeyService)
-
   @ViewChild('listFilterTextInput') listFilterTextInput: ElementRef
   @ViewChild('dropdown') dropdown: NgbDropdown
   @ViewChild('buttonItems') buttonItems: ElementRef
@@ -540,7 +536,10 @@ export class FilterableDropdownComponent
 
   private keyboardIndex: number
 
-  constructor() {
+  constructor(
+    private filterPipe: FilterPipe,
+    private hotkeyService: HotKeyService
+  ) {
     super()
     this.selectionModelChange.subscribe((updatedModel) => {
       this.modelIsDirty = updatedModel.isDirty()

src-ui/src/app/components/common/hotkey-dialog/hotkey-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject } from '@angular/core'
+import { Component } from '@angular/core'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 
 const SYMBOLS = {
@@ -19,11 +19,11 @@ const SYMBOLS = {
   styleUrl: './hotkey-dialog.component.scss',
 })
 export class HotkeyDialogComponent {
-  activeModal = inject(NgbActiveModal)
-
   public title: string = $localize`Keyboard shortcuts`
   public hotkeys: Map<string, string> = new Map()
 
+  constructor(public activeModal: NgbActiveModal) {}
+
   public close(): void {
     this.activeModal.close()
   }

src-ui/src/app/components/common/input/custom-fields-values/custom-fields-values.component.ts

@@ -2,7 +2,6 @@ import {
   Component,
   EventEmitter,
   forwardRef,
-  inject,
   Input,
   Output,
 } from '@angular/core'
@@ -56,9 +55,7 @@ import { UrlComponent } from '../url/url.component'
 export class CustomFieldsValuesComponent extends AbstractInputComponent<Object> {
   public CustomFieldDataType = CustomFieldDataType
 
-  constructor() {
-    const customFieldsService = inject(CustomFieldsService)
-
+  constructor(customFieldsService: CustomFieldsService) {
     super()
     customFieldsService.listAll().subscribe((items) => {
       this.fields = items.results

src-ui/src/app/components/common/input/date/date.component.ts

@@ -2,7 +2,6 @@ import {
   Component,
   EventEmitter,
   forwardRef,
-  inject,
   Input,
   OnInit,
   Output,
@@ -46,9 +45,13 @@ export class DateComponent
   extends AbstractInputComponent<string>
   implements OnInit
 {
-  private settings = inject(SettingsService)
-  private ngbDateParserFormatter = inject(NgbDateParserFormatter)
-  private isoDateAdapter = inject<NgbDateAdapter<string>>(NgbDateAdapter)
+  constructor(
+    private settings: SettingsService,
+    private ngbDateParserFormatter: NgbDateParserFormatter,
+    private isoDateAdapter: NgbDateAdapter<string>
+  ) {
+    super()
+  }
 
   @Input()
   suggestions: string[]

src-ui/src/app/components/common/input/document-link/document-link.component.ts

@@ -1,12 +1,5 @@
 import { AsyncPipe, NgTemplateOutlet } from '@angular/common'
-import {
-  Component,
-  forwardRef,
-  inject,
-  Input,
-  OnDestroy,
-  OnInit,
-} from '@angular/core'
+import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core'
 import {
   FormsModule,
   NG_VALUE_ACCESSOR,
@@ -59,8 +52,6 @@ export class DocumentLinkComponent
   extends AbstractInputComponent<any[]>
   implements OnInit, OnDestroy
 {
-  private documentsService = inject(DocumentService)
-
   documentsInput$ = new Subject<string>()
   foundDocuments$: Observable<Document[]>
   loading = false
@@ -84,6 +75,10 @@ export class DocumentLinkComponent
     return this.selectedDocuments.map((d) => d.id)
   }
 
+  constructor(private documentsService: DocumentService) {
+    super()
+  }
+
   ngOnInit() {
     this.loadDocs()
   }

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

@@ -1,6 +1,5 @@
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
-import { LOCALE_ID } from '@angular/core'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { NG_VALUE_ACCESSOR } from '@angular/forms'
 import { MonetaryComponent } from './monetary.component'
@@ -42,6 +41,8 @@ describe('MonetaryComponent', () => {
 
   it('should set the default currency code based on LOCALE_ID', () => {
     expect(component.defaultCurrencyCode).toEqual('USD') // default
+    component = new MonetaryComponent('pt-BR')
+    expect(component.defaultCurrencyCode).toEqual('BRL')
   })
 
   it('should support setting a default currency code', () => {
@@ -86,28 +87,3 @@ describe('MonetaryComponent', () => {
     expect(component.value).toEqual('USD0.00')
   })
 })
-
-describe('MonetaryComponent (Alternate Locale)', () => {
-  let component: MonetaryComponent
-  let fixture: ComponentFixture<MonetaryComponent>
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [MonetaryComponent],
-      providers: [
-        { provide: LOCALE_ID, useValue: 'pt-BR' }, // Brazilian Portuguese
-        provideHttpClient(withInterceptorsFromDi()),
-        provideHttpClientTesting(),
-      ],
-    }).compileComponents()
-
-    fixture = TestBed.createComponent(MonetaryComponent)
-    fixture.debugElement.injector.get(NG_VALUE_ACCESSOR)
-    component = fixture.componentInstance
-    fixture.detectChanges()
-  })
-
-  it('should set the default currency code based on LOCALE_ID', () => {
-    expect(component.defaultCurrencyCode).toEqual('BRL')
-  })
-})

src-ui/src/app/components/common/input/monetary/monetary.component.ts

@@ -1,5 +1,5 @@
 import { CurrencyPipe, getLocaleCurrencyCode } from '@angular/common'
-import { Component, forwardRef, inject, Input, LOCALE_ID } from '@angular/core'
+import { Component, forwardRef, Inject, Input, LOCALE_ID } from '@angular/core'
 import {
   FormsModule,
   NG_VALUE_ACCESSOR,
@@ -27,8 +27,6 @@ import { AbstractInputComponent } from '../abstract-input'
   ],
 })
 export class MonetaryComponent extends AbstractInputComponent<string> {
-  currentLocale = inject(LOCALE_ID)
-
   public currency: string = ''
 
   public _monetaryValue: string = ''
@@ -47,10 +45,11 @@ export class MonetaryComponent extends AbstractInputComponent<string> {
     if (currency) this.defaultCurrencyCode = currency
   }
 
-  constructor() {
+  constructor(@Inject(LOCALE_ID) currentLocale: string) {
     super()
+
     this.currency = this.defaultCurrencyCode =
-      this.defaultCurrency ?? getLocaleCurrencyCode(this.currentLocale)
+      this.defaultCurrency ?? getLocaleCurrencyCode(currentLocale)
   }
 
   writeValue(newValue: any): void {

src-ui/src/app/components/common/input/number/number.component.ts

@@ -1,4 +1,4 @@
-import { Component, forwardRef, inject, Input } from '@angular/core'
+import { Component, forwardRef, Input } from '@angular/core'
 import {
   FormsModule,
   NG_VALUE_ACCESSOR,
@@ -22,14 +22,16 @@ import { AbstractInputComponent } from '../abstract-input'
   imports: [FormsModule, ReactiveFormsModule, NgxBootstrapIconsModule],
 })
 export class NumberComponent extends AbstractInputComponent<number> {
-  private documentService = inject(DocumentService)
-
   @Input()
   showAdd: boolean = true
 
   @Input()
   step: number = 1
 
+  constructor(private documentService: DocumentService) {
+    super()
+  }
+
   nextAsn() {
     if (this.value) {
       return

src-ui/src/app/components/common/input/permissions/permissions-group/permissions-group.component.ts

@@ -1,4 +1,4 @@
-import { Component, forwardRef, inject } from '@angular/core'
+import { Component, forwardRef } from '@angular/core'
 import {
   FormsModule,
   NG_VALUE_ACCESSOR,
@@ -26,9 +26,7 @@ import { AbstractInputComponent } from '../../abstract-input'
 export class PermissionsGroupComponent extends AbstractInputComponent<Group> {
   groups: Group[]
 
-  constructor() {
-    const groupService = inject(GroupService)
-
+  constructor(groupService: GroupService) {
     super()
     groupService
       .listAll()

src-ui/src/app/components/common/input/permissions/permissions-user/permissions-user.component.ts

@@ -1,4 +1,4 @@
-import { Component, forwardRef, inject } from '@angular/core'
+import { Component, forwardRef } from '@angular/core'
 import {
   FormsModule,
   NG_VALUE_ACCESSOR,
@@ -8,6 +8,7 @@ import { NgSelectComponent } from '@ng-select/ng-select'
 import { first } from 'rxjs/operators'
 import { User } from 'src/app/data/user'
 import { UserService } from 'src/app/services/rest/user.service'
+import { SettingsService } from 'src/app/services/settings.service'
 import { AbstractInputComponent } from '../../abstract-input'
 
 @Component({
@@ -26,9 +27,7 @@ import { AbstractInputComponent } from '../../abstract-input'
 export class PermissionsUserComponent extends AbstractInputComponent<User[]> {
   users: User[]
 
-  constructor() {
-    const userService = inject(UserService)
-
+  constructor(userService: UserService, settings: SettingsService) {
     super()
     userService
       .listAll()

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

@@ -2,7 +2,6 @@ import {
   Component,
   EventEmitter,
   forwardRef,
-  inject,
   Input,
   OnInit,
   Output,
@@ -46,10 +45,10 @@ import { TagComponent } from '../../tag/tag.component'
   ],
 })
 export class TagsComponent implements OnInit, ControlValueAccessor {
-  private tagService = inject(TagService)
-  private modalService = inject(NgbModal)
-
-  constructor() {
+  constructor(
+    private tagService: TagService,
+    private modalService: NgbModal
+  ) {
     this.createTagRef = this.createTag.bind(this)
   }
 

src-ui/src/app/components/common/logo/logo.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, inject } from '@angular/core'
+import { Component, Input } from '@angular/core'
 import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
 import { SettingsService } from 'src/app/services/settings.service'
 import { environment } from 'src/environments/environment'
@@ -9,8 +9,6 @@ import { environment } from 'src/environments/environment'
   styleUrls: ['./logo.component.scss'],
 })
 export class LogoComponent {
-  private settingsService = inject(SettingsService)
-
   @Input()
   extra_classes: string
 
@@ -26,6 +24,8 @@ export class LogoComponent {
       : null
   }
 
+  constructor(private settingsService: SettingsService) {}
+
   getClasses() {
     return ['logo'].concat(this.extra_classes).join(' ')
   }

src-ui/src/app/components/common/page-header/page-header.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, inject } from '@angular/core'
+import { Component, Input } from '@angular/core'
 import { Title } from '@angular/platform-browser'
 import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
@@ -12,7 +12,7 @@ import { environment } from 'src/environments/environment'
   imports: [NgbPopoverModule, NgxBootstrapIconsModule, TourNgBootstrapModule],
 })
 export class PageHeaderComponent {
-  private titleService = inject(Title)
+  constructor(private titleService: Title) {}
 
   _title = ''
 

src-ui/src/app/components/common/pdf-editor/pdf-editor.component.html

@@ -1,103 +0,0 @@
-<pdf-viewer [src]="pdfSrc" [render-text]="false" zoom="0.4" (after-load-complete)="pdfLoaded($event)"></pdf-viewer>
-<div class="modal-header">
-  <h4 class="modal-title">{{ title }}</h4>
-  <button type="button" class="btn-close" aria-label="Close" (click)="cancel()"></button>
-</div>
-<div class="modal-body">
-  <div class="btn-toolbar mb-2">
-    <div class="btn-group me-3">
-      <button class="btn btn-sm btn-secondary" (click)="selectAll()" title="Select all pages" i18n-title>
-        <i-bs name="check-all"></i-bs>
-      </button>
-      <button class="btn btn-sm btn-secondary" (click)="deselectAll()" [disabled]="!hasSelection()" title="Deselect all pages" i18n-title>
-        <i-bs name="x"></i-bs>
-      </button>
-    </div>
-    <div class="btn-group">
-      <button class="btn btn-sm btn-secondary" (click)="rotateSelected(-90)" [disabled]="!hasSelection()" title="Rotate selected pages counter-clockwise" i18n-title>
-        <i-bs name="arrow-counterclockwise"></i-bs>
-      </button>
-      <button class="btn btn-sm btn-secondary" (click)="rotateSelected(90)" [disabled]="!hasSelection()" title="Rotate selected pages clockwise" i18n-title>
-        <i-bs name="arrow-clockwise"></i-bs>
-      </button>
-      <button class="btn btn-sm btn-danger" (click)="deleteSelected()" [disabled]="!hasSelection()" title="Delete selected pages" i18n-title>
-        <i-bs name="trash"></i-bs>
-      </button>
-    </div>
-  </div>
-  <div cdkDropList (cdkDropListDropped)="drop($event)" cdkDropListOrientation="mixed" class="d-flex flex-wrap row-cols-5">
-    @for (p of pages; track p.page; let i = $index) {
-      <div class="page-item rounded p-2" cdkDrag (click)="toggleSelection(i)" [class.selected]="p.selected">
-        <div class="btn-toolbar hover-actions z-10">
-          <div class="btn-group me-2">
-            <button class="btn btn-sm btn-dark" (click)="rotate(i); $event.stopPropagation()" title="Rotate page counter-clockwise" i18n-title>
-              <i-bs name="arrow-counterclockwise"></i-bs>
-            </button>
-            <button class="btn btn-sm btn-dark" (click)="rotate(i); $event.stopPropagation()" title="Rotate page clockwise" i18n-title>
-              <i-bs name="arrow-clockwise"></i-bs>
-            </button>
-          </div>
-          <div class="btn-group">
-            <button class="btn btn-sm btn-dark text-danger" (click)="remove(i); $event.stopPropagation()" title="Delete page" i18n-title>
-              <i-bs name="trash"></i-bs>
-            </button>
-            <button class="btn btn-sm btn-dark" (click)="toggleSplit(i); $event.stopPropagation()" title="Add / remove document split here" i18n-title>
-              <i-bs name="scissors"></i-bs>
-            </button>
-          </div>
-        </div>
-        <div class="border-end border-bottom bg-light py-1 px-2 document-check z-10">
-          <div class="form-check">
-            <input type="checkbox" class="form-check-input" id="page{{i}}" [checked]="p.selected" (click)="toggleSelection(i); $event.stopPropagation()">
-            <label class="form-check-label" for="page{{i}}"></label>
-          </div>
-        </div>
-        <div class="pdf-viewer-container w-100" [class.selected]="p.selected">
-          @defer (on viewport) {
-            @if (!p.loaded) {
-              <div class="placeholder-glow w-100 h-100 z-10">
-                <span class="placeholder w-100 h-100"></span>
-              </div>
-            }
-            <pdf-viewer class="fade" [class.show]="p.loaded" [src]="pdfSrc" [page]="p.page" [rotation]="p.rotate" [original-size]="false" [show-all]="false" [render-text]="false" (page-rendered)="p.loaded = true"></pdf-viewer>
-          } @placeholder {
-            <div class="placeholder-glow w-100 h-100 z-10">
-              <span class="placeholder w-100 h-100"></span>
-            </div>
-          }
-        </div>
-        @if (p.splitAfter) {
-          <div class="split-after rounded position-absolute top-0 end-0 bg-dark text-uppercase text-center h-100 px-1 small fw-bold">&mdash; <span i18n>Split here</span> &mdash;</div>
-        }
-      </div>
-    }
-  </div>
-</div>
-<div class="modal-footer flex-column">
-  <div class="d-flex w-100 justify-content-between align-items-center">
-    <div class="btn-group" role="group">
-      <input type="radio" class="btn-check" [(ngModel)]="editMode" [value]="EditMode.Create" id="editModeCreate" name="editmode">
-      <label for="editModeCreate" class="btn btn-outline-primary btn-sm">
-        <i-bs name="plus"></i-bs>
-        <span class="form-check-label ms-1" i18n>Create new document(s)</span>
-      </label>
-      <input type="radio" class="btn-check" [(ngModel)]="editMode" [value]="EditMode.Update" id="editModeUpdate" name="editmode" [disabled]="hasSplit()">
-      <label for="editModeUpdate" class="btn btn-outline-primary btn-sm">
-        <i-bs name="pencil"></i-bs>
-        <span class="form-check-label ms-2" i18n>Update existing document</span>
-      </label>
-    </div>
-    @if (editMode === EditMode.Create) {
-      <div class="form-check ms-3">
-        <input class="form-check-input" type="checkbox" id="copyMeta" [(ngModel)]="includeMetadata">
-        <label class="form-check-label" for="copyMeta" i18n>Copy metadata</label>
-      </div>
-      <div class="form-check ms-3">
-        <input class="form-check-input" type="checkbox" id="deleteOriginal" [(ngModel)]="deleteOriginal">
-        <label class="form-check-label" for="deleteOriginal" i18n>Delete original</label>
-      </div>
-    }
-    <button type="button" class="btn ms-auto me-2" [class]="cancelBtnClass" (click)="cancel()" [disabled]="!buttonsEnabled">{{ cancelBtnCaption }}</button>
-    <button type="button" class="btn" [class]="btnClass" (click)="confirm()" [disabled]="pages.length === 0">{{ btnCaption }}</button>
-  </div>
-</div>

src-ui/src/app/components/common/pdf-editor/pdf-editor.component.scss

@@ -1,70 +0,0 @@
-
-
-.page-item {
-  position: relative;
-  cursor: pointer;
-  border: 1px solid transparent;
-  background-origin: border-box;
-
-  &.selected {
-    background-color: var(--pngx-primary-darken-5);
-  }
-}
-
-.pdf-viewer-container {
-  background-color: gray;
-  height: 240px;
-
-  pdf-viewer {
-    width: 100%;
-    height: 100%;
-  }
-}
-
-::ng-deep .ng2-pdf-viewer-container {
-  overflow: hidden;
-}
-
-.hover-actions {
-  position: absolute;
-  top: 0;
-  right: 0;
-  display: none;
-}
-
-.page-item:hover .hover-actions {
-  display: block;
-}
-
-.document-check {
-  display: none;
-  position: absolute;
-  top: 0;
-  left: 0;
-  padding: 0.5rem;
-  border-top-left-radius: 0.25rem;
-  border-bottom-right-radius: 0.25rem;
-  pointer-events: none;
-
-  .form-check {
-    padding: 0;
-    min-height: 0;
-    margin-bottom: 0;
-
-    .form-check-input {
-      margin-left: 0;
-    }
-  }
-}
-
-.page-item:hover .document-check, .selected .document-check {
-  display: block;
-}
-
-.z-10 {
-    z-index: 10;
-}
-
-.split-after {
-  writing-mode: vertical-rl;
-}

src-ui/src/app/components/common/pdf-editor/pdf-editor.component.spec.ts

@@ -1,142 +0,0 @@
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
-import { provideHttpClientTesting } from '@angular/common/http/testing'
-import { ComponentFixture, TestBed } from '@angular/core/testing'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
-import { PDFEditorComponent } from './pdf-editor.component'
-
-describe('PDFEditorComponent', () => {
-  let component: PDFEditorComponent
-  let fixture: ComponentFixture<PDFEditorComponent>
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [PDFEditorComponent, NgxBootstrapIconsModule.pick(allIcons)],
-      providers: [
-        provideHttpClient(withInterceptorsFromDi()),
-        provideHttpClientTesting(),
-        { provide: NgbActiveModal, useValue: {} },
-      ],
-    }).compileComponents()
-    fixture = TestBed.createComponent(PDFEditorComponent)
-    component = fixture.componentInstance
-    fixture.detectChanges()
-  })
-
-  it('should return correct operations with no changes', () => {
-    component.pages = [
-      { page: 1, rotate: 0, splitAfter: false },
-      { page: 2, rotate: 0, splitAfter: false },
-      { page: 3, rotate: 0, splitAfter: false },
-    ]
-    const ops = component.getOperations()
-    expect(ops).toEqual([
-      { page: 1, rotate: 0, doc: 0 },
-      { page: 2, rotate: 0, doc: 0 },
-      { page: 3, rotate: 0, doc: 0 },
-    ])
-  })
-
-  it('should rotate, delete and reorder pages', () => {
-    component.pages = [
-      { page: 1, rotate: 0, splitAfter: false, selected: false },
-      { page: 2, rotate: 0, splitAfter: false, selected: false },
-    ]
-    component.toggleSelection(0)
-    component.rotateSelected(90)
-    expect(component.pages[0].rotate).toBe(90)
-    component.toggleSelection(0) // deselect
-    component.toggleSelection(1)
-    component.deleteSelected()
-    expect(component.pages.length).toBe(1)
-    component.pages.push({ page: 2, rotate: 0, splitAfter: false })
-    component.drop({ previousIndex: 0, currentIndex: 1 } as any)
-    expect(component.pages[0].page).toBe(2)
-    component.rotate(0)
-    expect(component.pages[0].rotate).toBe(90)
-  })
-
-  it('should handle empty pages array', () => {
-    component.pages = []
-    expect(component.getOperations()).toEqual([])
-  })
-
-  it('should increment doc index after splitAfter', () => {
-    component.pages = [
-      { page: 1, rotate: 0, splitAfter: true },
-      { page: 2, rotate: 0, splitAfter: false },
-      { page: 3, rotate: 0, splitAfter: true },
-      { page: 4, rotate: 0, splitAfter: false },
-    ]
-    const ops = component.getOperations()
-    expect(ops).toEqual([
-      { page: 1, rotate: 0, doc: 0 },
-      { page: 2, rotate: 0, doc: 1 },
-      { page: 3, rotate: 0, doc: 1 },
-      { page: 4, rotate: 0, doc: 2 },
-    ])
-  })
-
-  it('should include rotations in operations', () => {
-    component.pages = [
-      { page: 1, rotate: 90, splitAfter: false },
-      { page: 2, rotate: 180, splitAfter: true },
-      { page: 3, rotate: 270, splitAfter: false },
-    ]
-    const ops = component.getOperations()
-    expect(ops).toEqual([
-      { page: 1, rotate: 90, doc: 0 },
-      { page: 2, rotate: 180, doc: 0 },
-      { page: 3, rotate: 270, doc: 1 },
-    ])
-  })
-
-  it('should handle remove operation', () => {
-    component.pages = [
-      { page: 1, rotate: 0, splitAfter: false, selected: false },
-      { page: 2, rotate: 0, splitAfter: false, selected: true },
-      { page: 3, rotate: 0, splitAfter: false, selected: false },
-    ]
-    component.remove(1) // remove page 2
-    expect(component.pages.length).toBe(2)
-    expect(component.pages[0].page).toBe(1)
-    expect(component.pages[1].page).toBe(3)
-  })
-
-  it('should toggle splitAfter correctly', () => {
-    component.pages = [
-      { page: 1, rotate: 0, splitAfter: false },
-      { page: 2, rotate: 0, splitAfter: false },
-    ]
-    component.toggleSplit(0)
-    expect(component.pages[0].splitAfter).toBeTruthy()
-    component.toggleSplit(1)
-    expect(component.pages[1].splitAfter).toBeTruthy()
-  })
-
-  it('should select and deselect all pages', () => {
-    component.pages = [
-      { page: 1, rotate: 0, splitAfter: false, selected: false },
-      { page: 2, rotate: 0, splitAfter: false, selected: false },
-    ]
-    component.selectAll()
-    expect(component.pages.every((p) => p.selected)).toBeTruthy()
-    expect(component.hasSelection()).toBeTruthy()
-    component.deselectAll()
-    expect(component.pages.every((p) => !p.selected)).toBeTruthy()
-    expect(component.hasSelection()).toBeFalsy()
-  })
-
-  it('should handle pdf loading and page generation', () => {
-    const mockPdf = {
-      numPages: 3,
-      getPage: (pageNum: number) => Promise.resolve({ pageNumber: pageNum }),
-    }
-    component.pdfLoaded(mockPdf as any)
-    expect(component.totalPages).toBe(3)
-    expect(component.pages.length).toBe(3)
-    expect(component.pages[0].page).toBe(1)
-    expect(component.pages[1].page).toBe(2)
-    expect(component.pages[2].page).toBe(3)
-  })
-})

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

@@ -1,135 +0,0 @@
-import {
-  CdkDragDrop,
-  DragDropModule,
-  moveItemInArray,
-} from '@angular/cdk/drag-drop'
-import { Component, inject } from '@angular/core'
-import { FormsModule } from '@angular/forms'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { PDFDocumentProxy, PdfViewerModule } from 'ng2-pdf-viewer'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
-import { DocumentService } from 'src/app/services/rest/document.service'
-import { ConfirmDialogComponent } from '../confirm-dialog/confirm-dialog.component'
-
-interface PageOperation {
-  page: number
-  rotate: number
-  splitAfter: boolean
-  selected?: boolean
-  loaded?: boolean
-}
-
-enum EditMode {
-  Update = 'update',
-  Create = 'create',
-}
-
-@Component({
-  selector: 'pngx-pdf-editor',
-  templateUrl: './pdf-editor.component.html',
-  styleUrl: './pdf-editor.component.scss',
-  imports: [
-    DragDropModule,
-    FormsModule,
-    PdfViewerModule,
-    NgxBootstrapIconsModule,
-  ],
-})
-export class PDFEditorComponent extends ConfirmDialogComponent {
-  public EditMode = EditMode
-
-  private documentService = inject(DocumentService)
-  activeModal: NgbActiveModal = inject(NgbActiveModal)
-
-  documentID: number
-  pages: PageOperation[] = []
-  totalPages = 0
-  editMode: EditMode = EditMode.Create
-  deleteOriginal: boolean = false
-  updateDocument: boolean = false
-  includeMetadata: boolean = true
-
-  get pdfSrc(): string {
-    return this.documentService.getPreviewUrl(this.documentID)
-  }
-
-  pdfLoaded(pdf: PDFDocumentProxy) {
-    this.totalPages = pdf.numPages
-    this.pages = Array.from({ length: this.totalPages }, (_, i) => ({
-      page: i + 1,
-      rotate: 0,
-      splitAfter: false,
-      selected: false,
-      loaded: false,
-    }))
-  }
-
-  toggleSelection(i: number) {
-    this.pages[i].selected = !this.pages[i].selected
-  }
-
-  rotate(i: number) {
-    this.pages[i].rotate = (this.pages[i].rotate + 90) % 360
-  }
-
-  rotateSelected(dir: number) {
-    for (let p of this.pages) {
-      if (p.selected) {
-        p.rotate = (p.rotate + dir + 360) % 360
-      }
-    }
-  }
-
-  remove(i: number) {
-    this.pages.splice(i, 1)
-  }
-
-  toggleSplit(i: number) {
-    this.pages[i].splitAfter = !this.pages[i].splitAfter
-    if (this.pages[i].splitAfter) {
-      // force create mode
-      this.editMode = EditMode.Create
-    }
-  }
-
-  selectAll() {
-    this.pages.forEach((p) => (p.selected = true))
-  }
-
-  deselectAll() {
-    this.pages.forEach((p) => (p.selected = false))
-  }
-
-  deleteSelected() {
-    this.pages = this.pages.filter((p) => !p.selected)
-  }
-
-  hasSelection(): boolean {
-    return this.pages.some((p) => p.selected)
-  }
-
-  hasSplit(): boolean {
-    return this.pages.some((p) => p.splitAfter)
-  }
-
-  drop(event: CdkDragDrop<PageOperation[]>) {
-    moveItemInArray(this.pages, event.previousIndex, event.currentIndex)
-  }
-
-  getOperations() {
-    const operations = this.pages.map((p, idx) => ({
-      page: p.page,
-      rotate: p.rotate,
-      doc: this.computeDocIndex(idx),
-    }))
-    return operations
-  }
-
-  private computeDocIndex(index: number): number {
-    let docIndex = 0
-    for (let i = 0; i <= index; i++) {
-      if (this.pages[i].splitAfter && i < index) docIndex++
-    }
-    return docIndex
-  }
-}

src-ui/src/app/components/common/permissions-dialog/permissions-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output, inject } from '@angular/core'
+import { Component, EventEmitter, Input, Output } from '@angular/core'
 import {
   FormControl,
   FormGroup,
@@ -24,13 +24,13 @@ import { SwitchComponent } from '../input/switch/switch.component'
   ],
 })
 export class PermissionsDialogComponent {
-  activeModal = inject(NgbActiveModal)
-  private userService = inject(UserService)
-
   users: User[]
   private o: ObjectWithPermissions = undefined
 
-  constructor() {
+  constructor(
+    public activeModal: NgbActiveModal,
+    private userService: UserService
+  ) {
     this.userService.listAll().subscribe((r) => (this.users = r.results))
   }
 

src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.ts

@@ -1,5 +1,5 @@
 import { NgClass } from '@angular/common'
-import { Component, EventEmitter, Input, Output, inject } from '@angular/core'
+import { Component, EventEmitter, Input, Output } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectComponent } from '@ng-select/ng-select'
@@ -58,9 +58,6 @@ export enum OwnerFilterType {
   ],
 })
 export class PermissionsFilterDropdownComponent extends ComponentWithPermissions {
-  permissionsService = inject(PermissionsService)
-  private settingsService = inject(SettingsService)
-
   public OwnerFilterType = OwnerFilterType
 
   @Input()
@@ -86,12 +83,12 @@ export class PermissionsFilterDropdownComponent extends ComponentWithPermissions
     )
   }
 
-  constructor() {
-    const userService = inject(UserService)
-
+  constructor(
+    public permissionsService: PermissionsService,
+    userService: UserService,
+    private settingsService: SettingsService
+  ) {
     super()
-    const permissionsService = this.permissionsService
-
     if (
       permissionsService.currentUserCan(
         PermissionAction.View,

src-ui/src/app/components/common/permissions-select/permissions-select.component.ts

@@ -1,5 +1,5 @@
 import { KeyValuePipe } from '@angular/common'
-import { Component, forwardRef, inject, Input, OnInit } from '@angular/core'
+import { Component, forwardRef, Input, OnInit } from '@angular/core'
 import {
   AbstractControl,
   ControlValueAccessor,
@@ -43,9 +43,6 @@ export class PermissionsSelectComponent
   extends ComponentWithPermissions
   implements OnInit, ControlValueAccessor
 {
-  private readonly permissionsService = inject(PermissionsService)
-  private readonly settingsService = inject(SettingsService)
-
   @Input()
   title: string = 'Permissions'
 
@@ -79,7 +76,10 @@ export class PermissionsSelectComponent
 
   public allowedTypes = Object.keys(PermissionType)
 
-  constructor() {
+  constructor(
+    private readonly permissionsService: PermissionsService,
+    private readonly settingsService: SettingsService
+  ) {
     super()
     if (!this.settingsService.get(SETTINGS_KEYS.AUDITLOG_ENABLED)) {
       this.allowedTypes.splice(this.allowedTypes.indexOf('History'), 1)

src-ui/src/app/components/common/preview-popup/preview-popup.component.ts

@@ -1,5 +1,5 @@
 import { HttpClient } from '@angular/common/http'
-import { Component, inject, Input, OnDestroy, ViewChild } from '@angular/core'
+import { Component, Input, OnDestroy, ViewChild } from '@angular/core'
 import { NgbPopover, NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap'
 import { PdfViewerComponent, PdfViewerModule } from 'ng2-pdf-viewer'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
@@ -24,10 +24,6 @@ import { SettingsService } from 'src/app/services/settings.service'
   ],
 })
 export class PreviewPopupComponent implements OnDestroy {
-  private settingsService = inject(SettingsService)
-  private documentService = inject(DocumentService)
-  private http = inject(HttpClient)
-
   private _document: Document
   @Input()
   set document(document: Document) {
@@ -86,6 +82,12 @@ export class PreviewPopupComponent implements OnDestroy {
     )
   }
 
+  constructor(
+    private settingsService: SettingsService,
+    private documentService: DocumentService,
+    private http: HttpClient
+  ) {}
+
   ngOnDestroy(): void {
     this.unsubscribeNotifier.next(this)
   }

src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Clipboard } from '@angular/cdk/clipboard'
-import { Component, OnInit, inject } from '@angular/core'
+import { Component, OnInit } from '@angular/core'
 import {
   FormControl,
   FormGroup,
@@ -46,11 +46,6 @@ export class ProfileEditDialogComponent
   extends LoadingComponentWithPermissions
   implements OnInit
 {
-  private profileService = inject(ProfileService)
-  activeModal = inject(NgbActiveModal)
-  private toastService = inject(ToastService)
-  private clipboard = inject(Clipboard)
-
   public networkActive: boolean = false
   public error: any
 
@@ -88,6 +83,15 @@ export class ProfileEditDialogComponent
   public socialAccounts: SocialAccount[] = []
   public socialAccountProviders: SocialAccountProvider[] = []
 
+  constructor(
+    private profileService: ProfileService,
+    public activeModal: NgbActiveModal,
+    private toastService: ToastService,
+    private clipboard: Clipboard
+  ) {
+    super()
+  }
+
   ngOnInit(): void {
     this.networkActive = true
     this.profileService

src-ui/src/app/components/common/share-links-dialog/share-links-dialog.component.spec.ts

@@ -10,7 +10,6 @@ import {
   fakeAsync,
   tick,
 } from '@angular/core/testing'
-import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { By } from '@angular/platform-browser'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
@@ -34,8 +33,6 @@ describe('ShareLinksDialogComponent', () => {
       imports: [
         ShareLinksDialogComponent,
         NgxBootstrapIconsModule.pick(allIcons),
-        FormsModule,
-        ReactiveFormsModule,
       ],
       providers: [
         provideHttpClient(withInterceptorsFromDi()),
@@ -226,18 +223,16 @@ describe('ShareLinksDialogComponent', () => {
     )
   })
 
-  it('should disable archive switch & option if no archive available', (done) => {
+  it('should disable archive switch & option if no archive available', () => {
     component.hasArchiveVersion = false
     component.ngOnInit()
     fixture.detectChanges()
     expect(component.useArchiveVersion).toBeFalsy()
-    setTimeout(() => {
-      // some stupid change detection issue
-      const inputEl = fixture.debugElement.query(By.css('#versionSwitch'))
-        .nativeElement as HTMLInputElement
-      expect(inputEl.disabled).toBeTruthy()
-      done()
-    })
+    expect(
+      fixture.debugElement.query(By.css("input[type='checkbox']")).attributes[
+        'ng-reflect-is-disabled'
+      ]
+    ).toBeTruthy()
   })
 
   it('should support close', () => {

src-ui/src/app/components/common/share-links-dialog/share-links-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Clipboard } from '@angular/cdk/clipboard'
-import { Component, Input, OnInit, inject } from '@angular/core'
+import { Component, Input, OnInit } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
@@ -16,11 +16,6 @@ import { environment } from 'src/environments/environment'
   imports: [FormsModule, ReactiveFormsModule, NgxBootstrapIconsModule],
 })
 export class ShareLinksDialogComponent implements OnInit {
-  private activeModal = inject(NgbActiveModal)
-  private shareLinkService = inject(ShareLinkService)
-  private toastService = inject(ToastService)
-  private clipboard = inject(Clipboard)
-
   EXPIRATION_OPTIONS = [
     { label: $localize`1 day`, value: 1 },
     { label: $localize`7 days`, value: 7 },
@@ -63,6 +58,13 @@ export class ShareLinksDialogComponent implements OnInit {
 
   useArchiveVersion: boolean = true
 
+  constructor(
+    private activeModal: NgbActiveModal,
+    private shareLinkService: ShareLinkService,
+    private toastService: ToastService,
+    private clipboard: Clipboard
+  ) {}
+
   ngOnInit(): void {
     if (this._documentId !== undefined) this.refresh()
   }

src-ui/src/app/components/common/system-status-dialog/system-status-dialog.component.html

@@ -20,18 +20,7 @@
           <div class="card-body">
             <dl class="card-text">
               <dt i18n>Paperless-ngx Version</dt>
-              <dd>
-                {{status.pngx_version}}
-                @if (versionMismatch) {
-                    <button class="btn btn-sm d-inline align-items-center btn-dark text-uppercase small" [ngbPopover]="versionPopover" triggers="click mouseenter:mouseleave">
-                      <i-bs name="exclamation-triangle-fill" class="text-danger lh-1"></i-bs>
-                    </button>
-                }
-                <ng-template #versionPopover>
-                  Frontend version: {{frontendVersion}}<br>
-                  Backend version: {{status.pngx_version}}
-                </ng-template>
-              </dd>
+              <dd>{{status.pngx_version}}</dd>
               <dt i18n>Install Type</dt>
               <dd>{{status.install_type}}</dd>
               <dt i18n>Server OS</dt>

src-ui/src/app/components/common/system-status-dialog/system-status-dialog.component.spec.ts

@@ -1,18 +1,3 @@
-// Mock production environment for testing
-jest.mock('src/environments/environment', () => ({
-  environment: {
-    production: true,
-    apiBaseUrl: 'http://localhost:8000/api/',
-    apiVersion: '9',
-    appTitle: 'Paperless-ngx',
-    tag: 'prod',
-    version: '2.4.3',
-    webSocketHost: 'localhost:8000',
-    webSocketProtocol: 'ws:',
-    webSocketBaseUrl: '/ws/',
-  },
-}))
-
 import { Clipboard } from '@angular/cdk/clipboard'
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
@@ -157,15 +142,4 @@ describe('SystemStatusDialogComponent', () => {
       `Task ${PaperlessTaskName.IndexOptimize} started`
     )
   })
-
-  it('shoduld handle version mismatch', () => {
-    component.frontendVersion = '2.4.2'
-    component.ngOnInit()
-    expect(component.versionMismatch).toBeTruthy()
-    expect(component.status.pngx_version).toContain('(frontend: 2.4.2)')
-    component.frontendVersion = '2.4.3'
-    component.status.pngx_version = '2.4.3'
-    component.ngOnInit()
-    expect(component.versionMismatch).toBeFalsy()
-  })
 })

src-ui/src/app/components/common/system-status-dialog/system-status-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Clipboard, ClipboardModule } from '@angular/cdk/clipboard'
-import { Component, OnInit, inject } from '@angular/core'
+import { Component } from '@angular/core'
 import {
   NgbActiveModal,
   NgbModalModule,
@@ -18,7 +18,6 @@ import { PermissionsService } from 'src/app/services/permissions.service'
 import { SystemStatusService } from 'src/app/services/system-status.service'
 import { TasksService } from 'src/app/services/tasks.service'
 import { ToastService } from 'src/app/services/toast.service'
-import { environment } from 'src/environments/environment'
 
 @Component({
   selector: 'pngx-system-status-dialog',
@@ -34,19 +33,10 @@ import { environment } from 'src/environments/environment'
     NgxBootstrapIconsModule,
   ],
 })
-export class SystemStatusDialogComponent implements OnInit {
-  activeModal = inject(NgbActiveModal)
-  private clipboard = inject(Clipboard)
-  private systemStatusService = inject(SystemStatusService)
-  private tasksService = inject(TasksService)
-  private toastService = inject(ToastService)
-  private permissionsService = inject(PermissionsService)
-
+export class SystemStatusDialogComponent {
   public SystemStatusItemStatus = SystemStatusItemStatus
   public PaperlessTaskName = PaperlessTaskName
   public status: SystemStatus
-  public frontendVersion: string = environment.version
-  public versionMismatch: boolean = false
 
   public copied: boolean = false
 
@@ -56,16 +46,14 @@ export class SystemStatusDialogComponent implements OnInit {
     return this.permissionsService.isSuperUser()
   }
 
-  public ngOnInit() {
-    this.versionMismatch =
-      environment.production &&
-      this.status.pngx_version &&
-      this.frontendVersion &&
-      this.status.pngx_version !== this.frontendVersion
-    if (this.versionMismatch) {
-      this.status.pngx_version = `${this.status.pngx_version} (frontend: ${this.frontendVersion})`
-    }
-  }
+  constructor(
+    public activeModal: NgbActiveModal,
+    private clipboard: Clipboard,
+    private systemStatusService: SystemStatusService,
+    private tasksService: TasksService,
+    private toastService: ToastService,
+    private permissionsService: PermissionsService
+  ) {}
 
   public close() {
     this.activeModal.close()

src-ui/src/app/components/common/tag/tag.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject, Input } from '@angular/core'
+import { Component, Input } from '@angular/core'
 import { Tag } from 'src/app/data/tag'
 import {
   PermissionAction,
@@ -13,12 +13,14 @@ import { TagService } from 'src/app/services/rest/tag.service'
   styleUrls: ['./tag.component.scss'],
 })
 export class TagComponent {
-  private permissionsService = inject(PermissionsService)
-  private tagService = inject(TagService)
-
   private _tag: Tag
   private _tagID: number
 
+  constructor(
+    private permissionsService: PermissionsService,
+    private tagService: TagService
+  ) {}
+
   @Input()
   public set tag(tag: Tag) {
     this._tag = tag

src-ui/src/app/components/common/toast/toast.component.ts

@@ -1,6 +1,6 @@
 import { Clipboard } from '@angular/cdk/clipboard'
 import { DecimalPipe } from '@angular/common'
-import { Component, EventEmitter, Input, Output, inject } from '@angular/core'
+import { Component, EventEmitter, Input, Output } from '@angular/core'
 import {
   NgbProgressbarModule,
   NgbToastModule,
@@ -21,8 +21,6 @@ import { Toast } from 'src/app/services/toast.service'
   styleUrl: './toast.component.scss',
 })
 export class ToastComponent {
-  private clipboard = inject(Clipboard)
-
   @Input() toast: Toast
 
   @Input() autohide: boolean = true
@@ -33,6 +31,8 @@ export class ToastComponent {
 
   public copied: boolean = false
 
+  constructor(private clipboard: Clipboard) {}
+
   onShown(toast: Toast) {
     if (!this.autohide) return
 

src-ui/src/app/components/common/toasts/toasts.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit, inject } from '@angular/core'
+import { Component, OnDestroy, OnInit } from '@angular/core'
 import {
   NgbAccordionModule,
   NgbProgressbarModule,
@@ -20,7 +20,7 @@ import { ToastComponent } from '../toast/toast.component'
   ],
 })
 export class ToastsComponent implements OnInit, OnDestroy {
-  toastService = inject(ToastService)
+  constructor(public toastService: ToastService) {}
 
   private subscription: Subscription
 

src-ui/src/app/components/dashboard/dashboard.component.ts

@@ -5,7 +5,7 @@ import {
   DragDropModule,
   moveItemInArray,
 } from '@angular/cdk/drag-drop'
-import { Component, inject } from '@angular/core'
+import { Component } from '@angular/core'
 import { RouterModule } from '@angular/router'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { TourNgBootstrapModule, TourService } from 'ngx-ui-tour-ng-bootstrap'
@@ -42,13 +42,13 @@ import { WelcomeWidgetComponent } from './widgets/welcome-widget/welcome-widget.
   ],
 })
 export class DashboardComponent extends ComponentWithPermissions {
-  settingsService = inject(SettingsService)
-  savedViewService = inject(SavedViewService)
-  private tourService = inject(TourService)
-  private toastService = inject(ToastService)
-
   public dashboardViews: SavedView[] = []
-  constructor() {
+  constructor(
+    public settingsService: SettingsService,
+    public savedViewService: SavedViewService,
+    private tourService: TourService,
+    private toastService: ToastService
+  ) {
     super()
 
     this.savedViewService.listAll().subscribe(() => {

src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.ts

@@ -1,7 +1,6 @@
 import { AsyncPipe, NgClass, NgStyle } from '@angular/common'
 import {
   Component,
-  inject,
   Input,
   OnDestroy,
   OnInit,
@@ -85,22 +84,26 @@ export class SavedViewWidgetComponent
   extends LoadingComponentWithPermissions
   implements OnInit, OnDestroy
 {
-  private documentService = inject(DocumentService)
-  private router = inject(Router)
-  private list = inject(DocumentListViewService)
-  private websocketStatusService = inject(WebsocketStatusService)
-  openDocumentsService = inject(OpenDocumentsService)
-  documentListViewService = inject(DocumentListViewService)
-  permissionsService = inject(PermissionsService)
-  private settingsService = inject(SettingsService)
-  private customFieldService = inject(CustomFieldsService)
-
   public DisplayMode = DisplayMode
   public DisplayField = DisplayField
   public CustomFieldDataType = CustomFieldDataType
 
   private customFields: CustomField[] = []
 
+  constructor(
+    private documentService: DocumentService,
+    private router: Router,
+    private list: DocumentListViewService,
+    private websocketStatusService: WebsocketStatusService,
+    public openDocumentsService: OpenDocumentsService,
+    public documentListViewService: DocumentListViewService,
+    public permissionsService: PermissionsService,
+    private settingsService: SettingsService,
+    private customFieldService: CustomFieldsService
+  ) {
+    super()
+  }
+
   @Input()
   savedView: SavedView
 

src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.ts

@@ -1,6 +1,6 @@
 import { DecimalPipe } from '@angular/common'
 import { HttpClient } from '@angular/common/http'
-import { Component, inject, OnDestroy, OnInit } from '@angular/core'
+import { Component, OnDestroy, OnInit } from '@angular/core'
 import { RouterModule } from '@angular/router'
 import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap'
 import * as mimeTypeNames from 'mime-names'
@@ -51,12 +51,16 @@ export class StatisticsWidgetComponent
   extends ComponentWithPermissions
   implements OnInit, OnDestroy
 {
-  private http = inject(HttpClient)
-  private websocketConnectionService = inject(WebsocketStatusService)
-  private documentListViewService = inject(DocumentListViewService)
-
   loading: boolean = false
 
+  constructor(
+    private http: HttpClient,
+    private websocketConnectionService: WebsocketStatusService,
+    private documentListViewService: DocumentListViewService
+  ) {
+    super()
+  }
+
   statistics: Statistics = {}
 
   subscription: Subscription

src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.ts

@@ -1,5 +1,5 @@
 import { NgClass, NgTemplateOutlet } from '@angular/common'
-import { Component, QueryList, ViewChildren, inject } from '@angular/core'
+import { Component, QueryList, ViewChildren } from '@angular/core'
 import { RouterModule } from '@angular/router'
 import {
   NgbAlert,
@@ -37,12 +37,16 @@ import { WidgetFrameComponent } from '../widget-frame/widget-frame.component'
   ],
 })
 export class UploadFileWidgetComponent extends ComponentWithPermissions {
-  private websocketStatusService = inject(WebsocketStatusService)
-  private uploadDocumentsService = inject(UploadDocumentsService)
-  settingsService = inject(SettingsService)
-
   @ViewChildren(NgbAlert) alerts: QueryList<NgbAlert>
 
+  constructor(
+    private websocketStatusService: WebsocketStatusService,
+    private uploadDocumentsService: UploadDocumentsService,
+    public settingsService: SettingsService
+  ) {
+    super()
+  }
+
   getStatus() {
     return this.websocketStatusService.getConsumerStatus()
   }

src-ui/src/app/components/dashboard/widgets/welcome-widget/welcome-widget.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Output, inject } from '@angular/core'
+import { Component, EventEmitter, Output } from '@angular/core'
 import { NgbAlertModule } from '@ng-bootstrap/ng-bootstrap'
 import { TourService } from 'ngx-ui-tour-ng-bootstrap'
 
@@ -9,7 +9,7 @@ import { TourService } from 'ngx-ui-tour-ng-bootstrap'
   imports: [NgbAlertModule],
 })
 export class WelcomeWidgetComponent {
-  readonly tourService = inject(TourService)
+  constructor(public readonly tourService: TourService) {}
 
   @Output()
   dismiss: EventEmitter<boolean> = new EventEmitter()

src-ui/src/app/components/document-asn/document-asn.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, inject } from '@angular/core'
+import { Component, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { FILTER_ASN } from '../../data/filter-rule-type'
 import { DocumentService } from '../../services/rest/document.service'
@@ -9,11 +9,12 @@ import { DocumentService } from '../../services/rest/document.service'
   styleUrls: ['./document-asn.component.scss'],
 })
 export class DocumentAsnComponent implements OnInit {
-  private documentsService = inject(DocumentService)
-  private route = inject(ActivatedRoute)
-  private router = inject(Router)
-
   asn: string
+  constructor(
+    private documentsService: DocumentService,
+    private route: ActivatedRoute,
+    private router: Router
+  ) {}
 
   ngOnInit(): void {
     this.route.paramMap.subscribe((paramMap) => {

src-ui/src/app/components/document-detail/document-detail.component.html

@@ -58,8 +58,16 @@
         <i-bs width="1em" height="1em" name="diagram-3"></i-bs>&nbsp;<span i18n>More like this</span>
       </button>
 
-      <button ngbDropdownItem (click)="editPdf()" [disabled]="!userIsOwner || !userCanEdit || originalContentRenderType !== ContentRenderType.PDF">
-        <i-bs name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit PDF</ng-container>
+      <button ngbDropdownItem (click)="splitDocument()" [disabled]="!userCanAdd || originalContentRenderType !== ContentRenderType.PDF || previewNumPages === 1">
+        <i-bs width="1em" height="1em" name="scissors"></i-bs>&nbsp;<span i18n>Split</span>
+      </button>
+
+      <button ngbDropdownItem (click)="rotateDocument()" [disabled]="!userIsOwner || !userCanEdit || originalContentRenderType !== ContentRenderType.PDF">
+        <i-bs name="arrow-clockwise"></i-bs>&nbsp;<ng-container i18n>Rotate</ng-container>
+      </button>
+
+      <button ngbDropdownItem (click)="deletePages()" [disabled]="!userIsOwner || !userCanEdit || originalContentRenderType !== ContentRenderType.PDF || previewNumPages === 1">
+        <i-bs name="file-earmark-minus"></i-bs>&nbsp;<ng-container i18n>Delete page(s)</ng-container>
       </button>
     </div>
   </div>

src-ui/src/app/components/document-detail/document-detail.component.spec.ts

@@ -1142,27 +1142,80 @@ describe('DocumentDetailComponent', () => {
     ).not.toBeUndefined()
   })
 
-  it('should support pdf editor', () => {
+  it('should support split', () => {
     let modal: NgbModalRef
     modalService.activeInstances.subscribe((m) => (modal = m[0]))
     initNormally()
-    component.editPdf()
+    component.splitDocument()
     expect(modal).not.toBeUndefined()
     modal.componentInstance.documentID = doc.id
-    modal.componentInstance.pages = [{ page: 1, rotate: 0, splitAfter: false }]
+    modal.componentInstance.totalPages = 5
+    modal.componentInstance.page = 2
+    modal.componentInstance.addSplit()
     modal.componentInstance.confirm()
-    const req = httpTestingController.expectOne(
+    let req = httpTestingController.expectOne(
       `${environment.apiBaseUrl}documents/bulk_edit/`
     )
     expect(req.request.body).toEqual({
       documents: [doc.id],
-      method: 'edit_pdf',
-      parameters: {
-        operations: [{ page: 1, rotate: 0, doc: 0 }],
-        update_document: false,
-        include_metadata: true,
-      },
+      method: 'split',
+      parameters: { pages: '1-2,3-5', delete_originals: false },
     })
+    req.error(new ProgressEvent('failed'))
+    modal.componentInstance.confirm()
+    req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}documents/bulk_edit/`
+    )
+    req.flush(true)
+  })
+
+  it('should support rotate', () => {
+    let modal: NgbModalRef
+    modalService.activeInstances.subscribe((m) => (modal = m[0]))
+    initNormally()
+    component.rotateDocument()
+    expect(modal).not.toBeUndefined()
+    modal.componentInstance.documentID = doc.id
+    modal.componentInstance.rotate()
+    modal.componentInstance.confirm()
+    let req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}documents/bulk_edit/`
+    )
+    expect(req.request.body).toEqual({
+      documents: [doc.id],
+      method: 'rotate',
+      parameters: { degrees: 90 },
+    })
+    req.error(new ProgressEvent('failed'))
+    modal.componentInstance.confirm()
+    req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}documents/bulk_edit/`
+    )
+    req.flush(true)
+  })
+
+  it('should support delete pages', () => {
+    let modal: NgbModalRef
+    modalService.activeInstances.subscribe((m) => (modal = m[0]))
+    initNormally()
+    component.deletePages()
+    expect(modal).not.toBeUndefined()
+    modal.componentInstance.documentID = doc.id
+    modal.componentInstance.pages = [1, 2]
+    modal.componentInstance.confirm()
+    let req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}documents/bulk_edit/`
+    )
+    expect(req.request.body).toEqual({
+      documents: [doc.id],
+      method: 'delete_pages',
+      parameters: { pages: [1, 2] },
+    })
+    req.error(new ProgressEvent('failed'))
+    modal.componentInstance.confirm()
+    req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}documents/bulk_edit/`
+    )
     req.flush(true)
   })
 

src-ui/src/app/components/document-detail/document-detail.component.ts

@@ -1,6 +1,6 @@
 import { AsyncPipe, NgTemplateOutlet } from '@angular/common'
 import { HttpClient, HttpResponse } from '@angular/common/http'
-import { Component, inject, OnDestroy, OnInit, ViewChild } from '@angular/core'
+import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core'
 import {
   FormArray,
   FormControl,
@@ -81,6 +81,9 @@ import { getFilenameFromContentDisposition } from 'src/app/utils/http'
 import { ISODateAdapter } from 'src/app/utils/ngb-iso-date-adapter'
 import * as UTIF from 'utif'
 import { ConfirmDialogComponent } from '../common/confirm-dialog/confirm-dialog.component'
+import { DeletePagesConfirmDialogComponent } from '../common/confirm-dialog/delete-pages-confirm-dialog/delete-pages-confirm-dialog.component'
+import { RotateConfirmDialogComponent } from '../common/confirm-dialog/rotate-confirm-dialog/rotate-confirm-dialog.component'
+import { SplitConfirmDialogComponent } from '../common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component'
 import { CustomFieldsDropdownComponent } from '../common/custom-fields-dropdown/custom-fields-dropdown.component'
 import { CorrespondentEditDialogComponent } from '../common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component'
 import { DocumentTypeEditDialogComponent } from '../common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component'
@@ -98,7 +101,6 @@ import { TagsComponent } from '../common/input/tags/tags.component'
 import { TextComponent } from '../common/input/text/text.component'
 import { UrlComponent } from '../common/input/url/url.component'
 import { PageHeaderComponent } from '../common/page-header/page-header.component'
-import { PDFEditorComponent } from '../common/pdf-editor/pdf-editor.component'
 import { ShareLinksDialogComponent } from '../common/share-links-dialog/share-links-dialog.component'
 import { DocumentHistoryComponent } from '../document-history/document-history.component'
 import { DocumentNotesComponent } from '../document-notes/document-notes.component'
@@ -174,26 +176,6 @@ export class DocumentDetailComponent
   extends ComponentWithPermissions
   implements OnInit, OnDestroy, DirtyComponent
 {
-  private documentsService = inject(DocumentService)
-  private route = inject(ActivatedRoute)
-  private correspondentService = inject(CorrespondentService)
-  private documentTypeService = inject(DocumentTypeService)
-  private router = inject(Router)
-  private modalService = inject(NgbModal)
-  private openDocumentService = inject(OpenDocumentsService)
-  private documentListViewService = inject(DocumentListViewService)
-  private documentTitlePipe = inject(DocumentTitlePipe)
-  private toastService = inject(ToastService)
-  private settings = inject(SettingsService)
-  private storagePathService = inject(StoragePathService)
-  private permissionsService = inject(PermissionsService)
-  private userService = inject(UserService)
-  private customFieldsService = inject(CustomFieldsService)
-  private http = inject(HttpClient)
-  private hotKeyService = inject(HotKeyService)
-  private componentRouterService = inject(ComponentRouterService)
-  private deviceDetectorService = inject(DeviceDetectorService)
-
   @ViewChild('inputTitle')
   titleInput: TextComponent
 
@@ -277,6 +259,30 @@ export class DocumentDetailComponent
   DocumentDetailNavIDs = DocumentDetailNavIDs
   activeNavID: number
 
+  constructor(
+    private documentsService: DocumentService,
+    private route: ActivatedRoute,
+    private correspondentService: CorrespondentService,
+    private documentTypeService: DocumentTypeService,
+    private router: Router,
+    private modalService: NgbModal,
+    private openDocumentService: OpenDocumentsService,
+    private documentListViewService: DocumentListViewService,
+    private documentTitlePipe: DocumentTitlePipe,
+    private toastService: ToastService,
+    private settings: SettingsService,
+    private storagePathService: StoragePathService,
+    private permissionsService: PermissionsService,
+    private userService: UserService,
+    private customFieldsService: CustomFieldsService,
+    private http: HttpClient,
+    private hotKeyService: HotKeyService,
+    private componentRouterService: ComponentRouterService,
+    private deviceDetectorService: DeviceDetectorService
+  ) {
+    super()
+  }
+
   titleKeyUp(event) {
     this.titleSubject.next(event.target?.value)
   }
@@ -1334,13 +1340,13 @@ export class DocumentDetailComponent
     this.documentForm.updateValueAndValidity()
   }
 
-  editPdf() {
-    let modal = this.modalService.open(PDFEditorComponent, {
+  splitDocument() {
+    let modal = this.modalService.open(SplitConfirmDialogComponent, {
       backdrop: 'static',
-      size: 'xl',
-      scrollable: true,
+      size: 'lg',
     })
-    modal.componentInstance.title = $localize`Edit PDF`
+    modal.componentInstance.title = $localize`Split confirm`
+    modal.componentInstance.messageBold = $localize`This operation will split the selected document(s) into new documents.`
     modal.componentInstance.btnCaption = $localize`Proceed`
     modal.componentInstance.documentID = this.document.id
     modal.componentInstance.confirmClicked
@@ -1348,16 +1354,15 @@ export class DocumentDetailComponent
       .subscribe(() => {
         modal.componentInstance.buttonsEnabled = false
         this.documentsService
-          .bulkEdit([this.document.id], 'edit_pdf', {
-            operations: modal.componentInstance.getOperations(),
-            update_document: modal.componentInstance.updateDocument,
-            include_metadata: modal.componentInstance.includeMetadata,
+          .bulkEdit([this.document.id], 'split', {
+            pages: modal.componentInstance.pagesString,
+            delete_originals: modal.componentInstance.deleteOriginal,
           })
           .pipe(first(), takeUntil(this.unsubscribeNotifier))
           .subscribe({
             next: () => {
               this.toastService.showInfo(
-                $localize`PDF edit operation for "${this.document.title}" will begin in the background.`
+                $localize`Split operation for "${this.document.title}" will begin in the background.`
               )
               modal.close()
             },
@@ -1366,7 +1371,86 @@ export class DocumentDetailComponent
                 modal.componentInstance.buttonsEnabled = true
               }
               this.toastService.showError(
-                $localize`Error executing PDF edit operation`,
+                $localize`Error executing split operation`,
+                error
+              )
+            },
+          })
+      })
+  }
+
+  rotateDocument() {
+    let modal = this.modalService.open(RotateConfirmDialogComponent, {
+      backdrop: 'static',
+      size: 'lg',
+    })
+    modal.componentInstance.title = $localize`Rotate confirm`
+    modal.componentInstance.messageBold = $localize`This operation will permanently rotate the original version of the current document.`
+    modal.componentInstance.btnCaption = $localize`Proceed`
+    modal.componentInstance.documentID = this.document.id
+    modal.componentInstance.showPDFNote = false
+    modal.componentInstance.confirmClicked
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe(() => {
+        modal.componentInstance.buttonsEnabled = false
+        this.documentsService
+          .bulkEdit([this.document.id], 'rotate', {
+            degrees: modal.componentInstance.degrees,
+          })
+          .pipe(first(), takeUntil(this.unsubscribeNotifier))
+          .subscribe({
+            next: () => {
+              this.toastService.show({
+                content: $localize`Rotation of "${this.document.title}" will begin in the background. Close and re-open the document after the operation has completed to see the changes.`,
+                delay: 8000,
+                action: this.close.bind(this),
+                actionName: $localize`Close`,
+              })
+              modal.close()
+            },
+            error: (error) => {
+              if (modal) {
+                modal.componentInstance.buttonsEnabled = true
+              }
+              this.toastService.showError(
+                $localize`Error executing rotate operation`,
+                error
+              )
+            },
+          })
+      })
+  }
+
+  deletePages() {
+    let modal = this.modalService.open(DeletePagesConfirmDialogComponent, {
+      backdrop: 'static',
+    })
+    modal.componentInstance.title = $localize`Delete pages confirm`
+    modal.componentInstance.messageBold = $localize`This operation will permanently delete the selected pages from the original document.`
+    modal.componentInstance.btnCaption = $localize`Proceed`
+    modal.componentInstance.documentID = this.document.id
+    modal.componentInstance.confirmClicked
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe(() => {
+        modal.componentInstance.buttonsEnabled = false
+        this.documentsService
+          .bulkEdit([this.document.id], 'delete_pages', {
+            pages: modal.componentInstance.pages,
+          })
+          .pipe(first(), takeUntil(this.unsubscribeNotifier))
+          .subscribe({
+            next: () => {
+              this.toastService.showInfo(
+                $localize`Delete pages operation for "${this.document.title}" will begin in the background. Close and re-open or reload this document after the operation has completed to see the changes.`
+              )
+              modal.close()
+            },
+            error: (error) => {
+              if (modal) {
+                modal.componentInstance.buttonsEnabled = true
+              }
+              this.toastService.showError(
+                $localize`Error executing delete pages operation`,
                 error
               )
             },

src-ui/src/app/components/document-history/document-history.component.ts

@@ -1,5 +1,5 @@
 import { AsyncPipe, KeyValuePipe, TitleCasePipe } from '@angular/common'
-import { Component, Input, OnInit, inject } from '@angular/core'
+import { Component, Input, OnInit } from '@angular/core'
 import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { Observable, first, map, of } from 'rxjs'
@@ -26,12 +26,6 @@ import { UserService } from 'src/app/services/rest/user.service'
   ],
 })
 export class DocumentHistoryComponent implements OnInit {
-  private documentService = inject(DocumentService)
-  private correspondentService = inject(CorrespondentService)
-  private storagePathService = inject(StoragePathService)
-  private documentTypeService = inject(DocumentTypeService)
-  private userService = inject(UserService)
-
   public AuditLogAction = AuditLogAction
 
   private _documentId: number
@@ -44,6 +38,14 @@ export class DocumentHistoryComponent implements OnInit {
   public loading: boolean = true
   public entries: AuditLogEntry[] = []
 
+  constructor(
+    private documentService: DocumentService,
+    private correspondentService: CorrespondentService,
+    private storagePathService: StoragePathService,
+    private documentTypeService: DocumentTypeService,
+    private userService: UserService
+  ) {}
+
   ngOnInit(): void {
     if (this._documentId) {
       this.loading = true

src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core'
+import { Component, Input, OnDestroy, OnInit } from '@angular/core'
 import {
   FormControl,
   FormGroup,
@@ -71,19 +71,6 @@ export class BulkEditorComponent
   extends ComponentWithPermissions
   implements OnInit, OnDestroy
 {
-  private documentTypeService = inject(DocumentTypeService)
-  private tagService = inject(TagService)
-  private correspondentService = inject(CorrespondentService)
-  list = inject(DocumentListViewService)
-  private documentService = inject(DocumentService)
-  private modalService = inject(NgbModal)
-  private openDocumentService = inject(OpenDocumentsService)
-  private settings = inject(SettingsService)
-  private toastService = inject(ToastService)
-  private storagePathService = inject(StoragePathService)
-  private customFieldService = inject(CustomFieldsService)
-  private permissionService = inject(PermissionsService)
-
   tagSelectionModel = new FilterableDropdownSelectionModel(true)
   correspondentSelectionModel = new FilterableDropdownSelectionModel()
   documentTypeSelectionModel = new FilterableDropdownSelectionModel()
@@ -107,6 +94,23 @@ export class BulkEditorComponent
   @Input()
   public disabled: boolean = false
 
+  constructor(
+    private documentTypeService: DocumentTypeService,
+    private tagService: TagService,
+    private correspondentService: CorrespondentService,
+    public list: DocumentListViewService,
+    private documentService: DocumentService,
+    private modalService: NgbModal,
+    private openDocumentService: OpenDocumentsService,
+    private settings: SettingsService,
+    private toastService: ToastService,
+    private storagePathService: StoragePathService,
+    private customFieldService: CustomFieldsService,
+    private permissionService: PermissionsService
+  ) {
+    super()
+  }
+
   applyOnClose: boolean = this.settings.get(
     SETTINGS_KEYS.BULK_EDIT_APPLY_ON_CLOSE
   )

src-ui/src/app/components/document-list/bulk-editor/custom-fields-bulk-edit-dialog/custom-fields-bulk-edit-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Output, inject } from '@angular/core'
+import { Component, EventEmitter, Output } from '@angular/core'
 import {
   FormControl,
   FormGroup,
@@ -38,9 +38,6 @@ import { DocumentService } from 'src/app/services/rest/document.service'
   ],
 })
 export class CustomFieldsBulkEditDialogComponent {
-  private activeModal = inject(NgbActiveModal)
-  private documentService = inject(DocumentService)
-
   CustomFieldDataType = CustomFieldDataType
 
   @Output()
@@ -76,6 +73,11 @@ export class CustomFieldsBulkEditDialogComponent {
 
   public documents: number[] = []
 
+  constructor(
+    private activeModal: NgbActiveModal,
+    private documentService: DocumentService
+  ) {}
+
   initForm() {
     Object.keys(this.form.controls).forEach((key) => {
       if (!this._fieldsToAddIds.includes(parseInt(key))) {

src-ui/src/app/components/document-list/document-card-large/document-card-large.component.ts

@@ -6,7 +6,6 @@ import {
   Input,
   Output,
   ViewChild,
-  inject,
 } from '@angular/core'
 import { RouterModule } from '@angular/router'
 import {
@@ -63,11 +62,15 @@ export class DocumentCardLargeComponent
   extends LoadingComponentWithPermissions
   implements AfterViewInit
 {
-  private documentService = inject(DocumentService)
-  settingsService = inject(SettingsService)
-
   DisplayField = DisplayField
 
+  constructor(
+    private documentService: DocumentService,
+    public settingsService: SettingsService
+  ) {
+    super()
+  }
+
   @Input()
   selected = false
 

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html

@@ -71,14 +71,14 @@
           }
           @if (displayFields.includes(DisplayField.CREATED)) {
             <div class="list-group-item bg-transparent p-0 border-0 d-flex flex-wrap-reverse justify-content-between">
-              <ng-template #dateCreatedTooltip>
+              <ng-template #dateTooltip>
                 <div class="d-flex flex-column text-light">
                   <span i18n>Created: {{ document.created | customDate }}</span>
                   <span i18n>Added: {{ document.added | customDate }}</span>
                   <span i18n>Modified: {{ document.modified | customDate }}</span>
                 </div>
               </ng-template>
-              <div class="ps-0 p-1" placement="top" [ngbTooltip]="dateCreatedTooltip">
+              <div class="ps-0 p-1" placement="top" [ngbTooltip]="dateTooltip">
                 <i-bs width="1em" height="1em" class="me-2 text-muted" name="calendar-event"></i-bs>
                 <small>{{document.created | customDate:'mediumDate'}}</small>
               </div>
@@ -86,14 +86,14 @@
           }
           @if (displayFields.includes(DisplayField.ADDED)) {
             <div class="list-group-item bg-transparent p-0 border-0 d-flex flex-wrap-reverse justify-content-between">
-              <ng-template #dateAddedTooltip>
+              <ng-template #dateTooltip>
                 <div class="d-flex flex-column text-light">
                   <span i18n>Created: {{ document.created | customDate }}</span>
                   <span i18n>Added: {{ document.added | customDate }}</span>
                   <span i18n>Modified: {{ document.modified | customDate }}</span>
                 </div>
               </ng-template>
-              <div class="ps-0 p-1" placement="top" [ngbTooltip]="dateAddedTooltip">
+              <div class="ps-0 p-1" placement="top" [ngbTooltip]="dateTooltip">
                 <i-bs width="1em" height="1em" class="me-2 text-muted" name="calendar-event"></i-bs>
                 <small>{{document.added | customDate:'mediumDate'}}</small>
               </div>

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts

@@ -6,7 +6,6 @@ import {
   Input,
   Output,
   ViewChild,
-  inject,
 } from '@angular/core'
 import { RouterModule } from '@angular/router'
 import {
@@ -64,11 +63,15 @@ export class DocumentCardSmallComponent
   extends LoadingComponentWithPermissions
   implements AfterViewInit
 {
-  private documentService = inject(DocumentService)
-  settingsService = inject(SettingsService)
-
   DisplayField = DisplayField
 
+  constructor(
+    private documentService: DocumentService,
+    public settingsService: SettingsService
+  ) {
+    super()
+  }
+
   @Input()
   selected = false