@servicetitan/dte-pdf-editor 1.91.0 → 1.92.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.
Files changed (140) hide show
  1. package/dist/components/field-sidebar/calculated-field-type-list.d.ts.map +1 -1
  2. package/dist/components/field-sidebar/calculated-field-type-list.js +1 -1
  3. package/dist/components/field-sidebar/calculated-field-type-list.js.map +1 -1
  4. package/dist/components/field-sidebar/data-model-field-type-list.d.ts +1 -12
  5. package/dist/components/field-sidebar/data-model-field-type-list.d.ts.map +1 -1
  6. package/dist/components/field-sidebar/data-model-field-type-list.js +9 -29
  7. package/dist/components/field-sidebar/data-model-field-type-list.js.map +1 -1
  8. package/dist/components/field-sidebar/e-sign-field-type-list.d.ts.map +1 -1
  9. package/dist/components/field-sidebar/e-sign-field-type-list.js +1 -1
  10. package/dist/components/field-sidebar/e-sign-field-type-list.js.map +1 -1
  11. package/dist/components/field-sidebar/field-sidebar.d.ts +0 -5
  12. package/dist/components/field-sidebar/field-sidebar.d.ts.map +1 -1
  13. package/dist/components/field-sidebar/field-sidebar.js +10 -7
  14. package/dist/components/field-sidebar/field-sidebar.js.map +1 -1
  15. package/dist/components/field-sidebar/field-type.d.ts +2 -0
  16. package/dist/components/field-sidebar/field-type.d.ts.map +1 -1
  17. package/dist/components/field-sidebar/field-type.js +2 -2
  18. package/dist/components/field-sidebar/field-type.js.map +1 -1
  19. package/dist/components/field-sidebar/fillable-field-type-list.d.ts.map +1 -1
  20. package/dist/components/field-sidebar/fillable-field-type-list.js +1 -1
  21. package/dist/components/field-sidebar/fillable-field-type-list.js.map +1 -1
  22. package/dist/components/field-sidebar/form-fields-type-list.d.ts +5 -23
  23. package/dist/components/field-sidebar/form-fields-type-list.d.ts.map +1 -1
  24. package/dist/components/field-sidebar/form-fields-type-list.js +5 -20
  25. package/dist/components/field-sidebar/form-fields-type-list.js.map +1 -1
  26. package/dist/components/field-sidebar/generic-field-type-list.d.ts.map +1 -1
  27. package/dist/components/field-sidebar/generic-field-type-list.js +1 -1
  28. package/dist/components/field-sidebar/generic-field-type-list.js.map +1 -1
  29. package/dist/components/pdf-canvas/canvas-controls.d.ts +9 -15
  30. package/dist/components/pdf-canvas/canvas-controls.d.ts.map +1 -1
  31. package/dist/components/pdf-canvas/canvas-controls.js +4 -14
  32. package/dist/components/pdf-canvas/canvas-controls.js.map +1 -1
  33. package/dist/components/pdf-canvas/pdf-canvas.d.ts +6 -2
  34. package/dist/components/pdf-canvas/pdf-canvas.d.ts.map +1 -1
  35. package/dist/components/pdf-canvas/pdf-canvas.js +11 -5
  36. package/dist/components/pdf-canvas/pdf-canvas.js.map +1 -1
  37. package/dist/components/pdf-editor/pdf-editor.d.ts +2 -0
  38. package/dist/components/pdf-editor/pdf-editor.d.ts.map +1 -1
  39. package/dist/components/pdf-editor/pdf-editor.js +2 -2
  40. package/dist/components/pdf-editor/pdf-editor.js.map +1 -1
  41. package/dist/components/pdf-fields-overlay/pdf-fields-overlay.js +4 -1
  42. package/dist/components/pdf-fields-overlay/pdf-fields-overlay.js.map +1 -1
  43. package/dist/components/pdf-fields-overlay/pdf-overlay-field-e-sign.d.ts.map +1 -1
  44. package/dist/components/pdf-fields-overlay/pdf-overlay-field-e-sign.js +3 -2
  45. package/dist/components/pdf-fields-overlay/pdf-overlay-field-e-sign.js.map +1 -1
  46. package/dist/components/pdf-fields-overlay/pdf-overlay-field.d.ts.map +1 -1
  47. package/dist/components/pdf-fields-overlay/pdf-overlay-field.js +4 -2
  48. package/dist/components/pdf-fields-overlay/pdf-overlay-field.js.map +1 -1
  49. package/dist/components/pdf-view/pdf-view-e-sign.d.ts.map +1 -1
  50. package/dist/components/pdf-view/pdf-view-e-sign.js +3 -2
  51. package/dist/components/pdf-view/pdf-view-e-sign.js.map +1 -1
  52. package/dist/components/pdf-view/pdf-view-field-container.d.ts.map +1 -1
  53. package/dist/components/pdf-view/pdf-view-field-container.js +10 -3
  54. package/dist/components/pdf-view/pdf-view-field-container.js.map +1 -1
  55. package/dist/components/pdf-view/pdf-view-fillable.js +1 -1
  56. package/dist/components/pdf-view/pdf-view-fillable.js.map +1 -1
  57. package/dist/components/pdf-view/pdf-view.d.ts +5 -0
  58. package/dist/components/pdf-view/pdf-view.d.ts.map +1 -1
  59. package/dist/components/pdf-view/pdf-view.js +51 -24
  60. package/dist/components/pdf-view/pdf-view.js.map +1 -1
  61. package/dist/constants/field.constants.d.ts.map +1 -1
  62. package/dist/constants/field.constants.js +27 -6
  63. package/dist/constants/field.constants.js.map +1 -1
  64. package/dist/constants/menu-group.d.ts +0 -5
  65. package/dist/constants/menu-group.d.ts.map +1 -1
  66. package/dist/constants/menu-group.js +2 -5
  67. package/dist/constants/menu-group.js.map +1 -1
  68. package/dist/hooks/index.d.ts +1 -0
  69. package/dist/hooks/index.d.ts.map +1 -1
  70. package/dist/hooks/index.js +1 -0
  71. package/dist/hooks/index.js.map +1 -1
  72. package/dist/hooks/usePinchZoom.d.ts +14 -0
  73. package/dist/hooks/usePinchZoom.d.ts.map +1 -0
  74. package/dist/hooks/usePinchZoom.js +58 -0
  75. package/dist/hooks/usePinchZoom.js.map +1 -0
  76. package/dist/hooks/useZoom.d.ts +2 -0
  77. package/dist/hooks/useZoom.d.ts.map +1 -1
  78. package/dist/hooks/useZoom.js +18 -6
  79. package/dist/hooks/useZoom.js.map +1 -1
  80. package/dist/interface/types.d.ts +2 -0
  81. package/dist/interface/types.d.ts.map +1 -1
  82. package/dist/interface/types.js.map +1 -1
  83. package/dist/styles/pdf-canvas.css +91 -15
  84. package/dist/styles/pdf-editor.css +1 -0
  85. package/dist/styles/pdf-field-overlay.css +109 -78
  86. package/dist/styles/variables.css +3 -0
  87. package/dist/utils/field/get-field-type-option.utils.d.ts +3 -0
  88. package/dist/utils/field/get-field-type-option.utils.d.ts.map +1 -0
  89. package/dist/utils/field/get-field-type-option.utils.js +10 -0
  90. package/dist/utils/field/get-field-type-option.utils.js.map +1 -0
  91. package/dist/utils/field/get-navigable-fields.utils.js +1 -1
  92. package/dist/utils/field/get-navigable-fields.utils.js.map +1 -1
  93. package/dist/utils/field/index.d.ts +1 -0
  94. package/dist/utils/field/index.d.ts.map +1 -1
  95. package/dist/utils/field/index.js +1 -0
  96. package/dist/utils/field/index.js.map +1 -1
  97. package/dist/utils/pdf/index.d.ts +1 -0
  98. package/dist/utils/pdf/index.d.ts.map +1 -1
  99. package/dist/utils/pdf/index.js +1 -0
  100. package/dist/utils/pdf/index.js.map +1 -1
  101. package/dist/utils/pdf/pinch-zoom.utils.d.ts +6 -0
  102. package/dist/utils/pdf/pinch-zoom.utils.d.ts.map +1 -0
  103. package/dist/utils/pdf/pinch-zoom.utils.js +18 -0
  104. package/dist/utils/pdf/pinch-zoom.utils.js.map +1 -0
  105. package/package.json +1 -1
  106. package/src/components/field-sidebar/calculated-field-type-list.tsx +1 -0
  107. package/src/components/field-sidebar/data-model-field-type-list.tsx +28 -103
  108. package/src/components/field-sidebar/e-sign-field-type-list.tsx +1 -0
  109. package/src/components/field-sidebar/field-sidebar.tsx +18 -15
  110. package/src/components/field-sidebar/field-type.tsx +13 -3
  111. package/src/components/field-sidebar/fillable-field-type-list.tsx +1 -0
  112. package/src/components/field-sidebar/form-fields-type-list.tsx +94 -109
  113. package/src/components/field-sidebar/generic-field-type-list.tsx +1 -0
  114. package/src/components/pdf-canvas/canvas-controls.tsx +30 -128
  115. package/src/components/pdf-canvas/pdf-canvas.tsx +18 -8
  116. package/src/components/pdf-editor/pdf-editor.tsx +4 -1
  117. package/src/components/pdf-fields-overlay/pdf-fields-overlay.tsx +1 -1
  118. package/src/components/pdf-fields-overlay/pdf-overlay-field-e-sign.tsx +8 -6
  119. package/src/components/pdf-fields-overlay/pdf-overlay-field.tsx +17 -1
  120. package/src/components/pdf-view/pdf-view-e-sign.tsx +8 -6
  121. package/src/components/pdf-view/pdf-view-field-container.tsx +21 -1
  122. package/src/components/pdf-view/pdf-view-fillable.tsx +1 -1
  123. package/src/components/pdf-view/pdf-view.tsx +156 -95
  124. package/src/constants/field.constants.ts +28 -6
  125. package/src/constants/menu-group.ts +2 -5
  126. package/src/hooks/index.ts +1 -0
  127. package/src/hooks/usePinchZoom.ts +86 -0
  128. package/src/hooks/useZoom.ts +20 -8
  129. package/src/interface/types.ts +3 -0
  130. package/src/styles/pdf-canvas.css +91 -15
  131. package/src/styles/pdf-editor.css +1 -0
  132. package/src/styles/pdf-field-overlay.css +109 -78
  133. package/src/styles/variables.css +3 -0
  134. package/src/utils/field/__tests__/get-field-type-option.utils.test.ts +53 -0
  135. package/src/utils/field/get-field-type-option.utils.ts +16 -0
  136. package/src/utils/field/get-navigable-fields.utils.ts +1 -1
  137. package/src/utils/field/index.ts +1 -0
  138. package/src/utils/pdf/__tests__/pinch-zoom.utils.test.ts +58 -0
  139. package/src/utils/pdf/index.ts +1 -0
  140. package/src/utils/pdf/pinch-zoom.utils.ts +30 -0
