diff --git a/changelog.md b/changelog.md index bcb6684..f78bdf9 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,11 @@ # Changelog +## 2026-05-05 - 1.6.1 - fix(workspace) +pass the active document into sign and audit views + +- Add activeDocumentId support in the workspace container to resolve the selected document for nested views. +- Update sign and audit components to accept a document property and render dynamic title, sender, page count, breadcrumb, and status data instead of hardcoded values. + ## 2026-05-02 - 1.6.0 - feat(workspace) support configurable inbox documents and emit document-open events diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index 6788fd7..1e84d7a 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@signature.digital/catalog', - version: '1.6.0', + version: '1.6.1', description: 'A comprehensive catalog of customizable web components designed for building and managing e-signature applications.' } diff --git a/ts_web/elements/sdig-workspace/sdig-workspace-audit.ts b/ts_web/elements/sdig-workspace/sdig-workspace-audit.ts index 0b516d3..b8802cd 100644 --- a/ts_web/elements/sdig-workspace/sdig-workspace-audit.ts +++ b/ts_web/elements/sdig-workspace/sdig-workspace-audit.ts @@ -1,5 +1,5 @@ -import { DeesElement, html, customElement, type TemplateResult, css } from '@design.estate/dees-element'; -import { actionButton, demoRecipients, icon, pill, topBar, workspaceBaseStyles, workspaceDemoFrame } from './sdig-workspace.shared.js'; +import { DeesElement, property, html, customElement, type TemplateResult, css } from '@design.estate/dees-element'; +import { actionButton, demoDocuments, demoRecipients, icon, pill, topBar, workspaceBaseStyles, workspaceDemoFrame, type IDocumentRow } from './sdig-workspace.shared.js'; declare global { interface HTMLElementTagNameMap { @@ -12,6 +12,8 @@ export class SdigWorkspaceAudit extends DeesElement { public static demo = () => workspaceDemoFrame(html``); public static demoGroups = ['Signature Digital Workspace']; + @property({ attribute: false }) public accessor document: IDocumentRow = demoDocuments[1]; + public static styles = [workspaceBaseStyles, css` .audit-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; } .event-row { display: grid; grid-template-columns: 24px 180px 1fr 200px; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border-subtle); align-items: center; } @@ -19,6 +21,7 @@ export class SdigWorkspaceAudit extends DeesElement { `]; public render(): TemplateResult { + const document = this.document || demoDocuments[1]; const events = [ ['2026-05-02 14:32:18 UTC', 'Sarah Chen', 'Document signed', '81.221.4.18 · Brussels, BE', '0x4a7b…f29c', 'success'], ['2026-05-02 14:31:54 UTC', 'Sarah Chen', 'Signature adopted (typed)', '81.221.4.18 · Brussels, BE', '0x4a7b…f29c', 'info'], @@ -27,7 +30,7 @@ export class SdigWorkspaceAudit extends DeesElement { ['2026-05-02 10:54:22 UTC', 'Philipp K.', 'Document created', '92.42.114.7 · Berlin, DE', '0x1c8a…3b6f', 'default'], ]; return html` - ${topBar({ breadcrumb: ['signature.digital', 'Inbox', 'doc_8mK3pL', 'Audit Trail'], title: 'Audit Trail', subtitle: pill('completed · cryptographically sealed', 'success', true), actions: html`${actionButton('Certificate (PDF)', 'outline', 'download')}${actionButton('Verify on chain', 'outline', 'hash')}` })} + ${topBar({ breadcrumb: ['signature.digital', 'Inbox', document.id, 'Audit Trail'], title: `Audit Trail · ${document.title}`, subtitle: pill(`${document.status} · cryptographically sealed`, document.status === 'declined' ? 'error' : document.status === 'signed' ? 'success' : 'info', true), actions: html`${actionButton('Certificate (PDF)', 'outline', 'download')}${actionButton('Verify on chain', 'outline', 'hash')}` })}
Event log${events.length} events · immutable
${events.map((event) => html`
${event[0]}
${event[2]}
by ${event[1]} ${event[4] ? html`${event[4]}` : ''}
${event[3]}
`)}
Document hash
0x4a7b8f29c91e3d2a5b6c8e0f1d3c5a7b9d2e4f6a8c1e3d5f7b9c1e3a5b7d9f0e
Signers
${demoRecipients.map((recipient) => html`
${recipient.name.split(' ').map((part) => part[0]).slice(0, 2).join('')}
${recipient.name}
${recipient.email}
${icon('check', 12)}
`)}
${icon('shield', 13)} eIDAS Qualified · ESIGN Act compliant
Open-source verifier available. Anyone can independently validate this signature against the public ledger.
diff --git a/ts_web/elements/sdig-workspace/sdig-workspace-sign.ts b/ts_web/elements/sdig-workspace/sdig-workspace-sign.ts index 5a76e82..7be744f 100644 --- a/ts_web/elements/sdig-workspace/sdig-workspace-sign.ts +++ b/ts_web/elements/sdig-workspace/sdig-workspace-sign.ts @@ -1,5 +1,5 @@ -import { DeesElement, state, html, customElement, type TemplateResult, css } from '@design.estate/dees-element'; -import { actionButton, demoFields, fakeDocument, icon, pill, workspaceBaseStyles, workspaceDemoFrame, type IFieldPlacement } from './sdig-workspace.shared.js'; +import { DeesElement, property, state, html, customElement, type TemplateResult, css } from '@design.estate/dees-element'; +import { actionButton, demoDocuments, demoFields, fakeDocument, icon, pill, workspaceBaseStyles, workspaceDemoFrame, type IDocumentRow, type IFieldPlacement } from './sdig-workspace.shared.js'; declare global { interface HTMLElementTagNameMap { @@ -12,6 +12,7 @@ export class SdigWorkspaceSign extends DeesElement { public static demo = () => workspaceDemoFrame(html``); public static demoGroups = ['Signature Digital Workspace']; + @property({ attribute: false }) public accessor document: IDocumentRow = demoDocuments[0]; @state() private accessor activeFieldId: string = 'f1'; @state() private accessor signedFieldIds: string[] = []; @@ -51,13 +52,14 @@ export class SdigWorkspaceSign extends DeesElement { } public render(): TemplateResult { + const document = this.document || demoDocuments[0]; const completed = this.signedFieldIds.length; const progress = Math.round((completed / this.signFields.length) * 100); const activeField = this.signFields.find((field) => field.id === this.activeFieldId) || this.signFields[0]; return html`
-
s
Master Services Agreement
From Lossless GmbH · doc_8mK3pL · 14 pages
+
s
${document.title}
From ${document.sender} · ${document.id} · ${document.pages} pages
${icon('shield', 12)} Verified sender · DKIM ✓${actionButton('Decline', 'outline')}${actionButton('PDF', 'outline', 'download')}
@@ -70,7 +72,7 @@ export class SdigWorkspaceSign extends DeesElement { const active = this.activeFieldId === field.id && !filled; return html`
!filled ? this.signField(field.id) : undefined}>${filled ? this.renderSignedValue(field) : html`${icon(this.fieldIcon(field.type), 12)}${active ? html`` : ''}${field.label}`}
`; })} -
Page 1 of 14
+
Page 1 of ${document.pages}
diff --git a/ts_web/elements/sdig-workspace/sdig-workspace.ts b/ts_web/elements/sdig-workspace/sdig-workspace.ts index e14e631..523a0ce 100644 --- a/ts_web/elements/sdig-workspace/sdig-workspace.ts +++ b/ts_web/elements/sdig-workspace/sdig-workspace.ts @@ -24,6 +24,7 @@ export class SdigWorkspace extends DeesElement { @property({ type: String }) public accessor initialView: TWorkspaceView = 'inbox'; @property({ type: String, reflect: true }) public accessor view: TWorkspaceView = 'inbox'; @property({ attribute: false }) public accessor documents: IDocumentRow[] = demoDocuments; + @property({ type: String }) public accessor activeDocumentId: string = ''; public connectedCallback = async () => { await super.connectedCallback(); @@ -159,11 +160,12 @@ export class SdigWorkspace extends DeesElement { } private renderView(): TemplateResult { + const activeDocument = this.documents.find((document) => document.id === this.activeDocumentId) || this.documents[0] || demoDocuments[0]; switch (this.view) { case 'inbox': return html``; case 'compose': return html``; - case 'sign': return html``; - case 'audit': return html``; + case 'sign': return html``; + case 'audit': return html``; case 'developers': return html``; case 'templates': return html``; case 'team': return html``;