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

package/src/app/app.component.scss

@@ -1,87 +0,0 @@
-// global toolbar for <a> and <p> tags
-$govuk-global-styles: true;
-// Width of main container
-$hmcts-page-width: 1220px;
-
-// Consumer component will have to import following dependencies // START
-// Import GOV.UK Frontend
-@import "govuk-frontend/govuk/all";
-// Import Media Viewer Styles
-@import "../../projects/media-viewer/src/assets/all";
-// END
-
-html {
-  background-color: govuk-colour("light-grey");
-}
-
-body {
-  overflow: hidden;
-}
-
-.js-enabled .js-hidden {
-  display: none !important;
-}
-
-.aui-measure {
-  max-width: 833px;
-}
-
-.media-viewer-wrapper-container {
-  max-height: 100vh;
-}
-
-.aui-case-action-alert {
-  background-color: govuk-colour("blue");
-  color: govuk-colour("white");
-  margin-bottom: govuk-spacing(6);
-  padding: govuk-spacing(4);
-}
-
-.aui-case-action-alert__heading {
-  color: inherit;
-}
-
-.aui-case-action-alert__content {
-  color: inherit;
-
-  p:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.aui-case-action-alert__link:link,
-.aui-case-action-alert__link:visited {
-  color: govuk-colour("white");
-}
-
-// Case action alert
-
-.aui-case-action-alert {
-  background-color: govuk-colour("blue");
-  color: govuk-colour("white");
-  margin-bottom: govuk-spacing(6);
-  padding: govuk-spacing(4);
-}
-
-.aui-case-action-alert__heading {
-  @include govuk-font($size: 24, $weight: bold);
-  color: inherit;
-  margin-bottom: govuk-spacing(2);
-  margin-top: 0;
-}
-
-.aui-case-action-alert__content {
-  color: inherit;
-
-  p:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.aui-case-action-alert__link:link {
-  color: govuk-colour("white");
-}
-
-.aui-case-action-alert__link:focus {
-  color: govuk-colour("black");
-}

package/src/app/app.component.spec.ts

@@ -1,31 +0,0 @@
-import { TestBed, waitForAsync } from '@angular/core/testing';
-import { TransferState } from '@angular/core';
-import { RouterTestingModule } from '@angular/router/testing';
-import { AppComponent } from './app.component';
-
-describe('AppComponent', () => {
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      imports: [
-        RouterTestingModule
-      ],
-      declarations: [
-        AppComponent,
-      ],
-      providers: [TransferState]
-    }).compileComponents();
-  }));
-
-  it('should create the app', waitForAsync(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app).toBeTruthy();
-  }));
-
-  it(`should have as title 'Media Viewer Demo App'`, waitForAsync(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('Media Viewer Demo App');
-  }));
-});

package/src/app/app.component.ts

@@ -1,14 +0,0 @@
-import {Component, ViewEncapsulation} from '@angular/core';
-
-@Component({
-    selector: 'app-root',
-    templateUrl: './app.component.html',
-    encapsulation: ViewEncapsulation.None,
-    standalone: false
-})
-
-export class AppComponent {
-    title = 'Media Viewer Demo App';
-
-    constructor() {}
-}

package/src/app/app.module.ts

