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

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>
`