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

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

@@ -1,375 +0,0 @@
-import {Component, Input, Output, EventEmitter, SimpleChanges, SimpleChange} from '@angular/core';
-import {ComponentFixture, inject, TestBed} from '@angular/core/testing';
-import { BehaviorSubject } from 'rxjs';
-import { StoreModule, Store } from '@ngrx/store';
-
-import { ToolbarEventService } from '../../toolbar/toolbar-event.service';
-import { annotationSet } from '../../../assets/annotation-set';
-import { Annotation } from '../annotation-set/annotation-view/annotation.model';
-import { CommentService } from './comment/comment.service';
-import { CommentSetComponent } from './comment-set.component';
-import { CommentSetRenderService } from './comment-set-render.service';
-import { TagsModel } from '../models/tags.model';
-import { reducers } from '../../store/reducers/reducers';
-import * as fromActions from '../../store/actions/annotation.actions';
-
-@Component({
-    selector: 'mv-anno-comment',
-    template: '',
-    standalone: false
-})
-export class MockCommentComponent {
-  @Input() rotate = 0;
-  @Input() zoom = 1;
-  @Input() index: number;
-  @Input() page: number;
-  @Input() comment: Comment;
-  @Input() annotation: Annotation;
-
-  @Output() commentClick = new EventEmitter<any>();
-  @Output() renderComments = new EventEmitter<Comment>();
-  @Output() delete = new EventEmitter<Comment>();
-  @Output() updated = new EventEmitter<{comment: Comment, tags: TagsModel[]}>();
-  @Output() changes = new EventEmitter<boolean>();
-}
-
-describe('CommentSetComponent', () => {
-  let component: CommentSetComponent;
-  let fixture: ComponentFixture<CommentSetComponent>;
-  let mockComment;
-  let annotation: Annotation, annotation2: Annotation, annotation3: Annotation;
-  let comment, mockRectangles;
-  let toolbarEvent: ToolbarEventService;
-
-  const toolbarEventsMock = {
-    icp: {
-      participantsListVisible: new BehaviorSubject(false),
-    },
-    toggleCommentsPanel: () => {},
-    toggleParticipantsList: () => {},
-    commentsPanelVisible: new BehaviorSubject(false),
-    rotateSubject: new BehaviorSubject(false),
-  };
-
-  beforeEach(() => {
-    annotation = {
-      createdBy: 'ea6d959c-b6c9-48af-89c2-6f7bd796524d',
-      createdByDetails: {
-        forename: 'em-showcase',
-        surname: 'testuser',
-        email: 'emshowcase@hmcts.net'
-      },
-      lastModifiedByDetails: {
-        forename: 'em-showcase',
-        surname: 'testuser',
-        email: 'emshowcase@hmcts.net'
-      },
-      createdDate: '2019-05-28T08:48:19.681Z',
-      lastModifiedBy: 'ea6d959c-b6c9-48af-89c2-6f7bd796524d',
-      lastModifiedDate: '2019-05-28T08:48:33.206Z',
-      id: '123',
-      page: 1,
-      color: 'FFFF00',
-      annotationSetId: '8f7aa07c-2343-44e3-b3db-bf689066d00e',
-      comments: [],
-      rectangles: [],
-      type: 'highlight',
-      tags: []
-    };
-
-    annotation2 = {
-      createdBy: 'ea6d959c-b6c9-48af-89c2-6f7bd796524d',
-      createdByDetails: {
-        forename: 'em-showcase',
-        surname: 'testuser',
-        email: 'emshowcase@hmcts.net'
-      },
-      lastModifiedByDetails: {
-        forename: 'em-showcase',
-        surname: 'testuser',
-        email: 'emshowcase@hmcts.net'
-      },
-      createdDate: '2019-05-28T08:48:19.681Z',
-      lastModifiedBy: 'ea6d959c-b6c9-48af-89c2-6f7bd796524d',
-      lastModifiedDate: '2019-05-28T08:48:33.206Z',
-      id: '123',
-      page: 1,
-      color: 'FFFF00',
-      annotationSetId: '8f7aa07c-2343-44e3-b3db-bf689066d00e',
-      comments: [],
-      rectangles: [],
-      type: 'highlight',
-      tags: []
-    };
-
-    annotation3 = {
-      createdBy: 'ea6d959c-b6c9-48af-89c2-6f7bd796524d',
-      createdByDetails: {
-        forename: 'em-showcase',
-        surname: 'testuser',
-        email: 'emshowcase@hmcts.net'
-      },
-      lastModifiedByDetails: {
-        forename: 'em-showcase',
-        surname: 'testuser',
-        email: 'emshowcase@hmcts.net'
-      },
-      createdDate: '2019-05-28T08:48:19.681Z',
-      lastModifiedBy: 'ea6d959c-b6c9-48af-89c2-6f7bd796524d',
-      lastModifiedDate: '2019-05-28T08:48:33.206Z',
-      id: '123',
-      page: 2,
-      color: 'FFFF00',
-      annotationSetId: '8f7aa07c-2343-44e3-b3db-bf689066d00e',
-      comments: [],
-      rectangles: [],
-      type: 'highlight',
-      tags: []
-    };
-
-    comment = {
-      comment: {
-        createdBy: 'ea6d959c-b6c9-48af-89c2-6f7bd796524d',
-        createdByDetails: {
-          forename: 'Linus',
-          surname: 'Norton',
-          email: 'linus.norton@hmcts.net'
-        },
-        lastModifiedByDetails: {
-          forename: 'Linus',
-          surname: 'Norton',
-          email: 'linus.norton@hmcts.net'
-        },
-        createdDate: '2019-05-28T08:48:33.206Z',
-        lastModifiedBy: 'ea6d959c-b6c9-48af-89c2-6f7bd796524d',
-        lastModifiedDate: '2019-05-28T08:48:33.206Z',
-        id: '16d5c513-15f9-4c39-8102-88bdb85d8831',
-        content: 'This comment should be last',
-        annotationId: '4f3f9361-6d17-4689-81dd-5cb2e317b329'
-      },
-      tags: []
-    };
-    mockRectangles = [
-      {
-        createdBy: 'ea6d959c-b6c9-48af-89c2-6f7bd796524d',
-        createdByDetails: {
-          forename: 'Linus',
-          surname: 'Norton',
-          email: 'linus.norton@hmcts.net'
-        },
-        lastModifiedByDetails: {
-          forename: 'Linus',
-          surname: 'Norton',
-          email: 'linus.norton@hmcts.net'
-        },
-        createdDate: '2019-05-28T08:48:19.696Z',
-        lastModifiedBy: 'ea6d959c-b6c9-48af-89c2-6f7bd796524d',
-        lastModifiedDate: '2019-05-28T08:48:33.206Z',
-        id: '1',
-        x: 360.134016,
-        y: 200,
-        width: 16.879571,
-        height: 10.02507,
-        annotationId: '4f3f9361-6d17-4689-81dd-5cb2e317b329'
-      },
-      {
-        createdBy: 'ea6d959c-b6c9-48af-89c2-6f7bd796524d',
-        createdByDetails: {
-          forename: 'Linus',
-          surname: 'Norton',
-          email: 'linus.norton@hmcts.net'
-        },
-        lastModifiedByDetails: {
-          forename: 'Linus',
-          surname: 'Norton',
-          email: 'linus.norton@hmcts.net'
-        },
-        createdDate: '2019-05-28T08:48:19.696Z',
-        lastModifiedBy: 'ea6d959c-b6c9-48af-89c2-6f7bd796524d',
-        lastModifiedDate: '2019-05-28T08:48:33.206Z',
-        id: '2',
-        x: 360.134016,
-        y: 100,
-        width: 16.879571,
-        height: 10.02507,
-        annotationId: '4f3f9361-6d17-4689-81dd-5cb2e317b329'
-      },
-      {
-        createdBy: 'ea6d959c-b6c9-48af-89c2-6f7bd796524d',
-        createdByDetails: {
-          forename: 'Linus',
-          surname: 'Norton',
-          email: 'linus.norton@hmcts.net'
-        },
-        lastModifiedByDetails: {
-          forename: 'Linus',
-          surname: 'Norton',
-          email: 'linus.norton@hmcts.net'
-        },
-        createdDate: '2019-05-28T08:48:19.696Z',
-        lastModifiedBy: 'ea6d959c-b6c9-48af-89c2-6f7bd796524d',
-        lastModifiedDate: '2019-05-28T08:48:33.206Z',
-        id: '3',
-        x: 360.134016,
-        y: 400,
-        width: 16.879571,
-        height: 10.02507,
-        annotationId: '4f3f9361-6d17-4689-81dd-5cb2e317b329'
-      }
-    ];
-  });
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [
-        CommentSetComponent,
-        MockCommentComponent,
-      ],
-      imports: [
-        StoreModule.forRoot({}),
-        StoreModule.forFeature('media-viewer', reducers)
-      ],
-      providers: [
-        { provide: ToolbarEventService, useValue: toolbarEventsMock },
-        CommentService,
-        CommentSetRenderService,
-      ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    mockComment = JSON.parse(JSON.stringify(comment));
-    fixture = TestBed.createComponent(CommentSetComponent);
-    component = fixture.componentInstance;
-    component.annotationSet = JSON.parse(JSON.stringify(annotationSet));
-    component.rotate = 0;
-    component.height = 100;
-    component.zoom = 1;
-    fixture.detectChanges();
-    toolbarEvent = TestBed.inject(ToolbarEventService);
-  });
-
-  it('should delete the comment for the annotation', () => {
-    spyOn(component, 'onAnnotationUpdate');
-
-    component.onCommentDelete(mockComment.comment);
-
-    expect(component.onAnnotationUpdate).toHaveBeenCalled();
-    expect(component.annotationSet).not.toContain(mockComment);
-  });
-
-  it('should update the comment for the annotation', () => {
-    const annoId = component.annotationSet.annotations[0].comments[0].annotationId;
-    spyOn(component, 'onAnnotationUpdate');
-    const mockPayload = { comment: { content: 'Updating the comment 1', annotationId: annoId }} as any;
-
-    component.onCommentUpdate(mockPayload);
-
-    expect(component.onAnnotationUpdate).toHaveBeenCalled();
-    expect(component.annotationSet.annotations[0].comments[0]).toEqual(mockComment.comment);
-  });
-
-  it('should call the comment service to update comments state value',
-    inject([CommentService], (commentService: CommentService) => {
-      spyOn(commentService, 'onCommentChange');
-      commentService.setCommentSet({commentComponents: []});
-      component.allCommentsSaved();
-      expect(commentService.onCommentChange).toHaveBeenCalled();
-    })
-  );
-
-  describe('ngOnChanges', () => {
-    const mockAnnoationSet = {
-      documentId: '123',
-      annotations: [annotation3],
-      id: null,
-      createdBy: null,
-      createdByDetails: null,
-      createdDate: null,
-      lastModifiedBy: null,
-      lastModifiedByDetails: null,
-      lastModifiedDate: null
-    };
-
-    it('should call setCommentSet when annotationSet changed',
-      inject([CommentService], (commentService: CommentService) => {
-        spyOn(commentService, 'setCommentSet').and.callThrough();
-        const mockChanges: SimpleChanges = {
-          annotationSet: {
-            previousValue: undefined,
-            currentValue: mockAnnoationSet,
-            firstChange: false,
-            isFirstChange: () => false
-          }
-        };
-        component.ngOnChanges(mockChanges);
-
-        expect(commentService.setCommentSet).toHaveBeenCalled();
-      })
-    );
-
-    it('should not call setCommentSet when annotationSet not changed',
-      inject([CommentService], (commentService: CommentService) => {
-        spyOn(commentService, 'setCommentSet').and.callThrough();
-        const mockChanges: SimpleChanges = {};
-        component.ngOnChanges(mockChanges);
-
-        expect(commentService.setCommentSet).not.toHaveBeenCalled();
-      })
-    );
-  });
-
-  it('should dispatch SelectedAnnotation when onSelect called',
-    inject([Store], (store: Store<{}>) => {
-      spyOn(store, 'dispatch').and.callThrough();
-      const mockSelectedAnnotation = {
-        annotationId: '123',
-        editable: true,
-        selected: true
-      };
-      const action = new fromActions.SelectedAnnotation(mockSelectedAnnotation);
-      component.onSelect(mockSelectedAnnotation);
-
-      expect(store.dispatch).toHaveBeenCalledWith(action);
-    })
-  );
-
-  it('should dispatch SaveAnnotation when onAnnotationUpdate called',
-    inject([Store], (store: Store<{}>) => {
-      spyOn(store, 'dispatch').and.callThrough();
-      const action = new fromActions.SaveAnnotation(annotation3);
-      component.onAnnotationUpdate(annotation3);
-
-      expect(store.dispatch).toHaveBeenCalledWith(action);
-    })
-  );
-
-  describe('onContainerClick', () => {
-    it('should call clearSelection when onContainerClick called',
-      inject([Store], (store: Store<{}>) => {
-        spyOn(store, 'dispatch').and.callThrough();
-        const action = new fromActions.SelectedAnnotation({ annotationId: '', editable: false, selected: false});
-
-        component.onContainerClick({ path: [component.panel.nativeElement] });
-
-        expect(store.dispatch).toHaveBeenCalledWith(action);
-      })
-    );
-
-    it('should not call clearSelection when param is not the container', () => {
-      spyOn(component, 'clearSelection').and.callThrough();
-      component.onContainerClick({});
-
-      expect(component.clearSelection).not.toHaveBeenCalled();
-    });
-
-    it('should scroll comments panel to current scrolling position of the viewer when became visible', () => {
-      const scrollToSpy = spyOn(component.container.nativeElement, 'scrollTo').and.callThrough();
-
-      component.ngOnChanges({ contentScrollTop: new SimpleChange(0, 100, true) });
-
-      expect(scrollToSpy).toHaveBeenCalled();
-    });
-  });
-});

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

