npm - highcourt-affidavit-elements - Versions diffs - 0.2.4 → 0.2.5 - Mend

highcourt-affidavit-elements 0.2.4 → 0.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1154) hide show

package/README.md CHANGED Viewed

@@ -52,7 +52,7 @@ Upload the `browser` directory to `https://cdn.your-domain.com/highcourt-affidav
 **Loader option:** host `loader.js` alongside the bundle and offer a single tag embed:
 ```html
-<script src="https://cdn.your-domain.com/highcourt-affidavit-elements/v0.2.3/loader.js" data-token="PARTNER_TOKEN" data-mode="live"></script>
+<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>
 ```
@@ -61,12 +61,97 @@ Upload the `browser` directory to `https://cdn.your-domain.com/highcourt-affidav
 After publishing (see “NPM Publishing” below), partners can reference the bundle from jsDelivr or UNPKG:
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highcourt-affidavit-elements@0.2.3/dist/affidavit-library/browser/styles.css" />
-<script src="https://cdn.jsdelivr.net/npm/highcourt-affidavit-elements@0.2.3/dist/affidavit-library/browser/polyfills.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/highcourt-affidavit-elements@0.2.3/dist/affidavit-library/browser/scripts.js" defer></script>
-<script src="https://cdn.jsdelivr.net/npm/highcourt-affidavit-elements@0.2.3/dist/affidavit-library/browser/main.js" type="module"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highcourt-affidavit-elements@0.2.4/dist/affidavit-library/browser/styles.css" />
+<script src="https://cdn.jsdelivr.net/npm/highcourt-affidavit-elements@0.2.4/dist/affidavit-library/browser/polyfills.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/highcourt-affidavit-elements@0.2.4/dist/affidavit-library/browser/scripts.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/highcourt-affidavit-elements@0.2.4/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)
+```bash
+npm install highcourt-affidavit-elements
+# or: yarn add / pnpm add
+```
+In your application entry point, register the custom elements with the supplied loader:
+```ts
+// 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:
+```html
+<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**
+```html
+<!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**
+```html
+<!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/highcourt-affidavit-elements@0.2.3/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:

package/dist/affidavit-library/browser/index.html CHANGED Viewed

@@ -12,6 +12,6 @@
 <body>
   <app-root></app-root>
-<script src="polyfills.js" type="module"></script><script src="scripts.js" defer></script><script src="main.js" type="module"></script></body>
+<script src="polyfills.js" type="module"></script><script src="main.js" type="module"></script></body>
 </html>

package/dist/affidavit-library/browser/loader.js CHANGED Viewed

