Enhancement: angular 19 (#8584)

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

@@ -29,15 +29,6 @@ describe('ConfigComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [
-        ConfigComponent,
-        TextComponent,
-        SelectComponent,
-        NumberComponent,
-        SwitchComponent,
-        FileComponent,
-        PageHeaderComponent,
-      ],
       imports: [
         BrowserModule,
         NgbModule,
@@ -45,6 +36,13 @@ describe('ConfigComponent', () => {
         FormsModule,
         ReactiveFormsModule,
         NgxBootstrapIconsModule.pick(allIcons),
+        ConfigComponent,
+        TextComponent,
+        SelectComponent,
+        NumberComponent,
+        SwitchComponent,
+        FileComponent,
+        PageHeaderComponent,
       ],
       providers: [
         provideHttpClient(withInterceptorsFromDi()),

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

@@ -1,6 +1,15 @@
+import { AsyncPipe } from '@angular/common'
 import { Component, OnDestroy, OnInit } from '@angular/core'
-import { AbstractControl, FormControl, FormGroup } from '@angular/forms'
+import {
+  AbstractControl,
+  FormControl,
+  FormGroup,
+  FormsModule,
+  ReactiveFormsModule,
+} from '@angular/forms'
+import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap'
 import { DirtyComponent, dirtyCheck } from '@ngneat/dirty-check-forms'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import {
   BehaviorSubject,
   Observable,
@@ -18,12 +27,31 @@ import {
 import { ConfigService } from 'src/app/services/config.service'
 import { SettingsService } from 'src/app/services/settings.service'
 import { ToastService } from 'src/app/services/toast.service'
+import { FileComponent } from '../../common/input/file/file.component'
+import { NumberComponent } from '../../common/input/number/number.component'
+import { SelectComponent } from '../../common/input/select/select.component'
+import { SwitchComponent } from '../../common/input/switch/switch.component'
+import { TextComponent } from '../../common/input/text/text.component'
+import { PageHeaderComponent } from '../../common/page-header/page-header.component'
 import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
 
 @Component({
   selector: 'pngx-config',
   templateUrl: './config.component.html',
   styleUrl: './config.component.scss',
+  imports: [
+    PageHeaderComponent,
+    SelectComponent,
+    SwitchComponent,
+    TextComponent,
+    NumberComponent,
+    FileComponent,
+    AsyncPipe,
+    NgbNavModule,
+    FormsModule,
+    ReactiveFormsModule,
+    NgxBootstrapIconsModule,
+  ],
 })
 export class ConfigComponent
   extends LoadingComponentWithPermissions

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

@@ -1,7 +1,6 @@
 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 { BrowserModule, By } from '@angular/platform-browser'
 import { NgbModule, NgbNavLink } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
@@ -33,13 +32,12 @@ describe('LogsComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [LogsComponent, PageHeaderComponent],
       imports: [
         BrowserModule,
         NgbModule,
         NgxBootstrapIconsModule.pick(allIcons),
-        FormsModule,
-        ReactiveFormsModule,
+        LogsComponent,
+        PageHeaderComponent,
       ],
       providers: [
         provideHttpClient(withInterceptorsFromDi()),

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

@@ -6,14 +6,23 @@ import {
   OnInit,
   ViewChild,
 } from '@angular/core'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap'
 import { filter, takeUntil, timer } from 'rxjs'
 import { LogService } from 'src/app/services/rest/log.service'
+import { PageHeaderComponent } from '../../common/page-header/page-header.component'
 import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
 
 @Component({
   selector: 'pngx-logs',
   templateUrl: './logs.component.html',
   styleUrls: ['./logs.component.scss'],
+  imports: [
+    PageHeaderComponent,
+    NgbNavModule,
+    FormsModule,
+    ReactiveFormsModule,
+  ],
 })
 export class LogsComponent
   extends LoadingComponentWithPermissions

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

@@ -75,7 +75,16 @@ describe('SettingsComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [
+      imports: [
+        NgbModule,
+        RouterTestingModule.withRoutes(routes),
+        FormsModule,
+        ReactiveFormsModule,
+        NgbAlertModule,
+        NgSelectModule,
+        NgxBootstrapIconsModule.pick(allIcons),
+        NgbModalModule,
+        DragDropModule,
         SettingsComponent,
         PageHeaderComponent,
         IfPermissionsDirective,
@@ -94,17 +103,6 @@ describe('SettingsComponent', () => {
         ConfirmButtonComponent,
         DragDropSelectComponent,
       ],
-      imports: [
-        NgbModule,
-        RouterTestingModule.withRoutes(routes),
-        FormsModule,
-        ReactiveFormsModule,
-        NgbAlertModule,
-        NgSelectModule,
-        NgxBootstrapIconsModule.pick(allIcons),
-        NgbModalModule,
-        DragDropModule,
-      ],
       providers: [
         CustomDatePipe,
         DatePipe,

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

@@ -1,4 +1,4 @@
-import { ViewportScroller } from '@angular/common'
+import { AsyncPipe, ViewportScroller } from '@angular/common'
 import {
   AfterViewInit,
   Component,
@@ -7,14 +7,22 @@ import {
   OnDestroy,
   OnInit,
 } from '@angular/core'
-import { FormControl, FormGroup } from '@angular/forms'
+import {
+  FormControl,
+  FormGroup,
+  FormsModule,
+  ReactiveFormsModule,
+} from '@angular/forms'
 import { ActivatedRoute, Router } from '@angular/router'
 import {
   NgbModal,
   NgbModalRef,
   NgbNavChangeEvent,
+  NgbNavModule,
+  NgbPopoverModule,
 } from '@ng-bootstrap/ng-bootstrap'
 import { DirtyComponent, dirtyCheck } from '@ngneat/dirty-check-forms'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { TourService } from 'ngx-ui-tour-ng-bootstrap'
 import {
   BehaviorSubject,
@@ -32,6 +40,8 @@ import {
 } from 'src/app/data/system-status'
 import { GlobalSearchType, SETTINGS_KEYS } from 'src/app/data/ui-settings'
 import { User } from 'src/app/data/user'
+import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
+import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
 import { DocumentListViewService } from 'src/app/services/document-list-view.service'
 import {
   PermissionAction,
@@ -46,6 +56,12 @@ import {
 } from 'src/app/services/settings.service'
 import { SystemStatusService } from 'src/app/services/system-status.service'
 import { Toast, ToastService } from 'src/app/services/toast.service'
+import { CheckComponent } from '../../common/input/check/check.component'
+import { ColorComponent } from '../../common/input/color/color.component'
+import { PermissionsGroupComponent } from '../../common/input/permissions/permissions-group/permissions-group.component'
+import { PermissionsUserComponent } from '../../common/input/permissions/permissions-user/permissions-user.component'
+import { SelectComponent } from '../../common/input/select/select.component'
+import { PageHeaderComponent } from '../../common/page-header/page-header.component'
 import { SystemStatusDialogComponent } from '../../common/system-status-dialog/system-status-dialog.component'
 import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
 
@@ -66,6 +82,22 @@ const systemDateFormat = {
   selector: 'pngx-settings',
   templateUrl: './settings.component.html',
   styleUrls: ['./settings.component.scss'],
+  imports: [
+    PageHeaderComponent,
+    CheckComponent,
+    ColorComponent,
+    SelectComponent,
+    PermissionsGroupComponent,
+    PermissionsUserComponent,
+    CustomDatePipe,
+    IfPermissionsDirective,
+    AsyncPipe,
+    FormsModule,
+    ReactiveFormsModule,
+    NgbNavModule,
+    NgbPopoverModule,
+    NgxBootstrapIconsModule,
+  ],
 })
 export class SettingsComponent
   extends ComponentWithPermissions

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

@@ -119,18 +119,16 @@ describe('TasksComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [
-        TasksComponent,
-        PageHeaderComponent,
-        IfPermissionsDirective,
-        CustomDatePipe,
-        ConfirmDialogComponent,
-      ],
       imports: [
         NgbModule,
         RouterTestingModule.withRoutes(routes),
         NgxBootstrapIconsModule.pick(allIcons),
         FormsModule,
+        TasksComponent,
+        PageHeaderComponent,
+        IfPermissionsDirective,
+        CustomDatePipe,
+        ConfirmDialogComponent,
       ],
       providers: [
         {

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

@@ -1,6 +1,14 @@
+import { NgTemplateOutlet, SlicePipe } from '@angular/common'
 import { Component, OnDestroy, OnInit } from '@angular/core'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { Router } from '@angular/router'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import {
+  NgbCollapseModule,
+  NgbModal,
+  NgbNavModule,
+  NgbPopoverModule,
+} from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import {
   debounceTime,
   distinctUntilChanged,
@@ -11,8 +19,11 @@ import {
   timer,
 } from 'rxjs'
 import { PaperlessTask } from 'src/app/data/paperless-task'
+import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
+import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
 import { TasksService } from 'src/app/services/tasks.service'
 import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
+import { PageHeaderComponent } from '../../common/page-header/page-header.component'
 import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
 
 export enum TaskTab {
@@ -36,6 +47,19 @@ const FILTER_TARGETS = [
   selector: 'pngx-tasks',
   templateUrl: './tasks.component.html',
   styleUrls: ['./tasks.component.scss'],
+  imports: [
+    PageHeaderComponent,
+    IfPermissionsDirective,
+    CustomDatePipe,
+    SlicePipe,
+    FormsModule,
+    ReactiveFormsModule,
+    NgTemplateOutlet,
+    NgbCollapseModule,
+    NgbNavModule,
+    NgbPopoverModule,
+    NgxBootstrapIconsModule,
+  ],
 })
 export class TasksComponent
   extends LoadingComponentWithPermissions

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

@@ -43,12 +43,6 @@ describe('TrashComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [
-        TrashComponent,
-        PageHeaderComponent,
-        ConfirmDialogComponent,
-        SafeHtmlPipe,
-      ],
       imports: [
         HttpClientTestingModule,
         FormsModule,
@@ -56,6 +50,10 @@ describe('TrashComponent', () => {
         NgbPopoverModule,
         NgbPaginationModule,
         NgxBootstrapIconsModule.pick(allIcons),
+        TrashComponent,
+        PageHeaderComponent,
+        ConfirmDialogComponent,
+        SafeHtmlPipe,
       ],
     }).compileComponents()
 

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

@@ -1,6 +1,8 @@
 import { Component, OnDestroy } from '@angular/core'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { Router } from '@angular/router'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgbModal, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { delay, takeUntil, tap } from 'rxjs'
 import { Document } from 'src/app/data/document'
 import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
@@ -8,12 +10,22 @@ import { SettingsService } from 'src/app/services/settings.service'
 import { ToastService } from 'src/app/services/toast.service'
 import { TrashService } from 'src/app/services/trash.service'
 import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
+import { PageHeaderComponent } from '../../common/page-header/page-header.component'
+import { PreviewPopupComponent } from '../../common/preview-popup/preview-popup.component'
 import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
 
 @Component({
   selector: 'pngx-trash',
   templateUrl: './trash.component.html',
   styleUrl: './trash.component.scss',
+  imports: [
+    PageHeaderComponent,
+    PreviewPopupComponent,
+    FormsModule,
+    ReactiveFormsModule,
+    NgbPaginationModule,
+    NgxBootstrapIconsModule,
+  ],
 })
 export class TrashComponent
   extends LoadingComponentWithPermissions

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

@@ -7,25 +7,13 @@ import {
   fakeAsync,
   tick,
 } from '@angular/core/testing'
-import { FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { RouterTestingModule } from '@angular/router/testing'
-import {
-  NgbAlertModule,
-  NgbModal,
-  NgbModalRef,
-  NgbModule,
-} from '@ng-bootstrap/ng-bootstrap'
-import { NgSelectModule } from '@ng-select/ng-select'
+import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { of, throwError } from 'rxjs'
-import { routes } from 'src/app/app-routing.module'
 import { Group } from 'src/app/data/group'
 import { User } from 'src/app/data/user'
-import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
-import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { PermissionsGuard } from 'src/app/guards/permissions.guard'
 import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
-import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
 import { PermissionsService } from 'src/app/services/permissions.service'
 import { GroupService } from 'src/app/services/rest/group.service'
 import { UserService } from 'src/app/services/rest/user.service'
@@ -34,16 +22,6 @@ import { ToastService } from 'src/app/services/toast.service'
 import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
 import { GroupEditDialogComponent } from '../../common/edit-dialog/group-edit-dialog/group-edit-dialog.component'
 import { UserEditDialogComponent } from '../../common/edit-dialog/user-edit-dialog/user-edit-dialog.component'
-import { CheckComponent } from '../../common/input/check/check.component'
-import { NumberComponent } from '../../common/input/number/number.component'
-import { PasswordComponent } from '../../common/input/password/password.component'
-import { PermissionsGroupComponent } from '../../common/input/permissions/permissions-group/permissions-group.component'
-import { PermissionsUserComponent } from '../../common/input/permissions/permissions-user/permissions-user.component'
-import { SelectComponent } from '../../common/input/select/select.component'
-import { TagsComponent } from '../../common/input/tags/tags.component'
-import { TextComponent } from '../../common/input/text/text.component'
-import { PageHeaderComponent } from '../../common/page-header/page-header.component'
-import { SettingsComponent } from '../settings/settings.component'
 import { UsersAndGroupsComponent } from './users-groups.component'
 
 const users = [
@@ -67,33 +45,7 @@ describe('UsersAndGroupsComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [
-        UsersAndGroupsComponent,
-        SettingsComponent,
-        PageHeaderComponent,
-        IfPermissionsDirective,
-        CustomDatePipe,
-        ConfirmDialogComponent,
-        CheckComponent,
-        SafeHtmlPipe,
-        SelectComponent,
-        TextComponent,
-        PasswordComponent,
-        NumberComponent,
-        TagsComponent,
-        PermissionsUserComponent,
-        PermissionsGroupComponent,
-        IfOwnerDirective,
-      ],
-      imports: [
-        NgbModule,
-        RouterTestingModule.withRoutes(routes),
-        FormsModule,
-        ReactiveFormsModule,
-        NgbAlertModule,
-        NgSelectModule,
-        NgxBootstrapIconsModule.pick(allIcons),
-      ],
+      imports: [NgxBootstrapIconsModule.pick(allIcons)],
       providers: [
         CustomDatePipe,
         DatePipe,

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

@@ -1,8 +1,10 @@
 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'
 import { Group } from 'src/app/data/group'
 import { User } from 'src/app/data/user'
+import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { PermissionsService } from 'src/app/services/permissions.service'
 import { GroupService } from 'src/app/services/rest/group.service'
 import { UserService } from 'src/app/services/rest/user.service'
@@ -12,12 +14,18 @@ import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dial
 import { EditDialogMode } from '../../common/edit-dialog/edit-dialog.component'
 import { GroupEditDialogComponent } from '../../common/edit-dialog/group-edit-dialog/group-edit-dialog.component'
 import { UserEditDialogComponent } from '../../common/edit-dialog/user-edit-dialog/user-edit-dialog.component'
+import { PageHeaderComponent } from '../../common/page-header/page-header.component'
 import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
 
 @Component({
   selector: 'pngx-users-groups',
   templateUrl: './users-groups.component.html',
   styleUrls: ['./users-groups.component.scss'],
+  imports: [
+    PageHeaderComponent,
+    IfPermissionsDirective,
+    NgxBootstrapIconsModule,
+  ],
 })
 export class UsersAndGroupsComponent
   extends ComponentWithPermissions

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

@@ -1,6 +1,3 @@
-@import "node_modules/bootstrap/scss/functions";
-@import "node_modules/bootstrap/scss/variables";
-
 /*
  * Sidebar
  */
@@ -15,6 +12,7 @@
   overflow-y: auto;
   --pngx-sidebar-width: 100%;
   max-width: var(--pngx-sidebar-width);
+  transition: all .2s ease;
 
   .sidebar-heading .spinner-border {
     width: 0.8em;
@@ -37,8 +35,6 @@
   @media (min-width: 2400px) {
     --pngx-sidebar-width: 8.33333333%;
   }
-
-  transition: all .2s ease;
 }
 @media (max-width: 767.98px) {
   .sidebar {

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

@@ -95,11 +95,6 @@ describe('AppFrameComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [
-        AppFrameComponent,
-        IfPermissionsDirective,
-        GlobalSearchComponent,
-      ],
       imports: [
         BrowserModule,
         RouterTestingModule.withRoutes(routes),
@@ -109,6 +104,9 @@ describe('AppFrameComponent', () => {
         DragDropModule,
         NgbModalModule,
         NgxBootstrapIconsModule.pick(allIcons),
+        AppFrameComponent,
+        IfPermissionsDirective,
+        GlobalSearchComponent,
       ],
       providers: [
         SettingsService,

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

@@ -2,17 +2,29 @@ import {
   CdkDragDrop,
   CdkDragEnd,
   CdkDragStart,
+  DragDropModule,
   moveItemInArray,
 } from '@angular/cdk/drag-drop'
+import { NgClass } from '@angular/common'
 import { Component, HostListener, OnInit } from '@angular/core'
-import { ActivatedRoute, Router } from '@angular/router'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { ActivatedRoute, Router, RouterModule } from '@angular/router'
+import {
+  NgbCollapseModule,
+  NgbDropdownModule,
+  NgbModal,
+  NgbNavModule,
+  NgbPopoverModule,
+} from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { TourNgBootstrapModule } from 'ngx-ui-tour-ng-bootstrap'
 import { Observable } from 'rxjs'
 import { first } from 'rxjs/operators'
 import { Document } from 'src/app/data/document'
 import { SavedView } from 'src/app/data/saved-view'
 import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { ComponentCanDeactivate } from 'src/app/guards/dirty-doc.guard'
+import { DocumentTitlePipe } from 'src/app/pipes/document-title.pipe'
 import {
   DjangoMessageLevel,
   DjangoMessagesService,
@@ -35,11 +47,26 @@ import { environment } from 'src/environments/environment'
 import { ProfileEditDialogComponent } from '../common/profile-edit-dialog/profile-edit-dialog.component'
 import { DocumentDetailComponent } from '../document-detail/document-detail.component'
 import { ComponentWithPermissions } from '../with-permissions/with-permissions.component'
+import { GlobalSearchComponent } from './global-search/global-search.component'
 
 @Component({
   selector: 'pngx-app-frame',
   templateUrl: './app-frame.component.html',
   styleUrls: ['./app-frame.component.scss'],
+  imports: [
+    GlobalSearchComponent,
+    DocumentTitlePipe,
+    IfPermissionsDirective,
+    RouterModule,
+    NgClass,
+    NgbDropdownModule,
+    NgbPopoverModule,
+    NgbCollapseModule,
+    NgbNavModule,
+    NgxBootstrapIconsModule,
+    DragDropModule,
+    TourNgBootstrapModule,
+  ],
 })
 export class AppFrameComponent
   extends ComponentWithPermissions

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

@@ -138,13 +138,13 @@ describe('GlobalSearchComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [GlobalSearchComponent],
       imports: [
         NgbModalModule,
         NgbDropdownModule,
         FormsModule,
         ReactiveFormsModule,
         NgxBootstrapIconsModule.pick(allIcons),
+        GlobalSearchComponent,
       ],
       providers: [
         provideHttpClient(withInterceptorsFromDi()),

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

@@ -1,3 +1,4 @@
+import { NgTemplateOutlet } from '@angular/common'
 import {
   Component,
   ElementRef,
@@ -6,8 +7,15 @@ import {
   ViewChild,
   ViewChildren,
 } from '@angular/core'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { Router } from '@angular/router'
-import { NgbDropdown, NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
+import {
+  NgbDropdown,
+  NgbDropdownModule,
+  NgbModal,
+  NgbModalRef,
+} from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { Subject, debounceTime, distinctUntilChanged, filter } from 'rxjs'
 import { DataType } from 'src/app/data/datatype'
 import {
@@ -20,6 +28,7 @@ import {
 } from 'src/app/data/filter-rule-type'
 import { ObjectWithId } from 'src/app/data/object-with-id'
 import { GlobalSearchType, SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
 import { DocumentListViewService } from 'src/app/services/document-list-view.service'
 import { HotKeyService } from 'src/app/services/hot-key.service'
 import {
@@ -50,6 +59,14 @@ import { WorkflowEditDialogComponent } from '../../common/edit-dialog/workflow-e
   selector: 'pngx-global-search',
   templateUrl: './global-search.component.html',
   styleUrl: './global-search.component.scss',
+  imports: [
+    CustomDatePipe,
+    FormsModule,
+    ReactiveFormsModule,
+    NgxBootstrapIconsModule,
+    NgbDropdownModule,
+    NgTemplateOutlet,
+  ],
 })
 export class GlobalSearchComponent implements OnInit {
   public DataType = DataType

src-ui/src/app/components/common/clearable-badge/clearable-badge.component.spec.ts

@@ -8,8 +8,10 @@ describe('ClearableBadgeComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [ClearableBadgeComponent],
-      imports: [NgxBootstrapIconsModule.pick(allIcons)],
+      imports: [
+        NgxBootstrapIconsModule.pick(allIcons),
+        ClearableBadgeComponent,
+      ],
     }).compileComponents()
 
     fixture = TestBed.createComponent(ClearableBadgeComponent)

src-ui/src/app/components/common/clearable-badge/clearable-badge.component.ts

@@ -1,9 +1,11 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 
 @Component({
   selector: 'pngx-clearable-badge',
   templateUrl: './clearable-badge.component.html',
   styleUrls: ['./clearable-badge.component.scss'],
+  imports: [NgxBootstrapIconsModule],
 })
 export class ClearableBadgeComponent {
   constructor() {}

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

@@ -10,8 +10,11 @@ describe('ConfirmButtonComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ConfirmButtonComponent],
-      imports: [NgbPopoverModule, NgxBootstrapIconsModule.pick(allIcons)],
+      imports: [
+        NgbPopoverModule,
+        NgxBootstrapIconsModule.pick(allIcons),
+        ConfirmButtonComponent,
+      ],
     }).compileComponents()
 
     fixture = TestBed.createComponent(ConfirmButtonComponent)

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

@@ -5,12 +5,14 @@ import {
   Output,
   ViewChild,
 } from '@angular/core'
-import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
+import { NgbPopover, NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 
 @Component({
   selector: 'pngx-confirm-button',
   templateUrl: './confirm-button.component.html',
   styleUrl: './confirm-button.component.scss',
+  imports: [NgbPopoverModule, NgxBootstrapIconsModule],
 })
 export class ConfirmButtonComponent {
   @Input()

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

@@ -11,9 +11,8 @@ describe('ConfirmDialogComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [ConfirmDialogComponent, SafeHtmlPipe],
       providers: [NgbActiveModal, SafeHtmlPipe],
-      imports: [],
+      imports: [ConfirmDialogComponent, SafeHtmlPipe],
     }).compileComponents()
 
     modal = TestBed.inject(NgbActiveModal)

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

@@ -1,12 +1,15 @@
+import { DecimalPipe } from '@angular/common'
 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'
 import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
 
 @Component({
   selector: 'pngx-confirm-dialog',
   templateUrl: './confirm-dialog.component.html',
   styleUrls: ['./confirm-dialog.component.scss'],
+  imports: [DecimalPipe, SafeHtmlPipe],
 })
 export class ConfirmDialogComponent extends LoadingComponentWithPermissions {
   constructor(public activeModal: NgbActiveModal) {

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

@@ -3,7 +3,6 @@ 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 { PdfViewerComponent } from 'ng2-pdf-viewer'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
 import { DeletePagesConfirmDialogComponent } from './delete-pages-confirm-dialog.component'
@@ -14,11 +13,12 @@ describe('DeletePagesConfirmDialogComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [DeletePagesConfirmDialogComponent, PdfViewerComponent],
+      declarations: [],
       imports: [
         NgxBootstrapIconsModule.pick(allIcons),
         FormsModule,
         ReactiveFormsModule,
+        DeletePagesConfirmDialogComponent,
       ],
       providers: [
         NgbActiveModal,

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

@@ -1,6 +1,12 @@
 import { Component, TemplateRef, ViewChild } from '@angular/core'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { PDFDocumentProxy, PdfViewerComponent } from 'ng2-pdf-viewer'
+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'
 
@@ -8,6 +14,7 @@ import { ConfirmDialogComponent } from '../confirm-dialog.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

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

@@ -15,11 +15,11 @@ describe('MergeConfirmDialogComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [MergeConfirmDialogComponent],
       imports: [
         NgxBootstrapIconsModule.pick(allIcons),
         ReactiveFormsModule,
         FormsModule,
+        MergeConfirmDialogComponent,
       ],
       providers: [
         NgbActiveModal,

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

@@ -1,6 +1,8 @@
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop'
 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'
 import { PermissionsService } from 'src/app/services/permissions.service'
@@ -11,6 +13,7 @@ import { ConfirmDialogComponent } from '../confirm-dialog.component'
   selector: 'pngx-merge-confirm-dialog',
   templateUrl: './merge-confirm-dialog.component.html',
   styleUrl: './merge-confirm-dialog.component.scss',
+  imports: [FormsModule, ReactiveFormsModule, NgxBootstrapIconsModule],
 })
 export class MergeConfirmDialogComponent
   extends ConfirmDialogComponent

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

@@ -12,8 +12,11 @@ describe('RotateConfirmDialogComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [RotateConfirmDialogComponent, SafeHtmlPipe],
-      imports: [NgxBootstrapIconsModule.pick(allIcons)],
+      imports: [
+        NgxBootstrapIconsModule.pick(allIcons),
+        RotateConfirmDialogComponent,
+        SafeHtmlPipe,
+      ],
       providers: [
         NgbActiveModal,
         SafeHtmlPipe,

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

@@ -1,5 +1,8 @@
+import { NgStyle } from '@angular/common'
 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'
 import { ConfirmDialogComponent } from '../confirm-dialog.component'
 
@@ -7,6 +10,7 @@ import { ConfirmDialogComponent } from '../confirm-dialog.component'
   selector: 'pngx-rotate-confirm-dialog',
   templateUrl: './rotate-confirm-dialog.component.html',
   styleUrl: './rotate-confirm-dialog.component.scss',
+  imports: [NgStyle, NgxBootstrapIconsModule, SafeHtmlPipe],
 })
 export class RotateConfirmDialogComponent extends ConfirmDialogComponent {
   public documentID: number

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

@@ -17,12 +17,12 @@ describe('SplitConfirmDialogComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [SplitConfirmDialogComponent],
       imports: [
         NgxBootstrapIconsModule.pick(allIcons),
         ReactiveFormsModule,
         FormsModule,
         PdfViewerModule,
+        SplitConfirmDialogComponent,
       ],
       providers: [
         NgbActiveModal,

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

@@ -1,6 +1,8 @@
 import { Component, OnInit } from '@angular/core'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { PDFDocumentProxy } from 'ng2-pdf-viewer'
+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'
@@ -10,6 +12,12 @@ import { ConfirmDialogComponent } from '../confirm-dialog.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

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

@@ -49,8 +49,7 @@ describe('CustomFieldDisplayComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [CustomFieldDisplayComponent],
-      imports: [],
+      imports: [CustomFieldDisplayComponent],
       providers: [
         DocumentService,
         provideHttpClient(withInterceptorsFromDi()),

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

@@ -1,9 +1,10 @@
-import { getLocaleCurrencyCode } from '@angular/common'
+import { CurrencyPipe, getLocaleCurrencyCode } from '@angular/common'
 import { Component, Inject, Input, LOCALE_ID, OnInit } from '@angular/core'
 import { takeUntil } from 'rxjs'
 import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
 import { DisplayField, Document } from 'src/app/data/document'
 import { Results } from 'src/app/data/results'
+import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
 import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
@@ -12,6 +13,7 @@ import { LoadingComponentWithPermissions } from '../../loading-component/loading
   selector: 'pngx-custom-field-display',
   templateUrl: './custom-field-display.component.html',
   styleUrl: './custom-field-display.component.scss',
+  imports: [CustomDatePipe, CurrencyPipe],
 })
 export class CustomFieldDisplayComponent
   extends LoadingComponentWithPermissions

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

@@ -19,6 +19,7 @@ import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { of } from 'rxjs'
 import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
 import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
+import { SettingsService } from 'src/app/services/settings.service'
 import { ToastService } from 'src/app/services/toast.service'
 import { CustomFieldEditDialogComponent } from '../edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
 import { SelectComponent } from '../input/select/select.component'
@@ -43,10 +44,10 @@ describe('CustomFieldsDropdownComponent', () => {
   let customFieldService: CustomFieldsService
   let toastService: ToastService
   let modalService: NgbModal
+  let settingsService: SettingsService
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [CustomFieldsDropdownComponent, SelectComponent],
       imports: [
         NgSelectModule,
         FormsModule,
@@ -54,6 +55,8 @@ describe('CustomFieldsDropdownComponent', () => {
         NgbModalModule,
         NgbDropdownModule,
         NgxBootstrapIconsModule.pick(allIcons),
+        CustomFieldsDropdownComponent,
+        SelectComponent,
       ],
       providers: [
         provideHttpClient(withInterceptorsFromDi()),
@@ -70,6 +73,8 @@ describe('CustomFieldsDropdownComponent', () => {
         results: fields.concat([]),
       })
     )
+    settingsService = TestBed.inject(SettingsService)
+    settingsService.currentUser = { id: 1, username: 'test' }
     fixture = TestBed.createComponent(CustomFieldsDropdownComponent)
     component = fixture.componentInstance
     fixture.detectChanges()

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

@@ -8,7 +8,9 @@ import {
   ViewChild,
   ViewChildren,
 } from '@angular/core'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { NgbDropdownModule, NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { first, takeUntil } from 'rxjs'
 import { CustomField, DATA_TYPE_LABELS } from 'src/app/data/custom-field'
 import { CustomFieldInstance } from 'src/app/data/custom-field-instance'
@@ -26,6 +28,12 @@ import { CustomFieldEditDialogComponent } from '../edit-dialog/custom-field-edit
   selector: 'pngx-custom-fields-dropdown',
   templateUrl: './custom-fields-dropdown.component.html',
   styleUrls: ['./custom-fields-dropdown.component.scss'],
+  imports: [
+    NgbDropdownModule,
+    NgxBootstrapIconsModule,
+    FormsModule,
+    ReactiveFormsModule,
+  ],
 })
 export class CustomFieldsDropdownComponent extends LoadingComponentWithPermissions {
   @Input()

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

@@ -67,7 +67,9 @@
       (mousedown)="$event.stopImmediatePropagation()"
     ></ng-select>
     <select class="w-25 form-select" [(ngModel)]="atom.operator" [disabled]="disabled">
-      <option *ngFor="let operator of getOperatorsForField(atom.field)" [ngValue]="operator.value">{{operator.label}}</option>
+      @for (operator of getOperatorsForField(atom.field); track operator.label) {
+        <option [ngValue]="operator.value">{{operator.label}}</option>
+      }
     </select>
     @switch (atom.operator) {
       @case (CustomFieldQueryOperator.Exists) {

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

@@ -55,13 +55,13 @@ describe('CustomFieldsQueryDropdownComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [CustomFieldsQueryDropdownComponent],
       imports: [
         NgbDropdownModule,
         NgxBootstrapIconsModule.pick(allIcons),
         NgSelectModule,
         FormsModule,
         ReactiveFormsModule,
+        CustomFieldsQueryDropdownComponent,
       ],
       providers: [
         provideHttpClient(withInterceptorsFromDi()),

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

@@ -1,3 +1,4 @@
+import { NgTemplateOutlet } from '@angular/common'
 import {
   Component,
   EventEmitter,
@@ -7,8 +8,10 @@ import {
   ViewChild,
   ViewChildren,
 } from '@angular/core'
-import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
-import { NgSelectComponent } from '@ng-select/ng-select'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { NgbDropdown, NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'
+import { NgSelectComponent, NgSelectModule } from '@ng-select/ng-select'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { first, Subject, takeUntil } from 'rxjs'
 import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
 import {
@@ -29,6 +32,7 @@ import {
 } from 'src/app/utils/custom-field-query-element'
 import { popperOptionsReenablePreventOverflow } from 'src/app/utils/popper-options'
 import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
+import { ClearableBadgeComponent } from '../clearable-badge/clearable-badge.component'
 
 export class CustomFieldQueriesModel {
   public queries: CustomFieldQueryElement[] = []
@@ -156,6 +160,15 @@ export class CustomFieldQueriesModel {
   selector: 'pngx-custom-fields-query-dropdown',
   templateUrl: './custom-fields-query-dropdown.component.html',
   styleUrls: ['./custom-fields-query-dropdown.component.scss'],
+  imports: [
+    ClearableBadgeComponent,
+    FormsModule,
+    ReactiveFormsModule,
+    NgTemplateOutlet,
+    NgSelectModule,
+    NgxBootstrapIconsModule,
+    NgbDropdownModule,
+  ],
 })
 export class CustomFieldsQueryDropdownComponent extends LoadingComponentWithPermissions {
   public CustomFieldQueryComponentType = CustomFieldQueryElementType

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

@@ -27,16 +27,14 @@ describe('DatesDropdownComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [
-        DatesDropdownComponent,
-        ClearableBadgeComponent,
-        CustomDatePipe,
-      ],
       imports: [
         NgbModule,
         FormsModule,
         ReactiveFormsModule,
         NgxBootstrapIconsModule.pick(allIcons),
+        DatesDropdownComponent,
+        ClearableBadgeComponent,
+        CustomDatePipe,
       ],
       providers: [
         SettingsService,

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

@@ -1,3 +1,4 @@
+import { NgClass } from '@angular/common'
 import {
   Component,
   EventEmitter,
@@ -6,12 +7,20 @@ import {
   OnInit,
   Output,
 } from '@angular/core'
-import { NgbDateAdapter } from '@ng-bootstrap/ng-bootstrap'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import {
+  NgbDateAdapter,
+  NgbDatepickerModule,
+  NgbDropdownModule,
+} from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { Subject, Subscription } from 'rxjs'
 import { debounceTime } from 'rxjs/operators'
+import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
 import { SettingsService } from 'src/app/services/settings.service'
 import { ISODateAdapter } from 'src/app/utils/ngb-iso-date-adapter'
 import { popperOptionsReenablePreventOverflow } from 'src/app/utils/popper-options'
+import { ClearableBadgeComponent } from '../clearable-badge/clearable-badge.component'
 
 export interface DateSelection {
   createdBefore?: string
@@ -34,6 +43,16 @@ export enum RelativeDate {
   templateUrl: './dates-dropdown.component.html',
   styleUrls: ['./dates-dropdown.component.scss'],
   providers: [{ provide: NgbDateAdapter, useClass: ISODateAdapter }],
+  imports: [
+    ClearableBadgeComponent,
+    CustomDatePipe,
+    NgxBootstrapIconsModule,
+    NgbDatepickerModule,
+    NgbDropdownModule,
+    FormsModule,
+    ReactiveFormsModule,
+    NgClass,
+  ],
 })
 export class DatesDropdownComponent implements OnInit, OnDestroy {
   public popperOptions = popperOptionsReenablePreventOverflow

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

@@ -20,7 +20,11 @@ describe('CorrespondentEditDialogComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        NgSelectModule,
+        NgbModule,
         CorrespondentEditDialogComponent,
         IfPermissionsDirective,
         IfOwnerDirective,
@@ -28,7 +32,6 @@ describe('CorrespondentEditDialogComponent', () => {
         TextComponent,
         PermissionsFormComponent,
       ],
-      imports: [FormsModule, ReactiveFormsModule, NgSelectModule, NgbModule],
       providers: [
         NgbActiveModal,
         provideHttpClient(withInterceptorsFromDi()),

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

@@ -1,17 +1,34 @@
 import { Component } from '@angular/core'
-import { FormControl, FormGroup } from '@angular/forms'
+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'
+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 { PermissionsFormComponent } from '../../input/permissions/permissions-form/permissions-form.component'
+import { SelectComponent } from '../../input/select/select.component'
+import { TextComponent } from '../../input/text/text.component'
 
 @Component({
   selector: 'pngx-correspondent-edit-dialog',
   templateUrl: './correspondent-edit-dialog.component.html',
   styleUrls: ['./correspondent-edit-dialog.component.scss'],
+  imports: [
+    SelectComponent,
+    PermissionsFormComponent,
+    TextComponent,
+    IfOwnerDirective,
+    FormsModule,
+    ReactiveFormsModule,
+  ],
 })
 export class CorrespondentEditDialogComponent extends EditDialogComponent<Correspondent> {
   constructor(

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

@@ -24,20 +24,18 @@ describe('CustomFieldEditDialogComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [
-        CustomFieldEditDialogComponent,
-        IfPermissionsDirective,
-        IfOwnerDirective,
-        SelectComponent,
-        TextComponent,
-        SafeHtmlPipe,
-      ],
       imports: [
         FormsModule,
         ReactiveFormsModule,
         NgSelectModule,
         NgbModule,
         NgxBootstrapIconsModule.pick(allIcons),
+        CustomFieldEditDialogComponent,
+        IfPermissionsDirective,
+        IfOwnerDirective,
+        SelectComponent,
+        TextComponent,
+        SafeHtmlPipe,
       ],
       providers: [
         NgbActiveModal,

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

@@ -6,8 +6,15 @@ import {
   QueryList,
   ViewChildren,
 } from '@angular/core'
-import { FormArray, FormControl, FormGroup } from '@angular/forms'
+import {
+  FormArray,
+  FormControl,
+  FormGroup,
+  FormsModule,
+  ReactiveFormsModule,
+} from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { takeUntil } from 'rxjs'
 import {
   CustomField,
@@ -17,12 +24,21 @@ import {
 import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
 import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
+import { SelectComponent } from '../../input/select/select.component'
+import { TextComponent } from '../../input/text/text.component'
 import { EditDialogComponent, EditDialogMode } from '../edit-dialog.component'
 
 @Component({
   selector: 'pngx-custom-field-edit-dialog',
   templateUrl: './custom-field-edit-dialog.component.html',
   styleUrls: ['./custom-field-edit-dialog.component.scss'],
+  imports: [
+    SelectComponent,
+    TextComponent,
+    FormsModule,
+    ReactiveFormsModule,
+    NgxBootstrapIconsModule,
+  ],
 })
 export class CustomFieldEditDialogComponent
   extends EditDialogComponent<CustomField>

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

@@ -20,7 +20,11 @@ describe('DocumentTypeEditDialogComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        NgSelectModule,
+        NgbModule,
         DocumentTypeEditDialogComponent,
         IfPermissionsDirective,
         IfOwnerDirective,
@@ -28,7 +32,6 @@ describe('DocumentTypeEditDialogComponent', () => {
         TextComponent,
         PermissionsFormComponent,
       ],
-      imports: [FormsModule, ReactiveFormsModule, NgSelectModule, NgbModule],
       providers: [
         NgbActiveModal,
         provideHttpClient(withInterceptorsFromDi()),

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

@@ -1,17 +1,34 @@
 import { Component } from '@angular/core'
-import { FormControl, FormGroup } from '@angular/forms'
+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'
+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 { PermissionsFormComponent } from '../../input/permissions/permissions-form/permissions-form.component'
+import { SelectComponent } from '../../input/select/select.component'
+import { TextComponent } from '../../input/text/text.component'
 
 @Component({
   selector: 'pngx-document-type-edit-dialog',
   templateUrl: './document-type-edit-dialog.component.html',
   styleUrls: ['./document-type-edit-dialog.component.scss'],
+  imports: [
+    SelectComponent,
+    PermissionsFormComponent,
+    TextComponent,
+    IfOwnerDirective,
+    FormsModule,
+    ReactiveFormsModule,
+  ],
 })
 export class DocumentTypeEditDialogComponent extends EditDialogComponent<DocumentType> {
   constructor(

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

@@ -38,6 +38,7 @@ import { EditDialogComponent, EditDialogMode } from './edit-dialog.component'
       <h4 class="modal-title" id="modal-basic-title">{{ getTitle() }}</h4>
     </div>
   `,
+  imports: [FormsModule, ReactiveFormsModule],
 })
 class TestComponent extends EditDialogComponent<Tag> {
   constructor(
@@ -96,8 +97,7 @@ describe('EditDialogComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [TestComponent],
-      imports: [FormsModule, ReactiveFormsModule],
+      imports: [FormsModule, ReactiveFormsModule, TestComponent],
       providers: [
         NgbActiveModal,
         {

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

@@ -22,7 +22,12 @@ describe('GroupEditDialogComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        NgSelectModule,
+        NgbModule,
+        NgxBootstrapIconsModule.pick(allIcons),
         GroupEditDialogComponent,
         IfPermissionsDirective,
         IfOwnerDirective,
@@ -31,13 +36,6 @@ describe('GroupEditDialogComponent', () => {
         PermissionsFormComponent,
         PermissionsSelectComponent,
       ],
-      imports: [
-        FormsModule,
-        ReactiveFormsModule,
-        NgSelectModule,
-        NgbModule,
-        NgxBootstrapIconsModule.pick(allIcons),
-      ],
       providers: [
         NgbActiveModal,
         provideHttpClient(withInterceptorsFromDi()),

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

@@ -1,16 +1,29 @@
 import { Component } from '@angular/core'
-import { FormControl, FormGroup } from '@angular/forms'
+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'
 import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
+import { TextComponent } from '../../input/text/text.component'
+import { PermissionsSelectComponent } from '../../permissions-select/permissions-select.component'
 
 @Component({
   selector: 'pngx-group-edit-dialog',
   templateUrl: './group-edit-dialog.component.html',
   styleUrls: ['./group-edit-dialog.component.scss'],
+  imports: [
+    PermissionsSelectComponent,
+    TextComponent,
+    FormsModule,
+    ReactiveFormsModule,
+  ],
 })
 export class GroupEditDialogComponent extends EditDialogComponent<Group> {
   constructor(

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

@@ -33,7 +33,11 @@ describe('MailAccountEditDialogComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        NgSelectModule,
+        NgbModule,
         MailAccountEditDialogComponent,
         IfPermissionsDirective,
         IfOwnerDirective,
@@ -43,7 +47,6 @@ describe('MailAccountEditDialogComponent', () => {
         PermissionsFormComponent,
         PasswordComponent,
       ],
-      imports: [FormsModule, ReactiveFormsModule, NgSelectModule, NgbModule],
       providers: [
         NgbActiveModal,
         provideHttpClient(withInterceptorsFromDi()),

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

@@ -1,11 +1,24 @@
 import { Component, ViewChild } from '@angular/core'
-import { FormControl, FormGroup } from '@angular/forms'
-import { NgbActiveModal, NgbAlert } from '@ng-bootstrap/ng-bootstrap'
+import {
+  FormControl,
+  FormGroup,
+  FormsModule,
+  ReactiveFormsModule,
+} from '@angular/forms'
+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'
 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 { PasswordComponent } from '../../input/password/password.component'
+import { SelectComponent } from '../../input/select/select.component'
+import { TextComponent } from '../../input/text/text.component'
 
 const IMAP_SECURITY_OPTIONS = [
   { id: IMAPSecurity.None, name: $localize`No encryption` },
@@ -17,6 +30,15 @@ const IMAP_SECURITY_OPTIONS = [
   selector: 'pngx-mail-account-edit-dialog',
   templateUrl: './mail-account-edit-dialog.component.html',
   styleUrls: ['./mail-account-edit-dialog.component.scss'],
+  imports: [
+    TextComponent,
+    CheckComponent,
+    PasswordComponent,
+    SelectComponent,
+    FormsModule,
+    ReactiveFormsModule,
+    NgbAlertModule,
+  ],
 })
 export class MailAccountEditDialogComponent extends EditDialogComponent<MailAccount> {
   testActive: boolean = false

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

@@ -33,7 +33,11 @@ describe('MailRuleEditDialogComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        NgSelectModule,
+        NgbModule,
         MailRuleEditDialogComponent,
         IfPermissionsDirective,
         IfOwnerDirective,
@@ -46,7 +50,6 @@ describe('MailRuleEditDialogComponent', () => {
         CheckComponent,
         SwitchComponent,
       ],
-      imports: [FormsModule, ReactiveFormsModule, NgSelectModule, NgbModule],
       providers: [
         NgbActiveModal,
         {

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

@@ -1,5 +1,10 @@
 import { Component } from '@angular/core'
-import { FormControl, FormGroup } from '@angular/forms'
+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'
@@ -20,6 +25,12 @@ import { MailAccountService } from 'src/app/services/rest/mail-account.service'
 import { MailRuleService } from 'src/app/services/rest/mail-rule.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 { NumberComponent } from '../../input/number/number.component'
+import { SelectComponent } from '../../input/select/select.component'
+import { SwitchComponent } from '../../input/switch/switch.component'
+import { TagsComponent } from '../../input/tags/tags.component'
+import { TextComponent } from '../../input/text/text.component'
 
 const ATTACHMENT_TYPE_OPTIONS = [
   {
@@ -108,6 +119,16 @@ const METADATA_CORRESPONDENT_OPTIONS = [
   selector: 'pngx-mail-rule-edit-dialog',
   templateUrl: './mail-rule-edit-dialog.component.html',
   styleUrls: ['./mail-rule-edit-dialog.component.scss'],
+  imports: [
+    SelectComponent,
+    TagsComponent,
+    CheckComponent,
+    TextComponent,
+    NumberComponent,
+    SwitchComponent,
+    FormsModule,
+    ReactiveFormsModule,
+  ],
 })
 export class MailRuleEditDialogComponent extends EditDialogComponent<MailRule> {
   accounts: MailAccount[]

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

@@ -1,26 +1,13 @@
 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 { By } from '@angular/platform-browser'
-import {
-  NgbAccordionButton,
-  NgbActiveModal,
-  NgbModule,
-} from '@ng-bootstrap/ng-bootstrap'
-import { NgSelectModule } from '@ng-select/ng-select'
+import { NgbAccordionButton, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { of, throwError } from 'rxjs'
 import { FILTER_TITLE } from 'src/app/data/filter-rule-type'
-import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
-import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
-import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { StoragePathService } from 'src/app/services/rest/storage-path.service'
 import { SettingsService } from 'src/app/services/settings.service'
-import { PermissionsFormComponent } from '../../input/permissions/permissions-form/permissions-form.component'
-import { SelectComponent } from '../../input/select/select.component'
-import { TextComponent } from '../../input/text/text.component'
-import { TextAreaComponent } from '../../input/textarea/textarea.component'
 import { EditDialogMode } from '../edit-dialog.component'
 import { StoragePathEditDialogComponent } from './storage-path-edit-dialog.component'
 
@@ -32,17 +19,7 @@ describe('StoragePathEditDialogComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [
-        StoragePathEditDialogComponent,
-        IfPermissionsDirective,
-        IfOwnerDirective,
-        SelectComponent,
-        TextComponent,
-        TextAreaComponent,
-        PermissionsFormComponent,
-        SafeHtmlPipe,
-      ],
-      imports: [FormsModule, ReactiveFormsModule, NgSelectModule, NgbModule],
+      imports: [],
       providers: [
         NgbActiveModal,
         provideHttpClient(withInterceptorsFromDi()),

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

@@ -1,6 +1,13 @@
+import { AsyncPipe, NgTemplateOutlet } from '@angular/common'
 import { Component, OnDestroy } from '@angular/core'
-import { FormControl, FormGroup } from '@angular/forms'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import {
+  FormControl,
+  FormGroup,
+  FormsModule,
+  ReactiveFormsModule,
+} from '@angular/forms'
+import { NgbAccordionModule, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgSelectComponent } from '@ng-select/ng-select'
 import {
   Observable,
   Subject,
@@ -19,15 +26,35 @@ import { Document } from 'src/app/data/document'
 import { FILTER_TITLE } from 'src/app/data/filter-rule-type'
 import { DEFAULT_MATCHING_ALGORITHM } from 'src/app/data/matching-model'
 import { StoragePath } from 'src/app/data/storage-path'
+import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { StoragePathService } from 'src/app/services/rest/storage-path.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'
+import { TextAreaComponent } from '../../input/textarea/textarea.component'
 
 @Component({
   selector: 'pngx-storage-path-edit-dialog',
   templateUrl: './storage-path-edit-dialog.component.html',
   styleUrls: ['./storage-path-edit-dialog.component.scss'],
+  imports: [
+    SelectComponent,
+    TextAreaComponent,
+    TextComponent,
+    CheckComponent,
+    PermissionsFormComponent,
+    IfOwnerDirective,
+    AsyncPipe,
+    NgTemplateOutlet,
+    FormsModule,
+    ReactiveFormsModule,
+    NgbAccordionModule,
+    NgSelectComponent,
+  ],
 })
 export class StoragePathEditDialogComponent
   extends EditDialogComponent<StoragePath>

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

@@ -23,7 +23,12 @@ describe('TagEditDialogComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        NgSelectModule,
+        NgbModule,
+        NgxBootstrapIconsModule.pick(allIcons),
         TagEditDialogComponent,
         IfPermissionsDirective,
         IfOwnerDirective,
@@ -33,13 +38,6 @@ describe('TagEditDialogComponent', () => {
         ColorComponent,
         CheckComponent,
       ],
-      imports: [
-        FormsModule,
-        ReactiveFormsModule,
-        NgSelectModule,
-        NgbModule,
-        NgxBootstrapIconsModule.pick(allIcons),
-      ],
       providers: [
         NgbActiveModal,
         SettingsService,

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

@@ -1,18 +1,39 @@
 import { Component } from '@angular/core'
-import { FormControl, FormGroup } from '@angular/forms'
+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'
+import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
 import { TagService } from 'src/app/services/rest/tag.service'
 import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
 import { randomColor } from 'src/app/utils/color'
+import { CheckComponent } from '../../input/check/check.component'
+import { ColorComponent } from '../../input/color/color.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'
 
 @Component({
   selector: 'pngx-tag-edit-dialog',
   templateUrl: './tag-edit-dialog.component.html',
   styleUrls: ['./tag-edit-dialog.component.scss'],
+  imports: [
+    SelectComponent,
+    CheckComponent,
+    ColorComponent,
+    TextComponent,
+    IfOwnerDirective,
+    PermissionsFormComponent,
+    FormsModule,
+    ReactiveFormsModule,
+  ],
 })
 export class TagEditDialogComponent extends EditDialogComponent<Tag> {
   constructor(

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

@@ -34,7 +34,12 @@ describe('UserEditDialogComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        NgSelectModule,
+        NgbModule,
+        NgxBootstrapIconsModule.pick(allIcons),
         UserEditDialogComponent,
         IfPermissionsDirective,
         IfOwnerDirective,
@@ -44,13 +49,6 @@ describe('UserEditDialogComponent', () => {
         PermissionsFormComponent,
         PermissionsSelectComponent,
       ],
-      imports: [
-        FormsModule,
-        ReactiveFormsModule,
-        NgSelectModule,
-        NgbModule,
-        NgxBootstrapIconsModule.pick(allIcons),
-      ],
       providers: [
         NgbActiveModal,
         {

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

@@ -1,5 +1,10 @@
 import { Component, OnInit } from '@angular/core'
-import { FormControl, FormGroup } from '@angular/forms'
+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'
@@ -10,11 +15,23 @@ import { GroupService } from 'src/app/services/rest/group.service'
 import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
 import { ToastService } from 'src/app/services/toast.service'
+import { PasswordComponent } from '../../input/password/password.component'
+import { SelectComponent } from '../../input/select/select.component'
+import { TextComponent } from '../../input/text/text.component'
+import { PermissionsSelectComponent } from '../../permissions-select/permissions-select.component'
 
 @Component({
   selector: 'pngx-user-edit-dialog',
   templateUrl: './user-edit-dialog.component.html',
   styleUrls: ['./user-edit-dialog.component.scss'],
+  imports: [
+    PermissionsSelectComponent,
+    SelectComponent,
+    TextComponent,
+    PasswordComponent,
+    FormsModule,
+    ReactiveFormsModule,
+  ],
 })
 export class UserEditDialogComponent
   extends EditDialogComponent<User>

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

@@ -77,7 +77,11 @@ describe('WorkflowEditDialogComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        NgSelectModule,
+        NgbModule,
         WorkflowEditDialogComponent,
         IfPermissionsDirective,
         IfOwnerDirective,
@@ -91,7 +95,6 @@ describe('WorkflowEditDialogComponent', () => {
         SafeHtmlPipe,
         ConfirmButtonComponent,
       ],
-      imports: [FormsModule, ReactiveFormsModule, NgSelectModule, NgbModule],
       providers: [
         NgbActiveModal,
         {

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

@@ -1,7 +1,18 @@
-import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop'
+import {
+  CdkDragDrop,
+  DragDropModule,
+  moveItemInArray,
+} from '@angular/cdk/drag-drop'
+import { NgTemplateOutlet } from '@angular/common'
 import { Component, OnInit } from '@angular/core'
-import { FormArray, FormControl, FormGroup } from '@angular/forms'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import {
+  FormArray,
+  FormControl,
+  FormGroup,
+  FormsModule,
+  ReactiveFormsModule,
+} from '@angular/forms'
+import { NgbAccordionModule, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { first } from 'rxjs'
 import { Correspondent } from 'src/app/data/correspondent'
 import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
@@ -33,6 +44,15 @@ import { StoragePathService } from 'src/app/services/rest/storage-path.service'
 import { UserService } from 'src/app/services/rest/user.service'
 import { WorkflowService } from 'src/app/services/rest/workflow.service'
 import { SettingsService } from 'src/app/services/settings.service'
+import { ConfirmButtonComponent } from '../../confirm-button/confirm-button.component'
+import { NumberComponent } from '../../input/number/number.component'
+import { PermissionsGroupComponent } from '../../input/permissions/permissions-group/permissions-group.component'
+import { PermissionsUserComponent } from '../../input/permissions/permissions-user/permissions-user.component'
+import { SelectComponent } from '../../input/select/select.component'
+import { SwitchComponent } from '../../input/switch/switch.component'
+import { TagsComponent } from '../../input/tags/tags.component'
+import { TextComponent } from '../../input/text/text.component'
+import { TextAreaComponent } from '../../input/textarea/textarea.component'
 import { EditDialogComponent } from '../edit-dialog.component'
 
 export const DOCUMENT_SOURCE_OPTIONS = [
@@ -115,6 +135,22 @@ const TRIGGER_MATCHING_ALGORITHMS = MATCHING_ALGORITHMS.filter(
   selector: 'pngx-workflow-edit-dialog',
   templateUrl: './workflow-edit-dialog.component.html',
   styleUrls: ['./workflow-edit-dialog.component.scss'],
+  imports: [
+    SwitchComponent,
+    NumberComponent,
+    TextComponent,
+    SelectComponent,
+    TextAreaComponent,
+    TagsComponent,
+    PermissionsGroupComponent,
+    PermissionsUserComponent,
+    ConfirmButtonComponent,
+    FormsModule,
+    ReactiveFormsModule,
+    NgbAccordionModule,
+    NgTemplateOutlet,
+    DragDropModule,
+  ],
 })
 export class WorkflowEditDialogComponent
   extends EditDialogComponent<Workflow>

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

@@ -4,8 +4,6 @@ import {
   fakeAsync,
   tick,
 } from '@angular/core/testing'
-import { FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import {
   DEFAULT_MATCHING_ALGORITHM,
@@ -14,8 +12,6 @@ import {
 import { Tag } from 'src/app/data/tag'
 import { FilterPipe } from 'src/app/pipes/filter.pipe'
 import { HotKeyService } from 'src/app/services/hot-key.service'
-import { ClearableBadgeComponent } from '../clearable-badge/clearable-badge.component'
-import { TagComponent } from '../tag/tag.component'
 import {
   ChangedItems,
   FilterableDropdownComponent,
@@ -23,10 +19,7 @@ import {
   Intersection,
   LogicalOperator,
 } from './filterable-dropdown.component'
-import {
-  ToggleableDropdownButtonComponent,
-  ToggleableItemState,
-} from './toggleable-dropdown-button/toggleable-dropdown-button.component'
+import { ToggleableItemState } from './toggleable-dropdown-button/toggleable-dropdown-button.component'
 
 const items: Tag[] = [
   {
@@ -58,20 +51,8 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [
-        FilterableDropdownComponent,
-        FilterPipe,
-        ToggleableDropdownButtonComponent,
-        TagComponent,
-        ClearableBadgeComponent,
-      ],
       providers: [FilterPipe],
-      imports: [
-        NgbModule,
-        FormsModule,
-        ReactiveFormsModule,
-        NgxBootstrapIconsModule.pick(allIcons),
-      ],
+      imports: [NgxBootstrapIconsModule.pick(allIcons)],
     }).compileComponents()
 
     hotkeyService = TestBed.inject(HotKeyService)

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

@@ -1,3 +1,4 @@
+import { NgClass } from '@angular/common'
 import {
   Component,
   ElementRef,
@@ -7,7 +8,9 @@ import {
   Output,
   ViewChild,
 } from '@angular/core'
-import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { NgbDropdown, NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { Subject, filter, takeUntil } from 'rxjs'
 import { MatchingModel } from 'src/app/data/matching-model'
 import { ObjectWithPermissions } from 'src/app/data/object-with-permissions'
@@ -16,7 +19,11 @@ import { HotKeyService } from 'src/app/services/hot-key.service'
 import { SelectionDataItem } from 'src/app/services/rest/document.service'
 import { popperOptionsReenablePreventOverflow } from 'src/app/utils/popper-options'
 import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
-import { ToggleableItemState } from './toggleable-dropdown-button/toggleable-dropdown-button.component'
+import { ClearableBadgeComponent } from '../clearable-badge/clearable-badge.component'
+import {
+  ToggleableDropdownButtonComponent,
+  ToggleableItemState,
+} from './toggleable-dropdown-button/toggleable-dropdown-button.component'
 
 export interface ChangedItems {
   itemsToAdd: MatchingModel[]
@@ -352,6 +359,16 @@ export class FilterableDropdownSelectionModel {
   selector: 'pngx-filterable-dropdown',
   templateUrl: './filterable-dropdown.component.html',
   styleUrls: ['./filterable-dropdown.component.scss'],
+  imports: [
+    ClearableBadgeComponent,
+    ToggleableDropdownButtonComponent,
+    FilterPipe,
+    FormsModule,
+    ReactiveFormsModule,
+    NgxBootstrapIconsModule,
+    NgbDropdownModule,
+    NgClass,
+  ],
 })
 export class FilterableDropdownComponent
   extends LoadingComponentWithPermissions

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

@@ -12,9 +12,8 @@ describe('ToggleableDropdownButtonComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [ToggleableDropdownButtonComponent, TagComponent],
       providers: [],
-      imports: [],
+      imports: [ToggleableDropdownButtonComponent, TagComponent],
     }).compileComponents()
 
     fixture = TestBed.createComponent(ToggleableDropdownButtonComponent)

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

@@ -1,5 +1,7 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { MatchingModel } from 'src/app/data/matching-model'
+import { TagComponent } from '../../tag/tag.component'
 
 export enum ToggleableItemState {
   NotSelected = 0,
@@ -12,6 +14,7 @@ export enum ToggleableItemState {
   selector: 'pngx-toggleable-dropdown-button',
   templateUrl: './toggleable-dropdown-button.component.html',
   styleUrls: ['./toggleable-dropdown-button.component.scss'],
+  imports: [TagComponent, NgxBootstrapIconsModule],
 })
 export class ToggleableDropdownButtonComponent {
   @Input()

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

@@ -9,7 +9,7 @@ describe('HotkeyDialogComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [HotkeyDialogComponent],
+      imports: [HotkeyDialogComponent],
       providers: [NgbActiveModal],
     }).compileComponents()
 

src-ui/src/app/components/common/input/abstract-input.spec.ts

@@ -18,6 +18,7 @@ import { AbstractInputComponent } from './abstract-input'
       />
     </div>
   `,
+  imports: [FormsModule, ReactiveFormsModule],
 })
 class TestComponent extends AbstractInputComponent<string> {
   constructor() {
@@ -31,9 +32,8 @@ describe(`AbstractInputComponent`, () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [TestComponent],
       providers: [],
-      imports: [FormsModule, ReactiveFormsModule],
+      imports: [FormsModule, ReactiveFormsModule, TestComponent],
     }).compileComponents()
 
     fixture = TestBed.createComponent(TestComponent)

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

@@ -13,9 +13,8 @@ describe('CheckComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [CheckComponent],
       providers: [],
-      imports: [FormsModule, ReactiveFormsModule],
+      imports: [FormsModule, ReactiveFormsModule, CheckComponent],
     }).compileComponents()
 
     fixture = TestBed.createComponent(CheckComponent)

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

@@ -1,5 +1,10 @@
+import { NgClass } from '@angular/common'
 import { Component, forwardRef } from '@angular/core'
-import { NG_VALUE_ACCESSOR } from '@angular/forms'
+import {
+  FormsModule,
+  NG_VALUE_ACCESSOR,
+  ReactiveFormsModule,
+} from '@angular/forms'
 import { AbstractInputComponent } from '../abstract-input'
 
 @Component({
@@ -13,6 +18,7 @@ import { AbstractInputComponent } from '../abstract-input'
   selector: 'pngx-input-check',
   templateUrl: './check.component.html',
   styleUrls: ['./check.component.scss'],
+  imports: [FormsModule, ReactiveFormsModule, NgClass],
 })
 export class CheckComponent extends AbstractInputComponent<boolean> {
   constructor() {

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

@@ -16,7 +16,6 @@ describe('ColorComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [ColorComponent],
       providers: [],
       imports: [
         FormsModule,
@@ -24,6 +23,7 @@ describe('ColorComponent', () => {
         NgbPopoverModule,
         ColorSliderModule,
         NgxBootstrapIconsModule.pick(allIcons),
+        ColorComponent,
       ],
     }).compileComponents()
 

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

@@ -1,5 +1,12 @@
 import { Component, forwardRef } from '@angular/core'
-import { NG_VALUE_ACCESSOR } from '@angular/forms'
+import {
+  FormsModule,
+  NG_VALUE_ACCESSOR,
+  ReactiveFormsModule,
+} from '@angular/forms'
+import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { ColorSliderModule } from 'ngx-color/slider'
 import { randomColor } from 'src/app/utils/color'
 import { AbstractInputComponent } from '../abstract-input'
 
@@ -14,6 +21,13 @@ import { AbstractInputComponent } from '../abstract-input'
   selector: 'pngx-input-color',
   templateUrl: './color.component.html',
   styleUrls: ['./color.component.scss'],
+  imports: [
+    NgxBootstrapIconsModule,
+    NgbPopoverModule,
+    FormsModule,
+    ReactiveFormsModule,
+    ColorSliderModule,
+  ],
 })
 export class ColorComponent extends AbstractInputComponent<string> {
   constructor() {

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

@@ -1,17 +1,11 @@
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
-import {
-  FormsModule,
-  NG_VALUE_ACCESSOR,
-  ReactiveFormsModule,
-} from '@angular/forms'
-import { RouterTestingModule } from '@angular/router/testing'
-import {
-  NgbDateParserFormatter,
-  NgbDatepickerModule,
-} from '@ng-bootstrap/ng-bootstrap'
+import { NG_VALUE_ACCESSOR } from '@angular/forms'
+import { RouterModule } from '@angular/router'
+import { NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { routes } from 'src/app/app-routing.module'
 import { LocalizedDateParserFormatter } from 'src/app/utils/ngb-date-parser-formatter'
 import { DateComponent } from './date.component'
 
@@ -22,13 +16,9 @@ describe('DateComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [DateComponent],
       imports: [
-        FormsModule,
-        ReactiveFormsModule,
-        NgbDatepickerModule,
-        RouterTestingModule,
         NgxBootstrapIconsModule.pick(allIcons),
+        RouterModule.forRoot(routes),
       ],
       providers: [
         {

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

@@ -6,12 +6,19 @@ import {
   OnInit,
   Output,
 } from '@angular/core'
-import { NG_VALUE_ACCESSOR } from '@angular/forms'
+import {
+  FormsModule,
+  NG_VALUE_ACCESSOR,
+  ReactiveFormsModule,
+} from '@angular/forms'
+import { RouterModule } from '@angular/router'
 import {
   NgbDateAdapter,
   NgbDateParserFormatter,
+  NgbDatepickerModule,
   NgbDateStruct,
 } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { SettingsService } from 'src/app/services/settings.service'
 import { AbstractInputComponent } from '../abstract-input'
 
@@ -26,6 +33,13 @@ import { AbstractInputComponent } from '../abstract-input'
   selector: 'pngx-input-date',
   templateUrl: './date.component.html',
   styleUrls: ['./date.component.scss'],
+  imports: [
+    NgbDatepickerModule,
+    FormsModule,
+    ReactiveFormsModule,
+    RouterModule,
+    NgxBootstrapIconsModule,
+  ],
 })
 export class DateComponent
   extends AbstractInputComponent<string>

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

@@ -40,7 +40,9 @@
     (change)="onChange(selectedDocuments)">
     <ng-template ng-label-tmp let-document="item">
       <div class="d-flex align-items-center">
-        <button class="btn p-0 lh-1" *ngIf="!disabled" (click)="unselect(document)" title="Remove link" i18n-title><i-bs name="x"></i-bs></button>
+        @if (!disabled) {
+          <button class="btn p-0 lh-1" (click)="unselect(document)" title="Remove link" i18n-title><i-bs name="x"></i-bs></button>
+        }
         @if (document.title) {
           <a routerLink="/documents/{{document.id}}" class="badge bg-light text-primary" (mousedown)="$event.stopImmediatePropagation();" title="Open link" i18n-title>
             <i-bs width="0.9em" height="0.9em" name="file-text"></i-bs>&nbsp;<span>{{document.title}}</span>

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

@@ -1,12 +1,7 @@
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
-import {
-  FormsModule,
-  NG_VALUE_ACCESSOR,
-  ReactiveFormsModule,
-} from '@angular/forms'
-import { NgSelectModule } from '@ng-select/ng-select'
+import { NG_VALUE_ACCESSOR } from '@angular/forms'
 import { of, throwError } from 'rxjs'
 import { FILTER_TITLE } from 'src/app/data/filter-rule-type'
 import { DocumentService } from 'src/app/services/rest/document.service'
@@ -38,8 +33,7 @@ describe('DocumentLinkComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [DocumentLinkComponent],
-      imports: [NgSelectModule, FormsModule, ReactiveFormsModule],
+      imports: [DocumentLinkComponent],
       providers: [
         provideHttpClient(withInterceptorsFromDi()),
         provideHttpClientTesting(),

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

@@ -1,5 +1,13 @@
+import { AsyncPipe, NgTemplateOutlet } from '@angular/common'
 import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core'
-import { NG_VALUE_ACCESSOR } from '@angular/forms'
+import {
+  FormsModule,
+  NG_VALUE_ACCESSOR,
+  ReactiveFormsModule,
+} from '@angular/forms'
+import { RouterModule } from '@angular/router'
+import { NgSelectModule } from '@ng-select/ng-select'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import {
   catchError,
   concat,
@@ -14,6 +22,7 @@ import {
 } from 'rxjs'
 import { Document } from 'src/app/data/document'
 import { FILTER_TITLE } from 'src/app/data/filter-rule-type'
+import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { AbstractInputComponent } from '../abstract-input'
 
@@ -28,6 +37,16 @@ import { AbstractInputComponent } from '../abstract-input'
   selector: 'pngx-input-document-link',
   templateUrl: './document-link.component.html',
   styleUrls: ['./document-link.component.scss'],
+  imports: [
+    CustomDatePipe,
+    AsyncPipe,
+    FormsModule,
+    ReactiveFormsModule,
+    RouterModule,
+    NgTemplateOutlet,
+    NgSelectModule,
+    NgxBootstrapIconsModule,
+  ],
 })
 export class DocumentLinkComponent
   extends AbstractInputComponent<any[]>

src-ui/src/app/components/common/input/drag-drop-select/drag-drop-select.component.spec.ts

@@ -9,8 +9,7 @@ describe('DragDropSelectComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [DragDropModule, FormsModule],
-      declarations: [DragDropSelectComponent],
+      imports: [DragDropModule, FormsModule, DragDropSelectComponent],
     }).compileComponents()
 
     fixture = TestBed.createComponent(DragDropSelectComponent)

src-ui/src/app/components/common/input/drag-drop-select/drag-drop-select.component.ts

@@ -1,6 +1,7 @@
 import {
   CdkDragDrop,
   CdkDropList,
+  DragDropModule,
   moveItemInArray,
 } from '@angular/cdk/drag-drop'
 import { Component, Input, ViewChild, forwardRef } from '@angular/core'
@@ -18,6 +19,7 @@ import { AbstractInputComponent } from '../abstract-input'
   selector: 'pngx-input-drag-drop-select',
   templateUrl: './drag-drop-select.component.html',
   styleUrl: './drag-drop-select.component.scss',
+  imports: [DragDropModule],
 })
 export class DragDropSelectComponent extends AbstractInputComponent<string[]> {
   @Input() title: string = $localize`Selected items`

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

@@ -13,11 +13,11 @@ describe('EntriesComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [EntriesComponent],
       imports: [
         FormsModule,
         ReactiveFormsModule,
         NgxBootstrapIconsModule.pick(allIcons),
+        EntriesComponent,
       ],
     }).compileComponents()
   })

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

@@ -1,5 +1,6 @@
 import { Component, forwardRef } from '@angular/core'
 import { NG_VALUE_ACCESSOR } from '@angular/forms'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { AbstractInputComponent } from '../abstract-input'
 
 @Component({
@@ -13,6 +14,7 @@ import { AbstractInputComponent } from '../abstract-input'
   selector: 'pngx-input-entries',
   templateUrl: './entries.component.html',
   styleUrl: './entries.component.scss',
+  imports: [NgxBootstrapIconsModule],
 })
 export class EntriesComponent extends AbstractInputComponent<object> {
   entries = []

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

@@ -11,8 +11,7 @@ describe('FileComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [FileComponent],
-      imports: [FormsModule, ReactiveFormsModule],
+      imports: [FormsModule, ReactiveFormsModule, FileComponent],
       providers: [
         provideHttpClient(withInterceptorsFromDi()),
         provideHttpClientTesting(),

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

@@ -6,7 +6,11 @@ import {
   ViewChild,
   forwardRef,
 } from '@angular/core'
-import { NG_VALUE_ACCESSOR } from '@angular/forms'
+import {
+  FormsModule,
+  NG_VALUE_ACCESSOR,
+  ReactiveFormsModule,
+} from '@angular/forms'
 import { AbstractInputComponent } from '../abstract-input'
 
 @Component({
@@ -20,6 +24,7 @@ import { AbstractInputComponent } from '../abstract-input'
   selector: 'pngx-input-file',
   templateUrl: './file.component.html',
   styleUrl: './file.component.scss',
+  imports: [FormsModule, ReactiveFormsModule],
 })
 export class FileComponent extends AbstractInputComponent<string> {
   @Output()

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

@@ -1,12 +1,7 @@
-import { CurrencyPipe } from '@angular/common'
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
-import {
-  FormsModule,
-  NG_VALUE_ACCESSOR,
-  ReactiveFormsModule,
-} from '@angular/forms'
+import { NG_VALUE_ACCESSOR } from '@angular/forms'
 import { MonetaryComponent } from './monetary.component'
 
 describe('MonetaryComponent', () => {
@@ -15,10 +10,8 @@ describe('MonetaryComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [MonetaryComponent],
-      imports: [FormsModule, ReactiveFormsModule],
+      imports: [MonetaryComponent],
       providers: [
-        CurrencyPipe,
         provideHttpClient(withInterceptorsFromDi()),
         provideHttpClientTesting(),
       ],

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

@@ -1,6 +1,10 @@
-import { getLocaleCurrencyCode } from '@angular/common'
+import { CurrencyPipe, getLocaleCurrencyCode } from '@angular/common'
 import { Component, forwardRef, Inject, Input, LOCALE_ID } from '@angular/core'
-import { NG_VALUE_ACCESSOR } from '@angular/forms'
+import {
+  FormsModule,
+  NG_VALUE_ACCESSOR,
+  ReactiveFormsModule,
+} from '@angular/forms'
 import { AbstractInputComponent } from '../abstract-input'
 
 @Component({
@@ -14,6 +18,7 @@ import { AbstractInputComponent } from '../abstract-input'
   selector: 'pngx-input-monetary',
   templateUrl: './monetary.component.html',
   styleUrls: ['./monetary.component.scss'],
+  imports: [CurrencyPipe, FormsModule, ReactiveFormsModule],
 })
 export class MonetaryComponent extends AbstractInputComponent<string> {
   public currency: string = ''

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

@@ -18,8 +18,7 @@ describe('NumberComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [NumberComponent],
-      imports: [FormsModule, ReactiveFormsModule],
+      imports: [FormsModule, ReactiveFormsModule, NumberComponent],
       providers: [
         DocumentService,
         provideHttpClient(withInterceptorsFromDi()),

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

@@ -1,5 +1,10 @@
 import { Component, forwardRef, Input } from '@angular/core'
-import { NG_VALUE_ACCESSOR } from '@angular/forms'
+import {
+  FormsModule,
+  NG_VALUE_ACCESSOR,
+  ReactiveFormsModule,
+} from '@angular/forms'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { AbstractInputComponent } from '../abstract-input'
 
@@ -14,6 +19,7 @@ import { AbstractInputComponent } from '../abstract-input'
   selector: 'pngx-input-number',
   templateUrl: './number.component.html',
   styleUrls: ['./number.component.scss'],
+  imports: [FormsModule, ReactiveFormsModule, NgxBootstrapIconsModule],
 })
 export class NumberComponent extends AbstractInputComponent<number> {
   @Input()

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

@@ -15,12 +15,12 @@ describe('PasswordComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [PasswordComponent],
       providers: [],
       imports: [
         FormsModule,
         ReactiveFormsModule,
         NgxBootstrapIconsModule.pick(allIcons),
+        PasswordComponent,
       ],
     }).compileComponents()
 

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

@@ -1,5 +1,10 @@
 import { Component, Input, forwardRef } from '@angular/core'
-import { NG_VALUE_ACCESSOR } from '@angular/forms'
+import {
+  FormsModule,
+  NG_VALUE_ACCESSOR,
+  ReactiveFormsModule,
+} from '@angular/forms'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { AbstractInputComponent } from '../abstract-input'
 
 @Component({
@@ -13,6 +18,7 @@ import { AbstractInputComponent } from '../abstract-input'
   selector: 'pngx-input-password',
   templateUrl: './password.component.html',
   styleUrls: ['./password.component.scss'],
+  imports: [FormsModule, ReactiveFormsModule, NgxBootstrapIconsModule],
 })
 export class PasswordComponent extends AbstractInputComponent<string> {
   @Input()

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

@@ -19,17 +19,15 @@ describe('PermissionsFormComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [
-        PermissionsFormComponent,
-        SelectComponent,
-        PermissionsGroupComponent,
-        PermissionsUserComponent,
-      ],
       imports: [
         FormsModule,
         ReactiveFormsModule,
         NgbAccordionModule,
         NgSelectModule,
+        PermissionsFormComponent,
+        SelectComponent,
+        PermissionsGroupComponent,
+        PermissionsUserComponent,
       ],
       providers: [
         provideHttpClient(withInterceptorsFromDi()),

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

@@ -1,7 +1,18 @@
+import { NgTemplateOutlet } from '@angular/common'
 import { Component, forwardRef, Input, OnInit } from '@angular/core'
-import { FormControl, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms'
+import {
+  FormControl,
+  FormGroup,
+  FormsModule,
+  NG_VALUE_ACCESSOR,
+  ReactiveFormsModule,
+} from '@angular/forms'
+import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap'
 import { User } from 'src/app/data/user'
 import { AbstractInputComponent } from '../../abstract-input'
+import { SelectComponent } from '../../select/select.component'
+import { PermissionsGroupComponent } from '../permissions-group/permissions-group.component'
+import { PermissionsUserComponent } from '../permissions-user/permissions-user.component'
 
 export interface PermissionsFormObject {
   owner?: number
@@ -28,6 +39,15 @@ export interface PermissionsFormObject {
   selector: 'pngx-permissions-form',
   templateUrl: './permissions-form.component.html',
   styleUrls: ['./permissions-form.component.scss'],
+  imports: [
+    SelectComponent,
+    PermissionsUserComponent,
+    PermissionsGroupComponent,
+    FormsModule,
+    ReactiveFormsModule,
+    NgTemplateOutlet,
+    NgbAccordionModule,
+  ],
 })
 export class PermissionsFormComponent
   extends AbstractInputComponent<PermissionsFormObject>

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

@@ -19,8 +19,12 @@ describe('PermissionsGroupComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [PermissionsGroupComponent],
-      imports: [FormsModule, ReactiveFormsModule, NgSelectModule],
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        NgSelectModule,
+        PermissionsGroupComponent,
+      ],
       providers: [
         GroupService,
         provideHttpClient(withInterceptorsFromDi()),

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

@@ -1,5 +1,10 @@
 import { Component, forwardRef } from '@angular/core'
-import { NG_VALUE_ACCESSOR } from '@angular/forms'
+import {
+  FormsModule,
+  NG_VALUE_ACCESSOR,
+  ReactiveFormsModule,
+} from '@angular/forms'
+import { NgSelectComponent } from '@ng-select/ng-select'
 import { first } from 'rxjs/operators'
 import { Group } from 'src/app/data/group'
 import { GroupService } from 'src/app/services/rest/group.service'
@@ -16,6 +21,7 @@ import { AbstractInputComponent } from '../../abstract-input'
   selector: 'pngx-permissions-group',
   templateUrl: './permissions-group.component.html',
   styleUrls: ['./permissions-group.component.scss'],
+  imports: [NgSelectComponent, FormsModule, ReactiveFormsModule],
 })
 export class PermissionsGroupComponent extends AbstractInputComponent<Group> {
   groups: Group[]

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

@@ -19,8 +19,12 @@ describe('PermissionsUserComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [PermissionsUserComponent],
-      imports: [FormsModule, ReactiveFormsModule, NgSelectModule],
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        NgSelectModule,
+        PermissionsUserComponent,
+      ],
       providers: [
         UserService,
         provideHttpClient(withInterceptorsFromDi()),

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

@@ -1,5 +1,10 @@
 import { Component, forwardRef } from '@angular/core'
-import { NG_VALUE_ACCESSOR } from '@angular/forms'
+import {
+  FormsModule,
+  NG_VALUE_ACCESSOR,
+  ReactiveFormsModule,
+} from '@angular/forms'
+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'
@@ -17,6 +22,7 @@ import { AbstractInputComponent } from '../../abstract-input'
   selector: 'pngx-permissions-user',
   templateUrl: './permissions-user.component.html',
   styleUrls: ['./permissions-user.component.scss'],
+  imports: [NgSelectComponent, FormsModule, ReactiveFormsModule],
 })
 export class PermissionsUserComponent extends AbstractInputComponent<User[]> {
   users: User[]

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

@@ -47,13 +47,13 @@ describe('SelectComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [SelectComponent],
       providers: [],
       imports: [
         FormsModule,
         ReactiveFormsModule,
         NgSelectModule,
         RouterTestingModule,
+        SelectComponent,
       ],
     }).compileComponents()
 

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

@@ -5,7 +5,14 @@ import {
   Input,
   Output,
 } from '@angular/core'
-import { NG_VALUE_ACCESSOR } from '@angular/forms'
+import {
+  FormsModule,
+  NG_VALUE_ACCESSOR,
+  ReactiveFormsModule,
+} from '@angular/forms'
+import { RouterModule } from '@angular/router'
+import { NgSelectModule } from '@ng-select/ng-select'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { AbstractInputComponent } from '../abstract-input'
 
 @Component({
@@ -19,6 +26,13 @@ import { AbstractInputComponent } from '../abstract-input'
   selector: 'pngx-input-select',
   templateUrl: './select.component.html',
   styleUrls: ['./select.component.scss'],
+  imports: [
+    NgSelectModule,
+    FormsModule,
+    ReactiveFormsModule,
+    RouterModule,
+    NgxBootstrapIconsModule,
+  ],
 })
 export class SelectComponent extends AbstractInputComponent<number> {
   constructor() {

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

@@ -14,9 +14,13 @@ describe('SwitchComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [SwitchComponent],
       providers: [],
-      imports: [FormsModule, ReactiveFormsModule, NgbTooltipModule],
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        NgbTooltipModule,
+        SwitchComponent,
+      ],
     }).compileComponents()
 
     fixture = TestBed.createComponent(SwitchComponent)

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

@@ -1,5 +1,11 @@
+import { NgClass } from '@angular/common'
 import { Component, Input, forwardRef } from '@angular/core'
-import { NG_VALUE_ACCESSOR } from '@angular/forms'
+import {
+  FormsModule,
+  NG_VALUE_ACCESSOR,
+  ReactiveFormsModule,
+} from '@angular/forms'
+import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'
 import { AbstractInputComponent } from '../abstract-input'
 
 @Component({
@@ -13,6 +19,7 @@ import { AbstractInputComponent } from '../abstract-input'
   selector: 'pngx-input-switch',
   templateUrl: './switch.component.html',
   styleUrls: ['./switch.component.scss'],
+  imports: [FormsModule, ReactiveFormsModule, NgClass, NgbTooltipModule],
 })
 export class SwitchComponent extends AbstractInputComponent<boolean> {
   @Input()

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

@@ -63,7 +63,15 @@ describe('TagsComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        NgSelectModule,
+        RouterTestingModule,
+        NgbModalModule,
+        NgbAccordionModule,
+        NgbPopoverModule,
+        NgxBootstrapIconsModule.pick(allIcons),
         TagsComponent,
         TagEditDialogComponent,
         TextComponent,
@@ -75,16 +83,6 @@ describe('TagsComponent', () => {
         ColorComponent,
         CheckComponent,
       ],
-      imports: [
-        FormsModule,
-        ReactiveFormsModule,
-        NgSelectModule,
-        RouterTestingModule,
-        NgbModalModule,
-        NgbAccordionModule,
-        NgbPopoverModule,
-        NgxBootstrapIconsModule.pick(allIcons),
-      ],
       providers: [
         {
           provide: TagService,

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

@@ -7,14 +7,22 @@ import {
   Output,
   ViewChild,
 } from '@angular/core'
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
+import {
+  ControlValueAccessor,
+  FormsModule,
+  NG_VALUE_ACCESSOR,
+  ReactiveFormsModule,
+} from '@angular/forms'
+import { RouterModule } from '@angular/router'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { NgSelectComponent } from '@ng-select/ng-select'
+import { NgSelectComponent, NgSelectModule } from '@ng-select/ng-select'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { first, firstValueFrom, tap } from 'rxjs'
 import { Tag } from 'src/app/data/tag'
 import { TagService } from 'src/app/services/rest/tag.service'
 import { EditDialogMode } from '../../edit-dialog/edit-dialog.component'
 import { TagEditDialogComponent } from '../../edit-dialog/tag-edit-dialog/tag-edit-dialog.component'
+import { TagComponent } from '../../tag/tag.component'
 
 @Component({
   providers: [
@@ -27,6 +35,14 @@ import { TagEditDialogComponent } from '../../edit-dialog/tag-edit-dialog/tag-ed
   selector: 'pngx-input-tags',
   templateUrl: './tags.component.html',
   styleUrls: ['./tags.component.scss'],
+  imports: [
+    TagComponent,
+    NgSelectModule,
+    FormsModule,
+    ReactiveFormsModule,
+    RouterModule,
+    NgxBootstrapIconsModule,
+  ],
 })
 export class TagsComponent implements OnInit, ControlValueAccessor {
   constructor(