Enhancement: angular 19 (#8584)

src-ui/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve --host 0.0.0.0",
+    "start": "ng serve",
     "build": "ng build",
     "test": "ng test --no-watch --coverage",
     "lint": "ng lint",
@@ -11,17 +11,17 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/cdk": "^18.2.11",
-    "@angular/common": "~18.2.10",
-    "@angular/compiler": "~18.2.10",
-    "@angular/core": "~18.2.10",
-    "@angular/forms": "~18.2.10",
-    "@angular/localize": "~18.2.10",
-    "@angular/platform-browser": "~18.2.10",
-    "@angular/platform-browser-dynamic": "~18.2.10",
-    "@angular/router": "~18.2.10",
-    "@ng-bootstrap/ng-bootstrap": "^17.0.1",
-    "@ng-select/ng-select": "^13.9.1",
+    "@angular/cdk": "^19.0.2",
+    "@angular/common": "~19.0.3",
+    "@angular/compiler": "~19.0.3",
+    "@angular/core": "~19.0.3",
+    "@angular/forms": "~19.0.3",
+    "@angular/localize": "~19.0.3",
+    "@angular/platform-browser": "~19.0.3",
+    "@angular/platform-browser-dynamic": "~19.0.3",
+    "@angular/router": "~19.0.3",
+    "@ng-bootstrap/ng-bootstrap": "^18.0.0",
+    "@ng-select/ng-select": "^14.1.0",
     "@ngneat/dirty-check-forms": "^3.0.3",
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.3",
@@ -30,28 +30,28 @@
     "ng2-pdf-viewer": "^10.4.0",
     "ngx-bootstrap-icons": "^1.9.3",
     "ngx-color": "^9.0.0",
-    "ngx-cookie-service": "^18.0.0",
+    "ngx-cookie-service": "^19.0.0",
     "ngx-file-drop": "^16.0.0",
-    "ngx-ui-tour-ng-bootstrap": "^15.0.0",
+    "ngx-ui-tour-ng-bootstrap": "^16.0.0",
     "rxjs": "^7.8.1",
     "tslib": "^2.8.1",
     "utif": "^3.1.0",
     "uuid": "^11.0.2",
-    "zone.js": "^0.14.8"
+    "zone.js": "^0.15.0"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "^18.0.0",
-    "@angular-builders/jest": "^18.0.0",
-    "@angular-devkit/build-angular": "^18.2.2",
-    "@angular-devkit/core": "^18.2.11",
-    "@angular-devkit/schematics": "^18.2.11",
-    "@angular-eslint/builder": "18.4.0",
-    "@angular-eslint/eslint-plugin": "18.4.0",
-    "@angular-eslint/eslint-plugin-template": "18.4.0",
-    "@angular-eslint/schematics": "18.4.0",
-    "@angular-eslint/template-parser": "18.4.0",
-    "@angular/cli": "~18.2.11",
-    "@angular/compiler-cli": "~18.2.2",
+    "@angular-builders/custom-webpack": "^19.0.0-beta.0",
+    "@angular-builders/jest": "^19.0.0-beta.1",
+    "@angular-devkit/build-angular": "^19.0.4",
+    "@angular-devkit/core": "^19.0.4",
+    "@angular-devkit/schematics": "^19.0.4",
+    "@angular-eslint/builder": "19.0.0",
+    "@angular-eslint/eslint-plugin": "19.0.0",
+    "@angular-eslint/eslint-plugin-template": "19.0.0",
+    "@angular-eslint/schematics": "19.0.0",
+    "@angular-eslint/template-parser": "19.0.0",
+    "@angular/cli": "~19.0.4",
+    "@angular/compiler-cli": "~19.0.3",
     "@codecov/webpack-plugin": "^1.2.1",
     "@playwright/test": "^1.48.2",
     "@types/jest": "^29.5.14",
@@ -62,7 +62,7 @@
     "eslint": "^9.14.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "jest-preset-angular": "^14.2.4",
+    "jest-preset-angular": "^14.4.2",
     "jest-websocket-mock": "^2.5.0",
     "patch-package": "^8.0.0",
     "prettier-plugin-organize-imports": "^4.1.0",

src-ui/setup-jest.ts

@@ -1,8 +1,9 @@
 import '@angular/localize/init'
 import { jest } from '@jest/globals'
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone'
 import { TextDecoder, TextEncoder } from 'util'
 if (process.env.NODE_ENV === 'test') {
-  require('jest-preset-angular/setup-jest')
+  setupZoneTestEnv()
 }
 global.TextEncoder = TextEncoder
 global.TextDecoder = TextDecoder

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

@@ -2,12 +2,13 @@ import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
 import {
   ComponentFixture,
-  TestBed,
   fakeAsync,
+  TestBed,
   tick,
 } from '@angular/core/testing'
 import { Router, RouterModule } from '@angular/router'
 import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap'
+import { allIcons, NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { NgxFileDropModule } from 'ngx-file-drop'
 import { TourNgBootstrapModule, TourService } from 'ngx-ui-tour-ng-bootstrap'
 import { Subject } from 'rxjs'
@@ -39,12 +40,15 @@ describe('AppComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [AppComponent, ToastsComponent, FileDropComponent],
       imports: [
         TourNgBootstrapModule,
         RouterModule.forRoot(routes),
         NgxFileDropModule,
         NgbModalModule,
+        AppComponent,
+        ToastsComponent,
+        FileDropComponent,
+        NgxBootstrapIconsModule.pick(allIcons),
       ],
       providers: [
         PermissionsGuard,

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

@@ -1,7 +1,9 @@
 import { Component, OnDestroy, OnInit, Renderer2 } from '@angular/core'
-import { Router } from '@angular/router'
-import { TourService } from 'ngx-ui-tour-ng-bootstrap'
+import { Router, RouterOutlet } from '@angular/router'
+import { TourNgBootstrapModule, TourService } from 'ngx-ui-tour-ng-bootstrap'
 import { first, Subscription } from 'rxjs'
+import { ToastsComponent } from './components/common/toasts/toasts.component'
+import { FileDropComponent } from './components/file-drop/file-drop.component'
 import { SETTINGS_KEYS } from './data/ui-settings'
 import { ConsumerStatusService } from './services/consumer-status.service'
 import { HotKeyService } from './services/hot-key.service'
@@ -18,6 +20,12 @@ import { ToastService } from './services/toast.service'
   selector: 'pngx-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
+  imports: [
+    FileDropComponent,
+    ToastsComponent,
+    TourNgBootstrapModule,
+    RouterOutlet,
+  ],
 })
 export class AppComponent implements OnInit, OnDestroy {
   newDocumentSubscription: Subscription

src-ui/src/app/app.module.ts

@@ -1,579 +0,0 @@
-import { DragDropModule } from '@angular/cdk/drag-drop'
-import { DatePipe, registerLocaleData } from '@angular/common'
-import {
-  HTTP_INTERCEPTORS,
-  provideHttpClient,
-  withInterceptorsFromDi,
-} from '@angular/common/http'
-import { APP_INITIALIZER, NgModule } from '@angular/core'
-import { FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { BrowserModule } from '@angular/platform-browser'
-import {
-  NgbDateAdapter,
-  NgbDateParserFormatter,
-  NgbModule,
-} from '@ng-bootstrap/ng-bootstrap'
-import { NgSelectModule } from '@ng-select/ng-select'
-import { PdfViewerModule } from 'ng2-pdf-viewer'
-import {
-  airplane,
-  archive,
-  arrowClockwise,
-  arrowCounterclockwise,
-  arrowDown,
-  arrowLeft,
-  arrowRepeat,
-  arrowRight,
-  arrowRightShort,
-  arrowUpRight,
-  asterisk,
-  bodyText,
-  boxArrowUp,
-  boxArrowUpRight,
-  boxes,
-  braces,
-  calendar,
-  calendarEvent,
-  calendarEventFill,
-  cardChecklist,
-  cardHeading,
-  caretDown,
-  caretUp,
-  chatLeftText,
-  check,
-  check2All,
-  checkAll,
-  checkCircleFill,
-  checkLg,
-  chevronDoubleLeft,
-  chevronDoubleRight,
-  clipboard,
-  clipboardCheck,
-  clipboardCheckFill,
-  clipboardFill,
-  dash,
-  dashCircle,
-  diagram3,
-  dice5,
-  doorOpen,
-  download,
-  envelope,
-  envelopeAt,
-  envelopeAtFill,
-  exclamationCircleFill,
-  exclamationTriangle,
-  exclamationTriangleFill,
-  eye,
-  fileEarmark,
-  fileEarmarkCheck,
-  fileEarmarkFill,
-  fileEarmarkLock,
-  fileEarmarkMinus,
-  fileEarmarkRichtext,
-  files,
-  fileText,
-  filter,
-  folder,
-  folderFill,
-  funnel,
-  gear,
-  google,
-  grid,
-  gripVertical,
-  hash,
-  hddStack,
-  house,
-  infoCircle,
-  journals,
-  link,
-  listTask,
-  listUl,
-  microsoft,
-  NgxBootstrapIconsModule,
-  nodePlus,
-  pencil,
-  people,
-  peopleFill,
-  person,
-  personCircle,
-  personFill,
-  personFillLock,
-  personLock,
-  personSquare,
-  plus,
-  plusCircle,
-  questionCircle,
-  scissors,
-  search,
-  slashCircle,
-  sliders2Vertical,
-  sortAlphaDown,
-  sortAlphaUpAlt,
-  tag,
-  tagFill,
-  tags,
-  textIndentLeft,
-  textLeft,
-  threeDots,
-  threeDotsVertical,
-  trash,
-  uiRadios,
-  upcScan,
-  windowStack,
-  x,
-  xCircle,
-  xLg,
-} from 'ngx-bootstrap-icons'
-import { ColorSliderModule } from 'ngx-color/slider'
-import { CookieService } from 'ngx-cookie-service'
-import { NgxFileDropModule } from 'ngx-file-drop'
-import { TourNgBootstrapModule } from 'ngx-ui-tour-ng-bootstrap'
-import { AppRoutingModule } from './app-routing.module'
-import { AppComponent } from './app.component'
-import { ConfigComponent } from './components/admin/config/config.component'
-import { LogsComponent } from './components/admin/logs/logs.component'
-import { SettingsComponent } from './components/admin/settings/settings.component'
-import { TasksComponent } from './components/admin/tasks/tasks.component'
-import { TrashComponent } from './components/admin/trash/trash.component'
-import { UsersAndGroupsComponent } from './components/admin/users-groups/users-groups.component'
-import { AppFrameComponent } from './components/app-frame/app-frame.component'
-import { GlobalSearchComponent } from './components/app-frame/global-search/global-search.component'
-import { ClearableBadgeComponent } from './components/common/clearable-badge/clearable-badge.component'
-import { ConfirmButtonComponent } from './components/common/confirm-button/confirm-button.component'
-import { ConfirmDialogComponent } from './components/common/confirm-dialog/confirm-dialog.component'
-import { DeletePagesConfirmDialogComponent } from './components/common/confirm-dialog/delete-pages-confirm-dialog/delete-pages-confirm-dialog.component'
-import { MergeConfirmDialogComponent } from './components/common/confirm-dialog/merge-confirm-dialog/merge-confirm-dialog.component'
-import { RotateConfirmDialogComponent } from './components/common/confirm-dialog/rotate-confirm-dialog/rotate-confirm-dialog.component'
-import { SplitConfirmDialogComponent } from './components/common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component'
-import { CustomFieldDisplayComponent } from './components/common/custom-field-display/custom-field-display.component'
-import { CustomFieldsDropdownComponent } from './components/common/custom-fields-dropdown/custom-fields-dropdown.component'
-import { CustomFieldsQueryDropdownComponent } from './components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component'
-import { DatesDropdownComponent } from './components/common/dates-dropdown/dates-dropdown.component'
-import { CorrespondentEditDialogComponent } from './components/common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component'
-import { CustomFieldEditDialogComponent } from './components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
-import { DocumentTypeEditDialogComponent } from './components/common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component'
-import { GroupEditDialogComponent } from './components/common/edit-dialog/group-edit-dialog/group-edit-dialog.component'
-import { MailAccountEditDialogComponent } from './components/common/edit-dialog/mail-account-edit-dialog/mail-account-edit-dialog.component'
-import { MailRuleEditDialogComponent } from './components/common/edit-dialog/mail-rule-edit-dialog/mail-rule-edit-dialog.component'
-import { StoragePathEditDialogComponent } from './components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component'
-import { TagEditDialogComponent } from './components/common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component'
-import { UserEditDialogComponent } from './components/common/edit-dialog/user-edit-dialog/user-edit-dialog.component'
-import { WorkflowEditDialogComponent } from './components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component'
-import { FilterableDropdownComponent } from './components/common/filterable-dropdown/filterable-dropdown.component'
-import { ToggleableDropdownButtonComponent } from './components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component'
-import { HotkeyDialogComponent } from './components/common/hotkey-dialog/hotkey-dialog.component'
-import { CheckComponent } from './components/common/input/check/check.component'
-import { ColorComponent } from './components/common/input/color/color.component'
-import { DateComponent } from './components/common/input/date/date.component'
-import { DocumentLinkComponent } from './components/common/input/document-link/document-link.component'
-import { DragDropSelectComponent } from './components/common/input/drag-drop-select/drag-drop-select.component'
-import { EntriesComponent } from './components/common/input/entries/entries.component'
-import { FileComponent } from './components/common/input/file/file.component'
-import { MonetaryComponent } from './components/common/input/monetary/monetary.component'
-import { NumberComponent } from './components/common/input/number/number.component'
-import { PasswordComponent } from './components/common/input/password/password.component'
-import { PermissionsFormComponent } from './components/common/input/permissions/permissions-form/permissions-form.component'
-import { PermissionsGroupComponent } from './components/common/input/permissions/permissions-group/permissions-group.component'
-import { PermissionsUserComponent } from './components/common/input/permissions/permissions-user/permissions-user.component'
-import { SelectComponent } from './components/common/input/select/select.component'
-import { SwitchComponent } from './components/common/input/switch/switch.component'
-import { TagsComponent } from './components/common/input/tags/tags.component'
-import { TextComponent } from './components/common/input/text/text.component'
-import { TextAreaComponent } from './components/common/input/textarea/textarea.component'
-import { UrlComponent } from './components/common/input/url/url.component'
-import { LogoComponent } from './components/common/logo/logo.component'
-import { PageHeaderComponent } from './components/common/page-header/page-header.component'
-import { PermissionsDialogComponent } from './components/common/permissions-dialog/permissions-dialog.component'
-import { PermissionsFilterDropdownComponent } from './components/common/permissions-filter-dropdown/permissions-filter-dropdown.component'
-import { PermissionsSelectComponent } from './components/common/permissions-select/permissions-select.component'
-import { PreviewPopupComponent } from './components/common/preview-popup/preview-popup.component'
-import { ProfileEditDialogComponent } from './components/common/profile-edit-dialog/profile-edit-dialog.component'
-import { SelectDialogComponent } from './components/common/select-dialog/select-dialog.component'
-import { ShareLinksDropdownComponent } from './components/common/share-links-dropdown/share-links-dropdown.component'
-import { SystemStatusDialogComponent } from './components/common/system-status-dialog/system-status-dialog.component'
-import { TagComponent } from './components/common/tag/tag.component'
-import { ToastsComponent } from './components/common/toasts/toasts.component'
-import { DashboardComponent } from './components/dashboard/dashboard.component'
-import { SavedViewWidgetComponent } from './components/dashboard/widgets/saved-view-widget/saved-view-widget.component'
-import { StatisticsWidgetComponent } from './components/dashboard/widgets/statistics-widget/statistics-widget.component'
-import { UploadFileWidgetComponent } from './components/dashboard/widgets/upload-file-widget/upload-file-widget.component'
-import { WelcomeWidgetComponent } from './components/dashboard/widgets/welcome-widget/welcome-widget.component'
-import { WidgetFrameComponent } from './components/dashboard/widgets/widget-frame/widget-frame.component'
-import { DocumentAsnComponent } from './components/document-asn/document-asn.component'
-import { DocumentDetailComponent } from './components/document-detail/document-detail.component'
-import { MetadataCollapseComponent } from './components/document-detail/metadata-collapse/metadata-collapse.component'
-import { DocumentHistoryComponent } from './components/document-history/document-history.component'
-import { BulkEditorComponent } from './components/document-list/bulk-editor/bulk-editor.component'
-import { CustomFieldsBulkEditDialogComponent } from './components/document-list/bulk-editor/custom-fields-bulk-edit-dialog/custom-fields-bulk-edit-dialog.component'
-import { DocumentCardLargeComponent } from './components/document-list/document-card-large/document-card-large.component'
-import { DocumentCardSmallComponent } from './components/document-list/document-card-small/document-card-small.component'
-import { DocumentListComponent } from './components/document-list/document-list.component'
-import { FilterEditorComponent } from './components/document-list/filter-editor/filter-editor.component'
-import { SaveViewConfigDialogComponent } from './components/document-list/save-view-config-dialog/save-view-config-dialog.component'
-import { DocumentNotesComponent } from './components/document-notes/document-notes.component'
-import { FileDropComponent } from './components/file-drop/file-drop.component'
-import { CorrespondentListComponent } from './components/manage/correspondent-list/correspondent-list.component'
-import { CustomFieldsComponent } from './components/manage/custom-fields/custom-fields.component'
-import { DocumentTypeListComponent } from './components/manage/document-type-list/document-type-list.component'
-import { MailComponent } from './components/manage/mail/mail.component'
-import { SavedViewsComponent } from './components/manage/saved-views/saved-views.component'
-import { StoragePathListComponent } from './components/manage/storage-path-list/storage-path-list.component'
-import { TagListComponent } from './components/manage/tag-list/tag-list.component'
-import { WorkflowsComponent } from './components/manage/workflows/workflows.component'
-import { NotFoundComponent } from './components/not-found/not-found.component'
-import { IfObjectPermissionsDirective } from './directives/if-object-permissions.directive'
-import { IfOwnerDirective } from './directives/if-owner.directive'
-import { IfPermissionsDirective } from './directives/if-permissions.directive'
-import { SortableDirective } from './directives/sortable.directive'
-import { DirtyDocGuard } from './guards/dirty-doc.guard'
-import { DirtySavedViewGuard } from './guards/dirty-saved-view.guard'
-import { PermissionsGuard } from './guards/permissions.guard'
-import { ApiVersionInterceptor } from './interceptors/api-version.interceptor'
-import { CsrfInterceptor } from './interceptors/csrf.interceptor'
-import { CustomDatePipe } from './pipes/custom-date.pipe'
-import { DocumentTitlePipe } from './pipes/document-title.pipe'
-import { FileSizePipe } from './pipes/file-size.pipe'
-import { FilterPipe } from './pipes/filter.pipe'
-import { IsNumberPipe } from './pipes/is-number.pipe'
-import { SafeHtmlPipe } from './pipes/safehtml.pipe'
-import { SafeUrlPipe } from './pipes/safeurl.pipe'
-import { UsernamePipe } from './pipes/username.pipe'
-import { YesNoPipe } from './pipes/yes-no.pipe'
-import { SettingsService } from './services/settings.service'
-import { LocalizedDateParserFormatter } from './utils/ngb-date-parser-formatter'
-import { ISODateAdapter } from './utils/ngb-iso-date-adapter'
-
-const icons = {
-  airplane,
-  archive,
-  arrowClockwise,
-  arrowCounterclockwise,
-  arrowDown,
-  arrowLeft,
-  arrowRepeat,
-  arrowRight,
-  arrowRightShort,
-  arrowUpRight,
-  asterisk,
-  braces,
-  bodyText,
-  boxArrowUp,
-  boxArrowUpRight,
-  boxes,
-  calendar,
-  calendarEvent,
-  calendarEventFill,
-  cardChecklist,
-  cardHeading,
-  caretDown,
-  caretUp,
-  chatLeftText,
-  check,
-  check2All,
-  checkAll,
-  checkCircleFill,
-  checkLg,
-  chevronDoubleLeft,
-  chevronDoubleRight,
-  clipboard,
-  clipboardCheck,
-  clipboardCheckFill,
-  clipboardFill,
-  dash,
-  dashCircle,
-  diagram3,
-  dice5,
-  doorOpen,
-  download,
-  envelope,
-  envelopeAt,
-  envelopeAtFill,
-  exclamationCircleFill,
-  exclamationTriangle,
-  exclamationTriangleFill,
-  eye,
-  fileEarmark,
-  fileEarmarkCheck,
-  fileEarmarkFill,
-  fileEarmarkLock,
-  fileEarmarkMinus,
-  fileEarmarkRichtext,
-  files,
-  fileText,
-  filter,
-  folder,
-  folderFill,
-  funnel,
-  gear,
-  google,
-  grid,
-  gripVertical,
-  hash,
-  hddStack,
-  house,
-  infoCircle,
-  journals,
-  link,
-  listTask,
-  listUl,
-  microsoft,
-  nodePlus,
-  pencil,
-  people,
-  peopleFill,
-  person,
-  personCircle,
-  personFill,
-  personFillLock,
-  personLock,
-  personSquare,
-  plus,
-  plusCircle,
-  questionCircle,
-  scissors,
-  search,
-  slashCircle,
-  sliders2Vertical,
-  sortAlphaDown,
-  sortAlphaUpAlt,
-  tagFill,
-  tag,
-  tags,
-  textIndentLeft,
-  textLeft,
-  threeDots,
-  threeDotsVertical,
-  trash,
-  uiRadios,
-  upcScan,
-  windowStack,
-  x,
-  xCircle,
-  xLg,
-}
-
-import localeAf from '@angular/common/locales/af'
-import localeAr from '@angular/common/locales/ar'
-import localeBe from '@angular/common/locales/be'
-import localeBg from '@angular/common/locales/bg'
-import localeCa from '@angular/common/locales/ca'
-import localeCs from '@angular/common/locales/cs'
-import localeDa from '@angular/common/locales/da'
-import localeDe from '@angular/common/locales/de'
-import localeEl from '@angular/common/locales/el'
-import localeEnGb from '@angular/common/locales/en-GB'
-import localeEs from '@angular/common/locales/es'
-import localeFi from '@angular/common/locales/fi'
-import localeFr from '@angular/common/locales/fr'
-import localeHu from '@angular/common/locales/hu'
-import localeIt from '@angular/common/locales/it'
-import localeJa from '@angular/common/locales/ja'
-import localeKo from '@angular/common/locales/ko'
-import localeLb from '@angular/common/locales/lb'
-import localeNl from '@angular/common/locales/nl'
-import localeNo from '@angular/common/locales/no'
-import localePl from '@angular/common/locales/pl'
-import localePt from '@angular/common/locales/pt'
-import localeRo from '@angular/common/locales/ro'
-import localeRu from '@angular/common/locales/ru'
-import localeSk from '@angular/common/locales/sk'
-import localeSl from '@angular/common/locales/sl'
-import localeSr from '@angular/common/locales/sr'
-import localeSv from '@angular/common/locales/sv'
-import localeTr from '@angular/common/locales/tr'
-import localeUk from '@angular/common/locales/uk'
-import localeZh from '@angular/common/locales/zh'
-
-registerLocaleData(localeAf)
-registerLocaleData(localeAr)
-registerLocaleData(localeBe)
-registerLocaleData(localeBg)
-registerLocaleData(localeCa)
-registerLocaleData(localeCs)
-registerLocaleData(localeDa)
-registerLocaleData(localeDe)
-registerLocaleData(localeEl)
-registerLocaleData(localeEnGb)
-registerLocaleData(localeEs)
-registerLocaleData(localeFi)
-registerLocaleData(localeFr)
-registerLocaleData(localeHu)
-registerLocaleData(localeIt)
-registerLocaleData(localeJa)
-registerLocaleData(localeKo)
-registerLocaleData(localeLb)
-registerLocaleData(localeNl)
-registerLocaleData(localeNo)
-registerLocaleData(localePl)
-registerLocaleData(localePt, 'pt-BR')
-registerLocaleData(localePt, 'pt-PT')
-registerLocaleData(localeRo)
-registerLocaleData(localeRu)
-registerLocaleData(localeSk)
-registerLocaleData(localeSl)
-registerLocaleData(localeSr)
-registerLocaleData(localeSv)
-registerLocaleData(localeTr)
-registerLocaleData(localeUk)
-registerLocaleData(localeZh)
-
-function initializeApp(settings: SettingsService) {
-  return () => {
-    return settings.initializeSettings()
-  }
-}
-
-@NgModule({
-  declarations: [
-    AppComponent,
-    DocumentListComponent,
-    DocumentDetailComponent,
-    DashboardComponent,
-    TagListComponent,
-    DocumentTypeListComponent,
-    CorrespondentListComponent,
-    StoragePathListComponent,
-    LogsComponent,
-    SettingsComponent,
-    NotFoundComponent,
-    CorrespondentEditDialogComponent,
-    ConfirmDialogComponent,
-    TagEditDialogComponent,
-    DocumentTypeEditDialogComponent,
-    StoragePathEditDialogComponent,
-    TagComponent,
-    ClearableBadgeComponent,
-    PageHeaderComponent,
-    AppFrameComponent,
-    ToastsComponent,
-    FilterEditorComponent,
-    FilterableDropdownComponent,
-    ToggleableDropdownButtonComponent,
-    DatesDropdownComponent,
-    DocumentCardLargeComponent,
-    DocumentCardSmallComponent,
-    BulkEditorComponent,
-    TextComponent,
-    TextAreaComponent,
-    SelectComponent,
-    CheckComponent,
-    UrlComponent,
-    PasswordComponent,
-    SaveViewConfigDialogComponent,
-    TagsComponent,
-    IfPermissionsDirective,
-    SortableDirective,
-    SavedViewWidgetComponent,
-    StatisticsWidgetComponent,
-    UploadFileWidgetComponent,
-    WidgetFrameComponent,
-    WelcomeWidgetComponent,
-    YesNoPipe,
-    FileSizePipe,
-    FilterPipe,
-    DocumentTitlePipe,
-    MetadataCollapseComponent,
-    SelectDialogComponent,
-    NumberComponent,
-    SafeUrlPipe,
-    SafeHtmlPipe,
-    CustomDatePipe,
-    DateComponent,
-    ColorComponent,
-    DocumentAsnComponent,
-    DocumentNotesComponent,
-    TasksComponent,
-    UserEditDialogComponent,
-    GroupEditDialogComponent,
-    PermissionsSelectComponent,
-    MailAccountEditDialogComponent,
-    MailRuleEditDialogComponent,
-    PermissionsUserComponent,
-    PermissionsGroupComponent,
-    IfOwnerDirective,
-    IfObjectPermissionsDirective,
-    PermissionsDialogComponent,
-    PermissionsFormComponent,
-    PermissionsFilterDropdownComponent,
-    UsernamePipe,
-    LogoComponent,
-    IsNumberPipe,
-    ShareLinksDropdownComponent,
-    WorkflowsComponent,
-    WorkflowEditDialogComponent,
-    MailComponent,
-    UsersAndGroupsComponent,
-    FileDropComponent,
-    CustomFieldsComponent,
-    CustomFieldEditDialogComponent,
-    CustomFieldsDropdownComponent,
-    CustomFieldsQueryDropdownComponent,
-    ProfileEditDialogComponent,
-    DocumentLinkComponent,
-    PreviewPopupComponent,
-    SwitchComponent,
-    ConfigComponent,
-    FileComponent,
-    ConfirmButtonComponent,
-    MonetaryComponent,
-    SystemStatusDialogComponent,
-    RotateConfirmDialogComponent,
-    MergeConfirmDialogComponent,
-    SplitConfirmDialogComponent,
-    DocumentHistoryComponent,
-    DragDropSelectComponent,
-    CustomFieldDisplayComponent,
-    GlobalSearchComponent,
-    HotkeyDialogComponent,
-    DeletePagesConfirmDialogComponent,
-    TrashComponent,
-    EntriesComponent,
-    SavedViewsComponent,
-    CustomFieldsBulkEditDialogComponent,
-  ],
-  bootstrap: [AppComponent],
-  imports: [
-    BrowserModule,
-    AppRoutingModule,
-    NgbModule,
-    FormsModule,
-    ReactiveFormsModule,
-    PdfViewerModule,
-    NgxFileDropModule,
-    NgSelectModule,
-    ColorSliderModule,
-    TourNgBootstrapModule,
-    DragDropModule,
-    NgxBootstrapIconsModule.pick(icons),
-  ],
-  providers: [
-    {
-      provide: APP_INITIALIZER,
-      useFactory: initializeApp,
-      deps: [SettingsService],
-      multi: true,
-    },
-    DatePipe,
-    CookieService,
-    {
-      provide: HTTP_INTERCEPTORS,
-      useClass: CsrfInterceptor,
-      multi: true,
-    },
-    {
-      provide: HTTP_INTERCEPTORS,
-      useClass: ApiVersionInterceptor,
-      multi: true,
-    },
-    FilterPipe,
-    DocumentTitlePipe,
-    { provide: NgbDateAdapter, useClass: ISODateAdapter },
-    { provide: NgbDateParserFormatter, useClass: LocalizedDateParserFormatter },
-    PermissionsGuard,
-    DirtyDocGuard,
-    DirtySavedViewGuard,
-    UsernamePipe,
-    provideHttpClient(withInterceptorsFromDi()),
-  ],
-})
-export class AppModule {}

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()),