@@ -1,14 +1,43 @@
 /**
- * Lightweight loader for the Highcourt Affidavit web component.
- * Usage example (inline element):
+ * Lightweight loader for the Highcourt Affidavit web components.
+ *
+ * Supported components:
+ * - highcourt-affidavit (default): Main affidavit application component
+ * - pay-affidavit: Payment component for affidavit applications
+ * - bulk-create-applications: Bulk application creation component
+ *
+ * Usage example (inline element - highcourt-affidavit):
  * <script src="https://cdn.your-domain.com/highcourt-affidavit-elements/v0.2.3/loader.js"
+ *         data-component="highcourt-affidavit"
  *         data-token="TOKEN"
  *         data-mode="live"
+ *         data-template-id="1"
+ *         data-app-id="APP123"
  *         data-target="#affidavit-root"></script>
  * <div id="affidavit-root"></div>
  *
+ * Usage example (pay-affidavit):
+ * <script src="https://cdn.your-domain.com/highcourt-affidavit-elements/v0.2.3/loader.js"
+ *         data-component="pay-affidavit"
+ *         data-token="TOKEN"
+ *         data-app-no="APP123"
+ *         data-target="#payment-root"></script>
+ * <div id="payment-root"></div>
+ *
+ * Usage example (bulk-create-applications):
+ * <script src="https://cdn.your-domain.com/highcourt-affidavit-elements/v0.2.3/loader.js"
+ *         data-component="bulk-create-applications"
+ *         data-token="TOKEN"
+ *         data-mode="live"
+ *         data-page="new"
+ *         data-client-ref="CLIENT123"
+ *         data-affidavit-template-id="1"
+ *         data-target="#bulk-root"></script>
+ * <div id="bulk-root"></div>
+ *
  * Usage example (overlay):
  * <script src="https://cdn.your-domain.com/highcourt-affidavit-elements/v0.2.3/loader.js"
+ *         data-component="highcourt-affidavit"
  *         data-token="TOKEN"
  *         data-mode="live"
  *         data-overlay="true"
@@ -23,13 +52,33 @@
     }
     var attrs = currentScript ? currentScript.dataset || {} : {};
-    var token = attrs.token || '';
-    var mode = attrs.mode || '';
-    var targetSelector = attrs.target || '';
-    var overlayEnabled = String(attrs.overlay || 'true').toLowerCase() === 'true';
-    var autoStart = String(attrs.autostart || '').toLowerCase() !== 'false';
-    var overlayId = attrs.overlayId || 'highcourt-affidavit-overlay';
-    var overlayCloseOnBackdrop = String(attrs.overlayCloseOnBackdrop || '').toLowerCase() !== 'false';
+    // Helper to get attribute (supports both dataset camelCase and direct kebab-case)
+    function getAttr(name, kebabName) {
+      if (attrs[name]) return attrs[name];
+      if (currentScript && currentScript.hasAttribute(kebabName)) {
+        return currentScript.getAttribute(kebabName);
+      }
+      return '';
+    }
+    var componentType = getAttr('component', 'data-component') || 'highcourt-affidavit';
+    var token = getAttr('token', 'data-token') || '';
+    var mode = getAttr('mode', 'data-mode') || '';
+    var targetSelector = getAttr('target', 'data-target') || '';
+    var overlayEnabled = String(getAttr('overlay', 'data-overlay') || 'true').toLowerCase() === 'true';
+    var autoStart = String(getAttr('autostart', 'data-autostart') || '').toLowerCase() !== 'false';
+    var overlayId = getAttr('overlayId', 'data-overlay-id') || 'highcourt-affidavit-overlay';
+    var overlayCloseOnBackdrop = String(getAttr('overlayCloseOnBackdrop', 'data-overlay-close-on-backdrop') || '').toLowerCase() !== 'false';
+    // Component-specific attributes
+    var templateId = getAttr('templateId', 'data-template-id') || '';
+    var appId = getAttr('appId', 'data-app-id') || '';
+    var appNo = getAttr('appNo', 'data-app-no') || '';
+    var shouldDisplayDetails = getAttr('shouldDisplayDetails', 'data-should-display-details') || '';
+    var page = getAttr('page', 'data-page') || '';
+    var clientRef = getAttr('clientRef', 'data-client-ref') || '';
+    var affidavitTemplateId = getAttr('affidavitTemplateId', 'data-affidavit-template-id') || '';
+    var paymentRedirectUrl = getAttr('paymentRedirectUrl', 'data-payment-redirect-url') || '';
     var src = currentScript && currentScript.src ? currentScript.src : '';
     var baseUrl = src ? src.substring(0, src.lastIndexOf('/') + 1) : './';
@@ -72,38 +121,143 @@
     ensureDefer(baseUrl + 'scripts.js');
     ensureModule(baseUrl + 'main.js');
-    var tag = 'highcourt-affidavit';
+    // Map component type to tag name
+    var componentTags = {
+      'highcourt-affidavit': 'highcourt-affidavit',
+      'pay-affidavit': 'pay-affidavit',
+      'bulk-create-applications': 'bulk-create-applications'
+    };
+    var tag = componentTags[componentType] || 'highcourt-affidavit';
     var originalBodyOverflow = '';
     function applyAttributes(el) {
       if (!el) return el;
+      // Common attributes for all components
       if (token) {
         el.setAttribute('token', token);
+        el.setAttribute('api-token', token);
       }
       if (mode) {
         el.setAttribute('mode', mode);
       }
-      if (typeof customElements !== 'undefined' && customElements.whenDefined) {
-        customElements.whenDefined(tag).then(() => {
-          if (token && 'token' in el) {
-            try { el.token = token; } catch (e) { /* ignore */ }
+      // Component-specific attributes
+      if (componentType === 'highcourt-affidavit') {
+        if (templateId) {
+          el.setAttribute('template-id', templateId);
+        }
+        if (appId) {
+          el.setAttribute('app-id', appId);
+        }
+      } else if (componentType === 'pay-affidavit') {
+        if (appNo) {
+          el.setAttribute('app-no', appNo);
+          // Also try setting as property immediately if element is already defined
+          try {
+            if ('appNo' in el) {
+              el.appNo = appNo;
+            }
+          } catch (e) { /* ignore */ }
+        }
+        if (shouldDisplayDetails) {
+          el.setAttribute('should-display-details', shouldDisplayDetails);
+          // Also try setting as property immediately if element is already defined
+          try {
+            if ('shouldDisplayDetails' in el) {
+              el.shouldDisplayDetails = shouldDisplayDetails === 'true' || shouldDisplayDetails === true;
+            }
+          } catch (e) { /* ignore */ }
+        }
+      } else if (componentType === 'bulk-create-applications') {
+        if (page) {
+          el.setAttribute('page', page);
+        }
+        if (clientRef) {
+          el.setAttribute('client-ref', clientRef);
+        }
+        if (affidavitTemplateId) {
+          el.setAttribute('affidavit-template-id', affidavitTemplateId);
+        }
+        if (paymentRedirectUrl) {
+          el.setAttribute('payment-redirect-url', paymentRedirectUrl);
+        }
+      }
+      // Apply properties when element is defined
+      function applyProperties() {
+        try {
+          if (token) {
+            if ('token' in el) {
+              el.token = token;
+            }
+            if ('apiTokenAttr' in el) {
+              el.apiTokenAttr = token;
+            }
           }
           if (mode && 'mode' in el) {
-            try { el.mode = mode; } catch (e) { /* ignore */ }
+            el.mode = mode;
           }
-        }).catch(function () { /* no-op */ });
-      } else {
-        if (token && 'token' in el) {
-          try { el.token = token; } catch (e) { /* ignore */ }
-        }
-        if (mode && 'mode' in el) {
-          try { el.mode = mode; } catch (e) { /* ignore */ }
+          if (componentType === 'highcourt-affidavit') {
+            if (templateId && 'templateId' in el) {
+              el.templateId = templateId;
+            }
+            if (appId && 'appId' in el) {
+              el.appId = appId;
+            }
+          } else if (componentType === 'pay-affidavit') {
+            if (appNo) {
+              if ('appNo' in el) {
+                el.appNo = appNo;
+              }
+            }
+            if (shouldDisplayDetails) {
+              var shouldDisplay = shouldDisplayDetails === 'true' || shouldDisplayDetails === true;
+              if ('shouldDisplayDetails' in el) {
+                el.shouldDisplayDetails = shouldDisplay;
+              }
+            }
+          } else if (componentType === 'bulk-create-applications') {
+            if (page && 'page' in el) {
+              el.page = page;
+            }
+            if (clientRef && 'client_ref' in el) {
+              el.client_ref = clientRef;
+            }
+            if (affidavitTemplateId && 'affidavitTemplateId' in el) {
+              el.affidavitTemplateId = parseInt(affidavitTemplateId, 10);
+            }
+            if (paymentRedirectUrl && 'payment_redirect_url' in el) {
+              el.payment_redirect_url = paymentRedirectUrl;
+            }
+          }
+        } catch (e) {
+          console.warn('Error applying properties to', tag, e);
         }
       }
