highcourt-affidavit-elements 0.2.15 → 0.2.17

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 (3) hide show
  1. package/dist/affidavit-library/browser/loader.js +413 -245
  2. package/dist/affidavit-library/browser/main.js +7 -90
  3. package/package.json +1 -1
package/dist/affidavit-library/browser/loader.js CHANGED
@@ -6,6 +6,17 @@
6
6
  * - pay-affidavit: Payment component for affidavit applications
7
7
  * - bulk-create-applications: Bulk application creation component
8
8
  *
9
+ * IMPORTANT EVENT HANDLING:
10
+ * Angular Elements converts @Output() names as follows:
11
+ * - callBack → emits both 'callBack' AND 'call-back' events (for compatibility)
12
+ * - paymentSuccess → emits both 'paymentSuccess' AND 'payment-success' events
13
+ * - overlayClose → emits both 'overlayClose' AND 'overlay-close' events
14
+ *
15
+ * In your event listeners, you can use either camelCase or kebab-case:
16
+ * element.addEventListener('callBack', handler) OR element.addEventListener('call-back', handler)
17
+ * element.addEventListener('paymentSuccess', handler) OR element.addEventListener('payment-success', handler)
18
+ * element.addEventListener('overlayClose', handler) OR element.addEventListener('overlay-close', handler)
19
+ *
9
20
  * Usage example (inline element - highcourt-affidavit):
10
21
  * <script src="https://cdn.your-domain.com/highcourt-affidavit-elements/v0.2.3/loader.js"
11
22
  * data-component="highcourt-affidavit"
@@ -17,14 +28,6 @@
17
28
  * data-target="#affidavit-root"></script>
18
29
  * <div id="affidavit-root"></div>
19
30
  *
20
- * Event listeners can be set up directly on the element:
21
- * const element = document.querySelector('highcourt-affidavit');
22
- * element.addEventListener('call-back', (event) => { ... }); // or 'callBack' for compatibility
23
- * element.addEventListener('on-payment-success', (event) => { ... }); // Angular Elements converts camelCase to kebab-case
24
- * element.addEventListener('overlay-close', (event) => { ... }); // Angular Elements converts camelCase to kebab-case
25
- * // Note: Angular Elements converts camelCase @Output() names to kebab-case for custom DOM events
26
- * // You can listen to both kebab-case (recommended) and camelCase versions for compatibility
27
- *
28
31
  * Usage example (pay-affidavit):
29
32
  * <script src="https://cdn.your-domain.com/highcourt-affidavit-elements/v0.2.3/loader.js"
30
33
  * data-component="pay-affidavit"
@@ -53,7 +56,10 @@
53
56
  * data-autostart="true"></script>
54
57
  */
