open-index/open-npm huggingface dataset:
npm package: @hmcts/annotation-ui
Description: Set environment variable to define if app connects to localhost or aat: ### export APP_ENV=local
Latest version: 1.0.0

# Annotation UI 
### Annotation code is in /projects/annotation-ui-lib
## Running development application
Set environment variable to define if app connects to localhost or aat:
### export APP_ENV=local

yarn install; export S2S_SECRET={{insert secret here}}; export IDAM_SECRET={{insert secret here}}; export APP_ENV=local; yarn watch-dev-node;
yarn install; export S2S_SECRET={{insert secret here}}; export IDAM_SECRET={{insert secret here}}; export APP_ENV=local; yarn start-dev-proxy;

Goto http://localhost:3000 and the viewer should load the document.

## To build annotation library
npm run package
Distributable will be copied to /dist/hmcts-annotation-ui-lib

## Instructions to add this library to your another angular app
Check demo app:
https://github.com/hmcts/rpa-em-show

Import HmctsEmViewerUiModule and declare it in your NgModule imports.

For example:
```
import { HmctsEmViewerUiModule } from 'hmcts-annotation-ui-lib';

@NgModule({
  imports: [
    ...,
    HmctsEmViewerUiModule,
  ]
})
```
Import the assets to your angular.json
```
  {
      "glob": "**/*",
      "input": "node_modules/hmcts-annotation-ui-lib/assets",
      "output": "/assets"
  }
```
Reference the followings scripts in your angular.json.
```
"scripts": [
    "node_modules/hmcts-annotation-ui-lib/assets/javascripts/pdf.js",
    "node_modules/hmcts-annotation-ui-lib/assets/javascripts/pdf_viewer.js",
    "node_modules/hmcts-annotation-ui-lib/assets/javascripts/pdf-annotate.js"
    ...
]
```

And styles
```
"styles": [
  "node_modules/hmcts-annotation-ui-lib/assets/annotation-ui-theme.scss",
  ...
],
```

Copy pdf.worker.js into your assets folder too.

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

## Development server

Run `ng serve` for a dev server. Navigate to `http://localhost:4200`. The app will automatically reload if you change any of the source files.

## Build

Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
npm package: @hmcts/ccpay-payments-list
Description: A web component for services to display payments returned from ccpay into a html table
Latest version: 1.1.0

# ccpay-payments-list

HTML5 Web component to display lists of payments

# How to install

# Node.js / Angular

1. RUN `npm i @hmcts/ccpay-payments-list` OR ADD this dependency "@hmcts/ccpay-payments-list": "^1.0.0" to package.json
2. modify your build process so it copies the following files to a location where they are be visible on the browswer:

- payments.js
- imports/webcomponents-bundle.js
- imports/json2html.js

Check the example on the demo folder

# Vanilla

Download and copy the following files into your project:

- payments.js
- imports/webcomponents-bundle.js
- imports/json2html.js

Check the example on the demo folder

# How to use

 - Import the 3 scripts from the locations they are visible. Example:
 
  `<script src="../imports/webcomponents-bundle.js">`
  `</script>`

  `<script src="../imports/json2html.js">`
  `</script>`

  `<script src="../payments.js" defer>`
  `</script>`   
  
  - Declare the template
  
  `<template id="payments-list"></template>`
  
  - Place the component where you want to be rendered
  
 `<payments-list data='jsonDataAsItComesFromTheService'></payments-list>`
  
In the data attribute pass the body response received from the payments by case endpoint