diff --git a/changelog.md b/changelog.md index 5238370..bcb6684 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,12 @@ # Changelog +## 2026-05-02 - 1.6.0 - feat(workspace) +support configurable inbox documents and emit document-open events + +- Adds a documents property to the workspace and inbox components so document lists, counts, filters, and attention metrics use injected data instead of demo data. +- Passes documents from the workspace container into the inbox view for consistent sidebar and inbox counts. +- Emits a bubbling document-open event when an inbox item is opened to enable parent integrations and external handling. + ## 2026-05-02 - 1.5.1 - fix(sdig-workspace) make workspace view externally controllable and preserve explicit initial state diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index 2ad8951..6788fd7 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.5.1', + version: '1.6.0', 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-inbox.ts b/ts_web/elements/sdig-workspace/sdig-workspace-inbox.ts index e9da5a3..f067494 100644 --- a/ts_web/elements/sdig-workspace/sdig-workspace-inbox.ts +++ b/ts_web/elements/sdig-workspace/sdig-workspace-inbox.ts @@ -14,6 +14,7 @@ export class SdigWorkspaceInbox extends DeesElement { public static demoGroups = ['Signature Digital Workspace']; @property({ type: String }) public accessor density: TDensity = 'comfortable'; + @property({ attribute: false }) public accessor documents: IDocumentRow[] = demoDocuments; @state() private accessor filter: string = 'all'; @state() private accessor search: string = ''; @@ -45,7 +46,7 @@ export class SdigWorkspaceInbox extends DeesElement { `]; private get filteredDocuments(): IDocumentRow[] { - return demoDocuments + return this.documents .filter((doc) => this.filter === 'all' || doc.status === this.filter) .filter((doc) => !this.search || doc.title.toLowerCase().includes(this.search.toLowerCase())); } @@ -62,23 +63,30 @@ export class SdigWorkspaceInbox extends DeesElement { } private openDocument(doc: IDocumentRow) { + this.dispatchEvent(new CustomEvent('document-open', { + detail: { document: doc }, + bubbles: true, + composed: true, + })); requestWorkspaceView(this, doc.status === 'signed' ? 'audit' : 'sign'); } public render(): TemplateResult { + const documents = this.documents; const filters = [ - { id: 'all', label: 'All', count: demoDocuments.length }, - { id: 'awaiting', label: 'Awaiting', count: demoDocuments.filter((doc) => doc.status === 'awaiting').length }, - { id: 'signed', label: 'Completed', count: demoDocuments.filter((doc) => doc.status === 'signed').length }, - { id: 'draft', label: 'Drafts', count: demoDocuments.filter((doc) => doc.status === 'draft').length }, - { id: 'declined', label: 'Declined', count: demoDocuments.filter((doc) => doc.status === 'declined').length }, + { id: 'all', label: 'All', count: documents.length }, + { id: 'awaiting', label: 'Awaiting', count: documents.filter((doc) => doc.status === 'awaiting').length }, + { id: 'signed', label: 'Completed', count: documents.filter((doc) => doc.status === 'signed').length }, + { id: 'draft', label: 'Drafts', count: documents.filter((doc) => doc.status === 'draft').length }, + { id: 'declined', label: 'Declined', count: documents.filter((doc) => doc.status === 'declined').length }, ]; + const attentionCount = documents.filter((doc) => doc.status === 'awaiting').length; return html` ${topBar({ breadcrumb: ['signature.digital', 'Lossless GmbH', 'Inbox'], title: 'Inbox', - subtitle: pill(`${demoDocuments.filter((doc) => doc.status === 'awaiting').length} need attention`, 'info'), + subtitle: pill(`${attentionCount} need attention`, 'info'), actions: html`${actionButton('Import', 'outline', 'upload')}${actionButton('New document', 'primary', 'plus', () => requestWorkspaceView(this, 'compose'))}`, })}
diff --git a/ts_web/elements/sdig-workspace/sdig-workspace.ts b/ts_web/elements/sdig-workspace/sdig-workspace.ts index 2c1e026..e14e631 100644 --- a/ts_web/elements/sdig-workspace/sdig-workspace.ts +++ b/ts_web/elements/sdig-workspace/sdig-workspace.ts @@ -1,5 +1,5 @@ import { DeesElement, property, html, customElement, type TemplateResult, css } from '@design.estate/dees-element'; -import { icon, type TDensity, type TWorkspaceTheme, type TWorkspaceView } from './sdig-workspace.shared.js'; +import { demoDocuments, icon, type IDocumentRow, type TDensity, type TWorkspaceTheme, type TWorkspaceView } from './sdig-workspace.shared.js'; import './sdig-workspace-inbox.js'; import './sdig-workspace-compose.js'; import './sdig-workspace-sign.js'; @@ -23,6 +23,7 @@ export class SdigWorkspace extends DeesElement { @property({ type: String, reflect: true }) public accessor theme: TWorkspaceTheme = 'dark'; @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; public connectedCallback = async () => { await super.connectedCallback(); @@ -133,7 +134,7 @@ export class SdigWorkspace extends DeesElement { private renderSidebar(): TemplateResult { const navItems = [ - { id: 'inbox', label: 'Inbox', icon: 'inbox', count: 4 }, + { id: 'inbox', label: 'Inbox', icon: 'inbox', count: this.documents.length }, { id: 'compose', label: 'Compose', icon: 'plus' }, { id: 'templates', label: 'Templates', icon: 'folder', count: 12 }, { id: 'audit', label: 'Audit Trail', icon: 'shield' }, @@ -159,7 +160,7 @@ export class SdigWorkspace extends DeesElement { private renderView(): TemplateResult { switch (this.view) { - case 'inbox': return html``; + case 'inbox': return html``; case 'compose': return html``; case 'sign': return html``; case 'audit': return html``; @@ -167,7 +168,7 @@ export class SdigWorkspace extends DeesElement { case 'templates': return html``; case 'team': return html``; case 'settings': return html``; - default: return html``; + default: return html``; } }