55
58
  (function loadAffidavitElement() {
59
+ 'use strict';
60
+
56
61
  try {
62
+ // Get the current script element
57
63
  var currentScript = document.currentScript;
58
64
  if (!currentScript) {
59
65
  var scripts = document.getElementsByTagName('script');
@@ -61,7 +67,8 @@
61
67
  }
62
68
 
63
69
  var attrs = currentScript ? currentScript.dataset || {} : {};
64
- // Helper to get attribute (supports both dataset camelCase and direct kebab-case)
70
+
71
+ // Helper function to get attribute value
65
72
  function getAttr(name, kebabName) {
66
73
  if (attrs[name]) return attrs[name];
67
74
  if (currentScript && currentScript.hasAttribute(kebabName)) {
@@ -70,32 +77,44 @@
70
77
  return '';
71
78
  }
72
79
 
73
- var componentType = getAttr('component', 'data-component') || 'highcourt-affidavit';
74
- var token = getAttr('token', 'data-token') || '';
75
- var mode = getAttr('mode', 'data-mode') || '';
76
- var targetSelector = getAttr('target', 'data-target') || '';
77
- var overlayEnabled = String(getAttr('overlay', 'data-overlay') || 'true').toLowerCase() === 'true';
78
- var autoStart = String(getAttr('autostart', 'data-autostart') || '').toLowerCase() !== 'false';
79
- var overlayId = getAttr('overlayId', 'data-overlay-id') || 'highcourt-affidavit-overlay';
80
- var overlayCloseOnBackdrop = String(getAttr('overlayCloseOnBackdrop', 'data-overlay-close-on-backdrop') || '').toLowerCase() !== 'false';
81
-
82
- // Component-specific attributes
83
- var templateId = getAttr('templateId', 'data-template-id') || '';
84
- var appId = getAttr('appId', 'data-app-id') || '';
85
- var appNo = getAttr('appNo', 'data-app-no') || '';
86
- var shouldDisplayDetails = getAttr('shouldDisplayDetails', 'data-should-display-details') || '';
87
- var page = getAttr('page', 'data-page') || '';
88
- var clientRef = getAttr('clientRef', 'data-client-ref') || '';
89
- var affidavitTemplateId = getAttr('affidavitTemplateId', 'data-affidavit-template-id') || '';
90
- var paymentRedirectUrl = getAttr('paymentRedirectUrl', 'data-payment-redirect-url') || '';
91
- var payload = getAttr('payload', 'data-payload') || '';
80
+ // Configuration from data attributes
81
+ var config = {
82
+ componentType: getAttr('component', 'data-component') || 'highcourt-affidavit',
83
+ token: getAttr('token', 'data-token') || '',
84
+ mode: getAttr('mode', 'data-mode') || '',
85
+ targetSelector: getAttr('target', 'data-target') || '',
86
+ overlayEnabled: String(getAttr('overlay', 'data-overlay') || 'true').toLowerCase() === 'true',
87
+ autoStart: String(getAttr('autostart', 'data-autostart') || '').toLowerCase() !== 'false',
88
+ overlayId: getAttr('overlayId', 'data-overlay-id') || 'highcourt-affidavit-overlay',
89
+ overlayCloseOnBackdrop: String(getAttr('overlayCloseOnBackdrop', 'data-overlay-close-on-backdrop') || '').toLowerCase() !== 'false',
90
+
91
+ // Component-specific attributes
92
+ templateId: getAttr('templateId', 'data-template-id') || '',
93
+ appId: getAttr('appId', 'data-app-id') || '',
94
+ appNo: getAttr('appNo', 'data-app-no') || '',
95
+ shouldDisplayDetails: getAttr('shouldDisplayDetails', 'data-should-display-details') || '',
96
+ page: getAttr('page', 'data-page') || '',
97
+ clientRef: getAttr('clientRef', 'data-client-ref') || '',
98
+ affidavitTemplateId: getAttr('affidavitTemplateId', 'data-affidavit-template-id') || '',
99
+ paymentRedirectUrl: getAttr('paymentRedirectUrl', 'data-payment-redirect-url') || '',
100
+ payload: getAttr('payload', 'data-payload') || ''
101
+ };
92
102
 
93
103
  var src = currentScript && currentScript.src ? currentScript.src : '';
94
104
  var baseUrl = src ? src.substring(0, src.lastIndexOf('/') + 1) : './';
95
105
 
106
+ // Component tag mapping
107
+ var componentTags = {
108
+ 'highcourt-affidavit': 'highcourt-affidavit',
109
+ 'pay-affidavit': 'pay-affidavit',
110
+ 'bulk-create-applications': 'bulk-create-applications'
111
+ };
112
+ var tag = componentTags[config.componentType] || 'highcourt-affidavit';
113
+
114
+ // Resource loader functions
96
115
  function ensureStyle(href) {
97
- var links = document.querySelectorAll('link[rel=\"stylesheet\"]');
98
- for (var i = 0; i < links.length; i += 1) {
116
+ var links = document.querySelectorAll('link[rel="stylesheet"]');
117
+ for (var i = 0; i < links.length; i++) {
99
118
  if (links[i].href && links[i].href.indexOf(href) !== -1) return;
100
119
  }
101
120
  var linkEl = document.createElement('link');
@@ -105,8 +124,8 @@
105
124
  }
106
125
 
107
126
  function ensureModule(srcUrl) {
108
- var scripts = document.querySelectorAll('script[type=\"module\"]');
109
- for (var i = 0; i < scripts.length; i += 1) {
127
+ var scripts = document.querySelectorAll('script[type="module"]');
128
+ for (var i = 0; i < scripts.length; i++) {
110
129
  if (scripts[i].src && scripts[i].src.indexOf(srcUrl) !== -1) return;
111
130
  }
112
131
  var scriptEl = document.createElement('script');
@@ -117,7 +136,7 @@
117
136
 
118
137
  function ensureDefer(srcUrl) {
119
138
  var scripts = document.querySelectorAll('script');
120
- for (var i = 0; i < scripts.length; i += 1) {
139
+ for (var i = 0; i < scripts.length; i++) {
121
140
  if (scripts[i].src && scripts[i].src.indexOf(srcUrl) !== -1) return;
122
141
  }
123
142
  var scriptEl = document.createElement('script');
@@ -126,256 +145,331 @@
126
145
  document.head.appendChild(scriptEl);
127
146
  }
128
147
 
148
+ // Load required resources
129
149
  ensureStyle(baseUrl + 'styles.css');
130
150
  ensureModule(baseUrl + 'polyfills.js');
131
151
  ensureDefer(baseUrl + 'scripts.js');
132
152
  ensureModule(baseUrl + 'main.js');
133
153
 
134
- // Map component type to tag name
135
- var componentTags = {
136
- 'highcourt-affidavit': 'highcourt-affidavit',
137
- 'pay-affidavit': 'pay-affidavit',
138
- 'bulk-create-applications': 'bulk-create-applications'
139
- };
140
- var tag = componentTags[componentType] || 'highcourt-affidavit';
154
+ // State management
141
155
  var originalBodyOverflow = '';
142
156
 
143
- function applyAttributes(el) {
157
+ /**
158
+ * Apply attributes and properties to the web component element
159
+ */
160
+ function applyAttributesAndProperties(el) {
144
161
  if (!el) return el;
145
162
 
146
- // Common attributes for all components
147
- if (token) {
148
- el.setAttribute('token', token);
149
- el.setAttribute('api-token', token);
163
+ // Apply attributes
164
+ if (config.token) {
165
+ el.setAttribute('token', config.token);
166
+ el.setAttribute('api-token', config.token);
150
167
  }
151
- if (mode) {
152
- el.setAttribute('mode', mode);
168
+ if (config.mode) {
169
+ el.setAttribute('mode', config.mode);
153
170
  }
154
171
 
155
- // Set overlay attribute based on loader's overlay setting
156
- // If loader overlay is enabled, disable component's internal overlay to avoid conflicts
157
- // If loader overlay is disabled, let component handle its own overlay
158
- if (overlayEnabled) {
159
- el.setAttribute('overlay', 'false');
160
- } else {
161
- el.setAttribute('overlay', 'true');
162
- }
172
+ // Handle overlay setting
173
+ el.setAttribute('overlay', config.overlayEnabled ? 'false' : 'true');
163
174
 
164
- // Component-specific attributes
165
- if (componentType === 'highcourt-affidavit') {
166
- if (templateId) {
167
- el.setAttribute('template-id', templateId);
168
- }
169
- if (appId) {
170
- el.setAttribute('app-id', appId);
171
- }
172
- if (payload) {
173
- // Try to parse as JSON if it looks like JSON, otherwise use as string
174
- try {
175
- var parsedPayload = JSON.parse(payload);
176
- el.setAttribute('payload', JSON.stringify(parsedPayload));
177
- } catch (e) {
178
- el.setAttribute('payload', payload);
175
+ // Apply component-specific attributes
176
+ applyComponentSpecificAttributes(el);
177
+
178
+ // Apply properties when element is defined
179
+ applyProperties(el);
180
+
181
+ return el;
182
+ }
183
+
184
+ /**
185
+ * Apply component-specific attributes
186
+ */
187
+ function applyComponentSpecificAttributes(el) {
188
+ switch (config.componentType) {
189
+ case 'highcourt-affidavit':
190
+ if (config.templateId) {
191
+ el.setAttribute('template-id', config.templateId);
179
192
  }
180
- }
181
- } else if (componentType === 'pay-affidavit') {
182
- if (appNo) {
183
- el.setAttribute('app-no', appNo);
184
- // Also try setting as property immediately if element is already defined
185
- try {
186
- if ('appNo' in el) {
187
- el.appNo = appNo;
188
- }
189
- } catch (e) { /* ignore */ }
190
- }
191
- if (shouldDisplayDetails) {
192
- el.setAttribute('should-display-details', shouldDisplayDetails);
193
- // Also try setting as property immediately if element is already defined
194
- try {
195
- if ('shouldDisplayDetails' in el) {
196
- el.shouldDisplayDetails = shouldDisplayDetails === 'true' || shouldDisplayDetails === true;
193
+ if (config.appId) {
194
+ el.setAttribute('app-id', config.appId);
195
+ }
196
+ if (config.payload) {
197
+ try {
198
+ var parsedPayload = JSON.parse(config.payload);
199
+ el.setAttribute('payload', JSON.stringify(parsedPayload));
200
+ } catch (e) {
201
+ el.setAttribute('payload', config.payload);
197
202
  }
198
- } catch (e) { /* ignore */ }
199
- }
200
- } else if (componentType === 'bulk-create-applications') {
201
- if (page) {
202
- el.setAttribute('page', page);
203
- }
204
- if (clientRef) {
205
- el.setAttribute('client-ref', clientRef);
206
- }
207
- if (affidavitTemplateId) {
208
- el.setAttribute('affidavit-template-id', affidavitTemplateId);
209
- }
210
- if (paymentRedirectUrl) {
211
- el.setAttribute('payment-redirect-url', paymentRedirectUrl);
212
- }
203
+ }
204
+ break;
205
+
206
+ case 'pay-affidavit':
207
+ if (config.appNo) {
208
+ el.setAttribute('app-no', config.appNo);
209
+ }
210
+ if (config.shouldDisplayDetails) {
211
+ el.setAttribute('should-display-details', config.shouldDisplayDetails);
212
+ }
213
+ break;
214
+
215
+ case 'bulk-create-applications':
216
+ if (config.page) {
217
+ el.setAttribute('page', config.page);
218
+ }
219
+ if (config.clientRef) {
220
+ el.setAttribute('client-ref', config.clientRef);
221
+ }
222
+ if (config.affidavitTemplateId) {
223
+ el.setAttribute('affidavit-template-id', config.affidavitTemplateId);
224
+ }
225
+ if (config.paymentRedirectUrl) {
226
+ el.setAttribute('payment-redirect-url', config.paymentRedirectUrl);
227
+ }
228
+ break;
213
229
  }
230
+ }
214
231
 
215
- // Apply properties when element is defined
216
- function applyProperties() {
232
+ /**
233
+ * Apply properties to the web component
234
+ */
235
+ function applyProperties(el) {
236
+ function applyProps() {
217
237
  try {
218
- if (token) {
219
- if ('token' in el) {
220
- el.token = token;
221
- }
222
- if ('apiTokenAttr' in el) {
223
- el.apiTokenAttr = token;
224
- }
238
+ // Common properties
239
+ if (config.token) {
240
+ if ('token' in el) el.token = config.token;
241
+ if ('apiTokenAttr' in el) el.apiTokenAttr = config.token;
225
242
  }
226
- if (mode && 'mode' in el) {
227
- el.mode = mode;
243
+ if (config.mode && 'mode' in el) {
244
+ el.mode = config.mode;
228
245
  }
229
- // Set overlay property
230
246
  if ('overlay' in el) {
231
- el.overlay = overlayEnabled ? false : true;
247
+ el.overlay = config.overlayEnabled ? false : true;
232
248
  }
233
249
 
234
- if (componentType === 'highcourt-affidavit') {
235
- if (templateId && 'templateId' in el) {
236
- el.templateId = templateId;
237
- }
238
- if (appId && 'appId' in el) {
239
- el.appId = appId;
240
- }
241
- if (payload && 'payload' in el) {
242
- try {
243
- var parsedPayload = JSON.parse(payload);
244
- el.payload = parsedPayload;
245
- } catch (e) {
246
- el.payload = payload;
247
- }
248
- }
249
- } else if (componentType === 'pay-affidavit') {
250
- if (appNo) {
251
- if ('appNo' in el) {
252
- el.appNo = appNo;
253
- }
254
- }
255
- if (shouldDisplayDetails) {
256
- var shouldDisplay = shouldDisplayDetails === 'true' || shouldDisplayDetails === true;
257
- if ('shouldDisplayDetails' in el) {
258
- el.shouldDisplayDetails = shouldDisplay;
259
- }
260
- }
261
- } else if (componentType === 'bulk-create-applications') {
262
- if (page && 'page' in el) {
263
- el.page = page;
264
- }
265
- if (clientRef && 'client_ref' in el) {
266
- el.client_ref = clientRef;
267
- }
268
- if (affidavitTemplateId && 'affidavitTemplateId' in el) {
269
- el.affidavitTemplateId = parseInt(affidavitTemplateId, 10);
270
- }
271
- if (paymentRedirectUrl && 'payment_redirect_url' in el) {
272
- el.payment_redirect_url = paymentRedirectUrl;
273
- }
274
- }
250
+ // Component-specific properties
251
+ applyComponentSpecificProperties(el);
275
252
  } catch (e) {
276
253
  console.warn('Error applying properties to', tag, e);
277
254
  }
278
255
  }
279
256
 
257
+ // Wait for element to be defined
280
258
  if (typeof customElements !== 'undefined' && customElements.whenDefined) {
281
- customElements.whenDefined(tag).then(() => {
282
- applyProperties();
283
- // Also try after a short delay to ensure Angular has initialized
284
- setTimeout(applyProperties, 100);
285
- }).catch(function () {
286
- // If element is already defined, try applying properties immediately
287
- if (customElements.get(tag)) {
288
- applyProperties();
289
- setTimeout(applyProperties, 100);
290
- }
291
- });
259
+ customElements.whenDefined(tag)
260
+ .then(applyProps)
261
+ .catch(function() {
262
+ if (customElements.get(tag)) {
263
+ applyProps();
264
+ }
265
+ });
292
266
  } else {
293
- // Fallback for browsers without customElements.whenDefined
294
- applyProperties();
295
- setTimeout(applyProperties, 100);
267
+ applyProps();
296
268
  }
297
- return el;
269
+
270
+ // Retry after delays to ensure Angular initialization
271
+ setTimeout(applyProps, 100);
272
+ setTimeout(applyProps, 300);
298
273
  }
299
274
 
300
- // Note: Angular Elements automatically converts @Output() events to custom DOM events
301
- // Users can listen directly: element.addEventListener('callBack', handler)
302
- // No need to set up listeners here - Angular handles it automatically
275
+ /**
276
+ * Apply component-specific properties
277
+ */
278
+ function applyComponentSpecificProperties(el) {
279
+ switch (config.componentType) {
280
+ case 'highcourt-affidavit':
281
+ if (config.templateId && 'templateId' in el) {
282
+ el.templateId = config.templateId;
283
+ }
284
+ if (config.appId && 'appId' in el) {
285
+ el.appId = config.appId;
286
+ }
287
+ if (config.payload && 'payload' in el) {
288
+ try {
289
+ el.payload = JSON.parse(config.payload);
290
+ } catch (e) {
291
+ el.payload = config.payload;
292
+ }
293
+ }
294
+ break;
303
295
 
296
+ case 'pay-affidavit':
297
+ if (config.appNo && 'appNo' in el) {
298
+ el.appNo = config.appNo;
299
+ }
300
+ if (config.shouldDisplayDetails && 'shouldDisplayDetails' in el) {
301
+ el.shouldDisplayDetails = config.shouldDisplayDetails === 'true' || config.shouldDisplayDetails === true;
302
+ }
303
+ break;
304
+
305
+ case 'bulk-create-applications':
306
+ if (config.page && 'page' in el) {
307
+ el.page = config.page;
308
+ }
309
+ if (config.clientRef && 'client_ref' in el) {
310
+ el.client_ref = config.clientRef;
311
+ }
312
+ if (config.affidavitTemplateId && 'affidavitTemplateId' in el) {
313
+ el.affidavitTemplateId = parseInt(config.affidavitTemplateId, 10);
314
+ }
315
+ if (config.paymentRedirectUrl && 'payment_redirect_url' in el) {
316
+ el.payment_redirect_url = config.paymentRedirectUrl;
317
+ }
318
+ break;
319
+ }
320
+ }
321
+
322
+ /**
323
+ * Create or get the web component element
324
+ */
304
325
  function ensureElement(host) {
305
326
  if (!host) return null;
327
+
306
328
  var el = host.querySelector(tag);
307
329
  if (!el) {
308
330
  el = document.createElement(tag);
309
331
  host.appendChild(el);
310
332
  }
311
- return applyAttributes(el);
333
+
334
+ return applyAttributesAndProperties(el);
312
335
  }
313
336
 
337
+ /**
338
+ * Inject inline element (non-overlay mode)
339
+ */
314
340
  function injectInlineElement() {
315
341
  var host = document.body;
316
- if (targetSelector) {
317
- var target = document.querySelector(targetSelector);
342
+ if (config.targetSelector) {
343
+ var target = document.querySelector(config.targetSelector);
318
344
  if (target) {
319
345
  host = target;
320
346
  }
321
347
  }
322
- ensureElement(host);
348
+
349
+ var element = ensureElement(host);
350
+
351
+ // Setup event debugging if needed
352
+ if (element && window.location.hostname === 'localhost') {
353
+ setupEventDebugging(element);
354
+ }
355
+
356
+ return element;
323
357
  }
324
358
 
325
- if (typeof window !== 'undefined') {
326
- window.highcourtAffidavitConfig = Object.assign({}, window.highcourtAffidavitConfig || {}, {
327
- token: token,
328
- mode: mode,
329
- component: componentType
359
+ /**
360
+ * Setup event debugging (development only)
361
+ */
362
+ function setupEventDebugging(element) {
363
+ var events = ['callBack', 'call-back', 'paymentSuccess', 'payment-success', 'overlayClose', 'overlay-close'];
364
+
365
+ events.forEach(function(eventName) {
366
+ element.addEventListener(eventName, function(event) {
367
+ console.log('🔔 Event caught:', eventName, event.detail || event);
368
+ });
330
369
  });
331
370
  }
332
371
 
372
+ /**
373
+ * Overlay management
374
+ */
333
375
  function ensureOverlayStyles() {
334
376
  if (document.getElementById('affidavit-overlay-styles')) return;
377
+
335
378
  var styleEl = document.createElement('style');
336
379
  styleEl.id = 'affidavit-overlay-styles';
337
380
  styleEl.textContent = '' +
338
- '.' + overlayId + '-root{position:fixed;inset:0;height:100%;z-index:9999;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:auto;padding:24px 12px;}' +
339
- '.' + overlayId + '-hidden{display:none;}' +
340
- '.' + overlayId + '-backdrop{position:fixed;inset:0;background:rgba(17,24,39,.6);}' +
341
- '.' + overlayId + '-shell{position:relative;width:min(95vw,1100px);max-height:calc(100vh - 48px);background:#fff;border-radius:16px;' +
342
- 'box-shadow:0 24px 48px rgba(15,23,42,.35);overflow:hidden;display:flex;flex-direction:column;margin:auto;}' +
343
- '.' + overlayId + '-shell>.' + overlayId + '-content{flex:1;overflow:auto;}' +
344
- '.' + overlayId + '-shell highcourt-affidavit,' +
345
- '.' + overlayId + '-shell pay-affidavit,' +
346
- '.' + overlayId + '-shell bulk-create-applications{flex:1;min-height:600px;}' +
347
- '.' + overlayId + '-close{position:absolute;top:12px;right:12px;width:36px;height:36px;border:none;border-radius:999px;' +
348
- 'background:rgba(15,23,42,.85);color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;}' +
349
- '.' + overlayId + '-close:focus{outline:2px solid rgba(45,212,191,0.8);outline-offset:2px;}';
381
+ '.' + config.overlayId + '-root {' +
382
+ ' position: fixed;' +
383
+ ' inset: 0;' +
384
+ ' height: 100%;' +
385
+ ' z-index: 9999;' +
386
+ ' display: flex;' +
387
+ ' flex-direction: column;' +
388
+ ' justify-content: center;' +
389
+ ' align-items: center;' +
390
+ ' overflow: auto;' +
391
+ ' padding: 24px 12px;' +
392
+ '}' +
393
+ '.' + config.overlayId + '-hidden { display: none; }' +
394
+ '.' + config.overlayId + '-backdrop {' +
395
+ ' position: fixed;' +
396
+ ' inset: 0;' +
397
+ ' background: rgba(17, 24, 39, .6);' +
398
+ '}' +
399
+ '.' + config.overlayId + '-shell {' +
400
+ ' position: relative;' +
401
+ ' width: min(95vw, 1100px);' +
402
+ ' max-height: calc(100vh - 48px);' +
403
+ ' background: #fff;' +
404
+ ' border-radius: 16px;' +
405
+ ' box-shadow: 0 24px 48px rgba(15, 23, 42, .35);' +
406
+ ' overflow: hidden;' +
407
+ ' display: flex;' +
408
+ ' flex-direction: column;' +
409
+ ' margin: auto;' +
410
+ '}' +
411
+ '.' + config.overlayId + '-shell > .' + config.overlayId + '-content {' +
412
+ ' flex: 1;' +
413
+ ' overflow: auto;' +
414
+ '}' +
415
+ '.' + config.overlayId + '-shell highcourt-affidavit,' +
416
+ '.' + config.overlayId + '-shell pay-affidavit,' +
417
+ '.' + config.overlayId + '-shell bulk-create-applications {' +
418
+ ' flex: 1;' +
419
+ ' min-height: 600px;' +
420
+ '}' +
421
+ '.' + config.overlayId + '-close {' +
422
+ ' position: absolute;' +
423
+ ' top: 12px;' +
424
+ ' right: 12px;' +
425
+ ' width: 36px;' +
426
+ ' height: 36px;' +
427
+ ' border: none;' +
428
+ ' border-radius: 999px;' +
429
+ ' background: rgba(15, 23, 42, .85);' +
430
+ ' color: #fff;' +
431
+ ' font-size: 20px;' +
432
+ ' cursor: pointer;' +
433
+ ' display: flex;' +
434
+ ' align-items: center;' +
435
+ ' justify-content: center;' +
436
+ '}' +
437
+ '.' + config.overlayId + '-close:focus {' +
438
+ ' outline: 2px solid rgba(45, 212, 191, 0.8);' +
439
+ ' outline-offset: 2px;' +
440
+ '}';
441
+
350
442
  document.head.appendChild(styleEl);
351
443
  }
352
444
 
353
445
  function ensureOverlay() {
354
446
  ensureOverlayStyles();
355
- var existing = document.getElementById(overlayId);
447
+
448
+ var existing = document.getElementById(config.overlayId);
356
449
  if (existing) return existing;
357
450
 
451
+ // Create overlay structure
358
452
  var root = document.createElement('div');
359
- root.id = overlayId;
360
- root.className = overlayId + '-root ' + overlayId + '-hidden';
453
+ root.id = config.overlayId;
454
+ root.className = config.overlayId + '-root ' + config.overlayId + '-hidden';
361
455
  root.setAttribute('role', 'dialog');
362
456
  root.setAttribute('aria-modal', 'true');
363
457
 
364
458
  var backdrop = document.createElement('div');
365
- backdrop.className = overlayId + '-backdrop';
459
+ backdrop.className = config.overlayId + '-backdrop';
366
460
  backdrop.setAttribute('aria-hidden', 'true');
367
461
 
368
462
  var shell = document.createElement('div');
369
- shell.className = overlayId + '-shell';
463
+ shell.className = config.overlayId + '-shell';
370
464
 
371
465
  var closeBtn = document.createElement('button');
372
466
  closeBtn.type = 'button';
373
- closeBtn.className = overlayId + '-close';
467
+ closeBtn.className = config.overlayId + '-close';
374
468
  closeBtn.setAttribute('aria-label', 'Close');
375
469
  closeBtn.textContent = '×';
376
470
 
377
471
  var host = document.createElement('div');
378
- host.className = overlayId + '-content';
472
+ host.className = config.overlayId + '-content';
379
473
  shell.appendChild(closeBtn);
380
474
  shell.appendChild(host);
381
475
 
@@ -383,8 +477,9 @@
383
477
  root.appendChild(shell);
384
478
  document.body.appendChild(root);
385
479
 
480
+ // Event listeners
386
481
  closeBtn.addEventListener('click', hideOverlay);
387
- if (overlayCloseOnBackdrop) {
482
+ if (config.overlayCloseOnBackdrop) {
388
483
  backdrop.addEventListener('click', hideOverlay);
389
484
  }
390
485
 
@@ -393,58 +488,70 @@
393
488
 
394
489
  function showOverlay() {
395
490
  var overlayEl = ensureOverlay();
396
- overlayEl.classList.remove(overlayId + '-hidden');
491
+ overlayEl.classList.remove(config.overlayId + '-hidden');
492
+
493
+ // Lock body scroll
397
494
  originalBodyOverflow = document.body.style.overflow || '';
398
495
  document.body.style.overflow = 'hidden';
399
- var host = overlayEl.querySelector('.' + overlayId + '-shell > div');
400
- var el = ensureElement(host);
401
- // Force re-apply properties when overlay is shown to ensure Angular picks them up
402
- if (el) {
403
- // Re-apply immediately
404
- applyAttributes(el);
405
- // Re-apply after delays to catch Angular initialization
406
- setTimeout(function() {
407
- if (el && el.parentNode) {
408
- applyAttributes(el);
409
- }
410
- }, 50);
411
- setTimeout(function() {
412
- if (el && el.parentNode) {
413
- applyAttributes(el);
414
- }
415
- }, 200);
416
- setTimeout(function() {
417
- if (el && el.parentNode) {
418
- applyAttributes(el);
419
- }
420
- }, 500);
421
- // For components that use internal overlay system, trigger their overlay creation
422
- // This ensures the component's overlay is properly initialized when shown via loader
423
- setTimeout(function() {
424
- if (el && typeof el.openAffidavitOverlay === 'function') {
496
+
497
+ // Get or create component
498
+ var host = overlayEl.querySelector('.' + config.overlayId + '-shell > div');
499
+ var element = ensureElement(host);
500
+
501
+ if (element) {
502
+ // Ensure properties are applied
503
+ applyAttributesAndProperties(element);
504
+
505
+ // Trigger component's overlay if it has the method
506
+ if (typeof element.openAffidavitOverlay === 'function') {
507
+ setTimeout(function() {
425
508
  try {
426
- el.openAffidavitOverlay();
509
+ element.openAffidavitOverlay();
427
510
  } catch (e) {
428
- // Component might not have this method, ignore
511
+ // Ignore if method doesn't exist
429
512
  }
430
- }
431
- }, 300);
513
+ }, 100);
514
+ }
515
+ }
516
+
517
+ // Setup event debugging if needed
518
+ if (element && window.location.hostname === 'localhost') {
519
+ setupEventDebugging(element);
432
520
  }
433
521
  }
434
522
 
435
523
  function hideOverlay() {
436
- var overlayEl = document.getElementById(overlayId);
524
+ var overlayEl = document.getElementById(config.overlayId);
437
525
  if (!overlayEl) return;
438
- overlayEl.classList.add(overlayId + '-hidden');
526
+
527
+ overlayEl.classList.add(config.overlayId + '-hidden');
439
528
  document.body.style.overflow = originalBodyOverflow;
440
529
  }
441
530
 
531
+ /**
532
+ * Main setup function
533
+ */
442
534
  function setup() {
443
- if (overlayEnabled) {
535
+ // Store config globally
536
+ if (typeof window !== 'undefined') {
537
+ window.highcourtAffidavitConfig = Object.assign({}, window.highcourtAffidavitConfig || {}, {
538
+ token: config.token,
539
+ mode: config.mode,
540
+ component: config.componentType,
541
+ overlayEnabled: config.overlayEnabled
542
+ });
543
+
544
+ // Expose overlay control functions
545
+ if (config.overlayEnabled) {
546
+ window.showHighcourtAffidavit = showOverlay;
547
+ window.hideHighcourtAffidavit = hideOverlay;
548
+ }
549
+ }
550
+
551
+ // Initialize based on overlay setting
552
+ if (config.overlayEnabled) {
444
553
  ensureOverlay();
445
- window.showHighcourtAffidavit = showOverlay;
446
- window.hideHighcourtAffidavit = hideOverlay;
447
- if (autoStart) {
554
+ if (config.autoStart) {
448
555
  showOverlay();
449
556
  }
450
557
  } else {
@@ -452,15 +559,76 @@
452
559
  }
453
560
  }
454
561
 
562
+ /**
563
+ * Event helper functions for external use
564
+ */
565
+ function setupEventHelpers() {
566
+ if (typeof window !== 'undefined') {
567
+ window.highcourtAffidavitEvents = {
568
+ /**
569
+ * Setup event listeners for a component
570
+ * @param {HTMLElement} element - The web component element
571
+ * @param {Object} handlers - Event handlers object
572
+ */
573
+ setup: function(element, handlers) {
574
+ if (!element || !handlers) return;
575
+
576
+ // Listen for both camelCase and kebab-case versions
577
+ if (handlers.callBack) {
578
+ element.addEventListener('callBack', handlers.callBack);
579
+ element.addEventListener('call-back', handlers.callBack);
580
+ }
581
+
582
+ if (handlers.paymentSuccess) {
583
+ element.addEventListener('paymentSuccess', handlers.paymentSuccess);
584
+ element.addEventListener('payment-success', handlers.paymentSuccess);
585
+ }
586
+
587
+ if (handlers.overlayClose) {
588
+ element.addEventListener('overlayClose', handlers.overlayClose);
589
+ element.addEventListener('overlay-close', handlers.overlayClose);
590
+ }
591
+ },
592
+
593
+ /**
594
+ * Remove event listeners from a component
595
+ * @param {HTMLElement} element - The web component element
596
+ * @param {Object} handlers - Event handlers object
597
+ */
598
+ remove: function(element, handlers) {
599
+ if (!element || !handlers) return;
600
+
601
+ if (handlers.callBack) {
602
+ element.removeEventListener('callBack', handlers.callBack);
603
+ element.removeEventListener('call-back', handlers.callBack);
604
+ }
605
+
606
+ if (handlers.paymentSuccess) {
607
+ element.removeEventListener('paymentSuccess', handlers.paymentSuccess);
608
+ element.removeEventListener('payment-success', handlers.paymentSuccess);
609
+ }
610
+
611
+ if (handlers.overlayClose) {
612
+ element.removeEventListener('overlayClose', handlers.overlayClose);
613
+ element.removeEventListener('overlay-close', handlers.overlayClose);
614
+ }
615
+ }
616
+ };
617
+ }
618
+ }
619
+
620
+ // Initialize
455
621
  if (document.readyState === 'loading') {
456
- document.addEventListener('DOMContentLoaded', setup);
622
+ document.addEventListener('DOMContentLoaded', function() {
623
+ setup();
624
+ setupEventHelpers();
625
+ });
457
626
  } else {
458
627
  setup();
628
+ setupEventHelpers();
459
629
  }
630
+
460
631
  } catch (error) {
461
- // eslint-disable-next-line no-console
462
- console.error('Affidavit loader error:', error);
632
+ console.error('Highcourt Affidavit loader error:', error);
463
633
  }
464
634
  })();
465
-
466
-