@hmcts/media-viewer 4.2.4-exui-3994-f → 4.2.4-exui-3994-g

package/projects/media-viewer/src/lib/annotations/annotation-set/ctx-toolbar/ctx-toolbar.component.ts

@@ -1,127 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  Input,
-  OnChanges,
-  Output,
-  SimpleChanges
-} from '@angular/core';
-import { Rectangle } from '../annotation-view/rectangle/rectangle.model';
-
-@Component({
-    selector: 'mv-ctx-toolbar',
-    templateUrl: './ctx-toolbar.component.html',
-    standalone: false
-})
-export class CtxToolbarComponent implements OnChanges {
-
-  readonly defaultHeight;
-  readonly defaultWidth;
-
-  @Input() zoom;
-  @Input() rotate;
-  @Input() pageHeight: number;
-  @Input() pageWidth: number;
-
-  @Input() canHighlight: boolean;
-  @Input() canBookmark: boolean;
-  @Input() canComment: boolean;
-  @Input() canDelete: boolean;
-
-  @Output() createHighlightEvent = new EventEmitter();
-  @Output() deleteHighlightEvent = new EventEmitter();
-  @Output() addOrEditCommentEvent = new EventEmitter();
-  @Output() createBookmarkEvent = new EventEmitter<Rectangle>();
-
-  rectangle: Rectangle;
-  _rectangles: Rectangle[];
-  top: number;
-  left: number;
-
-  constructor() {
-    this.defaultHeight = 70;
-    this.defaultWidth = 300;
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    this.setRectangle();
-    this.top = this.popupTop();
-    this.left = this.popupLeft();
-  }
-
-  @Input() set rectangles(rectangles: Rectangle[]) {
-    if (rectangles) {
-      this._rectangles = rectangles;
-      this.setRectangle();
-    }
-  }
-
-  get rectangles() {
-    return this._rectangles;
-  }
-
-  createHighlight() {
-    this.createHighlightEvent.emit();
-    this.rectangle = undefined;
-  }
-
-  deleteHighlight() {
-    this.deleteHighlightEvent.emit();
-  }
-
-  addOrEditComment() {
-    this.addOrEditCommentEvent.emit();
-    setTimeout(() => {
-      // This hack to wait until the element is rendered seems to be unreliable,
-      if (!location.hash) {
-        document.getElementById('viewerContainer')?.scrollBy(0, 1);
-      }
-    }, 20);
-  }
-
-  createBookmark() {
-    this.createBookmarkEvent.emit(this.rectangle);
-    this.rectangle = undefined;
-  }
-
-  setRectangle() {
-    const rectangle = this.rectangles
-      .reduce((prev, current) => prev.y < current.y ? prev : current);
-    this.rectangle =  { ...rectangle };
-    switch (this.rotate) {
-      case 90:
-        this.rectangle.width = rectangle.height;
-        this.rectangle.height = rectangle.width;
-        this.rectangle.x = (this.pageWidth / this.zoom) - rectangle.y - rectangle.height;
-        this.rectangle.y = rectangle.x;
-        break;
-      case 180:
-        this.rectangle.x = (this.pageWidth / this.zoom) - rectangle.x - rectangle.width;
-        this.rectangle.y = (this.pageHeight / this.zoom) - rectangle.y - rectangle.height;
-        break;
-      case 270:
-        this.rectangle.width = rectangle.height;
-        this.rectangle.height = rectangle.width;
-        this.rectangle.x = rectangle.y;
-        this.rectangle.y = (this.pageHeight / this.zoom) - rectangle.x - rectangle.width;
-        break;
-    }
-  }
-
-  popupTop() {
-    const popupTop = this.rectangle.y * this.zoom - this.defaultHeight;
-    return popupTop <= 0 ? this.defaultHeight : popupTop;
-  }
-
-  popupLeft() {
-    const popupLeft = (this.rectangle.x + (this.rectangle.width / 2)) * this.zoom - (this.defaultWidth / 2);
-    if (popupLeft <= 0) {
-      return 0;
-    } else if (popupLeft >= this.pageWidth - this.defaultWidth) {
-      return this.pageWidth - this.defaultWidth;
-    } else {
-      return popupLeft;
-    }
-  }
-}

package/projects/media-viewer/src/lib/annotations/annotation-set/metadata-layer/metadata-layer.component.html