@@ -1,46 +0,0 @@
-import { RpxTranslationModule, RpxTranslationService, RpxTranslationConfig } from 'rpx-xui-translation';
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import { HttpClientModule } from '@angular/common/http';
-
-import { AppComponent } from './app.component';
-import { RouterModule } from '@angular/router';
-import { RoutingModule } from './routing.module';
-import { MetaReducer, StoreModule } from '@ngrx/store';
-import { EffectsModule } from '@ngrx/effects';
-import { environment } from '../environments/environment';
-import { StoreDevtoolsModule } from '@ngrx/store-devtools';
-import { storeFreeze } from 'ngrx-store-freeze';
-// enforces immutability
-export const metaReducers: MetaReducer<any>[] = !environment.production
-  ? [storeFreeze]
-  : [];
-@NgModule({
-  declarations: [
-    AppComponent,
-  ],
-  imports: [
-    BrowserModule,
-    HttpClientModule,
-    RouterModule,
-    RoutingModule,
-    StoreModule.forRoot({}, { metaReducers }),
-    EffectsModule.forRoot([]),
-    !environment.production ?
-      StoreDevtoolsModule.instrument({})
-      : [],
-    RpxTranslationModule.forRoot({
-      baseUrl: '/api/translation',
-      debounceTimeMs: 300,
-      validity: {
-        days: 1
-      },
-      testMode: false
-    })
-  ],
-  providers: [
-
-  ],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }

package/src/app/media-viewer-wrapper/custom-toolbar/custom-toolbar.component.html

@@ -1,79 +0,0 @@
-<div class="customToolbar">
-  <div class="toolbarContainer">
-    <div *ngIf="contentType === 'pdf'" class="column left-pane">
-      <button class="govuk-button" id="custom-toolbar-viewFind" data-module="govuk-button" (click)="search = !search">
-        search
-      </button>
-      <button class="govuk-button" id="custom-toolbar-toggleHighlightButton" data-module="govuk-button" (click)="highlight()">
-        Highlight
-      </button>
-      <button class="govuk-button" id="custom-toolbar-previous" data-module="govuk-button" (click)="prevPage()">
-        Prev Page
-      </button>
-      <button class="govuk-button" id="custom-toolbar-next" data-module="govuk-button" (click)="nextPage()">
-        Next Page
-      </button>
-      <div class="govuk-form-group page-input-form">
-        <input #pageInput
-               class="govuk-input page-input"
-               id="pageNumber"
-               name="event-name"
-               [value]="currentPageNumber"
-               type="number"
-               (change)="enterPage(+pageInput.value)">
-      </div>
-      <app-search-bar *ngIf="search"
-                      [toolbarEvents]="toolbarEvents"></app-search-bar>
-    </div>
-    <div *ngIf="contentType === 'pdf' || contentType === 'image'" class="left-pane">
-      <button class="govuk-button" id="custom-toolbar-toggleDrawButton" data-module="govuk-button" (click)="draw()">
-        Draw
-      </button>
-    </div>
-    <div *ngIf="contentType === 'pdf' || contentType === 'image'" class="column middle-pane">
-      <button class="govuk-button" id="custom-toolbar-pageRotateCcw" data-module="govuk-button" (click)="rotate(270)">
-        rot -90
-      </button>
-      <button class="govuk-button" id="custom-toolbar-pageRotateCw" data-module="govuk-button" (click)="rotate(90)">
-        rot 90
-      </button>
-      <button class="govuk-button" id="custom-toolbar-zoomOut" data-module="govuk-button" (click)="stepZoom(-0.1)">
-        -
-      </button>
-      <select class="govuk-select" id="custom-toolbar-scaleSelect" data-module="govuk-select" (change)="zoom($event.target.value)">
-        <option #zoomSelect id="customScaleOption" title="" [value]="zoomValue">{{(zoomValue) * 100 | number: '1.0-0'}}%</option>
-        <option title="" value="0.1" data-l10n-id="page_scale_percent"
-                data-l10n-args='{ "scale": 10 }'>10%</option>
-        <option title="" value="0.25" data-l10n-id="page_scale_percent"
-                data-l10n-args='{ "scale": 25 }'>25%</option>
-        <option title="" value="0.5" data-l10n-id="page_scale_percent"
-                data-l10n-args='{ "scale": 50 }'>50%</option>
-        <option title="" value="0.75" data-l10n-id="page_scale_percent"
-                data-l10n-args='{ "scale": 75 }'>75%</option>
-        <option title="" value="1" data-l10n-id="page_scale_percent"
-                data-l10n-args='{ "scale": 100 }'>100%</option>
-        <option title="" value="1.25" data-l10n-id="page_scale_percent"
-                data-l10n-args='{ "scale": 125 }'>125%</option>
-        <option title="" value="1.5" data-l10n-id="page_scale_percent"
-                data-l10n-args='{ "scale": 150 }'>150%</option>
-        <option title="" value="2.5" data-l10n-id="page_scale_percent"
-                data-l10n-args='{ "scale": 250 }'>250%</option>
-        <option title="" value="3" data-l10n-id="page_scale_percent"
-                data-l10n-args='{ "scale": 300 }'>300%</option>
-        <option title="" value="5" data-l10n-id="page_scale_percent"
-                data-l10n-args='{ "scale": 500 }'>500%</option>
-      </select>
-      <button class="govuk-button" id="zoomIn" data-module="govuk-button" (click)="stepZoom(0.1)">
-        +
-      </button>
-    </div>
-    <div class="column right-pane">
-      <button *ngIf="contentType === 'pdf' || contentType === 'image'" class="govuk-button" id="download" data-module="govuk-button" (click)="print()">
-        Print
-      </button>
-      <button class="govuk-button" id="print" data-module="govuk-button" (click)="download()">
-        Download
-      </button>
-    </div>
-  </div>
-</div>

package/src/app/media-viewer-wrapper/custom-toolbar/custom-toolbar.component.ts

@@ -1,66 +0,0 @@
-import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
-
-@Component({
-    selector: 'app-custom-toolbar',
-    templateUrl: './custom-toolbar.component.html',
-    standalone: false
-})
-export class CustomToolbarComponent implements OnInit {
-
-  @Input() toolbarEvents;
-  @Input() contentType;
-  zoomValue: number;
-  search: boolean;
-  currentPageNumber = 1;
-
-  @ViewChild('zoomSelect', {static: false}) zoomSelect: ElementRef;
-
-  constructor() { }
-
-  ngOnInit() {
-    this.search = false;
-    this.toolbarEvents.getZoomValue().subscribe(zoom => this.zoomValue = zoom);
-    this.toolbarEvents.getCurrentPageNumber().subscribe(page => this.currentPageNumber = page);
-  }
-
-  nextPage(): void {
-    this.toolbarEvents.incrementPage(1);
-  }
-
-  prevPage(): void {
-    this.toolbarEvents.incrementPage(-1);
-  }
-
-  rotate(value: number) {
-    this.toolbarEvents.rotate(value);
-  }
-
-  stepZoom(value: number) {
-    this.toolbarEvents.stepZoom(value);
-    this.zoomSelect.nativeElement.selected = 'selected';
-  }
-
-  zoom(value: number) {
-    this.toolbarEvents.zoom(value);
-  }
-
-  print() {
-    this.toolbarEvents.print();
-  }
-
-  download() {
-    this.toolbarEvents.download();
-  }
-
-  enterPage(value: number) {
-    this.toolbarEvents.setPage(value);
-  }
-
-  highlight() {
-    this.toolbarEvents.toggleHighlightMode();
-  }
-
-  draw() {
-    this.toolbarEvents.toggleDrawMode();
-  }
-}

package/src/app/media-viewer-wrapper/custom-toolbar/custom-toolbar.module.ts

@@ -1,20 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { CustomToolbarComponent } from './custom-toolbar.component';
-import { SearchBarComponent } from './search-bar/search-bar.component';
-import { FormsModule } from '@angular/forms';
-
-@NgModule({
-  declarations: [
-    CustomToolbarComponent,
-    SearchBarComponent
-  ],
-  imports: [
-    CommonModule,
-    FormsModule
-  ],
-  exports: [
-    CustomToolbarComponent
-  ]
-})
-export class CustomToolbarModule { }

package/src/app/media-viewer-wrapper/custom-toolbar/search-bar/search-bar.component.css

@@ -1,12 +0,0 @@
-.container {
-  margin: 5px;
-  display: flex;
-}
-
-.govuk-checkboxes {
-  margin: 0;
-}
-
-.govuk-button, .govuk-form-group, .govuk-checkboxes__item {
-  margin: 0;
-}

package/src/app/media-viewer-wrapper/custom-toolbar/search-bar/search-bar.component.html

@@ -1,50 +0,0 @@
-<div class="container">
-  <div class="govuk-form-group" id="findbarInputContainer">
-    <input #searchInput
-           class="govuk-input page-input"
-           id="event-name"
-           name="event-name"
-           type="text"
-           [ngModel]="searchText"
-           (ngModelChange)="searchText = $event; search()">
-  </div>
-  <button class="govuk-button" id="findPrevious" (click)="searchPrev()"><-</button>
-  <button class="govuk-button" id="findNext" (click)="searchNext()">-></button>
-  <div class="container govuk-checkboxes">
-    <div class="govuk-checkboxes__item">
-      <input class="govuk-checkboxes__input"
-             id="findHighlightAll"
-             name="search"
-             type="checkbox"
-             (change)="highlightAll = !highlightAll; search()"
-             [checked]="highlightAll">
-      <label class="govuk-label govuk-checkboxes__label" for="findHighlightAll">
-        Hightlight All
-      </label>
-    </div>
-    <div class="govuk-checkboxes__item">
-      <input class="govuk-checkboxes__input"
-             id="findMatchCase"
-             name="search"
-             type="checkbox"
-             (change)="matchCase = !matchCase; search()"
-             [checked]="matchCase">
-      <label class="govuk-label govuk-checkboxes__label" for="findMatchCase">
-        Match Case
-      </label>
-    </div>
-    <div class="govuk-checkboxes__item">
-      <input class="govuk-checkboxes__input"
-             id="findEntireWord"
-             name="search"
-             type="checkbox"
-             (change)="wholeWord = !wholeWord; search()"
-             [checked]="wholeWord">
-      <label class="govuk-label govuk-checkboxes__label" for="findEntireWord">
-        Whole Words
-      </label>
-    </div>
-    <div>
-      <span *ngIf="resultsText" id="findResultsCount" class="toolbarLabel">{{resultsText}}</span>
-    </div>
-</div>

package/src/app/media-viewer-wrapper/custom-toolbar/search-bar/search-bar.component.ts

@@ -1,84 +0,0 @@
-import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { SearchResultsCount } from '../../../../../projects/media-viewer/src/lib/toolbar/toolbar-event.service';
-import { Subscription } from 'rxjs';
-
-@Component({
-    selector: 'app-search-bar',
-    templateUrl: './search-bar.component.html',
-    styleUrls: ['./search-bar.component.css'],
-    standalone: false
-})
-export class SearchBarComponent implements OnInit, OnDestroy {
-
-  @ViewChild('searchInput', {static: false}) searchElement: ElementRef;
-  @Input() toolbarEvents;
-
-  highlightAll = true;
-  matchCase = false;
-  wholeWord = false;
-  resultsText = '';
-  searchText = '';
-
-  private subscriptions: Subscription[] = [];
-
-  constructor() { }
-
-  public ngOnInit(): void {
-    this.subscriptions.push(
-      this.toolbarEvents.searchResultsCountSubject.subscribe(results => this.setSearchResultsCount(results))
-    );
-  }
-
-  ngOnDestroy(): void {
-    this.toolbarEvents.search({
-      searchTerm: '',
-      highlightAll: this.highlightAll,
-      matchCase: this.matchCase,
-      wholeWord: this.wholeWord,
-      previous: false,
-      reset: true
-    });
-    for (const subscription of this.subscriptions) {
-      subscription.unsubscribe();
-    }
-  }
-
-  public searchNext(): void {
-    this.toolbarEvents.search({
-      searchTerm: this.searchText,
-      highlightAll: this.highlightAll,
-      matchCase: this.matchCase,
-      wholeWord: this.wholeWord,
-      previous: false,
-      reset: false
-    });
-  }
-
-  public searchPrev(): void {
-    this.toolbarEvents.search({
-      searchTerm: this.searchText,
-      highlightAll: this.highlightAll,
-      matchCase: this.matchCase,
-      wholeWord: this.wholeWord,
-      previous: true,
-      reset: false
-    });
-  }
-
-  public search(): void {
-    this.toolbarEvents.search({
-      searchTerm: this.searchText,
-      highlightAll: this.highlightAll,
-      matchCase: this.matchCase,
-      wholeWord: this.wholeWord,
-      previous: false,
-      reset: true
-    });
-  }
-
-  private setSearchResultsCount(results: SearchResultsCount): void {
-    this.resultsText = results.total > 0
-      ? `${results.current} of ${results.total} matches`
-      : 'Phrase not found';
-  }
-}