Merge branch 'master' into VM/RED-8748

.gitignore

@@ -47,3 +47,4 @@ paligo-styles/style.css*
 
 migrations.json
 *.iml
+/.nx/

angular.json

@@ -36,12 +36,13 @@
       "prefix": "redaction",
       "targets": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular/build:application",
           "options": {
-            "outputPath": "dist/apps/red-ui",
+            "outputPath": {
+              "base": "dist/apps/red-ui"
+            },
             "index": "apps/red-ui/src/index.html",
-            "main": "apps/red-ui/src/main.ts",
+            "polyfills": ["apps/red-ui/src/polyfills.ts"],
-            "polyfills": "apps/red-ui/src/polyfills.ts",
             "tsConfig": "tsconfig.json",
             "baseHref": "/ui/",
             "assets": [
@@ -72,13 +73,12 @@
             "stylePreprocessorOptions": {
               "includePaths": ["./apps/red-ui/src/assets/styles", "./libs/common-ui/src/assets/styles"]
             },
-            "scripts": ["node_modules/@pdftron/webviewer/webviewer.min.js", "node_modules/chart.js/dist/chart.js"],
+            "scripts": ["node_modules/@pdftron/webviewer/webviewer.min.js", "node_modules/chart.js/auto/auto.cjs"],
-            "vendorChunk": true,
             "extractLicenses": false,
-            "buildOptimizer": false,
             "sourceMap": true,
             "optimization": false,
-            "namedChunks": true
+            "namedChunks": true,
+            "browser": "apps/red-ui/src/main.ts"
           },
           "configurations": {
             "production": {
@@ -100,8 +100,6 @@
               "sourceMap": false,
               "namedChunks": false,
               "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
               "budgets": [
                 {
                   "type": "initial",
@@ -114,13 +112,12 @@
                   "maximumError": "20kb"
                 }
               ],
-              "serviceWorker": true,
+              "serviceWorker": "ngsw-config.json"
-              "ngswConfigPath": "ngsw-config.json"
             }
           }
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "options": {
             "buildTarget": "red-ui:build"
           },

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

@@ -20,8 +20,17 @@
         <redaction-admin-side-nav type="dossierTemplates"></redaction-admin-side-nav>
 
         <div class="content-container">
-            <iqser-table [headerTemplate]="headerTemplate" [itemSize]="80" [tableColumnConfigs]="tableColumnConfigs" emptyColumnWidth="2fr">
+            <iqser-table
-            </iqser-table>
+                (noDataAction)="openAddEditComponentMappingDialog()"
+                [headerTemplate]="headerTemplate"
+                [itemSize]="80"
+                [tableColumnConfigs]="tableColumnConfigs"
+                [noDataText]="'component-mappings-screen.no-data.title' | translate"
+                [showNoDataButton]="roles.componentMappings.write && currentUser.isAdmin"
+                [noDataButtonLabel]="'component-mappings-screen.no-data.action' | translate"
+                emptyColumnWidth="2fr"
+                noDataIcon="iqser:csv"
+            ></iqser-table>
         </div>
     </div>
 </section>
@@ -54,6 +63,10 @@
             <span>{{ entity.version }}</span>
         </div>
 
+        <div class="cell">
+            <span>{{ entity.numberOfLines }}</span>
+        </div>
+
         <div class="cell">
             <div *allow="roles.componentMappings.write; if: currentUser.isAdmin" class="action-buttons">
                 <iqser-circle-button

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

@@ -29,6 +29,7 @@ export class ComponentMappingsScreenComponent extends ListingComponent<Component
     tableColumnConfigs: readonly TableColumnConfig<ComponentMapping>[] = [
         { label: _('component-mappings-screen.table-col-names.name'), sortByKey: 'searchKey' },
         { label: _('component-mappings-screen.table-col-names.version') },
+        { label: _('component-mappings-screen.table-col-names.number-of-lines') },
     ];
     readonly tableHeaderLabel = _('component-mappings-screen.table-header.title');
     protected readonly context$;

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

@@ -89,9 +89,9 @@
             <div class="action-buttons">
                 <iqser-circle-button
                     (action)="field.primaryAttribute = false; toggleFieldActive.emit(field)"
-                    [removeTooltip]="true"
                     [tooltip]="'file-attributes-csv-import.action.remove' | translate"
                     icon="iqser:trash"
+                    removeTooltip
                 ></iqser-circle-button>
             </div>
         </div>

apps/red-ui/src/app/modules/dossier-overview/components/screen-header/dossier-overview-screen-header.component.html

@@ -10,13 +10,13 @@
             *allow="roles.getRss"
             [attr.help-mode-key]="'component_download'"
             [disabled]="downloadComponentLogsDisabled$ | async"
-            [dropdownButton]="true"
             [icon]="'red:extract'"
             [matMenuTriggerFor]="(downloadComponentLogsDisabled$ | async) ? null : bulkComponentDownloadMenu"
             [tooltip]="
                 ((downloadComponentLogsDisabled$ | async) ? 'component-download.disabled-tooltip' : 'component-download.tooltip')
                     | translate
             "
+            dropdownButton
         ></iqser-circle-button>
 
         <redaction-file-download-btn

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

@@ -4,18 +4,18 @@
     <iqser-circle-button
         (action)="setListingMode(listingModes.table)"
         [attr.aria-expanded]="mode === listingModes.table"
-        [tooltip]="'view-mode.list' | translate"
-        [greySelected]="true"
         [attr.help-mode-key]="'document_list_view'"
+        [tooltip]="'view-mode.list' | translate"
+        greySelected
         icon="iqser:list"
     ></iqser-circle-button>
 
     <iqser-circle-button
         (action)="setListingMode(listingModes.workflow)"
         [attr.aria-expanded]="mode === listingModes.workflow"
-        [tooltip]="'view-mode.workflow' | translate"
-        [greySelected]="true"
         [attr.help-mode-key]="'workflow_view'"
+        [tooltip]="'view-mode.workflow' | translate"
+        greySelected
         icon="iqser:lanes"
     ></iqser-circle-button>
 </div>

apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.html

@@ -1,6 +1,6 @@
-<div class="component-value" [ngClass]="{ selected: selected, editing: editing }" (click)="select()">
+<div (click)="select()" [ngClass]="{ selected: selected, editing: editing }" class="component-value">
     <div class="component">{{ entryLabel }}</div>
-    <div class="value" *ngIf="!editing; else editValue">
+    <div *ngIf="!editing; else editValue" class="value">
         <div class="text">
             <span
                 *ngFor="let componentValue of entry.componentValues"
@@ -15,16 +15,16 @@
                 [tooltip]="'component-management.actions.edit' | translate"
                 icon="iqser:edit"
             ></iqser-circle-button>
-            <div class="changes-dot" *ngIf="hasUpdatedValues && canEdit"></div>
+            <div *ngIf="hasUpdatedValues && canEdit" class="changes-dot"></div>
         </div>
     </div>
     <mat-icon *ngIf="!editing" class="arrow-right" svgIcon="red:arrow-right"></mat-icon>
 </div>
 
 <ng-template #editValue>
-    <div cdkDropList (cdkDropListDropped)="drop($event)">
+    <div (cdkDropListDropped)="drop($event)" cdkDropList>
-        <div *ngFor="let value of entry.componentValues; let index = index" class="editing-value" cdkDrag>
+        <div *ngFor="let value of entry.componentValues; let index = index" cdkDrag class="editing-value">
-            <mat-icon class="draggable" svgIcon="red:draggable-dots" cdkDragHandle></mat-icon>
+            <mat-icon cdkDragHandle class="draggable" svgIcon="red:draggable-dots"></mat-icon>
             <div class="iqser-input-group w-full">
                 <textarea [(ngModel)]="value.value" rows="1" type="text"></textarea>
             </div>
@@ -46,12 +46,12 @@
         <div (click)="deselect($event)" class="all-caps-label cancel" translate="component-management.actions.cancel"></div>
         <div class="flex right">
             <iqser-circle-button
-                *ngIf="hasUpdatedValues && canEdit"
                 (action)="undo()"
-                [showDot]="true"
+                *ngIf="hasUpdatedValues && canEdit"
                 [tooltip]="'component-management.actions.undo' | translate"
                 class="undo-value"
                 icon="red:undo"
+                showDot
             ></iqser-circle-button>
             <iqser-circle-button
                 (action)="add()"

apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.ts

@@ -1,19 +1,19 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { IComponentLogEntry } from '@red/domain';
-import { FormsModule } from '@angular/forms';
-import { CircleButtonComponent, IconButtonComponent, IconButtonTypes, IqserDialog } from '@iqser/common-ui';
-import { FilterService } from '@common-ui/filtering';
-import { RevertValueDialogComponent } from '../../dialogs/docu-mine/revert-value-dialog/revert-value-dialog.component';
 import { CdkDrag, CdkDragDrop, CdkDragHandle, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';
 import { KeyValuePipe, NgClass, NgForOf, NgIf } from '@angular/common';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { MatIcon } from '@angular/material/icon';
+import { FilterService } from '@common-ui/filtering';
+import { CircleButtonComponent, IconButtonComponent, IconButtonTypes, IqserDialog } from '@iqser/common-ui';
 import { TranslateModule } from '@ngx-translate/core';
+import { IComponentLogEntry } from '@red/domain';
+import { RevertValueDialogComponent } from '../../dialogs/docu-mine/revert-value-dialog/revert-value-dialog.component';
 import { FileDataService } from '../../services/file-data.service';
 
 @Component({
     selector: 'redaction-editable-structured-component-value [entry] [canEdit]',
     templateUrl: './editable-structured-component-value.component.html',
-    styleUrls: ['/editable-structured-component-value.component.scss'],
+    styleUrls: ['./editable-structured-component-value.component.scss'],
     standalone: true,
     imports: [
         CircleButtonComponent,
@@ -31,26 +31,48 @@ import { FileDataService } from '../../services/file-data.service';
     ],
 })
 export class EditableStructuredComponentValueComponent implements OnInit {
+    protected entryLabel: string;
+    protected editing = false;
+    protected hasUpdatedValues = false;
+    protected initialEntry: IComponentLogEntry;
+    protected readonly iconButtonTypes = IconButtonTypes;
     @Input() entry: IComponentLogEntry;
     @Input() canEdit: boolean;
     @Output() readonly deselectLast = new EventEmitter();
     @Output() readonly overrideValue = new EventEmitter<IComponentLogEntry>();
     @Output() readonly revertOverride = new EventEmitter<string>();
-
     selected = false;
 
-    protected entryLabel: string;
-    protected editing = false;
-    protected hasUpdatedValues = false;
-    protected initialEntry: IComponentLogEntry;
-
-    protected readonly iconButtonTypes = IconButtonTypes;
-
     constructor(
         private readonly _filtersService: FilterService,
         private readonly _iqserDialog: IqserDialog,
     ) {}
 
+    get disabled() {
+        for (let i = 0; i < this.entry.componentValues.length; i++) {
+            if (this.entry.componentValues[i].value !== this.initialEntry.componentValues[i]?.value) {
+                return false;
+            }
+        }
+        return this.entry.componentValues.length === this.initialEntry.componentValues.length;
+    }
+
+    get #hasUpdatedValues() {
+        for (const value of this.entry.componentValues) {
+            if (value.originalValue === null && value.value === '') {
+                continue;
+            }
+            if (value.originalValue !== value.value) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    get #initialEntry() {
+        return JSON.parse(JSON.stringify(this.entry));
+    }
+
     ngOnInit() {
         this.reset();
     }
@@ -91,15 +113,6 @@ export class EditableStructuredComponentValueComponent implements OnInit {
         this.entry.componentValues.splice(index, 1);
     }
 
-    get disabled() {
-        for (let i = 0; i < this.entry.componentValues.length; i++) {
-            if (this.entry.componentValues[i].value !== this.initialEntry.componentValues[i]?.value) {
-                return false;
-            }
-        }
-        return this.entry.componentValues.length === this.initialEntry.componentValues.length;
-    }
-
     save() {
         this.entry.overridden = true;
         this.overrideValue.emit(this.entry);
@@ -137,22 +150,6 @@ export class EditableStructuredComponentValueComponent implements OnInit {
         return value.replace(/\n/g, '<br>');
     }
 
-    get #hasUpdatedValues() {
-        for (const value of this.entry.componentValues) {
-            if (value.originalValue === null && value.value === '') {
-                continue;
-            }
-            if (value.originalValue !== value.value) {
-                return true;
-            }
-        }
-        return false;
-    }
-
-    get #initialEntry() {
-        return JSON.parse(JSON.stringify(this.entry));
-    }
-
     #setWorkloadFilters() {
         this._filtersService.deactivateFilters({ primaryFiltersSlug: 'primaryFilters' });
 

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

@@ -11,49 +11,38 @@ import {
     OnInit,
     ViewChild,
 } from '@angular/core';
-import { Roles } from '@users/roles';
+import { MatDialog } from '@angular/material/dialog';
-import {
+import { Router } from '@angular/router';
-    CircleButtonTypes,
+import { CircleButtonTypes, getConfig, HelpModeService, IqserPermissionsService, isIqserDevMode, LoadingService } from '@iqser/common-ui';
-    getConfig,
-    HelpModeService,
-    IqserDialog,
-    IqserPermissionsService,
-    isIqserDevMode,
-    LoadingService,
-} from '@iqser/common-ui';
 import { Bind, Debounce, OnDetach } from '@iqser/common-ui/lib/utils';
 import { File } from '@red/domain';
+import { FileManagementService } from '@services/files/file-management.service';
 import { PermissionsService } from '@services/permissions.service';
-import { FilePreviewStateService } from '../../services/file-preview-state.service';
+import { Roles } from '@users/roles';
-import { UserPreferenceService } from '@users/user-preference.service';
+import { download } from '@utils/file-download-utils';
-import JSZip from 'jszip';
 import { saveAs } from 'file-saver';
-import { PdfViewer } from '../../../pdf-viewer/services/pdf-viewer.service';
+import JSZip from 'jszip';
+import { firstValueFrom } from 'rxjs';
 import { AnnotationDrawService } from '../../../pdf-viewer/services/annotation-draw.service';
-import { TablesService } from '../../services/tables.service';
+import { REDAnnotationManager } from '../../../pdf-viewer/services/annotation-manager.service';
-import { ALL_HOTKEYS } from '../../utils/constants';
+import { PdfViewer } from '../../../pdf-viewer/services/pdf-viewer.service';
-import { Router } from '@angular/router';
 import { AnnotationActionsService } from '../../services/annotation-actions.service';
 import { FileDataService } from '../../services/file-data.service';
-import { REDAnnotationManager } from '../../../pdf-viewer/services/annotation-manager.service';
+import { FilePreviewStateService } from '../../services/file-preview-state.service';
-import { MatDialog } from '@angular/material/dialog';
-import { download } from '@utils/file-download-utils';
-import { firstValueFrom } from 'rxjs';
-import { FileManagementService } from '@services/files/file-management.service';
 import { MultiSelectService } from '../../services/multi-select.service';
+import { TablesService } from '../../services/tables.service';
+import { ALL_HOTKEYS } from '../../utils/constants';
 
 @Component({
     selector: 'redaction-file-header',
     templateUrl: './file-header.component.html',
-    styleUrls: ['/file-header.component.scss'],
+    styleUrls: ['./file-header.component.scss'],
 })
 export class FileHeaderComponent implements OnInit, AfterViewInit, OnDetach, OnDestroy {
     @ViewChild('actionsWrapper', { static: false }) private readonly _actionsWrapper: ElementRef;
-    @Input() file: File;
-
     protected readonly roles = Roles;
     protected readonly circleButtonTypes = CircleButtonTypes;
-
+    @Input() file: File;
     readonly lastAssignee = computed(() => this.getLastAssignee());
     readonly isIqserDevMode = isIqserDevMode();
     readonly isDocumine = getConfig().IS_DOCUMINE;

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

@@ -72,12 +72,13 @@
         ></iqser-circle-button>
     </div>
 
-    <div class="annotations-wrapper">
+    <div class="annotations-wrapper" [class.documine-direction]="isDocumine">
         <div
             #quickNavigation
             (keydown)="preventKeyDefault($event)"
             (keyup)="preventKeyDefault($event)"
             [class.active-panel]="pagesPanelActive"
+            [class.border-left]="isDocumine"
             class="quick-navigation"
             tabindex="0"
         >

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

@@ -27,6 +27,11 @@
         flex: 1;
         overflow: hidden;
 
+        &.documine-direction {
+            flex-direction: row-reverse;
+            justify-content: space-between;
+        }
+
         .content {
             overflow: hidden;
             width: 100%;
@@ -56,9 +61,6 @@
                 }
             }
         }
-
-        flex-direction: row-reverse;
-        justify-content: space-between;
     }
 
     .quick-navigation,