@@ -1,36 +0,0 @@
-<div class="pageContainer">
-  <div  *ngFor="let page of pages;  index as i"
-       class="pageContainer__page"
-       [ngStyle]="{
-       'width.px': page.styles.width,
-       'height.px': page.styles.height
-       }"
-       [ngClass]="{ 'pageContainer__page--draw' : drawMode }">
-    <mv-box-highlight-create
-      [page]="i + 1"
-      [pageHeight]="page.styles.height"
-      [pageWidth]="page.styles.width"
-      [rotate]="rotate"
-      [zoom]="zoom"
-      (saveSelection)="saveAnnotation($event)">
-    </mv-box-highlight-create>
-    <mv-ctx-toolbar *ngIf="rectangles && highlightPage === (i + 1)"
-                    [rectangles]="rectangles"
-                    [canBookmark]="true" [canHighlight]="true"
-                    [zoom]="zoom"
-                    [rotate]="rotate"
-                    [pageHeight]="page.styles.height"
-                    [pageWidth]="page.styles.width"
-                    (createBookmarkEvent)="createBookmark($event)"
-                    (createHighlightEvent)="createHighlight()">
-    </mv-ctx-toolbar>
-    <div class="pageContainer__page-item">
-      <mv-annotation-set *ngIf="(annoPages$ | async) as annoPages"
-                         [zoom]="zoom"
-                         [rotate]="rotate"
-                         [pageHeight]="page.styles.height"
-                         [pageWidth]="page.styles.width"
-                         [page]="i" [annotations]="annoPages[i + 1]"></mv-annotation-set>
-    </div>
-  </div>
-</div>

package/projects/media-viewer/src/lib/annotations/annotation-set/metadata-layer/metadata-layer.component.spec.ts

