Federal High Court Affidavit Library

Angular Library & Web Components – Complete Integration Guide

1. Overview

The Federal High Court Affidavit Library is delivered in two complementary integration models:

1. Angular Library (highcourt-affidavit)
   Designed for internal Angular applications that require:

   • Tight framework integration
   • Service-based API access
   • Full TypeScript support

2. Web Components (highcourt-affidavit-elements)
   Framework-agnostic custom elements for:

   • Partner portals and MDAs
   • Angular, React, Vue, or plain HTML
   • CDN-based, copy‑paste integration

This document provides complete documentation for both the Angular library and all Web Components, including all callback events.

PART A — ANGULAR LIBRARY (highcourt-affidavit)

2. Installation

npm install highcourt-affidavit
# or
yarn add highcourt-affidavit

3. Module Setup

import { NgModule } from "@angular/core";
import { HighcourtAffidavitModule } from "highcourt-affidavit";
import { environment } from "../environments/environment";

@NgModule({
  imports: [
    HighcourtAffidavitModule.forRoot(
      environment.affidavit_api_secret_key,
      environment.mode //(in: 'development', 'production')
    ),
  ],
})
export class AppModule {}

Ensure affidavit_api_secret_key and affidavit_api_public_key are defined in your environment files.

4. Angular Components

4.1 <highcourt-affidavit> – Single Affidavit

<highcourt-affidavit [templateId]="template_id"
  (callBack)="handleAffidavitCallback($event)">
</highcourt-affidavit>

Events

• callBack – affidavit application completed
• paymentSuccess – payment completed (if applicable)
• overlayClose – overlay closed by user/system

4.2 <e-affidavit-bulk-create-applications> – Bulk Affidavits

<e-affidavit-bulk-create-applications
  [payload]="bulkPayload"
  [affidavitTemplateId]="templateId"
  [client_ref]="clientRef"
  (callBack)="handleBulkCallback($event)">
</e-affidavit-bulk-create-applications>

Events

• callBack – bulk workflow completed
• overlayClose – bulk workspace closed

4.3 <e-affidavit-applications-details-page> – Bulk Affidavits

<e-affidavit-applications-details-page
  [client_ref]="clientRef"
  (handlePayment)="handlePaymentSuccess($event)">
</e-affidavit-applications-details-page>

Events

• handlePayment – payment completed
• overlayClose – bulk workspace closed

5. Angular Services

HighcourtAffidavitLibraryService

this.affidavitService.create(data).subscribe(...)
this.affidavitService.createBulk(data).subscribe(...)
...

Used for headless / backend-driven affidavit creation.

6. Angular Callback Contract

interface AngularAffidavitCallback {
  status: "success" | "error";
  reference?: string;
  data: any;
}

PART B — WEB COMPONENTS (highcourt-affidavit-elements)

7. What Are the Web Components?

Web Components are native browser custom elements built with Angular Elements.
They encapsulate:

• UI & validation
• Workflow orchestration
• Payment initiation
• Secure API calls
• Event emission

They do not require Angular/React/Vuejs in the consuming app.

8. Available Web Components

| Component | Tag | Purpose | |--------|-----|--------| | Affidavit Application | <highcourt-affidavit> | Create & submit affidavits | | Payment | <pay-affidavit> | Pay for an existing affidavit | | Bulk Workspace | <bulk-create-applications> | Manage multiple affidavits | | Bulk Applications Details | <e-affidavit-applications-details-page> | Manage multiple affidavits Payment |

9. Distribution (CDN – Recommended)

<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>

Alternatively

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/affidavit-library/browser/loader.js" ></script>

10. <highcourt-affidavit> – Web Component

Attributes

| Attribute | Required | Description | |--------|----------|-------------| | token | ❌ | API key | | mode | ❌ | development or production | | template-id | ❌ | Affidavit template | | templateId | ❌ | Affidavit template | | client-ref | ❌ | Client reference | | clientRef | ❌ | Client reference | | payload | ❌ | Prefilled data |

Callbacks

| Event | Description | |-----|------------| | callBack | Application submitted | | on-payment-success / paymentSuccess | Payment completed | | overlay-close / overlayClose | Overlay closed |

11. <pay-affidavit> – Web Component

Attributes

| Attribute | Required | Description | |--------|----------|-------------| | token | ✅ | API key | | app-no | ✅ | Application number | | should-display-details | ❌ | Show payment breakdown |

Callbacks

| Event | Description | |-----|------------| | handlePayment | Payment processed (success/failure) | | overlayClose | Payment overlay closed |

payElement.addEventListener("handlePayment", (e) => {
  console.log("Payment status:", e.detail.status);
});

12. <bulk-create-applications> – Web Component

Attributes

| Attribute | Required | Description | |--------|----------|-------------| | token | ❌ | API key | | mode | ❌ | Environment | | affidavit-template-id | ✅ | Template ID | | client-ref | ❌ | Bulk session reference | | page | ❌ | new | review | details | summary |

Callbacks