@@ -1,146 +0,0 @@
-import {
-  Component,
-  ElementRef,
-  Input, OnChanges,
-  OnDestroy,
-  OnInit,
-  QueryList, SimpleChanges,
-  ViewChild,
-  ViewChildren,
-} from '@angular/core';
-import { Observable, Subscription } from 'rxjs';
-import { select, Store } from '@ngrx/store';
-
-import { AnnotationSet } from '../annotation-set/annotation-set.model';
-import { Annotation } from '../annotation-set/annotation-view/annotation.model';
-import { Comment } from './comment/comment.model';
-import { CommentComponent } from './comment/comment.component';
-import { CommentService } from './comment/comment.service';
-import { CommentSetRenderService } from './comment-set-render.service';
-import * as fromStore from '../../store/reducers/reducers';
-import * as fromActions from '../../store/actions/annotation.actions';
-import * as fromSelectors from '../../store/selectors/annotation.selectors';
-import { TagsModel } from '../models/tags.model';
-import { SelectionAnnotation } from '../models/event-select.model';
-import { ToolbarEventService } from '../../toolbar/toolbar-event.service';
-
-@Component({
-    selector: 'mv-comment-set',
-    templateUrl: './comment-set.component.html',
-    standalone: false
-})
-export class CommentSetComponent implements OnInit, OnDestroy, OnChanges {
-
-  @Input() annotationSet: AnnotationSet;
-  @Input() zoom: number;
-  @Input() rotate: number;
-  @Input() height: number;
-  @Input() pageHeights = [];
-  @Input() contentScrollTop: number;
-
-  comments: Comment[];
-  tags: TagsModel[];
-  private subscriptions: Subscription[] = [];
-  public comments$: Observable<Annotation[]>;
-  public annoEntities$: Observable<{ [id: string]: Annotation }>;
-
-  @ViewChild('container', {static: false}) container: ElementRef<HTMLDivElement>;
-  @ViewChild('panel', {static: false}) panel: ElementRef<HTMLDivElement>;
-  @ViewChildren('commentComponent') commentComponents: QueryList<CommentComponent>;
-
-  showCommentsPanel: boolean;
-
-  constructor(private store: Store<fromStore.AnnotationSetState>,
-              private readonly commentService: CommentService,
-              private readonly renderService: CommentSetRenderService,
-              private readonly toolbarEvents: ToolbarEventService) {
-    this.clearSelection();
-  }
-
-  ngOnInit() {
-    this.comments$ = this.store.pipe(select(fromSelectors.getCommentsArray));
-    this.annoEntities$ = this.store.pipe(select(fromSelectors.getAnnotationEntities));
-    this.subscriptions.push(
-      this.toolbarEvents.commentsPanelVisible.subscribe(toggle => {
-        this.redrawComments();
-        this.showCommentsPanel = toggle;
-      })
-    );
-    this.subscriptions.push(this.toolbarEvents.rotateSubject.subscribe(rotate => this.rotateDocument()));
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes.annotationSet) {
-      this.commentService.setCommentSet(this);
-    }
-    if (changes.contentScrollTop) {
-      if (this.container) {
-        this.container.nativeElement.scrollTo(0, this.contentScrollTop);
-      }
-    }
-  }
-
-  ngOnDestroy() {
-    if (this.subscriptions.length > 0) {
-      this.subscriptions.forEach(subscription => subscription.unsubscribe());
-    }
-  }
-
-  public onSelect(annotationId: SelectionAnnotation) {
-    this.store.dispatch(new fromActions.SelectedAnnotation(annotationId));
-  }
-
-  public onCommentDelete(comment: Comment) {
-    const annotation = this.annotationSet.annotations.find(anno => anno.id === comment.annotationId);
-    const comments = [];
-    const annot = {
-      ...annotation,
-      comments
-    };
-    this.onAnnotationUpdate(annot);
-    this.redrawComments();
-  }
-
-  redrawComments() {
-    setTimeout(() => {
-      const componentList: CommentComponent[] = this.commentComponents.map(comment => comment);
-        this.renderService.redrawComponents(componentList, this.pageHeights, this.rotate, this.zoom);
-    }, 0);
-  }
-
-  private rotateDocument() {
-    if (this.panel) {
-      this.panel.nativeElement.style.height = '0';
-    }
-  }
-
-  public onCommentUpdate(payload: {comment: Comment, tags: TagsModel[]} ) {
-    const annotation = this.annotationSet.annotations.find(anno => anno.id === payload.comment.annotationId);
-    const comments = [payload.comment];
-    const tags = payload.tags;
-    const annot = {
-      ...annotation,
-      comments,
-      tags
-    };
-    this.onAnnotationUpdate(annot);
-  }
-
-  public onAnnotationUpdate(annotation: Annotation) {
-    this.store.dispatch(new fromActions.SaveAnnotation(annotation));
-  }
-
-  onContainerClick(e) {
-    if (e.path && e.path[0] === this.panel.nativeElement) {
-      this.clearSelection();
-    }
-  }
-
-  clearSelection() {
-    this.store.dispatch(new fromActions.SelectedAnnotation({ annotationId: '', editable: false, selected: false}));
-  }
-
-  allCommentsSaved() {
-    this.commentService.allCommentsSaved();
-  }
-}

