Enhancement: angular 19 (#8584)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,11 @@
 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 { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
 import { AbstractInputComponent } from '../abstract-input'
 
 @Component({
@@ -13,6 +19,12 @@ import { AbstractInputComponent } from '../abstract-input'
   selector: 'pngx-input-text',
   templateUrl: './text.component.html',
   styleUrls: ['./text.component.scss'],
+  imports: [
+    FormsModule,
+    ReactiveFormsModule,
+    SafeHtmlPipe,
+    NgxBootstrapIconsModule,
+  ],
 })
 export class TextComponent extends AbstractInputComponent<string> {
   @Input()

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

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

src-ui/src/app/components/common/input/textarea/textarea.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 { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
 import { AbstractInputComponent } from '../abstract-input'
 
 @Component({
@@ -13,6 +18,7 @@ import { AbstractInputComponent } from '../abstract-input'
   selector: 'pngx-input-textarea',
   templateUrl: './textarea.component.html',
   styleUrls: ['./textarea.component.scss'],
+  imports: [FormsModule, ReactiveFormsModule, SafeHtmlPipe],
 })
 export class TextAreaComponent extends AbstractInputComponent<string> {
   @Input()

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

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

src-ui/src/app/components/common/input/url/url.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 { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { AbstractInputComponent } from '../abstract-input'
 
 @Component({
@@ -13,6 +18,7 @@ import { AbstractInputComponent } from '../abstract-input'
   selector: 'pngx-input-url',
   templateUrl: './url.component.html',
   styleUrls: ['./url.component.scss'],
+  imports: [NgxBootstrapIconsModule, FormsModule, ReactiveFormsModule],
 })
 export class UrlComponent extends AbstractInputComponent<string> {
   constructor() {