Merge branch 'RED-7397' into 'master'

Merge RED-7397 into master

See merge request redactmanager/red-ui!35

.editorconfig

@@ -19,7 +19,7 @@ ij_typescript_use_double_quotes = false
 ij_typescript_enforce_trailing_comma = keep
 ij_typescript_spaces_within_imports = true
 
-[{*.json, .prettierrc, .eslintrc}]
+[{*.json,.prettierrc,.eslintrc}]
 indent_size = 2
 tab_width = 2
 ij_json_array_wrapping = off

.eslintrc.json

@@ -136,10 +136,8 @@
           "warn",
           {
             "default": [
-              // Index signature
               "signature",
               "call-signature",
-              // Fields
               "#private-static-field",
               "private-static-field",
               "protected-static-field",
@@ -162,14 +160,11 @@
               "abstract-field",
               "decorated-field",
               "field",
-              // Static initialization
               "static-initialization",
-              // Constructors
               "public-constructor",
               "protected-constructor",
               "private-constructor",
               "constructor",
-              // Getters
               "public-static-get",
               "protected-static-get",
               "private-static-get",
@@ -192,7 +187,6 @@
               "abstract-get",
               "decorated-get",
               "get",
-              // Setters
               "public-static-set",
               "protected-static-set",
               "private-static-set",
@@ -215,7 +209,6 @@
               "abstract-set",
               "decorated-set",
               "set",
-              // Methods
               "public-static-method",
               "protected-static-method",
               "private-static-method",

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

@@ -1,10 +1,24 @@
-import { BrowserModule } from '@angular/platform-browser';
+import { DatePipe as BaseDatePipe } from '@angular/common';
-import { ENVIRONMENT_INITIALIZER, ErrorHandler, inject, NgModule } from '@angular/core';
-import { AppComponent } from './app.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { HTTP_INTERCEPTORS } from '@angular/common/http';
+import { ENVIRONMENT_INITIALIZER, ErrorHandler, inject, NgModule } from '@angular/core';
+import { MatDividerModule } from '@angular/material/divider';
+import { MAT_TOOLTIP_DEFAULT_OPTIONS } from '@angular/material/tooltip';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ServiceWorkerModule } from '@angular/service-worker';
+import { AuthErrorComponent } from '@components/auth-error/auth-error.component';
 import { BaseScreenComponent } from '@components/base-screen/base-screen.component';
-import { MissingTranslationHandler } from '@ngx-translate/core';
+import { BreadcrumbsComponent } from '@components/breadcrumbs/breadcrumbs.component';
+import { DownloadsListScreenComponent } from '@components/downloads-list-screen/downloads-list-screen.component';
+import { NotificationsComponent } from '@components/notifications/notifications.component';
+import { DashboardSkeletonComponent } from '@components/skeleton/dashboard-skeleton/dashboard-skeleton.component';
+import { DossierSkeletonComponent } from '@components/skeleton/dossier-skeleton/dossier-skeleton.component';
+import { SkeletonStatsComponent } from '@components/skeleton/skeleton-stats/skeleton-stats.component';
+import { SkeletonTopBarComponent } from '@components/skeleton/skeleton-top-bar/skeleton-top-bar.component';
+import { SpotlightSearchComponent } from '@components/spotlight-search/spotlight-search.component';
+import { TenantsMenuComponent } from '@components/tenants-menu/tenants-menu.component';
+import { UserMenuComponent } from '@components/user-menu/user-menu.component';
+import { environment } from '@environments/environment';
 import {
     CachingModule,
     ChevronButtonComponent,
@@ -27,47 +41,33 @@ import {
     ServerErrorInterceptor,
     StopPropagationDirective,
 } from '@iqser/common-ui';
-import { ToastrModule } from 'ngx-toastr';
-import { ServiceWorkerModule } from '@angular/service-worker';
-import { environment } from '@environments/environment';
-import { AuthErrorComponent } from '@components/auth-error/auth-error.component';
-import { NotificationsComponent } from '@components/notifications/notifications.component';
-import { DashboardSkeletonComponent } from '@components/skeleton/dashboard-skeleton/dashboard-skeleton.component';
-import { DownloadsListScreenComponent } from '@components/downloads-list-screen/downloads-list-screen.component';
-import { AppRoutingModule } from './app-routing.module';
-import { SharedModule } from '@shared/shared.module';
-import { FileUploadDownloadModule } from '@upload-download/file-upload-download.module';
-import { DatePipe as BaseDatePipe } from '@angular/common';
-import { ACTIVE_DOSSIERS_SERVICE, ARCHIVED_DOSSIERS_SERVICE } from './tokens';
-import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';
-import { GlobalErrorHandler } from '@services/global-error-handler.service';
-import { REDMissingTranslationHandler } from '@utils/missing-translations-handler';
-import { ConfigService } from '@services/config.service';
-import { SpotlightSearchComponent } from '@components/spotlight-search/spotlight-search.component';
-import { DatePipe } from '@shared/pipes/date.pipe';
-import * as helpModeKeys from '../assets/help-mode/help-mode-keys.json';
-import { BreadcrumbsComponent } from '@components/breadcrumbs/breadcrumbs.component';
-import { UserPreferenceService } from '@users/user-preference.service';
-import { UserService } from '@users/user.service';
-import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';
-import { ArchivedDossiersService } from '@services/dossiers/archived-dossiers.service';
-import { MAT_TOOLTIP_DEFAULT_OPTIONS } from '@angular/material/tooltip';
-import { LoggerModule, NgxLoggerLevel, TOKEN_LOGGER_CONFIG, TOKEN_LOGGER_RULES_SERVICE } from 'ngx-logger';
-import { LoggerRulesService } from '@services/logger-rules.service';
-import { AppConfig, ILoggerConfig } from '@red/domain';
-import { PdfViewerModule } from './modules/pdf-viewer/pdf-viewer.module';
-import { UI_CACHES } from '@utils/constants';
-import { RedRoleGuard } from '@users/red-role.guard';
-import { SkeletonTopBarComponent } from '@components/skeleton/skeleton-top-bar/skeleton-top-bar.component';
-import { DossierSkeletonComponent } from '@components/skeleton/dossier-skeleton/dossier-skeleton.component';
-import { SkeletonStatsComponent } from '@components/skeleton/skeleton-stats/skeleton-stats.component';
-import { UserMenuComponent } from '@components/user-menu/user-menu.component';
-import { TenantsMenuComponent } from '@components/tenants-menu/tenants-menu.component';
-import { MatDividerModule } from '@angular/material/divider';
-import { IqserUsersModule } from '@iqser/common-ui/lib/users';
 import { CommonUiModule } from '@iqser/common-ui/lib/common-ui.module';
 import { LogoComponent, SkeletonComponent, ToastComponent } from '@iqser/common-ui/lib/shared';
 import { TenantPipe, TenantsModule } from '@iqser/common-ui/lib/tenants';
+import { IqserUsersModule } from '@iqser/common-ui/lib/users';
+import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';
+import { MissingTranslationHandler } from '@ngx-translate/core';
+import { AppConfig, ILoggerConfig } from '@red/domain';
+import { ConfigService } from '@services/config.service';
+import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';
+import { ArchivedDossiersService } from '@services/dossiers/archived-dossiers.service';
+import { GlobalErrorHandler } from '@services/global-error-handler.service';
+import { LoggerRulesService } from '@services/logger-rules.service';
+import { DatePipe } from '@shared/pipes/date.pipe';
+import { SharedModule } from '@shared/shared.module';
+import { FileUploadDownloadModule } from '@upload-download/file-upload-download.module';
+import { RedRoleGuard } from '@users/red-role.guard';
+import { UserPreferenceService } from '@users/user-preference.service';
+import { UserService } from '@users/user.service';
+import { UI_CACHES } from '@utils/constants';
+import { REDMissingTranslationHandler } from '@utils/missing-translations-handler';
+import { LoggerModule, NgxLoggerLevel, TOKEN_LOGGER_CONFIG, TOKEN_LOGGER_RULES_SERVICE } from 'ngx-logger';
+import { ToastrModule } from 'ngx-toastr';
+import * as helpModeKeys from '../assets/help-mode/help-mode-keys.json';
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { PdfViewerModule } from './modules/pdf-viewer/pdf-viewer.module';
+import { ACTIVE_DOSSIERS_SERVICE, ARCHIVED_DOSSIERS_SERVICE } from './tokens';
 
 export const appModuleFactory = (config: AppConfig) => {
     @NgModule({
@@ -144,7 +144,7 @@ export const appModuleFactory = (config: AppConfig) => {
                                 enabled: false,
                             },
                             PDF: {
-                                enabled: false,
+                                enabled: true,
                             },
                             FILE: {
                                 enabled: true,

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

@@ -21,7 +21,6 @@
         (action)="deleteItems()"
         *ngIf="listingService.areSomeSelected$ | async"
         [tooltip]="'downloads-list.bulk.delete' | translate"
-        [type]="circleButtonTypes.dark"
         icon="iqser:trash"
     ></iqser-circle-button>
 </ng-template>
@@ -57,14 +56,12 @@
                     (action)="downloadItem(download)"
                     *ngIf="download.status === 'READY' && !download.inProgress"
                     [tooltip]="'downloads-list.actions.download' | translate"
-                    [type]="circleButtonTypes.dark"
                     icon="iqser:download"
                 ></iqser-circle-button>
 
                 <iqser-circle-button
                     (action)="deleteItems([download])"
                     [tooltip]="'downloads-list.actions.delete' | translate"
-                    [type]="circleButtonTypes.dark"
                     icon="iqser:trash"
                 ></iqser-circle-button>
 

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

@@ -1,9 +1,9 @@
 import { Component, OnDestroy } from '@angular/core';
-import { FileDownloadService } from '@upload-download/services/file-download.service';
-import { DownloadStatus } from '@red/domain';
-import { CircleButtonTypes, ListingComponent, listingProvidersFactory, LoadingService, TableColumnConfig } from '@iqser/common-ui';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { ListingComponent, listingProvidersFactory, LoadingService, TableColumnConfig } from '@iqser/common-ui';
+import { DownloadStatus } from '@red/domain';
 import { RouterHistoryService } from '@services/router-history.service';
+import { FileDownloadService } from '@upload-download/services/file-download.service';
 import { firstValueFrom } from 'rxjs';
 
 @Component({
@@ -15,7 +15,7 @@ import { firstValueFrom } from 'rxjs';
     }),
 })
 export class DownloadsListScreenComponent extends ListingComponent<DownloadStatus> implements OnDestroy {
-    readonly circleButtonTypes = CircleButtonTypes;
+    readonly #interval: number;
     readonly tableHeaderLabel = _('downloads-list.table-header.title');
     readonly tableColumnConfigs: TableColumnConfig<DownloadStatus>[] = [
         { label: _('downloads-list.table-col-names.name'), width: '2fr' },
@@ -23,7 +23,6 @@ export class DownloadsListScreenComponent extends ListingComponent<DownloadStatu
         { label: _('downloads-list.table-col-names.date') },
         { label: _('downloads-list.table-col-names.status') },
     ];
-    readonly #interval: NodeJS.Timer;
 
     constructor(
         private readonly _loadingService: LoadingService,
@@ -32,11 +31,11 @@ export class DownloadsListScreenComponent extends ListingComponent<DownloadStatu
     ) {
         super();
         this._loadingService.loadWhile(this._loadData());
-        this.#interval = setInterval(() => this._loadData(), 5000);
+        this.#interval = window.setInterval(() => this._loadData(), 5000);
     }
 
     ngOnDestroy() {
-        clearInterval(this.#interval);
+        window.clearInterval(this.#interval);
     }
 
     downloadItem(download: DownloadStatus) {

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

@@ -1,5 +1,5 @@
-import { annotationTypesTranslations, SuggestionAddFalsePositive } from '@translations/annotation-types-translations';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { IListable } from '@iqser/common-ui';
 import {
     annotationDefaultColorConfig,
     annotationEntityColorConfig,
@@ -26,7 +26,7 @@ import {
     SuperType,
     SuperTypes,
 } from '@red/domain';
-import { IListable } from '@iqser/common-ui';
+import { annotationTypesTranslations, SuggestionAddFalsePositive } from '@translations/annotation-types-translations';
 import { chronologicallyBy, timestampOf } from '../../modules/file-preview/services/file-data.service';
 
 export class AnnotationWrapper implements IListable {
@@ -451,8 +451,8 @@ export class AnnotationWrapper implements IListable {
 
     static #getShortContent(annotationWrapper: AnnotationWrapper) {
         if (annotationWrapper.legalBasis) {
-            const lb = annotationWrapper.legalBasisList.find(lbm =>
+            const lb = annotationWrapper.legalBasisList.find(
-                lbm.reason?.toLowerCase().includes(annotationWrapper.legalBasis.toLowerCase()),
+                lbm => lbm.reason?.toLowerCase().includes(annotationWrapper.legalBasis.toLowerCase()),
             );
             if (lb) {
                 return lb.name;

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

@@ -118,7 +118,6 @@
                     (action)="openAuditDetails(log)"
                     *ngIf="log.hasDetails"
                     [tooltip]="'audit-screen.action.info' | translate"
-                    [type]="circleButtonTypes.dark"
                     icon="red:info"
                 ></iqser-circle-button>
             </div>

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

@@ -1,24 +1,17 @@
 import { Component, inject, OnDestroy, OnInit } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
-import { applyIntervalConstraints } from '@utils/date-inputs-utils';
-import {
-    CircleButtonTypes,
-    IqserPermissionsService,
-    ListingComponent,
-    listingProvidersFactory,
-    LoadingService,
-    TableColumnConfig,
-} from '@iqser/common-ui';
-import { auditCategoriesTranslations } from '@translations/audit-categories-translations';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { Audit, IAudit, IAuditResponse, IAuditSearchRequest, User } from '@red/domain';
+import { IqserPermissionsService, ListingComponent, listingProvidersFactory, LoadingService, TableColumnConfig } from '@iqser/common-ui';
-import { AuditService } from '../../services/audit.service';
-import { firstValueFrom } from 'rxjs';
-import { Dayjs } from 'dayjs';
-import { RouterHistoryService } from '@services/router-history.service';
-import { Roles } from '@users/roles';
-import { AdminDialogService } from '../../services/admin-dialog.service';
 import { getCurrentUser } from '@iqser/common-ui/lib/users';
+import { Audit, IAudit, IAuditResponse, IAuditSearchRequest, User } from '@red/domain';
+import { RouterHistoryService } from '@services/router-history.service';
+import { auditCategoriesTranslations } from '@translations/audit-categories-translations';
+import { Roles } from '@users/roles';
+import { applyIntervalConstraints } from '@utils/date-inputs-utils';
+import { Dayjs } from 'dayjs';
+import { firstValueFrom } from 'rxjs';
+import { AdminDialogService } from '../../services/admin-dialog.service';
+import { AuditService } from '../../services/audit.service';
 
 const PAGE_SIZE = 50;
 
@@ -30,7 +23,6 @@ const PAGE_SIZE = 50;
 export class AuditScreenComponent extends ListingComponent<Audit> implements OnInit, OnDestroy {
     private _previousFrom: Dayjs;
     private _previousTo: Dayjs;
-    readonly circleButtonTypes = CircleButtonTypes;
     readonly ALL_CATEGORIES = 'allCategories';
     readonly ALL_USERS = _('audit-screen.all-users');
     readonly translations = auditCategoriesTranslations;

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

@@ -42,7 +42,6 @@
                     *allow="roles.colors.write; if: currentUser.isAdmin"
                     [attr.help-mode-key]="'default_colors'"
                     [tooltip]="'default-colors-screen.action.edit' | translate"
-                    [type]="circleButtonTypes.dark"
                     icon="iqser:edit"
                 ></iqser-circle-button>
             </div>

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

@@ -1,23 +1,15 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { DefaultColorTypes, DOSSIER_TEMPLATE_ID, User } from '@red/domain';
-import { AdminDialogService } from '../../services/admin-dialog.service';
-import {
-    CircleButtonTypes,
-    getConfig,
-    IListable,
-    ListingComponent,
-    listingProvidersFactory,
-    LoadingService,
-    TableColumnConfig,
-} from '@iqser/common-ui';
-import { defaultColorsTranslations } from '@translations/default-colors-translations';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { combineLatest } from 'rxjs';
+import { getConfig, IListable, ListingComponent, listingProvidersFactory, LoadingService, TableColumnConfig } from '@iqser/common-ui';
-import { map, tap } from 'rxjs/operators';
-import { DefaultColorsService } from '@services/entity-services/default-colors.service';
-import { Roles } from '@users/roles';
 import { getCurrentUser } from '@iqser/common-ui/lib/users';
 import { getParam } from '@iqser/common-ui/lib/utils';
+import { DefaultColorTypes, DOSSIER_TEMPLATE_ID, User } from '@red/domain';
+import { DefaultColorsService } from '@services/entity-services/default-colors.service';
+import { defaultColorsTranslations } from '@translations/default-colors-translations';
+import { Roles } from '@users/roles';
+import { combineLatest } from 'rxjs';
+import { map, tap } from 'rxjs/operators';
+import { AdminDialogService } from '../../services/admin-dialog.service';
 
 interface ListItem extends IListable {
     readonly key: string;
@@ -35,7 +27,6 @@ export class DefaultColorsScreenComponent extends ListingComponent<ListItem> imp
     readonly #documineDefaultColors = ['recommendationColor', 'skippedColor', 'redactionColor'];
     readonly #isDocumine = getConfig().IS_DOCUMINE;
 
-    readonly circleButtonTypes = CircleButtonTypes;
     readonly currentUser = getCurrentUser<User>();
     readonly roles = Roles;
     readonly translations = defaultColorsTranslations;

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

@@ -20,7 +20,6 @@
         (action)="openConfirmDeleteAttributeDialog()"
         *ngIf="canEditDossierAttributes && (listingService.areSomeSelected$ | async)"
         [tooltip]="'dossier-attributes-listing.bulk.delete' | translate"
-        [type]="circleButtonTypes.dark"
         icon="iqser:trash"
     ></iqser-circle-button>
 </ng-template>

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

@@ -1,6 +1,7 @@
 import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import {
-    CircleButtonTypes,
     defaultDialogConfig,
     IconButtonTypes,
     ListingComponent,
@@ -8,19 +9,17 @@ import {
     LoadingService,
     TableColumnConfig,
 } from '@iqser/common-ui';
-import { AdminDialogService } from '../../services/admin-dialog.service';
+import { getCurrentUser } from '@iqser/common-ui/lib/users';
-import { DossierAttributesService } from '@services/entity-services/dossier-attributes.service';
+import { getParam } from '@iqser/common-ui/lib/utils';
-import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { DOSSIER_TEMPLATE_ID, DossierAttributeConfig, IDossierAttributeConfig, User } from '@red/domain';
-import { firstValueFrom } from 'rxjs';
+import { DossierAttributesService } from '@services/entity-services/dossier-attributes.service';
 import { PermissionsService } from '@services/permissions.service';
-import { MatDialog } from '@angular/material/dialog';
+import { firstValueFrom } from 'rxjs';
+import { AdminDialogService } from '../../services/admin-dialog.service';
 import {
     AddEditDossierAttributeDialogComponent,
     AddEditDossierAttributeDialogData,
 } from './add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component';
-import { getCurrentUser } from '@iqser/common-ui/lib/users';
-import { getParam } from '@iqser/common-ui/lib/utils';
 
 @Component({
     templateUrl: './dossier-attributes-listing-screen.component.html',
@@ -33,7 +32,6 @@ import { getParam } from '@iqser/common-ui/lib/utils';
 export class DossierAttributesListingScreenComponent extends ListingComponent<DossierAttributeConfig> implements OnInit {
     readonly #dossierTemplateId = getParam(DOSSIER_TEMPLATE_ID);
     readonly iconButtonTypes = IconButtonTypes;
-    readonly circleButtonTypes = CircleButtonTypes;
     readonly currentUser = getCurrentUser<User>();
     readonly tableHeaderLabel = _('dossier-attributes-listing.table-header.title');
     readonly tableColumnConfigs: TableColumnConfig<DossierAttributeConfig>[] = [

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

@@ -16,14 +16,12 @@
             <iqser-circle-button
                 (action)="openAddEditAttributeDialog.emit(attribute)"
                 [tooltip]="'dossier-attributes-listing.action.edit' | translate"
-                [type]="circleButtonTypes.dark"
                 icon="iqser:edit"
             ></iqser-circle-button>
 
             <iqser-circle-button
                 (action)="openConfirmDeleteAttributeDialog.emit([attribute])"
                 [tooltip]="'dossier-attributes-listing.action.delete' | translate"
-                [type]="circleButtonTypes.dark"
                 icon="iqser:trash"
             ></iqser-circle-button>
         </div>

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

@@ -1,6 +1,5 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { DossierAttributeConfig, IDossierAttributeConfig } from '@red/domain';
-import { CircleButtonTypes } from '@iqser/common-ui';
 import { dossierAttributeTypesTranslations } from '@translations/dossier-attribute-types-translations';
 
 @Component({
@@ -9,7 +8,6 @@ import { dossierAttributeTypesTranslations } from '@translations/dossier-attribu
     styleUrls: ['./table-item.component.scss'],
 })
 export class TableItemComponent {
-    readonly circleButtonTypes = CircleButtonTypes;
     readonly translations = dossierAttributeTypesTranslations;
 
     @Input() attribute: DossierAttributeConfig;

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

@@ -19,14 +19,12 @@
             <iqser-circle-button
                 (action)="openEditStateDialog(state)"
                 [tooltip]="'dossier-states-listing.action.edit' | translate"
-                [type]="circleButtonTypes.dark"
                 icon="iqser:edit"
             ></iqser-circle-button>
 
             <iqser-circle-button
                 (action)="openConfirmDeleteStateDialog(state)"
                 [tooltip]="'dossier-states-listing.action.delete' | translate"
-                [type]="circleButtonTypes.dark"
                 icon="iqser:trash"
             ></iqser-circle-button>
         </div>

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

@@ -1,12 +1,12 @@
 import { Component, inject, Input } from '@angular/core';
-import { CircleButtonTypes, defaultDialogConfig, EntitiesService } from '@iqser/common-ui';
+import { MatDialog } from '@angular/material/dialog';
+import { defaultDialogConfig, EntitiesService } from '@iqser/common-ui';
 import { DossierState, IDossierState } from '@red/domain';
 import { PermissionsService } from '@services/permissions.service';
 import {
     AddEditDossierStateDialogComponent,
     AddEditDossierStateDialogData,
 } from '../add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component';
-import { MatDialog } from '@angular/material/dialog';
 import {
     ConfirmDeleteDossierStateDialogComponent,
     ConfirmDeleteDossierStateDialogData,
@@ -18,12 +18,10 @@ import {
     styleUrls: ['./dossier-states-table-item.component.scss'],
 })
 export class DossierStatesTableItemComponent {
-    @Input() state: DossierState;
-
-    readonly circleButtonTypes = CircleButtonTypes;
-    readonly permissionsService = inject(PermissionsService);
     readonly #dialog = inject(MatDialog);
     readonly #entitiesService = inject(EntitiesService);
+    @Input() state: DossierState;
+    readonly permissionsService = inject(PermissionsService);
 
     openConfirmDeleteStateDialog(dossierState: DossierState) {
         const data: ConfirmDeleteDossierStateDialogData = {

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

@@ -22,7 +22,6 @@
         *allow="roles.templates.write; if: currentUser.isAdmin && (listingService.areSomeSelected$ | async)"
         [icon]="'iqser:trash'"
         [tooltip]="'dossier-templates-listing.bulk.delete' | translate"
-        [type]="circleButtonTypes.dark"
         buttonId="dossier-template-listing-bulk-delete-btn"
     ></iqser-circle-button>
 </ng-template>

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

@@ -1,9 +1,6 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { UserPreferenceService } from '@users/user-preference.service';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { AdminDialogService } from '../../../services/admin-dialog.service';
-import { DossierTemplate, User } from '@red/domain';
 import {
-    CircleButtonTypes,
     IconButtonTypes,
     IqserPermissionsService,
     ListingComponent,
@@ -11,12 +8,14 @@ import {
     LoadingService,
     TableColumnConfig,
 } from '@iqser/common-ui';
-import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { RouterHistoryService } from '@services/router-history.service';
-import { DossierTemplatesService } from '@services/dossier-templates/dossier-templates.service';
-import { firstValueFrom } from 'rxjs';
-import { Roles } from '@users/roles';
 import { getCurrentUser } from '@iqser/common-ui/lib/users';
+import { DossierTemplate, User } from '@red/domain';
+import { DossierTemplatesService } from '@services/dossier-templates/dossier-templates.service';
+import { RouterHistoryService } from '@services/router-history.service';
+import { Roles } from '@users/roles';
+import { UserPreferenceService } from '@users/user-preference.service';
+import { firstValueFrom } from 'rxjs';
+import { AdminDialogService } from '../../../services/admin-dialog.service';
 
 @Component({
     templateUrl: './dossier-templates-listing-screen.component.html',
@@ -29,7 +28,6 @@ import { getCurrentUser } from '@iqser/common-ui/lib/users';
 })
 export class DossierTemplatesListingScreenComponent extends ListingComponent<DossierTemplate> implements OnInit {
     readonly iconButtonTypes = IconButtonTypes;
-    readonly circleButtonTypes = CircleButtonTypes;
     readonly roles = Roles;
     readonly currentUser = getCurrentUser<User>();
     readonly tableHeaderLabel = _('dossier-templates-listing.table-header.title');

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

@@ -42,7 +42,6 @@
         (action)="openDeleteEntitiesDialog()"
         *ngIf="permissionsService.canDeleteEntities(listingService.selected)"
         [tooltip]="'entities-listing.bulk.delete' | translate"
-        [type]="circleButtonTypes.dark"
         icon="iqser:trash"
     ></iqser-circle-button>
 </ng-template>
@@ -57,9 +56,9 @@
             <iqser-icon-button
                 (action)="openAddEntityDialog()"
                 *ngIf="permissionsService.canEditEntities()"
+                [attr.help-mode-key]="'create_new_entity'"
                 [label]="'entities-listing.add-new' | translate"
                 [type]="iconButtonTypes.primary"
-                [attr.help-mode-key]="'create_new_entity'"
                 icon="iqser:plus"
             ></iqser-icon-button>
         </div>
@@ -103,7 +102,6 @@
                             (action)="openDeleteEntitiesDialog([dict])"
                             *ngIf="permissionsService.canDeleteEntities(dict)"
                             [tooltip]="'entities-listing.action.delete' | translate"
-                            [type]="circleButtonTypes.dark"
                             icon="iqser:trash"
                         ></iqser-circle-button>
 
@@ -111,7 +109,6 @@
                             *ngIf="permissionsService.canEditEntities()"
                             [routerLink]="dict.routerLink | tenant"
                             [tooltip]="'entities-listing.action.edit' | translate"
-                            [type]="circleButtonTypes.dark"
                             icon="iqser:edit"
                         ></iqser-circle-button>
                     </div>

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

@@ -1,22 +1,15 @@
 import { Component, OnInit } from '@angular/core';
-import {
-    CircleButtonTypes,
-    IconButtonTypes,
-    ListingComponent,
-    listingProvidersFactory,
-    LoadingService,
-    TableColumnConfig,
-} from '@iqser/common-ui';
-import { AdminDialogService } from '../../services/admin-dialog.service';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { DictionaryService } from '@services/entity-services/dictionary.service';
+import { IconButtonTypes, ListingComponent, listingProvidersFactory, LoadingService, TableColumnConfig } from '@iqser/common-ui';
-import { Dictionary, DOSSIER_TEMPLATE_ID, DossierTemplateStats } from '@red/domain';
-import { firstValueFrom, Observable } from 'rxjs';
-import { DossierTemplateStatsService } from '@services/entity-services/dossier-template-stats.service';
-import { tap } from 'rxjs/operators';
-import { DictionariesMapService } from '@services/entity-services/dictionaries-map.service';
-import { PermissionsService } from '@services/permissions.service';
 import { getParam } from '@iqser/common-ui/lib/utils';
+import { Dictionary, DOSSIER_TEMPLATE_ID, DossierTemplateStats } from '@red/domain';
+import { DictionariesMapService } from '@services/entity-services/dictionaries-map.service';
+import { DictionaryService } from '@services/entity-services/dictionary.service';
+import { DossierTemplateStatsService } from '@services/entity-services/dossier-template-stats.service';
+import { PermissionsService } from '@services/permissions.service';
+import { firstValueFrom, Observable } from 'rxjs';
+import { tap } from 'rxjs/operators';
+import { AdminDialogService } from '../../services/admin-dialog.service';
 
 @Component({
     templateUrl: './entities-listing-screen.component.html',
@@ -26,7 +19,6 @@ import { getParam } from '@iqser/common-ui/lib/utils';
 export class EntitiesListingScreenComponent extends ListingComponent<Dictionary> implements OnInit {
     readonly #dossierTemplateId = getParam(DOSSIER_TEMPLATE_ID);
     readonly iconButtonTypes = IconButtonTypes;
-    readonly circleButtonTypes = CircleButtonTypes;
     readonly tableHeaderLabel = _('entities-listing.table-header.title');
     readonly tableColumnConfigs: TableColumnConfig<Dictionary>[] = [
         { label: _('entities-listing.table-col-names.type'), sortByKey: 'searchKey', width: '2fr' },

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

@@ -15,14 +15,12 @@
         <iqser-circle-button
             [matMenuTriggerFor]="readOnlyMenu"
             [tooltip]="'file-attributes-csv-import.table-header.actions.read-only' | translate"
-            [type]="circleButtonTypes.dark"
             icon="red:read-only"
         ></iqser-circle-button>
 
         <iqser-circle-button
             (action)="deactivateSelection()"
             [tooltip]="'file-attributes-csv-import.table-header.actions.remove-selected' | translate"
-            [type]="circleButtonTypes.dark"
             icon="iqser:trash"
         ></iqser-circle-button>
 
@@ -59,7 +57,6 @@
         <div class="cell">
             <iqser-editable-input
                 (save)="field.name = $event"
-                [buttonsType]="circleButtonTypes.dark"
                 [cancelTooltip]="'file-attributes-csv-import.action.cancel-edit-name' | translate"
                 [class]="'w-200'"
                 [editTooltip]="'file-attributes-csv-import.action.edit-name' | translate"
@@ -94,7 +91,6 @@
                     (action)="field.primaryAttribute = false; toggleFieldActive.emit(field)"
                     [removeTooltip]="true"
                     [tooltip]="'file-attributes-csv-import.action.remove' | translate"
-                    [type]="circleButtonTypes.dark"
                     icon="iqser:trash"
                 ></iqser-circle-button>
             </div>

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

@@ -1,8 +1,8 @@
 import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
-import { CircleButtonTypes, ListingComponent, listingProvidersFactory, TableColumnConfig } from '@iqser/common-ui';
-import { fileAttributeTypesTranslations } from '@translations/file-attribute-types-translations';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { ListingComponent, listingProvidersFactory, TableColumnConfig } from '@iqser/common-ui';
 import { FileAttributeConfigTypes, IField } from '@red/domain';
+import { fileAttributeTypesTranslations } from '@translations/file-attribute-types-translations';
 
 @Component({
     selector: 'redaction-active-fields-listing',
@@ -11,7 +11,6 @@ import { FileAttributeConfigTypes, IField } from '@red/domain';
     providers: listingProvidersFactory(ActiveFieldsListingComponent),
 })
 export class ActiveFieldsListingComponent extends ListingComponent<IField> implements OnChanges {
-    readonly circleButtonTypes = CircleButtonTypes;
     readonly translations = fileAttributeTypesTranslations;
     readonly tableHeaderLabel = _('file-attributes-csv-import.table-header.title');
     readonly tableColumnConfigs: TableColumnConfig<IField>[] = [

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

@@ -25,7 +25,6 @@
         (action)="openConfirmDeleteAttributeDialog()"
         *ngIf="permissionsService.canEditGlobalFileAttributes() && (listingService.areSomeSelected$ | async)"
         [tooltip]="'file-attributes-listing.bulk-actions.delete' | translate"
-        [type]="circleButtonTypes.dark"
         icon="iqser:trash"
     ></iqser-circle-button>
 </ng-template>
@@ -43,9 +42,8 @@
         <iqser-circle-button
             (action)="fileInput.click()"
             *allow="roles.fileAttributes.writeConfig; if: currentUser.isAdmin"
-            [tooltip]="'file-attributes-listing.upload-csv' | translate"
-            [type]="circleButtonTypes.dark"
             [attr.help-mode-key]="'upload_file_attribute'"
+            [tooltip]="'file-attributes-listing.upload-csv' | translate"
             icon="iqser:upload"
             tooltipPosition="above"
         ></iqser-circle-button>
@@ -53,9 +51,8 @@
         <iqser-circle-button
             (action)="openConfigurationsDialog()"
             *allow="roles.fileAttributes.writeConfig; if: currentUser.isAdmin"
-            [tooltip]="'file-attributes-listing.configurations' | translate"
-            [type]="circleButtonTypes.dark"
             [attr.help-mode-key]="'upload_file_attribute'"
+            [tooltip]="'file-attributes-listing.configurations' | translate"
             icon="iqser:settings"
             tooltipPosition="above"
         ></iqser-circle-button>
@@ -63,8 +60,8 @@
         <iqser-icon-button
             (action)="openAddEditAttributeDialog()"
             *ngIf="permissionsService.canEditGlobalFileAttributes()"
-            [label]="'file-attributes-listing.add-new' | translate"
             [attr.help-mode-key]="'create_new_file_attribute'"
+            [label]="'file-attributes-listing.add-new' | translate"
             [type]="iconButtonTypes.primary"
             icon="iqser:plus"
         ></iqser-icon-button>
@@ -113,14 +110,12 @@
                     <iqser-circle-button
                         (action)="openAddEditAttributeDialog(attribute)"
                         [tooltip]="'file-attributes-listing.action.edit' | translate"
-                        [type]="circleButtonTypes.dark"
                         icon="iqser:edit"
                     ></iqser-circle-button>
 
                     <iqser-circle-button
                         (action)="openConfirmDeleteAttributeDialog([attribute])"
                         [tooltip]="'file-attributes-listing.action.delete' | translate"
-                        [type]="circleButtonTypes.dark"
                         icon="iqser:trash"
                     ></iqser-circle-button>
                 </div>

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

@@ -1,7 +1,8 @@
+import { HttpStatusCode } from '@angular/common/http';
 import { Component, ElementRef, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
-import { AdminDialogService } from '../../services/admin-dialog.service';
+import { MatDialog } from '@angular/material/dialog';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import {
-    CircleButtonTypes,
     defaultDialogConfig,
     IconButtonTypes,
     largeDialogConfig,
@@ -11,27 +12,25 @@ import {
     TableColumnConfig,
     Toaster,
 } from '@iqser/common-ui';
-import { fileAttributeTypesTranslations } from '@translations/file-attribute-types-translations';
+import { getCurrentUser } from '@iqser/common-ui/lib/users';
-import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { getParam } from '@iqser/common-ui/lib/utils';
 import { DOSSIER_TEMPLATE_ID, FileAttributeConfig, IFileAttributeConfig, IFileAttributesConfig, User } from '@red/domain';
-import { FileAttributesService } from '@services/entity-services/file-attributes.service';
-import { HttpStatusCode } from '@angular/common/http';
-import { firstValueFrom } from 'rxjs';
 import { DossierTemplatesService } from '@services/dossier-templates/dossier-templates.service';
+import { FileAttributesService } from '@services/entity-services/file-attributes.service';
 import { PermissionsService } from '@services/permissions.service';
+import { fileAttributeTypesTranslations } from '@translations/file-attribute-types-translations';
 import { Roles } from '@users/roles';
-import { MatDialog } from '@angular/material/dialog';
+import { firstValueFrom } from 'rxjs';
+import { AdminDialogService } from '../../services/admin-dialog.service';
 import {
     AddEditFileAttributeDialogComponent,
     AddEditFileAttributeDialogData,
 } from './add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component';
+import { FileAttributesConfigurationsDialogComponent } from './file-attributes-configurations-dialog/file-attributes-configurations-dialog.component';
 import {
     FileAttributesCsvImportDialogComponent,
     IFileAttributesCSVImportData,
 } from './file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component';
-import { FileAttributesConfigurationsDialogComponent } from './file-attributes-configurations-dialog/file-attributes-configurations-dialog.component';
-import { getCurrentUser } from '@iqser/common-ui/lib/users';
-import { getParam } from '@iqser/common-ui/lib/utils';
 
 @Component({
     templateUrl: './file-attributes-listing-screen.component.html',
@@ -44,7 +43,6 @@ export class FileAttributesListingScreenComponent extends ListingComponent<FileA
     @ViewChild('fileInput') private _fileInput: ElementRef;
     readonly #dossierTemplateId = getParam(DOSSIER_TEMPLATE_ID);
     readonly iconButtonTypes = IconButtonTypes;
-    readonly circleButtonTypes = CircleButtonTypes;
     readonly currentUser = getCurrentUser<User>();
     readonly translations = fileAttributeTypesTranslations;
     readonly tableHeaderLabel = _('file-attributes-listing.table-header.title');

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

@@ -13,7 +13,6 @@
         (action)="openConfirmDeleteDialog()"
         *ngIf="canAddEditJustifications && listingService.areSomeSelected$ | async"
         [tooltip]="'justifications-listing.bulk.delete' | translate"
-        [type]="circleButtonTypes.dark"
         icon="iqser:trash"
     ></iqser-circle-button>
 </ng-template>

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

@@ -1,21 +1,14 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import {
+import { IconButtonTypes, ListingComponent, listingProvidersFactory, LoadingService, TableColumnConfig } from '@iqser/common-ui';
-    CircleButtonTypes,
-    IconButtonTypes,
-    ListingComponent,
-    listingProvidersFactory,
-    LoadingService,
-    TableColumnConfig,
-} from '@iqser/common-ui';
-import { DOSSIER_TEMPLATE_ID, Justification } from '@red/domain';
-import { JustificationsService } from '@services/entity-services/justifications.service';
-import { JustificationsDialogService } from '../justifications-dialog.service';
-import { UserPreferenceService } from '@users/user-preference.service';
-import { firstValueFrom } from 'rxjs';
-import { PermissionsService } from '@services/permissions.service';
 import { SortingOrders } from '@iqser/common-ui/lib/sorting';
 import { getParam } from '@iqser/common-ui/lib/utils';
+import { DOSSIER_TEMPLATE_ID, Justification } from '@red/domain';
+import { JustificationsService } from '@services/entity-services/justifications.service';
+import { PermissionsService } from '@services/permissions.service';
+import { UserPreferenceService } from '@users/user-preference.service';
+import { firstValueFrom } from 'rxjs';
+import { JustificationsDialogService } from '../justifications-dialog.service';
 
 @Component({
     selector: 'redaction-justifications-screen',
@@ -30,7 +23,6 @@ import { getParam } from '@iqser/common-ui/lib/utils';
 export class JustificationsScreenComponent extends ListingComponent<Justification> implements OnInit {
     readonly #dossierTemplateId = getParam(DOSSIER_TEMPLATE_ID);
     readonly iconButtonTypes = IconButtonTypes;
-    readonly circleButtonTypes = CircleButtonTypes;
     readonly tableHeaderLabel = _('justifications-listing.table-header');
     readonly tableColumnConfigs: TableColumnConfig<Justification>[] = [
         { label: _('justifications-listing.table-col-names.name'), width: '2fr', sortByKey: 'name' },

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

@@ -18,14 +18,12 @@
             <iqser-circle-button
                 (action)="openEditJustificationDialog()"
                 [tooltip]="'justifications-listing.actions.edit' | translate"
-                [type]="circleButtonTypes.dark"
                 icon="iqser:edit"
             ></iqser-circle-button>
 
             <iqser-circle-button
                 (action)="openConfirmDeleteDialog()"
                 [tooltip]="'justifications-listing.actions.delete' | translate"
-                [type]="circleButtonTypes.dark"
                 icon="iqser:trash"
             ></iqser-circle-button>
         </ng-container>

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

@@ -1,9 +1,8 @@
 import { ChangeDetectionStrategy, Component, inject, Input } from '@angular/core';
-import { DOSSIER_TEMPLATE_ID, Justification } from '@red/domain';
-import { CircleButtonTypes } from '@iqser/common-ui';
-import { JustificationsDialogService } from '../justifications-dialog.service';
-import { PermissionsService } from '@services/permissions.service';
 import { getParam } from '@iqser/common-ui/lib/utils';
+import { DOSSIER_TEMPLATE_ID, Justification } from '@red/domain';
+import { PermissionsService } from '@services/permissions.service';
+import { JustificationsDialogService } from '../justifications-dialog.service';
 
 @Component({
     selector: 'redaction-table-item',
@@ -11,8 +10,7 @@ import { getParam } from '@iqser/common-ui/lib/utils';
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TableItemComponent {
-    readonly #dossierTemplateId: string = getParam(DOSSIER_TEMPLATE_ID);
+    readonly #dossierTemplateId = getParam(DOSSIER_TEMPLATE_ID);
-    readonly circleButtonTypes = CircleButtonTypes;
     @Input() justification: Justification;
     readonly canAddEditJustifications = inject(PermissionsService).canAddEditJustifications();
 

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

@@ -34,7 +34,6 @@
         [tooltip]="
             (canDeleteSelected$ | async) ? ('user-listing.bulk.delete' | translate) : ('user-listing.bulk.delete-disabled' | translate)
         "
-        [type]="circleButtonTypes.dark"
         buttonId="bulk-delete-users-btn"
         icon="iqser:trash"
         tooltipPosition="after"
@@ -73,7 +72,6 @@
                     <iqser-circle-button
                         (action)="openAddEditUserDialog(user)"
                         [tooltip]="'user-listing.action.edit' | translate"
-                        [type]="circleButtonTypes.dark"
                         icon="iqser:edit"
                     ></iqser-circle-button>
 
@@ -81,7 +79,6 @@
                         (action)="openDeleteUsersDialog([user.id])"
                         [disabled]="deleteDisabled(user)"
                         [tooltip]="'user-listing.action.delete' | translate"
-                        [type]="circleButtonTypes.dark"
                         icon="iqser:trash"
                     ></iqser-circle-button>
                 </div>

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

@@ -1,12 +1,7 @@
 import { Component, inject, OnInit } from '@angular/core';
-import { UserService } from '@users/user.service';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { AdminDialogService } from '../../services/admin-dialog.service';
-import { TranslateService } from '@ngx-translate/core';
-import { DonutChartConfig, User, UserTypes } from '@red/domain';
-import { TranslateChartService } from '@services/translate-chart.service';
 import {
     ButtonConfig,
-    CircleButtonTypes,
     IconButtonTypes,
     ListingComponent,
     listingProvidersFactory,
@@ -14,14 +9,18 @@ import {
     SearchPositions,
     TableColumnConfig,
 } from '@iqser/common-ui';
+import { NestedFilter } from '@iqser/common-ui/lib/filtering';
+import { TranslateService } from '@ngx-translate/core';
+import { DonutChartConfig, User, UserTypes } from '@red/domain';
+import { RouterHistoryService } from '@services/router-history.service';
+import { TranslateChartService } from '@services/translate-chart.service';
+import { rolesTranslations } from '@translations/roles-translations';
+import { Roles } from '@users/roles';
+import { UserService } from '@users/user.service';
 import { firstValueFrom, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { rolesTranslations } from '@translations/roles-translations';
-import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { userTypeChecker, userTypeFilters } from '../../../../utils';
-import { RouterHistoryService } from '@services/router-history.service';
+import { AdminDialogService } from '../../services/admin-dialog.service';
-import { Roles } from '@users/roles';
-import { NestedFilter } from '@iqser/common-ui/lib/filtering';
 
 function configToFilter({ key, label }: DonutChartConfig) {
     return new NestedFilter({
@@ -42,8 +41,6 @@ export class UserListingScreenComponent extends ListingComponent<User> implement
     readonly routerHistoryService = inject(RouterHistoryService);
     readonly searchPositions = SearchPositions;
     readonly translations = rolesTranslations;
-    readonly iconButtonTypes = IconButtonTypes;
-    readonly circleButtonTypes = CircleButtonTypes;
     readonly roles = Roles;
     readonly currentUser = this._userService.currentUser;
     readonly canDeleteSelected$ = this.#canDeleteSelected$;

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

@@ -13,10 +13,10 @@
     <div class="table-header-actions">
         <iqser-icon-button
             *allow="roles.watermarks.write; if: currentUser.isAdmin"
+            [attr.help-mode-key]="'create_new_watermark'"
             [label]="'watermarks-listing.add-new' | translate"
             [routerLink]="getRouterLink() | tenant"
             [type]="iconButtonTypes.primary"
-            [attr.help-mode-key]="'create_new_watermark'"
             icon="iqser:plus"
         ></iqser-icon-button>
     </div>
@@ -31,9 +31,9 @@
         <div class="center cell">
             <mat-slide-toggle
                 (toggleChange)="toggleStatus(entity)"
+                [attr.help-mode-key]="'enable_disable_watermark'"
                 [checked]="entity.enabled"
                 [disabled]="!currentUser.isAdmin || (permissionsService.has$(roles.watermarks.write) | async) === false"
-                [attr.help-mode-key]="'enable_disable_watermark'"
                 color="primary"
             ></mat-slide-toggle>
         </div>
@@ -60,7 +60,6 @@
                     <iqser-circle-button
                         [routerLink]="getRouterLink(entity) | tenant"
                         [tooltip]="'watermarks-listing.action.edit' | translate"
-                        [type]="circleButtonTypes.dark"
                         icon="iqser:edit"
                     ></iqser-circle-button>
 
@@ -68,7 +67,6 @@
                         (action)="openConfirmDeleteWatermarkDialog(entity)"
                         *allow="roles.watermarks.write; if: currentUser.isAdmin"
                         [tooltip]="'watermarks-listing.action.delete' | translate"
-                        [type]="circleButtonTypes.dark"
                         icon="iqser:trash"
                     ></iqser-circle-button>
                 </div>

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

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import {
-    CircleButtonTypes,
     IconButtonTypes,
     IConfirmationDialogData,
     IqserPermissionsService,
@@ -10,14 +10,13 @@ import {
     TableColumnConfig,
     Toaster,
 } from '@iqser/common-ui';
-import { DOSSIER_TEMPLATE_ID, User, Watermark } from '@red/domain';
-import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { WatermarkService } from '@services/entity-services/watermark.service';
-import { AdminDialogService } from '../../../services/admin-dialog.service';
-import { WatermarksMapService } from '@services/entity-services/watermarks-map.service';
-import { Roles } from '@users/roles';
 import { getCurrentUser } from '@iqser/common-ui/lib/users';
 import { getParam } from '@iqser/common-ui/lib/utils';
+import { DOSSIER_TEMPLATE_ID, User, Watermark } from '@red/domain';
+import { WatermarkService } from '@services/entity-services/watermark.service';
+import { WatermarksMapService } from '@services/entity-services/watermarks-map.service';
+import { Roles } from '@users/roles';
+import { AdminDialogService } from '../../../services/admin-dialog.service';
 
 @Component({
     templateUrl: './watermarks-listing-screen.component.html',
@@ -27,7 +26,6 @@ import { getParam } from '@iqser/common-ui/lib/utils';
 export class WatermarksListingScreenComponent extends ListingComponent<Watermark> implements OnInit {
     readonly #dossierTemplateId = getParam(DOSSIER_TEMPLATE_ID);
     readonly iconButtonTypes = IconButtonTypes;
-    readonly circleButtonTypes = CircleButtonTypes;
     readonly currentUser = getCurrentUser<User>();
     readonly roles = Roles;
     readonly tableColumnConfigs: TableColumnConfig<Watermark>[] = [

apps/red-ui/src/app/modules/admin/shared/components/dossier-template-actions/dossier-template-actions.component.html

@@ -4,7 +4,6 @@
             (action)="openDeleteDossierTemplateDialog()"
             [buttonId]="'delete-dossier-template-btn'"
             [tooltip]="'dossier-templates-listing.action.delete' | translate"
-            [type]="circleButtonTypes.dark"
             icon="iqser:trash"
         ></iqser-circle-button>
 
@@ -12,7 +11,6 @@
             (action)="openEditCloneDossierTemplateDialog(true)"
             [buttonId]="'copy-dossier-template-btn'"
             [tooltip]="'dossier-templates-listing.action.clone' | translate"
-            [type]="circleButtonTypes.dark"
             icon="iqser:copy"
         ></iqser-circle-button>
 
@@ -20,7 +18,6 @@
             (action)="openEditCloneDossierTemplateDialog()"
             [buttonId]="'edit-dossier-template-btn'"
             [tooltip]="'dossier-templates-listing.action.edit' | translate"
-            [type]="circleButtonTypes.dark"
             icon="iqser:edit"
         ></iqser-circle-button>
     </div>

apps/red-ui/src/app/modules/admin/shared/components/dossier-template-actions/dossier-template-actions.component.ts

@@ -1,14 +1,14 @@
+import { NgIf } from '@angular/common';
 import { Component, Input, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { AdminDialogService } from '../../../services/admin-dialog.service';
+import { CircleButtonComponent, IqserHelpModeModule, LoadingService } from '@iqser/common-ui';
-import { CircleButtonComponent, CircleButtonTypes, IqserHelpModeModule, LoadingService } from '@iqser/common-ui';
+import { TenantsService } from '@iqser/common-ui/lib/tenants';
+import { getCurrentUser } from '@iqser/common-ui/lib/users';
+import { TranslateModule } from '@ngx-translate/core';
+import { DOSSIER_TEMPLATE_ID, type User } from '@red/domain';
 import { DossierTemplatesService } from '@services/dossier-templates/dossier-templates.service';
 import { firstValueFrom } from 'rxjs';
-import { DOSSIER_TEMPLATE_ID, type User } from '@red/domain';
+import { AdminDialogService } from '../../../services/admin-dialog.service';
-import { NgIf } from '@angular/common';
-import { TranslateModule } from '@ngx-translate/core';
-import { getCurrentUser } from '@iqser/common-ui/lib/users';
-import { TenantsService } from '@iqser/common-ui/lib/tenants';
 
 @Component({
     selector: 'redaction-dossier-template-actions',
@@ -20,7 +20,6 @@ import { TenantsService } from '@iqser/common-ui/lib/tenants';
 export class DossierTemplateActionsComponent implements OnInit {
     @Input() dossierTemplateId: string;
 
-    readonly circleButtonTypes = CircleButtonTypes;
     readonly currentUser = getCurrentUser<User>();
 
     constructor(

apps/red-ui/src/app/modules/dossier-overview/components/bulk-actions/dossier-overview-bulk-actions.component.ts

@@ -5,7 +5,6 @@ import { Action, ActionTypes, Dossier, File, ProcessingFileStatuses } from '@red
 import { PermissionsService } from '@services/permissions.service';
 import { LongPressEvent } from '@shared/directives/long-press.directive';
 import { UserPreferenceService } from '@users/user-preference.service';
-import { ConfigService } from '../../config.service';
 import { BulkActionsService } from '../../services/bulk-actions.service';
 
 @Component({
@@ -35,7 +34,7 @@ export class DossierOverviewBulkActionsComponent implements OnChanges {
     #canMoveToSameState: boolean;
     @Input() dossier: Dossier;
     @Input() selectedFiles: File[];
-    @Input() buttonType: CircleButtonType = CircleButtonTypes.dark;
+    @Input() buttonType: CircleButtonType = CircleButtonTypes.default;
     @Input() maxWidth: number;
     buttons: Action[];
 
@@ -43,7 +42,6 @@ export class DossierOverviewBulkActionsComponent implements OnChanges {
         private readonly _permissionsService: PermissionsService,
         private readonly _userPreferenceService: UserPreferenceService,
         private readonly _bulkActionsService: BulkActionsService,
-        private readonly _configService: ConfigService,
     ) {}
 
     private get _buttons(): Action[] {

apps/red-ui/src/app/modules/dossier-overview/components/view-mode-selection/view-mode-selection.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { ConfigService } from '../../config.service';
+import { ListingMode, ListingModes, ListingService } from '@iqser/common-ui';
-import { CircleButtonTypes, ListingMode, ListingModes, ListingService } from '@iqser/common-ui';
 import { File } from '@red/domain';
+import { ConfigService } from '../../config.service';
 
 @Component({
     selector: 'redaction-view-mode-selection',
@@ -11,7 +11,6 @@ import { File } from '@red/domain';
 })
 export class ViewModeSelectionComponent {
     readonly listingModes = ListingModes;
-    readonly circleButtonTypes = CircleButtonTypes;
 
     constructor(readonly configService: ConfigService, private readonly _listingService: ListingService<File>) {}
 

apps/red-ui/src/app/modules/file-preview/components/annotation-actions/annotation-actions.component.ts

@@ -1,18 +1,18 @@
 import { Component, computed, Input, OnChanges } from '@angular/core';
+import { HelpModeService, IqserPermissionsService } from '@iqser/common-ui';
+import { AnnotationPermissions } from '@models/file/annotation.permissions';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 import { PermissionsService } from '@services/permissions.service';
-import { AnnotationPermissions } from '@models/file/annotation.permissions';
+import { Roles } from '@users/roles';
+import { REDAnnotationManager } from '../../../pdf-viewer/services/annotation-manager.service';
 import { AnnotationActionsService } from '../../services/annotation-actions.service';
 import { AnnotationReferencesService } from '../../services/annotation-references.service';
-import { MultiSelectService } from '../../services/multi-select.service';
 import { FilePreviewStateService } from '../../services/file-preview-state.service';
-import { HelpModeService, IqserPermissionsService } from '@iqser/common-ui';
+import { MultiSelectService } from '../../services/multi-select.service';
 import { ViewModeService } from '../../services/view-mode.service';
-import { REDAnnotationManager } from '../../../pdf-viewer/services/annotation-manager.service';
-import { Roles } from '@users/roles';
 
 export const AnnotationButtonTypes = {
-    dark: 'dark',
+    default: 'default',
     primary: 'primary',
 } as const;
 
@@ -24,16 +24,15 @@ export type AnnotationButtonType = keyof typeof AnnotationButtonTypes;
     styleUrls: ['./annotation-actions.component.scss'],
 })
 export class AnnotationActionsComponent implements OnChanges {
-    @Input() buttonType: AnnotationButtonType = AnnotationButtonTypes.dark;
+    #annotations: AnnotationWrapper[] = [];
+    protected _annotationId = '';
+    @Input() buttonType: AnnotationButtonType = AnnotationButtonTypes.default;
     @Input() tooltipPosition: 'before' | 'above' = 'before';
     @Input() canPerformAnnotationActions: boolean;
     @Input() alwaysVisible: boolean;
     readonly roles = Roles;
-
     annotationPermissions: AnnotationPermissions;
     isImage = true;
-    protected _annotationId = '';
-    #annotations: AnnotationWrapper[] = [];
     readonly isVisible = computed(() => {
         const hidden = this._annotationManager.hidden();
         return this.#annotations.reduce((acc, annotation) => !hidden.has(annotation.id) && acc, true);

apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.html

@@ -216,7 +216,6 @@
         (action)="skippedService.toggleSkipped()"
         *ngIf="filter.id === 'skipped'"
         [icon]="skippedService.hideSkipped() ? 'red:visibility-off' : 'red:visibility'"
-        [type]="circleButtonTypes.dark"
         iqserPreventDefault
     ></iqser-circle-button>
 </ng-template>

apps/red-ui/src/app/modules/file-preview/components/highlights-separator/highlights-separator.component.html

@@ -11,7 +11,6 @@
         [size]="28"
         [tooltipPosition]="'above'"
         [tooltip]="'file-preview.highlights.convert' | translate"
-        [type]="circleButtonTypes.dark"
         class="mr-2"
     ></iqser-circle-button>
 
@@ -22,6 +21,5 @@
         [size]="28"
         [tooltipPosition]="'above'"
         [tooltip]="'file-preview.highlights.remove' | translate"
-        [type]="circleButtonTypes.dark"
     ></iqser-circle-button>
 </div>

apps/red-ui/src/app/modules/file-preview/components/highlights-separator/highlights-separator.component.ts

@@ -1,12 +1,11 @@
 import { Component, Input } from '@angular/core';
-import { CircleButtonTypes } from '@iqser/common-ui';
-import { EarmarkGroup, EarmarkOperation } from '@red/domain';
-import { FilePreviewStateService } from '../../services/file-preview-state.service';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
-import { FilePreviewDialogService } from '../../services/file-preview-dialog.service';
+import { EarmarkGroup, EarmarkOperation } from '@red/domain';
-import { FileDataService } from '../../services/file-data.service';
-import { MultiSelectService } from '../../services/multi-select.service';
 import { Roles } from '@users/roles';
+import { FileDataService } from '../../services/file-data.service';
+import { FilePreviewDialogService } from '../../services/file-preview-dialog.service';
+import { FilePreviewStateService } from '../../services/file-preview-state.service';
+import { MultiSelectService } from '../../services/multi-select.service';
 
 @Component({
     selector: 'redaction-highlights-separator',
@@ -17,7 +16,6 @@ export class HighlightsSeparatorComponent {
     @Input({ required: true }) highlightGroup: EarmarkGroup;
     @Input({ required: true }) annotation: AnnotationWrapper;
 
-    readonly circleButtonTypes = CircleButtonTypes;
     readonly roles = Roles;
 
     constructor(

apps/red-ui/src/app/modules/file-preview/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html

@@ -11,7 +11,6 @@
                         (action)="isEditingSelectedText = true"
                         *ngIf="isDictionaryRequest"
                         [tooltip]="'manual-annotation.dialog.content.edit-selected-text' | translate"
-                        [type]="circleButtonTypes.dark"
                         icon="iqser:edit"
                         tooltipPosition="below"
                     ></iqser-circle-button>

apps/red-ui/src/app/modules/file-preview/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.ts

@@ -1,16 +1,16 @@
 import { Component, Inject, OnInit } from '@angular/core';
-import { UntypedFormGroup, Validators } from '@angular/forms';
+import { Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { BaseDialogComponent, IqserPermissionsService } from '@iqser/common-ui';
 import { ManualRedactionEntryWrapper } from '@models/file/manual-redaction-entry.wrapper';
-import { JustificationsService } from '@services/entity-services/justifications.service';
 import { Dictionary, Dossier, File, IAddRedactionRequest, SuperTypes } from '@red/domain';
 import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';
 import { DictionaryService } from '@services/entity-services/dictionary.service';
-import { BaseDialogComponent, CircleButtonTypes, IqserPermissionsService } from '@iqser/common-ui';
+import { JustificationsService } from '@services/entity-services/justifications.service';
+import { Roles } from '@users/roles';
 import { firstValueFrom } from 'rxjs';
 import { ManualRedactionService } from '../../services/manual-redaction.service';
-import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { Roles } from '@users/roles';
 
 export interface LegalBasisOption {
     label?: string;
@@ -23,19 +23,16 @@ export interface LegalBasisOption {
     styleUrls: ['./manual-annotation-dialog.component.scss'],
 })
 export class ManualAnnotationDialogComponent extends BaseDialogComponent implements OnInit {
+    readonly #dossier: Dossier;
     readonly roles = Roles;
-    readonly circleButtonTypes = CircleButtonTypes;
     isDictionaryRequest: boolean;
     isFalsePositiveRequest: boolean;
     isEditingSelectedText = false;
     applyOnMultiplePages = false;
     manualRedactionTypeExists = true;
-
     possibleDictionaries: Dictionary[] = [];
     legalOptions: LegalBasisOption[] = [];
 
-    private readonly _dossier: Dossier;
-
     constructor(
         readonly iqserPermissionsService: IqserPermissionsService,
         private readonly _justificationsService: JustificationsService,
@@ -46,14 +43,14 @@ export class ManualAnnotationDialogComponent extends BaseDialogComponent impleme
         @Inject(MAT_DIALOG_DATA) readonly data: { manualRedactionEntryWrapper: ManualRedactionEntryWrapper; dossierId: string; file: File },
     ) {
         super(_dialogRef);
-        this._dossier = activeDossiersService.find(this.data.dossierId);
+        this.#dossier = activeDossiersService.find(this.data.dossierId);
 
         this.isFalsePositiveRequest = this.data.manualRedactionEntryWrapper.type === 'FALSE_POSITIVE';
         this.isDictionaryRequest = this.data.manualRedactionEntryWrapper.type === 'DICTIONARY' || this.isFalsePositiveRequest;
 
-        this.manualRedactionTypeExists = this._dictionaryService.hasManualType(this._dossier.dossierTemplateId);
+        this.manualRedactionTypeExists = this._dictionaryService.hasManualType(this.#dossier.dossierTemplateId);
 
-        this.form = this._getForm();
+        this.form = this.#getForm();
         this.initialFormValue = this.form.getRawValue();
     }
 
@@ -79,10 +76,10 @@ export class ManualAnnotationDialogComponent extends BaseDialogComponent impleme
 
     async ngOnInit() {
         this.possibleDictionaries = this.isDictionaryRequest
-            ? await this._dictionaryService.getDictionariesOptions(this._dossier.dossierTemplateId, this._dossier.id)
+            ? await this._dictionaryService.getDictionariesOptions(this.#dossier.dossierTemplateId, this.#dossier.id)
-            : this._dictionaryService.getRedactionTypes(this._dossier.dossierTemplateId);
+            : this._dictionaryService.getRedactionTypes(this.#dossier.dossierTemplateId);
 
-        const data = await firstValueFrom(this._justificationsService.getForDossierTemplate(this._dossier.dossierTemplateId));
+        const data = await firstValueFrom(this._justificationsService.getForDossierTemplate(this.#dossier.dossierTemplateId));
         this.legalOptions = data.map(lbm => ({
             legalBasis: lbm.reason,
             description: lbm.description,
@@ -91,15 +88,15 @@ export class ManualAnnotationDialogComponent extends BaseDialogComponent impleme
 
         this.legalOptions.sort((a, b) => a.label.localeCompare(b.label));
 
-        this._selectReason();
+        this.#selectReason();
 
         if (!this.isRectangle) {
-            this._formatSelectedTextValue();
+            this.#formatSelectedTextValue();
         }
     }
 
     save() {
-        this._enhanceManualRedaction(this.data.manualRedactionEntryWrapper.manualRedactionEntry);
+        this.#enhanceManualRedaction(this.data.manualRedactionEntryWrapper.manualRedactionEntry);
         try {
             const annotations =
                 this.isRectangle && !!this.form.get('multiplePages').value
@@ -141,7 +138,7 @@ export class ManualAnnotationDialogComponent extends BaseDialogComponent impleme
         return wrappers;
     }
 
-    private _formatSelectedTextValue() {
+    #formatSelectedTextValue() {
         this.data.manualRedactionEntryWrapper.manualRedactionEntry.value =
             this.data.manualRedactionEntryWrapper.manualRedactionEntry.value.replace(
                 // eslint-disable-next-line no-control-regex,max-len
@@ -150,7 +147,7 @@ export class ManualAnnotationDialogComponent extends BaseDialogComponent impleme
             );
     }
 
-    private _getForm(): UntypedFormGroup {
+    #getForm() {
         return this._formBuilder.group({
             selectedText: this.data?.manualRedactionEntryWrapper?.manualRedactionEntry?.value,
             section: [null],
@@ -164,7 +161,7 @@ export class ManualAnnotationDialogComponent extends BaseDialogComponent impleme
         });
     }
 
-    private _enhanceManualRedaction(addRedactionRequest: IAddRedactionRequest) {
+    #enhanceManualRedaction(addRedactionRequest: IAddRedactionRequest) {
         const legalOption: LegalBasisOption = this.form.get('reason').value;
         addRedactionRequest.type = this.form.get('dictionary').value;
         if (legalOption) {
@@ -190,7 +187,7 @@ export class ManualAnnotationDialogComponent extends BaseDialogComponent impleme
             : this.form.get('selectedText').value;
     }
 
-    private _selectReason() {
+    #selectReason() {
         if (this.legalOptions.length === 1) {
             this.form.get('reason').setValue(this.legalOptions[0]);
         }

apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.html

@@ -4,89 +4,84 @@
 
         <div class="dialog-content redaction">
             <div class="iqser-input-group w-450">
-                <label class="selected-text" [translate]="'redact-text.dialog.content.selected-text'"></label>
+                <label [translate]="'redact-text.dialog.content.selected-text'" class="selected-text"></label>
                 {{ form.get('selectedText').value }}
             </div>
 
             <iqser-details-radio
-                [options]="options"
                 (extraOptionChanged)="extraOptionChanged($event)"
+                [options]="options"
                 formControlName="option"
             ></iqser-details-radio>
 
-            <ng-container *deny="roles.getRss; if: !dictionaryRequest">
+            <div *ngIf="!dictionaryRequest" class="iqser-input-group required w-450">
-                <div class="iqser-input-group required w-450">
+                <label [translate]="'redact-text.dialog.content.reason'"></label>
-                    <label [translate]="'redact-text.dialog.content.reason'"></label>
+                <mat-form-field>
-                    <mat-form-field>
+                    <mat-select
-                        <mat-select
+                        [placeholder]="'redact-text.dialog.content.reason-placeholder' | translate"
-                            [placeholder]="'redact-text.dialog.content.reason-placeholder' | translate"
+                        class="full-width"
-                            class="full-width"
+                        formControlName="reason"
-                            formControlName="reason"
+                    >
+                        <mat-option
+                            *ngFor="let option of legalOptions"
+                            [matTooltip]="option.description"
+                            [value]="option"
+                            matTooltipPosition="after"
                         >
-                            <mat-option
+                            {{ option.label }}
-                                *ngFor="let option of legalOptions"
+                        </mat-option>
-                                [matTooltip]="option.description"
+                    </mat-select>
-                                [value]="option"
+                </mat-form-field>
-                                matTooltipPosition="after"
+            </div>
-                            >
-                                {{ option.label }}
-                            </mat-option>
-                        </mat-select>
-                    </mat-form-field>
-                </div>
 
-                <div class="iqser-input-group w-450">
+            <div *ngIf="!dictionaryRequest" class="iqser-input-group w-450">
-                    <label [translate]="'redact-text.dialog.content.legal-basis'"></label>
+                <label [translate]="'redact-text.dialog.content.legal-basis'"></label>
-                    <input [value]="form.get('reason').value?.legalBasis" disabled type="text" />
+                <input [value]="form.get('reason').value?.legalBasis" disabled type="text" />
-                </div>
+            </div>
-            </ng-container>
 
-            <ng-container *deny="roles.getRss; if: dictionaryRequest">
+            <div *ngIf="dictionaryRequest" class="iqser-input-group required w-450">
-                <div class="iqser-input-group required w-450">
+                <label [translate]="'redact-text.dialog.content.type'"></label>
-                    <label [translate]="'redact-text.dialog.content.type'"></label>
 
-                    <mat-form-field>
+                <mat-form-field>
-                        <mat-select formControlName="dictionary" [placeholder]="'redact-text.dialog.content.type-placeholder' | translate">
+                    <mat-select [placeholder]="'redact-text.dialog.content.type-placeholder' | translate" formControlName="dictionary">
-                            <mat-select-trigger>{{ displayedDictionaryLabel }}</mat-select-trigger>
+                        <mat-select-trigger>{{ displayedDictionaryLabel }}</mat-select-trigger>
-                            <mat-option
+                        <mat-option
-                                *ngFor="let dictionary of dictionaries"
+                            (click)="typeChanged()"
-                                [matTooltip]="dictionary.description"
+                            *ngFor="let dictionary of dictionaries"
-                                [value]="dictionary.type"
+                            [matTooltip]="dictionary.description"
-                                (click)="typeChanged()"
+                            [value]="dictionary.type"
-                                matTooltipPosition="after"
+                            matTooltipPosition="after"
-                            >
+                        >
-                                <span> {{ dictionary.label }} </span>
+                            <span> {{ dictionary.label }} </span>
-                            </mat-option>
+                        </mat-option>
-                        </mat-select>
+                    </mat-select>
-                    </mat-form-field>
+                </mat-form-field>
-                </div>
+            </div>
-            </ng-container>
 
             <div *ngIf="!dictionaryRequest" class="iqser-input-group w-450">
                 <label [translate]="'redact-text.dialog.content.comment'"></label>
                 <textarea
+                    [placeholder]="'redact-text.dialog.content.comment-placeholder' | translate"
                     formControlName="comment"
                     iqserHasScrollbar
                     name="comment"
                     rows="4"
                     type="text"
-                    [placeholder]="'redact-text.dialog.content.comment-placeholder' | translate"
                 ></textarea>
             </div>
         </div>
 
         <div class="dialog-actions">
             <iqser-icon-button
+                [disabled]="disabled"
                 [label]="'redact-text.dialog.actions.save' | translate"
                 [submit]="true"
                 [type]="iconButtonTypes.primary"
-                [disabled]="disabled"
+            />
-            >
-            </iqser-icon-button>
 
-            <div class="all-caps-label cancel" mat-dialog-close [translate]="'redact-text.dialog.actions.cancel'"></div>
+            <div [translate]="'redact-text.dialog.actions.cancel'" class="all-caps-label cancel" mat-dialog-close></div>
         </div>
     </form>
 
-    <iqser-circle-button (action)="close()" class="dialog-close" icon="iqser:close"></iqser-circle-button>
+    <iqser-circle-button (action)="close()" class="dialog-close" icon="iqser:close" />
 </section>

apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.ts

@@ -1,17 +1,17 @@
 import { Component, OnInit } from '@angular/core';
-import { DetailsRadioOption, IconButtonTypes, IqserDialogComponent, IqserPermissionsService } from '@iqser/common-ui';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { Dictionary, Dossier, IAddRedactionRequest, SuperTypes } from '@red/domain';
 import { FormBuilder, UntypedFormGroup } from '@angular/forms';
+import { DetailsRadioOption, IconButtonTypes, IqserDialogComponent } from '@iqser/common-ui';
+import { Dictionary, Dossier, IAddRedactionRequest, SuperTypes } from '@red/domain';
+import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';
+import { DictionaryService } from '@services/entity-services/dictionary.service';
+import { JustificationsService } from '@services/entity-services/justifications.service';
 import { Roles } from '@users/roles';
 import { firstValueFrom } from 'rxjs';
-import { JustificationsService } from '@services/entity-services/justifications.service';
-import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';
-import { LegalBasisOption } from '../manual-redaction-dialog/manual-annotation-dialog.component';
-import { DictionaryService } from '@services/entity-services/dictionary.service';
 import { tap } from 'rxjs/operators';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { getRedactOrHintOptions, RedactOrHintOption, RedactOrHintOptions } from '../../utils/dialog-options';
 import { RedactTextData, RedactTextResult } from '../../utils/dialog-types';
+import { LegalBasisOption } from '../manual-redaction-dialog/manual-annotation-dialog.component';
 
 @Component({
     templateUrl: './redact-text-dialog.component.html',
@@ -21,6 +21,9 @@ export class RedactTextDialogComponent
     extends IqserDialogComponent<RedactTextDialogComponent, RedactTextData, RedactTextResult>
     implements OnInit
 {
+    #manualRedactionTypeExists = true;
+    #applyToAllDossiers: boolean;
+    readonly #dossier: Dossier;
     readonly roles = Roles;
     readonly iconButtonTypes = IconButtonTypes;
     readonly options: DetailsRadioOption<RedactOrHintOption>[];
@@ -29,24 +32,17 @@ export class RedactTextDialogComponent
     dictionaries: Dictionary[] = [];
     form!: UntypedFormGroup;
 
-    #manualRedactionTypeExists = true;
-    #applyToAllDossiers: boolean;
-
-    readonly #dossier: Dossier;
-    readonly #isRss = this._iqserPermissionsService.has(Roles.getRss);
-
     constructor(
         private readonly _justificationsService: JustificationsService,
         private readonly _activeDossiersService: ActiveDossiersService,
         private readonly _dictionaryService: DictionaryService,
-        private readonly _iqserPermissionsService: IqserPermissionsService,
         private readonly _formBuilder: FormBuilder,
     ) {
         super();
         this.#dossier = _activeDossiersService.find(this.data.dossierId);
         this.#applyToAllDossiers = this.data.applyToAllDossiers ?? true;
         this.#manualRedactionTypeExists = this._dictionaryService.hasManualType(this.#dossier.dossierTemplateId);
-        this.options = getRedactOrHintOptions(this.#dossier, this.#isRss, false, this.#applyToAllDossiers, this.data.isApprover);
+        this.options = getRedactOrHintOptions(this.#dossier, false, false, this.#applyToAllDossiers, this.data.isApprover);
 
         this.form = this.#getForm();
 
@@ -74,7 +70,7 @@ export class RedactTextDialogComponent
     }
 
     get disabled() {
-        if (this.dictionaryRequest || this.#isRss) {
+        if (this.dictionaryRequest) {
             return !this.form.get('dictionary').value;
         }
         return !this.form.get('reason').value;
@@ -117,7 +113,7 @@ export class RedactTextDialogComponent
     save(): void {
         this.#enhanceManualRedaction(this.data.manualRedactionEntryWrapper.manualRedactionEntry);
         const redaction = this.data.manualRedactionEntryWrapper.manualRedactionEntry;
-        this.dialogRef.close({
+        this.close({
             redaction,
             dictionary: this.dictionaries.find(d => d.type === this.form.get('dictionary').value),
         });
@@ -127,7 +123,7 @@ export class RedactTextDialogComponent
         this.dictionaries = this._dictionaryService.getRedactTextDictionaries(this.#dossier.dossierTemplateId, !this.#applyToAllDossiers);
     }
 
-    #getForm(): UntypedFormGroup {
+    #getForm() {
         return this._formBuilder.group({
             selectedText: this.data?.manualRedactionEntryWrapper?.manualRedactionEntry?.value,
             reason: [null],
@@ -172,9 +168,7 @@ export class RedactTextDialogComponent
 
     #resetValues() {
         this.#applyToAllDossiers = this.data.applyToAllDossiers ?? true;
-        if (!this.#isRss) {
+        this.options[1].extraOption.checked = this.#applyToAllDossiers;
-            this.options[1].extraOption.checked = this.#applyToAllDossiers;
-        }
         if (this.dictionaryRequest) {
             this.form.get('reason').setValue(null);
             this.form.get('dictionary').setValue(null);

apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.ts

@@ -1,11 +1,10 @@
 import { Component } from '@angular/core';
-import { DetailsRadioOption, IconButtonTypes, IqserDialogComponent } from '@iqser/common-ui';
-import { FormBuilder, UntypedFormGroup } from '@angular/forms';
-import { PermissionsService } from '@services/permissions.service';
-import { tap } from 'rxjs/operators';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { RemoveRedactionData, RemoveRedactionResult } from '../../utils/dialog-types';
+import { FormBuilder, UntypedFormGroup } from '@angular/forms';
+import { DetailsRadioOption, IconButtonTypes, IqserDialogComponent } from '@iqser/common-ui';
+import { tap } from 'rxjs/operators';
 import { getRemoveRedactionOptions, RemoveRedactionOption } from '../../utils/dialog-options';
+import { RemoveRedactionData, RemoveRedactionResult } from '../../utils/dialog-types';
 
 @Component({
     templateUrl: './remove-redaction-dialog.component.html',
@@ -16,16 +15,14 @@ export class RemoveRedactionDialogComponent extends IqserDialogComponent<
     RemoveRedactionData,
     RemoveRedactionResult
 > {
+    #applyToAllDossiers: boolean;
     readonly iconButtonTypes = IconButtonTypes;
     readonly options: DetailsRadioOption<RemoveRedactionOption>[];
     readonly recommendation = this.data.redaction.isRecommendation;
-
     form!: UntypedFormGroup;
     hint: boolean;
 
-    #applyToAllDossiers: boolean;
+    constructor(private readonly _formBuilder: FormBuilder) {
-
-    constructor(private readonly _formBuilder: FormBuilder, private readonly _permissionsService: PermissionsService) {
         super();
         this.hint = this.data.redaction.hint;
         this.options = getRemoveRedactionOptions(this.data);
@@ -48,10 +45,10 @@ export class RemoveRedactionDialogComponent extends IqserDialogComponent<
     }
 
     save(): void {
-        this.dialogRef.close(this.form.getRawValue());
+        this.close(this.form.getRawValue());
     }
 
-    #getForm(): UntypedFormGroup {
+    #getForm() {
         return this._formBuilder.group({
             comment: [null],
             option: [this.options[0]],

apps/red-ui/src/app/modules/file-preview/dialogs/structured-component-management-dialog/structured-component-management-dialog.component.html

@@ -14,7 +14,6 @@
                 <div [id]="getValueCellId(index)">
                     <iqser-editable-input
                         (save)="saveEdit($event, entry.value.originalKey)"
-                        [buttonsType]="circleButtonTypes.dark"
                         [canEdit]="canEdit"
                         [cancelTooltip]="'rss-dialog.actions.cancel-edit' | translate"
                         [editTooltip]="'rss-dialog.actions.edit' | translate"
@@ -29,7 +28,6 @@
                                 *ngIf="entry.value.value && canEdit"
                                 [showDot]="true"
                                 [tooltip]="'rss-dialog.actions.undo' | translate : { value: entry.value.originalValue } | replaceNbsp"
-                                [type]="circleButtonTypes.dark"
                                 class="ml-2"
                                 icon="red:undo"
                             ></iqser-circle-button>

apps/red-ui/src/app/modules/file-preview/dialogs/structured-component-management-dialog/structured-component-management-dialog.component.ts

@@ -3,13 +3,7 @@ import { ChangeDetectionStrategy, Component, Inject, OnInit, signal } from '@ang
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { ReplaceNbspPipe } from '@common-ui/pipes/replace-nbsp.pipe';
-import {
+import { BaseDialogComponent, CircleButtonComponent, EditableInputComponent, IconButtonComponent } from '@iqser/common-ui';
-    BaseDialogComponent,
-    CircleButtonComponent,
-    CircleButtonTypes,
-    EditableInputComponent,
-    IconButtonComponent,
-} from '@iqser/common-ui';
 import { TranslateModule } from '@ngx-translate/core';
 import { IFile, RssEntry, WorkflowFileStatuses } from '@red/domain';
 import { FilesMapService } from '@services/files/files-map.service';
@@ -40,7 +34,6 @@ interface ScmData {
     ],
 })
 export class StructuredComponentManagementDialogComponent extends BaseDialogComponent implements OnInit {
-    readonly circleButtonTypes = CircleButtonTypes;
     readonly scmData = signal<RssEntry | undefined>(undefined);
     readonly openScmDialogByDefault = signal(this.userPreferences.getOpenScmDialogByDefault());
 

apps/red-ui/src/app/modules/file-preview/services/annotation-actions.service.ts

@@ -225,14 +225,14 @@ export class AnnotationActionsService {
         );
     }
 
-    async resize(annotationWrapper: AnnotationWrapper) {
+    resize(annotationWrapper: AnnotationWrapper) {
         this._annotationManager.resizingAnnotationId = annotationWrapper.id;
 
         if (annotationWrapper.rectangle || annotationWrapper.imported || annotationWrapper.isImage) {
             this._annotationManager.delete(annotationWrapper);
             const rectangleAnnotation = this.#generateRectangle(annotationWrapper);
-            await this._annotationManager.add(rectangleAnnotation);
+            console.log(rectangleAnnotation);
-            return;
+            return this._annotationManager.add(rectangleAnnotation);
         }
 
         const viewerAnnotation = this._annotationManager.get(annotationWrapper);

apps/red-ui/src/app/modules/file-preview/services/pdf-proxy.service.ts

@@ -43,15 +43,15 @@ import Quad = Core.Math.Quad;
 
 @Injectable()
 export class PdfProxyService {
-    private readonly _convertPath = inject(BASE_HREF_FN);
+    readonly #convertPath = inject(BASE_HREF_FN);
-    readonly #visibilityOffIcon = this._convertPath('/assets/icons/general/visibility-off.svg');
+    readonly #visibilityOffIcon = this.#convertPath('/assets/icons/general/visibility-off.svg');
-    readonly #visibilityIcon = this._convertPath('/assets/icons/general/visibility.svg');
+    readonly #visibilityIcon = this.#convertPath('/assets/icons/general/visibility.svg');
-    readonly #falsePositiveIcon = this._convertPath('/assets/icons/general/pdftron-action-false-positive.svg');
+    readonly #falsePositiveIcon = this.#convertPath('/assets/icons/general/pdftron-action-false-positive.svg');
     readonly #addRedactionIcon = this._iqserPermissionsService.has(Roles.getRss)
-        ? this._convertPath('/assets/icons/general/pdftron-action-add-annotation.svg')
+        ? this.#convertPath('/assets/icons/general/pdftron-action-add-annotation.svg')
-        : this._convertPath('/assets/icons/general/pdftron-action-add-redaction.svg');
+        : this.#convertPath('/assets/icons/general/pdftron-action-add-redaction.svg');
-    readonly #isDocumine;
+    readonly #isDocumine = getConfig().IS_DOCUMINE;
-    readonly #addHintIcon = this._convertPath('/assets/icons/general/pdftron-action-add-hint.svg');
+    readonly #addHintIcon = this.#convertPath('/assets/icons/general/pdftron-action-add-hint.svg');
     readonly annotationSelected$ = this.#annotationSelected$;
     readonly manualAnnotationRequested$ = new Subject<ManualRedactionEntryWrapper>();
     readonly redactTextRequested$ = new Subject<ManualRedactionEntryWrapper>();
@@ -114,7 +114,6 @@ export class PdfProxyService {
                 this._viewerHeaderService.disable([HeaderElements.TOGGLE_READABLE_REDACTIONS]);
             }
         });
-        this.#isDocumine = getConfig().IS_DOCUMINE;
     }
 
     get #annotationSelected$() {

apps/red-ui/src/app/modules/shared-dossiers/components/dossiers-listing-actions/dossiers-listing-actions.component.html

@@ -2,6 +2,7 @@
     <iqser-circle-button
         (action)="openEditDossierDialog(dossier.id)"
         *allow="roles.dossiers.read; if: currentUser.isUser"
+        [attr.help-mode-key]="'edit_dossier_dossier_info'"
         [icon]="
             ((iqserPermissionsService.has$(roles.dossiers.edit) | async) && currentUser.isManager) || canEditDossierDictionary
                 ? 'iqser:edit'
@@ -13,24 +14,20 @@
                 : 'dossier-listing.dossier-info.action'
             ) | translate
         "
-        [type]="circleButtonTypes.dark"
-        [attr.help-mode-key]="'edit_dossier_dossier_info'"
     ></iqser-circle-button>
 
     <iqser-circle-button
         (action)="reanalyseDossier(dossier)"
         *ngIf="displayReanalyseBtn"
         [tooltip]="'dossier-listing.reanalyse.action' | translate"
-        [type]="circleButtonTypes.dark"
         icon="iqser:refresh"
     ></iqser-circle-button>
 
     <redaction-file-download-btn
+        [attr.help-mode-key]="'download_dossier'"
         [buttonId]="'download-dossier-files-' + dossier.id"
         [disabled]="downloadBtnDisabled"
         [dossier]="dossier"
         [files]="files"
-        [attr.help-mode-key]="'download_dossier'"
-        [type]="circleButtonTypes.dark"
     ></redaction-file-download-btn>
 </div>

apps/red-ui/src/app/modules/shared-dossiers/components/dossiers-listing-actions/dossiers-listing-actions.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, OnChanges } from '@angular/core';
-import { CircleButtonTypes, IqserPermissionsService, ScrollableParentViews } from '@iqser/common-ui';
+import { IqserPermissionsService } from '@iqser/common-ui';
 import { getCurrentUser } from '@iqser/common-ui/lib/users';
 import type { Dossier, File, User } from '@red/domain';
 import { FilesMapService } from '@services/files/files-map.service';
@@ -15,9 +15,7 @@ import { DossiersDialogService } from '../../services/dossiers-dialog.service';
     templateUrl: './dossiers-listing-actions.component.html',
 })
 export class DossiersListingActionsComponent implements OnChanges {
-    readonly circleButtonTypes = CircleButtonTypes;
     readonly roles = Roles;
-    readonly scrollableParentViews = ScrollableParentViews;
     readonly currentUser = getCurrentUser<User>();
 
     analysisForced: boolean;

apps/red-ui/src/app/modules/shared-dossiers/components/file-actions/file-actions.component.html

@@ -14,7 +14,6 @@
     <div [attr.help-mode-key]="fileActionsHelpModeKey" class="file-actions">
         <redaction-expandable-file-actions
             [actions]="buttons"
-            [buttonType]="buttonType"
             [id]="'actions-for-' + file.fileId"
             [maxWidth]="maxWidth"
             [minWidth]="minWidth"

apps/red-ui/src/app/modules/shared-dossiers/components/file-actions/file-actions.component.ts

@@ -2,15 +2,7 @@ import { ChangeDetectorRef, Component, HostBinding, Injector, Input, OnChanges,
 import { toObservable } from '@angular/core/rxjs-interop';
 import { Router } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import {
+import { CircleButtonTypes, getConfig, IConfirmationDialogData, IqserPermissionsService, LoadingService, Toaster } from '@iqser/common-ui';
-    CircleButtonType,
-    CircleButtonTypes,
-    getConfig,
-    IConfirmationDialogData,
-    IqserPermissionsService,
-    LoadingService,
-    Toaster,
-} from '@iqser/common-ui';
 import { TenantsService } from '@iqser/common-ui/lib/tenants';
 import { getCurrentUser } from '@iqser/common-ui/lib/users';
 import { IqserTooltipPositions } from '@iqser/common-ui/lib/utils';
@@ -50,11 +42,9 @@ export class FileActionsComponent implements OnChanges {
     @Input() maxWidth: number;
     @Input() minWidth: number;
     @Input() fileActionsHelpModeKey: 'document_features_in_dossier' | 'editor_document_features' = 'document_features_in_dossier';
-    readonly circleButtonTypes = CircleButtonTypes;
     readonly currentUser = getCurrentUser<User>();
     toggleTooltip?: string;
     assignTooltip?: string;
-    buttonType?: CircleButtonType;
     showSetToNew = false;
     showUndoApproval = false;
     showAssignToSelf = false;
@@ -404,7 +394,6 @@ export class FileActionsComponent implements OnChanges {
         this.isFilePreview = this.type === 'file-preview';
 
         this.assignTooltip = this.file.isUnderApproval ? _('dossier-overview.assign-approver') : _('dossier-overview.assign-reviewer');
-        this.buttonType = this.isFilePreview ? CircleButtonTypes.default : CircleButtonTypes.dark;
         this.showAssign =
             (this._permissionsService.canAssignUser(this.file, this.dossier) ||
                 this._permissionsService.canUnassignUser(this.file, this.dossier)) &&

apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.html

@@ -68,14 +68,12 @@
                 <iqser-circle-button
                     (action)="deleteAttr(attr)"
                     [tooltip]="'edit-dossier-dialog.attributes.delete-image' | translate"
-                    [type]="circleButtonTypes.dark"
                     icon="iqser:trash"
                 ></iqser-circle-button>
 
                 <iqser-circle-button
                     (action)="fileInputClick(attr)"
                     [tooltip]="'edit-dossier-dialog.attributes.upload-image' | translate"
-                    [type]="circleButtonTypes.dark"
                     icon="iqser:upload"
                 ></iqser-circle-button>
             </div>

apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.ts

@@ -1,13 +1,13 @@
 import { Component, ElementRef, Input, OnInit, QueryList, ViewChildren } from '@angular/core';
-import { EditDossierSaveResult, EditDossierSectionInterface } from '../edit-dossier-section.interface';
-import { Dossier, DossierAttributeConfigType, DossierAttributeConfigTypes, DossierAttributeWithValue } from '@red/domain';
-import { PermissionsService } from '@services/permissions.service';
-import { CircleButtonTypes, IconButtonTypes, LoadingService, Toaster } from '@iqser/common-ui';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
-import { DossierAttributesService } from '@services/entity-services/dossier-attributes.service';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { firstValueFrom } from 'rxjs';
+import { IconButtonTypes, LoadingService, Toaster } from '@iqser/common-ui';
+import { Dossier, DossierAttributeConfigType, DossierAttributeConfigTypes, DossierAttributeWithValue } from '@red/domain';
+import { DossierAttributesService } from '@services/entity-services/dossier-attributes.service';
+import { PermissionsService } from '@services/permissions.service';
 import dayjs from 'dayjs';
+import { firstValueFrom } from 'rxjs';
+import { EditDossierSaveResult, EditDossierSectionInterface } from '../edit-dossier-section.interface';
 
 @Component({
     selector: 'redaction-edit-dossier-attributes',
@@ -15,17 +15,14 @@ import dayjs from 'dayjs';
     styleUrls: ['./edit-dossier-attributes.component.scss'],
 })
 export class EditDossierAttributesComponent implements EditDossierSectionInterface, OnInit {
+    @ViewChildren('fileInput') private _fileInputs: QueryList<ElementRef>;
     readonly iconButtonTypes = IconButtonTypes;
-    readonly circleButtonTypes = CircleButtonTypes;
     readonly dossierAttributeConfigTypes = DossierAttributeConfigTypes;
-
     @Input() dossier: Dossier;
     customAttributes: DossierAttributeWithValue[] = [];
     imageAttributes: DossierAttributeWithValue[] = [];
     attributes: DossierAttributeWithValue[] = [];
-
     form: UntypedFormGroup;
-    @ViewChildren('fileInput') private _fileInputs: QueryList<ElementRef>;
 
     constructor(
         private readonly _permissionsService: PermissionsService,

apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component.ts

@@ -1,13 +1,13 @@
 import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { LoadingService } from '@iqser/common-ui';
+import { List } from '@iqser/common-ui/lib/utils';
 import { Dictionary, DictionaryEntryType, DictionaryEntryTypes, Dossier } from '@red/domain';
-import { EditDossierSaveResult } from '../edit-dossier-section.interface';
+import { DictionaryService } from '@services/entity-services/dictionary.service';
 import { PermissionsService } from '@services/permissions.service';
 import { DictionaryManagerComponent } from '@shared/components/dictionary-manager/dictionary-manager.component';
-import { DictionaryService } from '@services/entity-services/dictionary.service';
-import { CircleButtonTypes, LoadingService } from '@iqser/common-ui';
-import { DossiersDialogService } from '../../../services/dossiers-dialog.service';
 import { firstValueFrom } from 'rxjs';
-import { List } from '@iqser/common-ui/lib/utils';
+import { DossiersDialogService } from '../../../services/dossiers-dialog.service';
+import { EditDossierSaveResult } from '../edit-dossier-section.interface';
 
 @Component({
     selector: 'redaction-edit-dossier-dictionary',
@@ -15,17 +15,14 @@ import { List } from '@iqser/common-ui/lib/utils';
     styleUrls: ['./edit-dossier-dictionary.component.scss'],
 })
 export class EditDossierDictionaryComponent implements OnInit {
+    @ViewChild(DictionaryManagerComponent, { static: false }) private readonly _dictionaryManager: DictionaryManagerComponent;
     @Input() dossier: Dossier;
-
     canEdit = false;
     dictionaries: Dictionary[];
     selectedDictionary: Dictionary;
     activeEntryType = DictionaryEntryTypes.ENTRY;
     entriesToDisplay: List = [];
-
-    readonly circleButtonTypes = CircleButtonTypes;
     readonly entryTypes = DictionaryEntryTypes;
-    @ViewChild(DictionaryManagerComponent, { static: false }) private readonly _dictionaryManager: DictionaryManagerComponent;
 
     constructor(
         private readonly _dictionaryService: DictionaryService,

apps/red-ui/src/app/modules/shared/components/buttons/file-download-btn/file-download-btn.component.ts

@@ -1,11 +1,11 @@
 import { Component, Input, OnChanges } from '@angular/core';
-import { PermissionsService } from '@services/permissions.service';
-import { Dossier, File, ProcessingFileStatuses } from '@red/domain';
-import { FileDownloadService } from '@upload-download/services/file-download.service';
-import { CircleButtonType, CircleButtonTypes, IqserDialog, Toaster } from '@iqser/common-ui';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { DownloadDialogComponent } from '@shared/dialogs/download-dialog/download-dialog.component';
+import { CircleButtonType, CircleButtonTypes, IqserDialog, Toaster } from '@iqser/common-ui';
 import { TenantsService } from '@iqser/common-ui/lib/tenants';
+import { Dossier, File, ProcessingFileStatuses } from '@red/domain';
+import { PermissionsService } from '@services/permissions.service';
+import { DownloadDialogComponent } from '@shared/dialogs/download-dialog/download-dialog.component';
+import { FileDownloadService } from '@upload-download/services/file-download.service';
 
 @Component({
     selector: 'redaction-file-download-btn',

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

@@ -11,13 +11,13 @@
         <div class="content-container">
             <iqser-table
                 [bulkActions]="bulkActions"
+                [headerHelpModeKey]="'trash'"
                 [itemSize]="80"
                 [noDataText]="'trash.no-data.title' | translate"
                 [noMatchText]="'trash.no-match.title' | translate"
                 [selectionEnabled]="true"
                 [tableColumnConfigs]="tableColumnConfigs"
                 [tableItemClasses]="{ disabled: disabledFn }"
-                [headerHelpModeKey]="'trash'"
                 noDataIcon="red:template"
             ></iqser-table>
         </div>
@@ -29,7 +29,6 @@
         (action)="restore()"
         *ngIf="canRestoreSelected$ | async"
         [tooltip]="'trash.bulk.restore' | translate"
-        [type]="circleButtonTypes.dark"
         icon="red:put-back"
     ></iqser-circle-button>
 
@@ -37,7 +36,6 @@
         (action)="hardDelete()"
         *ngIf="canHardDeleteSelected$ | async"
         [tooltip]="'trash.bulk.delete' | translate"
-        [type]="circleButtonTypes.dark"
         icon="iqser:trash"
     ></iqser-circle-button>
 </ng-template>

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

@@ -1,13 +1,13 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { CircleButtonTypes, ListingComponent, listingProvidersFactory, LoadingService, TableColumnConfig } from '@iqser/common-ui';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { firstValueFrom, Observable } from 'rxjs';
+import { ListingComponent, listingProvidersFactory, LoadingService, TableColumnConfig } from '@iqser/common-ui';
-import { distinctUntilChanged, map } from 'rxjs/operators';
+import { SortingOrders } from '@iqser/common-ui/lib/sorting';
-import { RouterHistoryService } from '@services/router-history.service';
 import { TrashItem } from '@red/domain';
 import { TrashService } from '@services/entity-services/trash.service';
+import { RouterHistoryService } from '@services/router-history.service';
+import { firstValueFrom, Observable } from 'rxjs';
+import { distinctUntilChanged, map } from 'rxjs/operators';
 import { TrashDialogService } from '../services/trash-dialog.service';
-import { SortingOrders } from '@iqser/common-ui/lib/sorting';
 
 @Component({
     templateUrl: './trash-screen.component.html',
@@ -18,7 +18,6 @@ import { SortingOrders } from '@iqser/common-ui/lib/sorting';
     }),
 })
 export class TrashScreenComponent extends ListingComponent<TrashItem> implements OnInit {
-    readonly circleButtonTypes = CircleButtonTypes;
     readonly tableHeaderLabel = _('trash.table-header.title');
     readonly canRestoreSelected$ = this._canRestoreSelected$;
     readonly canHardDeleteSelected$ = this._canHardDeleteSelected$;
@@ -44,10 +43,6 @@ export class TrashScreenComponent extends ListingComponent<TrashItem> implements
         });
     }
 
-    ngOnInit() {
-        this._loadingService.stop();
-    }
-
     private get _canRestoreSelected$(): Observable<boolean> {
         return this.listingService.selectedEntities$.pipe(
             map(entities => entities.length && !entities.find(dossier => !(dossier.canRestore && dossier.hasRestoreRights))),
@@ -62,6 +57,10 @@ export class TrashScreenComponent extends ListingComponent<TrashItem> implements
         );
     }
 
+    ngOnInit() {
+        this._loadingService.stop();
+    }
+
     disabledFn = (dossier: TrashItem) => !dossier.canRestore;
 
     hardDelete(items = this.listingService.selected): void {

apps/red-ui/src/app/modules/trash/trash-screen/trash-table-item/trash-table-item.component.html

@@ -46,7 +46,6 @@
             (action)="restore.emit([item])"
             *ngIf="item.canRestore && item.hasRestoreRights"
             [tooltip]="'trash.action.restore' | translate"
-            [type]="circleButtonTypes.dark"
             icon="red:put-back"
         ></iqser-circle-button>
 
@@ -54,7 +53,6 @@
             (action)="hardDelete.emit([item])"
             *ngIf="item.hasHardDeleteRights"
             [tooltip]="'trash.action.delete' | translate"
-            [type]="circleButtonTypes.dark"
             icon="iqser:trash"
         ></iqser-circle-button>
     </div>

apps/red-ui/src/app/modules/trash/trash-screen/trash-table-item/trash-table-item.component.ts

@@ -1,9 +1,8 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
 import { Dossier, DossierStats, TrashDossier, TrashFile, TrashItem } from '@red/domain';
-import { CircleButtonTypes } from '@iqser/common-ui';
 import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';
-import { Observable } from 'rxjs';
 import { DossierStatsService } from '@services/dossiers/dossier-stats.service';
+import { Observable } from 'rxjs';
 
 @Component({
     selector: 'redaction-trash-table-item [item]',
@@ -12,8 +11,6 @@ import { DossierStatsService } from '@services/dossiers/dossier-stats.service';
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TrashTableItemComponent implements OnChanges {
-    readonly circleButtonTypes = CircleButtonTypes;
-
     @Input() item: TrashItem;
     @Output() restore = new EventEmitter<TrashItem[]>();
     @Output() hardDelete = new EventEmitter<TrashItem[]>();

apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.html

@@ -51,7 +51,6 @@
                         (action)="uploadItem(model)"
                         *ngIf="model.error && !model.sizeError && !model.typeError"
                         [tooltip]="'upload-status.dialog.actions.re-upload' | translate"
-                        [type]="circleButtonTypes.dark"
                         icon="iqser:refresh"
                         tooltipPosition="before"
                     ></iqser-circle-button>
@@ -59,7 +58,6 @@
                     <iqser-circle-button
                         (action)="cancelItem(model)"
                         [tooltip]="'upload-status.dialog.actions.cancel' | translate"
-                        [type]="circleButtonTypes.dark"
                         icon="iqser:close"
                         tooltipPosition="before"
                     ></iqser-circle-button>

apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.ts

@@ -1,8 +1,7 @@
+import { OverlayRef } from '@angular/cdk/overlay';
 import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { FileUploadModel } from '../model/file-upload.model';
 import { FileUploadService } from '../services/file-upload.service';
-import { OverlayRef } from '@angular/cdk/overlay';
-import { CircleButtonTypes } from '@iqser/common-ui';
 
 @Component({
     selector: 'redaction-upload-status-overlay',
@@ -10,8 +9,6 @@ import { CircleButtonTypes } from '@iqser/common-ui';
     styleUrls: ['./upload-status-overlay.component.scss'],
 })
 export class UploadStatusOverlayComponent implements OnInit {
-    readonly circleButtonTypes = CircleButtonTypes;
-
     collapsed = true;
     uploadStatusInterval: number;
 

libs/common-ui

@@ -1 +1 @@
-Subproject commit 867037cc0a1008ee052ed9ed145d8f5d1bef1bbd
+Subproject commit c9abddb3017082bb169ef6da2c1a63b0b3cdf837

nx.json

@@ -51,6 +51,6 @@
       "{workspaceRoot}/tslint.json",
       "{workspaceRoot}/nx.json"
     ],
-    "production": ["default", "!{projectRoot}/.eslintrc.json"]
+    "production": ["default", "!{projectRoot}/.eslintrc.json", "!{projectRoot}/src/test-setup.[jt]s"]
   }
 }

package.json

@@ -22,96 +22,96 @@
     "*.{ts,js,html}": "eslint --fix"
   },
   "dependencies": {
-    "@angular/animations": "16.1.1",
+    "@angular/animations": "16.2.2",
-    "@angular/cdk": "16.1.1",
+    "@angular/cdk": "16.2.1",
-    "@angular/common": "16.1.1",
+    "@angular/common": "16.2.2",
-    "@angular/compiler": "16.1.1",
+    "@angular/compiler": "16.2.2",
-    "@angular/core": "16.1.1",
+    "@angular/core": "16.2.2",
-    "@angular/forms": "16.1.1",
+    "@angular/forms": "16.2.2",
-    "@angular/material": "16.1.1",
+    "@angular/material": "16.2.1",
-    "@angular/platform-browser": "16.1.1",
+    "@angular/platform-browser": "16.2.2",
-    "@angular/platform-browser-dynamic": "16.1.1",
+    "@angular/platform-browser-dynamic": "16.2.2",
-    "@angular/router": "16.1.1",
+    "@angular/router": "16.2.2",
-    "@angular/service-worker": "16.1.1",
+    "@angular/service-worker": "16.2.2",
     "@materia-ui/ngx-monaco-editor": "^6.0.0",
     "@messageformat/core": "^3.1.0",
     "@ngx-translate/core": "15.0.0",
     "@ngx-translate/http-loader": "8.0.0",
-    "@nx/angular": "16.3.2",
+    "@nx/angular": "16.7.4",
-    "@pdftron/webviewer": "10.1.1",
+    "@pdftron/webviewer": "10.3.0",
-    "chart.js": "^4.3.0",
+    "chart.js": "4.4.0",
-    "dayjs": "^1.11.5",
+    "dayjs": "1.11.9",
     "file-saver": "^2.0.5",
     "jszip": "^3.10.1",
     "jwt-decode": "^3.1.2",
-    "keycloak-angular": "14.0.0",
+    "keycloak-angular": "14.1.0",
-    "keycloak-js": "21.1.1",
+    "keycloak-js": "22.0.1",
     "lodash-es": "^4.17.21",
-    "monaco-editor": "0.39.0",
+    "monaco-editor": "0.41.0",
-    "ng2-charts": "^4.1.1",
+    "ng2-charts": "5.0.3",
     "ngx-color-picker": "^14.0.0",
     "ngx-logger": "^5.0.11",
     "ngx-toastr": "17.0.2",
-    "ngx-translate-messageformat-compiler": "6.4.0",
+    "ngx-translate-messageformat-compiler": "6.5.0",
     "object-hash": "^3.0.0",
     "papaparse": "^5.4.0",
     "rxjs": "7.8.1",
-    "sass": "1.63.4",
+    "sass": "1.66.1",
     "scroll-into-view-if-needed": "^3.0.6",
     "streamsaver": "^2.0.5",
-    "tslib": "2.5.3",
+    "tslib": "2.6.2",
     "zone.js": "0.13.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "16.1.0",
+    "@angular-devkit/build-angular": "16.2.0",
-    "@angular-devkit/core": "16.1.0",
+    "@angular-devkit/core": "16.2.0",
-    "@angular-devkit/schematics": "16.1.0",
+    "@angular-devkit/schematics": "16.2.0",
-    "@angular-eslint/builder": "16.0.3",
+    "@angular-eslint/builder": "16.1.1",
-    "@angular-eslint/eslint-plugin": "16.0.3",
+    "@angular-eslint/eslint-plugin": "16.1.1",
-    "@angular-eslint/eslint-plugin-template": "16.0.3",
+    "@angular-eslint/eslint-plugin-template": "16.1.1",
-    "@angular-eslint/schematics": "16.0.3",
+    "@angular-eslint/schematics": "16.1.1",
-    "@angular-eslint/template-parser": "16.0.3",
+    "@angular-eslint/template-parser": "16.1.1",
-    "@angular/cli": "16.1.0",
+    "@angular/cli": "~16.2.0",
-    "@angular/compiler-cli": "16.1.1",
+    "@angular/compiler-cli": "16.2.2",
-    "@angular/language-service": "16.1.1",
+    "@angular/language-service": "16.2.2",
     "@bartholomej/ngx-translate-extract": "^8.0.2",
-    "@nx/eslint-plugin": "16.3.2",
+    "@nx/eslint-plugin": "16.7.4",
-    "@nx/jest": "16.3.2",
+    "@nx/jest": "16.7.4",
-    "@nx/linter": "16.3.2",
+    "@nx/linter": "16.7.4",
-    "@nx/workspace": "16.3.2",
+    "@nx/workspace": "16.7.4",
-    "@schematics/angular": "16.1.0",
+    "@schematics/angular": "16.2.0",
     "@types/file-saver": "^2.0.5",
-    "@types/jest": "29.5.2",
+    "@types/jest": "29.5.4",
-    "@types/lodash-es": "^4.17.6",
+    "@types/lodash-es": "4.17.8",
-    "@types/node": "20.3.1",
+    "@types/node": "20.5.6",
-    "@typescript-eslint/eslint-plugin": "5.59.11",
+    "@typescript-eslint/eslint-plugin": "6.4.1",
-    "@typescript-eslint/parser": "5.59.11",
+    "@typescript-eslint/parser": "6.4.1",
     "axios": "^1.3.4",
-    "dotenv": "16.1.4",
+    "dotenv": "16.3.1",
-    "eslint": "8.42.0",
+    "eslint": "8.48.0",
-    "eslint-config-prettier": "8.8.0",
+    "eslint-config-prettier": "9.0.0",
-    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-prettier": "5.0.0",
     "eslint-plugin-rxjs": "^5.0.2",
     "google-translate-api-browser": "^4.0.6",
     "husky": "^8.0.3",
-    "jest": "^29.5.0",
+    "jest": "29.6.4",
-    "jest-environment-jsdom": "^29.5.0",
+    "jest-environment-jsdom": "29.6.4",
-    "jest-extended": "4.0.0",
+    "jest-extended": "4.0.1",
     "jest-preset-angular": "13.1.1",
-    "lint-staged": "^13.2.0",
+    "lint-staged": "14.0.1",
-    "nx": "16.3.2",
+    "nx": "16.7.4",
-    "nx-cloud": "16.0.5",
+    "nx-cloud": "16.3.0",
-    "postcss": "8.4.24",
+    "postcss": "8.4.28",
     "postcss-import": "15.1.0",
-    "postcss-preset-env": "8.5.0",
+    "postcss-preset-env": "9.1.1",
     "postcss-url": "10.1.3",
-    "prettier": "2.8.8",
+    "prettier": "3.0.2",
     "sonarqube-scanner": "^3.0.1",
-    "superagent": "^8.0.9",
+    "superagent": "8.1.2",
     "superagent-promise": "^1.1.0",
     "ts-node": "10.9.1",
-    "typescript": "5.1.3",
+    "typescript": "5.1.6",
-    "webpack": "5.87.0",
+    "webpack": "5.88.2",
     "webpack-bundle-analyzer": "^4.8.0",
     "xliff": "^6.1.0"
   }

tsconfig.json

@@ -18,13 +18,13 @@
     "baseUrl": ".",
     "paths": {
       "@biesbjerg/ngx-translate-extract-marker": ["libs/common-ui/src/lib/translations/ngx-translate-extract-marker"],
+      "@common-ui/*": ["libs/common-ui/src/lib/*"],
       "@components/*": ["apps/red-ui/src/app/components/*"],
       "@environments/*": ["apps/red-ui/src/environments/*"],
       "@guards/*": ["apps/red-ui/src/app/guards/*"],
       "@i18n/*": ["apps/red-ui/src/app/i18n/*"],
       "@iqser/common-ui": ["libs/common-ui/src/index.ts"],
       "@iqser/common-ui/*": ["libs/common-ui/src/*"],
-      "@common-ui/*": ["libs/common-ui/src/lib/*"],
       "@models/*": ["apps/red-ui/src/app/models/*"],
       "@red/domain": ["libs/red-domain/src/index.ts"],
       "@services/*": ["apps/red-ui/src/app/services/*"],