@signature.digital/catalog 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.smartconfig.json +82 -0
- package/dist_bundle/bundle.js +6077 -0
- package/dist_bundle/bundle.js.map +7 -0
- package/dist_bundle/index.html +28 -0
- package/dist_ts_web/00_commitinfo_data.d.ts +8 -0
- package/dist_ts_web/00_commitinfo_data.js +9 -0
- package/dist_ts_web/elements/index.d.ts +3 -0
- package/dist_ts_web/elements/index.js +6 -0
- package/dist_ts_web/elements/sdig-signbox/index.d.ts +1 -0
- package/dist_ts_web/elements/sdig-signbox/index.js +2 -0
- package/dist_ts_web/elements/sdig-signbox/sdig-signbox.d.ts +13 -0
- package/dist_ts_web/elements/sdig-signbox/sdig-signbox.js +153 -0
- package/dist_ts_web/elements/sdig-signpad/index.d.ts +1 -0
- package/dist_ts_web/elements/sdig-signpad/index.js +2 -0
- package/dist_ts_web/elements/sdig-signpad/sdig-signpad.d.ts +22 -0
- package/dist_ts_web/elements/sdig-signpad/sdig-signpad.js +149 -0
- package/dist_ts_web/elements/sdig-workspace/index.d.ts +8 -0
- package/dist_ts_web/elements/sdig-workspace/index.js +9 -0
- package/dist_ts_web/elements/sdig-workspace/sdig-workspace-audit.d.ts +12 -0
- package/dist_ts_web/elements/sdig-workspace/sdig-workspace-audit.js +81 -0
- package/dist_ts_web/elements/sdig-workspace/sdig-workspace-compose.d.ts +44 -0
- package/dist_ts_web/elements/sdig-workspace/sdig-workspace-compose.js +418 -0
- package/dist_ts_web/elements/sdig-workspace/sdig-workspace-developers.d.ts +12 -0
- package/dist_ts_web/elements/sdig-workspace/sdig-workspace-developers.js +91 -0
- package/dist_ts_web/elements/sdig-workspace/sdig-workspace-inbox.d.ts +19 -0
- package/dist_ts_web/elements/sdig-workspace/sdig-workspace-inbox.js +181 -0
- package/dist_ts_web/elements/sdig-workspace/sdig-workspace-placeholder.d.ts +14 -0
- package/dist_ts_web/elements/sdig-workspace/sdig-workspace-placeholder.js +84 -0
- package/dist_ts_web/elements/sdig-workspace/sdig-workspace-sign.d.ts +18 -0
- package/dist_ts_web/elements/sdig-workspace/sdig-workspace-sign.js +152 -0
- package/dist_ts_web/elements/sdig-workspace/sdig-workspace.d.ts +31 -0
- package/dist_ts_web/elements/sdig-workspace/sdig-workspace.js +245 -0
- package/dist_ts_web/elements/sdig-workspace/sdig-workspace.shared.d.ts +53 -0
- package/dist_ts_web/elements/sdig-workspace/sdig-workspace.shared.js +385 -0
- package/dist_ts_web/index.d.ts +1 -0
- package/dist_ts_web/index.js +2 -0
- package/dist_ts_web/pages/index.d.ts +2 -0
- package/dist_ts_web/pages/index.js +3 -0
- package/dist_ts_web/pages/page1.d.ts +1 -0
- package/dist_ts_web/pages/page1.js +5 -0
- package/dist_ts_web/pages/page2.d.ts +1 -0
- package/dist_ts_web/pages/page2.js +5 -0
- package/dist_ts_web/plugins.d.ts +3 -0
- package/dist_ts_web/plugins.js +5 -0
- package/dist_watch/bundle.js +135319 -0
- package/dist_watch/bundle.js.map +7 -0
- package/dist_watch/index.html +28 -0
- package/license +19 -0
- package/package.json +63 -0
- package/readme.hints.md +31 -0
- package/readme.md +172 -0
- package/ts_web/00_commitinfo_data.ts +8 -0
- package/ts_web/elements/index.ts +6 -0
- package/ts_web/elements/sdig-signbox/index.ts +1 -0
- package/ts_web/elements/sdig-signbox/sdig-signbox.ts +109 -0
- package/ts_web/elements/sdig-signpad/index.ts +1 -0
- package/ts_web/elements/sdig-signpad/sdig-signpad.ts +115 -0
- package/ts_web/elements/sdig-workspace/index.ts +8 -0
- package/ts_web/elements/sdig-workspace/sdig-workspace-audit.ts +37 -0
- package/ts_web/elements/sdig-workspace/sdig-workspace-compose.ts +369 -0
- package/ts_web/elements/sdig-workspace/sdig-workspace-developers.ts +47 -0
- package/ts_web/elements/sdig-workspace/sdig-workspace-inbox.ts +117 -0
- package/ts_web/elements/sdig-workspace/sdig-workspace-placeholder.ts +22 -0
- package/ts_web/elements/sdig-workspace/sdig-workspace-sign.ts +91 -0
- package/ts_web/elements/sdig-workspace/sdig-workspace.shared.ts +440 -0
- package/ts_web/elements/sdig-workspace/sdig-workspace.ts +175 -0
- package/ts_web/index.ts +1 -0
- package/ts_web/pages/index.ts +2 -0
- package/ts_web/pages/page1.ts +5 -0
- package/ts_web/pages/page2.ts +5 -0
- package/ts_web/plugins.ts +8 -0
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
<!--gitzone element-->
|
|
2
|
+
<!-- made by Task Venture Capital GmbH -->
|
|
3
|
+
<!-- checkout https://maintainedby.lossless.com for awesome OpenSource projects -->
|
|
4
|
+
<html lang="en">
|
|
5
|
+
<head>
|
|
6
|
+
<!--Lets set some basic meta tags-->
|
|
7
|
+
<meta
|
|
8
|
+
name="viewport"
|
|
9
|
+
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"
|
|
10
|
+
/>
|
|
11
|
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
12
|
+
|
|
13
|
+
<!--Lets load standard fonts-->
|
|
14
|
+
<link rel="preconnect" href="https://assetbroker.lossless.one/" crossorigin>
|
|
15
|
+
<link rel="stylesheet" href="https://assetbroker.lossless.one/fonts/fonts.css">
|
|
16
|
+
|
|
17
|
+
<style>
|
|
18
|
+
body {
|
|
19
|
+
margin: 0px;
|
|
20
|
+
background: #222222;
|
|
21
|
+
}
|
|
22
|
+
</style>
|
|
23
|
+
|
|
24
|
+
<script type="module" src="/bundle.js"></script>
|
|
25
|
+
</head>
|
|
26
|
+
<body>
|
|
27
|
+
</body>
|
|
28
|
+
</html>
|
package/license
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
Copyright (c) 2014 Task Venture Capital GmbH (hello@task.vc)
|
|
2
|
+
|
|
3
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
4
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
5
|
+
in the Software without restriction, including without limitation the rights
|
|
6
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
7
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
8
|
+
furnished to do so, subject to the following conditions:
|
|
9
|
+
|
|
10
|
+
The above copyright notice and this permission notice shall be included in all
|
|
11
|
+
copies or substantial portions of the Software.
|
|
12
|
+
|
|
13
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
14
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
15
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
16
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
17
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
18
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
19
|
+
SOFTWARE.
|
package/package.json
ADDED
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@signature.digital/catalog",
|
|
3
|
+
"version": "1.3.0",
|
|
4
|
+
"private": false,
|
|
5
|
+
"description": "A comprehensive catalog of customizable web components designed for building and managing e-signature applications.",
|
|
6
|
+
"exports": {
|
|
7
|
+
".": "./dist_ts_web/index.js"
|
|
8
|
+
},
|
|
9
|
+
"type": "module",
|
|
10
|
+
"scripts": {
|
|
11
|
+
"test": "pnpm run build",
|
|
12
|
+
"build": "tsbuild tsfolders --allowimplicitany && tsbundle",
|
|
13
|
+
"watch": "tswatch"
|
|
14
|
+
},
|
|
15
|
+
"author": "Task Venture Capital GmbH",
|
|
16
|
+
"license": "MIT",
|
|
17
|
+
"dependencies": {
|
|
18
|
+
"@design.estate/dees-catalog": "3.81.0",
|
|
19
|
+
"@design.estate/dees-domtools": "^2.5.6",
|
|
20
|
+
"@design.estate/dees-element": "^2.2.4",
|
|
21
|
+
"@design.estate/dees-wcctools": "^3.9.0",
|
|
22
|
+
"@git.zone/tsrun": "^2.0.3",
|
|
23
|
+
"signature_pad": "^5.1.3"
|
|
24
|
+
},
|
|
25
|
+
"devDependencies": {
|
|
26
|
+
"@git.zone/tsbuild": "^4.4.0",
|
|
27
|
+
"@git.zone/tsbundle": "2.10.1",
|
|
28
|
+
"@git.zone/tswatch": "^3.3.3",
|
|
29
|
+
"@push.rocks/projectinfo": "^5.1.0",
|
|
30
|
+
"@types/node": "^25.6.0"
|
|
31
|
+
},
|
|
32
|
+
"files": [
|
|
33
|
+
"ts/**/*",
|
|
34
|
+
"ts_web/**/*",
|
|
35
|
+
"dist/**/*",
|
|
36
|
+
"dist_*/**/*",
|
|
37
|
+
"dist_ts/**/*",
|
|
38
|
+
"dist_ts_web/**/*",
|
|
39
|
+
"assets/**/*",
|
|
40
|
+
"cli.js",
|
|
41
|
+
".smartconfig.json",
|
|
42
|
+
"license",
|
|
43
|
+
"readme.md"
|
|
44
|
+
],
|
|
45
|
+
"browserslist": [
|
|
46
|
+
"last 1 Chrome versions"
|
|
47
|
+
],
|
|
48
|
+
"keywords": [
|
|
49
|
+
"e-signature",
|
|
50
|
+
"web components",
|
|
51
|
+
"digital signature",
|
|
52
|
+
"signature capture",
|
|
53
|
+
"ECMAScript Modules",
|
|
54
|
+
"typescript",
|
|
55
|
+
"component library",
|
|
56
|
+
"contract management",
|
|
57
|
+
"frontend development",
|
|
58
|
+
"signature pad",
|
|
59
|
+
"custom elements",
|
|
60
|
+
"electronic signing",
|
|
61
|
+
"npm package"
|
|
62
|
+
]
|
|
63
|
+
}
|
package/readme.hints.md
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
# Development Hints for @signature.digital/catalog
|
|
2
|
+
|
|
3
|
+
## dees-icon Usage
|
|
4
|
+
|
|
5
|
+
**Important**: Use the `.icon` property, NOT `.iconFA` (deprecated).
|
|
6
|
+
|
|
7
|
+
### Format
|
|
8
|
+
```html
|
|
9
|
+
<dees-icon .icon=${'prefix:IconName'}></dees-icon>
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
### Lucide Icons (PascalCase)
|
|
13
|
+
Lucide icons use **PascalCase** names:
|
|
14
|
+
- `lucide:CheckCircle` ✓
|
|
15
|
+
- `lucide:UserPlus` ✓
|
|
16
|
+
- `lucide:PenTool` ✓
|
|
17
|
+
- `lucide:Mail` ✓
|
|
18
|
+
- `lucide:Users` ✓
|
|
19
|
+
|
|
20
|
+
**Wrong formats**:
|
|
21
|
+
- `lucide:check-circle` ✗ (kebab-case doesn't work)
|
|
22
|
+
- `lucide:userPlus` ✗ (camelCase doesn't work)
|
|
23
|
+
|
|
24
|
+
### FontAwesome Icons (camelCase)
|
|
25
|
+
FontAwesome icons use **camelCase** names:
|
|
26
|
+
- `fa:arrowRight`
|
|
27
|
+
- `fa:magnifyingGlass`
|
|
28
|
+
- `fa:penToSquare`
|
|
29
|
+
|
|
30
|
+
### Documentation
|
|
31
|
+
See: https://code.foss.global/design.estate/dees-catalog/src/branch/main/readme.icons.md
|
package/readme.md
ADDED
|
@@ -0,0 +1,172 @@
|
|
|
1
|
+
# @signature.digital/catalog
|
|
2
|
+
|
|
3
|
+
Reusable web components for signature.digital product surfaces. The package ships signature capture primitives, a complete signature box, and a responsive workspace shell built with Lit and `@design.estate/dees-element`.
|
|
4
|
+
|
|
5
|
+
Use it when you need browser-native custom elements for signing flows without pulling product-specific authentication, persistence, routing, or API behavior into the component layer.
|
|
6
|
+
|
|
7
|
+
## Issue Reporting and Security
|
|
8
|
+
|
|
9
|
+
For reporting bugs, issues, or security vulnerabilities, please visit [community.foss.global/](https://community.foss.global/). This is the central community hub for all issue reporting. Developers who sign and comply with our contribution agreement and go through identification can also get a [code.foss.global/](https://code.foss.global/) account to submit Pull Requests directly.
|
|
10
|
+
|
|
11
|
+
## Install
|
|
12
|
+
|
|
13
|
+
```shell
|
|
14
|
+
pnpm add @signature.digital/catalog
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Quick Start
|
|
18
|
+
|
|
19
|
+
Register all elements once in your browser bundle:
|
|
20
|
+
|
|
21
|
+
```typescript
|
|
22
|
+
import '@signature.digital/catalog';
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
Render the product workspace:
|
|
26
|
+
|
|
27
|
+
```html
|
|
28
|
+
<sdig-workspace accent="#3b82f6" density="comfortable" theme="dark"></sdig-workspace>
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
Render a standalone signature box:
|
|
32
|
+
|
|
33
|
+
```html
|
|
34
|
+
<sdig-signbox></sdig-signbox>
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## Components
|
|
38
|
+
|
|
39
|
+
| Component | Tag | Purpose |
|
|
40
|
+
|-----------|-----|---------|
|
|
41
|
+
| `SdigWorkspace` | `<sdig-workspace>` | Product workspace shell with inbox, compose, signing, audit, developer, template, team, and settings views |
|
|
42
|
+
| `SignBox` | `<sdig-signbox>` | Complete signature capture UI with clear, undo, and submit actions |
|
|
43
|
+
| `SignPad` | `<sdig-signpad>` | Canvas-based signature capture primitive backed by `signature_pad` |
|
|
44
|
+
|
|
45
|
+
## Workspace Shell
|
|
46
|
+
|
|
47
|
+
`sdig-workspace` is the full product surface. It is responsive, supports dark/light themes, compact/comfortable density, an accent color, and a configurable initial view.
|
|
48
|
+
|
|
49
|
+
```html
|
|
50
|
+
<sdig-workspace
|
|
51
|
+
accent="#7c3aed"
|
|
52
|
+
density="compact"
|
|
53
|
+
theme="light"
|
|
54
|
+
initialView="compose"
|
|
55
|
+
></sdig-workspace>
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### Workspace Properties
|
|
59
|
+
|
|
60
|
+
| Property | Type | Default | Description |
|
|
61
|
+
|----------|------|---------|-------------|
|
|
62
|
+
| `accent` | `string` | `#3b82f6` | Accent color used for active navigation and highlights |
|
|
63
|
+
| `density` | `'compact' \| 'comfortable'` | `comfortable` | Controls spacing density |
|
|
64
|
+
| `theme` | `'dark' \| 'light'` | `dark` | Reflected to the host and used for design tokens |
|
|
65
|
+
| `initialView` | `TWorkspaceView` | `inbox` | First view displayed after connection |
|
|
66
|
+
|
|
67
|
+
### Workspace Views
|
|
68
|
+
|
|
69
|
+
| View | Notes |
|
|
70
|
+
|------|-------|
|
|
71
|
+
| `inbox` | Demo document inbox with status, recipients, sender, page count, and deadlines |
|
|
72
|
+
| `compose` | Document preparation surface with recipients and draggable-style field placements |
|
|
73
|
+
| `sign` | Signing flow surface for reviewing and completing assigned fields |
|
|
74
|
+
| `audit` | Audit trail surface for signature and document events |
|
|
75
|
+
| `developers` | Developer-facing integration and API concept surface |
|
|
76
|
+
| `templates` | Placeholder for reusable agreement templates |
|
|
77
|
+
| `team` | Placeholder for workspace members and roles |
|
|
78
|
+
| `settings` | Placeholder for workspace, billing, and security settings |
|
|
79
|
+
|
|
80
|
+
### Workspace Events
|
|
81
|
+
|
|
82
|
+
```typescript
|
|
83
|
+
const workspace = document.querySelector('sdig-workspace');
|
|
84
|
+
|
|
85
|
+
workspace?.addEventListener('view-change', (event) => {
|
|
86
|
+
const { view } = (event as CustomEvent<{ view: string }>).detail;
|
|
87
|
+
console.log(view);
|
|
88
|
+
});
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
Child views can request navigation by dispatching `workspace-view-request` with `{ view }` in `detail`. The event bubbles and crosses the shadow boundary.
|
|
92
|
+
|
|
93
|
+
## Signature Box
|
|
94
|
+
|
|
95
|
+
Use `sdig-signbox` when you want the default capture UI with a heading, a signature pad, and built-in action controls:
|
|
96
|
+
|
|
97
|
+
```html
|
|
98
|
+
<sdig-signbox></sdig-signbox>
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
```typescript
|
|
102
|
+
const signbox = document.querySelector('sdig-signbox');
|
|
103
|
+
|
|
104
|
+
signbox?.addEventListener('signature', (event) => {
|
|
105
|
+
const { signature } = (event as CustomEvent<{ signature: unknown[] }>).detail;
|
|
106
|
+
console.log(signature);
|
|
107
|
+
});
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
The `signature` event detail contains the `signature_pad` stroke data returned by `sdig-signpad.toData()`.
|
|
111
|
+
|
|
112
|
+
## Signature Pad
|
|
113
|
+
|
|
114
|
+
Use `sdig-signpad` directly when you need lower-level control over the canvas:
|
|
115
|
+
|
|
116
|
+
```html
|
|
117
|
+
<sdig-signpad></sdig-signpad>
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
```typescript
|
|
121
|
+
const signpad = document.querySelector('sdig-signpad');
|
|
122
|
+
|
|
123
|
+
const strokes = await signpad?.toData();
|
|
124
|
+
const svg = await signpad?.toSVG();
|
|
125
|
+
|
|
126
|
+
await signpad?.undo();
|
|
127
|
+
await signpad?.clear();
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
| Method | Description |
|
|
131
|
+
|--------|-------------|
|
|
132
|
+
| `toData()` | Returns `signature_pad` stroke data |
|
|
133
|
+
| `fromData(data)` | Restores `signature_pad` stroke data |
|
|
134
|
+
| `toSVG()` | Returns an SVG representation without a background color |
|
|
135
|
+
| `undo()` | Removes the latest stroke |
|
|
136
|
+
| `clear()` | Clears the canvas |
|
|
137
|
+
|
|
138
|
+
## Demo Data Boundary
|
|
139
|
+
|
|
140
|
+
The workspace currently renders local demo UI data from `sdig-workspace.shared.ts`. Real accounts, server persistence, document import/export, notification delivery, authentication, and legal signing workflow state belong in `@signature.digital/app` or backend services, not in this component catalog.
|
|
141
|
+
|
|
142
|
+
## Development
|
|
143
|
+
|
|
144
|
+
```shell
|
|
145
|
+
pnpm install
|
|
146
|
+
pnpm run build
|
|
147
|
+
pnpm test
|
|
148
|
+
pnpm run watch
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
The build compiles `ts_web/` into `dist_ts_web/` and bundles the component catalog demo from `html/index.ts` into `dist_bundle/`. Watch mode serves `dist_watch/` using the `.smartconfig.json` `@git.zone/tswatch` configuration.
|
|
152
|
+
|
|
153
|
+
## License and Legal Information
|
|
154
|
+
|
|
155
|
+
This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the [license](./license) file.
|
|
156
|
+
|
|
157
|
+
**Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.
|
|
158
|
+
|
|
159
|
+
### Trademarks
|
|
160
|
+
|
|
161
|
+
This project is owned and maintained by Task Venture Capital GmbH. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH or third parties, and are not included within the scope of the MIT license granted herein.
|
|
162
|
+
|
|
163
|
+
Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines or the guidelines of the respective third-party owners, and any usage must be approved in writing. Third-party trademarks used herein are the property of their respective owners and used only in a descriptive manner, e.g. for an implementation of an API or similar.
|
|
164
|
+
|
|
165
|
+
### Company Information
|
|
166
|
+
|
|
167
|
+
Task Venture Capital GmbH
|
|
168
|
+
Registered at District Court Bremen HRB 35230 HB, Germany
|
|
169
|
+
|
|
170
|
+
For any legal inquiries or further information, please contact us via email at hello@task.vc.
|
|
171
|
+
|
|
172
|
+
By using this repository, you acknowledge that you have read this section, agree to comply with its terms, and understand that the licensing of the code does not imply endorsement by Task Venture Capital GmbH of any derivative works.
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* autocreated commitinfo by @push.rocks/commitinfo
|
|
3
|
+
*/
|
|
4
|
+
export const commitinfo = {
|
|
5
|
+
name: '@signature.digital/catalog',
|
|
6
|
+
version: '1.3.0',
|
|
7
|
+
description: 'A comprehensive catalog of customizable web components designed for building and managing e-signature applications.'
|
|
8
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './sdig-signbox.js';
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
import { DeesElement, html, customElement, type TemplateResult, css, cssManager } from '@design.estate/dees-element';
|
|
2
|
+
|
|
3
|
+
declare global {
|
|
4
|
+
interface HTMLElementTagNameMap {
|
|
5
|
+
'sdig-signbox': SignBox;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
@customElement('sdig-signbox')
|
|
10
|
+
export class SignBox extends DeesElement {
|
|
11
|
+
public static demo = () => html`
|
|
12
|
+
<sdig-signbox></sdig-signbox>
|
|
13
|
+
`;
|
|
14
|
+
public static demoGroups = ['Signature Digital Primitives'];
|
|
15
|
+
|
|
16
|
+
constructor() {
|
|
17
|
+
super();
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
public static styles = [
|
|
21
|
+
cssManager.defaultStyles,
|
|
22
|
+
css`
|
|
23
|
+
.mainbox {
|
|
24
|
+
position: relative;
|
|
25
|
+
background: ${cssManager.bdTheme('#eeeeeb', '#111111')};
|
|
26
|
+
border-radius: 16px;
|
|
27
|
+
max-width: 600px;
|
|
28
|
+
margin: auto;
|
|
29
|
+
overflow: hidden;
|
|
30
|
+
color: ${cssManager.bdTheme('#111111', '#eeeeeb')};
|
|
31
|
+
font-family: 'Roboto', sans-serif;
|
|
32
|
+
box-shadow: ${cssManager.bdTheme('0px 0px 8px 0px #00000040', 'none')};
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.heading {
|
|
36
|
+
padding: 4px;
|
|
37
|
+
text-align: center;
|
|
38
|
+
font-weight: 500;
|
|
39
|
+
font-size: 12px;
|
|
40
|
+
margin-bottom: -20px;
|
|
41
|
+
pointer-events: none;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
sdig-signpad {
|
|
45
|
+
position: relative;
|
|
46
|
+
z-index: 1;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.actions {
|
|
50
|
+
position: relative;
|
|
51
|
+
padding: 0px 24px;
|
|
52
|
+
font-size: 16px;
|
|
53
|
+
background: ${cssManager.bdTheme('#eeeeeb', '#000000')};
|
|
54
|
+
box-shadow: ${cssManager.bdTheme('0px 0px 8px 0px #00000040', 'none')};
|
|
55
|
+
z-index: 2;
|
|
56
|
+
display: flex;
|
|
57
|
+
justify-content: flex-end;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.button {
|
|
61
|
+
cursor: pointer;
|
|
62
|
+
margin: 0px 16px;
|
|
63
|
+
padding: 16px 0px;
|
|
64
|
+
color: ${cssManager.bdTheme('#666', '#999')};
|
|
65
|
+
user-select: none;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.button:hover {
|
|
69
|
+
color: ${cssManager.bdTheme('#111111', '#eeeeeb')};
|
|
70
|
+
}
|
|
71
|
+
`
|
|
72
|
+
];
|
|
73
|
+
|
|
74
|
+
public render(): TemplateResult {
|
|
75
|
+
return html`
|
|
76
|
+
<div class="mainbox">
|
|
77
|
+
<div class="heading">
|
|
78
|
+
You may sign below:
|
|
79
|
+
</div>
|
|
80
|
+
<sdig-signpad></sdig-signpad>
|
|
81
|
+
<div class="actions">
|
|
82
|
+
<div class="button" @click=${async () => {
|
|
83
|
+
await this.shadowRoot?.querySelector('sdig-signpad')?.clear();
|
|
84
|
+
}}>
|
|
85
|
+
Clear
|
|
86
|
+
</div>
|
|
87
|
+
<div class="button" @click=${async () => {
|
|
88
|
+
await this.shadowRoot?.querySelector('sdig-signpad')?.undo();
|
|
89
|
+
}}>
|
|
90
|
+
Undo
|
|
91
|
+
</div>
|
|
92
|
+
<div class="button" @click=${async () => {
|
|
93
|
+
const signaturePad = this.shadowRoot?.querySelector('sdig-signpad');
|
|
94
|
+
if (!signaturePad) return;
|
|
95
|
+
const signature = await signaturePad.toData();
|
|
96
|
+
this.dispatchEvent(new CustomEvent('signature', {
|
|
97
|
+
detail: {
|
|
98
|
+
signature,
|
|
99
|
+
}
|
|
100
|
+
}));
|
|
101
|
+
console.log(signature);
|
|
102
|
+
}}>
|
|
103
|
+
Submit Signature
|
|
104
|
+
</div>
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
`;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './sdig-signpad.js';
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
import { DeesElement, html, customElement, type TemplateResult, css, cssManager } from '@design.estate/dees-element';
|
|
2
|
+
import * as plugins from '../../plugins.js';
|
|
3
|
+
|
|
4
|
+
declare global {
|
|
5
|
+
interface HTMLElementTagNameMap {
|
|
6
|
+
'sdig-signpad': SignPad;
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
@customElement('sdig-signpad')
|
|
11
|
+
export class SignPad extends DeesElement {
|
|
12
|
+
public static demo = () => html`
|
|
13
|
+
<sdig-signpad></sdig-signpad>
|
|
14
|
+
`;
|
|
15
|
+
public static demoGroups = ['Signature Digital Primitives'];
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
constructor() {
|
|
19
|
+
super();
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
public static styles = [
|
|
23
|
+
cssManager.defaultStyles,
|
|
24
|
+
css`
|
|
25
|
+
:host {
|
|
26
|
+
display: block;
|
|
27
|
+
color: white;
|
|
28
|
+
position: relative;
|
|
29
|
+
max-width: 600px;
|
|
30
|
+
min-height: 280px;
|
|
31
|
+
max-height: 400px;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.mainbox {
|
|
35
|
+
position: relative;
|
|
36
|
+
width: 600px;
|
|
37
|
+
height: 280px;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.signline {
|
|
41
|
+
position: absolute;
|
|
42
|
+
bottom: 30%;
|
|
43
|
+
width: 80%;
|
|
44
|
+
left: 10%;
|
|
45
|
+
border-top: 1px dashed ${cssManager.bdTheme('#00000040', '#ffffff20')};
|
|
46
|
+
pointer-events: none;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
canvas {
|
|
50
|
+
filter: ${cssManager.bdTheme('invert(0)', 'invert(1)')};
|
|
51
|
+
}
|
|
52
|
+
`
|
|
53
|
+
]
|
|
54
|
+
|
|
55
|
+
public render(): TemplateResult {
|
|
56
|
+
return html`
|
|
57
|
+
<div class="mainbox">
|
|
58
|
+
<div class="signline"></div>
|
|
59
|
+
</div>
|
|
60
|
+
`;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
public signaturePad?: typeof plugins.signaturePad.prototype;
|
|
64
|
+
|
|
65
|
+
public async firstUpdated() {
|
|
66
|
+
await this.domtoolsPromise;
|
|
67
|
+
const mainbox = this.shadowRoot?.querySelector('.mainbox');
|
|
68
|
+
if (!mainbox) return;
|
|
69
|
+
const canvas = document.createElement('canvas');
|
|
70
|
+
mainbox.appendChild(canvas);
|
|
71
|
+
await this.resizeCanvas();
|
|
72
|
+
this.signaturePad = new plugins.signaturePad(canvas, {
|
|
73
|
+
|
|
74
|
+
});
|
|
75
|
+
this.signaturePad.on();
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
public async resizeCanvas() {
|
|
79
|
+
const mainbox = this.shadowRoot?.querySelector('.mainbox');
|
|
80
|
+
const canvas = this.shadowRoot?.querySelector('canvas');
|
|
81
|
+
if (!mainbox || !canvas) return;
|
|
82
|
+
const mainboxWidth = mainbox.clientWidth;
|
|
83
|
+
const mainboxHeight = mainbox.clientHeight;
|
|
84
|
+
canvas.width = mainboxWidth;
|
|
85
|
+
canvas.height = mainboxHeight;
|
|
86
|
+
if (this.signaturePad) {
|
|
87
|
+
this.signaturePad.clear();
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
public async clear() {
|
|
92
|
+
this.signaturePad?.clear();
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
public async toData() {
|
|
96
|
+
const returnData = this.signaturePad?.toData() || [];
|
|
97
|
+
return returnData;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
public async fromData(dataArrayArg: any[]) {
|
|
101
|
+
this.signaturePad?.fromData(dataArrayArg);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
public async toSVG() {
|
|
105
|
+
return this.signaturePad?.toSVG({
|
|
106
|
+
includeBackgroundColor: false,
|
|
107
|
+
}) || '';
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
public async undo() {
|
|
111
|
+
const data = await this.toData();
|
|
112
|
+
data.pop();
|
|
113
|
+
await this.fromData(data);
|
|
114
|
+
}
|
|
115
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export * from './sdig-workspace.shared.js';
|
|
2
|
+
export * from './sdig-workspace-inbox.js';
|
|
3
|
+
export * from './sdig-workspace-compose.js';
|
|
4
|
+
export * from './sdig-workspace-sign.js';
|
|
5
|
+
export * from './sdig-workspace-audit.js';
|
|
6
|
+
export * from './sdig-workspace-developers.js';
|
|
7
|
+
export * from './sdig-workspace-placeholder.js';
|
|
8
|
+
export * from './sdig-workspace.js';
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { DeesElement, html, customElement, type TemplateResult, css } from '@design.estate/dees-element';
|
|
2
|
+
import { actionButton, demoRecipients, icon, pill, topBar, workspaceBaseStyles, workspaceDemoFrame } from './sdig-workspace.shared.js';
|
|
3
|
+
|
|
4
|
+
declare global {
|
|
5
|
+
interface HTMLElementTagNameMap {
|
|
6
|
+
'sdig-workspace-audit': SdigWorkspaceAudit;
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
@customElement('sdig-workspace-audit')
|
|
11
|
+
export class SdigWorkspaceAudit extends DeesElement {
|
|
12
|
+
public static demo = () => workspaceDemoFrame(html`<sdig-workspace-audit></sdig-workspace-audit>`);
|
|
13
|
+
public static demoGroups = ['Signature Digital Workspace'];
|
|
14
|
+
|
|
15
|
+
public static styles = [workspaceBaseStyles, css`
|
|
16
|
+
.audit-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; }
|
|
17
|
+
.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; }
|
|
18
|
+
@media (max-width: 920px) { .audit-grid { grid-template-columns: 1fr; } .event-row { grid-template-columns: 24px 1fr; } .event-row .hide-mobile { display: none; } }
|
|
19
|
+
`];
|
|
20
|
+
|
|
21
|
+
public render(): TemplateResult {
|
|
22
|
+
const events = [
|
|
23
|
+
['2026-05-02 14:32:18 UTC', 'Sarah Chen', 'Document signed', '81.221.4.18 · Brussels, BE', '0x4a7b…f29c', 'success'],
|
|
24
|
+
['2026-05-02 14:31:54 UTC', 'Sarah Chen', 'Signature adopted (typed)', '81.221.4.18 · Brussels, BE', '0x4a7b…f29c', 'info'],
|
|
25
|
+
['2026-05-02 14:28:02 UTC', 'Sarah Chen', 'Document opened', '81.221.4.18 · Brussels, BE', '', 'default'],
|
|
26
|
+
['2026-05-02 11:02:11 UTC', 'Philipp K.', 'Document sent for signature', '92.42.114.7 · Berlin, DE', '0x1c8a…3b6f', 'info'],
|
|
27
|
+
['2026-05-02 10:54:22 UTC', 'Philipp K.', 'Document created', '92.42.114.7 · Berlin, DE', '0x1c8a…3b6f', 'default'],
|
|
28
|
+
];
|
|
29
|
+
return html`
|
|
30
|
+
${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')}` })}
|
|
31
|
+
<div class="content-scroll audit-grid">
|
|
32
|
+
<div class="card"><div style="height: 36px; padding: 0 16px; border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: space-between;"><span style="font-size: 12px; font-weight: 600;">Event log</span><span class="mono" style="font-size: 10px; color: var(--text-muted);">${events.length} events · immutable</span></div>${events.map((event) => html`<div class="event-row"><div><span style="display: block; width: 8px; height: 8px; border-radius: 50%; background: ${event[5] === 'success' ? 'var(--success)' : event[5] === 'info' ? 'var(--accent)' : 'var(--text-dim)'};"></span></div><div class="mono hide-mobile" style="font-size: 11px; color: var(--text-muted);">${event[0]}</div><div><div style="font-size: 12px; font-weight: 500;">${event[2]}</div><div style="font-size: 10px; color: var(--text-muted); margin-top: 2px;">by ${event[1]} ${event[4] ? html`<span class="mono" style="color: var(--accent); margin-left: 8px;">${event[4]}</span>` : ''}</div></div><div class="mono hide-mobile" style="font-size: 10px; color: var(--text-muted); text-align: right;">${event[3]}</div></div>`)}</div>
|
|
33
|
+
<div style="display: flex; flex-direction: column; gap: 16px;"><div class="card" style="padding: 16px;"><div class="label-upper">Document hash</div><div class="mono" style="font-size: 11px; color: var(--accent); word-break: break-all; line-height: 1.5; padding: 10px; background: var(--bg-el); border-radius: 4px; border: 1px solid var(--border-subtle);">0x4a7b8f29c91e3d2a5b6c8e0f1d3c5a7b9d2e4f6a8c1e3d5f7b9c1e3a5b7d9f0e</div></div><div class="card" style="padding: 16px;"><div class="label-upper">Signers</div>${demoRecipients.map((recipient) => html`<div class="recipient-line"><span class="avatar" style="background: ${recipient.color};">${recipient.name.split(' ').map((part) => part[0]).slice(0, 2).join('')}</span><div style="flex: 1;"><div style="font-size: 12px;">${recipient.name}</div><div class="mono" style="font-size: 10px; color: var(--text-muted);">${recipient.email}</div></div>${icon('check', 12)}</div>`)}</div><div class="card" style="padding: 16px; border-color: rgba(34,197,94,0.2);"><div style="display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--success); margin-bottom: 6px;">${icon('shield', 13)} eIDAS Qualified · ESIGN Act compliant</div><div style="font-size: 11px; color: var(--text-muted); line-height: 1.55;">Open-source verifier available. Anyone can independently validate this signature against the public ledger.</div></div></div>
|
|
34
|
+
</div>
|
|
35
|
+
`;
|
|
36
|
+
}
|
|
37
|
+
}
|