| Event | Description | |-----|------------| | callBack | Bulk submission completed | | overlayClose | Workspace closed |

13. <e-affidavit-applications-details-page> – Web Component

Attributes

| Attribute | Required | Description | |--------|----------|-------------| | token | ❌ | API key | | mode | ❌ | Environment | | client_ref | ✅ | Bulk session reference |

Callbacks

| Event | Description | |-----|------------| | handlePayment | Bulk submission completed | | overlayClose | Workspace closed |

14. Unified Web Component Callback Contract

interface WebComponentCallback {
  component: "highcourt-affidavit" | "pay-affidavit" | "bulk-create-applications";
  action:
    | "application_submitted"
    | "payment_completed"
    | "bulk_completed"
    | "overlay_closed"
  status: "success" | "pending" | "failed" | "cancelled";
  reference?: string;
  data: any;
  timestamp: string;
}

15. Global Callback Listener

document.addEventListener("callBack", (event) => {
  console.log("Global callback:", event.detail);
});

16. Using Web Components in Angular Apps

import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

<div class="mb-4" *ngIf="showAffidavitOverlay">
    <h4>📝 Affidavit Application Component</h4>
    <highcourt-affidavit [appNo]="appNo" [templateId]="templateId"
      [payload]="payload" [appNo]="appNo"
      (callBack)="handleAffidavitCallback($event)" [clientRef]="clientRef"
      (overlayClose)="handleAffidavitOverlayClose($event)"
      (paymentSuccess)="handleAffidavitPaymentSuccess($event)">
    </highcourt-affidavit>
</div>

import { Component, OnInit } from '@angular/core';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
  standalone: false
})
export class AppComponent implements OnInit {
  // Configuration
  token = 'FHC-INTEG-pk_f0a01636119a45d218c2016758e368be';
  mode = 'test';
  templateId = 96;
  appNo = 'APP-1768501941-0004';
  clientRef = 'APP-SESSION-01';
  showAffidavitOverlay = true;
  
  // Payload data for pre-filling the affidavit form
  payload = {
    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',
    applicant_email: '[email protected]',
    applicant_phone: '07066666666',
    adult_minor: 'adult',
    affidavit_template_id: 96,
    state_id: 1,
    court_id: 1,
    formEntries: [
      {
        placeholder: "deponent_company_position",
        provided_value: "CEO"
      },
      {
        placeholder: "contractor_company_name",
        provided_value: "Centaur Info Systems",
      },
      {
        placeholder: "mda_authority_name",
        provided_value: "FGN",
      },
      {
        placeholder: "rc_number",
        provided_value: "343434",
      },
      {
        placeholder: "lot_number",
        provided_value: "343434",
      },
      {
        placeholder: "lot_title",
        provided_value: "Purchase of 50 CNG Buses",
      },
    ],
    clauseEntries: [],
  };

  constructor() { }

  ngOnInit(): void {
    this.ensureAffidavitWebComponentLoaded();
  }

  private ensureAffidavitWebComponentLoaded(): Promise<void> {
    try {
      // Already registered
      if (typeof window !== 'undefined' && window.customElements?.get('highcourt-affidavit')) {
        return Promise.resolve();
      }

      // Loader already injected
      const existing = document.getElementById('highcourt-affidavit-loader');
      if (existing) return Promise.resolve();

      return new Promise<void>((resolve, reject) => {
        const script = document.createElement('script');
        script.id = 'highcourt-affidavit-loader';
        script.src =
          'https://cdn.jsdelivr.net/npm/[email protected]/dist/affidavit-library/browser/loader.js';
        script.async = true;
        script.onload = () => resolve();
        script.onerror = () => reject(new Error('Failed to load highcourt-affidavit web component loader'));
        document.head.appendChild(script);
      });
    } catch {
      // If we can't access DOM (edge case), just no-op.
      return Promise.resolve();
    }
  }

  ngOnDestroy(): void {
    // Clean up any injected loader script so it can't leak global CSS/JS across routes.
    try {
      const loader = document.getElementById('highcourt-affidavit-loader');
      loader?.remove();
    } catch {
      // no-op
    }
  }

  // Highcourt Affidavit Component Event Handlers
  handleAffidavitCallback(evt: any) {
    const anyEvt = evt as any;
    const detail = anyEvt?.detail ?? null;

    console.log('[highcourt-affidavit] event received:', evt);
  }

  handleAffidavitPaymentSuccess(data: any) {
    console.log('APP Affidavit Payment Success:', data);

    // Handle payment success - e.g., update application status, show success message, etc.
  }

  handleAffidavitOverlayClose(data: boolean) {
    console.log('APP Affidavit Overlay Closed:', data);
    if (data) {
      this.showAffidavitOverlay = false;
    }
  }

}

17. Security & Compliance

• Never expose live API keys
• Always validate payments server-side
• Enforce HTTPS
• Rotate credentials periodically
• Do not trust client-only callbacks

18. Support

📧 [email protected]

19. License

MIT License
© 2026 ECMS