RED-9321: lazy load watermarks routes.

apps/red-ui/src/app/modules/admin/admin-routing.module.ts

@@ -104,7 +104,7 @@ const dossierTemplateIdRoutes: IqserRoutes = [
             },
             {
                 path: 'watermarks',
-                loadChildren: () => import('./screens/watermark/watermark.module').then(m => m.WatermarkModule),
+                loadChildren: () => import('./screens/watermark/watermark.routes'),
             },
             {
                 path: 'reports',

apps/red-ui/src/app/modules/admin/screens/watermark/paginator/paginator.component.ts

@@ -1,9 +1,12 @@
 import { Component, EventEmitter, Output } from '@angular/core';
+import { MatIcon } from '@angular/material/icon';
 
 @Component({
     selector: 'redaction-paginator',
     templateUrl: './paginator.component.html',
     styleUrls: ['./paginator.component.scss'],
+    standalone: true,
+    imports: [MatIcon],
 })
 export class PaginatorComponent {
     @Output() readonly changePage = new EventEmitter<number>();

apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.ts

@@ -1,10 +1,18 @@
 import { HttpClient } from '@angular/common/http';
 import { ChangeDetectorRef, Component, ElementRef, inject, OnInit, ViewChild } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { Router } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { environment } from '@environments/environment';
-import { getConfig, IconButtonTypes, IqserPermissionsService, LoadingService, Toaster } from '@iqser/common-ui';
+import {
+    getConfig,
+    HasScrollbarDirective,
+    IconButtonComponent,
+    IconButtonTypes,
+    IqserPermissionsService,
+    LoadingService,
+    Toaster,
+} from '@iqser/common-ui';
 import { getCurrentUser } from '@iqser/common-ui/lib/users';
 import { AsControl, Debounce, getParam, trackByFactory, UI_ROOT_PATH_FN } from '@iqser/common-ui/lib/utils';
 import WebViewer, { WebViewerInstance } from '@pdftron/webviewer';
@@ -31,6 +39,13 @@ import { UserPreferenceService } from '@users/user-preference.service';
 import { stampPDFPage } from '@utils/page-stamper';
 import { BehaviorSubject, firstValueFrom, Observable, of } from 'rxjs';
 import { tap } from 'rxjs/operators';
+import { PaginatorComponent } from '../paginator/paginator.component';
+import { AsyncPipe, NgClass, NgForOf, NgIf } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatTooltip } from '@angular/material/tooltip';
+import { MatIcon } from '@angular/material/icon';
+import { MatSlider, MatSliderThumb } from '@angular/material/slider';
+import { ColorPickerModule } from 'ngx-color-picker';
 
 export const DEFAULT_WATERMARK: Partial<IWatermark> = {
     text: 'Watermark',
@@ -59,6 +74,23 @@ interface WatermarkForm {
 @Component({
     templateUrl: './watermark-screen.component.html',
     styleUrls: ['./watermark-screen.component.scss'],
+    standalone: true,
+    imports: [
+        PaginatorComponent,
+        NgIf,
+        IconButtonComponent,
+        TranslateModule,
+        AsyncPipe,
+        ReactiveFormsModule,
+        HasScrollbarDirective,
+        NgForOf,
+        NgClass,
+        MatTooltip,
+        MatIcon,
+        MatSlider,
+        ColorPickerModule,
+        MatSliderThumb,
+    ],
 })
 export class WatermarkScreenComponent implements OnInit {
     readonly iconButtonTypes = IconButtonTypes;

apps/red-ui/src/app/modules/admin/screens/watermark/watermark.module.ts

@@ -1,78 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
-import { WatermarkScreenComponent } from './watermark-screen/watermark-screen.component';
-import { WatermarksListingScreenComponent } from './watermarks-listing/watermarks-listing-screen.component';
-import {
-    CircleButtonComponent,
-    CompositeRouteGuard,
-    HasScrollbarDirective,
-    IconButtonComponent,
-    IqserAllowDirective,
-    IqserHelpModeModule,
-    IqserListingModule,
-    IqserRoutes,
-} from '@iqser/common-ui';
-import { RedRoleGuard } from '@users/red-role.guard';
-import { WATERMARK_ID } from '@red/domain';
-import { watermarkExistsGuard } from '@guards/watermark-exists.guard';
-import { TranslateModule } from '@ngx-translate/core';
-import { PaginatorComponent } from './paginator/paginator.component';
-import { MatIconModule } from '@angular/material/icon';
-import { ReactiveFormsModule } from '@angular/forms';
-import { MatSliderModule } from '@angular/material/slider';
-import { ColorPickerModule } from 'ngx-color-picker';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { InitialsAvatarComponent, IqserAuthGuard, IqserUsersModule } from '@iqser/common-ui/lib/users';
-
-const routes: IqserRoutes = [
-    {
-        path: '',
-        component: WatermarksListingScreenComponent,
-        canActivate: [CompositeRouteGuard],
-        data: {
-            routeGuards: [IqserAuthGuard, RedRoleGuard],
-        },
-    },
-    {
-        path: 'create',
-        component: WatermarkScreenComponent,
-        canActivate: [CompositeRouteGuard],
-        data: {
-            routeGuards: [IqserAuthGuard, RedRoleGuard],
-        },
-    },
-    {
-        path: `:${WATERMARK_ID}`,
-        component: WatermarkScreenComponent,
-        canActivate: [CompositeRouteGuard, watermarkExistsGuard()],
-        data: {
-            routeGuards: [IqserAuthGuard, RedRoleGuard],
-        },
-    },
-];
-
-@NgModule({
-    declarations: [WatermarkScreenComponent, WatermarksListingScreenComponent, PaginatorComponent],
-    imports: [
-        RouterModule.forChild(routes),
-        CommonModule,
-        IqserUsersModule,
-        TranslateModule,
-        IqserListingModule,
-        IqserHelpModeModule,
-        MatIconModule,
-        IconButtonComponent,
-        ReactiveFormsModule,
-        MatSliderModule,
-        ColorPickerModule,
-        MatSlideToggleModule,
-        CircleButtonComponent,
-        HasScrollbarDirective,
-        IqserAllowDirective,
-        MatTooltipModule,
-        InitialsAvatarComponent,
-    ],
-})
-export class WatermarkModule {}

apps/red-ui/src/app/modules/admin/screens/watermark/watermark.routes.ts

@@ -0,0 +1,34 @@
+import { WatermarksListingScreenComponent } from './watermarks-listing/watermarks-listing-screen.component';
+import { CompositeRouteGuard, IqserRoutes } from '@iqser/common-ui';
+import { IqserAuthGuard } from '@common-ui/users';
+import { RedRoleGuard } from '@users/red-role.guard';
+import { WatermarkScreenComponent } from './watermark-screen/watermark-screen.component';
+import { WATERMARK_ID } from '@red/domain';
+import { watermarkExistsGuard } from '@guards/watermark-exists.guard';
+
+export default [
+    {
+        path: '',
+        component: WatermarksListingScreenComponent,
+        canActivate: [CompositeRouteGuard],
+        data: {
+            routeGuards: [IqserAuthGuard, RedRoleGuard],
+        },
+    },
+    {
+        path: 'create',
+        component: WatermarkScreenComponent,
+        canActivate: [CompositeRouteGuard],
+        data: {
+            routeGuards: [IqserAuthGuard, RedRoleGuard],
+        },
+    },
+    {
+        path: `:${WATERMARK_ID}`,
+        component: WatermarkScreenComponent,
+        canActivate: [CompositeRouteGuard, watermarkExistsGuard()],
+        data: {
+            routeGuards: [IqserAuthGuard, RedRoleGuard],
+        },
+    },
+] satisfies IqserRoutes;

apps/red-ui/src/app/modules/admin/screens/watermark/watermarks-listing/watermarks-listing-screen.component.ts

@@ -1,8 +1,12 @@
 import { Component, OnInit } from '@angular/core';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import {
+    CircleButtonComponent,
+    IconButtonComponent,
     IconButtonTypes,
     IConfirmationDialogData,
+    IqserAllowDirective,
+    IqserListingModule,
     IqserPermissionsService,
     ListingComponent,
     listingProvidersFactory,
@@ -10,18 +14,35 @@ import {
     TableColumnConfig,
     Toaster,
 } from '@iqser/common-ui';
-import { getCurrentUser } from '@iqser/common-ui/lib/users';
+import { getCurrentUser, InitialsAvatarComponent } from '@iqser/common-ui/lib/users';
 import { getParam } from '@iqser/common-ui/lib/utils';
 import { DOSSIER_TEMPLATE_ID, User, Watermark } from '@red/domain';
 import { WatermarkService } from '@services/entity-services/watermark.service';
 import { WatermarksMapService } from '@services/entity-services/watermarks-map.service';
 import { Roles } from '@users/roles';
 import { AdminDialogService } from '../../../services/admin-dialog.service';
+import { TranslateModule } from '@ngx-translate/core';
+import { RouterLink } from '@angular/router';
+import { MatSlideToggle } from '@angular/material/slide-toggle';
+import { AsyncPipe, DatePipe } from '@angular/common';
 
 @Component({
     templateUrl: './watermarks-listing-screen.component.html',
     styleUrls: ['./watermarks-listing-screen.component.scss'],
     providers: listingProvidersFactory(WatermarksListingScreenComponent),
+    standalone: true,
+    imports: [
+        IqserListingModule,
+        TranslateModule,
+        IconButtonComponent,
+        IqserAllowDirective,
+        RouterLink,
+        MatSlideToggle,
+        InitialsAvatarComponent,
+        DatePipe,
+        CircleButtonComponent,
+        AsyncPipe,
+    ],
 })
 export class WatermarksListingScreenComponent extends ListingComponent<Watermark> implements OnInit {
     readonly #dossierTemplateId = getParam(DOSSIER_TEMPLATE_ID);