Federal High Court Affidavit Library for Angular

Introduction

This library simplifies the integration of the Federal High Court's Affidavit Library into your Angular applications. It provides a user-friendly Angular component (highcourt-affidavit) that can be easily customized and integrated to manage the creation of affidavits.

Features

• Effortless Integration: Seamlessly integrate affidavit creation into your Angular application with minimal setup.
• Customizable Component: Tailor the highcourt-affidavit component to match your specific requirements and workflows.
• Clear Documentation: Comprehensive documentation and examples to guide you through the library's usage.
• Error Handling: Built-in error handling mechanisms to address potential issues during affidavit creation.

Web Component Distribution (Angular Elements)

The project also ships a framework-agnostic web component build under dist/affidavit-library/browser. It contains:

• Bundled scripts: polyfills.js (module), scripts.js (deferred), main.js (module)
• Stylesheet: styles.css
• Static assets: assets/ and media/
• Optional single-tag loader: loader.js

Build the bundle

npm run build:elements
# outputs dist/affidavit-library/browser

Host on your CDN

Upload the browser directory to https://cdn.your-domain.com/highcourt-affidavit-elements/v0.2.3/ (versioned path recommended) and share this snippet:

<link rel="stylesheet" href="https://cdn.your-domain.com/highcourt-affidavit-elements/v0.2.3/styles.css" />
<script src="https://cdn.your-domain.com/highcourt-affidavit-elements/v0.2.3/polyfills.js" type="module"></script>
<script src="https://cdn.your-domain.com/highcourt-affidavit-elements/v0.2.3/scripts.js" defer></script>
<script src="https://cdn.your-domain.com/highcourt-affidavit-elements/v0.2.3/main.js" type="module"></script>

<highcourt-affidavit token="PARTNER_TOKEN" mode="live"></highcourt-affidavit>

<script>
  const el = document.querySelector("highcourt-affidavit");
  el.addEventListener("callBack", (event) => {
    console.log("Affidavit event payload:", event.detail);
  });
</script>

Loader option: host loader.js alongside the bundle and offer a single tag embed:

<script src="https://cdn.your-domain.com/highcourt-affidavit-elements/v0.2./loader.js" data-token="PARTNER_TOKEN" data-mode="live"></script>
<highcourt-affidavit></highcourt-affidavit>

Consume directly from npm-backed CDNs

After publishing (see “NPM Publishing” below), partners can reference the bundle from jsDelivr or UNPKG:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/affidavit-library/browser/styles.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/affidavit-library/browser/polyfills.js" type="module"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/affidavit-library/browser/scripts.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/affidavit-library/browser/main.js" type="module"></script>

Using the Web Component from npm

Once published to npm as highcourt-affidavit-elements, the build can be consumed in any project—Angular, React, Vue, or plain HTML—because it ships as native custom elements.

1. Install and register (Node-based projects)

npm install highcourt-affidavit-elements
# or: yarn add / pnpm add

In your application entry point, register the custom elements with the supplied loader:

// main.ts / index.ts / bootstrap.js
import { defineCustomElements } from "highcourt-affidavit-elements/loader";

defineCustomElements(window);

After defineCustomElements(window) runs, you can drop the elements anywhere in your templates:

<highcourt-affidavit-app token="FHC_sk_xxxxxx" mode="test" app-id="AFF-12345" template-id="TEMPLATE-01"></highcourt-affidavit-app>

Framework notes:

• Angular – add CUSTOM_ELEMENTS_SCHEMA to the consuming module to silence template warnings.
• React – use the tag directly (<highcourt-affidavit-app ... />). Augment JSX.IntrinsicElements if you want TypeScript hints.
• Vue / Svelte / others – no special treatment; just ensure the loader runs before mounting.

2. Use directly in a plain HTML project

You do not need a build system. Either install locally (and serve from node_modules) or reference a CDN.

Local install

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Affidavit Demo</title>
    <script type="module">
      import { defineCustomElements } from "/node_modules/highcourt-affidavit-elements/dist/affidavit-library/browser/loader.js";
      defineCustomElements(window);
    </script>
  </head>
  <body>
    <highcourt-affidavit-app token="FHC_sk_xxxxxx" mode="test" app-id="AFF-12345" template-id="TEMPLATE-01"></highcourt-affidavit-app>
  </body>
</html>

Serve the file via any static server (for example npx http-server .) so the browser can reach /node_modules/....

CDN snippet

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Affidavit CDN Demo</title>
    <script type="module">
      import { defineCustomElements } from "https://cdn.jsdelivr.net/npm/[email protected]/dist/affidavit-library/browser/loader.js";
      defineCustomElements(window);
    </script>
  </head>
  <body>
    <highcourt-affidavit-app token="FHC_sk_xxxxxx" mode="test" app-id="AFF-12345" template-id="TEMPLATE-01"></highcourt-affidavit-app>
  </body>
</html>

