Chore: update to Angular 20 (#10273)

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 #dateTooltip>
+              <ng-template #dateCreatedTooltip>
                 <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]="dateTooltip">
+              <div class="ps-0 p-1" placement="top" [ngbTooltip]="dateCreatedTooltip">
                 <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 #dateTooltip>
+              <ng-template #dateAddedTooltip>
                 <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]="dateTooltip">
+              <div class="ps-0 p-1" placement="top" [ngbTooltip]="dateAddedTooltip">
                 <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,6 +6,7 @@ import {
   Input,
   Output,
   ViewChild,
+  inject,
 } from '@angular/core'
 import { RouterModule } from '@angular/router'
 import {
@@ -63,14 +64,10 @@ export class DocumentCardSmallComponent
   extends LoadingComponentWithPermissions
   implements AfterViewInit
 {
-  DisplayField = DisplayField
+  private documentService = inject(DocumentService)
+  settingsService = inject(SettingsService)
 
-  constructor(
-    private documentService: DocumentService,
-    public settingsService: SettingsService
-  ) {
-    super()
-  }
+  DisplayField = DisplayField
 
   @Input()
   selected = false