@@ -1,232 +0,0 @@
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { ComponentFixture, inject, TestBed } from '@angular/core/testing';
-import { of, Subscription } from 'rxjs';
-import { Action, Store, StoreModule } from '@ngrx/store';
-
-import { ToolbarEventService } from '../../../toolbar/toolbar-event.service';
-import { HighlightCreateService } from '../annotation-create/highlight-create/highlight-create.service';
-import { ViewerEventService } from '../../../viewers/viewer-event.service';
-import { reducers } from '../../../store/reducers/reducers';
-import { MetadataLayerComponent } from './metadata-layer.component';
-
-describe('MetadataLayerComponent', () => {
-  let component: MetadataLayerComponent;
-  let fixture: ComponentFixture<MetadataLayerComponent>;
-  let mockTextLayerRect, mockElement, mockHighlight, mockClientRect, mockClientRects, mockRange;
-  let expectedAction: Action;
-  const mockStore = {
-    select: () => of([{
-      styles: { height: 100, width: 100 },
-      scaleRotation: { scale: 1, rotation: 0 },
-      annotationSetId: 'annotationSetId',
-      documentId: 'documentId'
-    }]),
-    pipe: () => of([{
-      styles: { height: 100, width: 100 },
-      scaleRotation: { scale: 1, rotation: 0 },
-      annotationSetId: 'annotationSetId',
-      documentId: 'documentId'
-    }]),
-    dispatch: (actualAction: Action) => {
-      expectedAction = actualAction;
-    },
-  } as any;
-
-  const mockHighlightService = {
-    getRectangles: () => {},
-    saveAnnotation: () => {},
-    resetHighlight: () => {}
-  } as any;
-
-  beforeEach(() => {
-    mockTextLayerRect = {
-      top: 0,
-      left: 0,
-    };
-
-    mockElement = {
-      parentElement: {
-        getBoundingClientRect(): unknown {
-          return mockTextLayerRect;
-        },
-        childNodes: [{
-          style: {
-            padding: '100px 100px 100px 100px',
-            transform: 'scaleX(0.01) translateX(100px) translateY(-0.1)'
-          }
-        },
-          {
-            style: {
-              padding: '100px 100px 100px 100px',
-              transform: 'scaleX(0.01) translateX(100) translateY(-0.1px)'
-            }
-          }]
-      }
-    };
-
-    mockHighlight = {
-      page: 1,
-      event: {
-        pageY: 10,
-        pageX: 10,
-        target: mockElement,
-        srcElement: mockElement
-      } as any,
-    };
-
-    mockClientRect = {
-      top: 10,
-      bottom: 100,
-      left: 25,
-      right: 100,
-    };
-
-    mockClientRects = [mockClientRect, mockClientRect];
-    mockRange = {
-      cloneRange(): any {
-        return mockRange;
-      },
-      getClientRects(): any {
-        return mockClientRects;
-      }
-    };
-
-  });
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [MetadataLayerComponent],
-      imports: [
-        StoreModule.forRoot({}),
-        StoreModule.forFeature('media-viewer' , reducers)
-      ],
-      providers: [
-        { provide: Store, useValue: mockStore },
-        { provide: HighlightCreateService, useValue: mockHighlightService },
-        ToolbarEventService,
-        ViewerEventService
-      ],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(MetadataLayerComponent);
-    component = fixture.componentInstance;
-    component.rotate = 0;
-    component.zoom = 1;
-    fixture.detectChanges();
-
-    spyOn(mockHighlight.event, 'target').and.returnValue(mockElement);
-    spyOn(mockHighlight.event, 'srcElement').and.returnValue(mockElement);
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should setup subscriptions',
-    inject([Store, ViewerEventService, ToolbarEventService],
-    (store, viewerEvents, toolbarEvents) => {
-      spyOn(store, 'pipe').and.returnValue(of(['pages']));
-      spyOn(toolbarEvents.drawModeSubject, 'subscribe').and.callThrough();
-      spyOn(viewerEvents.textHighlight, 'subscribe').and.callThrough();
-      spyOn(viewerEvents.ctxToolbarCleared, 'subscribe').and.callThrough();
-
-      component.ngOnInit();
-
-      expect(store.pipe).toHaveBeenCalled();
-      expect(toolbarEvents.drawModeSubject.subscribe).toHaveBeenCalled();
-      expect(viewerEvents.textHighlight.subscribe).toHaveBeenCalled();
-      expect(viewerEvents.ctxToolbarCleared.subscribe).toHaveBeenCalled();
-    }
-  ));
-
-  it('should destroy subscriptions',
-    inject([Store, ViewerEventService, ToolbarEventService],
-      (store, viewerEvents, toolbarEvents) => {
-      const mockSubscription = new Subscription();
-      spyOn(mockSubscription, 'unsubscribe');
-      spyOn(toolbarEvents.drawModeSubject, 'subscribe').and.returnValue(mockSubscription);
-      spyOn(viewerEvents.textHighlight, 'subscribe').and.returnValue(mockSubscription);
-      spyOn(viewerEvents.ctxToolbarCleared, 'subscribe').and.returnValue(mockSubscription);
-
-      component.ngOnInit();
-      component.ngOnDestroy();
-
-      expect(mockSubscription.unsubscribe).toHaveBeenCalled();
-    }
-  ));
-
-  describe('showContextToolbar', () => {
-    it('should set page and rectangles and push false to highlightModeSubject',
-      inject([ToolbarEventService], (toolbarEvents: ToolbarEventService) => {
-        spyOn(toolbarEvents.highlightModeSubject, 'next');
-        component.showContextToolbar({ page: 1, rectangles: ['rectangles'] } as any);
-
-        expect(toolbarEvents.highlightModeSubject.next).toHaveBeenCalledWith(false);
-        expect(component.rectangles).toEqual(['rectangles'] as any);
-      })
-    );
-
-    it('should set page and rectangles and do not push false to highlightModeSubject',
-      inject([ToolbarEventService], (toolbarEvents: ToolbarEventService) => {
-        spyOn(toolbarEvents.highlightModeSubject, 'next');
-        component.showContextToolbar({ page: 1, rectangles: null } as any);
-
-        expect(toolbarEvents.highlightModeSubject.next).not.toHaveBeenCalled();
-        expect(component.rectangles).toEqual(null);
-      })
-    );
-  });
-
-  it('should clear context toolbar', () => {
-    component.rectangles = ['rectangles'] as any;
-
-    component.clearContextToolbar();
-
-    expect(component.rectangles).toBeUndefined();
-  });
-
-  it('should create highlight',
-    inject([HighlightCreateService], (highlightCreateService) => {
-      spyOn(highlightCreateService, 'saveAnnotation');
-      spyOn(highlightCreateService, 'resetHighlight');
-
-      component.createHighlight();
-
-      expect(highlightCreateService.saveAnnotation).toHaveBeenCalled();
-      expect(highlightCreateService.resetHighlight).toHaveBeenCalled();
-      expect(component.rectangles).toBeUndefined();
-  }));
-
-  it('should create bookmark',
-    inject([HighlightCreateService, Store], (highlightCreateService, store) => {
-      const mockSelection = { toString: () => 'bookmark text' } as any;
-      spyOn(window, 'getSelection').and.returnValue(mockSelection);
-      component.highlightPage = 1;
-      spyOn(store, 'dispatch');
-      spyOn(highlightCreateService, 'resetHighlight');
-
-      component.createBookmark({ x: 100, y: 200 } as any);
-
-      expect(store.dispatch).toHaveBeenCalled();
-      expect(highlightCreateService.resetHighlight).toHaveBeenCalled();
-      expect(component.rectangles).toBeUndefined();
-    }
-  ));
-
-  it('should call saveAnnotation and push false to drawModeSubject',
-    inject([HighlightCreateService, ToolbarEventService],
-      (highlightCreateService: HighlightCreateService, toolbarEvents: ToolbarEventService) => {
-        const mockRectangles = [];
-        const mockPage = 1;
-
-        spyOn(highlightCreateService, 'saveAnnotation');
-        spyOn(toolbarEvents.drawModeSubject, 'next');
-
-        component.saveAnnotation({ rectangles: mockRectangles, page: mockPage});
-        expect(highlightCreateService.saveAnnotation).toHaveBeenCalledWith(mockRectangles, mockPage);
-        expect(toolbarEvents.drawModeSubject.next).toHaveBeenCalledWith(false);
-      }
-    )
-  );
-});