Update the version number in the URL to pin a specific release. Because the loader uses ES modules, the file still needs to be served over HTTP/HTTPS.

3. Attributes and events

• Attributes / properties – pass whatever configuration the component expects (e.g. token, mode, app-id, template-id, etc.).
• Events – listen for custom events on the element: element.addEventListener('callBack', (event) => { /* handle */ });.

Document required fields for your integrators in this README and keep the package version current so they can reference it from npm/CDNs confidently.

NPM Publishing

1. Ensure the bundle is up to date:

   npm install
   npm run build:elements

2. (Optional) inspect the package contents:

   npm pack
   tar -tf highcourt-affidavit-elements-0.2.3.tgz

3. Publish a new version:

   npm login
   npm version patch   # or minor / major
   npm publish --access public

4. Tag the release in git:

   git tag v0.2.3
   git push origin v0.2.3

Keep version numbers in URLs/snippets to avoid breaking integrators. Provide updated tokens/modes per partner, and remind them to serve the assets over HTTPS (not file://).

Publish the Angular library separately

To ship the original Angular module (HighcourtAffidavitModule) as its own package:

ng build highcourt-affidavit
cd dist/highcourt-affidavit
npm publish --access public

This uses the projects/highcourt-affidavit/package.json name (highcourt-affidavit), which stays independent from the web component package (highcourt-affidavit-elements).

Installation

1. Install using npm:

    npm install highcourt-affidavit

2. Import the module

In your Angular app, import the HighcourtAffidavitModule in your app module or any other relevant module where you want to use the affidavit functionality. Pass your API keys from the environment configuration:

import { NgModule } from '@angular/core';

import { HighcourtAffidavitModule } from "highcourt-affidavit";
...

@NgModule({
  imports: [
    HighcourtAffidavitModule.forRoot(environment.affidavit_api_secret_key, environment.mode), //both token and mode arguments are optional
  ],
  // ...
})
export class AppModule {}
// make sure to set the  affidavit_api_secret_key and also affidavit_api_public_key in your environment files

3. Two methods of Integrations

You can integrate the affidavit functionality either through the component-based approach or the service-based approach.

Option 1. Component-based Integration

Integrate the highcourt-affidavit component into your HTML template, optionally configuring it with token and mode properties. Capture its output using the event callback for further processing.

<highcourt-affidavit (callBack)="getApp($event)" [token]="'FHC_sk_xxxxxxxx-xxxxxx'" [mode]="'production'"> </highcourt-affidavit>

  getApp(data: any) {
    console.log('Application', data);
  }

Option 2. Service-based Integration

If you prefer a programmatic approach, use the HighcourtAffidavitLibraryService to create affidavits via a service call:

import { Component } from '@angular/core';
import { HighcourtAffidavitLibraryService } from 'highcourt-affidavit';
...

@Component({
  selector: 'app-create-affidavit',
  templateUrl: './create-affidavit.component.html',
})
export class CreateAffidavitComponent {
  constructor(private affidavitService: HighcourtAffidavitLibraryService) {}

  createAffidavit() {
    const affidavitData = {
      affidavit_type_name: 'Affidavit of Ownership',
      deponent_name: 'Ahmad Ibrahim',
      deponent_nin: 12345678912,
      town_native: 'Gusau',
      town_resident: 'Gusau',
      occupation: 'Software Developer',
      gender: 'Male',
      religion: 'Islam',
      signature_file: 'signature.png', //should be provided in binary
      passport_photo_file: 'passport.jpg', //should be provided in binary
      identity_photo_file: 'id-card.jpeg', //should be provided in binary
      applicant_email: '[email protected]',
      applicant_phone: '07066666666',
      adult_minor: 'adult',
      affidavit_template_id: 1,
      lga_id: 1,
      court_id: 1,
      formEntries: [
        { placeholder: 'fullName', label: 'Full Name', provided_value: 'Ahmad Ibrahim' },
      ],
      clauseEntries: [{ entry: 'Affidavit Clause' }],
    };

    this.affidavitService.create(affidavitData).subscribe({
      next: (response) => console.log('Affidavit Created:', response),
      error: (error) => console.error('Affidavit Creation Failed:', error),
    });
  }
}


// make sure to set the  affidavit_api_secret_key and also affidavit_api_public_key in your environment files

4. Add styles

To ensure your application uses the correct styles for PrimeNG components and the affidavit library, import the following styles in your global styles.scss file:

@import "~primeng/resources/primeng.min.css";
@import "~primeflex/primeflex.scss";
@import "~primeicons/primeicons.css";
@import "~highcourt-affidavit/src/lib/styles.scss";
@import url("https://fonts.googleapis.com/css?family=Comfortaa");

5. Environment Configuration

Ensure you have set your API keys in the environment files. These keys are required for the affidavit service to function correctly:

export const environment = {
  production: false,
  affidavit_api_secret_key: "your_secret_key",
  affidavit_api_public_key: "your_public_key",
  mode: "test", // it can either be ('production' | 'test')
};