package/projects/media-viewer/src/lib/annotations/comments-summary/comments-summary.component.html

@@ -1,165 +0,0 @@
-<div id="modal-background" class="modal" (click)="onClose()">
-  <div
-    #outerContainer
-    id="modal"
-    class="modal-content govuk-width-container clearfix"
-    (click)="$event.stopPropagation()"
-    cdkTrapFocus
-    tabindex="0"
-  >
-    <div id="comment-container" class="comment-container" #commentContainer>
-      <h2 class="govuk-heading-m">{{ title }}</h2>
-      <ng-container *ngIf="comments$ | async as comments">
-        <ng-container *ngIf="comments.length">
-          <button
-            type="submit"
-            class="govuk-button govuk-!-margin-right-1"
-            (click)="onFiltersToggle()"
-          >
-            {{
-              !showFilters
-                ? ("Show Filters" | rpxTranslate)
-                : ("Hide Filters" | rpxTranslate)
-            }}
-          </button>
-          <button
-            type="submit"
-            class="govuk-button govuk-button--secondary"
-            (click)="onClearFilters()"
-            *ngIf="hasFilter"
-          >
-            {{ "Clear Filters" | rpxTranslate }}
-          </button>
-          <ng-container *ngIf="showFilters">
-            <form [formGroup]="filtersFg" (ngSubmit)="onFilter()">
-              <div class="dates">
-                <div class="dates__from">
-                  <mv-gov-uk-date
-                    [config]="{ id: 'dateRangeFrom', legend: 'From' }"
-                    [formGroup]="filtersFg.controls['dateRangeFrom']"
-                    [errorMessage]="{
-                      isInvalid: !fromFilterValid,
-                      messages: ['From date is required']
-                    }"
-                  ></mv-gov-uk-date>
-                </div>
-                <div class="dates__to">
-                  <mv-gov-uk-date
-                    [config]="{ id: 'dateRangeTo', legend: 'To' }"
-                    [formGroup]="filtersFg.controls['dateRangeTo']"
-                    [errorMessage]="{
-                      isInvalid: !toFilterValid,
-                      messages: ['To date is required']
-                    }"
-                  ></mv-gov-uk-date>
-                </div>
-                <div class="dates__tags">
-                  <mv-gov-uk-fieldset
-                    [config]="{
-                      legend: 'Tags',
-                      classes: 'govuk-label--m',
-                      id: 'filters'
-                    }"
-                    [isHeading]="false"
-                  >
-                    <div
-                      class="govuk-checkboxes--scroll"
-                      [formGroup]="filtersFg.controls['tagFilters']"
-                    >
-                      <div class="govuk-checkboxes govuk-checkboxes--small">
-                        <div
-                          class="govuk-checkboxes__item"
-                          *ngFor="let item of allTags$ | async"
-                        >
-                          <input
-                            [formControlName]="item.key"
-                            class="govuk-checkboxes__input"
-                            [value]="false"
-                            type="checkbox"
-                          />
-                          <label class="govuk-label govuk-checkboxes__label">
-                            {{ item.key | unsnake }} ({{ item.length }})
-                          </label>
-                        </div>
-                      </div>
-                    </div>
-                  </mv-gov-uk-fieldset>
-                </div>
-                <div class="dates__cta">
-                  <button type="submit" class="govuk-button">
-                    {{ "Filter comments" | rpxTranslate }}
-                  </button>
-                </div>
-              </div>
-            </form>
-          </ng-container>
-          <ng-container *ngIf="comments[0]">
-            <ngx-datatable
-              [rows]="comments"
-              rowHeight="auto"
-              headerHeight="auto"
-              [columnMode]="'flex'"
-              [sorts]="[{ prop: 'date', dir: 'desc' }]"
-            >
-              <ngx-datatable-column
-                name="{{ 'User' | rpxTranslate }}"
-                [flexGrow]="1"
-                [sortable]="false"
-              ></ngx-datatable-column>
-              <ngx-datatable-column
-                name="{{ 'Page' | rpxTranslate }}"
-                [flexGrow]="1"
-              >
-                <ng-template ngx-datatable-cell-template let-value="value">
-                  <a
-                    [routerLink]="[]"
-                    class="comment-summary_pages"
-                    (click)="navigateToPage(value)"
-                    >{{ value }}</a
-                  >
-                </ng-template>
-              </ngx-datatable-column>
-              <ngx-datatable-column
-                name="{{ 'Date' | rpxTranslate }}"
-                [flexGrow]="1"
-              ></ngx-datatable-column>
-              <ngx-datatable-column
-                name="{{ 'Comment' | rpxTranslate }}"
-                [flexGrow]="3"
-                [sortable]="false"
-              ></ngx-datatable-column>
-              <ngx-datatable-column
-                name="{{ 'Tags' | rpxTranslate }}"
-                [flexGrow]="1"
-                [sortable]="false"
-              >
-                <ng-template ngx-datatable-cell-template let-value="value">
-                  <span class="hmcts-badge" *ngFor="let tag of value">{{
-                    tag.label
-                  }}</span>
-                </ng-template>
-              </ngx-datatable-column>
-            </ngx-datatable>
-          </ng-container>
-        </ng-container>
-        <ng-container *ngIf="!comments[0]">
-          <h3 class="govuk-heading-s">
-            {{
-              "No comments available. Select text to add a highlight or comment."
-                | rpxTranslate
-            }}
-          </h3>
-        </ng-container>
-      </ng-container>
-    </div>
-
-    <div class="button-container">
-      <button (click)="onPrint()" class="govuk-button govuk-button--secondary">
-        {{ "Print" | rpxTranslate }}
-      </button>
-      <button id="modal-close-button" (click)="onClose()" class="govuk-button">
-        {{ "Close" | rpxTranslate }}
-      </button>
-    </div>
-  </div>
-</div>