package/projects/media-viewer/src/lib/annotations/annotation-set/metadata-layer/metadata-layer.component.ts

@@ -1,98 +0,0 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { Observable, Subscription } from 'rxjs';
-import { take } from 'rxjs/operators';
-import { select, Store } from '@ngrx/store';
-import { v4 as uuid } from 'uuid';
-
-import * as fromStore from '../../../store/reducers/reducers';
-import * as fromDocument from '../../../store/selectors/document.selectors';
-import * as fromSelectors from '../../../store/selectors/annotation.selectors';
-import { HighlightCreateService } from '../annotation-create/highlight-create/highlight-create.service';
-import { Rectangle } from '../annotation-view/rectangle/rectangle.model';
-import { CreateBookmark } from '../../../store/actions/bookmark.actions';
-import * as fromBookmarks from '../../../store/selectors/bookmark.selectors';
-import { ToolbarEventService } from '../../../toolbar/toolbar-event.service';
-import { Highlight, ViewerEventService } from '../../../viewers/viewer-event.service';
-
-@Component({
-    selector: 'mv-metadata-layer',
-    templateUrl: './metadata-layer.component.html',
-    standalone: false
-})
-export class MetadataLayerComponent implements OnInit, OnDestroy {
-
-  @Input() zoom: number;
-  @Input() rotate: number;
-
-  pages: any[] = []; // todo add type
-  annoPages$: Observable<any>; // todo add type
-
-  drawMode = false;
-  highlightPage: number;
-  rectangles: Rectangle[];
-
-  private $subscriptions: Subscription;
-
-  constructor(
-    private store: Store<fromStore.AnnotationSetState>,
-    private readonly highlightService: HighlightCreateService,
-    private readonly toolbarEvents: ToolbarEventService,
-    private readonly viewerEvents: ViewerEventService) { }
-
-  ngOnInit(): void {
-    this.$subscriptions = this.store.pipe(select(fromDocument.getPages))
-      .subscribe(pages => this.pages = Object.values(pages));
-    this.annoPages$ = this.store.pipe(select(fromSelectors.getPageEntities));
-
-    this.$subscriptions.add(this.toolbarEvents.drawModeSubject.subscribe(drawMode => this.drawMode = drawMode));
-    this.$subscriptions.add(this.viewerEvents.textHighlight.subscribe(highlight => this.showContextToolbar(highlight)));
-    this.$subscriptions.add(this.viewerEvents.ctxToolbarCleared.subscribe(() => this.clearContextToolbar()));
-  }
-
-  ngOnDestroy(): void {
-    this.$subscriptions.unsubscribe();
-  }
-
-  showContextToolbar(highlight: Highlight) {
-    this.highlightPage = highlight.page;
-    this.rectangles = highlight.rectangles;
-    if (this.rectangles) {
-      this.toolbarEvents.highlightModeSubject.next(false);
-    }
-  }
-
-  clearContextToolbar() {
-    this.rectangles = undefined;
-  }
-
-  createHighlight() {
-    this.highlightService.saveAnnotation(this.rectangles, this.highlightPage);
-    this.highlightService.resetHighlight();
-    this.rectangles = undefined;
-  }
-
-  createBookmark(rectangle: Rectangle) {
-    this.store.pipe(select(fromBookmarks.getBookmarkInfo), take(1))
-      .subscribe((bookmarkInfo) => {
-        const selection = window.getSelection().toString();
-        this.store.dispatch(new CreateBookmark({
-          ...bookmarkInfo,
-          name: selection.length > 0 ? selection.substr(0, 30) : 'new bookmark',
-          id: uuid(),
-          pageNumber: this.highlightPage - 1,
-          xCoordinate: rectangle.x,
-          yCoordinate: rectangle.y
-        } as any));
-        this.toolbarEvents.toggleSideBar(true);
-        this.toolbarEvents.toggleSideBarView(false);
-        this.highlightService.resetHighlight();
-        this.rectangles = undefined;
-
-      });
-  }
-
-  saveAnnotation({ rectangles, page }: { rectangles: Rectangle[], page: any }) {
-    this.highlightService.saveAnnotation(rectangles, page);
-    this.toolbarEvents.drawModeSubject.next(false);
-  }
-}

