@hmcts/document-viewer-webcomponent
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.5 • Public • Published

    @hmcts/document-viewer-webcomponent

    Coverage Status Build Status

    This is an angular library that provides components to view and annotate PDF documents, as well as view images.

    Building annotation library

    • npm run package
    • distributable will be created under dist/document-viewer-webcomponent

    Add as a dependency in your angular app

    • add @hmcts/document-viewer-webcomponent as a dependency in package.json

    • import DocumentViewerModule and declare it in your NgModule imports.

      For example:

      import { DocumentViewerModule } from 'document-viewer-webcomponent';
      
      @NgModule({
        imports: [
          ...,
          DocumentViewerModule,
        ]
      })
      
    • import assets to your angular.json

        {
            "glob": "**/*",
            "input": "node_modules/@hmcts/document-viewer-webcomponent/assets",
            "output": "/assets"
        }
      
    • and styles

      "styles": [
        "node_modules/@hmcts/document-viewer-webcomponent/assets/aui-styles.scss",
        ...
      ],
      
    • import JS dependencies as scripts within angular.json

      "scripts": [
          "node_modules/@hmcts/document-viewer-webcomponent/assets/js/pdf.combined.min.js",
          "node_modules/@hmcts/document-viewer-webcomponent/assets/js/pdf_viewer.min.js",
          "node_modules/@hmcts/document-viewer-webcomponent/assets/js/pdf-annotate.min.js"
          ...
      ]
      
    • component entry point:

      <app-document-viewer
          [baseUrl]="'http://localhost:3000/api'"
          [annotate]="true"
          [url]="'https://dm-store-aat.service.core-compute-aat.internal/documents/35f3714e-30e0-45d6-b4fb-08f51c271f8e'"
      ></app-document-viewer>
      

      for non document store files:

      <app-document-viewer
          [baseUrl]="'http://localhost:3000/api'"
          [annotate]="false"
          [url]="'http://localhost:3000/assets/non-dm.pdf'"
          [isDM]="false"
          [contentType]="'pdf'">
      </app-document-viewer>
      

      Note: The file needs to be retrievable.

    Running development application

    • pull and start the docker containers :
      az login
      az acr login --name hmcts --subscription 1c4f0704-a29e-403d-b719-b90c34ef14c9
      docker-compose -f docker-compose-dependencies.yml pull
      docker-compose -f docker-compose-dependencies.yml up
      
    • build and start node server
      npm run build:node
      npm run start:node;
      
    • build the angular component library :
      npm run package
      
    • start angular app
      npm run start:ng;
      
    • go to http://localhost:3000 and the viewer should load the document.

    Install

    npm i @hmcts/document-viewer-webcomponent

    DownloadsWeekly Downloads

    45

    Version

    1.1.5

    License

    SEE LICENSE IN LICENSE

    Unpacked Size

    6.44 MB

    Total Files

    425

    Last publish

    Collaborators

    • timja
    • andrewwa-kainos
    • bendiggle
    • ellie-harrison
    • adrianc
    • hemantt
    • adamsilver
    • trevorsaint
    • timja-hmcts
    • dharmendrak
    • robertparkinson
    • pragnesh
    • damdun
    • p.jar
    • sabah.irfan
    • jenkins-reform-hmcts