@signature.digital/catalog 1.7.0 → 1.8.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/.smartconfig.json +19 -6
- package/dist_bundle/bundle.js +297 -293
- package/dist_ts_web/00_commitinfo_data.js +1 -1
- package/dist_ts_web/elements/sdig-signbox/sdig-signbox.d.ts +1 -0
- package/dist_ts_web/elements/sdig-signbox/sdig-signbox.js +23 -9
- package/dist_ts_web/elements/sdig-signpad/sdig-signpad.d.ts +5 -2
- package/dist_ts_web/elements/sdig-signpad/sdig-signpad.js +12 -4
- package/dist_ts_web/elements/sdig-workspace/sdig-workspace-compose.d.ts +1 -0
- package/dist_ts_web/elements/sdig-workspace/sdig-workspace-compose.js +15 -3
- package/dist_ts_web/elements/sdig-workspace/sdig-workspace-inbox.js +3 -2
- package/dist_ts_web/elements/sdig-workspace/sdig-workspace-sign.d.ts +3 -0
- package/dist_ts_web/elements/sdig-workspace/sdig-workspace-sign.js +55 -18
- package/dist_ts_web/elements/sdig-workspace/sdig-workspace.shared.js +11 -10
- package/dist_ts_web/plugins.d.ts +3 -3
- package/dist_ts_web/plugins.js +3 -4
- package/package.json +13 -12
- package/ts_web/00_commitinfo_data.ts +1 -1
- package/ts_web/elements/sdig-signbox/sdig-signbox.ts +21 -8
- package/ts_web/elements/sdig-signpad/sdig-signpad.ts +15 -5
- package/ts_web/elements/sdig-workspace/sdig-workspace-compose.ts +13 -2
- package/ts_web/elements/sdig-workspace/sdig-workspace-inbox.ts +2 -1
- package/ts_web/elements/sdig-workspace/sdig-workspace-sign.ts +53 -17
- package/ts_web/elements/sdig-workspace/sdig-workspace.shared.ts +11 -9
- package/ts_web/plugins.ts +3 -4
|
@@ -93,7 +93,12 @@ let SdigWorkspaceSign = (() => {
|
|
|
93
93
|
@media (max-width: 920px) { .recipient-header .actions { display: none; } .sign-layout { flex-direction: column; overflow: auto; } .sign-panel { width: 100%; border-left: 0; border-top: 1px solid var(--border); } .document-page { width: 560px; } }
|
|
94
94
|
`];
|
|
95
95
|
get signFields() {
|
|
96
|
-
return this.fields
|
|
96
|
+
return this.fields;
|
|
97
|
+
}
|
|
98
|
+
get activeField() {
|
|
99
|
+
return this.signFields.find((field) => field.id === this.activeFieldId && !this.signedFieldIds.includes(field.id))
|
|
100
|
+
|| this.signFields.find((field) => !this.signedFieldIds.includes(field.id))
|
|
101
|
+
|| this.signFields[0];
|
|
97
102
|
}
|
|
98
103
|
fieldIcon(type) {
|
|
99
104
|
if (type === 'signature')
|
|
@@ -103,29 +108,61 @@ let SdigWorkspaceSign = (() => {
|
|
|
103
108
|
return 'type';
|
|
104
109
|
}
|
|
105
110
|
signField(fieldId) {
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
111
|
+
const field = this.signFields.find((currentField) => currentField.id === fieldId);
|
|
112
|
+
if (!field || this.signedFieldIds.includes(fieldId))
|
|
113
|
+
return;
|
|
114
|
+
this.signedFieldIds = [...this.signedFieldIds, fieldId];
|
|
115
|
+
this.dispatchEvent(new CustomEvent('field-signed', {
|
|
116
|
+
detail: { document: this.document, field, signedFieldIds: this.signedFieldIds },
|
|
117
|
+
bubbles: true,
|
|
118
|
+
composed: true,
|
|
119
|
+
}));
|
|
120
|
+
const next = this.signFields.find((currentField) => !this.signedFieldIds.includes(currentField.id));
|
|
110
121
|
if (next)
|
|
111
122
|
this.activeFieldId = next.id;
|
|
112
123
|
}
|
|
124
|
+
emitSigningComplete() {
|
|
125
|
+
if (this.signedFieldIds.length !== this.signFields.length)
|
|
126
|
+
return;
|
|
127
|
+
this.dispatchEvent(new CustomEvent('signing-complete', {
|
|
128
|
+
detail: {
|
|
129
|
+
document: this.document,
|
|
130
|
+
fields: this.signFields,
|
|
131
|
+
signedFieldIds: this.signedFieldIds,
|
|
132
|
+
completedAt: Date.now(),
|
|
133
|
+
},
|
|
134
|
+
bubbles: true,
|
|
135
|
+
composed: true,
|
|
136
|
+
}));
|
|
137
|
+
}
|
|
138
|
+
handlePrimaryAction() {
|
|
139
|
+
if (!this.signFields.length)
|
|
140
|
+
return;
|
|
141
|
+
if (this.signedFieldIds.length === this.signFields.length) {
|
|
142
|
+
this.emitSigningComplete();
|
|
143
|
+
return;
|
|
144
|
+
}
|
|
145
|
+
const activeField = this.activeField;
|
|
146
|
+
if (activeField)
|
|
147
|
+
this.signField(activeField.id);
|
|
148
|
+
}
|
|
113
149
|
renderSignedValue(field) {
|
|
114
150
|
if (field.type === 'signature')
|
|
115
|
-
return html `<span style="font-
|
|
151
|
+
return html `<span style="font-size: 12px; font-weight: 600; color: hsl(220 50% 30%);">Signature captured</span>`;
|
|
116
152
|
if (field.type === 'date')
|
|
117
|
-
return html `<span class="mono" style="font-size: 12px; color: hsl(0 0% 18%);">
|
|
118
|
-
return html `<span style="font-size: 12px; color: hsl(0 0% 18%);">
|
|
153
|
+
return html `<span class="mono" style="font-size: 12px; color: hsl(0 0% 18%);">Date captured</span>`;
|
|
154
|
+
return html `<span style="font-size: 12px; color: hsl(0 0% 18%);">Completed</span>`;
|
|
119
155
|
}
|
|
120
156
|
render() {
|
|
121
157
|
const document = this.document || demoDocuments[0];
|
|
122
158
|
const completed = this.signedFieldIds.length;
|
|
123
|
-
const
|
|
124
|
-
const
|
|
159
|
+
const total = this.signFields.length;
|
|
160
|
+
const progress = total ? Math.round((completed / total) * 100) : 0;
|
|
161
|
+
const activeField = this.activeField;
|
|
125
162
|
return html `
|
|
126
163
|
<div class="recipient-header">
|
|
127
164
|
<div style="display: flex; align-items: center; gap: 12px;"><span class="logomark">s</span><div><div style="font-size: 12px; font-weight: 600;">${document.title}</div><div class="mono" style="font-size: 10px; color: var(--text-muted);">From ${document.sender} · ${document.id} · ${document.pages} pages</div></div></div>
|
|
128
|
-
<div class="actions"><span class="pill
|
|
165
|
+
<div class="actions"><span class="pill info">${icon('shield', 12)} Sender details supplied by host</span>${actionButton('Decline', 'outline')}${actionButton('PDF', 'outline', 'download')}</div>
|
|
129
166
|
</div>
|
|
130
167
|
<div class="progress-track"><div class="progress-fill" style="width: ${progress}%"></div></div>
|
|
131
168
|
<div class="sign-layout">
|
|
@@ -134,23 +171,23 @@ let SdigWorkspaceSign = (() => {
|
|
|
134
171
|
${fakeDocument()}
|
|
135
172
|
${this.signFields.map((field) => {
|
|
136
173
|
const filled = this.signedFieldIds.includes(field.id);
|
|
137
|
-
const active =
|
|
174
|
+
const active = activeField?.id === field.id && !filled;
|
|
138
175
|
return html `<div class="field-box ${active ? 'selected' : ''}" style="--x: ${field.x}px; --y: ${field.y}px; --w: ${field.w}px; --h: ${field.h}px; --field-color: ${filled ? 'transparent' : 'var(--accent)'}; color: ${filled ? 'hsl(220 50% 30%)' : 'var(--accent)'}; background: ${filled ? 'transparent' : 'color-mix(in srgb, var(--accent) 12%, transparent)'};" @click=${() => !filled ? this.signField(field.id) : undefined}>${filled ? this.renderSignedValue(field) : html `${icon(this.fieldIcon(field.type), 12)}<span>${active ? html `<span style="display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: pulse 1.4s infinite;"></span>` : ''}${field.label}</span>`}</div>`;
|
|
139
176
|
})}
|
|
140
177
|
<div class="mono" style="position: absolute; bottom: 14px; right: 18px; font-size: 9px; color: hsl(0 0% 60%);">Page 1 of ${document.pages}</div>
|
|
141
178
|
</div>
|
|
142
179
|
</div>
|
|
143
180
|
<div class="sign-panel">
|
|
144
|
-
<div style="display: flex; align-items: center; gap: 8px;"><span class="avatar" style="background: #60a5fa;">
|
|
145
|
-
<div class="card" style="padding: 14px; margin-top: 16px;"><div class="label-upper">Your progress</div><div style="font-size: 24px; font-weight: 700;">${completed} <span style="color: var(--text-muted); font-weight: 400;">/ ${
|
|
181
|
+
<div style="display: flex; align-items: center; gap: 8px;"><span class="avatar" style="background: #60a5fa;">SG</span><div><div style="font-size: 13px; font-weight: 600;">Signing session</div><div class="mono" style="font-size: 10px; color: var(--text-muted);">${document.id}</div></div></div>
|
|
182
|
+
<div class="card" style="padding: 14px; margin-top: 16px;"><div class="label-upper">Your progress</div><div style="font-size: 24px; font-weight: 700;">${completed} <span style="color: var(--text-muted); font-weight: 400;">/ ${total}</span></div><div style="font-size: 11px; color: var(--text-muted); margin-top: 2px;">${total === 0 ? 'No fields assigned' : total - completed === 0 ? 'All fields complete' : `${total - completed} fields remaining`}</div><div class="progress-track" style="margin-top: 12px;"><div class="progress-fill" style="width: ${progress}%"></div></div></div>
|
|
146
183
|
<div style="margin-top: 20px;" class="label-upper">Step by step</div>
|
|
147
184
|
${this.signFields.map((field, index) => {
|
|
148
185
|
const filled = this.signedFieldIds.includes(field.id);
|
|
149
|
-
const active =
|
|
186
|
+
const active = activeField?.id === field.id && !filled;
|
|
150
187
|
return html `<div class="recipient-line ${active ? 'active' : ''}" @click=${() => !filled ? this.activeFieldId = field.id : undefined}><span class="avatar" style="width: 22px; height: 22px; background: ${filled ? 'var(--success)' : active ? 'var(--accent)' : 'var(--bg-input)'}; color: ${filled || active ? 'white' : 'var(--text-muted)'};">${filled ? '✓' : index + 1}</span><div style="flex: 1;"><div style="font-size: 12px; font-weight: 500; text-decoration: ${filled ? 'line-through' : 'none'};">${field.label}</div><div class="mono" style="font-size: 10px; color: var(--text-muted);">${field.type} · page ${field.page}</div></div>${active ? icon('chevronRight', 12) : ''}</div>`;
|
|
151
188
|
})}
|
|
152
|
-
<button class="btn primary" style="width: 100%; height: 44px; margin-top: 20px;" @click=${() => this.
|
|
153
|
-
<div style="margin-top: 12px; padding: 10px; font-size: 10px; color: var(--text-muted); line-height: 1.5; text-align: center; border-radius: 6px; background: var(--bg-el);">
|
|
189
|
+
<button class="btn primary" style="width: 100%; height: 44px; margin-top: 20px;" ?disabled=${total === 0} @click=${() => this.handlePrimaryAction()}>${total === 0 ? 'No fields to sign' : completed === total ? 'Finish & submit' : `Continue - ${activeField?.label || 'next field'}`}</button>
|
|
190
|
+
<div style="margin-top: 12px; padding: 10px; font-size: 10px; color: var(--text-muted); line-height: 1.5; text-align: center; border-radius: 6px; background: var(--bg-el);">Field completion is captured locally until the host application submits it through a signing API.</div>
|
|
154
191
|
</div>
|
|
155
192
|
</div>
|
|
156
193
|
`;
|
|
@@ -166,4 +203,4 @@ let SdigWorkspaceSign = (() => {
|
|
|
166
203
|
return SdigWorkspaceSign = _classThis;
|
|
167
204
|
})();
|
|
168
205
|
export { SdigWorkspaceSign };
|
|
169
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
206
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2RpZy13b3Jrc3BhY2Utc2lnbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3RzX3dlYi9lbGVtZW50cy9zZGlnLXdvcmtzcGFjZS9zZGlnLXdvcmtzcGFjZS1zaWduLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEVBQUUsV0FBVyxFQUFFLFFBQVEsRUFBRSxLQUFLLEVBQUUsSUFBSSxFQUFFLGFBQWEsRUFBdUIsR0FBRyxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDMUgsT0FBTyxFQUFFLFlBQVksRUFBRSxhQUFhLEVBQUUsVUFBVSxFQUFFLFlBQVksRUFBRSxJQUFJLEVBQUUsSUFBSSxFQUFFLG1CQUFtQixFQUFFLGtCQUFrQixFQUEyQyxNQUFNLDRCQUE0QixDQUFDO0lBU3BMLGlCQUFpQjs0QkFEN0IsYUFBYSxDQUFDLHFCQUFxQixDQUFDOzs7O3NCQUNFLFdBQVc7Ozs7Ozs7Ozs7Ozs7aUNBQW5CLFNBQVEsV0FBVzs7OztvQ0FJL0MsUUFBUSxDQUFDLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxDQUFDO2tDQUM5QixRQUFRLENBQUMsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLENBQUM7eUNBQzlCLEtBQUssRUFBRTswQ0FDUCxLQUFLLEVBQUU7WUFId0IsNktBQWdCLFFBQVEsNkJBQVIsUUFBUSwyRkFBa0M7WUFDMUQsdUtBQWdCLE1BQU0sNkJBQU4sTUFBTSx1RkFBaUM7WUFDOUUsNExBQWlCLGFBQWEsNkJBQWIsYUFBYSxxR0FBZ0I7WUFDOUMsK0xBQWlCLGNBQWMsNkJBQWQsY0FBYyx1R0FBZ0I7WUFQMUQsNktBdUhDOzs7O1FBdEhRLE1BQU0sQ0FBQyxJQUFJLEdBQUcsR0FBRyxFQUFFLENBQUMsa0JBQWtCLENBQUMsSUFBSSxDQUFBLDZDQUE2QyxDQUFDLENBQUM7UUFDMUYsTUFBTSxDQUFDLFVBQVUsR0FBRyxDQUFDLDZCQUE2QixD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
|
|
@@ -34,6 +34,7 @@ export const workspaceBaseStyles = css `
|
|
|
34
34
|
* { box-sizing: border-box; }
|
|
35
35
|
button, input, textarea { font: inherit; }
|
|
36
36
|
button { border: 0; cursor: pointer; }
|
|
37
|
+
button:disabled { cursor: not-allowed; opacity: 0.52; }
|
|
37
38
|
dees-icon { flex-shrink: 0; }
|
|
38
39
|
|
|
39
40
|
.mono {
|
|
@@ -290,21 +291,21 @@ export const workspaceBaseStyles = css `
|
|
|
290
291
|
}
|
|
291
292
|
`;
|
|
292
293
|
export function icon(name, size = 14) {
|
|
293
|
-
const iconMap = {
|
|
294
|
-
inbox: 'lucide:Inbox', plus: 'lucide:Plus', folder: 'lucide:Folder', shield: 'lucide:Shield', code: 'lucide:Code2',
|
|
295
|
-
user: 'lucide:User', settings: 'lucide:Settings', upload: 'lucide:Upload', file: 'lucide:FileText', sign: 'lucide:PenTool',
|
|
296
|
-
clock: 'lucide:Clock', search: 'lucide:Search', more: 'lucide:MoreHorizontal', send: 'lucide:Send', check: 'lucide:Check',
|
|
297
|
-
eye: 'lucide:Eye', calendar: 'lucide:Calendar', type: 'lucide:Type', download: 'lucide:Download', hash: 'lucide:Hash',
|
|
298
|
-
github: 'lucide:GitBranch', git: 'lucide:GitBranch', server: 'lucide:Server', star: 'lucide:Star', sparkle: 'lucide:Sparkles',
|
|
299
|
-
chevronRight: 'lucide:ChevronRight', chevronDown: 'lucide:ChevronDown', x: 'lucide:X', activity: 'lucide:Activity',
|
|
300
|
-
};
|
|
301
294
|
return html `<dees-icon .icon=${iconMap[name] || iconMap.file} style="font-size: ${size}px;"></dees-icon>`;
|
|
302
295
|
}
|
|
296
|
+
const iconMap = {
|
|
297
|
+
inbox: 'lucide:Inbox', plus: 'lucide:Plus', folder: 'lucide:Folder', shield: 'lucide:Shield', code: 'lucide:Code2',
|
|
298
|
+
user: 'lucide:User', settings: 'lucide:Settings', upload: 'lucide:Upload', file: 'lucide:FileText', sign: 'lucide:PenTool',
|
|
299
|
+
clock: 'lucide:Clock', search: 'lucide:Search', more: 'lucide:MoreHorizontal', send: 'lucide:Send', check: 'lucide:Check',
|
|
300
|
+
eye: 'lucide:Eye', calendar: 'lucide:Calendar', type: 'lucide:Type', download: 'lucide:Download', hash: 'lucide:Hash',
|
|
301
|
+
github: 'lucide:GitBranch', git: 'lucide:GitBranch', server: 'lucide:Server', star: 'lucide:Star', sparkle: 'lucide:Sparkles',
|
|
302
|
+
chevronRight: 'lucide:ChevronRight', chevronDown: 'lucide:ChevronDown', x: 'lucide:X', activity: 'lucide:Activity',
|
|
303
|
+
};
|
|
303
304
|
export function pill(label, tone = 'default', dot = false) {
|
|
304
305
|
return html `<span class="pill ${tone} ${dot ? 'dot' : ''}">${label}</span>`;
|
|
305
306
|
}
|
|
306
307
|
export function actionButton(label, variant = 'outline', iconName, onClick) {
|
|
307
|
-
return html `<button class="btn ${variant}"
|
|
308
|
+
return html `<button class="btn ${variant}" ?disabled=${!onClick} title=${onClick ? '' : 'This action must be wired by the host application.'} @click=${onClick}>${iconName ? icon(iconName, 13) : ''}${label}</button>`;
|
|
308
309
|
}
|
|
309
310
|
export function topBar(config) {
|
|
310
311
|
return html `
|
|
@@ -382,4 +383,4 @@ export function requestWorkspaceView(element, view) {
|
|
|
382
383
|
composed: true,
|
|
383
384
|
}));
|
|
384
385
|
}
|
|
385
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
386
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2RpZy13b3Jrc3BhY2Uuc2hhcmVkLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vdHNfd2ViL2VsZW1lbnRzL3NkaWctd29ya3NwYWNlL3NkaWctd29ya3NwYWNlLnNoYXJlZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsSUFBSSxFQUFFLEdBQUcsRUFBdUIsTUFBTSw2QkFBNkIsQ0FBQztBQUM3RSxPQUFPLG9GQUFvRixDQUFDO0FBZ0Q1RixNQUFNLENBQUMsTUFBTSxhQUFhLEdBQW1CO0lBQzNDLEVBQUUsRUFBRSxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsdUNBQXVDLEVBQUUsTUFBTSxFQUFFLFVBQVUsRUFBRSxVQUFVLEVBQUUsQ0FBQyxFQUFFLElBQUksRUFBRSxZQUFZLEVBQUUsUUFBUSxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFFLEVBQUUsRUFBRSxJQUFJLEVBQUUsWUFBWSxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRSxFQUFFLEVBQUUsSUFBSSxFQUFFLEtBQUssRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUUsQ0FBQyxFQUFFLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRSxLQUFLLEVBQUUsRUFBRSxFQUFFLFFBQVEsRUFBRSxPQUFPLEVBQUU7SUFDclUsRUFBRSxFQUFFLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxzQkFBc0IsRUFBRSxNQUFNLEVBQUUsUUFBUSxFQUFFLFVBQVUsRUFBRSxDQUFDLEVBQUUsSUFBSSxFQUFFLFlBQVksRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUUsRUFBRSxFQUFFLElBQUksRUFBRSxLQUFLLEVBQUUsUUFBUSxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFFLENBQUMsRUFBRSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLENBQUMsRUFBRTtJQUNwTyxFQUFFLEVBQUUsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLCtCQUErQixFQUFFLE1BQU0sRUFBRSxVQUFVLEVBQUUsVUFBVSxFQUFFLENBQUMsRUFBRSxJQUFJLEVBQUUsZ0JBQWdCLEVBQUUsUUFBUSxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLEVBQUUsRUFBRSxJQUFJLEVBQUUsY0FBYyxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRSxFQUFFLEVBQUUsSUFBSSxFQUFFLEtBQUssRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsQ0FBQyxFQUFFLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxFQUFFLGlCQUFpQixFQUFFLEtBQUssRUFBRSxFQUFFLEVBQUUsUUFBUSxFQUFFLE9BQU8sRUFBRTtJQUM3VSxFQUFFLEVBQUUsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLCtCQUErQixFQUFFLE1BQU0sRUFBRSxVQUFVLEVBQUUsVUFBVSxFQUFFLENBQUMsRUFBRSxJQUFJLEVBQUUsWUFBWSxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRSxFQUFFLEVBQUUsSUFBSSxFQUFFLEtBQUssRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUUsQ0FBQyxFQUFFLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRSxLQUFLLEVBQUUsQ0FBQyxFQUFFO0lBQ25QLEVBQUUsRUFBRSxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsMEJBQTBCLEVBQUUsTUFBTSxFQUFFLE9BQU8sRUFBRSxVQUFVLEVBQUUsQ0FBQyxFQUFFLElBQUksRUFBRSxLQUFLLEVBQUUsUUFBUSxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLENBQUMsRUFBRSxPQUFPLEVB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
|
package/dist_ts_web/plugins.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
export { signaturePad, };
|
|
1
|
+
import SignaturePad from 'signature_pad';
|
|
2
|
+
export type { PointGroup as TSignaturePadPointGroup } from 'signature_pad';
|
|
3
|
+
export { SignaturePad as signaturePad, };
|
package/dist_ts_web/plugins.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
// third party
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGx1Z2lucy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3RzX3dlYi9wbHVnaW5zLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWM7QUFDZCxPQUFPLGVBQWUsTUFBTSxlQUFlLENBQUM7QUFFNUMsTUFBTSxZQUFZLEdBQUcsZUFBMEMsQ0FBQztBQUVoRSxPQUFPLEVBQ0wsWUFBWSxHQUNiLENBQUEifQ==
|
|
2
|
+
import SignaturePad from 'signature_pad';
|
|
3
|
+
export { SignaturePad as signaturePad, };
|
|
4
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGx1Z2lucy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3RzX3dlYi9wbHVnaW5zLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWM7QUFDZCxPQUFPLFlBQVksTUFBTSxlQUFlLENBQUM7QUFHekMsT0FBTyxFQUNMLFlBQVksSUFBSSxZQUFZLEdBQzdCLENBQUEifQ==
|
package/package.json
CHANGED
|
@@ -1,17 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@signature.digital/catalog",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.8.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "A comprehensive catalog of customizable web components designed for building and managing e-signature applications.",
|
|
6
6
|
"exports": {
|
|
7
7
|
".": "./dist_ts_web/index.js"
|
|
8
8
|
},
|
|
9
9
|
"type": "module",
|
|
10
|
-
"scripts": {
|
|
11
|
-
"test": "pnpm run build",
|
|
12
|
-
"build": "tsbuild tsfolders --allowimplicitany && tsbundle",
|
|
13
|
-
"watch": "tswatch"
|
|
14
|
-
},
|
|
15
10
|
"author": "Task Venture Capital GmbH",
|
|
16
11
|
"license": "MIT",
|
|
17
12
|
"dependencies": {
|
|
@@ -23,11 +18,12 @@
|
|
|
23
18
|
"signature_pad": "^5.1.3"
|
|
24
19
|
},
|
|
25
20
|
"devDependencies": {
|
|
26
|
-
"@git.zone/tsbuild": "^4.4.
|
|
27
|
-
"@git.zone/tsbundle": "2.10.
|
|
28
|
-
"@git.zone/
|
|
21
|
+
"@git.zone/tsbuild": "^4.4.2",
|
|
22
|
+
"@git.zone/tsbundle": "2.10.4",
|
|
23
|
+
"@git.zone/tstest": "^3.6.6",
|
|
24
|
+
"@git.zone/tswatch": "^3.3.5",
|
|
29
25
|
"@push.rocks/projectinfo": "^5.1.0",
|
|
30
|
-
"@types/node": "^25.
|
|
26
|
+
"@types/node": "^25.9.1"
|
|
31
27
|
},
|
|
32
28
|
"files": [
|
|
33
29
|
"ts/**/*",
|
|
@@ -59,5 +55,10 @@
|
|
|
59
55
|
"custom elements",
|
|
60
56
|
"electronic signing",
|
|
61
57
|
"npm package"
|
|
62
|
-
]
|
|
63
|
-
|
|
58
|
+
],
|
|
59
|
+
"scripts": {
|
|
60
|
+
"test": "pnpm run build && tstest test/ --web --verbose --logfile",
|
|
61
|
+
"build": "tsbuild tsfolders --allowimplicitany && tsbundle",
|
|
62
|
+
"watch": "tswatch"
|
|
63
|
+
}
|
|
64
|
+
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { DeesElement, html, customElement, type TemplateResult, css, cssManager } from '@design.estate/dees-element';
|
|
2
|
+
import '../sdig-signpad/index.js';
|
|
2
3
|
|
|
3
4
|
declare global {
|
|
4
5
|
interface HTMLElementTagNameMap {
|
|
@@ -68,6 +69,13 @@ export class SignBox extends DeesElement {
|
|
|
68
69
|
.button:hover {
|
|
69
70
|
color: ${cssManager.bdTheme('#111111', '#eeeeeb')};
|
|
70
71
|
}
|
|
72
|
+
|
|
73
|
+
button.button {
|
|
74
|
+
appearance: none;
|
|
75
|
+
border: 0;
|
|
76
|
+
background: transparent;
|
|
77
|
+
font: inherit;
|
|
78
|
+
}
|
|
71
79
|
`
|
|
72
80
|
];
|
|
73
81
|
|
|
@@ -79,29 +87,34 @@ export class SignBox extends DeesElement {
|
|
|
79
87
|
</div>
|
|
80
88
|
<sdig-signpad></sdig-signpad>
|
|
81
89
|
<div class="actions">
|
|
82
|
-
<
|
|
90
|
+
<button class="button" data-action="clear" @click=${async () => {
|
|
83
91
|
await this.shadowRoot?.querySelector('sdig-signpad')?.clear();
|
|
84
92
|
}}>
|
|
85
93
|
Clear
|
|
86
|
-
</
|
|
87
|
-
<
|
|
94
|
+
</button>
|
|
95
|
+
<button class="button" data-action="undo" @click=${async () => {
|
|
88
96
|
await this.shadowRoot?.querySelector('sdig-signpad')?.undo();
|
|
89
97
|
}}>
|
|
90
98
|
Undo
|
|
91
|
-
</
|
|
92
|
-
<
|
|
99
|
+
</button>
|
|
100
|
+
<button class="button" data-action="submit" @click=${async () => {
|
|
93
101
|
const signaturePad = this.shadowRoot?.querySelector('sdig-signpad');
|
|
94
102
|
if (!signaturePad) return;
|
|
103
|
+
if (await signaturePad.isEmpty()) return;
|
|
95
104
|
const signature = await signaturePad.toData();
|
|
105
|
+
const svg = await signaturePad.toSVG();
|
|
96
106
|
this.dispatchEvent(new CustomEvent('signature', {
|
|
97
107
|
detail: {
|
|
98
108
|
signature,
|
|
99
|
-
|
|
109
|
+
svg,
|
|
110
|
+
createdAt: Date.now(),
|
|
111
|
+
},
|
|
112
|
+
bubbles: true,
|
|
113
|
+
composed: true,
|
|
100
114
|
}));
|
|
101
|
-
console.log(signature);
|
|
102
115
|
}}>
|
|
103
116
|
Submit Signature
|
|
104
|
-
</
|
|
117
|
+
</button>
|
|
105
118
|
</div>
|
|
106
119
|
</div>
|
|
107
120
|
`;
|
|
@@ -61,20 +61,26 @@ export class SignPad extends DeesElement {
|
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
public signaturePad?: typeof plugins.signaturePad.prototype;
|
|
64
|
+
private canvas?: HTMLCanvasElement;
|
|
64
65
|
|
|
65
66
|
public async firstUpdated() {
|
|
66
67
|
await this.domtoolsPromise;
|
|
67
68
|
const mainbox = this.shadowRoot?.querySelector('.mainbox');
|
|
68
69
|
if (!mainbox) return;
|
|
69
|
-
|
|
70
|
-
mainbox.appendChild(canvas);
|
|
70
|
+
this.canvas = document.createElement('canvas');
|
|
71
|
+
mainbox.appendChild(this.canvas);
|
|
71
72
|
await this.resizeCanvas();
|
|
72
|
-
this.signaturePad = new plugins.signaturePad(canvas, {
|
|
73
|
+
this.signaturePad = new plugins.signaturePad(this.canvas, {
|
|
73
74
|
|
|
74
75
|
});
|
|
75
76
|
this.signaturePad.on();
|
|
76
77
|
}
|
|
77
78
|
|
|
79
|
+
public async disconnectedCallback() {
|
|
80
|
+
this.signaturePad?.off();
|
|
81
|
+
await super.disconnectedCallback();
|
|
82
|
+
}
|
|
83
|
+
|
|
78
84
|
public async resizeCanvas() {
|
|
79
85
|
const mainbox = this.shadowRoot?.querySelector('.mainbox');
|
|
80
86
|
const canvas = this.shadowRoot?.querySelector('canvas');
|
|
@@ -92,12 +98,16 @@ export class SignPad extends DeesElement {
|
|
|
92
98
|
this.signaturePad?.clear();
|
|
93
99
|
}
|
|
94
100
|
|
|
95
|
-
public async
|
|
101
|
+
public async isEmpty(): Promise<boolean> {
|
|
102
|
+
return this.signaturePad?.isEmpty() ?? true;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
public async toData(): Promise<plugins.TSignaturePadPointGroup[]> {
|
|
96
106
|
const returnData = this.signaturePad?.toData() || [];
|
|
97
107
|
return returnData;
|
|
98
108
|
}
|
|
99
109
|
|
|
100
|
-
public async fromData(dataArrayArg:
|
|
110
|
+
public async fromData(dataArrayArg: plugins.TSignaturePadPointGroup[]) {
|
|
101
111
|
this.signaturePad?.fromData(dataArrayArg);
|
|
102
112
|
}
|
|
103
113
|
|
|
@@ -170,6 +170,16 @@ export class SdigWorkspaceCompose extends DeesElement {
|
|
|
170
170
|
return Math.max(min, Math.min(max, value));
|
|
171
171
|
}
|
|
172
172
|
|
|
173
|
+
private parseDragOffset(rawOffset: string | undefined, fallback: { x: number; y: number }): { x: number; y: number } {
|
|
174
|
+
if (!rawOffset) return fallback;
|
|
175
|
+
try {
|
|
176
|
+
const parsed = JSON.parse(rawOffset) as Partial<{ x: number; y: number }>;
|
|
177
|
+
return Number.isFinite(parsed.x) && Number.isFinite(parsed.y) ? { x: parsed.x!, y: parsed.y! } : fallback;
|
|
178
|
+
} catch {
|
|
179
|
+
return fallback;
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
|
|
173
183
|
private emitFieldsChange() {
|
|
174
184
|
this.dispatchEvent(new CustomEvent('fields-change', {
|
|
175
185
|
detail: { fields: this.fields },
|
|
@@ -473,12 +483,13 @@ export class SdigWorkspaceCompose extends DeesElement {
|
|
|
473
483
|
if (!this.draggedFieldDefinition && !transferredType) return;
|
|
474
484
|
const definition = this.draggedFieldDefinition || this.fieldDefinition(transferredType);
|
|
475
485
|
const transferredOffset = event.dataTransfer?.getData('application/x-signature-field-offset');
|
|
476
|
-
const
|
|
486
|
+
const fallbackOffset = { x: definition.w / 2, y: definition.h / 2 };
|
|
487
|
+
const offset = this.draggedFieldGrabOffset || this.parseDragOffset(transferredOffset, fallbackOffset);
|
|
477
488
|
const rect = page.getBoundingClientRect();
|
|
478
489
|
const x = Math.round(event.clientX - rect.left - offset.x);
|
|
479
490
|
const y = Math.round(event.clientY - rect.top - offset.y);
|
|
480
491
|
const nextField: IFieldPlacement = {
|
|
481
|
-
id: `field_${Date.now()}`,
|
|
492
|
+
id: globalThis.crypto?.randomUUID?.() || `field_${Date.now()}_${Math.random().toString(36).slice(2)}`,
|
|
482
493
|
type: definition.type,
|
|
483
494
|
x: Math.max(0, Math.min(Math.max(0, rect.width - definition.w), x)),
|
|
484
495
|
y: Math.max(0, Math.min(Math.max(0, rect.height - definition.h), y)),
|
|
@@ -68,7 +68,8 @@ export class SdigWorkspaceInbox extends DeesElement {
|
|
|
68
68
|
bubbles: true,
|
|
69
69
|
composed: true,
|
|
70
70
|
}));
|
|
71
|
-
|
|
71
|
+
const view = doc.status === 'draft' ? 'compose' : doc.status === 'signed' || doc.status === 'declined' ? 'audit' : 'sign';
|
|
72
|
+
requestWorkspaceView(this, view);
|
|
72
73
|
}
|
|
73
74
|
|
|
74
75
|
public render(): TemplateResult {
|
|
@@ -29,7 +29,13 @@ export class SdigWorkspaceSign extends DeesElement {
|
|
|
29
29
|
`];
|
|
30
30
|
|
|
31
31
|
private get signFields() {
|
|
32
|
-
return this.fields
|
|
32
|
+
return this.fields;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
private get activeField(): IFieldPlacement | undefined {
|
|
36
|
+
return this.signFields.find((field) => field.id === this.activeFieldId && !this.signedFieldIds.includes(field.id))
|
|
37
|
+
|| this.signFields.find((field) => !this.signedFieldIds.includes(field.id))
|
|
38
|
+
|| this.signFields[0];
|
|
33
39
|
}
|
|
34
40
|
|
|
35
41
|
private fieldIcon(type: IFieldPlacement['type']): string {
|
|
@@ -39,29 +45,59 @@ export class SdigWorkspaceSign extends DeesElement {
|
|
|
39
45
|
}
|
|
40
46
|
|
|
41
47
|
private signField(fieldId: string) {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
48
|
+
const field = this.signFields.find((currentField) => currentField.id === fieldId);
|
|
49
|
+
if (!field || this.signedFieldIds.includes(fieldId)) return;
|
|
50
|
+
this.signedFieldIds = [...this.signedFieldIds, fieldId];
|
|
51
|
+
this.dispatchEvent(new CustomEvent('field-signed', {
|
|
52
|
+
detail: { document: this.document, field, signedFieldIds: this.signedFieldIds },
|
|
53
|
+
bubbles: true,
|
|
54
|
+
composed: true,
|
|
55
|
+
}));
|
|
56
|
+
const next = this.signFields.find((currentField) => !this.signedFieldIds.includes(currentField.id));
|
|
46
57
|
if (next) this.activeFieldId = next.id;
|
|
47
58
|
}
|
|
48
59
|
|
|
60
|
+
private emitSigningComplete() {
|
|
61
|
+
if (this.signedFieldIds.length !== this.signFields.length) return;
|
|
62
|
+
this.dispatchEvent(new CustomEvent('signing-complete', {
|
|
63
|
+
detail: {
|
|
64
|
+
document: this.document,
|
|
65
|
+
fields: this.signFields,
|
|
66
|
+
signedFieldIds: this.signedFieldIds,
|
|
67
|
+
completedAt: Date.now(),
|
|
68
|
+
},
|
|
69
|
+
bubbles: true,
|
|
70
|
+
composed: true,
|
|
71
|
+
}));
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
private handlePrimaryAction() {
|
|
75
|
+
if (!this.signFields.length) return;
|
|
76
|
+
if (this.signedFieldIds.length === this.signFields.length) {
|
|
77
|
+
this.emitSigningComplete();
|
|
78
|
+
return;
|
|
79
|
+
}
|
|
80
|
+
const activeField = this.activeField;
|
|
81
|
+
if (activeField) this.signField(activeField.id);
|
|
82
|
+
}
|
|
83
|
+
|
|
49
84
|
private renderSignedValue(field: IFieldPlacement): TemplateResult {
|
|
50
|
-
if (field.type === 'signature') return html`<span style="font-
|
|
51
|
-
if (field.type === 'date') return html`<span class="mono" style="font-size: 12px; color: hsl(0 0% 18%);">
|
|
52
|
-
return html`<span style="font-size: 12px; color: hsl(0 0% 18%);">
|
|
85
|
+
if (field.type === 'signature') return html`<span style="font-size: 12px; font-weight: 600; color: hsl(220 50% 30%);">Signature captured</span>`;
|
|
86
|
+
if (field.type === 'date') return html`<span class="mono" style="font-size: 12px; color: hsl(0 0% 18%);">Date captured</span>`;
|
|
87
|
+
return html`<span style="font-size: 12px; color: hsl(0 0% 18%);">Completed</span>`;
|
|
53
88
|
}
|
|
54
89
|
|
|
55
90
|
public render(): TemplateResult {
|
|
56
91
|
const document = this.document || demoDocuments[0];
|
|
57
92
|
const completed = this.signedFieldIds.length;
|
|
58
|
-
const
|
|
59
|
-
const
|
|
93
|
+
const total = this.signFields.length;
|
|
94
|
+
const progress = total ? Math.round((completed / total) * 100) : 0;
|
|
95
|
+
const activeField = this.activeField;
|
|
60
96
|
|
|
61
97
|
return html`
|
|
62
98
|
<div class="recipient-header">
|
|
63
99
|
<div style="display: flex; align-items: center; gap: 12px;"><span class="logomark">s</span><div><div style="font-size: 12px; font-weight: 600;">${document.title}</div><div class="mono" style="font-size: 10px; color: var(--text-muted);">From ${document.sender} · ${document.id} · ${document.pages} pages</div></div></div>
|
|
64
|
-
<div class="actions"><span class="pill
|
|
100
|
+
<div class="actions"><span class="pill info">${icon('shield', 12)} Sender details supplied by host</span>${actionButton('Decline', 'outline')}${actionButton('PDF', 'outline', 'download')}</div>
|
|
65
101
|
</div>
|
|
66
102
|
<div class="progress-track"><div class="progress-fill" style="width: ${progress}%"></div></div>
|
|
67
103
|
<div class="sign-layout">
|
|
@@ -70,23 +106,23 @@ export class SdigWorkspaceSign extends DeesElement {
|
|
|
70
106
|
${fakeDocument()}
|
|
71
107
|
${this.signFields.map((field) => {
|
|
72
108
|
const filled = this.signedFieldIds.includes(field.id);
|
|
73
|
-
const active =
|
|
109
|
+
const active = activeField?.id === field.id && !filled;
|
|
74
110
|
return html`<div class="field-box ${active ? 'selected' : ''}" style="--x: ${field.x}px; --y: ${field.y}px; --w: ${field.w}px; --h: ${field.h}px; --field-color: ${filled ? 'transparent' : 'var(--accent)'}; color: ${filled ? 'hsl(220 50% 30%)' : 'var(--accent)'}; background: ${filled ? 'transparent' : 'color-mix(in srgb, var(--accent) 12%, transparent)'};" @click=${() => !filled ? this.signField(field.id) : undefined}>${filled ? this.renderSignedValue(field) : html`${icon(this.fieldIcon(field.type), 12)}<span>${active ? html`<span style="display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: pulse 1.4s infinite;"></span>` : ''}${field.label}</span>`}</div>`;
|
|
75
111
|
})}
|
|
76
112
|
<div class="mono" style="position: absolute; bottom: 14px; right: 18px; font-size: 9px; color: hsl(0 0% 60%);">Page 1 of ${document.pages}</div>
|
|
77
113
|
</div>
|
|
78
114
|
</div>
|
|
79
115
|
<div class="sign-panel">
|
|
80
|
-
<div style="display: flex; align-items: center; gap: 8px;"><span class="avatar" style="background: #60a5fa;">
|
|
81
|
-
<div class="card" style="padding: 14px; margin-top: 16px;"><div class="label-upper">Your progress</div><div style="font-size: 24px; font-weight: 700;">${completed} <span style="color: var(--text-muted); font-weight: 400;">/ ${
|
|
116
|
+
<div style="display: flex; align-items: center; gap: 8px;"><span class="avatar" style="background: #60a5fa;">SG</span><div><div style="font-size: 13px; font-weight: 600;">Signing session</div><div class="mono" style="font-size: 10px; color: var(--text-muted);">${document.id}</div></div></div>
|
|
117
|
+
<div class="card" style="padding: 14px; margin-top: 16px;"><div class="label-upper">Your progress</div><div style="font-size: 24px; font-weight: 700;">${completed} <span style="color: var(--text-muted); font-weight: 400;">/ ${total}</span></div><div style="font-size: 11px; color: var(--text-muted); margin-top: 2px;">${total === 0 ? 'No fields assigned' : total - completed === 0 ? 'All fields complete' : `${total - completed} fields remaining`}</div><div class="progress-track" style="margin-top: 12px;"><div class="progress-fill" style="width: ${progress}%"></div></div></div>
|
|
82
118
|
<div style="margin-top: 20px;" class="label-upper">Step by step</div>
|
|
83
119
|
${this.signFields.map((field, index) => {
|
|
84
120
|
const filled = this.signedFieldIds.includes(field.id);
|
|
85
|
-
const active =
|
|
121
|
+
const active = activeField?.id === field.id && !filled;
|
|
86
122
|
return html`<div class="recipient-line ${active ? 'active' : ''}" @click=${() => !filled ? this.activeFieldId = field.id : undefined}><span class="avatar" style="width: 22px; height: 22px; background: ${filled ? 'var(--success)' : active ? 'var(--accent)' : 'var(--bg-input)'}; color: ${filled || active ? 'white' : 'var(--text-muted)'};">${filled ? '✓' : index + 1}</span><div style="flex: 1;"><div style="font-size: 12px; font-weight: 500; text-decoration: ${filled ? 'line-through' : 'none'};">${field.label}</div><div class="mono" style="font-size: 10px; color: var(--text-muted);">${field.type} · page ${field.page}</div></div>${active ? icon('chevronRight', 12) : ''}</div>`;
|
|
87
123
|
})}
|
|
88
|
-
<button class="btn primary" style="width: 100%; height: 44px; margin-top: 20px;" @click=${() => this.
|
|
89
|
-
<div style="margin-top: 12px; padding: 10px; font-size: 10px; color: var(--text-muted); line-height: 1.5; text-align: center; border-radius: 6px; background: var(--bg-el);">
|
|
124
|
+
<button class="btn primary" style="width: 100%; height: 44px; margin-top: 20px;" ?disabled=${total === 0} @click=${() => this.handlePrimaryAction()}>${total === 0 ? 'No fields to sign' : completed === total ? 'Finish & submit' : `Continue - ${activeField?.label || 'next field'}`}</button>
|
|
125
|
+
<div style="margin-top: 12px; padding: 10px; font-size: 10px; color: var(--text-muted); line-height: 1.5; text-align: center; border-radius: 6px; background: var(--bg-el);">Field completion is captured locally until the host application submits it through a signing API.</div>
|
|
90
126
|
</div>
|
|
91
127
|
</div>
|
|
92
128
|
`;
|