Chore: update to Angular 20 (#10273)

2025-08-16 00:36:22 +00:00 · 2025-06-27 14:06:40 -07:00
parent dfad3c4d8e
commit 958f98d7e5
146 changed files with 2662 additions and 2687 deletions
--- a/src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.ts
+++ b/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 } from '@angular/core'
+import { Component, EventEmitter, Input, Output, inject } from '@angular/core'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { Subject } from 'rxjs'
 import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
@@ -12,9 +12,7 @@ import { LoadingComponentWithPermissions } from '../../loading-component/loading
  imports: [DecimalPipe, SafeHtmlPipe],
 })
 export class ConfirmDialogComponent extends LoadingComponentWithPermissions {
-  constructor(public activeModal: NgbActiveModal) {
-    super()
-  }
+  activeModal = inject(NgbActiveModal)

  @Output()
  public confirmClicked = new EventEmitter()
--- a/src-ui/src/app/components/common/confirm-dialog/delete-pages-confirm-dialog/delete-pages-confirm-dialog.component.ts
+++ b/src-ui/src/app/components/common/confirm-dialog/delete-pages-confirm-dialog/delete-pages-confirm-dialog.component.ts
@@ -1,6 +1,5 @@
-import { Component, TemplateRef, ViewChild } from '@angular/core'
+import { Component, TemplateRef, ViewChild, inject } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import {
  PDFDocumentProxy,
  PdfViewerComponent,
@@ -17,6 +16,8 @@ import { ConfirmDialogComponent } from '../confirm-dialog.component'
  imports: [PdfViewerModule, FormsModule, ReactiveFormsModule, SafeHtmlPipe],
 })
 export class DeletePagesConfirmDialogComponent extends ConfirmDialogComponent {
+  private documentService = inject(DocumentService)
+
  public documentID: number
  public pages: number[] = []
  public currentPage: number = 1
@@ -34,11 +35,8 @@ export class DeletePagesConfirmDialogComponent extends ConfirmDialogComponent {
    return this.documentService.getPreviewUrl(this.documentID)
  }

-  constructor(
-    activeModal: NgbActiveModal,
-    private documentService: DocumentService
-  ) {
-    super(activeModal)
+  constructor() {
+    super()
  }

  public pdfPreviewLoaded(pdf: PDFDocumentProxy) {
--- a/src-ui/src/app/components/common/confirm-dialog/merge-confirm-dialog/merge-confirm-dialog.component.ts
+++ b/src-ui/src/app/components/common/confirm-dialog/merge-confirm-dialog/merge-confirm-dialog.component.ts
@@ -3,9 +3,8 @@ import {
  DragDropModule,
  moveItemInArray,
 } from '@angular/cdk/drag-drop'
-import { Component, OnInit } from '@angular/core'
+import { Component, OnInit, inject } 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'
@@ -28,6 +27,9 @@ 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
@@ -38,12 +40,8 @@ export class MergeConfirmDialogComponent

  public metadataDocumentID: number = -1

-  constructor(
-    activeModal: NgbActiveModal,
-    private documentService: DocumentService,
-    private permissionService: PermissionsService
-  ) {
-    super(activeModal)
+  constructor() {
+    super()
  }

  ngOnInit() {
--- a/src-ui/src/app/components/common/confirm-dialog/rotate-confirm-dialog/rotate-confirm-dialog.component.ts
+++ b/src-ui/src/app/components/common/confirm-dialog/rotate-confirm-dialog/rotate-confirm-dialog.component.ts
@@ -1,6 +1,5 @@
 import { NgStyle } from '@angular/common'
-import { Component } from '@angular/core'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { Component, inject } from '@angular/core'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
 import { DocumentService } from 'src/app/services/rest/document.service'
@@ -13,6 +12,8 @@ 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

@@ -25,11 +26,8 @@ export class RotateConfirmDialogComponent extends ConfirmDialogComponent {
    return degrees
  }

-  constructor(
-    activeModal: NgbActiveModal,
-    public documentService: DocumentService
-  ) {
-    super(activeModal)
+  constructor() {
+    super()
  }

  rotate(clockwise: boolean = true) {
--- a/src-ui/src/app/components/common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component.ts
+++ b/src-ui/src/app/components/common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component.ts
@@ -1,6 +1,5 @@
-import { Component, OnInit } from '@angular/core'
+import { Component, OnInit, inject } 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'
@@ -23,6 +22,9 @@ export class SplitConfirmDialogComponent
  extends ConfirmDialogComponent
  implements OnInit
 {
+  private documentService = inject(DocumentService)
+  private permissionService = inject(PermissionsService)
+
  public get pagesString(): string {
    let pagesStr = ''

@@ -62,12 +64,8 @@ export class SplitConfirmDialogComponent
    return this.documentService.getPreviewUrl(this.documentID)
  }

-  constructor(
-    activeModal: NgbActiveModal,
-    private documentService: DocumentService,
-    private permissionService: PermissionsService
-  ) {
-    super(activeModal)
+  constructor() {
+    super()
    this.confirmButtonEnabled = this.pages.size > 0
  }

--- a/src-ui/src/app/components/common/custom-field-display/custom-field-display.component.ts
+++ b/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, Inject, Input, LOCALE_ID, OnInit } from '@angular/core'
+import { Component, Input, LOCALE_ID, OnInit, inject } from '@angular/core'
 import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'
 import { takeUntil } from 'rxjs'
 import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
@@ -20,6 +20,9 @@ export class CustomFieldDisplayComponent
  extends LoadingComponentWithPermissions
  implements OnInit
 {
+  private customFieldService = inject(CustomFieldsService)
+  private documentService = inject(DocumentService)
+
  CustomFieldDataType = CustomFieldDataType

  private _document: Document
@@ -63,11 +66,9 @@ export class CustomFieldDisplayComponent

  private defaultCurrencyCode: any

-  constructor(
-    private customFieldService: CustomFieldsService,
-    private documentService: DocumentService,
-    @Inject(LOCALE_ID) currentLocale: string
-  ) {
+  constructor() {
+    const currentLocale = inject(LOCALE_ID)
+
    super()
    this.defaultCurrencyCode = getLocaleCurrencyCode(currentLocale)
    this.customFieldService.listAll().subscribe((r) => {
--- a/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.ts
+++ b/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.ts
@@ -7,6 +7,7 @@ import {
  QueryList,
  ViewChild,
  ViewChildren,
+  inject,
 } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbDropdownModule, NgbModal } from '@ng-bootstrap/ng-bootstrap'
@@ -37,6 +38,11 @@ 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()
@@ -78,12 +84,7 @@ export class CustomFieldsDropdownComponent extends LoadingComponentWithPermissio
    )
  }

-  constructor(
-    private customFieldsService: CustomFieldsService,
-    private modalService: NgbModal,
-    private toastService: ToastService,
-    private permissionsService: PermissionsService
-  ) {
+  constructor() {
    super()
    this.getFields()
  }
--- a/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.ts
+++ b/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.ts
@@ -2,6 +2,7 @@ import { NgTemplateOutlet } from '@angular/common'
 import {
  Component,
  EventEmitter,
+  inject,
  Input,
  Output,
  QueryList,
@@ -178,6 +179,8 @@ export class CustomFieldQueriesModel {
  ],
 })
 export class CustomFieldsQueryDropdownComponent extends LoadingComponentWithPermissions {
+  protected customFieldsService = inject(CustomFieldsService)
+
  public CustomFieldQueryComponentType = CustomFieldQueryElementType
  public CustomFieldQueryOperator = CustomFieldQueryOperator
  public CustomFieldDataType = CustomFieldDataType
@@ -245,7 +248,7 @@ export class CustomFieldsQueryDropdownComponent extends LoadingComponentWithPerm

  public readonly today: string = new Date().toISOString().split('T')[0]

-  constructor(protected customFieldsService: CustomFieldsService) {
+  constructor() {
    super()
    this.selectionModel = new CustomFieldQueriesModel()
    this.getFields()
--- a/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.ts
+++ b/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.ts
@@ -6,6 +6,7 @@ import {
  OnDestroy,
  OnInit,
  Output,
+  inject,
 } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import {
@@ -63,7 +64,9 @@ export enum RelativeDate {
 export class DatesDropdownComponent implements OnInit, OnDestroy {
  public popperOptions = pngxPopperOptions

-  constructor(settings: SettingsService) {
+  constructor() {
+    const settings = inject(SettingsService)
+
    this.datePlaceHolder = settings.getLocalizedDateInputFormat()
  }

--- a/src-ui/src/app/components/common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component.html
+++ b/src-ui/src/app/components/common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component.html
@@ -13,8 +13,6 @@
    <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>
    }

--- a/src-ui/src/app/components/common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component.ts
+++ b/src-ui/src/app/components/common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component.ts
@@ -1,11 +1,10 @@
-import { Component } from '@angular/core'
+import { Component, inject } 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'
@@ -13,6 +12,7 @@ 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,6 +22,7 @@ import { TextComponent } from '../../input/text/text.component'
  templateUrl: './correspondent-edit-dialog.component.html',
  styleUrls: ['./correspondent-edit-dialog.component.scss'],
  imports: [
+    CheckComponent,
    SelectComponent,
    PermissionsFormComponent,
    TextComponent,
@@ -31,13 +32,11 @@ import { TextComponent } from '../../input/text/text.component'
  ],
 })
 export class CorrespondentEditDialogComponent extends EditDialogComponent<Correspondent> {
-  constructor(
-    service: CorrespondentService,
-    activeModal: NgbActiveModal,
-    userService: UserService,
-    settingsService: SettingsService
-  ) {
-    super(service, activeModal, userService, settingsService)
+  constructor() {
+    super()
+    this.service = inject(CorrespondentService)
+    this.userService = inject(UserService)
+    this.settingsService = inject(SettingsService)
  }

  getCreateTitle() {
--- a/src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.ts
+++ b/src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.ts
@@ -5,6 +5,7 @@ import {
  OnInit,
  QueryList,
  ViewChildren,
+  inject,
 } from '@angular/core'
 import {
  FormArray,
@@ -13,7 +14,6 @@ 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,13 +54,11 @@ export class CustomFieldEditDialogComponent
      .select_options as FormArray
  }

-  constructor(
-    service: CustomFieldsService,
-    activeModal: NgbActiveModal,
-    userService: UserService,
-    settingsService: SettingsService
-  ) {
-    super(service, activeModal, userService, settingsService)
+  constructor() {
+    super()
+    this.service = inject(CustomFieldsService)
+    this.userService = inject(UserService)
+    this.settingsService = inject(SettingsService)
  }

  ngOnInit(): void {
--- a/src-ui/src/app/components/common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component.html
+++ b/src-ui/src/app/components/common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component.html
@@ -14,8 +14,6 @@
      <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>
--- a/src-ui/src/app/components/common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component.ts
+++ b/src-ui/src/app/components/common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component.ts
@@ -1,11 +1,10 @@
-import { Component } from '@angular/core'
+import { Component, inject } 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'
@@ -13,6 +12,7 @@ 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,6 +22,7 @@ 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,
@@ -31,13 +32,11 @@ import { TextComponent } from '../../input/text/text.component'
  ],
 })
 export class DocumentTypeEditDialogComponent extends EditDialogComponent<DocumentType> {
-  constructor(
-    service: DocumentTypeService,
-    activeModal: NgbActiveModal,
-    userService: UserService,
-    settingsService: SettingsService
-  ) {
-    super(service, activeModal, userService, settingsService)
+  constructor() {
+    super()
+    this.service = inject(DocumentTypeService)
+    this.userService = inject(UserService)
+    this.settingsService = inject(SettingsService)
  }

  getCreateTitle() {
--- a/src-ui/src/app/components/common/edit-dialog/edit-dialog.component.spec.ts
+++ b/src-ui/src/app/components/common/edit-dialog/edit-dialog.component.spec.ts
@@ -41,13 +41,9 @@ import { EditDialogComponent, EditDialogMode } from './edit-dialog.component'
  imports: [FormsModule, ReactiveFormsModule],
 })
 class TestComponent extends EditDialogComponent<Tag> {
-  constructor(
-    service: TagService,
-    activeModal: NgbActiveModal,
-    userService: UserService,
-    settingsService: SettingsService
-  ) {
-    super(service, activeModal, userService, settingsService)
+  constructor() {
+    super()
+    this.service = TestBed.inject(TagService)
  }

  getForm(): FormGroup<any> {
--- a/src-ui/src/app/components/common/edit-dialog/edit-dialog.component.ts
+++ b/src-ui/src/app/components/common/edit-dialog/edit-dialog.component.ts
@@ -1,4 +1,11 @@
-import { Directive, EventEmitter, Input, OnInit, Output } from '@angular/core'
+import {
+  Directive,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  inject,
+} from '@angular/core'
 import { FormGroup } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { Observable } from 'rxjs'
@@ -29,14 +36,12 @@ export abstract class EditDialogComponent<
  extends LoadingComponentWithPermissions
  implements OnInit
 {
-  constructor(
-    protected service: AbstractPaperlessService<T>,
-    private activeModal: NgbActiveModal,
-    private userService: UserService,
-    protected settingsService: SettingsService
-  ) {
-    super()
-  }
+  protected service = inject<AbstractPaperlessService<T>>(
+    AbstractPaperlessService
+  )
+  protected activeModal = inject(NgbActiveModal)
+  protected userService = inject(UserService)
+  protected settingsService = inject(SettingsService)

  users: User[]

--- a/src-ui/src/app/components/common/edit-dialog/group-edit-dialog/group-edit-dialog.component.ts
+++ b/src-ui/src/app/components/common/edit-dialog/group-edit-dialog/group-edit-dialog.component.ts
@@ -1,11 +1,10 @@
-import { Component } from '@angular/core'
+import { Component, inject } 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'
@@ -26,13 +25,11 @@ import { PermissionsSelectComponent } from '../../permissions-select/permissions
  ],
 })
 export class GroupEditDialogComponent extends EditDialogComponent<Group> {
-  constructor(
-    service: GroupService,
-    activeModal: NgbActiveModal,
-    userService: UserService,
-    settingsService: SettingsService
-  ) {
-    super(service, activeModal, userService, settingsService)
+  constructor() {
+    super()
+    this.service = inject(GroupService)
+    this.userService = inject(UserService)
+    this.settingsService = inject(SettingsService)
  }

  getCreateTitle() {
--- a/src-ui/src/app/components/common/edit-dialog/mail-account-edit-dialog/mail-account-edit-dialog.component.ts
+++ b/src-ui/src/app/components/common/edit-dialog/mail-account-edit-dialog/mail-account-edit-dialog.component.ts
@@ -1,15 +1,11 @@
-import { Component, ViewChild } from '@angular/core'
+import { Component, ViewChild, inject } from '@angular/core'
 import {
  FormControl,
  FormGroup,
  FormsModule,
  ReactiveFormsModule,
 } from '@angular/forms'
-import {
-  NgbActiveModal,
-  NgbAlert,
-  NgbAlertModule,
-} from '@ng-bootstrap/ng-bootstrap'
+import { 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'
@@ -47,13 +43,11 @@ export class MailAccountEditDialogComponent extends EditDialogComponent<MailAcco

  @ViewChild('testResultAlert', { static: false }) testResultAlert: NgbAlert

-  constructor(
-    service: MailAccountService,
-    activeModal: NgbActiveModal,
-    userService: UserService,
-    settingsService: SettingsService
-  ) {
-    super(service, activeModal, userService, settingsService)
+  constructor() {
+    super()
+    this.service = inject(MailAccountService)
+    this.userService = inject(UserService)
+    this.settingsService = inject(SettingsService)
  }

  getCreateTitle() {
--- a/src-ui/src/app/components/common/edit-dialog/mail-rule-edit-dialog/mail-rule-edit-dialog.component.ts
+++ b/src-ui/src/app/components/common/edit-dialog/mail-rule-edit-dialog/mail-rule-edit-dialog.component.ts
@@ -1,11 +1,10 @@
-import { Component } from '@angular/core'
+import { Component, inject } 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'
@@ -155,32 +154,34 @@ 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(
-    service: MailRuleService,
-    activeModal: NgbActiveModal,
-    accountService: MailAccountService,
-    correspondentService: CorrespondentService,
-    documentTypeService: DocumentTypeService,
-    userService: UserService,
-    settingsService: SettingsService
-  ) {
-    super(service, activeModal, userService, settingsService)
+  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)

-    accountService
+    this.accountService
      .listAll()
      .pipe(first())
      .subscribe((result) => (this.accounts = result.results))

-    correspondentService
+    this.correspondentService
      .listAll()
      .pipe(first())
      .subscribe((result) => (this.correspondents = result.results))

-    documentTypeService
+    this.documentTypeService
      .listAll()
      .pipe(first())
      .subscribe((result) => (this.documentTypes = result.results))
--- a/src-ui/src/app/components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component.html
+++ b/src-ui/src/app/components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component.html
@@ -64,8 +64,6 @@
    <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>
    }

--- a/src-ui/src/app/components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component.ts
+++ b/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 } from '@angular/core'
+import { Component, OnDestroy, inject } from '@angular/core'
 import {
  FormControl,
  FormGroup,
  FormsModule,
  ReactiveFormsModule,
 } from '@angular/forms'
-import { NgbAccordionModule, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectComponent } from '@ng-select/ng-select'
 import {
  Observable,
@@ -60,6 +60,8 @@ export class StoragePathEditDialogComponent
  extends EditDialogComponent<StoragePath>
  implements OnDestroy
 {
+  private documentsService = inject(DocumentService)
+
  public documentsInput$ = new Subject<string>()
  public foundDocuments$: Observable<Document[]>
  private testDocument: Document
@@ -68,14 +70,11 @@ export class StoragePathEditDialogComponent
  public loading = false
  public testLoading = false

-  constructor(
-    service: StoragePathService,
-    activeModal: NgbActiveModal,
-    userService: UserService,
-    settingsService: SettingsService,
-    private documentsService: DocumentService
-  ) {
-    super(service, activeModal, userService, settingsService)
+  constructor() {
+    super()
+    this.service = inject(StoragePathService)
+    this.userService = inject(UserService)
+    this.settingsService = inject(SettingsService)
    this.initPathObservables()
  }

--- a/src-ui/src/app/components/common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component.html
+++ b/src-ui/src/app/components/common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component.html
@@ -16,8 +16,6 @@
    <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>
    }

--- a/src-ui/src/app/components/common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component.ts
+++ b/src-ui/src/app/components/common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component.ts
@@ -1,11 +1,10 @@
-import { Component } from '@angular/core'
+import { Component, inject } 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'
@@ -36,13 +35,11 @@ import { TextComponent } from '../../input/text/text.component'
  ],
 })
 export class TagEditDialogComponent extends EditDialogComponent<Tag> {
-  constructor(
-    service: TagService,
-    activeModal: NgbActiveModal,
-    userService: UserService,
-    settingsService: SettingsService
-  ) {
-    super(service, activeModal, userService, settingsService)
+  constructor() {
+    super()
+    this.service = inject(TagService)
+    this.userService = inject(UserService)
+    this.settingsService = inject(SettingsService)
  }

  getCreateTitle() {
--- a/src-ui/src/app/components/common/edit-dialog/user-edit-dialog/user-edit-dialog.component.ts
+++ b/src-ui/src/app/components/common/edit-dialog/user-edit-dialog/user-edit-dialog.component.ts
@@ -1,11 +1,10 @@
-import { Component, OnInit } from '@angular/core'
+import { Component, OnInit, inject } 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'
@@ -37,21 +36,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(
-    service: UserService,
-    activeModal: NgbActiveModal,
-    groupsService: GroupService,
-    settingsService: SettingsService,
-    private toastService: ToastService,
-    private permissionsService: PermissionsService
-  ) {
-    super(service, activeModal, service, settingsService)
+  constructor() {
+    super()
+    this.service = inject(UserService)
+    this.groupsService = inject(GroupService)
+    this.settingsService = inject(SettingsService)

-    groupsService
+    this.groupsService
      .listAll()
      .pipe(first())
      .subscribe((result) => (this.groups = result.results))
--- a/src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.ts
+++ b/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 } from '@angular/core'
+import { Component, OnInit, inject } from '@angular/core'
 import {
  FormArray,
  FormControl,
@@ -12,7 +12,7 @@ import {
  FormsModule,
  ReactiveFormsModule,
 } from '@angular/forms'
-import { NgbAccordionModule, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { first } from 'rxjs'
 import { Correspondent } from 'src/app/data/correspondent'
@@ -171,6 +171,12 @@ 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[]
@@ -183,40 +189,38 @@ export class WorkflowEditDialogComponent

  private allowedActionTypes = []

-  constructor(
-    service: WorkflowService,
-    activeModal: NgbActiveModal,
-    correspondentService: CorrespondentService,
-    documentTypeService: DocumentTypeService,
-    storagePathService: StoragePathService,
-    mailRuleService: MailRuleService,
-    userService: UserService,
-    settingsService: SettingsService,
-    customFieldsService: CustomFieldsService
-  ) {
-    super(service, activeModal, userService, settingsService)
+  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)

-    correspondentService
+    this.correspondentService
      .listAll()
      .pipe(first())
      .subscribe((result) => (this.correspondents = result.results))

-    documentTypeService
+    this.documentTypeService
      .listAll()
      .pipe(first())
      .subscribe((result) => (this.documentTypes = result.results))

-    storagePathService
+    this.storagePathService
      .listAll()
      .pipe(first())
      .subscribe((result) => (this.storagePaths = result.results))

-    mailRuleService
+    this.mailRuleService
      .listAll()
      .pipe(first())
      .subscribe((result) => (this.mailRules = result.results))

-    customFieldsService
+    this.customFieldsService
      .listAll()
      .pipe(first())
      .subscribe((result) => {
--- a/src-ui/src/app/components/common/email-document-dialog/email-document-dialog.component.ts
+++ b/src-ui/src/app/components/common/email-document-dialog/email-document-dialog.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core'
+import { Component, Input, inject } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
@@ -13,6 +13,10 @@ 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`

@@ -37,11 +41,7 @@ export class EmailDocumentDialogComponent extends LoadingComponentWithPermission
  public emailSubject: string = ''
  public emailMessage: string = ''

-  constructor(
-    private activeModal: NgbActiveModal,
-    private documentService: DocumentService,
-    private toastService: ToastService
-  ) {
+  constructor() {
    super()
    this.loading = false
  }
--- a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts
+++ b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts
@@ -7,6 +7,7 @@ import {
  OnInit,
  Output,
  ViewChild,
+  inject,
 } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbDropdown, NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'
@@ -434,6 +435,9 @@ 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
@@ -536,10 +540,7 @@ export class FilterableDropdownComponent

  private keyboardIndex: number

-  constructor(
-    private filterPipe: FilterPipe,
-    private hotkeyService: HotKeyService
-  ) {
+  constructor() {
    super()
    this.selectionModelChange.subscribe((updatedModel) => {
      this.modelIsDirty = updatedModel.isDirty()
--- a/src-ui/src/app/components/common/hotkey-dialog/hotkey-dialog.component.ts
+++ b/src-ui/src/app/components/common/hotkey-dialog/hotkey-dialog.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core'
+import { Component, inject } 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()
  }
--- a/src-ui/src/app/components/common/input/custom-fields-values/custom-fields-values.component.ts
+++ b/src-ui/src/app/components/common/input/custom-fields-values/custom-fields-values.component.ts
@@ -2,6 +2,7 @@ import {
  Component,
  EventEmitter,
  forwardRef,
+  inject,
  Input,
  Output,
 } from '@angular/core'
@@ -55,7 +56,9 @@ import { UrlComponent } from '../url/url.component'
 export class CustomFieldsValuesComponent extends AbstractInputComponent<Object> {
  public CustomFieldDataType = CustomFieldDataType

-  constructor(customFieldsService: CustomFieldsService) {
+  constructor() {
+    const customFieldsService = inject(CustomFieldsService)
+
    super()
    customFieldsService.listAll().subscribe((items) => {
      this.fields = items.results
--- a/src-ui/src/app/components/common/input/date/date.component.ts
+++ b/src-ui/src/app/components/common/input/date/date.component.ts
@@ -2,6 +2,7 @@ import {
  Component,
  EventEmitter,
  forwardRef,
+  inject,
  Input,
  OnInit,
  Output,
@@ -45,13 +46,9 @@ export class DateComponent
  extends AbstractInputComponent<string>
  implements OnInit
 {
-  constructor(
-    private settings: SettingsService,
-    private ngbDateParserFormatter: NgbDateParserFormatter,
-    private isoDateAdapter: NgbDateAdapter<string>
-  ) {
-    super()
-  }
+  private settings = inject(SettingsService)
+  private ngbDateParserFormatter = inject(NgbDateParserFormatter)
+  private isoDateAdapter = inject<NgbDateAdapter<string>>(NgbDateAdapter)

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

-  constructor(private documentsService: DocumentService) {
-    super()
-  }
-
  ngOnInit() {
    this.loadDocs()
  }
--- a/src-ui/src/app/components/common/input/monetary/monetary.component.spec.ts
+++ b/src-ui/src/app/components/common/input/monetary/monetary.component.spec.ts
@@ -1,5 +1,6 @@
 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'
@@ -41,8 +42,6 @@ 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', () => {
@@ -87,3 +86,28 @@ 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')
+  })
+})
--- a/src-ui/src/app/components/common/input/monetary/monetary.component.ts
+++ b/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,6 +27,8 @@ import { AbstractInputComponent } from '../abstract-input'
  ],
 })
 export class MonetaryComponent extends AbstractInputComponent<string> {
+  currentLocale = inject(LOCALE_ID)
+
  public currency: string = ''

  public _monetaryValue: string = ''
@@ -45,11 +47,10 @@ export class MonetaryComponent extends AbstractInputComponent<string> {
    if (currency) this.defaultCurrencyCode = currency
  }

-  constructor(@Inject(LOCALE_ID) currentLocale: string) {
+  constructor() {
    super()
-
    this.currency = this.defaultCurrencyCode =
-      this.defaultCurrency ?? getLocaleCurrencyCode(currentLocale)
+      this.defaultCurrency ?? getLocaleCurrencyCode(this.currentLocale)
  }

  writeValue(newValue: any): void {
--- a/src-ui/src/app/components/common/input/number/number.component.ts
+++ b/src-ui/src/app/components/common/input/number/number.component.ts
@@ -1,4 +1,4 @@
-import { Component, forwardRef, Input } from '@angular/core'
+import { Component, forwardRef, inject, Input } from '@angular/core'
 import {
  FormsModule,
  NG_VALUE_ACCESSOR,
@@ -22,16 +22,14 @@ 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
--- a/src-ui/src/app/components/common/input/permissions/permissions-group/permissions-group.component.ts
+++ b/src-ui/src/app/components/common/input/permissions/permissions-group/permissions-group.component.ts
@@ -1,4 +1,4 @@
-import { Component, forwardRef } from '@angular/core'
+import { Component, forwardRef, inject } from '@angular/core'
 import {
  FormsModule,
  NG_VALUE_ACCESSOR,
@@ -26,7 +26,9 @@ import { AbstractInputComponent } from '../../abstract-input'
 export class PermissionsGroupComponent extends AbstractInputComponent<Group> {
  groups: Group[]

-  constructor(groupService: GroupService) {
+  constructor() {
+    const groupService = inject(GroupService)
+
    super()
    groupService
      .listAll()
--- a/src-ui/src/app/components/common/input/permissions/permissions-user/permissions-user.component.ts
+++ b/src-ui/src/app/components/common/input/permissions/permissions-user/permissions-user.component.ts
@@ -1,4 +1,4 @@
-import { Component, forwardRef } from '@angular/core'
+import { Component, forwardRef, inject } from '@angular/core'
 import {
  FormsModule,
  NG_VALUE_ACCESSOR,
@@ -8,7 +8,6 @@ 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({
@@ -27,7 +26,9 @@ import { AbstractInputComponent } from '../../abstract-input'
 export class PermissionsUserComponent extends AbstractInputComponent<User[]> {
  users: User[]

-  constructor(userService: UserService, settings: SettingsService) {
+  constructor() {
+    const userService = inject(UserService)
+
    super()
    userService
      .listAll()
--- a/src-ui/src/app/components/common/input/tags/tags.component.ts
+++ b/src-ui/src/app/components/common/input/tags/tags.component.ts
@@ -2,6 +2,7 @@ import {
  Component,
  EventEmitter,
  forwardRef,
+  inject,
  Input,
  OnInit,
  Output,
@@ -45,10 +46,10 @@ import { TagComponent } from '../../tag/tag.component'
  ],
 })
 export class TagsComponent implements OnInit, ControlValueAccessor {
-  constructor(
-    private tagService: TagService,
-    private modalService: NgbModal
-  ) {
+  private tagService = inject(TagService)
+  private modalService = inject(NgbModal)
+
+  constructor() {
    this.createTagRef = this.createTag.bind(this)
  }

--- a/src-ui/src/app/components/common/logo/logo.component.ts
+++ b/src-ui/src/app/components/common/logo/logo.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core'
+import { Component, Input, inject } 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,6 +9,8 @@ import { environment } from 'src/environments/environment'
  styleUrls: ['./logo.component.scss'],
 })
 export class LogoComponent {
+  private settingsService = inject(SettingsService)
+
  @Input()
  extra_classes: string

@@ -24,8 +26,6 @@ export class LogoComponent {
      : null
  }

-  constructor(private settingsService: SettingsService) {}
-
  getClasses() {
    return ['logo'].concat(this.extra_classes).join(' ')
  }
--- a/src-ui/src/app/components/common/page-header/page-header.component.ts
+++ b/src-ui/src/app/components/common/page-header/page-header.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core'
+import { Component, Input, inject } 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 {
-  constructor(private titleService: Title) {}
+  private titleService = inject(Title)

  _title = ''

--- a/src-ui/src/app/components/common/permissions-dialog/permissions-dialog.component.ts
+++ b/src-ui/src/app/components/common/permissions-dialog/permissions-dialog.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { Component, EventEmitter, Input, Output, inject } 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(
-    public activeModal: NgbActiveModal,
-    private userService: UserService
-  ) {
+  constructor() {
    this.userService.listAll().subscribe((r) => (this.users = r.results))
  }

--- a/src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.ts
+++ b/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 } from '@angular/core'
+import { Component, EventEmitter, Input, Output, inject } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectComponent } from '@ng-select/ng-select'
@@ -58,6 +58,9 @@ export enum OwnerFilterType {
  ],
 })
 export class PermissionsFilterDropdownComponent extends ComponentWithPermissions {
+  permissionsService = inject(PermissionsService)
+  private settingsService = inject(SettingsService)
+
  public OwnerFilterType = OwnerFilterType

  @Input()
@@ -83,12 +86,12 @@ export class PermissionsFilterDropdownComponent extends ComponentWithPermissions
    )
  }

-  constructor(
-    public permissionsService: PermissionsService,
-    userService: UserService,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
+    const userService = inject(UserService)
+
    super()
+    const permissionsService = this.permissionsService
+
    if (
      permissionsService.currentUserCan(
        PermissionAction.View,
--- a/src-ui/src/app/components/common/permissions-select/permissions-select.component.ts
+++ b/src-ui/src/app/components/common/permissions-select/permissions-select.component.ts
@@ -1,5 +1,5 @@
 import { KeyValuePipe } from '@angular/common'
-import { Component, forwardRef, Input, OnInit } from '@angular/core'
+import { Component, forwardRef, inject, Input, OnInit } from '@angular/core'
 import {
  AbstractControl,
  ControlValueAccessor,
@@ -43,6 +43,9 @@ export class PermissionsSelectComponent
  extends ComponentWithPermissions
  implements OnInit, ControlValueAccessor
 {
+  private readonly permissionsService = inject(PermissionsService)
+  private readonly settingsService = inject(SettingsService)
+
  @Input()
  title: string = 'Permissions'

@@ -76,10 +79,7 @@ export class PermissionsSelectComponent

  public allowedTypes = Object.keys(PermissionType)

-  constructor(
-    private readonly permissionsService: PermissionsService,
-    private readonly settingsService: SettingsService
-  ) {
+  constructor() {
    super()
    if (!this.settingsService.get(SETTINGS_KEYS.AUDITLOG_ENABLED)) {
      this.allowedTypes.splice(this.allowedTypes.indexOf('History'), 1)
--- a/src-ui/src/app/components/common/preview-popup/preview-popup.component.ts
+++ b/src-ui/src/app/components/common/preview-popup/preview-popup.component.ts
@@ -1,5 +1,5 @@
 import { HttpClient } from '@angular/common/http'
-import { Component, Input, OnDestroy, ViewChild } from '@angular/core'
+import { Component, inject, 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,6 +24,10 @@ 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) {
@@ -82,12 +86,6 @@ export class PreviewPopupComponent implements OnDestroy {
    )
  }

-  constructor(
-    private settingsService: SettingsService,
-    private documentService: DocumentService,
-    private http: HttpClient
-  ) {}
-
  ngOnDestroy(): void {
    this.unsubscribeNotifier.next(this)
  }
--- a/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.ts
+++ b/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 } from '@angular/core'
+import { Component, OnInit, inject } from '@angular/core'
 import {
  FormControl,
  FormGroup,
@@ -46,6 +46,11 @@ 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

@@ -83,15 +88,6 @@ 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
--- a/src-ui/src/app/components/common/share-links-dialog/share-links-dialog.component.spec.ts
+++ b/src-ui/src/app/components/common/share-links-dialog/share-links-dialog.component.spec.ts
@@ -10,6 +10,7 @@ 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'
@@ -33,6 +34,8 @@ describe('ShareLinksDialogComponent', () => {
      imports: [
        ShareLinksDialogComponent,
        NgxBootstrapIconsModule.pick(allIcons),
+        FormsModule,
+        ReactiveFormsModule,
      ],
      providers: [
        provideHttpClient(withInterceptorsFromDi()),
@@ -223,16 +226,18 @@ describe('ShareLinksDialogComponent', () => {
    )
  })

-  it('should disable archive switch & option if no archive available', () => {
+  it('should disable archive switch & option if no archive available', (done) => {
    component.hasArchiveVersion = false
    component.ngOnInit()
    fixture.detectChanges()
    expect(component.useArchiveVersion).toBeFalsy()
-    expect(
-      fixture.debugElement.query(By.css("input[type='checkbox']")).attributes[
-        'ng-reflect-is-disabled'
-      ]
-    ).toBeTruthy()
+    setTimeout(() => {
+      // some stupid change detection issue
+      const inputEl = fixture.debugElement.query(By.css('#versionSwitch'))
+        .nativeElement as HTMLInputElement
+      expect(inputEl.disabled).toBeTruthy()
+      done()
+    })
  })

  it('should support close', () => {
--- a/src-ui/src/app/components/common/share-links-dialog/share-links-dialog.component.ts
+++ b/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 } from '@angular/core'
+import { Component, Input, OnInit, inject } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
@@ -16,6 +16,11 @@ 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 },
@@ -58,13 +63,6 @@ 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()
  }
--- a/src-ui/src/app/components/common/system-status-dialog/system-status-dialog.component.ts
+++ b/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 } from '@angular/core'
+import { Component, OnInit, inject } from '@angular/core'
 import {
  NgbActiveModal,
  NgbModalModule,
@@ -35,6 +35,13 @@ import { environment } from 'src/environments/environment'
  ],
 })
 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)
+
  public SystemStatusItemStatus = SystemStatusItemStatus
  public PaperlessTaskName = PaperlessTaskName
  public status: SystemStatus
@@ -49,15 +56,6 @@ export class SystemStatusDialogComponent implements OnInit {
    return this.permissionsService.isSuperUser()
  }

-  constructor(
-    public activeModal: NgbActiveModal,
-    private clipboard: Clipboard,
-    private systemStatusService: SystemStatusService,
-    private tasksService: TasksService,
-    private toastService: ToastService,
-    private permissionsService: PermissionsService
-  ) {}
-
  public ngOnInit() {
    this.versionMismatch =
      environment.production &&
--- a/src-ui/src/app/components/common/tag/tag.component.ts
+++ b/src-ui/src/app/components/common/tag/tag.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core'
+import { Component, inject, Input } from '@angular/core'
 import { Tag } from 'src/app/data/tag'
 import {
  PermissionAction,
@@ -13,14 +13,12 @@ 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
--- a/src-ui/src/app/components/common/toast/toast.component.ts
+++ b/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 } from '@angular/core'
+import { Component, EventEmitter, Input, Output, inject } from '@angular/core'
 import {
  NgbProgressbarModule,
  NgbToastModule,
@@ -21,6 +21,8 @@ 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
@@ -31,8 +33,6 @@ export class ToastComponent {

  public copied: boolean = false

-  constructor(private clipboard: Clipboard) {}
-
  onShown(toast: Toast) {
    if (!this.autohide) return

--- a/src-ui/src/app/components/common/toasts/toasts.component.ts
+++ b/src-ui/src/app/components/common/toasts/toasts.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit } from '@angular/core'
+import { Component, OnDestroy, OnInit, inject } from '@angular/core'
 import {
  NgbAccordionModule,
  NgbProgressbarModule,
@@ -20,7 +20,7 @@ import { ToastComponent } from '../toast/toast.component'
  ],
 })
 export class ToastsComponent implements OnInit, OnDestroy {
-  constructor(public toastService: ToastService) {}
+  toastService = inject(ToastService)

  private subscription: Subscription