@@ -72,12 +74,15 @@
 
     .quick-navigation {
         border-right: 1px solid var(--iqser-separator);
-        border-left: 1px solid var(--iqser-separator);
         min-width: var(--qiuck-navigation-width);
         overflow: hidden;
         display: flex;
         flex-direction: column;
 
+        &.border-left {
+            border-left: 1px solid var(--iqser-separator);
+        }
+
         .jump {
             min-height: 32px;
             display: flex;

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

@@ -1,55 +1,48 @@
 import { Component, Input, OnInit, signal, ViewChildren } from '@angular/core';
-import { ComponentLogEntry, Dictionary, File, IComponentLogEntry, WorkflowFileStatuses } from '@red/domain';
+import { toObservable } from '@angular/core/rxjs-interop';
+import { FilterService } from '@common-ui/filtering';
+import { List } from '@common-ui/utils';
 import { IconButtonTypes, LoadingService } from '@iqser/common-ui';
+import { ComponentLogEntry, Dictionary, File, IComponentLogEntry, WorkflowFileStatuses } from '@red/domain';
 import { ComponentLogService } from '@services/files/component-log.service';
-import { FilesMapService } from '@services/files/files-map.service';
 import { UserPreferenceService } from '@users/user-preference.service';
 import { combineLatest, firstValueFrom, Observable } from 'rxjs';
-import { List } from '@common-ui/utils';
-import { EditableStructuredComponentValueComponent } from '../editable-structured-component-value/editable-structured-component-value.component';
-import { FilterService } from '@common-ui/filtering';
-import { ComponentLogFilterService } from '../../services/component-log-filter.service';
 import { map } from 'rxjs/operators';
-import { toObservable } from '@angular/core/rxjs-interop';
+import { ComponentLogFilterService } from '../../services/component-log-filter.service';
+import { EditableStructuredComponentValueComponent } from '../editable-structured-component-value/editable-structured-component-value.component';
 
 @Component({
     selector: 'redaction-structured-component-management',
     templateUrl: './structured-component-management.component.html',
-    styleUrls: ['/structured-component-management.component.scss'],
+    styleUrls: ['./structured-component-management.component.scss'],
 })
 export class StructuredComponentManagementComponent implements OnInit {
-    @Input() file: File;
-    @Input() dictionaries: Dictionary[];
-
-    @ViewChildren('editableComponent') editableComponents: List<EditableStructuredComponentValueComponent>;
-
     protected readonly componentLogData = signal<ComponentLogEntry[] | undefined>(undefined);
     protected readonly componentLogData$ = toObservable(this.componentLogData);
     protected readonly openScmDialogByDefault = signal(this.userPreferences.getOpenScmDialogByDefault());
     protected readonly iconButtonTypes = IconButtonTypes;
     protected displayedComponents$: Observable<ComponentLogEntry[]>;
+    @Input() file: File;
+    @Input() dictionaries: Dictionary[];
+    @ViewChildren('editableComponent') editableComponents: List<EditableStructuredComponentValueComponent>;
 
     constructor(
         private readonly _componentLogService: ComponentLogService,
-        private readonly _filesMapService: FilesMapService,
         private readonly _loadingService: LoadingService,
         private readonly _componentLogFilterService: ComponentLogFilterService,
         private readonly _filterService: FilterService,
         readonly userPreferences: UserPreferenceService,
     ) {}
 
+    get canEdit() {
+        return this.file.workflowStatus !== WorkflowFileStatuses.APPROVED;
+    }
+
     async ngOnInit(): Promise<void> {
         await this.#loadData();
         this.displayedComponents$ = this.#displayedComponents$();
     }
 
-    #displayedComponents$() {
-        const componentLogFilters$ = this._filterService.getFilterModels$('componentLogFilters');
-        return combineLatest([this.componentLogData$, componentLogFilters$]).pipe(
-            map(([components, filters]) => this._componentLogFilterService.filterComponents(components, filters)),
-        );
-    }
-
     deselectLast() {
         const lastSelected = this.editableComponents.find(c => c.selected);
         if (lastSelected) {
@@ -57,10 +50,6 @@ export class StructuredComponentManagementComponent implements OnInit {
         }
     }
 
-    get canEdit() {
-        return this.file.workflowStatus !== WorkflowFileStatuses.APPROVED;
-    }
-
     async toggleOpenScmDialogByDefault() {
         await this.userPreferences.toggleOpenScmDialogByDefault();
         await this.userPreferences.reload();
@@ -83,6 +72,13 @@ export class StructuredComponentManagementComponent implements OnInit {
         await this.#loadData();
     }
 
+    #displayedComponents$() {
+        const componentLogFilters$ = this._filterService.getFilterModels$('componentLogFilters');
+        return combineLatest([this.componentLogData$, componentLogFilters$]).pipe(
+            map(([components, filters]) => this._componentLogFilterService.filterComponents(components, filters)),
+        );
+    }
+
     async #loadData(): Promise<void> {
         this._loadingService.start();
         const componentLogData = await firstValueFrom(

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

@@ -377,7 +377,7 @@ export class PdfProxyService {
         const allAreImage = annotationWrappers.reduce((acc, next) => acc && next.isImage, true);
         const hideSkipped = this._skippedService.hideSkipped() && annotationWrappers.some(a => a.isSkipped);
         if (allAreImage && !this._annotationManager.resizingAnnotationId && !hideSkipped) {
-            const allAreVisible = viewerAnnotations.reduce((acc, next) => next.isVisible() && acc, true);
+            const allAreVisible = viewerAnnotations.reduce((acc, next) => next.isVisible() && !!next['Opacity'] && acc, true);
 
             const visibilityButton = {
                 type: 'actionButton',

apps/red-ui/src/app/modules/pdf-viewer/services/viewer-header.service.ts

@@ -302,15 +302,15 @@ export class ViewerHeaderService {
             groups.forEach(group => this.#pushGroup(enabledItems, group));
 
             const loadAllAnnotationsButton = this.#buttons.get(HeaderElements.LOAD_ALL_ANNOTATIONS);
-            let startButtons = 10 - deletedDividers;
+            let startButtons = 11 - deletedDividers;
-            let deleteCount = 14 - deletedDividers;
+            let deleteCount = 15 - deletedDividers;
 
             if (this.#isEnabled(HeaderElements.LOAD_ALL_ANNOTATIONS)) {
                 if (!header.getItems().includes(loadAllAnnotationsButton)) {
                     header.get('leftPanelButton').insertAfter(loadAllAnnotationsButton);
                 }
-                startButtons = 11 - deletedDividers;
+                startButtons = 12 - deletedDividers;
-                deleteCount = 15 - deletedDividers;
+                deleteCount = 16 - deletedDividers;
             } else {
                 header.delete(HeaderElements.LOAD_ALL_ANNOTATIONS);
             }

apps/red-ui/src/assets/i18n/redact/en.json

@@ -538,9 +538,14 @@
       "edit": "Edit mapping"
     },
     "add-new": "New Mapping",
+    "no-data": {
+      "action": "New Mapping",
+      "title": "There are no component mappings."
+    },
     "search": "Search by name...",
     "table-col-names": {
       "name": "name",
+      "number-of-lines": "Number of lines",
       "version": "version"
     },
     "table-header": {
@@ -745,7 +750,7 @@
     },
     "download": "Download current entries",
     "error": {
-      "400": "<strong>Dictionary update failed.</strong><br><br>One or more of the newly added terms have been identified as frequently used general term. Please remove these terms to proceed with the upate. ",
+      "400": "<strong>Dictionary update failed.</strong><br><br>One or more of the newly added terms have been identified as frequently used general term. Please remove these terms to proceed with the update. ",
       "generic": "Error: Dictionary update failed."
     },
     "revert-changes": "Revert",
@@ -859,7 +864,7 @@
     }
   },
   "dossier-details": {
-    "assign-members": "Assign members",
+    "assign-members": "Add members",
     "collapse": "Hide details",
     "document-status": "Document processing states",
     "edit-owner": "Edit owner",
@@ -1376,7 +1381,7 @@
   "file-attribute": {
     "update": {
       "error": "Update of file attribute value failed. Please try again.",
-      "success": "File attribute value has been updated successfully!"
+      "success": "File attribute value has been updated successfully."
     }
   },
   "file-attributes-configurations": {
@@ -1390,8 +1395,8 @@
     "save": "Save configurations",
     "title": "Configurations",
     "update": {
-      "error": "Failed to update the configuration!",
+      "error": "Failed to update the configuration.",
-      "success": "Configuration has been updated successfully!"
+      "success": "Configuration has been updated successfully."
     }
   },
   "file-attributes-csv-import": {
@@ -1421,7 +1426,7 @@
       "none": "None"
     },
     "save": {
-      "error": "Failed to create file attributes!",
+      "error": "Failed to create file attributes.",
       "label": "Save attributes",
       "success": "{count} file {count, plural, one{attribute} other{attributes}} created successfully!"
     },
@@ -1677,7 +1682,7 @@
     },
     "test": {
       "error": "Test e-mail could not be sent. Please double-check the email address.",
-      "success": "Test e-mail was sent successfully!",
+      "success": "Test e-mail was sent successfully.",
       "warning": "Admin mail address not set. Test email sent to {recipientEmail} instead."
     },
     "title": "Configure SMTP account"

apps/red-ui/src/assets/i18n/scm/de.json

@@ -287,7 +287,7 @@
     },
     "force-redaction": {
       "label": "Schwärzung erzwingen",
-      "label-image-hint": ""
+      "label-image-hint": "Redact"
     },
     "hide": "Ausblenden",
     "message": {
@@ -538,9 +538,14 @@
       "edit": "Edit mapping"
     },
     "add-new": "New Mapping",
+    "no-data": {
+      "action": "",
+      "title": ""
+    },
     "search": "Search by name...",
     "table-col-names": {
       "name": "name",
+      "number-of-lines": "",
       "version": "version"
     },
     "table-header": {
@@ -1863,7 +1868,7 @@
         "false-positive": "Set false positive",
         "force-hint": "Hinweis erzwingen",
         "force-redaction": "Schwärzung erzwingen",
-        "force-redaction-image-hint": "",
+        "force-redaction-image-hint": "Redact image",
         "hint": "Add hint",
         "redact": "Annotation",
         "redaction": "Redaction"
@@ -2489,7 +2494,7 @@
     "workflow": "Arbeitsablauf"
   },
   "viewer-header": {
-    "all-annotations-loaded": "",
+    "all-annotations-loaded": "All annotations loaded",
     "load-all-annotations": "Load all annotations"
   },
   "watermark-screen": {

apps/red-ui/src/assets/i18n/scm/en.json

@@ -538,9 +538,14 @@
       "edit": "Edit mapping"
     },
     "add-new": "New Mapping",
+    "no-data": {
+      "action": "New Mapping",
+      "title": "There are no component mappings."
+    },
     "search": "Search by name...",
     "table-col-names": {
       "name": "name",
+      "number-of-lines": "Number of lines",
       "version": "version"
     },
     "table-header": {

apps/red-ui/src/assets/styles/red-material-theme.scss

@@ -39,11 +39,11 @@ $red-palette: (
     ),
 );
 
-$gn-next-primary: mat.define-palette($primary-palette, default, lighter, darker, text);
+$gn-next-primary: mat.m2-define-palette($primary-palette, default, lighter, darker, text);
-$gn-next-secondary: mat.define-palette($secondary-palette, default, lighter, darker, text);
+$gn-next-secondary: mat.m2-define-palette($secondary-palette, default, lighter, darker, text);
-$gn-next-warning: mat.define-palette($red-palette, default, lighter, darker, text);
+$gn-next-warning: mat.m2-define-palette($red-palette, default, lighter, darker, text);
 
-$light-theme: mat.define-light-theme(
+$light-theme: mat.m2-define-light-theme(
     (
         color: (
             primary: $gn-next-primary,
@@ -53,7 +53,7 @@ $light-theme: mat.define-light-theme(
     )
 );
 
-$dark-theme: mat.define-dark-theme(
+$dark-theme: mat.m2-define-dark-theme(
     (
         color: (
             primary: $gn-next-primary,
@@ -66,11 +66,11 @@ $dark-theme: mat.define-dark-theme(
 @include mat.core-theme($light-theme);
 @include mat.all-component-themes($light-theme);
 
-$custom-typography: mat.define-typography-config(
+$custom-typography: mat.m2-define-typography-config(
     $font-family: 'Inter, sans-serif',
-    $body-1: mat.define-typography-level(13px, 18px, 400),
+    $body-1: mat.m2-define-typography-level(13px, 18px, 400),
-    $body-2: mat.define-typography-level(13px, 18px, 400),
+    $body-2: mat.m2-define-typography-level(13px, 18px, 400),
-    $button: mat.define-typography-level(13px, 13px, 400),
+    $button: mat.m2-define-typography-level(13px, 13px, 400),
 );
 
 @include mat.all-component-typographies($custom-typography);

libs/common-ui

@@ -1 +1 @@
-Subproject commit 748cce403285c97e14cd3115a828c94c9d5d4520
+Subproject commit f60ea513ac88456f5003ea85c1158ff73fdd3d06

libs/red-domain/src/lib/trash/trash.item.ts

@@ -1,5 +1,5 @@
-import * as dayjs from 'dayjs';
 import { getLeftDateTime } from '@iqser/common-ui/lib/utils';
+import dayjs from 'dayjs';
 
 export abstract class TrashItem {
     abstract readonly type: 'dossier' | 'file';

package.json

@@ -19,67 +19,67 @@
     "*.{ts,js,html}": "eslint --fix"
   },
   "dependencies": {
-    "@angular/animations": "17.3.4",
+    "@angular/animations": "18.0.3",
-    "@angular/cdk": "17.3.4",
+    "@angular/cdk": "18.0.3",
-    "@angular/common": "17.3.4",
+    "@angular/common": "18.0.3",
-    "@angular/compiler": "17.3.4",
+    "@angular/compiler": "18.0.3",
-    "@angular/core": "17.3.4",
+    "@angular/core": "18.0.3",
-    "@angular/forms": "17.3.4",
+    "@angular/forms": "18.0.3",
-    "@angular/material": "17.3.4",
+    "@angular/material": "18.0.3",
-    "@angular/platform-browser": "17.3.4",
+    "@angular/platform-browser": "18.0.3",
-    "@angular/platform-browser-dynamic": "17.3.4",
+    "@angular/platform-browser-dynamic": "18.0.3",
-    "@angular/router": "17.3.4",
+    "@angular/router": "18.0.3",
-    "@angular/service-worker": "17.3.4",
+    "@angular/service-worker": "18.0.3",
     "@materia-ui/ngx-monaco-editor": "^6.0.0",
     "@messageformat/core": "^3.3.0",
     "@ngx-translate/core": "15.0.0",
     "@ngx-translate/http-loader": "8.0.0",
-    "@pdftron/webviewer": "10.9.0",
+    "@pdftron/webviewer": "10.10.1",
-    "chart.js": "4.4.2",
+    "chart.js": "4.4.3",
-    "dayjs": "1.11.10",
+    "dayjs": "1.11.11",
     "file-saver": "^2.0.5",
     "jszip": "^3.10.1",
     "jwt-decode": "^4.0.0",
     "keycloak-angular": "15.1.0",
     "keycloak-js": "23.0.1",
     "lodash-es": "^4.17.21",
-    "monaco-editor": "0.47.0",
+    "monaco-editor": "0.49.0",
-    "ng2-charts": "6.0.0",
+    "ng2-charts": "6.0.1",
     "ngx-color-picker": "16.0.0",
     "ngx-logger": "^5.0.11",
-    "ngx-toastr": "18.0.0",
+    "ngx-toastr": "19.0.0",
     "ngx-translate-messageformat-compiler": "7.0.0",
     "object-hash": "^3.0.0",
     "papaparse": "^5.4.0",
     "rxjs": "7.8.1",
-    "sass": "1.75.0",
+    "sass": "1.77.5",
     "scroll-into-view-if-needed": "3.1.0",
     "streamsaver": "^2.0.5",
-    "tslib": "2.6.2",
+    "tslib": "2.6.3",
-    "zone.js": "0.14.4"
+    "zone.js": "0.14.7"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "17.3.4",
+    "@angular-devkit/core": "18.0.4",
-    "@angular-devkit/core": "17.3.4",
+    "@angular-devkit/schematics": "18.0.4",
-    "@angular-devkit/schematics": "17.3.4",
+    "@angular-eslint/builder": "18.0.1",
-    "@angular-eslint/builder": "17.3.0",
+    "@angular-eslint/eslint-plugin": "18.0.1",
-    "@angular-eslint/eslint-plugin": "17.3.0",
+    "@angular-eslint/eslint-plugin-template": "18.0.1",
-    "@angular-eslint/eslint-plugin-template": "17.3.0",
+    "@angular-eslint/schematics": "18.0.1",
-    "@angular-eslint/schematics": "17.3.0",
+    "@angular-eslint/template-parser": "18.0.1",
-    "@angular-eslint/template-parser": "17.3.0",
+    "@angular/build": "^18.0.4",
-    "@angular/cli": "17.3.4",
+    "@angular/cli": "18.0.4",
-    "@angular/compiler-cli": "17.3.4",
+    "@angular/compiler-cli": "18.0.3",
-    "@angular/language-service": "17.3.4",
+    "@angular/language-service": "18.0.3",
     "@bartholomej/ngx-translate-extract": "^8.0.2",
     "@localazy/ts-api": "^1.0.0",
-    "@schematics/angular": "17.3.4",
+    "@schematics/angular": "18.0.4",
     "@types/file-saver": "^2.0.7",
     "@types/jest": "29.5.12",
     "@types/lodash-es": "4.17.12",
-    "@types/node": "20.12.7",
+    "@types/node": "20.14.2",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
-    "axios": "1.6.8",
+    "axios": "1.7.2",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-prettier": "5.1.3",
@@ -89,13 +89,13 @@
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "jest-extended": "4.0.2",
-    "jest-preset-angular": "14.0.3",
+    "jest-preset-angular": "14.1.0",
-    "lint-staged": "15.2.2",
+    "lint-staged": "15.2.7",
-    "prettier": "3.2.5",
+    "prettier": "3.3.2",
-    "sonarqube-scanner": "3.4.0",
+    "sonarqube-scanner": "4.0.1",
     "ts-node": "10.9.2",
     "typescript": "5.4.5",
-    "webpack": "5.91.0",
+    "webpack": "5.92.0",
     "webpack-bundle-analyzer": "4.10.2",
     "xliff": "^6.2.1"
   }

tsconfig.json

@@ -5,17 +5,17 @@
     "resolveJsonModule": true,
     "sourceMap": true,
     "declaration": false,
+    "esModuleInterop": true,
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "allowSyntheticDefaultImports": true,
     "useDefineForClassFields": false,
     "strictPropertyInitialization": false,
     "importHelpers": true,
     "target": "ES2022",
-    "module": "es2020",
+    "module": "ES2022",
     "typeRoots": ["node_modules/@types"],
-    "lib": ["es2021", "dom"],
+    "lib": ["ES2022", "dom"],
     "skipLibCheck": true,
     "skipDefaultLibCheck": true,
     "baseUrl": ".",