@@ -5,10 +5,10 @@
5
5
  width: 100%;
6
6
  height: 100%;
7
7
  pointer-events: none;
8
- }
9
8
 
10
- .dte-pdf-field-overlay.--view-mode {
11
- pointer-events: auto;
9
+ &.--view-mode {
10
+ pointer-events: auto;
11
+ }
12
12
  }
13
13
 
14
14
  /* Editor-only chrome. Layout metrics come from getFieldBoundsStyle. */
@@ -17,33 +17,34 @@
17
17
  outline-offset: 0;
18
18
  border: none;
19
19
  pointer-events: auto;
20
- }
20
+ border-radius: 4px;
21
21
 
22
- .dte-pdf-field-editor.fillable-radio.--edit-mode {
23
- overflow: unset !important;
24
- }
22
+ &.--edit-mode {
23
+ overflow: unset !important;
24
+ }
25
25
 
26
- .dte-pdf-field-editor.--selected {
27
- outline: 2px solid var(--border-color-active);
28
- cursor: move;
29
- }
26
+ &.--selected {
27
+ outline: 2px solid var(--border-color-active);
28
+ cursor: move;
29
+ }
30
30
 
31
- .dte-pdf-field-editor.--unselected {
32
- cursor: pointer;
33
- }
31
+ &.--unselected {
32
+ cursor: pointer;
33
+ }
34
34
 