package/projects/media-viewer/src/lib/annotations/annotations.module.ts

@@ -1,99 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { HttpClientModule } from '@angular/common/http';
-import { A11yModule } from '@angular/cdk/a11y';
-import { RouterModule } from '@angular/router';
-
-import { MutableDivModule } from 'mutable-div';
-import { TagInputModule } from 'ngx-chips';
-import { NgxDatatableModule } from '@swimlane/ngx-datatable';
-
-import { AnnotationApiService } from './services/annotation-api/annotation-api.service';
-import { AnnotationViewComponent } from './annotation-set/annotation-view/annotation-view.component';
-import { AnnotationSetComponent } from './annotation-set/annotation-set.component';
-import { RectangleComponent } from './annotation-set/annotation-view/rectangle/rectangle.component';
-import { CommentComponent } from './comment-set/comment/comment.component';
-import { CtxToolbarComponent } from './annotation-set/ctx-toolbar/ctx-toolbar.component';
-import { CommentSetComponent } from './comment-set/comment-set.component';
-import { TextareaAutoExpandDirective } from './comment-set/comment/textarea-auto-expand/textarea-auto-expand.directive';
-import { CommentsSummaryComponent } from './comments-summary/comments-summary.component';
-import { CommentSetRenderService } from './comment-set/comment-set-render.service';
-import { BoxHighlightCreateComponent } from './annotation-set/annotation-create/box-highlight-create/box-highlight-create.component';
-import { HighlightCreateService } from './annotation-set/annotation-create/highlight-create/highlight-create.service';
-import { CommentSetHeaderComponent } from './comment-set/comment-set-header/comment-set-header.component';
-import { CommentSearchComponent } from './comment-set/comment-set-header/comment-search/comment-search.component';
-import { TextHighlightDirective } from './comment-set/comment/text-highlight/text-highlight.directive';
-import { TagsComponent } from './tags/tags.component';
-import { TagsServices } from './services/tags/tags.services';
-import { CommentsNavigateComponent } from './comment-set/comment-navigate/comments-navigate.component';
-import { CommentFilterComponent } from './comment-set/comment-set-header/comment-filter/comment-filter.component';
-import { MomentDatePipe } from './pipes/date/date.pipe';
-import { BookmarksApiService } from './services/bookmarks-api/bookmarks-api.service';
-import { FilterPipe } from './pipes/filter/filter.pipe';
-import { UnsnakePipe } from './pipes/unsnake/unsnake.pipe';
-import { SharedModule } from '../shared/shared.module';
-import { MetadataLayerComponent } from './annotation-set/metadata-layer/metadata-layer.component';
-import { CommentService } from './comment-set/comment/comment.service';
-import { RpxTranslationModule } from 'rpx-xui-translation';
-
-@NgModule({
-  imports: [
-    A11yModule,
-    CommonModule,
-    FormsModule,
-    HttpClientModule,
-    MutableDivModule,
-    TagInputModule,
-    RouterModule,
-    ReactiveFormsModule,
-    NgxDatatableModule,
-    SharedModule,
-    RpxTranslationModule.forChild()
-  ],
-  declarations: [
-    MetadataLayerComponent,
-    AnnotationViewComponent,
-    BoxHighlightCreateComponent,
-    AnnotationSetComponent,
-    RectangleComponent,
-    CommentComponent,
-    CommentSetHeaderComponent,
-    CommentSearchComponent,
-    TextHighlightDirective,
-    CtxToolbarComponent,
-    CommentSetComponent,
-    CommentsNavigateComponent,
-    TextareaAutoExpandDirective,
-    CommentsSummaryComponent,
-    TagsComponent,
-    MomentDatePipe,
-    CommentFilterComponent,
-    FilterPipe,
-    UnsnakePipe
-  ],
-  providers: [
-    AnnotationApiService,
-    BookmarksApiService,
-    CommentSetRenderService,
-    HighlightCreateService,
-    CommentService,
-    TagsServices
-  ],
-  exports: [
-    AnnotationViewComponent,
-    BoxHighlightCreateComponent,
-    AnnotationSetComponent,
-    CommentSetComponent,
-    CommentSetHeaderComponent,
-    CommentSearchComponent,
-    CommentsSummaryComponent,
-    TagsComponent,
-    CommentFilterComponent,
-    MomentDatePipe,
-    FilterPipe,
-    UnsnakePipe,
-    MetadataLayerComponent
-  ]
-})
-export class AnnotationsModule { }

