RED-8904: factored out the scrollable bullet list in another component.

apps/red-ui/src/app/modules/file-preview/components/selected-annotations-list/selected-annotations-list.component.html

@@ -0,0 +1,5 @@
+<cdk-virtual-scroll-viewport [itemSize]="LIST_ITEM_SIZE" [ngStyle]="{ height: redactedTextsAreaHeight + 'px' }">
+    <ul *cdkVirtualFor="let value of values">
+        <li>{{ value }}</li>
+    </ul>
+</cdk-virtual-scroll-viewport>

apps/red-ui/src/app/modules/file-preview/components/selected-annotations-list/selected-annotations-list.component.scss

@@ -0,0 +1,21 @@
+@use 'common-mixins';
+
+cdk-virtual-scroll-viewport {
+    @include common-mixins.scroll-bar;
+}
+
+:host ::ng-deep .cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper {
+    max-width: 100% !important;
+}
+
+ul {
+    padding-left: 16px;
+}
+
+li {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    list-style-position: inside;
+    overflow: hidden;
+    padding-right: 10px;
+}

apps/red-ui/src/app/modules/file-preview/components/selected-annotations-list/selected-annotations-list.component.ts

@@ -0,0 +1,22 @@
+import { Component, Input } from '@angular/core';
+import { CdkFixedSizeVirtualScroll, CdkVirtualForOf, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
+import { NgStyle } from '@angular/common';
+
+const LIST_ITEM_SIZE = 16;
+const MAX_ITEMS_DISPLAY = 5;
+
+@Component({
+    selector: 'redaction-selected-annotations-list',
+    standalone: true,
+    imports: [CdkFixedSizeVirtualScroll, CdkVirtualForOf, CdkVirtualScrollViewport, NgStyle],
+    templateUrl: './selected-annotations-list.component.html',
+    styleUrl: './selected-annotations-list.component.scss',
+})
+export class SelectedAnnotationsListComponent {
+    @Input({ required: true }) values: string[];
+    protected readonly LIST_ITEM_SIZE = LIST_ITEM_SIZE;
+
+    get redactedTextsAreaHeight() {
+        return this.values.length <= MAX_ITEMS_DISPLAY ? LIST_ITEM_SIZE * this.values.length : LIST_ITEM_SIZE * MAX_ITEMS_DISPLAY;
+    }
+}

apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/edit-annotation-dialog/edit-annotation-dialog.component.html

@@ -5,14 +5,7 @@
         <div class="dialog-content redaction">
             <div class="iqser-input-group" *ngIf="showList">
                 <label [translate]="'edit-redaction.dialog.content.redacted-text'" class="selected-text"></label>
-                <cdk-virtual-scroll-viewport
+                <redaction-selected-annotations-list [values]="redactedTexts"></redaction-selected-annotations-list>
-                    [itemSize]="16"
-                    [ngStyle]="{ height: redactedTexts.length <= 5 ? 16 * redactedTexts.length + 'px' : 80 + 'px' }"
-                >
-                    <ul *cdkVirtualFor="let text of redactedTexts">
-                        <li>{{ text }}</li>
-                    </ul>
-                </cdk-virtual-scroll-viewport>
             </div>
 
             <div class="iqser-input-group required w-450">

apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/edit-annotation-dialog/edit-annotation-dialog.component.scss

@@ -1,21 +0,0 @@
-@use 'common-mixins';
-
-cdk-virtual-scroll-viewport {
-    @include common-mixins.scroll-bar;
-}
-
-:host ::ng-deep .cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper {
-    max-width: 100% !important;
-}
-
-ul {
-    padding-left: 16px;
-}
-
-li {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    list-style-position: inside;
-    overflow: hidden;
-    padding-right: 10px;
-}

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

@@ -7,16 +7,8 @@
         ></div>
 
         <div class="dialog-content redaction" [class.fixed-height]="isRedacted && isImage">
-            <div class="iqser-input-group" *ngIf="!isImage">
+            <div class="iqser-input-group" *ngIf="!isImage && redactedTexts.length && !allRectangles">
-                <cdk-virtual-scroll-viewport
+                <redaction-selected-annotations-list [values]="redactedTexts"></redaction-selected-annotations-list>
-                    *ngIf="!!redactedTexts.length && !allRectangles"
-                    [itemSize]="16"
-                    [ngStyle]="{ height: redactedTexts.length <= 5 ? 16 * redactedTexts.length + 'px' : 80 + 'px' }"
-                >
-                    <ul *cdkVirtualFor="let text of redactedTexts">
-                        <li>{{ text }}</li>
-                    </ul>
-                </cdk-virtual-scroll-viewport>
             </div>
 
             <div *ngIf="!isManualRedaction" class="iqser-input-group w-450" [class.required]="!form.controls.type.disabled">

apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.scss

@@ -6,23 +6,3 @@
         overflow-y: auto;
     }
 }
-
-cdk-virtual-scroll-viewport {
-    @include common-mixins.scroll-bar;
-}
-
-:host ::ng-deep .cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper {
-    max-width: 100% !important;
-}
-
-ul {
-    padding-left: 16px;
-}
-
-li {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    list-style-position: inside;
-    overflow: hidden;
-    padding-right: 10px;
-}

apps/red-ui/src/app/modules/file-preview/file-preview.module.ts

@@ -71,6 +71,7 @@ import { FilePreviewDialogService } from './services/file-preview-dialog.service
 import { ManualRedactionService } from './services/manual-redaction.service';
 import { TablesService } from './services/tables.service';
 import { SelectedAnnotationsTableComponent } from './components/selected-annotations-table/selected-annotations-table.component';
+import { SelectedAnnotationsListComponent } from './components/selected-annotations-list/selected-annotations-list.component';
 
 const routes: IqserRoutes = [
     {
@@ -154,6 +155,7 @@ const components = [
         ReplaceNbspPipe,
         DisableStopPropagationDirective,
         SelectedAnnotationsTableComponent,
+        SelectedAnnotationsListComponent,
     ],
     providers: [FilePreviewDialogService, ManualRedactionService, DocumentUnloadedGuard, TablesService],
 })