+      if (typeof customElements !== 'undefined' && customElements.whenDefined) {
+        customElements.whenDefined(tag).then(() => {
+          applyProperties();
+          // Also try after a short delay to ensure Angular has initialized
+          setTimeout(applyProperties, 100);
+        }).catch(function () {
+          // If element is already defined, try applying properties immediately
+          if (customElements.get(tag)) {
+            applyProperties();
+            setTimeout(applyProperties, 100);
+          }
+        });
+      } else {
+        // Fallback for browsers without customElements.whenDefined
+        applyProperties();
+        setTimeout(applyProperties, 100);
+      }
       return el;
     }
     function ensureElement(host) {
+      if (!host) return null;
       var el = host.querySelector(tag);
       if (!el) {
         el = document.createElement(tag);
@@ -124,9 +278,10 @@
     }
     if (typeof window !== 'undefined') {
-      window.highcourtAffidavitConfig = Object.assign({}, window.highcourtAffidavitConfig, {
+      window.highcourtAffidavitConfig = Object.assign({}, window.highcourtAffidavitConfig || {}, {
         token: token,
-        mode: mode
+        mode: mode,
+        component: componentType
       });
     }
@@ -141,7 +296,9 @@
         '.' + overlayId + '-shell{position:relative;width:min(95vw,1100px);max-height:calc(100vh - 48px);background:#fff;border-radius:16px;' +
         'box-shadow:0 24px 48px rgba(15,23,42,.35);overflow:hidden;display:flex;flex-direction:column;margin:auto;}' +
         '.' + overlayId + '-shell>.' + overlayId + '-content{flex:1;overflow:auto;}' +
-        '.' + overlayId + '-shell ' + tag + '{flex:1;min-height:600px;}' +
+        '.' + overlayId + '-shell highcourt-affidavit,' +
+        '.' + overlayId + '-shell pay-affidavit,' +
+        '.' + overlayId + '-shell bulk-create-applications{flex:1;min-height:600px;}' +
         '.' + overlayId + '-close{position:absolute;top:12px;right:12px;width:36px;height:36px;border:none;border-radius:999px;' +
         'background:rgba(15,23,42,.85);color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;}' +
         '.' + overlayId + '-close:focus{outline:2px solid rgba(45,212,191,0.8);outline-offset:2px;}';
@@ -195,7 +352,28 @@
       originalBodyOverflow = document.body.style.overflow || '';
       document.body.style.overflow = 'hidden';
       var host = overlayEl.querySelector('.' + overlayId + '-shell > div');
-      ensureElement(host);
+      var el = ensureElement(host);
+      // Force re-apply properties when overlay is shown to ensure Angular picks them up
+      if (el) {
+        // Re-apply immediately
+        applyAttributes(el);
+        // Re-apply after delays to catch Angular initialization
+        setTimeout(function() {
+          if (el && el.parentNode) {
+            applyAttributes(el);
+          }
+        }, 50);
+        setTimeout(function() {
+          if (el && el.parentNode) {
+            applyAttributes(el);
+          }
+        }, 200);
+        setTimeout(function() {
+          if (el && el.parentNode) {
+            applyAttributes(el);
+          }
+        }, 500);
+      }
     }
     function hideOverlay() {