@verdocs/web-sdk 2.3.72 → 2.3.73
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/dist/cjs/verdocs-field-textbox.cjs.entry.js +146 -0
- package/dist/docs.json +1 -1
- package/dist/esm/verdocs-field-textbox.entry.js +142 -0
- package/dist/esm-es5/verdocs-field-textbox.entry.js +1 -0
- package/dist/verdocs-web-sdk/verdocs-field-textbox.entry.js +142 -0
- package/dist/verdocs-web-sdk/verdocs-field-textbox.system.entry.js +1 -0
- package/package.json +1 -1
- package/dist/custom-elements.json +0 -2143
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
const index = require('./index-273965ec.js');
|
|
6
|
+
const interact_min = require('./interact.min-9bd88adf.js');
|
|
7
|
+
const index$1 = require('./index-6d2f18bb.js');
|
|
8
|
+
const Colors = require('./Colors-980abe8b.js');
|
|
9
|
+
const TemplateRoleStore = require('./TemplateRoleStore-55a02b38.js');
|
|
10
|
+
const TemplateFieldStore = require('./TemplateFieldStore-ba5531a0.js');
|
|
11
|
+
const utils = require('./utils-696c4b95.js');
|
|
12
|
+
const Icons = require('./Icons-3286d014.js');
|
|
13
|
+
require('./_commonjsHelpers-3d60c1f6.js');
|
|
14
|
+
require('./Fields-89705b56.js');
|
|
15
|
+
require('./Files-4bdc0c0f.js');
|
|
16
|
+
require('./Primitives-aadc617f.js');
|
|
17
|
+
require('./index-aefb08db.js');
|
|
18
|
+
require('./index-d0eeec94.js');
|
|
19
|
+
require('./Types-fb95ed6b.js');
|
|
20
|
+
|
|
21
|
+
const verdocsFieldTextboxCss = "verdocs-field-textbox{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;width:150px;height:15px;display:block;font-size:11px;letter-spacing:-0.2px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-textbox.disabled{opacity:0.5}verdocs-field-textbox input{cursor:inherit;width:100%;height:100%;border:none;outline:none;padding:0 3px;font-size:11px;background:none;font-weight:500;position:absolute;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87)}verdocs-field-textbox input.hide{display:none}verdocs-field-textbox.required{border:1px solid #cc0000}verdocs-field-textbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-textbox verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-textbox verdocs-button-panel[data-active],verdocs-field-textbox verdocs-button-panel:hover{opacity:1}verdocs-field-textbox verdocs-button-panel .icon svg{fill:#333333}verdocs-field-textbox verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-textbox [data-lastpass-icon-root]{display:none !important}verdocs-field-textbox .settings-icon{position:absolute;top:-4px;left:-18px;display:inline-block;cursor:pointer;opacity:0.6}verdocs-field-textbox .settings-icon svg{fill:#707ae5}verdocs-field-textbox .settings-icon:hover{opacity:1}";
|
|
22
|
+
|
|
23
|
+
const VerdocsFieldTextbox = class {
|
|
24
|
+
constructor(hostRef) {
|
|
25
|
+
index.registerInstance(this, hostRef);
|
|
26
|
+
this.settingsChanged = index.createEvent(this, "settingsChanged", 7);
|
|
27
|
+
this.deleted = index.createEvent(this, "deleted", 7);
|
|
28
|
+
this.fieldStore = null;
|
|
29
|
+
this.roleStore = null;
|
|
30
|
+
this.endpoint = index$1.VerdocsEndpoint.getDefault();
|
|
31
|
+
this.templateid = '';
|
|
32
|
+
this.fieldname = '';
|
|
33
|
+
this.disabled = false;
|
|
34
|
+
this.editable = false;
|
|
35
|
+
this.moveable = false;
|
|
36
|
+
this.done = false;
|
|
37
|
+
this.xscale = 1;
|
|
38
|
+
this.yscale = 1;
|
|
39
|
+
this.pagenumber = 1;
|
|
40
|
+
this.showingProperties = false;
|
|
41
|
+
}
|
|
42
|
+
async focusField() {
|
|
43
|
+
this.inputEl.focus();
|
|
44
|
+
}
|
|
45
|
+
async showSettingsPanel() {
|
|
46
|
+
const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
|
|
47
|
+
if (settingsPanel && settingsPanel.showPanel) {
|
|
48
|
+
settingsPanel.showPanel();
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
async hideSettingsPanel() {
|
|
52
|
+
const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
|
|
53
|
+
if (settingsPanel && settingsPanel.hidePanel) {
|
|
54
|
+
settingsPanel.hidePanel();
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
async componentWillLoad() {
|
|
58
|
+
this.fieldStore = TemplateFieldStore.getTemplateFieldStore(this.templateid);
|
|
59
|
+
this.roleStore = TemplateRoleStore.getTemplateRoleStore(this.templateid);
|
|
60
|
+
}
|
|
61
|
+
componentDidRender() {
|
|
62
|
+
interact_min.interact_min.dynamicDrop(true);
|
|
63
|
+
if (this.editable) {
|
|
64
|
+
interact_min.interact_min(this.el).resizable({
|
|
65
|
+
edges: { top: false, bottom: false, left: true, right: true },
|
|
66
|
+
listeners: {
|
|
67
|
+
start: this.handleResizeStart.bind(this),
|
|
68
|
+
move: this.handleResize.bind(this),
|
|
69
|
+
end: this.handleResizeEnd.bind(this),
|
|
70
|
+
},
|
|
71
|
+
});
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
handleResizeStart(e) {
|
|
75
|
+
e.preventDefault();
|
|
76
|
+
e.stopPropagation();
|
|
77
|
+
}
|
|
78
|
+
handleResize(e) {
|
|
79
|
+
let { x = 0, y = 0, h = 0 } = e.target.dataset;
|
|
80
|
+
let { width, height } = e.rect;
|
|
81
|
+
x = (parseFloat(x) || 0) + e.deltaRect.left;
|
|
82
|
+
y = (parseFloat(y) || 0) + e.deltaRect.top;
|
|
83
|
+
h = (parseFloat(h) || 0) + e.deltaRect.height;
|
|
84
|
+
width /= this.xscale;
|
|
85
|
+
height /= this.yscale;
|
|
86
|
+
Object.assign(e.target.style, {
|
|
87
|
+
width: `${width}px`,
|
|
88
|
+
height: `${height}px`,
|
|
89
|
+
transform: `scale(${this.xscale}, ${this.yscale}); translate(${x}px, ${y + h}px)`,
|
|
90
|
+
});
|
|
91
|
+
Object.assign(e.target.dataset, { x, y, h });
|
|
92
|
+
}
|
|
93
|
+
handleResizeEnd(e) {
|
|
94
|
+
const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
|
|
95
|
+
const newSettings = { ...utils.getFieldSettings(field) };
|
|
96
|
+
const [translateX, translateY] = e.target.style.transform.split('(')[1].split(')')[0].split(',').map(parseFloat);
|
|
97
|
+
console.log({ translateX, translateY });
|
|
98
|
+
newSettings.width = Math.round(parseFloat(e.target.style.width));
|
|
99
|
+
newSettings.height = Math.round(parseFloat(e.target.style.height));
|
|
100
|
+
// newSettings.x = Math.round(newSettings.x + translateX / this.xscale);
|
|
101
|
+
// newSettings.y = Math.round(newSettings.y - translateY / this.yscale);
|
|
102
|
+
index$1.updateField(this.endpoint, this.templateid, this.fieldname, { setting: newSettings })
|
|
103
|
+
.then(field => {
|
|
104
|
+
var _a;
|
|
105
|
+
console.log('Update result', field);
|
|
106
|
+
TemplateFieldStore.updateStoreField(this.fieldStore, this.fieldname, field);
|
|
107
|
+
(_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: field.name, settings: newSettings, field });
|
|
108
|
+
Object.assign(e.target.dataset, { x: 0, y: 0, h: 0 });
|
|
109
|
+
})
|
|
110
|
+
.catch(e => console.log('Field update failed', e));
|
|
111
|
+
}
|
|
112
|
+
render() {
|
|
113
|
+
var _a, _b;
|
|
114
|
+
const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
|
|
115
|
+
const roleIndex = TemplateRoleStore.getRoleIndex(this.roleStore, field.role_name);
|
|
116
|
+
const backgroundColor = field['rgba'] || Colors.getRGBA(roleIndex);
|
|
117
|
+
if (!field) {
|
|
118
|
+
return index.h(index.Fragment, null);
|
|
119
|
+
}
|
|
120
|
+
const settings = utils.getFieldSettings(field);
|
|
121
|
+
let disabled = (_b = (_a = this.disabled) !== null && _a !== void 0 ? _a : settings.disabled) !== null && _b !== void 0 ? _b : false;
|
|
122
|
+
const value = (settings === null || settings === void 0 ? void 0 : settings.result) || '';
|
|
123
|
+
const width = settings.width || 150;
|
|
124
|
+
// TODO: This is an outdated technique from the old system. We should compute it.
|
|
125
|
+
const maxlength = width / 5;
|
|
126
|
+
if (this.done) {
|
|
127
|
+
return index.h(index.Host, { class: { done: this.done } }, value);
|
|
128
|
+
}
|
|
129
|
+
return (index.h(index.Host, { class: { required: field.required, disabled, done: this.done }, style: { backgroundColor } }, index.h("input", { type: "text", name: field.name, placeholder: settings === null || settings === void 0 ? void 0 : settings.placeholder, tabIndex: settings === null || settings === void 0 ? void 0 : settings.order, value: value, disabled: disabled, required: field === null || field === void 0 ? void 0 : field.required, ref: el => (this.inputEl = el), maxlength: maxlength }), this.editable && (index.h(index.Fragment, null, index.h("div", { id: `verdocs-settings-panel-trigger-${field.name}`, style: { transform: `scale(${Math.floor((1 / this.xscale) * 1000) / 1000}, ${Math.floor((1 / this.yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: Icons.SettingsIcon, onClick: (e) => {
|
|
130
|
+
e.stopPropagation();
|
|
131
|
+
this.showingProperties = !this.showingProperties;
|
|
132
|
+
} }), this.showingProperties && (index.h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${field.name}`, onClickAway: () => (this.showingProperties = false) }, index.h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: field.name, onClose: () => (this.showingProperties = false), onDelete: () => {
|
|
133
|
+
var _a;
|
|
134
|
+
(_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: field.name });
|
|
135
|
+
return this.hideSettingsPanel();
|
|
136
|
+
}, onSettingsChanged: e => {
|
|
137
|
+
var _a;
|
|
138
|
+
(_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
|
|
139
|
+
return this.hideSettingsPanel();
|
|
140
|
+
}, helpText: 'Text boxes may be used to capture simple text input. Participant-entered values will be stored for later retrieval via the "name" field.<br /><br />If marked required, the participant must complete the field before proceeding.' })))))));
|
|
141
|
+
}
|
|
142
|
+
get el() { return index.getElement(this); }
|
|
143
|
+
};
|
|
144
|
+
VerdocsFieldTextbox.style = verdocsFieldTextboxCss;
|
|
145
|
+
|
|
146
|
+
exports.verdocs_field_textbox = VerdocsFieldTextbox;
|
package/dist/docs.json
CHANGED
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
import { r as registerInstance, i as createEvent, h, F as Fragment, e as Host, j as getElement } from './index-d230123b.js';
|
|
2
|
+
import { i as interact_min } from './interact.min-ecc90339.js';
|
|
3
|
+
import { V as VerdocsEndpoint, J as updateField } from './index-e5778580.js';
|
|
4
|
+
import { g as getRGBA } from './Colors-b67f06a1.js';
|
|
5
|
+
import { g as getTemplateRoleStore, a as getRoleIndex } from './TemplateRoleStore-0672a078.js';
|
|
6
|
+
import { g as getTemplateFieldStore, u as updateStoreField } from './TemplateFieldStore-967a2433.js';
|
|
7
|
+
import { g as getFieldSettings } from './utils-221414bb.js';
|
|
8
|
+
import { S as SettingsIcon } from './Icons-ddea87bf.js';
|
|
9
|
+
import './_commonjsHelpers-93ec9c7a.js';
|
|
10
|
+
import './Fields-3172e118.js';
|
|
11
|
+
import './Files-70a192df.js';
|
|
12
|
+
import './Primitives-a0e716ae.js';
|
|
13
|
+
import './index-96297e7c.js';
|
|
14
|
+
import './index-5e0cab92.js';
|
|
15
|
+
import './Types-1628dc71.js';
|
|
16
|
+
|
|
17
|
+
const verdocsFieldTextboxCss = "verdocs-field-textbox{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;width:150px;height:15px;display:block;font-size:11px;letter-spacing:-0.2px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-textbox.disabled{opacity:0.5}verdocs-field-textbox input{cursor:inherit;width:100%;height:100%;border:none;outline:none;padding:0 3px;font-size:11px;background:none;font-weight:500;position:absolute;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87)}verdocs-field-textbox input.hide{display:none}verdocs-field-textbox.required{border:1px solid #cc0000}verdocs-field-textbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-textbox verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-textbox verdocs-button-panel[data-active],verdocs-field-textbox verdocs-button-panel:hover{opacity:1}verdocs-field-textbox verdocs-button-panel .icon svg{fill:#333333}verdocs-field-textbox verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-textbox [data-lastpass-icon-root]{display:none !important}verdocs-field-textbox .settings-icon{position:absolute;top:-4px;left:-18px;display:inline-block;cursor:pointer;opacity:0.6}verdocs-field-textbox .settings-icon svg{fill:#707ae5}verdocs-field-textbox .settings-icon:hover{opacity:1}";
|
|
18
|
+
|
|
19
|
+
const VerdocsFieldTextbox = class {
|
|
20
|
+
constructor(hostRef) {
|
|
21
|
+
registerInstance(this, hostRef);
|
|
22
|
+
this.settingsChanged = createEvent(this, "settingsChanged", 7);
|
|
23
|
+
this.deleted = createEvent(this, "deleted", 7);
|
|
24
|
+
this.fieldStore = null;
|
|
25
|
+
this.roleStore = null;
|
|
26
|
+
this.endpoint = VerdocsEndpoint.getDefault();
|
|
27
|
+
this.templateid = '';
|
|
28
|
+
this.fieldname = '';
|
|
29
|
+
this.disabled = false;
|
|
30
|
+
this.editable = false;
|
|
31
|
+
this.moveable = false;
|
|
32
|
+
this.done = false;
|
|
33
|
+
this.xscale = 1;
|
|
34
|
+
this.yscale = 1;
|
|
35
|
+
this.pagenumber = 1;
|
|
36
|
+
this.showingProperties = false;
|
|
37
|
+
}
|
|
38
|
+
async focusField() {
|
|
39
|
+
this.inputEl.focus();
|
|
40
|
+
}
|
|
41
|
+
async showSettingsPanel() {
|
|
42
|
+
const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
|
|
43
|
+
if (settingsPanel && settingsPanel.showPanel) {
|
|
44
|
+
settingsPanel.showPanel();
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
async hideSettingsPanel() {
|
|
48
|
+
const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
|
|
49
|
+
if (settingsPanel && settingsPanel.hidePanel) {
|
|
50
|
+
settingsPanel.hidePanel();
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
async componentWillLoad() {
|
|
54
|
+
this.fieldStore = getTemplateFieldStore(this.templateid);
|
|
55
|
+
this.roleStore = getTemplateRoleStore(this.templateid);
|
|
56
|
+
}
|
|
57
|
+
componentDidRender() {
|
|
58
|
+
interact_min.dynamicDrop(true);
|
|
59
|
+
if (this.editable) {
|
|
60
|
+
interact_min(this.el).resizable({
|
|
61
|
+
edges: { top: false, bottom: false, left: true, right: true },
|
|
62
|
+
listeners: {
|
|
63
|
+
start: this.handleResizeStart.bind(this),
|
|
64
|
+
move: this.handleResize.bind(this),
|
|
65
|
+
end: this.handleResizeEnd.bind(this),
|
|
66
|
+
},
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
handleResizeStart(e) {
|
|
71
|
+
e.preventDefault();
|
|
72
|
+
e.stopPropagation();
|
|
73
|
+
}
|
|
74
|
+
handleResize(e) {
|
|
75
|
+
let { x = 0, y = 0, h = 0 } = e.target.dataset;
|
|
76
|
+
let { width, height } = e.rect;
|
|
77
|
+
x = (parseFloat(x) || 0) + e.deltaRect.left;
|
|
78
|
+
y = (parseFloat(y) || 0) + e.deltaRect.top;
|
|
79
|
+
h = (parseFloat(h) || 0) + e.deltaRect.height;
|
|
80
|
+
width /= this.xscale;
|
|
81
|
+
height /= this.yscale;
|
|
82
|
+
Object.assign(e.target.style, {
|
|
83
|
+
width: `${width}px`,
|
|
84
|
+
height: `${height}px`,
|
|
85
|
+
transform: `scale(${this.xscale}, ${this.yscale}); translate(${x}px, ${y + h}px)`,
|
|
86
|
+
});
|
|
87
|
+
Object.assign(e.target.dataset, { x, y, h });
|
|
88
|
+
}
|
|
89
|
+
handleResizeEnd(e) {
|
|
90
|
+
const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
|
|
91
|
+
const newSettings = { ...getFieldSettings(field) };
|
|
92
|
+
const [translateX, translateY] = e.target.style.transform.split('(')[1].split(')')[0].split(',').map(parseFloat);
|
|
93
|
+
console.log({ translateX, translateY });
|
|
94
|
+
newSettings.width = Math.round(parseFloat(e.target.style.width));
|
|
95
|
+
newSettings.height = Math.round(parseFloat(e.target.style.height));
|
|
96
|
+
// newSettings.x = Math.round(newSettings.x + translateX / this.xscale);
|
|
97
|
+
// newSettings.y = Math.round(newSettings.y - translateY / this.yscale);
|
|
98
|
+
updateField(this.endpoint, this.templateid, this.fieldname, { setting: newSettings })
|
|
99
|
+
.then(field => {
|
|
100
|
+
var _a;
|
|
101
|
+
console.log('Update result', field);
|
|
102
|
+
updateStoreField(this.fieldStore, this.fieldname, field);
|
|
103
|
+
(_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: field.name, settings: newSettings, field });
|
|
104
|
+
Object.assign(e.target.dataset, { x: 0, y: 0, h: 0 });
|
|
105
|
+
})
|
|
106
|
+
.catch(e => console.log('Field update failed', e));
|
|
107
|
+
}
|
|
108
|
+
render() {
|
|
109
|
+
var _a, _b;
|
|
110
|
+
const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
|
|
111
|
+
const roleIndex = getRoleIndex(this.roleStore, field.role_name);
|
|
112
|
+
const backgroundColor = field['rgba'] || getRGBA(roleIndex);
|
|
113
|
+
if (!field) {
|
|
114
|
+
return h(Fragment, null);
|
|
115
|
+
}
|
|
116
|
+
const settings = getFieldSettings(field);
|
|
117
|
+
let disabled = (_b = (_a = this.disabled) !== null && _a !== void 0 ? _a : settings.disabled) !== null && _b !== void 0 ? _b : false;
|
|
118
|
+
const value = (settings === null || settings === void 0 ? void 0 : settings.result) || '';
|
|
119
|
+
const width = settings.width || 150;
|
|
120
|
+
// TODO: This is an outdated technique from the old system. We should compute it.
|
|
121
|
+
const maxlength = width / 5;
|
|
122
|
+
if (this.done) {
|
|
123
|
+
return h(Host, { class: { done: this.done } }, value);
|
|
124
|
+
}
|
|
125
|
+
return (h(Host, { class: { required: field.required, disabled, done: this.done }, style: { backgroundColor } }, h("input", { type: "text", name: field.name, placeholder: settings === null || settings === void 0 ? void 0 : settings.placeholder, tabIndex: settings === null || settings === void 0 ? void 0 : settings.order, value: value, disabled: disabled, required: field === null || field === void 0 ? void 0 : field.required, ref: el => (this.inputEl = el), maxlength: maxlength }), this.editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${field.name}`, style: { transform: `scale(${Math.floor((1 / this.xscale) * 1000) / 1000}, ${Math.floor((1 / this.yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
|
|
126
|
+
e.stopPropagation();
|
|
127
|
+
this.showingProperties = !this.showingProperties;
|
|
128
|
+
} }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${field.name}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: field.name, onClose: () => (this.showingProperties = false), onDelete: () => {
|
|
129
|
+
var _a;
|
|
130
|
+
(_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: field.name });
|
|
131
|
+
return this.hideSettingsPanel();
|
|
132
|
+
}, onSettingsChanged: e => {
|
|
133
|
+
var _a;
|
|
134
|
+
(_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
|
|
135
|
+
return this.hideSettingsPanel();
|
|
136
|
+
}, helpText: 'Text boxes may be used to capture simple text input. Participant-entered values will be stored for later retrieval via the "name" field.<br /><br />If marked required, the participant must complete the field before proceeding.' })))))));
|
|
137
|
+
}
|
|
138
|
+
get el() { return getElement(this); }
|
|
139
|
+
};
|
|
140
|
+
VerdocsFieldTextbox.style = verdocsFieldTextboxCss;
|
|
141
|
+
|
|
142
|
+
export { VerdocsFieldTextbox as verdocs_field_textbox };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var __assign=this&&this.__assign||function(){__assign=Object.assign||function(e){for(var t,i=1,o=arguments.length;i<o;i++){t=arguments[i];for(var n in t)if(Object.prototype.hasOwnProperty.call(t,n))e[n]=t[n]}return e};return __assign.apply(this,arguments)};var __awaiter=this&&this.__awaiter||function(e,t,i,o){function n(e){return e instanceof i?e:new i((function(t){t(e)}))}return new(i||(i=Promise))((function(i,r){function s(e){try{l(o.next(e))}catch(e){r(e)}}function a(e){try{l(o["throw"](e))}catch(e){r(e)}}function l(e){e.done?i(e.value):n(e.value).then(s,a)}l((o=o.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var i={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},o,n,r,s;return s={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(s[Symbol.iterator]=function(){return this}),s;function a(e){return function(t){return l([e,t])}}function l(s){if(o)throw new TypeError("Generator is already executing.");while(i)try{if(o=1,n&&(r=s[0]&2?n["return"]:s[0]?n["throw"]||((r=n["return"])&&r.call(n),0):n.next)&&!(r=r.call(n,s[1])).done)return r;if(n=0,r)s=[s[0]&2,r.value];switch(s[0]){case 0:case 1:r=s;break;case 4:i.label++;return{value:s[1],done:false};case 5:i.label++;n=s[1];s=[0];continue;case 7:s=i.ops.pop();i.trys.pop();continue;default:if(!(r=i.trys,r=r.length>0&&r[r.length-1])&&(s[0]===6||s[0]===2)){i=0;continue}if(s[0]===3&&(!r||s[1]>r[0]&&s[1]<r[3])){i.label=s[1];break}if(s[0]===6&&i.label<r[1]){i.label=r[1];r=s;break}if(r&&i.label<r[2]){i.label=r[2];i.ops.push(s);break}if(r[2])i.ops.pop();i.trys.pop();continue}s=t.call(e,i)}catch(e){s=[6,e];n=0}finally{o=r=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};import{r as registerInstance,i as createEvent,h,F as Fragment,e as Host,j as getElement}from"./index-d230123b.js";import{i as interact_min}from"./interact.min-ecc90339.js";import{V as VerdocsEndpoint,J as updateField}from"./index-e5778580.js";import{g as getRGBA}from"./Colors-b67f06a1.js";import{g as getTemplateRoleStore,a as getRoleIndex}from"./TemplateRoleStore-0672a078.js";import{g as getTemplateFieldStore,u as updateStoreField}from"./TemplateFieldStore-967a2433.js";import{g as getFieldSettings}from"./utils-221414bb.js";import{S as SettingsIcon}from"./Icons-ddea87bf.js";import"./_commonjsHelpers-93ec9c7a.js";import"./Fields-3172e118.js";import"./Files-70a192df.js";import"./Primitives-a0e716ae.js";import"./index-96297e7c.js";import"./index-5e0cab92.js";import"./Types-1628dc71.js";var verdocsFieldTextboxCss='verdocs-field-textbox{font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;width:150px;height:15px;display:block;font-size:11px;letter-spacing:-0.2px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-textbox.disabled{opacity:0.5}verdocs-field-textbox input{cursor:inherit;width:100%;height:100%;border:none;outline:none;padding:0 3px;font-size:11px;background:none;font-weight:500;position:absolute;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87)}verdocs-field-textbox input.hide{display:none}verdocs-field-textbox.required{border:1px solid #cc0000}verdocs-field-textbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-textbox verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-textbox verdocs-button-panel[data-active],verdocs-field-textbox verdocs-button-panel:hover{opacity:1}verdocs-field-textbox verdocs-button-panel .icon svg{fill:#333333}verdocs-field-textbox verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-textbox [data-lastpass-icon-root]{display:none !important}verdocs-field-textbox .settings-icon{position:absolute;top:-4px;left:-18px;display:inline-block;cursor:pointer;opacity:0.6}verdocs-field-textbox .settings-icon svg{fill:#707ae5}verdocs-field-textbox .settings-icon:hover{opacity:1}';var VerdocsFieldTextbox=function(){function e(e){registerInstance(this,e);this.settingsChanged=createEvent(this,"settingsChanged",7);this.deleted=createEvent(this,"deleted",7);this.fieldStore=null;this.roleStore=null;this.endpoint=VerdocsEndpoint.getDefault();this.templateid="";this.fieldname="";this.disabled=false;this.editable=false;this.moveable=false;this.done=false;this.xscale=1;this.yscale=1;this.pagenumber=1;this.showingProperties=false}e.prototype.focusField=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.inputEl.focus();return[2]}))}))};e.prototype.showSettingsPanel=function(){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(t){e=document.getElementById("verdocs-settings-panel-".concat(this.fieldname));if(e&&e.showPanel){e.showPanel()}return[2]}))}))};e.prototype.hideSettingsPanel=function(){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(t){e=document.getElementById("verdocs-settings-panel-".concat(this.fieldname));if(e&&e.hidePanel){e.hidePanel()}return[2]}))}))};e.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.fieldStore=getTemplateFieldStore(this.templateid);this.roleStore=getTemplateRoleStore(this.templateid);return[2]}))}))};e.prototype.componentDidRender=function(){interact_min.dynamicDrop(true);if(this.editable){interact_min(this.el).resizable({edges:{top:false,bottom:false,left:true,right:true},listeners:{start:this.handleResizeStart.bind(this),move:this.handleResize.bind(this),end:this.handleResizeEnd.bind(this)}})}};e.prototype.handleResizeStart=function(e){e.preventDefault();e.stopPropagation()};e.prototype.handleResize=function(e){var t=e.target.dataset,i=t.x,o=i===void 0?0:i,n=t.y,r=n===void 0?0:n,s=t.h,a=s===void 0?0:s;var l=e.rect,d=l.width,c=l.height;o=(parseFloat(o)||0)+e.deltaRect.left;r=(parseFloat(r)||0)+e.deltaRect.top;a=(parseFloat(a)||0)+e.deltaRect.height;d/=this.xscale;c/=this.yscale;Object.assign(e.target.style,{width:"".concat(d,"px"),height:"".concat(c,"px"),transform:"scale(".concat(this.xscale,", ").concat(this.yscale,"); translate(").concat(o,"px, ").concat(r+a,"px)")});Object.assign(e.target.dataset,{x:o,y:r,h:a})};e.prototype.handleResizeEnd=function(e){var t=this;var i=this.fieldStore.get("fields").find((function(e){return e.name===t.fieldname}));var o=__assign({},getFieldSettings(i));var n=e.target.style.transform.split("(")[1].split(")")[0].split(",").map(parseFloat),r=n[0],s=n[1];console.log({translateX:r,translateY:s});o.width=Math.round(parseFloat(e.target.style.width));o.height=Math.round(parseFloat(e.target.style.height));updateField(this.endpoint,this.templateid,this.fieldname,{setting:o}).then((function(i){var n;console.log("Update result",i);updateStoreField(t.fieldStore,t.fieldname,i);(n=t.settingsChanged)===null||n===void 0?void 0:n.emit({fieldName:i.name,settings:o,field:i});Object.assign(e.target.dataset,{x:0,y:0,h:0})})).catch((function(e){return console.log("Field update failed",e)}))};e.prototype.render=function(){var e=this;var t,i;var o=this.fieldStore.get("fields").find((function(t){return t.name===e.fieldname}));var n=getRoleIndex(this.roleStore,o.role_name);var r=o["rgba"]||getRGBA(n);if(!o){return h(Fragment,null)}var s=getFieldSettings(o);var a=(i=(t=this.disabled)!==null&&t!==void 0?t:s.disabled)!==null&&i!==void 0?i:false;var l=(s===null||s===void 0?void 0:s.result)||"";var d=s.width||150;var c=d/5;if(this.done){return h(Host,{class:{done:this.done}},l)}return h(Host,{class:{required:o.required,disabled:a,done:this.done},style:{backgroundColor:r}},h("input",{type:"text",name:o.name,placeholder:s===null||s===void 0?void 0:s.placeholder,tabIndex:s===null||s===void 0?void 0:s.order,value:l,disabled:a,required:o===null||o===void 0?void 0:o.required,ref:function(t){return e.inputEl=t},maxlength:c}),this.editable&&h(Fragment,null,h("div",{id:"verdocs-settings-panel-trigger-".concat(o.name),style:{transform:"scale(".concat(Math.floor(1/this.xscale*1e3)/1e3,", ").concat(Math.floor(1/this.yscale*1e3)/1e3,")")},class:"settings-icon",innerHTML:SettingsIcon,onClick:function(t){t.stopPropagation();e.showingProperties=!e.showingProperties}}),this.showingProperties&&h("verdocs-portal",{anchor:"verdocs-settings-panel-trigger-".concat(o.name),onClickAway:function(){return e.showingProperties=false}},h("verdocs-template-field-properties",{templateId:this.templateid,fieldName:o.name,onClose:function(){return e.showingProperties=false},onDelete:function(){var t;(t=e.deleted)===null||t===void 0?void 0:t.emit({fieldName:o.name});return e.hideSettingsPanel()},onSettingsChanged:function(t){var i;(i=e.settingsChanged)===null||i===void 0?void 0:i.emit(t.detail);return e.hideSettingsPanel()},helpText:'Text boxes may be used to capture simple text input. Participant-entered values will be stored for later retrieval via the "name" field.<br /><br />If marked required, the participant must complete the field before proceeding.'}))))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();VerdocsFieldTextbox.style=verdocsFieldTextboxCss;export{VerdocsFieldTextbox as verdocs_field_textbox};
|
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
import { r as registerInstance, i as createEvent, h, F as Fragment, e as Host, j as getElement } from './index-d230123b.js';
|
|
2
|
+
import { i as interact_min } from './interact.min-ecc90339.js';
|
|
3
|
+
import { V as VerdocsEndpoint, J as updateField } from './index-e5778580.js';
|
|
4
|
+
import { g as getRGBA } from './Colors-b67f06a1.js';
|
|
5
|
+
import { g as getTemplateRoleStore, a as getRoleIndex } from './TemplateRoleStore-0672a078.js';
|
|
6
|
+
import { g as getTemplateFieldStore, u as updateStoreField } from './TemplateFieldStore-967a2433.js';
|
|
7
|
+
import { g as getFieldSettings } from './utils-221414bb.js';
|
|
8
|
+
import { S as SettingsIcon } from './Icons-ddea87bf.js';
|
|
9
|
+
import './_commonjsHelpers-93ec9c7a.js';
|
|
10
|
+
import './Fields-3172e118.js';
|
|
11
|
+
import './Files-70a192df.js';
|
|
12
|
+
import './Primitives-a0e716ae.js';
|
|
13
|
+
import './index-96297e7c.js';
|
|
14
|
+
import './index-5e0cab92.js';
|
|
15
|
+
import './Types-1628dc71.js';
|
|
16
|
+
|
|
17
|
+
const verdocsFieldTextboxCss = "verdocs-field-textbox{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;width:150px;height:15px;display:block;font-size:11px;letter-spacing:-0.2px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-textbox.disabled{opacity:0.5}verdocs-field-textbox input{cursor:inherit;width:100%;height:100%;border:none;outline:none;padding:0 3px;font-size:11px;background:none;font-weight:500;position:absolute;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87)}verdocs-field-textbox input.hide{display:none}verdocs-field-textbox.required{border:1px solid #cc0000}verdocs-field-textbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-textbox verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-textbox verdocs-button-panel[data-active],verdocs-field-textbox verdocs-button-panel:hover{opacity:1}verdocs-field-textbox verdocs-button-panel .icon svg{fill:#333333}verdocs-field-textbox verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-textbox [data-lastpass-icon-root]{display:none !important}verdocs-field-textbox .settings-icon{position:absolute;top:-4px;left:-18px;display:inline-block;cursor:pointer;opacity:0.6}verdocs-field-textbox .settings-icon svg{fill:#707ae5}verdocs-field-textbox .settings-icon:hover{opacity:1}";
|
|
18
|
+
|
|
19
|
+
const VerdocsFieldTextbox = class {
|
|
20
|
+
constructor(hostRef) {
|
|
21
|
+
registerInstance(this, hostRef);
|
|
22
|
+
this.settingsChanged = createEvent(this, "settingsChanged", 7);
|
|
23
|
+
this.deleted = createEvent(this, "deleted", 7);
|
|
24
|
+
this.fieldStore = null;
|
|
25
|
+
this.roleStore = null;
|
|
26
|
+
this.endpoint = VerdocsEndpoint.getDefault();
|
|
27
|
+
this.templateid = '';
|
|
28
|
+
this.fieldname = '';
|
|
29
|
+
this.disabled = false;
|
|
30
|
+
this.editable = false;
|
|
31
|
+
this.moveable = false;
|
|
32
|
+
this.done = false;
|
|
33
|
+
this.xscale = 1;
|
|
34
|
+
this.yscale = 1;
|
|
35
|
+
this.pagenumber = 1;
|
|
36
|
+
this.showingProperties = false;
|
|
37
|
+
}
|
|
38
|
+
async focusField() {
|
|
39
|
+
this.inputEl.focus();
|
|
40
|
+
}
|
|
41
|
+
async showSettingsPanel() {
|
|
42
|
+
const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
|
|
43
|
+
if (settingsPanel && settingsPanel.showPanel) {
|
|
44
|
+
settingsPanel.showPanel();
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
async hideSettingsPanel() {
|
|
48
|
+
const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
|
|
49
|
+
if (settingsPanel && settingsPanel.hidePanel) {
|
|
50
|
+
settingsPanel.hidePanel();
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
async componentWillLoad() {
|
|
54
|
+
this.fieldStore = getTemplateFieldStore(this.templateid);
|
|
55
|
+
this.roleStore = getTemplateRoleStore(this.templateid);
|
|
56
|
+
}
|
|
57
|
+
componentDidRender() {
|
|
58
|
+
interact_min.dynamicDrop(true);
|
|
59
|
+
if (this.editable) {
|
|
60
|
+
interact_min(this.el).resizable({
|
|
61
|
+
edges: { top: false, bottom: false, left: true, right: true },
|
|
62
|
+
listeners: {
|
|
63
|
+
start: this.handleResizeStart.bind(this),
|
|
64
|
+
move: this.handleResize.bind(this),
|
|
65
|
+
end: this.handleResizeEnd.bind(this),
|
|
66
|
+
},
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
handleResizeStart(e) {
|
|
71
|
+
e.preventDefault();
|
|
72
|
+
e.stopPropagation();
|
|
73
|
+
}
|
|
74
|
+
handleResize(e) {
|
|
75
|
+
let { x = 0, y = 0, h = 0 } = e.target.dataset;
|
|
76
|
+
let { width, height } = e.rect;
|
|
77
|
+
x = (parseFloat(x) || 0) + e.deltaRect.left;
|
|
78
|
+
y = (parseFloat(y) || 0) + e.deltaRect.top;
|
|
79
|
+
h = (parseFloat(h) || 0) + e.deltaRect.height;
|
|
80
|
+
width /= this.xscale;
|
|
81
|
+
height /= this.yscale;
|
|
82
|
+
Object.assign(e.target.style, {
|
|
83
|
+
width: `${width}px`,
|
|
84
|
+
height: `${height}px`,
|
|
85
|
+
transform: `scale(${this.xscale}, ${this.yscale}); translate(${x}px, ${y + h}px)`,
|
|
86
|
+
});
|
|
87
|
+
Object.assign(e.target.dataset, { x, y, h });
|
|
88
|
+
}
|
|
89
|
+
handleResizeEnd(e) {
|
|
90
|
+
const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
|
|
91
|
+
const newSettings = { ...getFieldSettings(field) };
|
|
92
|
+
const [translateX, translateY] = e.target.style.transform.split('(')[1].split(')')[0].split(',').map(parseFloat);
|
|
93
|
+
console.log({ translateX, translateY });
|
|
94
|
+
newSettings.width = Math.round(parseFloat(e.target.style.width));
|
|
95
|
+
newSettings.height = Math.round(parseFloat(e.target.style.height));
|
|
96
|
+
// newSettings.x = Math.round(newSettings.x + translateX / this.xscale);
|
|
97
|
+
// newSettings.y = Math.round(newSettings.y - translateY / this.yscale);
|
|
98
|
+
updateField(this.endpoint, this.templateid, this.fieldname, { setting: newSettings })
|
|
99
|
+
.then(field => {
|
|
100
|
+
var _a;
|
|
101
|
+
console.log('Update result', field);
|
|
102
|
+
updateStoreField(this.fieldStore, this.fieldname, field);
|
|
103
|
+
(_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: field.name, settings: newSettings, field });
|
|
104
|
+
Object.assign(e.target.dataset, { x: 0, y: 0, h: 0 });
|
|
105
|
+
})
|
|
106
|
+
.catch(e => console.log('Field update failed', e));
|
|
107
|
+
}
|
|
108
|
+
render() {
|
|
109
|
+
var _a, _b;
|
|
110
|
+
const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
|
|
111
|
+
const roleIndex = getRoleIndex(this.roleStore, field.role_name);
|
|
112
|
+
const backgroundColor = field['rgba'] || getRGBA(roleIndex);
|
|
113
|
+
if (!field) {
|
|
114
|
+
return h(Fragment, null);
|
|
115
|
+
}
|
|
116
|
+
const settings = getFieldSettings(field);
|
|
117
|
+
let disabled = (_b = (_a = this.disabled) !== null && _a !== void 0 ? _a : settings.disabled) !== null && _b !== void 0 ? _b : false;
|
|
118
|
+
const value = (settings === null || settings === void 0 ? void 0 : settings.result) || '';
|
|
119
|
+
const width = settings.width || 150;
|
|
120
|
+
// TODO: This is an outdated technique from the old system. We should compute it.
|
|
121
|
+
const maxlength = width / 5;
|
|
122
|
+
if (this.done) {
|
|
123
|
+
return h(Host, { class: { done: this.done } }, value);
|
|
124
|
+
}
|
|
125
|
+
return (h(Host, { class: { required: field.required, disabled, done: this.done }, style: { backgroundColor } }, h("input", { type: "text", name: field.name, placeholder: settings === null || settings === void 0 ? void 0 : settings.placeholder, tabIndex: settings === null || settings === void 0 ? void 0 : settings.order, value: value, disabled: disabled, required: field === null || field === void 0 ? void 0 : field.required, ref: el => (this.inputEl = el), maxlength: maxlength }), this.editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${field.name}`, style: { transform: `scale(${Math.floor((1 / this.xscale) * 1000) / 1000}, ${Math.floor((1 / this.yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
|
|
126
|
+
e.stopPropagation();
|
|
127
|
+
this.showingProperties = !this.showingProperties;
|
|
128
|
+
} }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${field.name}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: field.name, onClose: () => (this.showingProperties = false), onDelete: () => {
|
|
129
|
+
var _a;
|
|
130
|
+
(_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: field.name });
|
|
131
|
+
return this.hideSettingsPanel();
|
|
132
|
+
}, onSettingsChanged: e => {
|
|
133
|
+
var _a;
|
|
134
|
+
(_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
|
|
135
|
+
return this.hideSettingsPanel();
|
|
136
|
+
}, helpText: 'Text boxes may be used to capture simple text input. Participant-entered values will be stored for later retrieval via the "name" field.<br /><br />If marked required, the participant must complete the field before proceeding.' })))))));
|
|
137
|
+
}
|
|
138
|
+
get el() { return getElement(this); }
|
|
139
|
+
};
|
|
140
|
+
VerdocsFieldTextbox.style = verdocsFieldTextboxCss;
|
|
141
|
+
|
|
142
|
+
export { VerdocsFieldTextbox as verdocs_field_textbox };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var __assign=this&&this.__assign||function(){__assign=Object.assign||function(e){for(var t,i=1,n=arguments.length;i<n;i++){t=arguments[i];for(var o in t)if(Object.prototype.hasOwnProperty.call(t,o))e[o]=t[o]}return e};return __assign.apply(this,arguments)};var __awaiter=this&&this.__awaiter||function(e,t,i,n){function o(e){return e instanceof i?e:new i((function(t){t(e)}))}return new(i||(i=Promise))((function(i,r){function s(e){try{l(n.next(e))}catch(e){r(e)}}function a(e){try{l(n["throw"](e))}catch(e){r(e)}}function l(e){e.done?i(e.value):o(e.value).then(s,a)}l((n=n.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var i={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},n,o,r,s;return s={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(s[Symbol.iterator]=function(){return this}),s;function a(e){return function(t){return l([e,t])}}function l(s){if(n)throw new TypeError("Generator is already executing.");while(i)try{if(n=1,o&&(r=s[0]&2?o["return"]:s[0]?o["throw"]||((r=o["return"])&&r.call(o),0):o.next)&&!(r=r.call(o,s[1])).done)return r;if(o=0,r)s=[s[0]&2,r.value];switch(s[0]){case 0:case 1:r=s;break;case 4:i.label++;return{value:s[1],done:false};case 5:i.label++;o=s[1];s=[0];continue;case 7:s=i.ops.pop();i.trys.pop();continue;default:if(!(r=i.trys,r=r.length>0&&r[r.length-1])&&(s[0]===6||s[0]===2)){i=0;continue}if(s[0]===3&&(!r||s[1]>r[0]&&s[1]<r[3])){i.label=s[1];break}if(s[0]===6&&i.label<r[1]){i.label=r[1];r=s;break}if(r&&i.label<r[2]){i.label=r[2];i.ops.push(s);break}if(r[2])i.ops.pop();i.trys.pop();continue}s=t.call(e,i)}catch(e){s=[6,e];o=0}finally{n=r=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};System.register(["./index-2cb882e6.system.js","./interact.min-6993d512.system.js","./index-86ac2c85.system.js","./Colors-07ec77d2.system.js","./TemplateRoleStore-d6891a0a.system.js","./TemplateFieldStore-38c23e55.system.js","./utils-8d0be7fd.system.js","./Icons-946c0dca.system.js","./_commonjsHelpers-6db5cb32.system.js","./Fields-7f7528ae.system.js","./Files-1f864782.system.js","./Primitives-48ca5422.system.js","./index-dc89fb25.system.js","./index-694bb1e8.system.js","./Types-f4515582.system.js"],(function(e){"use strict";var t,i,n,o,r,s,a,l,d,c,u,f,h,p,g,v;return{setters:[function(e){t=e.r;i=e.i;n=e.h;o=e.F;r=e.e;s=e.j},function(e){a=e.i},function(e){l=e.V;d=e.J},function(e){c=e.g},function(e){u=e.g;f=e.a},function(e){h=e.g;p=e.u},function(e){g=e.g},function(e){v=e.S},function(){},function(){},function(){},function(){},function(){},function(){},function(){}],execute:function(){var b='verdocs-field-textbox{font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;width:150px;height:15px;display:block;font-size:11px;letter-spacing:-0.2px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-textbox.disabled{opacity:0.5}verdocs-field-textbox input{cursor:inherit;width:100%;height:100%;border:none;outline:none;padding:0 3px;font-size:11px;background:none;font-weight:500;position:absolute;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87)}verdocs-field-textbox input.hide{display:none}verdocs-field-textbox.required{border:1px solid #cc0000}verdocs-field-textbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-textbox verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-textbox verdocs-button-panel[data-active],verdocs-field-textbox verdocs-button-panel:hover{opacity:1}verdocs-field-textbox verdocs-button-panel .icon svg{fill:#333333}verdocs-field-textbox verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-textbox [data-lastpass-icon-root]{display:none !important}verdocs-field-textbox .settings-icon{position:absolute;top:-4px;left:-18px;display:inline-block;cursor:pointer;opacity:0.6}verdocs-field-textbox .settings-icon svg{fill:#707ae5}verdocs-field-textbox .settings-icon:hover{opacity:1}';var m=e("verdocs_field_textbox",function(){function e(e){t(this,e);this.settingsChanged=i(this,"settingsChanged",7);this.deleted=i(this,"deleted",7);this.fieldStore=null;this.roleStore=null;this.endpoint=l.getDefault();this.templateid="";this.fieldname="";this.disabled=false;this.editable=false;this.moveable=false;this.done=false;this.xscale=1;this.yscale=1;this.pagenumber=1;this.showingProperties=false}e.prototype.focusField=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.inputEl.focus();return[2]}))}))};e.prototype.showSettingsPanel=function(){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(t){e=document.getElementById("verdocs-settings-panel-".concat(this.fieldname));if(e&&e.showPanel){e.showPanel()}return[2]}))}))};e.prototype.hideSettingsPanel=function(){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(t){e=document.getElementById("verdocs-settings-panel-".concat(this.fieldname));if(e&&e.hidePanel){e.hidePanel()}return[2]}))}))};e.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.fieldStore=h(this.templateid);this.roleStore=u(this.templateid);return[2]}))}))};e.prototype.componentDidRender=function(){a.dynamicDrop(true);if(this.editable){a(this.el).resizable({edges:{top:false,bottom:false,left:true,right:true},listeners:{start:this.handleResizeStart.bind(this),move:this.handleResize.bind(this),end:this.handleResizeEnd.bind(this)}})}};e.prototype.handleResizeStart=function(e){e.preventDefault();e.stopPropagation()};e.prototype.handleResize=function(e){var t=e.target.dataset,i=t.x,n=i===void 0?0:i,o=t.y,r=o===void 0?0:o,s=t.h,a=s===void 0?0:s;var l=e.rect,d=l.width,c=l.height;n=(parseFloat(n)||0)+e.deltaRect.left;r=(parseFloat(r)||0)+e.deltaRect.top;a=(parseFloat(a)||0)+e.deltaRect.height;d/=this.xscale;c/=this.yscale;Object.assign(e.target.style,{width:"".concat(d,"px"),height:"".concat(c,"px"),transform:"scale(".concat(this.xscale,", ").concat(this.yscale,"); translate(").concat(n,"px, ").concat(r+a,"px)")});Object.assign(e.target.dataset,{x:n,y:r,h:a})};e.prototype.handleResizeEnd=function(e){var t=this;var i=this.fieldStore.get("fields").find((function(e){return e.name===t.fieldname}));var n=__assign({},g(i));var o=e.target.style.transform.split("(")[1].split(")")[0].split(",").map(parseFloat),r=o[0],s=o[1];console.log({translateX:r,translateY:s});n.width=Math.round(parseFloat(e.target.style.width));n.height=Math.round(parseFloat(e.target.style.height));d(this.endpoint,this.templateid,this.fieldname,{setting:n}).then((function(i){var o;console.log("Update result",i);p(t.fieldStore,t.fieldname,i);(o=t.settingsChanged)===null||o===void 0?void 0:o.emit({fieldName:i.name,settings:n,field:i});Object.assign(e.target.dataset,{x:0,y:0,h:0})})).catch((function(e){return console.log("Field update failed",e)}))};e.prototype.render=function(){var e=this;var t,i;var s=this.fieldStore.get("fields").find((function(t){return t.name===e.fieldname}));var a=f(this.roleStore,s.role_name);var l=s["rgba"]||c(a);if(!s){return n(o,null)}var d=g(s);var u=(i=(t=this.disabled)!==null&&t!==void 0?t:d.disabled)!==null&&i!==void 0?i:false;var h=(d===null||d===void 0?void 0:d.result)||"";var p=d.width||150;var b=p/5;if(this.done){return n(r,{class:{done:this.done}},h)}return n(r,{class:{required:s.required,disabled:u,done:this.done},style:{backgroundColor:l}},n("input",{type:"text",name:s.name,placeholder:d===null||d===void 0?void 0:d.placeholder,tabIndex:d===null||d===void 0?void 0:d.order,value:h,disabled:u,required:s===null||s===void 0?void 0:s.required,ref:function(t){return e.inputEl=t},maxlength:b}),this.editable&&n(o,null,n("div",{id:"verdocs-settings-panel-trigger-".concat(s.name),style:{transform:"scale(".concat(Math.floor(1/this.xscale*1e3)/1e3,", ").concat(Math.floor(1/this.yscale*1e3)/1e3,")")},class:"settings-icon",innerHTML:v,onClick:function(t){t.stopPropagation();e.showingProperties=!e.showingProperties}}),this.showingProperties&&n("verdocs-portal",{anchor:"verdocs-settings-panel-trigger-".concat(s.name),onClickAway:function(){return e.showingProperties=false}},n("verdocs-template-field-properties",{templateId:this.templateid,fieldName:s.name,onClose:function(){return e.showingProperties=false},onDelete:function(){var t;(t=e.deleted)===null||t===void 0?void 0:t.emit({fieldName:s.name});return e.hideSettingsPanel()},onSettingsChanged:function(t){var i;(i=e.settingsChanged)===null||i===void 0?void 0:i.emit(t.detail);return e.hideSettingsPanel()},helpText:'Text boxes may be used to capture simple text input. Participant-entered values will be stored for later retrieval via the "name" field.<br /><br />If marked required, the participant must complete the field before proceeding.'}))))};Object.defineProperty(e.prototype,"el",{get:function(){return s(this)},enumerable:false,configurable:true});return e}());m.style=b}}}));
|