package/projects/media-viewer/src/lib/annotations/comment-set/comment/comment.component.html

@@ -1,75 +0,0 @@
-<div
-  #form
-  (click)="onCommentClick()"
-  class="aui-comment"
-  [ngClass]="{ stylestoggle: (marginToComment$ | async) }"
-  [style.top.px]="commentTop"
-  [style.zIndex]="selected ? 100 : 0"
->
-  <div id="detailsWrapper {{ index }}" class="aui-comment__header">
-    <span *ngIf="author && !editor" class="aui-comment__author">
-      {{ author.forename }} {{ author.surname }}
-    </span>
-    <span *ngIf="editor" class="aui-comment__author">
-      {{ editor.forename }} {{ editor.surname }}
-    </span>
-    <time [hidden]="!selected && !this.editable" class="aui-comment__meta">
-      {{ lastUpdate | momentDate : "d MMMM y h:mm a" }}
-    </time>
-  </div>
-  <mv-tags
-    [tagItems]="tagItems"
-    [userId]="createdBy"
-    [editable]="editable"
-    [annoId]="_comment.annotationId"
-  >
-  </mv-tags>
-  <textarea
-    *ngIf="selected && editable"
-    #editableComment
-    mvTextAreaAutoExpand
-    type="text"
-    required
-    name="content"
-    [maxlength]="CHAR_LIMIT"
-    class="aui-comment__content form-control mimic-focus edit-mode expanded"
-    [ngModel]="fullComment"
-    (ngModelChange)="fullComment = $event; reRenderComments(); onCommentChange($event)"
-    aria-label="comment"
-  >
-  </textarea>
-  <p
-    *ngIf="!editable"
-    mvTextHighlight
-    class="commentText"
-    [textToHighlight]="searchString"
-  >
-    {{ fullComment }}
-  </p>
-  <div
-    *ngIf="
-      selected ||
-      this.editable ||
-      (!fullComment.length && tagItems && !tagItems.length)
-    "
-    class="aui-comment__footer commentBtns"
-  >
-    <button
-      class="govuk-button"
-      type="button"
-      role="button"
-      (click)="editOrSave()"
-    >
-      {{ !editable ? ("Edit" | rpxTranslate) : ("Save" | rpxTranslate) }}
-    </button>
-    <button
-      type="button"
-      role="button"
-      class="govuk-button govuk-button--secondary"
-      (click)="deleteOrCancel()"
-    >
-      {{ !editable ? ("Delete" | rpxTranslate) : ("Cancel" | rpxTranslate) }}
-    </button>
-  </div>
-  <span class="aui-comment__private">{{ "private" | rpxTranslate }}</span>
-</div>