RED-10139: removed some more getters.

for dossier overview.

.eslintrc.json

@@ -16,7 +16,6 @@
       },
       "rules": {
         "rxjs/no-ignored-subscription": "warn",
-        "@angular-eslint/prefer-standalone": "off",
         "@angular-eslint/no-conflicting-lifecycle": "error",
         "@angular-eslint/no-host-metadata-property": "error",
         "@angular-eslint/no-input-rename": "error",

.gitlab-ci.yml

@@ -4,60 +4,41 @@ variables:
     PROJECT: red-ui
     DOCKERFILELOCATION: 'docker/$PROJECT/Dockerfile'
 
+
 include:
     - project: 'gitlab/gitlab'
       ref: 'main'
       file: 'ci-templates/docker_build_nexus_v2.yml'
       rules:
-          - if: $CI_PIPELINE_SOURCE != "schedule"
+      - if: $CI_PIPELINE_SOURCE != "schedule"
-
-sonarqube:
-  stage: test
-  image:
-    name: sonarsource/sonar-scanner-cli:11.1
-    entrypoint:
-    - ''
-  variables:
-    SONAR_USER_HOME: "${CI_PROJECT_DIR}/.sonar"
-    GIT_DEPTH: '0'
-  cache:
-    key: "${CI_JOB_NAME}"
-    paths:
-    - ".sonar/cache"
-  script:
-  - sonar-scanner
-  rules:
-  - if: $CI_PIPELINE_SOURCE == "merge_request_event"
-  - if: "$CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH"
-  - if: "$CI_COMMIT_BRANCH =~ /^release/"
 
 localazy update:
-    image: node:20.5
+  image: node:20.5
-    cache:
+  cache:
-        - key:
+      - key:
-              files:
+            files:
-                  - yarn.lock
+                - yarn.lock
-          paths:
+        paths:
-              - .yarn-cache/
+            - .yarn-cache/
-    script:
+  script:
-        # - git config user.email "${CI_EMAIL}"
+      # - git config user.email "${CI_EMAIL}"
-        # - git config user.name "${CI_USERNAME}"
+      # - git config user.name "${CI_USERNAME}"
-        # - git remote add gitlab_origin https://${CI_USERNAME}:${CI_ACCESS_TOKEN}@gitlab.knecon.com/redactmanager/red-ui.git
+      # - git remote add gitlab_origin https://${CI_USERNAME}:${CI_ACCESS_TOKEN}@gitlab.knecon.com/redactmanager/red-ui.git
-        - git push https://gitlab-ci-token:${CI_JOB_TOKEN}@gitlab.knecon.com/redactmanager/red-ui.git
+      - git push https://gitlab-ci-token:${CI_JOB_TOKEN}@gitlab.knecon.com/redactmanager/red-ui.git
-        - cd tools/localazy
+      - cd tools/localazy
-        - yarn install --cache-folder .yarn-cache
+      - yarn install --cache-folder .yarn-cache
-        - yarn start
+      - yarn start
-        - cd ../..
+      - cd ../..
-        - git add .
+      - git add .
-        - |-
+      - |-
-            CHANGES=$(git status --porcelain | wc -l)
+        CHANGES=$(git status --porcelain | wc -l)
-            if [ "$CHANGES" -gt "0" ]
+        if [ "$CHANGES" -gt "0" ]
-            then
+        then
-              git status
+          git status
-              git commit -m "push back localazy update"
+          git commit -m "push back localazy update"
-              git push gitlab_origin HEAD:${CI_COMMIT_REF_NAME}
+          git push gitlab_origin HEAD:${CI_COMMIT_REF_NAME}
-              # git push https://gitlab-ci-token:${CI_JOB_TOKEN}@gitlab.knecon.com/redactmanager/red-ui.git
+          # git push https://gitlab-ci-token:${CI_JOB_TOKEN}@gitlab.knecon.com/redactmanager/red-ui.git
-              # git push
+          # git push
-            fi
+        fi
-    rules:
+  rules:
-        - if: $CI_PIPELINE_SOURCE == "schedule"
+    - if: $CI_PIPELINE_SOURCE == "schedule"

angular.json

@@ -50,7 +50,7 @@
               {
                 "glob": "**/*",
                 "input": "node_modules/@pdftron/webviewer/public/",
-                "output": "/assets/wv-resources/11.1.0/"
+                "output": "/assets/wv-resources/11.0.0/"
               },
               {
                 "glob": "**/*",

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

@@ -4,27 +4,26 @@ import { UserPreferenceService } from '@users/user-preference.service';
 import { getConfig } from '@iqser/common-ui';
 import { AppConfig } from '@red/domain';
 import { NavigationEnd, Router } from '@angular/router';
-import { filter, map, switchMap, take, tap } from 'rxjs/operators';
+import { filter, map, switchMap, take } from 'rxjs/operators';
-import { APP_TYPE_PATHS } from '@common-ui/utils/constants';
-import { MatIconRegistry } from '@angular/material/icon';
-import { DomSanitizer } from '@angular/platform-browser';
-import { TenantsService } from '@common-ui/tenants';
 
-export function loadCustomTheme(cssFileName: string) {
+function loadCustomTheme() {
-    const head = document.getElementsByTagName('head')[0];
+    const cssFileName = getConfig<AppConfig>().THEME;
-    const link = document.createElement('link');
+
-    link.id = cssFileName;
+    if (cssFileName) {
-    link.rel = 'stylesheet';
+        const head = document.getElementsByTagName('head')[0];
-    link.type = 'text/css';
+        const link = document.createElement('link');
-    link.href = 'assets/styles/themes/' + cssFileName + '.css';
+        link.id = cssFileName;
-    link.media = 'all';
+        link.rel = 'stylesheet';
-    head.appendChild(link);
+        link.type = 'text/css';
+        link.href = 'assets/styles/themes/' + cssFileName + '.css';
+        link.media = 'all';
+        head.appendChild(link);
+    }
 }
 
 @Component({
     selector: 'redaction-root',
     templateUrl: './app.component.html',
-    standalone: false,
 })
 export class AppComponent {
     constructor(
@@ -35,12 +34,9 @@ export class AppComponent {
         userPreferenceService: UserPreferenceService,
         renderer: Renderer2,
         private readonly _router: Router,
-        private readonly _iconRegistry: MatIconRegistry,
-        private readonly _sanitizer: DomSanitizer,
-        private readonly _tenantsService: TenantsService,
     ) {
-        const config = getConfig<AppConfig>();
         renderer.addClass(document.body, userPreferenceService.getTheme());
+        loadCustomTheme();
 
         const removeQueryParams = _router.events.pipe(
             filter((event): event is NavigationEnd => event instanceof NavigationEnd),
@@ -51,25 +47,9 @@ export class AppComponent {
         );
         removeQueryParams.subscribe();
 
-        this._tenantsService
+        if (getConfig().IS_DOCUMINE) {
-            .waitForSettingTenant()
+            document.getElementById('favicon').setAttribute('href', 'assets/icons/documine-logo.ico');
-            .pipe(
+        }
-                tap(() => {
-                    const isDocumine = this._tenantsService.activeTenant.documine;
-                    const logo = isDocumine ? 'documine' : 'redaction';
-                    _iconRegistry.addSvgIconInNamespace(
-                        'iqser',
-                        'logo',
-                        _sanitizer.bypassSecurityTrustResourceUrl(`/assets/icons/general/${logo}-logo.svg`),
-                    );
-                    if (isDocumine) {
-                        document.getElementById('favicon').setAttribute('href', 'assets/icons/documine-logo.ico');
-                    }
-                    loadCustomTheme(isDocumine ? APP_TYPE_PATHS.SCM : APP_TYPE_PATHS.REDACT);
-                }),
-                take(1),
-            )
-            .subscribe();
     }
 
     #removeKeycloakQueryParams() {

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

@@ -1,6 +1,6 @@
 import { APP_BASE_HREF, DatePipe as BaseDatePipe } from '@angular/common';
 import { HTTP_INTERCEPTORS } from '@angular/common/http';
-import { ErrorHandler, inject, NgModule, provideEnvironmentInitializer } from '@angular/core';
+import { ENVIRONMENT_INITIALIZER, ErrorHandler, inject, NgModule } from '@angular/core';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatIcon } from '@angular/material/icon';
 import { MatMenu, MatMenuContent, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
@@ -117,7 +117,7 @@ export const appModuleFactory = (config: AppConfig) => {
                 resetTimeoutOnDuplicate: true,
             }),
             TenantsModule.forRoot(),
-            IqserTranslateModule.forRoot({ pathPrefix: config.BASE_TRANSLATIONS_DIRECTORY }),
+            IqserTranslateModule.forRoot({ pathPrefix: config.BASE_TRANSLATIONS_DIRECTORY || '/assets/i18n/redact/' }),
             IqserLoadingModule.forRoot(),
             ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
             LoggerModule.forRoot(undefined, {
@@ -135,20 +135,20 @@ export const appModuleFactory = (config: AppConfig) => {
                         features: {
                             ANNOTATIONS: {
                                 color: 'aqua',
-                                enabled: false,
+                                enabled: true,
                                 level: NgxLoggerLevel.DEBUG,
                             },
                             FILTERS: {
                                 enabled: false,
                             },
                             TENANTS: {
-                                enabled: false,
+                                enabled: true,
                             },
                             ROUTES: {
-                                enabled: false,
+                                enabled: true,
                             },
                             PDF: {
-                                enabled: false,
+                                enabled: true,
                             },
                             FILE: {
                                 enabled: false,
@@ -171,9 +171,6 @@ export const appModuleFactory = (config: AppConfig) => {
                             DOSSIERS_CHANGES: {
                                 enabled: false,
                             },
-                            GUARDS: {
-                                enabled: false,
-                            },
                         },
                     } as ILoggerConfig,
                 },
@@ -233,10 +230,14 @@ export const appModuleFactory = (config: AppConfig) => {
                 provide: ErrorHandler,
                 useClass: GlobalErrorHandler,
             },
-            provideEnvironmentInitializer(async () => {
+            {
-                const languageService = inject(LanguageService);
+                provide: ENVIRONMENT_INITIALIZER,
-                return languageService.setInitialLanguage();
+                multi: true,
-            }),
+                useValue: async () => {
+                    const languageService = inject(LanguageService);
+                    return languageService.setInitialLanguage();
+                },
+            },
             {
                 provide: MAX_RETRIES_ON_SERVER_ERROR,
                 useFactory: () => config.MAX_RETRIES_ON_SERVER_ERROR,
@@ -257,7 +258,6 @@ export const appModuleFactory = (config: AppConfig) => {
                 provide: MAT_TOOLTIP_DEFAULT_OPTIONS,
                 useValue: {
                     disableTooltipInteractivity: true,
-                    showDelay: 1,
                 },
             },
             BaseDatePipe,

apps/red-ui/src/app/components/auth-error/auth-error.component.ts

@@ -7,7 +7,6 @@ import { AppConfig } from '@red/domain';
     selector: 'redaction-auth-error',
     templateUrl: './auth-error.component.html',
     styleUrls: ['./auth-error.component.scss'],
-    standalone: false,
 })
 export class AuthErrorComponent {
     readonly #config = getConfig<AppConfig>();

apps/red-ui/src/app/components/base-screen/base-screen.component.ts

@@ -20,7 +20,6 @@ const isSearchScreen: (url: string) => boolean = url => url.includes('/search');
 @Component({
     templateUrl: './base-screen.component.html',
     styleUrls: ['./base-screen.component.scss'],
-    standalone: false,
 })
 export class BaseScreenComponent {
     readonly roles = Roles;

apps/red-ui/src/app/components/breadcrumbs/breadcrumbs.component.ts

@@ -7,7 +7,6 @@ import { Breadcrumb, BreadcrumbDisplayType, BreadcrumbsService } from '@services
     selector: 'redaction-breadcrumbs',
     templateUrl: './breadcrumbs.component.html',
     styleUrls: ['./breadcrumbs.component.scss'],
-    standalone: false,
 })
 export class BreadcrumbsComponent {
     constructor(readonly breadcrumbsService: BreadcrumbsService) {}

apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.ts

@@ -13,7 +13,6 @@ import { firstValueFrom } from 'rxjs';
         entitiesService: FileDownloadService,
         component: DownloadsListScreenComponent,
     }),
-    standalone: false,
 })
 export class DownloadsListScreenComponent extends ListingComponent<DownloadStatus> implements OnDestroy {
     readonly #interval: number;

apps/red-ui/src/app/components/notifications/notifications.component.ts

@@ -25,7 +25,6 @@ function chronologically(first: string, second: string) {
     selector: 'redaction-notifications',
     templateUrl: './notifications.component.html',
     styleUrls: ['./notifications.component.scss'],
-    standalone: false,
 })
 export class NotificationsComponent {
     readonly hasUnreadNotifications$: Observable<boolean>;

apps/red-ui/src/app/components/skeleton/dashboard-skeleton/dashboard-skeleton.component.ts

@@ -5,6 +5,5 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
     templateUrl: './dashboard-skeleton.component.html',
     styleUrls: ['./dashboard-skeleton.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: false,
 })
 export class DashboardSkeletonComponent {}

apps/red-ui/src/app/components/skeleton/dossier-skeleton/dossier-skeleton.component.ts

@@ -5,7 +5,6 @@ import { ChangeDetectionStrategy, Component, OnInit, TemplateRef, ViewChild } fr
     templateUrl: './dossier-skeleton.component.html',
     styleUrls: ['./dossier-skeleton.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: false,
 })
 export class DossierSkeletonComponent implements OnInit {
     @ViewChild('workload1', { static: true }) workload1: TemplateRef<unknown>;

apps/red-ui/src/app/components/skeleton/skeleton-stats/skeleton-stats.component.ts

@@ -5,6 +5,5 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
     templateUrl: './skeleton-stats.component.html',
     styleUrls: ['./skeleton-stats.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: false,
 })
 export class SkeletonStatsComponent {}

apps/red-ui/src/app/components/skeleton/skeleton-top-bar/skeleton-top-bar.component.ts

@@ -6,7 +6,6 @@ import { Title } from '@angular/platform-browser';
     templateUrl: './skeleton-top-bar.component.html',
     styleUrls: ['./skeleton-top-bar.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: false,
 })
 export class SkeletonTopBarComponent {
     constructor(readonly titleService: Title) {}

apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.ts

@@ -9,7 +9,6 @@ import { MatMenuTrigger } from '@angular/material/menu';
     templateUrl: './spotlight-search.component.html',
     styleUrls: ['./spotlight-search.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: false,
 })
 export class SpotlightSearchComponent {
     @Input() actions: readonly SpotlightSearchAction[];

apps/red-ui/src/app/components/tenants-menu/tenants-menu.component.ts

@@ -9,7 +9,6 @@ interface ITenant extends IStoredTenantId {
     selector: 'app-tenants-menu',
     templateUrl: './tenants-menu.component.html',
     styleUrls: ['./tenants-menu.component.scss'],
-    standalone: false,
 })
 export class TenantsMenuComponent {
     readonly tenantsService = inject(TenantsService);

apps/red-ui/src/app/components/user-menu/user-menu.component.ts

@@ -20,7 +20,6 @@ interface MenuItem {
     selector: 'app-user-menu',
     templateUrl: './user-menu.component.html',
     styleUrls: ['./user-menu.component.scss'],
-    standalone: false,
 })
 export class UserMenuComponent {
     readonly currentUser = getCurrentUser<User>();

apps/red-ui/src/app/guards/dossier-template-exists.guard.ts

@@ -23,14 +23,12 @@ export function templateExistsWhenEnteringAdmin(): CanActivateFn {
         const defaultColorsService = inject(DefaultColorsService);
         const watermarksService = inject(WatermarkService);
         const router = inject(Router);
-        const rulesService = inject(RulesService);
         const isDocumine = getConfig().IS_DOCUMINE;
 
         const dossierTemplate = inject(DossierTemplateStatsService).get(dossierTemplateId);
         await firstValueFrom(fileAttributesService.loadFileAttributesConfig(dossierTemplateId));
         await firstValueFrom(dictionaryService.loadDictionaryDataForDossierTemplate(dossierTemplateId));
         await firstValueFrom(defaultColorsService.loadForDossierTemplate(dossierTemplateId));
-        await firstValueFrom(rulesService.getFor(dossierTemplateId));
         if (!isDocumine) {
             await firstValueFrom(watermarksService.loadForDossierTemplate(dossierTemplateId));
         }

apps/red-ui/src/app/guards/if-logged-in.guard.ts

@@ -40,7 +40,8 @@ export function ifLoggedIn(): AsyncGuard {
 
             logger.info('[KEYCLOAK] Keycloak init...');
             await keycloakInitializer(tenant);
-            logger.info('[KEYCLOAK] Keycloak init done for tenant: ', { tenant });
+            logger.info('[KEYCLOAK] Keycloak init done!');
+            console.log({ tenant });
             await tenantsService.selectTenant(tenant);
             await usersService.initialize();
             await licenseService.loadLicenses();
@@ -50,7 +51,6 @@ export function ifLoggedIn(): AsyncGuard {
                 const jwtToken = jwtDecode(token) as JwtToken;
                 const authTime = (jwtToken.auth_time || jwtToken.iat).toString();
                 localStorage.setItem('authTime', authTime);
-                localStorage.setItem('token', token);
             }
         }
 

apps/red-ui/src/app/models/file/annotation-permissions.utils.ts

@@ -69,5 +69,3 @@ export const canEditHint = (annotation: AnnotationWrapper) =>
     ((annotation.isHint && !annotation.isRuleBased) || annotation.isIgnoredHint) && !annotation.isImage;
 
 export const canEditImage = (annotation: AnnotationWrapper) => annotation.isImage;
-
-export const canRevertChanges = (annotation: AnnotationWrapper) => annotation.hasRedactionChanges;

apps/red-ui/src/app/models/file/annotation.permissions.ts

@@ -17,7 +17,6 @@ import {
     canRemoveRedaction,
     canResizeAnnotation,
     canResizeInDictionary,
-    canRevertChanges,
     canUndo,
 } from './annotation-permissions.utils';
 import { AnnotationWrapper } from './annotation.wrapper';
@@ -38,7 +37,6 @@ export class AnnotationPermissions {
     canEditAnnotations = true;
     canEditHints = true;
     canEditImages = true;
-    canRevertChanges = true;
 
     static forUser(
         isApprover: boolean,
@@ -77,7 +75,6 @@ export class AnnotationPermissions {
             permissions.canEditAnnotations = canEditAnnotation(annotation);
             permissions.canEditHints = canEditHint(annotation);
             permissions.canEditImages = canEditImage(annotation);
-            permissions.canRevertChanges = canRevertChanges(annotation);
             summedPermissions._merge(permissions);
         }
         return summedPermissions;
@@ -100,7 +97,6 @@ export class AnnotationPermissions {
         result.canEditAnnotations = permissions.reduce((acc, next) => acc && next.canEditAnnotations, true);
         result.canEditHints = permissions.reduce((acc, next) => acc && next.canEditHints, true);
         result.canEditImages = permissions.reduce((acc, next) => acc && next.canEditImages, true);
-        result.canRevertChanges = permissions.reduce((acc, next) => acc && next.canRevertChanges, true);
         return result;
     }
 

apps/red-ui/src/app/models/file/annotation.wrapper.ts

@@ -40,7 +40,7 @@ export class AnnotationWrapper implements IListable {
     typeLabel?: string;
     color: string;
     numberOfComments = 0;
-    firstBottomLeftPoint: IPoint;
+    firstTopLeftPoint: IPoint;
     shortContent: string;
     content: AnnotationContent;
     value: string;
@@ -84,10 +84,7 @@ export class AnnotationWrapper implements IListable {
     }
 
     get isRedactedImageHint() {
-        return (
+        return this.IMAGE_HINT && this.superType === SuperTypes.Redaction;
-            (this.IMAGE_HINT && this.superType === SuperTypes.Redaction) ||
-            (this.IMAGE_HINT && this.superType === SuperTypes.ManualRedaction)
-        );
     }
 
     get isSkippedImageHint() {
@@ -199,11 +196,11 @@ export class AnnotationWrapper implements IListable {
     }
 
     get x() {
-        return this.firstBottomLeftPoint.x;
+        return this.firstTopLeftPoint.x;
     }
 
     get y() {
-        return this.firstBottomLeftPoint.y;
+        return this.firstTopLeftPoint.y;
     }
 
     get legalBasis() {
@@ -228,7 +225,7 @@ export class AnnotationWrapper implements IListable {
         annotationWrapper.value = 'Imported';
         annotationWrapper.color = earmark.hexColor;
         annotationWrapper.positions = earmark.positions;
-        annotationWrapper.firstBottomLeftPoint = earmark.positions[0]?.topLeft;
+        annotationWrapper.firstTopLeftPoint = earmark.positions[0]?.topLeft;
         annotationWrapper.superTypeLabel = annotationTypesTranslations[annotationWrapper.superType];
 
         return annotationWrapper;
@@ -249,7 +246,7 @@ export class AnnotationWrapper implements IListable {
         annotationWrapper.isChangeLogEntry = logEntry.state === EntryStates.REMOVED || !!changeLogType;
         annotationWrapper.type = logEntry.type;
         annotationWrapper.value = logEntry.value;
-        annotationWrapper.firstBottomLeftPoint = { x: logEntry.positions[0].rectangle[0], y: logEntry.positions[0].rectangle[1] };
+        annotationWrapper.firstTopLeftPoint = { x: logEntry.positions[0].rectangle[0], y: logEntry.positions[0].rectangle[1] };
         annotationWrapper.pageNumber = logEntry.positions[0].pageNumber;
         annotationWrapper.positions = logEntry.positions.map(p => ({
             page: p.pageNumber,
@@ -378,7 +375,7 @@ export class AnnotationWrapper implements IListable {
 
     static #getShortContent(annotationWrapper: AnnotationWrapper, legalBasisList: ILegalBasis[]) {
         if (annotationWrapper.legalBasis) {
-            const lb = legalBasisList.find(lbm => lbm.technicalName?.toLowerCase().includes(annotationWrapper.legalBasis.toLowerCase()));
+            const lb = legalBasisList.find(lbm => lbm.reason?.toLowerCase().includes(annotationWrapper.legalBasis.toLowerCase()));
             if (lb) {
                 return lb.name;
             }

apps/red-ui/src/app/modules/account/account-side-nav/account-side-nav.component.html

@@ -1,14 +1,15 @@
 <iqser-side-nav [title]="'account-settings' | translate">
-    <ng-container *ngFor="let item of items">
+    @for (item of items; track item.helpModeKey) {
-        <div
+        @if (item.show) {
-            *ngIf="item.show"
+            <div
-            [routerLinkActiveOptions]="{ exact: false }"
+                [routerLinkActiveOptions]="{ exact: false }"
-            [routerLink]="'../' + item.screen"
+                [routerLink]="'../' + item.screen"
-            [attr.help-mode-key]="item.helpModeKey"
+                [attr.help-mode-key]="item.helpModeKey"
-            class="item"
+                class="item"
-            routerLinkActive="active"
+                routerLinkActive="active"
-        >
+            >
-            {{ item.label | translate }}
+                {{ item.label | translate }}
-        </div>
+            </div>
-    </ng-container>
+        }
+    }
 </iqser-side-nav>

apps/red-ui/src/app/modules/account/account-side-nav/account-side-nav.component.ts

@@ -6,7 +6,6 @@ import { User } from '@red/domain';
 import { getCurrentUser } from '@iqser/common-ui/lib/users';
 import { SideNavComponent } from '@common-ui/shared';
 import { TranslateModule } from '@ngx-translate/core';
-import { NgForOf, NgIf } from '@angular/common';
 import { RouterLink, RouterLinkActive } from '@angular/router';
 
 interface NavItem {
@@ -21,7 +20,8 @@ interface NavItem {
     templateUrl: './account-side-nav.component.html',
     styleUrls: ['./account-side-nav.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [SideNavComponent, TranslateModule, NgForOf, NgIf, RouterLinkActive, RouterLink],
+    standalone: true,
+    imports: [SideNavComponent, TranslateModule, RouterLinkActive, RouterLink],
 })
 export class AccountSideNavComponent {
     readonly currentUser = getCurrentUser<User>();

apps/red-ui/src/app/modules/account/base-account-screen/base-account-screen-component.html

@@ -13,6 +13,7 @@
                             <div class="heading-l" [translate]="translations[path]"></div>
                         </div>
                     }
+
                     <router-outlet></router-outlet>
                 </div>
             </div>

apps/red-ui/src/app/modules/account/base-account-screen/base-account-screen-component.ts

@@ -10,6 +10,7 @@ import { TranslateModule } from '@ngx-translate/core';
     templateUrl: './base-account-screen-component.html',
     styleUrls: ['./base-account-screen-component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
     imports: [NgClass, RouterOutlet, AccountSideNavComponent, TranslateModule],
 })
 export class BaseAccountScreenComponent implements OnInit {

apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen/notifications-screen.component.html

@@ -1,6 +1,6 @@
 <form (submit)="save()" [formGroup]="form">
     <div class="dialog-content">
-        <div *ngFor="let category of notificationCategories">
+        @for (category of notificationCategories; track category) {
             <div class="iqser-input-group header w-full">
                 <mat-slide-toggle color="primary" formControlName="{{ category }}Enabled"
                     >{{ translations[category] | translate }}
@@ -8,26 +8,31 @@
             </div>
 
             <!--            TODO: This lots of getters-->
-            <div *ngIf="isCategoryActive(category)" class="options-content">
+            @if (isCategoryActive(category)) {
-                <div [translate]="'notifications-screen.options-title'" class="statement"></div>
+                <div class="options-content">
+                    <div [translate]="'notifications-screen.options-title'" class="statement"></div>
 
-                <div *ngFor="let key of notificationGroupsKeys; let i = index" class="group">
+                    @for (key of notificationGroupsKeys; track key) {
-                    <div [translate]="translations[key]" class="group-title"></div>
+                        <div class="group">
-                    <div class="iqser-input-group">
+                            <div [translate]="translations[key]" class="group-title"></div>
-                        <ng-container *ngFor="let preference of getRssFilteredSettings(notificationGroupsValues[i])">
+                            <div class="iqser-input-group">
-                            <mat-checkbox
+                                @for (preference of getRssFilteredSettings(notificationGroupsValues[$index]); track preference) {
-                                (change)="addRemovePreference($event.checked, category, preference)"
+                                    @if (!skipPreference(preference)) {
-                                *ngIf="!skipPreference(preference)"
+                                        <mat-checkbox
-                                [checked]="isPreferenceChecked(category, preference)"
+                                            (change)="addRemovePreference($event.checked, category, preference)"
-                                color="primary"
+                                            [checked]="isPreferenceChecked(category, preference)"
-                            >
+                                            color="primary"
-                                {{ translations[preference] | translate }}
+                                        >
-                            </mat-checkbox>
+                                            {{ translations[preference] | translate }}
-                        </ng-container>
+                                        </mat-checkbox>
-                    </div>
+                                    }
+                                }
+                            </div>
+                        </div>
+                    }
                 </div>
-            </div>
+            }
-        </div>
+        }
     </div>
 
     <div class="dialog-actions">

apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen/notifications-screen.component.ts

@@ -14,7 +14,6 @@ import {
 import { firstValueFrom } from 'rxjs';
 import { notificationsSettingsTranslations } from '@translations/notifications-settings-translations';
 import { getCurrentUser } from '@iqser/common-ui/lib/users';
-import { NgForOf, NgIf } from '@angular/common';
 import { MatSlideToggle } from '@angular/material/slide-toggle';
 import { TranslateModule } from '@ngx-translate/core';
 import { MatCheckbox } from '@angular/material/checkbox';
@@ -25,7 +24,8 @@ const RSS_EXCLUDED_SETTINGS = ['USER_PROMOTED_TO_APPROVER', 'USER_DEGRADED_TO_RE
     templateUrl: './notifications-screen.component.html',
     styleUrls: ['./notifications-screen.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [ReactiveFormsModule, NgForOf, MatSlideToggle, TranslateModule, NgIf, MatCheckbox, IconButtonComponent],
+    standalone: true,
+    imports: [ReactiveFormsModule, MatSlideToggle, TranslateModule, MatCheckbox, IconButtonComponent],
 })
 export class NotificationsScreenComponent extends BaseFormComponent implements OnInit {
     readonly #toaster = inject(Toaster);

apps/red-ui/src/app/modules/account/screens/preferences/dialog-defaults/dialog-defaults.component.html

@@ -12,7 +12,7 @@
                         }}</mat-option>
                     </mat-select>
                 </mat-form-field>
-                <mat-checkbox *ngIf="displayExtraOptionAddRedaction" formControlName="addRedactionApplyToAll">{{
+                <mat-checkbox *ngIf="displayExtraOptionAddRedaction()" formControlName="addRedactionApplyToAll">{{
                     'dialog-defaults-form.extra-option-label' | translate
                 }}</mat-checkbox>
             </div>
@@ -25,7 +25,7 @@
                         }}</mat-option>
                     </mat-select>
                 </mat-form-field>
-                <mat-checkbox *ngIf="displayExtraOptionRemoveRedaction" formControlName="removeRedactionApplyToAll">{{
+                <mat-checkbox *ngIf="displayExtraOptionRemoveRedaction()" formControlName="removeRedactionApplyToAll">{{
                     'dialog-defaults-form.extra-option-label' | translate
                 }}</mat-checkbox>
             </div>
@@ -39,7 +39,7 @@
                         }}</mat-option>
                     </mat-select>
                 </mat-form-field>
-                <mat-checkbox *ngIf="displayExtraOptionRemoveRecommendation" formControlName="removeRecommendationApplyToAll">{{
+                <mat-checkbox *ngIf="displayExtraOptionRemoveRecommendation()" formControlName="removeRecommendationApplyToAll">{{
                     'dialog-defaults-form.extra-option-label' | translate
                 }}</mat-checkbox>
             </div>
@@ -51,7 +51,7 @@
                         <mat-option *ngFor="let option of hintAddOptions" [value]="option.value">{{ option.label | translate }}</mat-option>
                     </mat-select>
                 </mat-form-field>
-                <mat-checkbox *ngIf="displayExtraOptionAddHint" formControlName="addHintApplyToAll">{{
+                <mat-checkbox *ngIf="displayExtraOptionAddHint()" formControlName="addHintApplyToAll">{{
                     'dialog-defaults-form.extra-option-label' | translate
                 }}</mat-checkbox>
             </div>
@@ -62,7 +62,7 @@
                         <mat-option *ngFor="let option of removeOptions" [value]="option.value">{{ option.label | translate }}</mat-option>
                     </mat-select>
                 </mat-form-field>
-                <mat-checkbox *ngIf="displayExtraOptionRemoveHint" formControlName="removeHintApplyToAll">{{
+                <mat-checkbox *ngIf="displayExtraOptionRemoveHint()" formControlName="removeHintApplyToAll">{{
                     'dialog-defaults-form.extra-option-label' | translate
                 }}</mat-checkbox>
             </div>

apps/red-ui/src/app/modules/account/screens/preferences/dialog-defaults/dialog-defaults.component.ts

@@ -1,11 +1,11 @@
 import { NgForOf, NgIf } from '@angular/common';
-import { ChangeDetectorRef, Component, inject } from '@angular/core';
+import { ChangeDetectorRef, Component, computed, inject } from '@angular/core';
 import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatCheckbox } from '@angular/material/checkbox';
 import { MatFormField } from '@angular/material/form-field';
 import { MatOption, MatSelect } from '@angular/material/select';
 import { BaseFormComponent } from '@common-ui/form';
-import { AsControl } from '@common-ui/utils';
+import { AsControl, formValueToSignal } from '@common-ui/utils';
 import { IconButtonComponent } from '@iqser/common-ui';
 import { TranslateModule } from '@ngx-translate/core';
 import { PreferencesKeys, UserPreferenceService } from '@users/user-preference.service';
@@ -41,63 +41,60 @@ interface DefaultOptionsForm {
     selector: 'redaction-dialog-defaults',
     templateUrl: './dialog-defaults.component.html',
     styleUrl: './dialog-defaults.component.scss',
+    standalone: true,
     imports: [ReactiveFormsModule, TranslateModule, MatFormField, MatSelect, MatOption, NgForOf, MatCheckbox, NgIf, IconButtonComponent],
 })
 export class DialogDefaultsComponent extends BaseFormComponent {
     readonly #formBuilder = inject(FormBuilder);
     readonly #userPreferences = inject(UserPreferenceService);
     readonly #changeDetectorRef = inject(ChangeDetectorRef);
-    form: FormGroup<AsControl<DefaultOptionsForm>> = this.#formBuilder.group({
-        addRedaction: this.#userPreferences.getAddRedactionDefaultOption(),
-        addHint: this.#userPreferences.getAddHintDefaultOption(),
-        removeRedaction: this.#userPreferences.getRemoveRedactionDefaultOption(),
-        removeRecommendation: this.#userPreferences.getRemoveRecommendationDefaultOption(),
-        removeHint: this.#userPreferences.getRemoveHintDefaultOption(),
-        addRedactionApplyToAll: this.#userPreferences.getBool(PreferencesKeys.addRedactionDefaultExtraOption),
-        removeRedactionApplyToAll: this.#userPreferences.getBool(PreferencesKeys.removeRedactionDefaultExtraOption),
-        removeRecommendationApplyToAll: this.#userPreferences.getBool(PreferencesKeys.removeRecommendationDefaultExtraOption),
-        addHintApplyToAll: this.#userPreferences.getBool(PreferencesKeys.addHintDefaultExtraOption),
-        removeHintApplyToAll: this.#userPreferences.getBool(PreferencesKeys.removeHintDefaultExtraOption),
-    });
-    initialFormValue = this.form.getRawValue();
-
     readonly redactionAddOptions = redactionAddOptions;
     readonly hintAddOptions = hintAddOptions;
     readonly removeOptions = removeOptions;
     readonly redactionRemoveOptions = redactionRemoveOptions;
     readonly recommendationRemoveOptions = recommendationRemoveOptions;
 
-    constructor() {
+    form: FormGroup<AsControl<DefaultOptionsForm>> = this.#formBuilder.group(this.#initialFormValue);
-        super();
+    initialFormValue = this.form.getRawValue();
-    }
 
-    get displayExtraOptionAddRedaction() {
+    readonly formToSignalMap = {
-        return RedactOrHintOptions.IN_DOSSIER === this.form.controls.addRedaction.value;
+        addRedaction: formValueToSignal<DefaultOptionsForm['addRedaction']>(this.form.controls.addRedaction),
-    }
+        addHint: formValueToSignal<DefaultOptionsForm['addHint']>(this.form.controls.addHint),
+        removeRedaction: formValueToSignal<DefaultOptionsForm['removeRedaction']>(this.form.controls.removeRedaction),
+        removeHint: formValueToSignal<DefaultOptionsForm['removeHint']>(this.form.controls.removeHint),
+        removeRecommendation: formValueToSignal<DefaultOptionsForm['removeRecommendation']>(this.form.controls.removeRecommendation),
+    };
 
-    get displayExtraOptionAddHint() {
+    readonly displayExtraOptionAddRedaction = computed(() => RedactOrHintOptions.IN_DOSSIER === this.formToSignalMap['addRedaction']());
-        return RedactOrHintOptions.IN_DOSSIER === this.form.controls.addHint.value;
+    readonly displayExtraOptionAddHint = computed(() => RedactOrHintOptions.IN_DOSSIER === this.formToSignalMap['addHint']());
-    }
+    readonly displayExtraOptionRemoveRedaction = computed(() =>
-
+        (
-    get displayExtraOptionRemoveRedaction() {
-        return (
             [RemoveRedactionOptions.IN_DOSSIER, RemoveRedactionOptions.FALSE_POSITIVE] as Partial<
                 RemoveRedactionOption | SystemDefaultType
             >[]
-        ).includes(this.form.controls.removeRedaction.value);
+        ).includes(this.formToSignalMap['removeRedaction']()),
-    }
+    );
+    readonly displayExtraOptionRemoveHint = computed(() => RemoveRedactionOptions.IN_DOSSIER === this.formToSignalMap['removeHint']());
+    readonly displayExtraOptionRemoveRecommendation = computed(
+        () => RemoveRedactionOptions.DO_NOT_RECOMMEND === this.formToSignalMap['removeRecommendation'](),
+    );
 
-    get displayExtraOptionRemoveHint() {
+    get #initialFormValue() {
-        return RemoveRedactionOptions.IN_DOSSIER === this.form.controls.removeHint.value;
+        return {
-    }
+            addRedaction: this.#userPreferences.getAddRedactionDefaultOption(),
-
+            addHint: this.#userPreferences.getAddHintDefaultOption(),
-    get displayExtraOptionRemoveRecommendation() {
+            removeRedaction: this.#userPreferences.getRemoveRedactionDefaultOption(),
-        return RemoveRedactionOptions.DO_NOT_RECOMMEND === this.form.controls.removeRecommendation.value;
+            removeRecommendation: this.#userPreferences.getRemoveRecommendationDefaultOption(),
+            removeHint: this.#userPreferences.getRemoveHintDefaultOption(),
+            addRedactionApplyToAll: this.#userPreferences.getBool(PreferencesKeys.addRedactionDefaultExtraOption),
+            removeRedactionApplyToAll: this.#userPreferences.getBool(PreferencesKeys.removeRedactionDefaultExtraOption),
+            removeRecommendationApplyToAll: this.#userPreferences.getBool(PreferencesKeys.removeRecommendationDefaultExtraOption),
+            addHintApplyToAll: this.#userPreferences.getBool(PreferencesKeys.addHintDefaultExtraOption),
+            removeHintApplyToAll: this.#userPreferences.getBool(PreferencesKeys.removeHintDefaultExtraOption),
+        } as DefaultOptionsForm;
     }
 
     async save(): Promise<any> {
-        const formValue = this.form.value;
-
         if (this.initialFormValue.addRedaction !== this.form.controls.addRedaction.value) {
             await this.#userPreferences.saveAddRedactionDefaultOption(this.form.controls.addRedaction.value);
         }
@@ -114,7 +111,7 @@ export class DialogDefaultsComponent extends BaseFormComponent {
             await this.#userPreferences.saveRemoveHintDefaultOption(this.form.controls.removeHint.value);
         }
 
-        if (this.displayExtraOptionAddRedaction) {
+        if (this.displayExtraOptionAddRedaction()) {
             if (this.initialFormValue.addRedactionApplyToAll !== this.form.controls.addRedactionApplyToAll.value) {
                 await this.#userPreferences.saveAddRedactionDefaultExtraOption(this.form.controls.addRedactionApplyToAll.value);
             }
@@ -122,7 +119,7 @@ export class DialogDefaultsComponent extends BaseFormComponent {
             await this.#userPreferences.saveAddRedactionDefaultExtraOption('undefined');
         }
 
-        if (this.displayExtraOptionAddHint) {
+        if (this.displayExtraOptionAddHint()) {
             if (this.initialFormValue.addHintApplyToAll !== this.form.controls.addHintApplyToAll.value) {
                 await this.#userPreferences.saveAddHintDefaultExtraOption(this.form.controls.addHintApplyToAll.value);
             }
@@ -130,7 +127,7 @@ export class DialogDefaultsComponent extends BaseFormComponent {
             await this.#userPreferences.saveAddHintDefaultExtraOption('undefined');
         }
 
-        if (this.displayExtraOptionRemoveRedaction) {
+        if (this.displayExtraOptionRemoveRedaction()) {
             if (this.initialFormValue.removeRedactionApplyToAll !== this.form.controls.removeRedactionApplyToAll.value) {
                 await this.#userPreferences.saveRemoveRedactionDefaultExtraOption(this.form.controls.removeRedactionApplyToAll.value);
             }
@@ -138,7 +135,7 @@ export class DialogDefaultsComponent extends BaseFormComponent {
             await this.#userPreferences.saveRemoveRedactionDefaultExtraOption('undefined');
         }
 
-        if (this.displayExtraOptionRemoveHint) {
+        if (this.displayExtraOptionRemoveHint()) {
             if (this.initialFormValue.removeHintApplyToAll !== this.form.controls.removeHintApplyToAll.value) {
                 await this.#userPreferences.saveRemoveHintDefaultExtraOption(this.form.controls.removeHintApplyToAll.value);
             }
@@ -146,7 +143,7 @@ export class DialogDefaultsComponent extends BaseFormComponent {
             await this.#userPreferences.saveRemoveHintDefaultExtraOption('undefined');
         }
 
-        if (this.displayExtraOptionRemoveRecommendation) {
+        if (this.displayExtraOptionRemoveRecommendation()) {
             if (this.initialFormValue.removeRecommendationApplyToAll !== this.form.controls.removeRecommendationApplyToAll.value) {
                 await this.#userPreferences.saveRemoveRecommendationDefaultExtraOption(
                     this.form.controls.removeRecommendationApplyToAll.value,
@@ -163,17 +160,6 @@ export class DialogDefaultsComponent extends BaseFormComponent {
     }
 
     #patchValues() {
-        this.form.patchValue({
+        this.form.patchValue(this.#initialFormValue);
-            addRedaction: this.#userPreferences.getAddRedactionDefaultOption(),
-            addHint: this.#userPreferences.getAddHintDefaultOption(),
-            removeRedaction: this.#userPreferences.getRemoveRedactionDefaultOption(),
-            removeRecommendation: this.#userPreferences.getRemoveRecommendationDefaultOption(),
-            removeHint: this.#userPreferences.getRemoveHintDefaultOption(),
-            addRedactionApplyToAll: this.#userPreferences.getBool(PreferencesKeys.addRedactionDefaultExtraOption),
-            removeRedactionApplyToAll: this.#userPreferences.getBool(PreferencesKeys.removeRedactionDefaultExtraOption),
-            removeRecommendationApplyToAll: this.#userPreferences.getBool(PreferencesKeys.removeRecommendationDefaultExtraOption),
-            addHintApplyToAll: this.#userPreferences.getBool(PreferencesKeys.addHintDefaultExtraOption),
-            removeHintApplyToAll: this.#userPreferences.getBool(PreferencesKeys.removeHintDefaultExtraOption),
-        });
     }
 }

apps/red-ui/src/app/modules/account/screens/preferences/preferences.component.ts

@@ -44,6 +44,7 @@ const Screens = {
     templateUrl: './preferences.component.html',
     styleUrls: ['./preferences.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
     imports: [
         DialogDefaultsComponent,
         NgClass,

apps/red-ui/src/app/modules/account/screens/user-profile/confirm-password-dialog/confirm-password-dialog.component.ts

@@ -10,6 +10,7 @@ interface FormType {
 
 @Component({
     templateUrl: './confirm-password-dialog.component.html',
+    standalone: true,
     imports: [ReactiveFormsModule, IconButtonComponent, TranslateModule, CircleButtonComponent],
 })
 export class ConfirmPasswordDialogComponent extends BaseDialogComponent {

apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.html

@@ -16,16 +16,14 @@
                 <input formControlName="lastName" name="lastName" type="text" />
             </div>
 
-            <div class="iqser-input-group">
+            <div *ngIf="devMode" class="iqser-input-group">
                 <label [translate]="'top-bar.navigation-items.my-account.children.language.label'"></label>
                 <mat-form-field>
                     <mat-select formControlName="language">
                         <mat-select-trigger>{{ languageSelectLabel() | translate }}</mat-select-trigger>
-                        @for (language of languages; track language) {
+                        <mat-option *ngFor="let language of languages" [value]="language">
-                            <mat-option [value]="language">
+                            {{ translations[language] | translate }}
-                                {{ translations[language] | translate }}
+                        </mat-option>
-                            </mat-option>
-                        }
                     </mat-select>
                 </mat-form-field>
             </div>
@@ -34,13 +32,11 @@
                 <a (click)="resetPassword()" target="_blank"> {{ 'user-profile-screen.actions.change-password' | translate }}</a>
             </div>
 
-            @if (devMode) {
+            <div *ngIf="devMode" class="iqser-input-group">
-                <div class="iqser-input-group">
+                <mat-slide-toggle color="primary" formControlName="darkTheme">
-                    <mat-slide-toggle color="primary" formControlName="darkTheme">
+                    {{ 'user-profile-screen.form.dark-theme' | translate }}
-                        {{ 'user-profile-screen.form.dark-theme' | translate }}
+                </mat-slide-toggle>
-                    </mat-slide-toggle>
+            </div>
-                </div>
-            }
         </div>
     </div>
 

apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.ts

@@ -17,12 +17,12 @@ import { UserPreferenceService } from '@users/user-preference.service';
 import { UserService } from '@users/user.service';
 import { firstValueFrom } from 'rxjs';
 import { UserProfileDialogService } from '../services/user-profile-dialog.service';
+import { NgForOf, NgIf } from '@angular/common';
 import { MatFormField } from '@angular/material/form-field';
 import { MatOption, MatSelect, MatSelectTrigger } from '@angular/material/select';
 import { MatSlideToggle } from '@angular/material/slide-toggle';
 import { PdfViewer } from '../../../../pdf-viewer/services/pdf-viewer.service';
-import { formControlToSignal } from '@utils/functions';
+import { AsControl, formValueToSignal } from '@common-ui/utils';
-import { AsControl } from '@common-ui/utils';
 
 interface UserProfileForm {
     email: string;
@@ -36,11 +36,14 @@ interface UserProfileForm {
     templateUrl: './user-profile-screen.component.html',
     styleUrls: ['./user-profile-screen.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
     imports: [
         ReactiveFormsModule,
+        NgIf,
         MatFormField,
         MatSelect,
         MatOption,
+        NgForOf,
         TranslateModule,
         MatSlideToggle,
         IconButtonComponent,
@@ -55,7 +58,7 @@ export class UserProfileScreenComponent extends BaseFormComponent {
 
     readonly profileKeys = ['email', 'firstName', 'lastName'];
     readonly languages = this._translateService.langs;
-    readonly language = formControlToSignal<UserProfileForm['language']>(this.form.controls.language);
+    readonly language = formValueToSignal<UserProfileForm['language']>(this.form.controls.language);
     readonly languageSelectLabel = computed(() => this.translations[this.language()]);
 
     constructor(
@@ -78,28 +81,28 @@ export class UserProfileScreenComponent extends BaseFormComponent {
         this._loadingService.stop();
     }
 
-    get languageChanged(): boolean {
+    get #languageChanged(): boolean {
         return this.initialFormValue['language'] !== this.form.controls.language.value;
     }
 
-    get themeChanged(): boolean {
+    get #themeChanged(): boolean {
         return this.initialFormValue['darkTheme'] !== this.form.controls.darkTheme.value;
     }
 
-    get emailChanged(): boolean {
+    get #emailChanged(): boolean {
         return this.initialFormValue['email'] !== this.form.controls.email.value;
     }
 
-    get profileChanged(): boolean {
+    get #profileChanged(): boolean {
         return this.profileKeys.some(key => this.initialFormValue[key] !== this.form.get(key).value);
     }
 
     async save(): Promise<void> {
         try {
-            if (this.profileChanged) {
+            if (this.#profileChanged) {
                 const value = this.form.getRawValue() as IProfile;
 
-                if (this.emailChanged) {
+                if (this.#emailChanged) {
                     const dialogRef = this._dialogService.openDialog('confirmPassword');
                     const password = await firstValueFrom(dialogRef.afterClosed());
                     if (!password) {
@@ -115,12 +118,12 @@ export class UserProfileScreenComponent extends BaseFormComponent {
                 await firstValueFrom(this._userService.loadAll());
             }
 
-            if (this.languageChanged) {
+            if (this.#languageChanged) {
                 await this._languageService.change(this.form.controls.language.value);
                 await this._pdfViewer.instance?.UI.setLanguage(this._languageService.currentLanguage);
             }
 
-            if (this.themeChanged) {
+            if (this.#themeChanged) {
                 await this._userPreferenceService.saveTheme(this.form.controls.darkTheme.value ? 'dark' : 'light');
             }
 

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

@@ -1,24 +1,22 @@
-import { inject, provideEnvironmentInitializer } from '@angular/core';
-import { PendingChangesGuard } from '@guards/can-deactivate.guard';
-import { templateExistsWhenEnteringAdmin } from '@guards/dossier-template-exists.guard';
-import { DossierTemplatesGuard } from '@guards/dossier-templates.guard';
-import { entityExistsGuard } from '@guards/entity-exists-guard.service';
-import { PermissionsGuard } from '@guards/permissions-guard';
 import { CompositeRouteGuard, IqserPermissionsGuard, IqserRoutes } from '@iqser/common-ui';
-import { IqserAuthGuard } from '@iqser/common-ui/lib/users';
-import { DOSSIER_TEMPLATE_ID, ENTITY_TYPE } from '@red/domain';
-import { CopilotService } from '@services/copilot.service';
 import { RedRoleGuard } from '@users/red-role.guard';
-import { Roles } from '@users/roles';
+import { EntitiesListingScreenComponent } from './screens/entities-listing/entities-listing-screen.component';
+import { PendingChangesGuard } from '@guards/can-deactivate.guard';
+import { DefaultColorsScreenComponent } from './screens/default-colors/default-colors-screen.component';
+import { UserListingScreenComponent } from './screens/user-listing/user-listing-screen.component';
+import { DigitalSignatureScreenComponent } from './screens/digital-signature/digital-signature-screen.component';
+import { AuditScreenComponent } from './screens/audit/audit-screen.component';
+import { GeneralConfigScreenComponent } from './screens/general-config/general-config-screen.component';
 import { BaseAdminScreenComponent } from './base-admin-screen/base-admin-screen.component';
 import { BaseDossierTemplateScreenComponent } from './base-dossier-templates-screen/base-dossier-template-screen.component';
+import { DossierTemplatesGuard } from '@guards/dossier-templates.guard';
+import { DOSSIER_TEMPLATE_ID, ENTITY_TYPE } from '@red/domain';
+import { templateExistsWhenEnteringAdmin } from '@guards/dossier-template-exists.guard';
+import { entityExistsGuard } from '@guards/entity-exists-guard.service';
 import { BaseEntityScreenComponent } from './base-entity-screen/base-entity-screen.component';
-import { AuditScreenComponent } from './screens/audit/audit-screen.component';
+import { PermissionsGuard } from '@guards/permissions-guard';
-import { DefaultColorsScreenComponent } from './screens/default-colors/default-colors-screen.component';
+import { Roles } from '@users/roles';
-import { DigitalSignatureScreenComponent } from './screens/digital-signature/digital-signature-screen.component';
+import { IqserAuthGuard } from '@iqser/common-ui/lib/users';
-import { EntitiesListingScreenComponent } from './screens/entities-listing/entities-listing-screen.component';
-import { GeneralConfigScreenComponent } from './screens/general-config/general-config-screen.component';
-import { UserListingScreenComponent } from './screens/user-listing/user-listing-screen.component';
 import { AdminDialogService } from './services/admin-dialog.service';
 import { AuditService } from './services/audit.service';
 import { DigitalSignatureService } from './services/digital-signature.service';
@@ -80,12 +78,7 @@ const dossierTemplateIdRoutes: IqserRoutes = [
                     },
                     type: 'ENTITY',
                 },
-                providers: [
+                providers: [RulesService],
-                    RulesService,
-                    provideEnvironmentInitializer(() => {
-                        return inject(CopilotService).connectAsync('/api/llm/llm-websocket');
-                    }),
-                ],
             },
             {
                 path: 'component-rules',

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

@@ -5,6 +5,7 @@ import { RouterOutlet } from '@angular/router';
 @Component({
     templateUrl: './base-admin-screen.component.html',
     styleUrls: ['./base-admin-screen.component.scss'],
+    standalone: true,
     imports: [AdminSideNavComponent, RouterOutlet],
 })
 export class BaseAdminScreenComponent {}

apps/red-ui/src/app/modules/admin/base-dossier-templates-screen/base-dossier-template-screen.component.ts

@@ -9,6 +9,7 @@ import { AdminSideNavComponent } from '../shared/components/admin-side-nav/admin
 @Component({
     templateUrl: './base-dossier-template-screen.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
     imports: [
         DossierTemplateBreadcrumbsComponent,
         DossierTemplateActionsComponent,

apps/red-ui/src/app/modules/admin/base-entity-screen/base-entity-screen.component.ts

@@ -18,6 +18,7 @@ import { AdminSideNavComponent } from '../shared/components/admin-side-nav/admin
 @Component({
     templateUrl: './base-entity-screen.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
     imports: [
         DossierTemplateBreadcrumbsComponent,
         CircleButtonComponent,

apps/red-ui/src/app/modules/admin/components/users-stats/users-stats.component.ts

@@ -8,6 +8,7 @@ import { DonutChartComponent } from '@shared/components/donut-chart/donut-chart.
     selector: 'redaction-users-stats',
     templateUrl: './users-stats.component.html',
     styleUrls: ['./users-stats.component.scss'],
+    standalone: true,
     imports: [CircleButtonComponent, TranslateModule, DonutChartComponent],
 })
 export class UsersStatsComponent {

apps/red-ui/src/app/modules/admin/dialogs/add-clone-dossier-template-dialog/add-clone-dossier-template-dialog.component.ts

@@ -16,6 +16,7 @@ export interface CloneTemplateData {
 @Component({
     templateUrl: './add-clone-dossier-template-dialog.component.html',
     styleUrls: ['./add-clone-dossier-template-dialog.component.scss'],
+    standalone: true,
     imports: [TranslateModule, ReactiveFormsModule, IconButtonComponent, CircleButtonComponent],
 })
 export class AddCloneDossierTemplateDialogComponent extends BaseDialogComponent {

apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/add-edit-user-dialog.component.ts

@@ -8,6 +8,7 @@ import { UserDetailsComponent } from './user-details/user-details.component';
 @Component({
     selector: 'redaction-add-edit-user-dialog',
     templateUrl: './add-edit-user-dialog.component.html',
+    standalone: true,
     imports: [UserDetailsComponent, ResetPasswordComponent, CircleButtonComponent],
 })
 export class AddEditUserDialogComponent extends BaseDialogComponent {

apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/reset-password/reset-password.component.ts

@@ -10,6 +10,7 @@ import { NamePipe } from '@common-ui/users/name.pipe';
 @Component({
     selector: 'redaction-reset-password',
     templateUrl: './reset-password.component.html',
+    standalone: true,
     imports: [TranslateModule, NamePipe, ReactiveFormsModule, IconButtonComponent],
 })
 export class ResetPasswordComponent {

apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/user-details/user-details.component.html

@@ -32,7 +32,7 @@
                     [formControlName]="role"
                     color="primary"
                 >
-                    {{ translations[role] | translate: { count: 1 } }}
+                    {{ translations[role] | translate }}
                 </mat-checkbox>
             </div>
         </div>

apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/user-details/user-details.component.ts

@@ -15,6 +15,7 @@ import { NgForOf, NgIf } from '@angular/common';
     selector: 'redaction-user-details',
     templateUrl: './user-details.component.html',
     styleUrls: ['./user-details.component.scss'],
+    standalone: true,
     imports: [TranslateModule, ReactiveFormsModule, MatCheckbox, NgForOf, IconButtonComponent, NgIf],
 })
 export class UserDetailsComponent extends BaseFormComponent implements OnInit {
@@ -37,7 +38,7 @@ export class UserDetailsComponent extends BaseFormComponent implements OnInit {
         super();
     }
 
-    get activeRoles(): string[] {
+    get #activeRoles(): string[] {
         return this.ROLES.reduce((acc, role) => {
             if (this.form.get(role).value) {
                 acc.push(role);
@@ -46,7 +47,7 @@ export class UserDetailsComponent extends BaseFormComponent implements OnInit {
         }, []);
     }
 
-    get sendSetPasswordMail() {
+    get #sendSetPasswordMail() {
         return !this.form.controls.sendSetPasswordMail.value;
     }
 
@@ -88,8 +89,8 @@ export class UserDetailsComponent extends BaseFormComponent implements OnInit {
         this._loadingService.start();
         const userData: IProfileUpdateRequest = {
             ...this.form.getRawValue(),
-            roles: this.activeRoles,
+            roles: this.#activeRoles,
-            sendSetPasswordMail: this.sendSetPasswordMail,
+            sendSetPasswordMail: this.#sendSetPasswordMail,
         };
 
         if (!this.user()) {

apps/red-ui/src/app/modules/admin/dialogs/add-entity-dialog/add-entity-dialog.component.ts

@@ -19,6 +19,7 @@ interface DialogData {
 @Component({
     templateUrl: './add-entity-dialog.component.html',
     styleUrls: ['./add-entity-dialog.component.scss'],
+    standalone: true,
     imports: [AddEditEntityComponent, TranslateModule, IconButtonComponent, NgIf, CircleButtonComponent, HelpButtonComponent],
 })
 export class AddEntityDialogComponent extends BaseDialogComponent {

apps/red-ui/src/app/modules/admin/dialogs/audit-info-dialog/audit-info-dialog.component.ts

@@ -16,6 +16,7 @@ type OrderFn = (a: KeyValue<string, string>, b: KeyValue<string, string>) => num
     templateUrl: './audit-info-dialog.component.html',
     styleUrls: ['./audit-info-dialog.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
     imports: [TranslateModule, NgForOf, KeyValuePipe, HumanizePipe, CircleButtonComponent, JsonPipe],
 })
 export class AuditInfoDialogComponent extends BaseDialogComponent {

apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.ts

@@ -20,6 +20,7 @@ const KMS_SIGNATURE_DIALOG_WIDTH = '810px';
 @Component({
     templateUrl: './configure-certificate-dialog.component.html',
     styleUrls: ['./configure-certificate-dialog.component.scss'],
+    standalone: true,
     imports: [
         DetailsRadioComponent,
         NgIf,

apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/kms-signature-configuration/kms-signature-configuration.component.ts

@@ -13,6 +13,7 @@ import { TranslateModule } from '@ngx-translate/core';
     templateUrl: './kms-signature-configuration.component.html',
     styleUrls: ['./kms-signature-configuration.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
     imports: [UploadFileComponent, ReactiveFormsModule, NgIf, TranslateModule],
 })
 export class KmsSignatureConfigurationComponent extends BaseSignatureConfigurationComponent implements OnInit {

apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/pkcs-signature-configuration/pkcs-signature-configuration.component.ts

@@ -14,6 +14,7 @@ import { TranslateModule } from '@ngx-translate/core';
     templateUrl: './pkcs-signature-configuration.component.html',
     styleUrls: ['./pkcs-signature-configuration.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
     imports: [UploadFileComponent, ReactiveFormsModule, NgIf, TranslateModule],
 })
 export class PkcsSignatureConfigurationComponent extends BaseSignatureConfigurationComponent implements OnInit {

apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.ts

@@ -20,6 +20,7 @@ interface IEditColorData {
 @Component({
     templateUrl: './edit-color-dialog.component.html',
     styleUrls: ['./edit-color-dialog.component.scss'],
+    standalone: true,
     imports: [ReactiveFormsModule, TranslateModule, ColorPickerModule, MatIcon, NgIf, IconButtonComponent, CircleButtonComponent],
 })
 export class EditColorDialogComponent extends BaseDialogComponent {

apps/red-ui/src/app/modules/admin/dialogs/smtp-auth-dialog/smtp-auth-dialog.component.ts

@@ -9,6 +9,7 @@ import { TranslateModule } from '@ngx-translate/core';
 @Component({
     selector: 'redaction-smtp-auth-dialog',
     templateUrl: './smtp-auth-dialog.component.html',
+    standalone: true,
     imports: [ReactiveFormsModule, TranslateModule, IconButtonComponent, CircleButtonComponent, MatDialogClose],
 })
 export class SmtpAuthDialogComponent extends BaseDialogComponent {

apps/red-ui/src/app/modules/admin/dialogs/upload-dictionary-dialog/upload-dictionary-dialog.component.ts

@@ -7,6 +7,7 @@ import { TranslateModule } from '@ngx-translate/core';
     templateUrl: './upload-dictionary-dialog.component.html',
     styleUrls: ['./upload-dictionary-dialog.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
     imports: [IconButtonComponent, TranslateModule],
 })
 export class UploadDictionaryDialogComponent {

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

@@ -36,6 +36,7 @@ const PAGE_SIZE = 50;
     templateUrl: './audit-screen.component.html',
     styleUrls: ['./audit-screen.component.scss'],
     providers: listingProvidersFactory(AuditScreenComponent),
+    standalone: true,
     imports: [
         IqserListingModule,
         TranslateModule,

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

@@ -1,18 +1,12 @@
 import { Component, OnInit, signal } from '@angular/core';
-import {
+import { BaseFormComponent, CircleButtonComponent, IconButtonComponent, listingProvidersFactory, LoadingService } from '@iqser/common-ui';
-    BaseFormComponent,
-    CircleButtonComponent,
-    HasScrollbarDirective,
-    IconButtonComponent,
-    listingProvidersFactory,
-    LoadingService,
-} from '@iqser/common-ui';
 import { ComponentDefinitionsService } from '@services/entity-services/component-definitions.service';
 import { firstValueFrom } from 'rxjs';
 import { getParam } from '@common-ui/utils';
 import { DOSSIER_TEMPLATE_ID, IComponentDefinition } from '@red/domain';
 import { toObservable } from '@angular/core/rxjs-interop';
-import { CommonModule } from '@angular/common';
+import { InputWithActionComponent } from '@common-ui/inputs/input-with-action/input-with-action.component';
+import { CommonModule, NgIf } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
 import { PermissionsService } from '@services/permissions.service';
 import { MatIcon } from '@angular/material/icon';
@@ -24,8 +18,11 @@ import { AdminDialogService } from '../../services/admin-dialog.service';
     templateUrl: './component-definitions.component.html',
     styleUrls: ['./component-definitions.component.scss'],
     providers: listingProvidersFactory(ComponentDefinitionsComponent),
+    standalone: true,
     imports: [
         IconButtonComponent,
+        InputWithActionComponent,
+        NgIf,
         TranslateModule,
         CommonModule,
         MatIcon,
@@ -35,7 +32,6 @@ import { AdminDialogService } from '../../services/admin-dialog.service';
         FormsModule,
         ReactiveFormsModule,
         CircleButtonComponent,
-        HasScrollbarDirective,
     ],
 })
 export default class ComponentDefinitionsComponent extends BaseFormComponent implements OnInit {
@@ -107,7 +103,6 @@ export default class ComponentDefinitionsComponent extends BaseFormComponent imp
         this._dialogService.openDialog('confirm', null, async () => {
             await firstValueFrom(this._componentDefinitionsService.deleteComponentDefinitions(this.#dossierTemplateId, [componentId]));
             await this.#loadData();
-            this.selectedComponent = null;
         });
     }
 

apps/red-ui/src/app/modules/admin/screens/component-mappings/add-edit-component-mapping-dialog/add-edit-component-mapping-dialog.component.ts

@@ -7,7 +7,7 @@ import { NgForOf, NgIf } from '@angular/common';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatOption } from '@angular/material/autocomplete';
-import { MatSelect } from '@angular/material/select';
+import { MatSelect, MatSelectTrigger } from '@angular/material/select';
 import { fileAttributeEncodingTypesTranslations } from '@translations/file-attribute-encoding-types-translations';
 import { firstValueFrom } from 'rxjs';
 import { ComponentMappingsService } from '@services/entity-services/component-mappings.service';
@@ -31,6 +31,7 @@ interface DialogResult {
 @Component({
     templateUrl: './add-edit-component-mapping-dialog.component.html',
     styleUrls: ['./add-edit-component-mapping-dialog.component.scss'],
+    standalone: true,
     imports: [
         TranslateModule,
         ReactiveFormsModule,
@@ -40,6 +41,7 @@ interface DialogResult {
         CircleButtonComponent,
         MatDialogModule,
         MatOption,
+        MatSelectTrigger,
         MatSelect,
         IconButtonComponent,
         UploadFileComponent,

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

@@ -1,5 +1,6 @@
 import { AsyncPipe, NgIf } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
+import { RouterLink } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { InputWithActionComponent } from '@common-ui/inputs/input-with-action/input-with-action.component';
 import { getCurrentUser } from '@common-ui/users';
@@ -24,6 +25,9 @@ import { Roles } from '@users/roles';
 import { combineLatest, firstValueFrom } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
 import { AdminDialogService } from '../../services/admin-dialog.service';
+import { AdminSideNavComponent } from '../../shared/components/admin-side-nav/admin-side-nav.component';
+import { DossierTemplateActionsComponent } from '../../shared/components/dossier-template-actions/dossier-template-actions.component';
+import { DossierTemplateBreadcrumbsComponent } from '../../shared/components/dossier-template-breadcrumbs/dossier-template-breadcrumbs.component';
 import { AddEditComponentMappingDialogComponent } from './add-edit-component-mapping-dialog/add-edit-component-mapping-dialog.component';
 import { download } from '@utils/file-download-utils';
 import { MatTooltip } from '@angular/material/tooltip';
@@ -32,11 +36,16 @@ import { MatTooltip } from '@angular/material/tooltip';
     templateUrl: './component-mappings-screen.component.html',
     styleUrls: ['./component-mappings-screen.component.scss'],
     providers: listingProvidersFactory(ComponentMappingsScreenComponent),
+    standalone: true,
     imports: [
+        DossierTemplateBreadcrumbsComponent,
         AsyncPipe,
         NgIf,
+        DossierTemplateActionsComponent,
         CircleButtonComponent,
         TranslateModule,
+        RouterLink,
+        AdminSideNavComponent,
         IqserListingModule,
         InputWithActionComponent,
         IconButtonComponent,

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

@@ -33,6 +33,7 @@ interface ListItem extends IListable {
     styleUrls: ['./default-colors-screen.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: listingProvidersFactory(DefaultColorsScreenComponent),
+    standalone: true,
     imports: [IqserListingModule, NgStyle, CircleButtonComponent, IqserAllowDirective, TranslateModule, AsyncPipe, NgIf],
 })
 export class DefaultColorsScreenComponent extends ListingComponent<ListItem> implements OnInit {

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

@@ -25,6 +25,7 @@ import { DigitalSignatureService } from '../../services/digital-signature.servic
     selector: 'redaction-digital-signature-screen',
     templateUrl: './digital-signature-screen.component.html',
     styleUrls: ['./digital-signature-screen.component.scss'],
+    standalone: true,
     imports: [
         IqserListingModule,
         EmptyStateComponent,

apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.ts

@@ -20,6 +20,7 @@ export interface AddEditDossierAttributeDialogData {
 @Component({
     templateUrl: './add-edit-dossier-attribute-dialog.component.html',
     styleUrls: ['./add-edit-dossier-attribute-dialog.component.scss'],
+    standalone: true,
     imports: [
         TranslateModule,
         ReactiveFormsModule,

apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.ts

@@ -35,6 +35,7 @@ import { TableItemComponent } from './table-item/table-item.component';
         entitiesService: DossierAttributesService,
         component: DossierAttributesListingScreenComponent,
     }),
+    standalone: true,
     imports: [
         IqserListingModule,
         TranslateModule,

apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/table-item/table-item.component.ts

@@ -10,6 +10,7 @@ import { NgIf } from '@angular/common';
     selector: 'redaction-table-item [attribute] [canEditDossierAttributes]',
     templateUrl: './table-item.component.html',
     styleUrls: ['./table-item.component.scss'],
+    standalone: true,
     imports: [MatTooltip, TranslateModule, CircleButtonComponent, NgIf],
 })
 export class TableItemComponent {

apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component.ts

@@ -18,6 +18,7 @@ export interface AddEditDossierStateDialogData {
 @Component({
     templateUrl: './add-edit-dossier-state-dialog.component.html',
     styleUrls: ['./add-edit-dossier-state-dialog.component.scss'],
+    standalone: true,
     imports: [TranslateModule, ReactiveFormsModule, ColorPickerModule, MatIcon, NgIf, IconButtonComponent, CircleButtonComponent],
 })
 export class AddEditDossierStateDialogComponent extends BaseDialogComponent {

apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.ts

@@ -11,7 +11,7 @@ import { ArchivedDossiersService } from '@services/dossiers/archived-dossiers.se
 import { TranslateModule } from '@ngx-translate/core';
 import { MatCheckbox } from '@angular/material/checkbox';
 import { MatFormField } from '@angular/material/form-field';
-import { MatOption, MatSelect } from '@angular/material/select';
+import { MatOption, MatSelect, MatSelectTrigger } from '@angular/material/select';
 import { NgForOf, NgIf } from '@angular/common';
 
 export interface ConfirmDeleteDossierStateDialogData {
@@ -23,11 +23,13 @@ export interface ConfirmDeleteDossierStateDialogData {
 @Component({
     templateUrl: './confirm-delete-dossier-state-dialog.component.html',
     styleUrls: ['./confirm-delete-dossier-state-dialog.component.scss'],
+    standalone: true,
     imports: [
         TranslateModule,
         ReactiveFormsModule,
         MatCheckbox,
         MatFormField,
+        MatSelectTrigger,
         MatSelect,
         MatOption,
         NgForOf,

apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen/dossier-states-listing-screen.component.ts

@@ -33,6 +33,7 @@ import { DossierStatesTableItemComponent } from '../dossier-states-table-item/do
     templateUrl: './dossier-states-listing-screen.component.html',
     styleUrls: ['./dossier-states-listing-screen.component.scss'],
     providers: listingProvidersFactory(DossierStatesListingScreenComponent),
+    standalone: true,
     imports: [
         IqserListingModule,
         DonutChartComponent,

apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-table-item/dossier-states-table-item.component.ts

@@ -20,6 +20,7 @@ import { SnakeCasePipe } from '@common-ui/pipes/snake-case.pipe';
     selector: 'redaction-dossier-states-table-item',
     templateUrl: './dossier-states-table-item.component.html',
     styleUrls: ['./dossier-states-table-item.component.scss'],
+    standalone: true,
     imports: [MatTooltip, CircleButtonComponent, TranslateModule, NgIf, SnakeCasePipe],
 })
 export class DossierStatesTableItemComponent {

apps/red-ui/src/app/modules/admin/screens/dossier-templates-listing/dossier-templates-listing-screen/dossier-templates-listing-screen.component.ts

@@ -33,6 +33,7 @@ import { TableItemComponent } from '../table-item/table-item.component';
         entitiesService: DossierTemplatesService,
         component: DossierTemplatesListingScreenComponent,
     }),
+    standalone: true,
     imports: [
         IqserListingModule,
         TranslateModule,

apps/red-ui/src/app/modules/admin/screens/dossier-templates-listing/table-item/table-item.component.ts

@@ -17,6 +17,7 @@ import { DatePipe } from '@shared/pipes/date.pipe';
     templateUrl: './table-item.component.html',
     styleUrls: ['./table-item.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
     imports: [MatTooltip, NgIf, AsyncPipe, MatIcon, TranslateModule, DatePipe, DossierTemplateActionsComponent, InitialsAvatarComponent],
 })
 export class TableItemComponent implements OnChanges {

apps/red-ui/src/app/modules/admin/screens/entities-listing/entities-listing-screen.component.html

@@ -87,7 +87,6 @@
                             [routerLink]="dict.routerLink"
                             [tooltip]="'entities-listing.action.edit' | translate"
                             icon="iqser:edit"
-                            iqserStopPropagation
                         ></iqser-circle-button>
                     </div>
                 </div>

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

@@ -11,7 +11,6 @@ import {
     ListingComponent,
     listingProvidersFactory,
     LoadingService,
-    StopPropagationDirective,
     TableColumnConfig,
 } from '@iqser/common-ui';
 import { getParam } from '@iqser/common-ui/lib/utils';
@@ -30,6 +29,7 @@ import { AdminDialogService } from '../../services/admin-dialog.service';
     templateUrl: './entities-listing-screen.component.html',
     styleUrls: ['./entities-listing-screen.component.scss'],
     providers: listingProvidersFactory(EntitiesListingScreenComponent),
+    standalone: true,
     imports: [
         IqserListingModule,
         TranslateModule,
@@ -41,7 +41,6 @@ import { AdminDialogService } from '../../services/admin-dialog.service';
         AnnotationIconComponent,
         AsyncPipe,
         RouterLink,
-        StopPropagationDirective,
     ],
 })
 export class EntitiesListingScreenComponent extends ListingComponent<Dictionary> implements OnInit {

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

@@ -16,6 +16,7 @@ import { AsyncPipe } from '@angular/common';
     templateUrl: './dictionary-screen.component.html',
     styleUrls: ['./dictionary-screen.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
     imports: [AsyncPipe, DictionaryManagerComponent],
 })
 export class DictionaryScreenComponent implements OnInit {

apps/red-ui/src/app/modules/admin/screens/entities/screens/entity-info/entity-info.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, HostListener, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { getConfig, HasScrollbarDirective, IconButtonComponent, IconButtonTypes } from '@iqser/common-ui';
+import { getConfig, HasScrollbarDirective, HelpButtonComponent, IconButtonComponent, IconButtonTypes } from '@iqser/common-ui';
 import { IqserEventTarget } from '@iqser/common-ui/lib/utils';
 import { Dictionary, DOSSIER_TEMPLATE_ID, ENTITY_TYPE } from '@red/domain';
 import { DictionariesMapService } from '@services/entity-services/dictionaries-map.service';
@@ -17,7 +17,17 @@ import { TranslateModule } from '@ngx-translate/core';
     templateUrl: './entity-info.component.html',
     styleUrls: ['./entity-info.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [HasScrollbarDirective, MatIcon, NgIf, TranslateModule, AsyncPipe, IconButtonComponent, AddEditEntityComponent],
+    standalone: true,
+    imports: [
+        HasScrollbarDirective,
+        MatIcon,
+        NgIf,
+        TranslateModule,
+        AsyncPipe,
+        IconButtonComponent,
+        AddEditEntityComponent,
+        HelpButtonComponent,
+    ],
 })
 export class EntityInfoComponent {
     @ViewChild(AddEditEntityComponent) private readonly _addEditEntityComponent: AddEditEntityComponent;

apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts

@@ -22,6 +22,7 @@ export interface AddEditFileAttributeDialogData {
 @Component({
     templateUrl: './add-edit-file-attribute-dialog.component.html',
     styleUrls: ['./add-edit-file-attribute-dialog.component.scss'],
+    standalone: true,
     imports: [
         ReactiveFormsModule,
         TranslateModule,

apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-configurations-dialog/file-attributes-configurations-dialog.component.ts

@@ -13,6 +13,7 @@ import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 @Component({
     templateUrl: './file-attributes-configurations-dialog.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
     imports: [
         ReactiveFormsModule,
         MatSlideToggleModule,
@@ -57,7 +58,6 @@ export class FileAttributesConfigurationsDialogComponent extends BaseDialogCompo
         if (supportCsvMapping) {
             return {
                 ...this.#configuration,
-                keyColumn: this.form.get('keyColumn').value,
                 filenameMappingColumnHeaderName: this.form.get('keyColumn').value,
                 delimiter: this.form.get('delimiter').value,
                 encoding: this.form.get('encodingType').value,
@@ -67,14 +67,13 @@ export class FileAttributesConfigurationsDialogComponent extends BaseDialogCompo
         return {
             ...this.#configuration,
             filenameMappingColumnHeaderName: '',
-            keyColumn: this.form.get('keyColumn').value,
         };
     }
 
     #getForm() {
         return this._formBuilder.group({
             supportCsvMapping: [!!this.#configuration.filenameMappingColumnHeaderName],
-            keyColumn: [this.#configuration.filenameMappingColumnHeaderName || this.#configuration.keyColumn || '', [Validators.required]],
+            keyColumn: [this.#configuration.filenameMappingColumnHeaderName || '', [Validators.required]],
             delimiter: [this.#configuration.delimiter || '', [Validators.required]],
             encodingType: [this.#configuration.encoding || FileAttributeEncodingTypes['UTF-8'], [Validators.required]],
         });

apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts

@@ -2,8 +2,8 @@ import { AsyncPipe, NgForOf, NgIf } from '@angular/common';
 import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatFormField } from '@angular/material/form-field';
-import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
+import { MatMenu, MatMenuTrigger } from '@angular/material/menu';
-import { MatOption, MatSelect } from '@angular/material/select';
+import { MatOption, MatSelect, MatSelectTrigger } from '@angular/material/select';
 import { MatSlideToggle } from '@angular/material/slide-toggle';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { ChevronButtonComponent } from '@common-ui/buttons/chevron-button';
@@ -19,6 +19,7 @@ import { fileAttributeTypesTranslations } from '@translations/file-attribute-typ
     templateUrl: './active-fields-listing.component.html',
     styleUrls: ['./active-fields-listing.component.scss'],
     providers: listingProvidersFactory(ActiveFieldsListingComponent),
+    standalone: true,
     imports: [
         IqserListingModule,
         CircleButtonComponent,
@@ -29,6 +30,7 @@ import { fileAttributeTypesTranslations } from '@translations/file-attribute-typ
         MatMenu,
         EditableInputComponent,
         MatFormField,
+        MatSelectTrigger,
         MatSelect,
         MatOption,
         FormsModule,
@@ -36,7 +38,6 @@ import { fileAttributeTypesTranslations } from '@translations/file-attribute-typ
         RoundCheckboxComponent,
         NgForOf,
         NgIf,
-        MatMenuItem,
     ],
 })
 export class ActiveFieldsListingComponent extends ListingComponent<IField> implements OnChanges {

apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts

@@ -4,7 +4,7 @@ import { AbstractControl, ReactiveFormsModule, UntypedFormBuilder, UntypedFormGr
 import { MatAutocomplete, MatAutocompleteTrigger, MatOption } from '@angular/material/autocomplete';
 import { MAT_DIALOG_DATA, MatDialogClose, MatDialogRef } from '@angular/material/dialog';
 import { MatFormField } from '@angular/material/form-field';
-import { MatSelect } from '@angular/material/select';
+import { MatSelect, MatSelectTrigger } from '@angular/material/select';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { InputWithActionComponent } from '@common-ui/inputs/input-with-action/input-with-action.component';
 import {
@@ -38,6 +38,7 @@ export interface IFileAttributesCSVImportData {
     styleUrls: ['./file-attributes-csv-import-dialog.component.scss'],
     providers: listingProvidersFactory(),
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
     imports: [
         ReactiveFormsModule,
         MatFormField,
@@ -45,6 +46,7 @@ export interface IFileAttributesCSVImportData {
         MatAutocomplete,
         AsyncPipe,
         MatOption,
+        MatSelectTrigger,
         MatSelect,
         CircleButtonComponent,
         NgIf,

apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts

@@ -46,6 +46,7 @@ import {
     templateUrl: './file-attributes-listing-screen.component.html',
     styleUrls: ['./file-attributes-listing-screen.component.scss'],
     providers: listingProvidersFactory(FileAttributesListingScreenComponent),
+    standalone: true,
     imports: [
         IqserListingModule,
         NgForOf,
@@ -85,7 +86,6 @@ export default class FileAttributesListingScreenComponent extends ListingCompone
         },
     ];
     readonly roles = Roles;
-    keyColumnValue: string = '';
 
     constructor(
         readonly permissionsService: PermissionsService,
@@ -172,13 +172,13 @@ export default class FileAttributesListingScreenComponent extends ListingCompone
             FileAttributesConfigurationsDialogComponent,
             {
                 ...defaultDialogConfig,
-                data: { ...this.#existingConfiguration, keyColumn: this.keyColumnValue },
+                data: this.#existingConfiguration,
             },
         );
 
         const configuration = await firstValueFrom(ref.afterClosed());
+
         if (configuration) {
-            this.keyColumnValue = configuration.keyColumn;
             await this.#setConfigAndLoadData(configuration);
         }
     }

apps/red-ui/src/app/modules/admin/screens/general-config/general-config-form/general-config-form.component.ts

@@ -13,6 +13,7 @@ import { MatSlideToggle } from '@angular/material/slide-toggle';
 @Component({
     selector: 'redaction-general-config-form',
     templateUrl: './general-config-form.component.html',
+    standalone: true,
     imports: [ReactiveFormsModule, TranslateModule, NgIf, MatSlideToggle, IconButtonComponent],
 })
 export class GeneralConfigFormComponent extends BaseFormComponent implements OnInit {

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

@@ -13,6 +13,7 @@ import { ILicenseFeature } from '@red/domain';
     selector: 'redaction-general-config-screen',
     templateUrl: './general-config-screen.component.html',
     styleUrls: ['./general-config-screen.component.scss'],
+    standalone: true,
     imports: [IqserListingModule, GeneralConfigFormComponent, SystemPreferencesFormComponent, SmtpFormComponent, TranslateModule],
 })
 export class GeneralConfigScreenComponent extends BaseFormComponent implements AfterViewInit {

apps/red-ui/src/app/modules/admin/screens/general-config/smtp-form/smtp-form.component.ts

@@ -21,6 +21,7 @@ import { NgIf } from '@angular/common';
 @Component({
     selector: 'redaction-smtp-form',
     templateUrl: './smtp-form.component.html',
+    standalone: true,
     imports: [ReactiveFormsModule, TranslateModule, MatSlideToggle, IconButtonComponent, NgIf],
 })
 export class SmtpFormComponent extends BaseFormComponent implements OnInit {

apps/red-ui/src/app/modules/admin/screens/general-config/system-preferences-form/system-preferences-form.component.ts

@@ -15,6 +15,7 @@ export type ValueType = 'number' | 'string' | 'boolean';
 @Component({
     selector: 'redaction-system-preferences-form',
     templateUrl: './system-preferences-form.component.html',
+    standalone: true,
     imports: [NgIf, ReactiveFormsModule, NgForOf, TranslateModule, MatSlideToggle, IconButtonComponent],
 })
 export class SystemPreferencesFormComponent extends BaseFormComponent {

apps/red-ui/src/app/modules/admin/screens/info/dossier-template-details/dossier-template-details.component.html

@@ -34,20 +34,6 @@
                     <span [innerHTML]="'dossier-template-info-screen.created-on' | translate: { date: createdOn }"></span>
                 </div>
 
-                <div *ngIf="areRulesLocked()">
-                    <mat-icon
-                        (click)="resetRules()"
-                        [matTooltip]="
-                            currentUser.isAdmin
-                                ? ('dossier-template-info-screen.rules-reset.tooltip' | translate)
-                                : ('dossier-template-info-screen.rules-reset.disabled-action' | translate)
-                        "
-                        [class.action-icon]="currentUser.isAdmin"
-                        svgIcon="iqser:alert-circle"
-                    ></mat-icon>
-                    <span class="error">{{ 'dossier-template-info-screen.rules-reset.label' | translate }}</span>
-                </div>
-
                 <div>
                     <mat-icon svgIcon="red:entries"></mat-icon>
                     {{ 'dossier-template-info-screen.entries' | translate: { count: ctx.stats.numberOfEntries } }}

apps/red-ui/src/app/modules/admin/screens/info/dossier-template-details/dossier-template-details.component.scss

@@ -18,11 +18,3 @@
     padding-right: 24px;
     margin-right: 24px;
 }
-
-.error {
-    color: var(--iqser-primary);
-}
-
-.action-icon {
-    cursor: pointer;
-}

apps/red-ui/src/app/modules/admin/screens/info/dossier-template-details/dossier-template-details.component.ts

@@ -1,4 +1,4 @@
-import { Component, computed, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { ContextComponent } from '@iqser/common-ui/lib/utils';
 import { type DossierTemplate, type DossierTemplateStats } from '@red/domain';
 import { DossierTemplatesService } from '@services/dossier-templates/dossier-templates.service';
@@ -9,12 +9,6 @@ import { MatIcon } from '@angular/material/icon';
 import { TranslateModule } from '@ngx-translate/core';
 import { InitialsAvatarComponent } from '@common-ui/users';
 import { DatePipe } from '@shared/pipes/date.pipe';
-import { RulesService } from '../../../services/rules.service';
-import { Toaster } from '@iqser/common-ui';
-import { MatTooltip } from '@angular/material/tooltip';
-import { firstValueFrom } from 'rxjs';
-import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { getCurrentUser } from '@users/user.service';
 
 interface Context {
     readonly dossierTemplate: DossierTemplate;
@@ -25,21 +19,17 @@ interface Context {
     selector: 'redaction-dossier-template-details',
     templateUrl: './dossier-template-details.component.html',
     styleUrls: ['./dossier-template-details.component.scss'],
-    imports: [NgIf, AsyncPipe, MatIcon, TranslateModule, DatePipe, InitialsAvatarComponent, MatTooltip],
+    standalone: true,
+    imports: [NgIf, AsyncPipe, MatIcon, TranslateModule, DatePipe, InitialsAvatarComponent],
 })
 export class DossierTemplateDetailsComponent extends ContextComponent<Context> implements OnInit {
     readonly translations = dossierTemplateStatusTranslations;
+
     @Input({ required: true }) dossierTemplateId: string;
-    readonly areRulesLocked = computed(() => {
-        return this._rulesService.currentTemplateRules().timeoutDetected;
-    });
-    readonly currentUser = getCurrentUser();
 
     constructor(
         private readonly _dossierTemplatesService: DossierTemplatesService,
         private readonly _dossierTemplateStatsService: DossierTemplateStatsService,
-        private readonly _rulesService: RulesService,
-        private readonly _toaster: Toaster,
     ) {
         super();
     }
@@ -50,15 +40,4 @@ export class DossierTemplateDetailsComponent extends ContextComponent<Context> i
             stats: this._dossierTemplateStatsService.watch$(this.dossierTemplateId),
         });
     }
-
-    async resetRules() {
-        if (!this.currentUser.isAdmin) return;
-        try {
-            await firstValueFrom(this._rulesService.reset(this.dossierTemplateId));
-            this._toaster.success(_('dossier-template-info-screen.rules-reset.success'));
-            await firstValueFrom(this._rulesService.getFor(this.dossierTemplateId));
-        } catch (error) {
-            this._toaster.rawError(error.error.message);
-        }
-    }
 }

apps/red-ui/src/app/modules/admin/screens/info/dossier-template-info-screen/dossier-template-info-screen.component.ts

@@ -22,6 +22,7 @@ import { Observable } from 'rxjs';
 import { DossierTemplateDetailsComponent } from '../dossier-template-details/dossier-template-details.component';
 import { TranslateModule } from '@ngx-translate/core';
 import { MatCheckbox } from '@angular/material/checkbox';
+import { NgIf } from '@angular/common';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatIcon } from '@angular/material/icon';
 import { SelectComponent } from '@shared/components/select/select.component';
@@ -35,12 +36,14 @@ const downloadTypes = ['ORIGINAL', 'PREVIEW', 'OPTIMIZED_PREVIEW', 'DELTA_PREVIE
 @Component({
     templateUrl: './dossier-template-info-screen.component.html',
     styleUrls: ['./dossier-template-info-screen.component.scss'],
+    standalone: true,
     imports: [
         HasScrollbarDirective,
         ReactiveFormsModule,
         DossierTemplateDetailsComponent,
         TranslateModule,
         MatCheckbox,
+        NgIf,
         MatDatepickerModule,
         SelectComponent,
         IconButtonComponent,

apps/red-ui/src/app/modules/admin/screens/justifications/add-edit-justification-dialog/add-edit-justification-dialog.component.ts

@@ -6,8 +6,8 @@ import { JustificationsService } from '@services/entity-services/justifications.
 import { BaseDialogComponent, CircleButtonComponent, HasScrollbarDirective, IconButtonComponent } from '@iqser/common-ui';
 import { firstValueFrom } from 'rxjs';
 import { TranslateModule } from '@ngx-translate/core';
-import { formControlToSignal } from '@utils/functions';
 import { toSignal } from '@angular/core/rxjs-interop';
+import { formValueToSignal } from '@common-ui/utils';
 
 interface DialogData {
     justification?: Justification;
@@ -17,11 +17,12 @@ interface DialogData {
 @Component({
     templateUrl: './add-edit-justification-dialog.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
     imports: [TranslateModule, ReactiveFormsModule, IconButtonComponent, CircleButtonComponent, HasScrollbarDirective],
 })
 export class AddEditJustificationDialogComponent extends BaseDialogComponent {
     readonly form = this.#getForm();
-    readonly name = formControlToSignal(this.form.controls['name']);
+    readonly name = formValueToSignal(this.form.controls['name']);
     readonly allJustifications = toSignal(this._justificationService.all$);
     readonly technicalName = computed(() => {
         if (this.data.justification) {

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

@@ -33,6 +33,7 @@ import { TranslateModule } from '@ngx-translate/core';
         }),
         JustificationsDialogService,
     ],
+    standalone: true,
     imports: [IqserListingModule, CircleButtonComponent, NgIf, TableItemComponent, TranslateModule, AsyncPipe, IconButtonComponent],
 })
 export default class JustificationsScreenComponent extends ListingComponent<Justification> implements OnInit {

apps/red-ui/src/app/modules/admin/screens/justifications/table-item/table-item.component.ts

@@ -12,6 +12,7 @@ import { TranslateModule } from '@ngx-translate/core';
     selector: 'redaction-table-item',
     templateUrl: './table-item.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
     imports: [MatTooltip, CircleButtonComponent, NgIf, TranslateModule],
 })
 export class TableItemComponent {

apps/red-ui/src/app/modules/admin/screens/license/components/chart/chart.component.ts

@@ -6,6 +6,7 @@ import { BaseChartDirective, provideCharts, withDefaultRegisterables } from 'ng2
     selector: 'redaction-chart',
     templateUrl: './chart.component.html',
     styleUrls: ['./chart.component.scss'],
+    standalone: true,
     imports: [BaseChartDirective],
     providers: [provideCharts(withDefaultRegisterables())],
 })

apps/red-ui/src/app/modules/admin/screens/license/components/license-analysis-capacity-usage/license-analysis-capacity-usage.component.ts

@@ -16,6 +16,7 @@ import { ChartComponent } from '../chart/chart.component';
     selector: 'red-license-analysis-capacity-usage',
     templateUrl: './license-analysis-capacity-usage.component.html',
     styleUrls: ['./license-analysis-capacity-usage.component.scss'],
+    standalone: true,
     imports: [SizePipe, DecimalPipe, ChartComponent, AsyncPipe, NgIf, TranslateModule],
 })
 export class LicenseAnalysisCapacityUsageComponent {

apps/red-ui/src/app/modules/admin/screens/license/components/license-page-usage/license-page-usage.component.ts

@@ -14,6 +14,7 @@ import { ChartComponent } from '../chart/chart.component';
     selector: 'red-license-page-usage',
     templateUrl: './license-page-usage.component.html',
     styleUrls: ['./license-page-usage.component.scss'],
+    standalone: true,
     imports: [DecimalPipe, TranslateModule, ChartComponent, NgIf, AsyncPipe],
 })
 export class LicensePageUsageComponent {

apps/red-ui/src/app/modules/admin/screens/license/components/license-retention-capacity-usage/license-retention-capacity.component.ts

@@ -17,6 +17,7 @@ import { ChartComponent } from '../chart/chart.component';
     selector: 'red-license-retention-capacity',
     templateUrl: './license-retention-capacity.component.html',
     styleUrls: ['./license-retention-capacity.component.scss'],
+    standalone: true,
     imports: [SizePipe, DecimalPipe, NgIf, DonutChartComponent, AsyncPipe, ChartComponent, TranslateModule],
 })
 export class LicenseRetentionCapacityComponent {

apps/red-ui/src/app/modules/admin/screens/license/components/license-select/license-select.component.html

@@ -6,7 +6,7 @@
             </mat-select-trigger>
 
             <mat-option *ngFor="let license of licenses" [value]="license">
-                <ng-container *ngTemplateOutlet="licenseInfo; context: { license: license }"></ng-container>
+                <ng-container *ngTemplateOutlet="licenseInfo; context: { license: this.license }"></ng-container>
             </mat-option>
         </mat-select>
     </mat-form-field>

apps/red-ui/src/app/modules/admin/screens/license/components/license-select/license-select.component.ts

@@ -19,6 +19,7 @@ const translations = {
     selector: 'redaction-license-select',
     templateUrl: './license-select.component.html',
     styleUrls: ['./license-select.component.scss'],
+    standalone: true,
     imports: [
         AsyncPipe,
         NgIf,

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

@@ -16,6 +16,7 @@ import { DatePipe } from '@shared/pipes/date.pipe';
 @Component({
     templateUrl: './license-screen.component.html',
     styleUrls: ['./license-screen.component.scss'],
+    standalone: true,
     imports: [
         IqserListingModule,
         TranslateModule,

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

@@ -30,6 +30,7 @@ import { TranslateModule } from '@ngx-translate/core';
     templateUrl: './permissions-screen.component.html',
     styleUrls: ['./permissions-screen.component.scss'],
     providers: listingProvidersFactory(PermissionsScreenComponent),
+    standalone: true,
     imports: [IqserListingModule, NgIf, NgForOf, MatSlideToggle, AsyncPipe, TranslateModule],
 })
 export default class PermissionsScreenComponent extends ListingComponent<PermissionsMapping> implements OnInit {

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

@@ -41,6 +41,7 @@ const placeholderTypes: PlaceholderType[] = ['generalPlaceholders', 'fileAttribu
     templateUrl: './reports-screen.component.html',
     styleUrls: ['./reports-screen.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
     imports: [HasScrollbarDirective, AsyncPipe, TranslateModule, CircleButtonComponent, IqserAllowDirective, SnakeCasePipe],
 })
 export default class ReportsScreenComponent implements OnInit {

apps/red-ui/src/app/modules/admin/screens/rules/rules-screen/rules-screen.component.html

@@ -1,57 +1,8 @@
 <div class="header-container">
-    <div [translate]="translations[type()]['title']" class="heading-l"></div>
+    <div [translate]="translations[this.type]['title']" class="heading-l"></div>
 </div>
 
-<div class="flex" style="height: 100%">
+<ngx-monaco-editor (init)="onCodeEditorInit($event)" [(ngModel)]="codeEditorText" [options]="editorOptions"></ngx-monaco-editor>
-    <ngx-monaco-editor (init)="onCodeEditorInit($event)" [(ngModel)]="codeEditorText" [options]="editorOptions"></ngx-monaco-editor>
-
-    <div [class.collapsed]="collapsed()" class="right-container flex-column">
-        <div class="collapsed-wrapper">
-            <ng-container
-                *ngTemplateOutlet="collapsible; context: { action: 'expand', tooltip: ('copilot.label' | translate) }"
-            ></ng-container>
-            <div class="all-caps-label" translate="copilot.label"></div>
-        </div>
-
-        <div class="header-wrapper flex mt-8">
-            <div class="heading-xl flex-1">{{ 'copilot.label' | translate | titlecase }}</div>
-            <ng-container
-                *ngTemplateOutlet="collapsible; context: { action: 'collapse', tooltip: ('copilot.label' | translate) }"
-            ></ng-container>
-        </div>
-
-        <div class="mt-24">
-            @for (comment of conversation(); track comment) {
-                <div class="comment">
-                    <div class="comment-details-wrapper">
-                        <div [matTooltipPosition]="'above'" [matTooltip]="comment.date | date: 'exactDate'" class="small-label">
-                            {{ comment.date | date: 'sophisticatedDate' }}
-                        </div>
-                    </div>
-
-                    <pre class="text-auto">{{ comment.text }}</pre>
-                </div>
-            }
-
-            <iqser-input-with-action
-                (action)="add($event)"
-                [placeholder]="'comments.add-comment' | translate"
-                autocomplete="off"
-                icon="iqser:collapse"
-                width="full"
-            ></iqser-input-with-action>
-        </div>
-    </div>
-</div>
-
-<ng-template #collapsible let-action="action" let-tooltip="tooltip">
-    <iqser-circle-button
-        (action)="toggleCollapse()"
-        [icon]="'iqser:' + action"
-        [tooltipPosition]="IqserTooltipPositions.before"
-        [tooltip]="tooltip"
-    ></iqser-circle-button>
-</ng-template>
 
 <div *ngIf="changed && permissionsService.canEditRules() && !isLeaving" class="changes-box">
     <div (click)="goToErrors()" *ngIf="numberOfErrors() || numberOfWarnings()" class="errors">
@@ -61,15 +12,15 @@
                 <span
                     *ngIf="numberOfErrors()"
                     [translateParams]="{ errors: numberOfErrors() }"
-                    [translate]="translations[type()]['errors-found']"
+                    [translate]="translations[this.type]['errors-found']"
                 >
                 </span>
                 <span
                     *ngIf="numberOfWarnings()"
-                    [class.only-warning]="!numberOfErrors()"
                     [translateParams]="{ warnings: numberOfWarnings() }"
-                    [translate]="translations[type()]['warnings-found']"
+                    [translate]="translations[this.type]['warnings-found']"
                     class="warning"
+                    [class.only-warning]="!numberOfErrors()"
                 ></span>
             </div>
         </span>
@@ -78,11 +29,11 @@
     <div class="actions">
         <iqser-icon-button
             (action)="save()"
-            [label]="translations[type()]['save-changes'] | translate"
+            [label]="translations[this.type]['save-changes'] | translate"
             [type]="iconButtonTypes.primary"
             icon="iqser:check"
         ></iqser-icon-button>
 
-        <div (click)="revert()" [translate]="translations[type()]['revert-changes']" class="all-caps-label cancel"></div>
+        <div (click)="revert()" [translate]="translations[this.type]['revert-changes']" class="all-caps-label cancel"></div>
     </div>
 </div>

apps/red-ui/src/app/modules/admin/screens/rules/rules-screen/rules-screen.component.scss

@@ -81,22 +81,3 @@ ngx-monaco-editor {
         gap: 24px;
     }
 }
-
-.right-container {
-    display: flex;
-    width: 750px;
-    min-width: 375px;
-    padding: 16px 24px 16px 24px;
-
-    &.has-scrollbar:hover {
-        padding-right: 13px;
-    }
-
-    redaction-dossier-details {
-        width: 100%;
-    }
-}
-
-.text-auto {
-    text-wrap: auto;
-}

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

@@ -1,40 +1,22 @@
-import { NgIf, NgTemplateOutlet, TitleCasePipe } from '@angular/common';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, computed, OnInit, signal } from '@angular/core';
-import {
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    computed,
-    DestroyRef,
-    inject,
-    input,
-    OnInit,
-    signal,
-    viewChild,
-} from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { FormsModule } from '@angular/forms';
-import { MatIcon } from '@angular/material/icon';
-import { MatTooltip } from '@angular/material/tooltip';
-import { InputWithActionComponent } from '@common-ui/inputs/input-with-action/input-with-action.component';
-import { TenantsService } from '@common-ui/tenants';
-import { getCurrentUser } from '@common-ui/users';
-import { ComponentCanDeactivate } from '@guards/can-deactivate.guard';
-import { CircleButtonComponent, IconButtonComponent, IconButtonTypes, LoadingService, Toaster } from '@iqser/common-ui';
-import { Debounce, IqserTooltipPositions } from '@iqser/common-ui/lib/utils';
-import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';
-import { TranslateModule } from '@ngx-translate/core';
-import { DroolsKeywords, IRules } from '@red/domain';
-import { CopilotService } from '@services/copilot.service';
-import { EditorThemeService } from '@services/editor-theme.service';
 import { PermissionsService } from '@services/permissions.service';
-import { DatePipe } from '@shared/pipes/date.pipe';
+import { IconButtonComponent, IconButtonTypes, LoadingService, Toaster } from '@iqser/common-ui';
-import { firstValueFrom } from 'rxjs';
-import { map } from 'rxjs/operators';
 import { RulesService } from '../../../services/rules.service';
+import { firstValueFrom } from 'rxjs';
+import { DOSSIER_TEMPLATE_ID, DroolsKeywords, IRules } from '@red/domain';
+import { EditorThemeService } from '@services/editor-theme.service';
+import { ComponentCanDeactivate } from '@guards/can-deactivate.guard';
+import { Debounce, getParam } from '@iqser/common-ui/lib/utils';
+import { ActivatedRoute } from '@angular/router';
 import { rulesScreenTranslations } from '../../../translations/rules-screen-translations';
 import ICodeEditor = monaco.editor.ICodeEditor;
 import IModelDeltaDecoration = monaco.editor.IModelDeltaDecoration;
 import IStandaloneEditorConstructionOptions = monaco.editor.IStandaloneEditorConstructionOptions;
+import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';
+import { MatIcon } from '@angular/material/icon';
+import { FormsModule } from '@angular/forms';
+import { NgIf } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
 
 interface SyntaxError {
     line: number;
@@ -49,57 +31,19 @@ interface UploadResponse {
     deprecatedWarnings: SyntaxError[];
 }
 
-export const SentenceTypes = {
-    question: 'question',
-    answer: 'answer',
-} as const;
-
-export type SentenceType = keyof typeof SentenceTypes;
-
-interface Sentence {
-    text: string | null;
-    date: string;
-    type: SentenceType;
-}
-
-const endingSentence: Sentence = { text: null, date: new Date().toISOString(), type: SentenceTypes.answer };
-
 const RULE_VALIDATION_TIMEOUT = 2000;
 
 @Component({
     templateUrl: './rules-screen.component.html',
     styleUrls: ['./rules-screen.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [
+    standalone: true,
-        MonacoEditorModule,
+    imports: [MonacoEditorModule, MatIcon, FormsModule, IconButtonComponent, NgIf, TranslateModule],
-        MatIcon,
-        FormsModule,
-        IconButtonComponent,
-        NgIf,
-        TranslateModule,
-        CircleButtonComponent,
-        InputWithActionComponent,
-        MatTooltip,
-        NgTemplateOutlet,
-        DatePipe,
-        TitleCasePipe,
-    ],
 })
 export default class RulesScreenComponent implements OnInit, ComponentCanDeactivate {
-    readonly #errorGlyphs = signal<string[]>([]);
-    #codeEditor: ICodeEditor;
-    #decorations: string[] = [];
-    readonly #errors = signal<SyntaxError[]>([]);
-    #ruleValidationTimeout: number = null;
-    readonly #copilotService = inject(CopilotService);
-    readonly #currentUser = getCurrentUser();
-    readonly #conversation = signal<Sentence[]>([endingSentence]);
-    protected readonly collapsed = signal(true);
-    protected readonly IqserTooltipPositions = IqserTooltipPositions;
-    readonly dossierTemplateId = input.required<string>();
     readonly translations = rulesScreenTranslations;
+
     readonly iconButtonTypes = IconButtonTypes;
-    readonly inputWithAction = viewChild(InputWithActionComponent);
     readonly editorOptions: IStandaloneEditorConstructionOptions = {
         theme: 'vs',
         language: 'java',
@@ -111,43 +55,19 @@ export default class RulesScreenComponent implements OnInit, ComponentCanDeactiv
     initialLines: string[] = [];
     currentLines: string[] = [];
     isLeaving = false;
-    readonly type = input.required<IRules['ruleFileType']>();
+    readonly type: IRules['ruleFileType'];
+    readonly #errorGlyphs = signal<string[]>([]);
     readonly numberOfErrors = computed(() => this.#errors().filter(e => !e.warning).length);
     readonly numberOfWarnings = computed(() => this.#errors().filter(e => e.warning).length);
-    readonly conversation = computed(() => this.#conversation().filter(r => !!r.text));
+    readonly #dossierTemplateId = getParam(DOSSIER_TEMPLATE_ID);
-
+    #codeEditor: ICodeEditor;
-    constructor(
+    #decorations: string[] = [];
-        readonly permissionsService: PermissionsService,
+    #errors = signal<SyntaxError[]>([]);
-        private readonly _rulesService: RulesService,
+    #ruleValidationTimeout: number = null;
-        private readonly _changeDetectorRef: ChangeDetectorRef,
-        private readonly _toaster: Toaster,
-        private readonly _loadingService: LoadingService,
-        private readonly _editorThemeService: EditorThemeService,
-    ) {
-        const username = this.#currentUser.id;
-        const tenant = inject(TenantsService).activeTenantId;
-        inject(DestroyRef).onDestroy(() => this.#copilotService.deactivate());
-        this.#copilotService
-            .listen<{ token?: string }>('/user/' + username + '/queue/' + tenant + '/rules-copilot')
-            .pipe(
-                takeUntilDestroyed(),
-                map(res => res?.token),
-            )
-            .subscribe(token => {
-                if (token === null) {
-                    this.#conversation.update(responses => [...responses, { ...endingSentence }]);
-                    return;
-                }
-                this.#conversation.update(responses => {
-                    const last = responses.pop();
-                    return [...responses, { ...last, text: (last.text ?? '') + token }];
-                });
-            });
-    }
 
     set isLeavingPage(isLeaving: boolean) {
         this.isLeaving = isLeaving;
-        this._changeDetectorRef.markForCheck();
+        this._changeDetectorRef.detectChanges();
     }
 
     get changed(): boolean {
@@ -165,23 +85,16 @@ export default class RulesScreenComponent implements OnInit, ComponentCanDeactiv
         this.#closeProblemsView();
     }
 
-    toggleCollapse() {
+    constructor(
-        this.collapsed.update(collapsed => !collapsed);
+        readonly permissionsService: PermissionsService,
-        if (this.#conversation().length === 1) {
+        private readonly _rulesService: RulesService,
-            this.#copilotService.send('Hello!');
+        private readonly _changeDetectorRef: ChangeDetectorRef,
-        }
+        private readonly _toaster: Toaster,
-    }
+        private readonly _loadingService: LoadingService,
-
+        private readonly _editorThemeService: EditorThemeService,
-    add(question: string) {
+        private readonly _route: ActivatedRoute,
-        this.#conversation.update(responses => {
+    ) {
-            const last = responses.pop();
+        this.type = this._route.snapshot.data.type;
-            last.text = question;
-            last.type = SentenceTypes.question;
-            last.date = new Date().toISOString();
-            return [...responses, last, { ...endingSentence }];
-        });
-        this.inputWithAction().reset();
-        this.#copilotService.send(question);
     }
 
     async ngOnInit() {
@@ -209,7 +122,7 @@ export default class RulesScreenComponent implements OnInit, ComponentCanDeactiv
         }
         (window as any).monaco.editor.setTheme(this._editorThemeService.getTheme(true));
         await this.#configureSyntaxHighlighting();
-        this._changeDetectorRef.markForCheck();
+        this._changeDetectorRef.detectChanges();
     }
 
     @Debounce()
@@ -229,20 +142,12 @@ export default class RulesScreenComponent implements OnInit, ComponentCanDeactiv
         await this.#uploadRules();
     }
 
-    revert(): void {
-        this.currentLines = this.initialLines;
-        this.#decorations = this.#codeEditor?.deltaDecorations(this.#decorations, []) || [];
-        this.#removeErrorMarkers();
-        this._changeDetectorRef.markForCheck();
-        this._loadingService.stop();
-    }
-
     async #uploadRules(dryRun = false) {
         return firstValueFrom(
             this._rulesService.uploadRules({
                 rules: this.#getValue(),
-                dossierTemplateId: this.dossierTemplateId(),
+                dossierTemplateId: this.#dossierTemplateId,
-                ruleFileType: this.type(),
+                ruleFileType: this.type,
                 dryRun,
             }),
         ).then(
@@ -251,7 +156,7 @@ export default class RulesScreenComponent implements OnInit, ComponentCanDeactiv
                 this.#drawErrorMarkers(errors);
                 if (!dryRun) {
                     await this.#initialize();
-                    this._toaster.success(rulesScreenTranslations[this.type()]['success.generic']);
+                    this._toaster.success(rulesScreenTranslations[this.type]['success.generic']);
                 }
             },
             error => {
@@ -268,12 +173,20 @@ export default class RulesScreenComponent implements OnInit, ComponentCanDeactiv
                 this.#drawErrorMarkers(errors);
                 this._loadingService.stop();
                 if (!dryRun) {
-                    this._toaster.error(rulesScreenTranslations[this.type()]['error.generic']);
+                    this._toaster.error(rulesScreenTranslations[this.type]['error.generic']);
                 }
             },
         );
     }
 
+    revert(): void {
+        this.currentLines = this.initialLines;
+        this.#decorations = this.#codeEditor?.deltaDecorations(this.#decorations, []) || [];
+        this.#removeErrorMarkers();
+        this._changeDetectorRef.detectChanges();
+        this._loadingService.stop();
+    }
+
     #mapErrors(response: UploadResponse, dryRun = false) {
         const warnings = response.deprecatedWarnings.map(w => ({ ...w, warning: true }));
         if (dryRun) {
@@ -383,7 +296,7 @@ export default class RulesScreenComponent implements OnInit, ComponentCanDeactiv
 
     async #initialize() {
         this._loadingService.start();
-        await firstValueFrom(this._rulesService.download(this.dossierTemplateId(), this.type())).then(
+        await firstValueFrom(this._rulesService.download(this.#dossierTemplateId, this.type)).then(
             rules => {
                 this.currentLines = this.initialLines = rules.rules.split('\n');
                 this.revert();

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

@@ -46,6 +46,7 @@ function configToFilter({ key, label }: DonutChartConfig) {
         entitiesService: UserService,
         component: UserListingScreenComponent,
     }),
+    standalone: true,
     imports: [
         IqserListingModule,
         TranslateModule,
@@ -125,7 +126,7 @@ export class UserListingScreenComponent extends ListingComponent<User> implement
 
     getDisplayRoles(user: User) {
         const oldRedRoles = user.roles.filter(role => role.startsWith('RED_'));
-        const translatedRoles = oldRedRoles.map(role => this._translateService.instant(this.translations[role], { count: 1 }));
+        const translatedRoles = oldRedRoles.map(role => this._translateService.instant(this.translations[role]));
         return translatedRoles.join(', ') || this._translateService.instant(this.translations['NO_ROLE']);
     }