35
- .dte-pdf-field-editor.--dragging {
36
- opacity: 0.5;
37
- }
35
+ &.--dragging {
36
+ opacity: 0.5;
37
+ }
38
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
- }
39
+ &.--colored:not(.--selected) {
40
+ outline-color: var(--border-color-active) !important;
41
+ box-shadow: 0 0 2px 0 var(--border-color-active);
42
+ }
43
43
 
44
- .dte-pdf-field-editor.--error {
45
- outline-color: var(--danger) !important;
46
- box-shadow: 0 0 4px 0 var(--danger);
44
+ &.--error {
45
+ outline-color: var(--danger) !important;
46
+ box-shadow: 0 0 4px 0 var(--danger);
47
+ }
47
48
  }
48
49
 
49
50
  .dte-pdf-field-error-message {
@@ -52,7 +53,26 @@
52
53
  position: absolute;
53
54
  margin-top: var(--spacing-half, 4px);
54
55
  color: var(--danger);
55
- font-size: var(--typescale-1, 12px);
56
+ font-size: var(--typescale-small, 10px);
57
+ }
58
+
59
+ .dte-pdf-field-label {
60
+ position: absolute;
61
+ display: flex;
62
+ align-items: center;
63
+ gap: var(--spacing-half, 4px);
64
+ background-color: var(--color-neutral-0, #ffffff);
65
+ border-radius: 4px;
66
+ padding: 1px var(--spacing-half, 4px);
67
+ top: -10px;
68
+ left: 3px;
69
+ font-size: var(--typescale-small, 10px);
70
+ line-height: 1;
71
+ white-space: nowrap;
72
+ color: var(--menu-active-color, #2270ee);
73
+ border-width: 1px;
74
+ border-style: solid;
75
+ border-color: inherit;
56
76
  }
57
77
 
58
78
  .dte-pdf-field-resize-handle {
@@ -65,10 +85,10 @@
65
85
  cursor: nwse-resize;
66
86
  z-index: 10;
67
87
  box-sizing: border-box;
68
- }
69
88
 
70
- .dte-pdf-field-resize-handle:hover {
71
- border-color: var(--border-color-active);
89
+ &:hover {
90
+ border-color: var(--border-color-active);
91
+ }
72
92
  }
73
93
 
74
94
  .dte-add-field-button {
@@ -80,10 +100,10 @@
80
100
  padding: var(--spacing-0, 0);
81
101
  width: 20px;
82
102
  height: 20px;
83
- }
84
103
 
85
- .dte-pdf-field-editor:hover .dte-add-field-button {
86
- display: block;
104
+ .dte-pdf-field-editor:hover & {
105
+ display: block;
106
+ }
87
107
  }
88
108
 
89
109
  .dte-pdf-field-view {
@@ -91,6 +111,17 @@
91
111
  outline: none;
92
112
  cursor: default;
93
113
  pointer-events: auto;
114
+
115
+ &.--fillable,
116
+ &.--eSign {
117
+ border-style: dashed;
118
+ border-width: 1px;
119
+ border-radius: 4px;
120
+
121
+ &:focus {
122
+ outline: 2px solid var(--border-color-active);
123
+ }
124
+ }
94
125
  }
95
126
 
96
127
  .dte-pdf-field-content {
@@ -99,15 +130,15 @@
99
130
  min-height: 0;
100
131
  overflow: hidden;
101
132
  line-height: 1;
102
- }
103
133
 
104
- .dte-pdf-field-content input[type='checkbox']:focus,
105
- .dte-pdf-field-content input[type='checkbox']:active,
106
- .dte-pdf-field-content input[type='radio']:active,
107
- .dte-pdf-field-content input[type='radio']:focus {
108
- box-shadow:
109
- 0 0 0 2px var(--border-color-active, #2270ee) inset,
110
- 0 0 0 3px var(--color-neutral-0, #ffffff) inset;
134
+ input[type='checkbox']:focus,
135
+ input[type='checkbox']:active,
136
+ input[type='radio']:active,
137
+ input[type='radio']:focus {
138
+ box-shadow:
139
+ 0 0 0 2px var(--border-color-active, #2270ee) inset,
140
+ 0 0 0 3px var(--color-neutral-0, #ffffff) inset;
141
+ }
111
142
  }
112
143
 
113
144
  /*
@@ -150,37 +181,37 @@
150
181
  min-width: 0;
151
182
  min-height: 0;
152
183
  box-sizing: border-box;
153
- background: inherit;
184
+ background: transparent;
154
185
  border: none;
155
186
  padding: var(--spacing-0);
156
187
  margin: var(--spacing-0);
157
188
  line-height: 1;
158
189
  font-size: inherit;
159
- }
160
190
 
161
- .dte-pdf-field-editor .dte-pdf-field-fillable {
162
- pointer-events: none;
163
- }
191
+ &.dte-pdf-field-text--single-line {
192
+ white-space: nowrap;
193
+ overflow: hidden;
194
+ }
164
195
 
165
- .dte-pdf-field-view .dte-pdf-field-fillable {
166
- pointer-events: auto;
167
- }
196
+ &.dte-pdf-field-text--multiline {
197
+ white-space: pre-wrap;
198
+ overflow-wrap: break-word;
199
+ overflow: hidden;
200
+ resize: none;
201
+ }
168
202
 
169
- .dte-pdf-field-fillable.dte-pdf-field-text--single-line {
170
- white-space: nowrap;
171
- overflow: hidden;
172
- }
203
+ &:focus {
204
+ outline: 2px solid var(--border-color-active, #2270ee);
205
+ outline-offset: 2px;
206
+ }
173
207
 
174
- .dte-pdf-field-fillable.dte-pdf-field-text--multiline {
175
- white-space: pre-wrap;
176
- overflow-wrap: break-word;
177
- overflow: hidden;
178
- resize: none;
179
- }
208
+ .dte-pdf-field-editor & {
209
+ pointer-events: none;
210
+ }
180
211
 
181
- .dte-pdf-field-fillable:focus {
182
- outline: 2px solid var(--border-color-active, #2270ee);
183
- outline-offset: 2px;
212
+ .dte-pdf-field-view & {
213
+ pointer-events: auto;
214
+ }
184
215
  }
185
216
 
186
217
  .dte-pdf-field-generic-table {
@@ -189,27 +220,27 @@
189
220
  border-spacing: var(--spacing-0, 0);
190
221
  width: 100%;
191
222
  table-layout: fixed;
192
- }
193
223
 
194
- .dte-pdf-field-generic-table td {
195
- border-top: 1px solid var(--border-color);
196
- border-left: 1px solid var(--border-color);
197
- padding-inline: var(--spacing-1, 8px);
198
- }
224
+ td {
225
+ border-top: 1px solid var(--border-color);
226
+ border-left: 1px solid var(--border-color);
227
+ padding-inline: var(--spacing-1, 8px);
228
+ }
199
229
 
200
- .dte-pdf-field-generic-table .dte-pdf-field-generic-table-header td {
201
- background-color: var(--bg-color);
202
- font-weight: bold;
203
- }
230
+ .dte-pdf-field-generic-table-header td {
231
+ background-color: var(--bg-color);
232
+ font-weight: bold;
233
+ }
204
234
 
205
- .dte-pdf-field-generic-table tr:not(.dte-pdf-field-generic-table-header) td {
206
- background-color: var(--bg-color-light);
207
- }
235
+ tr:not(.dte-pdf-field-generic-table-header) td {
236
+ background-color: var(--bg-color-light);
237
+ }
208
238
 
209
- .dte-pdf-field-generic-table tr:last-child td {
210
- border-bottom: 1px solid var(--border-color);
211
- }
239
+ tr:last-child td {
240
+ border-bottom: 1px solid var(--border-color);
241
+ }
212
242
 
213
- .dte-pdf-field-generic-table tr td:last-child {
214
- border-right: 1px solid var(--border-color);
243
+ tr td:last-child {
244
+ border-right: 1px solid var(--border-color);
245
+ }
215
246
  }
@@ -6,6 +6,7 @@
6
6
  --menu-hover-color: var(--color-neutral-100, #606162);
7
7
 
8
8
  /* Typography */
9
+ --typescale-small: 10px;
9
10
  --typescale-0: var(--typescale-1, 12px);
10
11
  --typescale-1: var(--typescale-1, 14px);
11
12
 
@@ -20,6 +21,7 @@
20
21
  --radius-0: 0;
21
22
  --radius-1: 4px;
22
23
  --radius-2: 8px;
24
+ --radius-3: 16px;
23
25
 
24
26
  /* Colors - Neutral */
25
27
  --color-neutral-0: var(--color-neutral-0, #ffffff);
@@ -31,6 +33,7 @@
31
33
  --color-blue-100: var(--color-blue-100, #fafcff);
32
34
 
33
35
  /* Background colors */
36
+ --bg-color-highlited: var(--color-blue-400);
34
37
  --bg-color-light: var(--color-neutral-0, #ffffff);
35
38
  --bg-color-main: var(--color-neutral-20, #fafafa);
36
39
  --bg-color-secondary: var(--color-neutral-50, #eeeeee);
@@ -0,0 +1,3 @@
1
+ import { type PdfField } from '../../interface/types';
2
+ export declare const getFieldTypeOption: (field: Pick<PdfField, "type" | "subType">) => import("../..").FieldTypeOption | undefined;
3
+ //# sourceMappingURL=get-field-type-option.utils.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"get-field-type-option.utils.d.ts","sourceRoot":"","sources":["../../../src/utils/field/get-field-type-option.utils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAMtD,eAAO,MAAM,kBAAkB,GAAI,OAAO,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC,gDAQ3E,CAAC"}
@@ -0,0 +1,10 @@
1
+ import { E_SIGN_FIELD_TYPES, FILLABLE_FIELD_TYPES } from '../../constants';
2
+ const HIDDEN_OVERLAY_LABEL_SUBTYPES = new Set(['checkbox', 'radio']);
3
+ const FIELD_TYPE_OPTIONS = [...FILLABLE_FIELD_TYPES, ...E_SIGN_FIELD_TYPES];
4
+ export const getFieldTypeOption = (field) => {
5
+ if (field.subType && HIDDEN_OVERLAY_LABEL_SUBTYPES.has(field.subType)) {
6
+ return undefined;
7
+ }
8
+ return FIELD_TYPE_OPTIONS.find(option => option.type === field.type && option.subType === field.subType);
9
+ };
10
+ //# sourceMappingURL=get-field-type-option.utils.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"get-field-type-option.utils.js","sourceRoot":"","sources":["../../../src/utils/field/get-field-type-option.utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAG3E,MAAM,6BAA6B,GAAG,IAAI,GAAG,CAAC,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC;AAErE,MAAM,kBAAkB,GAAG,CAAC,GAAG,oBAAoB,EAAE,GAAG,kBAAkB,CAAC,CAAC;AAE5E,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAAyC,EAAE,EAAE;IAC5E,IAAI,KAAK,CAAC,OAAO,IAAI,6BAA6B,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC;QACpE,OAAO,SAAS,CAAC;IACrB,CAAC;IAED,OAAO,kBAAkB,CAAC,IAAI,CAC1B,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,KAAK,KAAK,CAAC,IAAI,IAAI,MAAM,CAAC,OAAO,KAAK,KAAK,CAAC,OAAO,CAC3E,CAAC;AACN,CAAC,CAAC"}
@@ -1,6 +1,6 @@
1
1
  import { FieldTypeEnum } from '../../interface/types';
2
2
  import { evaluateDisplayCondition } from '../conditions';
3
- const navigableFields = [FieldTypeEnum.fillable, FieldTypeEnum.eSign];
3
+ const navigableFields = [FieldTypeEnum.fillable];
4
4
  export const getNavigableFieldsUtils = (fields, fillingBy, activeData) => {
5
5
  if (!(fillingBy === null || fillingBy === void 0 ? void 0 : fillingBy.length)) {
6
6
  return [];
@@ -1 +1 @@
1
- {"version":3,"file":"get-navigable-fields.utils.js","sourceRoot":"","sources":["../../../src/utils/field/get-navigable-fields.utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,aAAa,EAAY,MAAM,uBAAuB,CAAC;AACtF,OAAO,EAAE,wBAAwB,EAAE,MAAM,eAAe,CAAC;AAEzD,MAAM,eAAe,GAAG,CAAC,aAAa,CAAC,QAAQ,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;AAEtE,MAAM,CAAC,MAAM,uBAAuB,GAAG,CACnC,MAAkB,EAClB,SAAmB,EACnB,UAA2B,EAC7B,EAAE;IACA,IAAI,CAAC,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,MAAM,CAAA,EAAE,CAAC;QACrB,OAAO,EAAE,CAAC;IACd,CAAC;IACD,OAAO,MAAM;SACR,MAAM,CACH,KAAK,CAAC,EAAE,WACJ,OAAA,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,SAAS,CAAC,QAAQ,CAAC,MAAA,KAAK,CAAC,SAAS,mCAAI,EAAE,CAAC,CAAA,EAAA,CACxF;SACA,MAAM,CACH,KAAK,CAAC,EAAE,CACJ,CAAC,KAAK,CAAC,gBAAgB;QACvB,wBAAwB,CAAC,KAAK,CAAC,gBAAgB,EAAE,UAAU,CAAC,CACnE,CAAC;AACV,CAAC,CAAC"}
1
+ {"version":3,"file":"get-navigable-fields.utils.js","sourceRoot":"","sources":["../../../src/utils/field/get-navigable-fields.utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,aAAa,EAAY,MAAM,uBAAuB,CAAC;AACtF,OAAO,EAAE,wBAAwB,EAAE,MAAM,eAAe,CAAC;AAEzD,MAAM,eAAe,GAAG,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;AAEjD,MAAM,CAAC,MAAM,uBAAuB,GAAG,CACnC,MAAkB,EAClB,SAAmB,EACnB,UAA2B,EAC7B,EAAE;IACA,IAAI,CAAC,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,MAAM,CAAA,EAAE,CAAC;QACrB,OAAO,EAAE,CAAC;IACd,CAAC;IACD,OAAO,MAAM;SACR,MAAM,CACH,KAAK,CAAC,EAAE,WACJ,OAAA,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,SAAS,CAAC,QAAQ,CAAC,MAAA,KAAK,CAAC,SAAS,mCAAI,EAAE,CAAC,CAAA,EAAA,CACxF;SACA,MAAM,CACH,KAAK,CAAC,EAAE,CACJ,CAAC,KAAK,CAAC,gBAAgB;QACvB,wBAAwB,CAAC,KAAK,CAAC,gBAAgB,EAAE,UAAU,CAAC,CACnE,CAAC;AACV,CAAC,CAAC"}
@@ -8,6 +8,7 @@ export * from './field-resize.utils';
8
8
  export * from './get-field-bounds-style.utils';
9
9
  export * from './get-field-font-size.utils';
10
10
  export * from './get-field-text-clip.utils';
11
+ export * from './get-field-type-option.utils';
11
12
  export * from './get-field-typography.utils';
12
13
  export * from './get-navigable-fields.utils';
13
14
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/field/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,sBAAsB,CAAC;AACrC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/field/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,sBAAsB,CAAC;AACrC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC"}
@@ -8,6 +8,7 @@ export * from './field-resize.utils';
8
8
  export * from './get-field-bounds-style.utils';
9
9
  export * from './get-field-font-size.utils';
10
10
  export * from './get-field-text-clip.utils';
11
+ export * from './get-field-type-option.utils';
11
12
  export * from './get-field-typography.utils';
12
13
  export * from './get-navigable-fields.utils';
13
14
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/field/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,sBAAsB,CAAC;AACrC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/field/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,sBAAsB,CAAC;AACrC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC"}
@@ -1,3 +1,4 @@
1
1
  export * from './pdf-rendering.utils';
2
+ export * from './pinch-zoom.utils';
2
3
  export * from './unit-conversion.utils';
3
4
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/pdf/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/pdf/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC"}
@@ -1,3 +1,4 @@
1
1
  export * from './pdf-rendering.utils';
2
+ export * from './pinch-zoom.utils';
2
3
  export * from './unit-conversion.utils';
3
4
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/pdf/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/pdf/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC"}
@@ -0,0 +1,6 @@
1
+ export declare const WHEEL_ZOOM_SENSITIVITY = 0.01;
2
+ export declare const clampZoom: (value: number) => number;
3
+ export declare const getWheelZoomFactor: (deltaY: number) => number;
4
+ export declare const getTouchDistance: (first: Pick<Touch, "clientX" | "clientY">, second: Pick<Touch, "clientX" | "clientY">) => number;
5
+ export declare const getPinchZoomValue: (startZoom: number, startDistance: number, currentDistance: number) => number;
6
+ //# sourceMappingURL=pinch-zoom.utils.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"pinch-zoom.utils.d.ts","sourceRoot":"","sources":["../../../src/utils/pdf/pinch-zoom.utils.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB,OAAO,CAAC;AAE3C,eAAO,MAAM,SAAS,GAAI,OAAO,MAAM,WAEtC,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,QAAQ,MAAM,WAEhD,CAAC;AAEF,eAAO,MAAM,gBAAgB,GACzB,OAAO,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,SAAS,CAAC,EACzC,QAAQ,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,SAAS,CAAC,WAG7C,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC1B,WAAW,MAAM,EACjB,eAAe,MAAM,EACrB,iBAAiB,MAAM,WAO1B,CAAC"}
@@ -0,0 +1,18 @@
1
+ import { ZOOM_MAX, ZOOM_MIN } from '../../constants';
2
+ export const WHEEL_ZOOM_SENSITIVITY = 0.01;
3
+ export const clampZoom = (value) => {
4
+ return Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, Math.round(value * 100) / 100));
5
+ };
6
+ export const getWheelZoomFactor = (deltaY) => {
7
+ return Math.exp(-deltaY * WHEEL_ZOOM_SENSITIVITY);
8
+ };
9
+ export const getTouchDistance = (first, second) => {
10
+ return Math.hypot(first.clientX - second.clientX, first.clientY - second.clientY);
11
+ };
12
+ export const getPinchZoomValue = (startZoom, startDistance, currentDistance) => {
13
+ if (startDistance <= 0) {
14
+ return startZoom;
15
+ }
16
+ return startZoom * (currentDistance / startDistance);
17
+ };
18
+ //# sourceMappingURL=pinch-zoom.utils.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"pinch-zoom.utils.js","sourceRoot":"","sources":["../../../src/utils/pdf/pinch-zoom.utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,CAAC,MAAM,sBAAsB,GAAG,IAAI,CAAC;AAE3C,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAa,EAAE,EAAE;IACvC,OAAO,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;AACjF,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,MAAc,EAAE,EAAE;IACjD,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,MAAM,GAAG,sBAAsB,CAAC,CAAC;AACtD,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAC5B,KAAyC,EACzC,MAA0C,EAC5C,EAAE;IACA,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;AACtF,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC7B,SAAiB,EACjB,aAAqB,EACrB,eAAuB,EACzB,EAAE;IACA,IAAI,aAAa,IAAI,CAAC,EAAE,CAAC;QACrB,OAAO,SAAS,CAAC;IACrB,CAAC;IAED,OAAO,SAAS,GAAG,CAAC,eAAe,GAAG,aAAa,CAAC,CAAC;AACzD,CAAC,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@servicetitan/dte-pdf-editor",
3
- "version": "1.91.0",
3
+ "version": "1.92.0",
4
4
  "description": "",
5
5
  "main": "./dist/index.js",
6
6
  "typings": "./dist/index.d.ts",
@@ -18,6 +18,7 @@ export const CalculatedFieldTypeList: FC<CalculatedFieldTypeListProps> = ({
18
18
  return (
19
19
  <FieldType
20
20
  key={key}
21
+ icon={fieldOption.icon}
21
22
  label={fieldOption.label}
22
23
  onDragEnd={onDragEnd}
23
24
  onDragStart={() => onDragStart(fieldOption)}
@@ -1,80 +1,37 @@
1
1
  import { Flex, SearchField, Text } from '@servicetitan/anvil2';
2
2
  import { FC, Fragment, useMemo, useState } from 'react';
3
- import {
4
- type DataModelFieldGroup,
5
- type FieldTypeOption,
6
- type FormInfo,
7
- } from '../../interface/types';
3
+ import { type DataModelFieldGroup, type FieldTypeOption } from '../../interface/types';
8
4
  import { getFieldSampleData } from '../../utils';
9
5
  import { FieldType } from './field-type';
10
- import { FormFieldsPanel, FormsList } from './form-fields-type-list';
11
6
 
12
7
  interface DataModelFieldTypeListProps {
13
8
  dataModelGroups?: DataModelFieldGroup[];
14
- /**
15
- * Forms offered as a group after the data model groups. Omitted (or empty) hides the group;
16
- * `onSelectForm` must be provided for the group to render.
17
- */
18
- forms?: FormInfo[];
19
- /** The form whose fields are shown in place of the group list; null shows the group list. */
20
- selectedForm?: FormInfo | null;
21
- /** Draggable options for `selectedForm`. */
22
- formFieldOptions?: FieldTypeOption[];
23
- isLoadingFormFields?: boolean;
24
- onSelectForm?(form: FormInfo | null): void;
25
9
  onDragStart(fieldOption: FieldTypeOption): void;
26
10
  onDragEnd(): void;
27
11
  }
28
12
 
29
- const matchesSearch = (label: string, searchLower: string) =>
30
- label.toLowerCase().includes(searchLower);
31
-
32
13
  export const DataModelFieldTypeList: FC<DataModelFieldTypeListProps> = ({
33
14
  dataModelGroups = [],
34
- formFieldOptions = [],
35
- forms,
36
- isLoadingFormFields = false,
37
15
  onDragEnd,
38
16
  onDragStart,
39
- onSelectForm,
40
- selectedForm = null,
41
17
  }) => {
42
18
  const [searchText, setSearchText] = useState('');
43
- const searchLower = searchText.trim().toLowerCase();
44
- const showForms = !!forms?.length && !!onSelectForm;
45
19
 
46
20
  const searchedFieldGroups = useMemo(() => {
47
- if (!searchLower) {
21
+ if (!searchText) {
48
22
  return dataModelGroups;
49
23
  }
50
24
 
25
+ const searchLower = searchText.toLowerCase();
51
26
  return dataModelGroups
52
27
  .map(group => ({
53
28
  ...group,
54
- fields: group.fields.filter(({ label }) => matchesSearch(label, searchLower)),
29
+ fields: group.fields.filter(({ label }) =>
30
+ label.toLowerCase().includes(searchLower),
31
+ ),
55
32
  }))
56
33
  .filter(group => group.fields.length > 0);
57
- }, [dataModelGroups, searchLower]);
58
-
59
- const searchedForms = useMemo(() => {
60
- if (!forms?.length) {
61
- return [];
62
- }
63
- if (!searchLower) {
64
- return forms;
65
- }
66
- return forms.filter(form => matchesSearch(form.name, searchLower));
67
- }, [forms, searchLower]);
68
-
69
- const searchedFormFieldOptions = useMemo(() => {
70
- if (!searchLower) {
71
- return formFieldOptions;
72
- }
73
- return formFieldOptions.filter(option => matchesSearch(option.label, searchLower));
74
- }, [formFieldOptions, searchLower]);
75
-
76
- const isFormDetail = showForms && !!selectedForm;
77
-
34
+ }, [dataModelGroups, searchText]);
78
35
  return (
79
36
  <Fragment>
80
37
  <SearchField
@@ -83,62 +40,30 @@ export const DataModelFieldTypeList: FC<DataModelFieldTypeListProps> = ({
83
40
  className="dte-field-sidebar-search"
84
41
  onChange={e => setSearchText(e.target.value ?? '')}
85
42
  />
86
- <div className="dte-formula-sidebar-slide-outer">
87
- <div
88
- className={`dte-formula-sidebar-slide-track${isFormDetail ? ' --detail' : ''}`}
89
- >
90
- <div className="dte-formula-sidebar-slide-panel">
91
- {searchedFieldGroups.map(group => (
92
- <div key={group.groupName} className="dte-field-type-group">
93
- <Flex
94
- alignItems="center"
95
- gap={1}
96
- className="dte-field-type-group-header"
97
- >
98
- <Text variant="headline" el="h6" size="small">
99
- {group.groupName}
100
- </Text>
101
- </Flex>
102
- {group.fields.map(fieldOption => {
103
- const key = `${fieldOption.type}-${group.groupName}-${fieldOption.path}`;
104
- return (
105
- <FieldType
106
- key={key}
107
- onDragEnd={onDragEnd}
108
- onDragStart={() => onDragStart(fieldOption)}
109
- label={fieldOption.label}
110
- sampleData={getFieldSampleData(
111
- fieldOption.sampleData,
112
- fieldOption.fieldType,
113
- )}
114
- />
115
- );
116
- })}
117
- </div>
118
- ))}
119
- {showForms && (searchedForms.length > 0 || !searchLower) && (
120
- <FormsList forms={searchedForms} onSelectForm={onSelectForm} />
121
- )}
122
- </div>
123
-
124
- <div className="dte-formula-sidebar-slide-panel --form-fields">
125
- {isFormDetail && (
126
- <FormFieldsPanel
127
- form={selectedForm}
128
- fieldOptions={searchedFormFieldOptions}
129
- hasHiddenFields={
130
- formFieldOptions.length > 0 &&
131
- searchedFormFieldOptions.length === 0
132
- }
133
- isLoading={isLoadingFormFields}
134
- onBack={() => onSelectForm(null)}
43
+ {searchedFieldGroups.map(group => (
44
+ <div key={group.groupName} className="dte-field-type-group">
45
+ <Flex alignItems="center" gap={1} className="dte-field-type-group-header">
46
+ <Text variant="headline" el="h6" size="small">
47
+ {group.groupName}
48
+ </Text>
49
+ </Flex>
50
+ {group.fields.map(fieldOption => {
51
+ const key = `${fieldOption.type}-${group.groupName}-${fieldOption.path}`;
52
+ return (
53
+ <FieldType
54
+ key={key}
135
55
  onDragEnd={onDragEnd}
136
- onDragStart={onDragStart}
56
+ onDragStart={() => onDragStart(fieldOption)}
57
+ label={fieldOption.label}
58
+ sampleData={getFieldSampleData(
59
+ fieldOption.sampleData,
60
+ fieldOption.fieldType,
61
+ )}
137
62
  />
138
- )}
139
- </div>
63
+ );
64
+ })}
140
65
  </div>
141
- </div>
66
+ ))}
142
67
  </Fragment>
143
68
  );
144
69
  };
@@ -13,6 +13,7 @@ export const ESignFieldTypeList: FC<ESignFieldTypeListProps> = ({ onDragEnd, onD
13
13
  <div className="dte-field-type-items-wrapper">
14
14
  {E_SIGN_FIELD_TYPES.map(fieldOption => (
15
15
  <FieldType
16
+ icon={fieldOption.icon}
16
17
  key={fieldOption.subType}
17
18
  label={fieldOption.label}
18
19
  onDragEnd={onDragEnd}