@fad-producto-portal/ng-fad-signature-fea 1.0.0-alpha.9 → 1.0.0
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.
- package/README.md +51 -13
- package/USAGE_GUIDE.md +716 -0
- package/assets/images/fad-signature-fea/signature-summary/rejected.svg +19 -19
- package/assets/images/fad-signature-fea/signature-summary/send.svg +10 -10
- package/esm2022/lib/components/document-approval-list/document-approval-list.component.mjs +13 -13
- package/esm2022/lib/components/generic-error-fea/generic-error-fea.component.mjs +8 -4
- package/esm2022/lib/components/pdf-viewer-fea/pdf-viewer-fea.component.mjs +8 -5
- package/esm2022/lib/components/signature-summary/signature-summary.component.mjs +8 -4
- package/esm2022/lib/components/upload-e-signature/upload-e-signature.component.mjs +14 -12
- package/esm2022/lib/components/validate-rfc/validate-rfc.component.mjs +14 -19
- package/esm2022/lib/components/validate-signature/validate-signature.component.mjs +11 -14
- package/esm2022/lib/constants/errors/validate-rfc/validate-rfc-error-code.mjs +2 -1
- package/esm2022/lib/constants/errors/validate-rfc/validate-rfc-error-description.mjs +3 -1
- package/esm2022/lib/constants/errors/validate-signature/validate-signature-error-code.mjs +2 -1
- package/esm2022/lib/constants/errors/validate-signature/validate-signature-error-description.mjs +4 -2
- package/esm2022/public-api.mjs +1 -2
- package/fesm2022/fad-producto-portal-ng-fad-signature-fea.mjs +144 -193
- package/fesm2022/fad-producto-portal-ng-fad-signature-fea.mjs.map +1 -1
- package/lib/components/document-approval-list/document-approval-list.component.d.ts +2 -5
- package/lib/components/generic-error-fea/generic-error-fea.component.d.ts +1 -1
- package/lib/components/pdf-viewer-fea/pdf-viewer-fea.component.d.ts +1 -1
- package/lib/components/signature-summary/signature-summary.component.d.ts +1 -1
- package/lib/components/upload-e-signature/upload-e-signature.component.d.ts +1 -1
- package/lib/components/validate-rfc/validate-rfc.component.d.ts +2 -3
- package/lib/components/validate-signature/validate-signature.component.d.ts +2 -3
- package/lib/constants/errors/validate-rfc/validate-rfc-error-code.d.ts +2 -1
- package/lib/constants/errors/validate-rfc/validate-rfc-error-description.d.ts +1 -1
- package/lib/constants/errors/validate-signature/validate-signature-error-code.d.ts +2 -1
- package/lib/constants/errors/validate-signature/validate-signature-error-description.d.ts +1 -1
- package/package.json +7 -8
- package/public-api.d.ts +0 -1
- package/esm2022/lib/ng-fad-signature-fea.module.mjs +0 -71
- package/lib/ng-fad-signature-fea.module.d.ts +0 -18
package/USAGE_GUIDE.md
ADDED
|
@@ -0,0 +1,716 @@
|
|
|
1
|
+
# NgFadSignatureFea
|
|
2
|
+
|
|
3
|
+
# Getting started
|
|
4
|
+
|
|
5
|
+
## Index
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
1. [Introduction](#introduction)
|
|
9
|
+
2. [Prerequisites](#prerequisites)
|
|
10
|
+
3. [Installation](#installation)
|
|
11
|
+
4. [Assets](#assets)
|
|
12
|
+
5. [Components](#components)
|
|
13
|
+
5.1. [Document Approval List](#document-approval-list)
|
|
14
|
+
5.2. [Generic Error FEA](#generic-error-fea)
|
|
15
|
+
5.3. [PDF Viewer FEA](#pdf-viewer-fea)
|
|
16
|
+
5.4. [Signature Summary](#signature-summary)
|
|
17
|
+
5.5. [Upload E-Signature](#upload-e-signature)
|
|
18
|
+
5.6. [Validate RFC](#validate-rfc)
|
|
19
|
+
5.7. [Validate Signature](#validate-signature)
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
## Introduction
|
|
23
|
+
|
|
24
|
+
Module created with a series of components with the particularity that they are elements that can be used individually or in conjunction with other components of other @fad-producto-portal/\* modules.
|
|
25
|
+
|
|
26
|
+
The purpose is to put together what is needed based on these elements and based on personal elements if applicable.
|
|
27
|
+
|
|
28
|
+
## Prerequisites
|
|
29
|
+
|
|
30
|
+
- Token request for installation of private FAD modules
|
|
31
|
+
|
|
32
|
+
### Install peer-dependencies
|
|
33
|
+
|
|
34
|
+
```bash
|
|
35
|
+
npm install timers@0.1.1 hls.js@1.5.18 @fad-producto-portal/ng-fad-services@^1.0.0
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
|Library |Version|
|
|
39
|
+
|--------------------------------------|-------|
|
|
40
|
+
|timers |0.1.1 |
|
|
41
|
+
|hls.js |1.5.18 |
|
|
42
|
+
|@fad-producto-portal/ng-fad-services |1.x.x |
|
|
43
|
+
|
|
44
|
+
## Installation
|
|
45
|
+
|
|
46
|
+
```bash
|
|
47
|
+
npm install @fad-producto-portal/ng-fad-viewer
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
## Assets
|
|
51
|
+
|
|
52
|
+
Add into the assets array (_angular.json_) the next lines:
|
|
53
|
+
|
|
54
|
+
```json
|
|
55
|
+
{
|
|
56
|
+
"glob": "**/*",
|
|
57
|
+
"input": "node_modules/@fad-producto-portal/ng-fad-viewer/assets",
|
|
58
|
+
"output": "./assets/"
|
|
59
|
+
},
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
# Components
|
|
63
|
+
|
|
64
|
+
## Document Approval List
|
|
65
|
+
|
|
66
|
+
### Class Name
|
|
67
|
+
`DocumentApprovalListComponent`
|
|
68
|
+
|
|
69
|
+
### Description
|
|
70
|
+
Displays requisitions and their documents to **approve / reject** before signing with the e.signature. Allows toggling embedded PDF view, downloading, bulk approval, and emits the final array with status.
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
### Usage
|
|
75
|
+
|
|
76
|
+
**HTML**
|
|
77
|
+
```html
|
|
78
|
+
<ng-fad-signature-fea-document-approval-list
|
|
79
|
+
[configuration]="configuration"
|
|
80
|
+
[rfc]="rfc"
|
|
81
|
+
(onevent)="onEvent($event)"
|
|
82
|
+
(onerror)="onError($event)"
|
|
83
|
+
(onloader)="onLoader($event)">
|
|
84
|
+
</ng-fad-signature-fea-document-approval-list>
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
**TypeScript**
|
|
88
|
+
```ts
|
|
89
|
+
import { Component } from '@angular/core';
|
|
90
|
+
import { DocumentApprovalFea, IDocumentApprovalListConfiguration } from '@fad-producto-portal/ng-fad-signature-fea';
|
|
91
|
+
import { ResponseError } from '@fad-producto-portal/ng-fad-shared';
|
|
92
|
+
|
|
93
|
+
@Component({
|
|
94
|
+
selector: 'app-document-approval-list',
|
|
95
|
+
templateUrl: './document-approval-list.component.html',
|
|
96
|
+
styleUrls: ['./document-approval-list.component.scss']
|
|
97
|
+
})
|
|
98
|
+
export class DocumentApprovalListHostComponent {
|
|
99
|
+
rfc = 'SAHK9808034G0';
|
|
100
|
+
|
|
101
|
+
// Only pdfMini reference (others come from generic IConfiguration)
|
|
102
|
+
configuration: IDocumentApprovalListConfiguration = {
|
|
103
|
+
pdfMini: {
|
|
104
|
+
// Pass here the mini viewer config based on IPdfMiniViewConfiguration
|
|
105
|
+
// (e.g. toolbar options, page navigation, etc.)
|
|
106
|
+
}
|
|
107
|
+
};
|
|
108
|
+
|
|
109
|
+
onEvent(data: DocumentApprovalFea[]) { console.log(data); }
|
|
110
|
+
onError(error: ResponseError) { console.error(error); }
|
|
111
|
+
onLoader(isLoading: boolean) { /* global loader */ }
|
|
112
|
+
}
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
### Inputs
|
|
116
|
+
|
|
117
|
+
| Name | Type | Req. | Description |
|
|
118
|
+
|----------------|---------------------------------------|:---:|-------------|
|
|
119
|
+
| `configuration`| `IDocumentApprovalListConfiguration` | Yes | Component configuration. **Here we only document `pdfMini`**; the rest comes from your generic `IConfiguration<>`. |
|
|
120
|
+
| `rfc` | `string` | Yes | RFC used to fetch requisitions/documents. |
|
|
121
|
+
|
|
122
|
+
### Outputs
|
|
123
|
+
|
|
124
|
+
| Name | Type | Description |
|
|
125
|
+
|-----------|---------------------------------------|-------------|
|
|
126
|
+
| `onevent` | `EventEmitter<DocumentApprovalFea[]>` | Emits documents with `approved` (`true/false/undefined`) when clicking **Continue**. |
|
|
127
|
+
| `onerror` | `EventEmitter<ResponseError>` | Emits service/HTTP/PDF errors. |
|
|
128
|
+
| `onloader`| `EventEmitter<boolean>` | Emits `true/false` while async operations run. |
|
|
129
|
+
|
|
130
|
+
### Configuration
|
|
131
|
+
|
|
132
|
+
| Property | Type | Description |
|
|
133
|
+
|-----------|----------------------------------------------------------|-------------|
|
|
134
|
+
| `pdfMini` | `Partial<RenderGeneratorComponent<IPdfMiniViewConfiguration>>` | **Optional reference** to configure the embedded **mini PDF viewer** (supports all `IPdfMiniViewConfiguration` options). |
|
|
135
|
+
|
|
136
|
+
|
|
137
|
+
## Generic Error FEA
|
|
138
|
+
|
|
139
|
+
### Class Name
|
|
140
|
+
`GenericErrorFeaComponent`
|
|
141
|
+
|
|
142
|
+
### Description
|
|
143
|
+
Displays a **generic error message** with a customizable image, title, and instruction text.
|
|
144
|
+
The component allows overriding the default **title** and **instruction** via inputs; otherwise, values are taken from internal defaults.
|
|
145
|
+
|
|
146
|
+
|
|
147
|
+
|
|
148
|
+
---
|
|
149
|
+
|
|
150
|
+
### Usage
|
|
151
|
+
|
|
152
|
+
**HTML**
|
|
153
|
+
```html
|
|
154
|
+
<ng-fad-signature-fea-generic-error-fea
|
|
155
|
+
[title]="title"
|
|
156
|
+
[instruction]="instruction">
|
|
157
|
+
</ng-fad-signature-fea-generic-error-fea>
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
**TypeScript**
|
|
161
|
+
```ts
|
|
162
|
+
import { Component } from '@angular/core';
|
|
163
|
+
|
|
164
|
+
@Component({
|
|
165
|
+
selector: 'app-generic-error-fea',
|
|
166
|
+
templateUrl: './generic-error-fea.component.html',
|
|
167
|
+
styleUrls: ['./generic-error-fea.component.scss']
|
|
168
|
+
})
|
|
169
|
+
export class GenericErrorFeaHostComponent {
|
|
170
|
+
title = 'Error';
|
|
171
|
+
instruction = 'Something went wrong. Please try again later.';
|
|
172
|
+
}
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
---
|
|
176
|
+
|
|
177
|
+
### Inputs
|
|
178
|
+
|
|
179
|
+
| Name | Type | Req. | Description |
|
|
180
|
+
|---------------|----------|:---:|-------------|
|
|
181
|
+
| `title` | `string` | No | Overrides the error title text. If not provided, defaults to internal legend. |
|
|
182
|
+
| `instruction` | `string` | No | Overrides the instruction text. If not provided, defaults to internal legend. |
|
|
183
|
+
|
|
184
|
+
---
|
|
185
|
+
|
|
186
|
+
|
|
187
|
+
## PDF Viewer FEA
|
|
188
|
+
|
|
189
|
+
### Class Name
|
|
190
|
+
`PdfViewerFeaComponent`
|
|
191
|
+
|
|
192
|
+
### Description
|
|
193
|
+
Embeds a PDF viewer tailored for FEA flows. It renders pages from a **base64 PDF**, exposes a **mini view (thumbnail navigator)**, syncs current page, and **auto-adjusts container height** based on the first rendered page to avoid scroll clipping.
|
|
194
|
+
|
|
195
|
+
![pdf-viewer-fea]()
|
|
196
|
+
|
|
197
|
+
---
|
|
198
|
+
|
|
199
|
+
### Usage
|
|
200
|
+
|
|
201
|
+
**HTML**
|
|
202
|
+
```html
|
|
203
|
+
<ng-fad-signature-fea-pdf-viewer-fea
|
|
204
|
+
*ngIf="document.isVisible && document.doc?.file"
|
|
205
|
+
[file]="document.doc?.file"
|
|
206
|
+
[index]="i"
|
|
207
|
+
[id]="getDocumentId(document.id!)">
|
|
208
|
+
</ng-fad-signature-fea-pdf-viewer-fea>
|
|
209
|
+
```
|
|
210
|
+
|
|
211
|
+
**TypeScript (host example)**
|
|
212
|
+
```ts
|
|
213
|
+
import { Component } from '@angular/core';
|
|
214
|
+
import { IPdfViewerFeaConfiguration } from '@fad-producto-portal/ng-fad-signature-fea';
|
|
215
|
+
|
|
216
|
+
@Component({
|
|
217
|
+
selector: 'app-pdf-viewer-fea-host',
|
|
218
|
+
templateUrl: './host.html'
|
|
219
|
+
})
|
|
220
|
+
export class HostComponent {
|
|
221
|
+
configuration: IPdfViewerFeaConfiguration = {
|
|
222
|
+
|
|
223
|
+
pdfMini: {
|
|
224
|
+
|
|
225
|
+
},
|
|
226
|
+
pdfGeneral: {
|
|
227
|
+
|
|
228
|
+
}
|
|
229
|
+
};
|
|
230
|
+
|
|
231
|
+
getDocumentId = (id: string) => 'pdf' + id.replace(/-/g, '');
|
|
232
|
+
}
|
|
233
|
+
```
|
|
234
|
+
|
|
235
|
+
---
|
|
236
|
+
|
|
237
|
+
### Template (internal)
|
|
238
|
+
```html
|
|
239
|
+
<div class="pdf-viewer" [id]="id" [style.height.px]="height">
|
|
240
|
+
<ng-fad-viewer-general-pdf-viewer
|
|
241
|
+
[pages]="pages"
|
|
242
|
+
(onpagechange)="onPageChange($event)"
|
|
243
|
+
(onloadpage)="onLoadPage($event)">
|
|
244
|
+
|
|
245
|
+
<ng-fad-viewer-pdf-mini-view
|
|
246
|
+
miniView
|
|
247
|
+
[configuration]="miniViewConfig"
|
|
248
|
+
[pages]="pages"
|
|
249
|
+
[page]="page"
|
|
250
|
+
(onpagechange)="scrollToPage($event)">
|
|
251
|
+
</ng-fad-viewer-pdf-mini-view>
|
|
252
|
+
|
|
253
|
+
</ng-fad-viewer-general-pdf-viewer>
|
|
254
|
+
</div>
|
|
255
|
+
```
|
|
256
|
+
|
|
257
|
+
---
|
|
258
|
+
|
|
259
|
+
### Inputs
|
|
260
|
+
|
|
261
|
+
| Name | Type | Req. | Description |
|
|
262
|
+
|-----------------|------------------------|:---:|-------------|
|
|
263
|
+
| `file` | `string` (base64 PDF) | Yes | Base64 string (e.g. `data:application/pdf;base64,....`) used to initialize the PDF reader. |
|
|
264
|
+
| `index` | `number` | Yes | Unique viewer index; used to namespace internal IDs. |
|
|
265
|
+
| `id` | `string` | Yes | Container DOM id to auto-size and to anchor page scrolling. |
|
|
266
|
+
| `configuration` | `IPdfViewerFeaConfiguration` | No | Optional config. If omitted, defaults are merged internally. |
|
|
267
|
+
|
|
268
|
+
---
|
|
269
|
+
|
|
270
|
+
### Outputs
|
|
271
|
+
This component does **not** emit events directly. Page changes are handled internally and via the embedded viewer/miniview.
|
|
272
|
+
|
|
273
|
+
---
|
|
274
|
+
|
|
275
|
+
### Configuration
|
|
276
|
+
|
|
277
|
+
| Property | Type | Description |
|
|
278
|
+
|------------|----------------------------------------------------------------------|-------------|
|
|
279
|
+
| `pdfMini` | `Partial<RenderGeneratorComponent<IPdfMiniViewConfiguration>>` | Optional reference to configure the **mini PDF view** (thumbnail navigator). |
|
|
280
|
+
| `pdfGeneral` | `Partial<RenderGeneratorComponent<IGeneralPdfViewerConfiguration>>` | Optional reference to configure the **general PDF viewer** (toolbar, paging, etc.). |
|
|
281
|
+
|
|
282
|
+
---
|
|
283
|
+
|
|
284
|
+
|
|
285
|
+
## Signature Summary
|
|
286
|
+
|
|
287
|
+
### Class Name
|
|
288
|
+
`SignatureSummaryComponent`
|
|
289
|
+
|
|
290
|
+
### Description
|
|
291
|
+
Displays a **summary of signed and rejected documents** after a signing process.
|
|
292
|
+
It shows the number of approved/rejected documents, their names, requisition ID, and the current date.
|
|
293
|
+
The component adjusts its display depending on whether **all documents are rejected** or if there are any signed documents.
|
|
294
|
+
|
|
295
|
+
|
|
296
|
+
|
|
297
|
+
---
|
|
298
|
+
|
|
299
|
+
### Usage
|
|
300
|
+
|
|
301
|
+
**HTML**
|
|
302
|
+
```html
|
|
303
|
+
<ng-fad-signature-fea-signature-summary
|
|
304
|
+
[documentRequest]="documentRequest"
|
|
305
|
+
[configuration]="configuration"
|
|
306
|
+
(oncomplete)="onComplete($event)">
|
|
307
|
+
</ng-fad-signature-fea-signature-summary>
|
|
308
|
+
```
|
|
309
|
+
|
|
310
|
+
**TypeScript (host example)**
|
|
311
|
+
```ts
|
|
312
|
+
import { Component } from '@angular/core';
|
|
313
|
+
import { ISignatureSummaryConfiguration } from '@fad-producto-portal/ng-fad-signature-fea';
|
|
314
|
+
|
|
315
|
+
@Component({
|
|
316
|
+
selector: 'app-signature-summary-host',
|
|
317
|
+
templateUrl: './host.html'
|
|
318
|
+
})
|
|
319
|
+
export class HostComponent {
|
|
320
|
+
documentRequest = [
|
|
321
|
+
{
|
|
322
|
+
doc: { documentId: '123', name: 'contract.pdf', pages: 10 },
|
|
323
|
+
id: '123',
|
|
324
|
+
idRequisition: 'abc',
|
|
325
|
+
approved: true,
|
|
326
|
+
isVisible: false
|
|
327
|
+
},
|
|
328
|
+
{
|
|
329
|
+
doc: { documentId: '456', name: 'terms.pdf', pages: 3 },
|
|
330
|
+
id: '456',
|
|
331
|
+
idRequisition: 'abc',
|
|
332
|
+
approved: false,
|
|
333
|
+
isVisible: false
|
|
334
|
+
}
|
|
335
|
+
];
|
|
336
|
+
|
|
337
|
+
configuration: ISignatureSummaryConfiguration = {
|
|
338
|
+
customization: {
|
|
339
|
+
moduleCustomization: {
|
|
340
|
+
style: {},
|
|
341
|
+
legends: {
|
|
342
|
+
signed: 'Signed',
|
|
343
|
+
rejected: 'Rejected',
|
|
344
|
+
legend: 'Summary of documents processed',
|
|
345
|
+
documentRejected: 'All documents were rejected'
|
|
346
|
+
}
|
|
347
|
+
}
|
|
348
|
+
},
|
|
349
|
+
pathDependencies: {
|
|
350
|
+
imageDirectory: 'assets/images/fad-signature-fea/signature-summary/',
|
|
351
|
+
images: {
|
|
352
|
+
reject: 'assets/images/fad-signature-fea/signature-summary/rejected.svg',
|
|
353
|
+
send: 'assets/images/fad-signature-fea/signature-summary/send.svg'
|
|
354
|
+
}
|
|
355
|
+
},
|
|
356
|
+
dateFormat: 'en-US'
|
|
357
|
+
};
|
|
358
|
+
|
|
359
|
+
onComplete(data: any) {
|
|
360
|
+
console.log('Summary complete', data);
|
|
361
|
+
}
|
|
362
|
+
}
|
|
363
|
+
```
|
|
364
|
+
|
|
365
|
+
---
|
|
366
|
+
|
|
367
|
+
### Inputs
|
|
368
|
+
|
|
369
|
+
| Name | Type | Req. | Description |
|
|
370
|
+
|------------------|-------------------------------------|:---:|-------------|
|
|
371
|
+
| `documentRequest`| `DocumentApprovalFea[]` | Yes | List of documents with approval state to summarize. |
|
|
372
|
+
| `configuration` | `ISignatureSummaryConfiguration` | No | Optional config, merged with `SIGNATURE_SUMMARY_DEFAULT`. |
|
|
373
|
+
|
|
374
|
+
---
|
|
375
|
+
|
|
376
|
+
### Outputs
|
|
377
|
+
|
|
378
|
+
| Name | Type | Description |
|
|
379
|
+
|-------------|-------------------------|-------------|
|
|
380
|
+
| `oncomplete`| `EventEmitter<any>` | Emitted when summary process finishes (placeholder for custom logic). |
|
|
381
|
+
|
|
382
|
+
---
|
|
383
|
+
|
|
384
|
+
### Configuration
|
|
385
|
+
|
|
386
|
+
| Property | Type | Description |
|
|
387
|
+
|--------------|------------------------------------------------------------------------|-------------|
|
|
388
|
+
| `dateFormat` | `string` | Optional. Date format string passed to `toLocaleDateString()`. |
|
|
389
|
+
|
|
390
|
+
---
|
|
391
|
+
|
|
392
|
+
## Upload E-Signature
|
|
393
|
+
|
|
394
|
+
### Class Name
|
|
395
|
+
`UploadESignatureComponent`
|
|
396
|
+
|
|
397
|
+
### Description
|
|
398
|
+
Handles the **upload and processing of electronic signature files** (`.cer`, `.key`, and password) to sign or reject documents.
|
|
399
|
+
The component validates inputs, manages drag & drop, integrates with services for signing/rejecting, and emits completion, error, and loader events.
|
|
400
|
+
|
|
401
|
+
|
|
402
|
+
|
|
403
|
+
---
|
|
404
|
+
|
|
405
|
+
### Usage
|
|
406
|
+
|
|
407
|
+
**HTML**
|
|
408
|
+
```html
|
|
409
|
+
<ng-fad-signature-fea-upload-e-signature
|
|
410
|
+
[configuration]="configuration"
|
|
411
|
+
[documents]="documents"
|
|
412
|
+
[rfc]="rfc"
|
|
413
|
+
[signerId]="signerId"
|
|
414
|
+
(onerror)="onerror($event)"
|
|
415
|
+
(oncomplete)="oncomplete($event)"
|
|
416
|
+
(onloader)="onloader($event)">
|
|
417
|
+
</ng-fad-signature-fea-upload-e-signature>
|
|
418
|
+
```
|
|
419
|
+
|
|
420
|
+
**TypeScript (host example)**
|
|
421
|
+
```ts
|
|
422
|
+
import { Component, OnInit } from '@angular/core';
|
|
423
|
+
import { IUploadESignatureConfiguration } from '@fad-producto-portal/ng-fad-signature-fea';
|
|
424
|
+
import { ResponseError } from '@fad-producto-portal/ng-fad-shared';
|
|
425
|
+
import { SignInternalFeaRequest } from '@fad-producto-portal/ng-fad-services';
|
|
426
|
+
|
|
427
|
+
@Component({
|
|
428
|
+
selector: 'app-upload-e-signature-host',
|
|
429
|
+
templateUrl: './host.html'
|
|
430
|
+
})
|
|
431
|
+
export class HostComponent implements OnInit {
|
|
432
|
+
configuration: IUploadESignatureConfiguration = {
|
|
433
|
+
formErrors: {
|
|
434
|
+
configuration: {
|
|
435
|
+
customization: {
|
|
436
|
+
moduleCustomization: {
|
|
437
|
+
legends: {
|
|
438
|
+
required: 'This field is required'
|
|
439
|
+
}
|
|
440
|
+
}
|
|
441
|
+
}
|
|
442
|
+
}
|
|
443
|
+
}
|
|
444
|
+
};
|
|
445
|
+
|
|
446
|
+
signerId = '9cbc0d2b-8d3f-49dc-b915-d44f3ebb4224';
|
|
447
|
+
rfc = 'SOMP931226KT6';
|
|
448
|
+
documents: SignInternalFeaRequest[] = [];
|
|
449
|
+
|
|
450
|
+
ngOnInit(): void {
|
|
451
|
+
this.documents = [
|
|
452
|
+
{ id: '1', idRequisition: 'req1', doc: { name: 'contract.pdf', pages: 2 }, approved: true },
|
|
453
|
+
{ id: '2', idRequisition: 'req1', doc: { name: 'terms.pdf', pages: 1 }, approved: false }
|
|
454
|
+
];
|
|
455
|
+
}
|
|
456
|
+
|
|
457
|
+
onerror(err: ResponseError) { alert(err.error); }
|
|
458
|
+
oncomplete(data: any) { console.log(data); alert('Signature complete'); }
|
|
459
|
+
onloader(loader: boolean) { console.log('loader', loader); }
|
|
460
|
+
}
|
|
461
|
+
```
|
|
462
|
+
|
|
463
|
+
---
|
|
464
|
+
|
|
465
|
+
### Inputs
|
|
466
|
+
|
|
467
|
+
| Name | Type | Req. | Description |
|
|
468
|
+
|-------------|---------------------------------|:---:|-------------|
|
|
469
|
+
| `configuration` | `IUploadESignatureConfiguration` | Yes | Component config (legends, styles, dependencies, credentials, services, and optional `formErrors`). |
|
|
470
|
+
| `documents` | `SignInternalFeaRequest[]` | Yes | List of documents to sign/reject. |
|
|
471
|
+
| `rfc` | `string` | Yes | RFC of the signer (used in signature request). |
|
|
472
|
+
| `signerId` | `string` | Yes | Identifier for the signer (used in rejection requests). |
|
|
473
|
+
|
|
474
|
+
---
|
|
475
|
+
|
|
476
|
+
### Outputs
|
|
477
|
+
|
|
478
|
+
| Name | Type | Description |
|
|
479
|
+
|-------------|--------------------------------------|-------------|
|
|
480
|
+
| `onerror` | `EventEmitter<ResponseError>` | Emits errors (validation, HTTP, service, file format). |
|
|
481
|
+
| `onloader` | `EventEmitter<boolean>` | Emits `true/false` to indicate loading state. |
|
|
482
|
+
| `oncomplete`| `EventEmitter<null | UploadESignatureComplete>` | Emits the result once documents are signed/rejected. |
|
|
483
|
+
|
|
484
|
+
---
|
|
485
|
+
|
|
486
|
+
### Configuration
|
|
487
|
+
|
|
488
|
+
`IUploadESignatureConfiguration extends IConfiguration<IUploadESignatureLegends, IUploadESignatureStyle, IUploadESignatureDependencies>`
|
|
489
|
+
|
|
490
|
+
| Property | Type | Description |
|
|
491
|
+
|--------------|----------------------------------------------------------|-------------|
|
|
492
|
+
| `formErrors` | `Partial<RenderGeneratorComponent<IFormErrorsConfiguration>>` | Optional configuration for form error handling. |
|
|
493
|
+
| `services` | `{ sign?: FadPortalInterceptor; reject?: FadPortalInterceptor; }` | Service endpoints for signing/rejecting. |
|
|
494
|
+
| `credentials`| `{ key?: string; iv?: string; }` | Credentials required for encryption of requests. |
|
|
495
|
+
|
|
496
|
+
## Validate RFC
|
|
497
|
+
|
|
498
|
+
### Class Name
|
|
499
|
+
`ValidateRfcComponent`
|
|
500
|
+
|
|
501
|
+
### Description
|
|
502
|
+
Displays a simple **RFC validation form** with a single input and submit button.
|
|
503
|
+
It validates the RFC code against a configurable **length** and **regex**, uppercases input on the fly, and calls a backend service to validate the RFC tied to a **ticket**. The component merges defaults from `SIGNATURE_FEA_CONFIGURATION_DEFAULT` and supports form error rendering.
|
|
504
|
+
|
|
505
|
+
|
|
506
|
+
|
|
507
|
+
---
|
|
508
|
+
|
|
509
|
+
### Usage
|
|
510
|
+
|
|
511
|
+
**HTML**
|
|
512
|
+
```html
|
|
513
|
+
<ng-fad-signature-fea-validate-rfc
|
|
514
|
+
[configuration]="configuration"
|
|
515
|
+
[ticket]="ticket"
|
|
516
|
+
(onerror)="handleError($event)"
|
|
517
|
+
(oncomplete)="handleComplete($event)"
|
|
518
|
+
(onloader)="handleLoader($event)">
|
|
519
|
+
</ng-fad-signature-fea-validate-rfc>
|
|
520
|
+
```
|
|
521
|
+
|
|
522
|
+
**TypeScript (host example)**
|
|
523
|
+
```ts
|
|
524
|
+
import { Component } from '@angular/core';
|
|
525
|
+
import { IValidateRfcConfiguration } from '@fad-producto-portal/ng-fad-signature-fea';
|
|
526
|
+
import { ResponseError } from '@fad-producto-portal/ng-fad-shared';
|
|
527
|
+
import { ResponseData, ValidateRFC } from '@fad-producto-portal/ng-fad-services';
|
|
528
|
+
|
|
529
|
+
@Component({
|
|
530
|
+
selector: 'app-validate-rfc-host',
|
|
531
|
+
templateUrl: './host.html'
|
|
532
|
+
})
|
|
533
|
+
export class HostComponent {
|
|
534
|
+
ticket = '...secure-ticket...';
|
|
535
|
+
|
|
536
|
+
configuration: IValidateRfcConfiguration = {
|
|
537
|
+
maxCharacters: 13,
|
|
538
|
+
regexRFC: '^[A-ZÑ&]{3,4}[0-9]{6}[A-V1-9][A-Z1-9][0-9A]$',
|
|
539
|
+
customization: {
|
|
540
|
+
moduleCustomization: {
|
|
541
|
+
legends: {
|
|
542
|
+
title: 'Validation code',
|
|
543
|
+
description: 'Enter your RFC to start signing',
|
|
544
|
+
buttonLegend: 'Validate'
|
|
545
|
+
},
|
|
546
|
+
style: { }
|
|
547
|
+
}
|
|
548
|
+
},
|
|
549
|
+
pathDependencies: {
|
|
550
|
+
imageDirectory: 'assets/images/fad-signature-fea/validate-rfc/'
|
|
551
|
+
},
|
|
552
|
+
formErrors: {
|
|
553
|
+
configuration: {
|
|
554
|
+
customization: {
|
|
555
|
+
moduleCustomization: {
|
|
556
|
+
legends: { required: 'This field is required' }
|
|
557
|
+
}
|
|
558
|
+
}
|
|
559
|
+
}
|
|
560
|
+
}
|
|
561
|
+
};
|
|
562
|
+
|
|
563
|
+
handleError(err: ResponseError) { console.error(err); }
|
|
564
|
+
handleComplete(res: ResponseData<ValidateRFC>) { console.log(res); }
|
|
565
|
+
handleLoader(loading: boolean) { /* show/hide spinner */ }
|
|
566
|
+
}
|
|
567
|
+
```
|
|
568
|
+
|
|
569
|
+
---
|
|
570
|
+
|
|
571
|
+
### Template (internal)
|
|
572
|
+
```html
|
|
573
|
+
<div class="validation-container fad-container" *ngIf="showComponent">
|
|
574
|
+
<div class="title">{{ configuration.customization?.moduleCustomization?.legends?.title }}</div>
|
|
575
|
+
<div class="fad-portal-subtitle">{{ configuration.customization?.moduleCustomization?.legends?.description }}</div>
|
|
576
|
+
|
|
577
|
+
<form [formGroup]="validationForm" (ngSubmit)="onSubmit()">
|
|
578
|
+
<div class="fad-portal-container-input">
|
|
579
|
+
<input id="code"
|
|
580
|
+
type="text"
|
|
581
|
+
formControlName="code"
|
|
582
|
+
(input)="onInputChange($event)"
|
|
583
|
+
maxlength="{{ configuration.maxCharacters || 13 }}" />
|
|
584
|
+
</div>
|
|
585
|
+
|
|
586
|
+
<ng-fad-portal-shared-form-errors
|
|
587
|
+
[formData]="codeControl!"
|
|
588
|
+
[configuration]="configuration.formErrors?.configuration!">
|
|
589
|
+
</ng-fad-portal-shared-form-errors>
|
|
590
|
+
|
|
591
|
+
<button type="submit" class="fad-portal-primary" [disabled]="validationForm.invalid">
|
|
592
|
+
{{ configuration.customization?.moduleCustomization?.legends?.buttonLegend }}
|
|
593
|
+
</button>
|
|
594
|
+
</form>
|
|
595
|
+
</div>
|
|
596
|
+
```
|
|
597
|
+
|
|
598
|
+
---
|
|
599
|
+
|
|
600
|
+
### Inputs
|
|
601
|
+
|
|
602
|
+
| Name | Type | Req. | Description |
|
|
603
|
+
|-----------------|-----------------------------------|:---:|-------------|
|
|
604
|
+
| `configuration` | `IValidateRfcConfiguration` | Yes | Component configuration (legends/style via global `IConfiguration`, plus fields below). |
|
|
605
|
+
| `ticket` | `string` | Yes | Ticket (requisition token) required by the backend validation service. |
|
|
606
|
+
|
|
607
|
+
---
|
|
608
|
+
|
|
609
|
+
### Outputs
|
|
610
|
+
|
|
611
|
+
| Name | Type | Description |
|
|
612
|
+
|-------------|---------------------------------------|-------------|
|
|
613
|
+
| `oncomplete`| `EventEmitter<ResponseData<ValidateRFC>>` | Emits the backend response when RFC validation succeeds. |
|
|
614
|
+
| `onerror` | `EventEmitter<ResponseError>` | Emits errors for missing data, HTTP/service failures. |
|
|
615
|
+
| `onloader` | `EventEmitter<boolean>` | Emits `true/false` to toggle loading state. |
|
|
616
|
+
|
|
617
|
+
---
|
|
618
|
+
|
|
619
|
+
### Configuration
|
|
620
|
+
|
|
621
|
+
`IValidateRfcConfiguration extends IConfiguration<IValidateRfcLegends, IValidateRfcStyle, IValidateRfcDependencies>`
|
|
622
|
+
|
|
623
|
+
| Property | Type | Description |
|
|
624
|
+
|-----------------|----------------------------------------------------------|-------------|
|
|
625
|
+
| `maxCharacters` | `number` | Optional. Max/min length for the input. Defaults to `13`. |
|
|
626
|
+
| `regexRFC` | `string` | Optional. Regex pattern used by `Validators.pattern`. |
|
|
627
|
+
| `formErrors` | `Partial<RenderGeneratorComponent<IFormErrorsConfiguration>>` | Optional. Configuration for the shared form error component. |
|
|
628
|
+
|
|
629
|
+
## Validate Signature
|
|
630
|
+
|
|
631
|
+
### Class Name
|
|
632
|
+
`ValidateSignatureComponent`
|
|
633
|
+
|
|
634
|
+
### Description
|
|
635
|
+
Lightweight status checker for a signing flow. It validates required input (`ticket`), calls the backend **signer status** endpoint, and emits events depending on the returned status:
|
|
636
|
+
|
|
637
|
+
- If status is **`IN_PROGRESS`** → emits **`oncomplete`** with the status string.
|
|
638
|
+
- Otherwise (e.g., **`SIGNED`**, **`REJECTED`**, etc.) → emits **`onsigned`** with the status string.
|
|
639
|
+
|
|
640
|
+
Merges defaults from `VALIDATE_SIGNATURE_CONFIGURATION_DEFAULT` using your common configuration system.
|
|
641
|
+
|
|
642
|
+
---
|
|
643
|
+
|
|
644
|
+
### Usage
|
|
645
|
+
|
|
646
|
+
**HTML**
|
|
647
|
+
```html
|
|
648
|
+
<div class="fad-portal-title-bold">Validate signature data</div>
|
|
649
|
+
|
|
650
|
+
<ng-fad-signature-fea-validate-signature
|
|
651
|
+
[configuration]="configuration"
|
|
652
|
+
[ticket]="ticket"
|
|
653
|
+
(onsigned)="onsigned($event)"
|
|
654
|
+
(onerror)="onerror($event)"
|
|
655
|
+
(oncomplete)="oncomplete($event)">
|
|
656
|
+
</ng-fad-signature-fea-validate-signature>
|
|
657
|
+
```
|
|
658
|
+
|
|
659
|
+
**TypeScript (host example)**
|
|
660
|
+
```ts
|
|
661
|
+
import { Component } from '@angular/core';
|
|
662
|
+
import { ResponseError } from '@fad-producto-portal/ng-fad-shared';
|
|
663
|
+
import { IValidateSignatureConfiguration } from '@fad-producto-portal/ng-fad-signature-fea';
|
|
664
|
+
|
|
665
|
+
@Component({
|
|
666
|
+
selector: 'app-validate-signature-host',
|
|
667
|
+
templateUrl: './host.html'
|
|
668
|
+
})
|
|
669
|
+
export class HostComponent {
|
|
670
|
+
configuration!: IValidateSignatureConfiguration;
|
|
671
|
+
ticket = '...secure-ticket...';
|
|
672
|
+
|
|
673
|
+
onerror(error: ResponseError) {
|
|
674
|
+
console.error(error);
|
|
675
|
+
alert(error.error);
|
|
676
|
+
}
|
|
677
|
+
|
|
678
|
+
oncomplete(status: string) {
|
|
679
|
+
console.log('On Complete', status);
|
|
680
|
+
|
|
681
|
+
}
|
|
682
|
+
|
|
683
|
+
onsigned(status: string) {
|
|
684
|
+
console.log('On Signed', status);
|
|
685
|
+
|
|
686
|
+
}
|
|
687
|
+
}
|
|
688
|
+
```
|
|
689
|
+
|
|
690
|
+
---
|
|
691
|
+
|
|
692
|
+
### Inputs
|
|
693
|
+
|
|
694
|
+
| Name | Type | Req. | Description |
|
|
695
|
+
|-----------------|-----------------------------------|:---:|-------------|
|
|
696
|
+
| `configuration` | `IValidateSignatureConfiguration` | Yes | Component configuration (see below). |
|
|
697
|
+
| `ticket` | `string` | Yes | Required ticket used to query signer status. |
|
|
698
|
+
|
|
699
|
+
---
|
|
700
|
+
|
|
701
|
+
### Outputs
|
|
702
|
+
|
|
703
|
+
| Name | Type | Description |
|
|
704
|
+
|-------------|----------------------------|-------------|
|
|
705
|
+
| `onloader` | `EventEmitter<boolean>` | Emits `true/false` while async calls are in-flight. |
|
|
706
|
+
| `onerror` | `EventEmitter<ResponseError>` | Emits errors for missing data, HTTP/service failures. |
|
|
707
|
+
| `oncomplete`| `EventEmitter<string>` | Emitted when the service returns `IN_PROGRESS`. |
|
|
708
|
+
| `onsigned` | `EventEmitter<string>` | Emitted when the service returns a **final** status different from `IN_PROGRESS`. |
|
|
709
|
+
|
|
710
|
+
---
|
|
711
|
+
|
|
712
|
+
### Configuration
|
|
713
|
+
|
|
714
|
+
| Property | Type | Description |
|
|
715
|
+
|----------------------|----------------------|-------------|
|
|
716
|
+
| `services?.signerStatusFea` | `FadPortalInterceptor` | Optional service configuration passed to `FadService.getSignerStatusByTicket(...)`. |
|