@servicetitan/dte-pdf-editor 1.72.0 → 1.73.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.
@@ -0,0 +1,35 @@
1
+ @keyframes dte-slide-in-left {
2
+ from {
3
+ transform: translateX(-100%);
4
+ }
5
+ to {
6
+ transform: translateX(0);
7
+ }
8
+ }
9
+
10
+ .dte-field-config-panel-overlay {
11
+ position: absolute;
12
+ top: 0;
13
+ left: 0;
14
+ bottom: 0;
15
+ width: calc(
16
+ var(--layout-sidebar-content-width, 305px) + var(--layout-sidebar-menu-width, 85px) + 1px
17
+ );
18
+ border-right: 1px solid var(--border-color);
19
+ background-color: var(--white);
20
+ z-index: 1000;
21
+ overflow-y: auto;
22
+ animation: dte-slide-in-left 0.3s ease-out;
23
+ display: flex;
24
+ flex-direction: column;
25
+ }
26
+
27
+ .dte-field-config-panel-header {
28
+ padding: var(--spacing-2);
29
+ border-bottom: 1px solid var(--border-color);
30
+ }
31
+
32
+ .dte-field-config-panel-content {
33
+ padding: var(--spacing-2);
34
+ flex: 1;
35
+ }
@@ -0,0 +1,64 @@
1
+ .dte-field-sidebar-container {
2
+ position: relative;
3
+ }
4
+
5
+ .dte-pdf-editor .dte-field-sidebar-menu {
6
+ width: var(--layout-sidebar-menu-width, 85px);
7
+ padding: var(--spacing-2) var(--spacing-half);
8
+ }
9
+
10
+ .dte-field-sidebar-menu-item {
11
+ --sub-item-color: unset;
12
+ cursor: pointer;
13
+ }
14
+
15
+ .dte-field-sidebar-menu-item:hover {
16
+ --sub-item-color: var(--menu-hover-color);
17
+ }
18
+
19
+ .dte-field-sidebar-menu-item.--active {
20
+ --sub-item-color: var(--menu-active-color);
21
+ }
22
+
23
+ .dte-field-sidebar-menu-item-text {
24
+ text-align: center;
25
+ }
26
+
27
+ .dte-field-sidebar-menu-item-text,
28
+ .dte-field-sidebar-menu-item-icon {
29
+ transition: color 0.2s ease-out;
30
+ color: var(--sub-item-color);
31
+ }
32
+
33
+ .dte-field-sidebar-toggler {
34
+ position: absolute;
35
+ top: 0;
36
+ right: -5px;
37
+ cursor: pointer;
38
+ background: transparent;
39
+ }
40
+
41
+ .dte-field-sidebar-content {
42
+ border-left: 1px solid var(--border-color);
43
+ border-right: 1px solid var(--border-color);
44
+ position: relative;
45
+ width: 0;
46
+ transition: width 0.3s ease-out;
47
+ }
48
+
49
+ .dte-field-sidebar-content-inner {
50
+ width: var(--layout-sidebar-content-width, 305px);
51
+ min-width: var(--layout-sidebar-content-width, 305px);
52
+ display: flex;
53
+ padding: var(--spacing-2);
54
+ flex-direction: column;
55
+ overflow-y: auto;
56
+ }
57
+
58
+ .dte-field-sidebar-content.--open {
59
+ width: var(--layout-sidebar-content-width, 305px);
60
+ }
61
+
62
+ .dte-field-sidebar-search {
63
+ margin-top: 18px;
64
+ }
@@ -0,0 +1,9 @@
1
+ .dte-field-type-group {
2
+ margin-top: var(--spacing-1);
3
+ padding-left: 1px;
4
+ }
5
+
6
+ .dte-field-type-group-header {
7
+ cursor: pointer;
8
+ user-select: none;
9
+ }
@@ -0,0 +1,17 @@
1
+ .dte-field-type-item {
2
+ align-items: center;
3
+ display: flex;
4
+ gap: 8px;
5
+ padding: 12px;
6
+ background-color: var(--color-neutral-0);
7
+ border: 1px solid var(--border-color);
8
+ border-radius: 0.375rem;
9
+ cursor: grab;
10
+ user-select: none;
11
+ margin-top: var(--spacing-1, 8px);
12
+ transition: box-shadow 0.2s ease-in-out;
13
+ }
14
+
15
+ .dte-field-type-item:hover {
16
+ box-shadow: 0 0 2px 0 var(--border-color-active);
17
+ }
@@ -0,0 +1,221 @@
1
+ /* Formula modal overlay */
2
+ .dte-formula-modal-overlay {
3
+ position: fixed;
4
+ inset: 0;
5
+ z-index: var(--z-index-drawer);
6
+ background-color: rgba(0, 0, 0, 0.4);
7
+ padding: var(--spacing-2);
8
+ }
9
+
10
+ .dte-formula-modal {
11
+ background: var(--white);
12
+ border-radius: 8px;
13
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
14
+ width: 800px;
15
+ max-height: 85vh;
16
+ }
17
+
18
+ /* Field sidebar (left) */
19
+ .dte-formula-sidebar {
20
+ flex: 0 0 250px;
21
+ border-right: 1px solid var(--border-color);
22
+ padding-right: var(--spacing-2);
23
+ gap: var(--spacing-2);
24
+ display: flex;
25
+ flex-direction: column;
26
+ min-height: 0;
27
+ overflow-y: auto;
28
+ transition:
29
+ background-color 0.28s ease,
30
+ border-color 0.28s ease,
31
+ box-shadow 0.28s ease;
32
+ }
33
+
34
+ .dte-formula-sidebar-slide-outer {
35
+ flex: 1;
36
+ min-height: 0;
37
+ overflow-x: hidden;
38
+ overflow-y: auto;
39
+ width: 100%;
40
+ }
41
+
42
+ .dte-formula-sidebar-slide-track {
43
+ align-items: stretch;
44
+ display: flex;
45
+ flex-direction: row;
46
+ min-height: min-content;
47
+ width: 200%;
48
+ transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
49
+ will-change: transform;
50
+ }
51
+
52
+ .dte-formula-sidebar-slide-track.--detail {
53
+ transform: translateX(-50%);
54
+ }
55
+
56
+ .dte-formula-sidebar-slide-panel {
57
+ box-sizing: border-box;
58
+ display: flex;
59
+ flex: 0 0 50%;
60
+ flex-direction: column;
61
+ gap: var(--spacing-2);
62
+ min-height: min-content;
63
+ padding-right: var(--spacing-1);
64
+ width: 50%;
65
+ }
66
+
67
+ .dte-formula-sidebar-slide-panel.--form-fields {
68
+ flex-shrink: 0;
69
+ gap: 0;
70
+ }
71
+
72
+ .dte-formula-sidebar-forms-heading {
73
+ flex-shrink: 0;
74
+ }
75
+
76
+ .dte-formula-field-list {
77
+ margin: var(--spacing-0);
78
+ padding: var(--spacing-0);
79
+ list-style: none;
80
+ }
81
+
82
+ .dte-formula-field-list-item {
83
+ padding: var(--spacing-1) var(--spacing-2);
84
+ cursor: pointer;
85
+ border: 1px solid var(--border-color);
86
+ margin-block: var(--spacing-1);
87
+ border-radius: var(--spacing-1);
88
+ font-size: var(--typescale-1, 14px);
89
+ }
90
+
91
+ .dte-text-ellipsis {
92
+ overflow: hidden;
93
+ text-overflow: ellipsis;
94
+ white-space: nowrap;
95
+ }
96
+
97
+ .dte-formula-field-list-item:hover,
98
+ .dte-formula-field-list-item.--highlight {
99
+ color: var(--color-neutral-100, #e8e8e8);
100
+ }
101
+
102
+ .dte-formula-field-list-item.--selected {
103
+ border-color: var(--border-color-active-dark, #2d2e31);
104
+ }
105
+
106
+ .dte-formula-editor {
107
+ min-height: 100px;
108
+ max-height: 180px;
109
+ overflow-y: auto;
110
+ padding: var(--spacing-2);
111
+ border: 1px solid var(--border-color);
112
+ border-radius: 4px;
113
+ outline: none;
114
+ font-size: var(--typescale-2);
115
+ line-height: var(--base-line-height);
116
+ white-space: pre-wrap;
117
+ }
118
+
119
+ .dte-formula-preview {
120
+ padding: var(--spacing-1) var(--spacing-2);
121
+ border: 1px solid var(--border-color);
122
+ border-radius: 4px;
123
+ height: 20px;
124
+ background-color: var(--color-neutral-10, #f5f6f7);
125
+ font-size: var(--typescale-2);
126
+ line-height: var(--base-line-height);
127
+ }
128
+
129
+ .dte-formula-editor:focus {
130
+ border-color: var(--border-color-active);
131
+ box-shadow: 0 0 0 1px var(--border-color-active);
132
+ }
133
+
134
+ .dte-formula-editor-invalid {
135
+ border-color: var(--danger, #dc3545);
136
+ }
137
+
138
+ .dte-formula-editor:empty::before {
139
+ content: attr(data-placeholder);
140
+ color: var(--color-neutral-200);
141
+ }
142
+
143
+ .dte-formula-chip {
144
+ display: inline-flex;
145
+ align-items: center;
146
+ padding: 6px 12px;
147
+ margin: var(--spacing-0) 2px;
148
+ background: var(--menu-active-bg-light-color, #e0f2ff);
149
+ border: 1px solid var(--border-color-active);
150
+ border-radius: 20px;
151
+ color: var(--black, #000000);
152
+ gap: var(--spacing-half);
153
+ margin-bottom: var(--spacing-half);
154
+ cursor: grab;
155
+ font-weight: normal;
156
+ font-size: var(--typescale-0);
157
+ }
158
+
159
+ .dte-formula-chip-label {
160
+ pointer-events: none;
161
+ }
162
+
163
+ .dte-formula-chip-remove {
164
+ cursor: pointer;
165
+ opacity: 0.9;
166
+ padding: var(--spacing-0) 2px;
167
+ font-size: var(--typescale-3);
168
+ font-weight: var(--font-weight-semibold);
169
+ line-height: 1;
170
+ }
171
+
172
+ .dte-formula-chip-remove:hover {
173
+ opacity: 1;
174
+ }
175
+
176
+ .dte-formula-advanced {
177
+ margin-top: var(--spacing-2);
178
+ padding-top: var(--spacing-2);
179
+ border-top: 1px solid var(--border-color);
180
+ display: flex;
181
+ flex-direction: column;
182
+ gap: var(--spacing-2);
183
+ }
184
+
185
+ .dte-formula-advanced-value {
186
+ color: var(--color-neutral-300);
187
+ }
188
+
189
+ .dte-formula-advanced-input {
190
+ flex: 1;
191
+ min-width: 0;
192
+ max-width: 160px;
193
+ padding: var(--spacing-1) var(--spacing-2);
194
+ border: 1px solid var(--border-color);
195
+ border-radius: 4px;
196
+ font-size: var(--typescale-2);
197
+ }
198
+
199
+ .dte-formula-modal-header {
200
+ padding: var(--spacing-2);
201
+ border-bottom: 1px solid var(--border-color);
202
+ }
203
+
204
+ .dte-formula-modal-footer {
205
+ padding: var(--spacing-2);
206
+ border-top: 1px solid var(--border-color);
207
+ }
208
+
209
+ .dte-formula-caret {
210
+ width: 0;
211
+ height: 1em;
212
+ border-left: 2px solid var(--color-neutral-300);
213
+ margin: var(--spacing-0) 1px;
214
+ animation: dte-formula-caret-blink 1s step-end infinite;
215
+ }
216
+
217
+ @keyframes dte-formula-caret-blink {
218
+ 50% {
219
+ opacity: 0;
220
+ }
221
+ }
@@ -0,0 +1,16 @@
1
+ .full-width {
2
+ width: 100%;
3
+ }
4
+
5
+ .ellipsis {
6
+ white-space: nowrap;
7
+ overflow: hidden;
8
+ text-overflow: ellipsis;
9
+ }
10
+
11
+ .bordered-paper {
12
+ padding: 12px;
13
+ background-color: var(--color-neutral-0);
14
+ border: 1px solid var(--border-color);
15
+ border-radius: 0.375rem;
16
+ }
@@ -0,0 +1,12 @@
1
+ @import './variables.css';
2
+ @import './generic.css';
3
+ @import './pdf-canvas.css';
4
+ @import './field-sidebar.css';
5
+ @import './pdf-field-overlay.css';
6
+ @import './pdf-editor.css';
7
+ @import './field-type-list.css';
8
+ @import './field-config-panel-overlay.css';
9
+ @import './formula-modal.css';
10
+ @import './field-type.css';
11
+ @import './pdf-document-renderer.css';
12
+ @import './inline-editable.css';
@@ -0,0 +1,22 @@
1
+ .inline-editable-input {
2
+ width: 100%;
3
+ min-width: 0;
4
+ box-sizing: border-box;
5
+ border: 1px solid var(--border-color);
6
+ padding: 2px var(--spacing-half);
7
+ font: inherit;
8
+ background: var(--bg-color);
9
+ }
10
+
11
+ .inline-editable-button {
12
+ min-height: 20px;
13
+ width: 100%;
14
+ height: inherit;
15
+ cursor: pointer;
16
+ }
17
+
18
+ .inline-editable-html-text {
19
+ margin: var(--spacing-0, 0);
20
+ white-space: pre-wrap;
21
+ font-family: 'Arial', sans-serif;
22
+ }
@@ -0,0 +1,11 @@
1
+ .dte-pdf-canvas-container {
2
+ overflow: auto;
3
+ position: relative;
4
+ }
5
+
6
+ .dte-pdf-wrapper {
7
+ position: relative;
8
+ width: 100%;
9
+ margin-inline-start: auto;
10
+ margin-inline-end: auto;
11
+ }
@@ -0,0 +1,4 @@
1
+ .dte-pdf-document-renderer-page {
2
+ margin-bottom: 20px;
3
+ position: relative;
4
+ }
@@ -0,0 +1,15 @@
1
+ .dte-pdf-editor {
2
+ max-width: 100%;
3
+ position: relative;
4
+ border: 1px solid var(--border-color);
5
+ }
6
+
7
+ .dte-pdf-editor-sidebar-container {
8
+ position: relative;
9
+ overflow: hidden;
10
+ }
11
+
12
+ .dte-pdf-editor-content-container {
13
+ max-width: 100%;
14
+ overflow: auto;
15
+ }
@@ -0,0 +1,201 @@
1
+ .dte-pdf-field-overlay {
2
+ position: absolute;
3
+ top: 0;
4
+ left: 0;
5
+ width: 100%;
6
+ height: 100%;
7
+ pointer-events: none;
8
+ }
9
+
10
+ .dte-pdf-field-overlay.--view-mode {
11
+ pointer-events: auto;
12
+ }
13
+
14
+ /* Editor-only chrome. Layout metrics come from getFieldBoundsStyle. */
15
+ .dte-pdf-field-editor {
16
+ outline: 1px dashed #999;
17
+ outline-offset: 0;
18
+ border: none;
19
+ pointer-events: auto;
20
+ }
21
+
22
+ .dte-pdf-field-editor.fillable-radio.--edit-mode {
23
+ overflow: unset !important;
24
+ }
25
+
26
+ .dte-pdf-field-editor.--selected {
27
+ outline: 2px solid var(--border-color-active);
28
+ cursor: move;
29
+ }
30
+
31
+ .dte-pdf-field-editor.--unselected {
32
+ cursor: pointer;
33
+ }
34
+
35
+ .dte-pdf-field-editor.--dragging {
36
+ opacity: 0.5;
37
+ }
38
+
39
+ .dte-pdf-field-editor.--colored:not(.--selected) {
40
+ outline-color: var(--border-color-active) !important;
41
+ box-shadow: 0 0 2px 0 var(--border-color-active);
42
+ }
43
+
44
+ .dte-pdf-field-editor.--error {
45
+ outline-color: var(--danger) !important;
46
+ box-shadow: 0 0 4px 0 var(--danger);
47
+ }
48
+
49
+ .dte-pdf-field-error-message {
50
+ top: 100%;
51
+ min-width: 100px;
52
+ position: absolute;
53
+ margin-top: var(--spacing-half, 4px);
54
+ color: var(--danger);
55
+ font-size: var(--typescale-1, 12px);
56
+ }
57
+
58
+ .dte-pdf-field-resize-handle {
59
+ position: absolute;
60
+ bottom: 0;
61
+ right: 0;
62
+ width: 12px;
63
+ height: 12px;
64
+ border: 2px dashed var(--border-color-active);
65
+ cursor: nwse-resize;
66
+ z-index: 10;
67
+ box-sizing: border-box;
68
+ }
69
+
70
+ .dte-pdf-field-resize-handle:hover {
71
+ border-color: var(--border-color-active);
72
+ }
73
+
74
+ .dte-add-field-button {
75
+ display: none;
76
+ position: absolute;
77
+ bottom: -20px;
78
+ left: -10px;
79
+ margin-left: 50%;
80
+ padding: var(--spacing-0, 0);
81
+ width: 20px;
82
+ height: 20px;
83
+ }
84
+
85
+ .dte-pdf-field-editor:hover .dte-add-field-button {
86
+ display: block;
87
+ }
88
+
89
+ .dte-pdf-field-view {
90
+ border: none;
91
+ outline: none;
92
+ cursor: default;
93
+ pointer-events: auto;
94
+ }
95
+
96
+ .dte-pdf-field-content {
97
+ width: 100%;
98
+ min-width: 0;
99
+ min-height: 0;
100
+ overflow: hidden;
101
+ line-height: 1;
102
+ }
103
+
104
+ /*
105
+ * Printed PDF text modes (no ellipsis — hard clip like PdfSharp).
106
+ */
107
+ .dte-pdf-field-text--single-line {
108
+ width: 100%;
109
+ min-width: 0;
110
+ line-height: 1;
111
+ white-space: nowrap;
112
+ overflow: hidden;
113
+ }
114
+
115
+ .dte-pdf-field-text--multiline {
116
+ width: 100%;
117
+ height: 100%;
118
+ min-width: 0;
119
+ min-height: 0;
120
+ line-height: 1;
121
+ white-space: pre-wrap;
122
+ overflow: hidden;
123
+ }
124
+
125
+ .dte-pdf-field-text--wrapped {
126
+ width: 100%;
127
+ min-width: 0;
128
+ line-height: 1;
129
+ white-space: normal;
130
+ overflow: hidden;
131
+ }
132
+
133
+ .dte-pdf-field-value {
134
+ color: #333;
135
+ font: inherit;
136
+ }
137
+
138
+ .dte-pdf-field-fillable {
139
+ width: 100%;
140
+ height: 100%;
141
+ min-width: 0;
142
+ min-height: 0;
143
+ box-sizing: border-box;
144
+ background: inherit;
145
+ border: none;
146
+ padding: var(--spacing-0);
147
+ margin: var(--spacing-0);
148
+ line-height: 1;
149
+ font-size: inherit;
150
+ }
151
+
152
+ .dte-pdf-field-editor .dte-pdf-field-fillable {
153
+ pointer-events: none;
154
+ }
155
+
156
+ .dte-pdf-field-view .dte-pdf-field-fillable {
157
+ pointer-events: auto;
158
+ }
159
+
160
+ .dte-pdf-field-fillable.dte-pdf-field-text--single-line {
161
+ white-space: nowrap;
162
+ overflow: hidden;
163
+ }
164
+
165
+ .dte-pdf-field-fillable.dte-pdf-field-text--multiline {
166
+ white-space: pre-wrap;
167
+ overflow-wrap: break-word;
168
+ overflow: hidden;
169
+ resize: none;
170
+ }
171
+
172
+ .dte-pdf-field-generic-table {
173
+ padding: var(--spacing-0, 0);
174
+ margin: var(--spacing-0, 0);
175
+ border-spacing: var(--spacing-0, 0);
176
+ width: 100%;
177
+ table-layout: fixed;
178
+ }
179
+
180
+ .dte-pdf-field-generic-table td {
181
+ border-top: 1px solid var(--border-color);
182
+ border-left: 1px solid var(--border-color);
183
+ padding-inline: var(--spacing-1, 8px);
184
+ }
185
+
186
+ .dte-pdf-field-generic-table .dte-pdf-field-generic-table-header td {
187
+ background-color: var(--bg-color);
188
+ font-weight: bold;
189
+ }
190
+
191
+ .dte-pdf-field-generic-table tr:not(.dte-pdf-field-generic-table-header) td {
192
+ background-color: var(--bg-color-light);
193
+ }
194
+
195
+ .dte-pdf-field-generic-table tr:last-child td {
196
+ border-bottom: 1px solid var(--border-color);
197
+ }
198
+
199
+ .dte-pdf-field-generic-table tr td:last-child {
200
+ border-right: 1px solid var(--border-color);
201
+ }
@@ -0,0 +1,47 @@
1
+ @import '@servicetitan/tokens/dist/tokens.css';
2
+
3
+ .dte-pdf-editor {
4
+ --menu-active-color: var(--color-blue-400, #2270ee);
5
+ --menu-active-bg-light-color: var(--color-blue-100, #e0f2ff);
6
+ --menu-hover-color: var(--color-neutral-100, #606162);
7
+
8
+ /* Typography */
9
+ --typescale-0: var(--typescale-1, 12px);
10
+ --typescale-1: var(--typescale-1, 14px);
11
+
12
+ /* Spacing */
13
+ --spacing-0: 0;
14
+ --spacing-half: 4px;
15
+ --spacing-1: 8px;
16
+ --spacing-2: 16px;
17
+ --spacing-3: 24px;
18
+
19
+ /* Colors - Neutral */
20
+ --color-neutral-0: var(--color-neutral-0, #ffffff);
21
+ --color-neutral-70: var(--color-neutral-70, #737475);
22
+ --color-neutral-200: var(--color-neutral-200, #6c6d70);
23
+ --color-neutral-300: var(--color-neutral-300, #2d2e31);
24
+
25
+ /* Background colors */
26
+ --bg-color-light: var(--color-neutral-0, #ffffff);
27
+ --bg-color: var(--color-neutral-200, #f5f5f5);
28
+ --bg-color-hover: #eaeaea;
29
+
30
+ /* Colors - Semantic */
31
+ --success: #28a745;
32
+ --danger: #dc3545;
33
+ --green: #28a745;
34
+ --red: #dc3545;
35
+ --white: var(--color-neutral-0, #ffffff);
36
+ --black: #000000;
37
+
38
+ /* Border colors*/
39
+ --border-color: #e0e0e0;
40
+ --border-color-hover: #bdbdbd;
41
+ --border-color-active: var(--color-blue-400, #2270ee);
42
+ --border-color-active-dark: var(--color-neutral-300, #2d2e31);
43
+
44
+ /* Layout sizes */
45
+ --layout-sidebar-menu-width: 85px;
46
+ --layout-sidebar-content-width: 305px;
47
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@servicetitan/dte-pdf-editor",
3
- "version": "1.72.0",
3
+ "version": "1.73.0",
4
4
  "description": "",
5
5
  "main": "./dist/index.js",
6
6
  "typings": "./dist/index.d.ts",
@@ -12,6 +12,10 @@
12
12
  "access": "public",
13
13
  "registry": "https://registry.npmjs.org"
14
14
  },
15
+ "scripts": {
16
+ "build": "tsc --build",
17
+ "postbuild": "startup prepare-package"
18
+ },
15
19
  "cli": {
16
20
  "webpack": false
17
21
  },