@signature.digital/catalog 1.5.0 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@signature.digital/catalog",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "private": false,
   "description": "A comprehensive catalog of customizable web components designed for building and managing e-signature applications.",
   "exports": {

package/ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@signature.digital/catalog',
-  version: '1.5.0',
+  version: '1.6.0',
   description: 'A comprehensive catalog of customizable web components designed for building and managing e-signature applications.'
 }

package/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'))}`,
       })}
       <div class="filterbar">

package/ts_web/elements/sdig-workspace/sdig-workspace.ts

@@ -1,5 +1,5 @@
-import { DeesElement, property, state, html, customElement, type TemplateResult, css } from '@design.estate/dees-element';
-import { icon, type TDensity, type TWorkspaceTheme, type TWorkspaceView } from './sdig-workspace.shared.js';
+import { DeesElement, property, html, customElement, type TemplateResult, css } from '@design.estate/dees-element';
+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';
@@ -22,11 +22,14 @@ export class SdigWorkspace extends DeesElement {
   @property({ type: String }) public accessor density: TDensity = 'comfortable';
   @property({ type: String, reflect: true }) public accessor theme: TWorkspaceTheme = 'dark';
   @property({ type: String }) public accessor initialView: TWorkspaceView = 'inbox';
-  @state() private accessor view: 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();
-    this.view = this.initialView || 'inbox';
+    if (this.view === 'inbox' && this.initialView !== 'inbox') {
+      this.view = this.initialView;
+    }
     this.addEventListener('workspace-view-request', this.handleViewRequest as EventListener);
   };
 
@@ -131,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' },
@@ -157,7 +160,7 @@ export class SdigWorkspace extends DeesElement {
 
   private renderView(): TemplateResult {
     switch (this.view) {
-      case 'inbox': return html`<sdig-workspace-inbox class="view-host" .density=${this.density}></sdig-workspace-inbox>`;
+      case 'inbox': return html`<sdig-workspace-inbox class="view-host" .density=${this.density} .documents=${this.documents}></sdig-workspace-inbox>`;
       case 'compose': return html`<sdig-workspace-compose class="view-host"></sdig-workspace-compose>`;
       case 'sign': return html`<sdig-workspace-sign class="view-host"></sdig-workspace-sign>`;
       case 'audit': return html`<sdig-workspace-audit class="view-host"></sdig-workspace-audit>`;
@@ -165,7 +168,7 @@ export class SdigWorkspace extends DeesElement {
       case 'templates': return html`<sdig-workspace-placeholder class="view-host" label="Templates" subtitle="Reusable agreement templates"></sdig-workspace-placeholder>`;
       case 'team': return html`<sdig-workspace-placeholder class="view-host" label="Team" subtitle="Workspace members & roles"></sdig-workspace-placeholder>`;
       case 'settings': return html`<sdig-workspace-placeholder class="view-host" label="Settings" subtitle="Workspace, billing, security"></sdig-workspace-placeholder>`;
-      default: return html`<sdig-workspace-inbox class="view-host" .density=${this.density}></sdig-workspace-inbox>`;
+      default: return html`<sdig-workspace-inbox class="view-host" .density=${this.density} .documents=${this.documents}></sdig-workspace-inbox>`;
     }
   }