signature.digital/catalog
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(icons): migrate icon usage to the new dees-icon API and integrate collaboration sidebar into the editor

Browse Source
This commit is contained in:
Jürgen Kunz
2025-12-18 17:46:16 +00:00
parent 3d266c89b2
commit a9c2d2230c
17 changed files with 1090 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
changelog.md
View File

@@ -1,5 +1,15 @@
# Changelog
## 2025-12-18 - 1.2.0 - feat(icons)
migrate icon usage to the new dees-icon API and integrate collaboration sidebar into the editor
- Replaced deprecated .iconFA with .icon across multiple components
- Updated lucide icon identifiers to PascalCase/camelCase to match new dees-icon format
- Added sdig-collaboration-sidebar component and exported it from elements index
- Integrated a toggleable editor sidebar (PanelRight) and wired comment/suggestion navigation & add-comment events in sdig-contracteditor
- Added development hints (readme.hints.md) documenting dees-icon usage and icon name formats
- Minor UI/styling tweak: .btn-ghost.active appearance
## 2025-12-18 - 1.1.0 - feat(catalog)
add ContractEditor and many editor subcomponents; implement SignPad and SignBox; update README and bump dependencies

31
readme.hints.md
View File

@@ -0,0 +1,31 @@
# Development Hints for @signature.digital/catalog
## dees-icon Usage
**Important**: Use the `.icon` property, NOT `.iconFA` (deprecated).
### Format
```html
<dees-icon .icon=${'prefix:IconName'}></dees-icon>
```
### Lucide Icons (PascalCase)
Lucide icons use **PascalCase** names:
- `lucide:CheckCircle` ✓
- `lucide:UserPlus` ✓
- `lucide:PenTool` ✓
- `lucide:Mail` ✓
- `lucide:Users` ✓
**Wrong formats**:
- `lucide:check-circle` ✗ (kebab-case doesn't work)
- `lucide:userPlus` ✗ (camelCase doesn't work)
### FontAwesome Icons (camelCase)
FontAwesome icons use **camelCase** names:
- `fa:arrowRight`
- `fa:magnifyingGlass`
- `fa:penToSquare`
### Documentation
See: https://code.foss.global/design.estate/dees-catalog/src/branch/main/readme.icons.md

2
ts_web/00_commitinfo_data.ts
View File

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

1
ts_web/elements/index.ts
View File

@@ -11,6 +11,7 @@ export * from './sdig-contract-signatures/index.js';
export * from './sdig-contract-attachments/index.js';
export * from './sdig-contract-collaboration/index.js';
export * from './sdig-contract-audit/index.js';
export * from './sdig-collaboration-sidebar/index.js';
// Signature components
export * from './sdig-signbox/index.js';

1
ts_web/elements/sdig-collaboration-sidebar/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './sdig-collaboration-sidebar.js';

846
ts_web/elements/sdig-collaboration-sidebar/sdig-collaboration-sidebar.ts Normal file
View File

@@ -0,0 +1,846 @@
/**
* @file sdig-collaboration-sidebar.ts
* @description Compact collaboration sidebar for the contract editor
*/
import {
DeesElement,
property,
html,
customElement,
type TemplateResult,
css,
cssManager,
state,
} from '@design.estate/dees-element';
import * as plugins from '../../plugins.js';
declare global {
interface HTMLElementTagNameMap {
'sdig-collaboration-sidebar': SdigCollaborationSidebar;
}
}
// Comment interface
interface IComment {
id: string;
userId: string;
userName: string;
userColor: string;
content: string;
createdAt: number;
updatedAt?: number;
anchorPath?: string;
anchorText?: string;
resolved: boolean;
replies: IComment[];
}
// Suggestion interface
interface ISuggestion {
id: string;
userId: string;
userName: string;
userColor: string;
originalText: string;
suggestedText: string;
path: string;
status: 'pending' | 'accepted' | 'rejected';
createdAt: number;
}
// Presence interface
interface IPresence {
userId: string;
userName: string;
userColor: string;
currentSection: string;
cursorPosition?: { path: string; offset: number };
lastActive: number;
}
@customElement('sdig-collaboration-sidebar')
export class SdigCollaborationSidebar extends DeesElement {
// ============================================================================
// STATIC
// ============================================================================
public static demo = () => html`
<div style="width: 320px; height: 600px; border: 1px solid #ccc;">
<sdig-collaboration-sidebar
.contract=${plugins.sdDemodata.demoContract}
></sdig-collaboration-sidebar>
</div>
`;
public static styles = [
cssManager.defaultStyles,
css`
:host {
display: block;
height: 100%;
overflow: hidden;
}
.sidebar-container {
display: flex;
flex-direction: column;
height: 100%;
}
/* Presence bar */
.presence-bar {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: ${cssManager.bdTheme('#f9fafb', '#111111')};
border-bottom: 1px solid ${cssManager.bdTheme('#e5e5e5', '#27272a')};
}
.presence-avatars {
display: flex;
align-items: center;
}
.presence-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 600;
color: white;
margin-left: -6px;
border: 2px solid ${cssManager.bdTheme('#f9fafb', '#111111')};
cursor: pointer;
position: relative;
}
.presence-avatar:first-child {
margin-left: 0;
}
.presence-avatar .status-dot {
position: absolute;
bottom: -1px;
right: -1px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #10b981;
border: 2px solid ${cssManager.bdTheme('#f9fafb', '#111111')};
}
.presence-avatar .status-dot.away {
background: #f59e0b;
}
.presence-count {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: ${cssManager.bdTheme('#e5e7eb', '#3f3f46')};
color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
font-size: 11px;
font-weight: 600;
margin-left: -6px;
border: 2px solid ${cssManager.bdTheme('#f9fafb', '#111111')};
}
.presence-label {
font-size: 12px;
color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
}
/* Scrollable content */
.sidebar-content {
flex: 1;
overflow-y: auto;
padding: 12px;
}
/* Collapsible sections */
.collapsible-section {
margin-bottom: 12px;
border: 1px solid ${cssManager.bdTheme('#e5e5e5', '#27272a')};
border-radius: 8px;
overflow: hidden;
background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
}
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 12px;
background: ${cssManager.bdTheme('#f9fafb', '#111111')};
cursor: pointer;
user-select: none;
transition: background 0.15s ease;
}
.section-header:hover {
background: ${cssManager.bdTheme('#f3f4f6', '#18181b')};
}
.section-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
color: ${cssManager.bdTheme('#374151', '#d1d5db')};
}
.section-title dees-icon {
font-size: 14px;
color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
}
.section-badge {
padding: 2px 6px;
border-radius: 9999px;
font-size: 10px;
font-weight: 600;
background: ${cssManager.bdTheme('#dbeafe', '#1e3a5f')};
color: ${cssManager.bdTheme('#1e40af', '#93c5fd')};
}
.section-chevron {
font-size: 14px;
color: ${cssManager.bdTheme('#9ca3af', '#6b7280')};
transition: transform 0.2s ease;
}
.section-chevron.expanded {
transform: rotate(180deg);
}
.section-body {
padding: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease, padding 0.2s ease;
}
.section-body.expanded {
padding: 12px;
max-height: 1000px;
}
/* Compact comment cards */
.comment-card {
display: flex;
gap: 10px;
padding: 10px;
background: ${cssManager.bdTheme('#f9fafb', '#111111')};
border-radius: 6px;
margin-bottom: 8px;
cursor: pointer;
transition: background 0.15s ease;
}
.comment-card:last-child {
margin-bottom: 0;
}
.comment-card:hover {
background: ${cssManager.bdTheme('#f3f4f6', '#18181b')};
}
.comment-card.resolved {
opacity: 0.6;
}
.comment-avatar {
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 600;
color: white;
flex-shrink: 0;
}
.comment-body {
flex: 1;
min-width: 0;
}
.comment-meta {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 4px;
}
.comment-author {
font-size: 12px;
font-weight: 600;
color: ${cssManager.bdTheme('#374151', '#d1d5db')};
}
.comment-time {
font-size: 10px;
color: ${cssManager.bdTheme('#9ca3af', '#6b7280')};
}
.comment-preview {
font-size: 12px;
line-height: 1.4;
color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.comment-replies {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 10px;
color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
margin-top: 4px;
}
.comment-replies dees-icon {
font-size: 12px;
}
/* Suggestion cards */
.suggestion-card {
padding: 10px;
background: ${cssManager.bdTheme('#f9fafb', '#111111')};
border-radius: 6px;
margin-bottom: 8px;
cursor: pointer;
transition: background 0.15s ease;
}
.suggestion-card:last-child {
margin-bottom: 0;
}
.suggestion-card:hover {
background: ${cssManager.bdTheme('#f3f4f6', '#18181b')};
}
.suggestion-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.suggestion-user {
display: flex;
align-items: center;
gap: 6px;
}
.suggestion-status {
display: flex;
align-items: center;
gap: 4px;
padding: 2px 6px;
border-radius: 9999px;
font-size: 10px;
font-weight: 500;
}
.suggestion-status dees-icon {
font-size: 10px;
}
.suggestion-status.pending {
background: ${cssManager.bdTheme('#fef3c7', '#422006')};
color: ${cssManager.bdTheme('#92400e', '#fcd34d')};
}
.suggestion-status.accepted {
background: ${cssManager.bdTheme('#d1fae5', '#064e3b')};
color: ${cssManager.bdTheme('#065f46', '#6ee7b7')};
}
.suggestion-status.rejected {
background: ${cssManager.bdTheme('#fee2e2', '#450a0a')};
color: ${cssManager.bdTheme('#991b1b', '#fca5a5')};
}
.suggestion-diff {
font-family: 'Roboto Mono', monospace;
font-size: 11px;
line-height: 1.4;
}
.diff-removed {
background: ${cssManager.bdTheme('#fee2e2', '#450a0a')};
color: ${cssManager.bdTheme('#991b1b', '#fca5a5')};
text-decoration: line-through;
padding: 1px 3px;
border-radius: 2px;
}
.diff-added {
background: ${cssManager.bdTheme('#d1fae5', '#064e3b')};
color: ${cssManager.bdTheme('#065f46', '#6ee7b7')};
padding: 1px 3px;
border-radius: 2px;
}
/* Quick add comment */
.quick-add {
padding: 12px;
border-top: 1px solid ${cssManager.bdTheme('#e5e5e5', '#27272a')};
background: ${cssManager.bdTheme('#f9fafb', '#111111')};
}
.quick-add-input {
width: 100%;
padding: 10px 12px;
font-size: 13px;
color: ${cssManager.bdTheme('#111111', '#fafafa')};
background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
border: 1px solid ${cssManager.bdTheme('#d1d5db', '#3f3f46')};
border-radius: 6px;
outline: none;
resize: none;
min-height: 60px;
font-family: inherit;
box-sizing: border-box;
}
.quick-add-input:focus {
border-color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
box-shadow: 0 0 0 3px ${cssManager.bdTheme('rgba(59, 130, 246, 0.1)', 'rgba(96, 165, 250, 0.1)')};
}
.quick-add-input::placeholder {
color: ${cssManager.bdTheme('#9ca3af', '#6b7280')};
}
.quick-add-actions {
display: flex;
justify-content: flex-end;
margin-top: 8px;
}
.btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
font-size: 12px;
font-weight: 500;
border-radius: 6px;
border: none;
cursor: pointer;
transition: all 0.15s ease;
}
.btn-primary {
background: ${cssManager.bdTheme('#111111', '#fafafa')};
color: ${cssManager.bdTheme('#ffffff', '#09090b')};
}
.btn-primary:hover {
background: ${cssManager.bdTheme('#333333', '#e5e5e5')};
}
.btn-primary:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Empty state */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
padding: 24px 16px;
text-align: center;
color: ${cssManager.bdTheme('#9ca3af', '#6b7280')};
}
.empty-state dees-icon {
font-size: 32px;
margin-bottom: 8px;
opacity: 0.5;
}
.empty-state p {
margin: 0;
font-size: 12px;
}
`,
];
// ============================================================================
// PROPERTIES
// ============================================================================
@property({ type: Object })
public accessor contract: plugins.sdInterfaces.IPortableContract | null = null;
@property({ type: Boolean })
public accessor readonly: boolean = false;
// ============================================================================
// STATE
// ============================================================================
@state()
private accessor commentsExpanded: boolean = true;
@state()
private accessor suggestionsExpanded: boolean = true;
@state()
private accessor newCommentText: string = '';
// Demo presence data
@state()
private accessor presenceList: IPresence[] = [
{ userId: '1', userName: 'Alice Smith', userColor: '#3b82f6', currentSection: 'content', lastActive: Date.now() },
{ userId: '2', userName: 'Bob Johnson', userColor: '#10b981', currentSection: 'parties', lastActive: Date.now() - 60000 },
{ userId: '3', userName: 'Carol Davis', userColor: '#f59e0b', currentSection: 'terms', lastActive: Date.now() - 300000 },
];
// Demo comments data
@state()
private accessor comments: IComment[] = [
{
id: '1',
userId: '1',
userName: 'Alice Smith',
userColor: '#3b82f6',
content: 'Can we clarify the payment terms in paragraph 3? The current wording seems ambiguous.',
createdAt: Date.now() - 3600000,
anchorPath: 'paragraphs.2',
anchorText: 'Compensation',
resolved: false,
replies: [
{
id: '1-1',
userId: '2',
userName: 'Bob Johnson',
userColor: '#10b981',
content: 'Good point. I\'ll update the wording to be more specific.',
createdAt: Date.now() - 1800000,
resolved: false,
replies: [],
},
],
},
{
id: '2',
userId: '3',
userName: 'Carol Davis',
userColor: '#f59e0b',
content: 'The termination clause needs to comply with the latest regulations.',
createdAt: Date.now() - 86400000,
resolved: true,
replies: [],
},
{
id: '3',
userId: '2',
userName: 'Bob Johnson',
userColor: '#10b981',
content: 'Should we add an automatic renewal clause?',
createdAt: Date.now() - 7200000,
resolved: false,
replies: [],
},
];
// Demo suggestions data
@state()
private accessor suggestions: ISuggestion[] = [
{
id: '1',
userId: '1',
userName: 'Alice Smith',
userColor: '#3b82f6',
originalText: 'monthly salary',
suggestedText: 'monthly gross salary',
path: 'paragraphs.2.content',
status: 'pending',
createdAt: Date.now() - 7200000,
},
{
id: '2',
userId: '3',
userName: 'Carol Davis',
userColor: '#f59e0b',
originalText: '30 days',
suggestedText: '60 days',
path: 'paragraphs.5.content',
status: 'pending',
createdAt: Date.now() - 3600000,
},
];
// ============================================================================
// EVENT HANDLERS
// ============================================================================
private handleCommentClick(comment: IComment) {
this.dispatchEvent(
new CustomEvent('comment-click', {
detail: { comment },
bubbles: true,
composed: true,
})
);
}
private handleSuggestionClick(suggestion: ISuggestion) {
this.dispatchEvent(
new CustomEvent('suggestion-click', {
detail: { suggestion },
bubbles: true,
composed: true,
})
);
}
private handleAddComment() {
if (!this.newCommentText.trim()) return;
const newComment: IComment = {
id: `comment-${Date.now()}`,
userId: 'current-user',
userName: 'You',
userColor: '#6366f1',
content: this.newCommentText,
createdAt: Date.now(),
resolved: false,
replies: [],
};
this.comments = [newComment, ...this.comments];
this.newCommentText = '';
this.dispatchEvent(
new CustomEvent('add-comment', {
detail: { comment: newComment },
bubbles: true,
composed: true,
})
);
}
// ============================================================================
// HELPERS
// ============================================================================
private formatTimeAgo(timestamp: number): string {
const seconds = Math.floor((Date.now() - timestamp) / 1000);
if (seconds < 60) return 'now';
const minutes = Math.floor(seconds / 60);
if (minutes < 60) return `${minutes}m`;
const hours = Math.floor(minutes / 60);
if (hours < 24) return `${hours}h`;
const days = Math.floor(hours / 24);
return `${days}d`;
}
private getActivePresence(): IPresence[] {
const fiveMinutesAgo = Date.now() - 300000;
return this.presenceList.filter((p) => p.lastActive > fiveMinutesAgo);
}
private getOpenComments(): IComment[] {
return this.comments.filter((c) => !c.resolved);
}
private getPendingSuggestions(): ISuggestion[] {
return this.suggestions.filter((s) => s.status === 'pending');
}
// ============================================================================
// RENDER
// ============================================================================
public render(): TemplateResult {
const activePresence = this.getActivePresence();
const openComments = this.getOpenComments();
const pendingSuggestions = this.getPendingSuggestions();
return html`
<div class="sidebar-container">
<!-- Presence Bar -->
<div class="presence-bar">
<div class="presence-avatars">
${activePresence.slice(0, 3).map(
(p) => html`
<div
class="presence-avatar"
style="background: ${p.userColor}"
title="${p.userName} - ${p.currentSection}"
>
${p.userName.charAt(0)}
<span class="status-dot ${Date.now() - p.lastActive > 60000 ? 'away' : ''}"></span>
</div>
`
)}
${activePresence.length > 3
? html`<div class="presence-count">+${activePresence.length - 3}</div>`
: ''}
</div>
<span class="presence-label">${activePresence.length} active</span>
</div>
<!-- Scrollable Content -->
<div class="sidebar-content">
<!-- Comments Section -->
<div class="collapsible-section">
<div
class="section-header"
@click=${() => (this.commentsExpanded = !this.commentsExpanded)}
>
<div class="section-title">
<dees-icon .icon=${'lucide:MessageCircle'}></dees-icon>
Comments
${openComments.length > 0
? html`<span class="section-badge">${openComments.length}</span>`
: ''}
</div>
<dees-icon
class="section-chevron ${this.commentsExpanded ? 'expanded' : ''}"
.icon=${'lucide:ChevronDown'}
></dees-icon>
</div>
<div class="section-body ${this.commentsExpanded ? 'expanded' : ''}">
${this.comments.length > 0
? this.comments.slice(0, 5).map((comment) => this.renderCommentCard(comment))
: html`
<div class="empty-state">
<dees-icon .icon=${'lucide:MessageSquare'}></dees-icon>
<p>No comments yet</p>
</div>
`}
</div>
</div>
<!-- Suggestions Section -->
<div class="collapsible-section">
<div
class="section-header"
@click=${() => (this.suggestionsExpanded = !this.suggestionsExpanded)}
>
<div class="section-title">
<dees-icon .icon=${'lucide:GitPullRequest'}></dees-icon>
Suggestions
${pendingSuggestions.length > 0
? html`<span class="section-badge">${pendingSuggestions.length}</span>`
: ''}
</div>
<dees-icon
class="section-chevron ${this.suggestionsExpanded ? 'expanded' : ''}"
.icon=${'lucide:ChevronDown'}
></dees-icon>
</div>
<div class="section-body ${this.suggestionsExpanded ? 'expanded' : ''}">
${this.suggestions.length > 0
? this.suggestions.slice(0, 5).map((suggestion) => this.renderSuggestionCard(suggestion))
: html`
<div class="empty-state">
<dees-icon .icon=${'lucide:Edit3'}></dees-icon>
<p>No suggestions yet</p>
</div>
`}
</div>
</div>
</div>
<!-- Quick Add Comment -->
${!this.readonly
? html`
<div class="quick-add">
<textarea
class="quick-add-input"
placeholder="Add a comment..."
.value=${this.newCommentText}
@input=${(e: Event) => (this.newCommentText = (e.target as HTMLTextAreaElement).value)}
></textarea>
<div class="quick-add-actions">
<button
class="btn btn-primary"
@click=${this.handleAddComment}
?disabled=${!this.newCommentText.trim()}
>
<dees-icon .icon=${'lucide:Send'}></dees-icon>
Add
</button>
</div>
</div>
`
: ''}
</div>
`;
}
private renderCommentCard(comment: IComment): TemplateResult {
return html`
<div
class="comment-card ${comment.resolved ? 'resolved' : ''}"
@click=${() => this.handleCommentClick(comment)}
>
<div class="comment-avatar" style="background: ${comment.userColor}">
${comment.userName.charAt(0)}
</div>
<div class="comment-body">
<div class="comment-meta">
<span class="comment-author">${comment.userName}</span>
<span class="comment-time">${this.formatTimeAgo(comment.createdAt)}</span>
</div>
<div class="comment-preview">${comment.content}</div>
${comment.replies.length > 0
? html`
<div class="comment-replies">
<dees-icon .icon=${'lucide:MessageSquare'}></dees-icon>
${comment.replies.length} ${comment.replies.length === 1 ? 'reply' : 'replies'}
</div>
`
: ''}
</div>
</div>
`;
}
private renderSuggestionCard(suggestion: ISuggestion): TemplateResult {
return html`
<div class="suggestion-card" @click=${() => this.handleSuggestionClick(suggestion)}>
<div class="suggestion-header">
<div class="suggestion-user">
<div class="comment-avatar" style="background: ${suggestion.userColor}; width: 20px; height: 20px; font-size: 9px;">
${suggestion.userName.charAt(0)}
</div>
<span class="comment-author">${suggestion.userName}</span>
</div>
<div class="suggestion-status ${suggestion.status}">
<dees-icon .icon=${suggestion.status === 'pending' ? 'lucide:Clock' : suggestion.status === 'accepted' ? 'lucide:Check' : 'lucide:X'}></dees-icon>
${suggestion.status}
</div>
</div>
<div class="suggestion-diff">
<span class="diff-removed">${suggestion.originalText}</span>
<span> → </span>
<span class="diff-added">${suggestion.suggestedText}</span>
</div>
</div>
`;
}
}

40
ts_web/elements/sdig-contract-attachments/sdig-contract-attachments.ts
View File

@@ -37,11 +37,11 @@ interface IAttachment {
// File type configuration
const FILE_TYPES = {
document: { icon: 'lucide:file-text', color: '#3b82f6', label: 'Document' },
image: { icon: 'lucide:image', color: '#10b981', label: 'Image' },
spreadsheet: { icon: 'lucide:sheet', color: '#22c55e', label: 'Spreadsheet' },
pdf: { icon: 'lucide:file-type', color: '#ef4444', label: 'PDF' },
other: { icon: 'lucide:file', color: '#6b7280', label: 'File' },
document: { icon: 'lucide:FileText', color: '#3b82f6', label: 'Document' },
image: { icon: 'lucide:Image', color: '#10b981', label: 'Image' },
spreadsheet: { icon: 'lucide:Sheet', color: '#22c55e', label: 'Spreadsheet' },
pdf: { icon: 'lucide:FileType', color: '#ef4444', label: 'PDF' },
other: { icon: 'lucide:File', color: '#6b7280', label: 'File' },
};
@customElement('sdig-contract-attachments')
@@ -631,7 +631,7 @@ export class SdigContractAttachments extends DeesElement {
<div class="section-card">
<div class="section-header">
<div class="section-title">
<dees-icon .iconFA=${'lucide:paperclip'}></dees-icon>
<dees-icon .icon=${'lucide:Paperclip'}></dees-icon>
Attachments
</div>
<span class="section-count">${this.attachments.length} files</span>
@@ -662,7 +662,7 @@ export class SdigContractAttachments extends DeesElement {
@click=${this.handleFileSelect}
>
<div class="upload-zone-icon">
<dees-icon .iconFA=${'lucide:upload-cloud'}></dees-icon>
<dees-icon .icon=${'lucide:UploadCloud'}></dees-icon>
</div>
<div class="upload-zone-title">Drop files here or click to upload</div>
<div class="upload-zone-subtitle">Add supporting documents, images, or spreadsheets</div>
@@ -680,7 +680,7 @@ export class SdigContractAttachments extends DeesElement {
`
: html`
<div class="empty-state" style="margin-top: 20px;">
<dees-icon .iconFA=${'lucide:file-x'}></dees-icon>
<dees-icon .icon=${'lucide:FileX'}></dees-icon>
<h4>No Attachments</h4>
<p>Upload files to attach them to this contract</p>
</div>
@@ -692,13 +692,13 @@ export class SdigContractAttachments extends DeesElement {
<div class="section-card">
<div class="section-header">
<div class="section-title">
<dees-icon .iconFA=${'lucide:files'}></dees-icon>
<dees-icon .icon=${'lucide:Files'}></dees-icon>
Prior Contracts
</div>
${!this.readonly
? html`
<button class="btn btn-secondary" @click=${this.handleAddPriorContract}>
<dees-icon .iconFA=${'lucide:plus'}></dees-icon>
<dees-icon .icon=${'lucide:Plus'}></dees-icon>
Link Contract
</button>
`
@@ -715,7 +715,7 @@ export class SdigContractAttachments extends DeesElement {
`
: html`
<div class="empty-state">
<dees-icon .iconFA=${'lucide:link'}></dees-icon>
<dees-icon .icon=${'lucide:Link'}></dees-icon>
<h4>No Prior Contracts</h4>
<p>Link related or predecessor contracts here</p>
</div>
@@ -732,7 +732,7 @@ export class SdigContractAttachments extends DeesElement {
return html`
<div class="attachment-item">
<div class="attachment-icon" style="background: ${typeConfig.color}20; color: ${typeConfig.color}">
<dees-icon .iconFA=${typeConfig.icon}></dees-icon>
<dees-icon .icon=${typeConfig.icon}></dees-icon>
</div>
<div class="attachment-info">
<div class="attachment-name">${attachment.name}</div>
@@ -742,21 +742,21 @@ export class SdigContractAttachments extends DeesElement {
${this.formatFileSize(attachment.size)}
</span>
<span class="attachment-meta-item">
<dees-icon .iconFA=${'lucide:calendar'}></dees-icon>
<dees-icon .icon=${'lucide:Calendar'}></dees-icon>
${this.formatDate(attachment.uploadedAt)}
</span>
<span class="attachment-meta-item">
<dees-icon .iconFA=${'lucide:user'}></dees-icon>
<dees-icon .icon=${'lucide:User'}></dees-icon>
${this.getPartyName(attachment.uploadedBy)}
</span>
</div>
</div>
<div class="attachment-actions">
<button class="btn btn-ghost" title="Download">
<dees-icon .iconFA=${'lucide:download'}></dees-icon>
<dees-icon .icon=${'lucide:Download'}></dees-icon>
</button>
<button class="btn btn-ghost" title="Preview">
<dees-icon .iconFA=${'lucide:eye'}></dees-icon>
<dees-icon .icon=${'lucide:Eye'}></dees-icon>
</button>
${!this.readonly
? html`
@@ -765,7 +765,7 @@ export class SdigContractAttachments extends DeesElement {
title="Delete"
@click=${() => this.handleDeleteAttachment(attachment.id)}
>
<dees-icon .iconFA=${'lucide:trash-2'}></dees-icon>
<dees-icon .icon=${'lucide:Trash2'}></dees-icon>
</button>
`
: ''}
@@ -778,7 +778,7 @@ export class SdigContractAttachments extends DeesElement {
return html`
<div class="prior-contract-item">
<div class="prior-contract-icon">
<dees-icon .iconFA=${'lucide:file-text'}></dees-icon>
<dees-icon .icon=${'lucide:FileText'}></dees-icon>
</div>
<div class="prior-contract-info">
<div class="prior-contract-title">${priorContract.title}</div>
@@ -786,7 +786,7 @@ export class SdigContractAttachments extends DeesElement {
</div>
<div class="prior-contract-actions">
<button class="btn btn-secondary btn-sm">
<dees-icon .iconFA=${'lucide:external-link'}></dees-icon>
<dees-icon .icon=${'lucide:ExternalLink'}></dees-icon>
View
</button>
${!this.readonly
@@ -795,7 +795,7 @@ export class SdigContractAttachments extends DeesElement {
class="btn btn-ghost btn-danger"
@click=${() => this.handleRemovePriorContract(index)}
>
<dees-icon .iconFA=${'lucide:unlink'}></dees-icon>
<dees-icon .icon=${'lucide:Unlink'}></dees-icon>
</button>
`
: ''}

36
ts_web/elements/sdig-contract-audit/sdig-contract-audit.ts
View File

@@ -42,23 +42,23 @@ interface IAuditEvent {
// Status workflow configuration
const STATUS_WORKFLOW = [
{ id: 'draft', label: 'Draft', icon: 'lucide:file-edit', color: '#f59e0b' },
{ id: 'review', label: 'Review', icon: 'lucide:eye', color: '#3b82f6' },
{ id: 'pending', label: 'Pending Signatures', icon: 'lucide:pen-tool', color: '#8b5cf6' },
{ id: 'signed', label: 'Signed', icon: 'lucide:check-circle', color: '#10b981' },
{ id: 'executed', label: 'Executed', icon: 'lucide:shield-check', color: '#059669' },
{ id: 'draft', label: 'Draft', icon: 'lucide:FileEdit', color: '#f59e0b' },
{ id: 'review', label: 'Review', icon: 'lucide:Eye', color: '#3b82f6' },
{ id: 'pending', label: 'Pending Signatures', icon: 'lucide:PenTool', color: '#8b5cf6' },
{ id: 'signed', label: 'Signed', icon: 'lucide:CheckCircle', color: '#10b981' },
{ id: 'executed', label: 'Executed', icon: 'lucide:ShieldCheck', color: '#059669' },
];
// Event type configuration
const EVENT_TYPES = {
created: { icon: 'lucide:plus-circle', color: '#10b981', label: 'Created' },
updated: { icon: 'lucide:pencil', color: '#3b82f6', label: 'Updated' },
status_change: { icon: 'lucide:arrow-right-circle', color: '#8b5cf6', label: 'Status Changed' },
signature: { icon: 'lucide:pen-tool', color: '#10b981', label: 'Signature' },
comment: { icon: 'lucide:message-circle', color: '#f59e0b', label: 'Comment' },
attachment: { icon: 'lucide:paperclip', color: '#6366f1', label: 'Attachment' },
viewed: { icon: 'lucide:eye', color: '#6b7280', label: 'Viewed' },
shared: { icon: 'lucide:share-2', color: '#ec4899', label: 'Shared' },
created: { icon: 'lucide:PlusCircle', color: '#10b981', label: 'Created' },
updated: { icon: 'lucide:Pencil', color: '#3b82f6', label: 'Updated' },
status_change: { icon: 'lucide:ArrowRightCircle', color: '#8b5cf6', label: 'Status Changed' },
signature: { icon: 'lucide:PenTool', color: '#10b981', label: 'Signature' },
comment: { icon: 'lucide:MessageCircle', color: '#f59e0b', label: 'Comment' },
attachment: { icon: 'lucide:Paperclip', color: '#6366f1', label: 'Attachment' },
viewed: { icon: 'lucide:Eye', color: '#6b7280', label: 'Viewed' },
shared: { icon: 'lucide:Share2', color: '#ec4899', label: 'Shared' },
};
@customElement('sdig-contract-audit')
@@ -623,7 +623,7 @@ export class SdigContractAudit extends DeesElement {
${STATUS_WORKFLOW.map((status, index) => html`
<div class="status-step ${index < currentStatusIndex ? 'completed' : ''} ${index === currentStatusIndex ? 'current' : ''}">
<div class="status-icon">
<dees-icon .iconFA=${status.icon}></dees-icon>
<dees-icon .icon=${status.icon}></dees-icon>
</div>
<div class="status-label">${status.label}</div>
</div>
@@ -658,11 +658,11 @@ export class SdigContractAudit extends DeesElement {
<div class="section-card">
<div class="section-header">
<div class="section-title">
<dees-icon .iconFA=${'lucide:history'}></dees-icon>
<dees-icon .icon=${'lucide:History'}></dees-icon>
Activity Log
</div>
<button class="btn btn-secondary">
<dees-icon .iconFA=${'lucide:download'}></dees-icon>
<dees-icon .icon=${'lucide:Download'}></dees-icon>
Export
</button>
</div>
@@ -697,7 +697,7 @@ export class SdigContractAudit extends DeesElement {
`
: html`
<div class="empty-state">
<dees-icon .iconFA=${'lucide:clock'}></dees-icon>
<dees-icon .icon=${'lucide:Clock'}></dees-icon>
<h4>No Events Found</h4>
<p>No activity matches your current filters</p>
</div>
@@ -714,7 +714,7 @@ export class SdigContractAudit extends DeesElement {
return html`
<div class="timeline-item">
<div class="timeline-dot" style="border-color: ${config.color}; color: ${config.color}">
<dees-icon .iconFA=${config.icon}></dees-icon>
<dees-icon .icon=${config.icon}></dees-icon>
</div>
<div class="timeline-content">
<div class="timeline-header">

22
ts_web/elements/sdig-contract-collaboration/sdig-contract-collaboration.ts
View File

@@ -765,7 +765,7 @@ export class SdigContractCollaboration extends DeesElement {
</div>
</div>
<button class="share-btn">
<dees-icon .iconFA=${'lucide:share-2'}></dees-icon>
<dees-icon .icon=${'lucide:Share2'}></dees-icon>
Share
</button>
</div>
@@ -774,7 +774,7 @@ export class SdigContractCollaboration extends DeesElement {
<div class="section-card">
<div class="section-header">
<div class="section-title">
<dees-icon .iconFA=${'lucide:message-circle'}></dees-icon>
<dees-icon .icon=${'lucide:MessageCircle'}></dees-icon>
Comments
${openComments > 0 ? html`<span class="section-badge">${openComments} open</span>` : ''}
</div>
@@ -813,7 +813,7 @@ export class SdigContractCollaboration extends DeesElement {
@input=${(e: Event) => (this.newCommentText = (e.target as HTMLTextAreaElement).value)}
></textarea>
<button class="btn btn-primary" @click=${this.handleAddComment}>
<dees-icon .iconFA=${'lucide:send'}></dees-icon>
<dees-icon .icon=${'lucide:Send'}></dees-icon>
Comment
</button>
</div>
@@ -829,7 +829,7 @@ export class SdigContractCollaboration extends DeesElement {
`
: html`
<div class="empty-state" style="margin-top: 16px;">
<dees-icon .iconFA=${'lucide:message-square'}></dees-icon>
<dees-icon .icon=${'lucide:MessageSquare'}></dees-icon>
<h4>No Comments</h4>
<p>Start a discussion by adding a comment</p>
</div>
@@ -841,7 +841,7 @@ export class SdigContractCollaboration extends DeesElement {
<div class="section-card">
<div class="section-header">
<div class="section-title">
<dees-icon .iconFA=${'lucide:git-pull-request'}></dees-icon>
<dees-icon .icon=${'lucide:GitPullRequest'}></dees-icon>
Suggestions
${pendingSuggestions > 0 ? html`<span class="section-badge">${pendingSuggestions} pending</span>` : ''}
</div>
@@ -855,7 +855,7 @@ export class SdigContractCollaboration extends DeesElement {
`
: html`
<div class="empty-state">
<dees-icon .iconFA=${'lucide:edit-3'}></dees-icon>
<dees-icon .icon=${'lucide:Edit3'}></dees-icon>
<h4>No Suggestions</h4>
<p>Suggested changes will appear here</p>
</div>
@@ -883,7 +883,7 @@ export class SdigContractCollaboration extends DeesElement {
class="btn btn-ghost btn-sm"
@click=${() => this.handleResolveComment(comment.id)}
>
<dees-icon .iconFA=${comment.resolved ? 'lucide:rotate-ccw' : 'lucide:check'}></dees-icon>
<dees-icon .icon=${comment.resolved ? 'lucide:RotateCcw' : 'lucide:Check'}></dees-icon>
${comment.resolved ? 'Reopen' : 'Resolve'}
</button>
`
@@ -893,7 +893,7 @@ export class SdigContractCollaboration extends DeesElement {
${comment.anchorText
? html`
<div class="comment-anchor">
<dees-icon .iconFA=${'lucide:link'}></dees-icon>
<dees-icon .icon=${'lucide:Link'}></dees-icon>
${comment.anchorText}
</div>
`
@@ -941,7 +941,7 @@ export class SdigContractCollaboration extends DeesElement {
</div>
</div>
<div class="suggestion-status ${suggestion.status}">
<dees-icon .iconFA=${suggestion.status === 'pending' ? 'lucide:clock' : suggestion.status === 'accepted' ? 'lucide:check' : 'lucide:x'}></dees-icon>
<dees-icon .icon=${suggestion.status === 'pending' ? 'lucide:Clock' : suggestion.status === 'accepted' ? 'lucide:Check' : 'lucide:X'}></dees-icon>
${suggestion.status.charAt(0).toUpperCase() + suggestion.status.slice(1)}
</div>
</div>
@@ -956,11 +956,11 @@ export class SdigContractCollaboration extends DeesElement {
? html`
<div class="suggestion-actions">
<button class="btn btn-success btn-sm" @click=${() => this.handleAcceptSuggestion(suggestion.id)}>
<dees-icon .iconFA=${'lucide:check'}></dees-icon>
<dees-icon .icon=${'lucide:Check'}></dees-icon>
Accept
</button>
<button class="btn btn-danger btn-sm" @click=${() => this.handleRejectSuggestion(suggestion.id)}>
<dees-icon .iconFA=${'lucide:x'}></dees-icon>
<dees-icon .icon=${'lucide:X'}></dees-icon>
Reject
</button>
</div>

38
ts_web/elements/sdig-contract-content/sdig-contract-content.ts
View File

@@ -24,12 +24,12 @@ declare global {
// Paragraph type configuration
const PARAGRAPH_TYPES = [
{ value: 'section', label: 'Section', icon: 'lucide:heading' },
{ value: 'clause', label: 'Clause', icon: 'lucide:file-text' },
{ value: 'definition', label: 'Definition', icon: 'lucide:book-open' },
{ value: 'obligation', label: 'Obligation', icon: 'lucide:check-square' },
{ value: 'condition', label: 'Condition', icon: 'lucide:git-branch' },
{ value: 'schedule', label: 'Schedule', icon: 'lucide:calendar' },
{ value: 'section', label: 'Section', icon: 'lucide:Heading' },
{ value: 'clause', label: 'Clause', icon: 'lucide:FileText' },
{ value: 'definition', label: 'Definition', icon: 'lucide:BookOpen' },
{ value: 'obligation', label: 'Obligation', icon: 'lucide:CheckSquare' },
{ value: 'condition', label: 'Condition', icon: 'lucide:GitBranch' },
{ value: 'schedule', label: 'Schedule', icon: 'lucide:Calendar' },
];
@customElement('sdig-contract-content')
@@ -718,7 +718,7 @@ export class SdigContractContent extends DeesElement {
<div class="content-toolbar">
<div class="toolbar-left">
<div class="search-box">
<dees-icon .iconFA=${'lucide:search'}></dees-icon>
<dees-icon .icon=${'lucide:Search'}></dees-icon>
<input
type="text"
placeholder="Search paragraphs..."
@@ -734,20 +734,20 @@ export class SdigContractContent extends DeesElement {
@click=${() => (this.viewMode = 'list')}
title="List view"
>
<dees-icon .iconFA=${'lucide:list'}></dees-icon>
<dees-icon .icon=${'lucide:List'}></dees-icon>
</button>
<button
class="view-toggle-btn ${this.viewMode === 'outline' ? 'active' : ''}"
@click=${() => (this.viewMode = 'outline')}
title="Outline view"
>
<dees-icon .iconFA=${'lucide:layout-list'}></dees-icon>
<dees-icon .icon=${'lucide:LayoutList'}></dees-icon>
</button>
</div>
${!this.readonly
? html`
<button class="btn btn-primary" @click=${() => this.handleAddParagraph()}>
<dees-icon .iconFA=${'lucide:plus'}></dees-icon>
<dees-icon .icon=${'lucide:Plus'}></dees-icon>
Add Paragraph
</button>
`
@@ -759,7 +759,7 @@ export class SdigContractContent extends DeesElement {
<div class="section-card">
<div class="section-header">
<div class="section-title">
<dees-icon .iconFA=${'lucide:file-text'}></dees-icon>
<dees-icon .icon=${'lucide:FileText'}></dees-icon>
Contract Content
</div>
<span class="paragraph-count">${this.contract.paragraphs.length} paragraphs</span>
@@ -777,7 +777,7 @@ export class SdigContractContent extends DeesElement {
? html`
<div class="add-paragraph-row">
<button class="add-paragraph-btn" @click=${() => this.handleAddParagraph()}>
<dees-icon .iconFA=${'lucide:plus'}></dees-icon>
<dees-icon .icon=${'lucide:Plus'}></dees-icon>
Add paragraph
</button>
</div>
@@ -786,13 +786,13 @@ export class SdigContractContent extends DeesElement {
`
: html`
<div class="empty-state">
<dees-icon .iconFA=${'lucide:file-plus'}></dees-icon>
<dees-icon .icon=${'lucide:FilePlus'}></dees-icon>
<h4>No Paragraphs Yet</h4>
<p>Start building your contract by adding paragraphs. Each paragraph can contain clauses, definitions, or obligations.</p>
${!this.readonly
? html`
<button class="btn btn-primary" @click=${() => this.handleAddParagraph()}>
<dees-icon .iconFA=${'lucide:plus'}></dees-icon>
<dees-icon .icon=${'lucide:Plus'}></dees-icon>
Add First Paragraph
</button>
`
@@ -819,7 +819,7 @@ export class SdigContractContent extends DeesElement {
${!this.readonly
? html`
<div class="paragraph-drag-handle">
<dees-icon .iconFA=${'lucide:grip-vertical'}></dees-icon>
<dees-icon .icon=${'lucide:GripVertical'}></dees-icon>
</div>
`
: ''}
@@ -880,28 +880,28 @@ export class SdigContractContent extends DeesElement {
@click=${(e: Event) => { e.stopPropagation(); this.handleEditParagraph(paragraph); }}
title="Edit"
>
<dees-icon .iconFA=${'lucide:pencil'}></dees-icon>
<dees-icon .icon=${'lucide:Pencil'}></dees-icon>
</button>
<button
class="btn btn-ghost"
@click=${(e: Event) => { e.stopPropagation(); this.handleMoveParagraph(paragraph.uniqueId, 'up'); }}
title="Move up"
>
<dees-icon .iconFA=${'lucide:chevron-up'}></dees-icon>
<dees-icon .icon=${'lucide:ChevronUp'}></dees-icon>
</button>
<button
class="btn btn-ghost"
@click=${(e: Event) => { e.stopPropagation(); this.handleMoveParagraph(paragraph.uniqueId, 'down'); }}
title="Move down"
>
<dees-icon .iconFA=${'lucide:chevron-down'}></dees-icon>
<dees-icon .icon=${'lucide:ChevronDown'}></dees-icon>
</button>
<button
class="btn btn-ghost btn-danger"
@click=${(e: Event) => { e.stopPropagation(); this.handleDeleteParagraph(paragraph.uniqueId); }}
title="Delete"
>
<dees-icon .iconFA=${'lucide:trash-2'}></dees-icon>
<dees-icon .icon=${'lucide:Trash2'}></dees-icon>
</button>
</div>
`

8
ts_web/elements/sdig-contract-header/sdig-contract-header.ts
View File

@@ -455,7 +455,7 @@ export class SdigContractHeader extends DeesElement {
<span class="status-dot"></span>
${this.formatStatus(status)}
${!this.readonly
? html`<dees-icon .iconFA=${'lucide:chevron-down'} style="font-size: 14px;"></dees-icon>`
? html`<dees-icon .icon=${'lucide:ChevronDown'} style="font-size: 14px;"></dees-icon>`
: ''}
</button>
@@ -491,13 +491,13 @@ export class SdigContractHeader extends DeesElement {
<div class="quick-actions">
<button class="action-btn" @click=${this.handleExport} title="Export">
<dees-icon .iconFA=${'lucide:download'}></dees-icon>
<dees-icon .icon=${'lucide:Download'}></dees-icon>
</button>
<button class="action-btn" @click=${this.handleDuplicate} title="Duplicate">
<dees-icon .iconFA=${'lucide:copy'}></dees-icon>
<dees-icon .icon=${'lucide:Copy'}></dees-icon>
</button>
<button class="action-btn" @click=${this.handleShare} title="Share">
<dees-icon .iconFA=${'lucide:share-2'}></dees-icon>
<dees-icon .icon=${'lucide:Share2'}></dees-icon>
</button>
</div>
</div>

8
ts_web/elements/sdig-contract-metadata/sdig-contract-metadata.ts
View File

@@ -448,7 +448,7 @@ export class SdigContractMetadata extends DeesElement {
<div class="section-card">
<div class="section-header">
<div class="section-title">
<dees-icon .iconFA=${'lucide:info'}></dees-icon>
<dees-icon .icon=${'lucide:Info'}></dees-icon>
Basic Information
</div>
</div>
@@ -555,7 +555,7 @@ export class SdigContractMetadata extends DeesElement {
<div class="section-card">
<div class="section-header">
<div class="section-title">
<dees-icon .iconFA=${'lucide:globe'}></dees-icon>
<dees-icon .icon=${'lucide:Globe'}></dees-icon>
Language Settings
</div>
</div>
@@ -606,7 +606,7 @@ export class SdigContractMetadata extends DeesElement {
<div class="section-card">
<div class="section-header">
<div class="section-title">
<dees-icon .iconFA=${'lucide:scale'}></dees-icon>
<dees-icon .icon=${'lucide:Scale'}></dees-icon>
Governing Law & Jurisdiction
</div>
</div>
@@ -758,7 +758,7 @@ export class SdigContractMetadata extends DeesElement {
<div class="section-card">
<div class="section-header">
<div class="section-title">
<dees-icon .iconFA=${'lucide:link'}></dees-icon>
<dees-icon .icon=${'lucide:Link'}></dees-icon>
References & Integration
</div>
</div>

40
ts_web/elements/sdig-contract-parties/sdig-contract-parties.ts
View File

@@ -24,13 +24,13 @@ declare global {
// Party role display configuration
const PARTY_ROLES: Array<{ value: plugins.sdInterfaces.TPartyRole; label: string; icon: string }> = [
{ value: 'signer', label: 'Signer', icon: 'lucide:pen-tool' },
{ value: 'witness', label: 'Witness', icon: 'lucide:eye' },
{ value: 'notary', label: 'Notary', icon: 'lucide:stamp' },
{ value: 'cc', label: 'CC (Copy)', icon: 'lucide:mail' },
{ value: 'approver', label: 'Approver', icon: 'lucide:check-circle' },
{ value: 'guarantor', label: 'Guarantor', icon: 'lucide:shield' },
{ value: 'beneficiary', label: 'Beneficiary', icon: 'lucide:user-check' },
{ value: 'signer', label: 'Signer', icon: 'lucide:PenTool' },
{ value: 'witness', label: 'Witness', icon: 'lucide:Eye' },
{ value: 'notary', label: 'Notary', icon: 'lucide:Stamp' },
{ value: 'cc', label: 'CC (Copy)', icon: 'lucide:Mail' },
{ value: 'approver', label: 'Approver', icon: 'lucide:CheckCircle' },
{ value: 'guarantor', label: 'Guarantor', icon: 'lucide:Shield' },
{ value: 'beneficiary', label: 'Beneficiary', icon: 'lucide:UserCheck' },
];
const SIGNING_DEPENDENCIES: Array<{ value: plugins.sdInterfaces.TSigningDependency; label: string }> = [
@@ -550,13 +550,13 @@ export class SdigContractParties extends DeesElement {
<div class="section-card">
<div class="section-header">
<div class="section-title">
<dees-icon .iconFA=${'lucide:users-2'}></dees-icon>
<dees-icon .icon=${'lucide:Users2'}></dees-icon>
Available Roles
</div>
${!this.readonly
? html`
<button class="btn btn-secondary btn-sm" @click=${this.handleAddRole}>
<dees-icon .iconFA=${'lucide:plus'}></dees-icon>
<dees-icon .icon=${'lucide:Plus'}></dees-icon>
Add Role
</button>
`
@@ -571,7 +571,7 @@ export class SdigContractParties extends DeesElement {
`
: html`
<div class="empty-state">
<dees-icon .iconFA=${'lucide:users'}></dees-icon>
<dees-icon .icon=${'lucide:Users'}></dees-icon>
<h4>No Roles Defined</h4>
<p>Add roles to define the types of parties in this contract</p>
</div>
@@ -583,13 +583,13 @@ export class SdigContractParties extends DeesElement {
<div class="section-card">
<div class="section-header">
<div class="section-title">
<dees-icon .iconFA=${'lucide:user-plus'}></dees-icon>
<dees-icon .icon=${'lucide:UserPlus'}></dees-icon>
Involved Parties (${parties.length})
</div>
${!this.readonly
? html`
<button class="btn btn-primary btn-sm" @click=${this.handleAddParty}>
<dees-icon .iconFA=${'lucide:plus'}></dees-icon>
<dees-icon .icon=${'lucide:Plus'}></dees-icon>
Add Party
</button>
`
@@ -604,7 +604,7 @@ export class SdigContractParties extends DeesElement {
`
: html`
<div class="empty-state">
<dees-icon .iconFA=${'lucide:user-plus'}></dees-icon>
<dees-icon .icon=${'lucide:UserPlus'}></dees-icon>
<h4>No Parties Added</h4>
<p>Add parties who will be involved in this contract</p>
</div>
@@ -621,7 +621,7 @@ export class SdigContractParties extends DeesElement {
<div class="role-header">
<div class="role-name">
<dees-icon
.iconFA=${role.icon || 'lucide:user'}
.icon=${role.icon || 'lucide:User'}
style="color: ${role.displayColor || 'inherit'}"
></dees-icon>
${role.name}
@@ -633,7 +633,7 @@ export class SdigContractParties extends DeesElement {
${role.signatureRequired
? html`
<span class="role-meta-item">
<dees-icon .iconFA=${'lucide:pen-tool'}></dees-icon>
<dees-icon .icon=${'lucide:PenTool'}></dees-icon>
Signature required
</span>
`
@@ -641,7 +641,7 @@ export class SdigContractParties extends DeesElement {
${role.defaultSigningOrder > 0
? html`
<span class="role-meta-item">
<dees-icon .iconFA=${'lucide:list-ordered'}></dees-icon>
<dees-icon .icon=${'lucide:ListOrdered'}></dees-icon>
Order: ${role.defaultSigningOrder}
</span>
`
@@ -649,7 +649,7 @@ export class SdigContractParties extends DeesElement {
${role.minParties
? html`
<span class="role-meta-item">
<dees-icon .iconFA=${'lucide:users'}></dees-icon>
<dees-icon .icon=${'lucide:Users'}></dees-icon>
Min: ${role.minParties}${role.maxParties ? `, Max: ${role.maxParties}` : ''}
</span>
`
@@ -693,7 +693,7 @@ export class SdigContractParties extends DeesElement {
${deliveryEmail
? html`
<div class="party-detail">
<dees-icon .iconFA=${'lucide:mail'}></dees-icon>
<dees-icon .icon=${'lucide:Mail'}></dees-icon>
${deliveryEmail}
</div>
`
@@ -701,7 +701,7 @@ export class SdigContractParties extends DeesElement {
${deliveryPhone
? html`
<div class="party-detail">
<dees-icon .iconFA=${'lucide:phone'}></dees-icon>
<dees-icon .icon=${'lucide:Phone'}></dees-icon>
${deliveryPhone}
</div>
`
@@ -709,7 +709,7 @@ export class SdigContractParties extends DeesElement {
${actingAsProxy
? html`
<div class="party-detail">
<dees-icon .iconFA=${'lucide:users'}></dees-icon>
<dees-icon .icon=${'lucide:Users'}></dees-icon>
Acting as proxy
</div>
`

50
ts_web/elements/sdig-contract-signatures/sdig-contract-signatures.ts
View File

@@ -43,17 +43,17 @@ interface ISignatureField {
// Signature status configuration
const SIGNATURE_STATUSES = [
{ value: 'pending', label: 'Pending', color: '#f59e0b', icon: 'lucide:clock' },
{ value: 'ready', label: 'Ready to Sign', color: '#3b82f6', icon: 'lucide:pen-tool' },
{ value: 'signed', label: 'Signed', color: '#10b981', icon: 'lucide:check-circle' },
{ value: 'declined', label: 'Declined', color: '#ef4444', icon: 'lucide:x-circle' },
{ value: 'pending', label: 'Pending', color: '#f59e0b', icon: 'lucide:Clock' },
{ value: 'ready', label: 'Ready to Sign', color: '#3b82f6', icon: 'lucide:PenTool' },
{ value: 'signed', label: 'Signed', color: '#10b981', icon: 'lucide:CheckCircle' },
{ value: 'declined', label: 'Declined', color: '#ef4444', icon: 'lucide:XCircle' },
];
const FIELD_TYPES = [
{ value: 'signature', label: 'Full Signature', icon: 'lucide:pen-tool' },
{ value: 'initials', label: 'Initials', icon: 'lucide:type' },
{ value: 'date', label: 'Date', icon: 'lucide:calendar' },
{ value: 'text', label: 'Text Field', icon: 'lucide:text-cursor' },
{ value: 'signature', label: 'Full Signature', icon: 'lucide:PenTool' },
{ value: 'initials', label: 'Initials', icon: 'lucide:Type' },
{ value: 'date', label: 'Date', icon: 'lucide:Calendar' },
{ value: 'text', label: 'Text Field', icon: 'lucide:TextCursor' },
];
@customElement('sdig-contract-signatures')
@@ -649,28 +649,28 @@ export class SdigContractSignatures extends DeesElement {
<div class="summary-row">
<div class="summary-card">
<div class="summary-card-icon pending">
<dees-icon .iconFA=${'lucide:clock'}></dees-icon>
<dees-icon .icon=${'lucide:Clock'}></dees-icon>
</div>
<div class="summary-card-value">${stats.pending}</div>
<div class="summary-card-label">Pending</div>
</div>
<div class="summary-card">
<div class="summary-card-icon ready">
<dees-icon .iconFA=${'lucide:pen-tool'}></dees-icon>
<dees-icon .icon=${'lucide:PenTool'}></dees-icon>
</div>
<div class="summary-card-value">${stats.ready}</div>
<div class="summary-card-label">Ready to Sign</div>
</div>
<div class="summary-card">
<div class="summary-card-icon signed">
<dees-icon .iconFA=${'lucide:check-circle'}></dees-icon>
<dees-icon .icon=${'lucide:CheckCircle'}></dees-icon>
</div>
<div class="summary-card-value">${stats.signed}</div>
<div class="summary-card-label">Signed</div>
</div>
<div class="summary-card">
<div class="summary-card-icon declined">
<dees-icon .iconFA=${'lucide:x-circle'}></dees-icon>
<dees-icon .icon=${'lucide:XCircle'}></dees-icon>
</div>
<div class="summary-card-value">${stats.declined}</div>
<div class="summary-card-label">Declined</div>
@@ -681,13 +681,13 @@ export class SdigContractSignatures extends DeesElement {
<div class="section-card">
<div class="section-header">
<div class="section-title">
<dees-icon .iconFA=${'lucide:pen-tool'}></dees-icon>
<dees-icon .icon=${'lucide:PenTool'}></dees-icon>
Signature Fields
</div>
${!this.readonly
? html`
<button class="btn btn-primary" @click=${this.handleAddField}>
<dees-icon .iconFA=${'lucide:plus'}></dees-icon>
<dees-icon .icon=${'lucide:Plus'}></dees-icon>
Add Field
</button>
`
@@ -702,13 +702,13 @@ export class SdigContractSignatures extends DeesElement {
`
: html`
<div class="empty-state">
<dees-icon .iconFA=${'lucide:pen-tool'}></dees-icon>
<dees-icon .icon=${'lucide:PenTool'}></dees-icon>
<h4>No Signature Fields</h4>
<p>Add signature fields to define where parties should sign the contract</p>
${!this.readonly
? html`
<button class="btn btn-primary" @click=${this.handleAddField}>
<dees-icon .iconFA=${'lucide:plus'}></dees-icon>
<dees-icon .icon=${'lucide:Plus'}></dees-icon>
Add Signature Field
</button>
`
@@ -724,7 +724,7 @@ export class SdigContractSignatures extends DeesElement {
<div class="section-card">
<div class="section-header">
<div class="section-title">
<dees-icon .iconFA=${'lucide:users'}></dees-icon>
<dees-icon .icon=${'lucide:Users'}></dees-icon>
Signers Progress
</div>
</div>
@@ -753,24 +753,24 @@ export class SdigContractSignatures extends DeesElement {
<div class="signing-order-badge">${index + 1}</div>
<div class="field-icon">
<dees-icon .iconFA=${typeConfig.icon}></dees-icon>
<dees-icon .icon=${typeConfig.icon}></dees-icon>
</div>
<div class="field-info">
<div class="field-name">${field.name}</div>
<div class="field-meta">
<span class="field-meta-item">
<dees-icon .iconFA=${'lucide:user'}></dees-icon>
<dees-icon .icon=${'lucide:User'}></dees-icon>
${this.getPartyRoleName(field.roleId)}
</span>
<span class="type-badge">
<dees-icon .iconFA=${typeConfig.icon}></dees-icon>
<dees-icon .icon=${typeConfig.icon}></dees-icon>
${typeConfig.label}
</span>
${field.required
? html`
<span class="field-meta-item">
<dees-icon .iconFA=${'lucide:asterisk'}></dees-icon>
<dees-icon .icon=${'lucide:Asterisk'}></dees-icon>
Required
</span>
`
@@ -778,7 +778,7 @@ export class SdigContractSignatures extends DeesElement {
${field.signedAt
? html`
<span class="field-meta-item">
<dees-icon .iconFA=${'lucide:calendar'}></dees-icon>
<dees-icon .icon=${'lucide:Calendar'}></dees-icon>
${this.formatDate(field.signedAt)}
</span>
`
@@ -787,7 +787,7 @@ export class SdigContractSignatures extends DeesElement {
</div>
<div class="field-status ${field.status}">
<dees-icon .iconFA=${statusConfig.icon}></dees-icon>
<dees-icon .icon=${statusConfig.icon}></dees-icon>
${statusConfig.label}
</div>
@@ -795,7 +795,7 @@ export class SdigContractSignatures extends DeesElement {
? html`
<div class="field-actions">
<button class="btn btn-ghost" @click=${(e: Event) => { e.stopPropagation(); }} title="Edit">
<dees-icon .iconFA=${'lucide:pencil'}></dees-icon>
<dees-icon .icon=${'lucide:Pencil'}></dees-icon>
</button>
<button
class="btn btn-ghost"
@@ -803,7 +803,7 @@ export class SdigContractSignatures extends DeesElement {
title="Delete"
style="color: #ef4444;"
>
<dees-icon .iconFA=${'lucide:trash-2'}></dees-icon>
<dees-icon .icon=${'lucide:Trash2'}></dees-icon>
</button>
</div>
`

28
ts_web/elements/sdig-contract-terms/sdig-contract-terms.ts
View File

@@ -33,9 +33,9 @@ interface ITermTabConfig {
}
const TERM_TABS: ITermTabConfig[] = [
{ id: 'financial', label: 'Financial Terms', icon: 'lucide:banknote', description: 'Payment schedules, rates, and penalties' },
{ id: 'time', label: 'Time Terms', icon: 'lucide:calendar', description: 'Milestones, deadlines, and renewal' },
{ id: 'obligations', label: 'Obligations', icon: 'lucide:check-square', description: 'Deliverables, SLAs, and warranties' },
{ id: 'financial', label: 'Financial Terms', icon: 'lucide:Banknote', description: 'Payment schedules, rates, and penalties' },
{ id: 'time', label: 'Time Terms', icon: 'lucide:Calendar', description: 'Milestones, deadlines, and renewal' },
{ id: 'obligations', label: 'Obligations', icon: 'lucide:CheckSquare', description: 'Deliverables, SLAs, and warranties' },
];
// Extended contract terms interfaces (for future interface updates)
@@ -588,7 +588,7 @@ export class SdigContractTerms extends DeesElement {
class="tab-btn ${this.activeTab === tab.id ? 'active' : ''}"
@click=${() => this.handleTabChange(tab.id)}
>
<dees-icon .iconFA=${tab.icon}></dees-icon>
<dees-icon .icon=${tab.icon}></dees-icon>
${tab.label}
</button>
`
@@ -640,7 +640,7 @@ export class SdigContractTerms extends DeesElement {
${!this.readonly
? html`
<button class="btn btn-secondary" @click=${this.handleAddPayment}>
<dees-icon .iconFA=${'lucide:plus'}></dees-icon>
<dees-icon .icon=${'lucide:Plus'}></dees-icon>
Add Payment
</button>
`
@@ -671,7 +671,7 @@ export class SdigContractTerms extends DeesElement {
? html`
<td>
<button class="btn btn-ghost btn-sm">
<dees-icon .iconFA=${'lucide:pencil'}></dees-icon>
<dees-icon .icon=${'lucide:Pencil'}></dees-icon>
</button>
</td>
`
@@ -684,7 +684,7 @@ export class SdigContractTerms extends DeesElement {
`
: html`
<div class="empty-state">
<dees-icon .iconFA=${'lucide:banknote'}></dees-icon>
<dees-icon .icon=${'lucide:Banknote'}></dees-icon>
<h4>No Payment Schedule</h4>
<p>Add payment terms to track financial obligations</p>
</div>
@@ -724,7 +724,7 @@ export class SdigContractTerms extends DeesElement {
${!this.readonly
? html`
<button class="btn btn-secondary" @click=${this.handleAddMilestone}>
<dees-icon .iconFA=${'lucide:plus'}></dees-icon>
<dees-icon .icon=${'lucide:Plus'}></dees-icon>
Add Milestone
</button>
`
@@ -755,7 +755,7 @@ export class SdigContractTerms extends DeesElement {
? html`
<td>
<button class="btn btn-ghost btn-sm">
<dees-icon .iconFA=${'lucide:pencil'}></dees-icon>
<dees-icon .icon=${'lucide:Pencil'}></dees-icon>
</button>
</td>
`
@@ -768,7 +768,7 @@ export class SdigContractTerms extends DeesElement {
`
: html`
<div class="empty-state">
<dees-icon .iconFA=${'lucide:calendar'}></dees-icon>
<dees-icon .icon=${'lucide:Calendar'}></dees-icon>
<h4>No Milestones</h4>
<p>Add milestones to track project progress</p>
</div>
@@ -799,7 +799,7 @@ export class SdigContractTerms extends DeesElement {
<!-- Info banner -->
<div class="info-banner">
<dees-icon .iconFA=${'lucide:info'}></dees-icon>
<dees-icon .icon=${'lucide:Info'}></dees-icon>
<div class="info-banner-content">
<div class="info-banner-title">Contractual Obligations</div>
<div class="info-banner-text">
@@ -818,7 +818,7 @@ export class SdigContractTerms extends DeesElement {
${!this.readonly
? html`
<button class="btn btn-secondary" @click=${this.handleAddObligation}>
<dees-icon .iconFA=${'lucide:plus'}></dees-icon>
<dees-icon .icon=${'lucide:Plus'}></dees-icon>
Add Obligation
</button>
`
@@ -849,7 +849,7 @@ export class SdigContractTerms extends DeesElement {
? html`
<td>
<button class="btn btn-ghost btn-sm">
<dees-icon .iconFA=${'lucide:pencil'}></dees-icon>
<dees-icon .icon=${'lucide:Pencil'}></dees-icon>
</button>
</td>
`
@@ -862,7 +862,7 @@ export class SdigContractTerms extends DeesElement {
`
: html`
<div class="empty-state">
<dees-icon .iconFA=${'lucide:check-square'}></dees-icon>
<dees-icon .icon=${'lucide:CheckSquare'}></dees-icon>
<h4>No Obligations</h4>
<p>Add obligations to track party responsibilities</p>
</div>

62
ts_web/elements/sdig-contracteditor/sdig-contracteditor.ts
View File

@@ -34,6 +34,7 @@ import '../sdig-contract-signatures/sdig-contract-signatures.js';
import '../sdig-contract-attachments/sdig-contract-attachments.js';
import '../sdig-contract-collaboration/sdig-contract-collaboration.js';
import '../sdig-contract-audit/sdig-contract-audit.js';
import '../sdig-collaboration-sidebar/sdig-collaboration-sidebar.js';
declare global {
interface HTMLElementTagNameMap {
@@ -338,6 +339,11 @@ export class SdigContracteditor extends DeesElement {
color: ${cssManager.bdTheme('#111111', '#fafafa')};
}
.btn-ghost.active {
background: ${cssManager.bdTheme('#e5e7eb', '#3f3f46')};
color: ${cssManager.bdTheme('#111111', '#fafafa')};
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
@@ -490,6 +496,40 @@ export class SdigContracteditor extends DeesElement {
this.store?.redo();
}
private handleCommentClick(e: CustomEvent) {
// Navigate to collaboration section and highlight comment
this.store?.setActiveSection('collaboration');
this.dispatchEvent(
new CustomEvent('comment-focus', {
detail: e.detail,
bubbles: true,
composed: true,
})
);
}
private handleSuggestionClick(e: CustomEvent) {
// Navigate to collaboration section and highlight suggestion
this.store?.setActiveSection('collaboration');
this.dispatchEvent(
new CustomEvent('suggestion-focus', {
detail: e.detail,
bubbles: true,
composed: true,
})
);
}
private handleSidebarAddComment(e: CustomEvent) {
this.dispatchEvent(
new CustomEvent('comment-added', {
detail: e.detail,
bubbles: true,
composed: true,
})
);
}
// ============================================================================
// PUBLIC API
// ============================================================================
@@ -691,7 +731,7 @@ export class SdigContracteditor extends DeesElement {
private renderPlaceholder(sectionConfig: typeof EDITOR_SECTIONS[0] | undefined, message: string): TemplateResult {
return html`
<div class="section-placeholder">
<dees-icon .iconFA=${sectionConfig?.icon || 'lucide:file'}></dees-icon>
<dees-icon .icon=${sectionConfig?.icon || 'lucide:File'}></dees-icon>
<h3>${sectionConfig?.label || 'Section'}</h3>
<p>${message}</p>
</div>
@@ -757,10 +797,17 @@ export class SdigContracteditor extends DeesElement {
`
: ''}
<button class="btn btn-ghost" @click=${this.handleUndo} ?disabled=${!this.store?.canUndo()}>
<dees-icon .iconFA=${'lucide:undo-2'}></dees-icon>
<dees-icon .icon=${'lucide:Undo2'}></dees-icon>
</button>
<button class="btn btn-ghost" @click=${this.handleRedo} ?disabled=${!this.store?.canRedo()}>
<dees-icon .iconFA=${'lucide:redo-2'}></dees-icon>
<dees-icon .icon=${'lucide:Redo2'}></dees-icon>
</button>
<button
class="btn btn-ghost ${this.showSidebar ? 'active' : ''}"
@click=${() => (this.showSidebar = !this.showSidebar)}
title="${this.showSidebar ? 'Hide sidebar' : 'Show sidebar'}"
>
<dees-icon .icon=${'lucide:PanelRight'}></dees-icon>
</button>
</div>
</div>
@@ -774,7 +821,7 @@ export class SdigContracteditor extends DeesElement {
@click=${() => this.handleSectionChange(section.id)}
?disabled=${section.disabled}
>
<dees-icon .iconFA=${section.icon}></dees-icon>
<dees-icon .icon=${section.icon}></dees-icon>
<span>${section.label}</span>
${section.badge
? html`<span class="nav-badge">${section.badge}</span>`
@@ -792,7 +839,12 @@ export class SdigContracteditor extends DeesElement {
${this.showSidebar
? html`
<aside class="editor-sidebar">
<!-- Sidebar content - collaboration panel -->
<sdig-collaboration-sidebar
.contract=${contract}
@comment-click=${this.handleCommentClick}
@suggestion-click=${this.handleSuggestionClick}
@add-comment=${this.handleSidebarAddComment}
></sdig-collaboration-sidebar>
</aside>
`
: ''}

16
ts_web/elements/sdig-contracteditor/types.ts
View File

@@ -37,14 +37,14 @@ export interface IEditorSectionConfig {
* Default section configurations
*/
export const EDITOR_SECTIONS: IEditorSectionConfig[] = [
{ id: 'overview', label: 'Overview', icon: 'lucide:file-text' },
{ id: 'parties', label: 'Parties & Roles', icon: 'lucide:users' },
{ id: 'content', label: 'Content', icon: 'lucide:file-edit' },
{ id: 'terms', label: 'Terms', icon: 'lucide:calculator' },
{ id: 'signatures', label: 'Signatures', icon: 'lucide:pen-tool' },
{ id: 'attachments', label: 'Attachments', icon: 'lucide:paperclip' },
{ id: 'collaboration', label: 'Collaboration', icon: 'lucide:message-circle' },
{ id: 'audit', label: 'Audit & History', icon: 'lucide:history' },
{ id: 'overview', label: 'Overview', icon: 'lucide:FileText' },
{ id: 'parties', label: 'Parties & Roles', icon: 'lucide:Users' },
{ id: 'content', label: 'Content', icon: 'lucide:FileEdit' },
{ id: 'terms', label: 'Terms', icon: 'lucide:Calculator' },
{ id: 'signatures', label: 'Signatures', icon: 'lucide:PenTool' },
{ id: 'attachments', label: 'Attachments', icon: 'lucide:Paperclip' },
{ id: 'collaboration', label: 'Collaboration', icon: 'lucide:MessageCircle' },
{ id: 'audit', label: 'Audit & History', icon: 'lucide:History' },
];
// ============================================================================